/* Mesh → NURBS UI stylesheet. Design direction and rules: docs/ui-style-guide.md.
   Everything below reads the tokens on :root; components never hard-code colours, sizes or radii. */

/* ============================================================== tokens */
:root {
  color-scheme: dark;
  /* spacing: 4-px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* radius */
  --r1: 4px; --r2: 6px; --r3: 10px;
  /* type */
  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px; --t-xl: 20px; --t-2xl: 28px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* surfaces */
  --bg: #15171c; --panel: #1c1f25; --sunken: #191c21; --raised: #23272f; --raised-2: #2a2f38; --pressed: #313743;
  --overlay: rgba(31, 34, 40, 0.97); --scrim: rgba(0, 0, 0, 0.55);
  --border: #2e333c; --border-strong: #3a3f49; --border-hover: #828a9b; --border-input: #6e7687;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  /* text (contrast on --panel / --raised-2: 13.2 / 10.5, 6.6 / 5.7, 5.6 / 4.6) */
  --text: #e6e6e6; --text-2: #a3a9b3; --text-3: #9299a5;
  /* accent: selection, focus, active tab / segment. Neutral near-white: never the Freeform blue. */
  --accent: #d8dce2; --accent-ink: #15171c; --accent-bg: rgba(216, 220, 226, 0.09); --accent-line: #aeb4bd;
  /* primary action (Convert, Download) */
  --primary: #2563c9; --primary-hi: #2f6fdc; --primary-ink: #ffffff;
  /* links */
  --link: #8cbcf5;
  /* variant identity (validated categorical pair, dark slots 1-2; same values as VCOLOR in ui/complexity.js) */
  --ff: #3987e5; --cad: #d95926; --ff-text: #7fb2f0; --cad-text: #ee8a5f;
  --ff-bg: rgba(57, 135, 229, 0.14); --cad-bg: rgba(217, 89, 38, 0.16);
  /* status (each with a tint for chips; colour is never the only signal: chips carry ✓ ✗ !) */
  --pass: #4cc38a; --fail: #ff8296; --warn: #f0b440; --run: #8cbcf5;
  --pass-bg: rgba(76, 195, 138, 0.14); --fail-bg: rgba(255, 130, 150, 0.12); --warn-bg: rgba(240, 180, 64, 0.14); --neutral-bg: rgba(154, 160, 170, 0.14);
  --note: #c9b58a; /* trade-off sentences */
  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --t-fast: 120ms; --t-med: 160ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ============================================================== base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: var(--t-md)/1.4 var(--font); overflow: hidden; }
canvas { display: block; }
h1 { margin: 0 0 var(--s1); font-size: var(--t-lg); font-weight: 600; word-break: break-word; }
/* section label: one style everywhere */
h2, .label { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
h2 .v { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-2); }
.eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s1); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: var(--t-xs); }
.num, td, .tab-num { font-variant-numeric: tabular-nums; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
code { font: 0.92em var(--mono); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], .tip { text-decoration: underline dotted var(--text-3); text-underline-offset: 2px; cursor: help; }
kbd { font: 10px/1 var(--mono); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 3px; padding: 1px 4px; color: var(--text-2); background: var(--raised); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r1); }
label { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; user-select: none; }
label.dis { opacity: 0.45; cursor: default; }
input[type=checkbox] { accent-color: var(--accent); margin: 0; width: 14px; height: 14px; cursor: pointer; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.sw.ff { background: var(--ff); } .sw.cad { background: var(--cad); }
.vn-ff { color: var(--ff-text); font-weight: 500; } .vn-cad { color: var(--cad-text); font-weight: 500; }

/* ============================================================== components */
/* --- button: default = secondary (bordered); .primary; .ghost; .sm */
button, a.btn, select, input[type=number], input[type=search] {
  font: inherit; color: var(--text); background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r2);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
button, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 var(--s3); cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1; }
button.sm, a.btn.sm { height: 24px; padding: 0 var(--s2); font-size: var(--t-sm); }
button:hover:not(:disabled), a.btn:hover:not(.disabled) { background: var(--raised-2); border-color: var(--border-hover); text-decoration: none; }
button:active:not(:disabled), a.btn:active:not(.disabled) { background: var(--pressed); }
button:disabled, a.btn.disabled { opacity: 0.45; cursor: default; }
a.btn.disabled { pointer-events: auto; }
button.primary, a.btn.primary { background: var(--primary); border-color: var(--primary-hi); color: var(--primary-ink); font-weight: 600; }
button.primary:hover:not(:disabled), a.btn.primary:hover:not(.disabled) { background: var(--primary-hi); border-color: #5b8ff0; }
button.primary:active:not(:disabled), a.btn.primary:active:not(.disabled) { background: #1f56b0; }
button.ghost, a.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
button.ghost:hover:not(:disabled), a.btn.ghost:hover:not(.disabled) { color: var(--text); background: var(--raised); border-color: var(--border-strong); }
/* toggle buttons that are "on" (Layers open, Isolate on, tree hide / iso) */
button.tgl.on, #layersBtn.on, .ins-actions button.on, .tn .tb.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--text); }
button.icon { width: 28px; padding: 0; } button.icon.sm { width: 24px; }
button kbd, a.btn kbd { margin-left: 2px; }
button.primary kbd { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); }
select { height: 28px; padding: 0 var(--s2); cursor: pointer; }
select.small { height: 24px; font-size: var(--t-sm); }
select:hover:not(:disabled) { border-color: var(--border-hover); }
input[type=number] { width: 72px; height: 24px; padding: 0 6px; }
/* form fields need a visible boundary (>= 3:1); buttons are identified by their label and fill */
select, input[type=number], input[type=search] { border-color: var(--border-input); }
input[type=search] { height: 28px; padding: 0 var(--s2); }
input:hover:not(:disabled) { border-color: var(--border-hover); }

/* --- text link button (downloads and inline actions): looks like a link, behaves like a button */
a.dl { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: var(--t-xs); padding: 1px var(--s1); border-radius: var(--r1); white-space: nowrap; line-height: 16px; }
a.dl:hover { color: var(--text); background: var(--raised-2); text-decoration: none; }
a.dl .ic, .dl-ic { font-size: 10px; }

/* --- segmented control: view presets, Freeform / CAD-style switches, Single / Split */
.seg, .tabs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r2); background: var(--raised); padding: 2px; gap: 2px; flex: none; }
.seg button, .tabs button { height: 22px; border: 0; border-radius: var(--r1); padding: 0 var(--s2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.seg button:hover:not(:disabled), .tabs button:hover:not(:disabled) { background: var(--raised-2); color: var(--text); border-color: transparent; }
.seg button.on, .tabs button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg button.on:hover, .tabs button.on:hover { background: var(--accent); color: var(--accent-ink); }
.seg button:disabled { opacity: 0.4; }
.seg button kbd { padding: 0 3px; font-size: 9px; background: transparent; }
.seg button.on kbd { color: var(--accent-ink); border-color: rgba(21, 23, 28, 0.35); }
.tabs button { height: 18px; font-size: var(--t-xs); padding: 0 6px; }

/* --- underline tabs: panel sections */
.rtabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); padding: 0 var(--s3); flex: none; background: var(--panel); }
.rtabs button { height: 36px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 0 var(--s2); color: var(--text-2); font-size: var(--t-sm); font-weight: 500; }
.rtabs button:hover:not(:disabled) { color: var(--text); background: none; border-color: transparent; border-bottom-color: var(--border-hover); }
.rtabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.rtabs button .cnt { font-size: var(--t-xs); color: var(--text-3); margin-left: 3px; }

