/* Application styles for web/index.html.
   Extracted verbatim from the former inline <style> block.
   Design-system tokens live in the :root section below; keep --st-*
   in sync with STATUS_COLORS (JS). See CLAUDE.md. */
:root {
  /* Brand accent — single, used for active / selected / focus / links */
  --accent: #4363d8;
  --accent-strong: #2f49b8;
  --accent-weak: #eef2ff;            /* tint: hover / selected / highlight */

  /* Neutral surfaces & text */
  --bg: #f5f6f8;                     /* app chrome / page background */
  --surface: #ffffff;               /* cards, panels, canvas */
  --surface-2: #fafbfc;             /* subtle alternate surface */
  --border: #e6e8ec;                /* hairline */
  --border-strong: #d4d7dd;

  --text: #1f2329;                  /* primary */
  --text-2: #5b6470;                /* secondary */
  --text-3: #8b929c;                /* meta / tertiary */

  /* Status — MUST mirror JS STATUS_COLORS (graph nodes/rings) */
  --st-release: #2e7d32;
  --st-deprecated: #b00020;
  --st-draft: #f9a825;
  --st-undefined: #9e9e9e;
  --st-warn-text: #b9860b;

  /* Source (catalog origin) — mirrored in JS SOURCE_COLORS for badges */
  --src-catenax: #0e7c66;        /* Catena-X — teal */
  --src-idta:    #6a4fbf;        /* IDTA     — purple */
  --src-external:#8b929c;        /* third-party (BatteryPass…) — grey */

  /* Type scale */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
  --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;

  /* Radius / elevation / motion */
  --r-sm: 6px; --r-md: 8px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 2px 10px rgba(16,24,40,.08);
  --shadow-lg: 0 10px 28px rgba(16,24,40,.14);
  --legend-bg: rgba(255,255,255,.92);  /* graph legend / overlay panel */
  --dur: .15s; --ease: cubic-bezier(.2,.6,.2,1);
}
/* Dark theme — overrides neutrals, accent, elevation only.
   --st-* are intentionally NOT overridden: they MUST stay equal to JS
   STATUS_COLORS so the D3 graph (JS-driven) and the CSS legend/KPIs
   keep the exact same status hues. Categorical graph fills (KIND/DEP,
   also JS) are vivid and read fine on the dark canvas. */
:root[data-theme="dark"] {
  --accent: #7e9bff;
  --accent-strong: #6f8cff;
  --accent-weak: rgba(126,155,255,.16);

  --bg: #0e1116;
  --surface: #161a20;
  --surface-2: #1c212a;
  --border: #2a313c;
  --border-strong: #3a4452;

  --text: #e7eaef;
  --text-2: #aab2bf;
  --text-3: #7c8593;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 2px 12px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 30px rgba(0,0,0,.65);
  --legend-bg: rgba(22,26,32,.92);
}
* { box-sizing: border-box; }
html { scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong);
  border-radius: var(--r-pill); border: 2px solid transparent;
  background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3);
  background-clip: padding-box; }
html, body {
  margin: 0; height: 100%; color: var(--text); line-height: 1.5;
  font-family: var(--font-sans); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
#app { display: flex; flex-direction: column; height: 100vh; }

/* App bar — persistent product identity, above the tab nav */
#appbar {
  display: flex; align-items: center; gap: var(--sp-3); flex: none;
  padding: var(--sp-2) var(--sp-5); background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-md); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: var(--shadow-sm);
}
.brand .bt { display: flex; flex-direction: column; line-height: 1.15; }
.brand .bn { font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: .2px; color: var(--text); }
.brand .bs { font-size: var(--fs-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .9px; }
.view-head h1 { margin: 0 0 2px; font-size: var(--fs-xl);
  color: var(--text); }
.view-head p { margin: 0; font-size: var(--fs-sm); color: var(--text-3); }
#theme-toggle {
  margin-left: auto; display: flex; align-items: center;
  justify-content: center; width: 32px; height: 32px; padding: 0;
  cursor: pointer; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#theme-toggle:hover { color: var(--text);
  background: var(--accent-weak); border-color: var(--accent); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; }
#theme-toggle svg { width: 16px; height: 16px; }
#theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .ico-sun { display: block; }

/* Top tabs */
#tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) 0;
  border-bottom: 1px solid var(--border); background: var(--bg); }
.tab {
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-md); cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent;
  color: var(--text-2);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.active {
  background: var(--surface); color: var(--text); font-weight: 600;
  border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent);
}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#views { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; display: none; }
.view.active { display: flex; }

/* Home */
/* Cap the reading width so the catalog table doesn't sprawl across a wide
   monitor (name far left, meta far right with a huge void between). */
