/* Site-wide look (2026-11), loaded after every other stylesheet.
   Light = "Field Ledger": paper, ink, serif headings, cobalt blue.
   Dark = "Operations Console": graphite, condensed capitals, electric blue.
   Amber is kept only for warnings and watch-level alerts.
   The header's Light/Dark/Auto switch (theme.js) picks between them. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/plex-sans.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/plex-mono-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plex-mono-600.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/source-serif.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-italic.woff2) format("woff2"); }

/* ---- light: Field Ledger ---- */
:root {
  --brand: #1F56D6; --brand-2: #1A47B3; --brand-soft: #E2E9F8; --accent: #C77700; --btn-ink: #fff; --btn-hover: #1A47B3;
  --ink: #1C1B18; --ink-2: #3F3C35; --muted: #6A665C; --line: #DDD4C2; --line-2: #CFC6B4;
  --bg: #F3EFE6; --card: #FBF8F1; --card-2: #F4EEE2; --shadow: none;
  --warn-bg: #FBEFD9; --warn-line: #E2B866; --warn-ink: #8A4B07; --ok-bg: #E8F1E8; --ok-line: #9CC4A0; --ok-ink: #2F6B3A;
  --err-bg: #F8E3DE; --err-line: #E0A190; --info-bg: #EFE8DA; --info-line: #D6C9AE; --flag: #FBEFD9; --off: #ECE6D9;
  --input: #fff; --hero: #EFE8DA; --focus: #5B86E8;
  --hf: "Source Serif 4", Georgia, serif; --hw: 100%; --hcase: none; --hwt: 600; --hls: -.015em;
  --bf: "IBM Plex Sans", system-ui, sans-serif; --mf: "IBM Plex Mono", ui-monospace, monospace;
  --side-bg: #1C1B18; --side-ink: #D9D3C5; --side-head: #8F897B; --side-on: rgba(76, 158, 255, .22); --side-hover: rgba(255, 255, 255, .06);
  --r: 3px;
}
/* ---- dark: Operations Console ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #4C9EFF; --brand-2: #7DB8FF; --brand-soft: #142338; --accent: #FFB020; --btn-ink: #061220; --btn-hover: #73B3FF;
    --ink: #E6E9EC; --ink-2: #C3CAD2; --muted: #8E99A5; --line: #27303A; --line-2: #34404C;
    --bg: #0C0F12; --card: #13181D; --card-2: #1A2027;
    --warn-bg: #2B2210; --warn-line: #7A5A17; --warn-ink: #FCD34D; --ok-bg: #0F2A1E; --ok-line: #1F6F4A; --ok-ink: #6EE7A7;
    --err-bg: #2C1416; --err-line: #7F2D2D; --info-bg: #1A2027; --info-line: #34404C; --flag: #2A2312; --off: #101418;
    --input: #0C0F12; --hero: #13181D; --focus: #4C9EFF;
    --hf: "Archivo", system-ui, sans-serif; --hw: 72%; --hcase: uppercase; --hwt: 800; --hls: 0;
    --bf: "Archivo", system-ui, sans-serif;
    --side-bg: #080A0C; --side-ink: #B9C1CA; --side-head: #6F7A86; --side-on: rgba(76, 158, 255, .18); --side-hover: rgba(255, 255, 255, .05);
  }
}
:root[data-theme="dark"] {
  --brand: #4C9EFF; --brand-2: #7DB8FF; --brand-soft: #142338; --accent: #FFB020; --btn-ink: #061220; --btn-hover: #73B3FF;
  --ink: #E6E9EC; --ink-2: #C3CAD2; --muted: #8E99A5; --line: #27303A; --line-2: #34404C;
  --bg: #0C0F12; --card: #13181D; --card-2: #1A2027;
  --warn-bg: #2B2210; --warn-line: #7A5A17; --warn-ink: #FCD34D; --ok-bg: #0F2A1E; --ok-line: #1F6F4A; --ok-ink: #6EE7A7;
  --err-bg: #2C1416; --err-line: #7F2D2D; --info-bg: #1A2027; --info-line: #34404C; --flag: #2A2312; --off: #101418;
  --input: #0C0F12; --hero: #13181D; --focus: #4C9EFF;
  --hf: "Archivo", system-ui, sans-serif; --hw: 72%; --hcase: uppercase; --hwt: 800; --hls: 0;
  --bf: "Archivo", system-ui, sans-serif;
  --side-bg: #080A0C; --side-ink: #B9C1CA; --side-head: #6F7A86; --side-on: rgba(76, 158, 255, .18); --side-hover: rgba(255, 255, 255, .05);
}

/* ---- type ---- */
body { font-family: var(--bf); }
h1, h2, .wx-h1 { font-family: var(--hf); font-stretch: var(--hw); text-transform: var(--hcase); font-weight: var(--hwt); letter-spacing: var(--hls); }
h1 { font-size: 32px; line-height: 1.08; }
h2 { font-size: 22px; line-height: 1.15; }
h1 .pill, h2 .pill { font-family: var(--bf); text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.brand { font-family: var(--hf); font-stretch: 75%; text-transform: var(--hcase); font-weight: var(--hwt); letter-spacing: .02em; }
.brand svg { color: var(--brand); }
.eyebrow { font: 500 11.5px var(--mf); letter-spacing: .12em; color: var(--brand); }
.mono, code, kbd { font-family: var(--mf); }
a { color: var(--brand-2); }
::selection { background: var(--brand); color: var(--btn-ink); }

/* ---- buttons, inputs, boxes: square corners, no glow ---- */
.btn, :where(:root) .btn { background: var(--brand); border-color: var(--brand); color: var(--btn-ink); border-radius: var(--r); font-weight: 700; letter-spacing: .02em; }
.btn:hover, :where(:root) .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.ghost, :where(:root) .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover, :where(:root) .btn.ghost:hover { background: transparent; border-color: var(--muted); }
.btn.red { background: #B3261E; border-color: #B3261E; color: #fff; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .btn { background: var(--brand); border-color: var(--brand); color: var(--btn-ink); }
  :where(:root:not([data-theme="light"])) .btn:hover { background: var(--btn-hover); }
  :where(:root:not([data-theme="light"])) .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
}
:where(:root[data-theme="dark"]) .btn { background: var(--brand); border-color: var(--brand); color: var(--btn-ink); }
:where(:root[data-theme="dark"]) .btn:hover { background: var(--btn-hover); }
:where(:root[data-theme="dark"]) .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
input, select, textarea { border-radius: var(--r); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.card, .flash, .note, .preview, .dev, .theme-btn, .wx-tabs, .wx-tabs a, .wx-search input, .wx-intro, .faq details,
.lp-tour, .lp-video, .lp-frame, .lp-tile, .lp-alerts, .lp-feature > div, .lp-ind, .lp-outcomes, .pv-stats div, .nav-find-box, .nav-find-results,
.acct-list, .nav .side a, .side-more > summary, .tabbar, .chip, .heads, .head { border-radius: var(--r); }
.card { box-shadow: none; }
.top { background: var(--bg); }
.foot { background: var(--bg); }

/* ---- signed-in sidebar ---- */
.nav .side a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); }
.nav .side a.side-add, :where(:root) .nav .side a.side-add { background: var(--brand); color: var(--btn-ink); border-radius: var(--r); }
.nav .side a.side-add:hover { background: var(--btn-hover); color: var(--btn-ink); }
.side b { font-family: var(--mf); font-weight: 500; }
.side-brand { font-family: var(--hf); font-stretch: 75%; text-transform: var(--hcase); }