/* --- chip / badge: status (pass / fail / warn / err / neutral) and variant (ff / cad), always with an icon or a label */
.chip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; line-height: 1; }
.chip.pass { background: var(--pass-bg); color: var(--pass); }
.chip.fail { background: var(--fail-bg); color: var(--fail); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.err { background: transparent; color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail); }
.chip.neutral { background: var(--neutral-bg); color: var(--text-2); }
.chip.ff { background: var(--ff-bg); color: var(--ff-text); }
.chip.cad { background: var(--cad-bg); color: var(--cad-text); }
.chip.sq { border-radius: var(--r1); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

/* --- card: scoreboard tiles, verdict panels, inspector share padding, radius, border, header row */
.vcard { min-width: 0; border: 1px solid var(--border); border-left: 3px solid var(--c, var(--border-strong)); border-radius: var(--r2); padding: var(--s2) var(--s3); background: var(--raised); }
.vcard.ff { --c: var(--ff); } .vcard.cad { --c: var(--cad); }
.vcard .ch { display: flex; align-items: center; gap: var(--s2); min-height: 20px; }
.vcard .ch > :first-child { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
.vcard .ch .chip { margin-left: auto; }
.vcard .ch .chip + a.dl, .vcard .ch .chip + .dlgrp { margin-left: 0; }

/* --- key-value list (inspector, stage details) */
dl.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); margin: 0; }
dl.kv dt { color: var(--text-3); }
dl.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- table */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: var(--s1) var(--s2); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
th { color: var(--text-3); font-weight: 500; font-size: var(--t-xs); position: sticky; top: 0; background: var(--panel); z-index: 1; text-align: right; }
th:first-child, td:first-child { text-align: left; }
th[title] { text-decoration: underline dotted var(--text-3); text-underline-offset: 2px; cursor: help; }
table.rows tbody tr { cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
table.rows tbody tr:hover, table.rows tbody tr.hov { background: var(--raised); }
tbody tr.focus, tbody tr.focus:hover { background: var(--accent-bg); }
tbody tr.focus td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
td.pass { color: var(--pass); font-weight: 600; } td.fail { color: var(--fail); font-weight: 600; } td.err { color: var(--fail); }
td.sub { color: var(--text-3); }

/* --- tooltip (hover tip on the 3D view; title attributes elsewhere) and overlays (legend, layers, shortcuts, inspector) */
.overlay { background: var(--overlay); border: 1px solid var(--border-strong); border-radius: var(--r3); box-shadow: var(--shadow); }
.ovhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.ovhead h2, .ovhead h3 { margin: 0; }
.x { width: 24px; height: 24px; padding: 0; font-size: 15px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pop { animation: pop var(--t-med) var(--ease); }
@keyframes pulse { from { opacity: 0.45; } to { opacity: 1; } }

/* --- progress bars */
.bar, .runbar { background: var(--raised-2); border-radius: 3px; overflow: hidden; }
.bar { height: 4px; } .runbar { height: 6px; }
.bar > i, .runbar > i { display: block; height: 100%; width: 0; background: var(--run); transition: width 0.3s var(--ease); }
.bar.ok > i, .runbar.ok > i { background: var(--pass); } .bar.bad > i, .runbar.bad > i, .bar.fail > i { background: var(--fail); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5c6370; flex: none; }
.dot.run { background: var(--run); box-shadow: 0 0 0 3px rgba(140, 188, 245, 0.2); animation: pulse 1s infinite alternate; }
.dot.ok { background: var(--pass); } .dot.bad, .dot.fail { background: var(--fail); }

/* ============================================================== layout */
#app { display: grid; grid-template-rows: 48px minmax(0, 1fr); grid-template-columns: 280px minmax(0, 1fr) 344px; height: 100vh; }
@media (max-width: 1440px) { #app { grid-template-columns: 256px minmax(0, 1fr) 320px; } }
.side { background: var(--panel); overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
#left { border-right: 1px solid var(--border); }
#right { border-left: 1px solid var(--border); overflow: hidden; }
.card { padding: var(--s4); border-bottom: 1px solid var(--border); }
.card.grow { flex: 1; min-height: 140px; display: flex; flex-direction: column; padding-bottom: var(--s2); }
#error { color: var(--fail); margin-top: var(--s2); white-space: pre-wrap; }
#error:empty { display: none; }

/* ---------------- top bar: flow stepper */
#topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s4); background: var(--panel); border-bottom: 1px solid var(--border); min-width: 0; }
.brand { font-weight: 600; font-size: var(--t-lg); white-space: nowrap; }
.brand span { color: var(--text-2); font-weight: 400; }
#flow { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; gap: 0; flex: 1; min-width: 0; justify-content: center; }
#flow li { display: flex; align-items: center; min-width: 0; }
#flow li + li::before { content: ""; width: 24px; height: 2px; background: var(--border-strong); margin: 0 var(--s1); flex: none; border-radius: 1px; }
#flow li.done + li::before, #flow li.done::before { background: #3c6e57; }
#flow button { height: 30px; gap: var(--s2); border: 1px solid transparent; background: transparent; padding: 0 10px 0 5px; border-radius: 15px; color: var(--text-2); }
#flow button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--raised); color: var(--text); }
#flow .n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 600; border: 1.5px solid var(--border-hover); color: var(--text-2); flex: none; }
#flow .st { font-size: var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
#flow li.done .n { background: #2b5a45; border-color: var(--pass); color: #d9f5e7; }
#flow li.done button { color: var(--text); }
#flow li.current button { color: var(--text); background: var(--accent-bg); border-color: var(--accent-line); }
#flow li.current .n { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
#flow li.running .n { animation: pulse 1s infinite alternate; }
#flow li.ready .n { border-color: var(--pass); background: var(--pass); color: #0c2018; }
#flow li.ready:not(.current) button { color: var(--text); }
#flow button:disabled { opacity: 0.5; }
.topright { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
@media (max-width: 1500px) { #flow .st { display: none; } #flow li + li::before { width: 16px; } }
@media (max-width: 1340px) { .brand span { display: none; } #flow .l { font-size: var(--t-sm); } }

/* ---------------- left: model + convert + meshes */
#stats { font-size: var(--t-xs); color: var(--text-2); margin: 0 0 var(--s3); font-variant-numeric: tabular-nums; }
#stats:empty { display: none; }
#modelCard .row { gap: var(--s2); }
#convCard { display: flex; flex-direction: column; gap: var(--s3); }
button.big { width: 100%; height: 40px; font-size: var(--t-md); font-weight: 600; gap: var(--s2); }
.runrow { display: flex; gap: var(--s2); align-items: center; }
.runrow .runbar { flex: 1; }
#convStatus { white-space: pre-wrap; font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--text-2); margin-top: calc(-1 * var(--s1)); }
#convStatus:empty { display: none; }
#convStatus .err { color: var(--fail); }
#convStatus .okt { color: var(--pass); }
details.settings { border: 1px solid var(--border); border-radius: var(--r2); background: var(--sunken); }
details.settings summary { cursor: pointer; height: 32px; padding: 0 var(--s2); color: var(--text-2); font-size: var(--t-sm); list-style: none; display: flex; gap: 6px; align-items: center; border-radius: var(--r2); transition: color var(--t-fast) var(--ease); }
details.settings summary:hover { color: var(--text); }
details.settings summary::-webkit-details-marker { display: none; }
details.settings summary::before { content: "▸"; font-size: var(--t-xs); width: 10px; color: var(--text-3); }
details.settings[open] summary::before { content: "▾"; }
details.settings summary b { color: var(--text); font-weight: 500; margin-left: auto; font-variant-numeric: tabular-nums; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opts { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s2); align-items: center; padding: var(--s1) var(--s2) var(--s3); }
.opts .val { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--t-xs); color: var(--text-2); min-width: 0; }
#convSource { white-space: normal; overflow-wrap: anywhere; }
.opts input[type=number] { width: 64px; }
.opts .help { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--text-3); margin: -2px 0 var(--s1); }
.opts select { height: 24px; font-size: var(--t-sm); }
.vexplain { font-size: var(--t-xs); color: var(--text-2); margin: 0; line-height: 1.5; }
.vexplain b { font-weight: 600; }

/* mesh list */
.listhead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.listhead h2 { margin: 0; }
.listhead .lk { font-size: var(--t-xs); color: var(--text-3); margin-left: auto; }
.listhead label { font-size: var(--t-xs); color: var(--text-2); }
#meshList { list-style: none; margin: 0 calc(-1 * var(--s2)); padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
#meshList li { padding: 6px var(--s2); border-radius: var(--r2); cursor: pointer; border: 1px solid transparent; margin-bottom: 2px; transition: background-color var(--t-fast) var(--ease); }
#meshList li:hover, #meshList li.hov { background: var(--raised); }
#meshList li.focus { background: var(--accent-bg); border-color: var(--border-strong); box-shadow: inset 2px 0 0 var(--accent); }
#meshList .empty { cursor: default; color: var(--text-3); font-size: var(--t-sm); padding: var(--s1) var(--s2); }
#meshList .empty:hover { background: none; }
.mrow { display: flex; align-items: center; gap: 6px; height: 20px; }
.mname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mi { color: var(--text-3); font-size: var(--t-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vline { display: grid; grid-template-columns: 64px auto minmax(0, 1fr) 16px; gap: 6px; align-items: center; font-size: var(--t-xs); margin-top: 2px; height: 18px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.vline .vt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vline .vs { white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.vline.running { grid-template-columns: 64px minmax(0, 1fr) 0 0; }
.vline a.dl { padding: 0 2px; justify-content: center; }
.prog { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prog .bar { flex: 1; min-width: 30px; }
.prog span:not(.bar) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* ---------------- centre: scoreboard, view bar, view, details */
#center { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
#score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, auto); align-items: stretch; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); background: var(--panel); }
.sv { display: flex; gap: var(--s3); min-width: 0; }
.sv > .scell { flex: 1 1 0; }
.scell { display: flex; flex-direction: column; gap: 2px; }
.scell .sb { display: flex; align-items: baseline; gap: var(--s1) var(--s4); flex-wrap: wrap; }
.scell .sp { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.scell .sp small { font-size: var(--t-sm); font-weight: 500; color: var(--text-2); margin-left: 2px; }
.scell .sp.ok { color: var(--pass); } .scell .sp.fail { color: var(--fail); }
.scell .sp .ic { font-size: var(--t-lg); margin-right: 2px; }
.scell .sm { display: flex; gap: 2px var(--s3); flex-wrap: wrap; font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.scell .sm b { color: var(--text); font-weight: 600; }
/* tooltip affordance on the label word only (inline-block stops the dotted underline under the value) */
.sm .tip b, .vm .tip b, .gl .tip b { display: inline-block; }
.score-side { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--s2); min-width: 0; border: 1px solid var(--border); border-radius: var(--r2); padding: var(--s2) var(--s3); background: var(--raised); }
#scoreNote { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--note); }
#scoreNote:empty { display: none; }
a.btn.dlmain { height: auto; min-height: 40px; flex-direction: column; gap: 1px; line-height: 1.25; padding: 5px var(--s3); }
a.btn.dlmain small { font-weight: 400; font-size: var(--t-xs); opacity: 0.85; }
.dlrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s1); font-size: var(--t-xs); color: var(--text-3); }
.dlrow .dlk { margin-right: 2px; }
.dlrow a.dl + a.dl::before { content: "·"; color: var(--text-3); margin: 0 4px 0 -2px; }

#viewbar { display: flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s4); border-bottom: 1px solid var(--border); background: var(--panel); min-width: 0; }
#presets .custom { font-style: italic; color: var(--text-2); }
#viewInfo { flex: 1; min-width: 0; font-size: var(--t-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
@media (max-width: 1500px) { #presets kbd { display: none; } }
@media (max-width: 1380px) { #presets button { padding: 0 6px; } }

#view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#view > canvas { position: absolute; inset: 0; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--text-2); font-size: var(--t-lg); text-align: center; z-index: 20; }
#overlay.drag { background: rgba(216, 220, 226, 0.08); outline: 3px dashed var(--accent); outline-offset: -16px; color: var(--text); }
#overlay.drag::after { content: "Drop to load the model"; font-size: var(--t-lg); background: var(--panel); padding: var(--s3) var(--s4); border-radius: var(--r3); }
#split { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
#split .handle { position: absolute; top: 0; bottom: 0; left: -3px; width: 6px; background: rgba(230, 230, 230, 0.75); cursor: ew-resize; pointer-events: auto; }
#split .grip { position: absolute; top: 50%; left: -11px; width: 22px; height: 34px; margin-top: -17px; border-radius: var(--r2); background: var(--text); pointer-events: none; }
.tag { position: absolute; top: var(--s3); height: 26px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); padding: 0 var(--s2); border-radius: var(--r1); background: rgba(16, 18, 22, 0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); pointer-events: none; border-left: 3px solid var(--c, var(--text-3)); font-variant-numeric: tabular-nums; z-index: 3; }
.tag.ff { --c: var(--ff); } .tag.cad { --c: var(--cad); }
.tag b { font-weight: 600; }
.tag .ok { color: var(--pass); } .tag .fail { color: var(--fail); }
.tag.l { right: var(--s3); } .tag.r { left: var(--s3); }
.tag.s { left: var(--s3); }

/* empty state / ready hint */
#empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
#empty .ecard { pointer-events: auto; background: var(--overlay); border: 1px solid var(--border-strong); border-radius: var(--r3); padding: var(--s5); max-width: 520px; box-shadow: var(--shadow); }
#empty h2 { font-size: var(--t-xl); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0 0 var(--s2); display: block; }
#empty p { margin: 0 0 var(--s3); color: var(--text-2); }
#empty .row { margin-bottom: var(--s3); }
#empty .row button { height: 32px; padding: 0 var(--s4); }
#empty .vexplain { border-top: 1px solid var(--border); padding-top: var(--s3); display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); }
#empty.ready { align-items: flex-end; padding-bottom: var(--s6); }
#empty.ready .ecard { padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: center; max-width: none; }

/* legend overlay: top-left under the tags, collapsible; the details drawer owns the bottom edge */
#legendBox { position: absolute; left: var(--s3); top: 50px; width: 296px; max-width: calc(100% - 24px); max-height: calc(100% - 62px); display: flex; flex-direction: column; z-index: 4; overflow: hidden; }
#legendBox > button { height: 28px; border: 0; background: none; justify-content: space-between; padding: 0 var(--s3); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); border-radius: var(--r3); }
#legendBox > button:hover { color: var(--text); background: none; }
#legendBox.collapsed { width: auto; }
#legendBox.collapsed > button { gap: var(--s3); }
#legendBox.collapsed #legend { display: none; }
#legend { overflow: auto; padding: 0 var(--s3) var(--s3); min-height: 0; font-size: var(--t-sm); }
.legend-bar { height: 10px; border-radius: 2px; margin: var(--s1) 0 2px; position: relative; }
.legend-ticks { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.legend-block + .legend-block { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); }
.legend-title { font-size: var(--t-sm); margin-bottom: var(--s1); }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s3); font-size: var(--t-sm); }
.kinds > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kinds .kl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kinds span.n { color: var(--text-2); font-variant-numeric: tabular-nums; margin-left: auto; }
.keyrow { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--t-sm); }
.keyrow > span { display: inline-flex; align-items: center; gap: 6px; }

/* layers popover */
#layersPop { position: absolute; top: var(--s2); right: var(--s3); width: 360px; max-height: calc(100% - 16px); overflow: auto; padding: var(--s3) var(--s4) var(--s4); z-index: 9; }
#layersPop h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
#layersPop h3:first-child { margin-top: 0; display: flex; justify-content: space-between; align-items: center; }
.sides { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s2); align-items: center; margin: var(--s3) 0; }
.sides select { width: 100%; }
.layers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
.crow { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s2); align-items: center; font-size: var(--t-sm); }
.crow select { width: 100%; }

/* hover tip */
#hoverTip { position: absolute; pointer-events: none; background: var(--overlay); border: 1px solid var(--border-strong); border-radius: var(--r2); padding: 6px var(--s2); font-size: var(--t-sm); max-width: 320px; z-index: 7; box-shadow: var(--shadow); }
#hoverTip .muted { color: var(--text-2); }

/* details drawer (summary table) */
#summary { border-top: 1px solid var(--border); background: var(--panel); max-height: 38%; display: flex; flex-direction: column; min-height: 0; container-type: inline-size; }
#summary header { display: flex; align-items: center; gap: var(--s3); height: 36px; padding: 0 var(--s4); cursor: pointer; user-select: none; min-width: 0; transition: background-color var(--t-fast) var(--ease); }
#summary header:hover { background: var(--raised); }
#summary header h2 { margin: 0; flex: none; }
#summary header #sumTotals { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
#summary .body { overflow: auto; min-height: 0; border-top: 1px solid var(--border); }
#summary.collapsed .body { display: none; }
#sumTable th:first-child, #sumTable td.mn { position: sticky; left: 0; background: var(--panel); z-index: 2; }
#sumTable th { height: 30px; }
#sumTable td { height: 30px; }
#sumTable tr.focus td.mn { background: var(--accent-bg); }
#sumTable tr.focus td:first-child { box-shadow: none; }
#sumTable tr.focus td.mn { box-shadow: inset 2px 0 0 var(--accent); }
#sumTable tr.v2 td { border-bottom-color: var(--border-strong); }
#sumTable td.mn { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#sumTable td.mn .muted { font-size: var(--t-xs); }
#sumTable td.deg { font-size: var(--t-xs); color: var(--text-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#sumTable td .chip { vertical-align: middle; }
#sumTable th:first-child { padding-left: var(--s4); } #sumTable td.mn { padding-left: var(--s4); }
#sumTable th:last-child, #sumTable td:last-child { padding-right: var(--s4); }
@container (max-width: 1100px) { .p3 { display: none; } }
@container (max-width: 800px) { .p2 { display: none; } }

/* ---------------- right: focused mesh verdict + tabs */
#focusCard { flex: none; display: flex; flex-direction: column; gap: var(--s2); }
.fhead { display: flex; align-items: center; gap: var(--s1); }
#focusName { color: var(--text); font-size: var(--t-lg); font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
#focusMeta { font-size: var(--t-xs); color: var(--text-2); margin-top: calc(-1 * var(--s1)); font-variant-numeric: tabular-nums; }
#focusMeta:empty { display: none; }
#verdict { display: flex; flex-direction: column; gap: var(--s2); }
.vd { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.vd:hover { border-color: var(--border-hover); border-left-color: var(--c); }
.vd.shown { background: var(--raised-2); }
.gauge { position: relative; height: 8px; background: var(--raised-2); border-radius: 4px; margin: var(--s2) 0 var(--s1); }
.gauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--pass); }
.gauge.fail > i { background: var(--fail); }
.gauge .tolm { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.gauge .rmsm { position: absolute; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, 0.6); }
.gl { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; gap: var(--s2); }
.gl b { color: var(--text); font-weight: 600; }
.vm { font-size: var(--t-xs); color: var(--text-2); margin-top: var(--s1); font-variant-numeric: tabular-nums; display: flex; gap: 2px var(--s3); flex-wrap: wrap; }
.vm b { color: var(--text); font-weight: 600; }
.vm.exp { margin-top: 2px; color: var(--text-3); }
.vd .prog { margin-top: var(--s2); font-size: var(--t-xs); color: var(--text-2); }
.vd .verr { font-size: var(--t-xs); color: var(--fail); margin-top: var(--s1); overflow-wrap: anywhere; }
.vfoot { display: flex; justify-content: flex-end; }
#tradeoff { font-size: var(--t-sm); color: var(--note); }
#tradeoff:empty { display: none; }
.rpanes { flex: 1; min-height: 0; overflow-y: auto; }
.pane { padding: var(--s4); }
.pane + .pane { border-top: 1px solid var(--border); }
.pane h2 { margin-top: 0; }
.pane-empty { color: var(--text-3); font-size: var(--t-sm); }
.sect { margin-top: var(--s4); }
.sect > h3 { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* stepper */
#stepper { list-style: none; margin: 0; padding: 0; }
#stepper li { display: grid; grid-template-columns: 14px 1fr auto; gap: 0 var(--s2); align-items: center; padding: 3px 0; position: relative; }
#stepper li.empty { display: block; color: var(--text-3); }
#stepper li .ic { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #5c6370; justify-self: center; }
#stepper li.running .ic { border-color: var(--run); background: var(--run); animation: pulse 1s infinite alternate; }
#stepper li.done .ic { border-color: var(--pass); background: var(--pass); }
#stepper li.error .ic { border-color: var(--fail); background: var(--fail); }
#stepper li.skipped { opacity: 0.55; }
#stepper li .t { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: var(--t-xs); }
#stepper li .msg { grid-column: 2 / 4; color: var(--text-2); font-size: var(--t-xs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
#stepper li.error .msg { display: block; color: var(--fail); }
#stepper li .msg:empty { display: none; }
#stepper li.lane { display: flex; flex-wrap: wrap; white-space: nowrap; gap: var(--s1) var(--s2); align-items: center; margin-top: var(--s3); padding: var(--s2) 0 var(--s1); border-top: 1px solid var(--border); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
#stepper li.lane .chip { text-transform: none; letter-spacing: 0; }
#stepper li.lane .lv { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--text-2); }
#stepper li.sub { padding-left: 10px; }

/* CAD analysis */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); }
.chips button { height: 24px; padding: 0 var(--s2); font-size: var(--t-xs); gap: 6px; }
.chips button.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--text); }
#profileChart { width: 100%; height: 208px; background: var(--sunken); border-radius: var(--r1); margin-top: var(--s3); }
#profileNow { font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
#cadInfo { margin-top: var(--s3); }
#cadInfo table th, #cadInfo table td { padding: 3px var(--s1); font-size: var(--t-xs); }
#cadInfo table th { background: var(--panel); position: static; }
#cadInfo .facts { margin-top: var(--s2); display: flex; flex-direction: column; gap: 2px; color: var(--text-2); }
dl.kv.cadkv { font-size: var(--t-xs); gap: 2px var(--s3); }
dl.kv.cadkv dt { color: var(--text-3); }
.cadsec { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.cadsec h3 { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); display: flex; gap: var(--s2); align-items: center; }
.cadsec h3 .v { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-2); margin-left: auto; }
.qbar { position: relative; height: 6px; border-radius: 3px; background: var(--raised-2); margin: var(--s1) 0; }
.qbar i { position: absolute; top: 0; bottom: 0; background: var(--text-3); border-radius: 3px; }
.qbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.qbar u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--cad-text); border-radius: 1px; text-decoration: none; }

