/* ============================================================================
   shell.css: the prototype's stylesheet, adopted region by region (ADR 0023).

   web/prototype/index.html is the specification for how the application
   looks. Each region that moves over takes the prototype's markup, class
   names and rules, copied here as they are there; the inherited rules for
   that region are deleted from styles.css in the same change. This file
   loads after styles.css, so where the two still overlap, the prototype wins.

   The prototype's global resets (`* { margin: 0 }`, bare buttons, 13 px body
   type) are scoped to the regions that have moved, until every region has:
   applied page-wide now, they would restyle regions still on the old sheet.

   Regions moved so far: the frame, the app bar and the account menu.
   ========================================================================== */

/* ---------- tokens: the prototype's, verbatim ---------- */
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-raised: #172033;
  --border-color: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #7c8ba1;
  --accent-cyan: var(--brand-accent, #06b6d4);  /* the plant's accent, set by entropy_branding.js */
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-yellow: #eab308;
  --accent-red: #ef4444;
  --accent-purple: #a855f7;
  --money: #fbbf24;
  /* Chrome colours that assume a dark ground, as the prototype names them
     (ADR 0043). Data colours (bands, years, materials) are never tokens: a
     reading looks the same in either theme. */
  --text-strong: #fff;
  --on-accent: #042f37;
  --on-warn: #1a1400;
  --dim: #475569;
  --tint-cyan: #a5f3fc;
  --tint-red: #fca5a5;
  --tint-amber: #fde68a;
  --tint-pink: #f0abfc;
  --tint-violet: #c4b5fd;
  --tint-green: #86efac;
  --tint-purple: #d8b4fe;
  --avatar-bg: linear-gradient(135deg,#0e7490,#334155);
  --map-ground: #0b1222;
  --map-sheet: #111b30;
  --map-label: #cbd5e1;
  --map-title: #e2e8f0;
  --map-rule: #475569;
  --chart-grid: #273449;
  --stage-hi: #16213a;
  --stage-lo: #070b16;
  --stage-grid: #1e293b;
  --stage-grid2: #172033;
  /* r,g,b triples, for the translucent versions of the grounds above. */
  --ground-rgb: 15,23,42;
  --raise-rgb: 30,41,59;
  --deep-rgb: 2,6,23;
  --line-rgb: 51,65,85;
  --hi-rgb: 255,255,255;
  --map-ground-rgb: 11,18,34;
  --shadow-k: 1;
  /* The application's own, which the prototype has no use for. */
  --tint-hot: #f87171;
  --tint-orange: #f59e0b;
  --tint-red-soft: #fecaca;
  --tint-emerald: #6ee7b7;
  --tint-blue: #60a5fa;
  --map-canvas: #0b0f19;
  --note-rgb: 11,15,25;
  --note-bad-rgb: 30,10,12;
  --bg-card: #0f172a;
  --bg-input: #1e293b;
  --border-focus: #3b82f6;
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;

  /* The shell's whole space budget. Nothing else may claim fixed chrome. */
  --appbar-h: 44px;
  --status-h: 26px;
  --nav-w: 272px;
  --dock-w: 360px;
  --strip-w: 46px;

  /* The frame is flush: no padding round the page, no gaps between regions,
     hairline borders between them. The old floating cards came from these. */
  --shell-pad: 0px;
  --shell-gap: 0px;
}

/* Light: each person's choice, under Settings, For you (ADR 0043), set by
   entropy_theme.js. Dark is the default. The prototype's light values; only
   chrome changes, never a data colour. A plant's accent arrives as two
   variables from entropy_branding.js, its own colour and a version darkened
   to read on white, and each theme takes its one. */
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-raised: #f8fafc;
  --border-color: #cbd5e1;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-cyan: var(--brand-accent-light, #0891b2);  /* its version for a light ground */
  --accent-blue: #2563eb;
  --accent-green: #059669;
  --accent-yellow: #ca8a04;
  --accent-red: #dc2626;
  --accent-purple: #9333ea;
  --money: #b45309;
  --text-strong: #020617;
  --on-accent: #ffffff;
  --on-warn: #1a1400;
  --dim: #94a3b8;
  --tint-cyan: #0e7490;
  --tint-red: #b91c1c;
  --tint-amber: #92400e;
  --tint-pink: #a21caf;
  --tint-violet: #6d28d9;
  --tint-green: #15803d;
  --tint-purple: #7e22ce;
  --avatar-bg: linear-gradient(135deg,#67e8f9,#cbd5e1);
  --map-ground: #e2e8f0;
  --map-sheet: #cbd5e1;
  --map-label: #334155;
  --map-title: #0f172a;
  --map-rule: #94a3b8;
  --chart-grid: #e2e8f0;
  --stage-hi: #f8fafc;
  --stage-lo: #cbd5e1;
  --stage-grid: #94a3b8;
  --stage-grid2: #cbd5e1;
  --ground-rgb: 255,255,255;
  --raise-rgb: 241,245,249;
  --deep-rgb: 248,250,252;
  --line-rgb: 203,213,225;
  --hi-rgb: 15,23,42;
  --map-ground-rgb: 226,232,240;
  --shadow-k: .35;
  --tint-hot: #dc2626;
  --tint-orange: #b45309;
  --tint-red-soft: #991b1b;
  --tint-emerald: #047857;
  --tint-blue: #1d4ed8;
  --map-canvas: #e2e8f0;
  --note-rgb: 255,255,255;
  --note-bad-rgb: 254,242,242;
  --bg-card: #ffffff;
  --bg-input: #f8fafc;
  --border-focus: #2563eb;
  color-scheme: light;
}
/* The sign-in gate is dark whatever the theme (ADR 0029 and 0043): its own
   palette reads these six tokens, so they keep their dark values on it. */
:root[data-theme="light"] #entropy-login-overlay {
  --bg-secondary: #1e293b;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --accent-cyan: #06b6d4;
  --accent-red: #ef4444;
  --hi-rgb: 255,255,255;
  color-scheme: dark;
}

/* ---------- scoped resets, for the regions that have moved ---------- */
:where(.appbar, .appbar *, .profile-pop, .profile-pop *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.appbar, .profile-pop) { font: 13px/1.4 var(--font-main); color: var(--text-primary); }
:where(.appbar button, .appbar select, .appbar input, .profile-pop button) { font: inherit; color: inherit; }
:where(.appbar button, .profile-pop button) { cursor: pointer; background: none; border: 0; }
.appbar [data-lucide], .appbar svg.i { width: 18px; height: 18px; stroke-width: 1.8; flex: none; }
.appbar .search > [data-lucide], .appbar .search > svg { width: 14px; height: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- app bar ---------- */
/* Three columns with equal sides, so the search sits on the bar's centre
   whatever the plant is called. A flex row with `margin: auto` centred it in
   the space left over instead, which moved it right by half the difference
   between the two sides: 128px with a plant name beside the brand. */
.appbar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 460px) minmax(0, 1fr);
  align-items: center; gap: 12px; padding: 0 10px 0 8px; min-width: 0;
  height: var(--appbar-h);
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);
  grid-area: appbar;
}
.bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--accent-cyan);
  display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: 13px; }
