/* Chrome and type fit for the marketing layout and the home page (loaded after
   story.css): the phone menu and the header's active link, length-aware title
   sizes, the moment page, the top share row, and phone minimums for labels and
   tap targets. */

/* ---- Header ------------------------------------------------------------- */
/* Only the section you are in is highlighted (aria-current, set server-side);
   "Play" used to be gold on every page. */
/* The current section is ink with a 2px gold underline, not gold text. */
.lp-nav-links a.lp-nav-play { font-weight: inherit; color: inherit; }
.lp-nav-links a { white-space: nowrap; position: relative; color: var(--ink-700, #3b3229); }
.lp-nav-links a:not(.nav-cta):hover { color: var(--ink-900, #17130e); }
.lp-nav-links a[aria-current="page"] { font-weight: 600; color: var(--ink-900, #17130e); }
.lp-nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold-500, #b8892f); }
/* The header's keyboard ring is the site's: 2px gold with an offset (the browser's 1px blue showed on the home and /news bundles, which carry no global rule). */
.lp-nav-links a:focus-visible, .nav-logo:focus-visible, .lp-nav-links a.nav-cta:focus-visible { outline: 2px solid var(--focus, #a87a24); outline-offset: 2px; }
.site-nav .nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.lp-nav-sep { width: 1px; height: 20px; background: var(--rule-2, #d8d0c4); flex: none; }
/* For teams and the divider are in the bar only where they fit; the menu carries them. */
@media (max-width: 1000px) { .lp-nav-links .lp-hide-md { display: none; } }

/* The menu: every link the row hides (For teams: Meetings, MCP, Developers)
   and Sign in. A <details>, so it opens without script. Hidden above 1000px. */
.lp-menu { display: none; position: relative; flex: none; }
.lp-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; border: 1px solid var(--rule-3, #857864); border-radius: var(--r-2, 4px); color: var(--ivory, #1a1510); }
.lp-menu > summary::-webkit-details-marker { display: none; }
.lp-menu > summary:focus-visible { outline: 2px solid var(--gold, #8f661d); outline-offset: 2px; }
.lp-menu-bars, .lp-menu-bars::before, .lp-menu-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: var(--r-1, 2px); }
.lp-menu-bars { position: relative; }
.lp-menu-bars::before, .lp-menu-bars::after { content: ""; position: absolute; left: 0; }
.lp-menu-bars::before { top: -6px; }
.lp-menu-bars::after { top: 6px; }
.lp-menu[open] .lp-menu-bars { background: transparent; }
.lp-menu[open] .lp-menu-bars::before { top: 0; transform: rotate(45deg); }
.lp-menu[open] .lp-menu-bars::after { top: 0; transform: rotate(-45deg); }
.lp-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 200; min-width: 200px; display: flex; flex-direction: column; padding: 6px 0; background: var(--bg-void, #fefcf8); border: 1px solid var(--border, #d8d0c4); border-radius: var(--r-3, 8px); box-shadow: 0 10px 30px rgba(26, 21, 16, 0.14); }
.lp-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 18px; color: var(--ivory, #1a1510); text-decoration: none; font-size: 1rem; }
.lp-menu-panel a:hover, .lp-menu-panel a:focus-visible { background: var(--bg-card, #f4efe6); color: var(--gold-dim, #6e4d12); }
.lp-menu-panel a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-500, #b8892f); text-decoration-thickness: 2px; text-underline-offset: 6px; }

@media (max-width: 1000px) { .lp-menu { display: block; } }
.lp-menu > summary { width: 44px; height: 44px; }
.lp-menu-h { margin: 6px 0 0; padding: 8px 18px 4px; border-top: 1px solid var(--rule-2, #e4dccf); font: 500 12px/1 var(--font-data, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500, #675c50); }
@media (max-width: 760px) {
  .site-nav .nav-inner { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .lp-nav-links .nav-cta { padding: 8px 12px; }
  /* At least 40px wide and tall to a thumb ("Play" was 27px wide, "News" 36px). */
  .lp-nav-links a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 560px) {
  /* Sign in moves into the menu; at 500px it wrapped and pushed "Get started" off screen. */
  .lp-nav-links .lp-signin { display: none; }
  .lp-nav-links { gap: 4px; }
  .lp-nav-links .nav-cta { padding: 6px 10px; }
  .site-nav .nav-inner { padding-left: 14px; padding-right: 14px; gap: 8px; }
}

/* ---- Titles that fit ---------------------------------------------------- */
/* The default title is page-title size; display size is opt-in (.t-display,
   which titles.js adds at 48 characters or fewer). The rule is in components.css. */
.sf-h1 { overflow-wrap: break-word; }

/* The full question under a short headline reads as body text. */

/* ---- Moment page (/gallery/<slug>) --------------------------------------- */
.sf-moment { max-width: 860px; }
.sf-moment-hero { padding-bottom: 24px; border-bottom: 1px solid var(--border, #d8d0c4); }
.sf-moment .tp-label { font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim, #6e4d12); margin: 0 0 10px; }
.sf-moment .tp-sim { font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim, #7a7066); margin: 0 0 16px; }
.sf-moment-h1 { text-transform: none; }
.sf-moment .sf-section p, .sf-moment .sf-section li { line-height: 1.6; color: var(--text-primary, #2d2520); }
.sf-moment-keys { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--border-gold, rgba(154, 111, 34, 0.3)); }
.sf-moment-keys > li { position: relative; margin: 0 0 22px; }
.sf-moment-keys > li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-void, #fefcf8); border: 2px solid var(--gold, #8f661d); }
.sf-moment-keys > li p { margin: 0 0 6px; }
.sf-moment-k { font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim, #6e4d12); }
.sf-moment-walk { color: var(--gold-dim, #6e4d12); font-weight: 600; }
.sf-moment-seats, .sf-moment-sources { margin: 0; padding-left: 1.1em; }
.sf-moment-seats li, .sf-moment-sources li { margin: 0 0 6px; }
.sf-moment-sources a { color: var(--gold-dim, #6e4d12); overflow-wrap: anywhere; }
/* The Play it block (site.css styles it on the old layout). */
.sf-moment .tp-moment-play { margin: 4px 0 16px; }
.sf-moment .tp-moment-play-go { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font: 700 1rem/1 var(--sans, system-ui, sans-serif); padding: 14px 22px; min-height: 48px; border-radius: var(--r-3, 8px); text-decoration: none; background: var(--ivory, #1a1510); color: var(--bg-void, #fefcf8); }
.sf-moment .tp-moment-play-go:focus-visible { outline: 2px solid var(--gold, #8f661d); outline-offset: 2px; }
.sf-moment .tp-moment-play-goal { margin: 10px 0 0; color: var(--text-secondary, #6b6055); }
.sf-moment .tp-moment-play-goal span { font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim, #6e4d12); margin-right: 6px; }
.sf-moment .tp-moment-play-none { margin: 4px 0 16px; }

/* ---- Play a simulation on a seal page ----------------------------------- */
.sf-seal-play-goal { margin: 10px 0 0; color: var(--text-secondary, #6b6055); }
.sf-seal-play-goal span { font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim, #6e4d12); margin-right: 6px; }

/* ---- Share row under the headline ---------------------------------------- */
/* Equal-width buttons in one tidy row (wrapping ragged into three rows before).
   On the seal page it shows on phones only; the bottom row stays for desktop. */
.sf-share-top { margin: 14px 0 0; }
.tp-share .tp-share-set, .sf-cta .tp-share .tp-share-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.tp-share .tp-share-set .tp-btn, .sf-share-top .tp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--gold, #8f661d); border-radius: var(--r-1, 2px); color: var(--gold-dim, #6e4d12); font: 500 12px var(--mono, ui-monospace, monospace); letter-spacing: 0.04em; text-decoration: none; text-align: center; }
.tp-share .tp-share-set .tp-btn:hover { background: var(--gold, #8f661d); color: var(--bg-void, #fefcf8); }
/* On the seal and moment pages the top row is for phones; desktop has the row at the bottom. */
.sf-story-copy .sf-share-top, .sf-moment-hero .sf-share-top { display: none; }
@media (max-width: 760px) { .sf-story-copy .sf-share-top, .sf-moment-hero .sf-share-top { display: block; } }
@media (max-width: 420px) { .tp-share .tp-share-set .tp-btn { font-size: 12px; padding: 0 4px; letter-spacing: 0; } }

/* ---- Spacing and small things -------------------------------------------- */
/* "Next to settle" picked up styles.css's 140px section padding: a big empty gap. */
/* The footer's inline "Track record" link matches the footer links. */
.footer-ledger a { color: var(--text-dim, #7a7066); text-decoration: underline; text-underline-offset: 2px; }
.footer-ledger a:hover { color: var(--gold, #8f661d); }
/* "Copy embed code" was 19px tall on phones. */
.sf-embed-copy { min-height: 44px; padding: 0 16px; border: 1px solid var(--gold, #8f661d); border-radius: var(--r-1, 2px); background: transparent; color: var(--gold-dim, #6e4d12); font: 500 12px var(--mono, ui-monospace, monospace); cursor: pointer; }

/* Phones: no label under 12px (tags, avatars, card kickers, play keys). */
@media (max-width: 760px) {
  .sf-tag, .sf-play-k, .sf-play-tag, .sf-play-read-l span, .sf-question span,
  .sf-honest, .sf-sim-hero, .sf-basis, .sf-crumb, .lp-eyebrow, .lp-stamp, .sf-sim-label { font-size: 12px; }
  .sf-av { font-size: 12px; }
  .sf-av:not(.sf-av-sm):not(.sf-av-lg) { width: 30px; height: 30px; }
}

/* Small phones (under 370px): the row keeps Play, Get started and the menu; News
   is in the menu. Without this the menu button sat past the right edge at 320. */
@media (max-width: 400px) {
  .lp-nav-links .lp-nav-forecasts { display: none; }
  .site-nav .nav-inner { gap: 6px; }
}

/* The 404 pages on the marketing layout (site.css styled them on the old one). */
.tp-site .tp-404 { max-width: 1100px; width: calc(100% - 48px); margin: 0 auto; padding: 120px 0 72px; box-sizing: border-box; }
.tp-site .tp-404 .tp-lead { font-size: 1.125rem; max-width: 34em; }
.tp-site .tp-404 .tp-404-more { margin-top: 28px; font: 500 12px var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500, #675c50); }
.tp-site .tp-404 .tp-404-links { display: flex; flex-wrap: wrap; gap: 8px 8px; margin: 10px 0 0 -14px; padding: 0; list-style: none; }
.tp-site .tp-404 .tp-404-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--gold-dim, #6e4d12); text-decoration: underline; text-underline-offset: 3px; font: 500 15px var(--sans, system-ui, sans-serif); }
.tp-site .tp-404 h1 { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: clamp(2rem, 4vw, 2.6rem); margin: 0 0 12px; color: var(--ivory, #1a1510); }
.tp-site .tp-404 p { margin: 0 0 18px; }
.tp-site .tp-404 .tp-btn { display: inline-flex; margin-bottom: 8px; align-items: center; min-height: 44px; padding: 0 18px; margin-right: 8px; border: 1px solid var(--gold, #8f661d); border-radius: 2px; color: var(--gold-dim, #6e4d12); font: 500 12px var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.tp-site .tp-404 .tp-btn:hover { background: var(--gold, #8f661d); color: var(--bg-void, #fefcf8); }

/* ---- Proof line --------------------------------------------------------- */
/* The track record opens every footer: sealed, settled, hit (green), miss
   (red), Brier, as lining numerals. Here, not in components.css, because the
   static pages load chrome.css without the bundle (server.js NAV_CSS). */
.tp-proof-row { max-width: 1200px; margin: 0 auto; padding: 0 24px 20px; box-sizing: border-box; }
.tp-proofline { margin: 0; font: 500 12px/1.7 var(--font-data, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500, #675c50); text-align: center; font-variant-numeric: lining-nums tabular-nums; text-wrap: balance; }
.tp-proofline a { color: var(--ink-900, #17130e); text-decoration: underline; text-decoration-color: var(--gold-500, #b8892f); text-underline-offset: 3px; }
.tp-proofline span { white-space: nowrap; }
.tp-proofline b { color: var(--ink-900, #17130e); font-weight: 700; }
.tp-proofline b.h { color: var(--hit-700, #1d6550); }
.tp-proofline b.m { color: var(--miss-700, #9b2f1c); }
.tp-footer .tp-proofline { text-align: left; padding: 0 0 12px; }

/* ---- Tap targets: every header and footer link is 44px --------------------- */
/* Padding grows the hit box and an equal negative margin keeps the rows where
   they were (round 1 reached 40px on phones and ~30px on desktop). */
@media (min-width: 761px) {
  .lp-nav-links a:not(.nav-cta), .site-nav .nav-logo { padding-block: 12px; margin-block: -12px; }
  .lp-nav-links a.nav-cta { position: relative; }
  .lp-nav-links a.nav-cta::before { content: ""; position: absolute; inset: -4px 0; } /* the pill stays 36px; its hit area is 44px */
  .lp-nav-links a[aria-current="page"]::after { bottom: 6px; }
  .footer-links a { padding-block: 13px; margin-block: -13px; }
}
@media (max-width: 760px) {
  .lp-nav-links a, .site-nav .nav-logo { min-height: 44px; }
  .lp-nav-links a { min-width: 44px; }
  .footer-links a { min-height: 44px; }
}

/* ---- Onward row at the end of the static pages ----------------------------- */
.tp-onward { max-width: 1100px; margin: 40px auto 0; padding: 12px 24px 0; border-top: 1px solid var(--rule-2, #d8d0c4); display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; box-sizing: border-box; }
.tp-onward-l { font: 500 12px var(--font-data, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500, #675c50); }
.tp-onward a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-dim, #6e4d12); text-decoration: underline; text-underline-offset: 3px; font: 500 15px var(--sans, system-ui, sans-serif); }
.tp-onward a:hover { color: var(--ink-900, #17130e); }
.tp-onward a:focus-visible { outline: 2px solid var(--focus, #a87a24); outline-offset: 2px; }