/* Styling for the shared header and footer that scripts/inject-chrome.js
 * writes into every page taking them.
 *
 * Split out of tools/_shared/flow.css, which is where #mainNav lived and which
 * only three of the 53 in-scope pages link. Injecting the header without this
 * file would have shipped unstyled markup onto 25 insights pages. It is linked
 * by the head partial, so every page that takes chrome also gets the styling
 * for it.
 *
 * Filled in at Task 7, and deliberately empty until then so that the head
 * partial links a file which resolves rather than one that 404s.
 *
 * Every nav selector below is scoped under #mainNav.chrome-nav rather than a
 * bare #mainNav or a bare .nav-* class, because this file is linked by the
 * head partial on EVERY in-scope page, index.html included, and the
 * homepage's own bespoke nav also uses id="mainNav" (with .nav-wordmark
 * inside it) and Tailwind padding classes. An ID selector beats a class
 * regardless of source order, so an unscoped #mainNav{padding:...} here would
 * silently change the homepage's nav padding on a page the manifest marks
 * nav: null. renderHeader() puts class="chrome-nav" on the <nav> it writes,
 * so the shared rules reach only the navigation this injector owns.
 */

/* ---------- nav ---------- */
#mainNav.chrome-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.5rem;background:rgba(240,233,220,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
#mainNav.chrome-nav .nav-lockup{display:flex;align-items:baseline;gap:.7rem;text-decoration:none}
#mainNav.chrome-nav .nav-wordmark{height:26px;width:auto;display:block;transform:translateY(2px)}
#mainNav.chrome-nav .nav-tagline{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;display:none}
#mainNav.chrome-nav .nav-links{display:flex;align-items:center;gap:1.25rem}
/* .nav-links a is scoped with :where(#mainNav.chrome-nav) rather than a plain
 * #mainNav.chrome-nav ancestor selector, because :where() contributes ZERO
 * specificity of its own: the whole selector still computes as (0,1,1), same
 * as a bare ".nav-links a", while still requiring the #mainNav.chrome-nav
 * ancestor for the collision protection every other rule in this file has.
 * That distinction is load-bearing. The CTA anchor is simultaneously a
 * .nav-links child AND a .btn-drawn.is-small (drawn-controls.css), and that
 * file sets font-size:.88rem on .btn-drawn.is-small at specificity (0,2,0),
 * which beats a bare ".nav-links a" (0,1,1) today, so .88rem is what actually
 * renders. A plain #mainNav.chrome-nav .nav-links a is (1,2,1), and an ID
 * always outranks a class count regardless of tier, so that form would flip
 * the winner to .nav-links a's .9rem, moving the CTA's rendered width a
 * fraction of a pixel and repainting its hand-drawn SVG border along a
 * different path. Measured 2026-09-01: this alone was the whole of a 1555px
 * diff on the three flow.css pages that must stay byte-identical, and
 * :where(#mainNav.chrome-nav) .nav-links a measures font-size:14.08px,
 * width:105.656px on the CTA, byte-for-byte what flow.css always rendered. */
