/* ============================================================================
   The Weather Trader — house style
   Matched to the weather.city / squall.cloud family: light US highway
   guide-sign look — warm paper, guide-green signs, signage-blue actions,
   Overpass display / mono data, dashed lane-line rules, route shields,
   mile-marker chips, and (new) speed-limit-sign stat tiles.
   ========================================================================== */

@font-face{
  font-family:"Overpass"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/vendor/fonts/overpass.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/vendor/fonts/jetbrains-mono.woff2") format("woff2");
}
@font-face{
  font-family:"Overpass Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/vendor/fonts/overpass-mono.woff2") format("woff2");
}

:root{
  /* weather.city guide-sign palette (matches wctheme.py exactly) */
  --paper:#e6e2da;          /* base (warm cream) */
  --paper-2:#ffffff;        /* card / panel surface */
  --paper-3:#f0eee8;        /* inset wells, table zebra, bar tracks */
  --ink:#161616;            /* primary text */
  --ink-2:#4a463e;
  --muted:#8a867c;          /* dim */
  --faint:#a8a49a;
  --rule:#e4e1d9;           /* hairline */
  --rule-strong:#c9c5bc;

  /* guide-sign palette */
  --signal:#b3261e;         /* stop-sign red — alert, down, errors */
  --signal-ink:#8a1f2c;     /* red hover */
  --orange:#c2571b;         /* work-zone/caution orange */
  --guide:#04663d;          /* highway sign green — nav, wayfinding, buttons */
  --guide-2:#013d26;
  --gold:#04663d;           /* alias kept for existing pages — now green (EXIT tabs, kickers, links) */
  --natgeo:#04663d;         /* alias, kept for existing pages */
  --sign-sub:#bdebcf;       /* pale mint — text on green */
  --up:#04663d;             /* market up */
  --down:#b3261e;           /* market down */
  --blue:#0a5ca8;           /* signage-blue accent */
  --navy:#103e7e;
  --teal:#0f7d7d;           /* rest-area teal — a 4th chart hue */
  --violet:#6b4ea6;         /* scenic-byway violet — a 5th chart hue */
  --marker:#04663d;         /* Interstate mile-marker green (white numerals) */

  /* family type: Overpass display, Overpass Mono data. --serif kept as a name
     so existing pages keep working, but it now points to the display face. */
  --serif:"Overpass",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Overpass",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Overpass Mono","JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); font-size:16.5px; line-height:1.58;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-underline-offset:2px}
a:hover{color:var(--guide)}
::selection{background:var(--guide); color:#fff}

/* ---- layout ------------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.rule{height:1px; background:var(--rule); border:0; margin:0}
.rule-strong{height:2px; background:var(--ink); border:0}
/* highway dashed lane-line rule (family section headers) */
.dashrule{flex:1; height:0; border:0; border-top:3px dashed var(--guide); opacity:.85}

/* ---- Weather Trader flourishes: odds axis + forecast sparkline --------- */
/* a market-odds tick scale (0–100%) used as a signature divider */
.oddsaxis{display:flex; justify-content:space-between; position:relative;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--faint);
  margin:14px 0 4px; padding-top:9px;
  background:linear-gradient(90deg,var(--rule-strong),var(--rule-strong)) 0 0/100% 1px no-repeat}
.oddsaxis span{position:relative; padding-top:2px}
.oddsaxis span::before{content:""; position:absolute; top:-9px; left:50%; width:1px; height:6px;
  background:var(--rule-strong)}
.oddsaxis span:first-child::before{left:0}
.oddsaxis span:last-child::before{left:auto; right:0}
/* faint forecast track behind a hero — decorative inline SVG stroke */
.sparkline{display:block; width:100%; height:auto}
.sparkline path{fill:none; stroke:var(--guide); stroke-width:1.6; vector-effect:non-scaling-stroke;
  opacity:.55}
.sparkline .fill{fill:var(--guide); opacity:.07; stroke:none}
.sparkline circle{fill:var(--guide); opacity:.9}

/* ---- utility strip + masthead (the green interstate sign) -------------- */
.topstrip{background:var(--ink); color:#cfccc4; border-bottom:3px solid var(--guide)}
.topstrip .inner{max-width:var(--maxw); margin:0 auto; padding:6px 22px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase}
.topstrip .brand{opacity:.9}

.masthead{background:transparent}
.mast-top{display:none} /* folded into .topstrip in the new masthead — kept selector for back-compat */

.mast-title{background:var(--guide); border-radius:0; color:#fff;
  box-shadow:inset 0 0 0 4px var(--guide), inset 0 0 0 6px rgba(255,255,255,.85);
  padding:18px 0 6px}
.mast-title .inner{max-width:var(--maxw); margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.mast-title h1{margin:0; font-family:var(--sans); font-weight:900;
  font-size:clamp(24px,4.4vw,42px); letter-spacing:-.01em; line-height:1; color:#fff}
.mast-title h1 a{color:inherit; text-decoration:none}
.mast-title h1 .amp,.mast-title h1 em{color:var(--sign-sub); font-style:normal}
.mast-sub{max-width:var(--maxw); margin:0 auto; padding:6px 22px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sign-sub); background:var(--guide)}

/* route shield brandmark — works on green or dark, no change needed */
.shield{width:40px; height:42px; flex:0 0 auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* ---- guide-sign navigation — a row of pill buttons on the green sign --- */
.guidenav{background:var(--guide-2)}
.guidenav .inner{max-width:var(--maxw); margin:0 auto; padding:9px 22px;
  display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.guidenav a{color:#eafff2; text-decoration:none; font-weight:700; font-size:12px;
  font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; white-space:nowrap; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24)}
.guidenav a:hover{background:rgba(255,255,255,.18)}
.guidenav a[aria-current="page"]{background:#fff; color:var(--guide-2)}
.guidenav .sep{color:rgba(255,255,255,.4)}
.guidenav .exit{margin-left:auto; color:#eafff2; font-family:var(--mono);
  font-size:11px; font-weight:700; letter-spacing:.08em; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24); padding:6px 12px}

/* ---- editorial primitives --------------------------------------------- */
.kicker{font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--guide); margin:0 0 8px}
h2.headline,.headline{font-family:var(--sans); font-weight:900; color:var(--ink);
  letter-spacing:-.01em; line-height:1.1; margin:0}
.lede{color:var(--ink-2); font-size:17.5px; line-height:1.65; max-width:64ch}
.byline,.muted{color:var(--muted)}
.small{font-size:13.5px}

/* mile-marker section tag — a literal Interstate mile-marker sign */
.milemarker{display:inline-flex; align-items:center; gap:0; font-family:var(--mono);
  font-weight:700; font-size:12px; letter-spacing:.08em; color:#fff; background:var(--marker);
  padding:4px 10px; border:1.5px solid #fff; box-shadow:0 0 0 1px var(--marker);
  text-transform:uppercase; border-radius:3px}

/* highway EXIT tab (family card headers) */
.exit-tab{display:inline-block; font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--guide);
  padding:4px 11px; border-radius:3px}

/* ---- cards / panels ---------------------------------------------------- */
.card{background:var(--paper-2); border:1px solid var(--rule-strong); border-radius:8px;
  padding:18px 20px; box-shadow:0 3px 12px rgba(60,50,30,.06)}
.card + .card{margin-top:16px}
.card.green{border-color:var(--guide); box-shadow:inset 0 0 0 1px var(--guide)}
.card.blue{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
.card h2{font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--rule)}
.grid{display:grid; gap:16px}

/* ---- data tables -------------------------------------------------------- */
table.data{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px}
table.data th,table.data td{padding:7px 10px; text-align:right; border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums}
table.data th:first-child,table.data td:first-child{text-align:left; font-family:var(--sans)}
table.data thead th{color:var(--muted); font-weight:700; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; border-bottom:1.5px solid var(--rule-strong)}
table.data tbody tr:hover{background:var(--paper-3)}
table.data td.tick{font-weight:700}

.pos{color:var(--up)} .neg{color:var(--down)}
.figure{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600}
.big-figure{font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; color:var(--ink)}

/* status pills (family board) */
.pill{display:inline-block; font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:var(--paper-3); color:var(--ink)}
.pill.red{background:var(--signal); color:#fff}
.pill.green{background:var(--guide); color:#fff}
.pill.gold{background:var(--guide); color:#fff}
.pill.blue{background:var(--blue); color:#fff}

/* stat tiles — reskinned as speed-limit signs: white rounded rect, black
   keyline border, bold mono figure, small caption. A little "creative", a
   little literal — the family's love of real highway signage carried through. */
.tiles{display:flex; flex-wrap:wrap; gap:10px; border:0}
.tile{flex:1; min-width:120px; padding:12px 14px 13px; background:#fff;
  border:2.5px solid var(--ink); border-radius:8px; text-align:center;
  box-shadow:0 3px 0 var(--ink)}
.tile .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700}
.tile .v{font-family:var(--mono); font-weight:800; font-size:28px; margin-top:2px;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.tile .v.red{color:var(--signal)} .tile .v.green{color:var(--guide)} .tile .v.gold{color:var(--guide)}
/* signage band variant (family homepage stat strip) — solid green, white text */
.tiles.band{background:transparent; gap:0; border:1px solid var(--guide)}
.tiles.band .tile{border:0; border-right:1px solid rgba(255,255,255,.22); background:var(--guide);
  border-radius:0; box-shadow:none}
.tiles.band .tile:first-child{border-radius:7px 0 0 7px}
.tiles.band .tile:last-child{border-right:0; border-radius:0 7px 7px 0}
.tiles.band .tile .k{color:rgba(255,255,255,.75)}
.tiles.band .tile .v{font-family:var(--sans); font-weight:900; color:#fff}

/* ---- controls ---------------------------------------------------------- */
.btn,button.btn{font-family:var(--sans); font-weight:800; font-size:14.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:11px 18px; border:1.5px solid var(--blue); background:var(--blue);
  color:#fff; cursor:pointer; text-decoration:none; display:inline-block; border-radius:6px}
.btn:hover{background:var(--navy); border-color:var(--navy)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--paper-3); border-color:var(--ink)}
.btn.signal{background:var(--signal); border-color:var(--signal); color:#fff}
.btn.signal:hover{background:var(--signal-ink); border-color:var(--signal-ink)}
.btn.blue{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.gold{background:var(--guide); border-color:var(--guide); color:#fff}
input,select{font-family:var(--sans); font-size:15.5px; padding:11px 13px; color:var(--ink);
  background:#fff; border:1.5px solid var(--rule-strong); border-radius:6px}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:2px solid var(--blue); outline-offset:-1px}
select option{background:#fff; color:var(--ink)}
label{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted)}

/* segmented toggle (highway sign chips) */
.seg{display:inline-flex; border:1.5px solid var(--rule-strong); border-radius:6px; overflow:hidden}
.seg button{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.05em;
  text-transform:uppercase; padding:7px 14px; background:#fff; color:var(--ink);
  border:0; border-right:1px solid var(--rule-strong); cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--guide); color:#fff}

/* footer */
.foot{border-top:4px solid var(--guide); margin-top:40px; background:var(--ink)}
.foot .inner{max-width:var(--maxw); margin:0 auto; padding:18px 22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#cfccc4;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}
.foot a{color:var(--sign-sub)}

@media (max-width:640px){
  .mast-top .dl-right{display:none}
  .tile{min-width:calc(50% - 5px)}
}