:root {
  --bg: #0b0d10;
  --rail: #101317;
  --panel: #161a1f;
  --panel-2: #1c2128;
  --stage: #070809;
  --line: #2a3038;
  --text: #e8eaed;
  --muted: #9aa3ad;
  --faint: #6b7280;
  --live: #c4543a;
  color: var(--text);
  background: var(--bg);
  font: 14px/1.45 system-ui, "Segoe UI", sans-serif;
}

body { margin: 0; height: 100vh; overflow: hidden; }
[hidden] { display: none !important; }
* {
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--faint);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }
*::-webkit-scrollbar-corner { background: transparent; }

img.logo { height: 22px; width: auto; display: block; }

#map { position: absolute; inset: 0; background: var(--stage); }

#overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  border: 1px solid var(--live);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: var(--live);
}
#crosshair::before { left: 50%; top: -7px; width: 1px; height: 28px; margin-left: -0.5px; }
#crosshair::after { top: 50%; left: -7px; height: 1px; width: 28px; margin-top: -0.5px; }

#login {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 18vh;
  width: min(360px, calc(100% - 32px));
  transform: translateX(-50%);
  display: grid;
  gap: 12px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
#login .logo-slot {
  justify-self: center;
  position: relative;
  width: 220px;
  height: 133px;
  overflow: hidden;
}
/* Same ink crop as the header, sized for the login card. */
#login .logo-slot img.logo {
  position: absolute;
  width: 313px;
  height: 235px;
  max-width: none;
  left: -49px;
  top: -49px;
  mix-blend-mode: screen;
}
.mark { margin: 0; font-size: 18px; letter-spacing: 0.22em; text-align: center; }
.sub { margin: 0; color: var(--muted); text-align: center; }
#login label, .panel label, #setup label { display: grid; gap: 4px; color: var(--muted); }
#login input, #login button, .panel input, .panel textarea, .panel button, .panel select, #layers button, #setup input, #setup select, #setup button, #setup-open {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px;
}
#login button, .panel button, #layers button, #setup button, #setup-open { cursor: pointer; }
#login button:hover, .panel button:hover, #layers button:hover, #setup button:hover, #setup-open:hover {
  border-color: var(--live);
}
.error { color: var(--live); margin: 0; }

#chrome > header {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 0 12px;
  background: var(--rail);
  border: 1px solid var(--line);
}
#chrome > header .logo-slot {
  justify-self: center;
  position: relative;
  width: 59.5px;
  height: 36px;
  overflow: hidden;
}
/* The wordmark sits in the middle of the file, so the slot crops to the ink. */
#chrome > header .logo-slot img.logo {
  position: absolute;
  width: 84.7px;
  height: 63.5px;
  max-width: none;
  left: -13.3px;
  top: -13.3px;
  mix-blend-mode: screen;
}
.head-side, .head-status {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.head-status { justify-self: stretch; }
.brand {
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
}
.clocks {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  min-width: 0;
}
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  line-height: 1.05;
  gap: 1px;
}
.clock-blank { visibility: hidden; }
.clock-place {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.clock-time {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  color: var(--text);
}
#fix {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  color: var(--text);
}
.clock-fixed { margin: 8px 0 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
.clock-field { display: grid; gap: 4px; color: var(--muted); }
.clock-pick { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.clock-hits {
  position: absolute;
  z-index: 6;
  top: calc(100% + 4px);
  left: 0;
  right: 74px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  max-height: 180px;
  overflow: auto;
}
#setup .clock-hits button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 6px 8px;
}
#setup .clock-hits button:hover { background: var(--panel-2); }
#setup-open {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
}
#setup-open svg, #layers svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#setup-open svg { width: 18px; height: 18px; }
#status {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  background: var(--rail);
  border: 1px solid var(--line);
}
#fix { margin: 0; }
#find {
  position: absolute;
  z-index: 4;
  left: calc(var(--rail-width) + 16px);
  bottom: 8px;
  width: 240px;
}
#find input {
  width: 100%;
  box-sizing: border-box;
  background: var(--rail);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 6px 8px;
}
#find-hits {
  position: absolute;
  z-index: 6;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  max-height: 240px;
  overflow: auto;
}
#find-hits button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 6px 8px;
}
#find-hits button:hover { background: var(--panel-2); }
#find-hits .kind { color: var(--muted); font-size: 11px; }
#bolt {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 2px 8px;
  font-size: 12px;
}
#bolt.on { color: var(--text); border-color: var(--live); }