#home > * { max-width: 1200px; width: 100%; }
#home { flex-direction: column; overflow-y: auto;
  padding: var(--sp-4) var(--sp-5); gap: var(--sp-4); }
/* Overview strip — compact stats above the status KPIs. */
#overview { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Overview = a quiet, flat context strip (alt surface, no elevation) so it
   reads as a different layer than the elevated, interactive status KPIs
   below it (white tiles with a coloured edge + hover lift). */
.ov {
  padding: var(--sp-3) var(--sp-4); min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); }
.ov .lbl { font-size: var(--fs-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; }
.ov .val { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2;
  margin-top: 2px; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
/* Textual values (Family, Updated) are longer than the numeric ones — a
   notch smaller so they stay on one line and don't look cramped next to
   the big tabular numbers. */
.ov .val.txt { font-size: var(--fs-lg); }
.ov .sub { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-3);
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  font-variant-numeric: tabular-nums; }
.ov .sub .d { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.ov a { color: var(--accent); text-decoration: none; }
.ov a:hover { text-decoration: underline; }
.ov-link { cursor: pointer; transition: border-color var(--dur) var(--ease); }
.ov-link:hover { border-color: var(--accent); }
#kpis { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.kpi {
  min-width: 130px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; background: var(--surface);
  border-left: 5px solid var(--border-strong); box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi.sel { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak), var(--shadow-sm); }
.kpi .n { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.kpi .s { font-size: var(--fs-sm); color: var(--text-2);
  text-transform: capitalize; }
/* KPI per-source breakdown (Catena-X / IDTA counts under the status).
   `min-height` reserves the line's space even when empty (single source,
   no breakdown) so the cards keep a constant height and the controls below
   don't shift when toggling a source. */
.kpi .kbd { display: flex; gap: var(--sp-3); margin-top: 6px;
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4;
  min-height: 1.4em; font-variant-numeric: tabular-nums; }
.kpi .kbd-src { display: flex; align-items: center; gap: 4px; }
.kpi .kbd-src .d { width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; }
#cat-source { display: flex; gap: var(--sp-4); flex-wrap: wrap;
  align-items: center; font-size: var(--fs-md); }
#cat-source .ttl { color: var(--text-2); font-size: var(--fs-sm); }
#cat-source label { display: flex; align-items: center; gap: 5px;
  cursor: pointer; }
/* "Used in a standard" toggle — sits right after the Source pills (grouped
   with the filters), consistent with the Standards tab toggle. */
#cat-source label.std-only { color: var(--text-2);
  font-size: var(--fs-sm); }
#catalog-head { display: flex; align-items: center; gap: var(--sp-3); }
#search { flex: 1; max-width: 360px; padding: 7px 10px;
  font-size: var(--fs-md); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
#search::placeholder { color: var(--text-3); }
#search:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak); }
#count { font-size: var(--fs-sm); color: var(--text-3); }
#catalog { display: flex; flex-direction: column; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); font-size: var(--fs-md);
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--accent-weak); }
.row .nm { flex: 1; font-weight: 600; }
.row .nm small { font-weight: 400; color: var(--text-3); }
.badge { font-size: var(--fs-xs); padding: 2px 7px;
  border-radius: var(--r-pill); color: #fff; }
/* Clickable Catena-X standard chip in the Model Viewer header. */
.badge-std { cursor: pointer; background: var(--accent-weak);
  color: var(--accent); border: 1px solid var(--accent);
  transition: background var(--dur) var(--ease); }
.badge-std:hover { background: var(--accent); color: var(--surface); }
.mv-std-lbl { color: var(--text-3); font-size: var(--fs-xs);
  margin-left: var(--sp-2); }
/* ---- Filter controls : pill toggles (multi-select) + switches (boolean).
   Replace the native checkboxes across Home / Search / Issues / Standards.
   The hidden <input> still owns the state ; CSS :has() mirrors :checked.
   `--c` carries the category colour (source/status/kind) ; absent -> accent.
   The flex layout (dot + label in a row) comes from the container rules. */
.fpill { position: relative; display: inline-flex; align-items: center;
  gap: 6px; cursor: pointer; user-select: none; padding: 3px 11px;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-sm);
  line-height: 1.6;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.fpill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c, var(--accent)); }
