/* GBTT Design System — shared tokens + utility classes (v1.2 SCOPED)
   Terminal/Bloomberg tone · broadsheet typography · Union palette accents.
   ALL selectors are scoped under .gbtt-v2 so they cannot collide with
   the bespoke article-page CSS (.brand, .stats-bar, .duty-countdown,
   .prose, .callout, .aside-box, .data-table, .breakdown-bar, .chart,
   .note, .share-bar, .strapline, .updated, .wrap, etc.) used by the
   23 existing article files (diesel-dividend, ghost-population,
   stamp-duty, …). The body element itself stays unstyled. */

/* Design tokens scoped to .gbtt-v2 ONLY. Previously these lived on :root,
   which silently overrode every existing article's own --ink / --bg / etc.
   declarations and rendered article body text invisible (dark on dark).
   Keeping them inside .gbtt-v2 means the chrome (ticker / nav / newsletter
   / footer) still resolves them via inheritance, while the bespoke article
   pages keep their own design tokens intact. */
.gbtt-v2 {
  /* Core surfaces */
  --ink: #0B0F14;
  --ink-soft: #151A21;
  --ink-border: #1F2630;
  --paper: #F3EFE6;
  --paper-soft: #ECE7DB;
  --paper-dim: #E3DECF;

  /* Patriotic accents */
  --uk-red: oklch(58% 0.22 25);
  --uk-red-bright: oklch(64% 0.22 25);
  --uk-blue: oklch(38% 0.14 255);
  --uk-blue-light: oklch(58% 0.14 255);

  /* Signal / status */
  --signal-green: oklch(70% 0.18 145);
  --signal-amber: oklch(80% 0.17 75);
  --alert: oklch(60% 0.22 25);

  /* Utility */
  --rule: rgba(11, 15, 20, 0.15);
  --rule-soft: rgba(11, 15, 20, 0.08);
  --rule-dark: rgba(243, 239, 230, 0.14);
  --muted: rgba(11, 15, 20, 0.62);
  --muted-dark: rgba(243, 239, 230, 0.62);

  /* Typography */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Box-sizing inside scope only — leaves the body and any non-scoped
   article markup untouched. */
.gbtt-v2, .gbtt-v2 * { box-sizing: border-box; }

/* Defensive resets — protect chrome elements from CSS leakage in the
   bespoke article inline <style> blocks. Several articles include a
   global `svg { width: 100%; background: ...; border: ... }` (intended
   for data-viz figures in the article body) which scales the small
   Reticle logo in the chrome up to ~115px and surrounds it with a box.
   Setting width/height to `revert` falls back to the SVG's own width
   and height attributes; the background and border resets neutralise
   the article's data-viz framing. No article CSS is touched. */
.gbtt-v2 svg, .gbtt-v2 img {
  width: revert;
  height: revert;
  max-width: 100%;
  background: none;
  border: 0;
}

/* Root scope: typography defaults + surface colour. The body element
   itself is intentionally NOT styled so existing article pages render
   with their own bespoke styles unaffected. */
.gbtt-v2 {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}

.gbtt-v2 a { color: inherit; }

/* Terminal tickers & data numerics */
.gbtt-v2 .mono { font-family: var(--mono); }
.gbtt-v2 .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.gbtt-v2 .kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--muted);
}
.gbtt-v2 .rule-h { height: 1px; background: var(--rule); }
.gbtt-v2 .rule-v { width: 1px; background: var(--rule); }

/* Data-up / data-down */
.gbtt-v2 .up { color: var(--uk-red); }
.gbtt-v2 .down { color: var(--signal-green); }

/* ── TopNav universal wrap — applies at every viewport ────────────
   The nav is defensively wrappable: when there's room for everything
   on one line (desktop), `flex-wrap: wrap` is a no-op. When content
   overflows the viewport (phones, narrow windows, large nav menus),
   items break onto a second line instead of forcing horizontal
   scroll. Pulling these rules out of @media keeps the nav usable
   even if a viewport-specific rule fails to trigger. */
.gbtt-v2 nav > div,
.gbtt-v2 nav > div > div {
  flex-wrap: wrap !important;
  max-width: 100% !important;
}
.gbtt-v2 nav > div > div { margin-left: 0 !important; }
.gbtt-v2 .live::before { content: "● "; color: var(--uk-red); animation: gbttv2-pulse 1.8s infinite; }
@keyframes gbttv2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Marquee */
.gbtt-v2 .marquee-track { display: flex; gap: 40px; white-space: nowrap; animation: gbttv2-marquee 60s linear infinite; }
@keyframes gbttv2-marquee { to { transform: translateX(-50%); } }

/* Typography helpers */
.gbtt-v2 .serif-display { font-family: var(--serif); font-weight: 500; letter-spacing: -1px; line-height: 1.02; }
.gbtt-v2 .serif-italic { font-style: italic; font-weight: 400; }

/* Stat blocks */
.gbtt-v2 .stat-big { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -1.5px; line-height: 1; }

