/* ============================================================
   NEWS ROOM — "The Institution" design system
   Dark editorial serif. One accent per mode. Restraint.
   All colours are named CSS custom properties defined ONCE here.
   Templates reference names only — never hex.
   ============================================================ */

/* ---------- TOKENS: DARK (default / brand identity) ---------- */
:root {
  --page-bg:        #12100E;
  --surface:        #1A1714;
  --surface-2:      #16130F;
  --border:         #2A2622;
  --text-primary:   #F2EDE4;
  --text-secondary: #8A8177;
  --text-muted:     #5E574F;
  --accent:         #C9A227; /* gold — dark-mode accent */
  --accent-ink:     #12100E; /* text on top of accent fills */
  --danger:         #C98A6E; /* functional error signal only */

  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:   clamp(2.4rem, 5.5vw, 3.4rem);
  --fs-figure: clamp(1.8rem, 4vw, 2.2rem);
  --fs-h1:     1.55rem;
  --fs-h2:     1.05rem;
  --fs-body:   0.95rem;
  --fs-small:  0.8rem;
  --fs-label:  0.7rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.85rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --maxw: 1080px;
  --hairline: 1px solid var(--border);
  /* Softer, friendlier corners (Institution refinement — same identity). One
     scale, used everywhere so every card/input/button rounds consistently. */
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;

  /* ---- ONE control geometry, shared by every input, select, textarea,
     file-picker and button. Defined once here; nothing styles a control
     per-page or per-field. Change these and every control changes. ---- */
  --control-h:       44px;  /* single-line controls AND buttons */
  --control-h-sm:    36px;  /* compact controls (filters, in-card actions) */
  --control-pad-y:   11px;
  --control-pad-x:   13px;
  --control-radius:  var(--radius-sm);
  --control-border:  var(--hairline);
  --control-bg:      var(--surface-2);
  /* One card geometry, shared by every card. */
  --card-radius:  var(--radius);
  --card-pad:     var(--space-5);
  --card-gap:     var(--space-4);   /* vertical rhythm between cards */
  --field-gap-x:  var(--space-4);   /* two-column gutter */
  --field-gap-y:  var(--space-4);   /* row rhythm inside a field grid */
  /* Derived accent tints (resolve against the active --accent, so both modes
     stay correct). No new hardcoded hex. */
  --accent-tint: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* ---------- TOKENS: LIGHT (opt-in via data-theme) ---------- */
:root[data-theme="light"] {
  --page-bg:        #FFFFFF;
  --surface:        #FAF9F8;
  --surface-2:      #FFFFFF;
  --border:         #E4E2DF;
  --text-primary:   #16110F;
  --text-secondary: #57514A;
  --text-muted:     #8C857C;
  --accent:         #8B2E2E; /* editorial red — light-mode accent */
  --accent-ink:     #FFFFFF;
  --danger:         #8B2E2E;
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
/* The HTML `hidden` attribute must always win. Several components below set an
   explicit `display` (grid / inline-flex), which silently beat the UA sheet's
   `[hidden] { display: none }` — that is why the empty logo preview box and its
   Remove button stayed on screen with nothing uploaded. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }
textarea, input, select, button { font: inherit; }
p { margin: 0 0 var(--space-3); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; color: var(--text-primary); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-3); }
h2 { font-size: var(--fs-h2); margin: var(--space-5) 0 var(--space-3); }
h3 { font-size: 1rem; margin: 0 0 var(--space-2); }

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
small { font-size: var(--fs-small); color: var(--text-secondary); }

/* ============================================================
   APP SHELL — top navigation (shared partial)
   ============================================================ */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  height: 60px;
  background: var(--page-bg);
  border-bottom: var(--hairline);
}
.app-nav .wordmark {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.app-nav .wordmark:hover { color: var(--text-primary); }
.app-nav .nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  margin-left: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-nav .nav-links::-webkit-scrollbar { display: none; }
.app-nav .nav-links a {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.app-nav .nav-links a:hover { color: var(--text-primary); }
.app-nav .nav-links a.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.nav-right { display: flex; align-items: center; gap: var(--space-3); }
.balance-pill {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  border: var(--hairline);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.balance-pill .amt { color: var(--text-primary); }
.avatar {
  width: 30px; height: 30px;
  border: var(--hairline);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.theme-toggle {
  background: transparent;
  border: var(--hairline);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
/* Sun in dark mode (click -> light); moon in light mode (click -> dark). */
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---------- MAIN CONTAINER (generous, NOT 420px) ---------- */
.app-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-6);
}
.crumb { margin-bottom: var(--space-4); }
.crumb a { color: var(--text-secondary); font-size: var(--fs-small); }
.crumb a:hover { color: var(--accent); }

/* ---------- AUTH (narrow box, signup/login ONLY) ---------- */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.auth-card, .panel {
  background: var(--surface);
  border: var(--hairline);
  border-radius: 3px;
  padding: var(--space-5);
}
.auth-card { width: min(440px, 100%); }
.site-list { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.site-list li { display: flex; justify-content: space-between; gap: 1rem; padding: var(--space-2) 0; border-bottom: var(--hairline); }
.site-list span { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- CARDS / SECTIONS ---------- */
/* ---- THE card. One radius, one border, one padding, one gap to the next
   card. Every card on every page uses these — nothing re-declares them. ---- */
.card {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  margin-bottom: var(--card-gap);
}
/* A card's heading block: consistent space above the first field, and no
   stray top margin from the h2 fighting the card padding. */
.card > .card-top { margin-bottom: var(--space-3); }
.card > .card-top h2, .card > h2 { margin: 0; font-size: var(--fs-h2); }
/* The intro paragraph under a card heading — one consistent gap to the fields
   below it, set here rather than with an inline style per template. */
.card > .card-intro { margin: 0 0 var(--space-4); color: var(--text-secondary); }

/* A SECTION WITHIN a card. Used when two things are genuinely one step and must
   not float in separate containers — the divider marks the seam without
   breaking the grouping. */
.card-divider {
  border: 0; border-top: var(--hairline);
  margin: var(--space-5) 0 var(--space-4);
}
.card-subhead {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h2); color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

/* ============================================================
   AUTHORITY SCORE — hero
   ============================================================ */
.authority { padding: var(--space-2) 0 var(--space-4); }
.stage-word {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  line-height: 1.05;
  color: var(--text-primary);
  margin: var(--space-2) 0 var(--space-3);
}
.authority .honest {
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 0 var(--space-4);
}
.footprint-bars {
  display: flex;
  gap: 4px;
  max-width: 420px;
}
.footprint-bars .seg {
  height: 6px;
  flex: 1 1 0;
  background: var(--border);
}
.footprint-bars .seg.filled { background: var(--accent); }

/* three figures */
.figure-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-5) 0;
  padding: var(--space-4) 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.figure .num {
  font-family: var(--font-serif);
  font-size: var(--fs-figure);
  color: var(--text-primary);
  line-height: 1;
}
.figure .lbl { display: block; margin-top: var(--space-2); }

/* next to publish */
.next-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.next-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
}
.next-item .pub { color: var(--text-secondary); }
.next-item .date { color: var(--text-muted); font-size: var(--fs-small); white-space: nowrap; }
.next-item.is-next .pub { color: var(--accent); }
.next-item .marker { color: var(--text-muted); font-size: var(--fs-small); margin-right: var(--space-2); }
.next-item.is-next .marker { color: var(--accent); }

/* quick links row */
.quick-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* what's-next line */
.whats-next { color: var(--text-primary); margin: var(--space-3) 0 0; }
.whats-next .arrow { color: var(--accent); margin-right: var(--space-2); }

/* honesty note */
.honesty-note { color: var(--text-muted); font-size: var(--fs-small); max-width: 62ch; margin: var(--space-4) 0 0; }

/* score ladder */
.ladder { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.ladder li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  align-items: baseline;
}
.ladder li:last-child { border-bottom: 0; }
.ladder .stage-name { color: var(--text-secondary); }
.ladder .stage-desc { color: var(--text-muted); font-size: var(--fs-small); }
.ladder li.current .stage-name { color: var(--accent); }
.ladder li.current .stage-desc { color: var(--text-secondary); }
.ladder .you {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-left: var(--space-3);
}

/* constrained form column inside the wide shell (forms, not tables) */
.form-col { max-width: 560px; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-top: var(--space-4); }
.inline-label { margin-bottom: 0; }

/* ============================================================
   TABLES — brand-table (was undefined; now real)
   ============================================================ */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- BRAND ASSETS — the deep well (decision #40) ---- */
.assets-intro { color: var(--text-secondary); font-size: var(--fs-small); margin: 0 0 var(--space-3); }
.assets-choice { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.assets-radio {
  display: flex; gap: var(--space-3); align-items: start;
  border: var(--hairline); border-radius: var(--control-radius);
  padding: var(--space-3); cursor: pointer; margin: 0;
}
/* The chosen answer is marked with the accent so the gate reads as answered —
   the whole point is that the customer knows they addressed it. */
.assets-radio:has(input:checked) { border-color: var(--accent); }
.assets-radio input { margin-top: 3px; flex-shrink: 0; }
.ar-copy { display: grid; gap: 2px; }
.ar-title { color: var(--text-primary); }

.assets-rows { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.asset-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* The "Other" box takes the full width beneath its row when revealed, so the
   two-column rhythm above it is never disturbed. */
.asset-row .asset-other { grid-column: 1 / -1; }
.assets-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }

@media (max-width: 720px) {
  .asset-row { grid-template-columns: 1fr; }
}

/* ---- THE FAILED-ARTICLE QUEUE (decision #39) ---- */
.fa-tabs .fa-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--space-1);
  margin-left: var(--space-2); border-radius: 999px;
  border: var(--hairline); font-size: var(--fs-small);
  color: var(--text-secondary);
}
/* Urgent only when a client article is at risk of breaking the promise — the
   accent is spent here and nowhere else on the page, so it means something. */
.fa-tabs .fa-count.urgent { border-color: var(--accent); color: var(--accent); }

.fa-list { display: grid; gap: var(--space-3); }
.fa-item {
  border: var(--hairline); border-radius: var(--radius);
  padding: var(--space-4); display: grid; gap: var(--space-3);
}
.fa-item.at-risk { border-color: var(--accent); }
.fa-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); flex-wrap: wrap; }
.fa-title { color: var(--text-primary); }
.fa-sub { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--space-1); }
.fa-right { display: grid; gap: var(--space-1); justify-items: end; text-align: right; }
.fa-when { color: var(--text-secondary); font-size: var(--fs-small); }
.fa-overdue { color: var(--text-muted); }
.fa-overdue.at-risk { color: var(--accent); }
.fa-attempts { color: var(--text-muted); font-size: var(--fs-small); }
.fa-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.fa-actions form { margin: 0; }
.fa-inline { display: flex; gap: var(--space-2); align-items: center; }
.fa-inline input[type="text"] { min-width: 180px; }
/* The refund takes its own row behind a rule. The two actions above it are
   reversible; this one moves a customer's money and cannot be undone, so it
   should never sit flush against "Retry now" where a mis-click lives. */
.fa-refund {
  flex-basis: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--hairline);
}
.fa-refund input[type="text"] { flex: 1; }

