/* #region zone:disaster.style.responsive — จอกว้าง 1280/1024/820/600 และปรับสดตอนย่อขยาย */
@media (max-width: 1024px) {
  .app.has-card .instrument-strip {
    left: 396px;
  }
  .app.has-card .speed-group {
    display: none;
  }
}
@media (max-width: 820px) {
  .topbar {
    left: 12px;
    right: 12px;
    top: 12px;
  }
  .brand-sub {
    display: none;
  }
  /* Mobile top (design-spec.md §2): brand + actions on one row, the layer chip on its own row under the brand. */
  .layer-chip {
    display: inline-flex;
    position: absolute;
    top: 54px;
    left: 0;
  }
  /* design-spec.md §2 mobile: the dock sits 8px from the edges in 2 rows (no skip buttons, no speed —
     "speed moves into the sheet" is not built); the badge drops its "grid · run" tail. It floats just above
     the peeking sheet (150px), and the legend strip floats above the dock (its height is --dock-h, JS). */
  .instrument-strip,
  .app.has-card .instrument-strip {
    left: 8px;
    right: 8px;
    bottom: 158px;
    padding: 10px var(--u-space-3) var(--u-space-2);
    gap: 6px;
  }
  .dock-timeline {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
  }
  .dock-skip,
  .speed-group,
  .badge-tail {
    display: none;
  }
  .instrument-play {
    width: 40px;
    height: 40px;
  }
  .dock-when {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .instrument-time {
    font-size: var(--fs-md);
  }
  .dock-seg-label {
    font-size: 9.5px;
  }
  .legend-panel {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(158px + var(--dock-h, 130px) + 8px);
    padding: var(--u-space-2) 10px;
  }
  .legend-note {
    display: none;
  }
  .app[data-sheet-state='half'] .instrument-strip,
  .app[data-sheet-state='full'] .instrument-strip,
  .app[data-sheet-state='half'] .legend-panel,
  .app[data-sheet-state='full'] .legend-panel,
  .app[data-sheet-mode='forecast'] .instrument-strip,
  .app[data-sheet-mode='forecast'] .legend-panel {
    visibility: hidden;
  }
  /* ONE bottom sheet (owner round 2 §4, "not two stacked panels"): #rail and .forecast-card occupy the
     EXACT same rectangle and slide together (.app[data-sheet-state]); which one is visible is a separate
     switch (.app[data-sheet-mode]). The card's hourly tubes act as the timeline while it is open. */
  .rail,
  .forecast-card {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: calc(100dvh - 76px);
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    border-bottom: 0;
    transform: translateY(calc(100% - 150px));
    transition: transform var(--t-med) var(--ease-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .app[data-sheet-state='half'] .rail,
  .app[data-sheet-state='half'] .forecast-card {
    transform: translateY(calc(100% - 56dvh));
  }
  .app[data-sheet-state='full'] .rail,
  .app[data-sheet-state='full'] .forecast-card {
    transform: none;
  }
  .app[data-sheet-mode='browse'] .forecast-card {
    visibility: hidden;
    pointer-events: none;
  }
  .app[data-sheet-mode='forecast'] .rail {
    visibility: hidden;
    pointer-events: none;
  }
  .sheet-handle {
    display: grid;
    place-items: center;
    height: 22px;
    flex: none;
  }
  .forecast-card .sheet-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
  .forecast-card .grip {
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
  }
  .grip {
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--faint);
    opacity: 0.5;
  }
  .rail-body {
    flex: 1;
  }
  .forecast-hero {
    padding-top: 22px;
  }
}
@media (max-width: 600px) {
  .city-chip-minor {
    display: none !important;
  }
  .rail,
  .forecast-card {
    height: calc(100dvh - 64px);
  }
  .app[data-sheet-state='half'] .rail,
  .app[data-sheet-state='half'] .forecast-card {
    transform: translateY(calc(100% - 64dvh));
  }
  .forecast-temp {
    font-size: var(--weather-text-temperature-phone);
  }
  .forecast-chips {
    gap: var(--u-space-1);
  }
  .forecast-chips div {
    padding: 6px var(--u-space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* #endregion */
/* #region zone:disaster.css.flood-reports — เครื่องมือข้อมูลน้ำท่วมจริง */
.flood-evidence-tools {
  padding: var(--u-space-2) var(--u-space-4);
  border-bottom: 1px solid var(--card-line);
  font-size: var(--u-text-xs);
}
.bangkok-quick {
  border: 0;
  border-radius: var(--u-radius-pill);
  padding: 9px 14px;
  color: var(--text);
  font: inherit;
  font-size: var(--u-text-sm);
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 820px) {
  .bangkok-quick {
    position: absolute;
    top: 100px;
    left: 0;
  }
}
.flood-honesty {
  margin: 0 0 calc(var(--sheet-space) * 1.5);
  line-height: 1.45;
  color: var(--faint);
}
.flood-evidence-tools button:not(.ui-control-trigger, .ui-select-option),
.flood-evidence-tools select,
.flood-evidence-tools input {
  font: inherit;
  border-radius: var(--r-control);
  padding: 6px var(--u-space-2);
}
.flood-evidence-tools button:not(.ui-control-trigger, .ui-select-option) {
  cursor: pointer;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: inherit;
}
.flood-evidence-tools #flood-report-form button[type='submit'] {
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 700;
}
.flood-evidence-tools #flood-report-button:not([hidden]) {
  display: block;
  width: 100%;
}
.flood-evidence-tools form {
  display: grid;
  gap: var(--sheet-space);
  margin-top: var(--u-space-2);
}
.flood-evidence-tools form[hidden] {
  display: none;
}
.flood-evidence-tools label {
  display: grid;
  gap: var(--u-space-2);
}
.flood-band-field {
  display: grid;
  gap: var(--u-space-2);
}
#flood-report-status {
  display: block;
  margin-top: var(--u-space-1);
}
/* #region zone:disaster.css.flood-reports.touch — ช่องหมายเหตุและปุ่มรายงานแตะได้เต็มพื้นที่บนมือถือ */
@media (max-width: 820px), (pointer: coarse) {
  .flood-evidence-tools :is(button, input:not([type='hidden']), select) {
    box-sizing: border-box;
    min-height: var(--tap-min);
  }
}
/* #endregion */
/* #endregion */
/* #region zone:disaster.style.gistda.layers — ตัวเลือกช่วงและข้อมูลจุด */
.gistda-period {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u-space-1);
  margin: var(--u-space-2) 0;
}
.gistda-period button {
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px var(--u-space-2);
  font: inherit;
  cursor: pointer;
}
.gistda-period button[aria-pressed='true'] {
  border-color: var(--hz-flood);
  color: var(--hz-flood);
}
.gistda-point-lines {
  display: grid;
  gap: 3px;
  margin: var(--u-space-1) 0;
  font-size: 0.8rem;
}
.gistda-point-lines small {
  opacity: 0.7;
}
/* #endregion */

.road-sensor-card {
  color: #254552;
  min-width: 220px;
  padding: var(--u-space-1) 2px;
  line-height: 1.55;
}
.road-sensor-card .map-popup-title {
  font-size: 14px;
  color: inherit;
  padding-bottom: var(--u-space-2);
}
.road-sensor-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  background: #edf2f4;
  color: #59707b;
  font-size: 11px;
}
.road-sensor-value {
  margin: var(--u-space-3) 0 var(--u-space-2);
  font-size: 16px;
  font-weight: 600;
  color: inherit;
}
.road-sensor-time {
  border-top: 1px solid #e2eaed;
  padding-top: 10px;
  margin-bottom: 5px;
}

.road-sensor-popup .maplibregl-popup-content {
  border-radius: 16px;
  padding: var(--u-space-4);
  box-shadow: 0 8px 28px #17394424;
}
.road-sensor-popup .maplibregl-popup-close-button {
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #59707b;
}

.road-sensor-card .map-popup-sub {
  color: #59707b;
}

/* #region zone:disaster.css.phone-taps — มือถือ: ปุ่มการ์ดพยากรณ์ต้องกดง่าย (>= --tap-min) */
@media (max-width: 820px) {
  .road-sensor-popup .maplibregl-popup-close-button {
    width: var(--tap-min);
    height: var(--tap-min);
    top: 0;
    right: 0;
  }
  .forecast-close {
    width: var(--tap-min);
    height: var(--tap-min);
  }
  .fc-tab {
    width: var(--tap-min);
    height: var(--tap-min);
  }
}
/* #endregion */