#chrome { --rail-width: 94px; }
#chrome.rail-collapsed { --rail-width: 44px; }
#layers {
  position: absolute;
  z-index: 3;
  top: 56px;
  left: 8px;
  bottom: 8px;
  box-sizing: border-box;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--rail);
  border: 1px solid var(--line);
}
#layers.collapsed { padding: 6px 4px; }
#layers button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  font-size: 13px;
}
#layers .rail-gap { flex: 1 1 auto; min-height: 8px; }
#layers svg { width: 18px; height: 18px; flex: none; }
#layers button[data-layer] svg, #layers button.rail-tool svg { display: none; }
#rail-collapse svg, #layers .rail-settings svg { display: block; }
#layers.collapsed button[data-layer] svg, #layers.collapsed button.rail-tool svg { display: block; }
#layers.collapsed button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#layers button.on, #weather-menu button.on, .panel button.waves.on, .panel button.heat.on, .panel button.map-pick.on, .panel button.grid-pick.on, #setup-open.on {
  background: rgba(196, 84, 58, 0.16);
  border-color: var(--live);
  color: var(--live);
}
#layers .badge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

#chat-notice {
  position: absolute;
  z-index: 6;
  left: calc(8px + var(--rail-width) + 12px);
  bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  max-width: 280px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--live);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#chat-notice .from { color: var(--muted); font-size: 11px; }
#chat-notice .preview {
  grid-column: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#chat-notice .count {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

#readout {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.panel {
  position: absolute;
  z-index: 5;
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.panel header {
  position: static;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 12px;
  cursor: move;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.panel header button[data-close],
.cot-card header button[data-close],
#setup button#setup-close {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  flex: none;
}
.panel header button[data-close]:hover,
.cot-card header button[data-close]:hover,
#setup button#setup-close:hover {
  color: var(--text);
  border-color: transparent;
  background: transparent;
}
.panel header strong { flex: 1; }
.panel .body { padding: 10px; display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.panel[data-panel="chat"] { width: 360px; }
.panel[data-panel="chat"] .body { max-height: 460px; overflow: hidden; }
.thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 160px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px;
}
.day { margin: 2px 0; text-align: center; color: var(--faint); font-size: 11px; }
.bubble {
  display: grid;
  gap: 2px;
  width: fit-content;
  max-width: 86%;
  min-width: 0;
  align-self: flex-start;
  justify-items: start;
}
.bubble .who { color: var(--muted); font-size: 11px; }
.bubble .text {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  line-height: 1.35;
}
.bubble .when { color: var(--faint); font-size: 11px; }
.bubble.mine { align-self: flex-end; justify-items: end; }
.bubble.mine .text {
  background: rgba(196, 84, 58, 0.16);
  border-color: rgba(196, 84, 58, 0.65);
  border-radius: 14px 14px 4px 14px;
}
.composer { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.composer input { min-width: 0; }
.panel[data-panel="settings"] .body { max-height: 460px; }
.panel[data-panel="incident"] { width: 360px; }
.panel[data-panel="incident"] .body { max-height: 520px; }
.panel[data-panel="alert"] { width: 560px; }
.panel[data-panel="alert"] .body { max-height: min(820px, calc(100vh - 56px)); overflow-x: hidden; }
.panel[data-panel="alert"] button.on {
  background: rgba(196, 84, 58, 0.16);
  border-color: var(--live);
  color: var(--live);
}
.panel[data-panel="alert"] select,
.panel[data-panel="alert"] textarea,
.panel[data-panel="alert"] input[type="text"] { width: 100%; box-sizing: border-box; }
.panel textarea { resize: vertical; min-height: 72px; }
.panel input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--live); }
.alert-row, .alert-people { display: flex; flex-wrap: wrap; gap: 6px; }
.alert-people { display: grid; max-height: 140px; overflow: auto; }
.alert-person { display: flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.alert-person span { overflow-wrap: anywhere; min-width: 0; }
.alert-roster { width: 100%; border-collapse: collapse; font-size: 12px; }
.alert-roster th, .alert-roster td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.panel .hint { margin: 0; color: var(--muted); }
.incident-list { display: flex; flex-wrap: wrap; gap: 6px; }
.incident-log { margin: 0; font-size: 13px; }
.incident-log span { color: var(--muted); margin-right: 6px; }
#rail-menu, #weather-menu { z-index: 7; width: 220px; }
#weather-menu { width: 180px; }
#rail-menu .body { max-height: min(360px, calc(100vh - 120px)); }
#rail-menu button:disabled { opacity: 0.45; cursor: default; }
.panel button.map-source { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel button.map-source .current { color: var(--muted); }
.panel button.map-source .current::after { content: " ›"; }
.panel button.map-back { text-align: left; }
.panel button.map-back::before { content: "‹ "; }
.grid-row { display: flex; align-items: center; gap: 6px; }
.grid-row span { width: 72px; flex: none; }
.grid-row button { flex: 1; }
.look { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: 8px; }
.panel input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--live); }
video { width: 100%; background: #000; }
.talk.on { background: rgba(196, 84, 58, 0.2); border-color: var(--live); color: var(--text); }

#setup {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: auto;
  background: var(--bg);
}
#setup-form {
  width: min(560px, calc(100% - 32px));
  margin: 32px auto 48px;
  display: grid;
  gap: 12px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
}
#setup-form header {
  display: flex;
  align-items: center;
  gap: 12px;
}
#setup-form header strong { flex: 1; letter-spacing: 0.18em; }
#setup-form p { margin: 0; color: var(--muted); }
#setup label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
#setup label.check input { width: auto; }
#setup-note { color: var(--text); }

