/* ════════════════════════════════════════════════════════════════════════
   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; } }

.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); }
.crawler.bad .crawler__status { color: #fca5a5; } .crawler.good .crawler__status { color: var(--accent, #c8ff00); }

/* ── 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. ──── */
.fnote-host { position: relative; }
.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 var(--border, #27272a); background: var(--bg, #09090b);
  color: #52525b; opacity: 0.55; transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fnote-host:hover .fnote-btn, .fnote-btn:focus-visible { opacity: 1; color: var(--text-muted, #a1a1aa); }
.fnote-btn:hover { color: var(--accent, #c8ff00); border-color: rgba(200,255,0,0.4); }
.fnote-btn.has-note {
  opacity: 1; 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; } }
/* Keep the anchor clear of content that would otherwise run under it. */
.fnote-host .kg-row__head, .fnote-host .kg-card__name { padding-right: 4.5rem; }
.fnote-host .fnd-card__toggle { padding-right: 5rem; }

/* 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); }

/* Always-available composer. Sits above the approval bar's reserved clearance so
   it can never cover the approve/request-changes actions. */
.fnote-fab {
  position: fixed; left: 18px; bottom: calc(var(--fnd-bar-h, 110px) + 16px); z-index: 40;
  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);
}
.fnote-fab:hover { border-color: var(--accent, #c8ff00); color: var(--text, #fafafa); }
.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; }
.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;
  }

  /* 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);
}
.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; }
.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--min .fnd-approval__msg,
.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; }
  /* Approve / request-changes gate: the explainer paragraph repeats the in-page
     confirm step, so on phones collapse it by default and lay the two buttons out
     as one compact row — the docked bar stays ~56px instead of eating half the
     viewport (reserved scroll clearance tracks bar height; see --fnd-bar-h). The
     "What am I approving?" toggle expands the full text + Book-a-call on demand. */
  .fnd-approval--gate .fnd-approval__msg { display: none; flex-basis: 100%; }
  .fnd-approval--gate.fnd-approval--open .fnd-approval__msg { display: block; }
  .fnd-approval--gate .fnd-approval__more {
    display: inline-flex; align-items: center; order: -1; flex: 0 0 auto;
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: 0.82rem; font-weight: 600; color: var(--accent, #c8ff00);
  }
  .fnd-approval--gate .fnd-approval__more::after { content: " ▾"; }
  .fnd-approval--gate.fnd-approval--open .fnd-approval__more::after { content: " ▴"; }
  .fnd-approval--gate .fnd-approval__actions { flex: 1 1 100%; }
  .fnd-approval--gate .fnd-approval__actions .booklet-btn { flex: 1 1 auto; padding: 0.6rem 0.7rem; }
}

/* ── 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; }

/* Slide-out side Table of Contents — stacked links, always reachable via the
   handle, open by default on wide screens. */
.chapter-toc { position: fixed; top: var(--rl-topnav-h, 64px); left: 0; bottom: 0; z-index: 40; pointer-events: none; }
.chapter-toc__handle {
  pointer-events: auto; position: absolute; top: 1.5rem; left: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent, #c8ff00); color: #09090b; border: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.55rem 0.75rem;
  border-radius: 0 10px 10px 0; box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
  transition: left .25s ease;
}
.chapter-toc__handle-icon { font-size: 0.95rem; }
.chapter-toc__list {
  pointer-events: auto; position: absolute; top: 1rem; left: 0;
  width: 240px; max-height: calc(100vh - var(--rl-topnav-h, 64px) - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem;
  background: #141416; border: 1px solid var(--border, #27272a); border-left: none;
  border-radius: 0 14px 14px 0; box-shadow: 6px 0 30px rgba(0,0,0,0.5);
  transform: translateX(-100%); transition: transform .25s ease; scrollbar-width: thin;
}
.chapter-toc.is-open .chapter-toc__list { transform: translateX(0); }
.chapter-toc.is-open .chapter-toc__handle { left: 240px; }
.toc-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
  padding: 0.5rem 0.7rem; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--text-secondary, #a1a1aa); font: inherit; font-size: 0.88rem; line-height: 1.3; transition: all .12s ease;
}
.toc-item:hover { background: rgba(255,255,255,0.05); color: var(--text, #fafafa); }
.toc-item.is-active { background: var(--accent-glow, rgba(200,255,0,0.08)); border-color: rgba(200,255,0,0.4); color: var(--text, #fafafa); font-weight: 600; }
.toc-item__n { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--border, #27272a); color: var(--text-secondary, #a1a1aa); font-family: var(--mono, monospace); font-size: 0.72rem; }
.toc-item.is-active .toc-item__n { background: var(--accent, #c8ff00); color: #09090b; }
.toc-item__t { flex: 1; }

/* Scrim sits behind the drawer on phones so it reads as a real overlay (and taps
   to close). Hidden / inert on desktop where the TOC is a docked rail. */
.chapter-toc__scrim { display: none; }

@media (max-width: 680px) {
  /* On phones the TOC is an overlay drawer, not a docked rail: lift the whole
     thing above the bottom approval bar (z 50) so it never renders behind it,
     dim the page behind the open panel, and shrink the edge handle to an icon. */
  .chapter-toc.is-open { z-index: 60; }
  .chapter-toc.is-open .chapter-toc__scrim {
    display: block; pointer-events: auto; cursor: pointer; border: 0; padding: 0;
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--rl-topnav-h, 64px);
    background: rgba(9, 9, 11, 0.62);
  }
  .chapter-toc__list { width: min(82vw, 280px); }
  /* Keep the handle pinned to the left edge under the open drawer (the scrim +
     a chapter tap close it), so it can't poke out past the panel. */
  .chapter-toc.is-open .chapter-toc__handle { left: 0; }
  .chapter-toc__handle { top: 0.75rem; padding: 0.5rem 0.55rem; }
  .chapter-toc__handle-text { display: none; }
}

/* ── 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; }