@media (max-width: 720px) {
  .fa-right { justify-items: start; text-align: left; }
  .fa-actions { display: grid; }
  .fa-inline { flex-wrap: wrap; }
  .fa-inline input[type="text"] { min-width: 0; width: 100%; }
}

/* A provider's raw error text, shown to an operator on the failed-generations
   page. Monospace because it is a machine message, wrapped because provider
   errors are long and the whole point is that it stays readable. */
code.err {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.brand-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.brand-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--hairline);
  white-space: nowrap;
}
.brand-table tbody td,
.brand-table tbody th {
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--hairline);
  color: var(--text-primary);
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
/* key/value tables (row headers) */
.brand-table tbody th {
  color: var(--text-muted);
  font-weight: 400;
  width: 40%;
  white-space: nowrap;
}
.brand-table tbody tr:last-child td,
.brand-table tbody tr:last-child th { border-bottom: 0; }

/* ---------- STATUS BADGES (were undefined) ---------- */
.status {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: var(--hairline);
  border-radius: 2px;
  padding: 3px 8px;
  white-space: nowrap;
}
.status-published, .status-completed, .status-active { color: var(--accent); border-color: var(--accent); }
.status-scheduled, .status-pending_generation, .status-pending, .status-approved, .status-locked { color: var(--text-secondary); }
.status-failed, .status-cancelled, .status-expired, .status-draft { color: var(--text-muted); }

