/* CRBCUT design system: shared by every page. The working-drawing theme (2026-10): the site (crbcut.com) is the
   presentation sheet, the app is the working drawing. Three materials: paper (the ground, with the drafting grid),
   ink (text, borders, linework) and pen (what CRBCUT adds: the primary action, the selected thing, links).
   Page styles use these tokens only; no hard-coded colors there except drawing-semantic map overlays. */
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-VF.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
/* Martian Mono (OFL, fonts/MartianMono-OFL.txt): the lettering face for labels, heads, tags and units */
@font-face { font-family: "Martian Mono"; src: url("fonts/MartianMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/MartianMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* ---- roles (identical to the site) ---- */
  --paper: #F1F1F5;      /* app ground, title strips, table heads, unit cells */
  --sheet: #FAFAFC;      /* panels, cards, fields, floating map chrome. No pure white surfaces. */
  --ink: #1B1A21;        /* text, frame and part borders, linework */
  --muted: #5A5766;      /* secondary text, lettered labels */
  --faint: #74717F;      /* non-essential meta, on --sheet only (4.23:1 on --paper fails) */
  --hair: #C9C6D3;       /* dividers inside a part */
  --pen: #5E52A0;        /* links, pen-colored text and strokes */
  --pen-fill: #6F63B8;   /* primary button, selected pin, current step. Never text in dark mode. */
  --pen-soft: #E6E2F5;   /* selected row or card ground, hover ground */
  --on-pen: #FFFFFF;
  --pen-deep: #5E52A0;   /* a darker button ground under --on-pen (CD100). Same in dark mode: 6.6:1 with white. */
  --grid-minor: rgba(111,99,184,.075); --grid-major: rgba(111,99,184,.16);

  /* ---- status: semantic, not brand ---- */
  --pos: #1F7F55; --pos-soft: #E4F3EB; --neg: #C8412F; --neg-soft: #FBEAE7; --warn: #9A5B0B; --warn-soft: #FDF3E3;
  --amber: #E9A23B; --amber-2: #F3C77F;
  /* small text on the soft grounds: pos/neg/good measure 4.34, 4.24 and 3.09 there, so text uses these shades */
  --pos-ink: #1B6E45; --neg-ink: #A8322A; --good-ink: #36722A; --warn-ink: #8A510A;  /* warn 4.27 on --pen-soft */
  /* site ratings (pin rings, lot outlines, tags) */
  --r-strong: #1F7F55; --r-good: #4E9A3A; --r-good-soft: #EAF4E3; --r-fair: #C78A1E; --r-weak: #8F8C99;
  /* map layers: DC fast is orange and Level 2 teal, so neither reads as the brand purple */
  --dc: #E8590C; --dc-soft: #FFF0E3; --dc-ink: #B4500F; --l2: #0E8F8A; --l2-soft: #E2F3F2; --l2-ink: #0B6E6A;
  /* coverage map (coverage.html): none, partial, building, and ready from lo to hi */
  --cov-none: #E4E2EA; --cov-partial: #A3D2B1; --cov-partial-edge: #7DBF93; --cov-build: #F2B84B; --cov-lo: #57A873; --cov-hi: #14632F;

  /* Scout start-screen illustrations (scout.js hero, bessHero) */
  --ill-pen: var(--pen-fill); --ill-pen-2: #A79DDB; --ill-dark: #1E1C24; --ill-screen: #2E2B38; --ill-slate: #6E6B78;
  --ill-hair: #DAD8E0; --ill-mid: #B9B6C1; --ill-soft: var(--pen-soft); --ill-light: #FFFFFF; --ill-on: #FFFFFF;

  /* ---- type ---- */
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --letter: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- shape and space ---- */
  --lift: 3px;           /* the hard offset: box-shadow: var(--lift) var(--lift) 0 var(--ink). Never blurred. */
  --hdr: 56px;
  --fs: 15px; --pad: 16px; --gap: 14px;   /* Guided density; Pro below */

  /* ---- theme switches that aren't colors ---- */
  --icon-invert: none; --lk-l: block; --lk-d: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #15141B; --sheet: #1C1B23; --ink: #ECEBF2; --muted: #B4B1C0; --faint: #8D8A99; --hair: #3A3845;
  --pen: #A79DDB; --pen-soft: #2C2842; --grid-minor: rgba(167,157,219,.06); --grid-major: rgba(167,157,219,.14);
  --pos: #74D1A0; --pos-soft: #1D3229; --neg: #F0938A; --neg-soft: #3A2220; --warn: #E3B860; --warn-soft: #382E1A;
  --pos-ink: #74D1A0; --neg-ink: #F0938A; --good-ink: #8CC46F; --warn-ink: #E3B860; --amber-2: #8A6A2E;
  --r-strong: #5FBF8C; --r-good: #8CC46F; --r-good-soft: #23301D; --r-fair: #E3B860; --r-weak: #8D8A99;
  --dc-soft: #3A2618; --dc-ink: #F2A26B; --l2-soft: #173230; --l2-ink: #6FD0CA;
  --cov-none: #2A2933; --cov-partial: #2F543C; --cov-partial-edge: #4D8761; --cov-build: #B8892E; --cov-lo: #4F9468; --cov-hi: #8FE0B4;
  --icon-invert: invert(1); --lk-l: none; --lk-d: block;
  --ill-dark: #4B4763; --ill-screen: #2A2833; --ill-slate: #8D8A99; --ill-hair: #3A3845; --ill-mid: #5A5766; --ill-light: #2A2933; --ill-on: #ECEBF2;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #15141B; --sheet: #1C1B23; --ink: #ECEBF2; --muted: #B4B1C0; --faint: #8D8A99; --hair: #3A3845;
  --pen: #A79DDB; --pen-soft: #2C2842; --grid-minor: rgba(167,157,219,.06); --grid-major: rgba(167,157,219,.14);
  --pos: #74D1A0; --pos-soft: #1D3229; --neg: #F0938A; --neg-soft: #3A2220; --warn: #E3B860; --warn-soft: #382E1A;
  --pos-ink: #74D1A0; --neg-ink: #F0938A; --good-ink: #8CC46F; --warn-ink: #E3B860; --amber-2: #8A6A2E;
  --r-strong: #5FBF8C; --r-good: #8CC46F; --r-good-soft: #23301D; --r-fair: #E3B860; --r-weak: #8D8A99;
  --dc-soft: #3A2618; --dc-ink: #F2A26B; --l2-soft: #173230; --l2-ink: #6FD0CA;
  --cov-none: #2A2933; --cov-partial: #2F543C; --cov-partial-edge: #4D8761; --cov-build: #B8892E; --cov-lo: #4F9468; --cov-hi: #8FE0B4;
  --icon-invert: invert(1); --lk-l: none; --lk-d: block;
  --ill-dark: #4B4763; --ill-screen: #2A2833; --ill-slate: #8D8A99; --ill-hair: #3A3845; --ill-mid: #5A5766; --ill-light: #2A2933; --ill-on: #ECEBF2;
  color-scheme: dark; }
/* Guided and Pro (4.13): same parts, two densities, driven only by these three properties */
body[data-mode="pro"] { --fs: 14px; --pad: 12px; --gap: 10px; }

/* ---------- ground ---------- */
* { box-sizing: border-box; }
html { background: var(--paper); }
html, body { margin: 0; height: 100%; font: var(--fs)/1.5 var(--display); color: var(--ink); -webkit-font-smoothing: antialiased; }
/* the drafting grid: 80 px major, 16 px minor. Panels are solid, so text never sits on it. */
body { background-color: var(--paper);
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.12; }
/* part titles 16/700 everywhere a part has one */
.panel h3, .card h2, .empty h3 { font-size: 16px; font-weight: 700; }
a { color: var(--pen); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }
::placeholder { color: var(--faint); }
/* lettering: what a drafter would letter (labels, heads, tags, units, counters). Never sentences. */
.lt { font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; }

/* ---------- app bar (4.11): lockup, BETA tag, lettered section tabs, spacer, Guided / Pro, theme ---------- */
header { height: var(--hdr); display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--sheet);
  color: var(--ink); border-bottom: 1.5px solid var(--ink); position: relative; z-index: 1100; }
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand .lk { height: 22px; width: auto; }
.brand .lk-l { display: var(--lk-l); } .brand .lk-d { display: var(--lk-d); }
header .beta { margin-left: -6px; flex: none; }
.hdr-spacer { flex: 1; }
.navlinks { display: flex; gap: 0; align-self: stretch; }
.navlinks a { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; text-decoration: none; color: var(--muted);
  font: 400 10.5px/1 var(--letter); letter-spacing: .09em; text-transform: uppercase;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.navlinks a:hover { color: var(--ink); }
.navlinks a.on { color: var(--ink); border-bottom-color: var(--pen-fill); }
/* segmented control: lettered cells in one ink border; the pressed cell inverts */
.modeswitch, .seg-l { display: inline-flex; border: 1px solid var(--ink); background: var(--sheet); flex: none; }
.modeswitch button, .seg-l button { margin: 0; border: 0; border-right: 1px solid var(--ink); background: var(--sheet); color: var(--muted);
  font: 400 10.5px/1 var(--letter); letter-spacing: .09em; text-transform: uppercase; padding: 8px 11px; min-height: 0; }
.modeswitch button:last-child, .seg-l button:last-child { border-right: 0; }
.modeswitch button:hover, .seg-l button:hover { color: var(--ink); background: var(--pen-soft); }
.modeswitch button.on, .seg-l button.on, .seg-l button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.hdr-actions { display: flex; gap: 8px; align-items: center; }
.hdr-actions select { max-width: 220px; margin: 0; padding: 6px 8px; font-size: 13px; }
.hdr-actions label { color: var(--muted); }
button.ghost { background: var(--sheet); color: var(--ink); border-color: var(--ink); }
button.ghost:hover { background: var(--pen-soft); color: var(--ink); }
/* theme control (theme.js): one square button in the app bar cycles System, Light, Dark; the ☰ drawer gets the three-way switch */
.themebtn { width: 32px; height: 32px; padding: 0; margin: 0; display: inline-grid; place-items: center; flex: none;
  border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); }