.fpill:hover { border-color: var(--c, var(--accent)); }
.fpill:has(input:checked) { background: var(--c, var(--accent));
  border-color: var(--c, var(--accent)); color: #fff; font-weight: 600; }
.fpill:has(input:checked) .dot { background: #fff; }
.fpill input, .switch input { position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.switch { position: relative; display: inline-flex; align-items: center;
  gap: 8px; cursor: pointer; user-select: none; color: var(--text-2);
  font-size: var(--fs-sm); }
.switch .track { position: relative; width: 34px; height: 20px; flex: none;
  background: var(--border-strong); border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease); }
.switch:has(input:checked) .track { background: var(--accent); }
.switch:has(input:checked) .track::after { transform: translateX(14px); }
.switch:has(input:checked) .lbl { color: var(--text); }
/* Home catalog: expandable model rows (versions revealed on click) */
.crow { border-bottom: 1px solid var(--border); }
.crow:last-child { border-bottom: none; }
.ch {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; user-select: none;
  transition: background-color var(--dur) var(--ease);
}
.ch:hover { background: var(--accent-weak); }
.ch .ct { color: var(--text-3); font-size: var(--fs-2xs); width: 9px;
  transition: transform var(--dur) var(--ease); }
.crow.open .ch .ct { transform: rotate(90deg); }
.crow.open > .ch { background: var(--surface-2); }
.ch .cn { flex: 1; font-weight: 600; }
.ch .cs { font-weight: 400; color: var(--text-3); font-size: var(--fs-sm); }
.ch .cs b { color: var(--st-release); font-weight: 600; }
/* Accordion animation : grid-template-rows 0fr ↔ 1fr lets the panel
   expand from 0 to its natural content height without a hard `max-height`
   cap. Requires a single child (.cvs-inner) that owns the actual content
   and `overflow: hidden` to clip during the transition. */
.cvs { display: grid; grid-template-rows: 0fr;
  background: var(--surface-2);
  transition: grid-template-rows var(--dur) var(--ease); }
.cvs-inner { overflow: hidden; padding: var(--sp-1) 0 var(--sp-2); }
.crow.open .cvs { grid-template-rows: 1fr; }
.cv {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 33px; font-size: var(--fs-sm);
  transition: background-color var(--dur) var(--ease);
}
.cv:hover { background: var(--accent-weak); }
.cv .vv { font-weight: 600; min-width: 62px;
  font-variant-numeric: tabular-nums; }
.cv .vf { color: var(--text-3); min-width: 44px; }
.cv .vs { flex: 1; display: flex; align-items: center; gap: 6px;
  color: var(--text-2); text-transform: capitalize; }
.cv .vd { width: 8px; height: 8px; border-radius: 50%; }
.cv .vc { color: var(--text-3); font-size: var(--fs-xs);
  padding: 1px 7px; border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); }
/* Linked Catena-X standards for a version row — clickable chips, capped
   to a few with a "+N" overflow so a heavily-referenced model stays tidy. */
.cv .vstd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  justify-content: flex-end; }
.cv .vstd .sc { font-size: var(--fs-2xs); padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--accent-weak);
  color: var(--accent); border: 1px solid var(--accent); cursor: pointer;
  white-space: nowrap; transition: background var(--dur) var(--ease); }
.cv .vstd .sc:hover { background: var(--accent); color: var(--surface); }
.cv .vstd .more { font-size: var(--fs-2xs); color: var(--text-3);
  cursor: default; }
.cv .va { color: var(--text-3); }

/* Model Viewer */
#modelviewer { flex-direction: column; }
#mv-head {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: 10px var(--sp-4); border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
#mv-head label { font-size: var(--fs-sm); color: var(--text-2);
  display: flex; align-items: center; gap: 6px; }
#mv-head select, #mv-model {
  font-size: var(--fs-md); color: var(--text); padding: 5px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
#mv-head select:focus, #mv-model:focus { outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.combo { position: relative; display: inline-block; }
#mv-model { width: 240px; }
#mv-model::placeholder { color: var(--text-3); }
#mv-model-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm);
  max-height: 260px; overflow-y: auto; display: none;
  box-shadow: var(--shadow-md);
}
#mv-model-list.open { display: block; }
#mv-model-list .opt { padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); cursor: pointer; }
#mv-model-list .opt.hl, #mv-model-list .opt:hover {
  background: var(--accent-weak); }
#mv-model-list .msg { padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-3); }
#mv-badges { font-size: var(--fs-sm); color: var(--text-2);
  display: flex; align-items: center; gap: var(--sp-2); }
#mv-github, #mv-export { font-size: var(--fs-sm); color: var(--accent);
  text-decoration: none; padding: 4px 9px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; font-family: inherit;
  transition: background-color var(--dur) var(--ease); }
#mv-github:hover, #mv-export:hover { background: var(--accent-weak); }
#mv-export:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak); }
#subtabs { display: flex; gap: 2px; padding: 6px var(--sp-3) 0;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.subtab {
  padding: 6px var(--sp-4); font-size: var(--fs-sm); cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent;
  color: var(--text-2);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.subtab:hover { background: var(--surface-2); color: var(--text); }