/* ---------- TIMELINE (was undefined) ---------- */
.campaign-timeline { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.campaign-timeline li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  color: var(--text-secondary);
  border-left: var(--hairline);
  margin-left: 4px;
}
.campaign-timeline li::before {
  content: "";
  position: absolute;
  left: -4px; top: 14px;
  width: 7px; height: 7px;
  background: var(--border);
  border-radius: 50%;
}
.campaign-timeline li:first-child::before { background: var(--accent); }

/* ============================================================
   FORMS / BUTTONS / FLASH
   ============================================================ */
/* A field label is a grid: caption, control, then optional helper text. The
   label owns the vertical rhythm so every field in a card starts and ends on
   the same beat regardless of whether it carries helper text. */
label { display: grid; gap: 5px; font-size: var(--fs-small); color: var(--text-secondary); margin-bottom: var(--space-4); }

/* ---- THE control. One radius, one height, one border, one padding, one
   background — shared by text inputs, selects, textareas and the file picker.
   Nothing overrides these per page or per field. ---- */
input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="number"], input[type="search"],
input[type="tel"], textarea, select {
  width: 100%;
  min-width: 0;               /* so a control inside a grid column can shrink */
  background: var(--control-bg);
  border: var(--control-border);
  border-radius: var(--control-radius);
  padding: var(--control-pad-y) var(--control-pad-x);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color 0.15s ease;
}
/* Single-line controls all resolve to the same box. `select` in particular sizes
   from its option line-box and rendered ~4px shorter than a text input — an
   explicit height is what makes the dropdown match its neighbours. */
input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="number"], input[type="search"],
input[type="tel"], select {
  height: var(--control-h);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: calc(var(--control-h) * 2.2); line-height: 1.55; }
/* Native select: keep the platform arrow but normalise the box it sits in. */
select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--control-pad-x) * 2 + 10px);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Helper text under a control — same left edge, consistent breathing room. */
label > small { margin-top: 1px; line-height: 1.45; }

/* ---- THE button. One shape, two variants (primary / secondary), one size
   scale. Same radius as the controls above and the same height, so a button
   sitting next to an input or in a card action row lines up exactly. An icon
   inside a button must never change its height. ---- */
button, .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  /* A floor, not a fixed height: every normal button lands on exactly
     --control-h, but a long label on a dense page grows instead of clipping. */
  min-height: var(--control-h);
  max-width: 100%;
  padding: 0 20px;
  border-radius: var(--control-radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
/* Icons never stretch the button box. */
button > svg, .button-link > svg { flex-shrink: 0; }
/* Compact variant for dense action rows (cards, filters). */
button.sm, .button-link.sm { height: var(--control-h-sm); padding: 0 14px; }
button:hover, .button-link:hover {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
  border-color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
}
button:active, .button-link:active { transform: translateY(1px); }
button.secondary, .button-link.secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
button.secondary:hover, .button-link.secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

.flash {
  padding: var(--space-3) var(--space-4);
  border: var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-size: var(--fs-small);
}
.flash.error { border-left-color: var(--danger); }
.flash.success { border-left-color: var(--accent); }

/* ============================================================
   RESPONSIVE — no page-level horizontal overflow on phones
   ============================================================ */
@media (max-width: 720px) {
  .app-nav { padding: 0 var(--space-4); gap: var(--space-3); }
  .app-nav .nav-links { margin-left: var(--space-2); }
  .app-main { padding: var(--space-5) var(--space-4); }
  .figure-row { gap: var(--space-5); }
  .balance-pill { display: none; } /* balance still shown on wallet + home body */
}

/* Stacked table rows at phone width — cells carry data-label */
@media (max-width: 640px) {
  .brand-table.stack thead { position: absolute; left: -9999px; }
  .brand-table.stack tbody tr {
    display: block;
    border: var(--hairline);
    border-radius: 3px;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .brand-table.stack tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border: 0;
    padding: 5px 0;
    text-align: right;
  }
  .brand-table.stack tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-label);
    text-align: left;
  }
  .brand-table.stack tbody tr:last-child td { border-bottom: 0; }
}

/* ============================================================
   LAYOUT UTILITIES & INTERNAL STAFF-EDITOR COMPONENTS
   Permanent, intentional parts of the design system (all tokenised,
   no hardcoded colours). Forms use .field-grid / .form-actions;
   the internal staff newsroom editor uses .editor-grid / .preview-card.
   `.listing-table` is an alias of `.brand-table` styling.
   ============================================================ */
.listing-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.listing-table th { text-align: left; font-weight: 500; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: var(--space-3); border-bottom: var(--hairline); }
.listing-table td { padding: var(--space-3); border-bottom: var(--hairline); color: var(--text-primary); }
.status-pill { display: inline-block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); border: var(--hairline); border-radius: 2px; padding: 3px 8px; }
.stack { display: grid; gap: var(--space-3); }
.narrow { max-width: 560px; }
/* ---- THE field grid. Two equal columns that together span the full card
   content width, with one consistent gutter. A `.full` field spans both, so
   its left and right edges are identical to the outer edges of the two-column
   row above and below it — that is what keeps one clean vertical edge down the
   card instead of a staircase. `align-items: start` stops a field with helper
   text from stretching its neighbour. ---- */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--field-gap-y) var(--field-gap-x);
  align-items: start;
}
.field-grid .full { grid-column: 1 / -1; }
/* A field grid carries the same bottom rhythm as a single field, so whatever
   follows it (another field, the logo block) sits on the same beat. */
