:root {
  --bg: #0a0e14;
  --bg2: #10161f;
  --panel: #131a24;
  --panel2: #182130;
  --line: #243040;
  --text: #d6e0ec;
  --muted: #7c8ba1;
  --accent: #4ade80;
  --accent2: #38bdf8;
  --warn: #f59e0b;
  --danger: #ef4444;
  --ok: #22c55e;
  --sw-aircraft: #38bdf8;
  --sw-sat: #f472b6;
  --sw-obs: #f59e0b;
  --sw-site: #4ade80;
  --sw-pass: #a78bfa;
  --radius: 10px;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Red night mode: everything monochrome red, dim. */
body.redlight {
  --bg: #0d0000;
  --bg2: #140000;
  --panel: #1a0000;
  --panel2: #220000;
  --line: #3a1010;
  --text: #ff6b6b;
  --muted: #a03030;
  --accent: #ff4444;
  --accent2: #ff4444;
  --warn: #ff6b00;
  --danger: #ff2222;
  --ok: #ff4444;
  filter: saturate(0);
}
body.redlight #map { filter: saturate(0) sepia(1) hue-rotate(-40deg) brightness(.55); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
h1, h2, h3 { font-weight: 600; margin: 0 0 8px; letter-spacing: .02em; }
h2 { font-size: 13px; text-transform: uppercase; color: var(--muted); }
h3 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- Top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: var(--bg2);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.logo { font-weight: 700; color: var(--accent); letter-spacing: .08em; font-size: 16px; }
.brand .sub { font-size: 11px; color: var(--muted); }
.session-picker { display: flex; gap: 6px; margin-left: auto; }
.topbar-right { display: flex; gap: 6px; }

/* ---------- Buttons ---------- */
.btn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: #1f2b3c; border-color: #2f4055; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
.btn.primary { background: var(--accent); color: #06220f; border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ok { background: rgba(34,197,94,.16); color: var(--ok); border-color: rgba(34,197,94,.4); }
.btn.warn { background: rgba(245,158,11,.14); color: var(--warn); border-color: rgba(245,158,11,.4); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Grid ---------- */
#grid {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 10px; padding: 10px;
  grid-template-columns: 300px 1fr 330px;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "cockpit map debunk"
    "cockpit obs debunk";
}
#cockpit { grid-area: cockpit; }
#mapwrap { grid-area: map; }
#debunk { grid-area: debunk; }
#obs { grid-area: obs; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Cockpit ---------- */
#session-title { font-size: 15px; font-weight: 650; color: var(--text); margin-bottom: 10px; letter-spacing: .01em; }

/* The live step: a raised card with a soft accent edge, so the one thing you
   read from a distance in the field reads as the focus. */
.step-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel2), color-mix(in srgb, var(--panel2) 80%, #000));
  border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.step-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .75;
}
.step-card.empty { opacity: .55; box-shadow: none; }
.step-card.empty::before { display: none; }
.step-head { display: flex; align-items: center; gap: 8px; }
.step-index {
  background: var(--accent); color: #06220f; font-weight: 700;
  border-radius: 999px; padding: 2px 9px; font-size: 12px;
  box-shadow: 0 2px 10px rgba(74, 222, 128, .35);
}
.step-name { font-weight: 650; font-size: 14px; }
.timer {
  font-family: var(--mono); font-size: 34px; font-weight: 600;
  color: var(--accent2); text-align: center; margin: 10px 0 6px; letter-spacing: .04em;
}
.step-instructions { font-size: 12px; color: var(--muted); max-height: 110px;
  overflow-y: auto; overflow-x: hidden; }
.step-instructions ul { margin: 6px 0 0; padding-left: 16px; }
.step-instructions li { margin-bottom: 3px; }
.step-controls { display: flex; gap: 6px; margin-top: 10px; }
.step-controls .btn { flex: 1; }

.step-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.step-list li {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 9px; font-size: 13px; cursor: pointer; border: 1px solid transparent;
}
.step-list li:hover { background: var(--panel2); }
.step-list li.active {
  border-color: var(--accent); background: rgba(74, 222, 128, .09);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .12);
}
.step-list li.done { color: var(--muted); text-decoration: line-through; }
.step-list li.skipped { color: var(--muted); font-style: italic; }
.step-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.step-list li.active .dot { background: var(--accent); }
.step-list li.done .dot { background: var(--ok); }
.step-list .cat { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--muted); }