.maplibregl-ctrl-top-right { top: 56px; right: 8px; }
.maplibregl-ctrl-bottom-right { bottom: 44px; right: 8px; }
.maplibregl-ctrl-bottom-right:empty { display: none; }
.maplibregl-ctrl-group {
  background: var(--panel);
  border: 1px solid var(--line);
}
.maplibregl-ctrl-group button { background: transparent; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.92); }
.maplibregl-ctrl-scale {
  background: var(--rail);
  color: var(--muted);
  font-size: 10px;
  border-color: var(--line);
}

#radial, #place {
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}
#radial button, #place button {
  position: absolute;
  width: 72px;
  height: 32px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  font: 12px/1 system-ui, "Segoe UI", sans-serif;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
#place button { width: 96px; }
#radial button.on {
  background: rgba(196, 84, 58, 0.16);
  border-color: var(--live);
  color: var(--live);
}
#radial button:hover, #place button:hover { border-color: var(--live); }
#tool-note {
  position: absolute;
  z-index: 5;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 10px;
  background: var(--rail);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  pointer-events: none;
}
#tool-note.action {
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
#tool-note button {
  min-height: 44px;
  padding: 8px 18px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--rail);
  border: 1px solid var(--line);
  cursor: pointer;
}
#tool-note button:hover { border-color: var(--live); }
.cot-card {
  position: absolute;
  z-index: 6;
  top: 64px;
  left: calc(8px + var(--rail-width) + 12px);
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.cot-card header {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.cot-card header strong {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cot-card .body { display: grid; gap: 8px; padding: 10px 12px 12px; }
.cot-card label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.cot-card input {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.cot-card input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--live); }
.cot-card select, .panel[data-panel="incident"] select, .panel[data-panel="incident"] input {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.cot-card .status-note { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.cot-card .status-send { text-align: left; cursor: pointer; }
.cot-card .note { margin: 0; min-height: 1.2em; color: var(--text); font-size: 12px; letter-spacing: 0; text-transform: none; }
.cot-card .choices { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.cot-card .choices button {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px;
  cursor: pointer;
  text-align: left;
}
.cot-card .choices button:hover { border-color: var(--live); }
#stack.cot-card { z-index: 7; width: 220px; }
#who.cot-card { z-index: 7; width: 260px; }
#who .who-rows { max-height: min(520px, calc(100vh - 160px)); overflow: auto; }
#who header strong { letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-card .who-rows { display: grid; gap: 6px; margin: 0; }
.cot-card .who-rows div { display: grid; gap: 2px; }
.cot-card .who-rows dt { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cot-card .who-rows dd { margin: 0; color: var(--text); font-size: 14px; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
#who .choices button.on {
  background: rgba(196, 84, 58, 0.16);
  border-color: var(--live);
  color: var(--live);
}
.incident-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.incident-icons button { flex: 1 1 auto; padding: 6px 8px; }
.incident-icons button.on {
  background: rgba(196, 84, 58, 0.16);
  border-color: var(--live);
  color: var(--live);
}
.incident-confirm { display: flex; gap: 6px; }
.incident-confirm button { flex: 1; }

#legends {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100% - 110px);
  pointer-events: none;
}
#legends * { pointer-events: none; }
#air-note, #limit-note {
  margin: 0;
  max-width: 280px;
  padding: 8px;
  background: var(--rail);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.35;
}
#map-scale .maplibregl-ctrl { margin: 0; float: none; }

#alt {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 50%;
  width: 36px;
  height: clamp(220px, 40vh, 360px);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
#alt .alt-pill {
  pointer-events: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0 12px;
  background: rgba(16, 19, 23, 0.92);
  border: 1px solid var(--line);
  border-radius: 18px;
}
#alt .alt-plane {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--text);
  transform: rotate(-90deg);
}
#alt .alt-rail {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  margin-top: 8px;
  cursor: grab;
  touch-action: none;
}
#alt .alt-rail:active { cursor: grabbing; }
#alt .alt-rail:focus-visible { outline: 1px solid var(--muted); outline-offset: 3px; }
#alt .alt-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(232, 234, 237, 0.38);
}
#alt .alt-ticks { position: absolute; inset: 0; }
#alt .alt-tick {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 2px;
  margin: 0 0 -1px -4px;
  background: rgba(232, 234, 237, 0.55);
  pointer-events: none;
}
#alt .alt-thumb {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: 0 0 -7px -7px;
  border-radius: 50%;
  background: #e8941a;
  box-shadow: 0 0 0 2px rgba(16, 19, 23, 0.95);
  pointer-events: none;
}
#alt .alt-read {
  position: absolute;
  right: calc(100% + 10px);
  margin: 0;
  transform: translateY(50%);
  text-align: right;
  white-space: nowrap;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
