/* map-shell.css — THE MAP PAGE REDESIGN'S LOOK (Kye, 2026-10-08), and nothing else.
 *
 * Loaded by index.html ONLY, after theme.css and design-system.css, and every rule is keyed
 * on <html data-shell="rail"> — the redesigned Map shell. It re-points tokens; it never
 * re-declares a component. So the signed-off palettes stay byte for byte where they live
 * (design-system.css, theme.css, both guarded), every other page is untouched, and the
 * whole look can be rolled back by unlinking this one file — or promoted app-wide later by
 * moving these values into design-system.css.
 *
 * Kye's rulings this file carries:
 *   - "make the design dark only" — the Map is dark-only (theme-scope.js DARK_ONLY), so the
 *     dark half below is the Map's whole palette;
 *   - "why is it darker then before? change it back to the other colour we had for dark" —
 *     the BLUE-GREY grounds of the approved mock-up (panels #1b1e23, not the neutral
 *     near-black #141414 of design-system.css);
 *   - "i want civillio blue" … "a for now" — Civillo's #1e78d6 is the accent ON THE MAP PAGE
 *     ONLY; every other page keeps the one blue #386ee3 (design-system.css).
 *
 * WHAT MOVES: the dark grounds and lines (every neutral grey under 0x40 in design-system.css's
 * dark scope, lifted by +7/+10/+15 into the blue-grey — #141414 → #1b1e23 — and theme.css's
 * warm grounds mapped to the mock's), the four theme.css inks (warm cream → neutral, same
 * level), and the accent family. WHAT DOES NOT: the ds INK ramp (thirteen neutral greys,
 * pinned and contrast-floored by the darkink guards) and every status colour.
 * --ds-nav-ground is left alone: the shared bar does not paint on the Map's shell.
 */

/* ── the type: Roboto, as the mock-up sets it (Kye 2026-10-08: "i want exactly the same as the
   mockup") ─────────────────────────────────────────────────────────────────────────────────
   Self-hosted (web/app/fonts/, SIL OFL 1.1 — fonts/OFL-Roboto.txt), never a third-party
   request: Google Fonts' v51 files, ONE variable file per script carrying every weight, so
   400 and 500 both come from these two. Map page only, through the one token every Map
   rule reads (--ds-font); Arial stays the fallback while the file loads (font-display:swap). */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/Roboto-v51-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/Roboto-v51-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root[data-shell="rail"] { --ds-font: Roboto, Arial, Helvetica, sans-serif; }
/* Nothing else is needed: the page's base face already reads the token (index.html `:root, :root body`,
   map-text-standard P4) and its form controls already inherit it (index.html's control-family rule) —
   so the one re-pointed token is the whole switch, and theme.css's literal Arial cannot take it back. */

/* ── the accent: Civillo blue, Map page only ─────────────────────────────── */
:root[data-shell="rail"] {
  --ds-accent:#1e78d6;
  --ds-accent-hov:#1a6cc4;
  --ds-accent-press:#1866b8;
  --ds-accent-soft:rgba(30,120,214,.12);
  --ds-accent-soft-hov:rgba(30,120,214,.20);
  --ds-accent-ring:rgba(30,120,214,.35);
  --ds-accent-tint:#8fbce9;
  /* TEXT in the blue goes a hair darker than the fill (Kye 2026-10-10, asked: "A text shade #1b70c9"): the Civillo
     #1e78d6 reads 4.46:1 on white, 0.04 under the 4.5:1 floor for small text; #1b70c9 reads 4.99 on white and 4.62 on
     the panel grey. The rail, the band and the filled buttons keep #1e78d6 (--ds-accent). */
  --ds-accent-ink:#1b70c9;
  --ds-accent-on-dark:#5ea8f0;
}

/* ── the dark palette: blue-grey grounds, Civillo ink ─────────────────────── */
:root[data-shell="rail"][data-theme="dark"] {
  /* the accent's dark half: text in the hue lifted toward white, as #7ea1ed is for #386ee3 */
  --ds-accent-ink:#5ea8f0;
  --ds-accent-on-dark:#5ea8f0;
  --ds-accent-wash:#1b232e;     /* the hue at 6% over --ds-bg, as design-system.css derives its own */

  /* design-system.css's dark grounds and lines, +7/+10/+15 into the blue-grey */
  --ds-page:#15181d; --ds-bg:#1b1e23; --ds-bar:#1d2025; --ds-row:#1e2126; --ds-row-hov:#23262b;
  --ds-head:#212429; --ds-field:#171a1f; --ds-chipbg:#25282d; --ds-nav:#1e2126;
  --ds-panel:#25282d; --ds-panel-2:#2d3035; --ds-quiet-bg:#23262b;
  --ds-seg:#202328; --ds-seg-hov:#26292e;
  --ds-line:#2d3035; --ds-line-2:#313439; --ds-line-3:#3a3d42;
  --ds-rule:#272a2f; --ds-rule-2:#26292e; --ds-shell:#33363b; --ds-edge:#36393e;
  --ds-faint:#414449; --ds-quiet-line:#35383d;
  --ds-cls-unknown-bg:#23262b; --ds-cls-unknown-bd:#35383d;
  --ds-fp-field:#212429; --ds-fp-on-pick:#1b1e23;
  --ds-hairline:#2d3035; --ds-track:#2d3035; --ds-drop:#191c21; --ds-avatar:#25282d;

  /* theme.css's warm grounds → the mock's blue-grey */
  --bg:#0f1114; --sidebar:#1b1e23; --panel:#1f2329; --panel2:#242931;
  --line:#333941; --line-soft:#272c33; --field:#15181c; --field-line:#3a414b;
  --pill:#2a3038; --nav-bg:#1b1e23; --hover:#2b313a;
  /* …and its four warm inks → neutral at the same level (cream on blue-grey reads dirty) */
  --ink:#f5f6f7; --ink2:#bfc2c6; --muted:#a3a6aa; --faint:#a3a6aa;
  /* the tree's count bubble (the mock's .cnt) */
  --count-bg:#2a3038; --count-ink:#b4bcc6;
}