.themebtn:hover { background: var(--pen-soft); color: var(--ink); }
.themebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.themeseg { display: inline-flex; border: 1px solid var(--ink); background: var(--sheet); margin-top: 12px; }
.themeseg button { margin: 0; border: 0; border-right: 1px solid var(--ink); background: var(--sheet); color: var(--muted);
  font: 400 10.5px/1 var(--letter); letter-spacing: .09em; text-transform: uppercase; padding: 9px 12px; }
.themeseg button:last-child { border-right: 0; }
.themeseg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }

/* ---------- controls ---------- */
/* fields (4.4): a lettered label above, an ink input below, units in their own paper cell to the right */
label { display: block; font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
/* a label that wraps a checkbox or radio is a sentence, not lettering */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { font: 400 14px/1.4 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); }
input, select, textarea { width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--ink); border-radius: 0;
  font: 400 var(--fs)/1.3 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--sheet); }
input:focus, select:focus, textarea:focus, input:focus-within { outline: 3px solid var(--pen); outline-offset: 2px; border-color: var(--ink); }
input[aria-invalid="true"], .field-err input, .field-err select { border-color: var(--neg); }
.field-msg { display: block; margin-top: 4px; font-size: 12.5px; color: var(--neg-ink); text-transform: none; letter-spacing: 0; font-family: var(--display); }
/* unit cell: ui.js wraps an input whose label ends in "(kW)", "(A)", "(in)"... */
.unit { display: flex; margin-top: 5px; }
.unit > input { margin: 0; border-right: 0; flex: 1; min-width: 0; }
.unit > span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--muted);
  font: 400 10.5px var(--letter); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--pen-fill); }