#alt .alt-read strong {
  display: block;
  font: 600 12px/1.2 Consolas, "Cascadia Mono", monospace;
  color: var(--text);
}
#alt .alt-read span {
  display: block;
  font: 11px/1.2 Consolas, "Cascadia Mono", monospace;
  color: var(--muted);
}

#wind-scale {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 120px);
  padding: 8px;
  background: var(--rail);
  border: 1px solid var(--line);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 11px;
  color: var(--text);
  pointer-events: auto;
}
#wind-scale .wind-note {
  margin: 0;
  max-width: 280px;
  color: var(--muted);
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
#wind-scale .wind-heat,
#wind-scale .cloud-echo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}
#wind-scale .cloud-echo .bar {
  background: linear-gradient(90deg, #78bdff 0%, #2ec8db 16.667%, #38c752 33.333%, #f5db2e 50%, #f27a1a 66.667%, #db241f 83.333%, #c738bf 100%);
}
#wind-scale .cloud-echo em:nth-child(2) { left: 16.667%; }
#wind-scale .cloud-echo em:nth-child(3) { left: 33.333%; }
#wind-scale .cloud-echo em:nth-child(4) { left: 50%; }
#wind-scale .cloud-echo em:nth-child(5) { left: 66.667%; }
#wind-scale .cloud-echo em:nth-child(6) { left: 83.333%; }
#wind-scale .cloud-echo em:nth-child(7) { left: 100%; transform: translateX(-100%); }
#wind-scale .bar {
  position: relative;
  width: 280px;
  height: 8px;
  background: linear-gradient(90deg, #50a0e6 0%, #46bedc 8.333%, #3cc8aa 16.667%, #5ac850 33.333%, #e6d232 50%, #f08c1e 66.667%, #e6461e 83.333%, #c81e1e 100%);
}
#wind-scale em {
  position: absolute;
  top: 10px;
  font-style: normal;
  color: var(--muted);
}
#wind-scale em:nth-child(1) { left: 0; }
#wind-scale em:nth-child(2) { left: 8.333%; }
#wind-scale em:nth-child(3) { left: 16.667%; }
#wind-scale em:nth-child(4) { left: 33.333%; }
#wind-scale em:nth-child(5) { left: 50%; }
#wind-scale em:nth-child(6) { left: 66.667%; }
#wind-scale em:nth-child(7) { left: 100%; transform: translateX(-100%); }

#sea-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 16px;
  background: var(--rail);
  border: 1px solid var(--line);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 11px;
  color: var(--text);
}
#sea-scale .bar {
  position: relative;
  width: 168px;
  height: 8px;
  background: linear-gradient(90deg, #1c3496 0%, #2a60cc 5.3%, #24b8d6 11%, #5648cc 16.7%, #a840c6 22%, #bc3abe 30%, #ce244e 40%, #b0182a 53.3%, #c62026 66.7%, #e4403a 80%, #ffd6c4 90%, #fff6ee 100%);
}
#sea-scale em {
  position: absolute;
  top: 10px;
  font-style: normal;
  color: var(--muted);
}
#sea-scale em:nth-child(1) { left: 0; }
#sea-scale em:nth-child(2) { left: 10%; }
#sea-scale em:nth-child(3) { left: 23%; }
#sea-scale em:nth-child(4) { left: 67%; }
#sea-scale em:nth-child(5) { left: 100%; transform: translateX(-100%); }