.subtab.active { background: var(--surface); color: var(--text);
  font-weight: 600; border-color: var(--border);
  box-shadow: inset 0 2px 0 var(--accent); }
.subtab:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; }
#subviews { flex: 1; position: relative; overflow: hidden;
  background: var(--surface); }
.subview { position: absolute; inset: 0; display: none;
  background: var(--surface); }
.subview.active { display: block; }
.placeholder {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--text-3); font-size: var(--fs-base);
  text-align: center; padding: var(--sp-6);
}
#docs-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
#docs-title { font-weight: 600; color: var(--text); }
#docs-aspect { font-size: var(--fs-sm); padding: 3px 6px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); }
#docs-aspect:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak); }
#docs-bar a { color: var(--accent); text-decoration: none; }
#docs-bar a:hover { text-decoration: underline; }
#docs-links a { margin-right: var(--sp-3); }
#docs-frame { position: absolute; top: 36px; left: 0; right: 0; bottom: 0;
  width: 100%; border: 0; background: var(--surface); }
#docs-msg { inset: 36px 0 0 0; }
#notes-body { position: absolute; inset: 0; overflow-y: auto;
  padding: var(--sp-5) var(--sp-6); }
#notes-body h2 { font-size: var(--fs-lg); margin: 0 0 10px; }
#notes-body pre {
  white-space: pre-wrap; word-wrap: break-word; margin: 0; color: var(--text);
  font: var(--fs-md)/1.6 var(--font-mono);
}
#legend, #dep-legend {
  position: absolute; top: 10px; left: 10px;
  background: var(--legend-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-2) 10px;
  font-size: var(--fs-sm); z-index: 4; box-shadow: var(--shadow-md);
}
#legend div, #dep-legend div { display: flex; align-items: center;
  margin: 2px 0; }
#legend span.dot, #dep-legend span.dot { width: 11px; height: 11px;
  border-radius: 50%; margin-right: 6px; }
#dep-legend span.ring { width: 11px; height: 11px; border-radius: 50%;
  margin-right: 6px; background: transparent; box-sizing: border-box; }
/* Legend swatch for the cross-source dashed edge. */
#dep-legend span.cross-dash {
  width: 18px; height: 0; margin-right: 6px;
  border-top: 2px dashed var(--accent-strong); }
#legend .sep, #dep-legend .sep { font-weight: 600; margin-top: 6px; }
#legend label.kbox { display: flex; align-items: center; margin: 2px 0;
  cursor: pointer; user-select: none; }
#legend label.kbox input { margin: 0 6px 0 0; cursor: pointer;
  accent-color: var(--accent); }
#legend label.kbox span.dot { margin-right: 6px; }
#mv-empty, #dep-empty { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--text-3);
  font-size: var(--fs-base); text-align: center; padding: var(--sp-6); }
.node circle.dep-root { stroke: var(--text); stroke-width: 3px; }
.node circle.dep-missing { stroke: var(--st-deprecated);
  stroke-dasharray: 3 2; }
.node circle.dep-status { pointer-events: none; }
/* Floating controls overlay on top-right of each graph SVG. One
   container per sub-tab (#graph-controls for the element graph,
   #dep-controls for the dep graph), so each appears only when its
   sub-tab is active. */
#dep-controls, #graph-controls {
  position: absolute; top: 10px; right: 14px; z-index: 4;
}
/* Element graph : a single dropdown — no need for a wrapper layout. */
#graph-controls { display: flex; }
/* Dep graph : two rows — Outgoing/Incoming on top (segmented control),
   Layout dropdown below them. Stretched so the dropdown matches the
   segmented control's width. */
#dep-controls { display: flex; flex-direction: column;
  gap: var(--sp-2); align-items: stretch; }
.dep-buttons { display: flex; box-shadow: var(--shadow-sm);
  border-radius: var(--r-sm); }
.dep-buttons button {
  font-size: var(--fs-sm); padding: 5px 11px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.dep-buttons button[data-dir="out"] {
  border-radius: var(--r-sm) 0 0 var(--r-sm); }
.dep-buttons button[data-dir="in"] {
  border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: none; }
.dep-buttons button.on { background: var(--surface); color: var(--text);
  font-weight: 600; }
.dep-buttons button:focus-visible { outline: 2px solid var(--accent);
  outline-offset: -2px; }
#dep-layout, #mv-layout {
  font-size: var(--fs-sm); padding: 4px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  box-shadow: var(--shadow-sm);
}
#dep-layout:focus, #mv-layout:focus { outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.node circle { stroke: #fff; stroke-width: 1.5px; cursor: pointer; }
.node text { font-size: var(--fs-2xs); fill: var(--text);
  pointer-events: none; }