.field-grid { margin-bottom: var(--space-4); }
/* Inside a grid the row gap sets the rhythm — the per-label margin would add a
   second, competing gap and push one column out of line with the other. */
.field-grid > label { margin-bottom: 0; }
/* A non-input control (the logo picker) still needs a caption and the same
   vertical rhythm as a real field, so it sits on the same grid as its
   neighbours instead of drifting. Geometry is identical to `label` above. */
.field-block { display: grid; gap: 5px; margin-bottom: var(--space-4); }
.field-block > .field-caption { font-size: var(--fs-small); color: var(--text-secondary); }
.field-block.full { grid-column: 1 / -1; }

/* Last field in a card shouldn't add a trailing gap under itself. */
.card > label:last-child,
.card > .field-grid:last-child,
.card > .field-block:last-child { margin-bottom: 0; }
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hairline); }
.inline { display: flex; align-items: center; gap: 8px; }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: var(--space-3); }
.pill-row { display: inline-flex; gap: 4px; border: var(--hairline); border-radius: 2px; padding: 3px; }
.mode-pill { padding: 4px 12px; border-radius: 2px; color: var(--text-secondary); cursor: pointer; font-size: var(--fs-small); }
.mode-pill:has(input:checked) { background: var(--surface); color: var(--text-primary); }
.mode-pill input { display: none; }
.checkbox-list { display: grid; gap: 4px; padding: var(--space-3); border: var(--hairline); border-radius: 2px; max-height: 180px; overflow-y: auto; }
.preview-card { border: var(--hairline); border-radius: 3px; padding: var(--space-4); background: var(--surface); }
.preview-body { white-space: pre-wrap; font-size: var(--fs-small); color: var(--text-secondary); }
.eyebrow { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.featured-image { width: 100%; border-radius: 3px; border: var(--hairline); margin: var(--space-3) 0; }
.dash-grid { display: grid; gap: var(--space-4); padding: var(--space-5); max-width: var(--maxw); margin: 0 auto; }
.article-editor { max-width: var(--maxw); margin: 0 auto; padding: var(--space-4); }
.editor-layout, .editor-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 980px) { .field-grid, .editor-layout, .editor-grid { grid-template-columns: 1fr; } }

/* ============================================================
   NAV: avatar dropdown, balance-pill link, mobile bottom tabs
   ============================================================ */
a.balance-pill { text-decoration: none; }
a.balance-pill:hover { border-color: var(--text-muted); color: var(--text-primary); }

.avatar-menu { position: relative; }
.avatar-menu > summary { list-style: none; cursor: pointer; }
.avatar-menu > summary::-webkit-details-marker { display: none; }
.avatar-menu > summary::marker { content: ""; }
.avatar-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 190px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: 10px;
  padding: var(--space-2);
  z-index: 60;
  display: grid; gap: 2px;
}
.avatar-who { padding: var(--space-2) var(--space-3); color: var(--text-muted); font-size: var(--fs-small); border-bottom: var(--hairline); margin-bottom: 2px; }
.avatar-dropdown a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary); font-size: var(--fs-small);
  border-radius: 7px;
}
.avatar-dropdown a:hover { background: var(--accent-tint); color: var(--text-primary); }
.avatar-dropdown .ico { color: var(--text-muted); }

/* Billing in-page sub-nav */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-4) 0; padding-bottom: var(--space-3); border-bottom: var(--hairline); }
.subnav a { font-size: var(--fs-small); color: var(--text-secondary); }
.subnav a:hover { color: var(--accent); }

/* Bottom tab bar — mobile only (hidden by default) */
.bottom-tabs { display: none; }
@media (max-width: 640px) {
  .app-nav .nav-links { display: none; }
  body { padding-bottom: 66px; }
  .bottom-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--page-bg); border-top: var(--hairline);
  }
  .bottom-tabs a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px; font-size: 10.5px; letter-spacing: 0.02em;
    color: var(--text-muted);
  }
  .bottom-tabs a.active { color: var(--accent); }
  .bottom-tabs a .ico { width: 22px; height: 22px; }
}

/* ============================================================
   DASHBOARD — card-based two-column layout
   ============================================================ */
.dash-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.dash-col { display: grid; gap: var(--space-4); align-content: start; }
.dash-grid .card { border-radius: var(--radius); }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.view-all { font-size: var(--fs-small); color: var(--text-secondary); }
.view-all:hover { color: var(--accent); }

/* Authority score card */
.stage-pill {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 980px;
  padding: 3px 10px; white-space: nowrap;
}
.stage-word-md { font-family: var(--font-serif); font-size: 40px; line-height: 1.05; margin: var(--space-2) 0 var(--space-3); color: var(--text-primary); }
.stage-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: var(--space-4); }
.track-seg { height: 6px; border-radius: 3px; background: var(--border); }
.track-seg.filled { background: var(--accent); }
/* Status statement under the score — a fact, not a button. No panel, no arrow,
   no accent fill; just a clear sentence with the rank names quietly emphasised. */
.stage-status {
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: var(--space-2) 0 0;
}
.honest-sm { color: var(--text-muted); font-size: var(--fs-small); margin: var(--space-3) 0 0; }

/* How-your-score-works panel — always open, sits under the score (Part 2). */
.score-works-panel { border-radius: 14px; }
.score-works-panel .ladder { margin-top: var(--space-3); }
.score-works-panel .honesty-note { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hairline); }

