/*
  Munga GeoSurvey — interface styles (0.7 design).
  Navy chrome, warm paper, copper for the main action on each screen (Zambian copper, and the colour of a
  survey peg's paint), teal for selection and links, survey-marker amber for points, green for "good".
  Charter for headings and figures; Munga Heros Cn (drawing-office lettering) for controls, labels and numbers.
  Rounded cards with soft shadows, filled primary buttons, outlined secondary buttons, coloured tool icons.
*/
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Munga Heros Cn"; src: url("../fonts/heros-cn-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Munga Heros Cn"; src: url("../fonts/heros-cn-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f3f1ec; --surface: #faf9f6; --field: #ffffff; --ink: #14233a; --ink-2: #4a5568; --ink-3: #636d7c;
  --rule: #e3ded3; --rule-strong: #b8b09f; --accent: #0d6e68; --accent-deep: #0a5652; --on-accent: #ffffff; --accent-soft: #ddeeec;
  --primary: #b5521b; --primary-deep: #93410f; --on-primary: #ffffff; --primary-soft: #f8e7db; --primary-ink: #8a3a0c;
  --marker: #e3a21a; --danger: #b42318; --danger-soft: #fbe7e5; --ok: #186d3b; --ok-soft: #e0f2e7; --warn-bg: #fdf3d7; --warn-rule: #c99a2e;
  --gps: #2f6fd6; --on-status: #ffffff; --strong: #13294b;
  --rail: #13294b; --rail-2: #0e1f3b; --rail-ink: #f1ede4; --rail-ink-2: #b8c2d3; --rail-rule: rgba(241, 237, 228, 0.16); --rail-hi: #f2a774;
  --grid: #e6e1d6; --plot-bg: #fbfaf7;
  --t-navy: #26467a; --t-blue: #2f63b0; --t-copper: #b5521b; --t-green: #186d3b; --t-violet: #6a4c9c; --t-teal: #0d6e68; --t-amber: #8a5808; --t-slate: #4a5568; --t-rose: #b0365a;
  --shadow-1: 0 1px 2px rgba(19, 41, 75, 0.07), 0 1px 3px rgba(19, 41, 75, 0.05);
  --shadow-2: 0 1px 2px rgba(19, 41, 75, 0.05), 0 10px 26px -12px rgba(19, 41, 75, 0.22);
  --shadow-3: 0 22px 48px -18px rgba(19, 41, 75, 0.42);
  --serif: "Charter Web", Charter, "Bitstream Charter", Cambria, Georgia, serif;
  --ui: "Munga Heros Cn", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px; --radius-lg: 16px; --tap: 2.875rem; --rail-w: 15.5rem; --tabbar-h: 4.25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0d1626; --surface: #142035; --field: #182742; --ink: #eceae4; --ink-2: #a9b3c2; --ink-3: #8892a3;
    --rule: #263553; --rule-strong: #42557a; --accent: #5cc2b6; --accent-deep: #86d8ce; --on-accent: #0d1626; --accent-soft: #15393c;
    --primary: #f0905a; --primary-deep: #f6aa7c; --on-primary: #1b0e06; --primary-soft: #3a2416; --primary-ink: #f6aa7c;
    --marker: #e8b23a; --danger: #ff8f7a; --danger-soft: #3a1d1a; --ok: #7fd49a; --ok-soft: #173826; --warn-bg: #3a2f12; --warn-rule: #b98a26; --gps: #6ea0ff; --on-status: #0d1626; --strong: #f3efe6;
    --rail: #0a1220; --rail-2: #070d18; --grid: #1d2a42; --plot-bg: #101b2e;
    --t-navy: #8fb0e6; --t-blue: #79a7f0; --t-copper: #f0905a; --t-green: #7fd49a; --t-violet: #b89be6; --t-teal: #5cc2b6; --t-amber: #e8b23a; --t-slate: #a9b3c2; --t-rose: #f08aa6;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 10px 26px -12px rgba(0, 0, 0, 0.6); --shadow-3: 0 22px 48px -18px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1626; --surface: #142035; --field: #182742; --ink: #eceae4; --ink-2: #a9b3c2; --ink-3: #8892a3;
  --rule: #263553; --rule-strong: #42557a; --accent: #5cc2b6; --accent-deep: #86d8ce; --on-accent: #0d1626; --accent-soft: #15393c;
  --primary: #f0905a; --primary-deep: #f6aa7c; --on-primary: #1b0e06; --primary-soft: #3a2416; --primary-ink: #f6aa7c;
  --marker: #e8b23a; --danger: #ff8f7a; --danger-soft: #3a1d1a; --ok: #7fd49a; --ok-soft: #173826; --warn-bg: #3a2f12; --warn-rule: #b98a26; --gps: #6ea0ff; --on-status: #0d1626; --strong: #f3efe6;
  --rail: #0a1220; --rail-2: #070d18; --grid: #1d2a42; --plot-bg: #101b2e;
  --t-navy: #8fb0e6; --t-blue: #79a7f0; --t-copper: #f0905a; --t-green: #7fd49a; --t-violet: #b89be6; --t-teal: #5cc2b6; --t-amber: #e8b23a; --t-slate: #a9b3c2; --t-rose: #f08aa6;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 10px 26px -12px rgba(0, 0, 0, 0.6); --shadow-3: 0 22px 48px -18px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
/* Sunlight: maximum contrast, heavier rules, larger type, no shadows, for reading outdoors. */
:root[data-theme="sun"] {
  --bg: #ffffff; --surface: #ffffff; --field: #ffffff; --ink: #000000; --ink-2: #1c1c1c; --ink-3: #333333;
  --rule: #000000; --rule-strong: #000000; --accent: #004a45; --accent-deep: #00302d; --on-accent: #ffffff; --accent-soft: #d6ece9;
  --primary: #8a3a0c; --primary-deep: #5e2606; --on-primary: #ffffff; --primary-soft: #f6e0d0; --primary-ink: #5e2606;
  --marker: #b87400; --ok: #0b5d2c; --ok-soft: #d7f0df; --warn-bg: #fff1c2; --warn-rule: #000; --rail: #000000; --rail-2: #000; --rail-ink: #ffffff; --rail-ink-2: #e6e6e6; --rail-hi: #ffb27a; --strong: #000;
  --grid: #d9d9d9; --plot-bg: #ffffff; font-size: 112.5%;
  --t-navy: #000; --t-blue: #002f7a; --t-copper: #8a3a0c; --t-green: #0b5d2c; --t-violet: #3d1f73; --t-teal: #004a45; --t-amber: #6b4500; --t-slate: #000; --t-rose: #7a0f30;
  --shadow-1: none; --shadow-2: none; --shadow-3: 0 0 0 2px #000;
}
:root[data-theme="sun"] input, :root[data-theme="sun"] select, :root[data-theme="sun"] textarea { border-width: 2px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.5 var(--ui); letter-spacing: 0.005em; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); letter-spacing: -0.01em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--accent); }
svg { flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--ink); color: var(--bg); padding: 0.75rem 1rem; }
.skip-link:focus { top: 0.75rem; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.app { min-height: 100vh; }
main { padding: 1.25rem 1rem calc(var(--tabbar-h) + 2rem + env(safe-area-inset-bottom)); max-width: 82rem; margin: 0 auto; outline: none; }
.rail { display: none; }
.app-head { position: sticky; top: 0; z-index: 40; }
/* Keep focused and scrolled-to content clear of the sticky header (top bar and menu bar). */
html { scroll-padding-top: calc(7.5rem + env(safe-area-inset-top)); scroll-padding-bottom: calc(var(--tabbar-h) + 1rem); }
@media (min-width: 960px) { html { scroll-padding-top: 3.5rem; scroll-padding-bottom: 1rem; } }
.topbar { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem; background: var(--rail); color: var(--rail-ink); }
.topbar .mark { width: 1.75rem; height: 1.75rem; color: var(--rail-ink); }
.topbar-project { display: grid; text-align: left; background: none; border: 0; padding: 0.25rem 0; color: inherit; min-height: var(--tap); cursor: pointer; min-width: 0; }
.topbar-project span { font-family: var(--serif); font-weight: 700; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-project small { color: var(--rail-ink-2); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--surface); border-top: 1px solid var(--rule-strong); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: grid; justify-items: center; align-content: center; gap: 0.125rem; min-height: var(--tabbar-h); color: var(--ink-2); text-decoration: none; font-size: 0.8125rem; position: relative; }
.tabbar a svg { width: 1.5rem; height: 1.5rem; }
.tabbar a.active { color: var(--ink); font-weight: 700; }
.tabbar a.active::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: var(--marker); }