.link { stroke: #999; stroke-opacity: .6; }
/* Cross-source dependency edge (e.g. IDTA model → Catena-X model).
   Dashed + accent color so the bridge between repositories is obvious. */
.link.cross { stroke: var(--accent-strong); stroke-opacity: .85;
  stroke-dasharray: 6 4; }
.link.optional { stroke-dasharray: 4 3; }
.link-label { font-size: 9px; fill: var(--text-3); pointer-events: none; }
/* Search (top tab) */
#searchview { flex-direction: column; overflow-y: auto;
  padding: var(--sp-4) var(--sp-5); gap: var(--sp-4); }
#searchview h1 { margin: 0 0 4px; font-size: var(--fs-xl); }
#searchview .sub { font-size: var(--fs-sm); color: var(--text-3); }
#sr-head { display: flex; align-items: center; gap: var(--sp-3); }
#sr-q { flex: 1; max-width: 460px; padding: 8px 11px;
  font-size: var(--fs-md); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
#sr-q::placeholder { color: var(--text-3); }
#sr-q:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak); }
#sr-count { font-size: var(--fs-sm); color: var(--text-3); }
#sr-status, #sr-kinds, #sr-source { display: flex; gap: var(--sp-4);
  flex-wrap: wrap; align-items: center; font-size: var(--fs-md); }
#sr-status .ttl, #sr-kinds .ttl, #sr-source .ttl { color: var(--text-2);
  font-size: var(--fs-sm); }
#sr-status label, #sr-kinds label, #sr-source label {
  display: flex; align-items: center; gap: 5px; cursor: pointer; }
#sr-list { display: flex; flex-direction: column; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
  overflow: hidden; }
#sr-list .empty { padding: var(--sp-4); color: var(--text-3);
  font-size: var(--fs-md); }
/* Rich empty state (no query yet) : index breakdown + example searches. */
#sr-list .sr-hint { padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4); }
.sr-hint .stats { display: flex; flex-wrap: wrap; gap: var(--sp-5);
  font-size: var(--fs-md); color: var(--text-2); }
.sr-hint .stats .st { display: flex; align-items: baseline; gap: 7px; }
.sr-hint .stats .st .d { width: 9px; height: 9px; border-radius: 50%;
  align-self: center; }
.sr-hint .stats .st b { color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.sr-hint .ex { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); }
.sr-hint .ex .ttl { color: var(--text-3); font-size: var(--fs-sm); }
.sr-ex { font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: 4px 11px; border-radius: var(--r-pill); color: var(--accent);
  border: 1px solid var(--border-strong); background: var(--surface);
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.sr-ex:hover { background: var(--accent-weak); border-color: var(--accent); }
.sr-ex:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; }
.sr-row { display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); font-size: var(--fs-md);
  transition: background-color var(--dur) var(--ease); }
.sr-row:last-child { border-bottom: none; }
.sr-row:hover { background: var(--accent-weak); }
.sr-row .top { display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; }
.sr-row .nm { font-weight: 600; }
.sr-row .pn { color: var(--text-3); font-size: var(--fs-sm); }
.sr-row .loc { margin-left: auto; color: var(--text-2);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sr-row .desc { color: var(--text-2); font-size: var(--fs-sm); }
.sr-row .vmore { color: var(--text-3); }
/* Type (kind) badge : a neutral chip with a colour DOT — deliberately a
   different shape than the solid status pill (.badge), so the type and
   status dimensions never read as "the same thing" even when their hues
   coincide (Aspect red vs deprecated red, Property green vs release green).
   The dot carries the categorical colour, so light kinds stay legible. */
.kbadge { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill);
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); }
.kbadge .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Issues (top tab) */
#issues { flex-direction: column; overflow-y: auto;
  padding: var(--sp-4) var(--sp-5); gap: var(--sp-4); }
#issues h1 { margin: 0 0 4px; font-size: var(--fs-xl); }
#issues .sub { font-size: var(--fs-sm); color: var(--text-3); }
#iss-status, #iss-source { display: flex; gap: var(--sp-4); flex-wrap: wrap;
  align-items: center; font-size: var(--fs-md); }
#iss-status .ttl, #iss-source .ttl { color: var(--text-2); font-size: var(--fs-sm); }
#iss-status label, #iss-source label { display: flex; align-items: center;
  gap: 5px; cursor: pointer; }
/* KPI cards grouped into categories : a vertical stack of sections, each
   with a subheader and its own card grid (sorted by count). */