/* ════════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT — < 768px
   The v1.2 chrome was designed desktop-first with hardcoded inline
   styles in the React components (CSS Grid columns, large display
   fonts, generous padding). Rather than refactor every component,
   the rules below override those inline styles using attribute
   selectors and `!important` so the layout stacks cleanly on phones
   without touching any JSX.
   Scope is .gbtt-v2 only — never affects bespoke article CSS.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Stop body horizontal scroll when wide content overflows. */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Force any inline CSS Grid container to stack its children. The
     attribute selector catches React's runtime style="grid-template-
     columns: …" output, regardless of the column ratio used. */
  .gbtt-v2 [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Hero / display headlines. Several components hardcode 44–260px
     font sizes inline; cap them so they fit on a 360–430px screen. */
  .gbtt-v2 h1[style*="font-size"],
  .gbtt-v2 h2[style*="font-size"],
  .gbtt-v2 [style*="font-size: 260"],
  .gbtt-v2 [style*="font-size: 200"],
  .gbtt-v2 [style*="font-size: 160"],
  .gbtt-v2 [style*="font-size: 140"],
  .gbtt-v2 [style*="font-size: 120"],
  .gbtt-v2 [style*="font-size: 112"],
  .gbtt-v2 [style*="font-size: 100"],
  .gbtt-v2 [style*="font-size: 90"],
  .gbtt-v2 [style*="font-size: 80"],
  .gbtt-v2 [style*="font-size: 76"],
  .gbtt-v2 [style*="font-size: 72"],
  .gbtt-v2 [style*="font-size: 64"],
  .gbtt-v2 [style*="font-size: 60"],
  .gbtt-v2 [style*="font-size: 56"],
  .gbtt-v2 [style*="font-size: 54"],
  .gbtt-v2 [style*="font-size: 52"],
  .gbtt-v2 [style*="font-size: 48"],
  .gbtt-v2 [style*="font-size: 46"],
  .gbtt-v2 [style*="font-size: 44"] {
    font-size: clamp(1.85rem, 9vw, 2.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
  }

  /* Reduce inline section padding from 80–110px down to a sensible
     mobile gutter, but only on the outer section/footer wrappers. */
  .gbtt-v2 section[style*="padding"],
  .gbtt-v2 footer[style*="padding"] {
    padding: 48px 20px !important;
  }

  /* Inner padded blocks (cards, stat tiles): trim horizontal padding. */
  .gbtt-v2 [style*="padding: 32px"],
  .gbtt-v2 [style*="padding: 28px"],
  .gbtt-v2 [style*="padding: 22px"] {
    padding: 20px 16px !important;
  }

  /* TopNav — collapse cleanly on mobile.
     The component renders three nested flex levels:
       <nav>
         <div flex>            <-- 1st level: logo / nav items / search
           <a>Logo</a>
           <div flex marginLeft:auto>   <-- 2nd level: 6 nav links
           <div flex>          <-- 2nd level: search input + subscribe
     For the brand row + nav links + subscribe to all wrap onto
     multiple lines, every flex container in this subtree needs
     flex-wrap: wrap, the marginLeft:auto needs neutralising (it
     pushes the nav items off-screen on a narrow viewport), and
     fixed-width inputs need hiding so they don't force overflow. */
  .gbtt-v2 nav,
  .gbtt-v2 nav > div,
  .gbtt-v2 nav > div > div {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    padding: 12px 16px !important;
    max-width: 100% !important;
  }
  .gbtt-v2 nav > div > div {
    padding: 0 !important;
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start !important;
  }
  /* Nav links: smaller, tighter. */
  .gbtt-v2 nav a, .gbtt-v2 nav button {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }
  /* Hide desktop search input on mobile — it has a fixed 160px width
     that forces horizontal overflow. The archive search lives below
     the hero anyway. Subscribe button stays. */
  .gbtt-v2 nav input { display: none !important; }

  /* Side-by-side stat blocks with a left rule: drop the rule on
     mobile (it leaves an awkward orphan vertical line). */
  .gbtt-v2 [style*="border-left"] {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Mission page timeline (MTimeline) — the desktop layout uses an
     absolutely-positioned horizontal rule at top: 58 that connects
     the seven event dots across the row. Once the events are stacked
     vertically (forced by the generic grid-template-columns:1fr rule
     above) that line becomes a stray horizontal stripe through the
     top of the section. Hide it on mobile. Same applies to any other
     thin horizontal rule positioned absolutely at top: 58. */
  .gbtt-v2 div[style*="position: absolute"][style*="top: 58px"][style*="height: 1px"] {
    display: none !important;
  }
  /* Give each stacked timeline event a left rule + indent so the
     dots line up against a vertical spine — keeps the "timeline"
     metaphor on mobile. The dots already render at the start of
     each event card. */
  .gbtt-v2 div[style*="position: relative"][style*="padding-right: 20px"] {
    padding-left: 18px !important;
    padding-right: 0 !important;
    border-left: 1px solid rgba(243,239,230,0.18) !important;
  }

  /* Search bar (homepage): full-width row, count drops below input. */
  .gbtt-v2 .home-search-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .gbtt-v2 .home-search-count { text-align: left; }

  /* Search results grid: single column. */
  .gbtt-v2 .search-results-grid {
    grid-template-columns: 1fr !important;
  }
  .gbtt-v2 .search-card {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}