/* ============================================================
   detail-v2.css — S4 topic-detail redesign (page-scoped).
   Source of truth: design.pen screen P7oiN (desktop) / buNy6 (mobile 390).
   Loaded only on /scandal/{slug} via RootLayout extraStyles. Tokens come from
   base.css + theme-*.css (global :root + [data-theme]); this sheet adds the
   S4 shell + foundation primitives (type roles, cards, disclosure, jump-nav).

   Slice D0 (foundation): establishes the reading column, the horizontal jump-nav
   (replacing the vertical TOC), scroll-progress, and DEFINES the type-system /
   card / disclosure primitives. Per-altitude sections (masthead, NoiseGauge,
   FactBox, deep article, dossier) layer on top in slices D1-D8; they consume the
   primitives defined here. Loaded after components.css so these rules win on order.
   ============================================================ */

/* --- Container: neutralise the global page-main gutter/cap so the detail reading
   column owns its width (mirrors the homepage's body.home-v2 neutralisation). --- */
body.detail-v2 #app { padding: 0; max-width: none; }
body.detail-v2 .page-main { padding: 0; margin: 0; max-width: none; min-height: 0; }

/* Reading column — faithful to P7oiN's Body frame. The text measure is 760px
   (1120 canvas minus 2x180 gutter); with the global box-sizing:border-box the 24px
   side padding sits INSIDE max-width, so max-width = 760 + 2x24 = 808 yields a true
   760px text column. Vertical padding is P7oiN's symmetric 64px (space-8).
   --jumpnav-offset = scroll clearance for in-page anchors (~47px nav + 3px progress
   bar + breathing room), used as scroll-margin-top on section ids. */
