/* Fourth & Data -- shared tokens and components.
 *
 * Every colour a page uses comes from a token below, so the light and dark
 * themes stay in step. The accent is the broadcast's yellow first-down line:
 * used sparingly (the active tab, the primary action, a highlight), never as a
 * data colour. Data colours (--pos / --neg / --mixed / --mid) carry meaning --
 * above / below / one-without-the-other / zero -- and are validated for colour
 * vision deficiency; do not reuse them for decoration.
 */
:root{
  color-scheme: light;
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f8f9fb; --sunk:#eef1f5;
  --ink:#0f1a2a; --ink-2:#44516a; --muted:#6f7a8e; --line:#dfe4ec; --line-2:#cbd3df;
  --field:#1d3a2c; --link:#1f63b8; --focus:#2a78d6;
  --stripe:#f5c400; --stripe-ink:#7a5e00; --stripe-soft:#fff6cc; --on-stripe:#0f1a2a;
  --code-bg:#0f1a2a; --code-ink:#d7e3f4;
  /* data */
  --pos:#2a78d6; --neg:#e34948; --mixed:#eda100; --mid:#e9ebef; --seq:#2a78d6;
  /* state */
  --ok:#0a7d0a; --warn:#9a6a00; --crit:#c7302f;
  --ok-soft:#e7f5e7; --warn-soft:#fff4d6; --crit-soft:#fde8e8;
  --shadow:0 1px 2px rgba(15,26,42,.06),0 8px 24px -12px rgba(15,26,42,.18);
  --radius:12px;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#0a111d; --surface:#121b2c; --surface-2:#0f1726; --sunk:#0c1422;
    --ink:#e9eef6; --ink-2:#b3bdcd; --muted:#8793a8; --line:#1f2b40; --line-2:#2c3a53;
    --field:#10241a; --link:#7fb2f0; --focus:#6aa8f0;
    --stripe:#f5c400; --stripe-ink:#f5c400; --stripe-soft:#2a2410; --on-stripe:#0f1a2a;
    --code-bg:#070c15; --code-ink:#cfe0f4;
    --pos:#3987e5; --neg:#e66767; --mixed:#e0a100; --mid:#2a3446; --seq:#3987e5;
    --ok:#3cc43c; --warn:#fab219; --crit:#f06b6a;
    --ok-soft:#10261a; --warn-soft:#2a2410; --crit-soft:#2c1416;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:.2px;text-wrap:balance;margin:0}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
code{font-family:var(--mono);font-size:.88em}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
@media (max-width:520px){.wrap{padding-inline:16px}}
.muted{color:var(--muted)}
.fine{font-size:12px;color:var(--muted)}

/* ---------- site header ---------- */
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.site .bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:12px}
.brand{font:700 22px/1 var(--display);letter-spacing:.3px;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.brand b{display:inline-block;width:18px;height:18px;border-radius:4px;background:var(--field);position:relative}
.brand b::after{content:"";position:absolute;left:3px;right:3px;top:8px;height:3px;background:var(--stripe);border-radius:1px}
.tabs{display:flex;gap:2px;flex-wrap:wrap}
.tabs a{font:500 14px var(--body);color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:8px}
.tabs a:hover{color:var(--ink);background:var(--sunk)}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--sunk);box-shadow:inset 0 -2px 0 var(--stripe)}
.tabs .short{display:none}
@media (max-width:560px){.tabs .long{display:none}.tabs .short{display:inline}.tabs a{padding:7px 9px}}
.acct{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--ink-2)}
.acct img{width:26px;height:26px;border-radius:50%;border:1px solid var(--line)}
.lang-pick{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.lang-pick select{min-width:0;padding:5px 6px;font-size:13px;border-color:var(--line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* on a phone the header wraps to three rows; pinning that would eat the screen */
@media (max-width:620px){header.site{position:static}.acct{margin-left:0}}

/* ---------- buttons ---------- */
button{cursor:pointer;font:inherit;border-radius:8px;border:1px solid transparent}
.ghost,.cta{font:600 14px var(--body);border-radius:8px;padding:8px 14px;line-height:1.2}
.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.ghost:hover{background:var(--sunk)}
.cta{background:var(--stripe);color:var(--on-stripe);border:1px solid var(--stripe)}
.cta:hover{filter:brightness(.95)}
.signin-google{display:inline-flex;align-items:center;gap:8px;padding-left:6px}
.g-chip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#fff}
@media (max-width:560px){.signin-google .long{display:none}}
.cta:disabled,.ghost:disabled{opacity:.6;cursor:progress}

/* ---------- pills, badges ---------- */
.badge{font:600 11px/1 var(--body);text-transform:uppercase;letter-spacing:.6px;background:var(--sunk);
  border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:var(--ink-2);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:currentColor;background:transparent}
.badge.warning{color:var(--warn);border-color:currentColor;background:transparent}
.badge.critical{color:var(--crit);border-color:currentColor;background:transparent}
.pill{font:600 12px var(--body)}
.pill.dev{color:var(--warn)}

/* ---------- page heading ---------- */
.page-head{padding-block:26px 14px;display:grid;gap:6px}
.page-head h1{font-size:clamp(30px,4.2vw,40px);line-height:1}
.page-head .sub{color:var(--ink-2);max-width:70ch;font-size:15px;margin:0}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.card .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.card .hd h2{font-size:20px;line-height:1.1}
.err{color:var(--crit);padding:14px 16px}
.none{color:var(--muted);padding:18px 16px;font-size:13px}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.ctl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
select{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;
  padding:7px 10px;font:inherit;font-size:14px;min-width:110px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:500 13px var(--body);background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  padding:6px 11px;border-radius:999px;cursor:pointer}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip.on,.chip[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--stripe);font-weight:600}
.chip small{color:var(--muted);font-weight:400}

/* ---------- tables ---------- */
.tblwrap{overflow:auto;max-height:70vh}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:14px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{position:sticky;top:0;background:var(--surface);color:var(--muted);font:600 11px var(--body);
  text-transform:uppercase;letter-spacing:.5px;z-index:1}
th.sortable,.sorttable th{cursor:pointer;user-select:none}
th.sortable:hover,.sorttable th:hover{color:var(--ink)}
th.asc::after{content:" \25B2";font-size:9px}
th.desc::after{content:" \25BC";font-size:9px}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right}
/* a value cell carrying a magnitude bar behind the digits (static/charts.js renderTable) */
td.barcell{position:relative;min-width:88px}
td.barcell .b{position:absolute;left:0;top:3px;bottom:3px;border-radius:3px;background:var(--seq);opacity:.18;z-index:0}
td.barcell .b.bad{background:var(--neg);opacity:.2}
td.barcell .b.good{background:var(--pos);opacity:.2}
td.barcell .b.neutral{background:var(--muted);opacity:.16}
td.barcell span{position:relative;z-index:1}

/* ---------- banners ---------- */
.banner{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--warn-soft);
  border-radius:8px;padding:11px 14px;margin-block:14px;font-size:13px;color:var(--ink-2)}