/* buttons (4.1): square and plotted. One primary per view; it alone carries the hard offset and presses into the paper. */
button { padding: 8px 13px; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); border-radius: 0;
  font: 600 14px/1.2 var(--display); cursor: pointer; white-space: nowrap; margin-top: 3px;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
button:hover { background: var(--pen-soft); color: var(--ink); }
button:active:not(:disabled) { transform: translate(1px, 1px); }
button.primary { background: var(--pen-fill); color: var(--on-pen); border-color: var(--ink); box-shadow: var(--lift) var(--lift) 0 var(--ink); }
button.primary:hover:not(:disabled) { background: var(--pen-fill); color: var(--on-pen); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
button.primary:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
/* small: row actions, a query summary's Edit, inline tools */
button.sm, .sm > button, table button, .rowcard button, .sugcard button, .item button, .ssum button, .rec-actions button {
  font-size: 12.5px; padding: 5px 10px; border-width: 1px; }
/* danger: never a filled red button */
button.danger { color: var(--neg-ink); border-color: var(--neg); }
button.danger:hover { background: var(--neg-soft); color: var(--neg-ink); }
/* links that act as buttons */
a.btn { display: inline-block; padding: 7px 12px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink);
  font: 600 13px/1.2 var(--display); text-decoration: none; }
