/**
 * Barua app tokens — derived from brand/guideline.html (locked 2026-08-12).
 * Semantic names only; components never use raw hex (guideline mandate).
 * Light = cream paper. Dark = second theme, not inversion (#121212 / #E86C43).
 * Proportions: 60% cream, 30% ink/neutrals, 10% tomato.
 */

:root {
  /* brand primitives — reference only, components use semantic tokens below */
  --brand-tomato: #da3d12;
  --brand-tomato-text: #b5370f;
  --brand-cream: #faf5ec;
  --brand-ink: #201b16;
  --brand-ochre: #b36a00;

  /* surfaces */
  --color-surface: #faf5ec;
  --color-surface-raised: #fffdf8;
  --color-surface-sunken: #f2ebdd;
  --color-border: #201b1618;
  --color-border-strong: #201b1630;

  /* text */
  --color-text: #201b16;
  --color-text-muted: #201b1699;
  --color-text-subtle: #201b1666;
  --color-text-on-action: #ffffff;

  /* action — tomato as the 10% accent */
  --color-action-primary: #da3d12;
  --color-action-primary-hover: #c23610;
  --color-action-link: #b5370f;
  --color-accent-soft: #da3d1214;

  /* state — error shifts to crimson so it never reads as brand */
  --color-success: #1e7f4f;
  --color-success-soft: #1e7f4f14;
  --color-error: #d22b54;
  --color-error-soft: #d22b5414;
  --color-warning: #b36a00;
  --color-warning-soft: #b36a0014;
  --color-neutral-soft: #201b160f;

  /* type */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tracking-tight: -0.02em;

  /* space + radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px #201b1610, 0 8px 24px #201b160a;
}

:root[data-theme='dark'] {
  --color-surface: #121212;
  --color-surface-raised: #191817;
  --color-surface-sunken: #0d0d0d;
  --color-border: #eee6df1a;
  --color-border-strong: #eee6df33;

  --color-text: #eee6df;
  --color-text-muted: #eee6dfa6;
  --color-text-subtle: #eee6df70;
  --color-text-on-action: #121212;

  --color-action-primary: #e86c43;
  --color-action-primary-hover: #f07c55;
  --color-action-link: #e86c43;
  --color-accent-soft: #e86c4318;

  --color-success: #4ec08a;
  --color-success-soft: #4ec08a18;
  --color-error: #ef6b8c;
  --color-error-soft: #ef6b8c18;
  --color-warning: #d69a3c;
  --color-warning-soft: #d69a3c18;
  --color-neutral-soft: #eee6df12;

  --shadow-card: 0 1px 2px #0006, 0 8px 24px #0004;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
}

a {
  color: var(--color-action-link);
}

/* Barua app — layout + components. Tokens only (see theme.css). */

.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ---------------- sidebar ---------------- */
.sidebar {
  background: var(--color-surface-sunken);
  border-right: 1px solid var(--color-border);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.sidebar__brand {
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar__brand img {
  width: 92px;
  display: block;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 0 8px 6px;
}
.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.nav__item:hover {
  background: var(--color-neutral-soft);
  color: var(--color-text);
}
.nav__item--active {
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-weight: 600;
}
.nav__count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-action-primary);
}
.sidebar__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 11.5px;
  color: var(--color-text-subtle);
}
.hamburger {
  display: none;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.themetoggle {
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
}

/* ---------------- content ---------------- */
.workspace-picker { display: flex; flex-direction: column; gap: 9px; padding: 0 8px; min-width: 0; }
.workspace-picker label { color: var(--color-text-muted); font-size: 12px; font-weight: 600; }
.workspace-picker select { width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; }
.workspace-picker .linkbtn { align-self: flex-start; text-align: left; }
.workspace-origin { overflow-wrap: anywhere; color: var(--color-text-muted); font-size: 12px; }
.workspace-footer { align-items: flex-start; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.workspace-form { max-width: 600px; }
.workspace-form h1, .workspace-form h2, .workspace-team h2 { margin-top: 0; font-size: 21px; }
.workspace-form .field { margin: 20px 0; }
.main > .auth { min-height: 0; height: 100%; overflow-y: auto; padding: 28px; }
.invitation-title { font-size: 22px; overflow-wrap: anywhere; }
.workspace-team { display: flex; flex-direction: column; gap: 18px; }
.team-invite { display: flex; align-items: flex-end; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.team-invite .field { flex: 1; min-width: 180px; margin: 0; }
.team-list { margin: 18px 0; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.team-person { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.team-row .actions { flex-wrap: wrap; }
.team-owner-hint { font-size: 12px; max-width: 210px; }
.team-confirm { max-width: min(480px, calc(100vw - 40px)); color: var(--color-text); background: var(--color-surface-raised); box-shadow: var(--shadow-card); margin: auto; }
.team-confirm::backdrop { background: var(--color-neutral-soft); backdrop-filter: blur(3px); }
.btn--danger { color: var(--color-text-on-action); background: var(--color-error); }

.main {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.topbar {
  padding: 20px 28px 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
}
.topbar h1 {
  font-size: 17px;
}
.topbar__sub {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}
.scroll {
  overflow-y: auto;
  padding: 24px 28px 40px;
}

/* ---------------- stats ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
/* Six tiles need about 845px of grid. Below that, auto-fit lays out five
   and orphans the sixth on a row of its own, which reads as if that step
   left the funnel. Break evenly instead. Both six-tile rows are affected
   (the Overview funnel and the Audience row), so the rule keys on the tile
   count rather than on either row's identity.

   The upper bound is 1168px, not the 1152px I measured. 1152 is where six
   tiles first hold together on a machine with OVERLAY scrollbars (macOS by
   default). A classic scrollbar, which is the Windows default, takes
   another 15 to 17px out of `.scroll` whenever the page overflows, so the
   same orphan would come back between 1152 and 1168 on those machines. The
   cost of the wider bound is that a macOS viewport in that 16px band shows
   three and three where six would have fitted, which is a layout, whereas
   the alternative is a broken one. A container query would be exact, but
   `.stats` is itself the grid and would need a wrapper element on every
   screen that uses it.

   Bounded BELOW at 901px as well, and that half is load-bearing: `:has()`
   outranks the plain `.stats` rule in the phone block, so without the
   min-width a six-tile row would stay three across on a 390px screen
   instead of dropping to the two columns the phone layout intends. A
   media query is the fix rather than juggling specificity, because the
   two rules describe different situations rather than competing. */
@media (min-width: 901px) and (max-width: 1168px) {
  .stats:has(> .stat:nth-child(6)) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.stat {
  background: var(--color-surface);
  padding: 16px 18px;
}
.stat__value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.stat__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-top: 2px;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 10px;
}

/* ---------------- list + detail ---------------- */
.split {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
  overflow: hidden;
}
.list {
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}
.row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-left: 2px solid transparent;
  background: none;
  padding: 13px 18px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.row:hover {
  background: var(--color-neutral-soft);
}
.row--active {
  background: var(--color-accent-soft);
  border-left-color: var(--color-action-primary);
}
.row__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.row__title {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__time {
  font-size: 11.5px;
  color: var(--color-text-subtle);
  flex-shrink: 0;
}
.row__sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__chips {
  margin-top: 7px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip--ok {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.chip--warn {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.chip--err {
  background: var(--color-error-soft);
  color: var(--color-error);
}
.chip--brand {
  background: var(--color-accent-soft);
  color: var(--color-action-link);
}

/* ---------------- draft detail ---------------- */
.detail {
  display: grid;
  grid-template-columns: 1fr 300px;
  overflow: hidden;
}
.message {
  overflow-y: auto;
  padding: 26px 28px;
  background: var(--color-surface-sunken);
}
.message__subject {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}
.message__to {
  font-size: 12.5px;
  color: var(--color-text-subtle);
  margin-bottom: 16px;
}
.message__sheet {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.message__sheet iframe {
  width: 100%;
  border: 0;
  display: block;
  min-height: 460px;
}
.why {
  border-left: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 22px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.why__block h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 6px;
}
.why__block p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
/* a state the reviewer must read before deciding: unknown history, an
   ambiguous send. Always carries the words; the tint only draws the eye. */
.notice--warn {
  background: var(--color-warning-soft);
  padding: 8px 10px;
  border-radius: 6px;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}
.kv span:first-child {
  color: var(--color-text-subtle);
}
.kv span:last-child {
  font-weight: 600;
  text-align: right;
}
.actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.btn {
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
}
.btn--primary:hover {
  background: var(--color-action-primary-hover);
}
.btn--ghost {
  background: none;
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
.btn--ghost:hover {
  color: var(--color-text);
  border-color: var(--color-text-subtle);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------------- empty ---------------- */
.empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  text-align: center;
}
.empty h3 {
  font-size: 16px;
  font-weight: 700;
}
.empty p {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* Mobile action rows grow buttons horizontally; a vertical retry panel must
   keep its button at the normal touch-target height. */
.empty > .btn {
  flex: none;
}

/* ---------------- table ---------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.table td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.table tr:hover td {
  background: var(--color-neutral-soft);
}
.muted {
  color: var(--color-text-muted);
}
.filters {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filter {
  border: 1px solid var(--color-border);
  background: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}
.filter--active {
  background: var(--color-accent-soft);
  border-color: transparent;
  color: var(--color-action-link);
}

/* ---------------- forms ---------------- */
textarea.field {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
}
textarea.field:focus {
  outline: 2px solid var(--color-accent-soft);
  border-color: var(--color-action-primary);
}
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--color-surface-raised);
  margin-bottom: 18px;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline__item {
  border-left: 2px solid var(--color-border-strong);
  padding: 2px 0 10px 14px;
}
.timeline__time {
  font-size: 11.5px;
  color: var(--color-text-subtle);
}
.timeline__body {
  font-size: 13px;
  margin-top: 2px;
}
.timeline--compact {
  gap: 6px;
  margin-top: 8px;
}
.timeline--compact .timeline__item {
  padding-bottom: 6px;
}
.timeline--compact .timeline__body {
  font-size: 12.5px;
}

/* the activity strip: one bar per day, height = engaged time, one hue */
.spark {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 2px;
  height: 36px;
  margin: 4px 0 0;
}
.spark__bar {
  display: block;
  background: var(--color-action-link);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
}
.spark__bar--empty {
  background: var(--color-border-strong);
  height: 3px;
  border-radius: 0;
}
/* a day with visits but no digest yet: on the strip, not a measure */
.spark__bar--pending {
  background: var(--color-accent-soft);
  border: 1px dashed var(--color-action-link);
  border-bottom: 0;
}
/* a day whose visits the digester skipped: visited, never measured */
.spark__bar--unmeasured {
  background: var(--color-neutral-soft);
  border: 1px solid var(--color-border-strong);
  border-bottom: 0;
}
.spark__marks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 14px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
}
.spark__mark--email {
  color: var(--color-action-link);
}
.spark__mark--draft {
  font-size: 8px;
}

/* ---------------- autonomy ladder ---------------- */
.autonomy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.autonomy__lede {
  font-size: 13px;
  margin: 0 0 14px;
  max-width: 62ch;
}
.autonomy--compact {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 0 0 10px;
}
.ladder {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ladder__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
}
.ladder__step--active {
  color: var(--color-text);
  border-color: transparent;
  background: var(--color-accent-soft);
  font-weight: 600;
}
.ladder__num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-neutral-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.ladder__step--active .ladder__num {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
}
.progresses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.progress__top {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.progress__track {
  height: 5px;
  border-radius: 3px;
  background: var(--color-neutral-soft);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--color-action-primary);
  border-radius: 3px;
}
/* A play row that links to its waiting draft: a full-width unstyled button
   so the whole line is the click target, with the link color on the right-
   hand call to action. */
.progress--link {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
/* Body-size text takes the link token, not action-primary: the guideline
   reserves the display token for larger UI, and the link token carries the
   contrast this 12.5px line needs. */
.progress--link .autonomy__review {
  color: var(--color-action-link);
}
.progress--link:hover .autonomy__review {
  text-decoration: underline;
}

/* ---------------- mobile ---------------- */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* Header bar with a hamburger; nav collapses into a drawer under it. */
  .sidebar {
    flex-direction: column;
    gap: 0;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
  }
  .sidebar__brand {
    padding: 0;
    width: 100%;
  }
  .sidebar__brand img {
    width: 72px;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav {
    display: none;
    width: 100%;
    padding-top: 10px;
    gap: 2px;
  }
  .shell--menu-open .nav {
    display: flex;
    flex-direction: column;
  }
  .nav__label {
    display: none;
  }
  .nav__item {
    height: 42px;
    font-size: 15px;
    padding: 0 10px;
  }
  .sidebar__foot {
    display: none;
    margin-top: 0;
    padding: 10px 10px 4px;
    width: 100%;
  }
  .shell--menu-open .sidebar__foot {
    display: flex;
  }

  .topbar {
    padding: 14px 16px 10px;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .scroll {
    padding: 16px 16px 40px;
  }

  /* One column, one scroll. Nested scroll panes are wrong on a phone, and an
     `auto` grid row containing an overflow:auto child collapses to 0. */
  .split {
    display: block;
    overflow-y: auto;
  }
  .list {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    overflow-y: visible;
    max-height: none;
  }
  .detail {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  /* on a phone the WHY comes first — it is the decision, the message is the evidence */
  .why {
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 16px;
  }
  .message {
    padding: 16px;
  }
  .message__sheet iframe {
    min-height: 380px;
  }
  .actions {
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    padding: 10px 0 4px;
  }
  .btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .table td,
  .table th {
    padding-right: 18px;
  }
}

@media (max-width: 560px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .ladder {
    flex-direction: column;
  }
  .ladder__step {
    width: 100%;
  }
}

/* ---------------- messages on a person ---------------- */
.message-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.message-row:last-child {
  border-bottom: 0;
}
.message-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0 0 6px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.message-row__subject {
  font-size: 13.5px;
  font-weight: 600;
}
.message-row__head:hover .message-row__subject {
  color: var(--color-action-link);
}
.message-row__body {
  margin-top: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.message-row__body iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

/* ---------------- profile ---------------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.profile-grid .card {
  margin-bottom: 0;
}
.profile-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 8px;
}
@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* A phone shows one pane at a time: pick a row, drill in, come back.
   Stacking a detail pane under a twenty-row list means the tap appears to do
   nothing. The back link only exists in that drilled-in mobile state. */
.back-link {
  display: none;
}
@media (max-width: 900px) {
  .split--selected .list {
    display: none;
  }
  .back-link {
    display: block;
    order: -2; /* above the WHY pane, which is itself pulled to the top */
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 14px 16px;
    font: inherit;
    font-size: 14px;
    color: var(--color-text-subtle);
    cursor: pointer;
  }
}

/* ---------------- sign in / create workspace ---------------- */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-surface-sunken);
}
.auth__card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 22px;
}
.terms-gate { flex-direction: column; justify-content: flex-start; gap: 24px; }
.terms-gate > * { flex-shrink: 0; }
.terms-gate__agents { width: 100%; max-width: 760px; }
.terms-gate__agents > summary { cursor: pointer; font-weight: 600; }
.terms-gate__agents[open] > summary { margin-bottom: 24px; }
.auth__mark {
  height: 26px;
  display: block;
}
:root[data-theme='dark'] .auth__mark {
  filter: invert(1);
}
.auth__tag {
  margin: 14px 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}
.field {
  display: block;
  margin-bottom: 14px;
}
.field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-subtle);
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  min-height: 44px;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.field input:focus {
  outline: 2px solid var(--color-action-primary);
  outline-offset: -1px;
}
.field__hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--color-text-subtle);
}
/* The terms tick. It inherits .field for spacing but inverts its layout: the
   control sits beside the sentence rather than under a label, because the
   sentence is the thing being agreed to and must read as one. */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}
.field--check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--color-action-primary);
}
.field--check > span {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--color-text);
}
.field--check a {
  color: var(--color-action-primary);
  font-weight: 700;
}

.auth__error {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-error);
}
.auth__submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  min-height: 44px;
}
.auth__switch {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 8px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  font: inherit;
  font-size: 13px;
  color: var(--color-text-subtle);
  cursor: pointer;
}
.auth__switch:hover {
  color: var(--color-action-link);
}
.sidebar__footactions {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.sidebar__footactions .themetoggle {
  white-space: nowrap;
}
.sidebar__foot > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------------- setup ---------------- */
.setup__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.setupstep {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}
.setupstep__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-subtle);
  background: var(--color-neutral-soft);
}
.setupstep--done .setupstep__mark {
  color: var(--color-success);
  background: var(--color-success-soft);
}
.setupstep__body {
  /* a grid column defaults to min-content, so the code block would push the
     whole page sideways on a phone instead of scrolling inside its own box */
  min-width: 0;
}
.setupstep__body h4 {
  margin: 2px 0 4px;
  font-size: 15px;
}
.setupstep--done .setupstep__body {
  /* a grid column defaults to min-content, so the code block would push the
     whole page sideways on a phone instead of scrolling inside its own box */
  min-width: 0;
}
.setupstep__body h4 {
  color: var(--color-text-muted);
}
.setupstep__body p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 62ch;
  color: var(--color-text-muted);
}
.setupstep__state {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 10px 0;
}
.setupstep__state--waiting {
  /* waiting is not an error: red here reads as "something went wrong" */
  color: var(--color-text-muted);
}
.setupstep__state--waiting::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--color-action-primary);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .setupstep__state--waiting::before { animation: none; opacity: 0.6; }
}
.snippet {
  max-width: 100%;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  overflow-x: auto;
}
/* ---------------- deliverability: DNS records table ---------------- */
.dnstable-wrap {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow-x: auto;
}
.dnstable {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.dnstable th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  background: var(--color-surface-sunken);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.dnstable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: 12.5px;
}
.dnstable tr:last-child td {
  border-bottom: none;
}
.dnstable__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  word-break: break-all;
}
.dnstable td .btn--sm {
  margin-top: 7px;
}
.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
}
.snippet pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  /* one long line now: wrap it rather than hide the key past the edge */
  white-space: pre-wrap;
  word-break: break-all;
}
.snippet__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 12.5px;
}
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--color-action-link);
  cursor: pointer;
  text-decoration: underline;
}
.playbook {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  margin-bottom: 10px;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.senderfields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
  max-width: 640px;
}
.nav__count--quiet {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
@media (max-width: 900px) {
  .setup__head {
    flex-direction: column;
  }
  .senderfields {
    grid-template-columns: 1fr;
  }
}
.auth__forgot {
  display: block;
  margin: 12px 0 0;
  font-size: 13px;
}
.auth__sent {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------------- session trail ---------------- */
.timeline__toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.timeline__toggle:disabled {
  cursor: default;
}
.timeline__toggle .chip {
  margin-left: 8px;
}
.timeline__chev {
  margin-left: 6px;
  color: var(--color-text-subtle);
  font-size: 11px;
}
.trail {
  margin: 8px 0 4px;
  padding: 8px 0 2px 10px;
  border-left: 2px solid var(--color-border);
  font-size: 12.5px;
}
.trail__step {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  align-items: baseline;
}
.trail__ts {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--color-text-subtle);
  flex: none;
}
.trail__kind {
  flex: none;
  width: 14px;
  text-align: center;
  color: var(--color-text-subtle);
}
.trail__step--identified .trail__label {
  color: var(--color-success);
  font-weight: 600;
}
.trail__step--friction .trail__label {
  color: var(--color-warning);
}
.trail__step--click .trail__label {
  color: var(--color-text-muted);
}
.trail__label {
  overflow-wrap: anywhere;
}

.linkbtn--danger {
  color: var(--color-error);
  margin-top: 10px;
  font-size: 12.5px;
}

/* ---------------- live demo ---------------- */
.demo__bar { display: flex; gap: 10px; margin: 8px 0 16px; max-width: 820px; }
.demo__bar input {
  flex: 1; font: inherit; font-size: 14px; padding: 10px 12px; min-height: 44px;
  color: var(--color-text); background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.demo__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.demo__page, .demo__email { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-raised); }
.demo__browser { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); }
.demo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.demo__addr { margin-left: 10px; font-size: 12px; color: var(--color-text-subtle); font-family: ui-monospace, Menlo, monospace; }
.demo__shotwrap { position: relative; max-height: 620px; overflow: hidden; }
.demo__shot { width: 100%; display: block; }
.demo__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72)); }
.demo__step { color: #fff; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  animation: demoIn 0.35s ease; }
.demo__check { color: #4ade80; }
@keyframes demoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo__email { min-height: 400px; display: flex; flex-direction: column; }
.demo__waiting, .demo__silent { padding: 40px 24px; text-align: center; }
.demo__emailhead { padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.demo__from { font-size: 13px; color: var(--color-text-muted); }
.demo__subject { font-size: 15px; font-weight: 600; margin-top: 3px; }
.demo__frame { width: 100%; flex: 1; min-height: 480px; border: 0; background: #fff; }
.demo__why { padding: 12px 16px; border-top: 1px solid var(--color-border); font-size: 12.5px; }
@media (max-width: 900px) { .demo__stage { grid-template-columns: 1fr; } }

.demo__tabs { display: flex; gap: 4px; padding: 8px 8px 0; background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.demo__tab { font: inherit; font-size: 12.5px; padding: 8px 11px; border: 0; background: none; color: var(--color-text-subtle); cursor: pointer; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; }
.demo__tab--on { color: var(--color-text); font-weight: 600; background: var(--color-surface-raised); border-bottom-color: var(--color-action-primary); }

.canonical { margin-bottom: 18px; }
.canonical__summary { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.canonical__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.canonical__row { font-size: 13px; margin-top: 4px; }
.canonical__row .muted { margin-right: 6px; }

/* Brand pack form (Settings). Selects and textareas inside a .field take the
   input's sheet so the whole form reads as one control set. */
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  min-height: 44px;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.field textarea {
  min-height: 120px;
  line-height: 1.5;
  resize: vertical;
}
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-action-primary);
  outline-offset: -1px;
}
.field small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-subtle);
}
.brandgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 14px;
}
.brandgrid .field--wide {
  grid-column: 1 / -1;
}
.swatchrow {
  display: flex;
  gap: 8px;
  align-items: center;
}
.swatchrow input[type='color'] {
  width: 44px;
  flex: 0 0 44px;
  padding: 3px;
  cursor: pointer;
}
.fontpreview {
  margin-top: 8px;
  font-size: 19px;
  line-height: 1.3;
}
.logopreview {
  display: block;
  height: 32px;
  width: auto;
  max-width: 260px;
  margin-top: 8px;
}
.brandstatus {
  font-size: 12.5px;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .brandgrid {
    grid-template-columns: 1fr;
  }
}
/* The brand form is one fieldset so a save in flight freezes every field:
   the response replaces the form with what the server kept, and an edit
   typed during a slow save would otherwise vanish under it. */
.brandform {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.brandform:disabled {
  opacity: 0.65;
}

/* Colours card: one row per colour the template uses. */
.palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.palette__row {
  display: grid;
  grid-template-columns: 44px 130px 1fr auto;
  gap: 10px;
  align-items: center;
}
.palette__row input[type='color'] {
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  cursor: pointer;
}
.palette__row input:not([type='color']) {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  min-height: 44px;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.palette__role {
  font-size: 13px;
  font-weight: 600;
}
.brandpreview {
  width: 100%;
  height: 640px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #ffffff;
}
@media (max-width: 900px) {
  .palette__row {
    grid-template-columns: 44px 1fr;
  }
  .palette__row .palette__role,
  .palette__row > :nth-child(4) {
    grid-column: 2;
  }
  .brandpreview {
    height: 520px;
  }
}

/* The forward-to address in the Email template card. */
.harvest {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.harvest__address {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  user-select: all;
  overflow-wrap: anywhere;
}

/* The forwarded-email list and the read/preview/attach flow. */
.harvestlist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.harvestrow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}
.harvestrow__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  min-width: 0;
}
.harvestrow__meta span {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.harvestaudit {
  margin-top: 10px;
  font-size: 12.5px;
}
.harvestaudit ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
/* The runner: inside the viewport but invisible and untouchable. Never
   offscreen, display:none or visibility:hidden: the surgery measures boxes
   and computed styles inside it, and a frame the browser does not render
   gets no layout. */
.harvestframe {
  position: fixed;
  left: 0;
  top: 0;
  border: 0;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

/* ---------------- plays: the journey ---------------- */
/* One rail down the left, a stage marker per goal step, the cards hanging
   off it. Tokens only; the email sheet stays white like every preview. */
.play-intro {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.journey,
.journey__plays {
  list-style: none;
  margin: 0;
  padding: 0;
}
.journey {
  border-left: 2px solid var(--color-border-strong);
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  /* Each goal step is its own section of the journey; give it room to
     breathe (Chris, 2026-09-04). */
  gap: 64px;
}
.journey__stage {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 18px;
}
.journey__stage::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--color-action-primary);
  border: 2px solid var(--color-surface);
}
/* The goal step is the journey's heading, above the play names (19px) it
   groups: a real heading, not a caps label (Chris, 2026-09-04). */
.journey__stage-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
}
.journey__stage-note {
  font-size: 13px;
  color: var(--color-text-subtle);
}
.journey__plays {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.journey__item .card {
  margin-bottom: 0;
}
.play__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.play__name {
  /* The card's heading, not a row label: a play is the unit of the screen. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.play__id {
  font-size: 12px;
  color: var(--color-text-subtle);
  margin-top: 2px;
}
.play__pacing {
  font-size: 13px;
  margin-top: 8px;
}
.play__audience {
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
  max-width: 72ch;
}
.play__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  margin-top: 10px;
}
.play__mail {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr refuses to shrink below the
     thumbnail's declared width and the sheet overflows the card on a phone. */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.play__mail--open,
.play__mail--none {
  grid-template-columns: minmax(0, 1fr);
}
.play__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.play__subject {
  font-size: 14px;
  font-weight: 600;
}
.play__to {
  font-size: 12.5px;
  color: var(--color-text-subtle);
  margin: 3px 0 8px;
}
.play__note {
  font-size: 13px;
  margin-bottom: 8px;
}
/* The miniature: the top of the email rendered at 640px and scaled to half,
   clipped to a fixed window. Clicks go to the overlay button, not the
   frame (an iframe cannot sit inside a button). */
.play__thumb {
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 240px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.play__thumb iframe {
  width: 640px;
  height: 480px;
  border: 0;
  display: block;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}
.play__thumb-open {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
}
.play__thumb-open:focus-visible {
  outline: 2px solid var(--color-action-link);
  outline-offset: -2px;
}
.play__full iframe {
  width: 100%;
}
@media (max-width: 900px) {
  .play__mail {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Plays begin at journey scale. The map stays compact while detail has its
   own bounded pane; mobile drills into that pane with an explicit way back. */
.plays-map { padding: 28px 32px; }
.plays-map__heading, .plays-map__tools, .plays-map__mode, .plays-map__section-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.plays-map__heading h2 { font-size: 25px; }
.plays-map__heading p { margin: 6px 0 0; }
.plays-map__heading > .btn { flex-shrink: 0; }
.plays-map__review-count { border-left: 1px solid currentColor; margin-left: 12px; padding-left: 12px; }
.plays-map__mode { margin: 24px 0 18px; padding: 12px 0; border-block: 1px solid var(--color-border); font-size: 12px; flex-wrap: wrap; }
.plays-map__mode details { margin-left: auto; }
.plays-map__mode details[open] { width: 100%; }
.plays-map__mode summary { cursor: pointer; color: var(--color-action-link); }
.plays-map__mode details .card { margin: 12px 0 0 !important; }
.plays-map__switch { background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); padding: 20px; margin-bottom: 20px; border-radius: var(--radius); max-width: 720px; }
.plays-map__filters { display: flex; gap: 4px; flex-wrap: wrap; }
.plays-map__filters button { border: 0; background: transparent; color: var(--color-text-muted); font: inherit; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.plays-map__filters button[aria-pressed=true] { background: var(--color-text); color: var(--color-surface); }
.plays-map__search { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.plays-map__search input { width: 200px; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); padding: 9px 12px; border-radius: var(--radius-sm); color: var(--color-text); font: inherit; }
.plays-map__breadcrumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 20px 0; min-height: 24px; font-size: 12px; }
.plays-map__workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.plays-map--reviewing .plays-map__workspace { grid-template-columns: minmax(250px, .8fr) minmax(450px, 1.2fr); }
.plays-map__section-title { margin-bottom: 20px; font-size: 11px; }
.plays-map__section-title h3 { font-size: 14px; }
.plays-map__stages, .plays-map__members, .play-review__sequence ol { list-style: none; padding: 0; margin: 0; }
.plays-map__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius); overflow: hidden; }
.plays-map__stage { min-width: 0; background: var(--color-surface-raised); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.plays-map__stage > button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; min-height: 168px; padding: 18px 20px; gap: 5px; border: 0; text-align: left; font: inherit; color: inherit; background: transparent; cursor: pointer; }
.plays-map__stage > button:hover, .plays-map__stage.is-selected { background: var(--color-accent-soft); }
.plays-map__stage.is-selected > button { box-shadow: inset 3px 0 var(--color-action-primary); }
.plays-map__stage.is-audience > button { background: var(--color-accent-soft); }
.plays-map__stage.is-outcome > button { box-shadow: inset 0 -3px var(--color-success); }
.plays-map__stage .plays-map__stage-outcome { color: var(--color-success); }
.plays-map__stage-index { color: var(--color-text-muted); font-size: 10px; letter-spacing: .04em; }
.plays-map__stage strong { font-size: 15px; overflow-wrap: anywhere; }
.plays-map__stage-total { font-size: 32px; line-height: 1.3; font-weight: 600; letter-spacing: -.04em; }
.plays-map__stage-total small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--color-text-muted); margin-left: 6px; }
.plays-map__stage-meta { font-size: 11px; color: var(--color-action-link); }
.plays-map__stage--task, .plays-map__stage--unplaced { background: var(--color-surface-sunken); }
.plays-map--reviewing .plays-map__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plays-map--reviewing .plays-map__stage > button { min-height: 116px; padding: 12px; }
.plays-map--reviewing .plays-map__stage-total { font-size: 22px; }
.plays-map--reviewing .plays-map__stage strong { font-size: 12px; }
.plays-map--area:not(.plays-map--reviewing) .plays-map__stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.plays-map--area:not(.plays-map--reviewing) .plays-map__stage > button { min-height: 124px; padding: 12px; }
.plays-map--area:not(.plays-map--reviewing) .plays-map__stage strong { font-size: 12px; }
.plays-map--area:not(.plays-map--reviewing) .plays-map__stage-total { font-size: 24px; }
.plays-map__hint { max-width: 580px; color: var(--color-text-muted); margin-top: 24px; font-size: 12px; }
.plays-map__area { margin-top: 28px; }
.plays-map__members { border-top: 1px solid var(--color-border-strong); }
.plays-map__play { width: 100%; display: flex; justify-content: space-between; align-items: start; gap: 18px; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text); text-align: left; font: inherit; cursor: pointer; }
.plays-map__play:hover, .plays-map__play.is-selected { background: var(--color-accent-soft); }
.plays-map__play > span:first-child { min-width: 0; }
.plays-map__play strong { display: block; font-size: 13px; }
.plays-map__audience { color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; margin: 5px 0; }
.plays-map__outcome { font-size: 11px; color: var(--color-action-link); }
.plays-map__play-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 11px; }
.play-review__statuses { display: flex; gap: 5px; flex-wrap: wrap; }
.plays-map__play-meta .play-review__statuses { justify-content: flex-end; }
.play-review { min-width: 0; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; font-size: 13px; }
.play-review__header { padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.play-review__title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.play-review__workspace { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 28px; margin-top: 22px; align-items: start; }
.play-review__content { min-width: 0; }
.play-review__decision { min-width: 0; position: sticky; top: 20px; border-left: 1px solid var(--color-border); padding-left: 24px; }
.play-review__eyebrow { display: block; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 7px; }
.play-review__context { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); gap: 24px; padding: 18px 0 0; }
.play-review__context p { margin: 0; line-height: 1.6; }
.play-review__audience-areas { font-size: 11px; }
.play-review__tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--color-border-strong); }
.play-review__tabs { overflow-x: auto; }
.play-review__tabs button { font: inherit; color: var(--color-text-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 0 12px; cursor: pointer; white-space: nowrap; }
.play-review__tabs button[aria-selected=true] { border-color: var(--color-action-primary); color: var(--color-text); font-weight: 600; }
.play-review__update-dot { display: inline-block; width: 5px; height: 5px; background: var(--color-action-primary); border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.play-review [role=tabpanel] { padding-top: 18px; }
.play-review [role=tabpanel][hidden] { display: none; }
.play-review__conditions { margin-top: 18px; font-size: 12px; }
.play-review__preview { margin: 18px 0; }
@media (max-width: 800px) { .plays-map--reviewing .plays-map__heading > div, .plays-map--reviewing .plays-map__mode, .plays-map--reviewing .plays-map__tools, .plays-map--area:not(.plays-map--reviewing) .plays-map__overview { display: none; } }
.play-review__header h2 { font-size: 25px; margin: 14px 0 0; line-height: 1.3; }
.play-review__header > .linkbtn { font-size: 12px; }
.play-review__goal { border-left: 2px solid var(--color-success); padding-left: 10px; }
.play-review__notice, .play-review__feedback { background: var(--color-surface-sunken); padding: 12px 14px; border-radius: var(--radius-sm); }
.play-review .field { margin-top: 18px; }
.play-review summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.play-review__rules, .play-review__comparison { border-block: 1px solid var(--color-border); margin-top: 18px; }
.play-review__rules dl { margin: 0 0 12px; }
.play-review__rules dl > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 14px; padding: 7px 0; font-size: 12px; }
.play-review__rules dt { color: var(--color-text-muted); }
.play-review__rules dd { margin: 0; overflow-wrap: anywhere; }
.play-review__comparison { overflow-x: auto; }
.play-review__comparison table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.play-review__comparison th, .play-review__comparison td { padding: 8px; text-align: left; vertical-align: top; border: 1px solid var(--color-border); overflow-wrap: anywhere; white-space: pre-line; }
.play-review__sequence { margin-top: 0; }
.play-review__sequence h3, .play-review__email h3 { font-size: 15px; }
.play-review__entry { border-left: 2px solid var(--color-action-primary); padding: 2px 0 2px 12px; margin-bottom: 22px; font-size: 12px; }
.play-review__entry p { margin: 0; }
.play-review__sequence ol { display: flex; overflow-x: auto; padding: 12px 2px 8px; scroll-snap-type: x proximity; }
.play-review__sequence li { position: relative; flex: 1 0 190px; min-width: 0; max-width: 340px; padding-right: 28px; scroll-snap-align: start; }
.play-review__sequence li:last-child { padding-right: 0; }
.play-review__sequence li:not(:last-child)::before { content: '\2192'; position: absolute; top: 38px; right: 6px; left: auto; bottom: auto; border: 0; color: var(--color-text-muted); }
.play-review__sequence button { display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; min-height: 102px; padding: 16px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; color: var(--color-text); background: var(--color-surface-raised); text-align: left; cursor: pointer; }
.play-review__sequence button:hover { background: var(--color-surface-sunken); }
.play-review__sequence button.is-selected { border-color: var(--color-action-link); background: var(--color-accent-soft); }
.play-review__sequence button > span:nth-child(2) { flex: 1; }
.play-review__sequence small { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.play-review__step-index { flex-shrink: 0; color: var(--color-action-link); font-size: 10px; padding-top: 2px; }
.play-review__exit { margin: 10px 0 0; padding-left: 12px; font-size: 11px; color: var(--color-text-muted); line-height: 1.6; }
.play-review__exit > span { color: var(--color-success); margin-right: 4px; }
.play-review__inspect { padding: 28px 0 14px; margin-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 12px; }
.play-review__inspect p { margin: 5px 0; }
.play-review__email { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr); gap: 22px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.play-review__email-meta, .play-review__email-copy { min-width: 0; }
.play-review__email-meta { font-size: 12px; line-height: 1.6; }
.play-review__email-copy h4 { margin: 0 0 12px; }
.play-review__email iframe { display: block; border: 1px solid var(--color-border); width: 100%; height: 360px; background: var(--color-surface); border-radius: var(--radius-sm); }
.play-review__actions { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 12px; }
.play-review__actions > .btn { width: 100%; }
.play-review__actions fieldset { padding: 0; border: 0; margin: 0; }
.play-review__actions legend { font-weight: 600; margin-bottom: 10px; }
.play-review__actions fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 8px 0; }
.play-review__actions input { accent-color: var(--color-action-primary); }
.play-review__secondary { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
.plays-map .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plays-map__tools { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; margin: 0 0 28px; }
.plays-map__tools .plays-map__search { justify-self: end; }
.plays-map__tools > .btn { white-space: nowrap; }
.plays-map__filter-select select { padding: 8px 24px 8px 0; font: inherit; font-weight: 600; color: var(--color-text); background: transparent; border: 0; cursor: pointer; }
.plays-settings { margin-top: 24px; font-size: 12px; color: var(--color-text-muted); }
.plays-settings > summary { cursor: pointer; width: fit-content; }
.plays-settings .card { margin-top: 12px; }
.plays-results-note { margin: 0; font-size: 11px; color: var(--color-text-muted); }
.play-results { padding: 22px 0; }
.play-results__period { margin: 0 0 28px; color: var(--color-text-muted); font-size: 12px; }
.play-results__goal > strong { font-size: 34px; font-weight: 600; line-height: 1.2; }
.play-results__goal p { margin: 6px 0; font-size: 13px; }
.play-results__metrics { margin: 28px 0; border-block: 1px solid var(--color-border); }
.play-results__metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; }
.play-results__metrics dt { color: var(--color-text-muted); font-size: 13px; }
.play-results__metrics dd { margin: 0; text-align: right; font-weight: 600; font-size: 16px; }
.play-results__metrics small { display: block; font-size: 11px; color: var(--color-text-muted); font-weight: 400; }
.play-results__definition { color: var(--color-text-muted); font-size: 12px; line-height: 1.6; }
.play-results__definition summary { cursor: pointer; }
.play-results__empty { padding: 20px 0; color: var(--color-text-muted); }
.plays-map button:focus-visible, .play-review button:focus-visible, .plays-map input:focus-visible, .play-review select:focus-visible, .plays-map summary:focus-visible { outline: 2px solid var(--color-action-link); outline-offset: 3px; }
@media (max-width: 1100px) { .plays-map { padding: 24px; } .plays-map--reviewing .plays-map__workspace { grid-template-columns: minmax(210px, .65fr) minmax(380px, 1fr); gap: 18px; } .plays-map__tools { align-items: start; flex-wrap: wrap; } .plays-map--reviewing .plays-map__play { flex-direction: column; gap: 8px; } .plays-map--reviewing .plays-map__play-meta { align-items: flex-start; } }
@media (max-width: 1100px) { .play-review__workspace { grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; } .play-review__decision { padding-left: 18px; } .play-review__email { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .plays-map { padding: 20px 16px; } .plays-map__heading { align-items: start; flex-wrap: wrap; } .plays-map__heading h2 { font-size: 22px; } .plays-map__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plays-map__stage > button { padding: 14px; min-height: 150px; } .plays-map__section-title { align-items: start; flex-wrap: wrap; gap: 4px; } .plays-map--reviewing .plays-map__workspace { display: block; } .plays-map--reviewing .plays-map__context { display: none; } .play-review { padding: 18px; } .play-review__title { display: block; } .play-review__title .play-review__statuses { margin-top: 12px; } .play-review__context { grid-template-columns: minmax(0, 1fr); gap: 12px; } .play-review__workspace { display: flex; flex-direction: column; } .play-review__content, .play-review__decision { width: 100%; } .play-review__decision { border-left: 0; border-top: 1px solid var(--color-border); padding: 18px 0 0; position: static; } .play-review__tabs { gap: 18px; } .play-review__tabs button { font-size: 12px; } .play-review__email { grid-template-columns: minmax(0, 1fr); } .play-review__sequence li { flex-basis: 220px; } .plays-map__search { width: 100%; } .plays-map__search input { flex: 1; min-width: 0; } .plays-map__filters button { padding: 8px 10px; font-size: 12px; } .play-review__rules dl > div { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; } }

/* ---------------- setup: keys, brand confirm, events (ticket 15a) ---------------- */
.setupstep__sub {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
}
.snippet pre.snippet__wrap {
  /* the agent prompt is prose: wrap it between words (.snippet pre breaks
     anywhere, which suits a key but splits words here), and only break a
     word longer than the line */
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  margin: 0 0 8px;
}
.setupkeys__mode {
  margin: 0 0 16px;
}
.setupkeys__title {
  font-size: 13px;
  font-weight: 600;
}
.setupkeys__use {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  max-width: 62ch;
}
.setupkeys__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 8px;
  font-size: 13px;
}
.setupkeys__confirm {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.setupkeys__secret pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 8px;
}
.brandconfirm__lead {
  margin: 0 0 12px;
  font-size: 13.5px;
}
.setupevents {
  min-width: 480px;
}

.campaigns { max-width: 1440px; width: 100%; margin: 0 auto; }
.campaign-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.campaign-heading h2 { font-size: 23px; }
.campaign-heading h3 { font-size: 16px; }
.campaign-heading p { margin: 5px 0 0; }
.campaign-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.campaign-toolbar a { font-size: 13px; }
.campaign-caption { font-size: 12px; color: var(--color-text-muted); }
.campaign-empty { padding: 52px 28px; border-top: 1px solid var(--color-border); margin-top: 24px; max-width: 680px; }
.campaign-empty h3 { font-size: 20px; margin-bottom: 10px; }
.campaign-empty p { max-width: 500px; color: var(--color-text-muted); }
.campaign-list { margin-top: 24px; border-top: 1px solid var(--color-border); }
.campaign-row { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(130px, 1fr) minmax(140px, 1fr) minmax(100px, .7fr); align-items: center; gap: 22px; padding: 23px 4px; border-bottom: 1px solid var(--color-border); }
.campaign-row h3 { font-size: 15px; }
.campaign-row h3 a { color: var(--color-text); text-decoration: none; }
.campaign-row h3 a:hover { color: var(--color-action-link); text-decoration: underline; }
.campaign-row p { font-size: 12px; color: var(--color-text-muted); margin: 6px 0 0; }
.campaign-row__timing { font-size: 13px; }
.campaign-row__delivered { font-size: 13px; }
.campaign-row__delivered strong { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.campaign-status { justify-self: start; white-space: normal; }
.campaign-pagination { margin-top: 24px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--color-text-muted); }
.campaign-content { min-width: 0; }
.campaign-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.campaign-section > h3 { font-size: 16px; }
.campaign-section p { font-size: 13px; line-height: 1.65; }
.campaign-prose { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 800px; }
.campaign-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; font-size: 13px; margin: 20px 0; }
.campaign-facts dt { color: var(--color-text-muted); font-size: 12px; margin-bottom: 5px; }
.campaign-facts dd { margin: 0; overflow-wrap: anywhere; }
.campaign-notice { background: var(--color-warning-soft); border-left: 2px solid var(--color-warning); padding: 12px 16px; }
.campaign-rules { font-size: 13px; margin: 16px 0; }
.campaign-rules summary { cursor: pointer; color: var(--color-action-link); }
.campaign-rules p { padding: 12px 16px; border-left: 2px solid var(--color-border-strong); overflow-wrap: anywhere; }
.campaign-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 16px; gap: 20px; }
.campaign-metrics dt { color: var(--color-text-muted); font-size: 12px; }
.campaign-metrics dd { margin: 6px 0 0; font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.campaign-reasons { max-width: 780px; margin: 18px 0 0; font-size: 13px; }
.campaign-reasons > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.campaign-reasons dd { margin: 0; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.campaign-preview-tools { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.campaign-preview-tools .field { min-width: 140px; margin: 0; }
.campaign-preview-tools .field select { padding: 8px 10px; }
.campaign-preview-sizes { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.campaign-preview-sizes .btn { background: none; color: var(--color-text-muted); padding: 7px 12px; font-size: 12px; border: 0; }
.campaign-preview-sizes .btn[aria-pressed="true"] { background: var(--color-neutral-soft); color: var(--color-text); }
.campaign-subject { display: flex; gap: 14px; font-size: 13px; border: 1px solid var(--color-border); padding: 15px 18px; margin-top: 20px; border-radius: var(--radius) var(--radius) 0 0; }
.campaign-subject span { color: var(--color-text-muted); }
.campaign-subject strong { overflow-wrap: anywhere; }
.campaign-email__canvas { padding: 22px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.campaign-email__canvas iframe { display: block; width: 100%; max-width: 760px; height: 600px; margin: 0 auto; border: 0; border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.campaign-email__canvas--mobile iframe { max-width: 375px; }
.campaign-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.campaign-controls p { width: 100%; margin: 0; font-size: 13px; }
.campaign-controls__confirm { border-left: 2px solid var(--color-border-strong); padding: 12px 16px; width: 100%; }
.campaign-controls__confirm--cancel { border-left-color: var(--color-error); }
.campaign-controls__confirm .campaign-controls { margin-top: 12px; }
.campaign-alert { padding: 14px 16px; background: var(--color-error-soft); border-radius: var(--radius-sm); font-size: 13px; }
.campaign-results { margin-top: 32px; }
.campaign-results__table { overflow-x: auto; }
.campaign-results table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.campaign-results th { color: var(--color-text-muted); font-size: 12px; font-weight: 500; padding: 12px 16px 12px 0; }
.campaign-results td { border-top: 1px solid var(--color-border); padding: 14px 16px 14px 0; vertical-align: top; overflow-wrap: anywhere; }
.campaign-results td:first-child { min-width: 170px; }
.campaign-results td:nth-child(2) { min-width: 145px; }
.campaign-review-requests { margin-top: 28px; }
.campaign-review-requests .agent-review { margin-top: 16px; }
.segment-list { display: grid; gap: 0; margin-top: 24px; }
.segment { padding: 24px 0; border-top: 1px solid var(--color-border); }
.segment h3 { font-size: 17px; }
.segment p { max-width: 800px; font-size: 13px; }
.segment .campaign-metrics { max-width: 800px; }
@media (max-width: 900px) {
  .campaign-row { grid-template-columns: minmax(180px, 1.5fr) minmax(130px, 1fr); gap: 14px 24px; }
  .campaign-row__delivered { display: flex; align-items: baseline; gap: 7px; }
  .campaign-row__delivered strong { font-size: 17px; }
}
@media (max-width: 600px) {
  .campaign-heading h2 { font-size: 20px; }
  .campaign-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .campaign-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .campaign-metrics dd { font-size: 25px; }
  .campaign-facts { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .campaign-preview-tools { width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
  .campaign-preview-tools .field { min-width: 110px; flex: 1; }
  .campaign-email__canvas { padding: 8px; }
  .campaign-email__canvas iframe { height: 580px; }
  .campaign-subject { flex-direction: column; gap: 5px; }
}

@font-face{font-family:Manrope;src:url(/manrope-var.ttf);font-weight:100 900}body{padding:26px}#root{height:auto}.scroll{padding:0;overflow:visible}.campaign-section{margin-top:0}.campaign-email__canvas iframe{height:570px}.play-results{max-width:none}h2{margin-top:0}.people{height:auto;min-height:700px}@media(max-width:500px){body{padding:18px}.campaign-email__canvas iframe{height:720px}}