/* Estimator v4 · variation D · Guided questions. Colours only through kit/tokens.css variables.
   z scale used: 30 (menus/combobox lists) · 50 (dialogs + scrim). Nothing floats over content. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { font-size: 13px; line-height: 1.35; }
button { font: inherit; color: inherit; }
.app { height: 100dvh; display: flex; flex-direction: column; min-width: 0; }

/* ── top bar ─────────────────────────────────────────────── */
.top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); min-height: 44px; }
.top-l { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; flex-wrap: wrap; }
.top-title { font-size: 15px; }
.top-note, .top-draft { color: var(--color-fg-muted); font-size: 12px; }
.top-draft::before { content: "·"; margin-right: var(--sp-3); color: var(--color-fg-faint); }
.top-r { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; }
.seg > button { height: calc(var(--ctl-h) - 2px); padding: 0 var(--sp-3); border: 0; background: transparent; cursor: pointer; font-size: 12px; }
.seg > button + button { border-left: 1px solid var(--color-border); }
.seg > button[aria-checked="true"], .seg > button[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-fg); font-weight: 600; }
.seg > button:disabled { color: var(--color-fg-faint); cursor: not-allowed; }
.btn { font-size: 12px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); white-space: nowrap; }
.btn:disabled { color: var(--color-fg-faint); cursor: not-allowed; background-color: var(--color-bg-muted); }
.btn-ghost { border-color: transparent; background-color: transparent; }
.btn-sm { height: 24px; padding: 0 var(--sp-2); font-size: 12px; border-radius: var(--radius-sm); }
.btn-danger-text { color: var(--color-danger); }
.btn.owed { color: var(--color-danger); border-color: var(--color-danger); }
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── the split ───────────────────────────────────────────── */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split[data-view="ask"] { grid-template-columns: minmax(0, 1fr) 0; }
.split[data-view="order"] { grid-template-columns: 0 minmax(0, 1fr); }
.split[data-view="ask"] .pane-order, .split[data-view="order"] .pane-ask { display: none; }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.pane-ask { border-right: 1px solid var(--color-border); }
.pane-head { flex: none; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: 44px; }
.pane-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6); }
.pane-foot { flex: none; border-top: 1px solid var(--color-border); background: var(--color-bg-elevated); padding: var(--sp-3) var(--sp-5); }
.phone-tabs { display: none; }
.phone-only { display: none; }
.top-more { display: contents; }

/* ── breadcrumb (room › window › layer) ─────────────────── */
.crumbs { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; min-width: 0; flex: 1; }
.crumb { position: relative; }
.crumb > button { height: var(--ctl-h); max-width: 260px; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); cursor: pointer; }
.crumb > button:hover { background: var(--color-bg-hover); }
.crumb-k { color: var(--color-fg-faint); font-size: 11px; }
.crumb-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.crumb-sep { color: var(--color-fg-faint); }
.menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 240px; max-width: 340px; max-height: 60vh; overflow: auto;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--sp-1); }
.menu button { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3);
  border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.menu button:hover, .menu button:focus-visible { background: var(--color-bg-hover); }
.menu button[aria-current="true"] { background: var(--color-accent-soft); font-weight: 600; }
.menu button:disabled { color: var(--color-fg-faint); cursor: not-allowed; }
.menu hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--sp-1) 0; }
.menu .menu-cap { padding: var(--sp-1) var(--sp-3); color: var(--color-fg-faint); font-size: 11px; }