a.btn:hover { background: var(--pen-soft); }
a.btn.primary { background: var(--pen-fill); color: var(--on-pen); box-shadow: var(--lift) var(--lift) 0 var(--ink); }

/* tags (4.2) replace pills: square, 1 px border, lettered. Neutral is ink on sheet. */
.tag, .badge, .pill, .conf, .lchip, .fitb, .chip, .tk-owner {
  display: inline-flex; align-items: center; gap: 6px; font: 400 10px/1.35 var(--letter); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--ink); border-radius: 0; background: var(--sheet); color: var(--ink); white-space: nowrap; }
.tk-owner { padding: 1px 5px; border-color: var(--hair); color: var(--muted); font-size: 9.5px; }
.tag.wrap, .item .pill { white-space: normal; text-align: left; }
.tag.pen, .tag.bat, .conf.medium { background: var(--pen-soft); border-color: var(--pen); color: var(--pen); }
.tag.pos, .tag.ok, .pill.ok, .pill.verified, .pill.match, .pill.active, .conf.high, .lchip.ok, .b-Strong {
  background: var(--pos-soft); border-color: var(--pos); color: var(--pos-ink); }
.tag.warn, .pill.warn, .pill.pending, .pill.manual, .pill.error, .pill.pending_review, .conf.low, .lchip.empty, .lchip.unavailable, .b-Fair {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.tag.neg, .tag.bad, .pill.bad, .pill.rejected, .pill.expired, .pill.mismatch, .pill.not_found, .lchip.error {
  background: var(--neg-soft); border-color: var(--neg); color: var(--neg-ink); }
.b-Good { background: var(--r-good-soft); border-color: var(--r-good); color: var(--good-ink); }
.b-Weak, .conf.none, .fitb.small, .chip.dim { border-color: var(--muted); color: var(--muted); }
.chip { background: var(--ink); color: var(--sheet); }
.chip.dim { background: var(--sheet); }
.fitb { margin: 3px 4px 0 0; }
.fit-dcfc { background: var(--dc-soft); border-color: var(--dc-ink); color: var(--dc-ink); }
.fit-l2 { background: var(--l2-soft); border-color: var(--l2-ink); color: var(--l2-ink); }

/* keyed-note circle (4.3): the only round part. Card ranks, Pro section numbers, onboarding steps, callouts.
   The ranked-site pin on the map is the same object, so a card and its pin read as one thing. */
.key, .rnum, .step .num, .steps .dot, .j-how li::before {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%;
  background: var(--sheet); color: var(--ink); font: 500 11px/1 var(--letter); }
.key.on, .rcard.sel .rnum, .step.open .num, .steps li.on .dot { background: var(--pen-fill); color: var(--on-pen); }
.step.done:not(.open) .num, .steps li.done:not(.on) .dot, .j-how li::before { background: var(--ink); color: var(--sheet); }
/* a ranked site's circle carries its rating as a 3 px ring, like its pin */
.rcard .rnum { outline: 3px solid var(--r-weak); margin: 3px; background: var(--sheet); }
.rcard.sel .rnum { background: var(--pen-fill); }
.rcard .rnum.r-Strong { outline-color: var(--r-strong); } .rcard .rnum.r-Good { outline-color: var(--r-good); }
.rcard .rnum.r-Fair { outline-color: var(--r-fair); }

/* schedule (4.6): one bordered grid with shared hair dividers, like a schedule on a drawing. Every cell leads
   with a big tabular numeral and its lettered unit, then one line in --muted. The 1 px gap on a hair ground draws
   the dividers, so any number of cells works. */
.gsum, .cards, .tk-sum { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--ink); margin: 8px 0 12px; }
.gsum { grid-template-columns: 1fr 1fr; }
.cards, .tk-sum { grid-template-columns: repeat(3, 1fr); }
.gsi, .cards .card, .tk-sum > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px; background: var(--sheet); }
.gsum > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.cards > :last-child:nth-child(3n+1) { grid-column: span 3; } .cards > :last-child:nth-child(3n+2) { grid-column: span 2; }
.gsi b, .cards .card .v, .tk-sum b { display: block; font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cards .card .v { font-size: 20px; }
.gsi b small, .cards .card .v small { margin-left: 4px; font: 400 11px var(--letter); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gsi b .ico { width: 22px; height: 22px; color: var(--pen); }
.gsi span, .tk-sum span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.cards .card .l { font: 400 10px/1.4 var(--letter); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* tables (4.7): lettered head on paper between ink rules, hair between rows, ink under the last row.
   Numbers right-aligned and tabular. No zebra striping, no vertical rules. */
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
th, td { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid var(--hair); }
th { font-weight: 600; }
thead th, tr:first-child > th { font: 400 10px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 6px 8px; }
/* tables never push a panel wider than the screen */
.sugcard, .rowcard, .detail, .step .body, .panel, .card, .costpanel { overflow-x: auto; }
tr:last-child > td { border-bottom: 1px solid var(--ink); }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.sel > td { background: var(--pen-soft); }
body[data-mode="pro"] td { padding: 6px; }
/* dense tables inside a card: tighter cells and lettering */
.sugcard table, .batpro table, .billtab, #storagePro table { font-size: 12px; }
.sugcard th, .sugcard td, .batpro th, .batpro td, .billtab th, .billtab td, #storagePro th, #storagePro td { padding: 5px 4px; }
.sugcard tr:first-child > th, .batpro tr:first-child > th, #storagePro tr:first-child > th { letter-spacing: .03em; font-size: 9.5px; }
/* a narrow side panel: the battery comparison's heads wrap so its Use buttons stay in view instead of scrolled off */
#storagePro th.n { white-space: normal; }
#storagePro td > button.sm { padding: 4px 8px; }
.subtab { margin-top: 4px; font-size: 12.5px; }
.subtab td.n { font: 400 10px/1.6 var(--letter); letter-spacing: .08em; text-transform: uppercase; }
.subtab tr:first-child > td { border-top: 1px solid var(--ink); }

/* disclosures (4.8): a ruled row, never a filled box. Ink above and below, a 16 px square marker with + or − in
   pen, the title at 14/600. Stacked disclosures share their middle line. (#scoutbar's dropdown and Scout's raw
   inputs are small inline toggles, not disclosures.) */
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details:not(.sb-c):not(.inputs) { margin: 12px 0; padding: 0; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: none; font-size: 13.5px; }
details:not(.sb-c):not(.inputs) + details:not(.sb-c):not(.inputs) { border-top: 0; margin-top: -12px; }
details:not(.sb-c):not(.inputs)[open] { padding-bottom: 12px; }
details:not(.sb-c):not(.inputs) > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  font: 600 14px/1.3 var(--display); color: var(--ink); }
details:not(.sb-c):not(.inputs) > summary::before { content: "+"; flex: none; width: 16px; height: 16px; border: 1px solid var(--ink);
  display: grid; place-items: center; font: 400 11px/1 var(--letter); color: var(--pen); }
details:not(.sb-c):not(.inputs)[open] > summary::before { content: "\2212"; }
details:not(.sb-c):not(.inputs) > p { margin: 0 2px 8px 28px; color: var(--muted); line-height: 1.5; }
details.panel { border: 1px solid var(--ink); background: var(--sheet); padding: 0 var(--pad); }
details.panel[open] { padding-bottom: var(--pad); }
.inputs > summary, .sb-c > summary { list-style: none; }

/* notices (4.9): 1 px border, soft ground, a lettered one-word lead, then the sentence. No left rail.
   Default is pen; pos, warn and neg follow the status colors. */
div.gnote, .flag, .ownerflag, .toolhint, .tk-alert, .banner, .err, .note, .warnbox {
  padding: 10px 12px; border: 1px solid var(--pen); background: var(--pen-soft); color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.gnote.ok, .tk-alert.ok { border-color: var(--pos); background: var(--pos-soft); }
.flag.warn, .ownerflag, .tk-alert.warn, .banner, .warnbox { border-color: var(--warn); background: var(--warn-soft); }
.gnote.bad, .flag.error, .tk-alert.error, .err { border-color: var(--neg); background: var(--neg-soft); }
.flag.info { border-color: var(--ink); background: var(--sheet); }
/* the lead: an existing bold opener is lettered; notices without one get a word */
div.gnote > b:first-child, .banner > b:first-child, .flag > b:first-child { font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; margin-right: 8px; }
.gnote.ok::before, .ownerflag::before, .flag::before, .tk-alert::before { font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; margin-right: 10px; }
.gnote.ok::before { content: "Checked"; color: var(--pos-ink); }
.ownerflag::before, .flag.warn::before, .tk-alert.warn::before { content: "Confirm"; color: var(--warn); }
.flag.error::before, .tk-alert.error::before { content: "Blocked"; color: var(--neg-ink); }
.flag.info::before, .tk-alert::before { content: "Note"; color: var(--pen); }
.gnote.bad > b:first-child, .err > b:first-child { color: var(--neg-ink); }
.banner > b:first-child { color: var(--warn); }
.flag .ref { color: var(--muted); font-size: 11.5px; }

/* stepper and gate tracker (4.10). Stepper: equal 4 px bars with 3 px gaps; done is ink, current pen, to-do hair.
   Done is not green: green means "passes a check" and nothing else. */
.gprog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.gprog span { height: 4px; background: var(--hair); }
.gprog span.done { background: var(--ink); }
.gprog span.cur { background: var(--pen-fill); }
/* gate tracker (Draft to Sealed): one bordered row of connected, lettered cells */
.gates { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 12px 0 4px; border: 1px solid var(--ink); }
.gates span { min-width: 0; padding: 8px 6px; border-right: 1px solid var(--ink); background: var(--sheet); color: var(--faint); text-align: center;
  font: 400 10px/1.3 var(--letter); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.gates span:last-child { border-right: 0; }
.gates span.done { background: var(--paper); color: var(--ink); }
.gates span.cur { background: var(--pen-fill); color: var(--on-pen); }
@media (max-width: 760px) {
  .gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gates span:nth-child(4n) { border-right: 0; }
  .gates span:nth-child(-n+4) { border-bottom: 1px solid var(--ink); }
}

/* title strip (3.3): every panel opens with one. [sheet no.] [title] [meta] on paper, lettered, ink beneath and
   between cells. The sheet number is real: S scout, D design, R review, U utility/permit, C coverage, plus the step. */
.strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--ink);
  font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; }
.strip.two { grid-template-columns: auto minmax(0, 1fr); }
.strip > span { padding: 7px 12px; border-right: 1px solid var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip > span:last-child { border-right: 0; }
.strip .s-no { font-weight: 500; }
.strip .s-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
/* in a side panel it spans the panel and stays put while the panel scrolls */
#scout > .strip, #guide > .strip { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--pad)) var(--gap); }
#side > .strip { position: sticky; top: 0; z-index: 5; }
.panel > .strip:first-child { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--gap); }
/* on a page of panels it heads the first one: the title block joins it, so no text sits on the grid */
#app > .strip { border: 1px solid var(--ink); }
#app > .strip + .tk-head { margin: 0 0 var(--gap); padding: 12px var(--pad) var(--pad); background: var(--sheet); border: 1px solid var(--ink); border-top: 0; }
.backlink { display: inline-block; margin: 0 0 var(--gap); padding: 4px 10px; background: var(--sheet); border: 1px solid var(--ink); font-size: 13.5px; }
.backlink a { text-decoration: none; }

/* empty state (4.12): dashed ink border with the minor grid showing through, a title, one sentence that says what
   to do, one small button. The one place the grid shows inside a panel. */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 16px; border: 1px dashed var(--ink);
  background-color: var(--sheet); color: var(--muted); font-size: 13.5px;
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 16px 16px; }
.empty h3 { margin: 0; font-size: 16px; color: var(--ink); }
.empty p { margin: 0; max-width: 52ch; }
.empty .btn { font-size: 12.5px; padding: 5px 10px; }

/* ---------- icons (inline SVG, see icons.js) ---------- */
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ico.lg { width: 22px; height: 22px; }

/* ---------- toast, spinner ---------- */
/* floating layers get the hard offset, never a blurred shadow */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--sheet); color: var(--ink);
  border: 1px solid var(--ink); padding: 11px 16px; z-index: 3000; max-width: min(560px, calc(100% - 32px));
  box-shadow: var(--lift) var(--lift) 0 var(--ink); font-size: 13.5px; }
