/* Styles shared by every page with the site nav: the fonts, the colour
   tokens, the reset, base type, the nav, its phone layout, the NFL submenu and
   the footer. Each page links this just before its own <style>, so page rules
   still come after these. scripts/verify_shared_css.test.js keeps the pages
   and this file in step. GitHub Pages caches it for 10 minutes, so every page
   links it as site.css?v=<tag>; after a change big enough that new pages would
   look broken with the old file, bump the tag on all six hand-made pages and
   re-run the NFL port, which copies it from the calculator.

   The look ("Box Score", 2026-10-26): a newsprint sports page. Paper ground,
   ink text, one red accent, square corners, rules instead of boxes. Headlines
   and nav in Barlow Condensed, body in Source Serif 4, numbers in Roboto Mono.
   The fonts are served from assets/fonts/ because every page's CSP has
   font-src 'self', which blocks Google Fonts. */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('fonts/barlow-condensed-800.woff2') format('woff2'); }
/* Source Serif 4 and Roboto Mono are variable fonts: one file, every weight. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url('fonts/source-serif-4.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap;
    src: url('fonts/source-serif-4-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 100 700; font-display: swap;
    src: url('fonts/roboto-mono.woff2') format('woff2'); }

/* Colour tokens. Every text colour here passes WCAG AA (4.5:1) on --paper:
   --ink 15.3, --ink-2 10.3, --muted 8.1, --red 5.7, --green 5.7, --amber 5.6,
   and all of them still pass on --paper-2 (the weakest, --amber, is 5.0).
   --rule-soft is 3.3:1 and is for rules and dots only, never text. */