@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .topbar, .tabbar { display: none; }
  .rail { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--rail); color: var(--rail-ink); padding: 1.25rem 0.875rem; gap: 1.25rem; }
  main { padding: 2rem clamp(1.5rem, 3vw, 3rem) 4rem; width: 100%; }
}
.rail-brand { display: flex; align-items: center; gap: 0.625rem; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; padding: 0 0.375rem; }
.rail-brand .mark { width: 1.875rem; height: 1.875rem; }
.rail-brand small { display: block; font-family: var(--ui); font-weight: 400; font-size: 0.875rem; color: var(--rail-ink-2); line-height: 1; }
.project-switch { display: grid; gap: 0.125rem; text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--rail-rule); border-radius: var(--radius); padding: 0.625rem 0.75rem; color: inherit; cursor: pointer; }
.project-switch:hover { border-color: var(--rail-ink-2); }
.project-switch-label { font-size: 0.875rem; color: var(--rail-ink-2); }
.project-switch-name { font-family: var(--serif); font-weight: 700; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-switch-crs { font-size: 0.875rem; color: var(--rail-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-nav { display: grid; gap: 0.125rem; }
.rail-nav a { display: flex; align-items: center; gap: 0.75rem; min-height: var(--tap); padding: 0 0.75rem; border-radius: var(--radius); color: var(--rail-ink); text-decoration: none; font-size: 1.0625rem; border-left: 3px solid transparent; }
.rail-nav a svg { width: 1.375rem; height: 1.375rem; }
.rail-nav a:hover { background: rgba(255, 255, 255, 0.06); }
.rail-nav a.active { background: rgba(255, 255, 255, 0.1); border-left-color: var(--marker); font-weight: 700; }
.rail-foot { margin-top: auto; display: grid; gap: 0.5rem; }
.rail-foot .storage { font-size: 0.875rem; color: var(--rail-ink-2); margin: 0; }
.rail .btn-ghost-night { background: transparent; color: var(--rail-ink); border-color: var(--rail-rule); justify-content: flex-start; }
.rail .btn-ghost-night:hover { border-color: var(--rail-ink-2); background: rgba(255, 255, 255, 0.06); }
.mark { color: currentColor; }

/* ---------- page furniture ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sub { color: var(--ink-2); margin: 0.375rem 0 0; }
.kicker { color: var(--ink-2); margin: 0 0 0.25rem; font-size: 0.9375rem; }
.back { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-2); text-decoration: none; margin-bottom: 0.75rem; min-height: 2.25rem; }
.back svg { width: 1.125rem; height: 1.125rem; }
.back:hover { color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.empty { color: var(--ink-2); padding: 2rem 0; }
.hint { color: var(--ink-2); font-size: 0.9375rem; margin: 0.25rem 0 0; }
.note { color: var(--ink-2); font-size: 0.9375rem; }
.optional { color: var(--ink-3); font-weight: 400; font-size: 0.875rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap); padding: 0.5rem 1rem; border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn svg { width: 1.125rem; height: 1.125rem; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-line:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-quiet:hover { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-small { min-height: 2.75rem; padding: 0.375rem 0.75rem; font-size: 0.9375rem; }
.btn-wide { flex: 1; }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--radius); cursor: pointer; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.icon-btn-line { border: 1.5px solid var(--rule-strong); }
.icon-btn[aria-pressed="false"] { opacity: 0.55; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 20; min-width: 14rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: 0 12px 28px -12px rgba(20, 35, 56, 0.45); padding: 0.25rem; display: grid; }
.menu button { text-align: left; background: none; border: 0; padding: 0.625rem 0.75rem; min-height: var(--tap); border-radius: var(--radius); cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--accent-soft); }

/* ---------- banners, welcome ---------- */
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--warn-bg); border-left: 4px solid var(--warn-rule); padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.welcome { border: 1.5px solid var(--ink); background: var(--surface); padding: clamp(1rem, 3vw, 1.75rem); margin-bottom: 1.5rem; }
.welcome > p { color: var(--ink-2); max-width: 44rem; margin-top: 0.5rem; }
.welcome-steps { list-style: none; counter-reset: s; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0; }
.welcome-steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.25rem 0.75rem; padding: 1rem 0; border-top: 1px solid var(--rule); align-items: start; }
.welcome-steps li::before { content: counter(s); grid-row: span 3; font-weight: 700; font-size: 1.25rem; border-top: 3px solid var(--marker); padding-top: 0.125rem; text-align: center; }
.welcome-steps strong { font-size: 1.0625rem; }
.welcome-steps span { color: var(--ink-2); }
.welcome-steps .btn { justify-self: start; margin-top: 0.375rem; }
@media (min-width: 900px) { .welcome-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .welcome-steps li { border-top: 1px solid var(--ink); } }

/* ---------- search / filter ---------- */
.filter { display: flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--rule-strong); background: var(--field); border-radius: var(--radius); padding: 0 0.75rem; margin-bottom: 1rem; max-width: 34rem; }
.filter svg { width: 1.25rem; height: 1.25rem; color: var(--ink-2); }
.filter input { border: 0; background: transparent; min-height: var(--tap); width: 100%; outline: none; }
.filter:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }
.filter input:not([type="checkbox"]) { border: 0; background: transparent; padding: 0; outline: none; }

/* ---------- tables ---------- */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 0.5rem 0.625rem; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
thead th { font-weight: 700; color: var(--ink-2); font-size: 0.875rem; border-bottom: 1.5px solid var(--ink); }
tbody th { font-weight: 700; }
.num { text-align: right; }
.register td.desc, .register th.desc { white-space: normal; min-width: 10rem; color: var(--ink-2); }
.register tbody tr:hover { background: var(--surface); }
.row-actions { text-align: right; padding: 0 0.25rem; }
@media (max-width: 640px) { .register .desc { display: none; } th, td { padding: 0.5rem 0.4rem; } }

/* ---------- catalogue ---------- */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t c" "s c"; gap: 0.125rem 1rem; align-items: center; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); min-height: 3.75rem; }
.cat-list a:hover { background: var(--surface); }
.cat-list a:hover .cat-title { color: var(--accent); text-decoration: underline; }
.cat-title { grid-area: t; font-family: var(--serif); font-weight: 700; font-size: 1.125rem; }
.cat-sum { grid-area: s; color: var(--ink-2); font-size: 0.9375rem; }
.cat-list svg { grid-area: c; width: 1.25rem; height: 1.25rem; color: var(--ink-3); }

/* ---------- forms ---------- */
.prog-layout { display: grid; gap: 1.5rem; }
.prog-layout > *, .sheet, .sheet-table, .panel, .page-head > * { min-width: 0; }
main { min-width: 0; }
@media (min-width: 1180px) { .prog-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .prog-result { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; } }
.prog-form { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: clamp(1rem, 2.5vw, 1.5rem); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem 1rem; }
.field { display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
.field-wide, .form-heading, .field-table { grid-column: 1 / -1; }
.form-heading { font-family: var(--serif); font-size: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); margin-top: 0.25rem; color: var(--ink); }
.field label, .label { font-weight: 700; font-size: 0.9375rem; }
input:not([type="checkbox"]), select, textarea { width: 100%; min-height: var(--tap); padding: 0.5rem 0.625rem; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--field); color: var(--ink); font-size: 1.0625rem; }
textarea { resize: vertical; line-height: 1.4; }
select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.375rem; }
.pointlist-count { color: var(--ink-2); font-size: 0.9375rem; }
.pointlist-count.bad { color: var(--danger); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.hint-inline { color: var(--ink-3); font-size: 0.875rem; }
.grid-input { min-width: 100%; }
.grid-input th, .grid-input td { padding: 0.25rem; border-bottom: 1px solid var(--rule); }
.grid-input thead th { padding: 0.375rem 0.25rem; white-space: normal; vertical-align: bottom; min-width: 7rem; }
.grid-input .col-n { color: var(--ink-3); width: 2rem; min-width: 2rem; text-align: center; font-size: 0.875rem; }
.grid-input .col-x { width: 2.75rem; min-width: 2.75rem; }
.grid-input input { min-height: 2.75rem; padding: 0.375rem 0.5rem; border-width: 1px; min-width: 6.5rem; }
.field-toggle { align-self: center; }
.toggle { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; min-height: var(--tap); font-weight: 400 !important; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { width: 2.75rem; height: 1.5rem; border-radius: 1rem; background: var(--rule-strong); position: relative; flex: none; transition: background 0.15s; }
.toggle-track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--field); transition: transform 0.15s; }
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(1.25rem); }
.toggle input:focus-visible + .toggle-track { outline: 3px solid var(--accent); outline-offset: 2px; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); background: var(--surface); padding: 0.75rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 960px) { .form-actions { position: static; bottom: auto; border-top: 0; padding: 0; } }

/* ---------- computation sheet ---------- */
.prog-result { outline: none; }
.sheet-empty { border: 1.5px dashed var(--rule-strong); padding: 2rem 1.5rem; color: var(--ink-2); display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.sheet-empty svg { width: 2rem; height: 2rem; color: var(--ink-3); }
.sheet { background: var(--field); border: 1.5px solid var(--ink); padding: 0 0 0.75rem; }
.sheet-tb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border-bottom: 1.5px solid var(--ink); }
.sheet-tb div { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: grid; min-width: 0; }
.sheet-tb span { color: var(--ink-2); font-size: 0.875rem; }
.sheet-tb strong { font-weight: 400; font-family: var(--serif); overflow-wrap: anywhere; }
.headline { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; padding: 1.25rem 0.875rem 0.75rem; }
.headline > div { display: grid; }
.hl-label { color: var(--ink-2); font-size: 0.9375rem; }
.hl-value { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; font-variant-numeric: tabular-nums; }
.hl-value small { font-family: var(--ui); font-weight: 400; font-size: 1rem; color: var(--ink-2); }
.warn { margin: 0.5rem 0.875rem; padding: 0.625rem 0.75rem; background: var(--warn-bg); border-left: 4px solid var(--warn-rule); }
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 0.5rem 0.875rem 0; border-top: 1px solid var(--rule); }
.metrics > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); margin-right: 1.5rem; }
.metrics dt { color: var(--ink-2); }
.metrics dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metrics.compact { margin: 0 0 0.75rem; }
.sheet-table { margin: 1.25rem 0.875rem 0; }
.sheet-table h2 { font-size: 1rem; margin-bottom: 0.375rem; }
.sheet-table table { font-size: 0.9688rem; }
.sheet-plot { height: 17rem; margin: 1rem 0.875rem 0; border: 1px solid var(--rule); background: var(--plot-bg); position: relative; }
.sheet .note { margin: 0.75rem 0.875rem 0; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 0.875rem 0.25rem; margin-top: 1rem; border-top: 1px solid var(--rule); }
.sheet-foot { color: var(--ink-2); font-size: 0.875rem; margin: 0.75rem 0.875rem 0; }
.alert { border: 1.5px solid var(--danger); border-left-width: 5px; padding: 0.875rem 1rem; background: var(--field); }
.alert strong { color: var(--danger); }
.alert p { margin: 0.25rem 0 0; }

