/* =========================================================
   MapSight IO — the web companion to the MapSight app.
   Same design language as the phone app (Orbitron + Rajdhani,
   dark / light / neon via CSS variables on <html data-theme>),
   laid out as a DESKTOP WORKBENCH since 2026-09-07: a slim
   navigation rail down the LEFT (the shape every serious ops
   app the owner works with takes), pages that scroll to the
   right of it, and the Map as a full-bleed workspace with
   floating panels rather than a picture in a page.
   ========================================================= */

/* Self-hosted UI fonts (lib/fonts/ui/, SIL OFL 1.1). Bundled, so the site never
   pings Google's font servers and renders right on the first paint. */
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('lib/fonts/ui/orbitron-v35-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('lib/fonts/ui/orbitron-v35-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('lib/fonts/ui/rajdhani-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('lib/fonts/ui/rajdhani-v17-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('lib/fonts/ui/rajdhani-v17-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('lib/fonts/ui/rajdhani-v17-latin-700.woff2') format('woff2'); }

/* Palettes lifted from the phone app so the two products look like one family. */
:root, html[data-theme="dark"] {
  --bg: #0b0f16; --surface: #151a23; --surface-2: #1c2330; --surface-3: #26303f;
  --line: rgba(120,170,255,.12); --line-2: rgba(120,170,255,.28);
  --text: #e9eef6; --muted: #94a3b8;
  --brand: #5aa9ff; --amber: #ffb000; --danger: #ff5f3c; --ok: #37d67a;
  --brand-soft: rgba(90,169,255,.18);
  --shadow: 0 8px 30px rgba(0,0,0,.45); --glow: none;
  --font-display: 'Orbitron', sans-serif; --font-body: 'Rajdhani', sans-serif;
  --rail-w: 212px;   /* the navigation rail; narrows with the window (see the breakpoints) */
  --bar-h: 48px;     /* the app bar across the top of every page */
}
html[data-theme="light"] {
  --bg: #eef1f6; --surface: #ffffff; --surface-2: #f4f7fb; --surface-3: #e8eef6;
  --line: rgba(15,30,45,.14); --line-2: rgba(15,30,45,.26);
  --text: #0d1722; --muted: #3b4957;
  /* Light follows the logo: highlights are the disc blue, not amber. */
  --brand: #1d4ed8; --amber: #1d4ed8; --danger: #d63b1e; --ok: #128a4b;
  --brand-soft: rgba(29,78,216,.14);
  --shadow: 0 8px 28px rgba(20,40,60,.18); --glow: none;
}
html[data-theme="neon"] {
  --bg: #010608; --surface: #03212ee0; --surface-2: #06303f; --surface-3: #0a4254;
  --line: rgba(0,229,255,.22); --line-2: rgba(0,229,255,.5);
  --text: #e3f4fb; --muted: #7fa9bd;
  --brand: #00e5ff; --amber: #ffb000; --danger: #ff5f3c; --ok: #37d67a;
  --brand-soft: rgba(0,229,255,.18);
  --shadow: 0 0 22px rgba(0,229,255,.18); --glow: 0 0 10px rgba(0,229,255,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
html { height: 100%; }
body {
  font-family: var(--font-body); font-size: 16px; color: var(--text);
  background: var(--bg); min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Sentence-case titles in Rajdhani (2026-10-04, the professional pass). Orbitron is kept for the
   logo and the small section labels (.lab, .eyebrow) — that keeps the brand without shouting. */
h1, h2, h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; text-transform: none; }
.disp { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
a { color: var(--brand); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
.ic svg { display: block; }
.ic { display: inline-flex; flex-shrink: 0; }

/* ---------- The navigation rail ----------
   A slim labelled column down the LEFT edge — the workbench shape. The markup is the same
   header the old top bar used (same ids, so nothing in app.js changes); only this layout did.
   It narrows to icons-only on a middling window and lies back down as a top bar on a phone. */
#topbar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 500;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 16px 10px 14px; background: var(--surface); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); padding: 0 8px 12px; border-bottom: 1px solid var(--line); }
.brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; font-size: 16.5px; white-space: nowrap;
  /* The website's signature treatment: the wordmark carries the logo gradient itself. */
  background: linear-gradient(90deg, #3971f1, #08d5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* "IO" rides as a lighter accent chip so the wordmark still reads as MAPSIGHT first. */
.brand-io {
  margin-left: 6px; padding: 2px 6px; border-radius: 5px; font-size: 11.5px;
  background: var(--brand); color: var(--bg); letter-spacing: .16em;
  -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--bg);
}
#topnav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; overflow-x: hidden; }
#topnav button {
  background: none; border: 1px solid transparent; border-radius: 10px;
  padding: 10px 12px; color: var(--muted); font-weight: 600; font-size: 15.5px;
  display: flex; align-items: center; gap: 10px; white-space: nowrap; width: 100%; text-align: left;
}
#topnav button:hover { color: var(--text); background: var(--surface-2); }
#topnav button.on { color: var(--brand); border-color: var(--line-2); background: var(--brand-soft); }
.top-right { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.top-right .icon-btn { flex: 1; }
/* Visually hidden but still read by tests and screen readers — the Map workspace keeps its h1 this way. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon-btn {
  position: relative; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--text);
}
.icon-btn:hover { border-color: var(--line-2); box-shadow: var(--glow); }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--brand); color: var(--bg);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* ---------- Page frame ---------- */
#view { max-width: 1320px; margin-left: var(--rail-w); padding: calc(var(--bar-h) + 22px) 30px 90px; }
/* A full-bleed workspace page (the Map): no padding, no cap, no page scroll — the map IS the page. */
#view.ws-full { max-width: none; padding: var(--bar-h) 0 0; height: 100vh; overflow: hidden; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 27px; margin-bottom: 6px; }
.page-head p { color: var(--muted); max-width: 74ch; }
.back-link {
  background: none; border: none; color: var(--muted); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0;
}
.back-link:hover { color: var(--brand); }

/* ---------- Home: hero + tool grid ---------- */
.hero { text-align: center; padding: 26px 0 34px; }
.hero h1 { font-size: 40px; line-height: 1.15; margin-bottom: 12px; }
.hero h1 .accent { color: var(--brand); }
.hero p { color: var(--muted); font-size: 19px; max-width: 62ch; margin: 0 auto; }
.hero-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line-2);
  background: var(--surface); font-size: 14.5px; color: var(--muted);
}
.hero-note .ic { color: var(--ok); }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.tool-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s, transform .15s;
}
.tool-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.tool-card .ic { color: var(--brand); }
.tool-card h3 { font-size: 15.5px; letter-spacing: .07em; }
.tool-card p { color: var(--muted); font-size: 15px; line-height: 1.45; }
.tool-card .tag {
  align-self: flex-start; margin-top: 3px; padding: 3px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--muted);
}
.tool-card .tag.soon { color: var(--amber); border-color: var(--amber); }
.section-title { font-size: 16px; margin: 34px 0 14px; color: var(--muted); }

/* ---------- Panels, forms, buttons ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; margin-bottom: 16px;
}
.panel h3 { font-size: 15px; margin-bottom: 12px; }
.panel > p { color: var(--muted); margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 12px; }
.grow { flex: 1; min-width: 0; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--muted); font-weight: 600; }
input[type=text], input[type=number], select, textarea {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--glow); }
.primary-btn {
  background: var(--brand); color: var(--bg); border: none; border-radius: 10px;
  padding: 11px 20px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 8px;
}
.primary-btn:hover { filter: brightness(1.1); box-shadow: var(--glow); }
.primary-btn:disabled, .ghost-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }
.ghost-btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.ghost-btn:hover { border-color: var(--line-2); }
.ghost-btn.danger { color: var(--danger); }
.mini-btn {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 10px; font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.mini-btn:hover { border-color: var(--line-2); }
.mini-btn.danger { color: var(--danger); }

/* Drop zone — every tool that takes a file uses this same one. */
.drop {
  border: 2px dashed var(--line-2); border-radius: 14px; padding: 34px 20px;
  text-align: center; background: var(--surface); color: var(--muted);
  transition: background .15s, border-color .15s;
}
.drop.over { border-color: var(--brand); background: var(--surface-2); color: var(--text); }
.drop .ic { color: var(--brand); margin-bottom: 8px; }
.drop b { display: block; color: var(--text); font-size: 18px; margin-bottom: 4px; }
.drop .formats { font-size: 13.5px; margin-top: 10px; }

/* Notes: a plain-English aside. Amber = read this before you press the button. */
.note {
  border-left: 3px solid var(--brand); background: var(--surface-2);
  padding: 11px 14px; border-radius: 0 9px 9px 0; font-size: 15px; color: var(--muted);
  margin: 12px 0;
}
.note.warn { border-left-color: var(--amber); }
.note b { color: var(--text); }

/* ---------- Data tables (the editor + file lists) ---------- */
.tbl-wrap { overflow: auto; max-height: 55vh; border: 1px solid var(--line); border-radius: 11px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
table.tbl th, table.tbl td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
table.tbl tr:hover td { background: var(--surface-2); }
table.tbl tr.off td { opacity: .4; }
table.tbl td input[type=text] { padding: 5px 8px; background: transparent; border-color: transparent; }
table.tbl td input[type=text]:hover { border-color: var(--line); }
table.tbl td input[type=text]:focus { background: var(--surface-2); border-color: var(--brand); }
.swatch {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-2);
  padding: 0; cursor: pointer; flex-shrink: 0;
}
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 20px;
  padding: 6px 13px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
}
.chip.on { border-color: var(--brand); color: var(--brand); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Map (trails picker + trip planner) ---------- */
.map-box { position: relative; height: 60vh; min-height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.map-box .maplibregl-map { position: absolute; inset: 0; }
.map-overlay {
  position: absolute; left: 12px; top: 12px; z-index: 5; max-width: 320px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 13px; box-shadow: var(--shadow); font-size: 15px;
}
.map-overlay h4 { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.map-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px;
  padding: 7px 16px; font-size: 14.5px; box-shadow: var(--shadow); }
.map-box.picking { cursor: crosshair; }

/* ---------- The map screen: a full-bleed workspace ----------
   The map fills everything right of the rail; the panels FLOAT over it down the right-hand
   edge and can be tucked away, the way the phone app's chrome floats over its map. --side-w
   is what the map's own controls read to stay clear of the panel column. */
.map-screen { position: relative; height: 100vh; --side-w: 356px; }
.map-screen.side-tucked { --side-w: 0px; }
.map-box.tall { position: absolute; inset: 0; height: auto; min-height: 0; border: none; border-radius: 0; }
.map-side {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 332px; z-index: 6;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden;
  transition: transform .22s ease; overscroll-behavior: contain;
}
.map-screen.side-tucked .map-side { transform: translateX(calc(100% + 20px)); pointer-events: none; }
/* The tuck handle rides the panel's left edge; tucked, it stays on screen to bring it back. */
.side-tuck {
  position: absolute; top: 12px; right: calc(var(--side-w) + 8px); z-index: 7;
  width: 26px; height: 46px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px 0 0 9px;
  color: var(--muted); box-shadow: var(--shadow); transition: right .22s ease;
}
.side-tuck:hover { color: var(--brand); }
.side-tuck .ic { transition: transform .2s; }
.map-screen.side-tucked .side-tuck { border-radius: 9px; right: 12px; }
.map-screen.side-tucked .side-tuck .ic { transform: rotate(180deg); }
/* The map's own widgets shift inboard while the panel is out, so nothing hides under it.
   The zoom stack also starts BELOW the tuck handle's row, or the two pile up in the corner. */
.map-screen .maplibregl-ctrl-top-right { right: var(--side-w); top: 62px; transition: right .22s ease; }
.map-screen .maplibregl-ctrl-bottom-right { right: var(--side-w); transition: right .22s ease; }
.map-screen .map-readout { right: calc(var(--side-w) + 12px); transition: right .22s ease; }
.side-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px; box-shadow: var(--shadow); flex-shrink: 0; }
.side-sec h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.side-sec h4 .ic { color: var(--brand); }
.side-sec.grow-sec { flex: 1; min-height: 150px; }
.side-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.side-btns .ghost-btn { flex: 1; min-width: 120px; justify-content: center; padding: 8px 12px; font-size: 14.5px; }
.side-more { margin-top: 10px; }
.side-more summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; }
.side-more summary:hover { color: var(--brand); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Search sits ON the map, the way a map app does it */
.map-search { position: absolute; left: 12px; top: 12px; z-index: 6; width: min(400px, calc(100% - 90px)); display: flex; gap: 6px; }
.map-search input {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 13px; box-shadow: var(--shadow);
}
.map-search .icon-btn { box-shadow: var(--shadow); flex-shrink: 0; }
#msResults {
  position: absolute; top: 46px; left: 0; right: 44px; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--shadow);
}
.sres { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line); padding: 9px 13px; }
.sres:hover { background: var(--surface-2); }
.sres:last-child { border-bottom: none; }
.sres-none { padding: 12px 13px; color: var(--muted); font-size: 14.5px; }

