/* CK PLM - the CK design system (vault: 00-portfolio/ck-design-system.md).
   Shared skeleton verbatim; the app layer is PLM's: the Innovation teal, measured by
   check_contrast_plm.py (the dashboard's checker with this palette). */
:root {
  /* ---- shared skeleton: identical in every app ---- */
  --bg:      #0e1110;
  --surface: #171b19;
  --raised:  #1f2523;
  --line:    #2b3330;     /* decorative edges only */

  --text:    #f2f5f3;
  --muted:   #93a09a;     /* every small label lives here */
  --faint:   #64716b;     /* graphics only, never text */

  --good: #34d399;
  --bad:  #f87171;

  --step--1: clamp(.75rem, .72rem + .15vw, .82rem);
  --step-0:  clamp(.9rem,  .86rem + .2vw,  1rem);
  --step-1:  clamp(1.1rem, 1rem + .5vw,    1.35rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  --step-3:  clamp(2.4rem, 1.8rem + 3vw,   3.6rem);

  --radius: 14px;
  --gap: clamp(.6rem, .4rem + 1vw, 1rem);

  /* ---- app layer: PLM (Innovation) ---- */
  --accent: #46c1d8;
  --warn:   #fbbf24;
  /* function colours (F32, R47 - Chris, 20 Oct): a fill with its ink, and a text colour for the panels.
     Yellow and teal only as fills with dark ink; a colour never alone - always with the word or the symbol */
  --fn-wiki: #c026d3;       --fn-wiki-ink: #ffffff;       --fn-wiki-text: #e879f9;
  --fn-3d: #14b8a6;         --fn-3d-ink: #0e1110;         --fn-3d-text: #2dd4bf;
  --fn-tickets: #eab308;    --fn-tickets-ink: #0e1110;    --fn-tickets-text: #facc15;
  --fn-purchasing: #ea580c; --fn-purchasing-ink: #0e1110; --fn-purchasing-text: #fb923c;
  /* C40 (Chris, 29 Oct): BOM blue, Product Configurations green */
  --fn-bom: #3b82f6;        --fn-bom-ink: #0e1110;        --fn-bom-text: #60a5fa;
  --fn-config: #15803d;     --fn-config-ink: #ffffff;     --fn-config-text: #4ade80;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:#f7f9f8; --surface:#ffffff; --raised:#eef2f0; --line:#dfe5e2;
    --text:#0e1110; --muted:#55615b; --faint:#7d8a84;
    --good:#0f7a4a; --bad:#98122e;
    /* app layer: PLM */
    --accent:#0e7490; --warn:#a35a00;
    --fn-wiki-text:#a21caf; --fn-3d-text:#0f766e; --fn-tickets-text:#a16207; --fn-purchasing-text:#c2410c;
    --fn-bom-text:#1d4ed8; --fn-config-text:#15803d;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--step-0)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- shell ---- */
.shell-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap);
  padding: .5rem max(16px, env(safe-area-inset-left)) .5rem max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; letter-spacing: .02em; text-decoration: none; margin-right: .25rem; }
.brand img { display: block; }
.login-brand { display: flex; align-items: center; gap: .8rem; }
.nav { display: flex; flex-wrap: wrap; gap: .15rem; flex: 1; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  text-decoration: none; color: var(--muted); border-radius: 10px;
}
.nav a:hover { background: var(--raised); color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--faint); }
.head-tools { display: flex; align-items: center; gap: .5rem; }

main {
  max-width: 46rem; margin-inline: auto;
  padding: var(--gap) max(16px, env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom));
}
main.wide { max-width: 96rem; }

