/* IBM Plex, served from this app: the page makes no third-party request.
   Latin subsets of the faces the page uses, under the SIL Open Font License
   1.1 (assets/fonts/LICENCE.txt). */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/v1/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/v1/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/v1/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/v1/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

:root {
  --bg: #EEEEEC;
  --surface: #F7F7F5;
  --panel: #F7F7F5;
  --border: #C9C9C4;
  --ink: #1B1B1A;
  --ink-2: #5B5B57;
  --ink-3: #5B5B57;
  --line: #C9C9C4;
  --line-strong: #C9C9C4;
  --accent: #E8A317;
  --accent-ink: #1B1B1A;
  --board: #DCC49F;
  --board-edge: #B08F5A;
  --board-grain: rgba(120, 88, 40, 0.09);
  --cut: #D0342C;
  --crease: #1F6FD6;
  --perf: #B7328C;
  --act: #E8A317;
  --act-hover: #D2930F;
  --act-soft: #FBF1DC;
  --warn: #5B5B57;
  --warn-soft: #FBF1DC;
  --focus: #1B1B1A;
  --radius: 3px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --head: #1B1B1A;
  --row: 32px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  min-width: 1024px;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Header */
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  height: 48px;
  padding: 0 16px;
  background: var(--head);
  color: #F7F7F5;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.brand svg { width: 20px; height: 20px; }
.head-seg { border-color: #3A3A37; }
.head-seg button { height: 28px; background: transparent; color: #C9C9C4; border-color: #3A3A37; font-size: 13px; }
.head-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.head-mode { display: flex; align-items: center; gap: 12px; min-width: 0; }
.head-mode .head-seg { flex-shrink: 0; }
.head-seg button { white-space: nowrap; }
.head-hint { color: #A5A5A0; margin: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The job the page is on: what a shop looks up to know which one it is. */
.head-job { color: #E8E8E3; font-size: 13px; font-weight: 600; margin-left: auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; flex: 0 1 auto; min-width: 0; }
.top-right { text-align: right; font-size: 13px; color: #C9C9C4; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.top-right b { color: #F7F7F5; font-weight: 500; }
.top-right a, .top-right button.link { color: #C9C9C4; }
.top-right button.link:hover { color: #F7F7F5; }

/* Workstation frame: controls, board, results */
.app {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 340px;
  align-items: start;
  gap: 1px;
  background: var(--border);
  min-height: calc(100vh - 48px);
}
.side, .canvas, .results { background: var(--bg); min-width: 0; }
/* The sidebar scrolls on its own so Nest stays at the foot of it, and the
   board stays put while the controls move. */
.side { padding: 0; height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden;
  position: sticky; top: 48px; display: flex; flex-direction: column; }
.side > .sec { flex: none; }
.side-foot { margin-top: auto; }
.canvas { padding: 12px 16px 16px; display: flex; flex-direction: column;
  height: calc(100vh - 48px); position: sticky; top: 48px; }
/* The board takes the room that is left and the sheet fits inside it, so a
   bigger window shows a bigger sheet rather than more background. */
#sheetPreview, #resultSheet { flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; }
#sheetPreview .sheet-svg, #resultSheet .sheet-svg { max-height: 100%; max-width: 100%; width: auto; }
#nestError:empty { display: none; }

/* Profiles takes the page over; the job is still there behind it. */
#profiles { display: none; padding: 16px 24px; }
body.profiles-open #profiles { display: block; }
body.profiles-open .app { display: none; }
.results { padding: 16px; display: grid; gap: 16px; align-content: start; }

/* Collapsible sections */
.sec { border-bottom: 1px solid var(--border); background: var(--surface); }
.sec > summary {
  display: flex; align-items: baseline; gap: 10px;
  height: 36px; padding: 0 14px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid var(--ink-2); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transform: translateY(-1px);
}
.sec[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.sec > summary:hover { background: var(--bg); }
.sec-title { flex: none; }
.sec-sum { font-weight: 400; font-size: 12.5px; color: var(--ink-2); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec[open] .sec-sum { display: none; }
.sec-body { padding: 4px 14px 16px; }
/* Inside a section: the machine's job-level changes, and the job details and
   costing under Nest. Each is one click from shut, so the four sections stay
   the only things at the top level. */
details.overrides, details.sub { border: 1px solid var(--border); border-radius: var(--radius); margin: 10px 0 0; }
details.overrides > summary, details.sub > summary {
  cursor: pointer; list-style: none; padding: 7px 10px; font-size: 12.5px; font-weight: 600; }
details.overrides > summary::-webkit-details-marker, details.sub > summary::-webkit-details-marker { display: none; }
details.overrides > summary::before, details.sub > summary::before {
  content: "+"; display: inline-block; width: 12px; color: var(--ink-2); font-family: var(--mono); }
details.overrides[open] > summary::before, details.sub[open] > summary::before { content: "-"; }
.overrides-body, .sub-body { padding: 4px 10px 12px; }
.sub-sum { font-weight: 400; font-size: 12px; color: var(--ink-2); font-family: var(--mono); margin-left: 6px; }
details.sub[open] > summary .sub-sum { display: none; }
.sub-block { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 10px; }
.sub-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; }
.machine-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 10px 12px; }
.machine-card h3 { margin: 0 0 8px; font-size: 13px; }
.machine-card .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side-foot {
  position: sticky; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--border); padding: 10px 14px;
}
.foot-row { display: flex; gap: 8px; align-items: center; }
.foot-row .btn { flex: 1; }
.side-foot #nestActions { display: contents; }
.side-foot #improveWrap { flex: 1; display: flex; }
.side-foot #improveWrap .btn { width: 100%; }
.side-foot .hint, .side-foot .improved-note { display: none; }
.side-foot #setupProblems:empty { display: none; }

/* Board */
/* Sheet tabs wrap to a second line rather than pushing the board sideways:
   a job can have a dozen sheets. */
.board-head { display: flex; align-items: center; gap: 8px 12px; margin-bottom: 8px; min-height: 28px;
  flex-wrap: wrap; }
.board-head h2 { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.board-head .status { font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.board-head .tabs { flex: 1 1 auto; min-width: 0; }
.board-head .spacer { flex: 1; }
.blank-tools {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.blank-tools .status { font-size: 12.5px; color: var(--ink-2); }
.blank-tools .spacer { flex: 1; }
.zoom-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.offcut-note { margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  text-align: center; background: none; border: 0; padding: 0; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.panel-title { font-size: 13px; font-weight: 600; margin: 0 0 10px; }

h1 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
h2 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.lede { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; }
.field { margin-bottom: 12px; }
.field > label, .field > .lbl { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; }
.hint { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); font-weight: 500;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--act); border-color: var(--act); color: #fff; }
.btn.primary:hover { background: var(--act-hover); }
.btn.primary:disabled { background: #9BB8AC; border-color: #9BB8AC; cursor: not-allowed; }
.btn.wide { width: 100%; }
.btn.quiet { border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--bg); color: var(--ink); }
.btn-row { display: flex; gap: 10px; align-items: center; }
.btn-row .spacer { flex: 1; }

/* Inputs */
.input {
  height: 40px; padding: 0 12px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
}
.input:focus { border-color: var(--focus); outline: none; outline: 1px solid var(--focus); outline-offset: -2px; }
.unit { display: flex; align-items: center; gap: 8px; }
.unit .input { width: 110px; text-align: right; }
.unit span { color: var(--ink-2); }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.segmented button {
  height: 40px; padding: 0 14px; border: 0; background: #fff; color: var(--ink-2);
  border-right: 1px solid var(--line);
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.segmented small { display: block; font-size: 11px; line-height: 1; margin-top: 2px; opacity: 0.8; }
.custom-size { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.custom-size .input { width: 96px; text-align: right; }

/* Grain picker */
.grain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grain button {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  color: var(--ink-2); font-size: 13px;
}
.grain button svg { width: 56px; height: 40px; }
.grain button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px; }
.grain .board { fill: var(--board); stroke: var(--board-edge); }
.grain .flute { stroke: var(--board-edge); stroke-width: 1; opacity: 0.6; }
.grain .blank { fill: none; stroke: var(--cut); stroke-width: 1.4; }
.grain .arc { fill: none; stroke: var(--ink); stroke-width: 1.4; }

/* Coordinate origin: a tile per corner, laid out as the corners are. */
.origin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.origin button {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  color: var(--ink-2); font-size: 13px;
}
.origin button svg { width: 56px; height: 40px; }
.origin button[aria-pressed="true"] {
  border-color: var(--accent); color: var(--ink); background: #FFF9EC;
  outline: 1px solid var(--accent); outline-offset: -2px;
}
.origin .board { fill: var(--board); stroke: var(--board-edge); }
.origin .axis { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.origin .dot { fill: var(--ink-3); }
.origin button[aria-pressed="true"] .axis { stroke: var(--accent-ink); }
.origin button[aria-pressed="true"] .dot { fill: var(--accent-ink); }
.origin-note { color: var(--ink-3); }

.board-frame {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--board);
  width: 100%; max-height: 100%; align-self: center;
}
.board-blur {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  /* The picture is already coarse; the blur is only so it reads as held back. */
  filter: blur(9px) saturate(0.9); transform: scale(1.03);
}
.plan-note { display: grid; gap: 10px; justify-items: start; margin-top: 12px; }
.plan-note p { margin: 0; }

/* Quantity table */
table.qty { width: 100%; border-collapse: collapse; font-size: 14px; }
table.qty th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 0 6px 8px; border-bottom: 1px solid var(--line); }
table.qty th.num, table.qty td.num { text-align: right; }
table.qty td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.qty tr:last-child td { border-bottom: 0; }
table.qty .thumb { width: 48px; height: 36px; }
table.qty .order-cell .order-input { width: 100px; height: 34px; text-align: right; padding: 0 8px; }
table.qty .thumb svg { width: 48px; height: 36px; }
table.qty .name { font-weight: 500; }
table.qty .dims { color: var(--ink-3); font-size: 12px; font-weight: 400; margin-left: 4px; }
table.qty input { width: 56px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid var(--line-strong); border-radius: 4px; }
table.qty tfoot td { padding-top: 10px; font-weight: 500; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
table.qty .chips { margin-top: 3px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
}
.chip i { width: 14px; height: 0; border-top: 2px solid currentColor; }
.chip.cut { color: var(--cut); background: #FBE9E8; }
.chip.crease { color: var(--crease); background: #E6EFFB; }
.chip.crease i { border-top-style: dashed; }
.chip.perf { color: var(--perf); background: #F6E5F0; }
.chip.perf i { border-top-style: dotted; }

/* Part thumbnails and sheet rendering */
.part-svg .cut { fill: #FBF6EE; stroke: var(--cut); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.part-svg .crease { fill: none; stroke: var(--crease); stroke-width: 1.1; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.part-svg .perf { fill: none; stroke: var(--perf); stroke-width: 1.2; stroke-dasharray: 2 2.5; vector-effect: non-scaling-stroke; }
.sheet-svg { width: 100%; height: auto; max-height: 560px; display: block; margin: 0 auto; }
.sheet-svg .board { fill: var(--board); stroke: var(--board-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sheet-svg .cut { fill: rgba(255,255,255,0.55); stroke: var(--cut); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sheet-svg .crease { fill: none; stroke: var(--crease); stroke-width: 1.1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.sheet-svg .perf { fill: none; stroke: var(--perf); stroke-width: 1.3; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.sheet-svg .dim { fill: var(--ink-3); font: 500 18px var(--font); }
.sheet-svg .dimline { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Stage chrome */
.stage-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.stage-head h2 { margin: 0; }
.stage-head .spacer { flex: 1; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 0; border-top: 2px solid; }
.legend .c { border-color: var(--cut); }
.legend .r { border-color: var(--crease); border-top-style: dashed; }
.legend .p { border-color: var(--perf); border-top-style: dotted; }
.empty { display: grid; place-items: center; height: 560px; color: var(--ink-3); text-align: center; }
.empty p { margin: 6px 0 0; }
.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.part-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.part-card svg { width: 100%; height: 96px; display: block; margin-bottom: 8px; }
.part-card .name { font-weight: 500; font-size: 14px; }
.part-card .meta { color: var(--ink-3); font-size: 12.5px; margin-bottom: 6px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tabs button {
  height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2); font-size: 12.5px; white-space: nowrap;
  font-family: var(--mono);
}
/* The sheet being looked at: the current tab is the accent on the board. */
.tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tabs button b { font-weight: 600; }

/* Drop zone */
.drop {
  display: grid; place-items: center; text-align: center;
  padding: 44px 20px; border: 2px dashed var(--line-strong); border-radius: 8px; background: #FBFBF9;
  transition: border-color 120ms;
}
.drop:hover, .drop.is-over { border-color: var(--act); background: var(--act-soft); }
.drop strong { font-size: 16px; }
.drop p { margin: 6px 0 14px; color: var(--ink-2); }
.file-card { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.file-card .name { font-weight: 500; word-break: break-all; }
.file-card .meta { color: var(--ink-2); font-size: 13.5px; }
.file-card .meta b { color: var(--ink); font-weight: 500; }

/* Result numbers */
.bignum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin: 4px 0 18px; }
.bignum .n { font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.bignum .n small { font-size: 22px; font-weight: 500; color: var(--ink-2); margin-left: 4px; }
.bignum .l { color: var(--ink-2); margin-top: 4px; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.summary b { color: var(--ink); font-weight: 500; }
.callout { padding: 12px 14px; border-radius: var(--radius); background: var(--act-soft); color: #0F4D36; margin-bottom: 18px; }
.callout.warn { background: var(--warn-soft); color: var(--warn); }
.callout b { font-weight: 600; }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.progress i { display: block; height: 100%; width: 0; background: var(--act); transition: width 200ms linear; }
.status { font-size: 13.5px; color: var(--ink-2); min-height: 20px; }

/* Export */
.export-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.export-card h2 { margin-bottom: 4px; }
.export-card .desc { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }
.export-card .desc b { color: var(--ink); font-weight: 500; }
.lock { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-size: 13px; font-weight: 500; }
.signin { border: 1px solid var(--ink); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; background: #FBFBF9; }
.signin h2 { margin-bottom: 4px; }
.signin p { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.plans button { border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; padding: 10px 8px; text-align: left; }
.plans button b { display: block; font-size: 15px; }
.plans button span { display: block; color: var(--ink-2); font-size: 12.5px; }
.plans button[aria-pressed="true"] { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px; }
.page {
  width: 100%; max-width: 820px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line-strong); 
  padding: 22px 26px; position: relative; overflow: hidden;
}
.page .ph { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.page .ph b { color: var(--ink); font-weight: 600; }
.page img { width: 100%; display: block; }
.page .pf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.page .pf b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.watermark {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  /* The mark is bigger than the page it sits on; it is clipped by it, not
     allowed to push the column sideways. */
  overflow: hidden;
}
.watermark span {
  transform: rotate(-24deg); font-size: 40px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(208, 52, 44, 0.16); border: 4px solid rgba(208, 52, 44, 0.16); padding: 6px 28px; border-radius: 8px;
}
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); font-size: 14px;
  opacity: 0; transition: opacity 160ms; pointer-events: none;
}
.toast.show { opacity: 1; }

/* Additions for the live page */
:root {
  --score: #0E7C7B;
  --bleed: #3F7D20;
  --unclassified: #8A5A00;
  --error: #9B1C1C;
  --error-soft: #FBE9E8;
}
.chip.score { color: var(--score); background: #E2F3F2; }
.chip.score i { border-top-style: dashed; }
.chip.bleed { color: var(--bleed); background: #E8F3E1; }
.chip.unclassified { color: var(--unclassified); background: var(--warn-soft); }
.part-svg .score, .sheet-svg .score { fill: none; stroke: var(--score); stroke-width: 1.1; stroke-dasharray: 8 3 2 3; vector-effect: non-scaling-stroke; }
.part-svg .nick { fill: none; stroke: #A3239A; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.part-svg .bleed, .sheet-svg .bleed { fill: none; stroke: var(--bleed); stroke-width: 1; vector-effect: non-scaling-stroke; }
.part-svg .unclassified, .sheet-svg .unclassified { fill: none; stroke: var(--unclassified); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.callout.error { background: var(--error-soft); color: var(--error); }
.callout ul { margin: 6px 0 0; padding-left: 18px; }
.drop.is-busy { opacity: 0.6; pointer-events: none; }
.file-list { display: grid; gap: 10px; }
.file-list.is-over { outline: 2px dashed var(--act); outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.part-card .file { color: var(--ink-3); font-size: 12px; word-break: break-all; }
.legend .o { border-color: var(--act); border-top-style: dashed; }
.sheet-svg .offcut { fill: rgba(20, 107, 76, 0.10); stroke: var(--act); stroke-width: 1.2; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.sheet-svg .offcut-label { fill: var(--act); font: 500 16px var(--font); }
.sheet-svg .placed .cut { fill: rgba(255, 255, 255, 0.55); }
details.classes { margin-top: 10px; font-size: 13.5px; }
details.classes summary { cursor: pointer; color: var(--ink-2); }
details.classes table.qty { margin-top: 6px; font-size: 13px; }
details.classes select { height: 30px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; font: inherit; }
.tabs { flex-wrap: wrap; }
.stage-head { flex-wrap: wrap; row-gap: 8px; }

/* v1 page: setup, nest editing, sign-in, profiles */
select.input { padding-right: 8px; background: #fff; }
.input.small { height: 32px; font-size: 14px; }
.btn.small { height: 32px; padding: 0 12px; font-size: 14px; }
.btn.locked { color: var(--ink-3); }
.linkish { border: 0; background: none; padding: 0; color: var(--ink-3); font-size: 12px; text-decoration: underline; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 8px 0; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--act); }
.radio-list { display: grid; gap: 2px; margin-bottom: 8px; }
/* Wide enough for the account, its plan badge and Jobs, Profiles and Sign out. */
.top { grid-template-columns: 180px 1fr 460px; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.top-right .btn { white-space: nowrap; }
.top-right .who { margin-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top-right .plan-badge { font-size: 11.5px; font-weight: 600; color: var(--act); background: var(--act-soft); border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.legend .s { border-color: var(--score); border-top-style: dashed; }
.legend .b { border-color: var(--bleed); }

/* Step 1 */
.chip.tappable { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 500; }
.chip.tappable:hover { border-color: currentColor; }
.chip small { font-size: 10.5px; opacity: 0.8; }
.chip.ignore { color: var(--ink-3); background: var(--bg); }
.group-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 10px; }
.signin-confirm {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(28, 28, 26, 0.45); padding: 16px;
}
.signin-confirm-card {
  width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 24px; text-align: center;
}
.signin-confirm-card h2 { font-size: 18px; margin-bottom: 8px; }
.signin-confirm-card p { color: var(--ink-2); margin: 0 0 16px; }
.signin-confirm-card .status { margin-top: 10px; }
.chip-menu {
  position: absolute; z-index: 20; min-width: 180px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); 
}
.chip-menu .menu-head { font-size: 12px; color: var(--ink-3); padding: 4px 8px 6px; }
.chip-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: none; text-align: left; font-size: 14px; }
.chip-menu button:hover, .chip-menu button:focus-visible { background: var(--bg); }
.chip-menu button[aria-checked="true"] { font-weight: 600; }
.swatch { width: 16px; height: 0; border-top: 2px solid var(--ink-3); }
.swatch.cut { border-color: var(--cut); }
.swatch.crease { border-color: var(--crease); border-top-style: dashed; }
.swatch.perf { border-color: var(--perf); border-top-style: dotted; }
.swatch.score { border-color: var(--score); border-top-style: dashed; }
.swatch.bleed { border-color: var(--bleed); }
.part-card .name-input {
  width: 100%; height: 30px; padding: 0 6px; margin: 0 0 2px; border: 1px solid transparent; border-radius: 4px;
  font: inherit; font-weight: 500; font-size: 14px; background: transparent;
}
.part-card .name-input:hover { border-color: var(--line); }
.part-card .name-input:focus { border-color: var(--focus); outline: none; background: #fff; }
.open-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.open-path { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; background: #FBFBF9; }
.open-path svg { width: 100%; height: 80px; display: block; }
.open-path .open { fill: none; stroke: var(--cut); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.open-path .gap { stroke: var(--warn); stroke-width: 1.4; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.open-path .end { fill: var(--warn); stroke: none; }
.open-path .gap-ring { fill: rgba(245, 158, 11, 0.18); stroke: var(--warn); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.open-path figcaption { font-size: 11.5px; color: var(--warn); margin-top: 4px; }

/* Step 2 */
.switch { display: inline-block; position: relative; width: 34px; height: 20px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 10px; background: var(--line-strong); transition: background 120ms; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 120ms; }
.switch input:checked + span { background: var(--act); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.rect-add { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.rect-add .input { width: 72px; height: 34px; text-align: right; padding: 0 8px; }
.rect-add .lbl-inline { color: var(--ink); font-weight: 500; margin-right: 4px; }
.rect-add .btn { height: 34px; }
details.rules { border: 1px solid var(--line); border-radius: var(--radius); margin: 4px 0 18px; }
details.rules > summary { cursor: pointer; padding: 12px 14px; font-weight: 500; }
details.rules[open] > summary { border-bottom: 1px solid var(--line); }
.rules-body { padding: 14px; }
.sheet-svg .tool-outline { fill: none; stroke: #7a2fd0; stroke-width: 2; stroke-dasharray: 10 6;
  vector-effect: non-scaling-stroke; }
table.tool { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0 4px; }
table.tool th { text-align: right; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line);
  padding: 4px 6px; font-size: 12px; }
table.tool th:first-child, table.tool td:first-child { text-align: left; }
table.tool td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: right;
  white-space: nowrap; }
table.tool th { white-space: nowrap; }
table.tool .tool-size { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
table.tool td .btn { padding: 2px 8px; font-size: 12px; }
table.tool tr.chosen td { background: #F6F6F3; font-weight: 600; }
table.tool tr.wins td { background: #FBF3E2; }
.tol-pair { display: flex; gap: 20px; flex-wrap: wrap; align-items: start; }
.tol-pair > .field { flex: 1 1 260px; min-width: 0; }
.tol-pair #printTol .tol-in.grip .input { border-color: var(--accent, #1f6fd6); font-weight: 600; }
.tol {
  display: grid; grid-template-columns: 1fr 180px 1fr; gap: 6px 10px; align-items: center;
  grid-template-areas: ". back ." "left pic right" ". grip .";
}
.tol-in { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); justify-items: center; }
.tol-in .input { width: 72px; height: 32px; text-align: right; padding: 0 8px; }
.tol-in small { display: none; }
.tol-in.back { grid-area: back; }
.tol-in.grip { grid-area: grip; }
.tol-in.left { grid-area: left; justify-items: end; }
.tol-in.right { grid-area: right; justify-items: start; }
.tol-pic { grid-area: pic; }
.tol-pic svg { width: 180px; height: 120px; display: block; }
.tol-pic .bed { fill: var(--board); stroke: var(--board-edge); }
.tol-pic .zone.back { fill: rgba(245, 158, 11, 0.35); }
.tol-pic .zone.grip { fill: rgba(208, 52, 44, 0.30); }
.tol-pic .zone.side { fill: rgba(31, 111, 214, 0.25); }
.tol-pic text { font: 600 9px var(--font); fill: var(--ink-2); }
.tol-pic text.mid { font-weight: 400; fill: var(--ink-3); }
.sheet-svg .tol-band { fill: rgba(31, 111, 214, 0.10); }
.sheet-svg .tol-band.grip { fill: rgba(208, 52, 44, 0.10); }
.sheet-svg .usable { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.sheet-svg .guillotine { stroke: #7a2fd0; stroke-width: 2; stroke-dasharray: 10 6; vector-effect: non-scaling-stroke; }
.sheet-svg .guillotine-label { fill: #7a2fd0; font-size: 13px; }
.sheet-svg .cutter-label { fill: #7a2fd0; font-weight: 600; }
.sheet-svg .cutter-plate { fill: #fff; fill-opacity: 0.85; stroke: #7a2fd0; stroke-opacity: 0.35;
  stroke-width: 1; vector-effect: non-scaling-stroke; }
.advisories { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; margin: 0 0 16px; }
.advisories h2 { font-size: 14px; margin: 0 0 8px; }
.advisories ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.advisories li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.advisories li .spacer { flex: 1; }
.tried { border: 1px solid var(--line); border-radius: 3px; padding: 8px 12px; margin: 0 0 16px; }
.tried summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.tried .hint { color: var(--ink-2); }
.tried tr.chosen td { font-weight: 600; }

.sheet-svg .origin-axis { stroke: #7a2fd0; stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; }
.sheet-svg .origin-dot { fill: #7a2fd0; }
.sheet-svg .origin-figure { fill: #7a2fd0; font-size: 13px; font-weight: 600; }
.sheet-svg .dim-tick { stroke: #7a2fd0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sheet-svg .dim-figure { fill: #7a2fd0; font-size: 12px; }
.sheet-svg .tol-band { fill: url(#tolHatch); color: #1f6fd6; }
.sheet-svg .tol-band.grip { color: #d0342c; }

/* Step 3 */
.sheets-big { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; }
.sheets-big .n { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.sheets-big .l { font-size: 20px; color: var(--ink-2); }
ul.checks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; font-size: 14px; }
ul.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; align-items: baseline; }
ul.checks li .tick { font-weight: 700; text-align: center; }
ul.checks li .what { font-weight: 500; }
ul.checks li .hint { grid-column: 2; }
ul.checks li.ok .tick { color: #1B7F4C; }
ul.checks li.fail .tick, ul.checks li.fail .what { color: var(--error); }
dl.facts { display: grid; gap: 4px; margin: 0 0 16px; font-size: 14.5px; }
dl.facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
dl.facts dt { color: var(--ink-2); }
dl.facts dd { margin: 0; font-weight: 500; }
dl.facts dd b { font-weight: 600; }
.summary.small { font-size: 13px; margin: 14px 0 0; }
.costing { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 16px 0 0; }
.costing h2 { margin-bottom: 8px; }
.costing dl.facts { margin-bottom: 8px; }
.costing .quote dd { font-size: 18px; font-weight: 600; }
details.breakdown summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.breakdown-table { margin-top: 8px; font-size: 13px; }
table.qty.breakdown-table td { padding: 4px 6px; }
.blank-tools { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; flex-wrap: wrap; }
.blank-tools .spacer { flex: 1; }
.sheet-svg .placed.pickable { cursor: pointer; }
.sheet-svg .placed.pickable:hover .cut { fill: rgba(255, 255, 255, 0.85); }
.sheet-svg .placed.locked .cut { fill: rgba(31, 111, 214, 0.14); }
.sheet-svg .placed.selected .cut { fill: rgba(20, 107, 76, 0.22); stroke-width: 2.6; }
.sheet-svg .lock-mark { pointer-events: none; }
.sheet-svg .lock-body { fill: var(--crease); }
.sheet-svg .lock-shackle { fill: none; stroke: var(--crease); stroke-width: 1.2; }
.offcut-note { text-align: center; color: var(--act); font-weight: 500; margin-top: 8px; font-size: 14px; }

/* Step 4 */
.plans.one { grid-template-columns: 1fr; }
.secondary-formats { margin-top: 10px; }
.beta { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
#signinSent p { margin: 0 0 10px; }
.manage-plan { margin-bottom: 14px; }
[data-manage-plan] { white-space: nowrap; flex: none; }
.plan-box { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 16px; }

/* Profiles */
#profiles.step.is-active { grid-template-columns: 300px 1fr; }
.profile-nav { display: grid; gap: 4px; }
.profile-nav button { height: 38px; text-align: left; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--ink-2); }
.profile-nav button[aria-pressed="true"] { background: var(--bg); color: var(--ink); font-weight: 500; border-color: var(--line); }
.profiles-stage { position: static; min-height: 0; }
.profile-panel h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.profile-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0 0 12px; }
.profile-card legend { font-weight: 600; padding: 0 6px; }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.pf { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.sub-sheet-split { display: flex; gap: 12px; margin-top: 8px; }
.auto-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; }
.auto-line .spacer { flex: 1; }
.auto-pill { border: 1px solid var(--line); border-radius: 3px; padding: 1px 7px; font-size: 12px;
  font-weight: 600; background: var(--panel); }
.btn.link { border: 0; background: none; padding: 0; color: var(--accent, #1f6fd6); text-decoration: underline;
  font-size: 13px; cursor: pointer; }
.sub-sheet-split .pf { max-width: 110px; }
.sub-sheet-split .gap-pf { max-width: 170px; }
.sub-sheet-split .gap-pf .unit { display: flex; align-items: center; gap: 6px; }
.pf .input { height: 34px; }
.table-wrap { overflow-x: auto; }
table.edit-table td { padding: 4px; }
table.qty.edit-table input, table.qty.edit-table select { width: 100%; min-width: 72px; height: 32px; padding: 0 8px; text-align: left; }
table.qty.edit-table td:first-child input { min-width: 150px; }
.empty-line { color: var(--ink-3); }
.aci { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: middle; }

/* First-visit hints, the job rules line and the costing card */
.step-hint {
  display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 16px; padding: 8px 10px;
  font-size: 13.5px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.step-hint span { flex: 1; }
.hint-close { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ink-3); }
.hint-close:hover { color: var(--ink); background: var(--panel); }
.rules-line { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
details.rules[open] .rules-line { display: none; }
.costing-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 18px; }
.costing-card .field { margin-bottom: 12px; }
details.sub .costing-card { border: 0; padding: 0; margin: 0; }
.inline-form { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 10px 12px; margin: -4px 0 12px; }
.inline-form .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-form .pf.wide { grid-column: 1 / -1; }
.quote-rules .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.costing-save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.costing-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.costing-head h2 { margin: 0; }
.costing-head .spacer { flex: 1; }
.costing-empty { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }

/* Nest step: headline and actions on the left, the board spanning both */
#step3.step.is-active { grid-template-rows: auto 1fr; }
#step3.step.is-active .nest-board { grid-column: 2; grid-row: 1 / span 2; }
#step3.step.is-active .nest-actions { grid-column: 1; }
.share-quote { margin: 2px 0 10px; }
.zoom-box { position: relative; overflow: hidden; touch-action: pan-y; }
.zoom-box.zoomed { touch-action: none; }
.zoom-box .sheet-svg { transform-origin: 0 0; }
.step-btn, .rot-label, .zoom-hint { display: none; }

/* Phone: 390 px portrait and similar. One column, the steps as a strip under
   the brand, quantities as stacked rows with a stepper, the nest result and
   its costing before the board, and full-width export buttons. */
@media (max-width: 720px) {
  body { min-width: 0; }
  /* One card per blank: the thumbnail and name on top, then the order, the
     grain and the turn toggle on one row. Five columns do not fit 390 px. */
  #qtyTable thead { display: none; }
  #qtyTable, #qtyTable tbody, #qtyTable tfoot { display: block; }
  #qtyTable tr {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "thumb name name" "qty grain rot";
    gap: 8px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border);
  }
  #qtyTable td { display: block; padding: 0; border: 0; text-align: left; }
  #qtyTable td:nth-child(1) { grid-area: thumb; }
  #qtyTable td:nth-child(2) { grid-area: name; }
  #qtyTable td:nth-child(3) { grid-area: qty; }
  #qtyTable td:nth-child(4) { grid-area: grain; }
  #qtyTable td:nth-child(5) { grid-area: rot; display: flex; align-items: center; gap: 8px;
    justify-content: flex-end; }
  #qtyTable .order-cell .order-input { width: 110px; height: 44px; }
  #qtyTable .grain-input { height: 44px; }
  #qtyTable tfoot tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; border-bottom: 0; }
  #qtyTable tfoot td:nth-child(n) { grid-area: auto; font-weight: 600; }
  #qtyTable tfoot td:empty { display: none; }
  table.qty .thumb, table.qty .thumb svg { width: 52px; height: 40px; }
  /* The quantity stepper is a thumb control on a phone: a free nest is asked
     for an exact count, and typing one into a small field is awkward. */
  .stepper { display: inline-flex; align-items: stretch; }
  .step-btn {
    display: inline-grid; place-items: center; width: 48px; height: 44px; padding: 0;
    border: 1px solid var(--line-strong); background: #fff; font-size: 22px; line-height: 1; color: var(--ink);
  }
  .step-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .step-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
  .step-btn:active { background: var(--bg); }
  table.qty .stepper input {
    width: 64px; height: 44px; border-radius: 0; border-left: 0; border-right: 0; text-align: center;
  }
  .input, input, select, textarea { font-size: 16px; }
  .top {
    position: sticky; top: 0; z-index: 30;
    padding: 0 12px;
  }
  .brand { font-size: 16px; gap: 8px; }
  .brand svg { width: 22px; height: 22px; }
  .top-right { gap: 0; }
  .top-right .who { display: none; }
  main { padding: 12px; }
  .controls { padding: 16px; }
  .stage { position: static; min-height: 0; padding: 12px; }
  h1 { font-size: 20px; }
  .lede { margin-bottom: 14px; font-size: 14px; }
  .btn { height: 44px; }
  .btn.small { height: 40px; }
  .btn-row { flex-wrap: wrap; }
  .empty { height: 180px; }
  .legend { flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
  .stage-head { gap: 8px; margin-bottom: 10px; }
  .toast { left: 12px; right: 12px; transform: none; bottom: 16px; text-align: center; }
  /* Upload */
  .drop { padding: 26px 12px; }
  .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .part-card { padding: 8px; }
  .part-card svg { height: 80px; }
  .file-card { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .file-card svg { width: 28px; height: 28px; }
  .open-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-menu { max-width: calc(100vw - 24px); }
  #qtyTable, #qtyTable tbody, #qtyTable tfoot { display: block; }
  #qtyTable tr {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "thumb name name" "qty qty rot" "order order order";
    gap: 8px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  #qtyTable td { display: block; padding: 0; border: 0; text-align: left; }
  #qtyTable td:nth-child(1) { grid-area: thumb; }
  #qtyTable td:nth-child(2) { grid-area: name; }
  #qtyTable td:nth-child(3) { grid-area: qty; }
  #qtyTable td:nth-child(4) { grid-area: order; display: flex; align-items: center; gap: 8px; }
  #qtyTable td:nth-child(4)::before { content: "Order"; font-size: 13px; color: var(--ink-2); }
  #qtyTable td:nth-child(5) { grid-area: rot; display: flex; align-items: center; gap: 8px; }
  #qtyTable .order-cell .order-input { width: 120px; height: 44px; }
  #qtyTable tfoot tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; border-bottom: 0; }
  #qtyTable tfoot td:nth-child(n) { grid-area: auto; font-weight: 600; }
  #qtyTable tfoot td:empty { display: none; }
  table.qty .thumb, table.qty .thumb svg { width: 52px; height: 40px; }
  .rot-label { display: inline; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
  .grain button { font-size: 12px; }
  .rect-add .input { width: 70px; }
  .tol { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); gap: 6px; }
  .tol-pic svg { width: 140px; height: 94px; }
  .tol-in .input { width: 64px; }
  .custom-size .input { width: 90px; }
  /* Nest: result and costing first, then the board, then the actions */
  .sheets-big .n { font-size: 48px; }
  dl.facts > div { grid-template-columns: 128px minmax(0, 1fr); }
  .costing { padding: 12px; }
  .share-quote { width: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .tabs button { font-size: 13px; flex: none; }
  .blank-tools { margin: 0 0 8px; }
  .blank-tools .status { flex-basis: 100%; }
  .blank-tools .btn { flex: 1 1 30%; }
  .blank-tools #renestBtn { flex-basis: 100%; }
  .zoom-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
  .zoom-box { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
  .sheet-svg { max-height: none; }
  .nav-row { flex-direction: column-reverse; align-items: stretch; }
  .nav-row .spacer { display: none; }
  /* Export: full-width buttons */
  .export-card .btn-row, .signin .btn-row, .manage-plan { flex-direction: column; align-items: stretch; }
  .export-card .btn, .signin .btn, .manage-plan .btn { width: 100%; }
  .export-card .secondary-formats { flex-direction: row; }
  .export-card .secondary-formats .btn { flex: 1 1 0; }
  .export-card .segmented { display: flex; width: 100%; }
  .export-card .segmented button { flex: 1 1 0; padding: 0 6px; font-size: 13px; }
  .lock { justify-content: center; }
  .page { padding: 12px; }
  .page .ph { flex-direction: column; gap: 2px; }
  .page .pf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watermark span { font-size: 40px; }
  /* Profiles */
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-panel .stage-head .btn { width: 100%; }
}

/* Page footer: who runs the service, and the terms and privacy pages. */
.page-foot { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 20px 24px 28px; color: var(--ink-3); font-size: 13px; }
.page-foot a { color: var(--ink-2); }
.page-foot span:last-child a { margin-left: 12px; }


/* Profiles: one view over the job, in the same ink as the rest. */
#profiles { display: none; }
body.profiles-open #profiles { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px;
  align-items: start; max-width: 1400px; }
.profile-controls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; }
.profile-nav { display: grid; gap: 2px; margin: 10px 0 14px; }
.profile-nav button { text-align: left; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--ink-2); font-size: 13px; }
.profile-nav button:hover { background: var(--bg); color: var(--ink); }
.profile-nav button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
#profilesStage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; min-height: 320px; }
#profilesStage .empty { height: auto; padding: 40px 0; }
.edit-table td { padding: 2px 3px; }
.edit-table .input { height: 26px; font-size: 12.5px; }
.edit-table th { font-size: 11.5px; white-space: nowrap; }
/* A wide editing table scrolls inside itself rather than pushing the page
   sideways. */
.table-wrap { overflow-x: auto; max-width: 100%; }
#profilesStage, .profile-controls { min-width: 0; }

/* Jobs: the list a shop comes back to, laid out like Profiles. */
#jobs { display: none; padding: 16px 24px; }
body.jobs-open #jobs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px;
  align-items: start; max-width: 1400px; }
body.jobs-open .app { display: none; }
.jobs-controls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; }
.jobs-controls .pf-grid { grid-template-columns: 1fr; margin-top: 10px; }
.jobs-controls .input { width: 100%; min-width: 0; }
#jobsSearch { font-family: var(--font); }
.jobs-stage { min-width: 0; }
.jobs-stage .empty { height: auto; padding: 40px 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); }
.job-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 3px; min-width: 0; }
.job-title { font-weight: 600; overflow-wrap: anywhere; }
.job-title .ref { font-family: var(--mono); font-weight: 500; margin-right: 10px; }
.job-meta { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.job-nums { font-family: var(--mono); font-size: 13px; }
.job-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.job-actions .spacer { flex: 1; }
.job-version { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.job-version select { height: 28px; max-width: 340px; min-width: 0; }
.tag { font-size: 11px; font-weight: 600; background: var(--warn-soft); color: var(--ink-2); border-radius: 8px;
  padding: 1px 6px; margin-left: 8px; vertical-align: 1px; }
.btn.danger { border-color: var(--cut); color: var(--cut); }

/* What a job keeps once its drawings are deleted, and the data panel. */
ul.kept, ul.data-facts { margin: 0; padding-left: 18px; }
ul.kept li, ul.data-facts li { margin: 3px 0; }
.data-panel { margin-top: 14px; }
.data-panel a { color: var(--ink); }
.check.delete-on-export { margin: 4px 0 14px; align-items: flex-start; }

/* Routes: the ways a job could be cut, one row each. The table scrolls
   inside its wrapper; the column never grows to fit it. */
.results > * { min-width: 0; }
.routes .routes-head { display: flex; align-items: center; gap: 10px; }
.routes .routes-head .panel-title { margin: 0; }
.routes .routes-head .spacer { flex: 1; }
.routes > .hint { margin: 6px 0 0; }
.routes-table .rank { font-family: var(--mono); font-weight: 500; margin-right: 4px; }
.routes-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
.routes-table .use-route { display: block; margin-top: 4px; }
.routes-table td .tag { margin-left: 6px; }
.routes-table tr.splits td { padding: 0 4px 6px 18px; text-align: left; background: transparent; }
.routes-table tr.splits summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
.routes-table tr.splits table.qty td { padding: 3px 4px; font-size: 12px; }
.routes-table tr.split-chosen td { font-weight: 600; }
.routes .left-out { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.routes .advisories { border: 0; padding: 0; margin: 12px 0 0; }
.routes .advisories h3 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }

/* A sheet cut around its locked blanks: which way, and the other on offer. */
.cut-around-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0;
  font-size: 13px; color: var(--ink-2); }

/* Spare board and the job riding on it. */
.spare-note select { max-width: 320px; }
.rider-note .rider-share { display: inline-flex; align-items: center; gap: 6px; }
.rider-note .rider-share input { width: 70px; }
.rider-note .rider-lines { display: block; }
.sheet-svg .placed.rider path { stroke: #0B6E4F; }

/* Cuts numbered in cutting order, and a cut being drawn. */
.sheet-svg .cut-number circle { fill: #fff; stroke: #7A2FD0; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sheet-svg .cut-number text { font-family: var(--mono); font-weight: 600; fill: #7A2FD0; }
.sheet-svg .guillotine.drawing { stroke-dasharray: 4 3; }
.zoom-box.drawing-cut { cursor: crosshair; }
#drawCutBtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Cuts set by hand */
.cut-head { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.cut-head .lbl { margin: 0; }
.cut-head .spacer { flex: 1; }
table.cuts { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.cuts td { padding: 2px 3px; border-bottom: 1px solid var(--border); }
table.cuts td:first-child { color: var(--ink-2); white-space: nowrap; }
table.cuts .input { width: 84px; height: 26px; text-align: right; }
table.cuts .btn { height: 24px; padding: 0 8px; }
/* A cut on the board is a handle: wide enough to grab, drawn as the line. */
.sheet-svg .cut-grab { stroke: transparent; stroke-width: 14; cursor: grab; vector-effect: non-scaling-stroke; }
.sheet-svg .cut-grab:hover { stroke: rgba(122, 47, 208, 0.18); }
.sheet-svg .cut-grab.dragging { cursor: grabbing; stroke: rgba(122, 47, 208, 0.28); }

/* Results */
.strip .sheets-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.strip .sheets-big .n { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1; }
.strip .sheets-big .l { font-size: 13px; color: var(--ink-2); }
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: flex; gap: 10px; align-items: baseline; padding: 4px 0;
  border-bottom: 1px solid var(--border); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { flex: none; width: 108px; color: var(--ink-2); font-size: 12.5px; }
.facts dd { margin: 0; flex: 1; font-family: var(--mono); font-size: 12.5px; text-align: right; }
.facts .quote dd { font-size: 15px; font-weight: 500; }
/* Rows whose value is a list rather than a number read down the column:
   what each sheet carries, what sets the run, what is left over. */
#nUnitsRow, #nOrderRow, #nOversRow { display: block; }
#nUnitsRow dd, #nOrderRow dd, #nOversRow dd { text-align: left; margin-top: 2px; }
.strip-actions { display: flex; gap: 6px; margin-top: 10px; }
.strip-actions .btn { flex: 1; }
.diag { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; }
.diag > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); list-style: none; }
.diag > summary::-webkit-details-marker { display: none; }
.diag > summary::before { content: "+ "; }
.diag[open] > summary::before { content: "- "; }
.diag .facts { margin-top: 6px; }
.advisories ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.advisories li { display: flex; gap: 8px; align-items: start; font-size: 12.5px; }
.advisories li .btn { flex: none; }

/* Cost breakdown: a drawer over the results, not a fold inside them. */
.drawer {
  position: fixed; top: 48px; right: 0; bottom: 0; width: 380px; z-index: 30;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 13px; }
.drawer-head .spacer { flex: 1; }
.drawer-body { padding: 10px 14px 20px; overflow: auto; }
.drawer-body table { width: 100%; }

/* Workstation type and density */
body { font-size: 14px; min-width: 0; }
.input, table.qty input, .num, .sec-sum, .mono, .strip dd, .quote dd { font-family: var(--mono); }
.input { height: 30px; border-radius: var(--radius); background: #FFF; font-size: 13px; }
.unit .input, .custom-size .input { width: 84px; }
.btn { height: 30px; padding: 0 12px; border-radius: var(--radius); font-size: 13px; }
.btn.small { height: 26px; padding: 0 10px; font-size: 12.5px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: var(--act-hover); border-color: var(--act-hover); }
.btn.primary:disabled { background: #E7DCC4; border-color: #E7DCC4; color: #8A8A85; }
.segmented button { height: 28px; font-size: 13px; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
table.qty { font-size: 13px; }
table.qty td { padding: 3px 4px; height: var(--row); }
table.qty th { padding: 0 4px 5px; font-size: 12px; }
table.qty .thumb, table.qty .thumb svg { width: 34px; height: 26px; }
table.qty input, table.qty .order-cell .order-input { height: 26px; width: 74px; }
/* The turn toggle's checkbox is the switch, not a field: it keeps the
   switch's own size rather than a text input's. */
table.qty .switch input { width: 100%; height: 100%; }
.grain button { padding: 6px 4px 5px; font-size: 12px; }
.grain button svg { width: 44px; height: 32px; }
.part-card { padding: 8px; }
.part-card svg { height: 64px; }
.parts-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.sheet-svg { max-height: none; }
.callout { border-radius: var(--radius); }
.stage, .controls { background: transparent; border: 0; border-radius: 0; padding: 0; min-height: 0; position: static; }
.export-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.export-card h2 { margin-bottom: 4px; }
.export-panel .desc { font-size: 12.5px; color: var(--ink-2); margin: 0 0 8px; }

@media (min-width: 1600px) {
  .app { grid-template-columns: 440px minmax(0, 1fr) 380px; }
}
@media (max-width: 1279px) {
  .app { grid-template-columns: 400px minmax(0, 1fr); }
  .results { grid-column: 1 / -1; }
  .canvas { position: static; }
}
@media (max-width: 860px) {
  /* One column: controls, board, results. The sidebar is no longer a column
     of its own, so it stops scrolling separately and grows with its content;
     Nest sticks to the bottom of the screen rather than the bottom of it. */
  .app { grid-template-columns: 1fr; gap: 0; }
  .side, .canvas, .results { grid-column: 1; }
  .side { height: auto; overflow: visible; position: static; border-bottom: 1px solid var(--border);
    padding-bottom: 4px; }
  .side-foot { position: sticky; bottom: 0; z-index: 20; margin-top: 0; }
  .canvas { position: static; height: auto; padding: 12px; }
  #sheetPreview, #resultSheet { display: block; }
  #sheetPreview .sheet-svg, #resultSheet .sheet-svg { max-height: 60vh; width: 100%; }
  .results { padding: 12px; }
  .top { grid-template-columns: auto 1fr auto; gap: 10px; }
  .head-hint { display: none; }
  .head-job { display: none; }
  .board-head { flex-wrap: wrap; }
  .board-head .tabs { width: 100%; justify-content: flex-start; }
  .blank-tools { flex-wrap: wrap; }
  .blank-tools .status { width: 100%; }
  .drawer { width: 100%; top: 0; }
  body.profiles-open #profiles { grid-template-columns: 1fr; gap: 12px; }
  body.jobs-open #jobs { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .job-version { width: 100%; }
  .job-version select { max-width: none; flex: 1; }
  .parts-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 420px) {
  /* The narrowest phone: the mode switch keeps its place in the header and
     the blanks table keeps its columns, so nothing has to be hunted for.
     The account buttons keep to their own column. */
  .top { padding: 0 10px; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; }
  /* The mode switch and the account buttons share the row; the hint and
     the job reference wait for a wider screen, and nothing may run over
     the buttons. */
  .head-hint, .head-job { display: none; }
  .head-mode { min-width: 0; overflow: hidden; }
  .top-right { min-width: 0; overflow: hidden; }
  .brand span, .brand { font-size: 14px; }
  .head-seg button { padding: 0 8px; font-size: 12px; }
  /* Jobs, Profiles and Sign in share the header with the mode switch. */
  .top { gap: 6px; }
  .top-right .btn.small { padding: 0 5px; font-size: 12px; }
  .head-seg button { white-space: nowrap; padding: 0 6px; }
  .sec-body { padding: 4px 10px 12px; }
  .sec > summary { padding: 0 10px; }
  table.qty .thumb, table.qty .thumb svg { width: 26px; height: 20px; }
  table.qty input, table.qty .order-cell .order-input { width: 62px; }
  .facts dt { width: 92px; }
}

@media (max-width: 380px) {
  /* Below the common phone width the mark alone names the page, so the mode
     switch and the account buttons keep their room. */
  .brand-name { display: none; }
}
#jobsStatus:empty { display: none; }