/* The tool rail down the left of the map */
.map-tools { position: absolute; left: 12px; bottom: 44px; z-index: 5; display: flex; flex-direction: column; gap: 5px; }
.mtool {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; width: 116px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--text); font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow);
}
.mtool:hover { border-color: var(--brand); }
.mtool.on { background: var(--amber); color: #10151d; border-color: var(--amber); }
.map-readout {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 7px 13px; font-size: 14.5px; box-shadow: var(--shadow); min-height: 33px;
}
.map-readout .ro-co { color: var(--muted); font-variant-numeric: tabular-nums; }
.map-readout:empty { display: none; }

/* Layer rows in the side panel */
.ly-row { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ly-row:last-child { border-bottom: none; }
.ly-main { flex: 1; min-width: 0; }
.ly-name { font-weight: 600; cursor: pointer; word-break: break-word; }
.ly-name:hover { color: var(--brand); }
.ly-eye { background: none; border: none; color: var(--muted); padding: 3px; }
.ly-eye.on { color: var(--brand); }
.ly-lab {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 7px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.ly-lab.on { color: var(--bg); background: var(--brand); border-color: var(--brand); }
.stop-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.stop-row { display: flex; align-items: center; gap: 6px; }
.stop-row input { padding: 5px 8px; font-size: 14px; }

/* ---------- Bulk action bar (files + editor) ---------- */
.bulk-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-top: 14px;
}
.bulk-what { font-weight: 700; color: var(--brand); }
.bulk-sep { width: 1px; height: 20px; background: var(--line-2); }
.inline-tick { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--muted); }
.inline-tick input { accent-color: var(--brand); width: 16px; height: 16px; }

/* ---------- Files page: folder rail + list ---------- */
.files-layout { display: grid; grid-template-columns: 210px 1fr; gap: 16px; margin-top: 16px; }
.folder-rail { border-right: 1px solid var(--line); padding-right: 14px; }
.fold {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 9px; color: var(--muted); font-weight: 600; font-size: 14.5px; margin-bottom: 3px;
}
.fold:hover { background: var(--surface-2); color: var(--text); }
.fold.on { background: var(--surface-2); color: var(--brand); border-color: var(--line-2); }
.fold .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-menu { padding: 0 4px; opacity: .6; }
.fold-menu:hover { opacity: 1; color: var(--brand); }
.file-row.sel-row { cursor: pointer; margin-bottom: 7px; align-items: flex-start; }
.file-row.sel-row:hover { border-color: var(--line-2); }
.file-row.picked { border-color: var(--brand); background: var(--surface-3); }
.fr-quick { display: flex; gap: 4px; align-items: center; }
.drop.compact { padding: 16px; }
.drop.compact b { display: inline; font-size: 16px; margin-right: 6px; }

/* ---------- Data library ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 11px; margin: 14px 0; }
.lib-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 13px;
}
.lib-card:not(.static):hover { border-color: var(--brand); transform: translateY(-1px); }
.lib-card.static { cursor: default; }
.lib-card b { display: flex; align-items: center; gap: 7px; }
.lib-km { color: var(--brand); font-size: 13.5px; font-weight: 700; margin-top: 3px; }

/* ---------- Coordinate systems ---------- */
.gs-region { margin-bottom: 18px; }
.gs-region h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.gs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 7px; }
.gs-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
}
.gs-item:hover { border-color: var(--brand); }
.defbox {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px; margin-top: 8px; font-size: 13px; font-family: ui-monospace, Consolas, monospace;
  white-space: pre-wrap; word-break: break-all; color: var(--muted);
}
textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
details summary { cursor: pointer; }