/* ---- weather pages ---- */
.wx {
  --wx-hero: #1C1B18; --wx-hero-ink: #F3EFE6;
}
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .wx { --wx-hero: #13181D; } }
:where(:root[data-theme="dark"]) .wx { --wx-hero: #13181D; }
.wx-tabs { box-shadow: none; }
.wx-tabs a[aria-current="page"] { background: var(--brand); color: var(--btn-ink); }
.wx-tabs a:hover { background: var(--brand-soft); color: var(--ink); }
.wx-intro { border: 1px solid var(--line); box-shadow: none; }
.wx-intro h1 { color: inherit; }
.wx-intro .btn { background: var(--brand); color: var(--btn-ink); border-color: var(--brand); }

/* ---- charts and small things that were blue ---- */
.mini rect { fill: var(--line-2); }
.mini rect.hit { fill: var(--brand); }
.pill { background: var(--info-bg); color: var(--ink-2); border-radius: 2px; }
@media (max-width: 560px) { .wx-search { flex-wrap: wrap; } .wx-search input { flex: 1 1 100%; } }

/* ---- dark: a faint blue glow on the main actions ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.ghost):not(.red), :root:not([data-theme="light"]) .wx-tabs a[aria-current="page"] { box-shadow: 0 0 18px rgba(76, 158, 255, .28); }
}
:root[data-theme="dark"] .btn:not(.ghost):not(.red), :root[data-theme="dark"] .wx-tabs a[aria-current="page"] { box-shadow: 0 0 18px rgba(76, 158, 255, .28); }