/* complexity */
table.cx { table-layout: fixed; }
table.cx th, table.cx td { padding: var(--s1) 6px; font-size: var(--t-sm); white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
table.cx th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.cx th:first-child { width: 104px; }
table.cx th { position: static; }
table.cx td:first-child { color: var(--text-2); }
.cxbar { display: inline-block; height: 6px; border-radius: 0 3px 3px 0; margin-right: 6px; vertical-align: middle; opacity: 0.85; }
#cxScatter { margin-top: var(--s3); }
svg.scatter { display: block; background: var(--sunken); border-radius: var(--r1); }
.scatter .sc-grid { stroke: #2a2e36; stroke-width: 1; }
.scatter .sc-tol { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 4 3; }
.scatter .sc-tick { fill: var(--text-2); font-size: 9px; }
.scatter .sc-axis { fill: var(--text-2); font-size: 10px; }
.scatter .sc-lab { fill: var(--text); font-size: 10px; }
.scatter .sc-link { stroke: #8a909a; stroke-width: 1.5; }
.scatter .sc-off { opacity: 0.35; }
.scatter .sc-pt { cursor: pointer; }
.scatter .sc-pt:hover { opacity: 1; }
.scatter .sc-pt.sc-on rect, .scatter .sc-pt.sc-on circle:not([fill=transparent]) { stroke: var(--panel); stroke-width: 2; }
.sc-key { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s1); align-items: center; }
.sc-key span { display: inline-flex; gap: var(--s1); align-items: center; }

/* convergence chart */
#chart { width: 100%; height: 160px; background: var(--sunken); border-radius: var(--r1); }
.chartKey { display: flex; gap: var(--s3); font-size: var(--t-xs); color: var(--text-2); margin-top: var(--s1); flex-wrap: wrap; }
.chartKey i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: var(--s1); }
.chartKey i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; height: 2px; }
#fitNow { font-size: var(--t-xs); margin-top: var(--s1); font-variant-numeric: tabular-nums; }

