:root {
  --bg: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #f8f6f1;
  --border: #ddd6c8;
  --text: #2a2520;
  --muted: #7a7064;
  --accent: #b5651d;
  --accent-ink: #ffffff;
  --accent-soft: #f6e7d8;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --ok: #2e7d32;
  --sheet: #e9dcc4;
  --sheet-edge: #a08c6c;
  --part-stroke: rgba(0, 0, 0, 0.45);
  --cut: #d32f2f;
  --hatch-bg: #e9dcc4;
  --hatch-line: #d6c4a3;
  --offcut: #cfe3c8;
  --offcut-edge: #6f9a63;
  --defect-bg: #f3d6d2;
  --defect-line: #e0a39b;
  --ed-canvas: #fbfaf7;
  --ed-grid: #e7e1d6;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font);
  color-scheme: light;
}

/* Workshop, dark. look.js sets data-theme from the Light/Dark/Auto choice;
   without JavaScript the OS setting is used. */
html[data-theme="dark"] {
  --bg: #1b1916;
  --surface: #24211d;
  --surface-2: #2c2924;
  --border: #3d3830;
  --text: #ece6dc;
  --muted: #a39887;
  --accent: #e08a3c;
  --accent-ink: #1b1916;
  --accent-soft: #3a2c1f;
  --danger: #ff8a80;
  --danger-soft: #3b2120;
  --ok: #81c784;
  --sheet: #5a4c38;
  --sheet-edge: #8a7556;
  --part-stroke: rgba(0, 0, 0, 0.6);
  --cut: #ff6e6e;
  --hatch-bg: #4d4131;
  --hatch-line: #5d4f3c;
  --offcut: #3d5537;
  --offcut-edge: #7fae72;
  --defect-bg: #4a2a27;
  --defect-line: #6e3a35;
  --ed-canvas: #1f1d1a;
  --ed-grid: #34302a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #1b1916;
    --surface: #24211d;
    --surface-2: #2c2924;
    --border: #3d3830;
    --text: #ece6dc;
    --muted: #a39887;
    --accent: #e08a3c;
    --accent-ink: #1b1916;
    --accent-soft: #3a2c1f;
    --danger: #ff8a80;
    --danger-soft: #3b2120;
    --ok: #81c784;
    --sheet: #5a4c38;
    --sheet-edge: #8a7556;
    --part-stroke: rgba(0, 0, 0, 0.6);
    --cut: #ff6e6e;
    --hatch-bg: #4d4131;
    --hatch-line: #5d4f3c;
    --offcut: #3d5537;
    --offcut-edge: #7fae72;
    --defect-bg: #4a2a27;
    --defect-line: #6e3a35;
    --ed-canvas: #1f1d1a;
    --ed-grid: #34302a;
    color-scheme: dark;
  }
}

/* ── Looks (chosen with the Look button; see look.js) ─────────────────────
   Each look has a light version  html[data-look="x"]
   and a dark version             html[data-look="x"][data-theme="dark"].
   Workshop is the default (:root above) and has no data-look attribute. */