.hidden { display: none !important; }
/* read by screen readers, not shown (ui.js: the toast's status region) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- map (5): the street basemap is a pale underlay; chrome is square, ink and lettered ---------- */
.leaflet-container { font-family: var(--display); background: var(--paper); }
/* street-type basemaps only (Esri streets, USGS Topo): grey, slightly purple, lower contrast, so pins, the radius
   and overlays read as ink and pen on paper. Aerial imagery and every overlay are untouched (the filter is on the
   tile images). Dark mode inverts the street tiles. */
:root { --tile-filter: grayscale(1) sepia(.16) hue-rotate(208deg) saturate(1.25) contrast(.9) brightness(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tile-filter: grayscale(1) invert(.9) sepia(.2) hue-rotate(208deg) saturate(1.3) contrast(.82) brightness(.95); } }
:root[data-theme="dark"] { --tile-filter: grayscale(1) invert(.9) sepia(.2) hue-rotate(208deg) saturate(1.3) contrast(.82) brightness(.95); }
.leaflet-tile[src*="/tiles/streets/"], .leaflet-tile[src*="/tiles/usgs_topo/"] { filter: var(--tile-filter); }
/* zoom: two stacked 30 px squares, one shared divider */
.leaflet-bar { border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; border-radius: 0 !important; background: var(--sheet); color: var(--ink);
  border-bottom: 1px solid var(--ink); font: 500 16px/30px var(--letter); }
