/* ────────────────────────────────────────────────────────────────────────────
   AIRDASH design core — clean-air instrument panel, not a flood warning board.
   Light sky ground, deep teal ink, AQI gradient as the only colored stripe.
   Sharp corners. No shadows. Manrope for the wordmark, JetBrains Mono for
   the numbers, Sarabun still owns the Thai glyphs.
   ──────────────────────────────────────────────────────────────────────────── */
@import url('/fonts/fonts.css');

:root {
  /* Ground — soft sky gradient (top brighter, bottom cooler). The page never
     feels heavy the way a dark navy chrome does. */
  --paper:       #F4F8FB;   /* cool paper — the ground everywhere */
  --paper-warm:  #FAFCFF;   /* the topmost band, almost white */
  --well:        #FFFFFF;   /* panel wells */
  --well-dim:    #E8EFF4;   /* recessed strips */
  --rule:        #D6DEE5;   /* hairlines */
  --rule-strong: #0E4A5E;   /* deep teal — used for input borders / heavy rules */

  /* Ink — deep teal, not Thai-flag navy. Carries the AirDash identity. */
  --ink:      #0E4A5E;
  --ink-mid:  #4A6273;
  --ink-low:  #7E8E9A;
  --ink-inv:  #FFFFFF;

  /* Air accents — sage green for "good air", terracotta for "watch",
     a single brick red for "severe". Distinct from FloodDash's
     Thai-flag navy / saffron / red triad. */
  --th-red:  #C8453A;   /* "severe" — brick, not blood red */
  --th-sage: #3A8A6E;   /* "good air" — clean-air sage */
  --th-deep: #0E4A5E;   /* primary chrome / hover */

  /* Legacy aliases — components.css still references --th-navy and the
     page never accidentally paints the old FloodDash navy. */
  --th-navy: #0E4A5E;   /* now points to the AirDash teal */
  --th-amber: #D8893A;  /* AQI watch colour, also a tertiary accent */

  /* Thai AQI bands (PM2.5) — used as the top-stripe gradient, the badge
     fill on the national plate, and the map marker colors. Anchored at
     the 2023 PCD standard. */
  --aqi-good:      #2E8B57;   /* 0–15  */
  --aqi-moderate:  #C8B560;   /* 15–25 */
  --aqi-watch:     #D8893A;   /* 25–37.5 */
  --aqi-unhealthy: #C8453A;   /* 37.5–75 */
  --aqi-hazardous: #6B2D5C;   /* 75+ */

  /* Risk bands (used by the Air Watch Score) */
  --band-normal:   var(--aqi-good);
  --band-watch:    var(--aqi-watch);
  --band-elevated: var(--aqi-unhealthy);
  --band-high:     var(--aqi-hazardous);

  /* Data hues — distinct from FloodDash's transport-blue/teal. */
  --rain: #2D7A8C;   /* deep teal for rainfall / washout */
  --dam:  #7B96A0;   /* neutral slate for reservoirs (kept for legacy data) */
  --aqi:  #0E4A5E;   /* primary brand teal */

  /* Fonts */
  --font-ui:    'Sarabun', 'Thonburi', 'Helvetica Neue', sans-serif;
  --font-num:   'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --font-display: 'Manrope', 'Sarabun', system-ui, sans-serif;

  --header-h: 80px;   /* v2 single-row instrument panel — was 96px (two rows) */
  --ticker-h: 30px;
  --rail-l: 324px;
  --rail-r: 392px;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important; }

html, body {
  height: 100%;
  overflow: hidden;               /* fixed viewport — the map owns the page */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
}

.num, .mono {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Machine label — uppercase mono eyebrow used on every panel */
.eyebrow {
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-low);
}

/* Bilingual signage block: Thai leads, English follows small */
.sign .th { font-weight: 600; }
.sign .en {
  font-family: var(--font-num);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* Square status badge — AirDash's "subway bullet" stays a square so the
   left rail reads as a column of AQI levels. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  flex: none;
}
.badge.lv1 { background: var(--aqi-good); }
.badge.lv2 { background: var(--aqi-moderate); color: #2A2A2A; }
.badge.lv3 { background: var(--aqi-watch); }
.badge.lv4 { background: var(--aqi-unhealthy); }
.badge.lv5 { background: var(--aqi-hazardous); }
.badge.b-normal   { background: var(--band-normal); }
.badge.b-watch    { background: var(--band-watch); color: #2A2A2A; }
.badge.b-elevated { background: var(--band-elevated); }
.badge.b-high     { background: var(--band-high); }

.sev0 { color: var(--ink-mid); }
.sev1 { color: var(--rain); }
.sev2 { color: var(--aqi-watch); }
.sev3 { color: var(--th-red); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-low); }
::-webkit-scrollbar-track { background: transparent; }

button {
  font-family: inherit;
  border: 1px solid var(--rule);
  background: var(--well);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 8px;
}
/* CONTRAST CONTRACT: these global state rules set background AND color as an
   inseparable pair. Any component override of its own buttons MUST override
   both — overriding only `background` leaves the cream text from here on a
   light surface (invisible label; this exact bug shipped once on the right-
   rail tabs), and vice versa. */
button:hover { background: var(--th-deep); color: var(--ink-inv); border-color: var(--th-deep); }
button.active { background: var(--th-deep); color: var(--ink-inv); border-color: var(--th-deep); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--th-sage);
  outline-offset: 2px;
}

input, textarea {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--rule);
  background: var(--well);
  color: var(--ink);
  padding: 6px 8px;
}
input:focus, textarea:focus { outline: 2px solid var(--th-deep); outline-offset: -1px; }

a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #ticker .track .crawl { padding-left: 12px; transform: none !important; }
}