: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;
}
.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: 8px; padding: 6px 11px; font-size: 13px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #1f2b3c; border-color: #2f4055; }
.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: var(--radius); padding: 12px; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Cockpit ---------- */
#session-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }

.step-card {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin-bottom: 12px;
}
.step-card.empty { opacity: .55; }
.step-head { display: flex; align-items: center; gap: 8px; }
.step-index {
  background: var(--accent); color: #06220f; font-weight: 700;
  border-radius: 6px; padding: 1px 7px; font-size: 12px;
}
.step-name { font-weight: 600; 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: 6px 8px;
  border-radius: 6px; 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,.08); }
.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: 5px; padding: 2px 6px; 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: var(--radius);
  padding: 8px 10px; margin-bottom: 12px; background: var(--panel2);
}
.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: 8px; 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: 8px; padding: 7px 9px; 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; }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.tab.active { background: var(--panel2); color: var(--text); border-color: #33445c; }
.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: 7px 8px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.obs-row:hover { background: var(--panel2); }
.obs-row .top { display: flex; align-items: center; gap: 6px; }
.obs-row .cat {
  font-size: 10px; text-transform: uppercase; padding: 1px 5px;
  border-radius: 4px; 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); }

/* ---------- 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: 12px;
  padding: 16px; width: min(560px, 92vw); max-height: 90vh; overflow: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
.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[type=text], input[type=number], 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); }
.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: 6px; 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: 28px; min-height: 24px; }