/* Middling window: the rail narrows to icons only. */
/* The narrow rail is a BODY CLASS, set by app.js: by choice (the fold button), on the Map (it wants
   the room), or because the window is under 1150px. One set of rules, three reasons. */
@media (max-width: 1000px) {
  /* The floating panel column becomes a bottom sheet over the map. */
  .map-screen { --side-w: 0px; }
  .map-side { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 46%; }
  .map-screen.side-tucked .map-side { transform: translateY(calc(100% + 20px)); }
  .side-tuck { top: auto; bottom: calc(46% + 20px); right: 12px; border-radius: 9px; }
  .map-screen.side-tucked .side-tuck { bottom: 12px; }
  .map-screen.side-tucked .side-tuck .ic { transform: rotate(-90deg); }
  .map-screen:not(.side-tucked) .side-tuck .ic { transform: rotate(90deg); }
  .files-layout { grid-template-columns: 1fr; }
  .folder-rail { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; }
}

/* ---------- Files drawer ---------- */
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 700;
  background: var(--surface); border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 16px; }
.drawer-note { padding: 12px 16px 0; }
#drawerList { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; }
.drawer-foot { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.drawer-foot .ghost-btn { flex: 1; justify-content: center; }
.file-row {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px;
  display: flex; gap: 11px; align-items: flex-start;
}
.file-row .ic { color: var(--brand); margin-top: 2px; }
.file-row .fr-main { flex: 1; min-width: 0; }
.file-row .fr-name { font-weight: 600; word-break: break-word; }
.file-row .fr-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.file-row .fr-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.empty { text-align: center; color: var(--muted); padding: 34px 12px; }
#scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 690; }

/* ---------- Modal sheet ---------- */
#sheetWrap { position: fixed; inset: 0; z-index: 800; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
#sheet {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 15px;
  width: min(620px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 16px; }
#sheetBody { padding: 18px; overflow: auto; }
#sheetBody p { color: var(--muted); margin-bottom: 12px; }
.opt {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 8px; cursor: pointer;
}
.opt:hover { border-color: var(--line-2); }
.opt input { width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.form-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Toasts + busy ---------- */
#toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 900;
  display: flex; flex-direction: column; gap: 9px; align-items: center; pointer-events: none; width: min(560px, 92vw); }
.toast {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 12px 17px; box-shadow: var(--shadow); font-size: 15px; width: 100%;
  animation: rise .18s ease-out;
}
.toast.bad { border-color: var(--danger); }
.toast.good { border-color: var(--ok); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
#busy { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.busy-card {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 15px;
  padding: 26px 32px; text-align: center; min-width: 320px; box-shadow: var(--shadow);
}
.spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bar { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-top: 13px; }
.bar > div { height: 100%; width: 0; background: var(--brand); transition: width .2s; }
#busyCancel { margin-top: 14px; }

/* ---------- Footer ---------- */
.foot { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot a { color: var(--brand); }

/* A phone: the rail lies back down as a top bar. */
@media (max-width: 720px) {
  :root, html[data-theme="dark"], html[data-theme="light"], html[data-theme="neon"] { --rail-w: 0px; }
  #topbar {
    position: sticky; left: auto; bottom: auto; width: auto; flex-direction: row; align-items: center;
    padding: 10px 14px; gap: 10px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .brand { border-bottom: none; padding: 0; }
  #topnav { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  #topnav button { width: auto; padding: 8px 10px; }
  .top-right { border-top: none; padding-top: 0; }
  .top-right .icon-btn { flex: none; }
  .hero h1 { font-size: 30px; }
  #view { margin-left: 0; padding: 18px 14px 70px; }
  #view.ws-full { height: calc(100vh - 59px); }
  .map-screen { height: 100%; }
}

/* =========================================================
   PICKING THINGS UP OFF THE MAP
   The hover tooltip, the right-click menu and the panel that describes what you
   have selected. All three sit ON the map (or in the rail beside it) rather than
   in a dialog, because they answer questions you ask WHILE looking at the ground.
   ========================================================= */

/* Follows the cursor. `pointer-events: none` matters — a tooltip that can be
   hovered would steal the mouse from the very feature it is describing and
   flicker on and off forever. */
.map-tip {
  position: absolute; z-index: 7; pointer-events: none; max-width: 260px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 7px 11px; box-shadow: var(--shadow); font-size: 14.5px; line-height: 1.35;
}
.map-tip b { display: block; }
.map-tip .tip-ly { display: block; opacity: .8; }

/* The right-click menu. */
.map-menu {
  position: absolute; z-index: 9; min-width: 210px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px;
  box-shadow: var(--shadow);
}
.mm-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 8px 11px; border-radius: 7px;
}
.mm-item:hover { background: var(--surface-2); color: var(--brand); }
.mm-item.danger { color: var(--danger); }
.mm-item.danger:hover { background: var(--surface-2); color: var(--danger); }
.mm-sep { height: 1px; background: var(--line); margin: 4px 8px; }

/* The selection panel, at the top of the rail. Outlined in the same cyan as the
   halo drawn around the feature itself, so the panel and the thing on the map
   read as one object. */
.sel-sec { border-color: var(--line-2); box-shadow: inset 0 0 0 1px rgba(0,229,255,.18); }
.sel-sec h4 { justify-content: space-between; }
.sel-sec h4 .sel-x { padding: 2px 6px; line-height: 1; }
.sel-where { margin-top: 8px; }
.sel-facts { margin-top: 5px; line-height: 1.6; }
.sel-attrs { margin-top: 10px; }
.sel-attrs summary { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.sel-attrs .tbl { margin-top: 7px; font-size: 13.5px; }
.sel-attrs .tbl th { position: static; width: 40%; color: var(--muted); background: none;
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.sel-attrs .tbl td { word-break: break-word; }
.sel-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sel-list { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; max-height: 210px; overflow: auto; }
.sel-item {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: none; border-radius: 6px;
  color: var(--text); font-family: var(--font-body); font-size: 14.5px; font-weight: 600; padding: 5px 7px;
}
.sel-item:hover { background: var(--surface-2); color: var(--brand); }

/* "What's here?" — a plain list of the same place said three ways. */
.wh-rows { display: flex; flex-direction: column; gap: 11px; }
.wh-row { display: flex; flex-direction: column; gap: 2px; }
.wh-row .ro-co { font-variant-numeric: tabular-nums; font-size: 16px; }

/* Save / open / clear, under the list of what is on the map. Ruled off from the layers
   above them because they act on the WHOLE map, not on a layer. */
.map-btns { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 12px; }
.mini-btn:disabled { opacity: .4; cursor: not-allowed; }
.mini-btn:disabled:hover { border-color: var(--line); }

/* The layer list scrolls INSIDE its own section, so Save / Open / Clear stay pinned at the
   bottom of it. Without this the whole rail grew and the buttons fell off the end of the page
   exactly when a busy map made them most useful. */
.side-sec.grow-sec { display: flex; flex-direction: column; }
.side-sec.grow-sec #msLayers { flex: 1; overflow: auto; min-height: 62px; }

/* Paper / shape / detail sit on one line in the PDF dialog — three short choices that are
   read together, not three questions in a column. */
.pd-row { display: flex; gap: 10px; margin-top: 12px; }
.pd-row .field { flex: 1; min-width: 0; }

/* ---------- Georeference a map: the picture and the ground, side by side ----------
   Two panes rather than a form. Asked as "type the corner coordinates" this job is one
   almost nobody can do, because you have to already know the answer; asked as two clicks
   on two maps, anyone can. */
.gref { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.gref-pane { display: flex; flex-direction: column; }
.gref-pane h4 {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
}
.gref-pane h4 .ic { color: var(--brand); }
.gref-imgbox {
  position: relative; height: 58vh; min-height: 380px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
}
.gref-imgbox canvas { display: block; touch-action: none; cursor: crosshair; }
.gref-pane > p { margin-top: 8px; }

/* How well it fits, said in words. The colour is the summary; the sentence is the reason. */
.gr-verdict {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; line-height: 1.5;
}
.gr-verdict .ic { flex-shrink: 0; margin-top: 2px; }
.gr-good { border-color: var(--ok); }
.gr-good .ic { color: var(--ok); }
.gr-ok .ic, .gr-thin .ic { color: var(--amber); }
.gr-ok, .gr-thin { border-color: var(--amber); }
.gr-bad { border-color: var(--danger); }
.gr-bad .ic { color: var(--danger); }
.gr-none .ic { color: var(--muted); }
/* The one point pulling the fit out of shape, so it can be found and moved rather than hunted. */
tr.gr-worst td { background: color-mix(in srgb, var(--danger) 14%, transparent); }

@media (max-width: 1000px) { .gref { grid-template-columns: 1fr; } }

/* The trim button lights up while you are dragging the box out, so the picture pane's
   click-to-place behaviour changing underneath you is visible rather than surprising. */
.mini-btn.on { border-color: var(--amber); color: var(--amber); }

/* =========================================================
   THE WORKBENCH REDESIGN (2026-09-07)
   The dashboard home, the floating map panels' extras, layer
   rows with more to say, sheets, elevation profiles and the
   drone-photo inspector. Appended so source order lets these
   refine what came before.
   ========================================================= */

/* Rajdhani's light stems disappear at small sizes on a white ground — the phone app's fix. */
html[data-theme="light"] .muted, html[data-theme="light"] .small { font-weight: 600; }

/* Search stops short of the floating panel column. */
.map-screen .map-search { width: min(400px, calc(100% - var(--side-w) - 104px)); }

/* ---------- Home: the workbench dashboard ---------- */
.dash-head { padding: 4px 0 18px; }
.dash-head h1 { font-size: 30px; margin-bottom: 6px; }
.dash-head h1 .accent {
  background: linear-gradient(90deg, #3971f1, #08d5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dash-head p { color: var(--muted); font-size: 17px; }
.dash-clock { float: right; text-align: right; margin-top: 4px; }
.dash-clock b { font-family: var(--font-display); font-size: 22px; letter-spacing: .06em; display: block; }
.dash-clock span { color: var(--muted); font-size: 13.5px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 22px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px;
  border-top: 2px solid var(--brand);
}
.kpi b { font-family: var(--font-display); font-size: 23px; letter-spacing: .04em; color: var(--brand); display: block; }
.kpi span { color: var(--muted); font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.dash-note {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line-2);
  background: var(--surface); font-size: 14px; color: var(--muted);
}
.dash-note .ic { color: var(--ok); }
.tool-card .tc-ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 2px;
}
.recent-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.recent-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px;
}
.recent-row:hover { border-color: var(--line-2); }
.recent-row .ic { color: var(--brand); }
.recent-row .rr-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row .rr-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Layer rows: sheets and reordering ---------- */
.ly-row.sheet-row .ly-name { font-style: normal; }
.ly-row .ly-kind { color: var(--muted); }
.op-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.op-row input[type=range] { flex: 1; accent-color: var(--brand); }
.op-row .op-val { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }

/* ---------- Elevation profile ---------- */
.prof-box { margin-top: 10px; }
.prof-box svg { display: block; width: 100%; height: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.prof-line { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.prof-fill { fill: var(--brand); opacity: .16; stroke: none; }
.prof-gap { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.prof-txt { fill: var(--muted); font-family: var(--font-body); font-size: 10px; }
.prof-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: 14px; }
.prof-stats b { font-variant-numeric: tabular-nums; }
.prof-up { color: var(--ok); }
.prof-down { color: var(--danger); }

/* ---------- Drone photos: the mission inspector ---------- */
.ph-layout { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.ph-map { position: relative; height: 62vh; min-height: 400px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.ph-map .maplibregl-map { position: absolute; inset: 0; }
.ph-facts { display: flex; flex-direction: column; gap: 12px; }
.ph-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 1000px) { .ph-layout { grid-template-columns: 1fr; } }

/* =========================================================
   THE PROFESSIONAL PASS (2026-10-04)
   Modelled on the ops software the owner works with: a thin app
   bar that says where you are, small glyph buttons that name
   themselves on hover, status shown as chips, labels above values,
   and the Map as a docked workspace with a status bar. Brand kept:
   Orbitron for the logo and the small labels, Rajdhani for the rest,
   all three themes. Appended so it refines what came before.
   ========================================================= */

/* ---------- Parts kit ---------- */
.lab { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.eyebrow { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.lv > div { display: grid; gap: 1px; min-width: 0; }
.lv b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
/* Status chips: green done, blue working, amber needs you, red failed, grey not started. */
.chip-s { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 5px;
  white-space: nowrap; background: var(--surface-3); color: var(--muted); line-height: 1.45; }
.chip-s.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.chip-s.info { background: var(--brand-soft); color: var(--brand); }
.chip-s.warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.chip-s.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.chip-t { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
kbd, .kbd { font-family: var(--font-body); font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--surface); line-height: 1.5; }

/* Glyph buttons: icon-only, named by the floating label on hover. */
.g-btn { position: relative; width: 34px; height: 34px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); padding: 0; }
.g-btn:hover { background: var(--surface-2); color: var(--text); }
.g-btn.on { background: var(--brand); color: var(--bg); box-shadow: var(--glow); }
.g-btn.sm { width: 30px; height: 30px; border-radius: 7px; }
.g-btn.danger:hover { color: var(--danger); }
.g-btn:disabled { opacity: .38; cursor: not-allowed; background: transparent; }
.g-btn .badge { top: -3px; right: -3px; min-width: 16px; height: 16px; font-size: 10.5px; padding: 0 4px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The one floating label every glyph button shares. Never takes the mouse. */
#tipFloat { position: fixed; z-index: 1000; pointer-events: none; max-width: 300px;
  background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  padding: 5px 9px; border-radius: 6px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); }
#tipFloat.hidden { display: none; }
#tipFloat kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .75; }
#tipFloat.why { background: var(--surface-3); color: var(--text); border: 1px solid var(--line-2); }

/* Buttons and panels: a little tighter than before, so a screen holds more. */
.primary-btn { padding: 8px 16px; border-radius: 8px; font-size: 15.5px; letter-spacing: .02em; }
.ghost-btn { padding: 8px 14px; border-radius: 8px; font-size: 15.5px; }
.panel { border-radius: 12px; padding: 18px; }
.panel h3 { font-size: 18px; margin-bottom: 10px; }
.page-head h1 { font-size: 27px; margin-bottom: 4px; }
.section-title { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }
.tool-card h3 { font-size: 17px; letter-spacing: 0; }
.side-sec h4, .map-overlay h4, .gs-region h4, .gref-pane h4 { font-size: 10.5px; letter-spacing: .14em; }
table.tbl th { font-size: 9.5px; letter-spacing: .12em; font-weight: 500; color: var(--muted); }
.drawer-head h2, .sheet-head h2 { font-size: 19px; }

/* ---------- The rail, grouped ---------- */
#topbar { padding: 12px 8px 10px; gap: 6px; }
.brand { padding: 2px 8px 12px; }
.brand-word { font-size: 14.5px; }
#topnav { gap: 1px; }
#topnav .nav-grp { font-family: var(--font-display); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding: 12px 11px 4px; white-space: nowrap; opacity: .85; }
#topnav button { padding: 7px 11px; font-size: 15.5px; border-radius: 8px; border: 0; gap: 10px; }
#topnav button.on { background: var(--brand-soft); color: var(--brand); }
.rail-foot { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 1px; }
.rail-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 11px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-weight: 600; font-size: 15px; text-align: left; white-space: nowrap; }
.rail-btn:hover { background: var(--surface-2); color: var(--text); }
.rail-ver { background: none; border: 0; text-align: left; color: var(--muted); font-size: 13px; padding: 6px 11px 2px; white-space: nowrap; }
.rail-ver b { color: var(--brand); font-weight: 600; }
.rail-ver:hover b { text-decoration: underline; }
.rail-ver-short { display: none; }
body.rail-narrow { --rail-w: 56px; }
body.rail-narrow #topbar { padding: 12px 7px 10px; }
body.rail-narrow .brand { justify-content: center; padding: 2px 0 12px; }
body.rail-narrow .brand-word { display: none; }
body.rail-narrow #topnav button, body.rail-narrow .rail-btn { justify-content: center; padding: 0; height: 38px; gap: 0; }
body.rail-narrow .nv-l { display: none; }
body.rail-narrow #topnav .nav-grp { font-size: 0; padding: 0; height: 1px; background: var(--line); margin: 7px 6px; }
body.rail-narrow .rail-ver { text-align: center; padding: 6px 0 2px; font-size: 11.5px; }
body.rail-narrow .rail-ver-short { display: inline; }
body.rail-narrow #railBtn .ic { transform: scaleX(-1); }

/* ---------- The app bar ---------- */
#appbar { position: fixed; top: 0; left: var(--rail-w); right: 0; height: var(--bar-h); z-index: 480;
  display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.ab-crumb { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ab-crumb b { color: var(--text); font-weight: 700; }
.ab-crumb .sep { margin: 0 6px; opacity: .6; }
.ab-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); flex-shrink: 0; }
.ab-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.ab-pill.warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.ab-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 340px; max-width: 34vw; height: 32px; flex-shrink: 1;
  border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 8px; padding: 0 8px; color: var(--muted); font-size: 14.5px; text-align: left; }
.ab-search:hover { border-color: var(--brand); color: var(--text); }
.ab-search-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ab-ws { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px 3px 4px; white-space: nowrap; margin-left: 4px; }
.ab-ws:hover { border-color: var(--line-2); color: var(--text); }
.ab-av { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; color: var(--text); }
@media (max-width: 1000px) { .ab-ws-t, #abPillText { display: none; } .ab-ws { padding: 3px; } .ab-pill { padding: 4px; } }

/* ---------- Search everything (Ctrl K) ---------- */
#palWrap { position: fixed; inset: 0; z-index: 850; background: rgba(0,0,0,.45); display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px; }
#palWrap.hidden { display: none; }
#palette { width: min(660px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.pal-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pal-head input { flex: 1; background: transparent; border: 0; padding: 6px 0; font-size: 18px; color: var(--text); }
.pal-head input:focus { box-shadow: none; outline: none; }
#palList { overflow: auto; padding: 6px; min-height: 60px; }
.pal-sec { padding: 9px 10px 4px; }
.pal-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px; color: var(--text); }
.pal-item .ic { color: var(--muted); }
.pal-item .pi-t { font-weight: 600; font-size: 15.5px; }
.pal-item .pi-s { color: var(--muted); font-size: 13.5px; margin-left: 6px; }
.pal-item .pi-k { margin-left: auto; display: flex; gap: 4px; }
.pal-item.on { background: var(--brand-soft); }
.pal-item.on .ic { color: var(--brand); }
.pal-none { padding: 14px 12px; color: var(--muted); font-size: 15px; }
.pal-foot { display: flex; gap: 16px; padding: 7px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pal-foot span:last-child { margin-left: auto; }

/* ---------- Home ---------- */
.dash-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dash-hello h1 { font-size: 28px; line-height: 1.1; }
.dash-hello p { color: var(--muted); margin-top: 3px; }
.dash-time { text-align: right; flex-shrink: 0; }
.dash-time b { font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; display: block; }
.dash-time span { color: var(--muted); font-size: 13.5px; }
.kpi-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 14px; }
.kpi { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; border-top: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; text-align: left; color: var(--text); }
button.kpi:hover { border-color: var(--line-2); }
.kpi .k-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.kpi b { font-family: var(--font-body); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: 0; margin-top: 2px; }
.kpi span.lab { display: block; text-transform: uppercase; }
.kpi small { font-size: 13px; }
.quick-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: 14px; }
.q-tile { display: grid; gap: 7px; justify-items: start; text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 13px; color: var(--text); }
.q-tile:hover { border-color: var(--brand); }
.q-tile .q-ic { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--brand); }
.q-tile b { font-size: 16px; line-height: 1.15; }
.q-tile span.q-s { color: var(--muted); font-size: 13.5px; line-height: 1.25; }
.dash-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dash-card .dc-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.dash-card .dc-head b { font-size: 16px; }
.dash-card .dc-head button { background: none; border: 0; color: var(--brand); font-weight: 600; font-size: 14px; }
table.rtbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rtbl th { text-align: left; padding: 9px 14px 6px; }
.rtbl td { padding: 7px 14px; border-top: 1px solid var(--line); white-space: nowrap; }
.rtbl td.n { color: var(--muted); }
.rtbl td.nm { white-space: normal; font-weight: 600; overflow-wrap: anywhere; }
.rtbl tr.click { cursor: pointer; }
.rtbl tr.click:hover td { background: var(--surface-2); }
.rtbl-empty { padding: 18px 14px; color: var(--muted); font-size: 15px; }
.carry { padding: 12px; display: grid; gap: 10px; }
.carry-thumb { height: 120px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.carry-thumb svg { display: block; width: 100%; height: 100%; }
.carry-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carry-row small { display: block; color: var(--muted); font-size: 13.5px; }
.dash-privacy { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.dash-privacy .ic { color: var(--ok); margin-top: 1px; }
@media (max-width: 1000px) { .dash-two { grid-template-columns: 1fr; } }

/* ---------- The Map: a docked workspace ----------
   Map on the left, a tabbed panel docked on the right, a status bar under the map. The panel no
   longer floats OVER the map, so nothing on the map ever hides under it. */
.map-screen { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); grid-template-rows: minmax(0, 1fr) 30px; --side-w: 344px; }
.map-screen.side-tucked { --side-w: 0px; }
.map-box.tall { position: relative; inset: auto; grid-column: 1; grid-row: 1; height: auto; }
.map-side { position: relative; inset: auto; top: auto; right: auto; bottom: auto; width: auto; grid-column: 2; grid-row: 1 / 3;
  display: flex; flex-direction: column; gap: 0; overflow: hidden; transform: none; transition: none;
  background: var(--surface); border-left: 1px solid var(--line); }
.map-screen.side-tucked .map-side { transform: none; visibility: hidden; border: 0; }
.ms-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); padding: 0 6px; flex-shrink: 0; }
.ms-tab { padding: 12px 10px 10px; font-weight: 700; font-size: 15.5px; color: var(--muted); background: none; border: 0;
  border-bottom: 2px solid transparent; display: flex; gap: 6px; align-items: center; }
.ms-tab:hover { color: var(--text); }
.ms-tab.on { color: var(--text); border-bottom-color: var(--brand); }
.ms-tab .n { font-size: 12px; background: var(--surface-3); border-radius: 5px; padding: 0 6px; color: var(--muted); font-weight: 700; }
.ms-tab .n:empty { display: none; }
.ms-pane { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; }
.ms-pane .side-sec { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 14px; }
.ms-pane .side-sec:last-child { border-bottom: 0; }
.ms-pane .side-sec.grow-sec { flex: none; min-height: 0; display: block; }
.ms-pane .side-sec.grow-sec #msLayers { overflow: visible; }
.ms-pane .sel-sec { background: var(--brand-soft); box-shadow: none; }
.ms-pane .sel-sec h4 { margin-bottom: 10px; }
.side-tuck { top: 12px; right: var(--side-w); z-index: 7; width: 22px; height: 44px; transition: none; box-shadow: none; border-right: 0; }
.map-screen.side-tucked .side-tuck { right: 0; border-radius: 9px 0 0 9px; }
.map-screen .maplibregl-ctrl-top-right, .map-screen .maplibregl-ctrl-bottom-right { right: 0; transition: none; }
.map-screen .maplibregl-ctrl-top-right { top: 0; padding-right: 30px; }
.map-screen .map-readout { right: auto; left: 12px; bottom: 12px; transition: none; }
.side-btns .ghost-btn { font-size: 15px; }

/* The map's glyph column — the tools, then the view. MapLibre's own controls are dressed to match. */
.map-screen .maplibregl-ctrl-group { background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 3px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.map-screen .maplibregl-ctrl-group:empty { display: none; }
.map-screen .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 12px 0 0 0; }
.map-screen .maplibregl-ctrl-group button { width: 32px; height: 32px; border-radius: 7px; border: 0 !important; color: var(--muted); background: none; display: grid; place-items: center; }
.map-screen .maplibregl-ctrl-group button:not(:disabled):hover { background: var(--surface-2) !important; color: var(--text); }
.map-screen .maplibregl-ctrl-group button.on { background: var(--brand) !important; color: var(--bg); box-shadow: var(--glow); }
.map-screen .maplibregl-ctrl-group button + button { border-top: 0; }
.map-screen .maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-image: none !important; background-color: currentColor;
  width: 18px; height: 18px; -webkit-mask: var(--mi) center / 18px 18px no-repeat; mask: var(--mi) center / 18px 18px no-repeat; }
