/* ════════════════════════════════════════════════════════════════════════
   Visibility Briefing — chaptered booklet walkthrough. Layered on main.css +
   account.css. Screen = one chapter at a time (pager). Print = all chapters,
   one per page (Save as PDF). Brand-dark, conversion-tuned.
   ════════════════════════════════════════════════════════════════════════ */

.booklet-body { background: var(--bg, #09090b); --rl-topnav-h: 64px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.booklet-topnav .site-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.booklet-topnav__right { display: flex; gap: 0.6rem; align-items: center; }

/* Breadcrumb — orients the reader inside a deep report page and gives a single,
   consistent climb back to the audits list. margin-right:auto keeps it pinned
   next to the logo while the action buttons stay on the right. */
.booklet-crumbs { display: flex; align-items: center; gap: 0.45rem; margin: 0 0.9rem; margin-right: auto; min-width: 0; font-size: 0.85rem; }
.booklet-crumbs a { color: var(--muted, #a1a1aa); text-decoration: none; white-space: nowrap; }
.booklet-crumbs a:hover { color: var(--accent, #c8ff00); }
.booklet-crumbs__sep { color: var(--muted, #a1a1aa); }
.booklet-crumbs__here { color: var(--text, #fafafa); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On narrow screens the topnav is tight — drop the crumb (the ✕ Close + browser
   back still return you), keeping the bar uncluttered. */
@media (max-width: 560px) { .booklet-crumbs { display: none; } }

/* `display: inline-flex` below outranks the UA stylesheet's
   `[hidden] { display: none }`, so EVERY .booklet-btn authored or set `hidden`
   rendered anyway. That is how a shared viewer ended up looking at a "Share"
   button on a foundation review: wireShare() returns early for a non-owner
   without binding a handler (sharing is owner-only — /api/shares 404s everyone
   else), leaving a button that is visible, inert, and promises something the
   API refuses. Class-level, because the two instances the audit caught
   (#btn-share, #back-link) are not special — any .booklet-btn hidden anywhere
   had the same defect waiting. */
.booklet-btn[hidden], .view-toggle[hidden] { display: none; }
.booklet-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 0.6rem 1.1rem; border: 1px solid transparent;
  text-decoration: none; transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.booklet-btn--primary { background: var(--accent, #c8ff00); color: #09090b; }
.booklet-btn--primary:hover { opacity: 0.9; }
.booklet-btn--ghost { background: transparent; border-color: var(--border-light, #3f3f46); color: var(--text, #fafafa); }
.booklet-btn--ghost:hover { border-color: var(--accent, #c8ff00); }
.booklet-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.booklet-pager .booklet-btn:not(.booklet-btn--primary) { background: transparent; border-color: var(--border, #27272a); color: var(--text-secondary, #e4e4e7); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.booklet { max-width: 880px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.booklet-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.booklet-loading[hidden] { display: none !important; }

/* ── Progress rail ───────────────────────────────────────────────────────── */
.progress-rail {
  list-style: none; display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0;
}
.progress-rail li { flex: 1 1 auto; }
.rail-dot {
  width: 100%; background: none; border: none; cursor: pointer; padding: 0; text-align: left;
}
.rail-dot span {
  display: block; font-family: var(--mono, monospace); font-size: 0.62rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted, #a1a1aa); padding-top: 0.5rem;
  border-top: 2px solid var(--border, #27272a); transition: color 0.15s, border-color 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-dot.is-done span { border-top-color: var(--accent-dim, rgba(200,255,0,0.4)); color: var(--text-secondary, #e4e4e7); }
.rail-dot.is-active span { border-top-color: var(--accent, #c8ff00); color: var(--text, #fafafa); }
.rail-dot:hover span { color: var(--text, #fafafa); }

/* ── Slides ──────────────────────────────────────────────────────────────── */
.ch-slide { display: none; }
.ch-slide.is-active { display: block; animation: chIn 0.35s ease; }
@keyframes chIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ch {
  background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 18px;
  padding: 2.75rem 2.5rem; min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
}
.ch__num { font-family: var(--mono, monospace); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent, #c8ff00); margin: 0 0 1rem; }
.ch__eyebrow { font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted, #a1a1aa); margin: 0 0 1.5rem; }
.ch__title { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 1.75rem; color: var(--text, #fafafa); }
.ch__lead { color: var(--text-secondary, #e4e4e7); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.75rem; max-width: 62ch; }

.ch__takeaway {
  margin: 2rem 0 0; padding: 1.25rem 1.4rem; border-left: 3px solid var(--accent, #c8ff00);
  background: var(--accent-glow, rgba(200,255,0,0.06)); border-radius: 0 12px 12px 0;
  color: var(--text-secondary, #e4e4e7); font-size: 1.02rem; line-height: 1.6;
}
.ch__takeaway strong { color: var(--text, #fafafa); }
.ch__takeaway-tag {
  display: block; font-family: var(--mono, monospace); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent, #c8ff00); margin-bottom: 0.5rem;
}

/* ── Cover ───────────────────────────────────────────────────────────────── */
.ch--cover { align-items: flex-start; text-align: left; }
.ch__cover-title { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 1rem; color: var(--text, #fafafa); }
.ch__cover-sub { color: var(--text-secondary, #e4e4e7); font-size: 1.1rem; margin: 0 0 2rem; }
.ch__cover-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 2.5rem; }
.ch__cover-meta span { font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--text-muted, #a1a1aa); position: relative; padding-left: 1rem; }
.ch__cover-meta span::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #c8ff00); transform: translateY(-50%); }
.ch__cover-cta { font-size: 1rem; padding: 0.85rem 1.5rem; }

/* ── Big stats ───────────────────────────────────────────────────────────── */
.bstat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bstat { background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 1.5rem 1.25rem; }
.bstat__val { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.bstat__label { font-weight: 600; margin: 0.6rem 0 0.3rem; }
.bstat__sub { color: var(--text-muted, #a1a1aa); font-size: 0.85rem; }
.bstat.warn .bstat__val { color: var(--warning, #f59e0b); }
.bstat.good .bstat__val { color: var(--accent, #c8ff00); }
.bstat.bad .bstat__val { color: var(--danger, #ef4444); }

/* ── Bars (funnel) ───────────────────────────────────────────────────────── */
.funnel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.funnel-col { background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 1.4rem; }
.funnel-col--danger { border-color: rgba(239,68,68,0.3); }
.funnel-col__head { font-family: var(--mono, monospace); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #a1a1aa); margin: 0 0 1.1rem; }
.bk-bar { display: grid; grid-template-columns: 1fr 90px 44px; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.bk-bar__label { font-size: 0.85rem; color: var(--text-secondary, #e4e4e7); }
.bk-bar__track { height: 8px; background: var(--border, #27272a); border-radius: 99px; overflow: hidden; }
.bk-bar__fill { display: block; height: 100%; border-radius: 99px; background: var(--text-muted, #a1a1aa); }
.bk-bar__fill.good { background: var(--accent, #c8ff00); }
.bk-bar__fill.warn { background: var(--warning, #f59e0b); }
.bk-bar__fill.bad { background: var(--danger, #ef4444); }
.bk-bar__val { font-family: var(--mono, monospace); font-size: 0.8rem; text-align: right; color: var(--text-muted, #a1a1aa); }
.bk-bar__val.good { color: var(--accent, #c8ff00); }
.bk-bar__val.warn { color: var(--warning, #f59e0b); }
.bk-bar__val.bad { color: var(--danger, #ef4444); }

/* ── SOV chart ───────────────────────────────────────────────────────────── */
.sov-chart { display: flex; flex-direction: column; gap: 0.55rem; }
.sov-bar { display: grid; grid-template-columns: 160px 1fr 84px; align-items: center; gap: 0.8rem; }
.sov-bar__name { font-size: 0.9rem; color: var(--text-secondary, #e4e4e7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sov-bar__track { height: 22px; background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 6px; overflow: hidden; }
.sov-bar__fill { display: block; height: 100%; background: #52525b; }
.sov-bar__num { font-family: var(--mono, monospace); font-size: 0.85rem; text-align: right; color: var(--text-muted, #a1a1aa); }
.sov-bar__num small { display: block; font-size: 0.68rem; opacity: 0.7; }
.sov-bar.is-focal .sov-bar__name { color: var(--accent, #c8ff00); font-weight: 700; }
.sov-bar.is-focal .sov-bar__fill { background: var(--accent, #c8ff00); }
.sov-bar.is-focal .sov-bar__num { color: var(--accent, #c8ff00); }

/* ── Gate (locked plan — the conversion moment) ──────────────────────────── */
.gate2 { position: relative; margin-top: 0.5rem; border: 1px solid var(--border, #27272a); border-radius: 16px; overflow: hidden; }
.gate2__teaser { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; filter: blur(5px); opacity: 0.5; pointer-events: none; }
.gate2__layer { display: flex; align-items: center; gap: 0.85rem; }
.gate2__badge { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-dim, rgba(200,255,0,0.12)); color: var(--accent, #c8ff00); font-family: var(--mono, monospace); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gate2__line { color: var(--text-secondary, #e4e4e7); }
.gate2__lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; gap: 0.5rem;
  background: radial-gradient(120% 80% at 50% 50%, rgba(9,9,11,0.7) 0%, rgba(9,9,11,0.95) 75%);
}
.gate2__title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.gate2__lock .booklet-btn { margin-top: 0.85rem; font-size: 1rem; padding: 0.85rem 1.6rem; }
.gate2__lock .dash__email { max-width: 46ch; }

/* ── Partnership ─────────────────────────────────────────────────────────── */
.partner-points { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.partner-points li { color: var(--text-secondary, #e4e4e7); padding-left: 1.5rem; position: relative; }
.partner-points li::before { content: "→"; position: absolute; left: 0; color: var(--accent, #c8ff00); }
.partner-points strong { color: var(--text, #fafafa); }
.ch__cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── Pager ───────────────────────────────────────────────────────────────── */
.booklet-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.booklet-pager__count { font-family: var(--mono, monospace); font-size: 0.82rem; color: var(--text-muted, #a1a1aa); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .ch { padding: 1.75rem 1.4rem; min-height: auto; }
  .bstat-row, .funnel-cols { grid-template-columns: 1fr; }
  .sov-bar { grid-template-columns: 110px 1fr 70px; gap: 0.5rem; }
  .rail-dot span { font-size: 0; padding-top: 0; height: 6px; border-radius: 99px; border-top-width: 4px; }
}

/* ── Quad stat row + booklet additions ───────────────────────────────────── */
.bstat-row--quad { grid-template-columns: repeat(4, 1fr); }
.bstat-row--quad .bstat__val { font-size: clamp(1.6rem, 4vw, 2.4rem); }

/* ── Win Rate v1.0 hero (win-rate standard §3) ──────────────────────────────
   The Win Rate tile is a gateway: neutral number, opens a drawer with the
   per-platform breakdown + a jump to the Query Explorer. Only rendered when the
   audit carries win_rate_v1 (new audits); older audits keep the plain tile. */
.bstat--gate { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; display: block; transition: border-color 0.15s ease; }
.bstat--gate:hover, .bstat--gate:focus-visible { border-color: #3f3f46; outline: none; }
.bstat--gate .bstat__val { color: var(--text, #fafafa); }   /* neutral, not green */
.bstat__more { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; font-family: var(--mono, monospace); font-size: 0.72rem; font-weight: 600; color: var(--accent, #c8ff00); }
.bstat__more svg { width: 0.7rem; height: 0.7rem; transition: transform 0.18s ease; }
.bstat--gate[aria-expanded="true"] .bstat__more svg { transform: rotate(180deg); }

.wr-drawer { margin: 1rem 0 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.wr-drawer.is-open { grid-template-rows: 1fr; }
.wr-drawer__inner { overflow: hidden; }
.wr-panel { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 1.25rem 1.35rem; }
.wr-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.wr-panel__title { font-size: 0.92rem; font-weight: 600; color: var(--text, #fafafa); }
.wr-panel__stat { font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--text-muted, #a1a1aa); display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.wr-panel__lead { font-size: 0.8rem; color: var(--text-muted, #a1a1aa); line-height: 1.55; margin: 0.5rem 0 0; max-width: 64ch; }

.wr-spread { margin-top: 1rem; }
.wr-spread__bar { display: flex; height: 0.7rem; border-radius: 999px; overflow: hidden; background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); }
.wr-spread__seg { height: 100%; }
.wr-spread__seg--absent { background: #3f3f46; }
.wr-spread__seg--placed { background: #6b7a2e; }
.wr-spread__seg--won { background: var(--accent, #c8ff00); }
.wr-spread__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--text-muted, #a1a1aa); }
.wr-spread__legend b { color: var(--text, #fafafa); }
.wr-spread__note { color: #6a6a76; }
.wr-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: middle; }
.wr-dot--absent { background: #3f3f46; }
.wr-dot--placed { background: #6b7a2e; }
.wr-dot--won { background: var(--accent, #c8ff00); }

.wr-tbl { margin-top: 1.1rem; }
.wr-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem 4.2rem; align-items: center; gap: 0.75rem; font-size: 0.8rem; padding: 0.32rem 0; }
.wr-row--head { font-family: var(--mono, monospace); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6a6a76; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border, #27272a); margin-bottom: 0.35rem; }
.wr-eng { color: var(--text-secondary, #e4e4e7); font-weight: 500; }
.wr-track { background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 999px; height: 0.5rem; overflow: hidden; }
.wr-fill { display: block; height: 100%; background: var(--accent, #c8ff00); border-radius: 999px; }
.wr-won { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary, #e4e4e7); }
.wr-won b { color: var(--text, #fafafa); font-weight: 700; }
.wr-graded { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text, #fafafa); }
.wr-head-cell { display: flex; align-items: center; gap: 0.25rem; justify-content: flex-end; }
.wr-panel__foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--border, #27272a); }
.wr-link { font-size: 0.82rem; font-weight: 600; color: var(--accent, #c8ff00); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.wr-link:hover { text-decoration: underline; }
.wr-note { font-size: 0.72rem; color: #6a6a76; line-height: 1.5; }
@media (max-width: 520px) {
  .wr-row { grid-template-columns: 4.6rem minmax(0, 1fr) 4.6rem 3.2rem; gap: 0.5rem; font-size: 0.74rem; }
}

/* info tooltip — position:fixed so it escapes the drawer's overflow:hidden and
   every stacking context; placement computed in JS, clamped to the viewport. */
.info { display: inline-flex; }
.info__btn { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #52525b; background: transparent; color: var(--text-muted, #a1a1aa); font-family: var(--font, sans-serif); font-size: 0.62rem; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.info__btn:hover, .info__btn:focus-visible { border-color: var(--accent, #c8ff00); color: var(--accent, #c8ff00); outline: none; }
.info__pop { position: fixed; z-index: 1000; top: 0; left: 0; width: min(20rem, 76vw); background: #1c1c20; border: 1px solid #3f3f46; border-radius: 10px; padding: 0.7rem 0.8rem; font-size: 0.74rem; font-weight: 400; line-height: 1.5; color: var(--text-secondary, #e4e4e7); text-align: left; letter-spacing: 0; text-transform: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); display: none; }
.info__pop.is-shown { display: block; }
.info__pop b { color: var(--text, #fafafa); }

.tldr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.tldr-list li { position: relative; padding-left: 1.6rem; color: var(--text-secondary, #e4e4e7); line-height: 1.55; }
.tldr-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #c8ff00); }
.exec-summary { margin-top: 1.75rem; border-top: 1px solid var(--border, #27272a); padding-top: 1.25rem; }
.exec-summary summary { cursor: pointer; font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent, #c8ff00); }
.exec-summary__body { margin-top: 1rem; color: var(--text-secondary, #e4e4e7); line-height: 1.65; }
.exec-summary__body p { margin: 0 0 0.9rem; }

.gap-list { margin-top: 1.75rem; }
.gap-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border, #27272a); }
.gap-row__domain { color: var(--text-secondary, #e4e4e7); font-size: 0.92rem; }
.gap-row__cites { font-family: var(--mono, monospace); font-size: 0.82rem; color: var(--warning, #f59e0b); }

.plan-preview { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 1.75rem; }
.plan-preview__layer { display: flex; align-items: center; gap: 0.9rem; background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 0.9rem 1rem; }
.plan-preview__title { margin: 0; font-weight: 600; color: var(--text, #fafafa); }
.plan-preview__sub { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--text-muted, #a1a1aa); }

/* ══════════════════════════════════════════════════════════════════════════
   Document layout — shared by the Foundation review + Action plan pages.
   ══════════════════════════════════════════════════════════════════════════ */
.doc { max-width: 880px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.doc--plan { max-width: 940px; }
.doc-hero { padding: 1rem 0 2rem; border-bottom: 1px solid var(--border, #27272a); margin-bottom: 2.5rem; }
.doc-hero__title { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 0.75rem; color: var(--text, #fafafa); }
.doc-hero__sub { color: var(--text-secondary, #e4e4e7); font-size: 1.02rem; margin: 0 0 1.25rem; max-width: 70ch; }
.doc-lead { color: var(--text-secondary, #e4e4e7); font-size: 1.05rem; line-height: 1.6; margin: 1.5rem 0 0; max-width: 70ch; }
.doc-section { margin: 0 0 3rem; }
.doc-section__title { font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.6rem; color: var(--text, #fafafa); }
.doc-section__lead { color: var(--text-secondary, #e4e4e7); line-height: 1.6; margin: 0 0 1.5rem; max-width: 72ch; }
.doc-cta { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 18px; padding: 2rem 2rem 2.25rem; }

.sev-summary { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ── Badges: severity + layer ────────────────────────────────────────────── */
.badge--sev { text-transform: capitalize; font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.03em; }
.badge--sev-critical { background: rgba(239,68,68,0.16); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.badge--sev-high     { background: rgba(245,158,11,0.16); color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); }
.badge--sev-medium   { background: rgba(161,161,170,0.14); color: #d4d4d8; border: 1px solid rgba(161,161,170,0.35); }
.badge--sev-low      { background: rgba(161,161,170,0.08); color: #a1a1aa; border: 1px solid var(--border, #27272a); }
.badge--layer { font-family: var(--mono, monospace); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.badge--layer-l1 { background: rgba(96,165,250,0.16); color: #93c5fd; border: 1px solid rgba(96,165,250,0.4); }
.badge--layer-l2 { background: rgba(167,139,250,0.16); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.4); }
.badge--layer-l3, .badge--layer-l2-l3 { background: rgba(200,255,0,0.14); color: var(--accent, #c8ff00); border: 1px solid rgba(200,255,0,0.4); }

/* Cross-cycle carryover badges: New this cycle vs Carried over from a prior one. */
.badge--new     { font-family: var(--mono, monospace); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; background: rgba(52,211,153,0.16); color: #6ee7b7; border: 1px solid rgba(52,211,153,0.42); }
.badge--carried { font-family: var(--mono, monospace); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; background: rgba(148,163,184,0.14); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.35); }

/* ── Reconciliation panel (what shipped vs still-open since last cycle) ─────── */
.recon { margin: 0 0 1.25rem; background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; overflow: hidden; }
.recon__sum { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; cursor: pointer; list-style: none; }
.recon__sum::-webkit-details-marker { display: none; }
.recon__title { font-weight: 600; color: var(--text, #fafafa); }
.recon__stats { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1 1 auto; }
.recon__stat { font-family: var(--mono, monospace); font-size: 0.72rem; border-radius: 99px; padding: 0.24rem 0.7rem; border: 1px solid var(--border, #27272a); }
.recon__stat--ship { background: rgba(52,211,153,0.14); color: #6ee7b7; border-color: rgba(52,211,153,0.4); }
.recon__stat--open { background: rgba(245,158,11,0.14); color: #fcd34d; border-color: rgba(245,158,11,0.38); }
.recon .fnd-card__chev { margin-left: auto; transition: transform 0.2s ease; }
.recon[open] .fnd-card__chev { transform: rotate(180deg); }
.recon__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 0.25rem 1.1rem 1.1rem; border-top: 1px solid var(--border, #27272a); }
@media (max-width: 640px) { .recon__body { grid-template-columns: 1fr; } }
.recon__h { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary, #e4e4e7); margin: 0.75rem 0 0.4rem; }
.recon__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.recon__list li { font-size: 0.82rem; color: var(--text-secondary, #e4e4e7); line-height: 1.4; }
.recon__list code { font-family: var(--mono, monospace); font-size: 0.76rem; color: var(--accent, #c8ff00); background: rgba(200,255,0,0.08); border-radius: 4px; padding: 0.05rem 0.35rem; }
.recon__note { font-size: 0.72rem; color: var(--text-muted, #a1a1aa); margin: 0.5rem 0 0; font-style: italic; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chip { display: inline-block; font-family: var(--mono, monospace); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--text-muted, #a1a1aa); background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 99px; padding: 0.22rem 0.7rem; margin: 0 0.35rem 0.35rem 0; }
.chip--accent { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.35); }
.chip--owner { color: var(--text-secondary, #e4e4e7); }

/* ── Gauges (foundation quality signals) ─────────────────────────────────── */
.gauge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.gauge { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 1.1rem 1.25rem; }
.gauge__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.gauge__label { font-weight: 600; color: var(--text, #fafafa); font-size: 0.95rem; }
.gauge__val { font-family: var(--mono, monospace); font-weight: 700; font-size: 1.15rem; color: var(--text-muted, #a1a1aa); }
.gauge__val small { font-size: 0.7rem; opacity: 0.6; font-weight: 400; }
.gauge__val.good { color: var(--accent, #c8ff00); } .gauge__val.warn { color: var(--warning, #f59e0b); } .gauge__val.bad { color: var(--danger, #ef4444); }
.gauge__track { height: 8px; background: var(--border, #27272a); border-radius: 99px; overflow: hidden; }
.gauge__fill { display: block; height: 100%; border-radius: 99px; background: var(--text-muted, #a1a1aa); }
.gauge__fill.good { background: var(--accent, #c8ff00); } .gauge__fill.warn { background: var(--warning, #f59e0b); } .gauge__fill.bad { background: var(--danger, #ef4444); }

/* ── Crawler access grid ─────────────────────────────────────────────────── */
.crawler-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.crawler { display: flex; align-items: center; gap: 0.6rem; background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 0.7rem 0.9rem; }
.crawler__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted, #a1a1aa); }
.crawler.good .crawler__dot { background: var(--accent, #c8ff00); }
.crawler.warn .crawler__dot { background: var(--warning, #f59e0b); }
.crawler.bad .crawler__dot { background: var(--danger, #ef4444); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.crawler__name { font-family: var(--mono, monospace); font-size: 0.82rem; color: var(--text, #fafafa); flex: 1; }
.crawler__status { font-size: 0.72rem; color: var(--text-muted, #a1a1aa); white-space: nowrap; }
.crawler.bad .crawler__status { color: #fca5a5; } .crawler.good .crawler__status { color: var(--accent, #c8ff00); }
/* Paths robots.txt closes to crawlers that are otherwise allowed. */
.crawler-paths { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary, #e4e4e7); }
.crawler-paths p { margin: 0; }
.crawler-paths code { font-family: var(--mono, monospace); font-size: 0.78rem; background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 6px; padding: 0.1rem 0.4rem; white-space: nowrap; }
.crawler-paths__note { color: var(--text-muted, #a1a1aa); font-size: 0.8rem; }

/* ── Finding cards (foundation) ──────────────────────────────────────────── */
.fnd-list { display: flex; flex-direction: column; gap: 0.85rem; }
.fnd-card { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 14px; overflow: hidden; }
.fnd-card__toggle { width: 100%; display: flex; align-items: center; gap: 0.85rem; background: none; border: none; cursor: pointer; padding: 1.1rem 1.25rem; text-align: left; font-family: inherit; }
.fnd-card__title { flex: 1; font-weight: 600; color: var(--text, #fafafa); font-size: 1rem; line-height: 1.35; }
.fnd-card__chev { color: var(--text-muted, #a1a1aa); transition: transform 0.2s ease; }
.fnd-card.is-open .fnd-card__chev { transform: rotate(180deg); }
.fnd-card__body { display: none; padding: 0 1.25rem 1.4rem; }
.fnd-card.is-open .fnd-card__body { display: block; }
.fnd-meta { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1rem; }
.fnd-block { margin: 0 0 1rem; }
.fnd-block__h { font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #a1a1aa); margin: 0 0 0.35rem; }
.fnd-block p { margin: 0; color: var(--text-secondary, #e4e4e7); line-height: 1.6; }
.fnd-block--fix { border-left: 3px solid var(--accent, #c8ff00); padding-left: 1rem; background: var(--accent-glow, rgba(200,255,0,0.05)); border-radius: 0 10px 10px 0; padding: 0.9rem 1rem; }
.fnd-scope { font-size: 0.82rem; color: var(--text-muted, #a1a1aa); margin: 0.5rem 0 0; font-style: italic; }

/* ── Inline feedback notes (foundation) ───────────────────────────────────────
   The anchor sits quietly until you approach the element it belongs to. Fully
   visible at rest would turn a document the client is meant to READ into a form;
   invisible until hover would hide it from touch users entirely. So: low-contrast
   at rest, accent on hover/focus, and always visible once it holds a note. ──── */
/* The element itself is the affordance. Hovering it lights the whole component
   and names the action, rather than fading a small chip in at one corner and
   hoping the reader looks there — which is exactly how the first version went
   unnoticed. The accent rail down the left edge is the strongest cue: it reads
   as "this block is selectable" from peripheral vision. */
.fnote-host { position: relative; cursor: pointer; border-radius: 10px;
  transition: background-color 0.12s ease, box-shadow 0.12s ease; }
.fnote-host:hover, .fnote-host:focus-within {
  background: rgba(200,255,0,0.045);
  box-shadow: inset 3px 0 0 var(--accent, #c8ff00), 0 0 0 1px rgba(200,255,0,0.22);
}
/* A component already carrying a note keeps a quiet rail so it stays findable
   in a long chapter without shouting over the ones that don't. */
.fnote-host:has(.fnote-btn.has-note) { box-shadow: inset 3px 0 0 rgba(200,255,0,0.45); }
/* Chapter headers are a title row, not a block — the rail would read as a
   pull-quote. They light their text instead. */
.doc-section__hd.fnote-host { border-radius: 0; }
.doc-section__hd.fnote-host:hover, .doc-section__hd.fnote-host:focus-within {
  background: none; box-shadow: none;
}
.doc-section__hd.fnote-host:hover .doc-section__title { color: var(--accent, #c8ff00); }
/* A hover affordance nobody knows to look for is an affordance nobody uses. The
   review opens on Overview, which has no notable elements at all, so a reader
   can hover the whole first page and conclude the feature doesn't exist. Each
   chapter that DOES carry anchors says so once, in place. */
.doc-section__notehint {
  margin: 0 0 1rem; font-size: 0.84rem; color: var(--text-muted, #a1a1aa);
  padding-left: 0.7rem; border-left: 2px solid rgba(200,255,0,0.35);
}
.doc-section__notehint b { color: var(--text-secondary, #e4e4e7); font-weight: 600; }
.notehint__toggle {
  margin-left: 0.5rem; font: inherit; font-size: 0.78rem; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--text-muted, #a1a1aa);
  text-decoration: underline; text-underline-offset: 2px;
}
.notehint__toggle:hover { color: var(--accent, #c8ff00); }

/* Review mode: anchors at rest, not on hover. This is the default while a
   foundation is open for review — see the note on applyNotesMode(). Hover still
   raises the component; this only decides whether the anchor waits to be found. */
body.fnotes-on .fnote-btn { opacity: 1; visibility: visible; }
body.fnotes-on .fnote-btn::before { content: "✎ "; }
body.fnotes-on .kg-card .fnote-btn::before { content: "✎"; }
/* Quiet at rest so a chapter of them doesn't shout; full accent on approach. */
body.fnotes-on .fnote-host:not(:hover) .fnote-btn { opacity: 0.72; }
body.fnotes-on .fnote-host { box-shadow: inset 2px 0 0 rgba(200,255,0,0.18); }

.fnote-btn {
  position: absolute; top: 0.55rem; right: 0.6rem; z-index: 2;
  font: inherit; font-size: 0.68rem; font-family: var(--mono, monospace);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(200,255,0,0.35); background: var(--bg, #09090b);
  color: var(--accent, #c8ff00);
  /* Hidden until the element is hovered: the graph is a document first, and an
     anchor parked on every persona, competitor and finding turns it into a form.
     `visibility` rather than `display` so the button keeps its box and the
     reserved padding-right below never reflows on hover. */
  opacity: 0; visibility: hidden;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fnote-host:hover .fnote-btn,
.fnote-host:focus-within .fnote-btn,
.fnote-btn:focus-visible { opacity: 1; visibility: visible; }
/* The chip is a label for the whole component's action, so it spells the action
   out. "Note" alone read as a status word, not something you could press. */
.fnote-host:hover .fnote-btn::before,
.fnote-host:focus-within .fnote-btn::before { content: "✎ "; }
.fnote-btn:hover { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.4); }
/* An anchor holding a note is no longer an affordance, it's a record — hiding it
   would lose the reader's own work behind a hover they have no reason to perform. */
.fnote-btn.has-note {
  opacity: 1; visibility: visible; color: var(--accent, #c8ff00);
  border-color: rgba(200,255,0,0.45); background: rgba(200,255,0,0.09);
}
/* Touch has no hover — never hide the affordance behind a gesture that can't happen. */
@media (hover: none) { .fnote-btn { opacity: 1; visibility: visible; } }
/* Keep the anchor clear of content that would otherwise run under it. */
/* Reserved for the anchor, which is now a spelled-out label rather than a
   four-character chip. Sized for "✎ ADD A NOTE" — too little and the heading
   runs under it the moment the element is hovered. */
.fnote-host .kg-row__head { padding-right: 8rem; }
.fnote-host .fnd-card__toggle { padding-right: 8.5rem; }

/* Persona cards sit in a narrow grid column, where reserving room for the full
   label costs more than the label is worth — it wrapped a two-word job title
   onto two lines. They get the mark alone; the component highlight and the
   pointer already carry the "this is clickable" message, and the accessible
   name on the button still reads "Add a note on Operations Director". */
.fnote-host .kg-card__name { padding-right: 2.6rem; }
.kg-card .fnote-btn { font-size: 0; padding: 0.26rem 0.42rem; }
.kg-card .fnote-btn::before,
.fnote-host:hover .kg-card .fnote-btn::before { content: "✎"; font-size: 0.8rem; }
.kg-card .fnote-btn.has-note::before { content: "✎"; }

/* Section-level anchor: inline beside the title, not floating over it. */
.doc-section__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.doc-section__hd .doc-section__title { margin-bottom: 0.5rem; }
.doc-section__hd .fnote-btn { position: static; flex: 0 0 auto; }

/* Composer popover. On <body> and position:fixed so no ancestor overflow clips it. */
.fnote-pop {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--bg-card, #141416); border: 1px solid var(--border-light, #3f3f46);
  border-radius: 12px; padding: 0.85rem; box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.fnote-pop__h { display: flex; align-items: center; gap: 0.6rem; }
.fnote-pop__t { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--text, #fafafa);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnote-pop__x { flex: 0 0 auto; background: none; border: 0; color: var(--text-muted, #a1a1aa);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fnote-pop__x:hover { color: var(--text, #fafafa); }
.fnote-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fnote-chip {
  font: inherit; font-size: 0.72rem; padding: 0.25rem 0.55rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border, #27272a); background: var(--bg, #09090b); color: var(--text-secondary, #e4e4e7);
}
.fnote-chip:hover { border-color: var(--text-muted, #a1a1aa); }
.fnote-chip[aria-pressed="true"] { background: var(--accent, #c8ff00); color: #09090b; border-color: var(--accent, #c8ff00); font-weight: 600; }
.fnote-ta {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 0.88rem;
  background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 8px;
  color: var(--text, #fafafa); padding: 0.55rem 0.65rem;
}
.fnote-ta:focus { outline: none; border-color: var(--accent, #c8ff00); }
.fnote-act { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.fnote-act .booklet-btn { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.fnote-del { background: none; border: 0; color: var(--text-muted, #a1a1aa); font: inherit; font-size: 0.78rem; cursor: pointer; text-decoration: underline; }
.fnote-del:hover { color: #fca5a5; }
.fnote-hint { font-size: 0.75rem; color: var(--text-muted, #a1a1aa); }
.fnote-hint.is-ok { color: var(--accent, #c8ff00); font-weight: 600; }
/* Confirmation that outlives the composer. The general-feedback sheet has no
   anchor to flip to "Noted", so on that path a successful save used to leave the
   reader with no evidence at all that we had it. */
.fnote-toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--fnd-bar-h, 110px) + 18px);
  transform: translate(-50%, 10px);
  max-width: min(440px, calc(100vw - 24px)); padding: 0.7rem 1rem;
  border-radius: 12px; border: 1px solid rgba(200,255,0,0.4);
  background: rgba(18,18,20,0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  color: var(--text-secondary, #e4e4e7); font-size: 0.84rem; line-height: 1.4; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.fnote-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media print { .fnote-toast { display: none !important; } }
/* Character count. Pushed to the far edge and hidden on short notes — it only
   earns its place once a note is long enough for the ceiling to be real. */
.fnote-count { margin-left: auto; font-size: 0.72rem; color: var(--text-muted, #a1a1aa);
  font-variant-numeric: tabular-nums; }
.fnote-count.over { color: #fca5a5; font-weight: 600; }
/* A long paste needs room to breathe; the popover grows with it, up to a point. */
.fnote-pop .fnote-ta { max-height: 45vh; }

/* ── The general-feedback sheet ────────────────────────────────────────────
   General feedback isn't about any one element on the page, and it's where a
   call transcript gets attached. Both make a 340px popover the wrong container,
   so this presentation is a centred modal instead of an anchored bubble. Same
   markup and same save path — only the frame changes. */
.fnote-backdrop {
  position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}
.fnote-pop--sheet {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 860px);
  overflow-y: auto; padding: 1.25rem; gap: 0.9rem;
}
.fnote-pop--sheet .fnote-pop__t { font-size: 1rem; }
.fnote-pop--sheet .fnote-ta { max-height: none; }

.fnote-attach { border-top: 1px solid var(--border, #27272a); padding-top: 0.9rem; }
.fnote-attach__h { font-size: 0.82rem; font-weight: 600; color: var(--text, #fafafa); margin: 0 0 0.15rem; }
.fnote-attach__sub { font-size: 0.78rem; color: var(--text-muted, #a1a1aa); margin: 0 0 0.7rem; line-height: 1.45; }
/* Rides the Transcripts page's .tx-drop so the two upload surfaces stay one
   visual idea; only the padding is tightened to sit inside a dialog. */
.fnote-drop { padding: 18px 16px; }

.fnote-files:not(:empty) { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.fnote-file-row {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem;
  background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 8px;
}
.fnote-file-row__n { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--text-secondary, #e4e4e7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnote-file-row__s { flex: none; font-size: 0.72rem; color: var(--text-muted, #a1a1aa);
  font-variant-numeric: tabular-nums; }
.fnote-file-row__x { flex: none; background: none; border: 0; color: var(--text-muted, #a1a1aa);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fnote-file-row__x:hover { color: #fca5a5; }

@media (max-width: 560px) {
  .fnote-pop--sheet { width: calc(100vw - 20px); max-height: 92vh; padding: 1rem; }
}

/* Compose + send, docked together. The dock is what's positioned; the buttons
   inside it are static, so the two can never drift apart on screen. Sits above
   the approval bar's reserved clearance so it can never cover the
   approve/request-changes actions. */
.fnote-dock {
  position: fixed; left: 18px; bottom: calc(var(--fnd-bar-h, 110px) + 16px); z-index: 40;
  display: flex; align-items: center; gap: 0.5rem;
}
.fnote-dock:empty { display: none; }
.fnote-fab {
  position: static; z-index: auto;
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 0.55rem 0.9rem; border-radius: 99px;
  border: 1px solid var(--border-light, #3f3f46); background: var(--bg-card, #141416);
  color: var(--text-secondary, #e4e4e7); box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
/* Same trap as .fnd-approval: `display: inline-flex` beats `[hidden]`, so
   `fab.hidden = !CAN_NOTE` did nothing and a read-only viewer — the one reader
   the server will refuse — was shown a "Note something else" button. A dead
   control is worse than an absent one, because they press it. */
.fnote-fab[hidden] { display: none; }
.fnote-fab:hover { border-color: var(--accent, #c8ff00); color: var(--text, #fafafa); }
.fnote-review[hidden] { display: none; }
.fnote-review {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 0.55rem 0.9rem; border-radius: 99px; border: 1px solid var(--accent, #c8ff00);
  background: var(--accent, #c8ff00); color: #09090b;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.fnote-review:hover { filter: brightness(1.06); }
.fnote-review__n {
  min-width: 1.15rem; text-align: center; font-family: var(--mono, monospace); font-size: 0.72rem;
  padding: 0.05rem 0.35rem; border-radius: 99px; background: rgba(9,9,11,0.22);
}
.fnote-fab__i { color: var(--accent, #c8ff00); }
.fnote-fab__n:empty { display: none; }
.fnote-fab__n {
  min-width: 1.15rem; text-align: center; font-family: var(--mono, monospace); font-size: 0.72rem;
  padding: 0.05rem 0.35rem; border-radius: 99px; background: var(--accent, #c8ff00); color: #09090b;
}
@media (max-width: 640px) {
  .fnote-fab__l { display: none; }
  .fnote-fab { left: 12px; padding: 0.6rem 0.7rem; }
}
/* The document is the deliverable — feedback chrome has no place in the PDF. */
@media print { .fnote-btn, .fnote-fab, .fnote-pop { display: none !important; } }
.report .fnote-btn, .report .fnote-fab { display: none; }

/* ── "What changed" changelog (foundation revisions) ──────────────────────────
   Shown only on revision 2+. Every change is open by default — this chapter
   exists so a returning reader can verify their feedback landed without
   re-reading the document, and a collapsed list would reintroduce the work it
   removes. Variable-based like the KG cards so it survives the light Report
   view if it's ever included there. ────────────────────────────────────────── */
.chg-summary { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-left: 3px solid var(--accent, #c8ff00); border-radius: 0 12px 12px 0; padding: 1rem 1.2rem; margin: 0 0 1.5rem; max-width: 72ch; }
.chg-summary p:last-child { margin: 0; color: var(--text-secondary, #e4e4e7); line-height: 1.6; }

.chg-req { margin: 0 0 1.75rem; max-width: 72ch; }
.chg-req > summary { cursor: pointer; font-size: 0.86rem; color: var(--text-muted, #a1a1aa); padding: 0.5rem 0; }
.chg-req > summary:hover { color: var(--text, #fafafa); }
.chg-req > p { margin: 0.5rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--border-light, #3f3f46); color: var(--text-secondary, #e4e4e7); font-size: 0.9rem; line-height: 1.6; }

.chg-group { margin: 0 0 1.75rem; }
.chg-group__h { display: flex; align-items: center; gap: 0.55rem; font-size: 0.94rem; font-weight: 600; color: var(--text, #fafafa); margin: 0 0 0.75rem; }
.chg-group__n { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--text-muted, #a1a1aa); border: 1px solid var(--border, #27272a); border-radius: 99px; padding: 0.1rem 0.45rem; font-variant-numeric: tabular-nums; }

.chg-list { display: flex; flex-direction: column; gap: 0.6rem; }
.chg-card { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 1rem 1.2rem; }
.chg-card__head { display: flex; align-items: flex-start; gap: 0.7rem; }
.chg-card__what { margin: 0; flex: 1; color: var(--text, #fafafa); font-size: 0.94rem; line-height: 1.55; }
.chg-card__why { margin: 0.75rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--border-light, #3f3f46); }
.chg-card__why p:last-child { margin: 0; color: var(--text-secondary, #e4e4e7); font-size: 0.88rem; line-height: 1.6; }

/* Action badges. Colour carries the same meaning as everywhere else in the
   portal: accent = we added something, red = we took something away. */
.chg-badge { flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 99px; border: 1px solid var(--border, #27272a); color: var(--text-muted, #a1a1aa); white-space: nowrap; margin-top: 0.1rem; }
.chg-badge--add { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.35); background: rgba(200,255,0,0.07); }
.chg-badge--remove { color: #fca5a5; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); }
.chg-badge--update { color: #d4d4d8; border-color: rgba(161,161,170,0.35); background: rgba(161,161,170,0.1); }
.chg-badge--open { color: #fcd34d; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.12); }

@media (max-width: 640px) {
  .chg-card__head { flex-direction: column; gap: 0.5rem; }
}

/* ── Knowledge-graph taxonomy (foundation: personas, competitors, features, pain points) ──
   Variable-based so the same markup renders in the dark scroll view and the light
   Report view (which redefines --bg/--text/etc. on .report). ─────────────────────────── */
.kg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.85rem; }
.kg-card { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 1.1rem 1.2rem; }
.kg-card__name { font-weight: 700; color: var(--text, #fafafa); font-size: 1rem; margin: 0; line-height: 1.3; }
.kg-card__role { color: var(--text-muted, #a1a1aa); font-size: 0.85rem; margin: 0.2rem 0 0.8rem; }
.kg-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kg-list { display: flex; flex-direction: column; gap: 0.6rem; }
.kg-row { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 1rem 1.2rem; }
.kg-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.85rem; }
.kg-row__name { font-weight: 600; color: var(--text, #fafafa); font-size: 0.98rem; line-height: 1.35; }
.kg-row__body { color: var(--text-secondary, #e4e4e7); font-size: 0.9rem; line-height: 1.6; margin: 0.5rem 0 0; }
/* Why a capability ranks where it does. Only drawn where the ranking is genuinely
   counterintuitive — a weak or absent capability outranking a stronger one — because
   priority is demand x a multiplier that favours the gaps, and without the reason on
   the row that reads as a mistake. */
.kg-why { color: var(--text-muted, #a1a1aa); font-size: 0.82rem; line-height: 1.55;
  margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; border-radius: 8px;
  background: rgba(200,255,0,0.05); border: 1px solid rgba(200,255,0,0.16); }
.kg-why b { color: var(--accent, #c8ff00); font-weight: 600; }

/* Our plain-English restatement, not something a buyer said. Previously drawn as
   .kg-quote — italic, in quotation marks, with no attribution — which made our own
   writing indistinguishable from cited speech. Quotation marks now mean somebody
   actually said it, and every one of those carries a name, an account, a timestamp
   and a link to the recording. */
.kg-gloss { color: var(--text-secondary, #e4e4e7); font-size: 0.9rem; line-height: 1.55;
  margin: 0.55rem 0 0; }

.kg-quote { color: var(--text-secondary, #e4e4e7); font-style: italic; font-size: 0.9rem; line-height: 1.55; margin: 0.55rem 0 0; padding-left: 0.85rem; border-left: 2px solid var(--border-light, #3f3f46); }
.kg-tier, .kg-strength { flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 99px; border: 1px solid var(--border, #27272a); color: var(--text-muted, #a1a1aa); white-space: nowrap; }
.kg-tier--primary { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.35); }
.kg-strength--good { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.35); }
.kg-strength--warn { color: var(--warning, #f59e0b); border-color: rgba(245,158,11,0.35); }
.kg-strength--bad { color: var(--danger, #ef4444); border-color: rgba(239,68,68,0.35); }
.kg-meta { font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--text-muted, #a1a1aa); margin: 0.85rem 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Action plan
   ══════════════════════════════════════════════════════════════════════════ */
.plan-progress { margin: 1.75rem 0 0; }
.plan-progress__bar { height: 10px; background: var(--border, #27272a); border-radius: 99px; overflow: hidden; }
.plan-progress__bar span { display: block; height: 100%; background: var(--accent, #c8ff00); border-radius: 99px; transition: width 0.3s ease; }
.plan-progress__label { font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--text-muted, #a1a1aa); margin: 0.5rem 0 0; }

.layer-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin-top: 1.75rem; }
.layer-legend__item { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 0.85rem 1rem; }
.layer-legend__item p { margin: 0; font-weight: 600; color: var(--text, #fafafa); font-size: 0.9rem; }
.layer-legend__item span:last-child { font-size: 0.78rem; color: var(--text-muted, #a1a1aa); }

.plan-toolbar { position: sticky; top: var(--rl-topnav-h, 64px); z-index: 5; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding: 1rem 0; margin-bottom: 1.25rem; background: var(--bg, #09090b); border-bottom: 1px solid var(--border, #27272a); }
.filter-group { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.filter-chip { font-family: var(--mono, monospace); font-size: 0.74rem; color: var(--text-muted, #a1a1aa); background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 99px; padding: 0.35rem 0.8rem; cursor: pointer; transition: all 0.15s ease; }
.filter-chip:hover { color: var(--text, #fafafa); border-color: var(--border-light, #3f3f46); }
.filter-chip.is-active { background: var(--accent, #c8ff00); color: #09090b; border-color: var(--accent, #c8ff00); font-weight: 600; }
/* Query explorer: per-persona counts in the group headings, plus the count badge
   in the left-floating persona filter (reuses the foundation review's .chapter-toc
   slide-out and .toc-item styles, so the filter is ever-present on the left). */
.qx-pgroup__count { font-family: var(--mono, monospace); font-size: 0.85em; opacity: 0.6; margin-left: 0.15em; }
.qx-pgroup__sub { margin: -0.4rem 0 1rem; font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-muted, #a1a1aa); }
.qx-toc-count { flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.74rem; color: var(--text-muted, #a1a1aa); }
.toc-item.is-active .qx-toc-count { color: var(--accent, #c8ff00); }
.plan-hidedone { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted, #a1a1aa); cursor: pointer; margin-left: auto; }

.plan-list2 { display: flex; flex-direction: column; gap: 0.6rem; }
.plan-item2 { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; overflow: hidden; transition: border-color 0.15s ease, opacity 0.15s ease; }
.plan-item2.is-done { opacity: 0.55; }
.plan-item2__head { display: flex; align-items: center; }
.plan-item2__rank { flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.8rem; font-weight: 700; color: var(--text-muted, #a1a1aa); width: 2.2rem; text-align: center; }
.plan-item2__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.85rem; background: none; border: none; cursor: pointer; padding: 0.95rem 1.1rem 0.95rem 0.4rem; text-align: left; font-family: inherit; }
.plan-item2__title { flex: 1; min-width: 0; font-weight: 600; color: var(--text, #fafafa); font-size: 0.95rem; line-height: 1.35; }
.plan-item2.is-done .plan-item2__title { text-decoration: line-through; color: var(--text-muted, #a1a1aa); }
.plan-item2__tags { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex: 0 0 auto; }
.plan-item2__tags .chip, .plan-item2__tags .badge { margin: 0; }
.plan-item2__sub { font-size: 0.72rem; color: var(--text-muted, #a1a1aa); }
.plan-item2__body { display: none; padding: 0.25rem 1.4rem 1.5rem 3.2rem; border-top: 1px solid var(--border, #27272a); }
.plan-item2.is-open .plan-item2__body { display: block; }
.plan-item2.is-open .fnd-card__chev, .plan-item2.is-open .plan-item2__toggle .fnd-card__chev { transform: rotate(180deg); }
.plan-check { flex: 0 0 auto; display: inline-flex; align-items: center; padding-left: 0.9rem; cursor: pointer; }
.plan-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-check span { width: 20px; height: 20px; border: 2px solid var(--border-light, #3f3f46); border-radius: 6px; display: inline-block; position: relative; transition: all 0.15s ease; }
.plan-check input:checked + span { background: var(--accent, #c8ff00); border-color: var(--accent, #c8ff00); }
.plan-check input:checked + span::after { content: "✓"; position: absolute; inset: 0; color: #09090b; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.brief-block { margin: 0 0 1.3rem; }
.brief-block__h { font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #c8ff00); margin: 0 0 0.5rem; }
.brief-block__sub { font-weight: 600; color: var(--text, #fafafa); font-size: 0.85rem; margin: 0.75rem 0 0.35rem; }
.brief-block p { margin: 0 0 0.5rem; color: var(--text-secondary, #e4e4e7); line-height: 1.6; }
.brief-list { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; }
.brief-list li { color: var(--text-secondary, #e4e4e7); line-height: 1.55; margin-bottom: 0.4rem; }
.brief-list--check { list-style: none; padding-left: 0; }
.brief-list--check li { position: relative; padding-left: 1.5rem; }
.brief-list--check li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 11px; height: 11px; border: 2px solid var(--border-light, #3f3f46); border-radius: 4px; }
/* Copy-for-Claude + Expand all / Collapse all toggles above an item's brief */
.brief-allbar { display: flex; justify-content: flex-end; gap: 0.4rem; margin: 0 0 0.6rem; }
.brief-toggleall { appearance: none; background: transparent; border: 1px solid var(--border, #27272a); border-radius: 6px; color: var(--text-muted, #a1a1aa); font: inherit; font-size: 0.72rem; padding: 0.25rem 0.6rem; cursor: pointer; transition: color 0.12s, border-color 0.12s; }
.brief-toggleall:hover { color: var(--text, #fafafa); border-color: var(--text-muted, #a1a1aa); }
/* Copy-icon button sits left of Expand all. Icon-only for an elegant, quiet
   affordance; tints to the accent on hover and flips to a filled confirmed
   state for ~1.6s after a copy. */
.brief-copy { position: relative; margin-right: auto; appearance: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border, #27272a); border-radius: 6px; color: var(--text-muted, #a1a1aa); padding: 0.3rem; line-height: 0; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.brief-copy svg { display: block; }
.brief-copy:hover { color: var(--accent, #c8ff00); border-color: var(--accent, #c8ff00); }
.brief-copy.is-copied { background: var(--accent, #c8ff00); color: #09090b; border-color: var(--accent, #c8ff00); }
/* Hover/focus tooltip, label taken from data-tip — clearer than a native title,
   and instant. Sits below the icon (body content flows below, so it's never
   clipped by the row above) with a small upward-pointing arrow. */
.brief-copy::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 0; white-space: nowrap; background: #18181b; color: var(--text, #fafafa); border: 1px solid var(--border, #27272a); border-radius: 6px; padding: 0.32rem 0.5rem; font-size: 0.7rem; line-height: 1.1; font-weight: 500; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 30; }
.brief-copy::before { content: ""; position: absolute; top: calc(100% + 3px); left: 0.7rem; border: 5px solid transparent; border-bottom-color: #18181b; opacity: 0; transition: opacity 0.12s ease; z-index: 31; }
.brief-copy:hover::after, .brief-copy:focus-visible::after { opacity: 1; transform: translateY(0); }
.brief-copy:hover::before, .brief-copy:focus-visible::before { opacity: 1; }
.brief-copy.is-copied::after, .brief-copy.is-copied::before { opacity: 0; }

/* Every brief section is a collapsible accordion (focus on one at a time) */
.brief-fold { margin: 0 0 0.6rem; border: 1px solid var(--border, #27272a); border-radius: 8px; overflow: hidden; }
.brief-fold__h { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #c8ff00); padding: 0.6rem 0.85rem; }
.brief-fold__h::-webkit-details-marker { display: none; }
.brief-fold__h::before { content: "\25B8"; color: var(--text-muted, #a1a1aa); font-size: 0.75rem; transition: transform 0.15s; }
.brief-fold[open] .brief-fold__h::before { transform: rotate(90deg); }
.brief-fold[open] > .brief-fold__h { border-bottom: 1px solid var(--border, #27272a); }
.brief-fold__h:hover { color: var(--text, #fafafa); background: rgba(255,255,255,0.02); }
.brief-fold__body { padding: 0.7rem 0.85rem 0.75rem; }
.brief-fold__body > :first-child { margin-top: 0; }
.brief-fold__body .brief-list { margin-top: 0; }
.brief-fold__body p { margin: 0 0 0.5rem; color: var(--text-secondary, #e4e4e7); line-height: 1.6; }
.brief-fold__body p:last-child { margin-bottom: 0; }

.plan-empty { text-align: center; color: var(--text-muted, #a1a1aa); padding: 3rem 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Full visibility report (scrolling document + section nav + segment viz)
   ══════════════════════════════════════════════════════════════════════════ */
.doc--report { max-width: 900px; padding-top: 1rem; }
/* Sticks directly below the always-present brand topnav so the section nav is
   ever-present while scrolling the long document (topnav z-index 100 sits above). */
.report-nav { position: sticky; top: var(--rl-topnav-h, 64px); z-index: 20; background: rgba(9,9,11,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border, #27272a); }
.report-nav__inner { max-width: 900px; margin: 0 auto; display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.5rem 1.5rem; }
.report-nav a { font-family: var(--mono, monospace); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--text-muted, #a1a1aa); text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 99px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.report-nav a:hover { color: var(--text, #fafafa); }
.report-nav a.is-active { color: #09090b; background: var(--accent, #c8ff00); font-weight: 600; }

.rsec { padding: 2.5rem 0; border-top: 1px solid var(--border, #27272a); scroll-margin-top: calc(var(--rl-topnav-h, 64px) + 52px); }
.rsec__title { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--text, #fafafa); }
.rsec__synthesis { color: var(--text-secondary, #e4e4e7); line-height: 1.65; margin: 0 0 1.5rem; max-width: 72ch; }
.rsec__subhead { font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #c8ff00); margin: 2rem 0 0.85rem; }
.rsec__note { font-size: 0.85rem; margin: 0.85rem 0 0; }
.rsec--partner { border-top: 1px solid var(--border, #27272a); }
#summary { scroll-margin-top: calc(var(--rl-topnav-h, 64px) + 52px); }

/* segment breakdown: name | visibility bar | % | counts/win */
.segtable { display: flex; flex-direction: column; gap: 0.4rem; }
.segtable__row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(60px, 2fr) 48px auto; align-items: center; gap: 0.7rem; padding: 0.35rem 0; }
.segtable__row.is-hi { background: var(--accent-glow, rgba(200,255,0,0.04)); border-radius: 8px; padding: 0.35rem 0.5rem; }
.segtable__name { font-size: 0.88rem; color: var(--text-secondary, #e4e4e7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-dot { color: var(--accent, #c8ff00); font-size: 0.6rem; vertical-align: middle; }
.segtable__track { height: 9px; background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 99px; overflow: hidden; }
.segtable__fill { display: block; height: 100%; background: #52525b; }
.segtable__fill.good { background: var(--accent, #c8ff00); } .segtable__fill.warn { background: var(--warning, #f59e0b); } .segtable__fill.bad { background: var(--danger, #ef4444); }
.segtable__vis { font-family: var(--mono, monospace); font-size: 0.8rem; text-align: right; }
.segtable__vis.good { color: var(--accent, #c8ff00); } .segtable__vis.warn { color: var(--warning, #f59e0b); } .segtable__vis.bad { color: var(--danger, #ef4444); }
.segtable__meta { display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; font-family: var(--mono, monospace); font-size: 0.72rem; color: var(--text-muted, #a1a1aa); }
.segtable__win.good { color: var(--accent, #c8ff00); } .segtable__win.warn { color: var(--warning, #f59e0b); }
/* low-sample segment hit rate: dimmed + dashed underline so it reads as "uncertain" */
.segtable__win.is-lown { color: #6a6a76; text-decoration: underline dotted #52525b; text-underline-offset: 2px; cursor: help; }

/* head-to-head cards */
.h2h-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; }
.h2h-card { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 0.9rem 1rem; }
.h2h-card.is-win { border-left: 3px solid var(--accent, #c8ff00); }
.h2h-card.is-loss { border-left: 3px solid var(--danger, #ef4444); }
.h2h-card__vs { display: block; font-size: 0.82rem; color: var(--text-muted, #a1a1aa); }
.h2h-card__rec { display: block; font-family: var(--mono, monospace); font-weight: 700; font-size: 1.15rem; color: var(--text, #fafafa); margin: 0.2rem 0; }
.h2h-card__co { font-size: 0.72rem; color: var(--text-muted, #a1a1aa); }

.chip-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* TLDR insight cards — "Three things to know" */
.tldr-cards { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.7rem; }
.tldr-cards__label { font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #c8ff00); margin: 0 0 0.25rem; }
.tldr-card { display: flex; gap: 0.9rem; background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 14px; padding: 1.1rem 1.2rem; }
.tldr-card__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; background: var(--accent-dim, rgba(200,255,0,0.12)); color: var(--accent, #c8ff00); }
.tldr-card__icon--structural { background: rgba(239,68,68,0.12); color: var(--danger, #ef4444); }
.tldr-card__icon--opportunity { background: rgba(245,158,11,0.12); color: var(--warning, #f59e0b); }
.tldr-card__main { min-width: 0; }
.tldr-card__headline { font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--text, #fafafa); margin: 0 0 0.45rem; }
.tldr-card__text { color: var(--text-secondary, #e4e4e7); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.tldr-card__tag { display: inline-block; margin-top: 0.7rem; font-family: var(--mono, monospace); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--text-muted, #a1a1aa); background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 99px; padding: 0.22rem 0.7rem; }
.tldr-card__tag--impact { color: var(--danger, #ef4444); border-color: rgba(239,68,68,0.35); }
.tldr-card__tag--l1 { color: var(--warning, #f59e0b); border-color: rgba(245,158,11,0.35); }
.tldr-card__tag--content { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.35); }

/* Section TLDR lead + deep-dive prose */
.rsec__lead { color: var(--text, #fafafa); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.25rem; max-width: 72ch; font-weight: 500; }
.deepdive { margin: 1.25rem 0 0; }
.deepdive__p { color: var(--text-secondary, #e4e4e7); line-height: 1.7; margin: 0 0 0.9rem; max-width: 72ch; }
.deepdive__p:last-child { margin-bottom: 0; }

/* Most-cited domains: reveal-the-rest toggle */
.cit-more { margin-top: 0.5rem; }
.cit-more > summary { cursor: pointer; font-family: var(--mono, monospace); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--accent, #c8ff00); list-style: none; padding: 0.3rem 0; }
.cit-more > summary::-webkit-details-marker { display: none; }
.cit-more > summary::before { content: "▸ "; }
.cit-more[open] > summary::before { content: "▾ "; }
.cit-more[open] > summary { margin-bottom: 0.6rem; }

/* NIO strategic plays */
.nio-section { padding: 2.5rem 0 1rem; }
.nio-list { display: flex; flex-direction: column; gap: 0.85rem; }
.nio-card { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 14px; overflow: hidden; }
.nio-card__toggle { gap: 0.7rem; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.pa-card { background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 0.8rem 0.9rem; }
.pa-card--high { border-color: rgba(200,255,0,0.35); }
.pa-card--medium { border-color: rgba(245,158,11,0.3); }
.pa-card__plat { font-weight: 700; color: var(--text, #fafafa); font-size: 0.9rem; }
.pa-card__rec { font-family: var(--mono, monospace); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #a1a1aa); margin-left: 0.5rem; }
.pa-card--high .pa-card__rec { color: var(--accent, #c8ff00); }
.pa-card__ev { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--text-secondary, #e4e4e7); line-height: 1.5; }

@media (max-width: 680px) {
  .segtable__row { grid-template-columns: minmax(90px, 1.2fr) 1fr 42px; }
  .segtable__meta { display: none; }
}

/* Simple plan rows (delivered shape: priority / title / impact, no brief) */
.plan-item2--simple .plan-item2__head { padding-right: 1.1rem; }
.plan-item2__simplebody { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 0.95rem 0; flex-wrap: wrap; }
.plan-item2--simple .plan-item2__title { font-size: 0.98rem; }
.plan-item2--simple.is-done .plan-item2__title { text-decoration: line-through; color: var(--text-muted, #a1a1aa); }

@media (max-width: 680px) {
  .bstat-row--quad { grid-template-columns: repeat(2, 1fr); }
  .gauge-grid, .layer-legend { grid-template-columns: 1fr; }
  .plan-item2__toggle { flex-wrap: wrap; }
  .plan-item2__body { padding-left: 1.4rem; }
  .plan-toolbar { position: static; }
  /* Query Explorer: stack the query text above its tag row. The meta row is
     flex:none, so on one line its tags (~600px) push each query past the screen.
     Stacking + stretch lets the tags wrap to the full width instead. */
  .qx-q__sum { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REPORT VIEW — light "boardroom" presentation of the SAME report data.
   Toggled on screen (mode-report) and is what "Download PDF" exports. Contains
   every datum the scroll view shows; only the presentation differs (paginated,
   headline-first, guided). Light theme is scoped to .report so the existing
   dark data-viz components (.bstat, .segtable, .sov-chart, .bk-bar, .h2h-card…)
   recolor automatically via CSS-variable overrides, with a few tone overrides
   for legibility on white.
   ══════════════════════════════════════════════════════════════════════════ */
.report { display: none; }
.booklet-body.mode-report { background: #52525b; }
.booklet-body.mode-report .report { display: block; }
.booklet-body.mode-report #doc,
.booklet-body.mode-report #report-nav { display: none !important; }

.report {
  --bg: #ffffff;            --bg-secondary: #f4f4f5;  --bg-card: #ffffff;
  --bg-card-hover: #fafafa; --text: #18181b;          --text-secondary: #3f3f46;
  --text-muted: #71717a;    --border: #e4e4e7;        --border-light: #d4d4d8;
  --accent: #c8ff00;        --accent-dim: rgba(63,98,18,0.10); --accent-glow: rgba(63,98,18,0.05);
  --good: #3f6212;          --warning: #b45309;       --danger: #b91c1c;
  max-width: 850px; margin: 1.75rem auto 4rem; padding: 0 1rem;
  color: var(--text); font-family: var(--font, "Instrument Sans", sans-serif);
}

/* tone overrides so green/amber/red read on white (dark theme uses lime for .good) */
.report .bstat.good .bstat__val,
.report .bk-bar__val.good, .report .segtable__vis.good, .report .segtable__win.good,
.report .gauge__val.good, .report .sov-bar.is-focal .sov-bar__num { color: var(--good); }
.report .bk-bar__fill.good, .report .segtable__fill.good, .report .gauge__fill.good { background: var(--good); }
.report .sov-bar__fill { background: #a1a1aa; }
.report .sov-bar.is-focal .sov-bar__fill { background: var(--accent); }
.report .sov-bar.is-focal .sov-bar__name { color: var(--good); }
.report .bk-bar__fill { background: #a1a1aa; }

/* Foundation components: recolor crawler status + severity badges for white */
.report .crawler.bad .crawler__status { color: var(--danger); }
.report .crawler.good .crawler__status { color: var(--good); }
.report .badge--sev-critical { background: rgba(185,28,28,0.10); color: #b91c1c; border-color: rgba(185,28,28,0.35); }
.report .badge--sev-high { background: rgba(180,83,9,0.10); color: #b45309; border-color: rgba(180,83,9,0.35); }
.report .badge--sev-medium { background: #f4f4f5; color: #52525b; border-color: #d4d4d8; }
.report .badge--sev-low { background: #f4f4f5; color: #71717a; border-color: #e4e4e7; }
.report .chip--accent { color: var(--good); border-color: rgba(63,98,18,0.35); }
.report .kg-tier--primary, .report .kg-strength--good { color: var(--good); border-color: rgba(63,98,18,0.35); }

/* Rich narrative in report (light) mode */
.report .tldr-cards__label { color: #52525b; }
.report .tldr-card { background: #fafafa; border-color: #e4e4e7; }
.report .tldr-card__headline { color: #18181b; }
.report .tldr-card__text { color: #3f3f46; }
.report .tldr-card__tag { background: #fff; border-color: #d4d4d8; color: #71717a; }
.report .tldr-card__tag--impact { color: #b91c1c; border-color: rgba(185,28,28,0.35); }
.report .tldr-card__tag--l1 { color: #b45309; border-color: rgba(180,83,9,0.35); }
.report .tldr-card__tag--content { color: var(--good); border-color: rgba(63,98,18,0.35); }
.report .tldr-card__icon--gap { background: rgba(63,98,18,0.10); color: var(--good); }
.report .deepdive__p { color: #3f3f46; line-height: 1.7; max-width: 68ch; }

/* Report findings — always-expanded (no toggle) finding blocks */
.rpt-finding { padding: 1.4rem 0; border-top: 1px solid #eaeaeb; }
.rpt-finding:first-of-type { border-top: none; padding-top: 0.5rem; }
.rpt-finding__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.rpt-finding__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: #18181b; line-height: 1.3; }

/* ── Page sheet ──────────────────────────────────────────────────────────── */
.rpt-page {
  position: relative; background: #fff; border: 1px solid #e4e4e7; border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35); padding: 3rem 3.25rem 3.5rem; margin: 0 0 1.5rem;
}
.rpt-page__head, .rpt-page__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono, monospace); font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #a1a1aa;
}
.rpt-page__head { border-bottom: 1px solid #f0f0f1; padding-bottom: 0.75rem; margin-bottom: 1.75rem; }
.rpt-page__foot { border-top: 1px solid #f0f0f1; padding-top: 0.75rem; margin-top: 2.5rem; }
.rpt-page__foot .rpt-mark { display: inline-flex; align-items: center; gap: 0.4rem; }
.rpt-page__foot .rpt-mark::before { content: ""; width: 14px; height: 3px; background: var(--accent); border-radius: 2px; }

.rpt-eyebrow {
  font-family: var(--mono, monospace); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #71717a; margin: 0 0 0.75rem;
}
.rpt-eyebrow b { color: var(--good); font-weight: 700; }
.rpt-h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 1rem; color: #18181b; }
.rpt-lede { font-size: 1.45rem; line-height: 1.25; max-width: 32ch; }
.rpt-subhead { font-family: var(--mono, monospace); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #52525b; margin: 2rem 0 0.85rem; padding-bottom: 0.4rem; border-bottom: 1px solid #eaeaeb; }
.rpt-prose p { color: #3f3f46; line-height: 1.7; margin: 0 0 0.9rem; max-width: 68ch; }
.rpt-note { font-size: 0.82rem; color: #71717a; margin: 0.85rem 0 0; }

.rpt-tldr { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.rpt-tldr li { position: relative; padding-left: 1.5rem; color: #27272a; line-height: 1.55; }
.rpt-tldr li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }

.rpt-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.75rem 0; }
@media (max-width: 680px) { .rpt-quad { grid-template-columns: repeat(2, 1fr); } }

.rpt-takeaway {
  margin: 1.75rem 0 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--accent);
  background: #f7fbe8; border-radius: 0 8px 8px 0;
}
.rpt-takeaway__tag { display: block; font-family: var(--mono, monospace); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); margin-bottom: 0.4rem; font-weight: 700; }
.rpt-takeaway p { margin: 0; color: #27272a; line-height: 1.6; }

/* ── Cover ───────────────────────────────────────────────────────────────── */
.rpt-cover { display: flex; flex-direction: column; min-height: 70vh; }
.rpt-cover__logo { filter: invert(1) brightness(0.1); width: 190px; height: auto; margin-bottom: auto; }
.rpt-cover .rpt-eyebrow { margin-top: 2.5rem; }
.rpt-cover__title { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 2rem; color: #09090b; max-width: 18ch; }
.rpt-cover__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2.5rem; border-top: 2px solid #18181b; padding-top: 1.5rem; max-width: 560px; }
.rpt-cover__meta > div { display: flex; flex-direction: column; gap: 0.2rem; }
.rpt-cover__meta span { font-family: var(--mono, monospace); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #71717a; }
.rpt-cover__meta strong { font-size: 1rem; color: #18181b; font-weight: 600; }

.rpt-cta { margin-top: 2rem; padding: 1.75rem 2rem; background: #09090b; border-radius: 10px; }
.rpt-cta h3 { margin: 0 0 0.5rem; color: #fafafa; font-size: 1.3rem; }
.rpt-cta p { margin: 0 0 1.25rem; color: #d4d4d8; line-height: 1.6; }
.rpt-cta__btn { display: inline-block; background: var(--accent); color: #09090b; font-weight: 600; text-decoration: none; padding: 0.75rem 1.4rem; border-radius: 8px; }

/* ── On-screen view toggle (segmented) ───────────────────────────────────── */
.view-toggle { display: inline-flex; background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 2px; }
.view-toggle__btn { font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-muted, #a1a1aa); background: none; border: none; cursor: pointer; padding: 0.45rem 0.9rem; border-radius: 8px; transition: color 0.15s, background 0.15s; }
.view-toggle__btn.is-active { background: var(--accent, #c8ff00); color: #09090b; }

.rl-show-sm { display: none; }

@media (max-width: 680px) {
  .rpt-page { padding: 1.75rem 1.4rem 2rem; }
  .rpt-cover__meta { grid-template-columns: 1fr; }
  /* Topnav must stay one row (its height drives the sticky-nav offset) */
  .booklet-topnav .site-nav__inner { gap: 0.4rem; flex-wrap: nowrap; }
  .booklet-topnav .site-nav__logo img { width: 92px; height: auto; }
  .booklet-topnav__right { gap: 0.35rem; }
  .booklet-topnav .booklet-btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
  .view-toggle { padding: 2px; }
  .view-toggle__btn { padding: 0.38rem 0.58rem; font-size: 0.75rem; }
  .rl-hide-sm { display: none; }
  .rl-show-sm { display: inline; }
}

/* ── Print → clean PDF booklet (one chapter per page) ────────────────────── */
@media print {
  @page { margin: 14mm; }
  .booklet-topnav, .progress-rail, .booklet-pager, .booklet-btn, #download { display: none !important; }
  .booklet { max-width: none; padding: 0; }
  .ch-slide { display: block !important; page-break-after: always; }
  .ch-slide:last-child { page-break-after: auto; }
  .ch { min-height: auto; border-radius: 0; border: none; padding: 0 0 1.5rem; page-break-inside: avoid; }
  .ch__takeaway, .bstat, .funnel-col, .gate2, .sov-bar__track { page-break-inside: avoid; }
  body, .ch, .bstat, .funnel-col {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* NOTHING INTERACTIVE PRINTS.
     This document gets downloaded and sent to the client, so anything that is
     a control in the browser is furniture on paper. The approval gate was the
     one that got out: it is `position: fixed`, which a printing engine repeats
     on EVERY sheet, so a 27-page foundation review carried a black rounded
     slab on all 27 — with "Feedback / Looks right" legible on page one. It
     survived `.booklet-btn { display: none }` because its buttons are
     `.fnd-icon`, and it survived the report view's `#doc { display: none }`
     because it lives in `.status-rail`, a SIBLING of #doc.
     Hidden by container as well as by control, so a new button added inside
     any of these is covered without anyone remembering this rule exists. */
  .status-rail, .fnd-approval, #approval-bar,
  .chapter-toc, .chapter-nav, .rl-secbar,
  .fnote-dock, .fnote-fab, .fnote-review, .paygate, .paygate-host { display: none !important; }

  /* Foundation + Action plan documents */
  .booklet-topnav, .plan-toolbar, .plan-check, .plan-progress, .plan-hidedone { display: none !important; }
  .doc { max-width: none; padding: 0; }
  .doc-section, .fnd-card, .plan-item2, .gauge, .crawler, .layer-legend__item { page-break-inside: avoid; }
  .fnd-card__body, .plan-item2__body { display: block !important; }
  .fnd-card__chev, .plan-item2__toggle .fnd-card__chev { display: none; }
  .plan-item2__body { padding-left: 1.4rem; }
  .doc-cta { display: none; }
  .fnd-card, .plan-item2, .gauge, .crawler, .doc-cta, .badge, .chip {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Report view → the downloadable boardroom PDF (one section per sheet) */
  .booklet-body.mode-report { background: #fff; }
  .booklet-body.mode-report .booklet-topnav,
  .booklet-body.mode-report #report-nav,
  .booklet-body.mode-report #doc,
  .booklet-body.mode-report .view-toggle { display: none !important; }
  .report { max-width: none; margin: 0; padding: 0; display: block; }
  .rpt-page { box-shadow: none; border: none; border-radius: 0; margin: 0; padding: 0; page-break-after: always; }
  .rpt-page:last-child { page-break-after: auto; }
  .rpt-cover { min-height: auto; }
  .rpt-page, .bstat, .funnel-col, .h2h-card, .sov-bar__track, .segtable__row, .rpt-takeaway, .gauge, .rpt-finding, .crawler { page-break-inside: avoid; }
  .report, .rpt-page, .rpt-cta, .bstat, .sov-bar__fill, .segtable__fill, .bk-bar__fill,
  .h2h-card, .rpt-takeaway, .chip, .badge, .rpt-tldr li::before {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE STORY — a comic-book interpretation of the audit. The hero is "The
   Signal" (Resonate's sound-wave mark); the villain is Static / Silence
   (invisibility). Bold graphic-novel language: thick panels, halftone, action
   bursts, speech balloons + narration captions, and a GEO lesson per panel.
   ══════════════════════════════════════════════════════════════════════════ */
.comic { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; display: flex; flex-direction: column; gap: 2.25rem; }

/* Cover */
.comic-cover { text-align: center; padding: 1rem 0 0.5rem; }
.comic-cover__kicker { font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, #c8ff00); margin: 0 0 0.75rem; }
.comic-cover__title { font-size: clamp(2.4rem, 8vw, 4.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; margin: 0; color: var(--text, #fafafa); text-transform: uppercase; text-shadow: 4px 4px 0 rgba(200,255,0,0.25); }
.comic-cover__issue { display: inline-block; margin: 1.1rem 0 0; font-family: var(--mono, monospace); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-secondary, #e4e4e7); border: 1px solid var(--border-light, #3f3f46); border-radius: 99px; padding: 0.4rem 1rem; }
.comic-cover__sub { color: var(--text-muted, #a1a1aa); margin: 1.25rem auto 0; max-width: 52ch; line-height: 1.6; }

/* Panel frame — thick border + hard offset shadow = classic comic pop */
.cpanel { position: relative; border: 3px solid var(--text, #fafafa); border-radius: 5px; background: var(--bg-card, #141416); box-shadow: 7px 7px 0 rgba(0,0,0,0.55); overflow: hidden; }
.cpanel__scene { position: relative; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2.75rem 2rem 2rem; isolation: isolate; }
/* halftone wash */
.cpanel__scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--cdot, rgba(200,255,0,0.16)) 1.4px, transparent 1.6px); background-size: 11px 11px; opacity: 0.6; }
.cpanel--danger  { --cdot: rgba(239,68,68,0.18); }
.cpanel--danger  .cpanel__scene { background: radial-gradient(120% 90% at 50% 30%, rgba(239,68,68,0.12), transparent 70%); }
.cpanel--warn    { --cdot: rgba(245,158,11,0.18); }
.cpanel--warn    .cpanel__scene { background: radial-gradient(120% 90% at 50% 30%, rgba(245,158,11,0.10), transparent 70%); }
.cpanel--good    { --cdot: rgba(200,255,0,0.2); }
.cpanel--good    .cpanel__scene { background: radial-gradient(120% 90% at 50% 30%, rgba(200,255,0,0.12), transparent 70%); }

.cpanel__num { position: absolute; top: 0; left: 0; z-index: 3; width: 2.6rem; height: 2.6rem; background: var(--text, #fafafa); color: #09090b; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; border-bottom-right-radius: 8px; }

/* Narration caption — the classic cream box */
.cpanel__caption { align-self: stretch; background: #f5edd6; color: #1a1408; border: 2px solid #1a1408; border-radius: 3px; padding: 0.7rem 0.9rem; font-weight: 600; font-size: 0.95rem; line-height: 1.45; box-shadow: 3px 3px 0 rgba(0,0,0,0.4); }
.cpanel__caption b { color: #6b4e00; }

/* Speech balloon */
.cpanel__balloon { position: relative; background: #fff; color: #0a0a0a; border: 2.5px solid #0a0a0a; border-radius: 18px; padding: 1rem 1.25rem; max-width: 40ch; font-weight: 600; font-size: 1.05rem; line-height: 1.4; box-shadow: 4px 4px 0 rgba(0,0,0,0.45); }
.cpanel__balloon::after { content: ""; position: absolute; bottom: -16px; left: 2.5rem; border: 9px solid transparent; border-top-color: #0a0a0a; }
.cpanel__balloon::before { content: ""; position: absolute; bottom: -11px; left: 2.65rem; border: 7px solid transparent; border-top-color: #fff; z-index: 2; }
.cpanel__balloon em { font-style: normal; color: #b91c1c; }
.cpanel__balloon strong { color: #3f6212; }

/* Action burst — skewed outlined shout */
.cpanel__burst { position: absolute; top: 1.1rem; right: 1rem; z-index: 3; font-weight: 700; font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: -0.02em; color: var(--accent, #c8ff00); transform: rotate(-8deg); text-shadow: 2px 2px 0 #0a0a0a, -1px -1px 0 #0a0a0a; }
.cpanel--danger .cpanel__burst { color: #ef4444; }
.cpanel--warn   .cpanel__burst { color: #f59e0b; }

/* Big data stat overlay */
.cpanel__stat { font-size: clamp(2.8rem, 10vw, 5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; color: var(--text, #fafafa); }
.cpanel--danger .cpanel__stat { color: #fca5a5; } .cpanel--good .cpanel__stat { color: var(--accent, #c8ff00); }
.cpanel__statlabel { font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #a1a1aa); margin-top: 0.4rem; text-align: center; }

/* Hero "signal" wave motif */
.signal-wave { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.signal-wave span { width: 7px; background: var(--accent, #c8ff00); border-radius: 3px; opacity: 0.95; }
.signal-wave--faint span { background: var(--text-muted, #a1a1aa); opacity: 0.4; }
.signal-wave--rival span { background: #ef4444; opacity: 0.8; }

/* Engine "realms" row */
.realms { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.realm { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono, monospace); font-size: 0.72rem; color: var(--text-secondary, #e4e4e7); border: 1px solid var(--border-light, #3f3f46); border-radius: 99px; padding: 0.3rem 0.7rem; }
.realm svg { width: 16px; height: 16px; }
.realm--dim { opacity: 0.35; }
.realm--lit { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.5); }

/* GEO lesson strip beneath each panel's scene */
.cpanel__lesson { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.95rem 1.25rem; border-top: 3px solid var(--text, #fafafa); background: var(--bg, #09090b); }
.cpanel__lesson-tag { flex: 0 0 auto; font-family: var(--mono, monospace); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #09090b; background: var(--accent, #c8ff00); padding: 0.2rem 0.5rem; border-radius: 3px; }
.cpanel__lesson-text { color: var(--text-secondary, #e4e4e7); font-size: 0.92rem; line-height: 1.5; }
.cpanel__lesson-text b { color: var(--text, #fafafa); }

/* Closing CTA panel */
.comic-end { text-align: center; border: 3px dashed var(--accent, #c8ff00); border-radius: 8px; padding: 2.5rem 2rem; background: radial-gradient(120% 120% at 50% 0%, var(--accent-glow, rgba(200,255,0,0.08)), transparent 60%); }
.comic-end__cont { font-family: var(--mono, monospace); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #c8ff00); margin: 0 0 0.75rem; }
.comic-end__title { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; margin: 0 0 1.5rem; color: var(--text, #fafafa); }
.comic-end__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
  .cpanel { box-shadow: 4px 4px 0 rgba(0,0,0,0.55); }
  .cpanel__scene { padding: 2.5rem 1.1rem 1.5rem; min-height: 220px; }
  .cpanel__balloon { font-size: 0.98rem; }
}

/* ── The Story cast + scenes (hand-built SVG, reusable across issues) ──────── */
.cscene { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 5vw, 2.75rem); flex-wrap: wrap; width: 100%; min-height: 150px; }
.char { display: block; height: auto; }
.char--guide { width: clamp(96px, 24vw, 138px); }
.char--hero  { width: clamp(82px, 21vw, 122px); filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.45)); }
.char--guide { filter: drop-shadow(0 0 18px rgba(200,255,0,0.18)); }

/* Doorways the hero is (or isn't) standing in */
.doors { display: flex; align-items: flex-end; gap: 0.55rem; }
.door { width: 30px; height: 52px; border-radius: 15px 15px 3px 3px; background: #16161a; border: 2.5px solid #3f3f46; position: relative; }
.door--lit { border-color: var(--accent, #c8ff00); background: radial-gradient(circle at 50% 35%, rgba(200,255,0,0.4), #16161a 70%); box-shadow: 0 0 18px rgba(200,255,0,0.35); }
.door--lit::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #c8ff00); transform: translateX(-50%); }

/* Signal radiating to the engine realms */
.signal-burst { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.signal-rings { width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--accent, #c8ff00); position: relative; display: flex; align-items: center; justify-content: center; color: var(--accent, #c8ff00); }
.signal-rings::before, .signal-rings::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(200,255,0,0.4); }
.signal-rings::before { inset: -10px; } .signal-rings::after { inset: -20px; border-color: rgba(200,255,0,0.18); }

/* Speaker name tag on balloons */
.cpanel__speaker { display: inline-block; font-family: var(--mono, monospace); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b91c1c; margin-bottom: 0.35rem; }
.cpanel__speaker--guide { color: #3f6212; }
.cpanel__balloon--guide { border-color: #3f6212; }
.cpanel__balloon--guide::after { border-top-color: #3f6212; }

/* The one wisdom — the centerpiece line */
.cwisdom { font-size: clamp(1.5rem, 4.5vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text, #fafafa); text-align: center; max-width: 22ch; }
.cwisdom em { font-style: normal; color: var(--accent, #c8ff00); }

/* ── Slice-of-life cast (people-centric): flat-vector humans + everyday props ── */
.char--person { width: clamp(120px, 30vw, 168px); height: auto; filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.4)); }
.cscene--duo { align-items: flex-end; gap: clamp(0.75rem, 5vw, 2.5rem); }
.prop-phone { width: clamp(50px, 13vw, 72px); height: auto; align-self: flex-end; }
.prop-mug { width: clamp(40px, 9vw, 56px); height: auto; align-self: flex-end; }
.prop-laptop { width: clamp(96px, 26vw, 150px); height: auto; align-self: flex-end; }
.cpanel__speaker--friend { color: #3b82f6; }
.cpanel__balloon--friend { border-color: #1d4ed8; }
.cpanel__balloon--friend::after { border-top-color: #1d4ed8; }

/* ── KG approval bar (foundation page) ───────────────────────────────────── */
/* Slim action bar docked at the BOTTOM so it never covers the report. */
.fnd-approval {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 50;
  width: calc(100% - 2rem); max-width: 820px; padding: 0.7rem 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  background: rgba(18,18,20,0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(200,255,0,0.4); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
}
/* `display: flex` above outranks the UA stylesheet's `[hidden] { display: none }`,
   so `bar.hidden = true` left the bar on screen as an empty 24px lime-outlined
   strip pinned to the bottom of the page. Every read-only viewer of a foundation
   got one, since a viewer never has an approval gate to put in it. The same trap
   is already guarded in eight places in account.css/redesign.css; these two were
   missed. */
.fnd-approval[hidden] { display: none; }
.fnd-approval--wait { border-color: rgba(250,204,21,0.4); }
.fnd-approval--ok { border-color: rgba(200,255,0,0.3); }
.fnd-approval.is-busy { opacity: 0.6; pointer-events: none; }
.fnd-approval__msg { flex: 1 1 300px; color: var(--text-secondary, #e4e4e7); font-size: 0.9rem; line-height: 1.45; }
.fnd-approval__msg strong { color: var(--text, #fafafa); }
.fnd-approval__fb { display: block; margin-top: 0.4rem; font-style: italic; }
.fnd-approval__note { color: var(--text-secondary, #e4e4e7); font-size: 0.88rem; }
/* Stands in for the removed "Request changes" button at zero notes. Without it
   the bar offers only Approve, which reads as the single available answer. */
/* The note nudge — the one behaviour we want this bar to drive. Made legible on
   purpose (a bordered pill with the ✎ that appears beside every item) so it
   reads as an invitation to use the tool, not fine print. */
.fnd-approval__hint {
  display: inline-flex; align-items: center; gap: 0.4rem; align-self: center;
  color: var(--text-secondary, #e4e4e7); font-size: 0.82rem; line-height: 1.35;
  border: 1px solid rgba(200,255,0,0.28); background: rgba(200,255,0,0.06);
  border-radius: 999px; padding: 0.35rem 0.7rem;
}
.fnd-approval__hint b { color: var(--text, #fafafa); font-weight: 600; }
.fnd-approval__pen {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent, #c8ff00); color: #0b1000;
  font-size: 11px; line-height: 1;
}
@media (max-width: 640px) { .fnd-approval__hint { display: none; } }
/* "Your reviewers already agree" — shown to whoever holds the sign-off, next to
   the button they are being asked to press. Full-width above the controls so it
   reads as context for the decision, not as another control. */
.fnd-approval__endorsed {
  flex-basis: 100%; display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; line-height: 1.4; color: var(--accent, #c8ff00);
  margin-bottom: 0.15rem;
}
.fnd-approval__actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fnd-approval__err { flex-basis: 100%; margin: 0.5rem 0 0; color: #f87171; font-size: 0.88rem; }
.fnd-approval__call { color: var(--accent, #c8ff00); text-decoration: underline; white-space: nowrap; }
/* Mobile-only "What am I approving?" expander for the slim gate bar (hidden on
   desktop, where the full explainer is always shown). */
.fnd-approval__more { display: none; }
/* Desktop minimize: a subtle control that collapses the docked gate bar into a
   compact pill so it stops covering the report while reading. The reopen pill is
   shown only in the minimized state. Both are hidden on mobile (the slim gate +
   "What am I approving?" toggle already keeps the bar small there). */
.fnd-approval__reopen { display: none; }
.fnd-approval__min {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  background: none; border: 0; padding: 0.3rem 0.5rem; margin-left: 0.1rem; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary, #a1a1aa);
}
.fnd-approval__min:hover { color: var(--text, #fafafa); }
.fnd-approval__min::after { content: " ▾"; }
.fnd-approval--min { width: auto; max-width: none; padding: 0; }
/* `.fnd-approval__msg` deliberately NOT in this list any more.
   --min is applied by exactly one branch (changes_requested) and is applied
   ALWAYS there — `is-min` is what carries the collapsed state, and collapsing is
   already handled by `.fnd-approval.is-min .fnd-min__body { display: none }`
   further down. So hiding __msg here hid it in the EXPANDED state too: the
   "we're reprocessing your Knowledge Graph, we'll email you at …" body has never
   once been displayed. Every reader who requested changes saw a title and
   nothing else, which is exactly how it came to read as unspecific. Leftover
   from an older collapse pattern where --min itself meant collapsed. */
.fnd-approval--min .fnd-approval__actions,
.fnd-approval--min .fnd-approval__more { display: none; }
.fnd-approval--min .fnd-approval__reopen {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0.65rem 1.2rem; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--accent, #c8ff00);
  white-space: nowrap;
}
/* The report needs clearance so the docked bar never hides the last content.
   --fnd-bar-h is set in JS to the bar's real height (it grows when the message
   wraps), so a long bar can't sit on top of the final content or its buttons. */
.doc, .report { padding-bottom: calc(var(--fnd-bar-h, 110px) + 1.75rem); }
@media (max-width: 640px) {
  .fnd-approval { bottom: 0; width: 100%; border-radius: 14px 14px 0 0; padding: 0.6rem 0.8rem; }
  /* The minimize control is desktop-only; mobile already keeps the gate slim.
     If a desktop session left the bar minimized and the viewport shrank, ignore
     --min so the normal mobile gate (slim bar + buttons) still renders. */
  .fnd-approval__min, .fnd-approval--min .fnd-approval__reopen { display: none; }
  .fnd-approval--min { width: 100%; max-width: none; padding: 0.6rem 0.8rem; border-radius: 14px 14px 0 0; }
  .fnd-approval--min .fnd-approval__actions { display: flex; }
  .fnd-approval--min .fnd-approval__more { display: inline-flex; }

  .chapter-nav__count { font-size: 0.72rem; }
}

/* ── Wherever the approval bar is DOCKED ──────────────────────────────────────
   Up to 1300px the bar is fixed to the bottom of the viewport (above that, the
   JS moves it into the right rail). Everything below was scoped to ≤640px, so on
   a tablet — 810px portrait, 1080 landscape, both squarely inside the docked-bar
   range — the fixed bar sat on top of the chapter nav at every scroll position
   but the very last, and a tap aimed at "Next →" hit the bar instead. The phone
   fix was right; its breakpoint was wrong. The two now share one. */
@media (max-width: 1299px) {
  /* Chapter nav rides ABOVE the docked bar instead of scrolling under it. Sticky
     (not fixed) so it settles into its in-flow spot at the end of the chapter,
     and z-index over the bar's 50 so it takes the tap wherever the two meet.
     Next is now reachable from anywhere in a chapter, not only at max scroll. */
  .chapter-nav {
    position: sticky; bottom: calc(var(--fnd-bar-h, 0px) + 10px); z-index: 55;
    margin: 2.5rem 0 0; padding: 0.5rem 0.55rem; border-top: 0;
    border: 1px solid var(--border-light, #3f3f46); border-radius: 12px;
    background: rgba(18,18,20,0.97);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 26px rgba(0,0,0,0.55);
  }

  /* Folded into the nav rather than floating: as a fixed FAB it sat on top of
     "← Back" at max scroll, and lifting it clear only moved it onto the body
     copy. In the row it's a peer of the buttons it used to cover. (It has to
     move with the nav — left floating while the nav goes sticky, it ends up
     underneath the nav's higher z-index and stops taking taps at all.) */
  .chapter-nav .fnote-dock {
    position: static; flex: 0 0 auto; bottom: auto; left: auto; gap: 0.4rem;
  }
  .chapter-nav .fnote-fab, .chapter-nav .fnote-review {
    padding: 0.5rem 0.6rem; box-shadow: none;
  }

  /* The approval gate, docked into the same row (see dockGate()). It is a peer
     of Back/Next now rather than a second bar stacked under them, so it must
     not grow: `flex: 0 0 auto` here beats the `1 1 auto` the buttons carry for
     their own bar, where filling the pill is the right behaviour. */
  /* Insurance: a longer label (a localised "Looks right", a note count) wraps
     to a second line rather than overflowing a row that has no horizontal
     scroll of its own. */
  .chapter-nav { flex-wrap: wrap; row-gap: 0.5rem; }
  .chapter-nav .fnd-icons { flex: 0 0 auto; gap: 0.4rem; }
  .chapter-nav .fnd-icon { flex: 0 0 auto; padding: 0.5rem 0.7rem; }
  /* The count is `flex: 1` and centres itself; with the gate in the row it was
     shoving Back and Next to the rails and leaving a hole in the middle. */
  .chapter-nav .fnd-icons ~ #ch-next { flex: 0 0 auto; }
  .chapter-nav__count { flex: 0 1 auto; margin-right: auto; padding-left: 0.5rem; }
}

/* ── Chapter-book navigation (scroll view) ───────────────────────────────── */
.chapter-kicker { font-family: var(--mono, monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #c8ff00); margin: 0 0 1.25rem; }
.chapter-stage { min-height: 50vh; }
.chapter-stage.is-turn { animation: ch-turn 0.32s ease; }
@keyframes ch-turn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chapter-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border, #27272a);
}
.chapter-nav__count { font-family: var(--mono, monospace); font-size: 0.8rem; color: var(--text-secondary, #a1a1aa); flex: 1; text-align: center; }
.chapter-nav .booklet-btn:disabled { opacity: 0.35; cursor: default; }

/* The slide-out Table of Contents now lives in deliverable.css and is built by
   mountToc() in deliverable-view.js — one rail, identical in every viewer. What
   stays here is only what is specific to THIS page's furniture: the notes FAB
   and the approval bar have to clear the docked rail too. */
@media (min-width: 1101px) {
  body.has-toc .fnote-fab { left: 306px; }
  body.has-toc .fnd-approval { left: calc(50% + 144px); }
}

/* The TOC's drawer treatment moved to deliverable.css, next to the rail it
   restyles. It lived here, and /account/report/ loads deliverable.css WITHOUT
   booklet.css — so the full report had the docked-rail styling at every width
   and its "Contents" tab sat on the reading column on a phone. A component's
   responsive behaviour belongs in the file that defines the component. */

/* ── Query explorer (visibility report · lazy section) ───────────────────── */
.qx-toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.qx-search { flex: 1 1 240px; background: var(--card, #141416); border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 0.6rem 0.85rem; color: var(--text, #fafafa); font: inherit; }
.qx-only { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--text-secondary, #a1a1aa); white-space: nowrap; }
.qx-list { display: flex; flex-direction: column; gap: 0.6rem; }
.qx-q { background: var(--card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; overflow: hidden; }
.qx-q[open] { border-color: rgba(200, 255, 0, 0.3); }
.qx-q__sum { list-style: none; cursor: pointer; padding: 0.85rem 1rem; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.qx-q__sum::-webkit-details-marker { display: none; }
.qx-q__text { color: var(--text, #fafafa); font-weight: 500; line-height: 1.4; }
.qx-q__meta { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: none; align-items: center; }
.qx-tag { font-size: 0.72rem; color: var(--text-secondary, #a1a1aa); border: 1px solid var(--border, #27272a); border-radius: 999px; padding: 0.12rem 0.55rem; white-space: nowrap; }
.qx-tag--ok { color: var(--accent, #c8ff00); border-color: rgba(200, 255, 0, 0.4); }
.qx-q__body { padding: 0 1rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
.qx-eng { background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 10px; padding: 0.75rem 0.9rem; }
/* flex-wrap so the verdict chips (.qx-pos, .qx-win) drop to a second line on
   narrow viewports instead of overflowing the card — .qx-win is nowrap and
   would otherwise clip the competitor's name, the one thing the chip exists
   to show. Also fixes 26 heads that overflowed before the chips existed. */
.qx-eng__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-bottom: 0.4rem; }
.qx-eng__name { font-weight: 600; color: var(--text, #fafafa); }
.qx-eng__n { font-size: 0.75rem; color: var(--text-secondary, #a1a1aa); margin-left: auto; }
.qx-badge { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid transparent; }
.qx-badge--ok { color: var(--accent, #c8ff00); border-color: rgba(200, 255, 0, 0.4); }
.qx-eng__resp { margin: 0.3rem 0 0.5rem; color: var(--text-secondary, #e4e4e7); font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.qx-cites { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qx-cite { font-size: 0.75rem; color: var(--text-secondary, #a1a1aa); background: var(--card, #141416); border: 1px solid var(--border, #27272a); border-radius: 999px; padding: 0.15rem 0.6rem; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qx-cite:hover { color: var(--accent, #c8ff00); border-color: var(--accent, #c8ff00); }
.qx-nocite { margin: 0.2rem 0 0; font-size: 0.78rem; color: #6a6a76; font-style: italic; }

/* ── Query explorer · filters (platform + visibility) ───────────────────── */
.qx-summary { color: var(--text-secondary, #a1a1aa); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1rem; }
.qx-summary strong { color: var(--text, #fafafa); }
.qx-seg { display: inline-flex; border: 1px solid var(--border, #27272a); border-radius: 999px; overflow: hidden; flex: none; }
.qx-seg__btn { background: transparent; border: 0; color: var(--text-secondary, #a1a1aa); font: inherit; font-size: 0.82rem; padding: 0.45rem 0.95rem; cursor: pointer; }
.qx-seg__btn.is-on { background: var(--accent, #c8ff00); color: #09090b; font-weight: 600; }
.qx-plats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.qx-plat { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--card, #141416); border: 1px solid var(--border, #27272a); border-radius: 999px; color: var(--text-secondary, #a1a1aa); font: inherit; font-size: 0.82rem; padding: 0.35rem 0.8rem; cursor: pointer; opacity: 0.5; }
.qx-plat.is-on { opacity: 1; color: var(--text, #fafafa); border-color: rgba(200, 255, 0, 0.4); }
.qx-plat__n { font-size: 0.72rem; font-variant-numeric: tabular-nums; background: var(--bg, #09090b); border-radius: 999px; padding: 0.05rem 0.4rem; color: var(--accent, #c8ff00); }
.qx-tag--no { color: #ff8a8a; border-color: rgba(255, 107, 107, 0.35); }
.qx-badge--no { color: #9a9aa6; border-color: var(--border, #27272a); }
.qx-pos { font-size: 0.72rem; color: var(--accent, #c8ff00); text-transform: capitalize; }
.qx-win { font-size: 0.72rem; color: var(--text-secondary, #a1a1aa); border: 1px solid var(--border, #27272a); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.qx-win strong { color: var(--text, #fafafa); font-weight: 600; }
.qx-why { margin: 0.1rem 0 0.6rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary, #a1a1aa); border-left: 2px solid var(--border, #27272a); padding-left: 0.6rem; }
.qx-why__label { color: #6a6a76; font-weight: 600; }

/* Per-engine win rate (win-rate standard §3.11). Rates are server-computed and
   reproduce aggregate.py's `win_rate`; the UI never picks a denominator. */
.qx-wins { background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a); border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1.1rem; }
.qx-wins__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.qx-wins__label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text, #fafafa); }
.qx-wins__frac { display: block; font-size: 0.75rem; color: var(--text-secondary, #a1a1aa); margin-top: 0.1rem; }
.qx-wins__big { font-size: 1.6rem; font-weight: 700; color: var(--accent, #c8ff00); font-variant-numeric: tabular-nums; line-height: 1; }
.qx-wins__bars { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.qx-wins__bar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 3rem 3.2rem; align-items: center; gap: 0.6rem; font-size: 0.78rem; }
.qx-wins__eng { color: var(--text-secondary, #a1a1aa); }
.qx-wins__track { background: var(--bg, #09090b); border: 1px solid var(--border, #27272a); border-radius: 999px; height: 0.5rem; overflow: hidden; }
.qx-wins__fill { display: block; height: 100%; background: var(--accent, #c8ff00); border-radius: 999px; }
.qx-wins__pct { color: var(--text, #fafafa); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.qx-wins__n { color: #6a6a76; font-variant-numeric: tabular-nums; text-align: right; }
.qx-wins__note { margin: 0.8rem 0 0; font-size: 0.75rem; line-height: 1.5; color: #6a6a76; }
@media (max-width: 520px) {
  .qx-wins__bar { grid-template-columns: 4.6rem minmax(0, 1fr) 2.7rem 2.9rem; gap: 0.4rem; font-size: 0.72rem; }
  .qx-wins__big { font-size: 1.35rem; }
}
.qx-list.qx-hide-chatgpt   .qx-eng[data-platform="chatgpt"]   { display: none; }
.qx-list.qx-hide-claude    .qx-eng[data-platform="claude"]    { display: none; }
.qx-list.qx-hide-gemini    .qx-eng[data-platform="gemini"]    { display: none; }
.qx-list.qx-hide-perplexity .qx-eng[data-platform="perplexity"] { display: none; }
.qx-count { font-size: 0.82rem; color: var(--text-secondary, #a1a1aa); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }

/* Deep-linked action item (from the Actions blueprint) */
.plan-item2.is-linked { outline: 2px solid var(--accent, #c8ff00); outline-offset: 2px; border-radius: 8px; }

/* ── Embedded reading mode (?embed=1) ──────────────────────────────────────
   The crawl hub mounts these viewers inline (read the whole report on the page,
   don't click out). In embed mode we strip the page chrome and collapse the
   sticky-nav offset var to 0 so every `top: var(--rl-topnav-h)` sticky element
   sits flush. The foundation approval bar stays — it's an action, not chrome,
   so a reader can still sign off inline. */
.booklet-body.is-embed { --rl-topnav-h: 0px; padding-top: 0 !important; }
.booklet-body.is-embed .booklet-topnav,
.booklet-body.is-embed #view-toggle { display: none !important; }
/* This used to hide `.booklet-btn` outright, which reads as "strip the chrome"
   but caught every button in the document: chapter Back/Next, Save note, Send
   N notes, Request changes, and the whole approve step. The embedded reader was
   left with a foundation they could read and nothing they could act on — which
   is most of them, since the crawl hub opens Foundations in this overlay.
   Only LINKS are chrome here: an <a> navigates the hub's iframe to a full page
   that was never built for a 72vh frame. Buttons act in place, so they stay. */
.booklet-body.is-embed a.booklet-btn { display: none !important; }
.booklet-body.is-embed .doc,
.booklet-body.is-embed .booklet { padding-top: 0.5rem !important; }
/* …but the "In this crawl" section bar (shared.js) is NOT stripped, and with
   --rl-topnav-h at 0 the Contents rail measured its offset from a nav that is
   no longer there — so the lime handle sat on top of that bar, covering the
   kicker and crowding the first tab. --rl-secbar-h is the bar's measured
   height, published by shared.js, so this survives the bar wrapping. */
.booklet-body.is-embed .chapter-toc { top: var(--rl-secbar-h, 44px); }

/* ── Foundation status rail: pay CTA + approval, docked right on wide screens ──
   The pay CTA and the approval/status card used to sandwich the report (banner
   on top, bar on the bottom). This docks both into a quiet right rail on wide
   screens so the foundation keeps the full centre column. `display:contents`
   below 1300px dissolves the rail, so the pay card falls back to the top and the
   approval bar to its bottom-docked position — laptop/mobile layout unchanged. */
.status-rail { display: contents; }
.paygate-host { max-width: 760px; margin: 0 auto 1.25rem; }

@media (min-width: 1300px) {
  .status-rail {
    display: flex; flex-direction: column; gap: 0.85rem;
    position: fixed; top: 84px; right: 1.5rem; width: 320px; z-index: 45;
    max-height: calc(100vh - 104px); overflow-y: auto;
  }
  .paygate-host { max-width: none; margin: 0; }
  .doc { margin-left: auto; margin-right: 360px; }
  #approval-bar.fnd-approval {
    position: static; transform: none; left: auto; right: auto; bottom: auto;
    width: 100%; max-width: none; margin: 0;
  }
}

/* Subtle pay card — quiet by default; the report is the focus, not the upsell.
   Higher specificity than the base .paygate so it wins regardless of load order. */
.paygate.paygate--section {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem;
  background: var(--bg-card, #141416); border: 1px solid var(--border, #27272a);
  border-radius: 14px; padding: 0.9rem 1rem; box-shadow: none;
}
/* The base lead is `flex: 1 1 260px`; in this COLUMN layout that 260px is a
   min-HEIGHT, which opened a dead vertical gap between the copy and the button.
   Reset it so the card is content-height. */
.paygate.paygate--section .paygate__lead { flex: 0 0 auto; }
.paygate.paygate--section .paygate__spark { display: none; }
.paygate.paygate--section .paygate__title { font-size: 0.95rem; font-weight: 650; }
.paygate.paygate--section .paygate__sub { font-size: 0.82rem; }
.paygate.paygate--section .paygate__actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.paygate.paygate--section .paygate__go { width: 100%; font-size: 0.9rem; padding: 0.55rem 1rem; }

/* Minimizable status card (the "changes requested / revising" notice). */
.fnd-approval--min { flex-direction: column; align-items: stretch; }
.fnd-min__toggle {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--text, #fafafa); font: inherit; font-weight: 600; font-size: 0.9rem;
}
.fnd-min__dot { width: 8px; height: 8px; border-radius: 50%; background: #facc15; flex: none; }
.fnd-min__x { margin-left: auto; color: var(--text-muted, #a1a1aa); font-size: 1.15rem; line-height: 1; }
.fnd-min__body { margin-top: 0.55rem; }
.fnd-approval.is-min .fnd-min__body { display: none; }

/* ── Two-icon approval (pending review) ───────────────────────────────────────
   FEEDBACK reveals the review overlay (read + note anything to change → send);
   CONFIRM (waveform) approves and kicks off query generation. Compact by default
   so the report keeps the space — the explainer lives behind the feedback icon. */
/* The gate is a CONTROL CLUSTER, not a slab. It used to inherit the docked
   bar's full 820px and stack each button glyph-over-label, which made two
   two-word buttons 387x97 each and the bar 121px tall — 15% of the reading
   height in the crawl hub's overlay (a 1178px iframe), sitting on top of the
   document it is asking you to read.

   That was diagnosed once and fixed only under `max-width: 640px`, so the
   phone got a 56px bar and every width from 641px to 1299px — laptops, and the
   embedded viewer, which is where most people meet this — kept the 121px one.
   The compact row is the base treatment now; the phone block no longer needs
   its own copy of it.

   `width: auto` lets the bar shrink to its buttons instead of filling the
   line. It stays centred (left:50% + translateX), and the review panel inside
   it can still push it out to the cap when it opens. */
.fnd-approval--icons {
  flex-direction: column; align-items: stretch; gap: 0.55rem;
  width: auto; max-width: min(560px, calc(100% - 2rem));
}
/* Kept HERE, not up in the `max-width: 640px` block with its siblings: media
   queries add no specificity, so a rule of equal weight later in the file wins
   regardless of viewport. Put next to what it overrides, this cannot be
   silently undone by the base rule moving. */
@media (max-width: 640px) {
  /* On a phone the gate stays a FULL-WIDTH docked bar — flush to the bottom
     edge with only its top corners rounded, so the hugging pill the wider
     layouts use would read as a fragment cut off at the screen edge. Half-width
     buttons are also the right tap target at this size. */
  .fnd-approval--icons { width: 100%; max-width: none; }
}
.fnd-icons { display: flex; gap: 0.6rem; }
.fnd-icon {
  flex: 1 1 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 0.9rem; cursor: pointer; font: inherit;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border, #27272a);
  border-radius: 12px; color: var(--text-secondary, #e4e4e7);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
/* The button inherits the document's 1.6 body leading, which on a two-word
   label is ~15px of air the bar charges the reader for on every screen. */
.fnd-icon, .fnd-icon__l { line-height: 1.2; }
/* `flex: 1 1 0` split the bar evenly, which made both buttons as wide as the
   SHORTER label needed and wrapped "Looks right" onto two lines. Sizing from
   content lets each keep its own width and the pill stays one line tall. */
.fnd-icon { flex: 1 1 auto; white-space: nowrap; }
.fnd-icon:hover, .fnd-icon[aria-expanded="true"] { border-color: var(--text-muted, #a1a1aa); color: var(--text, #fafafa); }
.fnd-icon__g { display: grid; place-items: center; width: 19px; height: 19px; font-size: 15px; flex: none; }
.fnd-icon__g svg { display: block; width: 15px; height: 15px; }
.fnd-icon__l { font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; }
.fnd-icon--go { border-color: rgba(200,255,0,0.5); color: var(--accent, #c8ff00); background: rgba(200,255,0,0.06); }
.fnd-icon--go:hover { border-color: var(--accent, #c8ff00); background: rgba(200,255,0,0.12); }

.fnd-review { padding-top: 0.15rem; }
.fnd-review__msg { margin: 0 0 0.7rem; color: var(--text-secondary, #e4e4e7); font-size: 0.86rem; line-height: 1.5; }
.fnd-review__msg strong { color: var(--text, #fafafa); }
.fnd-review__actions { display: flex; }
.fnd-review__actions .booklet-btn { width: 100%; }

/* The gate's feedback icon when notes are waiting to be sent. Accent border so a
   reader scanning the bar sees there is something of theirs in there. */
.fnd-icon--pending { border-color: rgba(200,255,0,0.55); }
.fnd-icon--pending .fnd-icon__l { color: var(--accent, #c8ff00); font-weight: 600; }

/* ── What moved, marked on the thing that moved ──────────────────────────────
   A rebuilt foundation looks almost identical to the one before it. The
   changelog chapter lists what changed; these marks put each change ON the card
   it changed, so the document can be scanned once instead of cross-referenced
   against a second one. */
.kg-chg {
  display: inline-flex; align-items: center; margin-left: 0.5rem; flex: none;
  font-family: var(--mono, monospace); font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.16rem 0.4rem; border-radius: 5px;
  border: 1px solid transparent; vertical-align: middle;
}
.kg-chg--add { background: rgba(200,255,0,0.14); color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.4); }
.kg-chg--update { background: rgba(125,211,252,0.13); color: #bae6fd; border-color: rgba(125,211,252,0.38); }
.kg-chg--remove { background: rgba(248,113,113,0.13); color: #fca5a5; border-color: rgba(248,113,113,0.38); }
/* The per-chapter tally sits on the heading, so a reader can skip a section
   whose cards didn't move. */
.kg-chg--count { background: rgba(200,255,0,0.1); color: var(--accent, #c8ff00);
  border-color: rgba(200,255,0,0.32); font-size: 0.6rem; }
/* A changed card gets a quiet left edge — enough to find while scrolling,
   not enough to compete with the content. */
.kg-card.is-changed, .kg-row.is-changed {
  border-left: 2px solid rgba(200,255,0,0.45);
  background: linear-gradient(90deg, rgba(200,255,0,0.045), transparent 40%);
}
@media print { .kg-chg { border-color: #999; color: #333; background: none; } }