/* ── Province ranking rows ────────────────────────────────────────────────── */
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--well);
  cursor: pointer;
  border-left: 4px solid transparent;
}
.rank-row:hover { background: var(--well-dim); }
.rank-row.b-high     { border-left-color: var(--band-high); }
.rank-row.b-elevated { border-left-color: var(--band-elevated); }
.rank-row.b-watch    { border-left-color: var(--band-watch); }
.rank-row.b-normal   { border-left-color: var(--band-normal); }

.rank-row .score {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 14px; color: #fff;
}
.rank-row .score.b-watch { color: var(--ink); }
.rank-row .who { flex: 1; min-width: 0; }
.rank-row .who .th { font-weight: 600; font-size: 14.5px; }
.rank-row .who .en { font-family: var(--font-num); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); }
.rank-row .stats { text-align: right; flex: none; }
.rank-row .stats .line { font-family: var(--font-num); font-size: 11px; color: var(--ink-mid); }
.rank-row .stats .line b { color: var(--ink); font-weight: 700; }
.rank-row .stats .line .hot { color: var(--th-red); font-weight: 700; }

/* ── Station detail ──────────────────────────────────────────────────────── */
.detail-back { margin: 10px 12px 0; }
.detail-block { background: var(--well); border-bottom: 1px solid var(--rule); padding: 10px 12px; }
.detail-block h3 { font-size: 15px; font-weight: 600; }
.detail-kv { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.detail-kv .v { font-family: var(--font-num); font-weight: 500; }
.spark { width: 100%; height: 64px; margin-top: 6px; }
.spark polyline { fill: none; stroke: var(--rain); stroke-width: 1.5; }
.spark .axis { font-family: var(--font-num); font-size: 8.5px; fill: var(--ink-low); }

/* ── Right rail tabs ─────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--rule-strong); background: var(--well); flex: none; }
.tabs button {
  flex: 1; border: none; border-right: 1px solid var(--rule);
  padding: 9px 2px 7px; font-size: 12.5px; font-weight: 600; background: var(--well-dim);
}
.tabs button:last-child { border-right: none; }
.tabs button.active { background: var(--well); border-bottom: 3px solid var(--th-navy); }
.tabs button .cnt { font-family: var(--font-num); font-size: 10px; color: var(--th-red); font-weight: 700; }

.tabpane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.tabpane.active { display: flex; }

/* ── Running tap ─────────────────────────────────────────────────────────── */
.tap-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  background: var(--well);
}
.tap-row.fresh { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #FDF3D7; } }
.tap-row .t { font-family: var(--font-num); font-size: 10.5px; color: var(--ink-low); flex: none; width: 40px; }
.tap-row .sq { width: 8px; height: 8px; flex: none; align-self: center; }
.tap-row .sq.sev0 { background: var(--rule-strong); opacity: 0.25; }
.tap-row .sq.sev1 { background: var(--rain); }
.tap-row .sq.sev2 { background: var(--lv4); }
.tap-row .sq.sev3 { background: var(--th-red); }
.tap-row .msg { flex: 1; min-width: 0; }
.tap-row .src { font-family: var(--font-num); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-low); }

.tap-paused {
  padding: 4px 10px; background: var(--band-watch); color: var(--ink);
  font-size: 12px; font-weight: 600; cursor: pointer; flex: none;
}

/* ── Alerts / news lists ─────────────────────────────────────────────────── */
.alert-row { padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--well); font-size: 13.5px; display: flex; gap: 8px; }
.alert-row .badge { margin-top: 2px; }
.alert-row .when { font-family: var(--font-num); font-size: 10.5px; color: var(--ink-low); }
.news-row { padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--well); font-size: 13.5px; }
.news-row a { text-decoration: none; }
.news-row a:hover { text-decoration: underline; }
.news-row .when { font-family: var(--font-num); font-size: 10px; color: var(--ink-low); }

/* ── Chat ────────────────────────────────────────────────────────────────── */
#chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 92%; padding: 8px 10px; font-size: 13.5px; white-space: pre-wrap; }
.chat-msg.user { align-self: flex-end; background: var(--th-navy); color: var(--ink-inv); }
.chat-msg.bot  { align-self: flex-start; background: var(--well); border: 1px solid var(--rule-strong); }
.chat-msg.offline { border-left: 4px solid var(--band-watch); font-family: var(--font-num); font-size: 11.5px; }
.chat-msg .kn { margin-top: 6px; font-size: 10px; color: var(--ink-low); font-family: var(--font-num); }
#chat-form { display: flex; border-top: 1px solid var(--rule-strong); flex: none; }
#chat-input { flex: 1; border: none; padding: 10px; }
#chat-send { border: none; border-left: 1px solid var(--rule-strong); padding: 0 16px; font-weight: 700; }
.chat-status { padding: 4px 10px; font-family: var(--font-num); font-size: 10px; color: var(--ink-low); border-top: 1px solid var(--rule); flex: none; }
.chat-status .on { color: var(--band-normal); }
.chat-status .off { color: var(--th-red); }