.label { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.hero { margin: .5rem 0 var(--gap); }
.hero .num { font-size: var(--step-3); font-weight: 650; line-height: 1.05; color: var(--accent); }
/* C47 (F32): the headline number in its function's text colour - the accent where a page has no function */
main[data-fn="bom"] .hero .num { color: var(--fn-bom-text); }
main[data-fn="config"] .hero .num { color: var(--fn-config-text); }
main[data-fn="tickets"] .hero .num { color: var(--fn-tickets-text); }
main[data-fn="purchasing"] .hero .num { color: var(--fn-purchasing-text); }
main[data-fn="3d"] .hero .num { color: var(--fn-3d-text); }
main[data-fn="wiki"] .hero .num { color: var(--fn-wiki-text); }
.hero .sub { font-size: var(--step-1); color: var(--muted); }
h1, h2, h3 { margin: 0; font-weight: 650; }
h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-0); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: var(--gap); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--gap); container-type: inline-size;
}
.card > h2 { margin-bottom: .6rem; }
.empty { color: var(--muted); padding: .4rem 0; }
.notice {
  border: 1px solid var(--faint); border-radius: 10px; padding: .6rem .8rem; background: var(--raised);
}
.notice.bad { border-color: var(--bad); }
.notice.warn { border-color: var(--warn); }

/* ---- controls ---- */
button, .btn {
  font: inherit; color: var(--text); background: var(--raised);
  border: 1px solid var(--faint); border-radius: 10px;
  min-height: 44px; padding: 0 .9rem; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--text); }