/* ---------- Field mode ---------- */
.chip {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line);
  color: var(--muted); background: var(--panel2); white-space: nowrap;
}
.chip.warn { color: var(--warn); border-color: rgba(245,158,11,.45); }
.chip.offline { color: var(--danger); border-color: rgba(239,68,68,.45); }
.field-box {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
  background: linear-gradient(180deg, var(--panel2), color-mix(in srgb, var(--panel2) 88%, #000));
}
.field-box .panel-head { margin-bottom: 6px; }
.field-box h3 { margin: 0; }
.progress {
  height: 5px; background: var(--bg2); border-radius: 3px; margin-top: 7px;
  overflow: hidden; border: 1px solid var(--line);
}
.progress .bar { height: 100%; width: 0%; background: var(--accent); transition: width .15s; }

/* ---------- Map ---------- */
.map-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.map-head h2 { margin: 0; }
.basemap-select {
  width: auto; margin-top: 0; font-size: 12px; padding: 4px 8px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px;
}
.layer-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; }
.chk.small { font-size: 11px; color: var(--muted); }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-aircraft { background: var(--sw-aircraft); }
.sw-sat { background: var(--sw-sat); }
.sw-obs { background: var(--sw-obs); }
.sw-site { background: var(--sw-site); }
.sw-pass { background: var(--sw-pass); }
#map { flex: 1 1 auto; min-height: 260px; border-radius: 12px; margin-top: 8px; background: #0b0f16; }
.map-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

.air-marker {
  font-size: 10px; font-family: var(--mono); color: #06220f;
  background: var(--sw-aircraft); border-radius: 3px; padding: 1px 3px;
  white-space: nowrap; border: 1px solid rgba(0,0,0,.35); text-align: center;
}
.sat-marker {
  font-size: 10px; font-family: var(--mono); color: #2a0a1c;
  background: var(--sw-sat); border-radius: 3px; padding: 1px 3px;
  white-space: nowrap; border: 1px solid rgba(0,0,0,.35);
}

/* ---------- Debunking glance ---------- */
.glance { display: flex; gap: 8px; margin-bottom: 12px; }
.glance-item {
  flex: 1; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px;
}
.gl-label { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
.gl-value { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--text); }
.gl-sub { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tab row as a pill segmented control, matching the Community sheet. */
.tabs {
  display: flex; gap: 4px; margin-bottom: 8px; padding: 4px; width: fit-content;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px;
}
.tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s;
}
.tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.tab.active { background: var(--accent2); color: #04121f; font-weight: 600; }
.tab-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
.scroll.tall { max-height: 190px; }

.row-air {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px;
}
.row-air:hover { background: var(--panel2); }
.row-air .cs { font-family: var(--mono); font-weight: 600; }
.row-air .meta { color: var(--muted); font-size: 11px; }
.row-air .num { font-family: var(--mono); text-align: right; }
.badge {
  font-size: 9px; text-transform: uppercase; border-radius: 4px;
  padding: 0 4px; border: 1px solid var(--line); color: var(--muted);
}
.badge.close { color: var(--warn); border-color: rgba(245,158,11,.4); }
.badge.ground { color: var(--muted); }

.obs-row {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; font-size: 13px; margin-bottom: 8px; background: var(--panel);
  transition: border-color .15s, transform .15s;
}
.obs-row:hover { border-color: var(--accent2); transform: translateY(-1px); }
.obs-row .top { display: flex; align-items: center; gap: 6px; }
.obs-row .cat {
  font-size: 10px; text-transform: uppercase; padding: 2px 8px;
  border-radius: 999px; background: var(--panel2); border: 1px solid var(--line);
}
.obs-row .desc { color: var(--muted); font-size: 12px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-row .who { color: var(--accent2); }
.obs-row .when { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono); }
/* A recording on an observation row: the still leads, the text follows. */
.obs-row.has-thumb { display: flex; align-items: flex-start; gap: 10px; }
.obs-body { flex: 1 1 auto; min-width: 0; }
.obs-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
  background: var(--panel2); border: 1px solid var(--line); }

/* ---------- Settings hub (grouped) ---------- */
.set-group { margin-bottom: 18px; }
.set-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 4px 2px 8px; font-weight: 600; }

