/* Data Stories colour scheme for the standalone Beyond Chunks page.
   1. Defines the same colour tokens as style.css, so the masthead and footer match the other stories.
   2. Points the page's own variables at those tokens, so text, links, charts and cards use the same palette.
   3. Follows the system light / dark setting, like every other Data Stories page. The page's manual toggle is hidden.
   Loaded after the page's own <style>, so these rules win. Fonts are left as the page has them. */

:root {
  /* the Data Stories tokens (copied from style.css; keep the two in step) */
  --bg: #ffffff; --surface: #ffffff; --text: #2d2e2d; --muted: #5b5b5b; --faint: #858585; --line: #e2dedd;
  --accent: #a34743; --accent-soft: #f6eceb; --context: #a58f8c; --brand: #002147; --brand-line: #ce261e;
  --wordmark: #002147;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* the Beyond Chunks page's variables, pointed at the Data Stories tokens */
  --page: var(--bg); --ink: var(--text); --ink-2: var(--muted); --surface-2: #f6f5f4;
  --grid: var(--line); --base: #cdc8c6; --border: rgba(45, 46, 45, .12);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --violet: #6250d6; --yellow: #eda100;
  --good: #1f8a4c; --good-text: #17663a; --critical: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214; --surface: #17181b; --text: #ecebea; --muted: #b3aeac; --faint: #8a8482; --line: #2b2a2c;
    --accent: #db6b65; --accent-soft: #2e1f1f; --context: #6b5956; --wordmark: #ecebea;
    --surface-2: #1f2023; --base: #3a3837; --border: rgba(255, 255, 255, .12);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --violet: #9085e9; --yellow: #c98500;
    --good: #3fbf6f; --good-text: #3fbf6f; --critical: #ef6b63;
    color-scheme: dark;
  }
}
/* the page's manual dark-mode toggle: other stories follow the system setting, so hide it */
#themeBtn { display: none !important; }

/* ---- masthead and footer, same as style.css (class names avoid the page's own .bar / .wrap) ---- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.masthead { border-top: 4px solid var(--brand); box-shadow: inset 0 4px 0 -2px var(--brand-line);
            border-bottom: 1px solid var(--line); background: var(--surface); }
.ds-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.wordmark { font: 700 22px/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; color: var(--wordmark); }
.masthead nav { display: flex; align-items: center; gap: 4px; }
.masthead nav a { text-decoration: none; font-size: 15px; font-weight: 550; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.masthead nav a:hover { color: var(--text); background: var(--accent-soft); }
.masthead nav a[aria-current="page"] { color: var(--accent); }
.masthead nav a.nav-icon { display: inline-grid; place-items: center; padding: 8px; color: var(--muted); }
.masthead nav a.nav-icon:hover { color: #0a66c2; }
@media (prefers-color-scheme: dark) { .masthead nav a.nav-icon:hover { color: #71b7fb; } }
.masthead nav a.nav-icon svg { display: block; flex: none; }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; padding: 22px 0; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }