/* InvictusCad — pane styles (2026-09-29). Loaded after ui.css. Classes here
   back the Library pane + part inspector (libng.js, prefix lx-), the
   Drawings page + Files/Revisions/Source panes (pages/workspace.js, prefix
   wx-), the Ctrl+K palette (palette.js, prefix px-) and the shared chat/text
   helpers (format.js, prefix fx-). Tokens only — see ui.css for the scale. */

/* ══════════════════════════════════════════════════════════════════════
   lx- — Library pane + part inspector (libng.js)
   ══════════════════════════════════════════════════════════════════════ */

/* library tab strip */
.lx-tabs { display: flex; border-bottom: 1px solid var(--rule); }
.lx-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--s2) 0; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-3); border-radius: 0; }
.lx-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.lx-body { flex: 1; overflow-y: auto; padding: var(--s3); }

/* generic hint / loading text */
.lx-hint { font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: var(--s2); line-height: 1.5; }
.lx-hint--mid { margin: var(--s3) 0 var(--s2); }
.lx-loading { font-size: var(--fs-meta); color: var(--ink-3); }
.lx-loading::first-letter { text-transform: uppercase; }

/* "Your built parts →" */
.lx-mine { display: block; width: 100%; text-align: left; font-size: var(--fs-meta); padding: 7px var(--s2);
  margin-bottom: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--hull-1); color: var(--accent); cursor: pointer; }
.lx-mine:hover { background: var(--hull-3); }

/* shared tile: design cards, quick-build cards, catalogue results, rule cards */
.lx-box { background: var(--hull-1); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s2) var(--s3); margin-bottom: var(--s2); }
.lx-box--click { cursor: pointer; }
.lx-box--click:hover { border-color: var(--rule-strong); }
.lx-box--mb-lg { margin-bottom: var(--s4); }

.lx-card-title { font-weight: 600; font-size: var(--fs-meta); }
.lx-card-id { font-size: var(--fs-meta); color: var(--ink-4); }
.lx-card-desc { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }
.lx-card-build { margin-top: var(--s2); }
.lx-kbd { font-size: var(--fs-meta); color: var(--accent); }

.lx-part-row { padding: 5px var(--s2); font-family: var(--mono); font-size: var(--fs-meta);
  cursor: pointer; border-radius: var(--r-sm); }
.lx-part-row:hover { background: var(--hull-3); }

.lx-bar { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.lx-bar--basis { max-width: 420px; }
.lx-input-mono { flex: 1; font-family: var(--mono); font-size: var(--fs-meta); padding: 4px 7px; }
.lx-cat-hint { color: var(--ink-3); font-size: var(--fs-meta); padding: 2px 0 var(--s2); }

.lx-cat-card { font-size: var(--fs-meta); }
.lx-cat-table { width: 100%; font-family: var(--mono); font-size: var(--fs-meta); margin-top: 3px; }
.lx-cat-k { color: var(--ink-3); padding: 1px 4px 1px 0; }
.lx-cat-src { font-size: var(--fs-meta); color: var(--ink-4); margin-top: 3px; border-top: 1px dashed var(--rule); padding-top: 3px; }
.lx-cat-flag { font-size: var(--fs-meta); color: var(--warn); margin-top: 3px; line-height: 1.4; }
.lx-cat-build-row { margin-top: var(--s1); }
.lx-accent-btn { border-color: var(--accent); color: var(--accent); }

/* part properties (library Props view) */
.lx-props-title { font-family: var(--mono); font-size: var(--fs-body); font-weight: 650;
  margin-bottom: 2px; word-break: break-all; }
.lx-props-drawing { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: var(--s2); }
.lx-props-table { width: 100%; font-size: var(--fs-meta); border-collapse: collapse; margin-bottom: var(--s3); }
.lx-props-k { color: var(--ink-3); padding: 2px 6px 2px 0; white-space: nowrap; vertical-align: top; }
.lx-props-v { font-family: var(--mono); padding: 2px 0; }
.lx-props-tonnes { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); margin: -2px 0 var(--s3); }

/* section headings: CHECKS / PROPERTIES / DELIVERABLES / REVISION HISTORY /
   ALL FILES / UNIT CONVERSION / DESIGN BASIS / REVISIONS */
.lx-section-h { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3); margin: var(--s2) 0 var(--s1); }
.lx-section-h--top { margin-top: var(--s4); }

/* deliverable chips */
.lx-chip { margin: 0 var(--s2) var(--s2) 0; }
.lx-pkg-block { display: flex; width: 100%; margin-bottom: var(--s2); }
.lx-pkg-inline { margin: 0 var(--s2) var(--s2) 0; }

.lx-rev-row { font-size: var(--fs-meta); padding: 4px 0; border-top: 1px solid var(--rule); }
.lx-rev-row--lg { font-size: var(--fs-meta); padding: 7px 0; }
.lx-rev-num { color: var(--accent); }
.lx-rev-date { color: var(--ink-3); margin-left: 4px; }
.lx-rev-action { color: var(--ink-2); margin-top: 2px; }

/* unit conversion (paintRef box) */
.lx-unit-row { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; }
.lx-unit-label { font-size: var(--fs-meta); color: var(--ink-3); width: 38px; }
.lx-unit-input { width: 74px; font-family: var(--mono); font-size: var(--fs-meta); padding: 3px 6px; }
.lx-unit-select { flex: 1; font-size: var(--fs-meta); padding: 3px; }
.lx-unit-out { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-2); margin: 2px 0 var(--s3) 43px; }

/* unit conversion (renderPart columns) */
.lx-unit-cols { display: flex; gap: var(--s4); flex-wrap: wrap; }
.lx-unit-col { min-width: 190px; }
.lx-unit-col-label { font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: 4px; }
.lx-unit-col-row { display: flex; gap: 5px; }

/* design basis rule cards */
.lx-rule-std { font-size: var(--fs-meta); color: var(--accent); }
.lx-rule-title { font-size: var(--fs-meta); font-weight: 600; margin: 3px 0; }
.lx-rule-req { font-size: var(--fs-meta); color: var(--ink-2); }
.lx-rule-meta { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 4px; }
.lx-rule-card { max-width: 620px; }

/* part inspector (renderPart) */
.lx-part-empty { padding: var(--s5); color: var(--ink-3); font-size: var(--fs-body); line-height: 1.6; max-width: 520px; }
.lx-part-loading { padding: var(--s4); color: var(--ink-3); font-size: var(--fs-meta); }
.lx-part-wrap { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s4); max-width: 940px; }
.lx-part-name { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -.01em; }
.lx-part-fn { font-size: var(--fs-meta); color: var(--ink-3); }
.lx-part-sub { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; }
.lx-continue-btn { margin-top: var(--s2); color: var(--accent); border-color: var(--accent); background: transparent; }

.lx-props-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s2); }
.lx-tile { background: var(--hull-1); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s2) var(--s3); }
.lx-tile-k { font-size: var(--fs-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.lx-tile-v { font-size: var(--fs-body); font-weight: 600; margin-top: 3px; }

.lx-filelist { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.lx-file-row { display: flex; gap: var(--s3); font-family: var(--mono); font-size: var(--fs-meta); padding: 3px 6px;
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); }
.lx-file-row:hover { background: var(--hull-3); }
.lx-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-file-size { color: var(--ink-4); }

.lx-tool-card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s2) var(--s3);
  margin-bottom: var(--s2); cursor: default; }
.lx-tool-name { font-size: var(--fs-meta); font-weight: 650; color: var(--accent); }
.lx-tool-desc { font-size: var(--fs-meta); color: var(--ink-3); margin: 3px 0; }
.lx-tool-args { font-size: var(--fs-meta); color: var(--ink-3); }

/* EDIT bar (deterministic rebuild) */
.lx-editbar { position: absolute; bottom: var(--s2); left: var(--s2); right: var(--s2); display: flex;
  align-items: center; gap: var(--s2); background: var(--hull-1); border: 1px solid var(--rule-strong);
  border-radius: var(--r-md); padding: 6px var(--s2); z-index: 6; }
.lx-editbar-tag { font-size: var(--fs-meta); color: var(--ink-3); }
.lx-editbar-family { font-size: var(--fs-meta); }
.lx-editbar-label { font-size: var(--fs-meta); color: var(--ink-3); }
.lx-editbar-input { width: 76px; font-family: var(--mono); font-weight: 600; padding: 3px 6px; }
.lx-editbar-go { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.lx-editbar-msg { font-size: var(--fs-meta); color: var(--ink-3); }
.lx-editbar-gate { font-size: var(--fs-meta); }      /* a status chip (shared/components.css .badge.<tone>): the word and the tone come from shared/status.js */

/* checks table (styles.css owns .chk-tbl / .chk-sum) — value/allowable/
   utilisation read in the normal font (they're already-unitted numbers, not
   code); the verdict cell holds a status chip only for a row that fails or needs confirming */
.chk-tbl td:nth-child(2), .chk-tbl td:nth-child(3), .chk-tbl td:nth-child(4) {
  font-family: var(--sans); font-variant-numeric: tabular-nums; }
.chk-tbl td:last-child { font-family: var(--sans); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   wx- — Drawings page + Files/Revisions/Source panes (pages/workspace.js)
   ══════════════════════════════════════════════════════════════════════ */

.wx-loading { padding: var(--s2); color: var(--ink-3); font-size: var(--fs-meta); }

.wx-term-head { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s2) var(--s3) 4px;
  font-size: var(--fs-meta); color: var(--ink-3); }
.wx-term-brief { font-weight: 650; color: var(--ink); }
.wx-term-box { font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-2);
  background: var(--hull-1); border: 1px solid var(--rule); border-radius: var(--r-sm);
  margin: 4px var(--s3) var(--s3); padding: var(--s2) 10px; max-height: 180px; overflow: auto; white-space: pre-wrap; }

.wx-files-head { padding: var(--s2) var(--s3); display: flex; gap: var(--s2); align-items: center;
  flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.wx-files-search { background: var(--hull-1); border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--fs-meta); padding: 3px var(--s2); width: 140px; }
.wx-files-hidewrap { font-size: var(--fs-meta); color: var(--ink-3); display: flex; gap: 5px; align-items: center; cursor: pointer; }
.wx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wx-chip { font-size: var(--fs-meta); padding: 2px var(--s2); border-radius: 10px; border: 1px solid var(--rule);
  background: var(--hull-1); color: var(--ink-3); cursor: pointer; }
.wx-chip.on { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
.wx-files-summary { padding: var(--s2) var(--s3); font-size: var(--fs-meta); color: var(--ink-3); }

.wx-file-row { display: flex; gap: var(--s3); padding: 3px var(--s3) 3px 22px; font-family: var(--mono);
  font-size: var(--fs-meta); cursor: pointer; border-bottom: 1px dashed var(--rule); }
.wx-file-kind { color: var(--accent); flex: none; width: 36px; }
.wx-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-file-size { color: var(--ink-3); flex: none; width: 52px; text-align: right; }

.wx-group-head { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3) 2px;
  font-size: var(--fs-body); font-weight: 650; }
.wx-group-count { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-3); }
.wx-accent-btn { color: var(--accent); border-color: var(--accent); }
.wx-inline-btn { flex: none; }