#iss-kpis { display: flex; flex-direction: column; gap: var(--sp-5); }
.iss-cat-h { display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.iss-cat-h .ct { font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.iss-cat-grid { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kpi.iss { border-left-color: var(--border-strong); }
.kpi.iss .s { text-transform: none; }
.kpi.iss.zero { opacity: .5; }
.kpi.iss.zero .n { color: var(--text-3); }
.kpi.iss.err { border-left-color: var(--st-deprecated); }
.kpi.iss.err .n { color: var(--st-deprecated); }
.kpi.iss.warn { border-left-color: var(--st-draft); }
.kpi.iss.warn .n { color: var(--st-warn-text); }
/* Selected explanation banner — shown above the list when a type is picked. */
#iss-explain { background: var(--accent-weak);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md);
  color: var(--text); line-height: 1.5; }
#iss-explain .head { font-weight: 600; margin-bottom: var(--sp-1);
  display: flex; align-items: center; gap: var(--sp-2); }
#iss-explain .sev { width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; }
#iss-explain.warn .sev { background: var(--st-draft); }
#iss-explain.err .sev { background: var(--st-deprecated); }
/* Collapsible "About these checks" reference panel. */
#iss-help { border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
  overflow: hidden; }
#iss-help > summary { padding: var(--sp-3) var(--sp-4); cursor: pointer;
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
  list-style: none; user-select: none; }
#iss-help > summary::-webkit-details-marker { display: none; }
#iss-help > summary::before { content: "▸"; display: inline-block;
  width: 1em; color: var(--text-3); transition: transform var(--dur) var(--ease); }
#iss-help[open] > summary::before { transform: rotate(90deg); }
#iss-help .body { padding: 0 var(--sp-4) var(--sp-4);
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
#iss-help .item { border-left: 3px solid var(--border-strong);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2);
  border-radius: var(--r-sm); font-size: var(--fs-sm); }
#iss-help .item.err { border-left-color: var(--st-deprecated); }
#iss-help .item.warn { border-left-color: var(--st-draft); }
#iss-help .item .lbl { font-weight: 600; color: var(--text);
  font-size: var(--fs-md); margin-bottom: var(--sp-1); }
#iss-help .item .dsc { color: var(--text-2); line-height: 1.5; }
#iss-list-head { font-size: var(--fs-md); color: var(--text);
  font-weight: 600; }
#iss-list { display: flex; flex-direction: column; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
  overflow: hidden; }
#iss-list .row.clk { cursor: pointer; }
#iss-list .row.clk:hover { background: var(--accent-weak); }
#iss-list .row .det { color: var(--text-2); font-size: var(--fs-sm);
  flex: 1; }
#iss-list .empty { padding: var(--sp-4); color: var(--text-3);
  font-size: var(--fs-md); }
.idet { margin: 3px 0 0; padding-left: 18px; }
.idet li { font-size: var(--fs-sm); color: var(--text-2);
  margin: var(--sp-1) 0; }
.idet .pth { color: var(--text-3); }
/* Issues (Model Viewer sub-tab) */
#issues-body { position: absolute; inset: 0; overflow-y: auto;
  padding: var(--sp-5) var(--sp-6); }
#issues-body h2 { font-size: var(--fs-lg); margin: 0 0 6px; }
#issues-body h3 { font-size: var(--fs-md); margin: 16px 0 4px;
  display: flex; align-items: center; gap: 7px; }
#issues-body .sev { width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; }
#issues-body .ok-msg { color: var(--st-release); font-size: var(--fs-base); }
#issues-body .none { color: var(--text-3); }
#issues-body .iss-dsc { color: var(--text-2); font-size: var(--fs-sm);
  margin: 0 0 var(--sp-2); line-height: 1.5; max-width: 720px; }

#tooltip {
  position: absolute; pointer-events: none; background: #1f2329;
  color: #fff; padding: var(--sp-2) 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); max-width: 320px; opacity: 0;
  transition: opacity .1s; z-index: 10; box-shadow: var(--shadow-lg);
}
#tooltip .k { color: #9cf; }

/* ---- Responsive : < 720px (mobile portrait, small tablets) -----------
   Pas d'overhaul, juste les ajustements qui rendent la page utilisable
   sur un téléphone : conteneurs verticaux, padding réduit, onglets
   scrollables horizontalement, contrôles plus larges. */