/* ---------- plot ---------- */
.plot-full { height: calc(100vh - 16rem); min-height: 22rem; border: 1.5px solid var(--ink); background: var(--plot-bg); position: relative; touch-action: none; overflow: hidden; }
.plot-svg { display: block; touch-action: none; cursor: grab; user-select: none; }
.plot-svg:active { cursor: grabbing; }
.plot-grid line { stroke: var(--grid); stroke-width: 1; }
.plot-poly { fill: color-mix(in srgb, var(--marker) 18%, transparent); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.plot-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.plot-path { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; }
.plot-pt { fill: var(--marker); stroke: var(--ink); stroke-width: 1.5; }
.plot-hl { fill: var(--accent); stroke: var(--field); stroke-width: 1.5; }
.plot-label { font: 400 12.5px var(--ui); fill: var(--ink); paint-order: stroke; stroke: var(--plot-bg); stroke-width: 3px; }
.plot-north path { fill: var(--ink); }
.plot-north text, .plot-scale text { font: 700 12px var(--ui); fill: var(--ink); }
.plot-scale rect { fill: var(--ink); }
.plot-info { margin-top: 0.75rem; min-height: 3rem; }
.plot-empty { display: grid; place-items: center; height: 100%; }

/* ---------- records ---------- */
.record-list { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.record-list li { border-bottom: 1px solid var(--rule); }
.record-list summary { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t d" "s s"; gap: 0.125rem 1rem; padding: 0.875rem 0.25rem; cursor: pointer; list-style: none; min-height: 3.5rem; }
.record-list summary::-webkit-details-marker { display: none; }
.record-list summary:hover { background: var(--surface); }
.rec-title { grid-area: t; font-family: var(--serif); font-weight: 700; }
.rec-sum { grid-area: s; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.record-list time { grid-area: d; color: var(--ink-2); font-size: 0.875rem; }
.rec-body { padding: 0 0 1rem; }
.rec-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.legacy { white-space: pre-wrap; font-size: 0.8125rem; background: var(--surface); padding: 0.75rem; border: 1px solid var(--rule); max-height: 20rem; overflow: auto; }

/* ---------- panels (project & settings) ---------- */
.panel { border-top: 1.5px solid var(--ink); padding: 1rem 0 1.75rem; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.panel > p { max-width: 46rem; }
.panel .metrics { margin: 0; }
.project-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.project-list li { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--rule); }
.project-list li > button:first-child { flex: 1; display: grid; text-align: left; background: none; border: 0; padding: 0.75rem 0.25rem; cursor: pointer; min-height: 3.5rem; color: var(--ink); }
.project-list li > button:first-child:hover strong { color: var(--accent); text-decoration: underline; }
.project-list span { color: var(--ink-2); font-size: 0.9375rem; }
.project-list li.current strong::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--marker); border: 1.5px solid var(--ink); transform: rotate(45deg); margin-right: 0.5rem; vertical-align: 0.1em; }
.tag { font-size: 0.875rem; border: 1px solid var(--rule-strong); padding: 0.125rem 0.5rem; border-radius: 1rem; color: var(--ink-2); margin-right: 0.25rem; }
.settings { max-width: 52rem; }
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.1875rem; margin: 1.25rem 0 0.5rem; }
.prose li { margin-bottom: 0.375rem; }

/* ---------- dialog & toast ---------- */
dialog { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 0; background: var(--bg); color: var(--ink); width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); }
dialog.wide { width: min(44rem, calc(100vw - 1.5rem)); }
dialog::backdrop { background: rgba(14, 23, 38, 0.55); }
.dialog-form { padding: 1.25rem; display: grid; gap: 1rem; }
.dialog-form > p { margin: 0; color: var(--ink-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.dialog-error { color: var(--danger); margin: 0; min-height: 1px; }
.dialog-error:empty { display: none; }
#toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: var(--bg); padding: 0.75rem 1rem; border-radius: var(--radius); max-width: min(34rem, calc(100vw - 2rem)); display: flex; gap: 1rem; align-items: center; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast.error { background: var(--danger); color: #fff; }
.toast-action { background: none; border: 1px solid currentColor; color: inherit; border-radius: var(--radius); padding: 0.375rem 0.75rem; cursor: pointer; font-weight: 700; }
@media (min-width: 960px) { #toast { bottom: 1.5rem; } }

/* ---------- control locator ---------- */
.more-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.5rem; margin-bottom: 1.5rem; }
.more-links a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 3.5rem; }
.more-links a:hover { border-color: var(--ink); }
.more-links a > svg:first-child { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.more-links a > svg:last-child { width: 1.125rem; height: 1.125rem; color: var(--ink-3); margin-left: auto; }
.more-links span { display: grid; }
.more-links small { color: var(--ink-2); font-size: 0.875rem; }
@media (min-width: 960px) { .more-links { display: none; } }

.ctl-ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; padding: 0.75rem 0.875rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.ctl-ref-status { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; flex: 1 1 18rem; font-variant-numeric: tabular-nums; }
.ctl-ref-actions { flex: 0 1 auto; }
.ctl-nogps { flex-basis: 100%; margin: 0; }
.ctl-dot { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.375rem; border-radius: 50%; border: 2px solid var(--ink-3); }
.ctl-dot.live { background: #2f6fd6; border-color: #2f6fd6; box-shadow: 0 0 0 4px color-mix(in srgb, #2f6fd6 25%, transparent); }
.ctl-dot.stale { background: var(--marker); border-color: var(--marker); }
.ctl-dot.set { background: var(--accent); border-color: var(--accent); }
.ctl-dot.bad { background: var(--danger); border-color: var(--danger); }
.ctl-dot.pulse { border-color: #2f6fd6; animation: ctl-pulse 1.2s ease-in-out infinite; }
@keyframes ctl-pulse { 50% { background: #2f6fd6; } }

.ctl-layout { display: grid; gap: 0.75rem; grid-template-areas: "search" "card" "map" "results"; }
.ctl-view { display: flex; gap: 0.375rem; margin-top: 0.625rem; }
.ctl-view .chip { flex: 1; justify-content: center; }
@media (max-width: 959px) {
  .ctl-layout[data-view="list"] .ctl-map { display: none; }
  .ctl-layout[data-view="map"] .ctl-results { display: none; }
  .ctl-layout[data-view="map"] { grid-template-areas: "search" "map" "card"; }
  .ctl-layout[data-view="map"] .ctl-map { height: max(18rem, calc(100vh - 22rem)); margin-bottom: 1.5rem; }
  .chips[data-ctl-order] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .chips[data-ctl-order]::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .ctl-ref { padding: 0.625rem 0.75rem; }
  .ctl-ref-actions .btn { min-height: 2.75rem; padding: 0.375rem 0.75rem; font-size: 0.9375rem; }
}
.ctl-left, .ctl-right { display: contents; }
.ctl-search { grid-area: search; }
.ctl-map { grid-area: map; }
.ctl-card { grid-area: card; }
.ctl-results { grid-area: results; }
.ctl-card.is-empty { display: none; }
@media (min-width: 960px) {
  .ctl-layout { grid-template-columns: minmax(19rem, 27rem) minmax(0, 1fr); grid-template-areas: none; align-items: start; gap: 1.25rem; }
  .ctl-left, .ctl-right { display: block; min-width: 0; }
  .ctl-view { display: none; }
  .ctl-right { position: sticky; top: 1rem; }
  .ctl-card { margin-top: 1rem; }
  .ctl-card.is-empty { display: block; }
  .ctl-results { margin-top: 0.75rem; }
}
.ctl-search .filter { max-width: none; margin-bottom: 0.625rem; }
.ctl-filters { display: grid; gap: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.25rem 0.75rem; border: 1.5px solid var(--rule-strong); border-radius: 1.5rem; background: var(--field); color: var(--ink); cursor: pointer; font-size: 0.9375rem; }
.chip > svg { width: 1.125rem; height: 1.125rem; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 700; }
.ctl-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.ctl-select { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); }
.ctl-select select { min-height: 2.75rem; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--field); padding: 0 0.5rem; color: var(--ink); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; }
.check input, .radio input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; accent-color: var(--accent); margin: 0; flex: none; }

.ctl-count { color: var(--ink-2); font-size: 0.9375rem; margin: 0 0 0.375rem; min-height: 1.4em; }
.ctl-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.ctl-list > li { border-bottom: 1px solid var(--rule); }
.ctl-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 0.625rem 0.375rem; min-height: 3.75rem; cursor: pointer; color: var(--ink); }
.ctl-item:hover { background: var(--surface); }
.ctl-item.selected { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.ctl-item-main { display: grid; min-width: 0; }
.ctl-item-main strong { font-family: var(--serif); font-size: 1.0625rem; overflow-wrap: anywhere; }
.ctl-item-main > span:not(.ctl-flags) { color: var(--ink-2); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-item-dist { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.ctl-item-dist strong { font-size: 1.0625rem; }
.ctl-item-dist span { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-2); font-size: 0.875rem; }
.ctl-item-dist svg { width: 0.875rem; height: 0.875rem; color: var(--accent); }
.ctl-glyph { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; font-size: 0.875rem; flex: none; border: 1.5px solid currentColor; }
.ctl-glyph.o-P { background: var(--ink); color: var(--bg); border-color: var(--ink); clip-path: polygon(50% 0, 100% 92%, 0 92%); border-radius: 0; padding-top: 0.3rem; }
.ctl-glyph.o-S { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ctl-glyph.o-T { background: var(--marker); color: #142338; border-color: var(--marker); }
.ctl-glyph.o-x { color: var(--ink-2); background: var(--field); }
.ctl-glyph.o-user { background: var(--danger); color: #fff; border-color: var(--danger); border-radius: 3px; transform: rotate(45deg) scale(0.86); }
.chip .ctl-glyph { width: 1.25rem; height: 1.25rem; font-size: 0.75rem; }
.chip .ctl-glyph.o-P { padding-top: 0.2rem; }
.kicker .ctl-glyph { width: 1.5rem; height: 1.5rem; font-size: 0.8125rem; margin-right: 0.5rem; vertical-align: middle; }
.ctl-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.ctl-flag { display: inline-block; font-size: 0.8125rem; line-height: 1.3; padding: 0.0625rem 0.4375rem; border-radius: 1rem; border: 1px solid var(--rule-strong); color: var(--ink-2); white-space: nowrap; }
.ctl-flag.warn { border-color: var(--warn-rule); background: var(--warn-bg); color: var(--ink); }
.ctl-flag.h { border-color: var(--accent); color: var(--accent); }
.ctl-flag.rs-found { border-color: var(--ok); color: var(--ok); }
.ctl-flag.rs-disturbed { border-color: var(--warn-rule); background: var(--warn-bg); color: var(--ink); }
.ctl-flag.rs-destroyed, .ctl-flag.rs-notfound { border-color: var(--danger); color: var(--danger); }
.ctl-empty, .ctl-loading { display: grid; gap: 0.25rem; padding: 1.25rem 0.25rem; color: var(--ink-2); }
.ctl-empty strong { color: var(--ink); font-family: var(--serif); font-size: 1.125rem; }
.ctl-more { margin-top: 0.75rem; width: 100%; }

.ctl-map { position: relative; border: 1.5px solid var(--ink); background: var(--plot-bg); height: clamp(16rem, 42vh, 24rem); }
@media (min-width: 960px) { .ctl-map { height: clamp(20rem, 46vh, 30rem); } }
.ctl-map canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ctl-map canvas:active { cursor: grabbing; }
.ctl-map canvas.tap-mode { cursor: crosshair; }
.ctl-map-tools { position: absolute; right: 0.5rem; top: 1.75rem; display: grid; gap: 0.25rem; }
.ctl-map-tools .icon-btn { background: var(--field); border: 1px solid var(--rule-strong); color: var(--ink); }
.ctl-map-tools .icon-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); opacity: 1; }
.ctl-map-tools .icon-btn[aria-pressed="false"] { opacity: 1; }
.ctl-map-note { position: absolute; left: 0; right: 0; bottom: -1.75rem; margin: 0; color: var(--ink-2); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-map + .ctl-card, .ctl-card { margin-top: 1.5rem; }
@media (max-width: 959px) { .ctl-card { margin-top: 0.75rem; } .ctl-results { margin-top: 0.75rem; } .ctl-search { margin-bottom: 0; } }

.ctl-card { outline: none; }
.ctl-station { border: 1.5px solid var(--ink); background: var(--field); padding-bottom: 1rem; }
.ctl-station-head { position: relative; padding: 0.875rem 3.5rem 0.75rem 0.875rem; border-bottom: 1px solid var(--rule); }
.ctl-station-head h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); overflow-wrap: anywhere; }
.ctl-station-head .kicker { display: flex; align-items: center; }
.ctl-close { position: absolute; right: 0.375rem; top: 0.375rem; }
.ctl-last { margin: 0.375rem 0 0; color: var(--ink-2); }
.ctl-alert { margin: 0.75rem 0.875rem 0; padding: 0.625rem 0.75rem; border: 1.5px solid var(--danger); border-left-width: 5px; background: var(--field); }
.ctl-station .note { margin: 0.5rem 0.875rem 0; }
.ctl-way .hl-value { display: inline-flex; align-items: center; gap: 0.5rem; }
.ctl-way-arrow { width: 1.75rem; height: 1.75rem; color: var(--accent); }
.ctl-unc { margin: 0 0.875rem; }
.ctl-join { margin: 0.5rem 0.875rem 0; padding: 0.5rem 0.75rem; background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.ctl-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.875rem 0.875rem 0.25rem; }
.menu-left { left: 0; right: auto; min-width: min(20rem, calc(100vw - 2rem)); }
.menu-link { display: grid; padding: 0.625rem 0.75rem; min-height: var(--tap); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.menu-link:hover, .menu-link:focus-visible { background: var(--accent-soft); }
.menu-link small { color: var(--ink-2); font-size: 0.8125rem; }
.ctl-metrics { margin-top: 0.75rem; grid-template-columns: 1fr; }
.ctl-metrics > div { margin-right: 0; }
.ctl-metrics dd { max-width: 68%; }
.ctl-rec { margin: 1rem 0.875rem 0; }
.ctl-rec h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.ctl-rec ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ctl-rec li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.ctl-rec li p { margin: 0.25rem 0 0; color: var(--ink); }
.ctl-foot { margin-top: 1.5rem; max-width: 52rem; }
.ctl-about-list { margin: 0; padding-left: 1.25rem; }
.ctl-about-list li { margin-bottom: 0.375rem; }
.ctl-status { border: 0; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.ctl-status legend { font-weight: 700; margin-bottom: 0.25rem; padding: 0; }
.radio { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; cursor: pointer; }
.ctl-copy { width: 100%; font-family: ui-monospace, monospace; font-size: 0.9375rem; padding: 0.5rem; border: 1.5px solid var(--rule-strong); background: var(--field); }
textarea { border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--field); padding: 0.5rem 0.625rem; width: 100%; resize: vertical; }

/* Guide me */
dialog.guide-dialog { width: min(26rem, calc(100vw - 1.5rem)); }
.guide { display: grid; gap: 0.5rem; text-align: center; }
.guide .kicker { margin: 0; }
.guide-dial { width: min(15rem, 62vw); margin: 0.25rem auto; }
.guide-svg { width: 100%; height: auto; display: block; }
.guide-ring { fill: var(--field); stroke: var(--ink); stroke-width: 2.5; }
.guide-tick { stroke: var(--ink-3); stroke-width: 1.5; }
.guide-cardinal { fill: var(--ink-2); font: 700 15px var(--ui); text-anchor: middle; }
.guide-arrow { fill: var(--accent); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; transition: transform 0.15s linear; }
.guide-hub { fill: var(--ink); }
.guide-read { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.guide-read > div { display: grid; }
.guide-turn { font-weight: 700; font-size: 1.125rem; min-height: 1.5em; margin: 0; }
.guide .note { text-align: left; font-size: 0.875rem; }
.guide .dialog-actions { justify-content: center; }

@media print {
  .ctl-print { border: 1px solid #000; }
  .ctl-print .ctl-station { border: 0; }
  .ctl-print .metrics dd { max-width: none; }
}

/* ---------- menu bar (desktop and tablet) ---------- */
/* The menu bar sits at the top on every screen size; the Windows app uses its native menu instead. */
.menubar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; background: var(--surface); border-bottom: 1px solid var(--rule-strong); padding: 0 clamp(0.25rem, 2vw, 2rem) 0 clamp(0.25rem, 1.5vw, 1.5rem); min-height: 2.75rem; }
.is-desktop-app .menubar-row { display: none; }
.workspace { min-width: 0; }
.menubar-end { display: flex; align-items: center; gap: 0.75rem; }
.mb-search { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.625rem; background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); cursor: pointer; font-size: 0.9375rem; }
.mb-search:hover { border-color: var(--ink); color: var(--ink); }
.mb-search svg { width: 1.125rem; height: 1.125rem; }
.mb-search kbd { font: inherit; font-size: 0.8125rem; border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.3rem; }
.topbar-search { margin-left: auto; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; background: none; border: 1px solid var(--rail-rule); border-radius: var(--radius); color: var(--rail-ink); cursor: pointer; }
.topbar-search svg { width: 1.375rem; height: 1.375rem; }
@media (max-width: 959px) {
  .menubar > li:first-child { display: none; } /* Home is in the tab bar */
  .menubar-end { display: none; }
  .menubar { flex: 1; justify-content: space-between; }
  .mb-top { padding: 0 0.625rem; font-size: 1rem; font-weight: 700; }
  .menubar-row .menubar > li { position: static; }
  .menubar-row .mb-menu { left: 0; right: 0; top: 100%; min-width: 0; max-height: calc(100vh - 9rem - var(--tabbar-h)); overflow-y: auto; border-radius: 0 0 var(--radius) var(--radius); border-left: 0; border-right: 0; }
  .menubar-row .mb-menu [role^="menuitem"] { min-height: 3rem; font-size: 1.0625rem; white-space: normal; }
  .menubar-row .mb-sub { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--accent-soft); margin: 0 0 0.25rem 0.75rem; padding: 0; max-height: none; overflow: visible; }
  .menubar-row .mb-has-sub { position: static; }
  .menubar-row .mb-has-sub > [aria-expanded="true"] .mi-sub { transform: rotate(90deg); }
  .menubar-row .mi-key:not(.mi-note) { display: none; }
}
@media (max-width: 380px) { .mb-top { padding: 0 0.4rem; } }
.menubar { list-style: none; display: flex; margin: 0; padding: 0; gap: 0.125rem; }
.menubar > li { position: relative; }
.mb-top { background: none; border: 0; padding: 0 0.875rem; min-height: 2.75rem; font-size: 1rem; color: var(--ink); cursor: pointer; border-radius: var(--radius); }
.mb-top:hover, .mb-top[aria-expanded="true"] { background: var(--accent-soft); }
.mb-top[aria-disabled="true"] { color: var(--ink-3); }
.mb-menu { list-style: none; margin: 0; padding: 0.25rem; position: absolute; left: 0; top: 100%; z-index: 50; min-width: 15.5rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: 0 14px 30px -14px rgba(20, 35, 56, 0.5); }
.mb-sub { left: calc(100% - 0.25rem); top: -0.3rem; }
.mb-has-sub { position: relative; }
.mb-menu [role^="menuitem"] { display: flex; align-items: center; gap: 1.5rem; width: 100%; min-height: 2.5rem; padding: 0.375rem 0.75rem; background: none; border: 0; border-radius: var(--radius); text-align: left; color: var(--ink); font-size: 1rem; cursor: pointer; white-space: nowrap; }
.mb-menu [role^="menuitem"]:hover, .mb-menu [role^="menuitem"]:focus-visible, .mb-menu [aria-expanded="true"] { background: var(--accent-soft); outline: none; }
.mb-menu [role^="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mb-menu [aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.mb-menu [aria-disabled="true"]:hover { background: none; }
.mi-label { flex: 1; }
.mi-key { color: var(--ink-2); font-size: 0.875rem; }
.mi-sub { width: 1rem; height: 1rem; color: var(--ink-2); }
[role="menuitemradio"][aria-checked="true"] .mi-label::after { content: " ✓"; color: var(--accent); font-weight: 700; }
.mb-sep { height: 1px; background: var(--rule); margin: 0.25rem 0.5rem; }
.rail-search { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; background: transparent; border: 1px solid var(--rail-rule); border-radius: var(--radius); color: var(--rail-ink-2); cursor: pointer; font-size: 0.9375rem; }
.rail-search:hover { color: var(--rail-ink); border-color: var(--rail-ink-2); }
.rail-search svg { width: 1.125rem; height: 1.125rem; }
.rail-search kbd { margin-left: auto; font: inherit; font-size: 0.8125rem; opacity: 0.8; }
.save-status { margin: 0; color: var(--ink-2); font-size: 0.875rem; white-space: nowrap; }

/* phone: menu button in the top bar and a full-height menu sheet */
.topbar-menu { margin-left: auto; display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--tap); padding: 0 0.75rem; background: none; border: 1px solid var(--rail-rule); border-radius: var(--radius); color: var(--rail-ink); font-weight: 700; cursor: pointer; flex: none; }
.topbar-menu svg { width: 1.25rem; height: 1.25rem; }
dialog.sheet-dialog { width: min(34rem, 100vw); max-height: 100vh; height: 100%; margin: 0 0 0 auto; border-width: 0 0 0 1.5px; border-radius: 0; }
.menu-sheet { display: grid; gap: 0.75rem; }
.ms-head { display: flex; justify-content: space-between; align-items: center; }
.menu-sheet ul { list-style: none; margin: 0; padding: 0; }
.ms-group h3 { font-size: 0.875rem; color: var(--ink-2); font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0.5rem 0 0.25rem; }
.ms-group > ul { border-top: 1px solid var(--rule); }
.ms-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 3rem; padding: 0.5rem 0.25rem; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; color: var(--ink); font-size: 1.0625rem; cursor: pointer; }
.ms-item:disabled { color: var(--ink-3); cursor: default; }
.ms-item small { color: var(--ink-2); font-size: 0.875rem; }
.ms-item[aria-current="true"]::after { content: "✓"; color: var(--accent); font-weight: 700; }
.ms-home { justify-content: flex-start; font-weight: 700; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.ms-home svg { width: 1.25rem; height: 1.25rem; }
.ms-sub > summary { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--rule); cursor: pointer; list-style: none; font-size: 1.0625rem; }
.ms-sub > summary::-webkit-details-marker { display: none; }
.ms-sub > summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.25rem; }
.ms-sub[open] > summary::after { content: "−"; }
.ms-sub > ul { padding-left: 1rem; }
.ms-foot { color: var(--ink-2); font-size: 0.9375rem; margin-top: 0.5rem; }

/* ---------- start screen ---------- */
.start { max-width: 56rem; margin: 0 auto; padding: clamp(0.5rem, 3vw, 2.5rem) 0 1rem; }
.start-brand { display: flex; align-items: center; gap: 1rem; }
.start-brand .mark { width: 3.25rem; height: 3.25rem; color: var(--ink); }
.start-brand .kicker { margin: 0; }
.start-lead { font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); color: var(--ink-2); max-width: 40rem; margin: 1rem 0 1.75rem; }
.start-actions { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.start-card { display: flex; align-items: flex-start; gap: 0.875rem; text-align: left; padding: 1rem 1.125rem; min-height: 5rem; background: var(--field); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
.start-card:hover { border-color: var(--ink); }
.start-card svg { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: 0.125rem; }
.start-card span { display: grid; gap: 0.125rem; }
.start-card strong { font-family: var(--serif); font-size: 1.1875rem; }
.start-card small { color: var(--ink-2); font-size: 0.9375rem; }
.start-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.start-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.start-primary svg, .start-primary small { color: var(--on-accent); }
.start-recent { margin-top: 2rem; }
.start-recent h2, .home-section h2 { font-size: 1.25rem; margin-bottom: 0.625rem; }
.start-control { margin-top: 1.5rem; }
.app-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- home ---------- */
.home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.75rem; border: 1.5px solid var(--ink); background: var(--field); }
.home-stats > div { padding: 0.625rem 0.875rem; border-top: 1px solid var(--rule); }
.home-stats > div:nth-child(-n + 2) { border-top: 0; }
.home-stats > div:nth-child(even) { border-left: 1px solid var(--rule); }
.home-stats dt { color: var(--ink-2); font-size: 0.875rem; }
.home-stats dd { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-stats > div { border-top: 0; border-left: 1px solid var(--rule); } .home-stats > div:first-child { border-left: 0; } }
.home-section { margin-bottom: 2rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.625rem; }
.tile { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; min-height: 4rem; background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.tile:hover { border-color: var(--ink); color: var(--ink); }
.tile svg { width: 1.5rem; height: 1.5rem; color: var(--accent); flex: none; }
.tile span { display: grid; }
.tile strong { font-size: 1.0625rem; }
.tile small { color: var(--ink-2); font-size: 0.875rem; }
.home-records a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t d" "s s"; gap: 0.125rem 1rem; padding: 0.75rem 0.25rem; color: var(--ink); text-decoration: none; }
.home-records a:hover .rec-title { color: var(--accent); text-decoration: underline; }

/* ---------- compute groups (drop-down) ---------- */
.cat-tools { display: flex; justify-content: flex-end; gap: 0.25rem; margin-bottom: 0.25rem; }
details.cat-group { border-top: 1.5px solid var(--ink); margin: 0; }
details.cat-group:last-of-type { border-bottom: 1.5px solid var(--ink); }
details.cat-group > summary { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0.25rem; cursor: pointer; list-style: none; }
details.cat-group > summary::-webkit-details-marker { display: none; }
details.cat-group > summary:hover h2 { color: var(--accent); }
.cat-name { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
details.cat-group > summary:hover .cat-name { color: var(--accent); }
.cat-head { flex: 1; display: grid; gap: 0.125rem; min-width: 0; }
.cat-desc { color: var(--ink-2); font-size: 0.9375rem; }
h3.cat-sub { font-family: var(--ui); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 0.75rem 0 0; padding: 0 0.25rem 0.375rem; border-bottom: 1px solid var(--rule); }
.mb-head { padding: 0.5rem 0.75rem 0.25rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.update-notice { position: fixed; z-index: 200; bottom: calc(var(--tabbar-h, 0px) + 1rem); right: 1rem; left: 1rem; max-width: 36rem; margin-left: auto; display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface); color: var(--ink); border: 2px solid var(--accent); box-shadow: 0 4px 20px #0003; }
.update-notice button { flex: none; }
@media print { .update-notice { display: none; } }
.cat-count { color: var(--ink-2); font-size: 0.9375rem; border: 1px solid var(--rule-strong); border-radius: 1rem; padding: 0 0.5rem; min-width: 1.75rem; text-align: center; }
.cat-caret { width: 1.25rem; height: 1.25rem; color: var(--ink-2); transform: rotate(90deg); transition: transform 0.15s; }
details.cat-group[open] .cat-caret { transform: rotate(-90deg); }
details.cat-group .cat-list { margin-bottom: 0.25rem; }
details.cat-group[open] { padding-bottom: 0.75rem; }

/* ---------- export plot dialog ---------- */
.xp-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .xp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.xp-opts { display: grid; gap: 0.75rem; }
.xp-show { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0 0.75rem; }
.xp-show legend { font-weight: 700; padding: 0; margin-bottom: 0.25rem; }
.xp-preview { margin: 0; }
.xp-preview img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--rule-strong); box-shadow: 0 10px 24px -16px rgba(20, 35, 56, 0.5); }
.xp-preview figcaption { margin-top: 0.375rem; }

/* ---------- about ---------- */
.about-box { display: grid; gap: 0.5rem; text-align: center; justify-items: center; }
.about-box p { margin: 0; }
.about-mark { width: 3rem; height: 3rem; }
.about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem; }

/* ---------- Field (GPS) ---------- */
.fd-gps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; background: var(--surface); border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.fd-gps-status { display: flex; align-items: flex-start; gap: 0.625rem; flex: 1 1 18rem; font-variant-numeric: tabular-nums; }
.fd-pos { border: 1.5px solid var(--ink); background: var(--field); padding: 0.75rem 0.875rem; margin-bottom: 1rem; }
.fd-coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; margin: 0; }
.fd-coords dt { color: var(--ink-2); font-size: 0.875rem; }
.fd-coords dd { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fd-cal { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.fd-cal.is-cal { color: var(--ok); }
.fd-cal.no-cal strong { color: var(--danger); }
.fd-pos .warn { margin: 0.5rem 0 0; }
.fd-tabs { display: flex; gap: 0.25rem; border-bottom: 1.5px solid var(--ink); margin-bottom: 1rem; overflow-x: auto; }
.fd-tabs [role="tab"] { flex: 1 0 auto; min-height: 3rem; padding: 0.5rem 0.875rem; background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -1.5px; color: var(--ink-2); font-weight: 700; font-size: 1rem; cursor: pointer; }
.fd-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--marker); }
.fd-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
.fd-lead { margin: 0; max-width: 46rem; }
.fd-form { max-width: 40rem; }
.fd-pick { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 32rem; }
.fd-pick .field { flex: 1; }
.fd-next-btn { flex: none; }
.fd-settings { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.fd-box { border: 1px solid var(--rule-strong); background: var(--surface); padding: 0.875rem; display: grid; gap: 0.625rem; }
.fd-box h3 { font-size: 1.125rem; margin: 0; }
.fd-box p { margin: 0; }
.fd-box .metrics { margin: 0; }
.fd-q { font-weight: 700; }
.fd-q-rtk, .fd-q-good { color: var(--ok); }
.fd-q-fair { color: var(--ink); }
.fd-q-poor { color: var(--danger); }
.fd-progress { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); }
.fd-progress p { margin: 0; }
.fd-progress .btn { justify-self: start; }
.fd-bar { height: 0.5rem; background: var(--field); border-radius: 1rem; overflow: hidden; }
.fd-bar span { display: block; height: 100%; background: var(--accent); }
.fd-stake { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1rem; border: 1.5px solid var(--ink); background: var(--field); }
.fd-stake.is-near { border-color: var(--ok); box-shadow: inset 0 0 0 3px var(--ok); }
.fd-dial { width: min(11rem, 40vw); flex: none; }
.fd-dial svg { width: 100%; height: auto; display: block; }
.fd-ring { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.fd-n { fill: var(--ink-2); font: 700 13px var(--ui); }
.fd-arrow { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.fd-hub { fill: var(--ink); }
.fd-read { display: grid; gap: 0.25rem; min-width: 0; flex: 1 1 12rem; }
.fd-dist { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fd-move { font-weight: 700; font-size: 1.125rem; }
.fd-foot { margin-top: 1.5rem; max-width: 52rem; }

/* ---------- Units converter ---------- */
.un-cats { margin-bottom: 1rem; }
.un-box { border: 1.5px solid var(--ink); background: var(--field); padding: 1rem; display: grid; gap: 0.5rem; max-width: 44rem; }
.un-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 560px) { .un-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.un-swap-row { display: flex; justify-content: flex-start; }
.un-swap-row .icon-btn { font-size: 1.25rem; color: var(--ink); }
.un-result { display: flex; align-items: center; min-height: var(--tap); padding: 0.375rem 0.625rem; border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-family: var(--serif); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.un-all { margin-top: 1.5rem; max-width: 44rem; }
.un-all h2 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.un-all th { font-weight: 400; color: var(--ink-2); white-space: normal; }
.un-all tr.is-target th, .un-all tr.is-target td { font-weight: 700; color: var(--ink); background: var(--accent-soft); }

/* ---------- search ---------- */
dialog.search-dialog { margin-top: 8vh; }
.search-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.search-input { max-width: none; margin: 0; }
.search-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 28rem); overflow-y: auto; border-top: 1px solid var(--rule); }
.search-list [role="option"] { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t k" "s s"; gap: 0 0.75rem; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
.search-list [role="option"] strong { grid-area: t; }
.search-list [role="option"] small { grid-area: s; color: var(--ink-2); font-size: 0.875rem; }
.search-list .sr-kind { grid-area: k; color: var(--ink-2); font-size: 0.8125rem; }
.search-list [aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.search-list [aria-disabled="true"] strong { color: var(--ink-3); }
.search-none { color: var(--ink-2); cursor: default; }
.search-hint { margin: 0; }
@media (max-width: 600px) { .search-hint { display: none; } }

/* ---------- print: computation sheet only ---------- */
#print-area { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .app, #toast, dialog, .skip-link { display: none !important; }
  #print-area { display: block; }
  :root { --ink: #000; --ink-2: #333; --ink-3: #555; --rule: #999; --field: #fff; --surface: #fff; --warn-bg: #f3f3f3; --accent: #000; }
  .print-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
  .print-head .mark { width: 22px; height: 22px; }
  .print-head div { display: grid; }
  .print-head span { color: #333; font-size: 9pt; }
  .sheet { border: 1px solid #000; }
  .sheet-actions { display: none !important; }
  .sheet-plot { height: 7cm; break-inside: avoid; }
  .sheet-plot .plot-svg { width: 100% !important; height: 100% !important; }
  .table-scroll { overflow: visible; }
  table { font-size: 8pt; }
  th, td { padding: 2px 4px; }
  td.num, thead th { white-space: nowrap; }
  tr { break-inside: avoid; }
  .hl-value { font-size: 18pt; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* =====================================================================================
   0.7 design layer: cards, buttons, colour and the online map.
   Lessons taken from leading field apps: a map-first workspace with floating map controls
   (Trimble Access, ArcGIS Field Maps), colour-coded GPS quality and a bull's-eye that turns
   green on the mark (Emlid Flow), tool tiles with coloured icons (Leica Captivate), and one
   obvious main action per screen.
   ===================================================================================== */
body { background: var(--bg); }
h1 { letter-spacing: -0.015em; }

/* Buttons: primary (copper, filled), secondary (white, outlined), quiet (text). */
.btn {
  border-radius: var(--radius); border: 1px solid var(--primary-deep); background: var(--primary); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(19, 41, 75, 0.18);
  letter-spacing: 0.01em; transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15); }
.btn-line { background: var(--field); color: var(--ink); border-color: var(--rule-strong); box-shadow: var(--shadow-1); }
.btn-line:hover { background: var(--field); border-color: var(--ink); color: var(--ink); }
.btn-line svg { color: var(--primary-ink); }
.btn-quiet { background: transparent; color: var(--ink-2); border-color: transparent; box-shadow: none; }
.btn-quiet:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border-color: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--on-status); }
.btn-ok:hover { background: color-mix(in srgb, var(--ok) 85%, #000); border-color: transparent; }
.icon-btn { border-radius: var(--radius); }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.icon-btn-line { border: 1px solid var(--rule-strong); background: var(--field); color: var(--ink); box-shadow: var(--shadow-1); }
.icon-btn-line[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.icon-btn[aria-pressed="false"] { opacity: 1; }
.icon-btn-line[aria-pressed="false"] { color: var(--ink-3); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* Header and rail */
.topbar { background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%); box-shadow: inset 0 -3px 0 var(--primary); padding-bottom: calc(0.5rem + 3px); }
.topbar-search { border-radius: 999px; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); }
.rail { background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%); box-shadow: inset -3px 0 0 var(--primary); }
.rail-nav a { border-left: 0; border-radius: var(--radius); gap: 0.875rem; }
.rail-nav a.active { background: rgba(255, 255, 255, 0.12); box-shadow: inset 3px 0 0 var(--rail-hi); }
.rail-nav a.active svg { color: var(--rail-hi); }
.project-switch { border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.07); }
.rail-search, .rail .btn-ghost-night { border-radius: var(--radius); }
.rail .btn-ghost-night { box-shadow: none; }

/* Menu bar */
.menubar-row { background: color-mix(in srgb, var(--field) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom-color: var(--rule); box-shadow: 0 1px 0 rgba(19, 41, 75, 0.04); }
.mb-top { border-radius: 8px; margin: 0; min-height: 2.75rem; }
.mb-top:hover, .mb-top[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary-ink); }
.mb-menu { border-radius: 12px; border-color: var(--rule); box-shadow: var(--shadow-3); padding: 0.375rem; }
.mb-menu [role^="menuitem"] { border-radius: 8px; }
.mb-menu [role^="menuitem"]:hover, .mb-menu [role^="menuitem"]:focus-visible, .mb-menu [aria-expanded="true"] { background: var(--primary-soft); color: var(--ink); }
.mb-search { border-radius: 999px; padding: 0 0.875rem; background: var(--bg); }
.mb-search kbd { border-radius: 6px; background: var(--field); }
@media (max-width: 959px) { .menubar-row .mb-menu { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } }

/* Tab bar: pill behind the active icon */
.tabbar { background: color-mix(in srgb, var(--field) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--rule); box-shadow: 0 -6px 18px -12px rgba(19, 41, 75, 0.25); }
.tabbar a { gap: 0.25rem; }
.tabbar a svg { width: 3.25rem; height: 1.875rem; padding: 0.25rem 0.875rem; border-radius: 999px; box-sizing: border-box; transition: background-color 0.15s; }
.tabbar a.active { color: var(--primary-ink); }
.tabbar a.active svg { background: var(--primary-soft); color: var(--primary-ink); }
.tabbar a.active::before { display: none; }

/* Cards */
.welcome, .prog-form, .sheet, .ctl-station, .fd-pos, .fd-stake, .fd-box, .un-box, .home-stats, .ctl-ref, .fd-gps, .start-card, .tile, .more-links a, .alert {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.welcome, .prog-form, .sheet, .ctl-station, .fd-pos, .fd-stake, .un-box, .home-stats { border: 1px solid var(--rule); background: var(--field); }
.prog-form { border-top: 4px solid var(--primary); }
.sheet { overflow: hidden; box-shadow: var(--shadow-2); }
.sheet-tb { background: var(--surface); border-bottom: 1px solid var(--rule); }
.sheet-tb div { border-color: var(--rule); }
.sheet-plot { border-radius: var(--radius); overflow: hidden; }
.sheet-empty { border-radius: var(--radius-lg); background: color-mix(in srgb, var(--field) 60%, transparent); }
.warn, .banner { border-radius: var(--radius); }
.banner { border-left-width: 5px; box-shadow: var(--shadow-1); }
.panel { border-top: 1px solid var(--rule); }
.panel-head h2 { display: flex; align-items: center; gap: 0.5rem; }
.tag { background: var(--surface); }
.tag-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 700; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: 8px; border-width: 1px; border-color: var(--rule-strong); }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.filter { border-radius: 999px; border-width: 1px; padding: 0 1rem; box-shadow: var(--shadow-1); }
.filter:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.form-actions { background: color-mix(in srgb, var(--field) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
thead th { border-bottom: 2px solid var(--ink); }
.register tbody tr:hover, .cat-list a:hover, .record-list summary:hover, .ctl-item:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.chip { border-width: 1px; background: var(--field); box-shadow: var(--shadow-1); }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--rail); border-color: var(--rail); color: #fff; }
dialog { border: 0; border-radius: 20px; box-shadow: var(--shadow-3); background: var(--field); }
dialog.sheet-dialog { border-radius: 0; }
dialog::backdrop { background: rgba(10, 18, 32, 0.5); backdrop-filter: blur(2px); }
#toast { border-radius: 14px; background: var(--rail); color: #fff; }
.menu { border-radius: 12px; border-color: var(--rule); box-shadow: var(--shadow-3); padding: 0.375rem; }
.menu button { border-radius: 8px; }
.menu button:hover, .menu button:focus-visible { background: var(--primary-soft); }
.toggle input:checked + .toggle-track { background: var(--ok); }

/* Coloured icon badges: tiles, start cards */
.tile-ic { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; font-style: normal;
  --tone: var(--t-navy); color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, var(--field)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent); }
.tile-ic svg { width: 1.375rem !important; height: 1.375rem !important; color: inherit !important; margin: 0 !important; }
[data-tone="navy"] .tile-ic { --tone: var(--t-navy); } [data-tone="blue"] .tile-ic { --tone: var(--t-blue); } [data-tone="copper"] .tile-ic { --tone: var(--t-copper); }
[data-tone="green"] .tile-ic { --tone: var(--t-green); } [data-tone="violet"] .tile-ic { --tone: var(--t-violet); } [data-tone="teal"] .tile-ic { --tone: var(--t-teal); }
[data-tone="amber"] .tile-ic { --tone: var(--t-amber); } [data-tone="slate"] .tile-ic { --tone: var(--t-slate); } [data-tone="rose"] .tile-ic { --tone: var(--t-rose); }
.tiles { gap: 0.75rem; }
.tile { border: 1px solid var(--rule); background: var(--field); padding: 0.875rem; gap: 0.875rem; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.tile:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.tile strong { font-family: var(--serif); font-size: 1.0625rem; }
.start-card { border: 1px solid var(--rule); background: var(--field); align-items: center; transition: transform 0.12s, box-shadow 0.12s; }
.start-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.start-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); border-color: var(--primary-deep); color: var(--on-primary); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary) 70%, transparent); }
.start-primary .tile-ic { --tone: #fff; color: #fff; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.start-primary .tile-ic { color: var(--on-primary); }
.start-primary small { color: color-mix(in srgb, var(--on-primary) 88%, transparent); }
.start-brand .mark { color: var(--strong); }
.more-links a { border: 1px solid var(--rule); background: var(--field); }

/* Home figures */
.home-stats { overflow: hidden; }
.home-stats > div { border-color: var(--rule) !important; padding: 0.875rem 1rem; }
.home-stats dt { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; font-weight: 700; }
.home-stats dd { color: var(--strong); }
.home-stats > div:first-child dd { color: var(--primary-ink) !important; }

/* Compute groups as cards */
details.cat-group { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--field); box-shadow: var(--shadow-1); margin-bottom: 0.625rem; padding: 0 0.75rem; }
details.cat-group:last-of-type { border-bottom: 1px solid var(--rule); }
details.cat-group[open] { box-shadow: var(--shadow-2); }
.cat-count { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); font-weight: 700; }
.record-list { border-top: 0; background: var(--field); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.record-list li:last-child { border-bottom: 0; }
.record-list summary, .home-records a { padding-left: 1rem; padding-right: 1rem; }
.rec-body { padding: 0 1rem 1rem; }
.project-list { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--field); overflow: hidden; box-shadow: var(--shadow-1); }
.project-list li { padding: 0 0.5rem 0 1rem; }
.project-list li:last-child { border-bottom: 0; }
.project-list li.current { background: var(--primary-soft); }
.project-list li.current strong::before { background: var(--primary); border-color: var(--primary-deep); }

/* Field: GPS quality colours and a bull's-eye that turns green on the mark */
.fd-gps, .ctl-ref { border: 1px solid var(--rule); border-left: 5px solid var(--gps); background: var(--field); }
.fd-q { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.0625rem 0.625rem; border-radius: 999px; font-size: 0.9375rem; }
.fd-q::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.fd-q-rtk, .fd-q-good { color: var(--ok); background: var(--ok-soft); }
.fd-q-fair { color: var(--t-amber); background: var(--warn-bg); }
.fd-q-poor { color: var(--danger); background: var(--danger-soft); }
.fd-tabs { border-bottom: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 0.25rem; border-radius: 12px; gap: 0.25rem; }
.fd-tabs [role="tab"] { border-bottom: 0; margin-bottom: 0; border-radius: 9px; min-height: 2.75rem; }
.fd-tabs [aria-selected="true"] { background: var(--field); color: var(--ink); box-shadow: var(--shadow-1); }
.fd-progress { border-radius: var(--radius); }
.fd-stake { border: 1px solid var(--rule); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.fd-stake.is-near { border-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 70%, var(--field)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent), var(--shadow-2); }
.fd-ring { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 2; }
.fd-stake.is-near .fd-ring { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 3; }
.fd-arrow { fill: var(--primary); stroke: var(--primary-deep); }
.fd-stake.is-near .fd-arrow { fill: var(--ok); stroke: var(--ok); }
.fd-dist { color: var(--strong); }
.fd-stake.is-near .fd-dist { color: var(--ok); }
.fd-pos { border-left: 5px solid var(--primary); }
.fd-bar { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.fd-bar span { background: linear-gradient(90deg, var(--accent), var(--ok)); border-radius: 999px; }
.guide-arrow { fill: var(--primary); stroke: var(--primary-deep); }
.ctl-dot.live { background: var(--gps); border-color: var(--gps); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gps) 25%, transparent); }
.un-result { border-radius: var(--radius); border-width: 1px; }
.ctl-item.selected { background: var(--primary-soft); box-shadow: inset 4px 0 0 var(--primary); }
.ctl-list { border-top: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--field); overflow: hidden; box-shadow: var(--shadow-1); }
.ctl-list > li:last-child { border-bottom: 0; }
.ctl-item { padding: 0.625rem 0.875rem; }
.search-list [aria-selected="true"] { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }

/* Maps: rounded frames, floating round controls, online background */
.ctl-map, .plot-full { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.ctl-map { overflow: visible; }
.ctl-map canvas { border-radius: var(--radius-lg); }
.ctl-map-tools, .map-fabs { position: absolute; right: 0.625rem; top: 0.625rem; display: grid; gap: 0.375rem; z-index: 3; }
.ctl-map-tools .icon-btn, .map-fabs .icon-btn { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--field); border: 0; color: var(--ink); box-shadow: 0 2px 8px rgba(13, 23, 38, 0.25); }
.ctl-map-tools .icon-btn:hover, .map-fabs .icon-btn:hover { background: var(--surface); }
.ctl-map-tools .icon-btn[aria-pressed="true"], .ctl-map-tools .icon-btn[aria-expanded="true"], .map-fabs .icon-btn[aria-expanded="true"] { background: var(--rail); color: #fff; }
.ctl-map-note { bottom: -1.875rem; }
.plot-full { position: relative; }
.plot-full .plot-svg { position: relative; z-index: 1; }
.bm-layer { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bm-layer img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; transform-origin: 0 0; user-select: none; image-rendering: auto; }
.plot-full.has-imagery .plot-grid line { stroke: rgba(255, 255, 255, 0.45); }
.plot-full.has-imagery .plot-label { stroke: rgba(255, 255, 255, 0.92); fill: #0d1726; }
.plot-full.has-imagery .plot-north path, .plot-full.has-imagery .plot-scale rect { fill: #fff; stroke: #0d1726; stroke-width: 1; }
.plot-full.has-imagery .plot-north text, .plot-full.has-imagery .plot-scale text { fill: #fff; paint-order: stroke; stroke: #0d1726; stroke-width: 3px; }
.plot-full.has-imagery .plot-poly { fill: color-mix(in srgb, var(--marker) 22%, transparent); stroke: #ffd166; stroke-width: 2.5; }
.plot-full.has-imagery .plot-pt { stroke: #0d1726; }
.bm-attrib { position: absolute; right: 0; bottom: 0; z-index: 2; max-width: calc(100% - 9rem); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.125rem 0.5rem;
  padding: 0.125rem 0.5rem; background: rgba(255, 255, 255, 0.82); color: #1f1f1f; font: 400 11px/1.35 Roboto, Arial, sans-serif; border-top-left-radius: 8px; }
.bm-google { font-weight: 700; letter-spacing: 0.01em; }
.bm-copy { overflow-wrap: anywhere; }
.bm-warn { flex-basis: 100%; text-align: right; color: #7a3a00; }
.ctl-map .bm-attrib { border-bottom-right-radius: var(--radius-lg); }
.bm-pop { position: absolute; right: 3.875rem; top: 0.625rem; z-index: 5; width: min(17rem, calc(100% - 4.5rem)); background: var(--field); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-3); padding: 0.75rem; display: grid; gap: 0.5rem; }
.bm-pop-title { margin: 0; font-weight: 700; }
.bm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bm-opt { display: grid; justify-items: center; gap: 0.25rem; padding: 0.375rem; border: 2px solid transparent; border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 0.875rem; text-align: center; cursor: pointer; line-height: 1.2; }
.bm-opt:hover:not(:disabled) { border-color: var(--rule-strong); }
.bm-opt[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.bm-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.bm-swatch { width: 100%; height: 2.5rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.bm-opt-off .bm-swatch { background: repeating-linear-gradient(0deg, transparent 0 9px, #e3ded3 9px 10px), repeating-linear-gradient(90deg, #fbfaf7 0 9px, #e3ded3 9px 10px); }
.bm-opt-roadmap .bm-swatch { background: linear-gradient(115deg, transparent 44%, #fff 44% 50%, transparent 50%), linear-gradient(20deg, transparent 60%, #f6d58e 60% 66%, transparent 66%), #e8eae3; }
.bm-opt-satellite .bm-swatch { background: radial-gradient(circle at 30% 40%, #6c7a3a 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #8a7a52 0 22%, transparent 23%), linear-gradient(135deg, #3f5a2c, #7d6b44); }
.bm-opt-hybrid .bm-swatch { background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.9) 44% 49%, transparent 49%), radial-gradient(circle at 70% 65%, #8a7a52 0 22%, transparent 23%), linear-gradient(135deg, #3f5a2c, #7d6b44); }
.bm-pop-note { margin: 0; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }

/* Plot toolbar on phones: wrap neatly */
@media (max-width: 640px) { .page-head .toolbar { width: 100%; } }

@media print {
  .sheet, .welcome, .prog-form, .ctl-station { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #000 !important; }
  .sheet-tb { background: none; }
}
@media (prefers-reduced-motion: reduce) { .tile:hover, .start-card:hover { transform: none; } }
.btn-gps { background: var(--gps); border-color: color-mix(in srgb, var(--gps) 80%, #000); color: var(--on-status); }
.btn-gps:hover { background: color-mix(in srgb, var(--gps) 85%, #000); border-color: transparent; }

/* Touch feedback (phones and the Android app): a quick press tint, like a native ripple. */
@media (hover: none) {
  .tile:active, .start-card:active, .more-links a:active { transform: scale(0.985); box-shadow: var(--shadow-1); }
  .ctl-item:active, .cat-list a:active, .record-list summary:active, .project-list li > button:first-child:active, .ms-item:active,
  .mb-menu [role^="menuitem"]:active { background: var(--primary-soft); }
  .tabbar a:active svg { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
  .chip:active, .icon-btn:active { transform: scale(0.96); }
}
.need-project { display: flex; align-items: flex-start; gap: 0.875rem; max-width: 56rem; margin: 0 auto 1rem; padding: 0.875rem 1rem; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: var(--radius-lg); }
.need-project .tile-ic { --tone: var(--primary); }
.need-project div { display: grid; gap: 0.125rem; }
.need-project span { color: var(--ink-2); }

/* =====================================================================================
   Phones and tablets (0.7): one navigation, at the top. The screen tabs sit under the header;
   File, Compute, Tools, View and Help open from the Menu button, so nothing appears twice
   and nothing sits at the bottom of the screen.
   ===================================================================================== */
@media (max-width: 959px) {
  :root { --tabbar-h: 0px; }
  .menubar-row { display: none; }
  .topbar { gap: 0.5rem; box-shadow: none; padding-bottom: 0.5rem; }
  .topbar-search { margin-left: auto; }
  .topbar-menu { margin-left: 0; border-radius: 999px; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); padding: 0 0.875rem 0 0.75rem; }
  .tabbar {
    position: relative; left: auto; right: auto; bottom: auto; z-index: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0.25rem 0.25rem 0; gap: 0.125rem;
    background: var(--rail-2); border-top: 0; box-shadow: inset 0 -3px 0 var(--primary); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tabbar a { min-height: 3.5rem; color: var(--rail-ink-2); font-size: 0.8125rem; gap: 0.125rem; border-radius: 12px 12px 0 0; padding-bottom: 3px; }
  .tabbar a svg { width: 1.5rem; height: 1.5rem; padding: 0; background: none !important; }
  .tabbar a.active { color: #fff; background: rgba(255, 255, 255, 0.1); font-weight: 700; }
  .tabbar a.active svg { color: var(--rail-hi); }
  .tabbar a.active::before { display: block; content: ""; position: absolute; left: 18%; right: 18%; top: auto; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--rail-hi); }
  .tabbar a:active { background: rgba(255, 255, 255, 0.14); }
  main { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: calc(8.5rem + env(safe-area-inset-top)); scroll-padding-bottom: 1rem; }
  .form-actions { bottom: env(safe-area-inset-bottom); }
  #toast { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .menubar-row .mb-menu { max-height: none; }
}
@media (max-width: 360px) { .topbar-menu span { display: none; } .topbar-menu { padding: 0 0.625rem; } .tabbar a { font-size: 0.75rem; } }
:root[data-theme="sun"] .tabbar { background: #000; }
@media (max-width: 959px) { html { scroll-padding-bottom: 5.5rem; } }

/* Control overflow menus: readable dark-mode labels and phone-safe placement. */
.menu button { color: var(--ink); font: inherit; white-space: normal; overflow-wrap: anywhere; }
.ctl-actions .menu { width: min(20rem, calc(100vw - 3rem)); min-width: 0; max-height: 60dvh; overflow-y: auto; }
@media (max-width: 959px) {
  .ctl-actions > .menu-wrap { position: static; }
  .ctl-actions { position: relative; }
  .ctl-actions .menu { left: 0; right: auto; top: 100%; max-width: 100%; }
  .ctl-item-main > span:not(.ctl-flags), .ctl-map-note { white-space: normal; overflow-wrap: anywhere; }
}

/* Mobile dropdowns open in the centre, independent of their trigger's position. */
@media (max-width: 959px) {
  .menu, .ctl-actions .menu, .menu-left, .bm-pop {
    position: fixed;
    left: 50%; right: auto; top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(24rem, calc(100vw - 2rem));
    min-width: 0; max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 4rem);
    overflow-x: hidden; overflow-y: auto;
    z-index: 100;
    color: var(--ink); background: var(--field);
  }
  .menu button, .menu-link, .bm-opt {
    width: 100%; min-width: 0; white-space: normal;
    overflow-wrap: anywhere; text-align: left;
  }
}

/* Return controls are shared by every screen, including empty project states. */
.app-return { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.app-return .btn { white-space: normal; min-height: 44px; }
@media print { .app-return { display: none !important; } }

.topbar .mark,.rail-brand .mark { width:3.2rem; height:3.2rem; }.start-brand .mark { width:5rem; height:5rem; }