/* briefing.css — ONE shared stylesheet for the 17 long-form briefing pages.
   The reading base (cream surface, EB Garamond, 19px / line-height 1.8, ~40rem
   measure) comes from the shared .reading-surface + the --reading-* tokens in
   main.css; the page title comes from the shared .page-title (38px navy). This
   file adds only briefing-specific chrome: back bar, header, citation line,
   descriptor, in-content heading hierarchy, key-findings callout, related-output
   link, and footnotes. Load AFTER main.css so it can build on the tokens.
   Do not put briefing styling back in the pages — change it here. */

body{ background:var(--cream-panel); }

/* ── Back bar ─────────────────────────────────────────────────── */
.doc-back-bar{ background:var(--cream-panel); border-bottom:1px solid var(--grey-200); padding:6px 36px; }
.doc-back-bar a{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:0.08em; color:var(--navy); text-decoration:none; }
.doc-back-bar a:hover{ text-decoration:underline; }

/* ── Header (title = shared .page-title, 38px navy) ───────────── */
.doc-header{ background:transparent; border-bottom:3px solid var(--gold); padding:28px 40px 24px; }
.briefing-cite{ font-family:var(--font-mono); font-size:var(--fs-label); color:var(--text-muted); line-height:1.5; margin:6px 0 1.25rem; }
.briefing-cite a{ color:var(--gold); text-decoration:none; }
.doc-descriptor{ font-family:var(--font-mono); font-size:var(--fs-fine); color:var(--grey-700); max-width:680px; line-height:1.7; border-left:3px solid var(--gold); padding-left:14px; }
/* Byline — author/attribution line under the title (e.g. "By …"). */
.doc-byline{ font-family:var(--font-serif); font-style:italic; font-size:var(--fs-body); color:var(--text-muted); margin:4px 0 0; }

/* ── Reading panel ────────────────────────────────────────────
   .reading-surface (main.css) supplies the surface, font, body size, line
   height and measure. Here we only set the briefing column width + centring.
   1000px (not 800) matches the pre-migration briefing width — main.css widened
   .doc-body to 1000px so table-heavy briefings don't cramp; keep parity. */
.reading-surface{ max-width:1000px; margin:40px auto; padding:40px 48px; }

/* In-content heading hierarchy — title is the page's single H1 (.page-title);
   sections are H2, sub-sections H3, sub-sub H4. */
.doc-content h2{ font-family:var(--font-serif); font-size:var(--fs-subheading); font-weight:700; color:var(--navy); line-height:1.25; margin:36px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--gold-lt); }
.doc-content h3{ font-family:var(--font-serif); font-size:var(--fs-body); font-weight:700; color:var(--navy); margin:28px 0 10px; }
.doc-content h4{ font-family:var(--font-serif); font-size:var(--fs-body); font-weight:700; font-style:italic; color:var(--navy); margin:22px 0 8px; }

.doc-content p{ margin-bottom:24px; }
.doc-content > p:first-child, .doc-content .lead{ font-size:var(--reading-lead); color:var(--navy); }
.doc-content strong{ font-weight:700; color:var(--navy); }
.doc-content em{ font-style:italic; }
.doc-content ul, .doc-content ol{ margin:0 0 18px 22px; padding:0; }
.doc-content li{ margin-bottom:10px; }
.doc-content a{ color:var(--gold); text-decoration:underline; }
.doc-content blockquote{ border-left:3px solid var(--gold); padding:10px 18px; margin:20px 0; background:rgba(201,168,76,0.07); font-style:italic; color:var(--text); }
.doc-content img{ max-width:100%; height:auto; border-radius:2px; }

/* ── Tables (shared). Header colour/background, cell font-size and cell
   padding come from the main.css table norm; here we set only the layout the
   norm doesn't: full width, collapsed borders, left-aligned uppercase headers,
   cell divider, and zebra striping. */
