:root {
  --go: #1f8a4c; --mitigate: #c98a00; --nogo: #c0392b;
  --bg: #0f1419; --panel: #1a2129; --ink: #e6edf3; --muted: #8b98a5;
  --line: #2a3540; --accent: #3b82f6;
}
* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) stops sideways scroll without creating a scroll
   container - `hidden` would break the sticky header's freeze-on-scroll. */
html { overflow-x: clip; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.45; overflow-x: clip;
}
header {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #18222c, #0f1419);
  /* Frozen at the top so the logo + Data/Current time stay visible on scroll. */
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
header h1 { margin: 0; font-size: 1.5rem; }
header p { margin: 4px 0 0; color: var(--muted); }

/* Data time (frozen) + current Zulu clock (live), top-right of the header */
.clock { text-align: right; font-variant-numeric: tabular-nums; }
.clock-row { display: flex; justify-content: flex-end; gap: 8px; align-items: baseline; line-height: 1.5; }
.clock-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.clock-val { font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.clock-val.live { color: var(--accent); }
@media (max-width: 520px) {
  .clock-label { font-size: .62rem; }
  .clock-val { font-size: .78rem; }
}
@media (max-width: 480px) {
  header { padding: 8px 12px; gap: 8px; }
  .logo { height: 32px; }
  .clock-label { font-size: .58rem; }
  .clock-val { font-size: .72rem; }
}
/* Aircraft / true-airspeed picker (header, between logo and clock) */
.aircraft { display: flex; flex-direction: column; gap: 4px; }
.aircraft-row { display: flex; align-items: center; gap: 6px; }
.aircraft-label {
  color: var(--muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; min-width: 56px;
}
.aircraft-sel, .aircraft-tas {
  background: #0f1419; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 6px; font-size: .82rem; font-family: inherit;
}
.aircraft-sel { max-width: 130px; }
.aircraft-tas { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.aircraft-unit { color: var(--muted); font-size: .78rem; }
@media (max-width: 640px) {
  .aircraft-label { min-width: 0; }
  .aircraft-sel { max-width: 96px; font-size: .74rem; }
}
@media (max-width: 480px) {
  /* Phones can't fit logo + picker + clock on one line, so the picker gets its
     own full-width header row rather than being dropped - TAS drives every time
     and groundspeed number, so it has to be reachable on a phone too. */
  header { flex-wrap: wrap; }
  header h1 { flex: 0 0 auto; }
  .clock { flex: 1 1 auto; }
  .aircraft {
    order: 3; flex-basis: 100%;
    flex-direction: row; flex-wrap: wrap; gap: 4px 10px;
  }
  /* Make/model take the slack; the TAS row keeps its natural width. If both
     don't fit, flex-wrap drops TAS to its own line instead of clipping it. */
  .aircraft-row:first-child { flex: 1 1 180px; min-width: 0; }
  .aircraft-sel { flex: 1 1 0; min-width: 0; max-width: none; }
  /* The "Aircraft" caption costs ~65px that the model names need to stay
     readable ("T182 Turbo Skylane" clips to "T182 T" with it). The selects
     keep their aria-labels, and the TAS field alongside names the group. */
  .aircraft-row:first-child .aircraft-label { display: none; }
}
.panel {
  margin: 16px auto; max-width: 1000px; padding: 16px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
h2 { margin: 0 0 12px; font-size: 1.05rem; }
.hint { color: var(--muted); font-weight: 400; font-size: .85rem; }
.checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; }
legend { color: var(--muted); font-size: .85rem; padding: 0 6px; }
label { display: block; font-size: .9rem; margin: 4px 0; }
.banner {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: rgba(192, 57, 43, .15); border: 1px solid var(--nogo); color: #ffb4ab;
}
.controls { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.control { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.control input[type=range] { width: 180px; }
select, input[type=text], .route-inputs input {
  background: #0f1419; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px;
}
.control.threats { align-self: flex-start; }
.threats-label { font-size: .85rem; color: var(--muted); }
#threats-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
#threats-list label { color: var(--ink); margin: 0; }
.tabs { display: flex; gap: 8px; }
.tab {
  background: transparent; color: var(--muted); border: none; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.tab.active { background: var(--accent); color: white; }
.tab-pane { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.primary {
  background: var(--accent); color: white; border: none; padding: 10px 18px;
  border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.primary:disabled { opacity: .5; cursor: not-allowed; }

/* Route inputs + autocomplete */
.route-inputs { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ac { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.ac label { color: var(--muted); font-size: .85rem; margin: 0; }
.ac input { width: 100%; }
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: #0f1419; border: 1px solid var(--line); border-radius: 8px;
  max-height: 260px; overflow-y: auto; margin-top: 2px;
}
.ac-item { padding: 8px 10px; cursor: pointer; font-size: .88rem; }
.ac-item:hover, .ac-item.active { background: var(--accent); color: white; }
.ac-item .id { font-weight: 700; }
.ac-item .nm { color: var(--muted); font-size: .8rem; }
.ac-item.active .nm { color: #dbeafe; }

.results { display: grid; gap: 12px; margin: 14px 0 24px; }
.two-col { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.card {
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--muted);
  border-radius: 10px; padding: 14px 16px;
}
.card.GO { border-left-color: var(--go); }
.card.MITIGATE { border-left-color: var(--mitigate); }
.card.NOGO { border-left-color: var(--nogo); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-head h3 { margin: 0; font-size: 1.05rem; }
.badge { font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: .8rem; }
.badge.GO { background: rgba(31,138,76,.2); color: #6ee7a0; }
.badge.MITIGATE { background: rgba(201,138,0,.2); color: #f5c451; }
.badge.NOGO { background: rgba(192,57,43,.2); color: #ff9b8f; }
.meta { color: var(--muted); font-size: .85rem; margin: 6px 0; display: flex; gap: 14px; flex-wrap: wrap; }
.reasons { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; }
.reasons li { margin: 2px 0; }
.raw { color: var(--muted); font-family: ui-monospace, monospace; font-size: .76rem; margin-top: 8px; word-break: break-word; }
.ok-line { color: #6ee7a0; font-size: .9rem; margin: 6px 0; }
.meta .warn { color: #ff9b8f; }
.control.checkbox { flex-direction: row; align-items: center; gap: 6px; }

/* At-a-glance decision checklist */
.checklist { display: grid; gap: 16px; }
.cl-group h3 { margin: 0 0 8px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.chk {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 5px 8px; border-radius: 6px; font-size: .88rem; border-left: 3px solid transparent;
}
.chk:nth-child(even) { background: rgba(255,255,255,.02); }
.chk .mark { font-weight: 700; text-align: center; }
.chk .lbl { color: var(--ink); }
.chk .act { color: var(--muted); text-align: right; }
.chk .lim { color: var(--muted); font-size: .8rem; min-width: 86px; text-align: right; }
.chk.pass { border-left-color: var(--go); } .chk.pass .mark { color: #6ee7a0; }
.chk.fail { border-left-color: var(--nogo); background: rgba(192,57,43,.08); } .chk.fail .mark { color: #ff9b8f; }
.chk.fail .lbl { font-weight: 600; }
.chk.advisory { border-left-color: var(--mitigate); } .chk.advisory .mark { color: #f5c451; }
.chk.na { opacity: .5; }
.chk a { color: var(--accent); }

/* NOTAM expansion */
.notam-btn { cursor: pointer; color: var(--accent); }
.notam-list { margin: 8px 0 0; display: grid; gap: 6px; }
.notam { font-size: .8rem; color: var(--ink); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.notam a { color: var(--accent); font-weight: 700; margin-right: 6px; white-space: nowrap; }
.notam-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.notam-text { white-space: pre-wrap; }
.notam-status { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em; }
.notam-status.active { background: rgba(46,160,67,.18); color: #6ee7a0; border: 1px solid #2ea043; }
.notam-status.upcoming { background: rgba(201,138,0,.15); color: #f5c451; border: 1px solid #c98a00; }
.notam-status.expired { background: rgba(139,152,165,.12); color: var(--muted); border: 1px solid var(--line); }
.notam-when { font-size: .72rem; color: var(--muted); }

/* source chips */
.src { font-size: .68rem; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); }
.blend { font-size: .66rem; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--accent);
  color: #8fbcff; margin-left: 4px; cursor: help; }
.src.OBSERVED { color: #6ee7a0; border-color: var(--go); }
.src.TAF { color: #8fbcff; border-color: var(--accent); }
.src.HRDPS { color: #f5c451; border-color: var(--mitigate); }

/* big route verdict banner */
.verdict-banner { max-width: 1000px; margin: 14px auto; padding: 14px 18px; border-radius: 12px; font-weight: 700; }
.verdict-banner.GO { background: rgba(31,138,76,.18); border: 1px solid var(--go); color: #6ee7a0; }
.verdict-banner.MITIGATE { background: rgba(201,138,0,.18); border: 1px solid var(--mitigate); color: #f5c451; }
.verdict-banner.NOGO { background: rgba(192,57,43,.18); border: 1px solid var(--nogo); color: #ff9b8f; }
.verdict-banner small { display: block; font-weight: 400; color: var(--muted); margin-top: 4px; }

/* timeline */
.timeline-wrap { max-width: 1000px; margin: 8px auto 30px; }
.timeline-wrap h3 { margin: 16px 0 8px; font-size: 1rem; }
.tl-day { font-size: .8rem; color: var(--muted); margin: 10px 0 4px; }
.tl-row { display: flex; flex-wrap: wrap; gap: 3px; }
.tl-cell {
  width: 30px; height: 40px; border-radius: 4px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: .62rem; cursor: pointer;
  border: 1px solid transparent;
}
.tl-cell.GO { background: rgba(31,138,76,.35); }
.tl-cell.MITIGATE { background: rgba(201,138,0,.35); }
.tl-cell.NOGO { background: rgba(192,57,43,.35); }
.tl-cell.night { opacity: .5; }
.tl-cell.best { border-color: #fff; box-shadow: 0 0 0 1px #fff inset; }
.tl-cell.active { outline: 2px solid var(--accent, #4ea1ff); outline-offset: 1px; }
.tl-hour { font-weight: 700; }
.tl-wx { font-size: .7rem; line-height: 1; margin-top: 1px; }
.tl-detail {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; line-height: 1.5; white-space: pre-line;
}
.window-card {
  background: rgba(31,138,76,.12); border: 1px solid var(--go); border-radius: 10px;
  padding: 10px 14px; margin: 6px 0; font-size: .9rem;
}
.legend { font-size: .78rem; color: var(--muted); margin: 8px 0; display: flex; gap: 14px; flex-wrap: wrap; }
.legend span::before { content: "■ "; }
.legend .go::before { color: var(--go); } .legend .mit::before { color: var(--mitigate); } .legend .nogo::before { color: var(--nogo); }

/* Day/Night segmented control */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { background: #0f1419; color: var(--muted); border: none; padding: 7px 14px; cursor: pointer; font-size: .9rem; }
.seg-btn.active { background: var(--accent); color: #fff; }

/* checklist location + source chips */
.chk .act .loc { color: #8fbcff; }
.chk .act .src-mini { font-size: .68rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 5px; }

/* runway lines + components */
.rwy-lines { font-size: .86rem; margin: 8px 0; display: grid; gap: 3px; }
.rwy-lines strong { color: var(--ink); }
details.runways { margin: 6px 0; font-size: .82rem; }
details.runways summary { cursor: pointer; color: var(--accent); }
.rwy-comp { color: var(--muted); padding: 3px 0 3px 14px; }
.rwy-na { font-size: .84rem; color: var(--muted); font-style: italic; margin: 6px 0; }

/* wind-vs-runway diagram: graphic beside the runway text */
.rwy-wrap { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; }
.rwy-wrap .rwy-lines { margin: 0; flex: 1 1 auto; min-width: 0; }
.rwy-diag { flex: 0 0 auto; }
.rwy-comp-row { display: flex; align-items: center; gap: 8px; }
.rwy-comp-row .rwy-comp { padding: 3px 0; flex: 1 1 auto; min-width: 0; }
.rwy-diag-sm { flex: 0 0 auto; }
.wr { display: block; width: 156px; height: 156px; overflow: visible; }
.wr.wr-sm { width: 108px; height: 108px; }
.wr-strip-line { stroke: var(--muted); fill: none; stroke-linecap: butt; opacity: .55; }
.wr-center { stroke: rgba(230, 237, 243, .45); fill: none; stroke-dasharray: 2 3; }
.wr-n { fill: var(--muted); text-anchor: middle; font-family: system-ui, sans-serif; }
.wr-ident { fill: var(--ink); font-weight: 700; text-anchor: middle; font-family: system-ui, sans-serif; }
.wr-recip { fill: var(--muted); font-weight: 400; }
.wr-calm { fill: var(--muted); text-anchor: middle; font-family: system-ui, sans-serif; letter-spacing: .05em; }
.wr-head { stroke: var(--go); fill: none; stroke-linecap: round; }
.wr-head-tail { stroke: var(--nogo); }
.wr-cross { fill: none; stroke-linecap: round; }
.wr-sev-mit { stroke: var(--mitigate); }
.wr-sev-nogo { stroke: var(--nogo); }
/* total wind: dashed arrow flying with the wind (tail upwind, head downwind) */
.wr-wind { stroke: #6cb6ff; fill: none; stroke-linecap: round; stroke-dasharray: 4 3; opacity: .9; }
.wr-ah-wind { fill: #6cb6ff; }
.wr-hub { fill: var(--ink); }
.wr-kt { font-size: 12px; font-weight: 700; font-family: system-ui, sans-serif; }
.wr-kt-head { fill: var(--go); }
.wr-kt-tail { fill: var(--nogo); }
.wr-kt-cross { fill: var(--mitigate); }
.wr-kt-severe { fill: var(--nogo); }
.wr-kt-wind { fill: #6cb6ff; }
/* arrowhead fills (shared markers live in index.html) */
.wr-ah-head { fill: var(--go); }
.wr-ah-tail { fill: var(--nogo); }
.wr-ah-cross-mit { fill: var(--mitigate); }
.wr-ah-cross-nogo { fill: var(--nogo); }
.wr-legend { fill: var(--muted); font-family: system-ui, sans-serif; }
@media (max-width: 480px) { .rwy-wrap { flex-direction: column; gap: 6px; } }
.ppr { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #f5c451; border: 1px solid var(--mitigate); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.nearby { margin: 6px 0; font-size: .84rem; color: var(--ink); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.nearby .nlabel { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.advisories { font-size: .84rem; }
.advisories summary { cursor: pointer; font-weight: 600; }
.adv { margin: 6px 0; padding: 6px 8px; background: rgba(201,138,0,.08); border-left: 3px solid var(--mitigate);
  border-radius: 6px; font-family: ui-monospace, monospace; font-size: .78rem; word-break: break-word; }
.adv-k { font-weight: 700; color: #f5c451; margin-right: 6px; }
.adv > summary { cursor: pointer; list-style: revert; }
.adv-text { margin: 6px 0 4px; padding: 8px; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, monospace; font-size: .76rem; background: rgba(0,0,0,.18); border-radius: 5px; }
.adv-src { font-size: .74rem; color: var(--accent); text-decoration: none; }
.adv-src:hover { text-decoration: underline; }
.adv-none { color: var(--muted); font-size: .84rem; }
.trends { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: rgba(59,130,246,.08); border-radius: 6px; }
.trends-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.trend { font-size: .86rem; margin: 2px 0; }
details.trends summary { cursor: pointer; color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.age { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.age.stale { color: #ff9b8f; font-weight: 600; }
.age.fresh { color: #6fcf97; font-weight: 600; }
details.mhist { margin: 6px 0; font-size: .82rem; }
details.mhist summary { cursor: pointer; color: var(--accent); }
.links { font-size: .82rem; }
.links a { color: var(--accent); }
.nogo-reasons li { color: #ffb4ab; }

/* My Minimums configuration panel */
details.mm-panel > summary {
  cursor: pointer; list-style: none; font-size: 1rem; font-weight: 600;
  padding: 2px 0;
}
details.mm-panel > summary::-webkit-details-marker { display: none; }
details.mm-panel > summary::before { content: "▶ "; font-size: .75em; color: var(--muted); }
details.mm-panel[open] > summary::before { content: "▼ "; }
.mm-desc { margin: 10px 0 14px; }

/* Self-assessment embedded under route / discovery results */
.self-check-inline h3 { font-size: .95rem; margin: 0 0 10px; }
.self-check-inline { margin-top: 0; }

/* Threat mitigation reference block (shown when verdict = MITIGATE) */
.mit-block h3 { margin: 0 0 12px; font-size: .95rem; }
.mit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mit-section { background: rgba(201,138,0,.08); border: 1px solid var(--mitigate); border-radius: 8px; padding: 10px 12px; }
.mit-label { font-weight: 600; color: #f5c451; font-size: .85rem; margin-bottom: 6px; }
.mit-list { margin: 0; padding-left: 16px; font-size: .83rem; color: var(--ink); }
.mit-list li { margin: 3px 0; }

/* Recency slider in My Minimums */
.mm-recency { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-recency-label { font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.mm-recency-row { display: flex; align-items: center; gap: 12px; }
.mm-recency-row input[type=range] { width: 160px; }
.mm-recency-row span { font-size: .9rem; font-weight: 600; min-width: 90px; }
.mm-recency-hint { margin: 8px 0 0; }

/* SVG logo */
.brand { font-size: 0; line-height: 1; }
.logo { display: block; height: 44px; width: auto; overflow: visible; }
.logo-word { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 38px; font-weight: 700; fill: var(--ink); }
.logo-bar { stroke: var(--muted); stroke-width: 2; fill: none; }
.logo-climb { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.logo-arrowhead { fill: var(--accent); }

/* Secondary button */
.secondary {
  background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 10px 18px;
  border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.secondary:hover { border-color: var(--ink); color: var(--ink); }

/* Settings panel typography */
.set-title { margin: 0 0 8px; font-size: 1.05rem; }
.set-intro { color: var(--muted); font-size: .86rem; margin: 0 0 16px; }
.set-group { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.set-group legend { color: var(--muted); font-size: .84rem; padding: 0 6px; }
.set-hint { color: var(--muted); font-size: .82rem; margin: 4px 0 10px; }
.set-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.set-status { color: #6ee7a0; font-size: .85rem; }

/* VFR/IFR weather-minimums card - tabs stick out of the top of the bubble */
.rule-card { margin-bottom: 16px; }
.rule-tabs { display: flex; gap: 4px; padding-left: 10px; }
.rule-tab {
  background: var(--bg); color: var(--muted); cursor: pointer;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 7px 18px; font-size: .9rem; font-weight: 600;
  position: relative; top: 1px;
}
.rule-tab.active { background: var(--panel); color: var(--ink); border-color: var(--accent); border-bottom: 1px solid var(--panel); }
.rule-bubble { border: 1px solid var(--accent); border-radius: 0 10px 10px 10px; padding: 14px; background: var(--panel); }
.rule-pane > .set-group:last-child { margin-bottom: 0; }
.imc-opt { border-style: dashed; }
.imc-opt label { color: var(--ink); font-weight: 600; }

/* Home base picker */
.base-pick { max-width: 300px; margin-bottom: 16px; }

/* Slider grid - used inside settings fieldsets */
.slider-grid { display: grid; gap: 8px; }
.sld { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.sld input[type=range] { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
.sld-label { font-size: .86rem; color: var(--ink); }
.sld-val { font-size: .86rem; font-weight: 600; color: var(--accent); text-align: right; min-width: 70px; }

/* Profile readout */
.min-banner {
  font-size: .85rem; color: var(--muted); padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); margin-bottom: 8px;
}
.min-banner.custom { color: #f5c451; background: rgba(201,138,0,.08); border-color: var(--mitigate); }
.chk.custom { border-left-color: var(--mitigate); background: rgba(201,138,0,.06); }
.chk.custom .mark { color: #f5c451; }

/* Radar panel (Leaflet + GeoMet WMS) */
.radar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.radar-panel h3 { margin: 0 0 10px; font-size: .95rem; }
.radar-types { display: flex; gap: 6px; }
.radar-type { background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .82rem; }
.radar-type.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* position+z-index makes the map its own stacking context so Leaflet's internal
   panes/controls (z-index up to ~1000) stay trapped below the sticky header. */
.radar-map { height: 380px; width: 100%; border-radius: 8px; border: 1px solid var(--line);
  position: relative; z-index: 0; }
.radar-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.radar-play { background: var(--accent); color: #fff; border: none; border-radius: 8px;
  width: 38px; height: 32px; cursor: pointer; font-size: .9rem; }
.radar-controls input[type=range] { flex: 1; }
.radar-time { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
/* Leaflet tiles render light; keep its controls readable on the dark theme */
.leaflet-container { background: #0b0f14; }

/* GFA graphical area forecast panel */
.gfa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gfa-panel h3 { margin: 0 0 10px; font-size: .95rem; }
.gfa-tabs, .gfa-frames { display: flex; gap: 6px; flex-wrap: wrap; }
.gfa-frames { margin: 10px 0; }
.gfa-tab, .gfa-frame {
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .82rem;
}
.gfa-tab.active, .gfa-frame.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gfa-img-link { display: block; }
.gfa-img { display: block; width: 100%; max-width: 760px; height: auto; margin: 10px auto 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.gfa-cap { margin: 4px 0 0; }

/* Conservatism presets - one inline row of chips + a single description line */
#conservatism { display: flex; flex-direction: column; gap: 8px; }
.preset-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.preset { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .88rem; }
.preset:has(input:checked) { border-color: var(--accent); background: rgba(59,130,246,.1); }
.preset input { margin: 0; }
.preset-desc { margin: 0; }

/* My Minimums panel as a div (not details) */
.mm-panel { margin-top: 16px; }

/* checks-grid fieldset children */
.checks-grid fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.checks-grid fieldset legend { color: var(--muted); font-size: .82rem; padding: 0 6px; }
.checks-grid label { display: flex; align-items: center; gap: 6px; font-size: .87rem; margin: 5px 0; cursor: pointer; }

.hidden { display: none !important; }
footer { max-width: 1000px; margin: 20px auto; padding: 0 20px 30px; color: var(--muted); font-size: .8rem; }
.empty { color: var(--muted); padding: 14px; }