:where(#mainNav.chrome-nav) .nav-links a{color:var(--ink-muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .15s}
:where(#mainNav.chrome-nav) .nav-links a:hover{color:var(--orange)}
/* .nav-cta is a .btn-drawn.is-small in the markup and its border is drawn by
 * /assets/drawn-controls.css, so this rule stays EXACTLY as flow.css had it.
 * An earlier draft added a border, padding and min-height to make the button
 * stand alone, which would have put a SECOND real border around every existing
 * nav CTA and moved the three flow.css pages, contradicting the byte-identical
 * check in Step 6. A page wanting the standalone button opts into
 * .nav-cta-plain below instead. */
#mainNav.chrome-nav .nav-cta{white-space:nowrap}
#mainNav.chrome-nav .nav-links .nav-tools,#mainNav.chrome-nav .nav-links .nav-fun,#mainNav.chrome-nav .nav-links .nav-team{display:none}
@media (min-width:640px){#mainNav.chrome-nav .nav-links .nav-tools,#mainNav.chrome-nav .nav-links .nav-fun,#mainNav.chrome-nav .nav-links .nav-team{display:inline}}
@media (min-width:768px){#mainNav.chrome-nav .nav-tagline{display:inline}#mainNav.chrome-nav .nav-wordmark{height:30px}}

/* #mainNav is position:fixed, so a page carrying it needs the offset that
 * flow.css already gave the three pages that had one. Scoped with :has so that
 * a page taking no header keeps its own top spacing. */
body:has(#mainNav.chrome-nav){padding-top:4.5rem}

/* ---------- footer ---------- */
.site-footer{max-width:46rem;margin:3rem auto 0;padding:2rem 1.5rem;border-top:1px solid var(--rule-soft);color:var(--ink-muted);font-size:.9rem}
/* Fix round 1 (Task 8 review), CRITICAL 1: worldcuppredictor/index.html loads
 * no page-level `a{color}` rule of its own, unlike every insights page (each
 * carries its own `a{color:var(--orange)}` in its generated <style> block),
 * so its injected footer link fell through to the browser default, blue and
 * underlined. Scoped here instead of relying on each host page to supply its
 * own link colour, which is the fix the reviewer asked for: this beats both
 * the browser default and Tailwind preflight's `a{color:inherit}` regardless
 * of which pages load Tailwind, since a class selector always outranks a
 * bare element one. The underline is explicit rather than inherited, so a
 * page whose reset removes the browser default (Tailwind's preflight did on
 * privacy.html and terms.html until Task 10, and on shaun.html until it was
 * rebuilt on paper on 2026-09-05) still marks the link as a link by a means
 * other than colour alone. No page carrying this footer loads the play CDN
 * any more, and the explicit underline stays precisely because that can
 * change again without anyone revisiting this rule. */
/* Split by ground on 2026-09-03. Measured live across every page carrying
 * the injected footer: all of them sat on --paper #F0E9DC except shaun.html,
 * which was then the last .site-footer-dark page on #0a0a0a. --orange
 * measured 3.12:1 on the cream ones at 12px to 14.4px regular, which is a
 * WCAG AA failure with no large-text exemption available at that size, while
 * the same colour measured 5.26:1 on the dark one and was right where it was.
 * Darkening both would have traded a cream failure for a dark one at 3.64:1,
 * so the dark footer kept --orange by its own more specific rule rather than
 * by an exception written into the token.
 *
 * shaun.html moved onto paper on 2026-09-05, so the second rule below now
 * matches no shipping page. It stays because it is the CSS half of
 * renderFooter()'s darkFooter branch, which is still live in the generator and
 * is unit-tested in test/chrome.test.js by 'renderFooter pairs the
 * white-period wordmark with a dark ground and the black-period one with
 * paper'. Delete it and that branch would emit a class with nothing behind it,
 * so the next dark page would fail AA quietly rather than on a number. */
/* --orange-deep rather than a new name or a literal, because tokens.css is
 * a byte-identical transcription of the seed deck's 76 canonical tokens
 * plus 14 legacy aliases, and test/tokens.test.js freezes BOTH that file
 * and the vocabulary any shipping file may use. A fifteenth colour name
 * fails that guard by design, which is the guard working rather than an
 * obstacle: the palette is meant to stay closed. --orange-deep measures
 * 4.51:1 on --paper against the 4.5 floor, so the margin is 0.01 and the
 * contrast assertion in test/chrome.test.js is what makes that safe to
 * ship: move --paper, or this token, and it fails on the number rather
 * than going quietly under. It is 4.11:1 on --paper-2, so a footer that
 * ever moves to that ground needs its own answer, and the same test will
 * say so because it measures the ground each page actually paints. */
.site-footer a{color:var(--orange-deep);text-decoration:underline}
.site-footer.site-footer-dark a{color:var(--orange)}
/* Fix round 1, CRITICAL 2: privacy.html, terms.html and shaun.html were all
 * still the legacy v1 dark page (bg-dark, #0a0a0a) at the time. --ink-muted
 * is tuned for the cream background every other in-scope page uses and
 * measured 2.60:1 against #0a0a0a, well under the 4.5:1 AA text requirement;
 * --ink-faded already exists as a token and measured 5.21:1 against the same
 * #0a0a0a (--orange measured 5.26:1 there too, so the link rule above
 * already cleared AA on these pages without a separate override).
 * .site-footer-dark is written only for page.darkFooter pages by
 * renderFooter() in inject-chrome.js, reusing the same signal that already
 * picks the white-period wordmark, rather than a media query or a
 * data-theme attribute (test/tokens.test.js forbids both across the whole
 * shipping set). Task 10 moved privacy.html and terms.html onto the
 * paper-and-ink palette and cleared their darkFooter flag, and 2026-09-05 did
 * the same for shaun.html, so DARK_FOOTER is empty and this rule applies to no
 * shipping page. Kept for the reason given above the link rule: it is the CSS
 * half of a generator branch that is still live. */
.site-footer.site-footer-dark{color:var(--ink-faded)}
/* .footer-wordmark-link and .footer-wordmark stay UNSCOPED, deliberately, and
 * WITHOUT the margin-bottom the Task 9 design spec gives .footer-wordmark-link
 * for its own <p class="footer-line"> layout. Both class names are already
 * live today on the tool pages' own hand-authored footers (allowable-expenses
 * among them), which use a <br> for the same vertical gap rather than margin,
 * and neither page wraps that footer in .site-footer, since the injected
 * <footer class="site-footer"> markup itself is Task 8's job, not this one.
 * margin-bottom:.75rem is not consumed by anything live yet, and index.html
 * and team.html reuse .footer-wordmark-link for their own bespoke footer
 * without ever setting margin-bottom themselves, so adding it here would not
 * be overridden there, it would silently ADD a 12px gap to both. Measured
 * 2026-09-01: this was the whole of the +12px height moves on both pages.
 * Task 8 owns re-adding it once .site-footer actually wraps something, scoped
 * so it cannot repeat this leak. */
.footer-wordmark-link{display:inline-flex}
.footer-wordmark{height:22px;width:auto}
.footer-line{margin:0}

/* Opt-in standalone button, for a page that does not load drawn-controls.css.
 * Never applied by default, because the default has to reproduce exactly what
 * the existing nav pages already render. */
.nav-cta-plain{border:1px solid var(--rule);border-radius:var(--radius-1);padding:.4rem 1rem;min-height:44px;display:inline-flex;align-items:center;color:var(--ink);font-weight:600}

/* ---------- insights call to action ---------- */
.insight-cta{max-width:46rem;margin:3rem auto 0;padding:1.5rem;border:1px solid var(--rule-soft);border-radius:var(--radius-2);background:var(--paper-2)}
.insight-cta-head{font-family:var(--font-display);font-size:var(--fs-h3);margin:0 0 .5rem;color:var(--ink)}
.insight-cta-body{margin:0 0 1rem;color:var(--ink-muted)}
.insight-cta-link{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.25rem;border:1px solid var(--rule);border-radius:var(--radius-1);color:var(--ink);font-weight:600;text-decoration:none}