/* Bill of Materials — shared tokens and base.
   Every colour, type size and shared dimension lives here; other files only read these tokens.
   Appearance (set on <html> by appearance.js before first paint, defaults in brackets):
     data-theme  light | dark                         [light]  ("Device" is resolved to one of these)
     data-skin   classic | graphite | ocean | contrast | renaissance [classic]
     data-font   system | readable | rounded | serif | mono [system]
     data-size   s | m | l | xl                       [m]  → --fs 14 / 16 / 18 / 20px
     data-motion full | reduce                        [OS setting]
   Severity colours are not skinned (they carry meaning); only the high-contrast skin deepens them to keep text ≥ 7:1. */
:root {
  /* light · classic: pure white page, titanium-white surfaces, neutral (not warm) greys */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5f7;      /* titanium white */
  --band: #f6f7f9;           /* alternate map bands / 3D level planes */
  --ink: #15171c;
  --ink-2: #3f434b;
  --muted: #5b606a;          /* 6.3:1 on white */
  --line: #e4e6ea;
  --line-strong: #c3c8cf;
  --accent: #2f45c9;         /* one accent: buttons, selection, focus */
  --accent-ink: #ffffff;
  --accent-soft: #e8ebfb;
  --focus: #2f45c9;
  /* severity: as text ≥4.5:1 on every surface; the letter colour (--sev-ink) ≥4.5:1 on each fill */
  --sev-critical: #b3122a;
  --sev-high: #b5480a;
  --sev-medium: #856300;
  --sev-low: #4f6478;
  --sev-none: #6c717a;
  --sev-ink: #ffffff;        /* letter on a severity fill */
  --node-clean: #858b95;     /* clean package body in 3D (≥3:1 on every light surface) */
  --node-clean-fill: #ffffff;
  --node-clean-stroke: #3f434b;
  --ok: #1d7a4d;
  --ok-soft: #e3f1e9;
  --halo: rgba(179, 18, 42, .13);
  --edge: #858b95;           /* ≥3:1 on every light surface */
  --edge-risky: #5f646d;     /* ≥3:1 even when dimmed */
  --edge-hi: #2f45c9;
  --edge-w: 1.25px;
  --dim-fill: #e9ebef;       /* C1: a dimmed package's body (never opacity over a severity fill) */
  --edge-dim: #8a8f98;       /* C1: dimmed links, ≥3:1 on the bands */
  --ink-3: #686d76;          /* C1: dimmed labels, ≥4.5:1 on white, the bands and --dim-fill's surroundings */
  --plate-fill: var(--band); /* item 65: Layers floor plates */
  --plate-edge: var(--line);
  --dim-opacity: .72;        /* lowest opacity that keeps every glyph and link ≥3:1 when dimmed (.55 would not) */
  --shadow: 0 1px 2px rgba(21, 23, 28, .06), 0 8px 24px rgba(21, 23, 28, .07);
  --scrim: rgba(21, 23, 28, .32);
  --is-dark: 0;
  /* skin previews in the Aa menu (fixed: each shows its own skin's light / dark accent) */
  --sw-classic-l: #2f45c9; --sw-classic-d: #8a9bff;
  --sw-graphite-l: #15171c; --sw-graphite-d: #eceef2;
  --sw-ocean-l: #0b6e79; --sw-ocean-d: #5cc5d0;
  --sw-contrast-l: #0000c8; --sw-contrast-d: #ffd84a;
  --sw-renaissance-l: #a44d13; --sw-renaissance-d: #e0c7a0;   /* burnt sienna / parchment gold */

  /* type */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-readable: Verdana, "Segoe UI", Tahoma, "DejaVu Sans", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font: var(--font-system);
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs: 16px;
  --fs-xs: calc(var(--fs) * .8125);
  --fs-sm: calc(var(--fs) * .875);
  --fs-md: var(--fs);
  --fs-lg: calc(var(--fs) * 1.125);
  --fs-xl: calc(var(--fs) * 1.375);
  --fs-num: calc(var(--fs) * 2.25);
  --fs-letter: max(11px, calc(var(--fs) * .6875));   /* severity letters C/H/M/L */
  --fs-micro: max(12px, calc(var(--fs) * .75));      /* smallest text allowed (keys, badges) */
  --map-label: max(12px, calc(var(--fs) * .75));

  /* space, shape, layers */
  --r: 10px;
  --gutter: clamp(16px, 4vw, 56px);
  /* C1 layout tokens (round 3). <html data-layout="phone|phone-land|tablet|desk"> and data-input="touch|mouse" are set
     before first paint by app.html and kept current by app.js; style off those attributes, not off widths. */
  --bar-h: 56px;             /* 48px in phone-land */
  --strip-h: 88px;           /* desk: fixed in every state (taller only at text size L / XL) */
  --panel-w: 400px;          /* desk ≥1280; 360px at 1024–1279 */
  --sheet-peek: 72px;        /* phone; 88px tablet */
  --sheet-half: 44dvh;       /* phone; 50dvh tablet */
  --sheet-full: calc(92dvh - var(--safe-t));   /* phone; 90dvh tablet */
  --map-toolbar-h: 48px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --tap: 32px;
  --z-map-ui: 3;
  --z-sheet: 20;
  --z-toast: 30;
  --z-popover: 40;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (max-width: 1279px) { :root { --panel-w: 360px; } }
@media (pointer: coarse) { :root { --tap: 44px; } }
:root[data-input="touch"] { --tap: 44px; }
:root[data-layout="phone-land"] { --bar-h: 48px; }
:root[data-layout="tablet"] { --sheet-peek: 88px; --sheet-half: 50dvh; --sheet-full: calc(90dvh - var(--safe-t)); }
:root[data-size="l"] { --strip-h: 104px; }
:root[data-size="xl"] { --strip-h: 120px; }
@supports not (height: 1dvh) {
  :root { --sheet-half: 44vh; --sheet-full: calc(92vh - var(--safe-t)); }
  :root[data-layout="tablet"] { --sheet-half: 50vh; --sheet-full: calc(90vh - var(--safe-t)); }
}

/* dark · classic: every node colour, icon and link ≥3:1 against the map, text ≥4.5:1 */
:root[data-theme="dark"] {
  --bg: #0f1013; --surface: #16171b; --surface-2: #1e2025; --band: #1c1e23; --ink: #eceef2; --ink-2: #c4c8cf; --muted: #9da2ab;
  --line: #2a2d33; --line-strong: #4a4f58; --accent: #8a9bff; --accent-ink: #0d0f1a; --accent-soft: #232a4d; --focus: #a9b5ff;
  --sev-critical: #ff6b78; --sev-high: #ff9a4d; --sev-medium: #e3bd3c; --sev-low: #93a8bd; --sev-none: #8b9099; --sev-ink: #111215;
  --node-clean: #9aa1ab; --node-clean-fill: #2a2d33; --node-clean-stroke: #c4c8cf;
  --ok: #5cc98f; --ok-soft: #173326; --halo: rgba(255, 107, 120, .16); --edge: #6f7580; --edge-risky: #9aa0aa; --edge-hi: #8a9bff;
  --dim-fill: #2a2d33; --edge-dim: #6a707a; --ink-3: #9ea3ab;
  --plate-fill: rgba(255, 255, 255, .04); --plate-edge: rgba(255, 255, 255, .12);
  --dim-opacity: .7;         /* dimmed glyphs are also desaturated (map-draw.css): .7 keeps every one ≥3:1 on the dark bands */
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --scrim: rgba(0, 0, 0, .5);
  --is-dark: 1;
  color-scheme: dark;
}

/* skin · graphite: neutral greys, accent = ink */
:root[data-skin="graphite"]:not([data-theme="dark"]) {
  --surface-2: #f3f3f4; --band: #f5f5f6; --line: #e3e3e5; --line-strong: #c4c4c8;
  --accent: #15171c; --accent-ink: #ffffff; --accent-soft: #ececee; --focus: #15171c; --edge-hi: #15171c;
}
:root[data-skin="graphite"][data-theme="dark"] {
  --bg: #111111; --surface: #18181a; --surface-2: #202022; --band: #1d1d1f; --line: #2c2c2f; --line-strong: #4c4c50;
  --accent: #eceef2; --accent-ink: #15171c; --accent-soft: #2e2f33; --focus: #eceef2; --edge-hi: #eceef2;
}

/* skin · ocean */
:root[data-skin="ocean"]:not([data-theme="dark"]) {
  --surface-2: #f2f7f8; --band: #f1f6f7; --line: #dde7e9; --line-strong: #b9c9cc;
  --accent: #0b6e79; --accent-ink: #ffffff; --accent-soft: #e0f0f2; --focus: #0b6e79; --edge-hi: #0b6e79;
}
:root[data-skin="ocean"][data-theme="dark"] {
  --bg: #0c1214; --surface: #12191c; --surface-2: #1a2427; --band: #172124; --line: #253337; --line-strong: #425559;
  --accent: #5cc5d0; --accent-ink: #04262a; --accent-soft: #123a40; --focus: #7fd6df; --edge-hi: #5cc5d0;
}

/* skin · high contrast: white/black, strong lines, text ≥7:1, thicker map edges, no tints, no opacity dimming */
:root[data-skin="contrast"]:not([data-theme="dark"]) {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --band: #ffffff;
  --ink: #000000; --ink-2: #1f2125; --muted: #3b3e45; --line: #6b6f76; --line-strong: #3b3e45;
  --accent: #0000c8; --accent-ink: #ffffff; --accent-soft: #e6e6fb; --focus: #0000c8;
  --sev-critical: #9e1026; --sev-high: #963c00; --sev-medium: #6b5100; --sev-low: #435669; --sev-none: #5d6169; --sev-ink: #ffffff;
  --node-clean: #5d6169; --node-clean-fill: #ffffff; --node-clean-stroke: #000000;
  --ok: #0a5c34; --ok-soft: #ffffff;
  --edge: #5d6169; --edge-risky: #3b3e45; --edge-hi: #0000c8; --edge-w: 1.75px; --dim-opacity: 1;
  --dim-fill: #eeeeee; --edge-dim: #5d6169; --ink-3: #3b3e45;
  --plate-fill: #ffffff; --plate-edge: #6b6f76;
  --shadow: 0 0 0 1px #000000;
}
:root[data-skin="contrast"][data-theme="dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #000000; --band: #000000;
  --ink: #ffffff; --ink-2: #ececec; --muted: #c9cbcf; --line: #8a8f98; --line-strong: #c9cbcf;
  --accent: #ffd84a; --accent-ink: #000000; --accent-soft: #2e2600; --focus: #ffd84a;
  --sev-critical: #ff7a86; --sev-high: #ffa25c; --sev-medium: #f0c94a; --sev-low: #a7bbcf; --sev-none: #a0a5ad; --sev-ink: #000000;
  --node-clean: #a0a5ad; --node-clean-fill: #000000; --node-clean-stroke: #ffffff;
  --ok: #6ee0a0; --ok-soft: #000000;
  --edge: #a0a5ad; --edge-risky: #c9cbcf; --edge-hi: #ffd84a; --edge-w: 1.75px; --dim-opacity: 1;
  --dim-fill: #1a1a1a; --edge-dim: #a0a5ad; --ink-3: #c9cbcf;
  --plate-fill: #000000; --plate-edge: #8a8f98;
  --shadow: 0 0 0 1px #ffffff;
}

/* skin · renaissance: warm parchment pastel (added skin; light values from the designed palette, see HANDOFF-skin.md).
   Earth-pigment ink on an aged-gesso ground, azurite accent. Severity keeps the red→orange→gold→blue ramp and is
   always paired with the C/H/M/L letter (.sev). All text ≥4.5:1 and every graphic ≥3:1 on the parchment surfaces. */
:root[data-skin="renaissance"]:not([data-theme="dark"]) {
  --bg: #f4ecdb; --surface: #fbf5e9; --surface-2: #f0e7d4; --band: #f1e8d6;
  --ink: #2a2216; --ink-2: #4b4130; --muted: #6c6149;
  --line: #d8ccb2; --line-strong: #c4b698;
  --accent: #335b85; --accent-ink: #fbf5e9; --accent-soft: #e2eaf2; --focus: #335b85;
  --sev-critical: #a12a35; --sev-high: #a44d13; --sev-medium: #826218; --sev-low: #3a6a90; --sev-none: #6c6149; --sev-ink: #ffffff;
  --node-clean: #7a6f57; --node-clean-fill: #f1e8d6; --node-clean-stroke: #4b4130;
  --ok: #44704e; --ok-soft: #e9f0e2; --halo: rgba(161, 42, 53, .14);
  --edge: #6f6447; --edge-risky: #574e36; --edge-hi: #335b85;
  --dim-fill: #e7ddc6; --edge-dim: #79704f; --ink-3: #685d48;
  --plate-fill: var(--band); --plate-edge: var(--line);
  --shadow: 0 1px 2px rgba(74, 55, 20, .08), 0 8px 24px rgba(74, 55, 20, .12);
  --scrim: rgba(42, 34, 22, .34);
}
/* dark · renaissance: a warm umber night (bistre ground, parchment ink) — my addition; the designed palette is light-only. */
:root[data-skin="renaissance"][data-theme="dark"] {
  --bg: #14110b; --surface: #1b1710; --surface-2: #241f16; --band: #201b13;
  --ink: #f1e8d6; --ink-2: #d8ccb2; --muted: #ab9f84;
  --line: #332c20; --line-strong: #544a38;
  --accent: #8fb4d8; --accent-ink: #14110b; --accent-soft: #233244; --focus: #a9c6e4;
  --sev-critical: #ff8a84; --sev-high: #f2a257; --sev-medium: #e0bb55; --sev-low: #9ab6cf; --sev-none: #a99e84; --sev-ink: #14110b;
  --node-clean: #a99e84; --node-clean-fill: #241f16; --node-clean-stroke: #d8ccb2;
  --ok: #6fc292; --ok-soft: #1a2a1c; --halo: rgba(255, 138, 132, .16);
  --edge: #8a7f66; --edge-risky: #ab9f84; --edge-hi: #8fb4d8;
  --dim-fill: #241f16; --edge-dim: #7a6f57; --ink-3: #b3a78c;
  --plate-fill: rgba(255, 255, 255, .04); --plate-edge: rgba(255, 255, 255, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --scrim: rgba(0, 0, 0, .5);
}

/* font */
:root[data-font="readable"] { --font: var(--font-readable); --font-display: var(--font-readable); }
:root[data-font="rounded"] { --font: var(--font-rounded); --font-display: var(--font-rounded); }
:root[data-font="serif"] { --font: var(--font-serif); --font-display: var(--font-serif); }
:root[data-font="mono"] { --font: var(--mono); --font-display: var(--mono); }

/* text size */
:root[data-size="s"] { --fs: 14px; }
:root[data-size="m"] { --fs: 16px; }
:root[data-size="l"] { --fs: 18px; }
:root[data-size="xl"] { --fs: 20px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/1.5 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
kbd {
  font: 500 var(--fs-micro)/1 var(--mono); display: inline-block; min-width: 20px; padding: 4px 5px; text-align: center;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--ink-2); background: var(--surface);
}

/* top bar */
.bar {
  display: flex; align-items: center; gap: 16px; height: var(--bar-h); padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: var(--fs-md); }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand .b-sub { color: var(--muted); font-weight: 500; }
.brand svg .mk-l { fill: none; stroke: var(--line-strong); stroke-width: 1.3; }
.brand svg .mk-r { fill: var(--ink); }
.brand svg .mk-n { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.3; }
.brand svg .mk-v { fill: var(--sev-critical); }
.bar .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 8px; border: 1px solid transparent; font-weight: 600; font-size: calc(var(--fs) * .9375); cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--ink-2); }
.btn-text { background: none; border: 0; padding: 0 4px; height: auto; color: var(--accent); font-weight: 600; cursor: pointer; font-size: var(--fs-sm); }
.btn-sm { height: max(34px, var(--tap)); padding: 0 12px; font-size: var(--fs-sm); }

/* severity marks (used by map + tables): colour + letter, never colour alone */
.sev { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.sev::before {
  content: attr(data-l); display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  font: 700 var(--fs-letter)/1 var(--font); color: var(--sev-ink); background: var(--sev-none);
}
.sev-critical { color: var(--sev-critical); } .sev-critical::before { background: var(--sev-critical); }
.sev-high { color: var(--sev-high); } .sev-high::before { background: var(--sev-high); }
.sev-medium { color: var(--sev-medium); } .sev-medium::before { background: var(--sev-medium); }
.sev-low { color: var(--sev-low); } .sev-low::before { background: var(--sev-low); }
.sev-none, .sev-unknown { color: var(--muted); }

/* motion: nothing moves at rest; transitions only answer an input. "Reduce motion" (Aa menu, default = OS) turns them off.
   The media query covers the moment before appearance.js has run (no data-motion yet). */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) *, :root:not([data-motion]) *::before, :root:not([data-motion]) *::after {
    transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important;
  }
}