/* KerfMate styles: "Workshop Slate" (DECISIONS.md, Phase 3).
   Colours are variables; dark mode follows the device unless the user picks one. */

:root {
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Sinhala', 'Noto Sans Tamil', sans-serif;
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --fg: #1d2430; --muted: #5b6573; --line: #dde1e7;
  --bar: #243041; --bar-fg: #f2f4f7; --chip: #36455b;
  --primary: #2f5d8a; --primary-hover: #264d73; --on-primary: #fff;
  --accent: #d98e2b; --on-accent: #1d2430;
  --tag: #e9eef5; --tag-fg: #2f5d8a;
  --ok-bg: #e8f5ec; --ok-fg: #1e6b3a; --warn-bg: #fff4e0; --warn-fg: #7a4a00; --err-bg: #fdeceb; --err-fg: #a12a1f;
  --part: #e2c79d; --part-line: #8a6a3a; --board: #faf6ee; --trim: #d9dce2; --free: #faf6ee;
  --focus: #9a5b0f; --accent-text: #9a5b0f;   /* darker amber for text and focus rings (AA contrast) */
  --radius: 10px;
  --tap: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161d; --surface: #1b212b; --surface-2: #171c25; --fg: #e8ecf1; --muted: #9aa5b4; --line: #2c3542;
    --bar: #0c1016; --chip: #243041; --primary: #7fb0e0; --primary-hover: #9cc3ea; --on-primary: #0c1016;
    --accent: #e3a04a; --accent-text: #e3a04a; --focus: #e3a04a; --tag: #243041; --tag-fg: #a9c9ea;
    --ok-bg: #16301f; --ok-fg: #9adbb0; --warn-bg: #3a2a10; --warn-fg: #ffd08a; --err-bg: #3a1714; --err-fg: #ffb4ab;
    --part: #735634; --part-line: #e2c79d; --board: #262019; --trim: #353b45; --free: #262019;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12161d; --surface: #1b212b; --surface-2: #171c25; --fg: #e8ecf1; --muted: #9aa5b4; --line: #2c3542;
  --bar: #0c1016; --chip: #243041; --primary: #7fb0e0; --primary-hover: #9cc3ea; --on-primary: #0c1016;
  --accent: #e3a04a; --accent-text: #e3a04a; --focus: #e3a04a; --tag: #243041; --tag-fg: #a9c9ea;
  --ok-bg: #16301f; --ok-fg: #9adbb0; --warn-bg: #3a2a10; --warn-fg: #ffd08a; --err-bg: #3a1714; --err-fg: #ffb4ab;
  --part: #735634; --part-line: #e2c79d; --board: #262019; --trim: #353b45; --free: #262019;
  color-scheme: dark;
}
/* Scripts that need more line height (Phase 6 sets lang on <html>). */
:root:lang(si), :root:lang(ta), :root:lang(hi) { --lh: 1.7; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/var(--lh, 1.5) var(--font);
  padding-bottom: env(safe-area-inset-bottom);
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------- top bar and tabs */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 8px max(12px, env(safe-area-inset-left)); padding-top: max(8px, env(safe-area-inset-top));
  background: var(--bar); color: var(--bar-fg);
}
.logo { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
.brand { font-weight: 700; font-size: 18px; white-space: nowrap; }
.project-name {
  flex: 1; min-width: 0; max-width: 360px; background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--bar-fg); padding: 6px 8px; min-height: 40px;
}
.project-name::placeholder { color: #b7c0cc; }
.project-name:hover, .project-name:focus { border-color: #4a5a71; background: rgba(255,255,255,.06); }
.chip { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--chip); white-space: nowrap; }
.topbar .spacer { flex: 1; }
.iconbtn {
  min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: transparent; color: inherit; border-radius: 8px; cursor: pointer; padding: 0 8px;
}
.iconbtn:hover { background: rgba(127,127,127,.15); }

.tabs { position: sticky; top: 56px; z-index: 15; display: flex; background: var(--surface); border-bottom: 1px solid var(--line); }
.tabs button {
  flex: 1; min-height: 48px; border: 0; background: transparent; font-weight: 600; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.tabs button[aria-selected="true"] { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.tabs .count { font-size: 12px; background: var(--tag); color: var(--tag-fg); border-radius: 99px; padding: 1px 7px; }

/* ---------------------------------------------------------------- layout */
.work { max-width: 1600px; margin: 0 auto; padding: 12px max(12px, env(safe-area-inset-left)) 96px; display: grid; gap: 12px; }
.pane { display: grid; gap: 12px; align-content: start; min-width: 0; }
/* Phones and tablets: one pane at a time (tabs). */
.work[data-tab="sheets"] #pane-parts, .work[data-tab="sheets"] #pane-results,
.work[data-tab="parts"] #pane-sheets, .work[data-tab="parts"] #pane-results,
.work[data-tab="results"] #pane-sheets, .work[data-tab="results"] #pane-parts { display: none; }
/* Computers: inputs left, results right. */
@media (min-width: 1024px) {
  .tabs { display: none; }
  /* Inputs get most of the width (the parts grid needs it); results keep a steady column. */
  .work { grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 540px); grid-template-rows: auto auto auto 1fr; align-items: start; padding-bottom: 24px; }
  .work #pane-parts, .work #pane-results { display: grid !important; }
  /* Left column order: sheet types, then parts, then "More options" (so it never pushes the parts down).
     The Sheets panel's two blocks become separate grid items for this. */
  .work #pane-sheets { display: contents !important; }
  #pane-sheets > .sheets-card { grid-column: 1; grid-row: 1; }
  #pane-sheets > .basics-card { grid-column: 1; grid-row: 2; }
  #pane-parts { grid-column: 1; grid-row: 3; }
  #pane-sheets > details.more { grid-column: 1; grid-row: 4; }
  #pane-results { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 68px; max-height: calc(100vh - 80px); overflow: auto; padding-right: 2px; }
  /* One line per sheet type. */
  .stock-grid { grid-template-columns: minmax(150px, 2fr) repeat(5, minmax(70px, 1fr)) auto !important; }
  .stock-grid .stock-remove { display: inline-flex; align-self: end; }
  .sheets-card .stock-actions:not(:has(input)) { display: none; }
  .stock-grid .field.full { grid-column: auto; }
  /* A little tighter so the basic grid fits without sideways scrolling at 1280 px. */
  .work table.grid td.c-name { min-width: 120px; }
  .work table.grid td.c-cut { min-width: 84px; }
}
/* When the parts grid does scroll sideways, the row number and name stay in view. */
table.grid .rownum, table.grid .c-name { position: sticky; background: var(--surface); z-index: 1; }
table.grid .rownum { left: 0; }
table.grid .c-name { left: 28px; }
table.grid thead th:nth-child(-n+2) { position: sticky; background: var(--surface); z-index: 1; }
table.grid thead th:first-child { left: 0; }
table.grid thead th:nth-child(2) { left: 28px; }

/* ---------------------------------------------------------------- cards and controls */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head h2 { font-size: 15px; margin: 0; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); flex: 1; }
.btn {
  min-height: var(--tap); padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; text-decoration: none; color: var(--fg);
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.btn.accent:hover { filter: brightness(1.06); }
.btn.link { border: 0; background: transparent; color: var(--primary); padding: 0 6px; font-weight: 600; }
.btn.danger { color: var(--err-fg); }
.btn.big { min-height: 52px; font-size: 17px; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* "Continue with Google / Facebook": the colours their brand rules ask for, in light and dark mode. */
.btn.social { gap: 12px; font-weight: 600; font-size: 16px; }
.btn.social svg { flex: none; }
.btn.google { background: #fff; color: #1f1f1f; border-color: #747775; }
.btn.google:hover { background: #f2f2f2; border-color: #747775; }
.btn.facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn.facebook:hover { background: #166fe5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
}
:root[data-theme="dark"] .btn.google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }

input.cell, select.cell {
  width: 100%; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2);
}
input.cell:focus, select.cell:focus { background: var(--surface); border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary); }
input.cell.bad { border-color: var(--err-fg); background: var(--err-bg); }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--primary); }
label.field { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
label.field > input, label.field > select { color: var(--fg); font-size: 16px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; }

/* Editable tables (sheets grid, parts grid, offcuts). They scroll inside their own box. */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0 4px; min-width: 560px; }
table.grid th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 4px; white-space: nowrap; }
table.grid td { padding: 0 2px; vertical-align: middle; }
table.grid td.act { width: 1%; white-space: nowrap; }
table.grid .w-num { width: 88px; }
table.grid .w-qty { width: 64px; }
table.grid .rownum { width: 28px; color: var(--muted); font-size: 13px; text-align: right; padding-right: 6px; }