.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-bar a:hover { background: var(--pen-soft); color: var(--ink); }
/* layers: floats over the map, so it carries the hard offset */
.leaflet-control-layers { border: 1px solid var(--ink) !important; border-radius: 0 !important; background: var(--sheet); color: var(--ink);
  box-shadow: var(--lift) var(--lift) 0 var(--ink) !important; font: 400 10.5px/1.6 var(--letter); letter-spacing: .06em; text-transform: uppercase; }
.leaflet-control-layers-toggle { width: 30px !important; height: 30px !important; background-size: 20px; filter: var(--icon-invert); }
.leaflet-control-layers-expanded { color: var(--ink); background: var(--sheet); padding: 6px 10px 6px 6px; }
.leaflet-control-layers-separator { border-top-color: var(--hair); }
.leaflet-container .leaflet-control-attribution { background: color-mix(in srgb, var(--sheet) 85%, transparent); color: var(--muted); font-size: 9px; }
.leaflet-control-attribution a { color: var(--pen); }
/* scale bar, drafted: alternating ink and sheet segments over a lettered value */
.leaflet-control-scale-line { position: relative; background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); border-top: 0;
  padding: 7px 6px 2px; font: 400 9.5px/1.2 var(--letter); letter-spacing: .06em; text-transform: uppercase; }