/* ── the question column ─────────────────────────────────── */
.col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.step-eyebrow { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); color: var(--color-fg-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.step-eyebrow:first-child { margin-top: 0; }
.step-eyebrow .n { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--color-border-strong); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; }
.step-eyebrow.done .n { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.step-eyebrow.now .n { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-fg); }
.ans { width: 100%; min-height: 32px; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); cursor: pointer; text-align: left; }
.ans:hover { background: var(--color-bg-hover); }
.ans-k { color: var(--color-fg-muted); font-size: 12px; }
.ans-v { min-width: 0; overflow-wrap: anywhere; }
.ans-e { color: var(--color-fg-faint); font-size: 12px; display: inline-flex; gap: var(--sp-2); align-items: center; }
.ans.owed { border-color: var(--color-danger); }
.owed-tag { color: var(--color-danger); font-size: 11px; font-weight: 600; }
.pre-tag { color: var(--color-fg-muted); font-size: 11px; }
.q { border: 1px solid var(--color-accent); border-radius: var(--radius-lg); background: var(--color-bg-elevated); box-shadow: var(--shadow-1); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.q-title { font-size: 16px; font-weight: 600; margin: 0; }
.q-hint { color: var(--color-fg-muted); margin: calc(var(--sp-3) * -1) 0 0; font-size: 12px; }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: var(--sp-3); }
.q-foot .kbd { color: var(--color-fg-faint); font-size: 11px; }
.later { color: var(--color-fg-faint); font-size: 12px; padding: var(--sp-2) var(--sp-1); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field > label, .field > .lab { font-size: 12px; color: var(--color-fg-muted); }
.row { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.input { font-size: 13px; min-width: 0; }
.input.num { text-align: right; }
.w-num { width: 88px; } .w-sm { width: 64px; } .w-md { width: 160px; } .w-lg { width: 100%; max-width: 360px; }
.input.bad { border-color: var(--color-danger); }
.refusal { color: var(--color-danger); font-size: 12px; }
.warnline { color: var(--color-warn); font-size: 12px; }
.muted { color: var(--color-fg-muted); } .faint { color: var(--color-fg-faint); }
.cap { font-size: 11px; color: var(--color-fg-muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; height: var(--ctl-h); }
.stepper button { width: 28px; height: 100%; border: 0; background: transparent; cursor: pointer; }
.stepper button:hover { background: var(--color-bg-hover); }
.stepper .v { min-width: 52px; text-align: center; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); line-height: calc(var(--ctl-h) - 2px); }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 24px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); margin: 0; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-2); }
.tiles.big { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg); cursor: pointer; text-align: left; min-width: 0; }
.tile:hover { border-color: var(--color-border-strong); background: var(--color-bg-hover); }
.tile[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); background: var(--color-accent-soft); }
.tile:disabled { cursor: not-allowed; color: var(--color-fg-faint); background: var(--color-bg-muted); }
.tile-pic { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--color-bg-muted); display: grid; place-items: center; overflow: hidden; color: var(--color-fg-muted); }
.tile-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-pic svg { width: 56%; height: 70%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.tile-name { font-size: 12px; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.tile-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.tile-price.none { color: var(--color-danger); font-family: var(--font-sans); }
.tile-sub { font-size: 11px; color: var(--color-fg-faint); }
.tiles.styles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tiles.styles .tile-pic { aspect-ratio: 2 / 1; }
.tiles.opts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tiles.opts .tile { flex-direction: row; align-items: center; gap: var(--sp-3); min-height: 40px; flex-wrap: wrap; }
.tiles.opts .tile-pic { width: 44px; flex: none; aspect-ratio: 4 / 3; }
.tiles.opts .tile-pic svg { width: 80%; height: 80%; }
.set-icons { display: flex; gap: 2px; justify-content: center; }
.set-icons svg { width: 22px; height: 22px; }
.picker-bar { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--sp-2); }

/* hardware piece rows */
.pieces { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.piece { display: grid; grid-template-columns: 24px 96px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); min-height: 36px; }
.piece + .piece { border-top: 1px solid var(--color-border); }
.piece.off { color: var(--color-fg-faint); }
.piece .icon { width: 20px; height: 20px; color: var(--color-fg-muted); }
.piece-v { min-width: 0; overflow-wrap: anywhere; }
.piece-v.owed { color: var(--color-danger); }
.piece-acts { display: flex; gap: var(--sp-2); align-items: center; }
.fold { border: 0; background: transparent; padding: var(--sp-1) 0; cursor: pointer; color: var(--color-fg-muted); font-size: 12px; text-align: left; min-height: 24px; }
.notice { border: 1px solid var(--color-warn); background: var(--color-warning-soft); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); font-size: 12px; }
.notice.ok { border-color: var(--color-success); background: var(--color-success-soft); }