/* Parts as cards (narrow screens). */
.pcards { display: grid; gap: 8px; }
.pcard { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); min-height: 56px; cursor: pointer; text-align: left; width: 100%; }
.pcard .main { flex: 1; min-width: 0; }
.pcard .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .meta { font-size: 14px; color: var(--muted); }
.pcard.bad { border-color: var(--err-fg); }
.tagpill { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--tag); color: var(--tag-fg); white-space: nowrap; }

.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }

.empty { text-align: center; padding: 20px 12px; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.empty strong { color: var(--fg); font-size: 17px; }

/* More options */
details.more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
details.more > summary { list-style: none; cursor: pointer; min-height: var(--tap); padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary .ico { transition: transform .15s; }
details.more[open] > summary .ico { transform: rotate(90deg); }
details.more .body { padding: 4px 12px 14px; display: grid; gap: 14px; }
/* "More options": grouped settings rows (label left, compact control right). */
.set-groups { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.set-group h3 { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 2px; }
.set-row { border-bottom: 1px solid var(--line); padding: 4px 0; }
.set-group .set-row:last-child { border-bottom: 0; }
.set-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: var(--tap); }
.set-label { flex: 1 1 120px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.set-label label { cursor: pointer; }
.set-row .help-text { margin: 4px 0 6px; }
.set-num { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.set-num input.cell { width: 88px; text-align: right; }
.set-num .unit { color: var(--muted); font-size: 13px; min-width: 2.2em; }
select.set-select { width: auto; max-width: 100%; flex: none; margin-left: auto; }
input.set-text { width: 88px; flex: none; text-transform: uppercase; }
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
input.switch:checked { background: var(--primary); }
input.switch:checked::after { left: 21px; }
input.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.set-line > input.switch { order: 2; }
.tape-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); margin: 6px 0 4px; }
.tape-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 8px; display: grid; gap: 6px; }
.tape-top { display: flex; gap: 6px; align-items: center; }
.tape-fields { display: grid; gap: 8px; grid-template-columns: 1fr 1fr auto; align-items: end; }
.tape-default { min-height: 40px; }
.tape-field { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.tape-field .set-num input.cell { width: 100%; color: var(--fg); }
.tape-field .set-num { display: flex; }
.help-btn { min-width: 28px; min-height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-weight: 700; font-size: 13px; padding: 0; position: relative; }
.help-btn::after { content: ''; position: absolute; inset: -8px; }   /* a bigger invisible touch area */
.help-text { font-size: 14px; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 8px 10px; margin: 0; }
.changed-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 4px; }

/* Run bar: sticky at the bottom on phones. */
.runbar { display: grid; gap: 8px; }
@media (max-width: 1023.98px) {
  .runbar.floating { position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; padding: 10px max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
                     background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
}
.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ---------------------------------------------------------------- results */
.alert { padding: 10px 12px; border-radius: 8px; font-size: 15px; display: grid; gap: 4px; }
.alert.warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert.err { background: var(--err-bg); color: var(--err-fg); }
.alert.ok { background: var(--ok-bg); color: var(--ok-fg); }
.alert ul { margin: 0; padding-left: 18px; }
.stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat small { color: var(--muted); font-size: 13px; }
/* Totals from a plan that is out of date or leaves pieces out: still readable, clearly not final. */
.stats.doubtful .stat, .card.doubtful { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, var(--surface-2) 10px, var(--surface-2) 20px); }
.stats.doubtful .stat b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
table.grid tr.bad .rownum { background: var(--err-bg); color: var(--err-fg); font-weight: 700; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
table.list th, table.list td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: top; }
table.list th { font-size: 13px; color: var(--muted); font-weight: 600; border-top: 0; }
table.list td.r, table.list th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-card { display: grid; gap: 10px; }
.sheet-card h3 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sheet-card h3 .muted { font-size: 14px; font-weight: 400; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--tag); color: var(--tag-fg); white-space: nowrap; display: inline-block; }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.diagram { width: 100%; height: auto; display: block; touch-action: pinch-zoom; }
.diagram .board { fill: var(--board); }
.diagram .trim { fill: var(--trim); }
.diagram .free { fill: var(--free); }
.diagram .part { fill: var(--part); stroke: var(--part-line); }
.diagram .lbl { fill: var(--fg); font-family: var(--font); }
.diagram .grainline { stroke: var(--part-line); opacity: .25; }
.diagram .cut { stroke: var(--accent); }
.diagram .hl-piece { fill: var(--accent); fill-opacity: .3; stroke: var(--accent); stroke-opacity: .9; }
.diagram .done { opacity: .35; }
.diagram-wrap { overflow: auto; max-height: 75vh; border-radius: 6px; }
.diagram-wrap.zoomed .diagram { width: 200%; }
ol.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
ol.steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; background: var(--surface-2); font-size: 15px; }
ol.steps .n { min-width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
ol.steps li.trim .n { background: var(--trim); color: var(--fg); }
details.sub > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary); list-style: none; }
details.sub > summary::-webkit-details-marker { display: none; }
.stale { position: sticky; top: 0; z-index: 2; }

