/* #region zone:disaster.style.rail — แถบเลเยอร์/สัญลักษณ์/คำเตือน (ขวาบนจอใหญ่, แผ่นล่างบนมือถือ) */
/* The title and its freshness/status line never share a row (finish review round 2 §2): each is its own
   block, so a long "GISTDA not connected" or "As of 27 Sept, 17:52" string never collides with the name. */
.layer-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.layer-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}
.layer-status {
  display: block;
  font-size: var(--fs-xs);
  color: var(--faint);
  line-height: 1.35;
}
.layer-status[data-state='stale'] {
  color: var(--hz-warn-ink);
}
.layer-status[data-state='off'] {
  color: var(--faint);
  font-style: italic;
}
/* 2026-09-28 (hazard-overlays fix): a disabled switch (source off by its own Monitor flag, GISTDA not
   connected, or a "coming soon" field) had NO visual difference from a live one — full colour, full
   opacity, same cursor — so it looked switchable while doing nothing. Dimmed + a not-allowed cursor makes
   "this one isn't yours to flip" readable at a glance, matching .layer-status[data-state="off"] above. */

.legend-detail {
  padding: var(--u-space-1) var(--u-space-2) var(--u-space-3) 44px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}
.legend-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 6px 0 0;
}
.legend-detail dt {
  color: var(--faint);
}
.legend-detail dd {
  margin: 0;
}
.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Round 5 §3/§4: plain popup content for the DWR station / drought province click handlers (disaster-map.js).
   MapLibre supplies the popup chrome (.maplibregl-popup-content); this only styles what's inside it. */
.map-popup {
  font: 400 12px var(--font);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 200px;
}
.map-popup-title {
  font-weight: 700;
}
.map-popup-sub {
  color: var(--faint);
  font-size: var(--u-text-note);
}
.map-readout {
  max-width: 232px;
}

/* design-spec.md §2 "City values": glass pills at 12 provincial capitals — a swatch dot in the active
   ramp colour, the city name, and the value. Anchored left (map-map.js's Marker offset) so the dot sits
   at the exact coordinate and the label reads to its right, matching the mockup. */
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  padding: 3px var(--u-space-2) 3px var(--u-space-1);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  background: var(--glass-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.city-chip-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.city-chip-value {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Province-impact table (round 3 §4): a compact, scrollable, sortable list inside the flood row's own
   expanded legend — no second panel to discover. */
.impact-table-wrap {
  margin-top: var(--u-space-2);
  max-height: 220px;
  overflow: auto;
  border-radius: var(--r-control);
  border: 1px solid var(--card-line);
}
.impact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--u-text-note);
  font-variant-numeric: tabular-nums;
}
.impact-table th {
  position: sticky;
  top: 0;
  background: var(--glass-strong);
  text-align: right;
  padding: 6px var(--u-space-2);
  font-weight: 700;
  color: var(--faint);
  cursor: pointer;
  white-space: nowrap;
}
.impact-table th:first-child,
.impact-table td:first-child {
  text-align: left;
}
.impact-table td {
  padding: 5px var(--u-space-2);
  text-align: right;
  border-top: 1px solid var(--glass-edge);
  white-space: nowrap;
}
.impact-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.impact-table tbody tr:hover,
.impact-table tbody tr:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.warn-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-control);
  background: var(--hz-warn-bg);
  border: 1px solid var(--hz-warn-line);
}
.warn-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.warn-item-body {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
}
.empty-state {
  padding: 22px 14px;
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.luna-slot {
  margin: var(--u-space-1) var(--u-space-2) var(--u-space-2);
  padding: var(--u-space-3);
  border-radius: var(--r-control);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px dashed var(--card-line);
  color: var(--faint);
}
.luna-slot-icon {
  flex: none;
  color: var(--accent);
  opacity: 0.8;
}
.luna-slot-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.luna-slot-sub {
  font-size: var(--fs-xs);
}

.attribution-line {
  padding: 10px var(--u-space-3) var(--u-space-1);
  font-size: var(--u-text-note);
  color: var(--faint);
  line-height: 1.5;
  border-top: 1px solid var(--glass-edge);
}

/* #endregion */