/* feature tree */
#treeInfo { margin-bottom: var(--s2); color: var(--text-2); }
#featTree { max-height: max(200px, calc(50vh - 120px)); min-height: 160px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r1); background: var(--sunken); }
#featTree:empty { display: none; }
#featTree:focus-visible { outline-offset: -2px; }
.tn { display: flex; align-items: center; gap: var(--s1); height: 22px; padding: 0 var(--s1); font-size: var(--t-sm); white-space: nowrap; cursor: pointer; }
.tn:hover, .tn.hov { background: var(--raised-2); }
.tn.sel, .tn.sel:hover { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
#featTree:focus-visible .tn.kf { outline: 2px solid var(--accent); outline-offset: -2px; }
.tn.hid .tl { opacity: 0.45; text-decoration: line-through; }
.tn .tw { width: 12px; flex: none; color: var(--text-3); text-align: center; }
.tn .tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tn .tc { color: var(--text-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.tn .tb { height: 16px; padding: 0 var(--s1); font-size: 10px; border-radius: 3px; visibility: hidden; }
.tn:hover .tb, .tn.sel .tb, .tn .tb.on, .tn .tb.off, .tn .tb:focus-visible { visibility: visible; }
.tn.more { cursor: default; }
.tn.more a { font-size: var(--t-xs); }
.hint { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s2); }

/* inspector: docked in the right panel (Structure tab), above the tree */
#inspector { border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--r2); background: var(--raised); padding: var(--s3); margin-top: var(--s4); }
.ins-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.ins-title { font-size: var(--t-md); font-weight: 600; margin: var(--s2) 0 2px; overflow-wrap: anywhere; }
.ins-chain { font-size: var(--t-xs); color: var(--text-2); margin-bottom: 2px; overflow-wrap: anywhere; }
dl.kv.ins-kv { margin: var(--s3) 0 0; font-size: var(--t-sm); }
.ins-meta { font-size: var(--t-xs); color: var(--text-2); }
.ins-params dd { text-align: right; }
.ins-params details { text-align: right; }
.ins-params details summary { cursor: pointer; color: var(--text-2); }
.ins-params code { display: block; white-space: pre-wrap; font-size: 10px; max-height: 120px; overflow: auto; background: var(--sunken); padding: var(--s1); border-radius: 3px; text-align: left; margin-top: 2px; }
.ins-sub { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-top: var(--s3); }
.ins-children { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--t-sm); margin-top: var(--s1); }
.ins-actions { margin-top: var(--s3); gap: var(--s1); }
.ins-doc { margin-top: var(--s2); font-size: var(--t-sm); }

/* keyboard help */
#keys { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 40; }
#keys .kc { padding: var(--s4) var(--s5) var(--s5); min-width: 380px; }
#keys h2 { font-size: var(--t-lg); color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; }
#keys .ovhead { margin-bottom: var(--s3); }
#keys dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; }
#keys dt { text-align: right; }
#keys dd { margin: 0; color: var(--text-2); }

/* ============================================================== docs */
body.docs-open #app { display: none; }
#docsView { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.docs-head { display: flex; align-items: center; gap: var(--s4); height: 48px; padding: 0 var(--s4); border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; }
.docs-head h1 { margin: 0; font-size: var(--t-lg); }
.docs-tabs { display: flex; gap: var(--s1); align-self: stretch; }
.docs-tabs a { display: inline-flex; align-items: center; color: var(--text-2); padding: 0 var(--s2); border-bottom: 2px solid transparent; font-size: var(--t-sm); font-weight: 500; }
.docs-tabs a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border-hover); }
.docs-tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.docs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
#docsToc { border-right: 1px solid var(--border); overflow-y: auto; padding: var(--s4) var(--s3); font-size: var(--t-sm); background: var(--panel); }
#docsToc a { display: block; color: var(--text-2); padding: 3px 6px; border-radius: var(--r1); }
#docsToc a:hover { color: var(--text); background: var(--raised); text-decoration: none; }
#docsToc a.l3 { padding-left: 18px; font-size: var(--t-xs); }
#docsToc .toc-h { color: var(--text); font-weight: 600; margin: var(--s1) 6px 6px; }
#docsMain { overflow-y: auto; padding: var(--s5) var(--s6) 60px; }
.md { max-width: 920px; font-size: 14px; line-height: 1.6; }
.md h1 { font-size: var(--t-2xl); margin: 0 0 var(--s3); word-break: normal; }
.md h2 { font-size: var(--t-xl); text-transform: none; letter-spacing: 0; color: var(--text); margin: var(--s6) 0 var(--s3); padding-bottom: 6px; border-bottom: 1px solid var(--border); display: block; font-weight: 600; }
.md h3 { font-size: var(--t-lg); margin: var(--s5) 0 var(--s2); }
.md a { color: var(--link); }
.md code { background: var(--raised); padding: 1px 5px; border-radius: 3px; font-size: 12.5px; }
.md pre { background: var(--sunken); padding: 10px var(--s3); border-radius: var(--r2); overflow: auto; }
.md pre code { background: none; padding: 0; }
.md table { width: auto; margin: 10px 0; font-variant-numeric: normal; }
.md th, .md td { white-space: normal; text-align: left; border: 1px solid var(--border); padding: 5px 9px; vertical-align: top; }
.md th { position: static; background: var(--raised); color: var(--text); font-size: var(--t-md); }
.md img { max-width: 100%; background: #f6f6f4; border-radius: var(--r2); padding: 6px; display: block; margin: var(--s3) 0; }
.md blockquote { margin: var(--s3) 0; padding: 6px 14px; border-left: 3px solid var(--accent-line); background: var(--raised); color: #cfd6e0; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
.md .flash, .hcard.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r1); }
.hcard.target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.glance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--s4); }
.glance-grid figure { margin: 0; }
.glance-grid img { margin: 0; cursor: zoom-in; }
.glance-grid figcaption { font-size: var(--t-sm); color: var(--text-2); text-transform: capitalize; margin-top: 2px; }
section.glance { margin-bottom: 10px; }
.docs-missing { color: var(--text-2); padding: var(--s5); border: 1px dashed var(--border-strong); border-radius: var(--r2); max-width: 720px; }
.cat-bar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.cat-bar input[type=search] { min-width: 220px; }
.cat-bar .chip-btn { height: 24px; padding: 0 10px; font-size: var(--t-sm); border-radius: 12px; }
.cat-bar .chip-btn.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--text); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s4); }
.hcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r2); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 6px; font-size: var(--t-md); line-height: 1.5; }
.hcard h3 { margin: 0; font-size: var(--t-lg); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.hcard .hid { color: var(--text-2); font-size: var(--t-sm); font-weight: 400; }
.hcard .cat { font-size: var(--t-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.hcard .st { margin-left: auto; }
.hcard dl { display: grid; grid-template-columns: 92px 1fr; gap: 3px 10px; margin: 2px 0; }
.hcard dt { color: var(--text-3); font-size: var(--t-sm); }
.hcard dd { margin: 0; }
.hcard img { max-width: 100%; background: #f6f6f4; border-radius: var(--r1); padding: var(--s1); cursor: zoom-in; }
.hcard .pieces { display: flex; gap: var(--s1); flex-wrap: wrap; }
.hcard .pieces span { font-size: var(--t-xs); background: var(--raised); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 7px; }
.hcard .refs { font-size: var(--t-sm); color: var(--text-2); }
.hcard .more { font-size: var(--t-sm); }
#imgZoom { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; }
#imgZoom img { max-width: 92vw; max-height: 92vh; background: #f6f6f4; border-radius: var(--r2); padding: var(--s2); }
.tabs:empty { display: none; }
.verr { color: var(--fail); overflow-wrap: anywhere; }

/* ============================================================== sizing fixes + responsive breakpoints
   Checked by tests/ui/layout-sweep.ts (1024–2560 wide, 768 tablet, 390 phone; every main state). */

/* Settings → Variants: a full-width row of equal buttons (the side column is only 232–280 px wide) */
.opts #variantSel { grid-column: 1 / -1; display: flex; width: 100%; }
.opts #variantSel button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; }
.opts #resSel { grid-column: 1 / -1; display: flex; width: 100%; }
.opts #resSel button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; }
.opts #resCustom { grid-column: 1 / -1; }
.opts #resCustom[hidden], .opts .res-row[hidden] { display: none; }
.opts #resCustom input[type=number] { width: 56px; }

/* details table: mesh name and its stats on two lines (the cell spans both variant rows) */
#sumTable td.mn .muted { display: block; overflow: hidden; text-overflow: ellipsis; }

/* the 3D view never collapses: the details drawer gives way first, and the legend fits inside the view */
#view { min-height: 220px; }
#summary { flex: 0 1 auto; min-height: 36px; }
#legendBox { max-height: calc(100% - 58px); }
#legendBox > button { flex: none; }

/* docs: long reference URLs, code and wide tables stay inside the page */
.md { overflow-wrap: anywhere; }
.md table { display: block; max-width: 100%; overflow-x: auto; }
.md pre code { white-space: pre; overflow-wrap: normal; }
#layersPop { max-width: calc(100% - 24px); }
#keys .kc { min-width: 0; max-width: calc(100vw - 32px); }

/* ---- ≤ 1280: narrower sides; scoreboard stacks the download card under the two variant tiles */
@media (max-width: 1280px) {
  #app { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  #score { grid-template-columns: minmax(0, 1fr); }
  .score-side { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .score-side a.btn.dlmain { flex: none; }
  #flow .l { display: none; }
  #flow li.current .l { display: inline; }
}

/* ---- ≤ 1100: tighter still; variant tiles show their headline numbers on one line each */
@media (max-width: 1100px) {
  #app { grid-template-columns: 224px minmax(0, 1fr) 280px; }
  .card { padding: var(--s3); }
  .scell .sp { font-size: var(--t-lg); }
  .scell .sm { gap: 0 var(--s2); }
  #presets button { padding: 0 5px; }
  #viewInfo { display: none; }
  .docs-body { grid-template-columns: 200px minmax(0, 1fr); }
  #docsMain { padding: var(--s4) var(--s4) 60px; }
}

/* ---- ≤ 900 (tablet): two columns; the right panel moves under the 3D view */
@media (max-width: 900px) {
  #app { grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) minmax(0, 42vh); }
  #topbar { grid-column: 1 / -1; }
  #left { grid-column: 1; grid-row: 2 / 4; }
  #center { grid-column: 2; grid-row: 2; }
  #right { grid-column: 2; grid-row: 3; border-left: 0; border-top: 1px solid var(--border); overflow-y: auto; }
  .brand span { display: none; }
  #keysBtn { display: none; }
  #flow li + li::before { width: 10px; margin: 0 2px; }
  #view { min-height: 180px; }
  .docs-body { grid-template-columns: minmax(0, 1fr); }
  .docs-body > nav, .docs-body > aside { display: none; }
}

/* ---- ≤ 640 (phone): one scrolling column — view first, then results, then the controls */
@media (max-width: 640px) {
  html, body { height: auto; overflow: auto; }
  #app { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
  #topbar { order: 0; height: 48px; flex: none; position: sticky; top: 0; z-index: 20; }
  #center { order: 1; min-height: 70vh; }
  #right { order: 2; border: 0; border-top: 1px solid var(--border); overflow: visible; }
  #left { order: 3; border: 0; border-top: 1px solid var(--border); overflow: visible; }
  #flow { justify-content: flex-start; overflow-x: auto; }
  #flow li + li::before { width: 6px; }
  .brand { display: none; }
  #view { min-height: 300px; }
  #summary { max-height: none; }
  #presets { overflow-x: auto; max-width: 100%; }
  #viewbar { overflow-x: auto; }
}

/* right-panel tabs and tables, settings value cells: fit the narrow side columns */
/* ≤ 1440 the side column is 224–256 px: each setting's label goes above its value, so input + unit stay on one line */
@media (max-width: 1440px) {
  .opts { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .opts > .dim, .opts > span.tip { margin-top: var(--s2); }
  .opts > .dim:first-child { margin-top: 0; }
}
.rpanes table.rows { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 1280px) {
  .rtabs button { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1100px) {
  .rtabs { gap: 0; }
  .rtabs button { padding-left: 4px; padding-right: 4px; font-size: var(--t-sm); }
}
/* mesh list rows: keep the surface count readable in the narrow side column */
@media (max-width: 1280px) {
  .vline { grid-template-columns: 56px auto minmax(0, 1fr) 14px; gap: 4px; }
}