/* The plant's logo, when one is uploaded (ADR 0027): it takes the mark's
   place at the mark's height, as wide as it needs up to a limit. */
.brand-mark.has-logo { width: auto; max-width: 96px; background: none; border-radius: 0; }
.brand-mark.has-logo img { display: block; height: 24px; width: auto; max-width: 96px; object-fit: contain; }
.brand small { color: var(--text-muted); font-weight: 500; }
.plant { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.search { position: relative; min-width: 0; }
.search input {
  width: 100%; height: 30px; padding: 0 64px 0 32px; border-radius: 6px;
  background: var(--bg-primary); border: 1px solid var(--border-color); outline: none;
}
.search input:focus { border-color: var(--accent-cyan); }
/* type="search" draws its own clear button in Chromium; the prototype's plain
   input has none, and Esc already clears. */
.search input::-webkit-search-cancel-button { display: none; }
.search > [data-lucide], .search > svg { position: absolute; left: 9px; top: 8px; color: var(--text-muted); }
.search kbd { position: absolute; right: 8px; top: 6px; font: 11px var(--font-main); color: var(--text-muted);
  border: 1px solid var(--border-color); border-radius: 4px; padding: 0 5px; }
.search-results {
  position: absolute; top: 34px; left: 0; right: 0; z-index: 30; background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,calc(.45 * var(--shadow-k)));
  max-height: 380px; overflow: auto; padding: 4px;
}
.search-results button { display: flex; width: 100%; gap: 8px; align-items: center; text-align: left;
  padding: 6px 8px; border-radius: 6px; }
.search-results button.on, .search-results button:hover { background: rgba(6,182,212,.14); }
.search-results .kind { margin-left: auto; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.search-hint { padding: 6px 8px; color: var(--text-muted); font-size: 12px; }
.bar-icons { display: flex; gap: 2px; align-items: center; justify-self: end; }
.icon-btn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--text-secondary); flex: none; position: relative; }
.icon-btn:hover { background: rgba(148,163,184,.12); color: var(--text-primary); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--avatar-bg); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text-primary); border: 1px solid rgba(var(--hi-rgb),.15); text-transform: uppercase; }
.avatar.big { width: 44px; height: 44px; font-size: 15px; flex: none; }

/* Where the readings come from, relocated from the old "Offline Mode" pill
   (CLAUDE.md rule 7): a dot on Refresh, its words in the tooltip. The
   prototype has no such pill; this keeps the fact at the prototype's size. */
.conn-dot { position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--bg-secondary); background: var(--dim); pointer-events: none; }
.conn-dot.is-online { background: var(--accent-green); }
.conn-dot.is-local { background: var(--accent-yellow); }

/* ---------- account menu ---------- */
.menu { position: relative; }
.menu[hidden] { display: none; }
.profile-pop { position: absolute; right: 0; top: 40px; z-index: 40; width: 340px; max-height: calc(100vh - 60px); overflow: auto;
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,calc(.5 * var(--shadow-k))); }
.profile-pop.hidden { display: none; }
.profile-head { display: flex; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border-color); }
.profile-head b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.profile-head small { color: var(--text-secondary); }
.profile-sec { padding: 12px 14px; border-bottom: 1px solid var(--border-color); }
.profile-sec h4 { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.profile-sec .kv dd { color: var(--text-primary); }
.plugin { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.plugin i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); display: block; flex: none; }
.plugin.off { color: var(--text-muted); }
.plugin.off i { background: var(--dim); }
.tier { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(6,182,212,.12); color: var(--tint-cyan); border: 1px solid rgba(6,182,212,.35); }
.meter { height: 6px; border-radius: 3px; background: var(--bg-primary); overflow: hidden; margin-top: 4px; }
.meter > i { display: block; height: 100%; background: var(--accent-cyan); }
.profile-actions { display: grid; gap: 6px; padding: 12px 14px; }

