/* hidden-ball.css: The Hidden Ball's house style, shared by every production page.
 *
 *   <link rel="stylesheet" href="/shared/css/hidden-ball.css">
 *
 * Link it after any vendored chart-factory CSS and before the page's own
 * <style>, so the cascade runs: factory defaults < house < page. The palette,
 * type and components come from the front page (frontend/apps/home), which is
 * the reference; shared/css/README.md explains the rules and the components.
 *
 * Three grounds: paper (the page), stock (cards), night (the header, the
 * footer, dark bands). Three faces, one job each: Inter for text, Archivo for
 * titles and big numbers, IBM Plex Mono for dates and meta. The site header
 * (shared/js/site-header.js) loads all three fonts on every page.
 *
 * ?paper=light previews the lighter paper on every page (the header stamps
 * html[data-paper] and this browser keeps it until ?paper=default).
 *
 * The fonts load here as well as from the header (same URL, so the browser
 * fetches them once): a page served without the header keeps its type.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600..900&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400..800&display=swap');

:root {
  /* grounds */
  --hb-paper: #f4ecd8;      /* the page */
  --hb-stock: #fbf7ec;      /* cards and panels */
  --hb-well: #f3ead4;       /* insets inside a card: tallies, boards, table stripes */
  --hb-deep: #ebe1c7;       /* a darker paper band */
  --hb-hair: #e0d4b7;       /* rules and borders */
  --hb-hair-2: #d6c9a8;     /* the stronger rule */
  --hb-hover: #f1e8d2;
  --hb-fill: #e6dcc3;       /* image placeholders, bar tracks */
  /* ink */
  --hb-ink: #1d2f4f;        /* titles, key numbers, active controls */
  --hb-text: #2f2c26;       /* running text */
  --hb-text-2: #4a463d;     /* card copy, deks */
  --hb-muted: #6c665a;      /* captions, labels, axes */
  /* accents: brick is the house accent (links, calls to action, eyebrows);
     sea means live; peach is the accent on night */
  --hb-accent: #a63d2a;
  --hb-sea: #0b6b61;
  --hb-live: #3ecf8e;
  /* night */
  --hb-night: #0e1a2b;
  --hb-night-2: #152438;
  --hb-night-3: #1c2e46;
  --hb-night-ink: #eef1f6;
  --hb-night-text: #c8d1de;
  --hb-night-muted: #9aa8bd;
  --hb-peach: #e8b09a;
  /* type */
  --hb-font-text: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hb-font-display: Archivo, Inter, "Arial Black", system-ui, sans-serif;
  --hb-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* layout: reading pages sit in a 1024px column (the lab layout budget);
     tools set --hb-max: 1240px, the front page's column. The site header
     reads both variables, so its logo sits directly over the page's title. */
  --hb-max: 1024px;
  --hb-pad: 32px;
  --hb-radius: 12px;
  --hb-radius-sm: 8px;

  /* bridges: chart-factory and lab-base read these, so factory charts and
     tables pick up the house palette without page code */
  --font-family: var(--hb-font-text);
  --color-black: var(--hb-ink);
  --color-text-primary: var(--hb-text);
  --color-text-muted: var(--hb-muted);
  --color-text-subtle: #776f60;
  --color-text-faint: #9a917f;
  --color-bg-body: var(--hb-paper);
  --color-bg-container: var(--hb-stock);
  --color-bg-hover: var(--hb-hover);
  --color-bg-highlight: var(--hb-well);
  --color-border-header: var(--hb-ink);
  --color-border-row: #e8dec6;
  --color-border-light: var(--hb-hair);
  --color-border-footer: var(--hb-hair);
  --color-border-tooltip: var(--hb-hair-2);
  --table-sticky-bg: var(--hb-stock);
  --axis-color: var(--hb-muted);
  --grid-color: var(--hb-hair);
  --pal-accent: var(--hb-accent); --pal-bg: var(--hb-stock); --pal-line: var(--hb-hair);
  --pal-hover: var(--hb-hover); --pal-muted: var(--hb-muted); --pal-ink: var(--hb-text);
}
@media (max-width: 700px) { :root { --hb-pad: 16px; } }

/* the lighter paper, for comparison (?paper=light) */
html[data-paper="light"] {
  --hb-paper: #f5f1e8; --hb-stock: #fffdfa; --hb-well: #f4efe4; --hb-deep: #ece5d6;
  --hb-hair: #e4dccb; --hb-hair-2: #d4cab5; --hb-hover: #f3ede1; --hb-fill: #eae3d3; --color-border-row: #ece5d6;
}

/* ------------------------------------------------------------ base -- */
/* zero specificity: a page's own rules always win */
:where(html) { background: var(--hb-paper); }
:where(body) { margin: 0; background: var(--hb-paper); color: var(--hb-text); font-family: var(--hb-font-text); -webkit-font-smoothing: antialiased; }
:where(svg text):where(:not(.hb-own *)) { font-family: var(--hb-font-text); }
/* .hb-own: a themed object (a baseball card, a poster) keeps its own type:
   the house doesn't re-type its SVG text or change its font smoothing.
   Chart-factory tokens it relies on still need re-declaring on the object. */
:where(.hb-own) { -webkit-font-smoothing: auto; }
:where(button, input, select, textarea) { font-family: inherit; }
:where(a) { color: var(--hb-accent); }
:where(code, kbd, samp) { font-family: var(--hb-font-mono); }

/* ----------------------------------------------------------- layout -- */
.hb-page { max-width: var(--hb-max); margin: 0 auto; padding: 0 var(--hb-pad) 56px; box-sizing: border-box; }
.hb-page.is-wide, :root.hb-wide .hb-page { --hb-max: 1240px; }

/* --------------------------------------------------------- page head -- */
/* eyebrow (site section · subject · span), title, dek, as-of line */
.hb-head { padding: 34px 0 24px; }
.hb-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 0; font: 800 12px/1.35 var(--hb-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--hb-eyebrow, var(--hb-accent)); }
/* the separator trails each segment, so a wrapped line ends on it instead
   of starting with it; a segment still waiting for its text is skipped */
.hb-eyebrow > :not(:last-child)::after { content: '·'; margin: 0 .55em; opacity: .55; }
.hb-eyebrow > :has(+ :empty:last-child)::after { content: none; }
.hb-eyebrow > :empty { display: none; }
.hb-eyebrow a { color: inherit; text-decoration: none; }
.hb-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hb-title { margin: 10px 0 12px; font: 800 var(--hb-title-size, clamp(32px, 4.3vw, 46px))/1.03 var(--hb-font-display); letter-spacing: -.025em; color: var(--hb-ink); text-wrap: balance; }
.hb-head.is-quick .hb-title { --hb-title-size: clamp(26px, 3.3vw, 34px); }
.hb-dek { margin: 0; max-width: 68ch; font: 400 17px/1.55 var(--hb-font-text); color: var(--hb-text-2); text-wrap: pretty; }
.hb-head.is-quick .hb-dek { font-size: 15.5px; }
.hb-dek b, .hb-dek strong { color: var(--hb-ink); font-weight: 650; }
.hb-asof { margin: 12px 0 0; font: 500 12px/1.4 var(--hb-font-mono); color: var(--hb-muted); }
/* a page head on a night band */
.hb-night .hb-eyebrow { --hb-eyebrow: var(--hb-peach); }
.hb-night .hb-title { color: #fff; }
.hb-night .hb-dek { color: var(--hb-night-text); }
.hb-night .hb-asof { color: var(--hb-night-muted); }

/* ----------------------------------------------------------- blocks -- */
.hb-h2 { margin: 0 0 6px; font: 800 23px/1.15 var(--hb-font-display); letter-spacing: -.015em; color: var(--hb-ink); text-wrap: balance; }
.hb-h3 { margin: 0 0 4px; font: 800 18px/1.2 var(--hb-font-display); color: var(--hb-ink); }
.hb-sub { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--hb-muted); }
.hb-kick { font: 700 10.5px/1.25 var(--hb-font-text); letter-spacing: .13em; text-transform: uppercase; color: var(--hb-muted); }
.hb-card { background: var(--hb-stock); border: 1px solid var(--hb-hair); border-radius: var(--hb-radius); padding: 20px 22px; }
.hb-num { font-family: var(--hb-font-display); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--hb-ink); }
.hb-rule { border: 0; border-top: 1px solid var(--hb-hair); margin: 28px 0; }

/* notes: sources, method, fine print */
.hb-notes { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--hb-hair); max-width: 82ch; font: 400 12.5px/1.6 var(--hb-font-text); color: var(--hb-muted); }
.hb-notes p { margin: 0 0 8px; }
.hb-notes b, .hb-notes strong { color: var(--hb-text-2); font-weight: 650; }
.hb-notes a { color: var(--hb-accent); }

/* --------------------------------------------------------- controls -- */
/* one segmented control, one pill button, one field */
.hb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--hb-well); border: 1px solid var(--hb-hair); border-radius: 99px; }
.hb-seg > button, .hb-seg > a { font: 600 12.5px/1 var(--hb-font-text); color: var(--hb-text-2); background: transparent; border: 0; border-radius: 99px; padding: 7px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; }
/* hover never repaints the active segment (it's usually the one just clicked) */
.hb-seg > :is(button, a):hover:not(.is-on, .on, .active, [aria-pressed="true"], [aria-selected="true"]) { color: var(--hb-ink); background: var(--hb-hover); }
/* active: .is-on or ARIA; .on and .active too, which older page scripts set */
.hb-seg > :is(.is-on, .on, .active, [aria-pressed="true"], [aria-selected="true"]) { background: var(--hb-ink); color: var(--hb-stock); }
.hb-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--hb-font-text); padding: 9px 14px; border-radius: 99px; border: 1px solid var(--hb-hair-2); background: var(--hb-stock); color: var(--hb-ink); cursor: pointer; text-decoration: none; }
.hb-btn:hover { border-color: var(--hb-ink); }
.hb-btn.is-primary { background: var(--hb-ink); border-color: var(--hb-ink); color: var(--hb-stock); }
.hb-btn.is-primary:hover { background: var(--hb-accent); border-color: var(--hb-accent); }
.hb-field { font: 500 13px/1.2 var(--hb-font-text); height: 34px; padding: 0 12px; border-radius: var(--hb-radius-sm); border: 1px solid var(--hb-hair-2); background: var(--hb-stock); color: var(--hb-ink); }
.hb-field:focus-visible, .hb-seg > :focus-visible, .hb-btn:focus-visible { outline: 2px solid var(--hb-accent); outline-offset: 2px; }

/* ------------------------------------------------------------ table -- */
.hb-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hb-table th { text-align: left; font: 700 10.5px/1.25 var(--hb-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--hb-muted); padding: 8px 10px; border-bottom: 1px solid var(--hb-hair-2); }
.hb-table td { padding: 8px 10px; border-top: 1px solid var(--color-border-row); }
.hb-table tr:first-child td { border-top: 0; }
.hb-scroll { overflow-x: auto; }