/* Blueprint */
html[data-look="blueprint"] {
  --bg: #e8f0fa; --surface: #ffffff; --surface-2: #f1f6fd; --border: #bcd2ea;
  --text: #0d2a4a; --muted: #56708f; --accent: #1f5fae; --accent-ink: #ffffff; --accent-soft: #dce8f8;
  --danger: #b3261e; --danger-soft: #fbe9e7; --ok: #2e7d5b;
  --sheet: #dfeaf6; --sheet-edge: #6f8fb4; --part-stroke: rgba(13, 42, 74, .55); --cut: #c62828;
  --hatch-bg: #e3edf8; --hatch-line: #c9d9ee; --offcut: #d6efe4; --offcut-edge: #3f8f73;
  --defect-bg: #f8dcdc; --defect-line: #e8aaaa; --ed-canvas: #f5f9fe; --ed-grid: #d9e6f5;
  --radius: 4px; --font-head: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shadow: none; --grid-line: rgba(31, 95, 174, .07);
  color-scheme: light;
}
html[data-look="blueprint"][data-theme="dark"] {
  --bg: #0d2a4f; --surface: #12355f; --surface-2: #174070; --border: #2c5687;
  --text: #e8f1ff; --muted: #a7bfdd; --accent: #7cc4ff; --accent-ink: #0d2a4f; --accent-soft: #1c4a7c;
  --danger: #ff9a8f; --danger-soft: #4a2230; --ok: #8be0b0;
  --sheet: #1a4676; --sheet-edge: #8fb4dd; --part-stroke: rgba(0, 0, 0, .55); --cut: #ff7a7a;
  --hatch-bg: #174070; --hatch-line: #20507f; --offcut: #1f5a55; --offcut-edge: #7fd1b5;
  --defect-bg: #4a2a3a; --defect-line: #7a3d50; --ed-canvas: #0f3058; --ed-grid: #1d4675;
  --shadow: 0 1px 2px rgba(0,0,0,.35); --grid-line: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
html[data-look="blueprint"] body {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Slate (formerly "Midnight") */
html[data-look="slate"] {
  --bg: #eef0f4; --surface: #ffffff; --surface-2: #f4f6f9; --border: #d5dae3;
  --text: #1c2230; --muted: #5d6678; --accent: #b86e0b; --accent-ink: #ffffff; --accent-soft: #fbefd9;
  --danger: #b3261e; --danger-soft: #fbe9e7; --ok: #2e7d32;
  --sheet: #e3e7ee; --sheet-edge: #8c95a8; --part-stroke: rgba(28, 34, 48, .5); --cut: #d32f2f;
  --hatch-bg: #e6e9ef; --hatch-line: #d5dae3; --offcut: #dcefe3; --offcut-edge: #4f8f6a;
  --defect-bg: #f6dede; --defect-line: #e5b3b3; --ed-canvas: #f7f8fb; --ed-grid: #e1e5ec;
  --shadow: 0 1px 2px rgba(28,34,48,.06), 0 2px 8px rgba(28,34,48,.05);
  color-scheme: light;
}
html[data-look="slate"][data-theme="dark"] {
  --bg: #12151c; --surface: #1a1f29; --surface-2: #222836; --border: #303849;
  --text: #e6e9ef; --muted: #9aa4b5; --accent: #f2a541; --accent-ink: #12151c; --accent-soft: #3a2f1c;
  --danger: #ff8a80; --danger-soft: #3b2120; --ok: #81c784;
  --sheet: #3a3f4c; --sheet-edge: #6c7487; --part-stroke: rgba(0, 0, 0, .6); --cut: #ff6e6e;
  --hatch-bg: #2f3440; --hatch-line: #3b4150; --offcut: #2f4a3c; --offcut-edge: #7fbf98;
  --defect-bg: #4a2a27; --defect-line: #6e3a35; --ed-canvas: #161a22; --ed-grid: #262c38;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.25);
  color-scheme: dark;
}

/* Minimal */
html[data-look="minimal"] {
  --bg: #f7f7f7; --surface: #ffffff; --surface-2: #f3f3f3; --border: #e3e3e3;
  --text: #111111; --muted: #6b6b6b; --accent: #111111; --accent-ink: #ffffff; --accent-soft: #ececec;
  --danger: #c62828; --danger-soft: #fdecea; --ok: #2e7d32;
  --sheet: #ececec; --sheet-edge: #9a9a9a; --part-stroke: rgba(0, 0, 0, .4); --cut: #d32f2f;
  --hatch-bg: #efefef; --hatch-line: #e0e0e0; --offcut: #e3f1e6; --offcut-edge: #5f8f6a;
  --defect-bg: #f6dede; --defect-line: #e5b3b3; --ed-canvas: #fafafa; --ed-grid: #e8e8e8;
  --radius: 6px; --shadow: none;
  color-scheme: light;
}
html[data-look="minimal"][data-theme="dark"] {
  --bg: #111111; --surface: #1a1a1a; --surface-2: #222222; --border: #2e2e2e;
  --text: #f2f2f2; --muted: #9a9a9a; --accent: #f2f2f2; --accent-ink: #111111; --accent-soft: #2c2c2c;
  --danger: #ff8a80; --danger-soft: #3a2222; --ok: #81c784;
  --sheet: #2a2a2a; --sheet-edge: #777777; --part-stroke: rgba(0, 0, 0, .6); --cut: #ff6e6e;
  --hatch-bg: #262626; --hatch-line: #303030; --offcut: #24362a; --offcut-edge: #7fbf98;
  --defect-bg: #3d2424; --defect-line: #5e3333; --ed-canvas: #151515; --ed-grid: #262626;
  color-scheme: dark;
}

/* High contrast */
html[data-look="contrast"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0; --border: #000000;
  --text: #000000; --muted: #262626; --accent: #0040c1; --accent-ink: #ffffff; --accent-soft: #ffe600;
  --danger: #b00000; --danger-soft: #ffe3e3; --ok: #006400;
  --sheet: #ffffff; --sheet-edge: #000000; --part-stroke: #000000; --cut: #d00000;
  --hatch-bg: #ffffff; --hatch-line: #bdbdbd; --offcut: #c8f7c8; --offcut-edge: #006400;
  --defect-bg: #ffd6d6; --defect-line: #d00000; --ed-canvas: #ffffff; --ed-grid: #cfcfcf;
  --radius: 6px; --shadow: none; --focus: #000000;
  color-scheme: light;
}
html[data-look="contrast"][data-theme="dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #161616; --border: #ffffff;
  --text: #ffffff; --muted: #e6e6e6; --accent: #ffe600; --accent-ink: #000000; --accent-soft: #333000;
  --danger: #ff6b6b; --danger-soft: #330000; --ok: #7cfc00;
  --sheet: #000000; --sheet-edge: #ffffff; --part-stroke: #000000; --cut: #ff4040;
  --hatch-bg: #000000; --hatch-line: #4a4a4a; --offcut: #003a00; --offcut-edge: #7cfc00;
  --defect-bg: #3a0000; --defect-line: #ff4040; --ed-canvas: #000000; --ed-grid: #333333;
  --focus: #ffffff;
  color-scheme: dark;
}
html[data-look="contrast"] body { font-size: 15px; }
html[data-look="contrast"] .card, html[data-look="contrast"] .stat, html[data-look="contrast"] .sheet-card,
html[data-look="contrast"] input, html[data-look="contrast"] select, html[data-look="contrast"] textarea { border-width: 2px; }
html[data-look="contrast"] :focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; box-shadow: 0 0 0 6px #ffe600; }
html[data-look="contrast"] a { text-decoration: underline; }

/* Neon colours for the Tour button and spotlight, per look */
:root { --neon-1: #ff9f43; --neon-2: #ffd166; --neon-3: #ff5e7e; }
html[data-theme="dark"] { --neon-1: #ffb057; --neon-2: #ffe08a; --neon-3: #ff6f91; }
html[data-look="blueprint"] { --neon-1: #1f8bff; --neon-2: #00d2ff; --neon-3: #5b4bff; }
html[data-look="blueprint"][data-theme="dark"] { --neon-1: #7cf7ff; --neon-2: #4cc9f0; --neon-3: #b39dff; }
html[data-look="slate"] { --neon-1: #f2a541; --neon-2: #f25f5c; --neon-3: #ffd23f; }
html[data-look="slate"][data-theme="dark"] { --neon-1: #ffb84d; --neon-2: #ff6b6b; --neon-3: #ffe066; }
html[data-look="minimal"] { --neon-1: #111111; --neon-2: #bdbdbd; --neon-3: #555555; }
html[data-look="minimal"][data-theme="dark"] { --neon-1: #ffffff; --neon-2: #5c5c5c; --neon-3: #bdbdbd; }
html[data-look="contrast"] { --neon-1: #0040c1; --neon-2: #ffe600; --neon-3: #000000; }
html[data-look="contrast"][data-theme="dark"] { --neon-1: #ffe600; --neon-2: #ffffff; --neon-3: #00e5ff; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
}
h1, h2 { margin: 0; font-weight: 650; }
h1, h2, h3, .stat .v, .brand-name { font-family: var(--font-head); }
h1 { font-size: 17px; letter-spacing: .2px; }
h2 { font-size: 15px; }
code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; }

button, select, input, textarea {
  font: inherit;
  color: inherit;
}
button, .file-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
}
button:hover, .file-btn:hover { filter: brightness(1.07); }
button.ghost, .file-btn.ghost {
  background: transparent;
  color: var(--accent);
}
button.icon {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 4px 6px;
  font-size: 15px;
  line-height: 1;
}
button.icon:hover { color: var(--danger); filter: none; }
button.icon.star:hover { color: var(--accent); }

input[type=text], input[type=number], select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 7px;
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input.invalid { border-color: var(--danger); background: var(--danger-soft); }
textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* top bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.brand h1 { color: var(--text); }
.tagline { color: var(--muted); font-size: 12px; }
.project-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.project-bar #projectName { width: 180px; }
.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 210px;
}
.menu-body button, .menu-body .file-btn {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  text-align: left;
}
.menu-body button:hover, .menu-body .file-btn:hover { background: var(--surface-2); }

/* layout */
.layout {
  display: grid;
  grid-template-columns: minmax(420px, 560px) 1fr;
  gap: 18px;
  padding: 18px 20px 40px;
  align-items: start;
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 32px; }
}
.inputs, .results { min-width: 0; }

/* ── phones: table rows become two-line cards ─────────────────────────── */
@media (max-width: 640px) {
  .topbar { padding: 10px 16px; position: static; }
  .project-bar { width: 100%; position: relative; }
  .project-bar #projectName { flex: 1 1 140px; width: auto; }
  /* "More" can wrap to any spot in the bar: open its menu from the bar's left
     edge, just below the button, so it never runs off the screen */
  .menu { position: static; }
  .menu-body { left: 0; right: auto; top: auto; margin-top: 4px; max-width: 100%; z-index: 20; }
  .card-head { flex-wrap: wrap; }
  .preset-select { max-width: 100%; flex: 1 1 100%; }

  .grid thead { display: none; }
  .grid, .grid tbody { display: block; }
  .grid tr { display: grid; gap: 6px 6px; align-items: end; }
  .grid td { display: block; width: auto !important; padding: 0; min-width: 0; }
  .grid td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
  .grid td.act { justify-self: end; align-self: center; white-space: nowrap; }
  .grid td.chk { text-align: left; }
  .grid select.preset { max-width: none; }

  /* stock panels */
  #stockTable tr.main { grid-template-columns: 1.15fr 1.15fr 0.8fr 0.9fr; grid-template-areas: "pre pre pre act" "len wid qty price"; padding-top: 10px; }
  #stockTable tr.main td.pre { grid-area: pre; }
  #stockTable tr.main td.num:nth-of-type(2) { grid-area: len; }
  #stockTable tr.main td.num:nth-of-type(3) { grid-area: wid; }
  #stockTable tr.main td.qty { grid-area: qty; }
  #stockTable tr.main td.price { grid-area: price; }
  #stockTable tr.main td.act { grid-area: act; }
  #stockTable tr.sub { grid-template-columns: 1fr; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }

  /* parts */
  #partsTable tr { grid-template-columns: 1fr 1fr 0.65fr 1.7fr 42px; grid-template-areas: "lbl lbl lbl act act" "len wid qty mat grain";
    padding: 10px 0 10px 10px; border-left: 4px solid var(--c, var(--border)); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  #partsTable td.sw { display: none; }
  #partsTable td.lbl { grid-area: lbl; }
  #partsTable td.num:nth-of-type(3) { grid-area: len; }
  #partsTable td.num:nth-of-type(4) { grid-area: wid; }
  #partsTable td.qty { grid-area: qty; }
  #partsTable td.mat { grid-area: mat; }
  #partsTable td.mat select { width: 100%; }
  #partsTable td.chk { grid-area: grain; }
  #partsTable td.act { grid-area: act; }

  .settings { grid-template-columns: 1fr 1fr; }
  .rb-row { gap: 8px; }
  .rb-head .hint { font-size: 11px; }
  .mini { font-size: 12px; }
  .mini th, .mini td { padding: 3px 4px; overflow-wrap: anywhere; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat .v { font-size: 19px; }
  .sheet-card { padding: 10px; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
}
.card > h2 { margin-bottom: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.preset-select { max-width: 230px; }
.hint { color: var(--muted); font-size: 12px; }

/* tables */
.grid { width: 100%; border-collapse: collapse; }
.grid th {
  text-align: left;
  font-weight: 550;
  color: var(--muted);
  font-size: 12px;
  padding: 0 3px 4px;
}
.grid td { padding: 2px 3px; vertical-align: middle; }
.grid input[type=text] { width: 100%; }
.grid td.num { width: 76px; }
.grid td.qty { width: 54px; }
.grid td.price { width: 64px; }
.grid td.act { width: 1%; white-space: nowrap; }
.grid td.sw { width: 16px; }
.grid td.mat { width: 96px; }
.grid td.mat select { width: 96px; padding: 5px 3px; font-size: 13px; }
.grid td.chk { width: 40px; text-align: center; }
.grid select.preset { width: 100%; max-width: 170px; }
.grid .sub td { padding-top: 0; }
.grid .sub input { font-size: 12px; color: var(--muted); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--part-stroke); }
.lock-toggle { display: inline-flex; cursor: pointer; }
.lock-toggle input { display: none; }
.lock-toggle span {
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.lock-toggle input:checked + span { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.inline-details { margin-top: 6px; width: 100%; }
.inline-details summary { cursor: pointer; color: var(--accent); }

.settings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.settings label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.settings input, .settings select { color: var(--text); font-size: 14px; }
.seg { display: flex; }
.seg button {
  flex: 1;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 5px 8px;
}
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.preset-list { list-style: none; padding: 0; margin: 6px 0 0; }
.preset-list li { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--border); }

/* results */
.results-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.view-toggles { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.view-toggles label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.stat .k { color: var(--muted); font-size: 12px; }
.stat .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .s { color: var(--muted); font-size: 12px; }
.meter { height: 5px; background: var(--surface-2); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--ok); }

.warn {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.empty {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

.sheets { display: flex; flex-direction: column; gap: 14px; }
.sheet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  break-inside: avoid;
}
.sheet-card header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sheet-card h3 { margin: 0; font-size: 14px; }
.sheet-card .meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 1px 8px; font-size: 12px; margin-left: 6px; }
.sheet-svg { width: 100%; height: auto; display: block; }
.sheet-svg .sheet-bg { fill: url(#hatch); stroke: var(--sheet-edge); }
.hatch-bg { fill: var(--hatch-bg); }
.hatch-line { stroke: var(--hatch-line); }
.sheet-svg .trim { fill: none; stroke: var(--sheet-edge); stroke-dasharray: 8 6; }
.sheet-svg .part { stroke: var(--part-stroke); }
.sheet-svg .part-g:hover .part { filter: brightness(1.12); }
.sheet-svg text { fill: #1d1a16; font-family: system-ui, sans-serif; pointer-events: none; }
.sheet-svg .dim { fill: var(--muted); }
.sheet-svg .part-g text.dim, .sheet-svg .part-g .dim { fill: #3b342c; }
.sheet-svg .offcut { fill: var(--offcut); stroke: var(--offcut-edge); stroke-dasharray: 6 4; opacity: .8; }
.sheet-svg .offcut-t { fill: var(--offcut-edge); }
.sheet-svg .cut { stroke: var(--cut); }
.sheet-svg .cut-n { fill: var(--cut); }
.sheet-svg .cut-n.late { fill: #7b4fb0; }
.sheet-svg .cut-leader { stroke: var(--cut); }
.sheet-svg .cut-label { cursor: pointer; }
.sheet-card.hl-on .sheet-svg .cut-g:not(.hl) { opacity: .18; }
.sheet-svg .cut-g.hl .cut, .sheet-svg .cut-g.hl .cut-leader { stroke: #1565c0; }
.sheet-svg .cut-g.hl .cut-n { fill: #1565c0; }
.cut-badge { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--cut); color: #fff; font-weight: 700; font-size: 12px; text-align: center; }
.cut-badge.late { background: #7b4fb0; }
.mini tr[data-cut] { cursor: default; }
.mini tr.hl td { background: #dbe8f7; color: #10223a; }
.mini tr.hl .cut-badge { background: #1565c0; }
.sheet-svg .blank { fill: none; stroke: var(--text); stroke-dasharray: 10 6; opacity: .55; }
.mini tr.step td { background: var(--accent-soft); color: var(--text); }
.sheet-svg .cut-nt { fill: #fff; font-weight: 700; }

.sheet-details { margin-top: 8px; }
.sheet-details summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.mini { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.mini th, .mini td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.mini th { color: var(--muted); font-weight: 550; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }

.footnote { color: var(--muted); font-size: 12px; margin-top: 14px; }

/* shapes in tables */
.shape-btn { color: var(--muted); }
.shape-btn.on { color: var(--accent); }
.shape-btn:hover { color: var(--accent) !important; }
.grid input.ro { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.sheet-svg .defect { fill: url(#hatchRed); stroke: var(--danger); stroke-dasharray: 10 6; }
.defect-bg { fill: var(--defect-bg); }
.defect-line { stroke: var(--defect-line); }
#cadUnits { font-size: 13px; padding: 4px 6px; }

/* shape editor dialog */
.shape-dlg {
  width: min(1200px, calc(100vw - 32px));
  height: min(820px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.shape-dlg::backdrop { background: rgba(20, 16, 12, .55); }
.ed-wrap { display: flex; flex-direction: column; height: 100%; }
.ed-head, .ed-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.ed-foot { border-bottom: none; border-top: 1px solid var(--border); }
.ed-head h2 { flex: 1; }
.ed-body { flex: 1; display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.ed-side { overflow-y: auto; border-right: 1px solid var(--border); padding: 10px 14px; }
.ed-side section { padding: 8px 0 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ed-side section:last-child { border-bottom: none; }
.ed-side h3 { margin: 0; font-size: 13px; }
.ed-side select, .ed-side textarea { width: 100%; }
.ed-params { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.ed-params label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.ed-params input { width: 100%; color: var(--text); }
.ed-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ed-inline select { width: auto; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-btns button { padding: 4px 9px; font-size: 13px; }
.ed-polys { list-style: none; margin: 0; padding: 0; width: 100%; }
.ed-polys li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.ed-polys li .hint { margin-left: auto; }
.ed-polys li.on { background: var(--accent-soft); }
.ed-sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--muted); }
.ed-sw.outer { background: var(--sheet); }
.ed-sw.hole { background: var(--defect-bg); border-color: var(--danger); }
.ed-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px 12px; gap: 6px; }
.ed-toolbar { display: flex; align-items: center; gap: 10px; }
.ed-toolbar button { padding: 3px 10px; font-size: 13px; }
.ed-mode { color: var(--accent); font-weight: 600; font-size: 13px; }
.ed-svg { flex: 1; min-height: 200px; width: 100%; background: var(--ed-canvas); border: 1px solid var(--border); border-radius: 8px; touch-action: none; cursor: crosshair; user-select: none; }
.ed-svg .ed-grid { stroke: var(--ed-grid); fill: none; }
.ed-svg .ed-axis { stroke: var(--muted); fill: none; opacity: .5; }
.ed-svg .ed-outer { fill: var(--sheet); fill-opacity: .8; stroke: var(--sheet-edge); stroke-linejoin: round; cursor: grab; }
.ed-svg .ed-outer.part { fill: #f4a259; fill-opacity: .55; }
.ed-svg .ed-hole { fill: url(#hatchRed); stroke: var(--danger); stroke-dasharray: 6 4; cursor: move; }
.ed-svg .ed-hole.part { fill: var(--ed-canvas); }
.ed-svg .ed-hole.active { stroke-dasharray: none; }
.ed-svg .ed-vtx { fill: #fff; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.ed-svg .ed-vtx.first { fill: var(--accent); }
.ed-svg .ed-mid { fill: var(--accent); opacity: .45; cursor: copy; }
.ed-svg .ed-mid:hover { opacity: 1; }
.ed-svg .ed-drawline { fill: none; stroke: var(--accent); stroke-dasharray: 8 5; }
.ed-svg .ed-cursor { fill: var(--accent); }
.ed-svg .ed-dim { fill: var(--muted); font-family: system-ui, sans-serif; }
.ed-status { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ed-error { color: var(--danger); font-size: 13px; }
.ed-main .hint { margin: 0; }
@media (max-width: 760px) {
  .ed-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .ed-side { border-right: none; border-bottom: 1px solid var(--border); max-height: 45vh; }
  .ed-svg { min-height: 320px; }
}

/* router */
.router-bits { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.rb-head { font-size: 13px; margin-bottom: 6px; }
.rb-head .hint { display: block; }
.rb-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; font-size: 13px; }
.rb-on { display: inline-flex; gap: 5px; align-items: center; min-width: 64px; }
.rb-d { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); }
.rb-d input { width: 70px; color: var(--text); }
.rb-c input { width: 34px; height: 26px; padding: 0 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.sheet-svg .route { fill: none; stroke-opacity: .6; stroke-linejoin: round; stroke-linecap: round; pointer-events: stroke; }
.sheet-svg .angled { fill: none; stroke: var(--cut); stroke-dasharray: 14 6; }
.sheet-svg .hand { fill: none; stroke: var(--text); stroke-dasharray: 6 4; }
.bit-chip { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; opacity: .8; }
.hand-chip { background: repeating-linear-gradient(90deg, var(--text) 0 4px, transparent 4px 7px); height: 3px; opacity: 1; }
.angled-chip { background: repeating-linear-gradient(90deg, var(--cut) 0 6px, transparent 6px 9px); height: 3px; opacity: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.sub-h { margin: 12px 0 2px; font-size: 13px; }

.notes { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
#exampleSelect { max-width: 160px; }

/* footer + cookie consent */
.site-footer { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 14px 16px 24px; color: var(--muted); font-size: 12px; }
button.linkish { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: 12px; }
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 640px; margin: 0 auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 14px 16px; font-size: 13px;
}
.consent p { margin: 0 0 10px; }
.consent-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* privacy / document pages */
.doc-page .brand { text-decoration: none; color: var(--accent); }
.doc-page .brand-name { display: block; color: var(--text); font-weight: 650; font-size: 17px; }
.back-link { color: var(--accent); text-decoration: none; font-size: 14px; }
.doc { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; line-height: 1.6; font-size: 15px; }
.doc h1 { font-size: 28px; margin: 8px 0 4px; }
.doc h2 { font-size: 19px; margin: 28px 0 8px; }
.doc .updated { color: var(--muted); margin: 0 0 18px; }
.doc a, .site-footer a, .consent a { color: var(--accent); }
.doc .summary { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 18px 8px; }
.doc .summary h2 { margin-top: 12px; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 12px; display: block; overflow-x: auto; }
.doc-table code { overflow-wrap: anywhere; }
.doc-table th, .doc-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-table th { color: var(--muted); font-weight: 600; }

/* privacy policy welcome gate */
.gate { position: fixed; inset: 0; z-index: 100; background: rgba(20, 16, 12, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.gate-box { background: var(--surface); color: var(--text); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-width: 480px; width: 100%; padding: 22px 22px 18px; max-height: calc(100vh - 32px); overflow-y: auto; }
.gate-box h2 { font-size: 20px; margin: 0 0 8px; }
.gate-box p { margin: 0 0 8px; }
.gate-box ul { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 13px; }
.gate-box a { color: var(--accent); }
.gate-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-bottom: 14px; cursor: pointer; }
.gate-check input { margin-top: 3px; }
.stats-check { font-size: 13px; color: var(--muted); }
.stats-check a { color: var(--accent); }
.gate-btns { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gate-links { font-size: 13px; color: var(--muted); }
.gate-btns button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.doc-example { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.doc-example .c { color: var(--muted); }
.doc h3 { font-size: 16px; margin: 20px 0 6px; }

/* feedback dialog */
.fb-dlg { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.fb-dlg::backdrop { background: rgba(20, 16, 12, .55); }
.fb-head, .fb-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.fb-head { border-bottom: 1px solid var(--border); }
.fb-head h2 { flex: 1; }
.fb-foot { border-top: 1px solid var(--border); flex-wrap: wrap; }
.fb-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.fb-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-cats label { border: 1px solid var(--border); border-radius: 18px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.fb-cats input { margin: 0 4px 0 0; }
.fb-cats label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.fb-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fb-field textarea { font-family: inherit; font-size: 14px; resize: vertical; }
.fb-field input { width: 100%; }
.fb-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-status { min-height: 1.2em; margin: 0; font-size: 13px; }
.fb-status.err { color: var(--danger); }
.fb-status.ok { color: var(--ok); }
.fb-thread { border-top: 1px solid var(--border); padding-top: 10px; }
.fb-thread h3 { margin: 0; font-size: 14px; }
.fb-thread-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
button.fb-small { padding: 3px 10px; font-size: 12px; }
.fb-restore { margin: 0; }
.linkish-label { color: var(--accent); text-decoration: underline; font-size: 12px; cursor: pointer; }
.fb-thread ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; }
.fb-msg { font-size: 13px; }
.fb-msg .meta { color: var(--muted); font-size: 11px; }
.fb-msg .you { background: var(--surface-2); border-radius: 10px 10px 10px 2px; padding: 6px 10px; white-space: pre-wrap; }
.fb-msg .reply { background: var(--accent-soft); border-radius: 10px 10px 2px 10px; padding: 6px 10px; margin: 6px 0 0 24px; white-space: pre-wrap; }
.fb-msg .reply.new { outline: 2px solid var(--accent); }
.fb-msg .waiting { color: var(--muted); font-size: 12px; margin: 4px 0 0 24px; }
.fb-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.fb-mail, .fb-body a { color: var(--accent); font-size: 13px; }

/* look picker */
.look-wrap { position: relative; }
#lookBtn { display: inline-flex; align-items: center; gap: 6px; }
.look-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.look-pop[hidden] { display: none; }
.look-title { font-size: 12px; color: var(--muted); padding: 2px 6px 4px; }
.mode-seg { display: flex; margin: 0 4px 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-seg button { flex: 1; background: transparent; color: var(--text); border: none; border-radius: 0; padding: 6px 4px; font-size: 13px; }
.mode-seg button + button { border-left: 1px solid var(--border); }
.mode-seg button.on { background: var(--accent); color: var(--accent-ink); }
.look-opt { display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; color: var(--text);
  border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; width: 100%; white-space: normal; }
.look-opt:hover { background: var(--surface-2); filter: none; }
.look-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.look-sw { display: flex; flex: none; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.25); }
.look-sw i { width: 14px; height: 28px; display: block; }
.look-txt { display: flex; flex-direction: column; flex: 1; font-size: 13px; line-height: 1.3; }
.look-txt span { color: var(--muted); font-size: 11.5px; }
.look-tick { color: var(--accent); font-weight: 700; width: 14px; }
html[data-look="contrast"] .look-opt.on, html[data-look="contrast"] .mode-seg button.on { background: #ffe600; color: #000; }
@media (max-width: 640px) { .look-pop { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }

/* ── neon border (Tour button + tour spotlight) ──────────────────────────── */
@property --neon-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes neon-spin { to { --neon-angle: 360deg; } }
@keyframes neon-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.neon-btn { position: relative; isolation: isolate; border-color: transparent !important; font-weight: 600; }
.neon-btn::before, .neon-btn::after, .neon-ring::before, .neon-ring::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--neon-angle), var(--neon-1), var(--neon-2), var(--neon-3), var(--neon-1));
  animation: neon-spin 3s linear infinite;
}
.neon-btn::before, .neon-ring::before {
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.neon-btn::after, .neon-ring::after { z-index: -1; filter: blur(7px); animation: neon-spin 3s linear infinite, neon-pulse 2.4s ease-in-out infinite; }
.neon-btn { border-radius: 8px; }
#tourBtn { background: var(--surface); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
#tourBtn .spark { color: var(--neon-1); }
@media (prefers-reduced-motion: reduce) {
  .neon-btn::before, .neon-btn::after, .neon-ring::before, .neon-ring::after { animation: none !important; }
}

/* ── guided tour ─────────────────────────────────────────────────────────── */
.tour { position: fixed; inset: 0; z-index: 80; }
.tour-shield { position: absolute; inset: 0; }
.tour.no-target .tour-shield { background: rgba(10, 10, 15, .6); }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 10, 15, .58); pointer-events: none;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.neon-ring::before { inset: -3px; padding: 3px; }
/* spotlight glow: an edge-only halo (a blurred fill would tint what's inside) */
.neon-ring::after { inset: -3px; background: none; filter: none; padding: 0; -webkit-mask: none; mask: none;
  box-shadow: 0 0 16px 3px var(--neon-1), inset 0 0 10px 1px var(--neon-1);
  animation: neon-halo 3s linear infinite; }
@keyframes neon-halo {
  0%, 100% { box-shadow: 0 0 16px 3px var(--neon-1), inset 0 0 10px 1px var(--neon-1); }
  33% { box-shadow: 0 0 16px 3px var(--neon-2), inset 0 0 10px 1px var(--neon-2); }
  66% { box-shadow: 0 0 16px 3px var(--neon-3), inset 0 0 10px 1px var(--neon-3); }
}
.tour-box { position: fixed; z-index: 2; width: 380px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 14px 16px 12px;
  transition: left .25s ease, top .25s ease; outline: none; }
.tour-box.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 440px; transition: none; }
.tour-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--neon-1), var(--neon-2), var(--neon-3)); }
.tour-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-kicker { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-1); box-shadow: 0 0 8px var(--neon-1); }
.tour-box h3 { margin: 6px 0 4px; font-size: 17px; }
.tour-box p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.tour-toc { margin: 0 0 10px; font-size: 13px; }
.tour-toc summary { cursor: pointer; color: var(--accent); }
.tour-toc ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tour-toc li { display: flex; justify-content: space-between; align-items: center; border-radius: 6px; padding: 1px 6px; }
.tour-toc li.cur { background: var(--accent-soft); }
.tour-toc li button { background: none; border: none; color: var(--text); padding: 3px 0; font-size: 13px; text-align: left; }
.tour-toc li.cur button { font-weight: 700; }
.tour-toc li.done button { color: var(--muted); }
.tour-toc li span { color: var(--muted); font-size: 11.5px; }
.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-prog { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tour-bar { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.tour-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon-1), var(--neon-3)); transition: width .25s ease; }
.tour-foot button:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
  body.touring { padding-bottom: 70vh; } /* lets the last sections scroll above the docked box */
  .tour-box, .tour-box.center { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-width: none; transform: none; }
}
@media print { .tour, #tourBtn { display: none !important; } }

/* print */
@media print {
  :root { --bg: #fff; --surface: #fff; --shadow: none; }
  .topbar .project-bar, .inputs, .view-toggles, .site-footer, .consent, .gate, .fb-dlg, .look-pop { display: none !important; }
  .topbar { position: static; border: none; }
  .layout { display: block; padding: 0; }
  .sheet-details { display: block; }
  .sheet-details > summary { display: none; }
  .sheet-details:not([open]) > *:not(summary) { display: block; }
  .sheet-card { page-break-inside: avoid; }
}