/* assets/chrome.css — design tokens and the shared nav/footer.
 *
 * Tokens are the iOS Day Shift palette from iOS-App/UI/BrandKit.swift, expressed in
 * OKLCH so every neutral carries a little of the brand blue. The website and the app
 * are meant to look like the same company; that starts here.
 *
 * Loaded by EVERY page, before any page-specific stylesheet, so a page can still win
 * the cascade for its own body. */

:root {
  --ground: oklch(97.6% 0.004 265);
  --paper:  oklch(99.4% 0.002 265);
  --ink:    oklch(21% 0.017 265);
  --ink-2:  oklch(44% 0.014 265);
  --ink-3:  oklch(52% 0.013 265);
  --line:   oklch(91.5% 0.007 265);
  --accent: oklch(50% 0.196 265);
  --accent-hover: oklch(43% 0.19 265);
  --accent-soft: oklch(95.5% 0.024 265);
  /* One hue per door. The three lanes are three different KINDS of thing, so each gets
     its own hue -- but all at the same lightness and near-equal chroma, so they read as
     a set of peers rather than a hierarchy with one alarm in it. Red is deliberately not
     among them: on the web red means error, which is not what a free public dataset is.
     Every base clears WCAG AA on paper (6.24 / 6.57 / 5.65). */
  --lane-1:      oklch(50% 0.18 265);
  --lane-1-soft: oklch(95.5% 0.021 265);
  --lane-2:      oklch(50% 0.18 305);
  --lane-2-soft: oklch(95.5% 0.021 305);
  --lane-3:      oklch(50% 0.13 150);
  --lane-3-soft: oklch(95.5% 0.021 150);
  --night:       oklch(13% 0.012 280);
  --night-2:     oklch(17% 0.014 280);
  --night-line:  oklch(28% 0.016 280);
  --amber:       oklch(79% 0.16 78);
  --night-ink:   oklch(95% 0.006 80);
  --night-ink-2: oklch(70% 0.012 80);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.mono  { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.serif { font-family: 'Source Serif 4', Georgia, serif; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--paper); padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color: var(--paper); }

/* ---------------------------------------------------------------- nav */

/* The chrome is self-contained on purpose. Pages that define their own --accent or
   blanket `a { }` rules (census styles every link underlined and red) must not reach
   inside it, so these rules name their own colors and reset decoration explicitly. */
.site-header, .site-footer {
  --accent: oklch(50% 0.196 265);
  --accent-hover: oklch(43% 0.19 265);
  --ink:    oklch(21% 0.017 265);
  --ink-2:  oklch(44% 0.014 265);
  --ink-3:  oklch(52% 0.013 265);
  --line:   oklch(91.5% 0.007 265);
  --paper:  oklch(99.4% 0.002 265);
  --ground: oklch(97.6% 0.004 265);
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
}
/* NIGHT CHROME, AND THE ONE PAGE THAT GETS IT. The site is light everywhere. /app is the
   single exception: it ships the product's two identities (Day Shift, Night Shift) and
   the visitor flips between them, so the chrome has to follow or a light bar sits above
   a near-black page and reads as a seam -- two sites stacked.

   Only [data-shift="night"] triggers this, and only /app sets it. There is deliberately
   no second, static "make this page dark" flag: a page that wants to be dark is a page
   that has drifted from the site. The rules redefine the chrome's VARIABLES rather than
   restating its rules, so layout, spacing and type stay in exactly one place and a nav
   change can never land in one theme and miss the other.

   The accent is amber here: blue at this lightness fails contrast on a near-black ground.
   These are the Night Shift surfaces from app.css, which used to hold its own copy of
   this block -- that duplication is how the two could drift. */
[data-shift="night"] .site-header,
[data-shift="night"] .site-footer {
  --accent: #ffb000;
  --accent-hover: #ffc233;
  --ink:    #f4f1ea;
  --ink-2:  #a8a399;
  --ink-3:  #8a8478;
  --line:   #1c1a14;
  --paper:  #06050a;
  --ground: #06050a;
}
/* The CTA is a filled amber button: its label must sit on the dark ground, not on
   paper, or it inherits --paper and turns near-black-on-amber-on-black. */
[data-shift="night"] .site-header .nav-cta,
[data-shift="night"] .site-header .nav-cta:hover { color: #0c0a07; }

.site-header *, .site-footer * { font-family: inherit; text-transform: none; letter-spacing: normal; }
/* `border: 0` matters as much as `text-decoration`. /legal/_shared.css underlines every
   link with a BORDER-BOTTOM rather than text-decoration, loads after this file, and so
   won every nav link at equal specificity -- the guard below was written for the
   underline it could see. Reset both, or the next stylesheet that underlines by border
   lands in the nav again. `.nav-link.on` re-adds its own border AFTER this rule. */
.site-header a, .site-footer a { text-decoration: none; border: 0; }
.site-header a:hover, .site-footer a:hover { text-decoration: none; }

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }

.site-header .site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 clamp(16px, 5vw, 72px); height: 72px;
}

.site-header .nav-left { display: flex; align-items: center; gap: 44px; }
.site-header .nav-right { display: flex; align-items: center; gap: 20px; }