.s4-detail {
  --jumpnav-offset: 64px;
  max-width: 808px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* The sticky jump-nav (~47px) + the 3px fixed scroll-progress bar sit above any
   in-page anchor target — offset every section id so its heading clears them on jump. */
.s4-detail [id] { scroll-margin-top: var(--jumpnav-offset); }

/* The article keeps its legacy .scandal-page__* section styling AND its legacy
   vertical margins (transitional — replaced per altitude in D1-D8). It stays in
   normal block flow on purpose: a flex column with gap would NOT collapse the
   legacy margin-bottom on .scandal-page__summaries/__noise/__parties/__timeline,
   doubling every section gap. The S4 uniform rhythm arrives as sections are rebuilt. */
.s4-detail__article { display: block; }

/* --- Jump nav (L1 orientation) — horizontal sticky anchor bar, replaces the
   vertical TOC. P7oiN M147w5: anchors left; the Plain/Detailed reading-toggle on
   the right is Slice D7 (it ships with the simple/press DOM-branch + cache). --- */
.s4-detail__jumpnav {
  position: sticky;
  top: 3px;              /* clear the 3px fixed scroll-progress bar above it */
  z-index: 50;
  display: flex;
  align-items: center;
  padding: var(--space-3) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.s4-detail__jumpnav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.s4-detail__anchor {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.s4-detail__anchor:hover { color: var(--text); }
.s4-detail__anchor--active { color: var(--text); font-weight: 600; }

/* ============================================================
   TYPE-SYSTEM ROLES (s4-detail-type-system.md — 4 roles + colour variants).
   Defined here; applied per altitude in D1-D8. Playfair fires <=2x (DISPLAY
   title, LEAD verdict); Mono is one weight (500); Inter is one prose size (16).
   ============================================================ */
.s4-type-display {
  font-family: var(--font-headline);
  font-size: var(--lead);            /* 48px desktop (base.css --lead: 3rem) */
  font-weight: 700;
  line-height: 1.07;
  color: var(--text);
  overflow-wrap: break-word;         /* long unbroken titles must not overflow the column */
}
.s4-type-lead {
  font-family: var(--font-headline);
  font-size: 1.625rem;               /* 26px — P7oiN $--display-h2 (no global token) */
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.s4-type-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}
.s4-type-label,
.s4-detail__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* LABEL colour variants — NOT new roles (type-system §1): link accent, noise signal. */
.s4-type-label--link { color: var(--accent); }
.s4-type-label--signal { color: var(--noise-high); }
/* Section eyebrow as a heading element keeps semantics + a11y while reading as a label. */
.s4-detail__eyebrow { display: block; margin: 0; }

/* ============================================================
   CARD / SURFACE PRIMITIVES — P7oiN's answer-block, forecast hook, FactBox,
   NoiseGauge and forecast dossier all share one card grammar.
   ============================================================ */
.s4-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.s4-card--accent {
  background: var(--accent-subtle);
  border-color: transparent;
}

/* Forced-dark island (FactBox — P7oiN SvmNF theme:{mode:dark}); re-binds the
   theme tokens to dark regardless of page theme. Mirrors home-v2.css .surface-dark
   so the two redesign surfaces stay identical. */
.surface-dark {
  --surface: #211d17;
  --text: #ece6dd;
  --text-muted: #a39a8c;
  --border: #352f27;
  --border-subtle: #2a251f;
  --accent: #5b9bd5;
  --accent-hover: #7fb3e0;
  --brand-logo: #5b9bd5;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --on-accent: #16130f;
  color: var(--text);
}

/* ============================================================
   DISCLOSURE PRIMITIVE — native <details> (CSP-safe, content in DOM for SEO).
   Used by the L3/L4/L4.5 collapse in press mode (D4-D6) and the L0 cite block.
   ============================================================ */
.s4-disclosure > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.s4-disclosure > summary::-webkit-details-marker { display: none; }
.s4-disclosure > summary::before {
  content: '\25B8';                  /* triangle marker */
  display: inline-block;
  transition: transform 0.2s ease;
  color: var(--accent);
}
.s4-disclosure[open] > summary::before { transform: rotate(90deg); }

/* ============================================================
   L0 MASTHEAD (Slice D1) — breadcrumb · header chips · title · answer-block.
   P7oiN: breadcrumb p0l6TU (mono "Feed › Corporate") · header-row huD3X (cat chip
   with category-dot + state chip with noise-square) · Playfair title (.s4-type-display)
   · answer-block z7bRn (.s4-card + eyebrow + verdict .s4-type-lead + mono meta row).
   ============================================================ */

/* Breadcrumb — mono ambient meta. */
.s4-detail__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;          /* type-system law: mono is ONE weight (500) page-wide */
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.s4-detail__breadcrumb a { color: var(--text-muted); text-decoration: none; }
.s4-detail__breadcrumb a:hover { color: var(--accent); }
.s4-detail__breadcrumb-sep { margin: 0 var(--space-2); opacity: 0.55; }
.s4-detail__breadcrumb [aria-current="page"] { color: var(--text); }

/* Header chips (huD3X). Both labels are mono ONE weight (500) per the type-system
   law (no 400/700 jumble) — differentiation is the container graphic + case, not weight. */
.s4-detail__chips { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.s4-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.s4-chip--cat { background: var(--chip-bg); color: var(--text-muted); }
.s4-chip--cat:hover { color: var(--text); }
.s4-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.s4-chip--state { border: 1px solid var(--noise-high); color: var(--text); text-transform: uppercase; }
.s4-chip__square { width: 7px; height: 7px; background: var(--noise-high); flex: none; }

/* Answer block (z7bRn) — built on .s4-card; eyebrow + verdict (.s4-type-lead) + mono meta. */
.s4-detail__answer { display: flex; flex-direction: column; gap: var(--space-2); }
.s4-detail__answer .s4-type-lead { margin: var(--space-1) 0; }
.s4-detail__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;          /* type-system law: mono is ONE weight (500) page-wide */
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.6;
}
.s4-detail__meta a { color: var(--accent); text-decoration: none; }
.s4-detail__meta a:hover { text-decoration: underline; }
.s4-detail__meta-sep { margin: 0 var(--space-2); opacity: 0.55; }
/* Inline cite disclosure inside the meta row (native <details>, CSP-safe). */
.s4-cite { display: inline; }
.s4-cite > summary { display: inline; list-style: none; color: var(--accent); cursor: pointer; }
.s4-cite > summary::-webkit-details-marker { display: none; }
.s4-cite > summary:hover { text-decoration: underline; }
.s4-cite__code {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
  overflow-x: auto;
  user-select: all;
  white-space: normal;
}

/* ============================================================
   RESPONSIVE BASELINE — the shell must never break on narrow screens. The full
   mobile-390 fidelity pass (design.pen buNy6) is Slice D8.
   ============================================================ */
@media (max-width: 860px) {
  .s4-detail { padding: var(--space-6) var(--space-4) var(--space-7); }
}
/* Title shrink aligned to the components.css .scandal-page__title breakpoint (640px):
   the dual-classed h1 keeps both classes, and .s4-type-display (loaded later) would
   otherwise hold 48px down to 600px, leaving a 601-640px gap where the old 24px rule
   was meant to apply. Mobile lead = 30px (type-system). */
@media (max-width: 640px) {
  .s4-type-display { font-size: 1.875rem; }   /* 30px — type-system mobile lead */
}
@media (max-width: 600px) {
  .s4-detail__jumpnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .s4-detail__jumpnav::-webkit-scrollbar { display: none; }
  .s4-detail__jumpnav-list { flex-wrap: nowrap; gap: var(--space-4); }
}