/* review card */
.review { border: 1px solid var(--color-success); border-radius: var(--radius-lg); background: var(--color-bg-elevated); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.review h3 { margin: 0; font-size: 15px; display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.review ul { margin: 0; padding-left: var(--sp-5); }
.review .acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── the order (right pane) ─────────────────────────────── */
.o-room { margin-bottom: var(--sp-5); }
.o-room-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--color-border-strong); }
.o-room-h b { font-size: 14px; }
.o-win { margin-top: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); overflow: hidden; }
.o-win[aria-current="true"] { border-color: var(--color-accent); }
.o-win-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--color-bg-muted); font-size: 12px; }
.o-win-h .t { font-weight: 600; }
.o-layer-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; padding: var(--sp-1) var(--sp-3); border-top: 1px solid var(--color-border); min-height: 32px; }
.o-layer-h .nm { font-weight: 600; overflow-wrap: anywhere; }
.o-cols, .o-line { display: grid; grid-template-columns: minmax(0, 1fr) 72px 44px 88px 100px 28px; gap: var(--sp-2); align-items: center; padding: 2px var(--sp-3); }
.o-cols { font-size: 11px; color: var(--color-fg-faint); padding-top: var(--sp-1); }
.o-cols span:nth-child(n+2) { text-align: right; }
.o-line { min-height: 32px; border-top: 1px solid var(--color-border); }
.o-line .nm { overflow-wrap: anywhere; min-width: 0; }
.o-line .nm small { display: block; color: var(--color-fg-faint); font-size: 11px; }
.o-line .u { font-size: 11px; color: var(--color-fg-muted); text-align: left; }
.o-line .tot { text-align: right; white-space: nowrap; }
.o-line .input { height: 26px; width: 100%; padding: 0 var(--sp-2); font-size: 12px; }
.o-line.struck .nm, .o-line.struck .tot { text-decoration: line-through; color: var(--color-fg-faint); }
.o-line.needs .input.price { border-color: var(--color-danger); }
.price-q { display: block; color: var(--color-danger); font-size: 11px; text-align: right; }
.msrp { display: block; color: var(--color-fg-faint); font-size: 11px; text-align: right; }
@keyframes flash { from { background: var(--color-accent-soft); } to { background: transparent; } }
.o-line.flash { animation: flash 1.4s var(--ease-out) 1; }
.o-sub { display: flex; justify-content: space-between; padding: var(--sp-1) var(--sp-3); font-size: 12px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border); }
.empty { color: var(--color-fg-muted); padding: var(--sp-6) 0; text-align: center; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); align-items: center; }
.total-big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; text-align: right; }
.foot-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); justify-content: flex-end; }
.win-link { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; min-height: 24px; }
.blockers { min-height: 24px; color: var(--color-danger); font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; }