.site-header .brand, .site-footer .brand {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  display: flex; align-items: center; gap: 11px;
  color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
  text-transform: none; text-decoration: none;
}
.site-header .brand:hover, .site-footer .brand:hover { color: var(--ink); }
.site-header .brand img { display: block; width: 30px; height: 30px; }
.site-footer .brand { font-size: 15px; }
.site-footer .brand img { display: block; width: 24px; height: 24px; }
/* The wordmark as on the B2B product: QUIZ in the product blue, a small TM. */
.site-header .brand b, .site-footer .brand b { font-weight: inherit; color: #2f6fe0; }
[data-shift="night"] .site-header .brand b, [data-shift="night"] .site-footer .brand b { color: #4a86f0; }
.site-header .brand sup, .site-footer .brand sup { font-size: .5em; font-weight: 400; color: var(--ink-3); margin-left: 1px; }

.site-header .nav-links { display: flex; gap: 30px; }

.site-footer .foot-col h2, .site-footer .foot-base {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 1.6px;
}
.site-footer .foot-col h2 { text-transform: uppercase; }

.site-header .nav-link { font-size: 14px; color: var(--ink-2); white-space: nowrap; text-transform: none; letter-spacing: normal; }
.site-header .nav-link:hover { color: var(--ink); }
.site-header .nav-link.on {
  color: var(--ink); font-weight: 500;
  border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}

.site-header .nav-cta {
  background: var(--accent); color: var(--paper);
  font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 6px;
  white-space: nowrap;
}
.site-header .nav-cta:hover { background: var(--accent-hover); color: var(--paper); }

/* ------------------------------------------------------------- footer */

.site-footer {
  background: var(--ground); border-top: 1px solid var(--line);
  padding: 52px clamp(16px, 5vw, 72px) 36px;
}

.site-footer .foot-cols { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 36px; }

.site-footer .foot-brand p {
  font-size: 13px; line-height: 1.65; color: var(--ink-3);
  margin: 12px 0 0; max-width: 250px;
}

.site-footer .foot-col { display: flex; flex-direction: column; gap: 10px; }
.site-footer .foot-col h2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink); margin: 0 0 3px; font-weight: 500;
}
.site-footer .foot-col a { font-size: 13px; color: var(--ink-3); }
.site-footer .foot-col a:hover { color: var(--ink); }

.site-footer .foot-base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.8px; color: var(--ink-3);
}

@media (max-width: 900px) {
  .site-footer .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .nav-links { display: none; }
  .site-header .nav-left  { gap: 0; }
}

/* Below ~420px the brand plus "Sign in" plus the CTA cannot share one row without
   pushing the page sideways. The CTA keeps its label and the secondary link yields. */
@media (max-width: 420px) {
  .site-header .site-nav { gap: 12px; padding: 0 16px; }
  .site-header .nav-right { gap: 12px; }
  .site-header .nav-right .nav-link { display: none; }
  .site-header .nav-cta { padding: 9px 14px; font-size: 13px; }
  .site-header .brand { font-size: 15px; gap: 9px; }
}

@media (max-width: 560px) {
  .site-footer .foot-cols { grid-template-columns: 1fr; gap: 28px; }
  .site-header .site-nav { height: 64px; }
}

/* Research volume bar. Sits under the site nav on every Research page, above the
   census's own section bar: this says WHICH VOLUME, that says where inside one. */
.rbar{border-bottom:1px solid var(--rule,#e3e1dc);background:var(--panel,#f7f6f3);}
.rbar-in{
  max-width:1120px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:26px;min-height:44px;flex-wrap:wrap;
}
.rbar-nav{display:flex;gap:20px;flex-wrap:wrap;}
.rbar-nav a{
  font-size:13.5px;color:var(--muted,#6b6f77);text-decoration:none;
  padding:11px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.rbar-nav a:hover{color:var(--ink,#22252c);}
.rbar-nav a.on{color:var(--ink,#22252c);font-weight:600;border-bottom-color:var(--ink,#22252c);}
@media (max-width:560px){
  .rbar-in{gap:10px;padding:8px 16px;}
  .rbar-nav{gap:14px;}
  .rbar-nav a{padding:4px 0;font-size:13px;}
}

/* Listing strip — the add/remove (or correct) controls, high on a research page.
   Sits directly under the page's own lede so both doors are visible without scrolling. */
.lstrip{--lstrip-accent:oklch(50% 0.196 265);border:1px solid var(--rule);background:var(--panel);border-radius:10px;margin:22px 0;}
.lstrip-in{
  display:flex;align-items:center;gap:14px;padding:13px 16px;flex-wrap:wrap;
}
.lstrip-t{flex:1;min-width:240px;}
.lstrip-lbl{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 2px;}
.lstrip-sub{font-size:12.5px;color:var(--ink-3);margin:0;line-height:1.45;}
.lstrip-btn{
  font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:8px 14px;border-radius:7px;border:1px solid transparent;
}
.lstrip-btn-p{background:var(--lstrip-accent,var(--accent));color:var(--paper);}
.lstrip-btn-g{background:var(--paper);color:var(--ink);border-color:var(--rule);}
.lstrip-btn:hover{opacity:.9;}
@media (max-width:600px){
  .lstrip-in{gap:10px;padding:12px 13px;}
  .lstrip-btn{flex:1;text-align:center;}
}