@media (max-width: 720px) {
  #home, #issues { padding: var(--sp-3); gap: var(--sp-3); }
  #appbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .brand .bs { display: none; }                    /* hide the subtitle to save space */
  #tabs, #subtabs { overflow-x: auto; flex-wrap: nowrap;
    /* Fade the right edge as a "more tabs ↦" scroll affordance — the 5 top
       tabs never all fit on a phone and the native scrollbar is hidden. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
  .tab, .subtab { flex: none; }
  #catalog-head { flex-direction: column; align-items: stretch;
    gap: var(--sp-2); }
  #search { max-width: 100%; }
  #cat-source, #sr-status, #sr-kinds, #sr-source,
  #iss-status, #iss-source { font-size: var(--fs-sm); }
  #mv-head { flex-direction: column; align-items: stretch;
    padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  #mv-head label, #mv-head select, #mv-model { width: 100%; }
  #mv-model { max-width: none; }
  #mv-badges { flex-wrap: wrap; }
  #mv-github { align-self: flex-start; }
  #sr-head { flex-direction: column; align-items: stretch;
    gap: var(--sp-2); }
  #sr-q { max-width: 100%; }
  .sr-row .loc { margin-left: 0; }
  /* Graph SVGs : keep at least a few hundred pixels tall so they remain
     interactive on small viewports. */
  #graph, #depgraph { min-height: 420px; }
  .ov { padding: var(--sp-2) var(--sp-3); }
  .ov .val { font-size: var(--fs-lg); }
  #std-layout { grid-template-columns: 1fr;
    grid-template-areas: "list" "refs" "graph"; }
  #std-list { min-height: 200px; max-height: 40vh; }
}

/* ---- Phones (portrait, ≤ 480px) --------------------------------------
   Below this width two stat columns get too narrow for labels like
   "86 models linked · release Saturn" — stack them so nothing clips. */
@media (max-width: 480px) {
  #overview { grid-template-columns: 1fr; }
  #kpis .kpi { flex: 1 1 100%; }
}

/* ---- Standards tab ---------------------------------------------------- */
#standardsview { flex-direction: column; overflow-y: auto;
  padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }
#std-head { display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-3) 0; }
#std-q { flex: 1; max-width: 420px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
/* Count is the result tally — pushed to the far right ; the "Only with
   issues" toggle sits next to the search box (a filter beside the filter). */
#std-count { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); }
#std-iss-only { white-space: nowrap; }
/* Standard-issues summary (top of the Standards tab) — mirrors the model
   Issues tab : KPI cards (count of standards per issue type) + a collapsible
   "About these checks" panel. Reuses the `.kpi.iss` card classes. */
/* `flex: none` : #standardsview is a fixed-height flex column ; without it
   these items (esp. #std-help, which clips its overflow) get shrunk to ~0
   when the list below is tall. */
#std-kpis { display: grid; gap: var(--sp-3); flex: none;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
#std-help { flex: none; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-sm); overflow: hidden; }
#std-help > summary { padding: var(--sp-3) var(--sp-4); cursor: pointer;
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
  list-style: none; user-select: none; }
#std-help > summary::-webkit-details-marker { display: none; }
#std-help > summary::before { content: "▸"; display: inline-block;
  width: 1em; color: var(--text-3);
  transition: transform var(--dur) var(--ease); }
#std-help[open] > summary::before { transform: rotate(90deg); }
#std-help .body { padding: 0 var(--sp-4) var(--sp-4); display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
#std-help .item { border-left: 3px solid var(--border-strong);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2);
  border-radius: var(--r-sm); font-size: var(--fs-sm); }
#std-help .item.err { border-left-color: var(--st-deprecated); }
#std-help .item.warn { border-left-color: var(--st-draft); }
#std-help .item .lbl { font-weight: 600; color: var(--text);
  font-size: var(--fs-md); margin-bottom: var(--sp-1); }
#std-help .item .dsc { color: var(--text-2); line-height: 1.5; }
/* List on the left (full height) ; references on top-right, the reference
   graph right below them — so the standards list keeps its room. */
#std-layout { display: grid; gap: var(--sp-3); align-items: start;
  grid-template-columns: minmax(200px, 300px) 1fr;
  grid-template-areas: "list refs" "list graph"; }
#std-list { grid-area: list; min-height: 320px; max-height: 80vh;
  overflow: auto; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
#std-detail { grid-area: refs; }
#std-graphwrap { grid-area: graph; }
.std-row { padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border); cursor: pointer;
  border-left: 3px solid transparent; }
.std-row:last-child { border-bottom: 0; }
.std-row:hover { background: var(--surface-2); }
.std-row.sel { background: var(--surface-2); border-left-color: var(--accent); }
.std-row .id { font-weight: 700; font-size: var(--fs-sm); }
.std-row .ti { color: var(--text-2); font-size: var(--fs-xs); }
.std-row .mt { color: var(--text-3); font-size: var(--fs-2xs);
  margin-top: 2px; }