/* ---------- shared components, the prototype's ---------- */
.note { font-size: 12px; color: var(--text-muted); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
.kv dt { color: var(--text-muted); }
.kv dd { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pill { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
.btn { min-height: 30px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.2; }
.profile-pop .btn { border: 1px solid var(--border-color); background: var(--bg-primary); }
.btn:hover { border-color: var(--text-secondary); }
.btn.primary { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--on-accent); font-weight: 600; }
.btn.danger, .profile-pop .btn.danger { color: var(--tint-red); border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ======================= left rail (ADR 0023, step 2a) =======================
   The prototype's rail: flat sections that fold, divided by hairlines, on the
   secondary ground. The legacy .nav-rail class stays on the element only
   because the shell grid places it by that name. */
:where(.nav, .nav *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.nav) { font: 13px/1.4 var(--font-main); color: var(--text-primary); }
:where(.nav button, .nav select, .nav input) { font: inherit; color: inherit; }
:where(.nav button) { cursor: pointer; background: none; border: 0; }
.nav svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav svg.i.s { width: 14px; height: 14px; }

.nav.nav-rail {
  /* Named, not left to auto-placement: the desktop grid happened to put it
     right because it comes first, and the stacked one put it in a column of
     its own. */
  grid-area: nav;
  display: block; gap: 0; padding: 0;
  overflow: hidden auto; min-width: 0; min-height: 0;
  background: var(--bg-secondary); border-right: 1px solid var(--border-color);
  scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
}
.nav-inner { width: 100%; padding-bottom: 16px; }
.sec { border-bottom: 1px solid var(--border-color); }
.sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 9px 12px 7px; font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-secondary); user-select: none;
}
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary .chev { margin-left: auto; transition: transform .15s; }
.sec[open] > summary .chev { transform: rotate(90deg); }
.sec-body { padding: 0 12px 12px; }
.nav select, .nav .input {
  min-height: 28px; padding: 0 6px; border-radius: 6px; background: var(--bg-primary);
  border: 1px solid var(--border-color); outline: none; min-width: 0;
}
.nav select:focus, .nav .input:focus { border-color: var(--accent-cyan); }
.range { display: flex; align-items: center; gap: 6px; min-width: 0; }
.range > select { flex: 1; }
.seg { display: flex; flex-wrap: wrap; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 7px; padding: 2px; gap: 2px; }
.seg[hidden] { display: none; }
.seg button { flex: 1 1 auto; min-height: 26px; padding: 2px 8px; border-radius: 5px; color: var(--text-secondary); font-size: 12px; line-height: 1.2; }
/* .is-on is the application's name for the prototype's .on. */
.seg button.on, .seg button.is-on { background: var(--accent-cyan); color: var(--on-accent); font-weight: 600; }
.seg button:not(.on):not(.is-on):hover { color: var(--text-primary); }
.seg.small button { min-height: 22px; font-size: 11px; padding: 1px 7px; }

.tree { margin: 0 -6px; }
.tree-asm { display: flex; align-items: center; gap: 4px; width: 100%; padding: 5px 6px; border-radius: 6px; font-weight: 600; text-align: left; }
.tree-asm .twist { color: var(--text-muted); transition: transform .15s; }
.tree-asm.open .twist { transform: rotate(90deg); }
.tree-asm .tag { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.tree-asm:hover, .tree-surf:hover { background: rgba(148,163,184,.1); }
/* .is-active is what syncStage marks; the prototype calls it .on. */
.tree-asm.on, .tree-surf.on, .tree-asm.is-active, .tree-surf.is-active { background: rgba(6,182,212,.16); color: var(--tint-cyan); }
.tree-kids { padding-left: 16px; }
.tree-surf { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px; border-radius: 6px; text-align: left; color: var(--text-secondary); }
.tree-surf .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tree-surf .min { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* The wall tabs and panel pickers stay in the page for the tree to drive. */
.nav .wall-tabs-scroller { display: none !important; }

.findings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kpi { text-align: left; padding: 7px 9px; border-radius: 7px; background: var(--bg-primary); border: 1px solid var(--border-color); min-width: 0; }
.kpi:hover { border-color: var(--accent-cyan); }
/* .active-card is the application's name for the prototype's .on. */
.kpi.on, .kpi.active-card { border-color: var(--accent-cyan); box-shadow: inset 0 0 0 1px var(--accent-cyan); }
.kpi b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11px; color: var(--text-muted); }

/* ======================= rail: View (ADR 0023, step 2b) ======================= */
.check { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; color: var(--text-secondary); }
.check input { accent-color: var(--accent-cyan); flex: none; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.sub-controls { margin: 4px 0 6px 22px; padding: 6px 8px; border-left: 2px solid var(--border-color); display: grid; gap: 6px; }
.linkish { color: var(--accent-cyan); font-size: 12px; }
.linkish:hover { text-decoration: underline; }
.nav .input.num-in { width: 64px; text-align: right; }
.slider-row { display: flex; align-items: center; gap: 8px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--accent-cyan); min-width: 0; }
.slider-row b { min-width: 64px; text-align: right; font-size: 12px; color: var(--accent-cyan); }
/* The coating world's View is the prototype's: a note and Photos. */
body:not(.entropy-world-coating) .coat-only { display: none !important; }
body.entropy-world-coating .utg-only { display: none !important; }

/* ============ rail: Legend, the colour editor (ADR 0023, step 2c) ============ */
.grad { user-select: none; }
.grad-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.grad-title b { color: var(--text-primary); font-weight: 600; }
.grad-hist { display: flex; align-items: flex-end; gap: 1px; height: 18px; margin: 4px 7px -18px; opacity: .55; }
.grad-hist i { flex: 1; display: block; background: var(--text-secondary); }
.grad-track { position: relative; height: 16px; border-radius: 4px; margin: 20px 7px 2px; border: 1px solid rgba(var(--hi-rgb),.12); }
.grad-stop { position: absolute; top: -20px; width: 14px; margin-left: -7px; height: 38px; cursor: ew-resize; touch-action: none; }
.grad-stop::before { content: ""; position: absolute; left: 6px; top: 16px; width: 2px; height: 20px; background: #f8fafc; box-shadow: 0 0 0 1px rgba(15,23,42,.8); }
.grad-stop::before, .grad-stop::after { box-sizing: border-box; }
.grad-stop::after { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 50% 50%;
  background: var(--c, #fff); border: 2px solid #f8fafc; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.grad-stop.floor::after { border-radius: 2px; transform: none; }
.grad-stop:focus { outline: none; }
.grad-stop:focus::after, .grad-stop.drag::after { box-shadow: 0 0 0 3px rgba(6,182,212,.6); }
.grad-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin: 0 1px; font-variant-numeric: tabular-nums; }
.grad-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; margin-top: 8px; }
.grad-val { display: grid; gap: 2px; font-size: 11px; color: var(--text-secondary); min-width: 0; }
.grad-val span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.grad-val i { width: 9px; height: 9px; border-radius: 2px; flex: none; display: block; }
.nav .grad-val input { width: 100%; min-height: 24px; padding: 0 4px; font-size: 12px; text-align: right; }
.grad-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.nav .btn.small { min-height: 24px; padding: 2px 8px; font-size: 12px; }
.nav .btn { border: 1px solid var(--border-color); background: var(--bg-primary); }
.nav .btn.primary { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--on-accent); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.chip { display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px 2px 6px; border-radius: 999px;
  border: 1px solid var(--border-color); color: var(--text-secondary); }
.chip i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.chip.off { opacity: .45; }
/* A chip picked isolates its markers; the others read as off meanwhile. */
.chips.filtering .chip:not(.active-filter) { opacity: .45; }
.chip.active-filter { border-color: var(--accent-cyan); color: var(--text-primary); }

/* ===================== stage (ADR 0023, region 3) ===================== */
:where(.stage-top, .stage-top *, .status, .status *, .zoom, .zoom *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.stage-top, .status, .zoom) { font: 13px/1.4 var(--font-main); color: var(--text-primary); }
:where(.stage-top button, .stage-top select, .status button, .zoom button) { font: inherit; color: inherit; cursor: pointer; }
:where(.stage-top button, .status button, .zoom button) { background: none; border: 0; }
.stage svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

.viewport-section.stage { display: grid; grid-template-rows: 38px minmax(0, 1fr) var(--status-h); min-width: 0; min-height: 0;
  padding: 0; gap: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg-primary); }
.stage-top { display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--border-color); min-width: 0; }
.crumb { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; min-width: 0; }
.crumb b { color: var(--text-primary); font-weight: 600; }
.crumb .sep { color: var(--text-muted); }
.crumb .sep[hidden], .crumb span:empty { display: none; }
.stage-top .grow { flex: 1; }
.rail-toggle { color: var(--text-secondary); width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.rail-toggle:hover { background: rgba(148,163,184,.12); }
.stage-top select { min-height: 28px; padding: 0 6px; border-radius: 6px; background: var(--bg-primary);
  border: 1px solid var(--border-color); outline: none; min-width: 0; color: var(--text-primary); }
.stage-top select:focus { border-color: var(--accent-cyan); }
.stage-top .seg[hidden] { display: none; }
/* .active is the face buttons' name for the prototype's .on. */
.seg button.active { background: var(--accent-cyan); color: var(--on-accent); font-weight: 600; }

.stage .canvas-wrapper { position: relative; min-height: 0; overflow: hidden; background: var(--map-ground); display: block; }
.zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px; z-index: 6;
  background: rgba(var(--raise-rgb),.92); border: 1px solid var(--border-color); border-radius: 8px; padding: 3px; }
.zoom button { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--text-secondary); }
.zoom button:hover { background: rgba(148,163,184,.14); color: var(--text-primary); }