.leaflet-control-scale-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-top: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 25%, var(--sheet) 25% 50%); }
/* tooltips and equipment labels (NEW SWGR, XFMR, BATTERY): a square sheet box, ink border, lettered, no pointer */
.leaflet-tooltip, .lbl { background: var(--sheet) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; border-radius: 0;
  box-shadow: none !important; padding: 3px 6px; font: 400 10px/1.3 var(--letter); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.leaflet-tooltip::before { display: none; }
/* equipment symbols pop from their own centers during the layout draw */
path.d-eq { transform-box: fill-box; transform-origin: center; }
/* cursor readout, bottom left: lat/long on Scout, feet and inches from the site point on Design */
.readout { position: absolute; left: 10px; bottom: 34px; z-index: 800; padding: 4px 8px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink);
  font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; white-space: pre; font-variant-numeric: tabular-nums; pointer-events: none; }
@media (pointer: coarse) { .readout { display: none; } }
/* Leaflet 1.9 blends tiles with "plus-lighter", which shows bright lines where scaled imagery tiles meet:
   draw them normally and overlap each by a pixel instead */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.leaflet-tile-container img.leaflet-tile { width: 257px !important; height: 257px !important; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  header { gap: 10px; padding: 0 12px; }
  .navlinks a:not(.on) { display: none; }
}

/* a Beta country (Find a site, design): what's included and what follows a local engineer's sign-off */
.s-beta { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  background: var(--warn-soft); border-left: 3px solid var(--amber); color: var(--ink); }
.s-beta.prev { background: var(--pen-soft); border-left-color: var(--pen); }
.s-beta .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.locked-list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hair, var(--pen-soft)); }
.locked-list li { display: flex; gap: 8px; align-items: center; padding: 8px 2px; font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--hair, var(--pen-soft)); }
.locked-list li .ico { width: 15px; height: 15px; flex: none; }
.locked-list li span { margin-left: auto; font: 400 9.5px/1 var(--letter); letter-spacing: .08em; text-transform: uppercase; }
/* home: the public Beta countries, each opening Find a site already set to it */
.h-intl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.h-intl a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.h-intl .cbadge { font: 400 9px/1 var(--letter); letter-spacing: .08em; padding: 3px 5px; border: 1px solid var(--warn); color: var(--warn); }