/* Next to publish card */
.next-hero {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--accent-tint); border: 1px solid var(--accent-line);
  border-radius: 10px; padding: var(--space-3); margin-bottom: var(--space-3);
}
.next-tile { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--accent); color: var(--accent-ink); border-radius: 9px; }
.next-hero .who { flex: 1; min-width: 0; }
.next-pub { color: var(--text-primary); }
.next-when { color: var(--accent); font-size: var(--fs-small); }
.next-hero .next-date { color: var(--text-secondary); font-size: var(--fs-small); white-space: nowrap; }
.next-quiet { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--hairline); }
.next-quiet:last-child { border-bottom: 0; }
.q-tile { width: 30px; height: 30px; flex-shrink: 0; border: var(--hairline); border-radius: 8px; }
.q-pub { flex: 1; min-width: 0; color: var(--text-secondary); }
.q-date { color: var(--text-muted); font-size: var(--fs-small); white-space: nowrap; }

/* Figures card */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.fig { text-align: left; }
.fig-num { font-family: var(--font-serif); font-size: 26px; line-height: 1; color: var(--text-primary); display: block; }
.fig .label { display: block; margin-top: 6px; }

/* Monthly capacity card */
.cap-row { padding: var(--space-3) 0; border-bottom: var(--hairline); }
.cap-row:last-of-type { border-bottom: 0; }
.cap-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cap-brand { color: var(--text-primary); }
.cap-count { color: var(--text-secondary); font-size: var(--fs-small); white-space: nowrap; }
.cap-meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: var(--space-2) 0 6px; }
.meter-seg { height: 8px; border-radius: 2px; background: var(--border); }
.meter-seg.filled { background: var(--accent); }
.cap-rem { color: var(--text-muted); font-size: var(--fs-small); }

/* Launch card — the single most prominent card (inverted in light, accent in dark) */
.launch-card { background: var(--accent-tint); border-color: var(--accent); }
.launch-card p { color: var(--text-secondary); }
.launch-card .button-link { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); }
:root[data-theme="light"] .launch-card { background: var(--text-primary); border-color: var(--text-primary); }
:root[data-theme="light"] .launch-card .label { color: color-mix(in srgb, var(--surface) 60%, var(--text-primary)); }
:root[data-theme="light"] .launch-card p { color: color-mix(in srgb, var(--surface) 80%, var(--text-primary)); }

/* Empty-state momentum inside cards */
.card .empty { color: var(--text-secondary); }

/* ---- Tablet: rebalanced two columns (not a squeezed desktop) ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "score    capacity"
      "works    launch"
      "works    figures"
      "next     next";
  }
  .dash-col { display: contents; }
  .score-card { grid-area: score; }
  .score-works-panel { grid-area: works; }
  .capacity-card { grid-area: capacity; }
  .launch-card { grid-area: launch; }
  .figures-card { grid-area: figures; }
  .next-card { grid-area: next; }
}

/* ---- Mobile: single column, resequenced by importance ---- */
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-col { display: contents; }
  .score-card { order: 1; }
  .score-works-panel { order: 2; }   /* the ladder stays right under the score */
  .capacity-card { order: 3; }
  .launch-card { order: 4; }
  .next-card { order: 5; }
  .figures-card { order: 6; }
  .stage-word-md { font-size: 34px; }
  /* Launch becomes a compact single row */
  .launch-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .launch-card .launch-copy { flex: 1; min-width: 0; }
  .launch-card .button-link { margin-top: 0; }
}

.dash-grid .card { margin-bottom: 0; }

/* ============================================================
   SHARED CARD PATTERNS for the customer tabs (reuse dashboard vocab)
   ============================================================ */
.pcard { border-radius: var(--card-radius); margin-bottom: 0; }
.cards { display: grid; gap: var(--space-4); }               /* vertical card stack */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-head .head-text { min-width: 0; }

/* icon tile (reused everywhere) */
.icon-tile { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: var(--hairline); border-radius: 10px; color: var(--text-secondary); }
.icon-tile.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.icon-tile .ico { width: 20px; height: 20px; }

/* accent status pill (Active) + neutral variant */
.pill { display: inline-block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 980px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }
.pill.neutral { border-color: var(--border); color: var(--text-muted); }

/* meter helpers already exist: .cap-meter / .meter-seg (dashboard) */
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.meter-head .label { color: var(--text-muted); }
.meter-head .m-right { color: var(--text-secondary); font-size: var(--fs-small); }

/* ---- START A CAMPAIGN ---- */
.start-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); align-items: start; }
.start-col { display: grid; gap: var(--space-4); align-content: start; }
.brand-select-row { display: flex; align-items: center; gap: var(--space-3); }
.brand-select-row select { flex: 1; }
.hairline-sep { border: 0; border-top: var(--hairline); margin: var(--space-4) 0; }

.pkg-grid { display: grid; gap: var(--space-3); }
.pkg-card { position: relative; border: var(--hairline); border-radius: var(--radius); padding: var(--space-4); cursor: pointer; display: block; }
.pkg-card.selected { border: 2px solid var(--accent); background: var(--accent-tint); padding: calc(var(--space-4) - 1px); }
.pkg-card input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pkg-name { color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); }
.pkg-pill { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--accent); border-radius: 980px; padding: 2px 8px; }
.pkg-price { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--text-primary); text-align: right; }
.pkg-credits { color: var(--text-muted); font-size: var(--fs-small); text-align: right; margin-top: 3px; }
.pkg-desc { color: var(--text-secondary); font-size: var(--fs-small); margin: var(--space-2) 0 0; }
.afford-ok { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-small); margin-top: var(--space-3); }
.afford-ok .ico { width: 16px; height: 16px; }
.afford-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border: var(--hairline); border-radius: 10px; background: var(--surface-2); }
.afford-panel .short { color: var(--text-secondary); font-size: var(--fs-small); }
.afford-panel .add-credits { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-small); white-space: nowrap; }
.spill-panel { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-tint); color: var(--text-primary); font-size: var(--fs-small); }
.spill-panel .ico { color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }

/* order summary — inverted like the dashboard launch card */
.order-card { background: var(--accent-tint); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--space-4); position: sticky; top: 76px; }
:root[data-theme="light"] .order-card { background: var(--text-primary); border-color: var(--text-primary); }
:root[data-theme="light"] .order-card, :root[data-theme="light"] .order-card .order-val { color: var(--surface); }
:root[data-theme="light"] .order-card .label, :root[data-theme="light"] .order-card .order-row span:first-child { color: color-mix(in srgb, var(--surface) 65%, var(--text-primary)); }
.order-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.order-row span:first-child { color: var(--text-secondary); font-size: var(--fs-small); }
.order-val { color: var(--text-primary); }
.order-total { border-top: var(--hairline); margin-top: var(--space-2); padding-top: var(--space-3); }
.order-card .button-link, .order-card button { width: 100%; justify-content: center; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; }
.reassure-card { display: flex; gap: var(--space-3); align-items: flex-start; }
.reassure-card .ico { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.reassure-card p { color: var(--text-secondary); font-size: var(--fs-small); margin: 0; }

/* ---- BILLING ---- */
.balance-hero { margin-bottom: var(--space-4); }   /* was an inline style */
.balance-hero .big { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--text-primary); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.pack-card { border: var(--hairline); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.pack-card.disabled { opacity: 0.85; }
.pack-name { color: var(--text-primary); }
.pack-credits-lbl { color: var(--text-muted); font-size: var(--fs-small); }
.pack-price { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--text-primary); }
.pack-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.pack-disabled-note { color: var(--text-muted); font-size: var(--fs-small); }
.info-panel { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-tint); color: var(--text-primary); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.info-panel .ico { color: var(--accent); flex-shrink: 0; }

/* ---- CAMPAIGN CARDS ---- */
.campaign-card { display: grid; gap: var(--space-3); }
.cc-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.cc-head .who { flex: 1; min-width: 0; }
.cc-brand { color: var(--text-primary); font-family: var(--font-serif); font-size: 1.2rem; }
.cc-sub { color: var(--text-muted); font-size: var(--fs-small); }
.progress { display: flex; gap: 3px; }
.progress-seg { flex: 1 1 0; height: 8px; border-radius: 2px; background: var(--border); }
.progress-seg.filled { background: var(--accent); }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.progress-head .p-left { color: var(--text-secondary); font-size: var(--fs-small); }
.progress-head .p-right { color: var(--text-muted); font-size: var(--fs-small); }
.cc-foot { display: flex; align-items: center; gap: var(--space-5); border-top: var(--hairline); padding-top: var(--space-3); }
.cc-fig .n { font-family: var(--font-serif); font-size: 20px; color: var(--text-primary); }
.cc-fig .l { display: block; }
.cc-actions { margin-left: auto; }

/* ---- ARTICLE CARDS (Published) ---- */
.article-card { display: flex; align-items: center; gap: var(--space-3); }
.article-card .who { flex: 1; min-width: 0; }
.ac-pub { color: var(--text-primary); }
.ac-sub { color: var(--text-muted); font-size: var(--fs-small); }
.read-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-small); white-space: nowrap; }

/* ---- BRAND CARDS ---- */
.brand-card { display: grid; gap: var(--space-4); }
.bc-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.bc-head .who { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bc-name { color: var(--text-primary); font-family: var(--font-serif); font-size: 1.2rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bc-site { min-width: 0; }
.bc-site a { color: var(--text-secondary); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
.bc-meta { color: var(--text-muted); font-size: var(--fs-small); margin-top: 0; }
.bc-targets { color: var(--text-secondary); font-size: var(--fs-small); margin-top: 2px; }
.bc-targets .label { margin-right: 4px; }
/* Actions align on one baseline; every control is the same height + spacing. */
.bc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border-top: var(--hairline); padding-top: var(--space-4); }
.bc-actions form { display: inline-flex; margin: 0; }
.bc-actions .button-link, .bc-actions button { margin: 0; }

/* ---- filter control in page head ---- */
.filter-control { display: flex; align-items: center; gap: var(--space-2); }
.filter-control label { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.filter-control select { min-width: 160px; }

/* ---- responsive for these pages ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .start-grid { grid-template-columns: 1fr; }
  .start-order { order: 2; }
  .order-card { position: sticky; bottom: 74px; top: auto; }
  .pack-grid { grid-template-columns: 1fr; }
  .cc-foot { flex-wrap: wrap; gap: var(--space-4); }
  .cc-actions { margin-left: 0; }
}

.order-note { margin: var(--space-3) 0 0; }
.order-note small { color: var(--text-muted); }
:root[data-theme="light"] .order-card .order-note small { color: color-mix(in srgb, var(--surface) 55%, var(--text-primary)); }

/* ---- Research progress (background dossier) ---- */
.research-spinner { display: inline-grid; place-items: center; margin-bottom: var(--space-3); }
.research-spinner span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: nr-spin 0.8s linear infinite;
}
@keyframes nr-spin { to { transform: rotate(360deg); } }
.research-stage { color: var(--text-primary); font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 var(--space-2); }
.research-steps { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.research-steps li { color: var(--text-muted); font-size: var(--fs-small); padding-left: var(--space-4); position: relative; }
.research-steps li::before { content: "○"; position: absolute; left: 0; color: var(--text-muted); }
.research-steps li.active { color: var(--accent); }
.research-steps li.active::before { content: "●"; color: var(--accent); }
.research-steps li.done { color: var(--text-secondary); }
.research-steps li.done::before { content: "✓"; color: var(--accent); }

/* ---- Submit overlay (extraction "reading your website…") ---- */
.submit-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--page-bg) 82%, transparent);
}
.submit-overlay.show { display: grid; }
.submit-overlay .box { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-5); max-width: 420px; background: var(--surface); border: 1px solid var(--border-hairline); border-radius: var(--radius); box-shadow: var(--shadow-1, 0 8px 30px rgba(0,0,0,0.18)); }
.submit-overlay .box p { color: var(--text-primary); margin: 0; }
/* Corrected border/radius (the two vars above are not defined in tokens). */
.submit-overlay .box { border: var(--hairline); border-radius: var(--radius); }