.status {
  display: flex; align-items: center; gap: 14px; padding: 0 10px; font-size: 12px; color: var(--text-secondary);
  border-top: 1px solid var(--border-color); background: var(--bg-secondary); white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.status .cursor { flex: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status b { color: var(--text-primary); font-weight: 600; }
.status .status-zoom { font-size: 12px; color: var(--text-secondary); }

/* Focus: the map takes the window; both rails and the dock go. */
@media (min-width: 1000px) {
  .dashboard-main.focus { grid-template-columns: 0 minmax(0, 1fr) 0 0 !important; }
}
.dashboard-main.focus .nav-rail, .dashboard-main.focus #rail-region,
.dashboard-main.focus .tool-strip { display: none !important; }
/* The readings figure keeps the status bar's type, not the old card value's. */
.status b.stat-value { font-size: 12px; font-weight: 600; line-height: inherit; margin: 0; }

/* ===================== tool strip (ADR 0023, region 4) ===================== */
:where(.strip, .strip *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.strip button) { font: 13px/1.4 var(--font-main); color: inherit; background: none; border: 0; cursor: pointer; }
.strip svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tool-strip.strip { grid-area: strip; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 5px;
  background: var(--bg-secondary); border-left: 1px solid var(--border-color); overflow: hidden auto; scrollbar-width: none;
  border-radius: 0; box-shadow: none; }
.strip .gap { flex: 1; min-height: 8px; }
.strip hr { width: 24px; align-self: center; border: 0; border-top: 1px solid var(--border-color); margin: 4px 0; }
.strip-wide .strip hr { width: 100%; }
.tool { position: relative; min-height: 36px; border-radius: 8px; display: flex; align-items: center; gap: 10px; padding: 0 9px; color: var(--text-secondary); text-align: left; flex: none; }
.tool span { display: none; font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
.strip-wide .tool span { display: block; }
.tool:hover { background: rgba(148,163,184,.12); color: var(--text-primary); }
/* .is-active is what the dock marks; the prototype calls it .on. */
.tool.on, .tool.is-active { background: rgba(6,182,212,.18); color: var(--accent-cyan); }
.tool.on::before, .tool.is-active::before { content: ""; position: absolute; left: -5px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent-cyan); }
.tool.expander { color: var(--text-muted); }
.tool.expander .when-wide { display: none; }
.strip-wide .tool.expander .when-wide { display: block; }
.strip-wide .tool.expander .when-narrow { display: none; }
/* Below 1000px the shell stacks; the strip becomes a row of tools. */
@media (max-width: 999px) {
  .tool-strip.strip { flex-direction: row; flex-wrap: wrap; overflow: visible; padding: 4px 0; }
  .strip .gap, .strip hr { display: none; }
}
/* Settings keeps a real gear (prototype QA, 2026-09-27: the prototype's
   read as a sun); drawn at the strip's icon size. */
.strip svg.lucide { width: 18px; height: 18px; stroke-width: 1.8; flex: none; }
.tip { position: fixed; z-index: 60; pointer-events: none; background: rgb(var(--deep-rgb)); border: 1px solid var(--border-color);
  padding: 4px 8px; border-radius: 6px; font: 12px/1.4 var(--font-main); color: var(--text-primary); white-space: nowrap; }

/* ======================= dock frame (ADR 0023, region 5) =======================
   The prototype's dock: a fixed 360 px column, flush, one border on its left,
   the open tool filling it. No divider and no collapse handle: the dock closes
   when its tool does. */
@media (min-width: 1000px) {
  .dashboard-main:not(.dock-empty):not(.focus) {
    grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--dock-w) var(--strip-w);
  }
}
#rail-region.sidebar-section { gap: 0; padding: 0; background: var(--bg-secondary); border-left: 1px solid var(--border-color); overflow: hidden; }
#rail-region > .sidebar-panel, #rail-region > .dock-panel,
#rail-region .card { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0; }
.dk-head { border-bottom: 1px solid var(--border-color); }
/* The prototype's panel kit, where the dk-* kit still differed (measured). */
#rail-region { font: 13px/1.4 var(--font-main); color: var(--text-primary); }
#rail-region .dk-head, #rail-region .panel-header.dk-head { background: transparent; min-height: 53px; }
.dk-x { width: 32px; height: 32px; border-radius: 6px; color: var(--text-secondary); font-size: 20px; }
.dk-x:hover { background: rgba(148,163,184,.12); color: var(--text-primary); }
.dk-body p.dk-note { color: var(--text-secondary); }

/* ================= dock panel kit (ADR 0023, regions 5b onward) =================
   The prototype's .panel and everything inside it, copied as it is there.
   Scoped to the dock (#rail-region), because .panel, .field, .btn and .empty
   are names the inherited sheet still uses elsewhere. A tool moves over by
   taking these class names; the dk-* kit it leaves is deleted with it. */
:where(#rail-region .panel, #rail-region .panel *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(#rail-region .panel button, #rail-region .panel select, #rail-region .panel input, #rail-region .panel textarea) { font: inherit; color: inherit; }
:where(#rail-region .panel button) { cursor: pointer; background: none; border: 0; }
#rail-region .panel svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
#rail-region .panel svg.i.s, #rail-region .panel .btn svg.lucide { width: 14px; height: 14px; }
/* var(--dock-w), as the prototype's: 1 px wider than the column's content
   box, so its right edge tucks under the strip's border exactly as there. */
#rail-region > .panel { width: var(--dock-w); height: 100%; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#rail-region .panel-head .icon-btn svg { width: 14px; height: 14px; }
#rail-region > .panel.hidden, #rail-region .panel .hidden { display: none !important; }
#rail-region .panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
#rail-region .panel-head h2 { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
/* display: block, as the prototype's: the inherited .panel-body is a flex
   column, which shrinks an overflow-hidden child (the budget) to its border. */
#rail-region .panel-body { display: block; flex: 1 1 0%; overflow: auto; padding: 12px; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; min-height: 0; }
#rail-region .panel-actions { padding: 10px 12px; border-top: 1px solid var(--border-color); display: grid; gap: 6px; }
#rail-region .panel-actions .row { display: flex; gap: 6px; flex-wrap: wrap; }
#rail-region .panel-actions .row > * { flex: 1 1 auto; }
#rail-region .panel-actions .row > [hidden] { display: none; }
/* A tool with more than one state (Cell details: empty, or a cell picked)
   keeps the prototype's body and actions inside each state. */
#rail-region .panel .panel-state, #rail-region .panel > form { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
#rail-region .panel h3 { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; }
#rail-region .panel h3:first-child { margin-top: 0; }
#rail-region .panel h3 .stepno { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(6,182,212,.18); color: var(--accent-cyan); font-size: 11px; letter-spacing: 0; }
#rail-region .panel h3 .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
#rail-region .panel p { color: var(--text-secondary); margin-bottom: 8px; }
/* :where() keeps .note below `.panel p` as it is in the prototype, where a
   p.note takes the paragraph's colour. */
#rail-region .panel :where(.note) { font-size: 12px; color: var(--text-muted); }
#rail-region .panel .field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 6px; }
#rail-region .panel .field > label { color: var(--text-muted); font-size: 12px; }
#rail-region .panel select, #rail-region .panel .input {
  min-height: 28px; padding: 0 6px; border-radius: 6px; background: var(--bg-primary);
  border: 1px solid var(--border-color); outline: none; min-width: 0; color: var(--text-primary); }
#rail-region .panel select:focus, #rail-region .panel .input:focus { border-color: var(--accent-cyan); }
#rail-region .panel .btn { min-height: 30px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.2; }
#rail-region .panel .btn:hover { border-color: var(--text-secondary); }
#rail-region .panel .btn.primary { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--on-accent); font-weight: 600; }
#rail-region .panel .btn.warn { background: var(--accent-yellow); border-color: var(--accent-yellow); color: var(--on-warn); font-weight: 600; }
#rail-region .panel .btn.danger { color: var(--tint-red); border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
#rail-region .panel .btn.small { min-height: 24px; padding: 2px 8px; font-size: 12px; }
#rail-region .panel .btn:disabled { opacity: .45; cursor: not-allowed; }
#rail-region .panel .readout { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; }
#rail-region .panel .readout .big { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
#rail-region .panel .readout .big small { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
#rail-region .panel .stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#rail-region .panel .stat3 > div { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 7px; padding: 6px 8px; min-width: 0; }
#rail-region .panel .stat3 b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
#rail-region .panel .stat3 span { font-size: 11px; color: var(--text-muted); }
#rail-region .panel table.t { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
#rail-region .panel table.t th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 4px; border-bottom: 1px solid var(--border-color); }
#rail-region .panel table.t td { padding: 4px; border-bottom: 1px solid rgba(var(--line-rgb),.5); vertical-align: middle; }
#rail-region .panel table.t td.n, #rail-region .panel table.t th.n { text-align: right; }
#rail-region .panel table.t tr.click { cursor: pointer; }
#rail-region .panel table.t tr.click:hover td { background: rgba(6,182,212,.08); }
#rail-region .panel table.t tr.hl td { background: rgba(234,179,8,.10); }
#rail-region .panel .pill { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
#rail-region .panel .drop { border: 1.5px dashed var(--border-color); border-radius: 8px; padding: 22px 12px; text-align: center; color: var(--text-secondary); }
#rail-region .panel .empty { color: var(--text-muted); text-align: center; padding: 18px 8px; }
#rail-region .panel .callout { border-radius: 8px; padding: 8px 10px; font-size: 12px; background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.35); color: var(--tint-amber); margin-bottom: 8px; }
#rail-region .panel .callout.info { background: rgba(6,182,212,.08); border-color: rgba(6,182,212,.35); color: var(--tint-cyan); }
#rail-region .panel .swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; border: 1px solid rgba(var(--hi-rgb),.25); vertical-align: -2px; }
#rail-region .panel .xbtn { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; color: var(--text-muted); }
#rail-region .panel .xbtn:hover { background: rgba(239,68,68,.15); color: var(--tint-red); }

/* ---------- Cell details (5b): what the app adds to the prototype's panel ---------- */
/* The outage type, notes and photo link sit on a muted line under their row
   (rule 7), so the row itself keeps the prototype's 26 px. */
#rail-region .panel table.t tr.has-sub td { border-bottom: 0; }
#rail-region .panel table.t tr.sub td { padding: 0 4px 4px; font-size: 11px; overflow-wrap: anywhere; }
#rail-region .panel table.t a { color: var(--accent-cyan); text-decoration: none; }
/* The forecast views' projection, kept from the old panel. */
.forecast-details-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 4px; }
.forecast-details-row b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.forecast-details-row .note { display: block; }
.forecast-details-arrow { color: var(--text-muted); }
.forecast-details-rate { margin-left: auto; text-align: right; }
/* Where each coating value came from (docs/coating-world.md §4). */
.coat-origin { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.coat-origin summary { cursor: pointer; }
#rail-region .panel .coat-origin ul { margin: 4px 0 0; padding-left: 16px; line-height: 1.5; }
.coat-origin b { color: var(--text-secondary); font-weight: 600; }

/* ---------- Add reading (5d): what the app adds to the prototype's form ---------- */
/* A field with a help line under its input: the label sits level with the
   input, not centred against input and help together. */
#rail-region .panel .field.has-help { align-items: start; }
#rail-region .panel .field.has-help > label { padding-top: 6px; }
#rail-region .panel .field > div { min-width: 0; }
#rail-region .panel .field .input, #rail-region .panel .field > select { width: 100%; }
#rail-region .panel .range > .input, #rail-region .panel .range > select { flex: 1 1 0; width: 100%; min-width: 0; }
#rail-region .panel .input-help { display: block; font-size: 11px; margin-top: 2px; }
#rail-region .panel .input-help:empty { display: none; }
#rail-region .panel h3 .btn { margin-left: 8px; letter-spacing: 0; text-transform: none; font-weight: 400; }
#rail-region .panel .xbtn svg { width: 14px; height: 14px; }
#btn-add-year-record { margin-top: 8px; }
/* The queue: its rows, or "Nothing staged", never both; Discard only with rows. */
#adhoc-queue-block:not(.hidden) ~ .queue-empty { display: none; }
#panel-form:has(#adhoc-queue-block.hidden) #btn-queue-clear { display: none; }
#adhoc-queue-block .check { margin-top: 6px; font-size: 12px; }
/* Why a save was refused, over the actions. */
#form-error-msg, #coat-form-error { align-items: flex-start; gap: 6px; color: var(--accent-red); font-size: 12px; background: rgba(239, 68, 68, 0.1); padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.4); line-height: 1.4; }

/* ---------- Erosion and forecast (5f): the prototype's, where the kit lacks it ---------- */
#rail-region .panel .input.num-in { width: 64px; flex: 0 1 auto; text-align: right; }
#rail-region .panel .check { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; color: var(--text-secondary); }
#rail-region .panel .check input { accent-color: var(--accent-cyan); flex: none; }
#rail-region .panel .check.model { align-items: flex-start; padding: 4px 0; }
#rail-region .panel .check.model input { margin-top: 3px; }
#rail-region .panel .check.model b { color: var(--text-primary); font-weight: 500; }
#rail-region .panel .seg { margin: 0; }
#rail-region .panel table.t.model-cmp td:first-child { white-space: nowrap; }

/* ---------- Area and spray (5e): the prototype's budget, live readout and pen ---------- */
#rail-region .panel .swatch.hatch { background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255,255,255,.75) 2px 4px) !important; }
/* Budget: every number white, money in gold, nothing else competes. */
#rail-region .panel .budget { border: 1px solid rgba(251,191,36,.35); border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(251,191,36,.06), rgba(var(--ground-rgb),.2)); }
#rail-region .panel .budget table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
#rail-region .panel .budget th { text-align: right; font-weight: 500; color: var(--text-muted); padding: 5px 8px; border-top: 1px solid rgba(251,191,36,.2); }
#rail-region .panel .budget th:first-child, #rail-region .panel .budget td:first-child { text-align: left; }
#rail-region .panel .budget td { text-align: right; padding: 5px 8px; color: var(--text-strong); border-top: 1px solid rgba(var(--line-rgb),.6); }
#rail-region .panel .budget td.cost { color: var(--money); font-weight: 600; white-space: nowrap; }
#rail-region .panel .budget td:nth-child(2) { white-space: nowrap; }
#rail-region .panel .budget td .rate-in { width: 58px; min-height: 22px; text-align: right; background: rgba(var(--deep-rgb),.6); border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-strong); padding: 0 4px; }
#rail-region .panel .budget-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 11px; color: var(--text-muted); border-top: 1px solid rgba(251,191,36,.2); flex-wrap: wrap; }
#rail-region .panel .budget-foot select { min-height: 22px; color: inherit; }
#rail-region .panel .budget-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(251,191,36,.18); }
#rail-region .panel .budget-heads > div { background: rgba(var(--ground-rgb),.85); padding: 10px 12px; }
#rail-region .panel .budget-heads span, #rail-region .panel .live-pair span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
#rail-region .panel .budget-heads b { display: block; font-size: 22px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; margin-top: 2px; }
#rail-region .panel .budget-heads b span { display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
#rail-region .panel .budget-heads b small, #rail-region .panel .live-pair b small { font-size: 12px; font-weight: 600; opacity: .8; }
#rail-region .panel .budget-heads b.money, #rail-region .panel .live-pair b.money { color: var(--money); }
#rail-region .panel .budget tr.yr td { color: var(--text-strong); font-weight: 600; background: rgba(var(--line-rgb),.35); }
#rail-region .panel .budget tr.yr td.cost { color: var(--money); }
#rail-region .panel .budget td.mat { padding-left: 22px; }
#rail-region .panel .budget-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(var(--line-rgb),.6); border-top: 1px solid rgba(251,191,36,.2); }
#rail-region .panel .budget-meta div { background: rgba(var(--ground-rgb),.9); padding: 6px 8px; }
#rail-region .panel .budget-meta b { display: block; color: var(--text-strong); font-size: 14px; font-variant-numeric: tabular-nums; }
#rail-region .panel .budget-meta span { color: var(--text-muted); font-size: 11px; }
#rail-region .panel .live-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
#rail-region .panel .live-pair b { display: block; font-size: 17px; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
#rail-region .panel .live { background: rgb(var(--deep-rgb)); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
#rail-region .panel .live.on { border-color: var(--accent-yellow); }
#rail-region .panel .live .grid2 { display: grid; grid-template-columns: auto 1fr 1fr; gap: 2px 10px; font-size: 12px; }
#rail-region .panel .live .grid2 span { color: var(--text-muted); }
#rail-region .panel .live .grid2 b { color: var(--text-strong); font-weight: 600; }
#rail-region .panel .pen { display: grid; gap: 6px; }
#measure-panel [hidden], #panel-import [hidden], #area-review [hidden], #area-manage [hidden] { display: none !important; }
/* Where the prototype writes inline styles, the app names them. */
#rail-region .panel .area-pen-swatch { width: 22px; height: 22px; }
#rail-region .panel .area-manage-btn { width: 28px; height: 28px; }
#rail-region .panel .area-manage-btn svg { width: 14px; height: 14px; }
#rail-region .panel .area-draw-row { margin-bottom: 8px; flex-wrap: wrap; }
#rail-region .panel .area-snap { margin-left: 4px; }
#rail-region .panel .area-units { margin-left: auto; }
#rail-region .panel .area-live-on { margin-bottom: 4px; }
#rail-region .panel .area-live-on b { color: var(--text-strong); }
#rail-region .panel .area-live-size { margin-top: 4px; }
#rail-region .panel #area-boxes { margin-top: 8px; }
#rail-region .panel #area-boxes td.area-fig { color: var(--text-strong); font-weight: 600; }
#rail-region .panel #area-boxes td.cost { color: var(--money); font-weight: 600; }

/* ---------- Reports (5h): the prototype's cards ---------- */
#rail-region .panel .rpt-card .field { margin-bottom: 6px; }
#rail-region .panel .rpt-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
#rail-region .panel .rpt-sum div { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 8px; }
#rail-region .panel .rpt-sum b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rail-region .panel .rpt-sum span { font-size: 11px; color: var(--text-secondary); }
#rail-region .panel .warn-text { color: var(--tint-pink); margin-top: 6px; }
/* Where the prototype writes inline styles, the app names them. */
#rail-region .panel .rpt-lead { margin: 4px 0 8px; }
#rail-region .panel .rpt-go { width: 100%; margin-top: 8px; }
#rail-region .panel .rpt-other { margin-bottom: 8px; }
#panel-reports [hidden] { display: none !important; }

/* ---------- Go to coordinate, Help (5i) ---------- */
#rail-region .panel .jump-hint { margin-top: 10px; }
#rail-region .panel .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
#rail-region .panel .kv dt { color: var(--text-muted); }
#rail-region .panel .kv dd { text-align: right; font-variant-numeric: tabular-nums; }
#rail-region .panel .help-tour { width: 100%; }
#rail-region .panel .help-lead { margin-top: 8px; }

/* ---------- Unfold layout (5i): the prototype's rows, whose inline styles are named here ---------- */
#rail-region .panel .layout-anchor { padding: 6px 8px; border-radius: 6px; background: rgba(6,182,212,.07); border: 1px solid rgba(6,182,212,.2); margin-bottom: 6px; }
#rail-region .panel .layout-anchor b { min-width: 44px; color: var(--accent-cyan); }
#rail-region .panel .layout-anchor .note { flex: 1; }
#rail-region .panel .layout-row { margin-bottom: 6px; }
#rail-region .panel .layout-row b { min-width: 44px; }

/* ---------- Hover card (5j): the prototype's .hovercard, on the app's tooltip ---------- */
#canvas-tooltip { position: absolute; z-index: 8; pointer-events: none; min-width: 200px; max-width: 270px;
  background: rgba(var(--ground-rgb),.97); border: 1px solid var(--border-color); border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,calc(.5 * var(--shadow-k))); font-size: 12px; line-height: 1.4; color: var(--text-primary); }