button.primary, .btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
button.quiet { background: transparent; border-color: transparent; color: var(--muted); }
button.quiet:hover { color: var(--text); border-color: var(--faint); }
button.danger { border-color: var(--bad); }
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--faint); border-radius: 10px;
  min-height: 44px; padding: .45rem .6rem; width: 100%;
}
textarea { min-height: 6rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background: var(--raised); color: var(--muted); border-color: var(--line); }
label.field { display: block; }
label.field > span { display: block; margin-bottom: .2rem; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
label.check { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.form { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@container (min-width: 34rem) { .form.two { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }

/* ---- chips: a state is always a word, the colour only repeats it ---- */
.chip {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: var(--step--1); padding: .1rem .55rem; border-radius: 999px;
  border: 1px solid var(--faint); color: var(--muted); background: var(--raised);
}
.chip::before { content: "○"; }
.chip.good { color: var(--good); border-color: var(--good); }
.chip.good::before { content: "✓"; }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.warn::before { content: "…"; }
.chip.bad { color: var(--bad); border-color: var(--bad); }
.chip.bad::before { content: "✕"; }
.chip.old::before { content: "↺"; }
.chip.plain::before { content: none; }

/* ---- tables and the grid ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--surface); }
tr:last-child > td { border-bottom: 0; }
td.num, th.num { text-align: right; }
tbody tr.link { cursor: pointer; }
tbody tr.link:hover { background: var(--raised); }
.grid-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.grid-tools input[type="search"] { max-width: 18rem; }
.grid-tools select { width: auto; }
.grid th button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
  font: inherit; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.grid th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grid th[aria-sort] button { color: var(--text); }
.grid tr.filters th { padding-top: 0; }
.grid tr.filters input { min-height: 36px; padding: .2rem .45rem; min-width: 5rem; }
.grid td.editable { cursor: text; }
.grid td.editable:hover { box-shadow: inset 0 0 0 1px var(--faint); }
.grid td.locked { color: var(--muted); }
.grid td input, .grid td select { min-height: 36px; padding: .2rem .45rem; }
.grid tr.frozen td:first-child { box-shadow: inset 3px 0 0 var(--faint); }
.grid-foot { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .2rem 0; color: var(--muted); font-size: var(--step--1); }
details.columns { position: relative; }
details.columns > summary { list-style: none; cursor: pointer; }
details.columns > summary::-webkit-details-marker { display: none; }
details.columns .menu {
  position: absolute; z-index: 5; right: 0; margin-top: .3rem; min-width: 14rem; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--faint); border-radius: 10px; padding: .4rem .7rem;
}

/* ---- dialogs, toasts ---- */
dialog {
  color: var(--text); background: var(--surface); border: 1px solid var(--faint); border-radius: var(--radius);
  padding: var(--gap); width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
}
dialog::backdrop { background: rgb(0 0 0 / .55); }
dialog h2 { margin-bottom: .8rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: var(--gap); }
#toasts { position: fixed; z-index: 50; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: .4rem; width: min(40rem, calc(100vw - 2rem)); pointer-events: none; }   /* text only: clicks go through */
.toast { background: var(--raised); border: 1px solid var(--faint); border-radius: 10px; padding: .6rem .8rem; }
.toast.bad { border-color: var(--bad); }
.toast.good { border-color: var(--good); }

/* ---- login ---- */
.login { max-width: 24rem; margin: 12vh auto 0; }
.login h1 { font-size: var(--step-2); margin-bottom: .2rem; }

/* ---- history ---- */
.history li { list-style: none; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.history li:last-child { border-bottom: 0; }
.history ul { margin: 0; padding: 0; }
.history .change { overflow-wrap: anywhere; }
.history del { color: var(--muted); }
.history ins { text-decoration: none; font-weight: 600; }
.tabs { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--line); margin-bottom: var(--gap); }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .8rem; color: var(--muted); text-decoration: none; border-radius: 10px 10px 0 0; }
.tabs a[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--faint); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.steps { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ---- chips as buttons: the lifecycle diagram (13 Oct) - a bigger hit area without a bigger chip ---- */
button.chip { min-height: 0; font: inherit; font-size: var(--step--1); cursor: pointer; position: relative; padding: .1rem .55rem; }
button.chip::after { content: ""; position: absolute; inset: -10px -4px; }
button.chip:hover { border-color: var(--text); }
dialog.lifecycle { width: min(56rem, calc(100vw - 2rem)); }
.life { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 1rem; }
.life-col { display: grid; gap: .5rem; }
.life-state { display: grid; gap: .1rem; min-width: 7.5rem; padding: .55rem .7rem; border: 1px solid var(--faint); border-radius: 10px; background: var(--raised); }
.life-state.here { border: 2px solid var(--accent); }
.life-state.here > .small:first-of-type { color: var(--text); font-weight: 600; }
.life-arrow { display: grid; justify-items: center; color: var(--muted); font-size: var(--step-1); }
.life-arrow .small { font-size: var(--step--1); }
.bom-view { display: inline-flex; gap: .25rem; }
.bom-view button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
td.indent { white-space: nowrap; }
.head-tools { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.head-tools select { width: auto; max-width: 12rem; }
#search-form { flex: 1 1 9rem; min-width: 0; }
#search-form input { min-height: 40px; width: 100%; max-width: 14rem; }
ul.results { margin: 0; padding-left: 1.1rem; }
ul.results li { padding: .25rem 0; }
.grid tr.group th { text-transform: none; letter-spacing: 0; font-size: var(--step-0); color: var(--text); background: var(--raised); padding: .4rem .7rem; }
.action-status { margin: 0; }
.next-step { border-left: 3px solid var(--faint); padding-left: .7rem; }

/* purchasing (F10): the cost roll-up */
#rollup-totals { gap: var(--gap); }
.stat .num { font-size: var(--step-2); font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }

/* onboarding (F18): the template choices */
.template-choice { align-items: flex-start; padding: .5rem 0; }
.template-choice input { margin-top: .3rem; }

/* drop a file on a page (finding 14 Oct) and tick rows in a grid */
main.dropping { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
th.pick, td.pick { width: 2.75rem; text-align: center; }

/* the 3D viewer (C2): readable in light and dark - the canvas is transparent on the page colour */
.viewer { width: 100%; border: 1px solid var(--faint); border-radius: 12px; overflow: hidden; background: var(--bg); }
.viewer canvas { display: block; touch-action: none; }
.viewer canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#bom tbody tr.picked td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ticket-snapshots img { max-width: 100%; border: 1px solid var(--faint); border-radius: 10px; }

/* AI-CAD (C4): a package's flat pattern */
.flat-pattern { width: 100%; max-height: 70vh; border: 1px solid var(--faint); border-radius: 10px; background: #fff; }
iframe.flat-pattern { height: 70vh; }
#check-report-text { white-space: pre-wrap; }

/* thumbnails (C8): a small picture in the Name cell; "no picture" when the view is not made yet */
.with-thumb { display: inline-flex; align-items: center; gap: .55rem; }
img.thumb { width: 64px; height: 48px; object-fit: contain; flex: none; display: block; }
/* C16: no frame - the picture itself is the button that shows the part in 3D */
button.thumb-open { min-height: 0; padding: 0; border: 0; background: none; border-radius: 6px; flex: none; cursor: zoom-in; }
button.thumb-open:hover img.thumb { filter: brightness(1.08); }
button.thumb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.thumb-open { display: inline-flex; line-height: 0; border-radius: 6px; flex: none; }   /* C43: a picture opens its item's page */
a.thumb-open:hover img.thumb { filter: brightness(1.08); }
a.thumb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thumb.none { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 48px; flex: none;
  border: 1px dashed var(--faint); border-radius: 6px; font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.1; }
.thumb.none::after { content: 'no picture'; }

/* documents (C9): markdown as in Obsidian */
.hero .num.doc-title { font-size: var(--step-1); }
.doc.markdown { line-height: 1.6; max-width: 72rem; overflow-wrap: anywhere; }
.doc.markdown h1, .doc.markdown h2, .doc.markdown h3 { margin: 1.4em 0 .5em; scroll-margin-top: 5rem; }
.doc.markdown table { border-collapse: collapse; margin: .8em 0; display: block; overflow-x: auto; max-width: 100%; }
.doc.markdown th, .doc.markdown td { border: 1px solid var(--faint); padding: .35rem .55rem; vertical-align: top; text-align: left; }
.doc.markdown blockquote { margin: .8em 0; padding: .4rem .9rem; border-left: 3px solid var(--faint); color: var(--muted); }
.doc.markdown blockquote.callout { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); border-radius: 0 8px 8px 0; }
.doc.markdown .callout-title { display: block; font-weight: 650; color: var(--accent); }
.doc.markdown code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
.doc.markdown pre { overflow-x: auto; padding: .7rem; border: 1px solid var(--faint); border-radius: 8px; }
.doc.markdown img.doc-image { max-width: 100%; border-radius: 8px; }
.doc.markdown .mermaid { margin: .8em 0; overflow-x: auto; }
.doc.markdown a.wikilink { text-decoration-style: dotted; }
.doc.markdown .wikilink.missing { color: var(--muted); border-bottom: 1px dashed var(--faint); cursor: help; }
mark.me { background: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--text); border-radius: 4px; padding: 0 .2em; }
.doc-frontmatter { font-size: .85rem; border-collapse: collapse; width: auto; }
.doc-frontmatter th, .doc-frontmatter td { padding: .15rem .6rem .15rem 0; text-align: left; vertical-align: top; }
.doc-frontmatter th { color: var(--muted); font-weight: 500; }
.doc-editor { min-height: 60vh; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; line-height: 1.5; }
.pre { white-space: pre-wrap; }
dialog.popup3d { width: min(72rem, calc(100vw - 2rem)); }

/* ---- the part page for laptops (C14): form + revisions, then BOM | 3D side by side; stacked below 900 px ---- */
.part-top { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.part-top > * + * { margin-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, var(--split, 50%)) 14px minmax(0, 1fr); align-items: start; }
.split-pane { min-width: 0; }
.split-right > .card { position: sticky; top: .5rem; }
.split-handle { align-self: stretch; cursor: col-resize; touch-action: none; display: flex; justify-content: center; border-radius: 6px; }
.split-handle::before { content: ""; width: 4px; border-radius: 2px; background: var(--line); }
.split-handle:hover::before, .split-handle:focus-visible::before { background: var(--accent); }
.split-handle:focus-visible { outline: none; }
.split.no-3d { grid-template-columns: minmax(0, 1fr); }                     /* C43: Hide 3D - the BOM alone */
.split.no-3d > .split-handle, .split.no-3d > .split-right { display: none; }
.split-tools { justify-content: flex-end; }
.tabs .tab-later { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .8rem; color: var(--faint); cursor: not-allowed; }   /* C44: MBOM, SBOM - run D */
.bom-view-row { align-items: center; gap: var(--gap); }
/* C43: an item without geometry - a paint's swatch, an icon for software, document, service */
.thumb.symbol { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 48px; color: var(--muted); }
.thumb.symbol svg { width: 28px; height: 28px; }
.thumb.swatch { background: var(--swatch, var(--raised)); border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 900px) {
  .part-top, .split { grid-template-columns: minmax(0, 1fr); }
  .split-handle { display: none; }
  .split-right { margin-top: var(--gap); }
  .split-right > .card { position: static; }
}
/* the tree of the bill of materials: + / - before a line with children */
.tree-toggle { position: relative; min-height: 0; width: 1.6rem; height: 1.6rem; padding: 0; justify-content: center; font-weight: 700; line-height: 1; flex: none; }
.tree-toggle::after { content: ""; position: absolute; inset: -9px -4px; }
.tree-leaf { display: inline-block; width: 1.6rem; flex: none; }
#bom-structured-grid td[data-column="name"], #bom-flat-grid td[data-column="name"] { min-width: 17rem; }

/* ---- the 3D tools (C15): a toolbar over the view, the name label at the picked point, markers ---- */
.viewer-host { position: relative; }
.viewer-bar { position: absolute; z-index: 2; top: .5rem; left: .5rem; right: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; pointer-events: none; }
.viewer-bar button { pointer-events: auto; min-height: 36px; padding: 0 .6rem; font-size: var(--step--1); background: var(--surface); }
.viewer-bar button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.viewer-host.marking canvas { cursor: crosshair; }
.viewer-label { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis;
  min-height: 36px; padding: 0 .7rem; border-radius: 999px; background: var(--text); color: var(--bg); border: 0; font-size: var(--step--1); font-weight: 600; box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.viewer-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--text); transform: translateX(-50%) rotate(45deg); }
.viewer-markers { margin: 0; padding-left: 1.4rem; display: grid; gap: .25rem; }
.viewer-markers:empty { display: none; }
.viewer-markers strong { color: var(--warn); }
dialog.part-popup { width: min(36rem, calc(100vw - 2rem)); }
.popup-part { align-items: flex-start; gap: var(--gap); }
/* which view a page shows (C17) */
.view-name { margin: 0 0 var(--gap); padding: .55rem .8rem; border-left: 3px solid var(--accent); background: var(--raised); border-radius: 0 10px 10px 0; color: var(--muted); }
.view-name strong { color: var(--text); }
/* the pencil and the loops of a request (C18) */
dialog.sketch-dialog { width: min(72rem, calc(100vw - 2rem)); }
canvas.sketch { display: block; width: 100%; height: auto; max-height: calc(100vh - 14rem); object-fit: contain; touch-action: none; cursor: crosshair; border: 1px solid var(--faint); border-radius: 10px; background: #fff; }
.request-sketches figure { margin: 0; }
img.request-sketch { width: 14rem; max-width: 100%; border: 1px solid var(--faint); border-radius: 8px; display: block; }
.loops { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
/* the 3D tools as icons (C20); the picked line of the tree */
.viewer-bar button.icon { width: 36px; padding: 0; justify-content: center; }
.viewer-bar input[type="range"] { pointer-events: auto; width: 9rem; min-height: 36px; accent-color: var(--accent); }
#bom tbody tr.picked td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
/* the part popup: a long list of files scrolls in its own box (C20 - it covered the Open link) */
.popup-part .kv { flex: 1 1 18rem; min-width: 0; }
.popup-files { max-height: 7.5rem; overflow-y: auto; }
/* the picture column (C21): narrow, no filter */
th.pic, td.pic { width: 72px; padding-right: .25rem; }
/* the right-click menu of a bill-of-materials line (C24) */
.context-menu { position: fixed; z-index: 60; display: grid; min-width: 15rem; padding: .3rem; background: var(--surface); border: 1px solid var(--faint); border-radius: 10px; box-shadow: 0 6px 22px rgb(0 0 0 / .35); }
.context-menu button { justify-content: flex-start; border: 0; background: none; min-height: 40px; border-radius: 6px; text-align: left; }
.context-menu button:hover, .context-menu button:focus-visible { background: var(--raised); outline: none; }
.context-menu hr { border: 0; border-top: 1px solid var(--line); margin: .25rem 0; }
/* knowledge notes (C25): their tags */
.note-tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.tag { font-size: var(--step--1); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; text-decoration: none; }
a.tag:hover { color: var(--text); }
/* an AI-CAD request (C26): progress, CK CAD's questions, the chat */
#request-progress progress { width: 100%; height: 12px; accent-color: var(--accent); }
.card.asking { border-color: var(--warn); }
.questions { margin: 0; padding-left: 1.4rem; display: grid; gap: .8rem; }
.questions textarea { width: 100%; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chat li { max-width: 46rem; padding: .5rem .7rem; border-radius: 10px; background: var(--raised); }
.chat li.from-cad { border-left: 3px solid var(--accent); }
#request-chat .row textarea { flex: 1 1 20rem; }

/* ---- function colours (C29, F32): menus, tabs, badges, table headers of a function ---- */
.nav a.fn { display: inline-flex; align-items: center; gap: .4rem; }
.nav a.fn::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--fn); flex: none; }
.nav a.fn[aria-current="page"] { background: var(--fn-fill); color: var(--fn-ink); box-shadow: none; }
.nav a.fn[aria-current="page"]::before { background: var(--fn-ink); }
.fn-wiki { --fn: var(--fn-wiki-text); --fn-fill: var(--fn-wiki); --fn-ink: var(--fn-wiki-ink); }
.fn-3d { --fn: var(--fn-3d-text); --fn-fill: var(--fn-3d); --fn-ink: var(--fn-3d-ink); }
.fn-tickets { --fn: var(--fn-tickets-text); --fn-fill: var(--fn-tickets); --fn-ink: var(--fn-tickets-ink); }
.fn-purchasing { --fn: var(--fn-purchasing-text); --fn-fill: var(--fn-purchasing); --fn-ink: var(--fn-purchasing-ink); }
.fn-bom { --fn: var(--fn-bom-text); --fn-fill: var(--fn-bom); --fn-ink: var(--fn-bom-ink); }
.fn-config { --fn: var(--fn-config-text); --fn-fill: var(--fn-config); --fn-ink: var(--fn-config-ink); }
/* a ticket's state: open ones yellow (with the word), closed and released muted grey */
.chip.fn-tickets { background: var(--fn-tickets); color: var(--fn-tickets-ink); border-color: var(--fn-tickets); }
.chip.fn-tickets::before { content: "●"; }
.chip.ticket-done { color: var(--muted); border-color: var(--faint); }
.chip.ticket-done::before { content: "✓"; }
/* table headers and tabs of a function */
[data-grid="tickets"] thead tr:first-child th { box-shadow: inset 0 -3px 0 var(--fn-tickets-text); }
[data-grid="purchasing"] thead tr:first-child th { box-shadow: inset 0 -3px 0 var(--fn-purchasing-text); }
.tabs.fn-3d a[aria-current="page"], .tabs.fn-wiki a[aria-current="page"], .tabs.fn-bom a[aria-current="page"] { background: var(--fn-fill); color: var(--fn-ink); box-shadow: none; }
.forge-mark { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -.25em; margin-right: .35rem; }
/* 3D: the tools pressed, the card's title */
.viewer-bar button[aria-pressed="true"] { background: var(--fn-3d); color: var(--fn-3d-ink); border-color: var(--fn-3d); }
#part-3d > .row h2::before, #product-3d > .row h2::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; background: var(--fn-3d-text); margin-right: .45rem; vertical-align: .1em; }
/* the wiki: documents and knowledge */
.doc-title { color: var(--fn-wiki-text); }
.tag { border-color: var(--fn-wiki-text); }
/* your own colours (Account) */
.look-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--gap); }
.look-colours input[type="color"] { width: 3rem; min-height: 40px; padding: 0; border: 1px solid var(--faint); border-radius: 8px; background: none; }

/* ---- C38: the menu's icons (F32) - icons only (the default), icons and text, text only: the user's choice ---- */
.nav a.tab { gap: .45rem; }
.nav a .icon { display: block; flex: none; }
.nav a .label { font-size: inherit; text-transform: none; letter-spacing: normal; color: inherit; }   /* not the small caps of .label */
.nav a.fn .icon { color: var(--fn); }
.nav a.fn[aria-current="page"] .icon { color: inherit; }
:root:not([data-menu="text"]) .nav a.fn::before { display: none; }        /* the icon wears the colour, no dot */
:root:not([data-menu="both"]):not([data-menu="text"]) .nav a.tab { min-width: 44px; padding: 0 .7rem; justify-content: center; }
:root:not([data-menu="both"]):not([data-menu="text"]) .nav a .label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:root[data-menu="text"] .nav a .icon { display: none; }
:root[data-menu="both"] .nav a.tab { padding: 0 .55rem; gap: .35rem; }      /* ten tabs with names: one row at 1920 px (C40) */