/* ============================================================
   ONE-PAGE BRAND CREATION (decision #26 rebuild)
   Reuses the Institution vocabulary: 12px cards, icon-tile, pill,
   afford-panel, path buttons = established primary/secondary.
   ============================================================ */
/* The two brand forms share one measure. Card geometry, field gaps, control
   metrics and button shape all come from the shared components above — these
   rules set the column width and nothing else. */
#brand-form, .edit-form { max-width: 760px; }

#brand-form > .pcard, .edit-form > .pcard { margin-bottom: var(--card-gap); }

/* the two path actions (extract / skip / research / approve) */
.path-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.path-actions.tight { margin-top: var(--space-3); }
/* Trailing copy under a card's body — one consistent gap, set once. */
.card-outro { margin: var(--space-3) 0 0; }
/* Form footer: the submit row for a card-based form. Aligned to the same left
   edge as the cards above it, with the shared card gap. */
.form-footer {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-top: var(--card-gap);
}
.path-note { margin: var(--space-3) 0 0; font-size: var(--fs-small); }
.path-note.is-error { color: var(--danger); }

/* ---- Logo upload — a real file control with preview, never a typed path.
   It is a member of the control family: same radius, border, background and
   padding as an input. The row spans the full card content width and the
   dropzone takes the slack, so its right edge lands on the same vertical line
   as the fields above it in every state (no logo / logo chosen). ---- */
/* Flex, not grid: a hidden preview / Remove is removed from the flow entirely
   and contributes no gap, so the dropzone's edges stay put. Fixed grid tracks
   would leave two empty gutters behind and shift the row. */
.logo-upload {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-2);
}
/* When the preview and Remove are hidden the dropzone simply spans the row —
   the right edge does not move. */
.logo-dropzone {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0; margin: 0; cursor: pointer;
  border: 1px dashed var(--border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  padding: var(--control-pad-y) var(--control-pad-x);
  min-height: var(--control-h);
  color: var(--text-secondary);
}
.logo-dropzone:hover { border-color: var(--accent); }
.logo-dropzone .logo-copy { display: grid; gap: 2px; min-width: 0; }
.logo-dropzone .logo-title { color: var(--text-primary); }
.logo-preview {
  width: var(--control-h); height: var(--control-h);
  flex-shrink: 0;
  border: var(--control-border); border-radius: var(--control-radius);
  overflow: hidden; display: grid; place-items: center;
  background: var(--control-bg);
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-remove { flex-shrink: 0; }

/* Research upsell — visually distinct, accent pill for the price */
.research-upsell { border: 1px solid var(--accent-line); background: var(--accent-tint); }
.upsell-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.upsell-head .who { flex: 1; min-width: 0; }
.upsell-title { color: var(--text-primary); font-family: var(--font-serif); font-size: 1.15rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.research-upsell .afford-panel { margin-top: var(--space-3); }

/* Permanence card — a serious, accent-lined promise */
.bc-permanence { border: 1px solid var(--accent-line); }

/* Research dossier — the visible $5. A distinct accent-lined card, clearly not
   one of the plain brief-field cards. Findings as label/value rows; sources as
   external links with receipts. */
.dossier-card { border: 1px solid var(--accent-line); background: var(--accent-tint); }
.dossier-findings { margin: var(--space-4) 0 0; display: grid; gap: 0; }
.dossier-item {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: var(--hairline); align-items: baseline;
}
.dossier-item:first-child { border-top: 0; }
.dossier-item dt {
  margin: 0; color: var(--text-muted);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em;
}
.dossier-item dd { margin: 0; color: var(--text-primary); line-height: 1.55; }
.dossier-sources { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hairline); }
.dossier-sources ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.dossier-sources li { min-width: 0; }
.dossier-sources a {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  color: var(--text-secondary); font-size: var(--fs-small);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dossier-sources a:hover { color: var(--accent); }
.dossier-sources a .ico { color: var(--accent); flex-shrink: 0; }
@media (max-width: 720px) {
  .dossier-item { grid-template-columns: 1fr; gap: 4px; }
}

/* Edit-brand page — identical card, grid and control geometry to Create; the
   four rules that used to fight each other here are gone, replaced by the
   shared .card / .field-grid / control components above. */
input[readonly] { color: var(--text-muted); background: var(--surface); cursor: not-allowed; }

/* ---- Country picker: a search box stacked on a grouped list box. Both are
   members of the shared control family (same radius, border, background and
   padding); only the list box's height differs, because it must show several
   options at once for a long list. Region/sub-region are OPTGROUP headers —
   they are structurally non-selectable, not merely styled that way. ---- */
.country-search { margin-bottom: 6px; }
select[size] {
  height: auto;                     /* a list box, not a single-line control */
  min-height: calc(var(--control-h) * 3.4);
  padding: var(--space-2);
  line-height: 1.9;
  /* A list box has no dropdown — strip the arrow the single-line control draws. */
  background-image: none;
  padding-right: var(--space-2);
}
/* The selected country, in the brand accent rather than the browser's default
   blue/white highlight (which ignores the theme entirely). */
select[size] option:checked {
  background: var(--accent);
  color: var(--accent-ink);
  /* Chrome needs this to honour the colour on a rendered option. */
  box-shadow: 0 0 0 100px var(--accent) inset;
}
select[size] optgroup {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding-top: var(--space-2);
}
select[size] option {
  color: var(--text-primary);
  padding: 3px var(--space-2);
  border-radius: 5px;
}

/* ---- The owner control room (decision #34 §11a) ---- */
.owner-room .owner-rows { display: grid; gap: var(--space-4); }
.owner-room .owner-row {
  padding: var(--space-4); border: var(--hairline);
  border-radius: var(--card-radius); background: var(--surface-2);
}
.owner-toggle {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  border-radius: var(--control-radius); cursor: pointer;
}
.owner-toggle input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.owner-toggle .tg-copy { display: grid; gap: 2px; }
.owner-toggle .tg-title { color: var(--text-primary); }

/* ---- Buy any amount (decision #34 §8) — the second billing door ---- */
/* The form spans the card so the Total rule reaches both edges like every other
   card-divider in the product; only the number field itself is narrow, because a
   credit amount is a few characters wide. */
.buy-any-form { display: grid; gap: var(--space-3); }
.buy-any-form > label { max-width: 420px; }
.buy-any-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding-top: var(--space-3); border-top: var(--hairline);
}
.buy-any-price { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text-primary); }

/* ---- Live reach on the brands list + order page (decision #34 §5) ---- */
.reach-note { margin: var(--space-2) 0 0; }

.reach-line { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.reach-total { margin: 0; color: var(--text-primary); font-size: var(--fs-small); }
.reach-detail summary { cursor: pointer; color: var(--text-secondary); font-size: var(--fs-small); list-style: none; }
.reach-detail summary::-webkit-details-marker { display: none; }
.reach-detail summary:hover { color: var(--accent); }
.reach-breakdown { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 4px; }
.reach-breakdown li { color: var(--text-secondary); font-size: var(--fs-small); padding-left: var(--space-3); position: relative; }
.reach-breakdown li::before { content: "·"; position: absolute; left: 0; color: var(--text-muted); }

/* ---- THE MULTI-TARGET PICKER (decision #34). Built from the shared control
   family — same radius, border, background and padding as every other control.
   COLLAPSED BY DEFAULT: ~193 countries rendered open made the page enormous, so
   regions are rows you expand. Presentation only; selection rules unchanged. ---- */
.target-picker { width: 100%; }
.target-global {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  border-radius: var(--control-radius); cursor: pointer;
}
.target-global input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.target-global .tg-copy { display: grid; gap: 2px; }
.target-global .tg-title { color: var(--text-primary); }

.target-specific { display: grid; gap: var(--space-2); }
.target-specific.is-disabled { opacity: 0.45; pointer-events: none; }
.target-toolbar { display: flex; gap: var(--space-2); align-items: center; }
.target-toolbar .target-search { flex: 1; min-width: 0; }

/* Sized so the DEFAULT state — every region collapsed — fits without scrolling,
   and only expanding a region starts the scroll. A box that crops a row in half
   at rest reads as broken rather than scrollable. */
.target-tree {
  max-height: calc(var(--control-h) * 10);
  overflow-y: auto;
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  padding: var(--space-2);
}

/* A row is a summary: checkbox selects, chevron expands. */
.t-row {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small); color: var(--text-secondary);
  cursor: pointer; list-style: none;
}
.t-row::-webkit-details-marker { display: none; }
.t-row::marker { content: ""; }
.t-row:hover { background: var(--surface); color: var(--text-primary); }
.t-row input { accent-color: var(--accent); flex-shrink: 0; }
.t-row .t-label { min-width: 0; }
.t-row .t-count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-label); white-space: nowrap; }
.t-chevron {
  display: inline-flex; flex-shrink: 0; color: var(--text-muted);
  transform: rotate(90deg); transition: transform 0.15s ease;
}
details[open] > .t-row > .t-chevron { transform: rotate(-90deg); }