#canvas-tooltip h4 { font-size: 12px; font-weight: 700; margin: 0 0 4px; display: flex; gap: 6px; align-items: center; }
#canvas-tooltip .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
#canvas-tooltip .sw.hatch { background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255,255,255,.75) 2px 4px) !important; }
#canvas-tooltip .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; }
#canvas-tooltip .kv dt { color: var(--text-muted); }
#canvas-tooltip .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
#canvas-tooltip .note { color: var(--text-muted); font-size: 12px; }
#canvas-tooltip .hint { margin-top: 6px; color: var(--text-muted); font-size: 11px; }

/* ---------- The Sprays card over the map (5j): the prototype's .map-card ---------- */
.map-card { position: absolute; left: 70px; top: 8px; z-index: 6; max-width: calc(100% - 130px);
  background: rgba(var(--ground-rgb),.95); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,calc(.45 * var(--shadow-k))); line-height: 1.4; }
.map-card.hidden { display: none; }
.map-card-head { display: flex; align-items: center; gap: 2px; padding: 4px 6px; flex-wrap: wrap; }
.map-card-head > b { font-size: 12px; margin: 0 4px 0 2px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.map-card-head > b svg { width: 14px; height: 14px; }
.map-card .map-card-head .legend-row { width: auto; padding: 2px 7px; font-size: 12px; white-space: nowrap; }
.map-card-head .vsep { width: 1px; height: 18px; background: var(--border-color); margin: 0 3px; }
.map-card.min .map-card-body { display: none; }
.map-card-body { padding: 8px 10px 10px; display: grid; gap: 8px; border-top: 1px solid var(--border-color); width: 330px; max-height: 60vh; overflow: auto; font-size: 12px; }
.map-card .legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; text-align: left; background: none; border: 0; color: inherit; font: inherit; }
.map-card button.legend-row { cursor: pointer; }
.map-card button.legend-row:hover { background: rgba(148,163,184,.1); }
.map-card .legend-row.on { background: rgba(234,179,8,.16); box-shadow: inset 0 0 0 1px rgba(234,179,8,.6); }
.map-card .legend-row.dim { opacity: .4; }
.map-card .legend-row .sw { width: 16px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(var(--hi-rgb),.3); }
.map-card .legend-row .sw.hatch, .map-card .swatch.hatch { background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255,255,255,.75) 2px 4px) !important; }
.map-card table.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.map-card table.t th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 4px; border-bottom: 1px solid var(--border-color); }
.map-card table.t td { padding: 4px; border-bottom: 1px solid rgba(var(--line-rgb),.5); }
.map-card table.t .n { text-align: right; }
.map-card .swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(var(--hi-rgb),.25); vertical-align: -2px; }
.map-card .callout { border-radius: 8px; padding: 8px 10px; background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.35); color: var(--tint-amber); }
.map-card .callout[hidden] { display: none; }
.map-card .note { color: var(--text-muted); }
.map-card .linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent-cyan); cursor: pointer; text-align: left; }
.map-card input[type=range] { background: none; font: inherit; }
/* In the coating world the card says nothing, as there: coating has its own legend. */
body.entropy-world-coating #spray-card { display: none; }

