/* ════════════════════════════════════════════════════════════════════════
   Account section styles — layered on top of /main.css.
   Uses the homepage design-system variables (--bg, --accent, etc.).
   ════════════════════════════════════════════════════════════════════════ */

.account {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 1.5rem 6rem;
}
/* .site-nav is position:sticky — in flow — so this 5rem is not nav clearance,
   it's 80px of empty page. On a desktop that's breathing room; on a 660px phone
   viewport it's an eighth of the fold spent before the first word, on every
   account page. Reclaimed, not removed. */
@media (max-width: 640px) {
  .account { padding: 1.75rem 1.1rem 4rem; }
}

/* ── Auth card (login / signup / reset) ─────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem 2rem;
}

.auth-card__title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.auth-card__subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.field__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.field__input {
  background: var(--bg, #09090b);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Password reveal toggle ──────────────────────────────────────────────── */
/* attachPasswordToggles() wraps the input and drops an eye button on the right.
   Pad the input so typed text never runs under the button. */
.field__pw {
  position: relative;
  display: flex;
}

.field__pw .field__input {
  flex: 1;
  padding-right: 2.75rem;
}

.field__pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  transition: color 0.15s ease;
}

.field__pw-toggle:hover {
  color: var(--text);
}

.field__pw-toggle:focus-visible {
  outline: 2px solid var(--accent, #c8ff00);
  outline-offset: -2px;
}

/* ── Optional "website to audit" field (captured at checkout) ─────────────── */
.na-url-field { margin-bottom: 1.25rem; }

/* ── Start-a-Foundation modal: form beside the cover it buys ─────────────
   The facsimile reuses .hub-cover (redesign.css) so the promise here is the
   artifact the crawl hub later shows. Tilted and lime-lit: it should read as
   a document being handed over, not a screenshot. Narrow screens drop it —
   the one-field speed is the conversion there. */
/* Three classes on purpose: the element is .modal.modal--wide.modal--foundation,
   and modal--wide's 520px cap is declared LATER in this file — at equal
   specificity it was silently winning, squeezing the form column until the
   buttons burst out of the card. */
.modal.modal--wide.modal--foundation { max-width: 680px; }
.na-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; }
.na-split__form { min-width: 0; }
.na-split__cover { display: flex; padding-right: 0.35rem; }
.na-split .hub-cover {
  width: 195px;
  transform: rotate(1.75deg);
  box-shadow: 0 10px 44px rgba(var(--accent-rgb), 0.13), 0 4px 22px rgba(0, 0, 0, 0.55);
}
/* Domains run long and the facsimile is small — clamp the name to the paper. */
.na-split .hub-cover__client { font-size: 15px; overflow-wrap: anywhere; }
/* Labels never break mid-word, but the ROW may wrap — a squeezed viewport gets
   stacked buttons inside the card, never buttons outside it. */
.na-split .modal__actions { flex-wrap: wrap; }
.na-split .modal__actions .btn { white-space: nowrap; }
.na-cover__name--ghost { color: var(--text-muted); }
/* The sample link must not wrap mid-sentence: a two-fragment inline link has a
   bounding box whose middle is dead paragraph — people click the middle of
   what looks like a link and nothing happens. One unbroken run of text makes
   the click target exactly what the eye sees. */