.std-row .warn { color: var(--st-deprecated); }
/* ⚠ issue badge on a standard row (right-aligned next to the id line). */
.std-row .top { display: flex; align-items: center; gap: var(--sp-2); }
.std-row .ibadge { margin-left: auto; font-size: var(--fs-2xs);
  font-weight: 700; color: var(--st-warn-text); background: var(--st-draft);
  border-radius: var(--r-pill); padding: 0 7px; white-space: nowrap; }
/* "Quality issues" section in the detail panel. */
.std-iss { margin-top: var(--sp-2); }
.std-iss .ih { font-size: var(--fs-xs); font-weight: 600;
  color: var(--st-deprecated); margin-bottom: 4px; }
.std-iss-row { font-size: var(--fs-2xs); color: var(--text-2);
  padding: var(--sp-1) 0; }
.std-iss-row b { color: var(--st-deprecated); }
#std-detail { border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-3); }
#std-detail.std-ph { color: var(--text-3); text-align: center;
  min-height: 120px; display: flex; align-items: center;
  justify-content: center; }
#std-d-head { margin-bottom: var(--sp-3); }
#std-d-head h2 { margin: 0 0 4px; font-size: var(--fs-lg); }
#std-d-head .lk { font-size: var(--fs-sm); }
#std-d-head a { color: var(--accent); text-decoration: none; }
#std-d-head a:hover { text-decoration: underline; }
#std-gctrls { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3); }
#std-gctrls .seg { display: flex; box-shadow: var(--shadow-sm);
  border-radius: var(--r-sm); }
#std-gctrls .seg button { font-size: var(--fs-sm); padding: 5px 11px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease); }
#std-gctrls .seg button:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm); }
#std-gctrls .seg button:last-child {
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
#std-gctrls .seg button:not(:first-child) { border-left: none; }
#std-gctrls .seg button.on { background: var(--surface);
  color: var(--text); font-weight: 600; }
#std-layout-sel { font-size: var(--fs-sm); padding: 4px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  box-shadow: var(--shadow-sm); }
#std-gctrls .catf { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); }
#std-gctrls .catf .lbl { color: var(--text-3); }
#std-gctrls .catf label { display: inline-flex; align-items: center;
  gap: 4px; cursor: pointer; }
#stdgraph { width: 100%; height: clamp(420px, 72vh, 920px);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg); margin: var(--sp-2) 0 6px; }
#stdgraph .node text { font-size: 11px; fill: var(--text);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
#stdgraph line.link { stroke: var(--border-strong); }
/* Each cue group (Standards / Models / direction) on its own line, at a
   readable size — was one cramped 10px row that wrapped into a jumble. */
.std-glegend { display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-3);
  margin: var(--sp-3) 0 var(--sp-2); }
.std-glegend .grp { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-1) var(--sp-4); }
.std-glegend .grp > span { display: inline-flex; align-items: center; }
.std-glegend span.dot { display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 5px; }
/* Shape cues in the legend : rounded rectangle = standard (override the
   circle), ring = selected node, plain dot (circle) = model. */
.std-glegend span.rect { width: 16px; height: 11px; border-radius: 3px; }
.std-glegend span.ring { box-sizing: border-box; background: transparent;
  border-style: solid; border-width: 2px; }
.std-glegend .glab { color: var(--text-2); font-weight: 600; }
.std-glegend .gsep { color: var(--text-3); }
.std-grp { margin-top: var(--sp-3); }
.std-grp > .h { font-weight: 600; font-size: var(--fs-sm);
  margin-bottom: 6px; color: var(--text-2); }
.std-note { font-size: var(--fs-2xs); color: var(--text-3);
  margin: -2px 0 6px; max-width: 70ch; line-height: 1.4; }
.std-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Folding : a long chip list (Referenced by, etc.) hides everything past
   the 12th until "+N more" is clicked, so a heavily-cited standard stays
   tidy. Cap = 12 → hide the 13th child onward. */
.std-chips.foldable:not(.show-all) > .chip:nth-child(n+13) { display: none; }
.std-more { margin-top: 6px; font-family: inherit; font-size: var(--fs-xs);
  cursor: pointer; padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--accent);
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.std-more:hover { background: var(--accent-weak); border-color: var(--accent); }
.std-more:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; }
.chip { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); font-size: var(--fs-xs);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: border-color var(--dur) var(--ease); }
.chip:hover { border-color: var(--accent); }
.chip.dim { opacity: .55; cursor: default; }
.chip.dim:hover { border-color: var(--border-strong); }
.chip.dep { border-color: var(--st-deprecated); color: var(--st-deprecated); }
.chip .v { color: var(--text-3); }
.std-dep-note { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--st-deprecated); background: var(--surface-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-2); }
.std-dep-note b { color: var(--st-deprecated); }
.std-empty { color: var(--text-3); font-size: var(--fs-xs); }