/* Settings accordion — each group folds, so the hub opens short and scannable
   instead of one long scroll. Only the More sheet uses <details>; the modal
   .set-group (a plain div) is untouched. */
details.set-group { margin: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden; }
details.set-group > summary.set-head { list-style: none; cursor: pointer; margin: 0;
  padding: 13px 14px; min-height: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; color: var(--text); }
details.set-group > summary.set-head::-webkit-details-marker { display: none; }
details.set-group > summary.set-head::after { content: "▸"; font-size: 12px;
  opacity: .55; transition: transform .15s; }
details.set-group[open] > summary.set-head::after { content: "▾"; }
details.set-group > summary.set-head:hover { color: var(--accent2); }
details.set-group .set-row { margin: 0 12px 8px; }
details.set-group > .btn.wide { width: calc(100% - 24px); margin: 0 12px 8px; }
details.set-group > :last-child { margin-bottom: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s; }
.set-row:hover { border-color: var(--accent2); }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-text b { font-weight: 600; }
.set-text small { color: var(--muted); font-size: 12px; }
/* ---------- Fluid type ----------
   Every size was a fixed px value, so text never scaled with the device — a big
   phone showed the same 11px labels as a small one. These override the most
   visible text with clamp() so it grows with the screen and honours the width. */
.panel > .panel-bar h2 { font-size: clamp(15px, 4.2vw, 18px); }
.panel-bar h3 { font-size: clamp(13px, 3.6vw, 15px); }
.set-head { font-size: clamp(11px, 3.1vw, 13px); }
.set-text b { font-size: clamp(13px, 3.7vw, 15px); }
.set-text small { font-size: clamp(12px, 3.4vw, 13.5px); }
button.btn, .btn { font-size: clamp(13px, 3.6vw, 15px); }

/* A switch-style toggle. */
.toggle { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line); position: relative; flex: 0 0 auto;
  cursor: pointer; transition: background .15s, border-color .15s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.toggle:checked { background: var(--accent2); border-color: var(--accent2); }
.toggle:checked::after { transform: translateX(18px); background: #04121f; }

/* ---------- Notifications: a bell with an unread badge, and a list ---------- */
.notify-btn { position: relative; }
.notify-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--accent); color: #04121f;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notify-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notify-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.notify-item { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); }
.notify-item .n-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: var(--panel2); font-size: 15px; }
.notify-item .n-body { min-width: 0; }
.notify-item .n-body b { display: block; font-weight: 600; }
.notify-item .n-body small { color: var(--muted); font-size: 12px; }
.notify-item.unread { border-color: var(--accent2); }
.notify-empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: 13px; }