/* ---------- Coating wear (5i): the Erosion panel's kit ---------- */
#rail-region .panel .wear-hi { color: var(--tint-red); }
#rail-region .panel .wear-note { margin-top: 6px; }
#rail-region .panel .hot { color: var(--tint-hot); }

/* ---------- Settings (5i) ---------- */
#modal-settings [hidden] { display: none !important; }
#rail-region .panel .settings-colours { margin-top: 10px; }
#rail-region .panel .kv { font-size: 13px; }
#rail-region .panel #spray-derived .kv { margin-bottom: 6px; }
/* The colour-stop editor the Legend cannot replace, one click away. */
#rail-region .panel .settings-scales { margin: 0 0 8px; }
#rail-region .panel .settings-scales > summary { cursor: pointer; color: var(--accent-cyan); font-size: 12px; padding: 2px 0 6px; }
#rail-region .panel .settings-scales .cs-scale { margin-bottom: 8px; }
#rail-region .panel .settings-cache { display: flex; gap: 6px; flex-wrap: wrap; }
#rail-region .panel #aws-pct-seg { flex: none; }
/* Two groups, by who a setting reaches: the prototype's band across the panel. */
#rail-region .panel .grp { display: flex; align-items: center; gap: 8px; margin: 18px -12px 10px; padding: 7px 12px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: rgba(var(--hi-rgb),.025); font-size: 13px; font-weight: 600; color: var(--text-primary); }
#rail-region .panel .grp .r { margin-left: auto; font-weight: 500; }
#rail-region .panel .settings-acct { width: 100%; justify-content: flex-start; gap: 8px; }
#rail-region .panel .settings-acct .note { margin-left: auto; }
#rail-region .panel .settings-acct[hidden] + .grp { margin-top: 0; }
#rail-region .panel .settings-plant { border: 0; padding: 0; margin: 0; min-width: 0; }
#rail-region .panel .settings-plant > h3:first-child { margin-top: 0; }
/* The logo's button is a label, which a disabled fieldset does not grey. */
#rail-region .panel .settings-plant:disabled label.btn { opacity: .45; pointer-events: none; }