/* ── dialogs (z 50) ─────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: var(--color-scrim); z-index: 50; display: grid; place-items: center; padding: var(--sp-5); }
.dlg { width: min(880px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--color-bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); border: 1px solid var(--color-border-strong); }
.dlg.sm { width: min(460px, 100%); }
.dlg-h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); }
.dlg-h h2 { margin: 0; font-size: 15px; }
.dlg-b { padding: var(--sp-4) var(--sp-5); overflow: auto; min-height: 0; }
.dlg-f { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.kiosk { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--sp-4); }
.rail { display: flex; flex-direction: column; gap: 2px; }
.rail button { text-align: left; min-height: 28px; padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-2); }
.rail button[aria-pressed="true"] { background: var(--color-accent-soft); font-weight: 600; }
.rail button:hover { background: var(--color-bg-hover); }
table.md { width: 100%; border-collapse: collapse; font-size: 12px; }
table.md th, table.md td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.md th { color: var(--color-fg-muted); font-weight: 600; font-size: 11px; }
table.md td.n { text-align: right; }
table.md .grp td { background: var(--color-bg-muted); font-weight: 600; color: var(--color-fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.working { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-3); }
.combo { position: relative; }
.combo-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30; max-height: 260px; overflow: auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 2px; }
.combo-list [role="option"] { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-3); min-height: 28px; align-items: center; }
.combo-list [role="option"][aria-selected="true"], .combo-list [role="option"]:hover { background: var(--color-bg-hover); }
.share { white-space: pre-wrap; font-size: 13px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-3); }
.toast { margin-bottom: var(--sp-3); }

/* ── print: the customer quote only ─────────────────────── */
.print-doc { display: none; }
.print-doc h1 { font-size: 18px; margin: 0 0 4px; }
.pd-meta { font-size: 12px; margin-bottom: 12px; }
.pd table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pd th, .pd td { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: 4px 6px; text-align: left; }
.pd td.n, .pd th.n { text-align: right; font-family: var(--font-mono); }
.pd .grp td { font-weight: 700; padding-top: 10px; }
.pd .tot td { font-weight: 700; font-size: 14px; border-top: 2px solid currentColor; }
.dlg .pd { color-scheme: light; background: Canvas; color: CanvasText; padding: var(--sp-5); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
@media print {
  @page { size: letter portrait; margin: 0; }
  html, body { color-scheme: light; background: Canvas !important; color: CanvasText !important; }
  #app, #layer-root { display: none !important; }
  .print-doc { display: block; padding: 14mm 12mm; }
}

/* ── phone (≤ 900 px): steps full width, the order one tap away ── */
@media (max-width: 900px) {
  .top { padding: var(--sp-2) var(--sp-3); }
  .top-note { display: none; }
  /* FIX-1: the top bar's height must not follow the draft words ("Nothing kept yet" vs "Kept on this device · 10:00 pm"):
     a height change between a press and its release moves the page under the finger. Title over one ellipsed line; the
     buttons never wrap. */
  .top-l { flex: 1 1 auto; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; }
  .top-draft { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-draft::before { content: none; }
  .top-r { flex: none; flex-wrap: nowrap; }
  .split, .split[data-view] { grid-template-columns: minmax(0, 1fr); }
  .split .pane { display: none; }
  .split[data-tab="ask"] .pane-ask, .split[data-tab="order"] .pane-order { display: flex; }
  .pane-ask { border-right: 0; }
  .phone-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); flex: none; }
  .phone-tabs button { min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
  .phone-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--color-accent); font-weight: 600; }
  .phone-tabs .num { font-size: 12px; color: var(--color-fg-muted); }
  .pane-head, .pane-body, .pane-foot { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .desk-only { display: none !important; }
  .crumb-k { display: none; }
  .crumb > button { max-width: 150px; padding: 0 var(--sp-2); }
  .phone-only { display: inline-flex; }
  .foot-acts .btn { flex: 1; }
  .foot-grid { gap: 0 var(--sp-3); }
  .btn, .input, .crumb > button, .seg > button, .stepper { min-height: 44px; }
  .stepper button { width: 44px; }
  .btn-sm { min-height: 44px; min-width: 44px; }
  .check { min-height: 44px; }
  .win-link, .blockers, .fold { min-height: 44px; }
  .ans { min-height: 44px; grid-template-columns: 88px minmax(0, 1fr) auto; }
  .tiles, .tiles.big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker-bar { grid-template-columns: minmax(0, 1fr); }
  .piece { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .piece .piece-k { grid-column: 2; font-weight: 600; }
  .piece .piece-v { grid-column: 2 / 4; }
  .piece .piece-acts { grid-column: 3; grid-row: 1; }
  .o-cols { display: none; }
  .o-line { grid-template-columns: minmax(0, 1fr) 64px 84px 44px; grid-template-areas: "nm nm tot x" "qty u price price"; row-gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); }
  .o-line .nm { grid-area: nm; } .o-line .q-cell { grid-area: qty; } .o-line .u { grid-area: u; } .o-line .p-cell { grid-area: price; } .o-line .tot { grid-area: tot; } .o-line .x { grid-area: x; }
  .o-line .input { height: 44px; }
  .kiosk { grid-template-columns: minmax(0, 1fr); }
  .rail { flex-direction: row; overflow-x: auto; }
  .rail button { white-space: nowrap; min-height: 44px; }
  .scrim { padding: 0; }
  .dlg, .dlg.sm { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .menu button { min-height: 44px; }
  .top-r .btn .lbl { display: none; }
}
/* LIVE PORT (2026-09-29): stock chips from the live shop (kit/live-catalogue.js) */
.tile .sj-stock { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.combo-list .opt-r { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.o-line .nm .sj-short { vertical-align: 1px; }
.ol-h { font-size: 13px; margin: var(--sp-5) 0 var(--sp-2); }
.dlg-b .sj-orderlines { min-width: 0; max-width: 100%; }
/* the order-form table is wide: keep the dialog to the screen and let the table scroll inside it (was: the grid track grew to the table) */
.scrim { grid-template-columns: minmax(0, 1fr); }
.dlg { min-width: 0; }