/* #region zone:disaster.style.instrument — ไทม์ไลน์ล่าง: ป้ายเหนือแถบเสมอ, แถบบาง, ยุบเหลือ "ตอนนี้" */
/* Card open (design-spec.md §2): the dock clears the left card column. */
.app.has-card .instrument-strip {
  left: 400px;
}
.app.has-card .dock-skip {
  display: none;
}
/* Round 7: SE Asia/world toggle inside the quake row's expanded legend. */
.quake-view-toggle {
  margin-top: var(--u-space-2);
  border: 1px solid var(--card-line);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 5px var(--u-space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
/* PM2.5 (2026-09-28): the Thai PCD 5-band colour key inside the pm25 row's expanded legend. */
.pm25-legend-swatches {
  margin-top: var(--u-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--u-space-1);
}
.pm25-legend-row {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  font-size: var(--fs-xs);
  color: var(--text);
}
.pm25-legend-dot {
  clip-path: polygon(100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0, 75% 0);
  width: 10px;
  height: 10px;
  flex: none;
}
/* Flood simulation (2026-09-28): honesty badge + KPI card + caveats inside the floodsim row's expanded legend. */
.floodsim-badge {
  margin-top: var(--u-space-2);
  display: inline-block;
  border: 1px solid var(--hz-flood);
  color: var(--hz-flood-ink, var(--hz-flood));
  background: var(--hz-flood-soft);
  border-radius: var(--r-pill);
  padding: var(--u-space-1) 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.floodsim-scenarios {
  margin-top: var(--u-space-2);
}
.floodsim-depth-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--u-space-1);
  padding-top: 18px;
  margin-top: var(--u-space-3);
  position: relative;
  font-size: var(--fs-xs);
  color: var(--text);
}
.floodsim-depth-scale::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #a0deef, #63b5e0, #429bd1, #287ebd, #0e4482);
}
.floodsim-scenarios button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.floodsim-kpi {
  margin-top: var(--u-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--u-space-1);
  font-size: var(--fs-xs);
  color: var(--text);
}
.floodsim-caveats {
  margin-top: var(--u-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--u-space-1);
  font-size: var(--fs-xs);
  color: var(--faint);
}
/* #endregion */

/* #region zone:disaster.style.legend-panel — การ์ดเลเจนด์แยกมุมล่างขวา: แถบไล่สี + ค่าขีด + หมายเหตุ */
.legend-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 272px;
  z-index: 16;
  border-radius: var(--r-card);
  padding: 10px var(--u-space-3);
}
.legend-panel[hidden] {
  display: none;
}
.legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-2);
  margin-bottom: 7px;
}
.legend-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}
.ramp-toggle {
  border: 0;
  background: transparent;
  padding: 2px var(--u-space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--faint);
  cursor: pointer;
  border-radius: 6px;
}
.ramp-toggle:hover {
  color: var(--text);
  background: var(--track);
}
.ramp-toggle[hidden] {
  display: none;
}
.legend-bar {
  height: 10px;
  border-radius: 5px;
}
.legend-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--u-space-1);
  font-size: var(--u-text-note);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.legend-note {
  margin: 6px 0 0;
  font-size: var(--u-text-note);
  line-height: 1.35;
  color: var(--faint);
}
/* #endregion */

/* #region zone:disaster.style.card — การ์ดพยากรณ์ที่ปักหมุดใกล้จุดที่แตะ */
.forecast-card {
  position: absolute;
  z-index: 25;
  left: 16px;
  top: 76px;
  width: 368px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 92px);
  border-radius: var(--r-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    opacity var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-out);
}
.forecast-card[hidden] {
  display: none;
}
.forecast-hero {
  position: relative;
  flex: none;
  padding: var(--u-space-4) 18px var(--u-space-4);
  color: #f2f7fa;
  overflow: hidden;
  background: linear-gradient(160deg, #0b3a3f 0%, #0f5c5a 55%, #2f8c84 100%);
}
.forecast-hero[data-scene='rain'],
.forecast-hero[data-scene='storm'] {
  background: linear-gradient(160deg, #1f3450 0%, #2e4e74 55%, #4a6c92 100%);
}
.forecast-hero[data-scene='rain'][data-night='true'],
.forecast-hero[data-scene='storm'][data-night='true'] {
  background: linear-gradient(160deg, #0d1830 0%, #182c4a 55%, #2a4562 100%);
}
.forecast-hero[data-scene='clear'] {
  background: linear-gradient(160deg, #0e5e7e 0%, #2e8fb8 55%, #74bedb 100%);
}
.forecast-hero[data-scene='clear'][data-night='true'] {
  background: linear-gradient(160deg, #061826 0%, #0e2c46 55%, #1b4569 100%);
}
.forecast-hero[data-scene='partly'] {
  background: linear-gradient(160deg, #123b52 0%, #2e6e8c 55%, #5fa0be 100%);
}
.forecast-hero[data-scene='partly'][data-night='true'] {
  background: linear-gradient(160deg, #0a1f30 0%, #16374e 55%, #294f6b 100%);
}
.forecast-hero[data-scene='overcast'] {
  background: linear-gradient(160deg, #34424f 0%, #53667a 55%, #7d90a3 100%);
}
.forecast-hero[data-scene='overcast'][data-night='true'] {
  background: linear-gradient(160deg, #1a2129 0%, #2b3743 55%, #46545f 100%);
}
.forecast-hero > :not(.weather-scene) {
  position: relative;
  z-index: 1;
}
.weather-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.forecast-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.forecast-place {
  flex: 1;
  min-width: 0;
}
.forecast-place-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forecast-place-time {
  font-size: var(--fs-xs);
  opacity: 0.82;
  margin-top: 1px;
}
.forecast-close {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.forecast-now {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  margin-top: 10px;
}
.forecast-cond-icon {
  display: flex;
  flex: none;
  color: #fff;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}
.forecast-temp {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.forecast-cond {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-md);
  font-weight: 600;
  min-width: 0;
}
.forecast-cond small {
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 0.85;
}
.forecast-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: var(--u-space-3) 0 0;
}
.forecast-chips div {
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.13);
  min-width: 0;
}
.forecast-chips dt {
  font-size: var(--u-text-note);
  font-weight: 650;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.forecast-chips dd {
  margin: 0;
  font-weight: 650;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #endregion */