/* ---------- Import (5g): the prototype's panel, and the app's preview in its kit ---------- */
#rail-region .panel .import-kinds { margin-bottom: 6px; }
#panel-import .import-blurb { margin-bottom: 8px; }
#panel-import .drop { display: block; cursor: pointer; }
#panel-import .drop svg { width: 18px; height: 18px; }
#panel-import .drop .drop-main { margin-top: 6px; }
/* A workbook dragged over the zone (the app's; the prototype has no drag). */
#panel-import .drop.is-over { border-color: var(--accent-cyan); color: var(--text-primary); }
#panel-import .import-error { margin: 8px 0 0; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: var(--tint-red); }
#panel-import .import-summary { margin-bottom: 8px; line-height: 1.5; overflow-wrap: anywhere; }
#panel-import .import-summary b, #panel-import .import-summary strong { color: var(--text-primary); }
#panel-import .import-privacy { display: inline-flex; gap: 4px; align-items: center; }
#panel-import .import-privacy svg { width: 11px; height: 11px; }
#panel-import .import-check { display: flex; gap: 6px; align-items: flex-start; }
#panel-import .import-check svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
#panel-import code { font-size: 11px; }
/* Wide tables scroll inside the dock rather than being cut (5g, all in the dock). */
#panel-import .import-scroll { overflow: auto; max-height: 240px; border: 1px solid var(--border-color); border-radius: 6px; scrollbar-width: thin; }
#panel-import .import-scroll table.t th { position: sticky; top: 0; background: var(--bg-secondary); }
#panel-import .import-scroll table.t td, #panel-import .import-scroll table.t th { white-space: nowrap; }
#panel-import table.t select, #panel-import table.t .input { min-height: 24px; }
#panel-import .bulk-elev { width: 72px; }
#panel-import .bulk-elev.is-edited { border-color: var(--accent-cyan); color: var(--accent-cyan); }
#panel-import .bulk-new { color: var(--accent-green); font-weight: 600; }
#panel-import .bulk-dup { color: var(--text-muted); }
#panel-import .bulk-year-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
#panel-import .bulk-year-pick input { accent-color: var(--accent-cyan); }
/* Where each source tab lands, as the old dialog's pills. */
#panel-import .pill.ok      { background: rgba(34,197,94,.16);  color: var(--accent-green); border-color: transparent; }
#panel-import .pill.snap    { background: rgba(6,182,212,.16);  color: var(--accent-cyan); border-color: transparent; }
#panel-import .pill.newline { background: rgba(148,163,184,.14); color: var(--text-muted); border-color: transparent; }
#panel-import .pill.warn    { background: rgba(245,158,11,.18); color: var(--tint-orange); border-color: transparent; }
#panel-import .pill.bad     { background: rgba(239,68,68,.18);  color: var(--accent-red); border-color: transparent; }
#panel-import .import-progress { text-align: center; padding: 18px 4px; }
#bulk-progress-pct { font-size: 22px; font-weight: 700; color: var(--accent-cyan); }
#panel-import .bulk-progress-track { height: 8px; background: var(--bg-primary); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
#panel-import .bulk-progress-fill { height: 100%; background: var(--accent-cyan); width: 0; transition: width .2s ease; }
/* The coating import's review (step 4g): a card per sheet. */
#panel-import .coat-import-sheet { border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
#panel-import .coat-import-sheet header { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#panel-import .coat-import-sheet header b { font-size: 13px; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
#panel-import .coat-import-sheet select { max-width: 180px; }
#panel-import .coat-import-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
#panel-import .coat-import-fix { display: inline-flex; gap: 4px; align-items: center; color: var(--tint-orange); }
#panel-import #coat-import-checks ul { padding-left: 18px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- 3D view (ADR 0023, 6a) ----------
   The model takes the map's place while the dock's 3D view tool is open: the
   prototype's .stage-3d, its gradient and its badge. The panel is the kit's
   .panel, with the prototype's .op-row sliders. */