.wx-revs-dwgno { padding: var(--s2) var(--s3); font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.wx-rev-row { display: flex; gap: var(--s4); padding: 6px var(--s3); font-size: var(--fs-meta);
  border-bottom: 1px dashed var(--rule); align-items: center; }

.wx-code-bar { padding: var(--s2) var(--s3); display: flex; gap: var(--s3); border-bottom: 1px solid var(--rule); }
.wx-code-msg { font-size: var(--fs-meta); color: var(--ink-3); }
.wx-code-ta { flex: 1; min-height: 300px; font-family: var(--mono); font-size: var(--fs-body);
  white-space: pre; border: none; border-radius: 0; resize: none; }

/* ══════════════════════════════════════════════════════════════════════
   px- — Ctrl+K palette (palette.js)
   ══════════════════════════════════════════════════════════════════════ */

.px-scrim { position: fixed; inset: 0; background: color-mix(in srgb, #000 62%, transparent); z-index: 210;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.px-box { width: min(560px, 92vw); background: var(--hull-1); border: 1px solid var(--rule-strong);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev-2); }
.px-input { width: 100%; background: var(--hull-2); border: none; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-size: var(--fs-body); padding: 11px 14px; outline: none; }
.px-list { max-height: 52vh; overflow-y: auto; padding: 4px 0; }
.px-row { display: flex; gap: var(--s2); align-items: baseline; padding: 7px 14px; cursor: pointer; font-size: var(--fs-meta); }
.px-row.sel { background: var(--hull-3); }
.px-row-label { flex: 1; }
.px-row-sub { font-size: var(--fs-meta); color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   fx- — chat / text helpers shared across pages (format.js)
   ══════════════════════════════════════════════════════════════════════ */

.fx-md-box { line-height: 1.5; }
.fx-md-h { font-weight: 650; margin: 4px 0 2px; }
.fx-md-ul { margin: 2px 0 2px 16px; padding: 0; }
.fx-md-code { font-family: var(--mono); font-size: var(--fs-meta); background: var(--hull-3); padding: 0 4px; border-radius: 4px; }
.fx-copy-btn { background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: var(--fs-meta); padding: 0 2px; }

/* ── calculator figures (kit.js svg.*) — drawing sheet, shaded solids, live preview ── */
.ck-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ck-fig[hidden] { display: none; }
.ck-fig-h { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--ink-3); min-height: 22px; }
.ck-fig-state { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ck-fig-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1.5px dashed var(--ink-4); }
.ck-fig[data-mode=result] .ck-fig-state { color: var(--ink-2); }
.ck-fig[data-mode=result] .ck-fig-state::before { border: none; background: var(--accent); }
.ck-fig-btn { font-size: var(--fs-meta); padding: 2px 8px; border-radius: 6px; color: var(--ink-2); }
.ck-fig-b { cursor: zoom-in; }
.ck-fig[data-mode=preview] .ck-fig-b .ck-svg { border-style: dashed; }
.ck-svg { max-height: 380px; background: var(--hull-0); }
.ck-svg text { paint-order: stroke; stroke: var(--hull-0); stroke-width: 3px; stroke-linejoin: round; }
.ck-svg .ck-label { font-size: 12px; }
.ck-svg .ck-label-strong { font-size: 13px; }
.ck-svg .ck-dim text, .ck-svg text.ck-dim { font-size: 11px; }
.ck-svg .ck-small { fill: var(--ink-3); font-size: 10.5px; }
.ck-svg .ck-grid-min { stroke: color-mix(in srgb, var(--ink) 4%, transparent); stroke-width: .6; fill: none; }
.ck-svg .ck-grid-maj { stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-width: .8; fill: none; }
.ck-svg .ck-st-a { stop-color: color-mix(in srgb, var(--ink) 10%, var(--hull-1)); }
.ck-svg .ck-st-b { stop-color: color-mix(in srgb, var(--ink) 24%, var(--hull-1)); }
.ck-svg .ck-st-c { stop-color: color-mix(in srgb, var(--ink) 40%, var(--hull-1)); }
.ck-svg .ck-wa-a { stop-color: color-mix(in srgb, var(--accent) 16%, var(--hull-0)); }
.ck-svg .ck-wa-b { stop-color: color-mix(in srgb, var(--accent) 34%, var(--hull-0)); }
.ck-svg .ck-ho-a { stop-color: color-mix(in srgb, var(--ink) 55%, var(--hull-1)); }
.ck-svg .ck-ho-b { stop-color: color-mix(in srgb, var(--ink) 80%, var(--hull-1)); }
.ck-svg .ck-steel { stroke: color-mix(in srgb, var(--ink) 60%, var(--hull-1)); stroke-width: 1.2; }
.ck-svg .ck-hose { stroke: color-mix(in srgb, var(--ink) 85%, var(--hull-1)); stroke-width: .8; }
.ck-svg .ck-hatch-ln { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.2; }
.ck-svg .ck-surface { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.4; }
.ck-svg .ck-wave { stroke: var(--accent); stroke-width: 1.4; fill: none; }
.ck-svg .ck-sea { stroke: none; }
.ck-svg .ck-fill-force { fill: var(--err); } .ck-svg .ck-fill-accent { fill: var(--accent); } .ck-svg .ck-fill-ok { fill: var(--ok); }
.ck-svg .ck-okline { stroke: var(--ok); stroke-width: 3; fill: none; stroke-linecap: round; }
.ck-svg .ck-failline { stroke: var(--err); stroke-width: 3; fill: none; stroke-linecap: round; }
.ck-svg .ck-rope { stroke: color-mix(in srgb, var(--ink) 70%, var(--hull-1)); stroke-width: 3.2; fill: none; stroke-linecap: round; }
.ck-svg .ck-cl { stroke: var(--ink-4); stroke-width: .8; stroke-dasharray: 10 3 2 3; fill: none; }
.ck-svg .ck-okfill { fill: color-mix(in srgb, var(--ok) 22%, transparent); stroke: var(--ok); stroke-width: 1.4; }
.ck-svg .ck-failfill { fill: color-mix(in srgb, var(--err) 22%, transparent); stroke: var(--err); stroke-width: 1.4; }
.ck-svg .ck-warnfill { fill: color-mix(in srgb, var(--warn) 22%, transparent); stroke: var(--warn); stroke-width: 1.4; }
.ck-svg .ck-bar-bg { fill: var(--hull-3); stroke: none; }
.ck-svg .ck-chip rect { fill: var(--hull-3); stroke: var(--rule-strong); stroke-width: 1; }
.ck-svg .ck-chip text { font-size: 11px; font-weight: 650; fill: var(--ink-2); stroke: none; }
.ck-svg .ck-chip.ok rect { fill: color-mix(in srgb, var(--ok) 16%, var(--hull-0)); stroke: var(--ok); }
.ck-svg .ck-chip.ok text { fill: var(--ok); }
.ck-svg .ck-chip.fail rect { fill: color-mix(in srgb, var(--err) 16%, var(--hull-0)); stroke: var(--err); }
.ck-svg .ck-chip.fail text { fill: var(--err); }
.ck-svg .ck-chip.warn rect { fill: color-mix(in srgb, var(--warn) 16%, var(--hull-0)); stroke: var(--warn); }
.ck-svg .ck-chip.warn text { fill: var(--warn); }
.ck-svg .ck-chip.accent rect { fill: color-mix(in srgb, var(--accent) 14%, var(--hull-0)); stroke: var(--accent); }
.ck-svg .ck-chip.accent text { fill: var(--accent); }
/* RC19 UX C-H3 (Alan's decision): on example values the drawing gives no verdict either: its OK / FAIL / SINKS chip and
   the green or red legs and fills go neutral ink, like the pill above it (the load arrow is a direction, it stays); R-H2: the
   enlarged copy (.ck-zoom, outside the card) carries the flag too */
:is(.ck-card, .ck-zoom)[data-example] .ck-svg :is(.ck-chip.ok, .ck-chip.fail, .ck-chip.warn) rect { fill: var(--hull-3); stroke: var(--rule-strong); }
:is(.ck-card, .ck-zoom)[data-example] .ck-svg :is(.ck-chip.ok, .ck-chip.fail, .ck-chip.warn) text { fill: var(--ink-2); }
:is(.ck-card, .ck-zoom)[data-example] .ck-svg :is(.ck-okline, .ck-failline, .ck-ok, .ck-fail) { stroke: color-mix(in srgb, var(--ink) 70%, var(--hull-1)); }
:is(.ck-card, .ck-zoom)[data-example] .ck-svg :is(.ck-okfill, .ck-failfill, .ck-warnfill) { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--ink-3); }
:is(.ck-card, .ck-zoom)[data-example] .ck-svg .ck-fill-ok { fill: var(--ink-3); }
.ck-svg .ck-callout circle { fill: var(--ink-2); stroke: none; }
.ck-svg .ck-callout polyline { stroke: var(--ink-3); stroke-width: .9; fill: none; }
.ck-zoom .modal { height: auto; max-height: 92vh; width: min(1200px, 95vw); }
.ck-zoom-body { padding: 12px; overflow: auto; }
.ck-zoom-body .ck-svg { max-height: 80vh; }
/* assemblies: placement editing */
.asm-title .badge { margin-left: var(--s2); vertical-align: 2px; font-weight: 600; }
.vec3 { display: inline-flex; gap: 4px; }
.vec3 input { width: 68px; padding: 4px 6px; font-variant-numeric: tabular-nums; text-align: right; }
.vec3 input:disabled { opacity: .6; }
/* the Part column keeps room for a name: ui.css's .table td breaks anywhere, and the vector inputs squeezed it to one letter a line (ui-max P2-9) */
.asm-table td.asm-name { min-width: 160px; }
.asm-act { text-align: right; white-space: nowrap; }
.asm-act .btn + .btn { margin-left: 4px; }
/* Apply shows once a placement is edited (assemblies.js save.hidden); .btn's inline-flex beat the hidden attribute */
.asm-act .btn[hidden] { display: none; }
.asm-hint { margin-top: var(--s2); }
@media (max-width: 760px) { .vec3 input { width: 54px; } }
/* phone: one card per part, each cell labelled; no one-letter name column, no inputs off the right edge (UX review P1-8) */
@media (max-width: 760px) {
  .asm-table, .asm-table tbody, .asm-table tr, .asm-table td { display: block; width: 100%; }
  .asm-table tr.asm-th { display: none; }
  .asm-table tr { border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; background: var(--hull-1); }
  .asm-table tr + tr { margin-top: 10px; }
  .asm-table td, .asm-table tr:last-child td { border: 0; padding: 6px 0; text-align: left; overflow-wrap: normal; }
  .asm-table td.asm-name { overflow-wrap: anywhere; }
  .asm-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); font-family: var(--sans); }
  .asm-table .vec3 { display: flex; }
  .asm-table .vec3 input { flex: 1 1 0; min-width: 0; width: auto; height: 40px; }
  .asm-table td.asm-act:empty { display: none; }
  .asm-table .asm-act .btn { min-height: 40px; min-width: 40px; }
}
.cat-sheet { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: var(--fs-meta); }
.cat-sheet select { max-width: 240px; }
.welcome .w-use { margin-top: 10px; font-size: var(--fs-ui); padding: 5px 12px; border-radius: 7px; border: 1px solid var(--accent); color: var(--accent); background: var(--wash); }
.welcome .w-use:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }