/* #region zone:disaster.style.sheet — แผ่นเดียว ย่อ/ครึ่ง/เต็มจอ รองรับมือถือแนวนอนและเดสก์ท็อป */
#app {
  --sheet-space: 8px;
  --sheet-target: 44px;
  --panel-width: 380px;
}
#app button,
#app select,
#app input,
#gate button,
#gate input {
  appearance: none;
  -webkit-appearance: none;
}
#app .topbar {
  position: static;
  display: contents;
}
#app .brand {
  position: absolute;
  top: max(8px, var(--sheet-safe-top));
  left: max(8px, env(safe-area-inset-left));
  padding: var(--u-space-2) var(--u-space-3);
  min-height: var(--sheet-target);
  gap: var(--sheet-space);
  z-index: 20;
}
#app .brand img {
  width: 24px;
  height: 24px;
}
#app .brand-name {
  font-size: 14px;
}
#app .brand-sub,
#app .topbar-spacer,
#app #layer-chip {
  display: none;
}
#app .map-tools {
  position: absolute;
  z-index: 20;
  top: max(8px, var(--sheet-safe-top));
  right: max(8px, env(safe-area-inset-right));
  display: grid;
  gap: var(--sheet-space);
}
#app .map-tools button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: var(--sheet-target);
  padding: var(--u-space-2);
  font-size: var(--u-text-sm);
  border-radius: var(--r-control);
}
#app .hazard-sheet {
  position: absolute;
  z-index: 19;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sheet-height, 140px);
  max-height: 100%;
  border-radius: var(--u-radius-card) var(--u-radius-card) 0 0;
  padding-bottom: var(--sheet-safe-bottom);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height var(--t-med) var(--ease-out);
}
#app .hazard-sheet > .sheet-handle {
  border-radius: var(--u-radius-dialog) var(--u-radius-dialog) 0 0;
  display: flex;
  position: static;
  width: 100%;
  min-height: var(--sheet-target);
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: var(--u-space-2);
  touch-action: none;
}
#app .hazard-sheet .grip {
  width: 36px;
  height: 4px;
  background: var(--muted);
  opacity: 0.5;
}
#app .focus-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sheet-space);
  padding: 0 var(--u-space-4) var(--u-space-2);
  flex: none;
  border-bottom: 1px solid var(--glass-edge);
}
#app .focus-head-text {
  display: contents;
}
#app .focus-title {
  grid-column: 1 / -1;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin: 0;
  max-width: 100%;
}
#app .focus-meta {
  margin: 0;
  font-size: var(--u-text-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#app .focus-exit {
  min-height: var(--sheet-target);
  padding: var(--u-space-2) var(--u-space-3);
  font-size: var(--u-text-xs);
}
#app .sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--u-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--u-space-4);
  scrollbar-gutter: stable;
}
#app[data-sheet-state='peek'][data-sheet-layout='bottom'] .sheet-body {
  visibility: hidden;
}
#app .ui-chip,
#app .sheet-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sheet-target);
  padding: var(--u-space-2) 14px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: var(--u-text-sm);
  font-weight: 600;
}
#app .ui-chip[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
#app .sheet-body > * {
  flex: none;
  min-width: 0;
  max-width: 100%;
}
#app .sheet-body .focus-sheet,
#app .sheet-body .forecast-card,
#app .sheet-body .legend-panel,
#app .sheet-body .rail,
#app .sheet-body .instrument-strip {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: none;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  border-radius: var(--r-control);
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}
#app .sheet-body .focus-sheet {
  display: flex;
  overflow: visible;
  background: transparent;
  border: 0;
  padding: 0;
}
#app .sheet-body .focus-sheet[hidden],
#app .sheet-body .forecast-card[hidden],
#app .sheet-body .legend-panel[hidden],
#app .sheet-body .instrument-strip[hidden] {
  display: none;
}
#app .focus-list {
  overflow: visible;
  padding: 0;
  gap: var(--sheet-space);
}
#app .focus-note {
  padding: var(--u-space-2) 0;
  overflow-wrap: anywhere;
}
#app .focus-list:empty::before {
  content: 'ยังไม่มีข้อมูลล่าสุดในพื้นที่นี้ · ตรวจสอบแหล่งข้อมูลด้านล่าง';
  color: var(--muted);
  font-size: var(--u-text-sm);
  padding: var(--u-space-2);
}
#app .sheet-body .forecast-card {
  overflow: hidden;
  border: 1px solid var(--card-line);
}
#app #forecast-sheet-toggle {
  display: none;
}
#app .forecast-body {
  overflow: visible;
  padding: var(--u-space-2);
}
#app .forecast-hourly {
  max-width: 100%;
}
#app .rail {
  display: flex;
  overflow: visible;
  border: 0;
  background: transparent;
  padding: 0;
}
#app .rail .rail-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sheet-space);
  padding: var(--u-space-1);
  border-radius: var(--r-control);
  background: var(--track);
}
#app .rail-tab {
  min-height: var(--sheet-target);
  border: 1px solid transparent;
  border-radius: calc(var(--r-control) - 4px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--u-text-sm);
  font-weight: 700;
}
#app .rail-tab[aria-selected='true'] {
  border-color: var(--card-line);
  background: var(--glass-strong);
  color: var(--accent-strong);
}
#app .rail .rail-body {
  overflow: visible;
  padding: var(--u-space-2) 0;
}
#app .rail .luna-slot {
  display: none;
}
#app .ui-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sheet-space);
  width: 100%;
  min-height: var(--sheet-target);
  padding: var(--u-space-2);
  border-radius: var(--r-control);
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: var(--u-text-sm);
  font-weight: 700;
}
#app .ui-disclosure::-webkit-details-marker {
  display: none;
}
#app .ui-disclosure::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px var(--u-space-1) 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease-out);
}
#app .ui-disclosure[aria-expanded='true']::after {
  transform: translateY(4px) rotate(225deg);
}
#app .sheet-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sheet-space);
}
#app .sheet-quick button {
  visibility: visible;
  pointer-events: auto;
}
#app .rain-summary {
  display: grid;
  gap: var(--sheet-space);
}
#app .rain-summary[hidden] {
  display: none;
}
#app .rain-summary h3,
#app .rain-summary p {
  margin: 0;
}
#app .rain-summary h3 {
  font-size: 14px;
}
#app .rain-summary p {
  font-size: var(--u-text-sm);
  overflow-wrap: anywhere;
}
#app .rain-reading {
  font-size: var(--u-text-xl) !important;
  font-weight: 700;
  color: var(--hz-rain-ink);
}
#app .sheet-source {
  color: var(--muted);
  font-size: var(--u-text-xs) !important;
}
#app .rain-bars {
  position: relative;
  height: 64px;
  display: flex;
  align-items: end;
  gap: 3px;
  border-bottom: 1px solid var(--glass-edge);
}
#app .rain-bar {
  position: absolute;
  bottom: 0;
  height: var(--bar-height);
  background: repeating-linear-gradient(135deg, var(--hz-rain) 0 3px, var(--hz-rain-soft) 3px 6px);
  border-radius: 3px 3px 0 0;
  min-width: 0;
}
#app .rain-bar[data-missing='true'] {
  height: 100%;
  background: var(--track);
}
#app .rain-bar-ticks {
  display: flex;
  justify-content: space-between;
  gap: var(--sheet-space);
  font-size: 10px;
  color: var(--muted);
}
#app .rain-skeleton {
  min-height: 96px;
  background: var(--track);
  border-radius: var(--r-control);
  padding: var(--u-space-4);
  animation: sheet-loading 1s ease-in-out infinite alternate;
}
@keyframes sheet-loading {
  to {
    opacity: 0.5;
  }
}
#app .instrument-strip {
  padding: var(--u-space-3);
  gap: var(--sheet-space);
  background: var(--card);
  border: 1px solid var(--card-line);
}
#app .dock-top {
  flex-wrap: wrap;
  gap: var(--sheet-space);
}
#app .dock-seg-label {
  font-size: var(--u-text-xs);
  overflow-wrap: anywhere;
}
#app .instrument-badge {
  font-size: 11px;
  white-space: normal;
  max-width: 100%;
}
#app .dock-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sheet-space);
}
#app .dock-transport {
  justify-content: center;
  gap: var(--sheet-space);
}
#app .dock-btn,
#app .instrument-play {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: var(--u-space-2);
}
#app .dock-skip {
  display: none;
}
#app .speed-group {
  display: none;
}
#app .dock-main {
  min-width: 0;
  width: 100%;
}
#app .dock-when {
  display: flex;
  gap: var(--sheet-space);
  align-items: baseline;
  flex-wrap: wrap;
}
#app .instrument-time {
  font-size: var(--u-text-xl);
}
#app .instrument-rel {
  font-size: var(--u-text-xs);
}
#app .dock-track {
  height: 44px;
  margin: 0 var(--u-space-3);
  touch-action: none;
  background: none;
}
#app .dock-track::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 8px;
  background:
    linear-gradient(to right, var(--seg-radar) 0 var(--observed-split), transparent var(--observed-split)),
    repeating-linear-gradient(135deg, var(--hz-rain-soft) 0 3px, var(--hz-rain) 3px 6px);
}
#app .dock-track[data-observed='false']::after,
#app .dock-track[data-forecast='false']::after {
  content: '';
  position: absolute;
  top: 19px;
  height: 6px;
  background: var(--track);
}
#app .dock-track[data-observed='false']::after {
  left: 0;
  width: var(--observed-split);
}
#app .dock-track[data-forecast='false']::after {
  left: var(--observed-split);
  right: 0;
}
#app .dock-track-fill {
  display: none;
}
#app .dock-playhead {
  top: 10px;
  width: 24px;
  height: 24px;
  margin: 0;
  transform: translateX(-50%);
  z-index: 1;
}
#app .instrument-ticks {
  display: flex;
  justify-content: space-between;
  gap: var(--sheet-space);
  height: auto;
  margin: 0;
}
#app .instrument-ticks span {
  position: static;
  transform: none;
  font-size: 10px;
  white-space: normal;
}
#app .dock-note,
#app .coverage-note {
  font-size: 11px;
  overflow-wrap: anywhere;
}
#app .maplibregl-ctrl-top-right {
  display: none;
}
#app .maplibregl-ctrl-bottom-right {
  display: none;
}
#app[data-sheet-layout='side'] .hazard-sheet {
  top: max(8px, var(--sheet-safe-top));
  bottom: auto;
  left: max(8px, env(safe-area-inset-left));
  right: auto;
  width: var(--panel-width);
  height: auto;
  max-height: calc(100dvh - max(16px, var(--sheet-safe-top)) - 8px);
  border-radius: var(--r-panel);
}
#app[data-sheet-layout='side'] .focus-head {
  padding-top: var(--u-space-3);
}
#app[data-sheet-layout='side'] .brand {
  left: calc(var(--panel-width) + 32px);
}
#app[data-sheet-layout='side'] .sheet-body {
  visibility: visible;
}
#app[data-sheet-layout='side'] > .instrument-strip {
  position: absolute;
  bottom: max(16px, var(--sheet-safe-bottom));
  left: calc(var(--panel-width) + 24px);
  right: 72px;
  width: auto;
  max-width: 720px;
  visibility: visible;
}
#app[data-sheet-layout='side'] > .instrument-strip[hidden] {
  display: none;
}
#app[data-sheet-layout='side'] > .instrument-strip .dock-timeline {
  grid-template-columns: auto minmax(0, 1fr);
}
#app[data-sheet-layout='side'] .hazard-sheet > .sheet-handle {
  display: none;
}
@media (max-height: 499px) {
  #app[data-sheet-layout='side'] > .instrument-strip {
    max-height: 180px;
    overflow-y: auto;
  }
  #app[data-sheet-layout='side'] .focus-head {
    padding-top: var(--u-space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .hazard-sheet {
    transition: none;
  }
  #app .rain-skeleton {
    animation: none;
  }
}
#app[data-sheet-state='peek'][data-sheet-layout='bottom'] .sheet-body * {
  visibility: hidden;
}
#app .sheet-quick .bangkok-quick {
  position: static;
  inset: auto;
}
@media (min-width: 375px) {
  #app .dock-timeline {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #app .dock-transport {
    gap: var(--sheet-space);
  }
  #app .instrument-ticks span {
    font-size: 9px;
  }
}
#app .hazard-shape-key {
  position: static;
  inset: auto;
  transform: none;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--u-space-2);
  font-size: var(--u-text-xs);
  line-height: 1.5;
  padding: var(--u-space-2);
  box-shadow: none;
  background: var(--card);
}
#app .hazard-shape-pair {
  white-space: nowrap;
}
#app[data-focus-rain] .focus-list {
  display: none;
}
#app .hazard-sheet button,
#app .hazard-sheet select,
#app .hazard-sheet summary {
  min-height: var(--sheet-target);
}
#app .instrument-strip[data-mode='static'] .dock-timeline {
  display: none;
}
#app .instrument-strip[data-mode='timeline'] .dock-static {
  display: none;
}
#app .hazard-sheet .attribution-line {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
#app .ui-section-header {
  align-items: center;
  min-height: var(--sheet-target);
  padding: var(--u-space-2);
}
#app .ui-section-header h2,
#app .legend-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
#app .rail-sources {
  margin-top: var(--u-space-2);
  border-top: 1px solid var(--glass-edge);
}
#app .rail-sources summary {
  padding: var(--u-space-2);
  color: var(--text);
  font-size: var(--u-text-sm);
}
#app .rail-sources .attribution-line {
  margin: 0;
  padding: var(--u-space-2);
  color: var(--muted);
  font-size: var(--u-text-xs);
  line-height: 1.65;
}
#app .layer-expand {
  width: 44px;
  height: 44px;
  margin: 0;
}
#app .layer-row {
  grid-template-columns: 28px minmax(0, 1fr) 44px 44px;
}
/* #endregion */