/* ── Map controls & legend (transit signage style) ───────────────────────── */
.mapctl {
  background: var(--well);
  border: 1px solid var(--rule-strong) !important;
  font-family: var(--font-ui);
}
.mapctl .row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 12.5px; user-select: none; }
.mapctl .row:last-child { border-bottom: none; }
.mapctl .row .sw { width: 12px; height: 12px; border: 1px solid var(--ink); flex: none; }
.mapctl .row.on .sw { background: var(--th-navy); }
.mapctl .row .en { font-family: var(--font-num); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mid); }

.legend { background: var(--well); border: 1px solid var(--rule-strong); padding: 6px 8px; font-size: 11px; }
.legend .lrow { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; }
.legend .lsw { width: 11px; height: 11px; flex: none; }
.legend .lsw.round { border-radius: 50% !important; }

.radarctl { background: var(--well); border: 1px solid var(--rule-strong); padding: 4px 8px; display: flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: 11px; }
.radarctl button { border: 1px solid var(--ink); padding: 1px 7px; font-size: 11px; }

/* Station badges on the map (level 4/5 get numbered squares) */
.stn-badge {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 11px; color: #fff;
  border: 1.5px solid #fff;
}
.stn-badge.lv4 { background: var(--lv4); }
.stn-badge.lv5 { background: var(--lv5); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }

.leaflet-popup-content-wrapper { border: 1px solid var(--rule-strong); }
.leaflet-popup-content { font-family: var(--font-ui); font-size: 13px; margin: 10px 12px; }
.leaflet-popup-content .pop-name { font-weight: 700; }
.leaflet-popup-content .pop-en { font-family: var(--font-num); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mid); }
.leaflet-popup-content .pop-kv { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.leaflet-popup-content .pop-kv .v { font-family: var(--font-num); }

/* ── Connected waterways: cascade nodes + lag chips ──────────────────────── */
.reach-node { border: 2px solid #fff; transform: rotate(45deg); }
.lag-chip {
  font-family: var(--font-num); font-size: 9px; font-weight: 700;
  color: var(--th-navy); background: rgba(246,244,239,0.85);
  padding: 0 3px; text-align: center; white-space: nowrap;
  border: 1px solid var(--rule);
}

/* Historical flood pins */
.hist-pin {
  font-family: var(--font-num); font-weight: 700; font-size: 11px; color: #fff;
  padding: 2px 4px; border: 1.5px solid #fff; text-align: center; white-space: nowrap;
  opacity: 0.9;
}

/* ── Waterways panel: cascade chain ──────────────────────────────────────── */
.cascade-flow { padding: 8px 12px; }
.cascade-step {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; position: relative;
}
.cascade-step + .cascade-step { border-top: 1px dashed var(--rule); }
.cascade-node-sq {
  width: 26px; height: 26px; flex: none; transform: rotate(45deg);
  border: 2px solid #fff; margin: 3px 8px;
}
.cascade-body { flex: 1; min-width: 0; }
.cascade-body .nm { font-weight: 600; font-size: 13.5px; }
.cascade-body .q { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-mid); }
.cascade-body .q b { color: var(--ink); }
.cascade-lag {
  font-family: var(--font-num); font-size: 10px; color: var(--ink-low);
  text-align: right; flex: none;
}
.cascade-lag .eta { color: var(--rain); font-weight: 700; font-size: 12px; }

.wx-method { padding: 8px 12px; font-size: 11.5px; color: var(--ink-mid); border-bottom: 1px solid var(--rule); background: var(--well-dim); }

/* Wetness (API) rows */
.wet-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--rule); background: var(--well); }
.wet-bar { flex: 1; height: 8px; background: var(--well-dim); position: relative; }
.wet-bar > div { position: absolute; left: 0; top: 0; bottom: 0; }
.wet-sat > div  { background: #0039A6; }
.wet-wet > div  { background: #1D66A8; }
.wet-moist > div{ background: #7FA9C9; }
.wet-dry > div  { background: #C9C2B4; }
.wet-row .nm { width: 92px; flex: none; font-size: 12.5px; }
.wet-row .val { font-family: var(--font-num); font-size: 11px; width: 58px; text-align: right; flex: none; color: var(--ink-mid); }

/* ENSO chip */
.enso-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule-strong); background: var(--well); }
.enso-dot { width: 12px; height: 12px; flex: none; }
.enso-la_nina .enso-dot, .enso-la_nina_strong .enso-dot { background: #0039A6; }
.enso-el_nino .enso-dot, .enso-el_nino_strong .enso-dot { background: #E86A10; }
.enso-neutral .enso-dot { background: #8A8A8A; }
.enso-chip .txt { flex: 1; min-width: 0; }
.enso-chip .txt .h { font-weight: 700; font-size: 13px; }
.enso-chip .txt .s { font-size: 10.5px; color: var(--ink-mid); }
.enso-chip .oni { font-family: var(--font-num); font-weight: 700; font-size: 15px; }

/* Loading state */
#boot {
  position: fixed; inset: 0; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  z-index: 9999;
}
#boot .bar { width: 220px; height: 4px; background: var(--rule); overflow: hidden; }
#boot .bar div { width: 40%; height: 100%; background: var(--th-navy); animation: load 1.2s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%);} 100% { transform: translateX(320%);} }