.modal--foundation .na-foot a { display: inline-block; white-space: nowrap; }
.na-beats { list-style: none; margin: 0 0 1.15rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.na-beats li { position: relative; padding-left: 1.35rem; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.na-beats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
/* Below this there isn't honest room for form + cover side by side; the cover
   is decoration, so it goes first and the one-field form keeps full width. */
@media (max-width: 760px) {
  .modal.modal--wide.modal--foundation { max-width: 520px; }
  .na-split { grid-template-columns: 1fr; }
  .na-split__cover { display: none; }
}
/* The Foundation-start modal is a conversion surface: the URL field is the
   point of the whole dialog, so it reads bigger than a settings input, the
   primary CTA dominates its row, and the re-crawl path is a footnote link. */
.na-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.na-url-input { font-size: 1.05rem; padding: 0.95rem 1.1rem; }
.na-url-input:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.na-start-btn { flex: 1 1 auto; }
.na-foot { margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); }
.na-foot a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.na-foot a:hover { color: var(--accent); }
.na-credit-line {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.na-credit-line strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.na-opt {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--card-bg, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.na-url-hint { margin: 0.4rem 0 0; font-size: 0.8rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
}

/* A button is a block of colour with a sentence on it, and the brand lime is
   too bright to read a sentence on: near-black on #c8ff00 measures 16.8:1 but
   it buzzes, and light ink on that lime is 1.2:1, which is unreadable. So the
   primary button gets a deep green from the same hue family and light ink on
   top (7.4:1), while the lime stays the accent it always was on dots, bars and
   small badges, where there is no sentence to read. */
:root {
  --btn-fill: var(--accent-deep, #3f5c0b);
  --btn-ink: var(--accent-deep-ink, #f4ffe0);
}
.btn--primary {
  background: var(--btn-fill);
  color: var(--btn-ink);
  width: 100%;
}
.btn--primary:hover { background: color-mix(in srgb, var(--btn-fill) 88%, #fff); opacity: 1; }

.btn--ghost {
  background: transparent;
  border-color: var(--border-light);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); }

.btn--google {
  background: #fff;
  color: #1f1f1f;
  width: 100%;
  border-color: #fff;
}
.btn--google:hover { opacity: 0.92; }
.btn--google svg { width: 18px; height: 18px; flex: none; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Quiet reveal for the email/password form (signup is OAuth-first) ───── */
.auth-alt-toggle {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-alt-toggle:hover { color: var(--text); }

/* ── "or" divider between OAuth and the email form ──────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Links / helper rows ────────────────────────────────────────────────── */
.auth-links {
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
  font-size: 0.85rem;
}
.auth-links a { color: var(--accent); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* ── Status / error line ────────────────────────────────────────────────── */
.status {
  font-size: 0.88rem;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1.1rem;
}
.status[data-kind="error"]   { background: rgba(var(--danger-rgb), 0.12); color: var(--danger-text); }
.status[data-kind="success"] { background: var(--accent-dim, rgba(var(--accent-rgb), 0.12)); color: var(--accent); }
.status[data-kind="info"]    { background: var(--bg-card-hover); color: var(--text-muted); }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.dash {
  width: 100%;
  max-width: 720px;
}

.dash__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.dash__title { font-size: 1.8rem; font-weight: 600; margin: 0; }
.dash__email { color: var(--text-muted); font-size: 0.9rem; }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.panel__label {
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge--active   { background: var(--accent-dim, rgba(var(--accent-rgb), 0.12)); color: var(--accent); }
.badge--inactive { background: var(--bg-card-hover); color: var(--text-muted); }
.badge--warn     { background: rgba(var(--warning-rgb), 0.12); color: var(--amber-ink); }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan-card--featured { border-color: var(--accent); }
.plan-card__name { font-weight: 600; }
.plan-card__price { font-size: 1.5rem; font-weight: 700; }
.plan-card__price span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.plan-card__blurb { font-size: 0.85rem; color: var(--text-muted); flex: 1; }

.dash__signout {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.dash__signout:hover { color: var(--text); }

/* ── Dev panel (local testing only) ─────────────────────────────────────── */
.panel--dev {
  border-style: dashed;
  border-color: var(--border-light);
}
.dev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.dev-actions .btn { width: auto; }
.panel--dev .status { margin: 1rem 0 0; }

/* ── Account chrome: subnav + page head ─────────────────────────────────── */
.account-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  /* Sticks just below the 64px site-nav so account navigation is always present. */
  position: sticky;
  top: 64px;
  z-index: 50;
  background: var(--bg, #09090b);
  padding-top: 0.4rem;
}
.account-subnav__links { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.account-subnav__link {
  padding: 0.65rem 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.account-subnav__link:hover { color: var(--text); }
.account-subnav__link[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
/* Activity inbox badge — an unread count on the Activity tab. Desktop: inline pill
   after the label. Mobile: floats over the tab icon (positioned below). */
.account-subnav__link.has-badge { display: inline-flex; align-items: center; gap: .4rem; }
.acct-badge { display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .32rem;
  border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: .68rem; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; }
.account-subnav__signout {
  background: none; border: none; color: var(--text-muted);
  font-family: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline;
}
.account-subnav__signout:hover { color: var(--text); }

/* Embedded-viewer mode (?embed=1): strip page chrome so the viewer sits cleanly
   inside the crawl page's deliverable directory iframe. */
html.rl-embed .booklet-topnav,
html.rl-embed .site-nav,
html.rl-embed .account-subnav,
html.rl-embed .account-subtabs,
html.rl-embed .site-footer,
html.rl-embed .acct-tabbar,
html.rl-embed footer { display: none !important; }
html.rl-embed body { padding-top: 0 !important; }
html.rl-embed body.booklet-body { padding-top: 0 !important; }

/* ── Audits section sub-tabs (Audits · Actions · Dashboard) ──────────────────
   Secondary nav row under the primary .account-subnav, shown on the three pages
   that make up the Audits section. Pill style — deliberately lighter and
   distinct from the top subnav's underline tabs so the hierarchy reads as
   section → in-section tab. */
.account-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Sticky right below the primary .account-subnav so the section tabs stay in
     reach down a long Audits/Actions/Dashboard page. Offset = site-nav (64px) +
     subnav (~46px); z-index one under the subnav (50) so it tucks flush when
     both are pinned. Background covers page content scrolling underneath. */
  position: sticky;
  top: 108px;
  z-index: 49;
  background: var(--bg, #09090b);
  margin: -1.25rem 0 1.5rem;   /* tuck up under the subnav's 2rem bottom margin */
  padding: 0.55rem 0 0.6rem;
}
.account-subtabs__tab {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.account-subtabs__tab:hover { color: var(--text); border-color: var(--border-light); }
.account-subtabs__tab.is-current {
  color: var(--accent-ink);
  background: var(--accent-fill);
  border-color: var(--accent);
}

.account-head { margin-bottom: 1.5rem; }
.account-head__eyebrow {
  font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.4rem;
}
.account-head__title { font-size: 1.9rem; font-weight: 600; margin: 0 0 0.3rem; }

.panel__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.75rem;
}
.panel__row .panel__label { margin: 0; }
.panel__link { color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.panel__link:hover { text-decoration: underline; }
.back-link {
  display: inline-block; color: var(--text-muted); text-decoration: none;
  font-size: 0.88rem; margin-bottom: 1.25rem;
}
.back-link:hover { color: var(--text); }

/* ── Audits: home summary row + list cards ──────────────────────────────── */
.audit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: var(--text); transition: border-color 0.15s ease;
}
.audit-row:hover { border-color: var(--border-light); }
.audit-row__title { font-weight: 600; margin: 0; }
.audit-row__meta { color: var(--text-muted); font-size: 0.85rem; margin: 0.2rem 0 0; }

.audit-list { display: flex; flex-direction: column; gap: 0.75rem; }
.audit-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem 1.25rem; text-decoration: none;
  color: var(--text); transition: border-color 0.15s ease, background 0.15s ease;
}
.audit-card:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.audit-card__title { font-weight: 600; margin: 0; }
.audit-card__meta { color: var(--text-muted); font-size: 0.85rem; margin: 0.25rem 0 0; }
.audit-card__right { display: flex; align-items: center; gap: 0.9rem; }
.audit-card__chevron { color: var(--text-muted); }

/* Multi-deliverable audit card (foundation / report / plan in one row) */
.audit-card--multi { flex-direction: column; align-items: stretch; gap: 0.9rem; }
.audit-card--multi .audit-card__main { text-decoration: none; color: inherit; display: block; }
.audit-card__deliverables { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.deliverable-pill {
  font-family: var(--mono, monospace); font-size: 0.74rem; letter-spacing: 0.02em;
  color: var(--text-secondary); background: var(--bg, #09090b);
  border: 1px solid var(--border); border-radius: 99px; padding: 0.4rem 0.85rem;
  text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease;
}
.deliverable-pill:hover { border-color: var(--border-light); color: var(--text); }
.deliverable-pill--accent { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.35); }
.deliverable-pill--accent:hover { border-color: var(--accent); }

.empty-state__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.4rem; }

/* ── Audits page: scalable series-card grid ───────────────────────────────────
   Each audited target is one card in a responsive grid (auto-fill), so the page
   stays scannable past 10+ audits instead of an ever-growing stack. Latest cycle
   is prominent; older cycles tuck into a <details>. */
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1.1rem; margin-bottom: 1.5rem; align-items: start; }
.series-card { display: flex; flex-direction: column; gap: 0.9rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem 1.4rem; }
.series-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.series-card__head .badge { flex: 0 0 auto; }
.series-card__title-wrap { min-width: 0; flex: 1; }
.series-card__head .brand-avatar--sm { margin-top: 1px; }
.series-card__name { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.series-card .audit-row__title { line-height: 1.45; }
.series-card .audit-row__line { line-height: 1.5; }
.series-card__url { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.82rem; word-break: break-word; }
/* cycle rows read lighter inside a card (no heavy per-row border) */
.series-card .audit-rows { gap: 0.3rem; }
.series-card .audit-row { border: none; border-radius: 8px; padding: 0.5rem 0.4rem; }
.series-card .audit-row:hover { border: none; background: var(--bg, #09090b); }
.series-card__latest { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.4rem; text-decoration: none; border-radius: 8px; }
.series-card__latest:hover { background: var(--bg, #09090b); }
.series-card__history { border-top: 1px solid var(--border); padding-top: 0.55rem; }
.series-card__history > summary { cursor: pointer; color: var(--text-muted); font-size: 0.82rem; }
.series-card__history > summary:hover { color: var(--text); }
.series-card__history .audit-rows { margin-top: 0.5rem; }
.series-card .series__nextrun { margin: 0; }
.series-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: auto; padding-top: 0.3rem; }
.series-card__actions .btn { width: auto; }
.series-card--shared { border-style: dashed; }
.btn--sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; width: auto; }

/* ── Audits page: wider canvas + list/card view toggle ───────────────────────
   The Home dash stays a focused 720px; the Audits page is data-dense, so it gets
   more room. A toggle switches the owned-series grid between scannable full-width
   rows (list) and a compact card grid. */
.dash--audits { max-width: 900px; }
/* The crawl hub is a document, not a form: four deliverables of real data, a
   five-stop track and a stat grid that wants to be four-up. At the default
   720px the track labels crowd, the stats wrap to two, the gauges collapse to
   one column and the whole page reads as cramped. 1120px is the width the
   design was drawn at. */
/* The crawl hub is a reading surface, not a dashboard: its sections hold the
   same readers the report does, and prose wants a ~75-character measure. At
   1120px the section body was 1118px while a paragraph stopped at 739px, so a
   third of every text block was empty space sitting beside full-width tables —
   which reads as text that wrapped too early. 980px lets the reader fill the
   column and puts the leftover outside the card as page margin. */
.dash--hub { max-width: 920px; }
/* VoC is the densest surface in the account: four-up stat tiles, a theme list
   whose rows carry a title AND a rail of status chips, argument rows with a
   metric column, and a two-column model section. At the default 720px the
   chips took more of each row than the title did. 1040px is what the sections
   were drawn against; the prose inside still holds its own measure (.voc-desc,
   .voc-why and friends cap at 58-74ch), so the extra width goes to the data. */
.dash--voc { max-width: 1040px; }
.view-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.view-bar[hidden] { display: none; } /* author display:flex would otherwise defeat the hidden attribute */
.view-bar__count { font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.view-toggle { display: inline-flex; gap: 0.2rem; padding: 0.2rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.view-toggle__btn { display: inline-flex; align-items: center; gap: 0.4rem; border: none; background: none; color: var(--text-muted); font: inherit; font-size: 0.85rem; padding: 0.38rem 0.75rem; border-radius: 7px; cursor: pointer; }
.view-toggle__btn svg { width: 15px; height: 15px; }
.view-toggle__btn:hover { color: var(--text); }
.view-toggle__btn.is-active { background: var(--bg, #09090b); color: var(--text); }

/* LIST vs CARDS — both render the SAME standard parent+cycles series card; the
   toggle is just density. List = full-width stacked cards; Cards = a responsive
   grid of the same card. (No more per-row column table — a series is a card.) */
/* minmax(0,1fr) — NOT bare 1fr — so the track can shrink below the card's
   min-content (the flex header), instead of forcing the grid wider than the
   viewport on mobile. */
.series-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
.series-card__head { align-items: center; }
.series-card__cycles { gap: 0.2rem; }
.series-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Row actions kebab (⋯) — collapses Re-audit / Share into one menu, pinned top-right
   of the parent header. <details> handles open/close; the popover is absolutely
   positioned so it overlays rather than reflowing the card. */
.row-menu { position: relative; }
.series-card__head .row-menu { flex: 0 0 auto; align-self: center; }
.row-menu__btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 8px; border: 1px solid transparent; color: var(--text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; user-select: none; }
.row-menu__btn::-webkit-details-marker { display: none; }
.row-menu__btn::marker { content: ""; }
.row-menu__btn:hover, .row-menu[open] .row-menu__btn { background: var(--bg, #09090b); color: var(--text); border-color: var(--border); }
.row-menu__pop { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; min-width: 200px; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 11px; box-shadow: 0 18px 44px -18px rgba(0,0,0,0.75); }
.row-menu__item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: 0.88rem; padding: 0.5rem 0.65rem; border-radius: 7px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.row-menu__item:hover { background: var(--bg, #09090b); }

/* FEATURED — the membership (anchor) brand, pinned full-width at the top, accent-
   tinted with a larger logo. Same card shape as the rest. */
.series-card--featured { grid-column: 1 / -1; border-color: rgba(var(--accent-rgb), 0.35); background: radial-gradient(130% 170% at 0% 0%, rgba(var(--accent-rgb), 0.07), transparent 55%), var(--bg-card); }
.series-card--featured .brand-avatar--sm { width: 56px; height: 56px; border-radius: 14px; }
.series-card--featured .brand-avatar--sm .brand-avatar__mono { font-size: 1.5rem; }
.series-card--featured .series-card__name { font-size: 1.2rem; }

@media (max-width: 600px) {
  /* One column on a phone — and minmax(0,1fr) so a card can never push the grid
     wider than the screen. List vs Cards are identical at one column, so the
     density toggle is hidden here; the card reads full-width either way. */
  .view-toggle { display: none; }
  .series-grid, .series-grid--owned, .series-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .series-card { padding: 1.15rem 1.2rem; }
  /* The header can't fit logo + name + visibility metric + badge + kebab on one
     phone row — that used to crush the name column to ~1ch and stack the
     (spaceless) domain one letter per line. Let the header wrap, keep the name on
     a single ellipsized line, and drop the visibility metric to its own row. */
  .series-card__head { flex-wrap: wrap; }
  .series-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .series-card__head .attn-vis { order: 9; flex-basis: 100%; margin-left: 0; margin-top: .2rem; justify-content: flex-start; }
}

/* ── Guided pricing (first-time buyers): lead with one recommended path ───────
   Staged is demoted behind a disclosure; membership is a link, not a competing
   price on the same screen. */
.pricing-guided { max-width: 440px; }
.pricing-guided .price-card { margin: 0; }
.pricing-ladder__foot { grid-column: 1 / -1; margin-top: 0.25rem; }
.pricing-split { margin: 0.9rem 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.pricing-split > summary { cursor: pointer; padding: 0.85rem 1.1rem; color: var(--text-secondary); font-weight: 500; font-size: 0.92rem; }
.pricing-split > summary:hover { color: var(--text); }
.pricing-split__body { padding: 0 1.1rem 1.1rem; }
.pricing-split__body p { margin: 0 0 0.85rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.pricing-split__body .btn { width: auto; }
.pricing-membership-hint { margin: 1rem 0 0; color: var(--text-muted); font-size: 0.88rem; }
.pricing-membership-hint a { color: var(--accent); text-decoration: none; }
.pricing-membership-hint a:hover { text-decoration: underline; }

/* ── Membership page: billing summary + payment history ───────────────────── */
.bill-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bill-summary__plan { margin: 0.4rem 0 0.35rem; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.bill-summary__plan small { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.bill-summary__next { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
.bill-summary__next strong { color: var(--text); }
.bill-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bill-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bill-table th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.bill-table td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.bill-table tr:last-child td { border-bottom: none; }
.bill-table__right { text-align: right; }
.bill-pill { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 99px; font-size: 0.74rem; font-weight: 600; text-transform: capitalize; background: var(--border); color: var(--text-secondary); }
.bill-pill--paid { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.bill-pill--open { background: rgba(var(--l1-rgb), 0.16); color: var(--blue-ink); }
.bill-pill--void, .bill-pill--uncollectible { background: rgba(var(--warning-rgb), 0.12); color: var(--amber-ink); }

/* Membership "Your brands": one-off vs folded-into-subscription per brand */
.brand-list { display: flex; flex-direction: column; gap: 0.6rem; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 10px; }
.brand-row__main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.brand-row__name { font-weight: 600; color: var(--text); }
.brand-row__badge { font-size: 0.82rem; color: var(--text-muted); }
.brand-row__badge--in { color: var(--accent); }
.brand-row__actions .btn { width: auto; }

/* ── Membership: Connections (Google Search Console) ────────────────────── */
.conn-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.conn-head__svc { font-weight: 600; color: var(--text); }
.conn-list { display: flex; flex-direction: column; gap: 0.6rem; }
.conn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 10px;
}
.conn-row__site { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex-wrap: wrap; }
.conn-row__pick { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.conn-select {
  font-family: inherit; font-size: 0.85rem; color: var(--text);
  background: var(--bg, #09090b); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.4rem 0.6rem; max-width: 100%;
}
.conn-select:focus { outline: none; border-color: var(--accent); }
.btn--danger { background: transparent; border-color: rgba(var(--danger-rgb), 0.5); color: var(--danger-text); }
.btn--danger:hover { border-color: var(--danger); }

/* ── Report viewer: action plan + locked gate ───────────────────────────── */
.panel--unlocked { border-color: var(--accent); }

/* ── "Needs your attention" zone — accent-emphasized, distinct from the
      "start a new audit" zone so the two jobs read separately ─────────────── */
.panel--attention {
  border-color: var(--accent);
  background:
    radial-gradient(160% 120% at 0% 0%, var(--accent-glow, rgba(var(--accent-rgb), 0.08)), transparent 55%),
    var(--bg-card);
}
.panel--attention .panel__label { color: var(--accent); }
.attention__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.45rem;
  font-family: var(--mono, monospace); font-size: 0.78rem; font-weight: 500;
  color: var(--accent-ink); background: var(--accent-fill); border-radius: 99px;
}
/* Attention item = ONE audit, as a single bordered card. A multi-cycle series shows
   a parent header (the website) with each cycle linked beneath; a single audit is
   one combined row. Same series model as the Audits page. */
/* Elevated, clearly-separated card per client — raised surface + shadow so a list
   of several clients reads as distinct cards, not one jumbled stack. */
.panel--attention .audit-rows { gap: 0.85rem; }
.attn-group {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--bg-elevated, var(--tone-900));
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.attn-group > .audit-row { border: none; border-radius: 0; }
.attn-group > .audit-row:hover { border: none; background: rgba(var(--ink-rgb), 0.025); }
/* Parent (website) header of a series card. */
.attn-parent { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.15rem 0.55rem; }
.attn-parent__name { flex: 0 1 auto; font-weight: 700; font-size: 1.05rem; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-parent__meta { margin-left: auto; flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
/* Membership tag hugs the brand name (the flex gap spaces it; drop the inline margin). */
.attn-parent .series__tag { margin-left: 0; flex: 0 0 auto; }
/* Cycle rows nested under the parent — light rows, dot-marked, each a link. */
.attn-cycles { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 0.6rem 0.55rem; }
.attn-cycles .audit-row { border: none; padding: 0.5rem 0.55rem; border-radius: 8px; }
.attn-cycles .audit-row:hover { border: none; background: var(--bg, #09090b); }
/* Actionable (latest) cycle — status line + a state-aware CTA bar, replacing the
   single opaque link so the report / action plan / dashboard / pipeline are reachable
   without overwhelm: one primary button, the rest as quiet links. */
.attn-cycle { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.55rem 0.15rem; }
.attn-cycle__head { display: flex; align-items: center; gap: 1rem; }
.attn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.85rem; padding: 0.55rem 0 0.2rem 1.1rem; }
.attn-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.42rem 0.9rem; border-radius: 99px;
  font-size: 0.82rem; font-weight: 600; line-height: 1; text-decoration: none;
  color: var(--accent-ink); background: var(--accent-fill);
  border: 1px solid var(--accent); transition: filter .15s ease;
}
.attn-cta:hover { filter: brightness(1.08); }
.attn-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.attn-links__a { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; transition: color .15s ease; }
.attn-links__a:hover { color: var(--accent); }
.attn-links__sep { color: var(--border-light); font-size: 0.82rem; user-select: none; }
/* Prior, finished cycle — calm/neutral, distinct from the bright actionable "Ready". */
.badge--done { background: var(--bg-card-hover); color: var(--text-muted); border: 1px solid var(--border); }

/* ── "Start a new audit" zone wrapper — separates ordering from status ─────── */
.order-zone { margin-bottom: 1.5rem; }
.order-card__reassure { color: var(--text-muted); }

/* Collapsed new-audit bar (returning users) — slim until clicked, so the audit
   list stays the focus. The full pricing card lives in the expanded body. */
.order-zone--mini { border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-card); }
.order-mini { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; cursor: pointer; list-style: none; }
.order-mini::-webkit-details-marker { display: none; }
.order-mini__plus { color: var(--accent); font-weight: 700; font-size: 1.05rem; line-height: 1; }
.order-mini__label { font-weight: 600; color: var(--text); }
.order-mini__hint { margin-left: auto; color: var(--text-muted); font-size: 0.82rem; }
.order-zone--mini[open] .order-mini { border-bottom: 1px solid var(--border-light); margin-bottom: 0.6rem; }
.order-zone--mini .order-card { margin: 0 0.6rem; border: none; background: transparent; padding: 0.3rem 0.6rem 0.6rem; }
.order-zone--mini .order-card__foot { margin: 0.6rem 0.7rem; }

/* ── Version timeline (audits page series cards) ──────────────────────────── */
.cyc-row { align-items: center; }
.cyc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-right: 0.1rem; background: var(--border-light); }
.cyc-dot.is-done { background: var(--accent, #c8ff00); }
.cyc-dot.is-active { background: var(--blue-ink); box-shadow: 0 0 0 3px rgba(var(--l1-rgb), 0.18); }
.audits-head__eyebrow { font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.35rem; }

/* ── Report viewer: version switcher + "did the needle move?" deltas ───────── */
.cyc-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 1.5rem; }
.cyc-switch__label { font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cyc-switch__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cyc-chip { display: inline-flex; align-items: center; padding: 0.32rem 0.7rem; border-radius: 99px; font-size: 0.82rem; font-weight: 500; text-decoration: none; border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-card); }
a.cyc-chip:hover { border-color: var(--border-light); color: var(--text); }
.cyc-chip.is-current { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-fill); }
.cyc-chip.is-pending { color: var(--text-muted); border-style: dashed; }

.needle { margin: 1.5rem 0 0; padding: 1.25rem 1.4rem; border: 1px solid var(--accent); border-radius: 14px; background: radial-gradient(150% 160% at 0% 0%, var(--accent-glow, rgba(var(--accent-rgb), 0.08)), transparent 55%), var(--bg-card); }
.needle__title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.needle__sub { margin: 0.2rem 0 1rem; font-size: 0.9rem; color: var(--text-muted); }
.needle__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
.needle__cell { padding: 0.85rem 0.95rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,0.18); }
.needle__metric { margin: 0; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.needle__val { margin: 0.2rem 0 0.5rem; font-size: 1.5rem; font-weight: 700; color: var(--text); }
.needle__delta { display: block; margin: 0.15rem 0 0; font-size: 0.82rem; font-weight: 600; }
.needle__delta small { font-weight: 400; color: var(--text-muted); }
.needle__delta.is-up { color: var(--accent); }
.needle__delta.is-down { color: var(--red-ink); }
.needle__delta.is-flat { color: var(--text-muted); font-weight: 500; }

/* ── Guided "New audit" flow modal ────────────────────────────────────────── */
.modal.modal--wide { max-width: 520px; }
.na-choice { display: grid; gap: 0.75rem; margin: 0.5rem 0 0.5rem; }
.na-card { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; padding: 1rem 1.1rem; border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-card); cursor: pointer; font: inherit; }
.na-card:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.na-card__title { font-size: 1.02rem; font-weight: 600; color: var(--text); }
.na-card__body { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.na-series-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; max-height: 320px; overflow-y: auto; }
.na-series { display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; text-align: left; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); cursor: pointer; font: inherit; }
.na-series:hover { border-color: var(--accent); }
.na-series__name { font-weight: 600; color: var(--text); }
.na-series__url { font-size: 0.85rem; color: var(--text-muted); }
.na-series .audit-row__go { margin-left: auto; color: var(--accent); }
.plan-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.plan-item {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 10px;
}
.plan-item__num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-fill); color: var(--accent-ink);
  font-family: var(--mono, monospace); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.plan-item__title { font-weight: 600; margin: 0 0 0.35rem; }
.plan-item__impact {
  font-family: var(--mono, monospace); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 999px;
}
.plan-item__impact--high { background: var(--accent-dim, rgba(var(--accent-rgb), 0.12)); color: var(--accent); }
.plan-item__impact--medium { background: rgba(var(--warning-rgb), 0.12); color: var(--amber-ink); }
.plan-item__impact--low { background: var(--bg-card-hover); color: var(--text-muted); }

.gate { position: relative; }
.gate__blur { display: flex; flex-direction: column; gap: 0.75rem; filter: blur(6px); opacity: 0.45; pointer-events: none; margin-top: 1rem; }
.gate__blur span { display: block; height: 46px; border-radius: 10px; background: var(--bg, #09090b); border: 1px solid var(--border); }
.gate__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0.5rem 1rem; }
.gate__title { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.4rem; }

@media (max-width: 480px) {
  .auth-card { padding: 2rem 1.25rem; }
  .dash__header { flex-direction: column; gap: 0.25rem; }
}

/* ── Mobile account menu (hamburger) ──────────────────────────────────────────
   On ≤640px the horizontal .account-subnav is replaced by a hamburger menu in
   the top bar (built by account-nav.js). Hidden by default on desktop. */
.acct-burger, .acct-menu, .acct-menu__backdrop { display: none; }

@media (max-width: 640px) {
  /* The horizontal nav row is replaced by the menu — reclaim the space. */
  .account-subnav { display: none; }

  /* The subnav is hidden on mobile, but the section sub-tabs stay visible —
     they're how you move between Audits/Actions/Dashboard on a phone. With no
     subnav above them, they stick directly under the 64px site-nav. */
  .account-subtabs { top: 64px; margin-top: 0.25rem; }

  .acct-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; margin-left: auto; padding: 9px 7px;
    background: none; border: none; border-radius: 8px; cursor: pointer;
  }
  .acct-burger__bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
  .acct-burger.is-open .acct-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .acct-burger.is-open .acct-burger__bar:nth-child(2) { opacity: 0; }
  .acct-burger.is-open .acct-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .acct-menu__backdrop {
    display: block; position: fixed; inset: 64px 0 0; z-index: 98;
    background: rgba(0,0,0,.55); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .acct-menu__backdrop.is-open { opacity: 1; visibility: visible; }

  .acct-menu {
    display: block; position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: 0.5rem 1rem 1.1rem; box-shadow: 0 14px 28px rgba(0,0,0,.45);
    max-height: calc(100dvh - 64px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .acct-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .acct-menu__links { display: flex; flex-direction: column; }
  .acct-menu__link {
    padding: 0.95rem 0.4rem; color: var(--text-secondary); text-decoration: none;
    font-weight: 500; font-size: 1rem; border-bottom: 1px solid var(--border);
  }
  .acct-menu__link.is-current { color: var(--accent); }
  .acct-menu__signout {
    display: block; width: 100%; text-align: left; margin-top: 0.85rem;
    padding: 0.85rem 0.9rem; background: none; border: 1px solid var(--border);
    border-radius: 10px; color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  }
  .acct-menu__signout:active { border-color: var(--accent); color: var(--accent); }

  body.acct-menu-open { overflow: hidden; }
}

/* ── Mobile bottom tab bar ─────────────────────────────────────────────────────
   Persistent thumb navigation across every account page (built by account-nav.js
   alongside the hamburger). Desktop is untouched — the horizontal subnav stays. */
.acct-tabbar { display: none; }

@media (max-width: 640px) {
  .acct-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 97;
    background: var(--bg-card); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
    /* Set by account-nav.js (pinTabbarToScreenBottom): the distance between where
       the browser lays out `bottom: 0` and where the screen actually ends. It is
       0 while Safari's bottom toolbar is showing, and grows to that toolbar's
       height once it collapses — otherwise the bar strands mid-screen with page
       content running underneath it. Never negative, so browsers that already get
       this right are untouched.
       (Was `translateZ(0)` for an anti-jitter GPU layer; that promoted layer is
       one of the things that keeps iOS from re-pinning the bar after the toolbar
       hides, so a plain 2D transform stands in.) */
    transform: translateY(var(--tabbar-shift, 0px));
    transition: transform .12s ease-out;
  }
  @media (prefers-reduced-motion: reduce) { .acct-tabbar { transition: none; } }
  .acct-tab {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0.55rem 0.25rem 0.5rem; min-width: 0; position: relative;
    color: var(--text-muted); text-decoration: none;
    transition: color .15s ease;
  }
  .acct-tab__icon { width: 22px; height: 22px; }
  /* Unread badge floats over the tab icon (top-right of the centred glyph). */
  .acct-tab .acct-badge { position: absolute; top: 4px; left: calc(50% + 5px);
    min-width: .95rem; height: .95rem; padding: 0 .26rem; font-size: .62rem;
    box-shadow: 0 0 0 2px var(--bg-card); }
  .acct-tab__label {
    font-size: 0.66rem; font-weight: 500; letter-spacing: 0.01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .acct-tab.is-current { color: var(--accent); }
  .acct-tab:active { color: var(--text); }

  /* Reserve room so the fixed bar never covers the last bit of content. */
  body.has-tabbar { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
  /* The slide-down menu shouldn't tuck under the bar. */
  .acct-menu { max-height: calc(100dvh - 64px - 58px); }
}

/* ── Self-service journey tracker (dashboard): Foundations+Visibility → Actions → Re-audits ── */
.journey-panel { border-color: var(--border-light); }
.journey-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.journey-panel__lead { color: var(--text-muted); font-size: 0.9rem; margin: 0.35rem 0 0; }

.jtrack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.jstep {
  position: relative; background: var(--bg, #09090b); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column;
}
.jstep--active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent, #c8ff00); }
.jstep:not(:last-child)::after {
  content: "›"; position: absolute; right: -0.62rem; top: 1.05rem; z-index: 2;
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
}
.jstep__top { display: flex; align-items: center; gap: 0.6rem; }
.jstep__num {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono, monospace);
  font-weight: 700; font-size: 0.82rem; color: var(--text-muted); flex: 0 0 auto;
}
.jstep--done .jstep__num { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); }
.jstep--active .jstep__num { border-color: var(--accent); color: var(--accent); }
.jstep__label { font-weight: 600; color: var(--text); font-size: 0.92rem; line-height: 1.25; }
.jstep__price { display: block; font-family: var(--mono, monospace); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; }
.jstep__status { font-size: 0.82rem; margin: 0.8rem 0 0; color: var(--text-muted); line-height: 1.45; }
.jstep__status--done { color: var(--accent); }
.jstep__spacer { flex: 1; }
.jstep__cta { margin-top: 0.9rem; }
.jstep__cta .btn { width: 100%; padding: 0.6rem 0.9rem; font-size: 0.88rem; }

@media (max-width: 640px) {
  .jtrack { grid-template-columns: 1fr; }
  .jstep:not(:last-child)::after { content: "⌄"; right: auto; left: 1.05rem; top: auto; bottom: -0.62rem; }
}

/* ── Hero Returns home: superhero header ──────────────────────────────────── */
.hero-returns { margin-bottom: 2rem; }
.hero-returns__eyebrow { font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.hero-returns__title { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 0.6rem; }
.hero-returns__sub { color: var(--text-muted); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 60ch; }

/* ── Audit story-cards (the character story, tied to each audit) ───────────── */
.story-deck { display: flex; flex-direction: column; gap: 1rem; }
.story-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem 1.35rem; transition: border-color 0.15s ease; }
.story-card:hover { border-color: var(--border-light); }
.story-card__main { display: flex; gap: 1.25rem; align-items: center; text-decoration: none; color: inherit; }
.story-card__main:hover .story-card__go { transform: translateX(3px); }
.story-card__art { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 12px; background: radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.14), var(--bg-secondary) 72%); border: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.story-card__art .char--person { width: 94px; margin-bottom: -10px; }
.story-card__body { flex: 1; min-width: 0; }
.story-card__pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.story-card__kicker { font-family: var(--mono, monospace); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.3rem; }
.story-card__title { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.3rem; color: var(--text); }
.story-card__teaser { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.7rem; }
.story-card__steps { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.story-step { font-family: var(--mono, monospace); font-size: 0.64rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); }
.story-step--done { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.story-card__go { flex: 0 0 auto; align-self: center; color: var(--accent); font-weight: 700; font-size: 1.3rem; transition: transform 0.15s ease; }
.story-empty { text-align: center; padding: 2.5rem 1.5rem; }
.story-empty .char--person { width: 110px; margin-bottom: -8px; }

/* ── Pricing ladder (pay upfront, no fee — vs staged +$250 split fee) ──────── */
.pricing-ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.price-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem 1.4rem; background: var(--bg, #09090b); }
.price-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent, #c8ff00); background: radial-gradient(130% 130% at 50% 0%, var(--accent-glow, rgba(var(--accent-rgb), 0.07)), transparent 60%), var(--bg-card); }
.price-card__tag { font-family: var(--mono, monospace); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem; }
.price-card--featured .price-card__tag { color: var(--accent); }
.price-card__amount { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.price-card__amount small { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.price-card__note { color: var(--text-muted); font-size: 0.82rem; margin: 0.5rem 0 1rem; line-height: 1.45; }
.price-card__list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.price-card__list li { font-size: 0.86rem; color: var(--text-secondary); padding-left: 1.3rem; position: relative; }
.price-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.price-card .btn { margin-top: auto; }
.price-strike { color: var(--text-muted); text-decoration: line-through; }

/* ── Per-audit hub: views grid ────────────────────────────────────────────── */
.hub-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.hub-view { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; }
.hub-view:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-view--locked { opacity: 0.45; pointer-events: none; }
.hub-view__icon { font-size: 1.2rem; }
.hub-view__name { font-weight: 600; color: var(--text); }
.hub-view__meta { font-size: 0.78rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .story-card__main { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .story-card__art { width: 76px; height: 76px; }
  .story-card__art .char--person { width: 68px; }
  .story-card__go { display: none; }
  .pricing-ladder { grid-template-columns: 1fr; }
}

/* ── Home audit-system explainer (the 1·2·3, woven with ordering) ─────────── */
.account-explainer { margin-bottom: 1.5rem; }
.account-explainer__title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--text); }
.account-explainer__sub { color: var(--text-muted); line-height: 1.55; margin: 0 0 0.5rem; max-width: 64ch; }
.price-card__member { display: inline-block; font-family: var(--mono, monospace); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-fill); padding: 0.15rem 0.5rem; border-radius: 99px; margin-left: 0.5rem; }

/* ── Adaptive home hero (text + the customer's own brand) ──────────────────── */
.home-hero { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2.25rem; }
.home-hero .hero-returns { margin: 0; flex: 1; min-width: 260px; }
.home-hero__brand { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.brand-avatar { position: relative; width: 132px; height: 132px; border-radius: 26px; background: radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.14), var(--bg-secondary) 72%); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 14px 34px -16px rgba(0,0,0,0.7); }
.brand-avatar__mono { font-family: var(--font, 'Instrument Sans', sans-serif); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--accent); }
.brand-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px; background: #fff; }
.brand-avatar__host { font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* compact tile for list rows + card heads (Home attention, Audits cards) */
.brand-avatar--sm { width: 44px; height: 44px; border-radius: 11px; box-shadow: none; flex: 0 0 auto; }
.brand-avatar--sm .brand-avatar__mono { font-size: 1.15rem; }
.brand-avatar--sm .brand-avatar__img { padding: 7px; }
/* legacy character chip (still used by /account/story empty states) */
.home-hero__char { flex: 0 0 auto; width: 158px; height: 158px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, rgba(var(--accent-rgb), 0.18), var(--bg-secondary) 72%); border: 1px solid var(--border-light); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.home-hero__char .char--person { width: 146px; margin-bottom: -14px; }
.home-glance { display: flex; width: fit-content; align-items: center; gap: 0.55rem; margin: 1.1rem 0 0; font-size: 0.92rem; color: var(--text-secondary); }
.home-glance__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #c8ff00); flex: 0 0 auto; }
.home-hero__cta { width: auto !important; margin-top: 1.25rem; }
/* Status snapshot hero — CTA row (primary + quiet secondary) and the state badge
   that rides on the eyebrow line. */
.hero-snap__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.9rem; margin-top: 1.25rem; }
.hero-snap__ctas .home-hero__cta { margin-top: 0; }
.hero-returns__eyebrow .badge { vertical-align: middle; margin-left: 0.5rem; font-size: 0.66rem; padding: 0.12rem 0.5rem; }

/* Upcoming re-audits panel — shared schedule rows (.series__nextrun) stacked in one
   place, brand-attributed, each with an inline "Change date". */
.panel--upcoming .panel__label { color: var(--accent); }
.upcoming-hint { margin: 0.15rem 0 0.9rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
.upcoming-hint strong { color: var(--text-secondary); font-weight: 600; }
.upcoming-list { display: flex; flex-direction: column; gap: 0.5rem; }
.upcoming-more { display: inline-block; margin-top: 0.7rem; font-size: 0.85rem; color: var(--accent); text-decoration: none; }
.upcoming-more:hover { text-decoration: underline; }
/* Quiet "request a fresh cycle" lever under the schedule list. */
.upcoming-fresh { margin: 0.85rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); }
.upcoming-fresh__btn { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.upcoming-fresh__btn:hover { text-decoration: underline; }
/* Base-audit request modal form controls (reuses .modal*). */
.modal__label { display: block; margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.modal__opt { font-weight: 400; color: var(--text-muted); }
.modal__select { width: 100%; margin: 0 0 1.2rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: var(--bg, #09090b); border: 1px solid var(--border-light); color: var(--text); font: inherit; color-scheme: dark; }
.modal__select:focus { outline: none; border-color: var(--accent); }
.modal__err { margin: 0 0 1rem; color: var(--warning); font-size: 0.85rem; }

/* ── Compact "run another audit" card (returning users) ───────────────────── */
.order-card { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: radial-gradient(150% 170% at 0% 0%, var(--accent-glow, rgba(var(--accent-rgb), 0.08)), transparent 55%), var(--bg-card); border: 1px solid var(--border-light); border-radius: 16px; padding: 1.5rem 1.6rem; }
.order-card__body { flex: 1; min-width: 240px; }
.order-card__eyebrow { font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0; }
.order-card__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.25rem 0 0.4rem; color: var(--text); }
.order-card__sub { color: var(--text-secondary); margin: 0; max-width: 52ch; line-height: 1.5; }
.order-card__cta { width: auto !important; flex: 0 0 auto; }
.order-card__foot { font-size: 0.86rem; color: var(--text-muted); margin: 0.9rem 0 1.5rem; }
.order-card__foot a { color: var(--accent); text-decoration: none; }
.order-card__foot a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .home-hero { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
  .home-hero__brand { flex-direction: row; gap: 0.85rem; }
  .brand-avatar { width: 64px; height: 64px; border-radius: 16px; }
  .brand-avatar__img { padding: 11px; }
  .brand-avatar__mono { font-size: 1.7rem; }
  .home-hero__char { width: 120px; height: 120px; }
  .home-hero__char .char--person { width: 112px; }
  .order-card__cta { width: 100% !important; }
}
.order-card__foot button { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.order-card__foot button:hover { text-decoration: underline; }

/* ── Post-purchase progress stepper ──────────────────────────────────────── */
.prog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.prog { display: flex; gap: 0.9rem; padding: 0 0 1.4rem; position: relative; }
.prog:last-child { padding-bottom: 0; }
.prog:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--border);
}
.prog__dot {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; font-family: var(--mono, monospace);
  background: var(--bg, #09090b); border: 2px solid var(--border-light);
  color: var(--text-muted); z-index: 1;
}
.prog.is-done .prog__dot { background: var(--accent-fill); border-color: var(--accent); color: var(--accent-ink); }
.prog.is-active .prog__dot { border-color: var(--accent); color: var(--accent); }
.prog__body { padding-top: 0.15rem; flex: 1; }
.prog__title { margin: 0; font-weight: 600; color: var(--text-muted); }
.prog.is-active .prog__title { color: var(--text); }
.prog.is-done .prog__title { color: var(--text-secondary); }
.prog__detail { margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); }
.prog__cta { display: inline-flex; margin-top: 0.75rem; width: auto; }
.prog__link { display: inline-block; margin-top: 0.5rem; color: var(--accent); font-size: 0.9rem; }

/* ── Audits page header ───────────────────────────────────────────────────── */
.audits-head { margin: 0 0 1.5rem; }
.audits-head__title { margin: 0 0 0.35rem; font-size: 1.9rem; }
.audits-head__sub { margin: 0; color: var(--text-muted); }

/* ── Home status glance card ──────────────────────────────────────────────── */
.glance { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.glance__body { flex: 1 1 280px; }
.glance__kicker { margin: 0 0 0.35rem; font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.glance__headline { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.glance__detail { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.glance__cta { width: auto; flex: 0 0 auto; }

/* ── Home "Jump to" hub ────────────────────────────────────────────────────────
   One tile per app area — the home page routes you into the rest of the app
   instead of re-listing audits. Tiles, not data: navigation only. */
.home-nav { margin-bottom: 2rem; }
.home-nav__label { margin: 0 0 0.85rem; }
.home-nav__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.home-nav__card {
  position: relative; display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.15rem 1.15rem 1.25rem; min-height: 132px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; text-decoration: none; color: var(--text);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.home-nav__card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  background: #17171a;
}
.home-nav__icon { width: 24px; height: 24px; color: var(--accent); margin-bottom: 0.35rem; }
.home-nav__title { font-size: 1rem; font-weight: 600; }
.home-nav__desc { font-size: 0.84rem; line-height: 1.45; color: var(--text-muted); }
.home-nav__go {
  position: absolute; top: 1.05rem; right: 1.1rem;
  color: var(--text-muted); font-size: 1rem; transition: color .15s ease, transform .15s ease;
}
.home-nav__card:hover .home-nav__go { color: var(--accent); transform: translateX(2px); }

@media (max-width: 760px) {
  .home-nav__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .home-nav__grid { grid-template-columns: 1fr; }
  .home-nav__card { min-height: 0; }
}

/* ── AI-visibility metric on attention cards ───────────────────────────────────
   The metric we move, shown inline on each client card: current score, delta vs
   baseline, and a sparkline. Sits at the right of the brand header (series) or
   before the status badge (single audit). */
.attn-vis { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.attn-vis__spark { display: inline-flex; align-items: center; color: var(--accent); }
.attn-vis__nums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.attn-vis__val { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.attn-vis__delta { font-size: .72rem; font-weight: 600; }
.attn-vis__delta.is-up { color: var(--accent); }
.attn-vis__delta.is-down { color: var(--red-ink); }
.attn-vis__delta.is-flat { color: var(--muted, var(--text-muted)); }
/* In the single-audit row the metric sits between the text and the badge. */
.audit-row .attn-vis { margin-left: 0; }

/* ── Status badges (In Progress / Needs Review / Complete) ────────────────── */
.badge--review { background: rgba(var(--amber-rgb), 0.14); color: var(--amber-bright); border: 1px solid rgba(var(--amber-rgb), 0.4); }
.badge--progress { background: rgba(var(--l1-rgb), 0.16); color: var(--blue-ink); border: 1px solid rgba(var(--l1-rgb), 0.4); }
.badge--complete { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.45); }
.badge--lg { font-size: 0.85rem; padding: 0.42rem 0.85rem; border-radius: 999px; }

/* ── Audit rows (series-grouped list) ─────────────────────────────────────── */
.audit-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.audit-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: border-color .15s ease; }
.audit-row:hover { border-color: var(--accent); }
.audit-row__main { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.audit-row__title { color: var(--text); font-weight: 600; }
.audit-row__line { color: var(--text-muted); font-size: 0.9rem; }
.audit-row__go { color: var(--text-muted); flex: 0 0 auto; }

/* ── Series grouping ──────────────────────────────────────────────────────── */
.series__head { margin-bottom: 1rem; }
.series__name { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.series__meta { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
.series__tag { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 99px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; color: var(--accent-ink); background: var(--accent-fill); }
.series__suggest { margin-top: 1rem; padding: 1rem 1.15rem; border: 1px dashed var(--border-light); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; }
.series__suggest p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
.series__suggest .btn { width: auto; }

/* Next automatic re-audit line + inline date editor (membership benefit). */
.series__nextrun { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0 0 1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); font-size: 0.9rem; }
.series__nextrun-icon { color: var(--accent); font-size: 1rem; line-height: 1; }
.series__nextrun-text { display: flex; flex-direction: column; gap: 0.1rem; color: var(--text-secondary); }
.series__nextrun-text strong { color: var(--text); }
/* "Proposed {date} · rescheduled" sub-line — the original date, for transparency. */
.series__nextrun-moved { font-size: 0.76rem; color: var(--text-muted); }
.series__nextrun-edit { margin-left: auto; background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; color: var(--accent); cursor: pointer; }
.series__nextrun-edit:hover { text-decoration: underline; }
.series__nextrun-input { padding: 0.35rem 0.5rem; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg, #09090b); color: var(--text); font: inherit; font-size: 0.85rem; color-scheme: dark; }
.series__nextrun-save, .series__nextrun-cancel { padding: 0.35rem 0.7rem; border-radius: 8px; font: inherit; font-size: 0.82rem; cursor: pointer; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text); }
.series__nextrun-save { border-color: var(--accent); background: var(--accent-fill); color: var(--accent-ink); font-weight: 600; }
.series__nextrun-err { flex-basis: 100%; color: var(--warning); font-size: 0.82rem; }
/* Read-only next-run (shared viewers): same chrome, no edit affordance. */
.series__nextrun--ro { background: var(--bg, #09090b); }

/* ── Shared-audit team roster (owner + co-viewers) ────────────────────────── */
.series-team { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg, #09090b); font-size: 0.88rem; }
.series-team__owner, .series-team__viewers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.series-team__role { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.series-team__who { color: var(--text); font-weight: 600; }

/* ── Per-audit detail page ────────────────────────────────────────────────── */
.audit-detail-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.back-link:hover { color: var(--accent); }
.intake-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.intake-form input { flex: 1 1 240px; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--bg, #09090b); border: 1px solid var(--border-light); color: var(--text); font: inherit; }
.intake-form input:focus { outline: none; border-color: var(--accent); }
.intake-form .btn { width: auto; }

/* ── Confirmation modal ───────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 100; animation: modal-fade .12s ease; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 16px; padding: 1.85rem; max-width: 440px; width: 100%; }
.modal__title { margin: 0 0 0.6rem; font-size: 1.3rem; color: var(--text); }
.modal__body { margin: 0 0 1rem; color: var(--text-muted); line-height: 1.55; }
.modal__body a { color: var(--accent); }
.modal__target { margin: 0 0 1.4rem; padding: 0.8rem 1rem; border-radius: 10px; background: var(--accent-glow, rgba(var(--accent-rgb), 0.06)); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--text); font-weight: 600; font-family: var(--mono, monospace); word-break: break-all; }
.modal__actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.modal__actions .btn { width: auto; }
.modal__textarea { width: 100%; resize: vertical; margin: 0 0 1.2rem; padding: 0.8rem 0.9rem; border-radius: 10px; background: var(--bg, #09090b); border: 1px solid var(--border-light); color: var(--text); font: inherit; }
.modal__textarea:focus { outline: none; border-color: var(--accent); }

/* ── Share sheet (share-sheet.js) ─────────────────────────────────────────────
   Sharing is an overlay on whatever you're reading, not a destination: the home
   card's pill used to navigate to the crawl hub, so inviting a colleague cost
   you your place on the page. Rides .modal-overlay/.modal so it matches every
   other dialog; on phones it docks to the bottom, where the thumb already is. */
.share-sheet { max-width: 480px; padding: 1.5rem; }
.share-sheet__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.share-sheet__head .modal__title { flex: 1; margin: 0; font-size: 1.15rem; }
.share-sheet__x {
  flex: none; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--text-muted); font-size: 1.5rem; line-height: 1; padding: 0 0.2rem;
}
.share-sheet__x:hover { color: var(--text); }
.share-sheet__sub { margin: 0.5rem 0 1.15rem; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.share-sheet__lbl {
  display: block; margin: 0 0 0.4rem; font-family: var(--mono, monospace);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.share-sheet__row { display: flex; gap: 0.5rem; align-items: stretch; }
.share-sheet__input {
  flex: 1 1 auto; min-width: 0; padding: 0.7rem 0.8rem; border-radius: 10px;
  background: var(--bg, #09090b); border: 1px solid var(--border-light);
  color: var(--text); font: inherit; font-size: 0.9rem; color-scheme: dark;
}
.share-sheet__input:focus { outline: none; border-color: var(--accent); }
.share-sheet__url { font-family: var(--mono, monospace); font-size: 0.76rem; color: var(--text-secondary); }
.share-sheet__go, .share-sheet__copy { flex: 0 0 auto; width: auto; min-height: 44px; padding: 0 1rem; }
/* What the invite grants. The label sits beside the control rather than above it
   so the whole invite stays two rows, not four. */
.share-sheet__role-row { margin-top: 0.6rem; align-items: center; }
.share-sheet__role-row .share-sheet__lbl { flex: 0 0 auto; margin: 0; }
.share-sheet__role { padding: 0.5rem 0.6rem; font-size: 0.84rem; }
.share-sheet__msg { margin: 0.7rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--accent); }
.share-sheet__msg.is-bad { color: var(--red-ink); }
.share-sheet__roster { margin: 1.15rem 0 0; }
.share-sheet__rlabel {
  font-family: var(--mono, monospace); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem;
}
.share-sheet__rrow {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; margin-bottom: 0.35rem;
  background: var(--bg, #09090b); border: 1px solid var(--border); border-radius: 10px;
}
.share-sheet__remail { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-sheet__rtag {
  flex: none; font-family: var(--mono, monospace); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}
/* The roster's own access control — quiet until you reach for it, so a row of
   people doesn't read as a row of form fields. */
.share-sheet__rrole {
  flex: none; font: inherit; font-size: 0.76rem; cursor: pointer; color-scheme: dark;
  padding: 0.24rem 0.4rem; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.share-sheet__rrole:hover { border-color: var(--text-muted); }
.share-sheet__rrole:focus { outline: none; border-color: var(--accent); }
.share-sheet__rrole:disabled { opacity: 0.5; cursor: default; }
.share-sheet__remail .share-sheet__rtag { margin-left: 0.4rem; }
.share-sheet__revoke { font-size: 0.74rem; text-decoration: underline; }
.share-sheet__revoke:disabled { opacity: 0.5; cursor: default; }
.share-sheet__empty, .share-sheet__loading { margin: 0; font-size: 0.84rem; color: var(--text-faint); }
.share-sheet__link { margin: 1.25rem 0 0; padding-top: 1.15rem; border-top: 1px solid var(--border); }
.share-sheet__hint { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--text-faint); }

@media (max-width: 640px) {
  /* Dock to the bottom: a centred dialog on a phone puts its actions under the
     keyboard the moment the email field takes focus. */
  .share-sheet__overlay { align-items: flex-end; padding: 0; }
  .share-sheet {
    max-width: none; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 1.15rem 1rem calc(1.15rem + env(safe-area-inset-bottom, 0));
    max-height: 88dvh; overflow-y: auto;
  }
  /* iOS zooms the page when a focused input is under 16px. */
  .share-sheet__input { font-size: 16px; }
  .share-sheet__url { font-size: 0.8rem; }
}
/* The page behind an open sheet must not scroll under the reader's thumb. */
body.share-sheet-open { overflow: hidden; }

/* ── Phased fulfillment (Foundations → The Audit → Actions) ───────────────── */
.phase { border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem 1.45rem; margin-bottom: 1.1rem; }
.phase--complete { border-color: rgba(var(--accent-rgb), 0.3); }
.phase--active { border-color: rgba(var(--l1-rgb), 0.4); }
.phase__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.phase__name { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.phase__badge { flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.32rem 0.65rem; border-radius: 999px; background: var(--border); color: var(--text-muted); }
.phase--complete .phase__badge { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.phase--active .phase__badge { background: rgba(var(--l1-rgb), 0.16); color: var(--blue-ink); }
.phase__sub { margin: 0.45rem 0 1.2rem; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; max-width: 60ch; }
.phase .prog:last-child { padding-bottom: 0; }

/* Entitlement tag on the Actions step (paid/included vs unlock-required). */
.ent-tag { display: inline-block; margin-right: 0.45rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }
.ent-tag--paid { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.4); }
.ent-tag--locked { background: rgba(var(--amber-rgb), 0.14); color: var(--amber-bright); border: 1px solid rgba(var(--amber-rgb), 0.4); }

/* ── Live "building your foundations" experience ──────────────────────────── */
.prog__dot--pulse { animation: prog-pulse 1.4s ease-in-out infinite; }
@keyframes prog-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.build-live__spin { display: inline-block; width: 13px; height: 13px; margin-left: .5rem; border: 2px solid var(--border-light); border-top-color: var(--accent); border-radius: 50%; vertical-align: middle; animation: build-spin .8s linear infinite; }
@keyframes build-spin { to { transform: rotate(360deg); } }
.build-live__est { margin: .5rem 0 0; display: inline-block; font-size: .82rem; font-weight: 600; color: var(--accent); background: var(--accent-glow, rgba(var(--accent-rgb), 0.06)); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 999px; padding: .25rem .7rem; }
.build-live__steps { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.build-live__steps li { position: relative; padding-left: 1.6rem; color: var(--text-muted, var(--text-faint)); font-size: .94rem; transition: color .3s ease; }
.build-live__steps li::before { content: "○"; position: absolute; left: 0; color: var(--border-light); transition: all .3s ease; }
.build-live__steps li.is-active { color: var(--text); }
.build-live__steps li.is-active::before { content: "◐"; color: var(--blue-ink); animation: build-spin 1.2s linear infinite; }
.build-live__steps li.is-done { color: var(--text-secondary); }
.build-live__steps li.is-done::before { content: "✓"; color: var(--accent); }
.build-live__fact { margin: 1.1rem 0 0; padding: .85rem 1rem; border-left: 3px solid var(--accent, #c8ff00); background: var(--accent-glow, rgba(var(--accent-rgb), 0.06)); border-radius: 0 10px 10px 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.55; min-height: 1.2em; }
.build-live__eta { margin: .9rem 0 0; color: var(--text-muted, var(--text-faint)); font-size: .85rem; }

/* ── Audit sharing (read-only viewers) ──────────────────────────────────────
   Owner-side share manager + viewer-side read-only treatment. Reuses the
   homepage design-system variables; no new colors. */
.series__head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.series__share-btn { flex: 0 0 auto; padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* "Shared · read-only" tag — same pill as series__tag but muted, not accent. */
.series__tag--shared { color: var(--text-secondary); background: var(--bg, #09090b); border: 1px solid var(--border-light); }

/* In-flight cycle in a shared series: visible but not linkable. */
.audit-row.is-disabled { cursor: default; opacity: 0.72; }
.audit-row.is-disabled:hover { border-color: var(--border); }
.audit-row.is-disabled .audit-row__go { visibility: hidden; }

/* Share manager panel (inline under an owned series). */
.share-mgr { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg, #09090b); }
.share-mgr__empty { margin: 0 0 0.85rem; }
.share-mgr__status { margin: 0.75rem 0 0; }

.share-list { list-style: none; margin: 0 0 0.85rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.share-list__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); }
.share-list__email { color: var(--text); font-size: 0.9rem; word-break: break-all; }
.share-list__pending { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 99px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg, #09090b); border: 1px solid var(--border); }
.share-list__revoke { flex: 0 0 auto; background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.share-list__revoke:hover { color: var(--danger); text-decoration: underline; }

.share-add { display: flex; gap: 0.5rem; }
.share-add__input { flex: 1 1 auto; min-width: 0; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 0.55rem 0.75rem; font: inherit; font-size: 0.9rem; }
.share-add__input:focus { outline: none; border-color: var(--accent); }
/* width:auto overrides .btn--primary's hardcoded width:100% so the button hugs
   its label and the input takes the remaining space. */
.share-add__btn { flex: 0 0 auto; width: auto; padding: 0.55rem 1rem; font-size: 0.85rem; white-space: nowrap; }

/* Inline access bar on each owned series card — viewer chips + invite form.
   Chips reuse the .adm-chip styles shared with the admin console. */
.series-access { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.85rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--border); }
.series-access__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.series-access__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.series-access__none { font-size: 0.82rem; color: var(--text-muted); }
/* Collapsed state — no viewers yet: a quiet trigger, no top border/label. */
.series-access--empty { border-top: none; padding-top: 0; margin-top: 0.5rem; }
.series-access__trigger { background: none; border: none; padding: 0.15rem 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.series-access__trigger:hover { color: var(--accent); }
.series-access__add { border: 1px dashed var(--border-light); background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 600; padding: 0.18rem 0.6rem; border-radius: 999px; }
.series-access__add:hover { border-color: var(--accent); color: var(--accent); }
.series-access__form { flex: 1 1 100%; margin: 0.3rem 0 0; align-items: center; }
/* .share-add sets display:flex, which would otherwise defeat the [hidden]
   attribute (equal specificity, author wins) — keep the form hidden until opened. */
.series-access__form[hidden] { display: none; }
.series-access__form .share-add__btn { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
/* Cancel is a quiet text link, not a second heavy button. */
.series-access__cancel { flex: 0 0 auto; background: none; border: none; padding: 0.25rem 0.4rem; font: inherit; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
.series-access__cancel:hover { color: var(--text); text-decoration: underline; }
.series-access__status { flex: 1 1 100%; margin: 0.4rem 0 0; }

/* Read-only banner at the top of a shared report. */
.ro-banner { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.25rem; padding: 0.7rem 1rem; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); font-size: 0.88rem; }
.ro-banner__lead { display: flex; align-items: center; gap: 0.55rem; }
.ro-banner__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--accent, #c8ff00); }
.ro-banner__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; padding-left: calc(8px + 0.55rem); }
.ro-banner__fact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--text); }
.ro-banner__k { color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Share flow on phones ───────────────────────────────────────────────────
   The add-viewer form (input + button) and the email/remove rows cram on a
   narrow card, so stack the form full-width and let list rows wrap. */
@media (max-width: 480px) {
  .share-add { flex-direction: column; align-items: stretch; }
  .share-add__input { width: 100%; }
  .share-add__btn { width: 100%; }
  .share-list__item { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
  .share-list__email { flex: 1 1 100%; }
}

/* ── Actions (Google integration) ──────────────────────────── */
.sa-head { margin: 1.5rem 0 1rem; }
.sa-sub { color: var(--muted, var(--text-muted)); max-width: 60ch; }
.sa-muted { color: var(--muted, var(--text-muted)); }
.sa-fine { font-size: .8rem; color: var(--muted, var(--text-muted)); margin-top: .5rem; }
.sa-state { margin-bottom: 1rem; }
.sa-state .panel { margin-bottom: 1rem; }
.sa-flash {
  border: 1px solid var(--border); border-radius: 8px;
  padding: .75rem 1rem; margin: 0 0 1rem; font-size: .9rem;
}
.sa-flash[data-kind="ok"]  { border-color: #2f6b2f; background: #102310; }
.sa-flash[data-kind="err"] { border-color: #6b2f2f; background: #231010; }
.sa-field { display: block; margin: .75rem 0; font-size: .9rem; }
.sa-field select {
  display: block; width: 100%; margin-top: .35rem; padding: .5rem;
  background: var(--card-bg, var(--bg-card)); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.sa-linked { list-style: none; padding: 0; margin: 0; }
.sa-linked li { padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }

/* Actions — site match cards */
.sa-cards { display: grid; gap: .75rem; }
.sa-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 1rem;
  background: var(--card-bg, var(--bg-card));
}
.sa-card__site { font-weight: 600; margin-bottom: .5rem; }
.sa-card__line { display: flex; gap: .5rem; font-size: .9rem; margin: .15rem 0; }
.sa-card__k { color: var(--muted, var(--text-muted)); min-width: 8.5rem; }
.sa-card__v.is-ok  { color: var(--lime-soft); }
.sa-card__v.is-miss { color: #d99; }
.sa-card__edit { margin: .5rem 0; }
.sa-card__actions { display: flex; align-items: center; gap: .9rem; margin-top: .75rem; }
.sa-card__status { font-size: .85rem; color: var(--lime-soft); }
.sa-link {
  background: none; border: none; color: var(--accent);
  font: inherit; font-size: .8rem; cursor: pointer; padding: 0; text-decoration: underline;
}

/* Actions — insights / query gap */
.sa-insights-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sa-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.sa-table th { text-align: left; color: var(--muted, var(--text-muted)); font-weight: 500; padding: .35rem .5rem; border-bottom: 1px solid var(--border); }
.sa-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.sa-table td:first-child { max-width: 30rem; }
.sa-table tr:hover td { background: rgba(var(--ink-rgb), .02); }

/* Actions — opportunity themes (actionable view) */
.sa-headline { font-size: 1rem; line-height: 1.5; margin: .25rem 0 1rem; }
.sa-themes { display: grid; gap: .75rem; }
.sa-theme {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 8px; padding: .85rem 1rem; background: var(--card-bg, var(--bg-card));
}
.sa-prio-high { border-left-color: var(--accent); }
.sa-prio-med  { border-left-color: #6b8f2f; }
.sa-theme__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sa-theme__label { font-weight: 600; font-size: 1.02rem; }
.sa-theme__meta { font-size: .88rem; color: var(--text-secondary); margin-top: .25rem; }
.sa-theme__ex { font-size: .8rem; color: var(--muted, var(--text-muted)); margin-top: .35rem; font-style: italic; }
.sa-theme__act { margin-top: .55rem; }
.sa-badge { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 4px; }
.sa-badge--high { background: var(--accent-fill); color: var(--accent-ink); }
.sa-badge--med  { background: var(--accent-dim-solid); color: var(--accent); }
.sa-badge--low  { background: var(--border); color: var(--text-muted); }
.sa-more { margin-top: 1rem; font-size: .85rem; }
.sa-more summary { cursor: pointer; color: var(--muted, var(--text-muted)); }

/* Actions — blueprint action items */
.sa-theme__items { margin-top: .6rem; display: grid; gap: .5rem; }
.sa-item {
  border: 1px solid var(--border); border-radius: 6px; padding: .55rem .7rem;
  /* When an action is anchored to the top (clicked from a preview, deep-linked,
     or from the Activity cockpit) keep its title clear of the sticky nav + subnav
     + filter bar above it — otherwise the title tucks under them. */
  scroll-margin-top: 10rem;
  background: rgba(var(--ink-rgb), .015);
}
.sa-item--done { opacity: .55; }
.sa-item--doing { border-left: 3px solid #6b8f2f; }
.sa-item__head { display: flex; align-items: center; gap: .5rem; }
.sa-item__title { flex: 1; font-weight: 500; font-size: .92rem; }
.sa-item--done .sa-item__title { text-decoration: line-through; }
.sa-chip { font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: 3px; background: var(--border); color: var(--text-muted); }
.sa-item__line { font-size: .82rem; color: var(--text-secondary); margin-top: .3rem; }
.sa-item__line strong { color: var(--muted, var(--text-muted)); font-weight: 600; }
/* Prominent segmented status control at the top of each action item */
.sa-statusbar { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem; flex-wrap: wrap; }
.sa-statusbar__lbl { font-family: var(--mono, monospace); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, var(--text-muted)); }
.sa-statusseg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sa-segbtn { appearance: none; background: transparent; border: 0; border-right: 1px solid var(--border); color: var(--muted, var(--text-muted)); font: inherit; font-size: .8rem; font-weight: 500; line-height: 1; padding: .5rem .9rem; cursor: pointer; transition: background .12s, color .12s; }
.sa-segbtn:last-child { border-right: 0; }
.sa-segbtn:hover { background: rgba(var(--ink-rgb), .05); color: var(--text); }
.sa-segbtn.is-active { color: var(--accent-ink); font-weight: 700; }
.sa-segbtn--todo.is-active { background: var(--text-muted); }
.sa-segbtn--doing.is-active { background: var(--accent-fill); }
.sa-segbtn--done.is-active { background: var(--lime-soft); }
.sa-l1 summary { color: var(--accent); }
.sa-l1 .sa-item { margin-top: .5rem; }

/* Actions — collapsible theme cards (management view) */
details.sa-theme { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 8px; background: var(--card-bg, var(--bg-card)); margin-bottom: .6rem; }
details.sa-theme.sa-prio-high { border-left-color: var(--accent); }
details.sa-theme.sa-prio-med  { border-left-color: #6b8f2f; }
.sa-theme__summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; padding: .8rem 1rem; }
.sa-theme__summary::-webkit-details-marker { display: none; }
.sa-theme__summary::before { content: "▸"; color: var(--muted, var(--text-muted)); font-size: .8rem; transition: transform .15s; }
details.sa-theme[open] .sa-theme__summary::before { transform: rotate(90deg); }
.sa-theme__summary .sa-theme__label { font-weight: 600; font-size: 1rem; }
.sa-theme__rollup { display: inline-flex; gap: .35rem; }
.sa-theme__metaline { margin-left: auto; }
.sa-theme__body { padding: 0 1rem 1rem; }
.sa-pip { font-size: .68rem; font-weight: 600; padding: .1rem .4rem; border-radius: 10px; }
.sa-pip--done { background: #1c3a1c; color: var(--lime-soft); }
.sa-pip--doing { background: var(--accent-dim-solid); color: var(--accent); }
.sa-pip--todo { background: var(--border); color: var(--text-muted); }
/* Per-row status + assignee dropdowns in the action summary — replace the old
   click-to-advance pill so it's obvious the value is changeable. Status keeps the
   pill colors so state stays glanceable. */
.sa-rowsel { font: inherit; font-size: .74rem; font-weight: 600; padding: .18rem .45rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer; max-width: 8.5rem; }
.sa-rowsel:hover { border-color: var(--border-light); }
.sa-rowsel:focus { outline: none; border-color: var(--accent); }
.sa-rowsel--todo  { background: var(--border); color: var(--text-muted); border-color: #3a3a3e; }
.sa-rowsel--doing { background: var(--accent-dim-solid); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.sa-rowsel--done  { background: #1c3a1c; color: var(--lime-soft); border-color: rgba(134,239,172,.35); }
.sa-rowsel--assignee { color: var(--muted, var(--text-muted)); }

/* Actions — overview + per-site command center + filters */
.sa-connbar { margin-bottom: 1rem; color: var(--muted, var(--text-muted)); }
.sa-h2 { font-size: 1.15rem; margin: .5rem 0 .75rem; }
.sa-arrow { color: var(--accent); font-size: .85rem; }
.sa-prog { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.sa-prog__bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.sa-prog__bar span { display: block; height: 100%; background: var(--accent, #c8ff00); }
/* Scoreboard header: brand on the left, the AI-visibility metric on the right. */
.sa-cmd__head { display: flex; align-items: center; gap: 1rem; }
.sa-cmd__head .sa-h2 { min-width: 0; }
.sa-cmd__stats { display: flex; gap: 1.5rem; margin: .5rem 0 .75rem; color: var(--muted, var(--text-muted)); font-size: .85rem; }
/* Divider between the top scoreboard zone and the full filterable action list —
   a subtle labeled break so "high metrics above / all actions below" reads clearly. */
.sa-listhead { display: flex; align-items: baseline; gap: .6rem; margin: 1.75rem 0 .25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.sa-listhead__t { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.sa-stat { font-size: 1.5rem; font-weight: 700; color: var(--text); display: block; }
.sa-next { margin-top: .5rem; font-size: .95rem; }
/* Sticky filter/reorder toolbar — stays pinned below the navs as the long item
   list scrolls, so filters, sort, and Reorder are always reachable. Offset =
   site-nav (64px) + account-subnav (~46px) on desktop; just the site-nav on
   mobile, where the subnav collapses into the hamburger. */
.sa-stickybar {
  position: -webkit-sticky; position: sticky; top: 110px; z-index: 40;
  background: var(--bg, #09090b);
  margin: 0 0 1rem; padding: .6rem 0;
  border-bottom: 1px solid var(--border);
}
.sa-stickybar .sa-filters { margin: 0; }
.sa-stickybar .sa-reorder-note { margin: .55rem 0 0; }
/* Desktop: filters are always visible; the mobile toggle is hidden. */
.sa-filtertoggle { display: none; }
@media (max-width: 640px) {
  .sa-stickybar { top: 64px; }
  /* Mobile has no subnav (it's a hamburger), so less to clear above an anchored action. */
  .sa-item { scroll-margin-top: 7rem; }
  /* Compact toggle row — keeps the sticky bar thin so action items stay
     readable while scrolling. Filters expand on tap. */
  .sa-filtertoggle {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .55rem .75rem; font: inherit; font-size: .85rem; font-weight: 600;
    background: var(--card-bg, var(--bg-card)); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text); cursor: pointer;
  }
  .sa-filtertoggle__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
    background: var(--accent-fill); color: var(--accent-ink);
    border-radius: 999px; font-size: .72rem; font-weight: 700;
  }
  .sa-filtertoggle__chev { margin-left: auto; transition: transform .18s ease; }
  .sa-stickybar.filters-open .sa-filtertoggle__chev { transform: rotate(180deg); }
  /* Collapsed by default; the filter set appears only when opened. */
  .sa-stickybar .sa-filters { display: none; margin-top: .6rem; }
  .sa-stickybar.filters-open .sa-filters { display: flex; gap: .75rem; }
}
.sa-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.sa-fg { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.sa-chip { font-size: .8rem; padding: .25rem .6rem; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--muted, var(--text-muted)); cursor: pointer; }
.sa-chip.is-active { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.sa-empty { margin-top: 1rem; }

/* ── Actions: drag-to-reorder (custom per-client sequence) ──────────────────
   The "Reorder" toggle sits alongside the filters; in reorder mode each item
   shows a grip and becomes draggable WITHIN its layer section. Order is shared
   per client, so a note makes that explicit before anyone drags. */
.sa-reorder-btn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .8rem; padding: .25rem .6rem; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--muted, var(--text-muted)); cursor: pointer; }
.sa-reorder-btn:hover { color: var(--text); border-color: var(--muted, var(--text-muted)); }
.sa-reorder-btn.is-active { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.sa-reorder-btn:disabled { opacity: .45; cursor: not-allowed; }
.sa-reorder-btn:disabled:hover { color: var(--muted, var(--text-muted)); border-color: var(--border); }
.sa-reorder-btn__grip { font-size: .95rem; line-height: 1; }
.sa-reorder-note { font-size: .78rem; color: var(--muted, var(--text-muted)); margin: -.4rem 0 .8rem; }
.sa-grip-inline, .sa-reorder-note .sa-grip-inline { color: var(--accent); }
/* Grip handle on each item — only present in reorder mode. */
.sa-grip { display: none; color: var(--muted, var(--text-muted)); font-size: 1rem; line-height: 1; cursor: grab; user-select: none; }
#sa-items.is-reorder .sa-grip { display: inline-block; }
#sa-items.is-reorder .sa-item { cursor: grab; border-style: dashed; }
#sa-items.is-reorder .sa-item__sum { cursor: grab; }
.sa-item.is-dragging { opacity: .5; cursor: grabbing; outline: 2px dashed var(--accent, #c8ff00); outline-offset: 2px; }

/* ── Actions: "about to move" filter grace ─────────────────────────────────
   A status change that no longer matches the active filter keeps the row
   visible + highlighted (amber) with an inline Undo, instead of yanking it out.
   It hides on the next explicit filter touch. */
.sa-item.is-leaving { opacity: 1; border-color: #f5b301; box-shadow: inset 3px 0 0 #f5b301; background: rgba(245,179,1,.06); }
.sa-leavingnote { flex-basis: 100%; display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: #f5b301; margin-top: .15rem; }
.sa-leavingnote__undo { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; font-size: .72rem; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Actions overview — "Your sites" searchable + sortable list (scales to many
   client sites). A header bar holds the title + search/sort; each site is a
   compact row with its favicon as a visual cue. */
.sa-sites__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; margin: .5rem 0 .5rem; }
.sa-sites__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sa-search { background: var(--card-bg, var(--bg-card)); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .4rem .65rem; font: inherit; font-size: .85rem; min-width: 200px; }
.sa-search:focus { outline: none; border-color: var(--accent); }
.sa-sortwrap { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted, var(--text-muted)); }
.sa-sortsel { background: var(--card-bg, var(--bg-card)); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .4rem .5rem; font: inherit; font-size: .85rem; cursor: pointer; }
/* "Work next" rollup header — label + scoped-site cue on the left, picker right */
.sa-worknext__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; }
.sa-worknext__lead { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.sa-worknext__sel { font-size: .78rem; padding: .22rem .45rem; }
/* Favicon + name chip shown when "Work next" (and the stats above) are scoped
   to a single site — the visual cue for which site is being filtered. */
.sa-worknext__scope { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--text); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 14px; padding: .12rem .55rem .12rem .35rem; }
.sa-worknext__scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-worknext__scope .sa-favicon { width: 16px; height: 16px; margin-right: 0; vertical-align: 0; }
.sa-sitelist { display: flex; flex-direction: column; gap: .4rem; }
/* Each site is an accordion: summary = metrics (a grid), body = action preview.
   The chevron is the expand affordance; the body's "Manage" link navigates. */
.sa-siterow { background: var(--card-bg, var(--bg-card)); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s ease; }
.sa-siterow:hover { border-color: var(--accent); }
.sa-siterow__fold { display: block; }
.sa-siterow__sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto auto minmax(90px, .8fr) auto; align-items: center; gap: .9rem; padding: .6rem .85rem; }
.sa-siterow__sum::-webkit-details-marker { display: none; }
.sa-siterow__sum::before { content: "▸"; color: var(--muted, var(--text-muted)); font-size: .8rem; transition: transform .15s; }
details.sa-siterow[open] .sa-siterow__sum::before { transform: rotate(90deg); }
.sa-siterow__brand { display: flex; align-items: center; min-width: 0; }
.sa-siterow__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-siterow__open { font-size: .85rem; color: var(--muted, var(--text-muted)); white-space: nowrap; }
.sa-siterow__open strong { color: var(--text); }
.sa-siterow__prog { display: flex; align-items: center; gap: .5rem; }
.sa-siterow__prog .sa-prog__bar { flex: 1; }
.sa-siterow__meta { white-space: nowrap; }
.sa-siterow__body { padding: .1rem .9rem .9rem 2.4rem; }
.sa-siterow__bodylbl { margin: 0 0 .15rem; }
.sa-siterow__manage { display: block; padding: .6rem .85rem; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.sa-siterow__manage:hover { background: rgba(var(--accent-rgb), .05); }

/* AI-visibility metric cell inside the row summary (the number we move). Its own
   grid column so it stays aligned; the metric sits left within the cell. The cell
   is empty when a series has no visibility trend yet. */
.sa-siterow__vis { display: flex; align-items: center; min-width: 0; }
.sa-siterow__vis .attn-vis { margin-left: 0; }

/* The #1 next action — always visible on a collapsed row so every site shows one
   actionable line. Hidden once the row is open, where the full L1·L2·L3 list in
   the body takes over. Sits between the fold and the "Manage all" CTA. */
.sa-siterow__next { padding: .1rem .85rem .55rem 2.4rem; }
.sa-siterow__next .sa-startitem { width: 100%; }
.sa-siterow__fold[open] ~ .sa-siterow__next { display: none; }

@media (max-width: 760px) {
  /* Collapse to stacked lines: chevron + brand on top, then visibility, stats. */
  .sa-siterow__sum { grid-template-columns: auto 1fr; row-gap: .45rem; }
  .sa-siterow__sum::before { grid-column: 1; grid-row: 1; }
  .sa-siterow__brand { grid-column: 2; grid-row: 1; }
  .sa-siterow__vis { grid-column: 1 / -1; grid-row: 2; }
  .sa-siterow__vis .attn-vis { justify-content: flex-start; }
  .sa-siterow__open { grid-column: 1 / -1; grid-row: 3; }
  .sa-siterow__prog { grid-column: 1 / -1; grid-row: 4; }
  .sa-siterow__meta { grid-column: 1 / -1; grid-row: 5; }
  .sa-siterow__body { padding-left: 1.1rem; }
  .sa-siterow__next { padding-left: 1.1rem; }
  .sa-search { min-width: 0; flex: 1; }
}

/* Actions overview — persistent all-sites KPI strip above the unified site list */
.sa-kpi { display: flex; align-items: center; gap: .6rem 1.75rem; flex-wrap: wrap; padding: .7rem 1rem; margin-bottom: .9rem; background: var(--card-bg, var(--bg-card)); border: 1px solid var(--border); border-radius: 12px; }
.sa-kpi__stats { display: flex; gap: 1.5rem; font-size: .85rem; color: var(--muted, var(--text-muted)); }
.sa-kpi__stats b { color: var(--text); font-weight: 700; }
.sa-kpi__prog { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 160px; }
.sa-kpi__prog .sa-fine { margin-top: 0; }

/* Dashboard tab — cross-site progress by layer */
.sa-lb { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.25rem; }
.sa-lb__h { margin: 0 0 .2rem; }
.sa-lb__row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(120px, .8fr); align-items: center; gap: .75rem; }
.sa-lb__label { font-size: .9rem; }
@media (max-width: 600px) {
  .sa-lb__row { grid-template-columns: auto 1fr; row-gap: .35rem; }
  .sa-lb__row .sa-siterow__prog { grid-column: 1 / -1; }
}

/* Actions — aggregate overview band + "Start here" / "Work next" lists */
.sa-agg { margin-bottom: 1.25rem; }
.sa-agg__stats { display: flex; gap: 1.75rem; margin: 0 0 .25rem; color: var(--muted, var(--text-muted)); font-size: .85rem; }
.sa-starthere { margin-top: .9rem; }
/* "Start here" layer tabs (L1/L2/L3) + the do-a-little-of-each hint. */
.sa-starthere__head { display: flex; align-items: center; gap: .65rem; }
.sa-stabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sa-stab { appearance: none; background: transparent; border: 0; border-right: 1px solid var(--border);
  color: var(--muted, var(--text-muted)); font: inherit; font-size: .72rem; font-weight: 700; padding: .18rem .6rem; cursor: pointer;
  transition: background .1s, color .1s; }
.sa-stab:last-child { border-right: 0; }
.sa-stab:hover { color: var(--text); background: rgba(var(--ink-rgb), .05); }
.sa-stab.is-active { background: var(--accent-fill); color: var(--accent-ink); }
.sa-starthere__hint { font-size: .76rem; color: var(--muted, var(--text-muted)); margin: .4rem 0 .2rem; line-height: 1.45; max-width: 60ch; }
.sa-starthere__hint strong { color: var(--text-secondary); font-weight: 600; }
.sa-startlist__empty { color: var(--muted, var(--text-muted)); padding: .5rem .2rem; }
.sa-startlist li.sa-startlist__empty::before { content: none; }
.sa-startlist { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; counter-reset: sh; }
.sa-startlist li { display: flex; align-items: stretch; gap: .5rem; }
.sa-startlist li::before { counter-increment: sh; content: counter(sh); flex: 0 0 1.4rem; display: flex; align-items: center; justify-content: center; font-family: var(--mono, monospace); font-size: .72rem; color: var(--muted, var(--text-muted)); }
.sa-startitem { display: flex; align-items: center; gap: .5rem; flex: 1; text-align: left; text-decoration: none; background: rgba(var(--ink-rgb), .02); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; cursor: pointer; color: var(--text); font: inherit; font-size: .85rem; transition: background .12s, border-color .12s; }
.sa-startitem:hover { background: rgba(var(--ink-rgb), .05); border-color: var(--muted, var(--text-muted)); }
.sa-startitem__t { flex: 1; }
.sa-startitem__site { flex: 0 0 auto; }
.sa-hidedone { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .8rem; color: var(--muted, var(--text-muted)); cursor: pointer; }
.sa-hidedone input { cursor: pointer; }

/* Quick-status pill is a button; reset chrome, keep pip look */
button.sa-item__statuspill { appearance: none; border: 0; font: inherit; cursor: pointer; }
button.sa-item__statuspill:disabled { cursor: default; }
.sa-item.is-flash { outline: 2px solid var(--accent, #c8ff00); outline-offset: 2px; }

/* Actions — source-audit linkage + per-item cycle tag */
.sa-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .15rem 0 .6rem; }
.sa-srcaudit { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; text-decoration: none; color: var(--text-secondary); background: rgba(var(--ink-rgb), .03); border: 1px solid var(--border); border-radius: 14px; padding: .15rem .6rem; transition: border-color .12s, color .12s; }
.sa-srcaudit:hover { color: var(--accent); border-color: var(--accent); }
.sa-srcaudit--pending { opacity: .55; cursor: default; }
.sa-srcaudit--pending:hover { color: var(--text-secondary); border-color: var(--border); }
.sa-cyc { font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .1rem .35rem; border-radius: 3px; background: #1c2733; color: #7fb0e0; }

/* Actions — site favicon cue */
.sa-favicon { width: 20px; height: 20px; border-radius: 4px; vertical-align: -4px; margin-right: .5rem; background: #fff; }
/* Bigger site logos on the Actions overview (Sites rows + Dashboard cards) — a
   stronger visual cue for which client you're looking at. Both wrap the logo in
   .sa-siterow__brand; the favicon src already requests sz=64 so it stays crisp. */
.sa-siterow__brand .sa-favicon { width: 30px; height: 30px; border-radius: 6px; margin-right: .6rem; }
.sa-h2 .sa-favicon { width: 24px; height: 24px; vertical-align: -5px; }

/* Actions — GSC badge, connect block, layer sections, inline keywords */
.sa-gscbadge { font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 10px; background: var(--border); color: var(--text-muted); }
.sa-gscbadge--on { background: #1c3a1c; color: var(--lime-soft); }
/* "Shared with you" — read-only access marker on shared (non-owned) series. */
.sa-shared { display: inline-block; font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 10px; background: rgba(var(--accent-rgb), .12); color: var(--accent); margin-left: .4rem; white-space: nowrap; }
.sa-siterow__brand .sa-shared { margin-left: .5rem; }
.sa-gsc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.sa-gsc--on { padding: .7rem 1rem; }
.sa-layer { margin: 1.25rem 0; }
.sa-layer__h { font-size: 1rem; margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.sa-item__kw { font-size: .82rem; margin-top: .35rem; line-height: 1.7; }
.sa-item__kw strong { color: var(--muted, var(--text-muted)); }
.sa-kw { display: inline-block; background: #1a2417; border: 1px solid var(--accent-dim-solid); color: var(--accent); border-radius: 6px; padding: .05rem .4rem; margin: 0 .25rem .25rem 0; }
.sa-kw .sa-fine { color: #7a8a5a; }

/* Actions — collapsible action items with full brief inline */
details.sa-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: .5rem; background: rgba(var(--ink-rgb), .015); }
details.sa-item[open] { background: var(--card-bg, var(--bg-card)); }
.sa-item__sum { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .6rem .8rem; }
.sa-item__sum::-webkit-details-marker { display: none; }
.sa-item__sum::before { content: "▸"; color: var(--muted, var(--text-muted)); font-size: .75rem; }
details.sa-item[open] .sa-item__sum::before { content: "▾"; }
/* Expanded: the summary reads as a header bar — a subtle tint + a divider — so the
   action's top-level row is visually distinct from its detail body below (which
   keeps the card background). Makes a long expanded item far easier to scan. */
details.sa-item[open] .sa-item__sum {
  background: rgba(var(--ink-rgb), .04);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
}
.sa-item__sum .sa-item__title { flex: 1; font-weight: 500; font-size: .92rem; }
.sa-item--done .sa-item__title { text-decoration: line-through; opacity: .7; }
.sa-item__statuspill { margin-left: auto; }
.sa-item__body { padding: .5rem 1.4rem 1.4rem 2.2rem; }
.sa-brief { margin-top: 1rem; }
.sa-brief .brief-block { margin-bottom: 1.4rem; }
.sa-brief a.sa-link { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.sa-pages .brief-list { margin-top: .35rem; }
.sa-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
@media (max-width: 600px) { .sa-item__body { padding: .5rem .9rem 1.1rem 1.1rem; } }

/* ── Dashboard (time-series scoreboard) ─────────────────────────────────── */
.dash-site { margin-bottom: 2.5rem; }
.dash-site__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.dash-site__head .sa-h2 { margin: 0; }

/* Section headers — GEO-then-SEO narrative */
.dash-secthead { margin: 1.9rem 0 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.dash-secthead__t { font-size: 1.15rem; font-weight: 700; margin: 0 0 .2rem; color: var(--text); letter-spacing: -.01em; }
.dash-secthead__s { font-size: .8rem; color: var(--muted, var(--text-muted)); margin: 0; line-height: 1.5; }

/* Scorecards */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
/* A single headline scorecard leading its section (full width, no span quirk) */
.dash-stats--single { grid-template-columns: 1fr; }
.dash-stats--single .dash-stat--hero { grid-column: auto; }
.dash-stat { border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1rem; background: var(--card-bg, var(--bg-card)); display: flex; flex-direction: column; gap: .15rem; }
.dash-stat__label { font-family: var(--mono, monospace); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, var(--text-muted)); }
.dash-stat__valrow { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.dash-stat__value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.dash-stat__sub { font-size: .75rem; color: var(--muted, var(--text-muted)); }
.dash-spark { margin: .1rem 0; }

/* Hero scorecard — the headline KPI (AI visibility) leads the row */
.dash-stat--hero { grid-column: span 2; border-color: var(--accent); background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), rgba(var(--accent-rgb), .015)); }
.dash-stat--hero .dash-stat__value { font-size: 2.2rem; }
.dash-stat--hero .dash-stat__label { color: var(--accent); }

/* Momentum delta badge — "▲ 23%" green up / "▼ 18%" red down */
.dash-delta { display: inline-flex; align-items: center; gap: .12rem; font-family: var(--mono, monospace); font-size: .72rem; font-weight: 600; padding: .08rem .4rem; border-radius: 8px; white-space: nowrap; cursor: help; }
.dash-delta--up { color: var(--lime-soft); background: rgba(var(--lime-soft-rgb), .12); }
.dash-delta--down { color: var(--red-ink); background: rgba(var(--red-rgb), .12); }
.dash-delta--flat { color: var(--muted, var(--text-muted)); background: rgba(var(--ink-rgb), .05); }

/* Nascent state — a single snapshot shown as a number, not a lonely-dot plot */
.dash-nascent { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding: .4rem 0 .2rem; }
.dash-nascent__big { font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; }
.dash-nascent__txt { flex: 1; min-width: 12rem; font-size: .8rem; color: var(--muted, var(--text-muted)); line-height: 1.5; }

/* Chart cards */
.dash-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dash-chart { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; background: var(--card-bg, var(--bg-card)); margin-bottom: 1rem; }
.dash-grid2 .dash-chart { margin-bottom: 0; }
.dash-chart__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.dash-chart__title { font-weight: 600; font-size: .95rem; }
.dash-chart__cap { font-size: .76rem; color: var(--muted, var(--text-muted)); margin: .5rem 0 0; line-height: 1.5; }
/* Headline number + delta sitting on top of a chart (Impressions / Clicks) */
.dash-chart__stat { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .1rem 0 .4rem; }
.dash-chart__statval { font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; }
.dash-chart__statnote { font-size: .7rem; color: var(--muted, var(--text-muted)); }
/* Interpretation callout under a chart — answers "is this good or bad?" */
.dash-interp { font-size: .82rem; line-height: 1.6; color: var(--text-secondary); padding: .7rem .85rem; border-radius: 0 8px 8px 0; margin-top: .7rem; }
.dash-interp strong { color: var(--text); }
.dash-interp--ok { border-left: 3px solid var(--accent, #c8ff00); background: rgba(var(--accent-rgb), .05); }
.dash-interp--warn { border-left: 3px solid var(--amber-ink); background: rgba(var(--med-rgb), .07); }
.dash-svg { display: block; overflow: visible; }
.dash-leg { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted, var(--text-muted)); margin-left: .6rem; }
.dash-leg__dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Tables + issues */
.dash-tablefold { border: 1px solid var(--border); border-radius: 12px; padding: .6rem 1rem; background: var(--card-bg, var(--bg-card)); }
.dash-tablefold > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-secondary); }
.dash-tablefold .sa-table td:first-child { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-issues { border: 1px solid var(--border); border-left: 3px solid #6b8f2f; border-radius: 10px; padding: 1rem 1.1rem; background: var(--card-bg, var(--bg-card)); margin-top: 1rem; }
.dash-issues__list { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; }
.dash-issues__list li { font-size: .88rem; color: var(--text-secondary); }
.dash-issues__n { display: inline-block; min-width: 1.6rem; font-weight: 700; color: var(--accent); font-family: var(--mono, monospace); }
.dash-connecthint { border-left: 3px solid var(--border); }

/* Chart head: source tag + "View in GSC" link + hover interactions */
.dash-chart__right { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dash-src { font-size: .6rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, var(--text-muted)); background: rgba(var(--ink-rgb), .04); border: 1px solid var(--border); border-radius: 10px; padding: .08rem .4rem; cursor: help; vertical-align: middle; }
.dash-src:hover, .dash-src:focus { color: var(--text); border-color: var(--muted, var(--text-muted)); outline: none; }
.dash-viewgsc { font-size: .72rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
.dash-viewgsc:hover { text-decoration: underline; }
/* SVG hover columns (date+value readout) + bar hover */
.dash-svg .dash-hovcol { fill: transparent; cursor: crosshair; }
.dash-svg .dash-hovcol:hover { fill: rgba(var(--accent-rgb), .09); }
.dash-svg .dash-hovdot { pointer-events: none; }
/* Cursor-following chart tooltip (date + value) */
.dash-tip { position: fixed; z-index: 60; pointer-events: none; background: #1c1c1f; border: 1px solid #3a3a3f; color: var(--text); font-family: var(--mono, monospace); font-size: .76rem; line-height: 1.3; padding: .35rem .55rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.55); white-space: nowrap; max-width: 80vw; }
.dash-svg .dash-bar { transition: opacity .1s; }
.dash-svg .dash-bar:hover { opacity: .82; }

/* Client switcher (tabs) — one dashboard at a time, not stacked */
/* Client switcher — a focused dropdown (replaces the old per-client tab row). */
.dash-switcher { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.dash-switcher__lab { font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, var(--text-muted)); }
.dash-switcher__fav { display: inline-flex; flex: 0 0 auto; }
.dash-switcher__fav .sa-favicon { margin-right: 0; }
.dash-switcher__select {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 auto; max-width: min(360px, 68vw); min-height: 44px;
  background: var(--card-bg, var(--bg-card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right .75rem center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem 2rem .55rem .8rem; color: var(--text);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s;
}
.dash-switcher__select:hover { border-color: var(--muted, var(--text-muted)); }
.dash-switcher__select:focus-visible { outline: none; border-color: var(--accent); }
.dash-switcher__select option { font-weight: 500; color: var(--text); background: var(--card-bg, var(--bg-card)); }

/* "How these numbers are measured" infographic */
.dash-explain { border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg, var(--bg-card)); padding: .85rem 1.1rem; margin-bottom: 1.5rem; }
.dash-explain > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-secondary); }
.dash-explain[open] > summary { margin-bottom: .9rem; }
.dash-flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-flow__node { font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); }
.dash-flow__node--accent { border-color: var(--accent); color: var(--accent); }
.dash-flow__arrow, .dash-flow__plus { color: var(--muted, var(--text-muted)); font-size: .8rem; }
.dash-srcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-bottom: .5rem; }
.dash-srccard { display: flex; gap: .6rem; border: 1px solid var(--border); border-radius: 10px; padding: .75rem .85rem; background: rgba(var(--ink-rgb), .015); }
.dash-srccard__icon { font-size: 1.2rem; line-height: 1.2; }
.dash-srccard__t { font-weight: 600; font-size: .85rem; margin: 0; }
.dash-srccard__src { font-family: var(--mono, monospace); font-size: .64rem; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); margin: .15rem 0 .3rem; }
.dash-srccard__d { font-size: .78rem; color: var(--muted, var(--text-muted)); margin: 0; line-height: 1.5; }

/* "Why? →" help link inside the Avg. position card */
.dash-help { display: inline; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: .75rem; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; }
.dash-help:hover { text-decoration: underline; }

/* Average-position explainer infographic */
.dash-posedu { margin-bottom: 1.5rem; }
.posedu-lead { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 .75rem; }
.posedu-eg { font-size: .76rem; color: var(--muted, var(--text-muted)); margin: 0 0 .75rem; display: flex; align-items: center; gap: .45rem; }
.posedu-eg__tag { font-family: var(--mono, monospace); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-fill); padding: .1rem .4rem; border-radius: 6px; }
.posedu-eg__tag { display: inline-block; vertical-align: middle; }
/* Ranked-query plot — the client's REAL top queries by position */
.posedu-plot { display: grid; gap: .3rem; margin-bottom: .6rem; }
.posedu-axis { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, var(--text-muted)); margin-bottom: .2rem; }
.posedu-prow { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: .6rem; font-size: .8rem; }
.posedu-pq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.posedu-ptrack { position: relative; height: 12px; background: rgba(var(--ink-rgb), .045); border-radius: 6px; overflow: hidden; }
.posedu-pbar { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 6px; }
.posedu-prow--strong .posedu-pbar { background: var(--accent, #c8ff00); }
.posedu-prow--climbing .posedu-pbar { background: #6b7280; }
.posedu-ppos { font-family: var(--mono, monospace); font-weight: 600; text-align: right; color: var(--text-secondary); }
.posedu-prow--strong .posedu-ppos { color: var(--accent); }
.posedu-prow--avg { margin-top: .3rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.posedu-prow--avg .posedu-pq { color: var(--text); font-weight: 700; }
.posedu-prow--avg .posedu-ptrack { background: transparent; overflow: visible; }
.posedu-prow--avg .posedu-pbar { background: transparent; border: 1px dashed var(--accent); }
.posedu-prow--avg .posedu-ppos { color: var(--text); font-weight: 700; }
.posedu-key { font-size: .76rem; color: var(--muted, var(--text-muted)); margin: 0 0 1rem; line-height: 1.5; }
.posedu-key__s { color: var(--accent); font-weight: 600; }
.posedu-key__c { color: #cbd5e1; font-weight: 600; }
.posedu-takeaway { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 1rem; padding: .7rem .85rem; border-left: 3px solid var(--accent, #c8ff00); background: rgba(var(--accent-rgb), .04); border-radius: 0 8px 8px 0; }
.posedu-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.posedu-rule { display: flex; gap: .55rem; border: 1px solid var(--border); border-radius: 10px; padding: .65rem .75rem; background: rgba(var(--ink-rgb), .015); }
.posedu-rule__i { font-size: 1rem; line-height: 1.2; }
.posedu-rule__t { font-weight: 600; font-size: .8rem; margin: 0 0 .2rem; }
.posedu-rule__d { font-size: .75rem; color: var(--muted, var(--text-muted)); margin: 0; line-height: 1.5; }
@media (max-width: 560px) {
  .posedu-prow { grid-template-columns: 6rem 1fr 2.4rem; gap: .4rem; font-size: .74rem; }
}

/* Info icon + large legible popover (replaces unstyleable native title tooltips) */
.dash-info { position: relative; display: inline-flex; align-items: center; color: var(--muted, var(--text-muted)); cursor: help; vertical-align: middle; }
.dash-info:hover, .dash-info:focus { color: var(--accent); outline: none; }
.dash-info__icon { display: block; }
.dash-info__pop {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(280px, 78vw);
  background: #1f1f23; border: 1px solid #3a3a3f; border-radius: 10px;
  padding: .65rem .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.6);
  font-family: "Instrument Sans", system-ui, sans-serif; font-size: .8rem; font-weight: 400;
  line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--text);
  white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s ease; transition-delay: 0s;
  z-index: 80; pointer-events: none;
}
.dash-info__pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #3a3a3f;
}
.dash-info:hover .dash-info__pop, .dash-info:focus .dash-info__pop { opacity: 1; visibility: visible; }

/* GEO competitive scoreboard (win rate · SoV rank · H2H) */
.dash-geostrip { border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1.1rem; background: var(--card-bg, var(--bg-card)); margin-bottom: 1rem; }
.dash-geostrip__h { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .65rem; }
.dash-geostrip__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.dash-geochip { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem; background: rgba(var(--ink-rgb), .015); display: flex; flex-direction: column; gap: .2rem; }
.dash-geochip__l { font-family: var(--mono, monospace); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, var(--text-muted)); display: flex; align-items: center; gap: .3rem; }
.dash-geochip__v { font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1; }

/* Deep-link from the dashboard straight into the full visibility report. */
.dash-reportcta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1.1rem; background: var(--card-bg, var(--bg-card)); margin-bottom: 1rem; text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease; }
.dash-reportcta:hover, .dash-reportcta:focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), .04); outline: none; }
.dash-reportcta__body { display: flex; flex-direction: column; gap: .2rem; }
.dash-reportcta__t { font-weight: 600; font-size: .95rem; color: var(--text); }
.dash-reportcta__s { font-size: .8rem; color: var(--muted, var(--text-muted)); }
.dash-reportcta__arrow { color: var(--accent); font-size: 1.2rem; font-weight: 700; flex: 0 0 auto; transition: transform .15s ease; }
.dash-reportcta:hover .dash-reportcta__arrow { transform: translateX(3px); }

/* Sitemaps health */
.dash-sitemaps { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; background: var(--card-bg, var(--bg-card)); margin-bottom: 1rem; }
.dash-smhealth { font-size: .85rem; margin: .4rem 0 .6rem; }
.dash-smhealth--ok { color: var(--lime-soft); }
.dash-smhealth--warn { color: var(--amber-ink); }
.dash-smhealth--err { color: var(--red-ink); }
.dash-smlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.dash-smlist li { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; padding: .35rem 0; border-top: 1px solid var(--border); }
.dash-smlist__path { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-smlist__meta { color: var(--muted, var(--text-muted)); white-space: nowrap; }
.dash-bad { color: var(--red-ink); }
.dash-warnt { color: var(--amber-ink); }

@media (max-width: 600px) {
  .dash-stat__value { font-size: 1.35rem; }
  .dash-stat--hero { grid-column: span 1; }
  .dash-stat--hero .dash-stat__value { font-size: 1.7rem; }
  .dash-chart__head { flex-wrap: wrap; }
}

/* ── Admin console (/account/admin) ─────────────────────────────────────── */
.adm-sec { margin-bottom: 1.25rem; }
.adm-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.adm-form { display: flex; gap: .5rem; margin: .75rem 0; flex-wrap: wrap; }
.adm-form .btn { width: auto; }
.adm-form--inline { margin: .6rem 0 0; }
.adm-input { flex: 1 1 16rem; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: #0d0d0f; color: var(--text); font: inherit; font-size: .9rem; }
.adm-input:focus { outline: none; border-color: var(--accent); }
.adm-input--search { flex: 0 1 22rem; }
.adm-list { margin-top: .5rem; }
.adm-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.adm-row__who { font-weight: 600; }
.adm-danger { color: var(--red-ink); margin-left: auto; }
.adm-serieslist { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.adm-series { border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; background: #0d0d0f; }
.adm-series__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.adm-series__head .badge { flex: 0 0 auto; }
.adm-series__name { font-weight: 600; margin-right: .5rem; }

/* Status filter chips (admin series list) */
.adm-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
.adm-filter__btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg, #09090b); color: var(--text-secondary); font: inherit; font-size: .82rem; cursor: pointer; }
.adm-filter__btn:hover { border-color: var(--border-light); }
.adm-filter__btn.is-active { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.adm-filter__btn[data-empty] { opacity: .45; }
.adm-filter__n { font-size: .72rem; opacity: .7; }
.adm-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.adm-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; padding: .2rem .25rem .2rem .55rem; border-radius: 999px; background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.adm-chip--pending { background: var(--border); color: var(--text-muted); }
.adm-chip__tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.adm-chip__x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; border-radius: 999px; }
.adm-nextrun { color: var(--accent); white-space: nowrap; }
.adm-chip__x:hover { background: rgba(var(--ink-rgb), .12); }
.adm-warn { color: var(--amber-ink); margin: .4rem 0 0; }

/* ── Action collaboration: comments, activity, assignment ───────────────────
   The discussion opens in a shared right-side drawer (.sa-drawer), triggered from
   the action summary (mini) and the foot of its body (wide). The per-site activity
   center (.sa-actcenter) stays inline in the command panel. All user free text is
   escaped in JS; .sa-cmt__body uses pre-wrap so newlines survive without HTML. */

/* Discussion triggers */
.sa-discuss { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border); background: var(--bg, #09090b); color: var(--text-secondary); font: inherit; font-size: .8rem; cursor: pointer; border-radius: 999px; line-height: 1; }
.sa-discuss:hover { border-color: var(--accent); color: var(--accent); }
.sa-discuss svg { display: block; }
.sa-discuss--mini { padding: .3rem .5rem; }
.sa-discuss--wide { padding: .5rem .85rem; font-weight: 600; }
.sa-item__discuss { margin-top: .9rem; }

/* The slide-in drawer */
.sa-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.sa-drawer.is-open { pointer-events: auto; }
.sa-drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .24s ease; }
.sa-drawer.is-open .sa-drawer__scrim { opacity: 1; }
/* height: use the DYNAMIC viewport (dvh) so the panel is exactly as tall as the
   VISIBLE area on mobile — `height:100%`/`100vh` resolve to the larger LAYOUT
   viewport behind the URL bar, which pushed the flex column past the screen so the
   header wouldn't stay pinned and the compose/notify block at the bottom became
   unreachable. The 100% line is the fallback for browsers without dvh. */
.sa-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; height: 100dvh; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--bg-card); border-left: 1px solid var(--border); box-shadow: -16px 0 40px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); }
.sa-drawer.is-open .sa-drawer__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .sa-drawer__panel, .sa-drawer__scrim { transition: none; } }
.sa-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.sa-drawer__eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, var(--text-muted)); margin: 0 0 .15rem; }
/* Which client this discussion belongs to — a monogram square + name, so an opened
   panel is never ambiguous in the cross-account cockpit. */
.sa-drawer__client { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .4rem;
  font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.sa-drawer__client[hidden] { display: none; }
.sa-drawer__client-av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  flex: 0 0 auto; font-size: .6rem; font-weight: 800; line-height: 1; color: var(--accent-ink); }
.sa-drawer__client-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.sa-drawer__title { font-size: 1rem; line-height: 1.3; margin: 0; color: var(--text); }
.sa-drawer__open { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.sa-drawer__open:hover { text-decoration: underline; }
.sa-drawer__open[hidden] { display: none; }
.sa-drawer__close { flex: 0 0 auto; border: none; background: transparent; color: var(--muted, var(--text-muted)); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .25rem .4rem; border-radius: 8px; }
.sa-drawer__close:hover { color: var(--text); background: rgba(var(--ink-rgb), .08); }
.sa-drawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 1.1rem; display: flex; flex-direction: column; gap: 1.2rem; }
/* Background scroll lock. overflow:hidden alone doesn't hold on iOS Safari, so the
   JS (lockScroll) ALSO pins the body with position:fixed at its current offset and
   restores scroll on close — these rules are the matching half. */
body.sa-drawer-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.sa-dsection__h { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, var(--text-muted)); margin: 0 0 .55rem; }

/* Provenance line pinned atop a task's Activity (synthesized from item metadata) */
.sa-origin { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .7rem; margin-bottom: .6rem; border: 1px solid var(--border); border-radius: 9px; background: #0d0d0f; }
.sa-origin__ico { line-height: 1.35; }
.sa-origin__line { font-size: .84rem; line-height: 1.4; color: var(--text); }
.sa-origin__meta { margin-top: .15rem; }
/* Drawer meta: Owner / Status / Priority stacked, one per row, with aligned labels
   so the header reads top-to-bottom instead of a squished horizontal cluster. */
.sa-collab__top { display: flex; flex-direction: column; gap: .55rem; }
.sa-assign { display: flex; align-items: center; gap: .65rem; font-size: .82rem; color: var(--muted, var(--text-muted)); }
.sa-assign__lbl { width: 4.75rem; flex: 0 0 auto; font-weight: 600; color: var(--text-secondary); }
.sa-collab__top .sa-sortsel { min-width: 10rem; }
/* Priority badge in the drawer header row (critical / high / medium / low). */
.sa-prio { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted, var(--text-muted)); }
.sa-prio--critical { color: var(--danger-text); border-color: rgba(var(--danger-rgb), .5); background: rgba(var(--danger-rgb), .12); }
.sa-prio--high { color: var(--warning-text); border-color: rgba(var(--warning-rgb), .5); background: rgba(var(--warning-rgb), .12); }
.sa-prio--medium { color: #bef264; border-color: rgba(132,204,22,.4); background: rgba(132,204,22,.1); }
.sa-prio--low { color: var(--muted, var(--text-muted)); border-color: var(--border); }

.sa-collab__comments { display: flex; flex-direction: column; gap: .55rem; }
.sa-cmt { position: relative; border: 1px solid var(--border); border-radius: 9px; background: #0d0d0f; padding: .55rem .7rem; transition: background .1s, border-color .1s; }
/* Reveal a deep-linked comment/reply (from a comment email): an accent ring +
   glow that holds briefly then fades, so the reader's eye lands on it. Uses only
   box-shadow so it never fights the comment's background. */
@keyframes sa-cmt-reveal {
  0%, 22% { box-shadow: 0 0 0 2px var(--accent, #c8ff00), 0 0 16px rgba(var(--accent-rgb), .35); }
  100%    { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
}
.sa-cmt.is-flash { animation: sa-cmt-reveal 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .sa-cmt.is-flash { animation-duration: .01s; } }
/* Whole-comment hover highlight — the comment reads as one interactive component,
   and is what surfaces the floating action toolbar (Slack-style). */
.sa-cmt:hover { background: #141418; border-color: var(--border-light); }
.sa-cmt__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .25rem; }
.sa-cmt__who { font-weight: 600; font-size: .82rem; color: var(--text); }
.sa-cmt__body { font-size: .88rem; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.sa-cmt__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

/* Slack-style hover toolbar: react / reply / delete float top-right and only appear
   on hover or keyboard focus, so the message text owns the default view. Touch
   devices (no hover) get the toolbar inline and always visible. */
.sa-cmt__actions { position: absolute; top: .35rem; right: .4rem; display: flex; align-items: center;
  gap: .1rem; margin: 0; padding: .12rem .2rem; border: 1px solid var(--border);
  border-radius: 9px; background: #16161a; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .1s; }
.sa-cmt:hover > .sa-cmt__actions, .sa-cmt:focus-within > .sa-cmt__actions { opacity: 1; pointer-events: auto; }
.sa-cmt__act--del:hover { color: var(--red-ink); }
@media (hover: none) {
  .sa-cmt__actions { position: static; opacity: 1; pointer-events: auto; margin-top: .45rem;
    background: transparent; border: none; box-shadow: none; padding: 0; gap: .6rem; }
}
.sa-cmt__act { border: none; background: transparent; color: var(--muted, var(--text-muted)); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; padding: .1rem .15rem; }
.sa-cmt__act:hover { color: var(--accent); }
/* Quick-react emojis live directly in the hover toolbar (no "React" button). Compact,
   borderless, with a small pop on hover — like Slack's reaction row. */
.sa-cmt__react { display: inline-flex; align-items: center; gap: .05rem; }
.sa-cmt__react:not(:last-child) { margin-right: .35rem; padding-right: .35rem; border-right: 1px solid var(--border); }
.sa-react-opt { border: none; background: transparent; border-radius: 6px; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .18rem .28rem; transition: background .1s, transform .08s; }
.sa-react-opt:hover { background: rgba(var(--ink-rgb), .1); transform: scale(1.18); }
.sa-reacts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.sa-react { display: inline-flex; align-items: center; gap: .22rem; border: 1px solid var(--border); background: var(--bg, #09090b); border-radius: 999px; padding: .12rem .45rem; font-size: .82rem; color: var(--text-secondary); cursor: pointer; }
.sa-react:hover { border-color: var(--border-light); }
.sa-react.is-mine { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.sa-react__n { font-size: .74rem; opacity: .85; }
.sa-cmt__replies { margin-top: .55rem; padding-left: .75rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.sa-cmt--reply { background: transparent; padding: 0; border: none; }
.sa-cmt__replybox { margin-top: .55rem; display: flex; flex-direction: column; gap: .4rem; }
.sa-cmt__replyactions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.sa-cmt__replyactions .sa-collab__post { align-self: auto; }

/* Collapsed thread affordance — Slack-style "N replies" that opens the thread. */
.sa-thread { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .25rem .55rem;
  border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 600; color: var(--accent); transition: background .1s, border-color .1s; }
.sa-thread:hover { background: rgba(var(--accent-rgb), .08); border-color: var(--border-light); }
.sa-thread__ico { font-size: .85rem; }
.sa-thread .sa-fine { color: var(--muted, var(--text-muted)); font-weight: 400; }

/* @mention autocomplete dropdown — fixed, floats just above the composer caret line. */
.sa-mentions { position: fixed; z-index: 9999; transform: translateY(calc(-100% - 6px));
  display: flex; flex-direction: column; gap: 1px; padding: .25rem; max-height: 14rem; overflow-y: auto;
  background: #16161a; border: 1px solid var(--border-light); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.sa-mentions[hidden] { display: none; }
.sa-mention { display: flex; align-items: center; text-align: left; border: none; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: .35rem .6rem; border-radius: 7px; white-space: nowrap; }
.sa-mention:hover, .sa-mention.is-sel { background: var(--accent-dim, rgba(var(--accent-rgb), .12)); color: var(--accent); }
/* @mention highlight inside a rendered comment body. */
.sa-mention-tag { color: var(--accent); font-weight: 600;
  background: var(--accent-dim, rgba(var(--accent-rgb), .12)); border-radius: 5px; padding: 0 .15rem; }

.sa-collab__compose { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; margin-top: .65rem; }
.sa-collab__input { width: 100%; resize: vertical; min-height: 3rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: #0d0d0f; color: var(--text); font: inherit; font-size: .88rem; line-height: 1.4; }
.sa-collab__input:focus { outline: none; border-color: var(--accent); }
.sa-collab__post { width: auto; align-self: flex-end; padding-inline: 1.1rem; }

/* Asana-style "who gets notified" control: a label + a wrap of recipient chips. */
.sa-notify { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.sa-notify__lbl { color: var(--text-muted); flex: 0 0 auto; padding-top: .1rem; }
.sa-notify__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sa-notify__chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); border-radius: 999px; padding: .22rem .35rem .22rem .6rem; cursor: pointer; font: inherit; font-size: .78rem; line-height: 1; color: var(--text-secondary); background: none; transition: background .12s, border-color .12s, color .12s; }
.sa-notify__chip .sa-notify__name { white-space: nowrap; }
.sa-notify__chip .sa-notify__x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font-size: .8rem; line-height: 1; color: var(--text-muted); }
.sa-notify__chip .sa-notify__x::before { content: "\00d7"; } /* × */
/* ON = will be notified: accent-tinted, solid border. */
.sa-notify__chip.is-on { background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .45); color: var(--text); }
.sa-notify__chip.is-on:hover .sa-notify__x { background: rgba(var(--ink-rgb), .12); color: var(--text); }
/* OFF = removed: muted + struck through, the × becomes a + to re-add. */
.sa-notify__chip[aria-pressed="false"] { border-style: dashed; opacity: .6; }
.sa-notify__chip[aria-pressed="false"] .sa-notify__name { text-decoration: line-through; }
.sa-notify__chip[aria-pressed="false"] .sa-notify__x::before { content: "+"; }

/* Activity feed (shared by per-item fold + per-site activity center) */
.sa-actlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.sa-act { font-size: .82rem; line-height: 1.45; color: var(--text-secondary); }
.sa-act__who { font-weight: 600; color: var(--text); }
.sa-act__verb { color: var(--text-secondary); }
.sa-act__ref { color: var(--muted, var(--text-muted)); }
.sa-act__time { margin-left: .15rem; }

/* Per-site manager activity center (in the command panel) */
.sa-actcenter { margin-top: .85rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.sa-actcenter__sum { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-secondary); list-style: none; padding: .1rem 0; }
.sa-actcenter__sum::-webkit-details-marker { display: none; }
.sa-actcenter__sum:hover { color: var(--accent); }
.sa-actcenter__body { margin-top: .6rem; max-height: 22rem; overflow-y: auto; }

/* ── Activity cockpit (/account/activity) ───────────────────────────────────
   The cross-account "needs attention" surface. Role-adaptive: an operator sees
   the two-sided split across ALL accounts; a client sees their own audits. Built
   from the same dark tokens as the rest of the account app — no new visual system.
   Two sections (needs-reply / waiting|assigned), each a recency-sorted list of
   rows; every row deep-links the per-action drawer on /account/actions. */
.act-head { margin: 0 0 1.1rem; }
.act-head__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.act-head__h { margin: 0 0 .2rem; font-size: 1.5rem; }
.act-head__sub { margin: 0; font-size: .9rem; color: var(--muted, var(--text-muted)); }
.act-markall { font: inherit; font-size: .82rem; font-weight: 600; padding: .38rem .8rem; border-radius: 10px;
  border: 1px solid var(--border); background: transparent; color: var(--muted, var(--text-muted));
  cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s; }
.act-markall:hover { color: var(--text); border-color: var(--border-light); }

.act-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }

.act-sec { margin-bottom: 1.6rem; }
.act-sec__head { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.act-sec__count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem;
  padding: 0 .4rem; border-radius: 11px; background: var(--accent-dim, rgba(var(--accent-rgb), .12));
  color: var(--accent); font-size: .8rem; font-weight: 700; }
.act-sec__new { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 8px; background: var(--accent-fill); color: var(--accent-ink); }
.act-sec__done { margin: 0; padding: .8rem .9rem; font-size: .88rem; color: var(--muted, var(--text-muted));
  border: 1px dashed var(--border); border-radius: 10px; }
/* Two statuses read as two priorities: the action zone ("Your turn") is the loud,
   accented one; the monitor zone ("Awaiting client"/"Assigned to you") is quieter. */
.act-sec--primary .act-sec__head { color: var(--text); }
.act-sec--muted .act-sec__head { color: var(--muted, var(--text-muted)); }
.act-sec--muted .act-sec__count { background: rgba(var(--ink-rgb), .06); color: var(--text-secondary); }
.act-sec--muted .act-list { opacity: .82; }
.act-sec--muted .act-row:hover { opacity: 1; }

.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.act-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center;
  gap: .7rem; padding: .65rem .8rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; transition: border-color .12s, background .12s; }
.act-row:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.act-row__main { min-width: 0; display: flex; flex-direction: column; gap: .22rem; text-decoration: none; }
.act-row__title { font-size: .92rem; font-weight: 600; color: var(--text);
  line-height: 1.3; overflow-wrap: anywhere; }
/* The message line: WHO (author chip) sits right next to the snippet, not hidden in
   the right-hand meta — so you see who's waiting on you at a glance. */
.act-row__msg { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.act-row__by { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
  font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.act-row__byname { white-space: nowrap; }
.act-row__snip { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--muted, var(--text-muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-row__meta { font-size: .78rem; color: var(--muted, var(--text-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-row__open { font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.act-row__open:hover { text-decoration: underline; }

/* NEW: unread threads get an accent left-edge + a pill so genuinely-new activity
   stands apart from threads you've already opened. */
.act-row.is-new { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent, #c8ff00); }
.act-new { display: inline-block; vertical-align: middle; margin-right: .4rem; font-size: .64rem;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 6px;
  background: var(--accent-fill); color: var(--accent-ink); }

/* Identity avatars: CLIENTS are coloured SQUARES (monogram), PEOPLE are neutral
   CIRCLES (initial). Two shapes = two kinds of entity, readable without the label. */
.act-av { display: inline-grid; place-items: center; flex: 0 0 auto; font-size: .64rem; font-weight: 800;
  line-height: 1; letter-spacing: .02em; }
.act-av--acct { width: 22px; height: 22px; border-radius: 6px; color: var(--accent-ink); }
.act-av--person { width: 17px; height: 17px; border-radius: 50%; font-size: .6rem;
  background: #2a2a2f; color: var(--text-secondary); border: 1px solid var(--border-light); }

/* Account chip — now a monogram square + name. */
.act-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600;
  padding: .2rem .55rem .2rem .2rem; border-radius: 13px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); white-space: nowrap; cursor: default; max-width: 12rem; }
.act-chip__nm { overflow: hidden; text-overflow: ellipsis; }
.act-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } /* legacy (filter chips) */

/* Filter chips — only rendered for accounts that have activity; each carries a count. */
.act-fchip { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .78rem;
  font-weight: 600; padding: .28rem .7rem; border-radius: 13px; border: 1px solid var(--border);
  background: transparent; color: var(--muted, var(--text-muted)); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s; }
.act-fchip:hover { color: var(--text); border-color: var(--border-light); }
.act-fchip.is-active { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); }
.act-fchip__n { font-size: .72rem; font-weight: 700; padding: 0 .35rem; border-radius: 8px; min-width: 1.15rem;
  text-align: center; background: rgba(var(--ink-rgb), .07); color: inherit; }
.act-fchip.is-active .act-fchip__n { background: rgba(var(--bg-rgb), .18); }

/* Nudge — inline two-step: idle → "Nudge Acct?" confirm → optimistic "Nudged ✓". */
.act-nudge { font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 13px;
  border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.act-nudge:hover { border-color: var(--accent); color: var(--accent); }
.act-nudge.is-confirm { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-fill); }
.act-nudge.is-done { border-color: var(--border); color: var(--muted, var(--text-muted)); cursor: default; }
.act-nudge.is-err { border-color: var(--danger); color: var(--danger); }
.act-nudge:disabled { cursor: default; }

/* Empty / onboarding state — the go-live default (zero comments day one). */
.act-empty { text-align: left; padding: 1.4rem 1.2rem; border: 1px dashed var(--border); border-radius: 14px; }
.act-empty__h { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.act-empty__p { margin: 0 0 .9rem; font-size: .9rem; color: var(--muted, var(--text-muted)); max-width: 46ch; }
.act-empty__cta { display: inline-block; font: inherit; font-size: .88rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent-dim, rgba(var(--accent-rgb), .12)); color: var(--accent); text-decoration: none; cursor: pointer; }
.act-empty__cta:hover { background: var(--accent-fill); color: var(--accent-ink); }

/* Loading skeleton — calm shimmer, never a bare spinner. */
.act-skel { display: flex; flex-direction: column; gap: .5rem; }
.act-skel__row { height: 3.1rem; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--bg-card,var(--bg-card)) 0%, #1c1c20 50%, var(--bg-card,var(--bg-card)) 100%);
  background-size: 200% 100%; animation: act-shimmer 1.3s ease-in-out infinite; }
@keyframes act-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 640px) {
  /* Stack: reply-first (the obligation), rows go two-line, 44px touch targets. */
  .act-row { grid-template-columns: 1fr auto; grid-template-areas: "chip meta" "main main" "nudge open"; row-gap: .4rem; padding: .7rem .8rem; }
  .act-row__main { grid-area: main; } .act-chip:first-child { grid-area: chip; }
  .act-row__meta { grid-area: meta; text-align: right; } .act-nudge { grid-area: nudge; min-height: 44px; }
  .act-row__open { grid-area: open; text-align: right; align-self: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
}

/* ── Collab: mobile / touch (≤640px) ─────────────────────────────────────────
   The discussion drawer and the action-row controls were built desktop-first;
   this adds the mobile affordances they lacked: a 16px input floor (so iOS never
   zoom-on-focuses and gets stuck zoomed), 44px touch targets for reactions /
   comment actions / chip toggles / the drawer close, a wrapping comment toolbar,
   and a calmer action-row select layout. Mirrors the .act-row restack above. */
@media (max-width: 640px) {
  /* 16px floor on every collab/action form control — kills iOS zoom-on-focus. */
  .sa-collab__input, .sa-rowsel, .sa-sortsel, .sa-search,
  .sa-collab__top .sa-sortsel, .series__nextrun-input { font-size: 16px; }

  /* Reactions + comment action buttons → 44px tap targets, and let the touch
     toolbar wrap so 6 emoji + Reply + Delete never overflow a narrow card. */
  .sa-cmt__actions { flex-wrap: wrap; }
  .sa-react-opt { min-width: 44px; min-height: 44px; padding: .5rem;
    display: inline-flex; align-items: center; justify-content: center; }
  .sa-cmt__act { min-height: 44px; display: inline-flex; align-items: center; padding: .25rem .35rem; }

  /* Notify chips: bigger hit area on the chip + its remove × (Asana-style). */
  .sa-notify__chip { padding: .5rem .5rem .5rem .7rem; }
  .sa-notify__chip .sa-notify__x { width: 22px; height: 22px; }

  /* Drawer close ✕ → reachable 44px target. */
  .sa-drawer__close { min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }

  /* Action-row summary: title takes its own row; the status + assignee selects
     share the next line evenly instead of stacking at a fixed 8.5rem each. */
  .sa-item__sum .sa-item__title { flex: 1 1 100%; }
  .sa-item__sum .sa-rowsel { flex: 1 1 8rem; max-width: none; }
}

/* ── Voice of Customer ──────────────────────────────────────────────────────
   Account VoC insights page (account/voice-of-customer/). All rules scoped under
   .voc-root; a small set of local tokens layer on top of the account palette.

   EVERY LOCAL TOKEN DERIVES FROM A THEMED ONE. The first cut pinned the dark
   values here (#cdff2e accent text, #202024 panels, #3a3a40 hairlines), so the
   light and terminal themes got a dark-theme palette painted on their own
   background: lime mono type on cardstock measures 1.16:1, which is not a colour
   choice so much as an invisible one, and it is what every source pill, metric
   and eyebrow on this page was set in.

   Two of them were also written `--border: var(--border)` — a self-reference,
   which is invalid at computed-value time. The property resolved to nothing, so
   every `border: 1px solid var(--border)` under here fell back to currentColor
   and drew a full-strength text-coloured hairline around every card. */
.voc-root {
  --panel: var(--bg-card); --panel-2: var(--tone-900); --panel-3: var(--tone-850);
  --border-2: var(--border-light);
  --text-2: var(--text-light); --muted: var(--text-muted);
  /* --text-faint is 3.8:1 on a dark panel, under AA for the 11-12px mono this
     page labels everything with. Pulled toward the body colour of whatever theme
     is on: ~4.9:1 in dark, more in light and terminal. */
  --faint: color-mix(in srgb, var(--text-faint) 80%, var(--text));
  --accent-soft: rgba(var(--accent-rgb), .13);
  --accent-line: rgba(var(--accent-rgb), .34); --accent-text: var(--accent);
  --signal: var(--accent); --noise: var(--tone-850);
  --value: var(--accent); --friction: var(--warning); --buying: var(--info);
  --voc-shadow: 0 1px 0 rgba(var(--ink-rgb), .02) inset, 0 12px 30px -18px rgba(0,0,0,.8);
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color: var(--text);
}
.voc-root h1, .voc-root h2, .voc-root h3, .voc-root p { margin: 0; }

/* hero */
.voc-hero { border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 88% -20%, var(--accent-soft), transparent 55%), var(--panel);
  border-radius: 14px; padding: 24px 26px; box-shadow: var(--voc-shadow); }
.voc-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.voc-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px !important; }
.voc-run { color: var(--faint); letter-spacing: .1em; }
.voc-h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; font-weight: 640; margin-bottom: 10px !important; max-width: 19ch; }
.voc-lede { color: var(--muted); font-size: 15px; max-width: 58ch; }
.voc-actions { display: flex; gap: 9px; flex: none; }
.voc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.voc-tile { border: 1px solid var(--border); background: var(--panel-2); border-radius: 11px; padding: 14px 16px; }
.voc-n { font-size: 29px; font-weight: 660; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.voc-n.hl { color: var(--accent-text); }
.voc-k { color: var(--muted); font-size: 12.5px; margin-top: 7px; }
.voc-sub { color: var(--faint); font-size: 11.5px; margin-top: 2px; }

/* ── On this page ───────────────────────────────────────────────────────────
   A dozen sections of long-form reading needed a way to skip ahead and a way to
   know where you are.

   It pins to the 64px top bar and nothing else. The 108/110px offsets elsewhere
   in this sheet date from when .account-subnav and .account-subtabs were their
   own sticky rows; account-nav.js now folds the subnav into the logo bar and
   removes the subtabs outright, so anything below 64px here would leave a strip
   of page scrolling ABOVE the bar. --rl-topnav-h is the same handle the
   viewers' rails use. */
.voc-nav { position: sticky; top: var(--rl-topnav-h, 64px); z-index: 48; margin: 4px 0 0;
  background: var(--bg, #09090b); border-bottom: 1px solid var(--border); }
/* buildSectionNav() overwrites `top` with the MEASURED bottom of the pinned
   chrome — the operator bar moves the top nav down, the hub's embed hides it —
   so the value above is only what is used before the first measurement. */
.voc-nav[hidden] { display: none; }
/* Scrolls sideways rather than wrapping to a second row: a nav bar that changes
   height as you scroll past it makes the page jump under the reader. */
.voc-nav__row { display: flex; gap: 6px; padding: 9px 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  /* Fades the last 26px so a strip that scrolls LOOKS like one — on a phone the
     chips run past the edge and a hard cut reads as a layout bug. When the row
     fits, the fade falls on empty space and costs nothing. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); }
.voc-nav__row::-webkit-scrollbar { display: none; }
/* min-height rather than padding maths: these are thumb targets on a phone, and
   6px of padding around a 12.5px line came to 29px — one pixel under. */
.voc-navi { flex: none; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 12.5px; line-height: 1.2; color: var(--muted);
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: 999px; padding: 4px 12px;
  transition: color .15s ease, border-color .15s ease, background .15s ease; }
.voc-navi:hover { color: var(--text); border-color: var(--border-2); }
/* Reads the same as the section tabs above it — one idea of "you are here". */
.voc-navi.is-active { color: var(--btn-ink, #f4ffe0); background: var(--btn-fill, #3f5c0b);
  border-color: var(--accent-fill); font-weight: 600; }
.voc-navi:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* Anchor jumps clear the bar because buildSectionNav() sets the document's
   scroll-padding-top from the measured stack. No scroll-margin here: it ADDS to
   that padding, and the first cut (128px on top of the document's own 120) put
   every section a screen too low. */
@media print { .voc-nav { display: none; } }

/* sections */
.voc-sec { margin-top: 36px; }
.voc-shead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.voc-shead h2 { font-size: 19px; font-weight: 630; letter-spacing: -.01em; }
.voc-cnt { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.voc-desc { color: var(--muted); font-size: 13.5px; margin-bottom: 16px !important; max-width: 70ch; }
.voc-note { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted);
  border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px 14px; margin: 14px 0 18px !important; background: var(--panel-2); }
.voc-note b { color: var(--text-2); } .voc-arr { color: var(--accent-text); font-family: var(--mono); }

/* controls */
.voc-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.voc-search { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 9px 13px; }
.voc-search input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.voc-search input::placeholder { color: var(--faint); } .voc-mag { color: var(--faint); }
.voc-segs { display: flex; gap: 6px; flex-wrap: wrap; }
.voc-segs button { font: inherit; font-size: 12.5px; cursor: pointer; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px; }
.voc-segs button:hover { color: var(--text); border-color: var(--border-2); }
.voc-segs button[aria-pressed="true"] { color: var(--text); background: var(--panel-3); border-color: var(--border-2); font-weight: 560; }
.voc-bd { width: 8px; height: 8px; border-radius: 999px; }
.voc-bd--value { background: var(--value); } .voc-bd--friction { background: var(--friction); } .voc-bd--buying { background: var(--buying); }
.voc-acct { font: inherit; font-size: 12.5px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; cursor: pointer; }

/* theme accordion */
.voc-cards { display: flex; flex-direction: column; gap: 11px; }
.voc-card { border: 1px solid var(--border); background: var(--panel); border-radius: 13px; box-shadow: var(--voc-shadow); position: relative; overflow: hidden; }
.voc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--faint); }
.voc-card.voc-bucket--value::before { background: var(--value); }
.voc-card.voc-bucket--friction::before { background: var(--friction); }
.voc-card.voc-bucket--buying::before { background: var(--buying); }
/* The head was `1fr auto`, and `auto` takes its max-content width before `1fr`
   gets anything. With up to six nowrap chips in the rail that came to 442px of a
   720px card, leaving the TITLE — the one thing you scan a list like this for —
   224px to wrap one word per line, on a 1440px desktop. It is a wrapping flex
   row now: the title keeps a 22ch floor and the rail drops beneath it when the
   chips stop fitting alongside. `order` keeps the rail beside the title while
   the peek quote stays last, without reordering the DOM. */
.voc-cardbtn { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; padding: 17px 19px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.voc-ct { order: 1; flex: 1 1 min(100%, 22ch); min-width: 0; font-size: 15.5px; font-weight: 615; letter-spacing: -.01em; line-height: 1.25; }
.voc-peek { order: 3; flex: 1 1 100%; min-width: 0; color: var(--text-2); font-size: 12.5px; margin-top: 5px; opacity: .9; }
.voc-card.open .voc-peek { display: none; }
.voc-right { order: 2; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px 14px; margin-left: auto; }
.voc-bucket { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.voc-bucket i { width: 8px; height: 8px; border-radius: 999px; background: var(--faint); }
.voc-bucket--value .voc-bucket i { background: var(--value); } .voc-bucket--friction .voc-bucket i { background: var(--friction); } .voc-bucket--buying .voc-bucket i { background: var(--buying); }
.voc-reach { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.voc-reach b { color: var(--text-2); }
.voc-chev { color: var(--faint); font-size: 12px; transition: transform .18s; }
.voc-card.open .voc-chev { transform: rotate(90deg); }
.voc-cbody { display: none; padding: 0 19px 18px; }
.voc-card.open .voc-cbody { display: block; }
.voc-why { color: var(--muted); font-size: 13.5px; margin-bottom: 14px !important; max-width: 74ch; }
.voc-quotes { display: flex; flex-direction: column; gap: 11px; }
.voc-q { border-left: 2px solid var(--accent-line); padding: 2px 0 2px 13px; color: var(--text); font-size: 13.5px; line-height: 1.45; }
.voc-qm { display: flex; align-items: center; gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.voc-who { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.voc-src { font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 6px; padding: 2px 8px; }
/* A citation that actually resolves to the recording. Only rendered as a link when a
   share URL survived; the plain .voc-src above is the no-link case and carries no ↗. */
.voc-src--link { text-decoration: none; transition: background .15s ease, border-color .15s ease; }
/* A citation is a real link to a real transcript, and at 21px tall it is a
   thumb-sized miss on a phone. Padded to a 30px target where taps happen. */
@media (max-width: 640px) { .voc-src { padding: 6px 9px; } }
.voc-src--link:hover, .voc-src--link:focus-visible { background: var(--accent-line); border-color: var(--accent-text); }
.voc-src--link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media print { .voc-src--link { border: 0; padding: 0; color: inherit; } }
.voc-wide { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 5px; padding: 2px 7px; }
.voc-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 30px; border: 1px dashed var(--border-2); border-radius: 12px; }

/* words + radar */
.voc-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.voc-word { border: 1px solid var(--border); background: var(--panel-2); border-radius: 11px; padding: 15px 16px; }
.voc-wq { font-size: 15px; font-weight: 560; letter-spacing: -.01em; line-height: 1.3; }
.voc-wwho { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.voc-radar { display: flex; flex-direction: column; gap: 9px; }
.voc-rd { border: 1px solid var(--border); background: var(--panel); border-radius: 11px; padding: 13px 16px; display: grid; grid-template-columns: 160px 1fr auto; gap: 16px; align-items: center; }
.voc-rnm { font-weight: 585; font-size: 14px; } .voc-rds { color: var(--muted); font-size: 13px; }
.voc-rmt { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }

/* signal quality + inspector */
.voc-sigwrap { border: 1px solid var(--border); background: var(--panel); border-radius: 12px; padding: 18px 20px; box-shadow: var(--voc-shadow); }
.voc-big { font-size: 13px; color: var(--muted); margin-bottom: 14px; } .voc-big b { color: var(--accent-text); }
.voc-bars { display: flex; gap: 7px; align-items: flex-end; height: 104px; overflow-x: auto; padding-bottom: 2px; }
.voc-bar { flex: 1 1 0; min-width: 34px; background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.voc-track { position: relative; height: 100%; background: var(--noise); border-radius: 5px 5px 0 0; display: flex; align-items: flex-end; border: 1px solid var(--border); border-bottom: none; overflow: hidden; transition: .15s; }
.voc-fill { width: 100%; background: linear-gradient(180deg, var(--signal), color-mix(in srgb, var(--signal) 70%, transparent)); border-radius: 4px 4px 0 0; }
.voc-blab { font-size: 10px; color: var(--faint); text-align: center; white-space: nowrap; padding-top: 6px; overflow: hidden; text-overflow: ellipsis; }
.voc-bar:hover .voc-track { border-color: var(--faint); }
.voc-bar.sel .voc-track { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.voc-bar.sel .voc-blab { color: var(--accent-text); }
.voc-bar.skip .voc-track { background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--panel-3) 4px, var(--panel-3) 8px); border-style: dashed; align-items: center; justify-content: center; height: 26px; }
.voc-bar.skip .voc-track::after { content: "—"; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.voc-inspector { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.voc-insp-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 16px; }
.voc-insp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.voc-insp-ti { font-size: 15px; font-weight: 615; letter-spacing: -.01em; }
.voc-pill { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.voc-pill.ok { background: var(--accent-fill); color: var(--accent-ink); font-weight: 600; }
.voc-pill.skip { color: var(--faint); border: 1px solid var(--border-2); }
.voc-insp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.voc-st { border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; padding: 11px 13px; }
.voc-stn { font-size: 21px; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .voc-stn.hl { color: var(--accent-text); }
.voc-stk { color: var(--muted); font-size: 11px; margin-top: 3px; }
.voc-igrp { margin-bottom: 14px; }
.voc-ilbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 8px; }
.voc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.voc-chip { font-size: 12px; border-radius: 7px; padding: 5px 10px; border: 1px solid var(--border-2); color: var(--text-2); background: var(--panel-2); }
.voc-chip.conf { border-color: var(--accent-line); color: var(--accent-text); }
.voc-iq { border-left: 2px solid var(--accent-line); padding-left: 12px; font-size: 13px; color: var(--text-2); margin-top: 9px; }
.voc-iqwho { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.voc-inoise { margin-top: 12px; font-size: 12px; color: var(--muted); } .voc-inoise b { color: var(--text-2); }
.voc-insp-skip { color: var(--muted); font-size: 13.5px; } .voc-insp-skip b { color: var(--text-2); }

/* method */
.voc-method { margin-top: 36px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 20px 22px; box-shadow: var(--voc-shadow); }
.voc-method h2 { font-size: 15px; margin-bottom: 4px !important; font-weight: 620; }
.voc-method-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 16px !important; }
.voc-msteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.voc-mh { font-size: 13px; font-weight: 600; color: var(--accent-text); }
.voc-ms p { margin-top: 4px !important; color: var(--muted); font-size: 12.5px; }

@media (max-width: 760px) {
  .voc-tiles, .voc-words, .voc-msteps, .voc-insp-stats { grid-template-columns: repeat(2, 1fr); }
  .voc-rd { grid-template-columns: 1fr; gap: 5px; }
}
/* Two 29px numbers and their captions do not fit side by side on a 390px phone;
   they truncate or overflow their tile. Below this they stack. */
@media (max-width: 460px) {
  .voc-tiles, .voc-words, .voc-msteps, .voc-insp-stats, .voc-kgstats { grid-template-columns: 1fr; }
}

/* ── Voice of Customer · print/PDF report ───────────────────────────────────
   A separate, light-themed, fully-expanded report (built by renderPrintReport).
   Screen-hidden; only paints in print, where it REPLACES the interactive view so
   the PDF carries every theme, quote, and per-conversation breakdown — with dark
   text on white instead of the screen theme's light accent (unreadable on paper). */
.voc-print { display: none; }

/* ── The paper palette ──────────────────────────────────────────────────────
   SELF-CONTAINED, AND THAT IS THE WHOLE POINT.

   This document used to draw with account.css's own tokens — --text-faint,
   --text-secondary, --text-light, --tone-600. Those are tuned for a DARK screen,
   and on white paper they came out as: the finding numerals at #d4d4d8 (1.5:1
   against white — invisible), every card border at #e4e4e7 (an invisible
   hairline, so a card stopped reading as a card), and every citation, section
   lead and meta line at #71717a set at 8.5pt (4.8:1 — legible in a spec, washed
   out on a page, worse out of a mono laser printer).

   Worse than any single value: those tokens are redefined by [data-theme] and by
   prefers-color-scheme, so what the PDF printed depended on the theme of whatever
   browser rendered it. A printed artefact cannot have a colour scheme.

   So the document carries its own ink, scoped to .vp, and no screen token reaches
   it. Values are the report page's paper palette, which was chosen against the
   mono laser printer these actually come out of. */
.vp {
  --vp-ink: #18181b;        /* body text                            17.7:1 */
  --vp-ink-2: #3f3f46;      /* secondary prose                      10.4:1 */
  --vp-ink-3: #52525b;      /* tertiary prose                        7.7:1 */
  --vp-meta: #57575f;       /* citations and meta, set small         7.2:1 */
  --vp-rule: #d8d7d2;       /* hairlines between rows                       */
  --vp-rule-2: #b4b3ad;     /* card and panel borders — must be SEEN         */
  --vp-accent: #3f6212;     /* the lime, taken down for paper        7.1:1 */
  --vp-accent-rule: #65a30d;/* quote rules — a mark, not text                */
  --vp-tint: #f3f3f4;       /* panel fill                                    */
  max-width: 760px; margin: 0 auto; color: var(--vp-ink);
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif; font-size: 11pt; line-height: 1.5;
}
/* ── Sheets ─────────────────────────────────────────────────────────────────
   The document is paged, not continuous. Each section is one sheet that starts a
   new page, which is what lets the four-pass renderer say a section "is on page
   14" and mean it — and what gives a reader flipping through the PDF a landmark
   at every section boundary.

   THE PAGE MARGIN IS ZERO AND THE MARGIN LIVES ON THE SHEET (see @media print
   below). Two reasons, both load-bearing: Chrome only omits its own stapled
   header/footer ("8/27/26, 5:34 PM … /account/voice-of-customer") when the page
   margin is zero, and the renderer draws the running head and folio at a fixed
   36pt from the paper's edge — inside a page margin, they would land on top of
   the text block.

   box-decoration-break:clone because a section's padding IS its page margin, and
   padding on a fragmented box is drawn once, at the start of the box. Without it
   every page after a section's first begins hard against the paper's edge, which
   is exactly where the running head lives. */
.vp-sheet { padding: 0.75in 0.68in 0.6in; break-after: page; page-break-after: always;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vp-sheet:last-child { break-after: auto; page-break-after: auto; }
/* The cover and the back cover are both one page with a block floated near the
   optical centre. Pinning either to the top of a letter sheet leaves a five-inch
   hole that reads as a page which failed to finish rather than as space. */
.vp-sheet--cover, .vp-sheet--colo { display: flex; flex-direction: column; height: 10.6in;
  padding: 0.9in 0.68in 0.62in; }
.vp-cov__mid, .vp-colo__mid { margin-top: auto; margin-bottom: auto; }
.vp-colo__mid { max-width: 5in; }
.colo__t { font-size: 15pt; font-weight: 600; letter-spacing: -0.02em; margin: 1.4rem 0 0.7rem; color: var(--vp-ink); }
.colo__s { font-size: 10pt; color: var(--vp-ink-3); margin: 0; max-width: 4in; }
/* The URL is set as text, not as a link: underlined blue is a screen idiom that
   prints as grey noise, and the address itself is the message. */
.colo__u { margin: 1.4rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9pt; color: var(--vp-ink); }

/* Present in the PDF's text layer, absent from the page. Absolutely positioned so
   it is OUT OF FLOW: the marked pass and the shipped pass then lay out identically
   by construction, and the file a customer opens carries no [[RL:…]] tokens in its
   selectable text. */
.pdf-mark { position: absolute; font-size: 1px; color: transparent; letter-spacing: 0;
  pointer-events: none; user-select: none; }
/* The nav logo is a light mark for dark UI — force it dark so it reads on white paper. */
.vp-brand img { display: block; filter: brightness(0); }
.vp-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vp-accent); margin: 1rem 0 0.35rem; }
.vp-h1 { font-size: 26pt; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--vp-ink); }
.vp-lede { font-size: 11.5pt; color: var(--vp-ink-2); margin: 0 0 1.1rem; max-width: 60ch; }
.vp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0 0 1rem; }
.vp-stat { border: 1px solid var(--vp-rule-2); border-radius: 8px; padding: 0.55rem 0.65rem; }
.vp-stat__n { font-size: 18pt; font-weight: 700; color: var(--vp-ink); line-height: 1; }
.vp-stat__k { font-size: 8pt; color: var(--vp-ink-3); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vp-method { font-size: 9.5pt; color: var(--vp-ink-3); background: var(--vp-tint); border-left: 3px solid var(--vp-accent-rule); border-radius: 0 6px 6px 0; padding: 0.6rem 0.8rem; margin: 0; }
.vp-method__l { font-weight: 700; color: var(--vp-ink-2); }

.vp-sec { margin: 1.6rem 0; break-inside: auto; }
/* ── Section opener ─────────────────────────────────────────────────────────
   A section used to just start: the same heading weight an h3 nearly matches, at
   the top of a page, with nothing to say a chapter had begun. Over forty pages a
   reader flipping through has no landmarks at all. The opener gives each one a
   display numeral in the margin and room to breathe before the content. */
.vp-sec__hd { margin: 0 0 1.4rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--vp-ink); position: relative; }
.vp-sec__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vp-accent); margin: 0 0 0.3rem; }
.vp-sec__hd .vp-h2 { border-bottom: 0; padding-bottom: 0; font-size: 19pt; letter-spacing: -0.02em; }
/* A subsection heading. It carries its own number because that is the other half
   of a contents page that still works when the page numbers could not be
   resolved — "3.4" is findable by scanning headings, a bare title is not. */
.vp-h3 { font-size: 12.5pt; font-weight: 700; color: var(--vp-ink); margin: 1.5rem 0 0.5rem;
  break-after: avoid; page-break-after: avoid; position: relative; }
.vp-no { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9pt; font-weight: 400;
  color: var(--vp-meta); margin-right: 0.35rem; }
.vp-h4, .vp-theme__t { font-size: 11.5pt; }

/* ── Contents ───────────────────────────────────────────────────────────────
   Leader dots are a repeating gradient rather than a run of literal periods, so
   they cannot be selected, read aloud by a screen reader, or wrap onto a line of
   their own. The page-number track is a FIXED width and is always drawn, with
   figure spaces as the placeholder: a contents page that grew a line once the
   real numbers arrived would invalidate the very numbers it was printing. */
.vp-toc { display: flex; flex-direction: column; gap: 0.75rem; }
.vp-toc__h { display: grid; grid-template-columns: 1.9rem auto minmax(1.2rem, 1fr) 2.4rem;
  align-items: baseline; gap: 0.5rem; text-decoration: none; color: var(--vp-ink); }
.vp-toc__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; color: var(--vp-meta); }
.vp-toc__t { font-size: 12pt; font-weight: 600; letter-spacing: -0.015em; }
.vp-toc__dot { height: 1px; align-self: center; min-width: 1.2rem;
  background: repeating-linear-gradient(to right, var(--vp-rule-2) 0 2px, transparent 2px 6px); }
.vp-toc__pg, .vp-toc__spg { font-family: "JetBrains Mono", ui-monospace, monospace; text-align: right; }
.vp-toc__pg { font-size: 8.5pt; color: var(--vp-ink-3); }
.vp-toc__spg { font-size: 7.5pt; color: var(--vp-meta); }
.vp-toc__subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 1.4rem; margin: 0.25rem 0 0 2.4rem; }
.vp-toc__sub { display: grid; grid-template-columns: 2.2rem 1fr 1.8rem; gap: 0.35rem; align-items: baseline;
  text-decoration: none; color: var(--vp-ink-3); font-size: 9pt; padding: 0.12rem 0; line-height: 1.35; }
.vp-toc__sn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7.5pt; color: var(--vp-meta); }

/* ── The narrative layers ───────────────────────────────────────────────────
   Their words, the gate ladder, the findings, the market bars, the model, the
   revision log and the review funnel — the seven sections the old print report
   never carried at all. Set to the same measure as the themes below so the
   document reads as one artefact rather than two stapled together. */
.vp-words2 { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vp-w2 { font-size: 9.5pt; color: var(--vp-ink-2); background: var(--vp-tint); border: 1px solid var(--vp-rule-2);
  border-radius: 5px; padding: 0.16rem 0.45rem; }
.vp-foot2 { font-size: 9pt; color: var(--vp-meta); margin: 0.8rem 0 0; }
.vp-mdesc { font-size: 9.5pt; color: var(--vp-meta); margin: 0 0 0.6rem; }

.vp-gate-w { font-size: 10pt; color: var(--vp-ink-3); margin: 0 0 0.2rem; }
.vp-gate-c { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; color: var(--vp-accent); margin: 0 0 0.7rem; }
.vp-gate-a { font-size: 10pt; color: var(--vp-ink-2); border-left: 2px solid var(--vp-ink); padding-left: 0.7rem; margin: 0.8rem 0 1.4rem; }
.vp-obj { border: 1px solid var(--vp-rule-2); border-radius: 9px; padding: 0.7rem 0.85rem;
  margin: 0 0 0.55rem; break-inside: avoid; }
.vp-obj-n { font-size: 11pt; font-weight: 700; color: var(--vp-ink); margin: 0 0 0.25rem; }
.vp-obj-d { font-size: 10pt; color: var(--vp-ink-2); margin: 0 0 0.45rem; }
.vp-chip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7.5pt; font-weight: 500;
  color: var(--vp-ink-3); background: var(--vp-tint); border-radius: 5px; padding: 0.1rem 0.4rem; white-space: nowrap; }
/* The single-quote form. Same left rule as the theme quotes, so a quote reads as
   a quote wherever it appears in the document. */
.vp-bq { font-size: 10pt; color: var(--vp-ink-2); border-left: 2px solid var(--vp-accent-rule); padding-left: 0.65rem;
  margin: 0.5rem 0 0; break-inside: avoid; }
.vp-bq cite { display: block; font-style: normal; font-size: 8.5pt; color: var(--vp-meta); margin-top: 0.15rem; }

.vp-arg { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.7rem; margin: 0 0 1.2rem; break-inside: auto; }
.vp-argn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14pt; font-weight: 500;
  color: var(--vp-rule-2); line-height: 1.4; }
.vp-argmetric { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; color: var(--vp-accent); margin: 0 0 0.35rem; }
.vp-argdetail { font-size: 10.5pt; color: var(--vp-ink-2); margin: 0 0 0.55rem; }

/* A bar chart that survives a mono laser printer: the bar is a solid ink fill on
   a hairline track, and the number is printed beside it rather than implied by
   the length. */
.vp-mrow { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; gap: 0.6rem;
  align-items: center; padding: 0.18rem 0; font-size: 9.5pt; break-inside: avoid; }
.vp-mrow--rel { grid-template-columns: minmax(6rem, 12rem) 1fr auto; }
.vp-mlabel { color: var(--vp-ink-2); }
.vp-mbar { height: 7px; background: var(--vp-rule); border-radius: 4px; overflow: hidden; }
.vp-mbar i { display: block; height: 100%; background: var(--vp-accent); }
.vp-mval { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; color: var(--vp-ink-3); white-space: nowrap; }
.vp-rel { font-size: 8.5pt; color: var(--vp-meta); }

.vp-prow { border-top: 1px solid var(--vp-rule-2); padding: 0.6rem 0; break-inside: avoid; }
.vp-prank { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--vp-meta); }
.vp-pname { font-size: 11pt; font-weight: 700; color: var(--vp-ink); margin: 0 0 0.25rem; }
.vp-pmeta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8pt; font-weight: 400;
  color: var(--vp-meta); margin-left: 0.4rem; }
.vp-pwhy { font-size: 10pt; color: var(--vp-ink-2); margin: 0; }

.vp-rev { border: 1px solid var(--vp-rule-2); border-radius: 9px; padding: 0.7rem 0.85rem;
  margin: 0 0 0.55rem; break-inside: avoid; }
.vp-revhead { font-size: 11pt; color: var(--vp-ink); margin: 0 0 0.25rem; }
.vp-revwhy { font-size: 10pt; color: var(--vp-ink-2); margin: 0 0 0.4rem; }
.vp-revnoev { font-size: 9.5pt; color: var(--vp-meta); margin: 0; }

.vp-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.vp-fstep { border: 1px solid var(--vp-rule-2); border-radius: 8px; padding: 0.55rem 0.65rem; break-inside: avoid; }
.vp-fn { font-size: 16pt; font-weight: 700; color: var(--vp-ink); line-height: 1; }
.vp-fl { font-size: 8.5pt; color: var(--vp-ink-3); margin-top: 0.25rem; font-weight: 600; }
.vp-fs { font-size: 7.5pt; color: var(--vp-meta); margin-top: 0.1rem; }

.vp-voice { font-size: 8.5pt; font-weight: 700; color: var(--vp-accent); margin: 0 0 0.5rem; }
.vp-h2 { font-size: 15pt; font-weight: 700; color: var(--vp-ink); margin: 0 0 0.2rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--vp-rule-2); }
.vp-secsub { font-size: 9.5pt; color: var(--vp-meta); margin: 0.35rem 0 0.9rem; }
.vp-subhead { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vp-accent); margin: 1.1rem 0 0.6rem; }
.vp-empty, .vp-none { color: var(--vp-meta); font-size: 9.5pt; }

.vp-theme { border: 1px solid var(--vp-rule-2); border-radius: 9px; padding: 0.85rem 0.95rem; margin: 0 0 0.7rem; break-inside: avoid; }
.vp-theme__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; }
.vp-theme__t { font-size: 12.5pt; font-weight: 700; color: var(--vp-ink); margin: 0; flex: 1 1 60%; }
.vp-reach { font-size: 8.5pt; color: var(--vp-meta); white-space: nowrap; }
.vp-tag { font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.14rem 0.45rem; border-radius: 5px; }
.vp-tag--value { background: #ecfccb; color: var(--vp-accent); }
.vp-tag--friction { background: #ffedd5; color: #9a3412; }
.vp-tag--buying { background: #dbeafe; color: #1e40af; }
.vp-accts { font-size: 8.5pt; color: var(--vp-meta); margin: 0 0 0.4rem; }
.vp-why { font-size: 10.5pt; color: var(--vp-ink-2); margin: 0 0 0.55rem; }

.vp-quotes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.vp-quote { font-size: 10pt; color: var(--vp-ink-2); border-left: 2px solid var(--vp-accent-rule); padding-left: 0.65rem; break-inside: avoid; }
.vp-cite { display: block; font-size: 8.5pt; color: var(--vp-meta); margin-top: 0.15rem; }

/* ── The theme digest ───────────────────────────────────────────────────────
   One theme, one row: what it is, how far it reaches, what we decided, and why.
   Deliberately NOT a card — 87 bordered boxes down a page reads as a list of
   objects, and this is a list of judgements. A hairline between rows is enough
   separation, and it costs a third of the vertical space a card does. */
.vp-digest { border-top: 1px solid var(--vp-rule); }
.vp-drow { border-bottom: 1px solid var(--vp-rule); padding: 0.5rem 0 0.55rem; }
.vp-dt { font-size: 11pt; font-weight: 700; color: var(--vp-ink); margin: 0 0 0.15rem; }
.vp-dmeta { margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }
.vp-dreach { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8pt; color: var(--vp-accent); }
.vp-dwhy { font-size: 9.5pt; color: var(--vp-ink-2); margin: 0; }
.vp-dwhy b { color: var(--vp-ink); }

.vp-words { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.vp-word { font-size: 10.5pt; font-weight: 600; color: var(--vp-ink); border: 1px solid var(--vp-rule-2); border-radius: 8px; padding: 0.55rem 0.7rem; break-inside: avoid; }

.vp-radar { display: grid; gap: 0.5rem; }
.vp-rd { border: 1px solid var(--vp-rule-2); border-radius: 8px; padding: 0.55rem 0.7rem; break-inside: avoid; }
.vp-rd__n { font-weight: 700; font-size: 11pt; color: var(--vp-ink); }
.vp-rd__d { font-size: 9.5pt; color: var(--vp-ink-3); margin: 0.1rem 0; }
.vp-rd__m { font-size: 8pt; color: var(--vp-meta); text-transform: uppercase; letter-spacing: 0.04em; }

/* The per-call evidence room and its cards are gone — see the note in
   renderPrintReport where that section used to be composed. Its rules went with
   it rather than sitting here as a dead family: one of them set a card's
   background to var(--text), a DARK-theme token that prints as a black block on
   the light theme, which is the kind of thing unused CSS keeps alive until
   somebody reuses the class name. */

/* ZERO PAGE MARGIN, AND THE MARGIN MOVED ONTO THE SHEETS INSTEAD (see .vp-sheet).
   This was 15mm, which cost the document two things at once. Chrome staples its
   own header and footer — the date, the time and the localhost URL — onto every
   page of a print unless the page margin is zero, and a customer cannot turn that
   off without finding it in a print dialog. And the four-pass renderer draws the
   running head, the folio and the section tab at fixed offsets from the PAPER's
   edge, so a page margin puts its own furniture on top of them. */
@page { size: letter portrait; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .site-nav, #dash { display: none !important; }
  /* `display: block`, and it is load-bearing. main.account is a FLEX container, so
     the print document was a flex item with the default `min-width: auto` — free
     to grow to its own max-content width. On letter paper that came out at 2590px
     against an 816px sheet: every line of the document ran off both edges, and the
     invisible [[RL:…]] markers went off the page with them, so the renderer's
     second pass located 3 sections out of 139 and the PDF came back with three
     bookmarks and no page numbers. The old stylesheet was accidentally safe
     because `.vp` carried a 760px max-width; taking that off for the paged layout
     is what exposed it. */
  main.account { padding: 0 !important; margin: 0 !important; max-width: none !important;
    display: block !important; }
  .voc-print { display: block !important; width: 100%; min-width: 0; }
  .vp { max-width: none; margin: 0; }
  .vp, .vp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* A heading never ends a page on its own, and a quote is never split across
     one — a citation stranded from the sentence it evidences is the one break
     that changes what the document says. */
  .vp-h2, .vp-h3, .vp-sec__hd, .vp-dt { break-after: avoid; page-break-after: avoid; }
  /* AND THE OPENER IS NEVER SPLIT. Without this the eyebrow ("SECTION 7") stayed
     behind on one page and the title, the lead and the section's own [[RL:…]]
     marker went to the next — which cost the section a page in the contents, gave
     its opener the PREVIOUS section's running head, and left a reader turning to
     an otherwise blank sheet. */
  .vp-sec__hd, .vp-h3 { break-inside: avoid; page-break-inside: avoid; }

  /* ── What may break, and what may not ────────────────────────────────────
     THE RULE GOES ON THE ATOM, NOT ON THE CONTAINER.

     `break-inside: avoid` on a box TALLER than the page is not a promise the
     engine can keep: Chromium moves the box to a fresh page, discovers it still
     does not fit, breaks it anyway — and the border, drawn once at the start of
     the box, gets clipped at the fold. Nine of the conversation cards were over
     a page (the worst 1247px against a 926px printable height), which is the
     content that came out cut off.

     So the unbreakable things are the ones that are genuinely small and whose
     meaning depends on staying together — a quote and its citation above all,
     because a citation stranded from the line it evidences is the one break that
     changes what the document says. Containers flow, and carry
     box-decoration-break so a border that must break redraws on both fragments
     rather than vanishing at the fold. */
  .vp-quote, .vp-bq, .vp-drow, .vp-word, .vp-rd, .vp-rev,
  .vp-mrow, .vp-prow, .vp-fstep { break-inside: avoid; page-break-inside: avoid; }
  .vp-arg, .vp-obj, .vp-digest, .vp-toc__sec, .vp-quotes {
    break-inside: auto; page-break-inside: auto;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* Two lines, either side of a fold. Chromium honours these in paged media, and
     without them a paragraph leaves one word at the foot of a page and a rule
     underneath it. */
  .vp p, .vp li { orphans: 2; widows: 2; }
}

/* ── Transcripts ────────────────────────────────────────────────────────────
   Account transcript-collection page (account/transcripts/). Scoped under .tx-root. */
.tx-root {
  --panel: var(--bg-card); --panel-2: var(--tone-900); --border: var(--border); --border-2: #3a3a40;
  --text: var(--text); --text-2: var(--text-light); --muted: var(--text-muted); --faint: var(--text-faint);
  --accent: #c8ff00; --accent-ink: #0b0d00; --accent-line: rgba(var(--accent-rgb), .34); --accent-text: #cdff2e;
  --warn: #f5b544; --err: var(--red-ink);
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color: var(--text);
}
.tx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.tx-head .btn { flex: none; white-space: nowrap; }

.tx-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.tx-brand { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.tx-brand b { color: var(--text-2); }
.tx-brand select { font: inherit; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.tx-summary { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tx-summary b { color: var(--text-2); }
.tx-need { color: var(--warn); } .tx-done { color: var(--accent-text); }

/* dropzone */
.tx-drop { border: 1.5px dashed var(--border-2); border-radius: 14px; background: var(--panel); padding: 28px 20px;
  text-align: center; cursor: pointer; transition: .15s; }
.tx-drop:hover, .tx-drop:focus-visible { border-color: var(--accent-line); background: var(--panel-2); outline: none; }
.tx-drop.is-over { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.tx-drop.is-busy { opacity: .6; pointer-events: none; }
.tx-drop__icon { font-size: 20px; color: var(--accent-text); }
.tx-drop__main { font-size: 15px; color: var(--text); margin-top: 6px; }
.tx-drop__link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.tx-drop__hint { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 8px; }

/* file list */
.tx-list { margin-top: 18px; display: flex; flex-direction: column; gap: 1px; }
.tx-row { display: grid; grid-template-columns: 1fr 90px 120px 160px 72px; gap: 14px; align-items: center;
  padding: 13px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.tx-row--head { background: transparent; border: 0; padding: 4px 14px; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.tx-name { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-size, .tx-date { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tx-chip { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tx-chip--new { color: var(--warn); border: 1px solid rgba(245,181,68,.4); }
.tx-chip--done { color: var(--accent-ink); background: var(--accent-fill); font-weight: 600; }
.tx-chip--err { color: var(--err); border: 1px solid rgba(var(--red-rgb), .4); }
.tx-del { font: inherit; font-size: 12px; color: var(--faint); background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.tx-del:hover { color: var(--err); border-color: rgba(var(--red-rgb), .4); }
.tx-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 30px; border: 1px dashed var(--border-2); border-radius: 12px; }

@media (max-width: 720px) {
  .tx-row, .tx-row--head { grid-template-columns: 1fr auto; row-gap: 6px; }
  .tx-row--head span:not(:first-child), .tx-size, .tx-date { display: none; }
}
.tx-sample { font-size: 12.5px; color: var(--muted, var(--text-muted)); border: 1px dashed var(--border-2, #3a3a40); border-radius: 9px; padding: 9px 13px; margin-bottom: 14px; background: var(--panel-2, var(--tone-900)); }
.tx-sampletag { font-family: var(--mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint, var(--text-faint)); }

/* ── Transcripts: expandable rows + per-transcript detail ──────────────────── */
.tx-item { border: 1px solid var(--border); background: var(--panel, var(--bg-card)); border-radius: 10px; overflow: hidden; }
.tx-rowbtn { display: grid; grid-template-columns: 1fr 80px 110px 150px 92px 18px; gap: 14px; align-items: center; padding: 13px 14px; cursor: pointer; }
.tx-rowbtn:hover { background: var(--panel-2, var(--tone-900)); }
.tx-rowbtn:focus-visible { outline: 2px solid var(--accent-text, #cdff2e); outline-offset: -3px; }
.tx-act { text-align: right; }
.tx-lock { font-family: var(--mono, monospace); font-size: 10.5px; color: var(--faint, var(--text-faint)); white-space: nowrap; }
.tx-chev { color: var(--faint, var(--text-faint)); font-size: 12px; transition: transform .18s; }
.tx-item.open .tx-chev { transform: rotate(90deg); }
.tx-detail { display: none; padding: 4px 16px 18px; border-top: 1px solid var(--border); }
.tx-item.open .tx-detail { display: block; }

.tx-pending { color: var(--muted, var(--text-muted)); font-size: 13px; padding: 12px 0; }
.tx-skipbox { color: var(--muted, var(--text-muted)); font-size: 13px; padding: 12px 0; }
.tx-skipbox b { color: var(--text-2, var(--text-light)); }
.tx-dlabel { font-family: var(--mono, monospace); font-size: 11.5px; color: var(--faint, var(--text-faint)); margin-top: 6px; }

.tx-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 14px; }
.tx-dpill { font-family: var(--mono, monospace); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: var(--accent, #c8ff00); color: var(--accent-ink, #0b0d00); font-weight: 600; white-space: nowrap; }
.tx-dhead .tx-dlabel { margin-top: 0; }
.tx-dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.tx-dst { border: 1px solid var(--border); background: var(--panel-2, var(--tone-900)); border-radius: 10px; padding: 11px 13px; }
.tx-dstn { font-size: 20px; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tx-dstn.hl { color: var(--accent-text, #cdff2e); }
.tx-dstk { color: var(--muted, var(--text-muted)); font-size: 11px; margin-top: 3px; }
.tx-dgrp { margin-bottom: 14px; }
.tx-dlbl { font-family: var(--mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint, var(--text-faint)); margin-bottom: 8px; }
.tx-dchips { display: flex; flex-wrap: wrap; gap: 7px; }
.tx-dchip { font-size: 12px; border-radius: 7px; padding: 5px 10px; border: 1px solid var(--border-2, #3a3a40); color: var(--text-2, var(--text-light)); background: var(--panel-2, var(--tone-900)); }
.tx-dchip.conf { border-color: var(--accent-line, rgba(var(--accent-rgb), .34)); color: var(--accent-text, #cdff2e); }
.tx-dq { border-left: 2px solid var(--accent-line, rgba(var(--accent-rgb), .34)); padding-left: 12px; font-size: 13px; color: var(--text-2, var(--text-light)); margin-top: 9px; }
.tx-dqwho { display: block; margin-top: 4px; font-family: var(--mono, monospace); font-size: 11px; color: var(--faint, var(--text-faint)); }
.tx-dnoise { margin-top: 12px; font-size: 12px; color: var(--muted, var(--text-muted)); }
.tx-dnoise b { color: var(--text-2, var(--text-light)); }
.tx-dlink { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--accent-text, #cdff2e); text-decoration: none; }
.tx-dlink:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .tx-rowbtn { grid-template-columns: 1fr auto 18px; row-gap: 6px; }
  .tx-rowbtn .tx-size, .tx-rowbtn .tx-date { display: none; }
  .tx-dstats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Transcripts: insight-forward row layout (overrides the earlier grid) ───── */
.tx-item { border-left-width: 3px; }
.tx-item--done { border-left-color: rgba(var(--accent-rgb), .55); }
.tx-item--new  { border-left-color: var(--warn, #f5b544); }
.tx-rowbtn { grid-template-columns: 16px 1fr auto auto; gap: 12px; align-items: center; }
.tx-chev { align-self: center; }
.tx-main { min-width: 0; }
.tx-title { font-size: 14px; font-weight: 570; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sub { font-size: 11px; color: var(--faint, var(--text-faint)); margin-top: 3px; font-family: var(--mono, monospace); }
.tx-metrics { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tx-m { font-family: var(--mono, monospace); font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--panel-2, var(--tone-900)); border: 1px solid var(--border); color: var(--muted, var(--text-muted)); white-space: nowrap; }
.tx-m--voice { color: var(--accent-text, #cdff2e); border-color: var(--accent-line, rgba(var(--accent-rgb), .34)); }
.tx-m--theme { color: var(--text-2, var(--text-light)); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tx-m--skip { color: var(--faint, var(--text-faint)); }
.tx-m--pending { color: var(--warn, #f5b544); border-color: rgba(245,181,68,.4); }
.tx-actcell { text-align: right; }
.tx-dfile { font-family: var(--mono, monospace); font-size: 11px; color: var(--faint, var(--text-faint)); padding: 12px 0 4px; word-break: break-all; }

@media (max-width: 720px) {
  .tx-rowbtn { grid-template-columns: 16px 1fr; row-gap: 8px; }
  .tx-metrics { grid-column: 2; justify-content: flex-start; }
  .tx-actcell { grid-column: 2; text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════
   Journey cockpit (account/journey.js) — the customer's home pipeline.
   Foundation → Queries → Visibility numbers → Action plan, action-driven.
   ════════════════════════════════════════════════════════════════════════ */
.jrn {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 18px; padding: 1.5rem 1.5rem 1.25rem; margin-top: 1rem;
}
.jrn__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.jrn__eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.3rem;
}
.jrn__title { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; color: var(--text); }
/* When the customer has more than one crawl, the title becomes a switcher so
   they can flip between audits without leaving home. Styled to read as the
   heading, with a chevron affordance. */
.jrn__switch {
  font: 700 1.5rem/1.1 var(--font, "Instrument Sans", sans-serif); letter-spacing: -0.02em;
  color: var(--text); background: transparent; border: 0; cursor: pointer;
  padding: 0 1.6rem 0 0; margin: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center;
}
.jrn__switch:hover { color: var(--accent); }
.jrn__switch:focus { outline: none; }
.jrn__switch option { font-size: 1rem; font-weight: 500; background: var(--bg-card); color: var(--text); }
.jrn__now {
  flex: none; font-family: var(--font-mono, monospace); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.65rem;
}

.jrn__stages { display: flex; flex-direction: column; }
.jrn-stage { display: flex; gap: 1rem; }
.jrn-stage__rail { flex: none; display: flex; flex-direction: column; align-items: center; width: 36px; }
.jrn-stage__node {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono, monospace); font-size: 0.95rem; font-weight: 600;
  background: var(--bg, #09090b); border: 1px solid var(--border-light); color: var(--text-muted);
}
.jrn-stage__node svg { width: 17px; height: 17px; }
.jrn-stage__line { flex: 1; width: 2px; background: var(--border); margin: 4px 0; min-height: 1.1rem; }
.jrn-stage__body { flex: 1; min-width: 0; padding-bottom: 1.5rem; }
.jrn-stage:last-child .jrn-stage__body { padding-bottom: 0; }
.jrn-stage__hd { display: flex; align-items: center; gap: 0.6rem; }
.jrn-stage__label { font-size: 1.02rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.jrn-stage__sub { margin: 0.25rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); max-width: 60ch; }

/* State: done — the stage is complete, quietly. */
.jrn-stage--done .jrn-stage__node { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }
.jrn-stage--done .jrn-stage__line { background: rgba(var(--accent-rgb), 0.3); }
/* State: active — the customer's move. The one that stands out. */
.jrn-stage--active .jrn-stage__node { background: var(--accent, #c8ff00); border-color: var(--accent); color: #0b1000; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); }
.jrn-stage--active .jrn-stage__label { color: var(--text); }
/* State: progress — we're working; a soft blue, animated node. */
.jrn-stage--progress .jrn-stage__node { border-color: rgba(var(--sky-rgb), 0.5); color: var(--sky-ink); }
/* State: locked — dim, not yet. */
.jrn-stage--locked { opacity: 0.55; }

.jrn-pill {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 0.12rem 0.5rem; border: 1px solid var(--border-light); color: var(--text-muted);
}
.jrn-pill--active { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); }
.jrn-pill--progress { color: var(--sky-ink); border-color: rgba(var(--sky-rgb), 0.45); }
.jrn-pill--done { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }

.jrn-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem;
  background: var(--accent, #c8ff00); color: #0b1000; border: 1px solid var(--accent);
  border-radius: 10px; padding: 0.55rem 1rem; font-weight: 600; font-size: 0.9rem; text-decoration: none;
  transition: filter .14s ease;
}
.jrn-btn:hover { filter: brightness(1.08); }
.jrn-stage__link { display: inline-block; margin-top: 0.55rem; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border-light); padding-bottom: 1px; }
.jrn-stage__link:hover { color: var(--text); }

.jrn-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(var(--sky-rgb), 0.3); border-top-color: var(--sky-ink); animation: jrn-spin 0.8s linear infinite; }
@keyframes jrn-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .jrn { padding: 1.15rem 1.1rem; border-radius: 14px; }
  .jrn__title { font-size: 1.25rem; }
  .jrn-stage__link, .jrn-btn { margin-top: 0.6rem; }
}

/* ── Pay-to-run gate ─────────────────────────────────────────────────────────
   The customer prompt on a Not-Paid crawl: pay (or spend a credit) to release
   execution. Rendered by account/pay-crawl.js on the crawl hub, the Visibility
   deliverable, and the foundation confirm bar. Lime-glow Signal Card look. */
/* Deliberately quiet. This used to be a lime-glow Signal Card — radial accent
   wash, glow shadow, ⚡ spark, filled lime button — which made an unpaid balance
   the loudest thing on a page the customer came to READ. Payment is a nod, not
   an interruption: neutral card, one small accent dot, and an outlined button
   that reads as available rather than urgent. The accent lives on the action, so
   anyone looking for how to pay still finds it immediately. */
.paygate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  padding: 0.9rem 1.05rem;
  border-radius: 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.paygate__lead { display: flex; align-items: flex-start; gap: 0.6rem; flex: 1 1 260px; min-width: 0; }
/* The ⚡ became a 6px dot: present enough to say "there's a state here",
   quiet enough not to announce it. */
.paygate__spark {
  flex: none; font-size: 0; line-height: 0; align-self: center;
  width: 6px; height: 6px; margin-top: 0.1rem;
  border-radius: 50%; background: var(--accent, #c8ff00); opacity: 0.75;
}
.paygate__title { display: block; color: var(--text-secondary); font-weight: 600; font-size: 0.92rem; }
.paygate__sub { margin: 0.15rem 0 0; color: var(--text-faint); font-size: 0.84rem; line-height: 1.45; }
/* Outlined, not filled: the page's one filled-lime button should be the thing
   the reader came to do, not the invoice. */
.paygate__go.btn--primary {
  background: none; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.45); font-size: 0.86rem; padding: 0.5rem 0.95rem;
}
.paygate__go.btn--primary:hover { background: rgba(var(--accent-rgb), 0.09); border-color: var(--accent); }
.paygate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
/* Override .btn--primary's full-width so the CTA hugs its label in the row. */
.paygate__go { width: auto; white-space: nowrap; }
.paygate__alt {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.paygate__alt:hover { color: var(--accent); }
.paygate__err { flex-basis: 100%; margin: 0.1rem 0 0; }

/* Depth chooser: AI Visibility ($997) vs Visibility + The Answers ($1,296).
   Stacked radio cards; the bundle leads and is preselected, with its savings
   line ("$299 now vs $495 later") doing the selling. Same quiet register as
   the rest of the paygate — the selected card carries the accent border. */
.paygate__tiers { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.45rem; }
.paygate__tiers[hidden] { display: none; }
.paygate__tier {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-muted);
  font: inherit; font-size: 0.84rem; line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.paygate__tier:hover { border-color: rgba(var(--accent-rgb), 0.35); }
.paygate__tier.is-selected {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.06);
}
.paygate__tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.paygate__tier-head b { color: var(--text-secondary); font-weight: 600; }
.paygate__tier.is-selected .paygate__tier-head b { color: var(--accent); }
.paygate__tier-price { color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.paygate__tier.is-selected .paygate__tier-price { color: var(--accent); }
.paygate__tier-sub { font-size: 0.78rem; color: var(--text-faint); }
.paygate__tier-save {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
  border-radius: 6px;
  padding: 0.14rem 0.45rem;
}
.paygate__tiers-packnote { flex-basis: 100%; margin: -0.3rem 0 0; font-size: 0.78rem; color: var(--text-faint); }
.paygate__tiers-packnote[hidden] { display: none; }
/* The guarantee line under the order button — the same promise the cart and
   the homepage band make, kept to one quiet sentence here. */
.paygate__fine { flex-basis: 100%; margin: -0.2rem 0 0; font-size: 0.75rem; color: var(--text-faint); line-height: 1.45; }

/* Charge-on-delivery plan chooser: 1 / 3 / 6 reports. Quiet segmented radios in
   the same register as the outlined CTA — the selected plan carries the accent. */
.paygate__plans { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.paygate__plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  padding: 0.45rem 0.8rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font: inherit; font-size: 0.82rem; line-height: 1.3;
  cursor: pointer;
}
.paygate__plan b { color: var(--text-secondary); font-weight: 600; }
.paygate__plan span { font-size: 0.78rem; }
.paygate__plan:hover { border-color: rgba(var(--accent-rgb), 0.35); }
.paygate__plan.is-selected {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.06);
}
.paygate__plan.is-selected b { color: var(--accent); }

/* Ordered (card on file): a confirmation, not a gate — the dot reads settled. */
.paygate--ordered .paygate__spark { background: var(--accent, #c8ff00); opacity: 1; }

/* Delivery charge declined: the one paygate state that IS urgent — the report
   exists and is held. Amber, not lime, so it can't be mistaken for the order CTA. */
.paygate--held { border-color: rgba(255, 179, 0, 0.4); }
.paygate--held .paygate__spark { background: #ffb300; opacity: 1; }
.paygate--held .paygate__go.btn--primary {
  color: #ffb300; border-color: rgba(255, 179, 0, 0.5);
}
.paygate--held .paygate__go.btn--primary:hover {
  background: rgba(255, 179, 0, 0.09); border-color: #ffb300;
}

/* Compact variant for the foundation confirm bar — sits under the approve row. */
.paygate--confirm { padding: 0.95rem 1.1rem; border-radius: 13px; gap: 0.75rem 1rem; }
.paygate--confirm .paygate__title { font-size: 0.96rem; }
.paygate--confirm .paygate__sub { font-size: 0.85rem; }

/* Inline on a single deliverable (Visibility) — a touch lighter than the hub. */
.paygate--section { margin-top: 0.9rem; }

@media (max-width: 640px) {
  .paygate { padding: 1rem 1.05rem; border-radius: 14px; }
  .paygate__go { width: 100%; }
  .paygate__actions { flex-basis: 100%; }
}


/* Moved here from redesign.css (2026-08-03): the operator app (/account/ops/)
   loads account.css but NOT redesign.css, and its nav now mounts the same
   client picker. One copy, both sides — a second copy would drift. */
/* ── Operator context bar (view-as / ops switcher) ───────────────────────── */
.rl-opbar-g { position: sticky; top: 0; z-index: 60; background: #101014;
  border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.rl-opbar-g.is-viewing { background: linear-gradient(180deg, rgba(var(--amber-rgb), .12), rgba(var(--amber-rgb), .05));
  border-bottom-color: rgba(var(--amber-rgb), .4); }
.rl-opbar-g__in { max-width: var(--max-width, 1100px); margin: 0 auto; padding: 8px 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rl-opbar-g__tag { font-family: var(--mono, monospace); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--accent-ink); background: var(--text-muted); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.rl-opbar-g__tag--amber { background: var(--rl-amber, var(--amber-bright)); }
.rl-opbar-g__links { display: flex; gap: 4px; }
.rl-opbar-g__links a { color: var(--text-muted); text-decoration: none; padding: 5px 10px; border-radius: 8px; }
.rl-opbar-g__links a:hover { color: var(--text); background: var(--bg-card); }
.rl-opbar-g__links a.is-here { color: var(--text); }
.rl-opbar-g__viewas, .rl-opbar-g__switch { margin-left: auto; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border-light); border-radius: 9px; padding: 6px 13px; font-weight: 600; font-size: .82rem; cursor: pointer; }
.rl-opbar-g__viewas:hover, .rl-opbar-g__switch:hover { border-color: var(--accent); color: var(--accent); }
.rl-opbar-g__who { font-weight: 600; color: var(--text); }
.rl-opbar-g__host { font-family: var(--mono, monospace); font-size: .78rem; color: var(--text-muted); font-weight: 400; }
.rl-opbar-g__note { font-size: .78rem; color: var(--text-muted); }
.rl-opbar-g__right { margin-left: auto; display: flex; gap: 8px; }
.rl-opbar-g__switch { margin-left: 0; }
.rl-opbar-g__exit { background: var(--rl-amber, var(--amber-bright)); color: var(--accent-ink); border: none; border-radius: 9px;
  padding: 6px 13px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.rl-opbar-g__exit:hover { filter: brightness(1.08); }
/* customer picker */
.rl-opbar-pick { position: absolute; left: 22px; right: 22px; top: 100%; margin-top: -1px; z-index: 61;
  max-width: 460px; background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 0 0 12px 12px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); overflow: hidden; }
.rl-opbar-pick__q { width: 100%; border: none; border-bottom: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font: inherit; font-size: .88rem; padding: 12px 14px; outline: none; }
.rl-opbar-pick__list { max-height: 320px; overflow: auto; padding: 6px; }
.rl-opbar-pick__row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none;
  border: none; color: var(--text); padding: 9px 11px; border-radius: 9px; cursor: pointer; }
.rl-opbar-pick__row:hover { background: var(--bg-card); }
.rl-opbar-pick__co { font-weight: 600; font-size: .9rem; }
.rl-opbar-pick__meta { font-family: var(--mono, monospace); font-size: .68rem; color: var(--text-muted); }
.rl-opbar-pick__empty { padding: 16px; color: var(--text-muted); font-size: .84rem; }
@media (max-width: 640px) { .rl-opbar-g__note, .rl-opbar-g__links { display: none; } .rl-opbar-pick { max-width: none; } }

.rl-opbar-g__back { align-self: center; color: var(--text-muted); text-decoration: none;
  font-size: .82rem; font-weight: 600; padding: 6px 10px; border-radius: 9px; }
.rl-opbar-g__back:hover { color: var(--text); background: rgba(0,0,0,.25); }

/* Picker anchored under a nav pill (ops nav) rather than a full-width bar. */
.rl-opbar-pick--anchored { left: auto; right: 0; width: min(440px, 92vw); max-width: none;
  border-radius: 12px; margin-top: 6px; }

/* ── Voice of Customer × Knowledge Graph ─────────────────────────────────────
   The VoC is only actionable next to the graph it validates. These carry the
   status of each theme against the KG, and the coverage summary underneath. */
.voc-kg { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; }
.voc-kg--validated    { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); }
.voc-kg--under_rated  { color: var(--warning-text); border-color: rgba(var(--warning-rgb), .35); background: rgba(var(--warning-rgb), .08); }
.voc-kg--missing      { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 8%, transparent); }
.voc-kg--contradicted { color: var(--danger-text); border-color: rgba(var(--danger-rgb), .4);  background: rgba(var(--danger-rgb), .10); }
.voc-kg--unvalidated  { color: var(--text-muted); border-color: rgba(var(--neutral-rgb), .35); background: rgba(var(--neutral-rgb), .08); }
.voc-kg--dissent      { color: var(--danger-text); border-color: rgba(var(--danger-rgb), .3); }

.voc-imp { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.voc-imp b { color: var(--text); }
.voc-why__l { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-right: 6px; }

.voc-kgsec { margin-top: 40px; }
.voc-kgstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 28px; }
.voc-kgstat { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.voc-kgstat .voc-kgn { font-size: 26px; font-weight: 700; line-height: 1.1; }
.voc-kgstat .voc-kgl { font-size: 12px; color: var(--muted); margin-top: 4px; }
.voc-kgstat--validated .voc-kgn { color: var(--accent); }
.voc-kgstat--contradicted .voc-kgn { color: var(--danger-text); }
.voc-kgstat--missing .voc-kgn { color: var(--info); }
.voc-kgstat--under_rated .voc-kgn { color: #ffd166; }

.voc-nyhlist { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.voc-nyhitem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--card); }
.voc-nyht { font-weight: 600; }
.voc-nyhw { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .voc-kgstats { grid-template-columns: repeat(2, 1fr); } }
.voc-more { width: 100%; margin-top: 12px; padding: 12px; border: 1px dashed var(--border);
  border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.voc-more:hover { border-color: var(--accent-line); color: var(--text-2); }

/* ── Review funnel + curation verdict ────────────────────────────────────────
   The funnel publishes what we excluded; the verdict publishes the decision WE
   made. Neither is a question for the client — both are our work, shown. */
.voc-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 10px; }
.voc-fstep { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.voc-fn { font-size: 26px; font-weight: 700; line-height: 1.1; }
.voc-fl { font-size: 13px; margin-top: 4px; }
.voc-fs { font-size: 11px; color: var(--muted); margin-top: 2px; }
.voc-fstep--out .voc-fn { color: var(--muted); }
.voc-fstep--in  .voc-fn { color: var(--info); }
.voc-fstep--done .voc-fn { color: var(--accent); }

.voc-vd { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; }
.voc-vd--adopt     { color: var(--accent-ink); background: var(--accent-fill); font-weight: 700; }
.voc-vd--watch     { color: var(--warning-text); border-color: rgba(var(--warning-rgb), .4); }
.voc-vd--set_aside { color: var(--muted); border-color: var(--border); }
.voc-vdwhy { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.voc-vdwhy b { color: var(--text); }

/* ── KG revision: the changes WE made, each with the quote behind it ───────── */
.voc-revlist { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.voc-rev { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.voc-rev--retire_competitor { border-left-color: var(--danger-text); }
.voc-rev--demote_competitor { border-left-color: var(--warning); }
.voc-rev--reclassify_competitor { border-left-color: var(--info); }
.voc-rev--raise_salience { border-left-color: var(--accent); }
.voc-revhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.voc-revlabel { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; color: var(--text-2); }
.voc-reventity { font-weight: 600; }
.voc-revdelta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.voc-revwhy { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.voc-revnoev { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }

/* ── Layer 1: the argument ─────────────────────────────────────────────────── */
.voc-args { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
/* Same defect as the theme head, and the one that was reported: a nowrap metric
   in an `auto` column. One long metric ("custom plans 23 accounts · manual
   exceptions 28 · …") took the row, and the claim beside it wrapped a word at a
   time down a 100px gutter. The metric column is capped and its text wraps. */
.voc-arg { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 15rem); gap: 16px; align-items: start;
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--card); }
.voc-argn { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 4px; }
.voc-argclaim { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.voc-argdetail { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.voc-argmetric { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--accent-text);
  border: 1px solid var(--accent-line); border-radius: 10px; padding: 4px 10px; justify-self: end; }
/* ── Layer 2: their market ─────────────────────────────────────────────────── */
/* min() so the track can still shrink below its 340px preference — a bare
   minmax(340px, …) is a floor, and on a 360px phone that floor is wider than
   the column it sits in, which scrolls the whole page sideways. */
.voc-mkt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 16px; }
.voc-mcard { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: var(--card); }
.voc-mh { margin: 0 0 4px; font-size: 16px; }
.voc-mdesc { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.voc-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
/* These are capability and persona names, not filenames: clipping "Engineering"
   to "Engine…" to protect a fixed bar column costs the reader the row's whole
   point. The name wraps and the bar keeps its width. */
.voc-mlabel { min-width: 0; overflow-wrap: anywhere; }
/* The competitor rows reuse this grid but put a status CHIP where the bar goes,
   and an uppercase chip does not fit an 84px bar track — it overflowed its cell
   and printed straight through the account count beside it. */
.voc-mrow--rel { grid-template-columns: minmax(0, 1fr) auto auto; }
.voc-mbar { background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; }
.voc-mbar i { display: block; height: 100%; background: var(--accent-text); border-radius: 999px; }
.voc-mval { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.voc-mfoot { margin: 14px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
@media (max-width: 900px) {
  .voc-arg { grid-template-columns: 44px minmax(0, 1fr); }
  .voc-argmetric { grid-column: 2; justify-self: start; }
}
@media (max-width: 700px) {
  .voc-arg { grid-template-columns: 1fr; }
  .voc-argmetric { grid-column: auto; }
}

/* ── The model we stand behind ─────────────────────────────────────────────── */
.voc-model { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-top: 16px; }
.voc-prow { border-top: 1px solid var(--border); padding: 12px 0; }
.voc-prow:first-of-type { border-top: 0; }
.voc-prank { font-family: var(--mono); font-size: 11px; color: var(--accent-text); margin-right: 8px; }
.voc-pname { font-weight: 600; font-size: 14px; }
.voc-pmeta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: 8px; }
.voc-pwhy { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 900px) { .voc-model { grid-template-columns: 1fr; } }

/* ── VoC evidence on the Knowledge Graph rows ─────────────────────────────── */
.tag--voc { color: var(--accent-ink); background: var(--accent-fill); font-weight: 700; }
.tag--synthetic { color: var(--muted); border: 1px dashed var(--border); }
.tag--rel { color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); }
.quote--voc { border-left: 2px solid var(--accent); padding-left: 12px; margin-top: 8px; }
.quote--voc .quote__cite { display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 10.5px; color: var(--muted); }
.quote--voc .quote__cite a { color: var(--accent-text); text-decoration: none; }
.quote--voc .quote__cite a:hover { text-decoration: underline; }

/* ── VoC evidence inside the foundation reviewer ──────────────────────────── */
.kg-tag { display:inline-block; font-family: var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.02em; border-radius:999px; padding:2px 8px; margin-left:6px; white-space:nowrap; }
.kg-tag--voc { color:var(--accent-ink); background:var(--accent-fill); font-weight:700; }
.kg-tag--synth { color:var(--muted); border:1px dashed var(--border); }
.kg-tag--rel { color:var(--info); border:1px solid color-mix(in srgb, var(--info) 40%, transparent); }
.kg-voc { border-left:2px solid var(--accent); padding:2px 0 2px 12px; margin-top:.6rem;
  font-size:14px; line-height:1.55; color:var(--text-2); }
.kg-voc__c { display:block; margin-top:5px; font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.kg-voc__c a { color:var(--accent-text); text-decoration:none; }
.kg-voc__c a:hover { text-decoration:underline; }
.voc-card.is-linked { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* ── Where deals stop: the objection ladder ──────────────────────────────────
   The five gates are numbered because they ARE a sequence — they fire in this
   order through a deal, and that order is the finding. The quote is the material,
   so it breaks the card's left edge rather than sitting inside a box. */
.voc-gates { display: grid; gap: 14px; }
.voc-gate { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: var(--card); }
.voc-gate--trig { border-style: dashed; }
.voc-gate-h { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; align-items: start; }
.voc-gate-n { font-family: var(--mono); font-size: 26px; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.voc-gate-t { margin: 0; font-size: 16px; font-weight: 630; letter-spacing: -.01em; }
.voc-gate-w { margin: 3px 0 0 !important; font-size: 12.5px; color: var(--muted); max-width: 68ch; }
.voc-gate-c { margin: 5px 0 0 !important; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.voc-objs { margin-top: 14px; display: grid; gap: 2px; }
.voc-obj { border-top: 1px solid var(--border-2); padding: 11px 0 3px; }
.voc-obj-n { margin: 0 !important; font-size: 13.5px; font-weight: 600; display: flex; flex-wrap: wrap;
  gap: 7px; align-items: baseline; }
.voc-obj-d { margin: 4px 0 0 !important; font-size: 12.5px; color: var(--muted); max-width: 72ch; }
.voc-chip--live { border-color: var(--accent-line); color: var(--accent-text); }
.voc-gq { border-left: 2px solid var(--accent-line); padding: 0 0 0 12px; margin: 9px 0 0;
  font-size: 13px; font-style: italic; color: var(--text-2); max-width: 70ch; }
.voc-gq cite { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px;
  font-style: normal; color: var(--faint); }
.voc-gate-a { margin: 15px 0 0 !important; font-size: 12.5px; color: var(--muted);
  border-left: 3px solid var(--accent-line); padding: 9px 13px; background: var(--panel-2); border-radius: 0 8px 8px 0; }
.voc-gate-a b { color: var(--text-2); }

/* ── The buyer's own category words ───────────────────────────────────────── */
.voc-words2 { display: flex; flex-wrap: wrap; gap: 6px; }
.voc-word { font-family: var(--mono); font-size: 12px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text-2); }
@media (max-width: 700px) { .voc-gate-h { grid-template-columns: 30px 1fr; } .voc-gate-n { font-size: 19px; } }

/* ─────────────────────────────────────────────────────────────────────────────
   THE PURCHASE BAR  (account/purchase-bar.js)

   One docked row at rest; the offer and the chooser live behind a tap. It
   replaces a paygate card that sat at y≈1195 on the crawl hub — below the fold
   on every phone, on the screen that turns a free foundation into a paid crawl.

   THE CONSTRAINT THAT SHAPES IT: .acct-tabbar is fixed at bottom 0, z-97, 58px
   tall, on every screen ≤640px. The purchase bar sits ABOVE it and BELOW it in
   the stack (z-90) — navigation must always win a tap, and commerce must never
   cover navigation. It also has to ride --tabbar-shift, which account-nav.js
   sets to re-pin the tab bar when Safari's bottom toolbar collapses; without
   that the two would come apart mid-scroll.
   ───────────────────────────────────────────────────────────────────────────── */
.pbuy {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center;   /* the route, and beside it "Change" */
  z-index: 90;                      /* under .acct-tabbar (97), over content */
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.45);
}
.pbuy__go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 0; border-radius: 10px;
  font: inherit; font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em;
  background: var(--accent-fill, var(--accent)); color: var(--accent-ink, #09090b);
  cursor: pointer;
}
.pbuy__amt { font-family: var(--mono, monospace); font-weight: 500; font-size: 0.8rem; opacity: 0.82; }
.pbuy__dot { opacity: 0.45; }
.pbuy__chev { font-size: 0.72rem; opacity: 0.62; }
.pbuy__go:hover { filter: brightness(1.06); }

/* An offer rather than THE ask — ordering ahead, and the post-delivery upsell.
   Same geometry, less shouting, so the lime keeps its meaning for the moment
   that actually needs it. */
.pbuy--ghost .pbuy__go {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-light); font-weight: 600;
}
/* The report is built and held. Amber, never lime: they have already paid and
   this must not read as another order. */
.pbuy--held { background: var(--bg-card); border-top-color: rgba(255, 179, 0, 0.42); }
.pbuy--held .pbuy__go { background: #ffb300; color: #1c1c1a; }

/* Reserve the bar's measured height so nothing is ever underneath it. */
body.has-pbuy { padding-bottom: calc(var(--pbuy-h, 56px) + env(safe-area-inset-bottom, 0px)); }
/* Down while the ask band that says the same thing is on screen; up once it
   has scrolled away. One ask per screen (purchase-bar.js, `anchor`). */
.pbuy.is-down { transform: translateY(120%); pointer-events: none; }
.pbuy { transition: transform .26s cubic-bezier(.4,0,.2,1); }
.pbuy__change { flex: none; background: none; border: 1px solid var(--border-light, #3f3f46); color: var(--text-secondary);
  font: inherit; font-size: .78rem; font-weight: 600; border-radius: 8px; padding: .5rem .8rem; cursor: pointer; margin-right: .5rem; }
.pbuy__change:hover { color: var(--accent); border-color: var(--accent); }
.pbuy-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; }
.pbuy-sheet__head b { font-size: .98rem; font-weight: 600; }
.pbuy-sheet__x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.pbuy-sheet__foot { padding-top: 12px; }
.pbuy-sheet__foot .btn { width: 100%; }

@media (max-width: 640px) {
  /* Above the tab bar, and moving with it. --pbuy-floor is the tab bar's
     MEASURED height, published by purchase-bar.js. The 58px constant this file
     uses elsewhere is 2px short of what the element actually renders (its
     border and padding sit outside that number), so positioning against the
     constant put the bar 2px over the navigation — caught at 390px before it
     shipped. The measurement also absorbs the safe-area inset, which the tab
     bar has already spent. */
  body.has-tabbar .pbuy {
    bottom: var(--pbuy-floor, 60px);
    padding-bottom: 4px;
    transform: translateY(var(--tabbar-shift, 0px));
  }
  body.has-tabbar.has-pbuy {
    padding-bottom: calc(var(--pbuy-floor, 60px) + var(--pbuy-h, 56px));
  }
  .pbuy__go { font-size: 0.84rem; }
}

/* On a wide screen a full-bleed commerce banner reads as an ad. Centre it and
   cap it, so it reads as the page's action bar. */
@media (min-width: 641px) {
  .pbuy {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    bottom: 18px; padding: 6px;
    border: 1px solid var(--border-light); border-radius: 14px;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
  }
  body.has-pbuy { padding-bottom: calc(var(--pbuy-h, 56px) + 32px); }
}

/* ── the sheet ─────────────────────────────────────────────────────────────
   Opens only on a tap — never on arrival, on scroll, or on a timer. Above the
   tab bar's z-97 because it IS a modal moment: while it is open, it is the
   only thing to interact with. */
.pbuy-sheet { position: fixed; inset: 0; z-index: 120; }
.pbuy-sheet__scrim {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(9, 9, 11, 0.62); opacity: 0; transition: opacity .2s ease;
}
.pbuy-sheet.is-open .pbuy-sheet__scrim { opacity: 1; }
.pbuy-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .24s ease;
}
.pbuy-sheet.is-open .pbuy-sheet__panel { transform: translateY(0); }
.pbuy-sheet__grab {
  width: 38px; height: 4px; border-radius: 2px; margin: 0.35rem auto 0.85rem;
  background: var(--border-light);
}
/* The page must not scroll behind an open sheet. */
body.pbuy-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pbuy-sheet__scrim, .pbuy-sheet__panel { transition: none; }
}

/* Desktop: a centred dialog rather than a drawer off the bottom edge. */
@media (min-width: 641px) {
  .pbuy-sheet__panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(520px, calc(100vw - 40px));
    transform: translate(-50%, -46%); opacity: 0;
    border: 1px solid var(--border); border-radius: 16px;
    max-height: 86vh;
    transition: transform .22s ease, opacity .22s ease;
  }
  .pbuy-sheet.is-open .pbuy-sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
}

/* The chooser inside the sheet carries its own card chrome from .paygate, so
   it must not draw a second border inside this one. */
.pbuy-sheet__body .paygate { background: transparent; border: 0; padding: 0; }
/* In the sheet the order button is the TERMINAL action — the last thing between
   a decision and a card — so it is solid rather than the outlined treatment the
   inline card uses, where it competes with the page around it. Scoped to the
   sheet so the foundation rail and the explorer keep their own weighting. */
.pbuy-sheet__body .paygate__go.btn--primary {
  background: var(--accent-fill, var(--accent));
  color: var(--accent-ink, #09090b);
  border-color: transparent;
  font-weight: 700;
  min-height: 48px;
}
.pbuy-sheet__body .paygate__go.btn--primary:hover { filter: brightness(1.06); }

/* ── The escape hatch at the foot of every account page ─────────────────── */
.acct-ask { margin: 2.5rem auto 0; padding: 1rem 1.25rem 1.5rem; max-width: 1240px; font-size: .82rem; color: var(--muted); text-align: center; }
.acct-ask a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.sa-back { display: inline-block; font-size: .86rem; color: var(--text); text-decoration: none; margin-bottom: .6rem; }
.sa-back:hover { text-decoration: underline; }

/* ── Voice of Customer: where you are, and the way back (2026-09-06) ─────── */
.voc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .2rem 0 .6rem; font-size: .82rem; color: var(--text-muted, #a1a1aa); }
.voc-crumbs[hidden] { display: none; }
.voc-crumbs__back { text-decoration: none; color: var(--text, #f4f4f5); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.voc-crumbs__back:hover { color: var(--accent, #c8ff00); }
.voc-crumbs__trail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.voc-crumbs__trail a { color: var(--text-muted, #a1a1aa); text-decoration: none; }
.voc-crumbs__trail a:hover { color: var(--text, #f4f4f5); text-decoration: underline; text-underline-offset: 3px; }
.voc-crumbs__trail i { font-style: normal; color: var(--text-faint, #71717a); }
.voc-crumbs__trail b { color: var(--text, #f4f4f5); font-weight: 500; }
@media (max-width: 640px) { .voc-crumbs__trail { display: none; } }
@media print { .voc-crumbs { display: none; } }


/* ── Voice of Customer, redrawn (2026-09-06): the shape first, then the argument ──
   Same anatomy as the report's buyers route: reach meters, one quote as speech,
   the rest behind a disclosure, the deal as a timeline. The buyer's voice has
   its own hue (violet, the one hue the account had not spent). */
:root { --rl-voice: #b9a5ff; --rl-voice-soft: rgba(185,165,255,.14); --rl-voice-line: rgba(185,165,255,.45); }
[data-theme="light"] { --rl-voice: #5b3fc4; --rl-voice-soft: rgba(91,63,196,.1); --rl-voice-line: rgba(91,63,196,.4); }
.voc-arg { grid-template-columns: 36px minmax(0, 1fr); gap: 10px 14px; padding: 18px 20px; }
@media (min-width: 900px) { .voc-arg { grid-template-columns: 36px minmax(0, 7fr) minmax(0, 6fr); column-gap: 22px; } .voc-arg .voc-argbody { grid-column: 2; grid-row: 1; } .voc-arg .voc-argq { grid-column: 3; grid-row: 1; } }
.voc-argbody { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.voc-argq { grid-column: 2; min-width: 0; }
.voc-argclaim { margin: 0; font-size: 18px; color: var(--text); }
.voc-argdetail { margin: 0; max-width: 68ch; }
.voc-reach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.voc-reach__t { display: block; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.voc-reach__t i { display: block; height: 100%; background: var(--rl-voice); border-radius: 4px; }
.voc-reach__v { font-family: var(--mono); font-size: 13px; color: var(--text); }
.voc-reach__u { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.voc-vchips { display: flex; flex-wrap: wrap; gap: 5px; }
.voc-vchip { font-family: var(--mono); font-size: 11px; color: var(--text-2); border: 1px solid var(--rl-voice-line); border-radius: 5px; padding: 2px 7px; }
.voc-vchip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--rl-voice); margin-right: 5px; vertical-align: -1px; }
.voc-vchip--era { color: var(--rl-voice); }
.voc-vchip { cursor: help; }
/* A number with no noun on it is a riddle. When the producer gave us no unit,
   say what was counted rather than leaving the reader to guess. */
.voc-vunit { font-size: 11px; color: var(--text-3, var(--text-2)); margin: 4px 0 0; }
.voc-more { border-top: 1px dashed var(--border); margin-top: 2px; }
.voc-more summary { cursor: pointer; min-height: 38px; display: flex; align-items: center; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.voc-more summary::-webkit-details-marker { display: none; }
.voc-more summary::after { content: "+"; margin-left: auto; }
.voc-more[open] summary::after { content: "−"; }
.voc-more .voc-argdetail { margin-bottom: 10px; }
.voc-q2 { margin: 0; padding: 12px 14px 10px 16px; border-left: 3px solid var(--rl-voice); background: var(--bg, #0a0a0b); border-radius: 0 12px 12px 0; }
.voc-q2 blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.voc-q2 blockquote::before { content: "“"; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 0; color: var(--rl-voice); margin-right: .15rem; vertical-align: -.5rem; }
.voc-q2--lead blockquote { font-size: 16px; }
.voc-q2 figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.voc-q2 figcaption b { color: var(--text); font-weight: 600; }
.voc-play { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--rl-voice); border: 1px solid var(--rl-voice-line); border-radius: 999px; padding: 2px 9px; text-decoration: none; margin-left: auto; white-space: nowrap; min-height: 26px; }
.voc-play:hover, .voc-play:focus-visible { background: var(--rl-voice-soft); }
.voc-mcard .voc-mbar i { background: var(--rl-voice); }
.voc-mcard--red .voc-mbar i { background: var(--red-ink, #ef4444); }
.voc-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--border); gap: 2px; margin-bottom: 10px; }
.voc-stack i { display: block; height: 100%; background: var(--rl-voice); min-width: 3px; }
.voc-dealt { margin: 0 0 4px; font-size: 18px; }
.voc-tl { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.voc-tl__s { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; position: relative; padding-bottom: 16px; }
.voc-tl__s::before { content: ""; grid-column: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--rl-voice); margin: 6px 0 0 6px; box-shadow: 0 0 0 3px var(--rl-voice-soft); }
.voc-tl__s::after { content: ""; position: absolute; left: 10.5px; top: 20px; bottom: 0; width: 1px; background: var(--border); }
.voc-tl__s:last-child::after { display: none; }
.voc-tl__d { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.voc-tl__d b { color: var(--text); font-size: 15px; }
.voc-tl__d span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.voc-tl__sum { grid-column: 2; margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 68ch; }
.voc-tl__q { grid-column: 2; margin-top: 6px; padding: 10px 12px; background: var(--card); border-radius: 10px; border: 1px solid var(--border); }
.voc-tl__l { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.voc-tl__q p { font-size: 14px; color: var(--text); margin: 0 0 6px; }
.voc-tl__q .voc-play { margin-left: 0; }
@media print { .voc-more { display: none; } }