.doc-content table{ width:100%; border-collapse:collapse; margin:24px 0; }
.doc-content th{ text-align:left; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.doc-content td{ border-bottom:1px solid var(--border); vertical-align:top; }
.doc-content tr:nth-child(even) td{ background:rgba(17,29,48,0.04); }
/* Cell content: mammoth wraps table cells in <p>/lists, which otherwise pick up
   the 19px reading size. Keep everything inside a cell at the table font-size. */
.doc-content td p, .doc-content td li, .doc-content td ul, .doc-content td ol, .doc-content th p{ font-size:var(--fs-table); }
.doc-content td p{ margin:0 0 6px; }
.doc-content td ul, .doc-content td ol{ margin:6px 0 6px 18px; }
.doc-content td > :last-child{ margin-bottom:0; }

/* ── Key findings callout (its own look — not the grid card) ──── */
.key-findings{ background:var(--card-bg); border:1px solid var(--card-border); border-left:3px solid var(--gold); border-radius:4px; padding:24px 28px; margin-bottom:2rem; }
.key-findings-label{ display:block; font-family:var(--font-mono); font-size:var(--fs-body); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.9rem; }
.key-findings ul{ list-style:none; margin:0; padding:0; }
.key-findings li{ font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text); line-height:1.55; padding-left:0.5rem; margin-bottom:0.5rem; }
.key-findings li:last-child{ margin-bottom:0; }
.key-findings li::before{ content:"\25A0"; color:var(--gold); font-size:var(--fs-label); margin-right:0.6rem; vertical-align:middle; }

/* ── Related-output link (e.g. "Interactive visualisations →") ── */
.related-output{ display:block; text-decoration:none; color:inherit; background:var(--card-bg); border:1px solid var(--card-border); border-left:3px solid var(--gold); border-radius:4px; padding:16px 20px; margin-bottom:1.5rem; }
.related-output-kicker{ font-family:var(--font-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.15em; color:var(--gold); margin-bottom:0.4rem; }
.related-output-title{ font-family:var(--font-serif); font-size:var(--fs-body); font-weight:600; color:var(--navy); margin-bottom:0.3rem; }
.related-output-desc{ font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-muted); line-height:1.55; }

/* ── Footnotes (unifies the two legacy conventions) ───────────── */
.doc-footnotes, .footnotes{ max-width:var(--reading-measure); margin:40px auto 0; padding-top:18px; border-top:1px solid var(--border); }
.doc-footnotes h2, .footnotes-heading{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin:0 0 12px; padding:0; border:none; }
.doc-footnotes ol, .footnotes ol{ margin:0; padding-left:22px; }
.doc-footnotes li, .footnotes li{ font-family:var(--font-serif); font-size:var(--fs-fine); color:var(--text-muted); line-height:1.6; margin-bottom:10px; }
.doc-footnotes li:target, .footnotes li:target{ background:rgba(201,168,76,0.10); }
.footnotes a{ color:var(--gold); }
.fn-ref{ color:var(--gold); text-decoration:none; }
.fn-ref:hover{ text-decoration:underline; }
.fn-back{ margin-left:0.4em; text-decoration:none; font-size:var(--fs-body); opacity:0.7; }
.fn-back:hover{ opacity:1; }
sup{ line-height:0; }

/* ── Footer strip ─────────────────────────────────────────────── */
.doc-footer{ margin-top:48px; padding-top:18px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:var(--fs-label); color:var(--text-muted); letter-spacing:0.08em; }

/* ── Mobile ───────────────────────────────────────────────────────
   Header padding tightens to match main.css's mobile .reading-surface /
   .page-hero (both ~20px horizontal). The .page-title stays at the shared
   38px hero on mobile — that is the site-wide standard for every .page-title,
   so no per-page override here. Breakpoint matches main.css (700px). */
@media (max-width: 700px){
  .doc-header{ padding:22px 20px 18px; }
  /* briefing.css sets the desktop .reading-surface padding, so it must set the
     mobile value too — otherwise main.css's mobile rule is overridden and the
     surface keeps its 48px side padding on phones. */
  .reading-surface{ padding:28px 20px 60px; }
}