.t-row-region {
  font-family: var(--font-serif); font-size: var(--fs-body); color: var(--text-primary);
}
.t-region + .t-region { border-top: var(--hairline); }
.t-row-sub { color: var(--text-primary); }

.t-body { padding: 0 0 var(--space-2) var(--space-4); }
.t-countries {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-3); padding-left: var(--space-4);
}
.t-row-country { font-size: var(--fs-small); }

/* What is actually going to be stored — reviewable, removable one by one. */
.target-summary { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.target-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.target-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); color: var(--text-primary);
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  border-radius: 980px; padding: 3px 6px 3px 12px;
}
.target-chip .chip-x {
  height: 18px; min-height: 0; width: 18px; padding: 0;
  border-radius: 50%; border: 0; background: transparent;
  color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.target-chip .chip-x:hover { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 720px) {
  .t-countries { grid-template-columns: 1fr; padding-left: var(--space-3); }
  .t-body { padding-left: var(--space-3); }
  .target-toolbar { flex-wrap: wrap; }
}

/* ---- "We don't cover you yet" — a calm, factual screen, not an error. It uses
   the accent-lined panel (the same vocabulary as the permanence card), NOT the
   danger colour: this is an ordinary answer about our coverage, not the
   customer doing something wrong. ---- */
.coverage-card { border: 1px solid var(--accent-line); }
.coverage-chain { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.coverage-chain li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: var(--hairline);
  color: var(--text-secondary); font-size: var(--fs-small);
}
.coverage-chain li:last-child { border-bottom: 0; }
.coverage-chain .lvl {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); min-width: 88px;
}
.coverage-chain .verdict { margin-left: auto; color: var(--text-muted); white-space: nowrap; }

/* Why the name is locked — explained, never a silently-disabled field (#26). */
.lock-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  border-radius: var(--radius-sm); margin-bottom: var(--space-4);
}
.lock-note .icon-tile { flex-shrink: 0; }
.lock-note .lock-title { color: var(--text-primary); }
.lock-note p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-small); }

/* Responsive: brief field grid stacks below tablet */
@media (max-width: 720px) {
  #brand-form .field-grid, .edit-form .field-grid { grid-template-columns: 1fr; }
  .logo-dropzone { min-width: 0; }
}

/* Two-click confirm armed state (customer.js) — a clear, un-suppressable prompt
   that replaces native confirm(). Turns any button into the accent while armed. */
.confirm-armed {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
.confirm-armed .ico { color: var(--accent-ink); }