/* ---------- Touch targets: keep the mark small, make the tap area ≥44px ---------- */
.map-dot, .map-pin { position: relative; }
.map-dot::after, .map-pin::after { content: ""; position: absolute; inset: -17px; }
.notify-btn { min-width: 44px; }
#nav-toggle { min-width: 44px; min-height: 44px; }

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(4,7,11,.78);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
  backdrop-filter: blur(2px);
}
.modal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; width: min(560px, 92vw); max-height: 90vh; overflow: auto;
  box-shadow: 0 20px 64px rgba(0,0,0,.62);
}
.modal-card.small { width: min(420px, 92vw); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
input:not([type]), input[type=text], input[type=number], input[type=password],
input[type=email], input[type=search], input[type=tel], input[type=url],
input[type=datetime-local], select, textarea {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px;
  font: inherit; margin-top: 3px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent2); border-color: var(--accent2); }
input[type=range] { background: transparent; accent-color: var(--accent2); }
input[type=checkbox] { accent-color: var(--accent2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
input[type=file] { font-size: 12px; color: var(--muted); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; }
.media-grid .thumb {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg2); aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--muted); text-align: center;
}
.media-grid img, .media-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }

table.mini { border-collapse: collapse; font-size: 11px; width: 100%; }
table.mini th { text-align: left; color: var(--muted); font-weight: 500; padding: 1px 6px 1px 0; }
table.mini td { padding: 1px 6px 1px 0; font-family: var(--mono); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  padding: 9px 16px; border-radius: 9px; font-size: 13px; z-index: 3000;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ---------- Responsive (phone) ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; }
  #grid {
    grid-template-columns: 1fr;
    grid-template-areas: "cockpit" "map" "debunk" "obs";
    grid-template-rows: auto;
  }
  #map { min-height: 300px; }
  .row3 { grid-template-columns: 1fr 1fr; }
}

/* The field chip: says plainly that this device is recording on its own, and
   offers the sync when a PC is in range. */
#local-chip {
  cursor: pointer;
  font: inherit;
  background: none;
  color: var(--accent, #34d399);
  border-color: rgba(52, 211, 153, .45);
}
#local-chip.warn { color: var(--warn); border-color: rgba(245, 158, 11, .45); }

/* Where the PC is, when the app is not being served by it. */
.server-panel {
  position: absolute; top: 62px; right: 16px; z-index: 60;
  width: 320px; padding: 14px;
  background: var(--panel, #111827); color: var(--text, #e5e7eb);
  border: 1px solid var(--line, #374151); border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.server-panel label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.server-panel input {
  padding: 8px 10px; font: inherit; color: inherit;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line, #374151); border-radius: 6px;
}
.server-panel .hint { margin: 0; font-size: 11px; line-height: 1.45; opacity: .6; }

/* ---------- Mesh: opt-in archiving ----------
   The slider is the opt-in act, so it is the biggest control on the panel and
   it reads its value in GB — the unit people actually buy disks in. */
.chk.big { font-size: 14px; padding: 10px 0; }
.chk.big input { width: 16px; height: 16px; }

.mesh-slider-label {
  display: block; margin: 6px 0 4px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.mesh-slider-label b { color: var(--accent); font-size: 14px; letter-spacing: 0; }

#mesh-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 10px 0 4px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 0%),
                              var(--line) var(--fill, 0%), var(--line) 100%);
  border-radius: 3px; outline: none;
}
#mesh-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
#mesh-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  cursor: pointer;
}

.mesh-presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.mesh-presets .btn { padding: 5px 10px; font-size: 12px; }