#canvas-wrapper > #modal-3d { position: absolute; inset: 0; z-index: 70; }
#canvas-wrapper > #modal-3d.hidden { display: none !important; }
.stage-3d { background: radial-gradient(ellipse at 50% 40%, var(--stage-hi), var(--stage-lo)); }
.stage-3d #w3d-canvas-host { position: absolute; inset: 0; }
.stage-3d canvas { display: block; width: 100%; height: 100%; }
.view-badge { position: absolute; left: 12px; top: 10px; z-index: 6; font-size: 11px; color: var(--text-secondary);
  background: rgba(var(--ground-rgb),.85); border: 1px solid var(--border-color); border-radius: 999px; padding: 2px 10px; pointer-events: none; }
.stage-3d-actions { position: absolute; right: 12px; top: 10px; z-index: 6; display: flex; gap: 6px; }
.stage-3d-actions .btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--ground-rgb),.85); }
.stage-3d-actions .btn[hidden] { display: none; }
.stage-3d-actions .btn svg { width: 14px; height: 14px; }
#rail-region .panel .op-row { display: grid; grid-template-columns: 52px 1fr 42px; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text-secondary); }
#rail-region .panel .op-row input { accent-color: var(--accent-cyan); width: 100%; }
#rail-region .panel .op-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 500; }
#panel-3d h3 .linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent-cyan); cursor: pointer; }
#panel-3d h3 .linkish:hover { text-decoration: underline; }
#panel-3d #w3d-pick .chart { margin-top: 8px; }
/* The application's own: the model file, its mapping and alignment. */
#panel-3d .w3d-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#panel-3d .w3d-tools .hidden { display: none; }
#panel-3d .w3d-filebtn { display: inline-flex; align-items: center; cursor: pointer; }
#panel-3d .w3d-status:empty { display: none; }
#panel-3d .w3d-status { margin: 4px 0 6px; }
#panel-3d .w3d-liberr { background: rgba(127, 29, 29, 0.25); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--tint-red-soft); margin-bottom: 8px; }
#panel-3d .w3d-liberr.hidden { display: none; }
#panel-3d .w3d-liberr code { font-size: 11px; }
#panel-3d .w3d-more { border-top: 1px solid var(--border-color); padding: 8px 0 2px; margin-top: 8px; }
#panel-3d .w3d-more > summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); }
#panel-3d .w3d-more[open] > summary { margin-bottom: 8px; color: var(--text-primary); }
#panel-3d .w3d-list-tools { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin-bottom: 8px; }
#panel-3d .w3d-list-tools.hidden { display: none; }
#panel-3d .w3d-list-tools button { grid-column: 2; }
#panel-3d .w3d-listhead { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
#panel-3d .w3d-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--border-color); }
#panel-3d .w3d-row-name { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-3d .w3d-row.is-mapped .w3d-row-name { color: var(--text-primary); }
#panel-3d .w3d-row-meta { font-size: 11px; color: var(--text-muted); text-align: right; }
#panel-3d .w3d-assign { grid-column: 1 / -1; width: 100%; }
#panel-3d .w3d-num { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; align-items: center; gap: 6px; margin-bottom: 6px; }
#panel-3d .w3d-num label { color: var(--text-muted); font-size: 12px; }
#panel-3d .w3d-unit { font-size: 11px; color: var(--text-muted); }
#panel-3d .w3d-nudge { display: grid; grid-template-columns: 40px 1fr 40px; gap: 6px; margin: 4px 0 6px; }
#panel-3d .w3d-flips { display: flex; gap: 12px; }
#panel-3d .w3d-btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
#panel-3d .note b { color: var(--text-primary); }

/* ---------- the report viewer (ADR 0023, 6b) ----------
   The prototype's: the report over the whole window, with its bar, Contents
   and the Document / Slides switch. Above the dock and the map's layers, and
   short by the demo strip, as everything fixed to the window is. */
.rv { position: fixed; inset: 0; bottom: var(--example-mark-h, 0px); z-index: 9700; background: var(--bg-primary); display: flex; flex-direction: column; font: 13px/1.4 var(--font-main); }
.rv.hidden { display: none; }
:where(.rv button) { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
.rv-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); flex-wrap: wrap; }
.rv-bar > b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.rv-bar svg { width: 14px; height: 14px; }
.rv-meta { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.rv-sp { flex: 1; }
.rv-body { flex: 1; display: flex; min-height: 0; }
.rv-toc { width: 230px; flex: 0 0 auto; border-right: 1px solid var(--border-color); padding: 12px 10px; overflow: auto; }
.rv-toc h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 6px 6px; }
.rv-toc button { display: flex; width: 100%; justify-content: space-between; gap: 8px; align-items: baseline; background: none; border: 0; color: var(--text-primary); text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; }
.rv-toc button:hover { background: var(--bg-raised); }
.rv-toc small { color: var(--text-secondary); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-note { font-size: 11.5px; color: var(--text-secondary); margin: 14px 6px 0; line-height: 1.45; }
.rv-note b.money { color: var(--money); }
.rv-main { flex: 1; min-width: 0; position: relative; overflow: auto; }
.rv-doc { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg-secondary); }
.rv-doc.hidden, .rv-slides.hidden { display: none; }
.rv-wait { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-secondary); padding: 24px; }
.rv-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; padding: 16px; }
.rv-slides figure { margin: 0; }
.rv-slide { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; }
.rv-slide-cv { width: 100%; height: 100%; display: block; }
.rv-slides figcaption { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.rv-slides .linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent-cyan); cursor: pointer; }
@media (max-width: 760px) { .rv-toc { display: none; } .rv-meta { display: none; } }

/* ---------- Area and spray's other views (ADR 0023, 6c) ----------
   Materials and year colours, Review before commit and one box: the kit's
   .panel, with the prototype's inline colour input. */
#rail-region .panel .area-colour { width: 28px; height: 22px; border: 0; background: none; padding: 0; cursor: pointer; }
#rail-region .panel .area-add-row { gap: 6px; margin-top: 8px; }
#rail-region .panel .area-add-row .num-in { width: 72px; }
#area-manage table.t .input { width: 100%; }
#area-manage table.t .num-in { width: 72px; }
#area-manage .btn-set-default.is-on { color: var(--accent-yellow); }
#area-manage .btn-set-default.is-on svg { fill: currentColor; }
#area-review h3 .swatch { margin-right: 2px; }
#area-review #commit-spray-readonly.hidden { display: none; }

/* ---------- People (ADR 0040) ---------- */
#people-body .people-invite { display: grid; gap: 8px; margin-bottom: 14px; }
#people-body table.people { width: 100%; border-collapse: collapse; font-size: 12px; }
#people-body table.people th, #people-body table.people td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
#people-body table.people select { max-width: 100%; }
#people-body .people-jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 12px; }
#people-body .people-jobs li.failed { color: var(--tint-red); }
#people-body .verdict { padding: 6px 8px; border-radius: 6px; margin-bottom: 8px; font-size: 12px; }
#people-body .verdict.ok { background: rgba(16,185,129,.12); color: var(--tint-emerald); }
#people-body .verdict.bad { background: rgba(239,68,68,.12); color: var(--tint-red); }