.map-screen .maplibregl-ctrl-group button .ic { pointer-events: none; }
.maplibregl-ctrl-zoom-in { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-zoom-out { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-compass { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l4.6 9.5H7.4z' fill='black'/%3E%3Cpath d='M7.4 12h9.2L12 21.5z'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-geolocate { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='black'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-fullscreen { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-shrink { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E"); }
.map-screen .maplibregl-ctrl-geolocate-active, .map-screen .maplibregl-ctrl-geolocate-background { color: var(--brand) !important; }
.map-screen .maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon { animation: none; opacity: .6; }
.map-screen .maplibregl-ctrl-group button:disabled { opacity: .35; }

/* The basemap chooser: three pictures to the left of its button. */
.bm-pop { position: absolute; z-index: 9; display: grid; gap: 6px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--shadow); }
.bm-row { display: flex; gap: 8px; }
.bm-opt { display: grid; gap: 5px; justify-items: center; background: none; border: 0; padding: 3px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.bm-opt .bm-pic { width: 76px; height: 54px; border-radius: 7px; border: 2px solid var(--line); }
.bm-opt.on { color: var(--brand); }
.bm-opt.on .bm-pic { border-color: var(--brand); }
.bm-opt:hover .bm-pic { border-color: var(--line-2); }
.bm-pic.p-map { background: linear-gradient(135deg, #20304a 0 30%, #172231 30% 55%, #1b3326 55% 70%, #172231 70%); }
html[data-theme="light"] .bm-pic.p-map { background: linear-gradient(135deg, #cfe0f0 0 30%, #f3f5f9 30% 55%, #dfeadb 55% 70%, #f3f5f9 70%); }
.bm-pic.p-sat { background: radial-gradient(circle at 30% 35%, #6f7d4c 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #4f6a3c 0 22%, transparent 23%), linear-gradient(135deg, #3d4a33, #59603f 50%, #2f4252); }
.bm-pic.p-hyb { background: linear-gradient(160deg, transparent 0 46%, #f2f2f2 46% 49%, transparent 49%), radial-gradient(circle at 30% 35%, #6f7d4c 0 18%, transparent 19%), linear-gradient(135deg, #3d4a33, #59603f 50%, #2f4252); }
.bm-note { font-size: 12.5px; color: var(--muted); max-width: 270px; padding: 0 4px; line-height: 1.35; }

/* The status bar: where the cursor is, in the grid you chose; the ground under it; zoom; scale. */
.ms-status { position: relative; grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 6px; min-width: 0;
  font-size: 13.5px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); white-space: nowrap; }
.ms-status b { color: var(--text); font-weight: 600; }
.ms-status .sep { width: 1px; height: 14px; background: var(--line-2); flex-shrink: 0; }
.ms-status .co { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-grid { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 6px; color: var(--muted); font-weight: 700; font-size: 13.5px; flex-shrink: 0; }
.ms-grid:hover { border-color: var(--line-2); color: var(--text); }
.ms-grid .ic { transform: rotate(-90deg); }
.ms-grid.warn { color: var(--amber); }
.ms-status .ms-scale { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.ms-status .maplibregl-ctrl-scale { background: transparent; border-color: var(--muted); color: var(--muted); font-size: 11.5px; margin: 0; padding: 0 4px; line-height: 1.2; }
.ms-status .ms-zoom, .ms-status .ms-elev { flex-shrink: 0; }
.grid-pick { position: absolute; z-index: 20; bottom: 34px; left: 6px; width: 340px; max-height: 60vh; overflow: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--shadow); white-space: normal; }
.grid-pick .gp-sec { padding: 8px 8px 3px; }
.grid-pick button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: 14.5px; font-weight: 600; }
.grid-pick button:hover { background: var(--surface-2); }
.grid-pick button.on { color: var(--brand); background: var(--brand-soft); }
.grid-pick button small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.grid-pick p { font-size: 12.5px; color: var(--muted); padding: 6px 9px; }

/* The selected-item card in the Layers tab. */
.sel-card { display: grid; gap: 10px; }
.sel-card .sc-head { display: flex; align-items: center; gap: 8px; }
.sel-card .sc-head .sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.sel-card .sc-head input { font-weight: 700; font-size: 16.5px; padding: 3px 7px; background: transparent; border-color: transparent; }
.sel-card .sc-head input:hover { border-color: var(--line-2); }
.sel-card .sc-head input:focus { background: var(--surface-2); }
.sel-card .sc-where { color: var(--muted); font-size: 13.5px; margin-top: -6px; }
.sel-acts { display: flex; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; flex-wrap: wrap; }
.sel-acts .g-btn.danger { margin-left: auto; }
.sel-spark { display: block; width: 100%; height: 56px; }
.sel-spark .sp-fill { fill: var(--brand); opacity: .16; }
.sel-spark .sp-line { fill: none; stroke: var(--brand); stroke-width: 1.6; }

/* Layer rows: eye, colour, name, labels, menu — one line each. */
.ly-row { gap: 6px; padding: 6px 0; }
.ly-row .ly-name { font-size: 15.5px; }
.ly-row .muted.small { font-size: 13px; }

@media (max-width: 1000px) {
  .map-screen { grid-template-columns: minmax(0, 1fr); }
  .map-side { position: absolute; grid-column: 1; left: 10px; right: 10px; bottom: 40px; top: auto; height: 48%; z-index: 8;
    border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); }
  .map-screen.side-tucked .map-side { display: none; }
  .side-tuck { top: auto; bottom: calc(48% + 46px); right: 10px; border-radius: 9px; border-right: 1px solid var(--line-2); }
  .map-screen.side-tucked .side-tuck { bottom: 40px; right: 10px; border-radius: 9px; }
  .map-screen .maplibregl-ctrl-top-right { padding-right: 0; right: 12px; }
  .ab-search { width: auto; flex-shrink: 0; }
  .ab-search .ab-search-t, .ab-search kbd { display: none; }
}
@media (max-width: 720px) {
  #appbar { position: sticky; left: 0; top: 0; }
  #view { padding-top: 18px; }
  #view.ws-full { padding-top: 0; height: calc(100vh - 59px - var(--bar-h)); }
  .rail-foot { display: none; }
  .ab-crumb { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Dropping a file onto the map: the map says it will take it. */
.map-box.over::after { content: 'Drop to add it to the map'; position: absolute; inset: 10px; z-index: 30; display: grid; place-items: center;
  border: 2px dashed var(--brand); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); font-weight: 700; font-size: 20px; pointer-events: none; }
.map-screen .map-readout { display: flex; align-items: center; gap: 6px; }
.map-screen .map-readout .ic { color: var(--amber); }

/* Fixes from the first look (2026-10-04). */
/* An empty readout is no readout -- the flex rule above outranked the old :empty one. */
.map-screen .map-readout:empty { display: none; }
/* The count tiles: the old .kpi span rule (uppercase, 13.5px) reached the new nested spans. */
.kpi span { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.kpi span.lab { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.kpi small { display: block; text-transform: none; }
/* The selected card's heading reads left to right, with the X at the end. */
.ms-pane .sel-sec h4 { justify-content: flex-start; }
.ms-pane .sel-sec h4 #msSelHead { flex: 1; }
/* The map's credits take the app's colours, not a white pill. */
.map-screen .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--muted); border: 1px solid var(--line); }
.map-screen .maplibregl-ctrl-attrib a { color: var(--muted); }
.map-screen .maplibregl-ctrl-attrib-button { filter: none; }
html[data-theme="dark"] .map-screen .maplibregl-ctrl-attrib-button, html[data-theme="neon"] .map-screen .maplibregl-ctrl-attrib-button { filter: invert(1); }
/* On a phone the rail lies down as a top bar, so it takes no width whatever its fold state. */
@media (max-width: 720px) { body, body.rail-narrow { --rail-w: 0px; } }

/* Even rows at every width: four tiles or two by two, six quick ways in or three by two. */
.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a tablet the panel's handle moves to the LEFT, clear of the map's button column. */
@media (max-width: 1000px) { .side-tuck, .map-screen.side-tucked .side-tuck { right: auto; left: 10px; } .map-side { height: 44%; } .side-tuck { bottom: calc(44% + 46px); } }

/* =========================================================
   THE WORKBENCH (phase 3, 2026-10-04) — one shape for every tool page:
   three steps on top, files and choices on the left, a live map on the right that stays in view.
   ========================================================= */
/* The status colours mean the same on every screen, in every theme: green done, blue working,
   AMBER needs you, red failed. Light theme remaps --amber to blue for the app's chrome, which would
   make "needs you" look like "working" -- so the status amber is its own token. */
:root, html[data-theme="dark"], html[data-theme="neon"] { --warn: #ffb000; }
html[data-theme="light"] { --warn: #b45309; }
.chip-s.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

.wb-steps { list-style: none; display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; padding: 0; flex-wrap: wrap; }
.wb-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; }
.wb-n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.wb-step.now { color: var(--text); }
.wb-step.now .wb-n { background: var(--brand); border-color: var(--brand); color: var(--bg); box-shadow: var(--glow); }
.wb-step.done .wb-n { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.wb-join { flex: 0 1 44px; min-width: 14px; height: 1.5px; background: var(--line-2); }
.wb-step.done + .wb-join { background: var(--ok); }

.wb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wb.wb-wide .wb-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.wb-left { min-width: 0; }
.wb-left > .panel, .wb-left > .drop { margin-bottom: 14px; }
.wb-right { position: sticky; top: calc(var(--bar-h) + 14px); min-width: 0; }
.wb-prev { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  height: calc(100vh - var(--bar-h) - 34px); min-height: 380px; }
.wb-prevhead { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; border-bottom: 1px solid var(--line); min-height: 44px; }
.wb-prevnote { flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-prevacts { display: flex; align-items: center; gap: 6px; }
.wb-prevacts .inline-tick { font-size: 13.5px; }
.wb-mapbox { position: relative; flex: 1; min-height: 0; }
.wb-mapbox .maplibregl-map { position: absolute; inset: 0; }
.wb-mapbox.over::after { content: "Drop to add it"; position: absolute; inset: 10px; z-index: 30; display: grid; place-items: center;
  border: 2px dashed var(--brand); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); font-weight: 700; font-size: 19px; pointer-events: none; }
.wb-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: min(330px, calc(100% - 40px));
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px;
  text-align: center; pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.wb-hint b { display: block; font-size: 16px; margin-bottom: 4px; }
.wb-hint span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Before anything is added */
.wb-drop { padding: 30px 18px; }
.wb-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.wb-sec:first-child { margin-top: 0; }
.wb-recent { display: grid; gap: 4px; }
.wb-rec { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; text-align: left; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.wb-rec:hover { background: var(--surface-2); border-color: var(--line); }
.wb-rec .ic { color: var(--brand); }
.wb-rec-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-sample { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wb-sample-t { flex: 1; min-width: 0; }
.wb-sample-t b { display: block; }
.wb-sample-t .small { display: block; line-height: 1.45; margin-top: 2px; }
.wb-sample .ghost-btn { flex-shrink: 0; }

/* The queue */
.wb-qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wb-qhead b { font-size: 16px; }
.wb-qacts { margin-left: auto; display: flex; gap: 6px; }
.wb-cards { min-height: 10px; border-radius: 12px; }
.wb-cards.over { outline: 2px dashed var(--brand); outline-offset: 4px; }
.qcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 10px; padding: 10px 12px 11px 13px; margin-bottom: 10px; }
.qcard.s-ok { border-left-color: var(--ok); }
.qcard.s-info { border-left-color: var(--brand); }
.qcard.s-warn { border-left-color: var(--warn); }
.qcard.s-bad { border-left-color: var(--danger); }
.qc-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.qc-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.qc-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-acts { display: flex; gap: 2px; margin-left: 2px; }
.qc-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 2px; }
.qc-facts > div { display: grid; gap: 1px; min-width: 0; }
.qc-facts b { font-weight: 600; font-size: 14.5px; }
.qc-msg { margin: 8px 0 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.qc-msg.warn { color: var(--warn); }
.qc-msg.bad { color: var(--danger); }
.qc-msg.ok { color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-msg.ok .ic { color: var(--ok); }
.qc-grid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.qc-grid select, .wb-sel { min-width: 0; max-width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; }
.qc-grid select { flex: 1 1 220px; }
.wb-sel { width: 100%; }
.primary-btn.sm { padding: 7px 14px; font-size: 14px; min-height: 0; }
.qc-bar { height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 10px 0 4px; }
.qc-bar i { display: block; height: 100%; width: 35%; background: var(--brand); border-radius: 3px; animation: qcbar 1.1s ease-in-out infinite; }
@keyframes qcbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* Data health */
.health { list-style: none; display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.health .h { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--muted); line-height: 1.4; }
.health .h .ic { flex-shrink: 0; margin-top: 2px; }
.health .h.ok .ic { color: var(--ok); }
.health .h.warn { color: var(--warn); }
.health .h.bad { color: var(--danger); }
.health .h.info .ic { color: var(--muted); }
#edHealth .health { margin-top: 10px; }

/* Export */
.wb-out .wb-why { margin-top: 7px; }
.wb-opt { margin-top: 12px; }
.wb-outfoot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.wb-outrow { align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.gs-item.on { border-color: var(--brand); background: var(--brand-soft); }
.gs-geoid summary { cursor: pointer; }

/* The tidy table in the narrower column */
.wb .tbl th, .wb .tbl td { padding-left: 7px; padding-right: 7px; }
.wb table.tbl { font-size: 14.5px; }
.wb table.tbl td input[type=text] { padding: 5px 6px; }

@media (max-width: 1000px) {
  .wb-grid, .wb.wb-wide .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-right { position: static; order: -1; }
  .wb-prev { height: 340px; min-height: 0; }
  .wb-join { flex-basis: 18px; }
}
@media (max-width: 560px) { .wb-step .wb-st { display: none; } .wb-step.now .wb-st { display: inline; } .wb-sample { flex-direction: column; align-items: stretch; } }

/* The usual grids are a long list: it scrolls in its own box so the verdict below stays in reach. */
#gsBody .gs-scroll { max-height: 360px; overflow: auto; padding-right: 6px; }
.gr-file { margin-bottom: 12px; }
.gr-file .qc-head { gap: 10px; }
.wb.wb-wide .wb-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* =========================================================
   PHASE 4 (2026-10-04)
   ========================================================= */
/* Your files: a tree, search, sort, types, list or grid, and drag-to-move */
.fold-tree { margin-top: 4px; }
.fold-row { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--d) * 14px); }
.fold-row .fold { flex: 1; min-width: 0; }
.fold-caret { width: 20px; height: 26px; flex-shrink: 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 5px; padding: 0; }
.fold-caret:hover { color: var(--text); background: var(--surface-2); }
.fold-caret.none { cursor: default; background: none; }
.fold-caret .ic { transition: transform .15s; }
.fold-row:has(.fold.open) .fold-caret .ic { transform: rotate(90deg); }
.fold.drop-on, .fl-sub.drop-on { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-soft); color: var(--text); }
.sel-row.dragging { opacity: .45; }
.fl-head { margin-bottom: 10px; }
.fl-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; min-height: 30px; }
.fl-crumb .sep { color: var(--muted); }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.fl-subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fl-sub { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.fl-sub:hover { border-color: var(--line-2); }
.fl-sub .ic { color: var(--brand); }
.fl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fl-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; color: var(--muted); }
.fl-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; padding: 7px 0; outline: none; }
.fl-search:focus-within { border-color: var(--brand); }
.fl-sort { width: auto; flex: 0 0 auto; }
.fl-views { display: flex; gap: 2px; }
.fl-types { margin-bottom: 10px; }
.fl-types .chip .muted { font-weight: 500; margin-left: 3px; }
.file-row .fr-name .chip-t { margin-left: 6px; vertical-align: 2px; }
.file-row .rowtick, .fcard .rowtick { accent-color: var(--brand); width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.fcard { position: relative; display: grid; justify-items: start; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.fcard:hover { border-color: var(--line-2); }
.fcard.picked { border-color: var(--brand); background: var(--surface-3); }
.fcard .rowtick { position: absolute; top: 9px; right: 9px; margin: 0; }
.fcard .fc-ic { color: var(--brand); }
.fcard .fc-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard .fr-quick { gap: 2px; }
.fold-picks { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.fold-pick { padding-left: calc(10px + var(--d) * 18px) !important; display: flex; gap: 8px; align-items: center; }
.fold-pick .ic { color: var(--brand); }

/* Activity on Home */
.dash-act { margin-top: 12px; }
.act-list { list-style: none; margin: 0; padding: 6px 0; }
.act-day { padding: 8px 14px 3px; }
.act-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 14px; }
.act-row:hover { background: var(--surface-2); }
.act-t { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; flex-shrink: 0; width: 48px; }
.act-x { flex: 1; min-width: 0; font-size: 14.5px; }
.act-p { background: none; border: 0; color: var(--brand); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

/* The CSV column step */
.colpick { display: grid; gap: 6px; margin: 8px 0 4px; }
.cp-row { display: grid; grid-template-columns: 150px minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 10px; }
.cp-lab { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.cp-row select, .cp-gridrow select { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; min-width: 0; }
.cp-eg { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cp-gridrow { display: grid !important; grid-template-columns: 150px minmax(0, 1fr); }
.cp-note { margin: 2px 0 0 160px; }
.cp-prev { margin-top: 12px; max-height: 160px; overflow: auto; }
.cp-prev .tbl { font-size: 13px; }
@media (max-width: 560px) { .cp-row { grid-template-columns: 1fr 1fr; } .cp-eg { grid-column: 1 / -1; } .cp-gridrow { grid-template-columns: 1fr; } .cp-note { margin-left: 0; } }

/* Export options */
.wb-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.wb-more > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; padding: 4px 0; }
.wb-more[open] > summary { margin-bottom: 4px; }
.wb-more .chip-row .mini-btn { padding: 4px 9px; }
.fn-tokens { display: flex; gap: 4px; flex-wrap: wrap; }
.fn-tokens .mini-btn { padding: 2px 7px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#cvPattern { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }

/* Send to the phone */
.ph-check { display: grid; gap: 5px; margin: 14px 0 4px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; font-size: 14.5px; }
.ph-list { display: grid; gap: 4px; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.ph-row:last-child { border-bottom: 0; }
.ph-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-map { align-items: center; }

/* Editing a shape on the map */
.edit-bar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 14px;
  width: min(760px, calc(100% - 140px)); padding: 9px 10px 9px 14px; border-radius: 12px; border: 1px solid var(--brand);
  background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.edit-bar .eb-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.edit-bar .eb-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-bar .eb-t span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.eb-plus { font-style: normal; font-weight: 700; color: var(--brand); }
.edit-bar .eb-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.eb-redo .ic { transform: scaleX(-1); }
.ghost-btn.sm { padding: 6px 12px; font-size: 14px; min-height: 0; }
.map-box.editing .map-hint { display: none; }
@media (max-width: 720px) { .edit-bar { width: calc(100% - 20px); flex-wrap: wrap; top: 8px; } }

/* Tablet and phone (phase 4): the tool column stops ABOVE the bottom sheet and wraps into a second
   column to its left, rather than running on behind the sheet where full screen, the basemap and
   add-a-file could not be reached. Tucked away, the sheet gives the whole height back. */
@media (max-width: 1000px) {
  .map-screen:not(.side-tucked) .maplibregl-ctrl-top-right { bottom: calc(44% + 52px); display: flex; flex-direction: column;
    flex-wrap: wrap-reverse; align-content: flex-start; align-items: flex-end; column-gap: 8px; }
  .map-screen:not(.side-tucked) .maplibregl-ctrl-top-right .maplibregl-ctrl { margin-top: 10px; }
}