/* The drives you could lend space on. One row each, current one marked. */
.mesh-drives { display: grid; gap: 6px; margin: 8px 0 4px; }
.mesh-drive {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  align-items: baseline; text-align: left; width: 100%;
  padding: 9px 11px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); font: inherit;
}
.mesh-drive:hover { border-color: var(--accent-dim, var(--accent)); }
.mesh-drive.current { border-color: var(--accent); }
.mesh-drive .path {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mesh-drive .free { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.mesh-drive .total {
  grid-column: 1 / -1; font-size: 11px; color: var(--muted);
}
.mesh-drive.current .path::after {
  content: "  ●"; color: var(--accent); font-size: 10px;
}

/* A size the slider cannot express, for people lending most of a big drive. */
.mesh-any { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.mesh-any .mesh-size {
  flex: 1; min-width: 0; padding: 6px 9px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--mono); font-size: 13px;
}
.mesh-any .mesh-size:focus { outline: none; border-color: var(--accent); }

.mesh-status {
  margin: 12px 0; padding: 10px 12px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
}
.mesh-status .k { color: var(--muted); }
.mesh-status .v { color: var(--text); font-family: var(--mono); }
.mesh-status .v.warn { color: var(--warn); }
.mesh-status .v.off { color: var(--muted); }

.mesh-plan { max-height: 180px; overflow-y: auto; margin-top: 6px; }
.mesh-plan .row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px;
}
.mesh-plan .row:last-child { border-bottom: none; }
.mesh-plan .rank {
  flex: 0 0 20px; color: var(--muted); font-family: var(--mono); text-align: right;
}
.mesh-plan .why { flex: 1 1 auto; }
.mesh-plan .why .rare { color: var(--warn); font-weight: 600; }
.mesh-plan .size { flex: 0 0 auto; color: var(--muted); font-family: var(--mono); }
.mesh-plan .title {
  flex: 1 1 100%; color: var(--muted); padding-left: 28px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mesh-plan .empty { color: var(--muted); padding: 8px 0; }

/* ---------- Polish ----------
   Added in the v0.13.0 pass. These are the details that decide whether the app
   reads as finished: a real button instead of the browser's file input, empty
   states that say what to do, focus that is visible when you tab, and hover
   states that do not move anything under the cursor. */

/* Off-screen but still focusable and announced: used for the file input that a
   styled label stands in for. `display:none` would break the label's click. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* The label is the button here, so it must not inherit the label block layout. */
label.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: inherit;
  margin: 0;
}
label.btn.primary { color: #06220f; }
label.btn:focus-within { outline: 2px solid var(--accent2); outline-offset: 2px; }

.media-add {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 6px;
}
.media-add .muted { flex: 1 1 120px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keyboard focus, everywhere. Mouse users never see it; keyboard users cannot
   miss it. */
.btn:focus-visible,
.chip:focus-visible,
.tab:focus-visible,
.panel-toggle:focus-visible,
.obs-row:focus-visible,
.step-list li:focus-visible,
.sheet-tab:focus-visible,
.map-dot:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* Chips: quieter than buttons, and never alarming unless something is wrong. */
.chip { font-weight: 500; }
button.chip { cursor: pointer; font: inherit; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em; }
button.chip:hover { border-color: var(--muted); }
.chip.ok { color: var(--ok); border-color: rgba(34, 197, 94, .4); }

/* Empty states: an empty panel should say what to do next, not just be blank. */
.empty-state {
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.empty-state strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; font-weight: 600; }
.empty-state .btn { margin-top: 10px; }

/* The selected sighting, so the list and the map agree about what is open. */
.obs-row.selected { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
.obs-row { position: relative; }
.obs-row .row-actions { display: none; }
.obs-row:hover .row-actions { display: inline-flex; }

/* A long list should not paint a bright scrollbar down a dark panel. */
.scroll, .panel-body, .step-list, .step-instructions { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scroll::-webkit-scrollbar, .panel-body::-webkit-scrollbar,
.step-list::-webkit-scrollbar, .step-instructions::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb, .panel-body::-webkit-scrollbar-thumb,
.step-list::-webkit-scrollbar-thumb, .step-instructions::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 4px;
}
.scroll::-webkit-scrollbar-track, .panel-body::-webkit-scrollbar-track { background: transparent; }

/* The step card's timer is the one number you read from a distance. */
.timer { font-variant-numeric: tabular-nums; }
.step-card.running .timer { color: var(--accent); }

/* Slightly wider hit target for the panel toggles, which are tiny by design. */
.panel-toggle { min-width: 34px; min-height: 28px; }