/* Supply-chain brain: design tokens and content styles for the business map
 * (map.html: the Business map).
 *
 * This file is the ONLY place the map's colours and font sizes are defined.
 * map.html uses var(--...) and never redefines a token, so the two views cannot
 * drift apart (tests/test_viz_nav_ui.py checks this, plus contrast and font
 * sizes). The header and the settings card come from chrome.css, shared with
 * the rings graph (index.html); they are presenter chrome at the source viz's
 * own sizes, while everything the room reads is held to the rules below.
 *
 * Built for a projector in a lit room:
 *   - base text 18px, bumped to 21px on screens 1700px and wider (1080p);
 *   - ink on page is near black on white (or the reverse in dark mode);
 *   - signal colours (blue, orange, purple, grey) are darkened until thin lines
 *     reach 3:1 on the page;
 *   - colour is never the only signal: coverage also has a word and a line
 *     style, classes also have a shape.
 * Fonts: IBM Plex Mono (labels) and Quicksand (wordmark) are embedded as data:
 * URLs in vendor/fonts.css (SIL OFL), because browsers refuse font files on
 * file://; body text uses the system font. Nothing is downloaded.
 * Look and palette follow the source viz named in COPIED_FROM.md.
 */

/* ---- design tokens: light (default) -------------------------------------- */
/* The source viz palette (warm page, white cards, pink accent), with the
 * signal colours darkened just enough to stay readable on a projector. */
:root {
  --page: #FAF7F2; --surface: #F3EEE6; --card: #FFFFFF; --ink: #16130F;
  --muted: #52493E; --line: #8E8578; --hair: #E9E2D8; --edge: #9280BA; --halo: #FAF7F2; --plate: #E2DBD0;
  --pink: #EC3D8F; --accent: #B81F66; --accent-ink: #FFFFFF; --focus: #EC3D8F;
  --seg-on-bg: #16130F; --seg-on-fg: #FFFFFF; --chip-bg: #F6F2EB; --input: #F6F2EB;
  --cov-populated: #2F7FD1; --cov-populated-bg: #F1F6FD;
  --cov-partial: #C4700F; --cov-partial-bg: #FDF3E6;
  --cov-sample: #8A5CD6; --cov-sample-bg: #F5F0FD;
  --cov-none: #8E8578; --cov-none-bg: #FAF7F2;
  --issue: #D93A3A;
  --shadow: 0 6px 24px rgba(60, 45, 25, 0.06);
  /* Text sizes: the rings graph's drawer (13px text, 16px title, 10px mono labels).
     The Text size slider sets --ts on <html> (1.0 to 2.0) and scales them all. */
  --fs: calc(13px * var(--ts, 1)); --fs-sm: calc(10px * var(--ts, 1)); --fs-lg: calc(14px * var(--ts, 1));
  --fs-xl: calc(16px * var(--ts, 1)); --fs-h2: calc(16px * var(--ts, 1)); --fs-kpi: calc(19px * var(--ts, 1));
  --fs-graph: calc(11px * var(--ts, 1));
  --font: "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Thai", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wordmark: "Quicksand", "Helvetica Neue", system-ui, sans-serif;
}
[data-theme="dark"] {
  --page: #0F0D11; --surface: #1E1B24; --card: #17151C; --ink: #F2EDE5;
  --muted: #D5CDBF; --line: #877F73; --hair: #2A2634; --edge: #B29EDC; --halo: #0F0D11; --plate: #332E3D;
  --pink: #F45FA2; --accent: #F45FA2; --accent-ink: #0F0D11; --focus: #F45FA2;
  --seg-on-bg: #F2EDE5; --seg-on-fg: #17151C; --chip-bg: #1E1B24; --input: #1E1B24;
  --cov-populated: #5AA7F0; --cov-populated-bg: #18212E;
  --cov-partial: #F5A623; --cov-partial-bg: #261D10;
  --cov-sample: #C7A6F2; --cov-sample-bg: #211B2E;
  --cov-none: #877F73; --cov-none-bg: #0F0D11;
  --issue: #FF6B6B;
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* ---- base ----------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--font);
  font-size: var(--fs); line-height: 1.4; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
code, .mono { font-family: var(--mono); }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* ---- buttons, chips ------------------------------------------------------- */
.btn { border: 1.5px solid var(--ink); background: transparent; border-radius: 999px;
  padding: 6px 18px; cursor: pointer; font-family: var(--mono); font-size: var(--fs); font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; }
.btn:hover { background: var(--ink); color: var(--page); }
/* Filled call to action: accent on accent-ink passes 4.5:1 in both themes. */
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 8px;
  font-family: var(--font); text-transform: none; letter-spacing: 0.2px; }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--page); }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 2px 12px; font-size: var(--fs); font-weight: 600;
  background: var(--card); white-space: nowrap; }
.chip.cov-populated { border-color: var(--cov-populated); background: var(--cov-populated-bg); }
.chip.cov-partial { border-color: var(--cov-partial); background: var(--cov-partial-bg); }
.chip.cov-sample { border-color: var(--cov-sample); background: var(--cov-sample-bg); }
.chip.cov-not-populated { border-style: dashed; border-color: var(--cov-none); }

/* ---- side panel: the same drawer as the rings graph (#detail) ------------- */
#panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 50vw); z-index: 20;
  background: var(--card); border-left: 1px solid var(--hair); overflow-y: auto; padding: 18px 22px 40px;
  font-size: var(--fs); line-height: 1.55; }
#panel.left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--hair); }
#closeBtn { position: sticky; top: 0; float: right; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: calc(20px * var(--ts, 1)); line-height: 1; padding: 0 2px; }
#closeBtn:hover { color: var(--ink); }
#panel h2 { font-size: var(--fs-h2); line-height: 1.25; margin: 10px 0 6px; overflow-wrap: anywhere; }
#panel h3 { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
#panel p { margin: 6px 0; }
#panel .chips-row { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 36px; }
#panel .chip { font-family: var(--mono); font-size: calc(9.5px * var(--ts, 1)); font-weight: 400; padding: 2px 8px;
  border-width: 1px; color: var(--muted); }
/* Flex, not a grid: boxes share the row but never get narrower than their number. */
.kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.kpi { flex: 1 1 0; min-width: min-content; border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px;
  background: var(--chip-bg); }
.kpi-label { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); }
.kpi-num { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-rule { color: var(--muted); font-size: calc(11px * var(--ts, 1)); }
table.facts { border-collapse: collapse; width: 100%; font-size: calc(11.5px * var(--ts, 1)); font-variant-numeric: tabular-nums; }
table.facts th, table.facts td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.facts td.num { text-align: right; font-weight: 600; white-space: nowrap; }
table.facts td.rule { color: var(--muted); }
dl.evidence { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; }
dl.evidence dt { font-family: var(--mono); font-size: calc(11px * var(--ts, 1)); font-weight: 600; color: var(--muted); padding-top: 1px; }
dl.evidence dd { overflow-wrap: anywhere; }
.callout { border: 1.5px dashed var(--cov-none); border-radius: 10px; background: var(--chip-bg); padding: 8px 12px; margin: 10px 0; }
ul.plain { list-style: none; }
ul.plain li { margin: 3px 0; }
.linkbtn { border: 0; background: none; color: var(--accent); text-decoration: underline;
  cursor: pointer; font-size: var(--fs); text-align: left; padding: 0; }

/* ---- legend and loading --------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: var(--fs); color: var(--muted); }
.legend .item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 40px; text-align: center; background: var(--page); font-family: var(--mono); font-size: var(--fs-xl);
  letter-spacing: 2px; color: var(--muted); z-index: 40; }