/* ---------------------------------------------------------------- dialogs and toast */
dialog.dlg { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--surface); color: var(--fg); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog.dlg::backdrop { background: rgba(10,14,20,.55); }
.dlg-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px 16px; }
.dlg-head h2 { margin: 0; font-size: 18px; flex: 1; }
.dlg-body { padding: 8px 16px 16px; display: grid; gap: 12px; overflow: auto; }
.dlg-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px 16px; flex-wrap: wrap; }
.dlg-foot .btn.left { margin-right: auto; }
@media (max-width: 599.98px) {
  dialog.dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
.menu-list { display: grid; gap: 2px; }
.menu-list a.btnlike { color: inherit; text-decoration: none; }
.menu-list button, .menu-list label.btnlike, .menu-list a.btnlike { justify-content: flex-start; width: 100%; border: 0; background: transparent; min-height: 48px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; font-size: 16px; }
.menu-list button:hover, .menu-list label.btnlike:hover, .menu-list a.btnlike:hover { background: var(--surface-2); }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 8px; max-width: calc(100vw - 32px); font-size: 15px; }

/* Edge picker drawing */
.edge-pick { display: grid; grid-template-columns: 1fr 2.2fr 1fr; grid-template-rows: auto 110px auto; gap: 8px; align-items: center; }
.edge-pick .top { grid-column: 2; grid-row: 1; }
.edge-pick .left { grid-column: 1; grid-row: 2; }
.edge-pick .shape { grid-column: 2; grid-row: 2; height: 100%; border: 2px solid var(--muted); border-radius: 4px; background: var(--part); display: grid; place-items: center; color: #1d2430; font-size: 14px; text-align: center; padding: 4px; }
.edge-pick .right { grid-column: 3; grid-row: 2; }
.edge-pick .bottom { grid-column: 2; grid-row: 3; }

/* ---------------------------------------------------------------- cut mode */
.cutmode { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.cutmode .cm-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bar); color: var(--bar-fg); }
.cutmode .cm-top .title { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; line-height: 1.3; }
.cutmode .cm-sheets { display: flex; justify-content: space-between; gap: 8px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.cutmode .cm-sheets:empty { display: block; border: 0; padding: 0; }
.cutmode .cm-instr { padding: 12px 16px; display: grid; gap: 4px; }
.cutmode .cm-kind { font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-text); }
.cutmode .cm-main { font-size: clamp(20px, 5vw, 30px); font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cutmode .cm-num { display: block; font-size: clamp(40px, 12vw, 64px); font-weight: 800; line-height: 1.05; }
.cutmode .cm-frees { font-size: 17px; font-weight: 600; color: var(--ok-fg); background: var(--ok-bg); border-radius: 6px; padding: 4px 8px; justify-self: start; }
.cutmode .cm-donecard { grid-row: 3 / span 2; align-content: start; overflow: auto; }
.cutmode .cm-next { font-size: 18px; font-weight: 700; margin-top: 6px; }
.diagram .edge-names text { fill: var(--muted); font-family: var(--font); }
.cutmode .cm-sub { font-size: 18px; color: var(--muted); }
.cutmode .cm-draw { min-height: 0; padding: 0 12px; display: grid; align-items: center; }
.cutmode .cm-draw svg { max-height: 100%; }
.cutmode .cm-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 16px; }
.cutmode .cm-nav .btn { min-height: 64px; font-size: 20px; }
.cutmode .cm-count { font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- print */
#print-area { display: none; }
@media print {
  :root { color-scheme: light; --fg: #000; --muted: #333; --line: #bbb; --surface: #fff; --bg: #fff;
          --part: #eadbc2; --part-line: #6b5330; --board: #fff; --trim: #ddd; --free: #fff; --accent: #c77712; --tag: #eee; --tag-fg: #000; }
  body { background: #fff; color: #000; padding: 0; }
  body.print-labels > *:not(#print-area), body.print-sheets > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  .sheet-print { break-inside: avoid; page-break-inside: avoid; margin-bottom: 8mm; }
  .sheet-print h2 { font-size: 14pt; margin: 0 0 3mm; }
  .sheet-print .diagram { max-height: 120mm; }
  .sheet-print ol.steps li { background: none; padding: 1mm 0; font-size: 10pt; }
  .sheet-print ol.steps .n { min-width: 7mm; height: 7mm; font-size: 9pt; background: #eee; color: #000; }
}
.label-page { display: grid; box-sizing: border-box; break-after: page; page-break-after: always; overflow: hidden; }
.label-page:last-child { break-after: auto; page-break-after: auto; }
.label { box-sizing: border-box; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 0 2mm; align-content: start; padding: 1.5mm 2mm; font-family: var(--font); color: #000; background: #fff; line-height: 1.15; }
.label .no { font-weight: 800; }
.label .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1; }
.label .sz { font-variant-numeric: tabular-nums; grid-column: 1; }
.label .mt, .label .rm { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1; }
.label .edge { grid-column: 2; grid-row: 1 / span 4; align-self: center; }

/* The floating Optimize bar is only for phones/tablets; computers use the one in the results column. */
@media (min-width: 1024px) { .runbar.floating { display: none; } }
/* Cut mode drawing fills the free space and keeps its proportions. */
.cutmode .cm-draw { position: relative; }
.cutmode .cm-draw svg { position: absolute; inset: 0 12px; width: calc(100% - 24px); height: 100%; }
/* Parts grid: keep every column readable; the table scrolls inside its box when narrow. */
table.grid td.c-name { min-width: 150px; }
table.grid td.c-sel select { min-width: 120px; }
table.grid td.c-label { min-width: 120px; }
/* Hidden screen-reader labels stay inside their scroll box (no page-wide sideways scroll). */
.table-wrap { position: relative; }
table.grid td.w-qty { min-width: 60px; }
table.grid td.w-num { min-width: 84px; }
table.list tr.total td { font-weight: 700; font-size: 16px; }
/* Narrow phones: keep the top bar on one line. */
.chip-short { display: none; }
@media (max-width: 639.98px) {
  .chip-long { display: none; }
  .chip-short { display: inline; }
  .topbar { gap: 6px; }
}
.card-head .btn { flex: none; }
/* Grid children may shrink below their content, so wide tables scroll inside their box. */
.more .body > *, .pane > *, .dlg-body > * { min-width: 0; }
.table-wrap { max-width: 100%; }
/* (?) buttons look small but have a full 44 px touch area. */
table.grid td.c-cut { min-width: 96px; white-space: nowrap; padding: 0 6px; }
/* The status chip is a button: tap it for sign-in / save options. */
button.chip { border: 0; color: inherit; cursor: pointer; min-height: 36px; position: relative; font: inherit; font-size: 13px; }
button.chip::after { content: ''; position: absolute; inset: -4px; }
button.chip.warn { background: #7a4a00; }
button.chip.ok { background: #1e5a36; }

/* Sinhala, Tamil and Hindi: fonts already on the device (no download), and more line height. */
:root:lang(si) { --font: 'Noto Sans Sinhala', 'Nirmala UI', 'Iskoola Pota', 'Sinhala Sangam MN', system-ui, sans-serif; }
:root:lang(ta) { --font: 'Noto Sans Tamil', 'Nirmala UI', 'Latha', 'Tamil Sangam MN', system-ui, sans-serif; }
:root:lang(hi) { --font: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Kohinoor Devanagari', system-ui, sans-serif; }
:root:lang(si) body, :root:lang(ta) body, :root:lang(hi) body { line-height: 1.7; }
/* Long words in buttons and tabs may wrap instead of overflowing. */
.btn, .tabs button, .chip, .pcard .name { overflow-wrap: anywhere; }
.btn { text-align: center; line-height: 1.25; padding-top: 4px; padding-bottom: 4px; }
/* Tabs: labels stay on one line (never break inside a word); a bit smaller on tiny phones. */
.tabs button { overflow-wrap: normal; white-space: nowrap; padding: 0 4px; min-width: 0; }
.tabs .count { white-space: nowrap; }
@media (max-width: 379.98px) { .tabs button { font-size: 14px; gap: 4px; } }
/* Part cards: the tape tag moves under the sizes when space is tight. */
.pcard .main { flex: 1 1 auto; }
.pcard .tagpill { white-space: normal; text-align: center; max-width: 38%; }

/* "A new version is ready" note: small, at the bottom, never covering the Optimize bar on phones. */
.update-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; max-width: calc(100vw - 24px);
  background: var(--bar); color: var(--bar-fg); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@media (min-width: 1024px) { .update-bar { bottom: 20px; } }

/* "KerfMate / by SM Interiors" in the top bar. */
.brand-wrap { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-wrap .by { font-size: 11px; opacity: .8; white-space: nowrap; }
@media (max-width: 399.98px) { .brand-wrap { display: none; } }
/* Numbered cut lines on sheet drawings (same numbers as the cutting order). */
.diagram .cutline { stroke: #c0392b; fill: none; }
.diagram .cutline.trimcut { stroke: #8a929e; }
.diagram .cutno circle { fill: #c0392b; }
.diagram .cutno.trimcut circle { fill: #6b7380; }
.diagram .cutno text { fill: #fff; font-family: var(--font); }
@media print { .diagram .cutno circle { fill: #c0392b !important; } .diagram .cutno text { fill: #fff !important; } }

/* Parts on a sheet, under its drawing (the drawing shows only numbers when it is small). */
.sheet-parts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 2px 12px; font-size: 14px; }
.sheet-parts li { overflow-wrap: anywhere; }
.sheet-parts .muted { font-variant-numeric: tabular-nums; }
@media print { #print-area .diagram text { display: inline !important; } }
/* Cut mode on a phone held sideways: instruction and buttons on the left, drawing on the right. */
@media (max-height: 500px) and (orientation: landscape) {
  .cutmode { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .cutmode .cm-top, .cutmode .cm-sheets { grid-column: 1 / -1; }
  .cutmode .cm-top { padding: 4px 12px; }
  .cutmode .cm-sheets .btn { min-height: 36px; }
  .cutmode .cm-instr { grid-column: 1; grid-row: 3; align-content: center; padding: 6px 16px; }
  .cutmode .cm-main { font-size: clamp(20px, 6vh, 28px); }
  .cutmode .cm-sub { font-size: 15px; }
  .cutmode .cm-draw { grid-column: 2; grid-row: 3 / span 2; padding: 6px 12px; }
  .cutmode .cm-nav { grid-column: 1; grid-row: 4; padding: 6px 16px 10px; }
  .cutmode .cm-nav .btn { min-height: 52px; font-size: 18px; }
}

/* The answers (sheets to buy, estimated cost) get a plywood-coloured edge. */
.stats .stat:first-child, .stats .stat:last-child { border-top: 3px solid var(--accent); }
.stats.doubtful .stat { border-top-color: var(--line); }
/* How-to steps */
.help-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
/* Offcuts: a table on wide screens, one card per offcut on phones. */
.offcut-table { min-width: 620px; }
.offcut-table .o-only { display: none; }
@media (max-width: 599.98px) {
  .offcut-table { min-width: 0 !important; border-spacing: 0; }
  .offcut-table thead { display: none; }
  .offcut-table, .offcut-table tbody, .offcut-table td { display: block; width: auto !important; }
  .offcut-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
  .offcut-table td { padding: 0; min-width: 0 !important; }
  .offcut-table td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; color: var(--muted); }
  .offcut-table .o-mat, .offcut-table .o-note { grid-column: 1 / -1; }
  .offcut-table .o-only { display: inline; }
  .offcut-table .o-grain { align-self: end; }
  .offcut-table .o-del { justify-self: end; align-self: end; order: 8; }
  .offcut-table .o-note { order: 9; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .cutmode .cm-donecard { grid-column: 1 / -1; grid-row: 3; }
}

/* Saw and edge tape card: the kerf row, then the tape types. */
.basics-card .set-row { border-bottom: 0; }
.basics-card .set-group h3 { margin-top: 6px; }

.stock-remove { display: none; }