:root {
    --paper: #f3f0e8;
    --paper-2: #e9e4d8;      /* sunk panels, hover rows */
    --field: #fbfaf6;        /* inputs */
    --ink: #1a1a1a;
    --ink-2: #3a3833;        /* body copy under a headline */
    --muted: #4a4740;        /* labels, captions, footnotes */
    --rule: #1a1a1a;
    --rule-soft: #8a8478;    /* dotted row rules */
    --rule-faint: #cfc8b8;   /* hairlines between blocks */
    --red: #b3261e;          /* the accent; also NO and errors */
    --green: #1d6b3a;        /* YES, returns, success */
    --amber: #865400;        /* warnings, flags */
    --blue: #1f4e8c;         /* a fourth series colour (WR badges), 7.6:1 */
    /* Election forecast ratings, as map FILLS (the home page's Senate map;
       the politics pages use the same values). Never text colours: Safe and
       Likely carry white text, Lean and Tossup carry ink. (2026-11-02) */
    --safe-d: #1f4e8c; --likely-d: #3a68a6; --lean-d: #b3c6e0;
    --safe-r: #8f1f18; --likely-r: #b3261e; --lean-r: #e8b0a6;
    --safe-i: #5f3f92; --likely-i: #6e4ea3; --lean-i: #cbbbe0;
    --tossup: #d9a93f; --no-race: #e6e1d6;
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --mono: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--serif); background: var(--paper); color: var(--ink);
    line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Site nav: the masthead. Text links in condensed capitals over a double rule;
   the active page is red. */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 24px;
    padding: 12px 28px;
    background: var(--paper); border-bottom: 3px double var(--rule);
}
.site-nav .brand {
    font-family: var(--display); font-weight: 800; font-size: 1.75rem;
    line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.site-nav .brand .accent { color: var(--ink); }
.site-nav .nav-tabs { display: flex; gap: 2px 20px; flex-wrap: wrap; align-items: center; }
.site-nav .nav-tabs a {
    padding: 6px 0; border: 0; background: none; color: var(--ink);
    text-decoration: none; font-family: var(--display); font-size: 1.1rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.site-nav .nav-tabs a:hover { color: var(--red); }
.site-nav .nav-tabs a.active { color: var(--red); }
.site-nav .nav-dd { position: relative; }
.site-nav .nav-dd-btn {
    padding: 6px 0; border: 0; background: none; color: var(--ink); cursor: pointer;
    font-family: var(--display); font-size: 1.1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.site-nav .nav-dd-btn:hover { color: var(--red); }
.site-nav .nav-dd-btn.has-active { color: var(--red); }
.site-nav .nav-dd-btn .caret { font-size: 0.8rem; margin-left: 3px; }
.site-nav .nav-dd-menu {
    position: absolute; top: calc(100% + 6px); left: -12px; min-width: 260px;
    background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--rule);
    padding: 6px 0; z-index: 100;
    display: none; flex-direction: column;
}
/* Invisible bridge so the cursor can travel from button to menu
   without crossing a non-hover dead zone. */
.site-nav .nav-dd-menu::before {
    content: ''; position: absolute; left: 0; right: 0;
    top: -10px; height: 10px;
}
.site-nav .nav-dd:hover .nav-dd-menu,
.site-nav .nav-dd:focus-within .nav-dd-menu { display: flex; }
.site-nav .nav-dd-menu a {
    padding: 8px 14px; font-size: 1.05rem; color: var(--ink);
}
.site-nav .nav-dd-menu a:hover { background: var(--paper-2); color: var(--red); }
.site-nav .nav-dd-menu a.active { color: var(--red); }
.site-nav .nav-spacer { flex: 1; }
.site-nav .bmc-btn {
    padding: 6px 12px; border: 2px solid var(--red); color: var(--red);
    font-family: var(--display); font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    text-decoration: none; white-space: nowrap; margin-left: 8px;
}
.site-nav .bmc-btn:hover { background: var(--red); color: var(--paper); }
/* ─── Phone and tablet nav ────────────────────────────── */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }
/* Menu-button layout below 1080px: the full nav needs about that much width
   in one row, so between 720 and ~1060px it wrapped onto two rows. */
@media (max-width: 1080px) {
    /* Visually hidden but focusable, so keyboard and screen-reader users can
       open the menu; display:none would take it out of the tab order. It
       stays display:none on desktop, where the menu is always open. The ring
       shows on the hamburger. */
    .site-nav .nav-toggle {
        display: block; position: absolute; width: 1px; height: 1px;
        margin: 0; opacity: 0; pointer-events: none;
    }
    .site-nav .nav-toggle:focus-visible ~ .nav-toggle-label {
        outline: 2px solid var(--red); outline-offset: 2px;
    }
    .site-nav { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .site-nav .brand { font-size: 1.5rem; }
    .site-nav .nav-toggle-label {
        display: flex; flex-direction: column; gap: 4px;
        cursor: pointer; padding: 10px 8px; margin-left: auto;
        background: transparent; border: 0;
    }
    .site-nav .nav-toggle-label span {
        display: block; width: 22px; height: 2px; background: var(--ink);
        transition: transform 0.2s, opacity 0.2s;
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    .site-nav .nav-spacer { display: none; }
    .site-nav .nav-tabs {
        order: 99; flex-basis: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        display: none; border-top: 1px solid var(--rule); padding-top: 4px;
    }
    .nav-toggle:checked ~ .nav-tabs { display: flex; }
    .site-nav .nav-tabs a,
    .site-nav .nav-dd-btn { width: 100%; text-align: left; padding: 10px 0; }
    .site-nav .nav-dd { width: 100%; }
    .site-nav .nav-dd-menu {
        position: static; display: flex !important;
        min-width: 0; width: 100%; margin: 0 0 6px;
        border: 0; padding: 0 0 0 14px;
    }
    .site-nav .nav-dd-menu::before { display: none; }
    .site-nav .bmc-btn {
        order: 100; flex-basis: 100%; text-align: center;
        margin-left: 0; display: none;
    }
    .nav-toggle:checked ~ .bmc-btn { display: block; }
}
/* Second-level nav submenu (NFL > Best Ball / Redraft). These rules only
   apply inside a .nav-dd-sub, so single-level dropdowns are unaffected. */
.site-nav .nav-dd-sub { position: relative; }
.site-nav .nav-dd-sub > .nav-dd-sub-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 8px;
    background: none; border: 0; cursor: default;
    padding: 8px 14px; font-family: var(--display); font-size: 1.05rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--ink); text-align: left;
}
.site-nav .nav-dd-sub > .nav-dd-sub-btn:hover { background: var(--paper-2); }
.site-nav .nav-dd-sub > .nav-dd-sub-btn.has-active { color: var(--red); }
.site-nav .nav-dd-sub > .nav-dd-sub-btn .caret { font-size: 0.7rem; }
.site-nav .nav-dd-sub-menu {
    display: none; position: absolute; top: -9px; left: 100%;
    min-width: 230px; flex-direction: column;
    background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--rule);
    padding: 6px 0; z-index: 60;
}
.site-nav .nav-dd-sub:hover > .nav-dd-sub-menu,
.site-nav .nav-dd-sub:focus-within > .nav-dd-sub-menu { display: flex; }
.site-nav .nav-dd-sub-menu a { padding: 8px 14px; }
.site-nav .nav-dd-sub-menu a:hover { background: var(--paper-2); color: var(--red); }
.site-nav .nav-dd-sub-menu a.active { color: var(--red); }
@media (max-width: 1080px) {
    /* No room to fly out sideways on a phone: indent in place instead. */
    .site-nav .nav-dd-sub-menu {
        display: flex; position: static; left: auto;
        border: 0; background: transparent;
        padding: 0 0 0 14px; min-width: 0;
    }
    /* Caret beside the label, as on the top-level buttons, not at the far edge. */
    .site-nav .nav-dd-sub > .nav-dd-sub-btn { padding: 8px 0; justify-content: flex-start; }
    /* The submenu opens below here, not to the side, so point its arrow down. */
    .site-nav .nav-dd-sub > .nav-dd-sub-btn .caret { transform: rotate(90deg); }
}