.banner.critical{border-left-color:var(--crit);background:var(--crit-soft)}
.banner b{color:var(--ink)}

/* ---------- the upgrade moment (static/app.js upsellBox) ---------- */
.upsell{border:1px solid var(--line-2);border-left:3px solid var(--stripe);background:var(--stripe-soft);
  border-radius:8px;padding:14px 16px}
.upsell h4{margin:0 0 6px;font-size:20px;color:var(--ink)}
.upsell p{margin:0 0 12px;color:var(--ink-2);font-size:13px}
.upsell .fine{margin:8px 0 0}
.row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.right{text-align:right}

/* ---------- Pro answers: the preview and the home-page example ---------- */
.pro-tag{display:inline-block;font:700 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-stripe);background:var(--stripe);border-radius:4px;padding:3px 6px;vertical-align:middle}
.chip .pro-tag{margin-left:4px;font-size:9px;padding:2px 5px}
.preview{border-left:3px solid var(--stripe);padding:16px 16px 0}
.preview-head{margin:10px 0 4px;font-size:17px;color:var(--ink);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.preview-stat{font:500 14px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.preview-bars{display:grid;gap:7px;margin:12px 0}
.preview-bars i{display:block;height:12px;border-radius:4px;background:var(--sunk)}
.preview-bars i:nth-child(1){width:88%}.preview-bars i:nth-child(2){width:74%}
.preview-bars i:nth-child(3){width:63%}.preview-bars i:nth-child(4){width:51%}
.preview-more{color:var(--ink-2);font-size:13px;margin:0 0 12px}
.preview .upsell{margin:0 -16px;border-radius:0;border-width:1px 0 0}
.pro-example .hd{align-items:flex-start}
.pro-example h2{margin:8px 0 0;font-size:20px;line-height:1.2;text-wrap:balance}
.pro-example-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  padding:14px 16px;border-top:1px solid var(--line)}
.pro-example-foot p{margin:0;color:var(--ink-2);font-size:13px;max-width:60ch}

/* ---------- ad slots (templates/_ad.html, app/ads.py) ---------- */
/* Clearly labelled, quiet, and the same shape as the page's own cards; never
   rendered for Pro. min-height reserves the space so nothing jumps. */
.ad-slot{position:relative;background:var(--surface);border:1px dashed var(--line-2);
  border-radius:var(--radius);padding:22px 16px 14px;margin-block:18px;min-height:96px}
.ad-label{position:absolute;top:6px;left:16px;font:600 10px/1 var(--body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ad-body{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;flex-wrap:wrap}
.ad-body img{border-radius:6px;flex:none;object-fit:cover}
.ad-copy{display:flex;flex-direction:column;gap:2px;flex:1 1 240px;min-width:0}
.ad-copy strong{font-size:16px}
.ad-sponsor{font-size:12px;color:var(--muted)}
.ad-text{font-size:13px;color:var(--ink-2)}
.ad-cta{flex:none;font-weight:600;font-size:13px;border:1px solid var(--line-2);border-radius:6px;padding:7px 12px}
.ad-body:hover .ad-cta,.ad-body:focus-visible .ad-cta{border-color:var(--stripe);background:var(--stripe-soft)}
.ad-house{border-left:3px solid var(--stripe);border-style:dashed dashed dashed solid}

/* ---------- footer ---------- */
footer.site{color:var(--muted);font-size:12px;padding-block:28px 44px;border-top:1px solid var(--line);margin-top:32px}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* Public research and plan comparison pages. */
.growth-page{max-width:850px;margin:32px auto;line-height:1.65}
.growth-page h1{font-size:clamp(30px,5vw,44px);line-height:1.1}
.growth-page h2{margin-top:28px}
.growth-page p,.growth-page li{color:var(--ink-2)}
.growth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}
.growth-card{padding:20px}
.growth-card h2{margin-top:0}
.growth-price{font:700 30px var(--display)}
.growth-link{font-weight:600}
.growth-table{overflow-x:auto}
@media(max-width:650px){.growth-grid{grid-template-columns:1fr}}