/* #region zone:disaster.style.rail — แถบเลเยอร์/สัญลักษณ์/คำเตือน (ขวาบนจอใหญ่, แผ่นล่างบนมือถือ) */
/* The grip handle: hidden (text/desktop button) by default, becomes a real drag grip at phone width
   (media query below) — same pattern as apps/map's #sheet-toggle. */
.sheet-handle {
  display: none;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* #endregion */

/* #region zone:disaster.style.instrument — ไทม์ไลน์ล่าง: ป้ายเหนือแถบเสมอ, แถบบาง, ยุบเหลือ "ตอนนี้" */
.instrument-strip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 304px;
  z-index: 17;
  border-radius: var(--r-panel);
  padding: 14px 18px var(--u-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--u-space-2);
  transition:
    left var(--t-med) var(--ease-out),
    opacity var(--t-med) var(--ease-out);
}
.instrument-strip[hidden] {
  display: none;
}

/* Row 1: segment label (what the track shows) + source badge — always above the track, never under the
   knob (owner review: "the label sits inside the track, where the playhead knob overlaps it"). */
.dock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.dock-seg-label {
  min-width: 0;
  font-size: var(--u-text-note);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hz-rain-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.instrument-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--u-text-note);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--muted);
  background: var(--track);
}
.instrument-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Row 2: transport · time readout + slim track · speed — hidden entirely in static mode (see below). */
.dock-timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px var(--u-space-4);
}
.dock-transport {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dock-btn {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dock-btn:hover,
.dock-btn:focus-visible {
  background: var(--track);
  color: var(--text);
}
.instrument-play {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 3px;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px var(--accent);
}
.instrument-play:disabled {
  opacity: 0.5;
  cursor: default;
}

.dock-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dock-when {
  display: flex;
  align-items: baseline;
  gap: var(--u-space-2);
}
.instrument-time {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.instrument-rel {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A slim pill track (never a "flat wide slab"): dotted rain-forecast fill in --hz-rain (DESIGN.md
   "Instrument Strip"), a solid progress fill up to the playhead, and ticks below — no overlap possible
   since the knob now sits centred ON the 6px track, not spanning above it into the label row. */
.dock-track {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.dock-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--hz-rain) 16%, transparent);
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--hz-rain) 55%, transparent) 0 3px,
    transparent 3px 7px
  );
}
.dock-track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 6px;
  width: 0%;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--hz-rain);
  transition: width 60ms linear;
}
.dock-playhead {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  padding: 0;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--glass-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  cursor: grab;
  transition: left 60ms linear;
}
.dock-playhead:active {
  cursor: grabbing;
}
.instrument-ticks {
  position: relative;
  height: 14px;
  font-size: var(--u-text-note);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.instrument-ticks span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.instrument-ticks span[data-edge='start'] {
  transform: none;
}
.instrument-ticks span[data-edge='end'] {
  transform: translateX(-100%);
}

.speed-group {
  display: flex;
  gap: 2px;
  background: var(--track);
  border-radius: var(--r-pill);
  padding: 2px;
  align-self: center;
}
.speed-chip {
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  padding: var(--u-space-1) 9px;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.speed-chip[aria-pressed='true'] {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Static mode (temp/wind — no time dimension): the whole transport/track cluster collapses to one compact
   "ตอนนี้" pill instead of showing pointless disabled play controls (owner review). */
.instrument-strip[data-mode='static'] .dock-timeline {
  display: none;
}
.instrument-strip[data-mode='timeline'] .dock-static {
  display: none;
}
.dock-static {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dock-static-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--u-space-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.dock-static-note {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #endregion */