/* Footer, the same on every page: a double rule, the disclaimer, two links. */
.site-footer {
    /* The double rule runs edge to edge like the nav's; the text sits in the
       same 1200px column as the home page (1144px of content plus 28px gutters). */
    margin-top: 56px; padding: 14px max(28px, calc((100% - 1144px) / 2)) 32px;
    border-top: 3px double var(--rule);
    font-family: var(--mono); font-size: 0.75rem; color: var(--muted);
}
.site-footer .disclaimer-line { max-width: 760px; margin: 0 0 10px; line-height: 1.6; }
.site-footer .footer-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px 16px;
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--red); }
@media (max-width: 640px) { .site-footer { padding: 14px 16px 28px; } }

/* WCAG 2.2 (2.5.8) asks for a 24x24px minimum target. Padding enlarges the
   hit area of these short links without moving anything. */
.site-footer a,
footer a,
.nav-right a,
a.brand {
  padding: 4px 2px;
  display: inline-block;
}

/* Shared page pieces. A page header is a red kicker, a condensed capital
   headline and a serif dek. */
.kicker {
    font-family: var(--display); font-weight: 700; font-size: 1rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
    margin: 0 0 8px;
}
/* Not .num: the NFL app (nfl-shared/style.css) already has a .num class, and
   this file loads after it there. */
.headline {
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    line-height: 0.98; letter-spacing: 0;
    text-wrap: balance;
}
/* A data file that failed to load. One notice per page, shown where the
   missing content would have gone, with the page's controls for that content
   hidden. Built by each page's script: <strong> lead, a sentence, .why. */
.load-error {
    margin: 20px 0; padding: 14px 0 16px;
    border-top: 3px solid var(--red); border-bottom: 1px solid var(--rule);
    font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--ink);
}
.load-error strong {
    display: block; margin-bottom: 4px;
    font-family: var(--display); font-weight: 800; font-size: 1.4rem;
    line-height: 1.1; text-transform: uppercase; color: var(--red);
}
.load-error .why { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }