/* estimator-v4 · A · Accordion stepper. Colours ONLY through kit/tokens.css variables. z values used: 30 (inline lists) only;
   dialogs use the browser top layer (<dialog>.showModal) so they need no z value. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; font-size: 13px; line-height: 1.35; }
button { font: inherit; color: inherit; }
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.btn-sm { height: var(--ctl-h); padding: 0 var(--sp-3); font-size: 12px; border-radius: var(--radius-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-ghost { border-color: transparent; background-color: transparent; }
.btn-danger { color: var(--color-danger); }
.input { height: var(--ctl-h); min-width: 0; font-size: 13px; border-radius: var(--radius-sm); }
.input.num { text-align: right; }
.input.owed, .combo.owed .input { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
select.input { padding-right: var(--sp-2); }
.muted { color: var(--color-fg-muted); }
.faint { color: var(--color-fg-faint); }
.cap { font-size: 11px; color: var(--color-fg-muted); }
.owed-text { color: var(--color-danger); font-size: 11px; }
.warn-text { color: var(--color-warn); font-size: 11px; }
.hidden { display: none !important; }

/* ── app frame ── */
.app { display: grid; grid-template-rows: auto auto 1fr; height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.tb-left, .tb-right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.tb-title { font-size: 15px; }
.tb-note { font-size: 12px; color: var(--color-fg-muted); }
.tb-draft { font-size: 11px; color: var(--color-fg-faint); white-space: nowrap; }
/* FIX-1: the save note changes length on every edit ("Saving…" ↔ "Saved on this device · 6:52 pm"); if it can change
   whether the top bar wraps, everything below jumps under the finger between press and release and the tap is lost. */
.mtabs { display: none; }
.panes { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 0; }
.app[data-view="est"] .panes { grid-template-columns: minmax(0, 1fr) 0; }
.app[data-view="est"] .pane-order { display: none; }
.app[data-view="order"] .panes { grid-template-columns: 0 minmax(0, 1fr); }
.app[data-view="order"] .pane-est { display: none; }
.pane { min-height: 0; min-width: 0; }
.pane-est { overflow: auto; padding: var(--sp-4); border-right: 1px solid var(--color-border); }
.pane-order { display: flex; flex-direction: column; background: var(--color-bg-elevated); }
.order-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4); }
.order-foot { border-top: 1px solid var(--color-border-strong); padding: var(--sp-3) var(--sp-4); background: var(--color-bg-elevated); }

/* ── segmented + chips ── */
.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-input-bg); flex-wrap: wrap; }
.seg > button { height: calc(var(--ctl-h) - 2px); padding: 0 var(--sp-3); border: 0; border-right: 1px solid var(--color-border); background: transparent; cursor: pointer; font-size: 12px; white-space: nowrap; }
.seg > button:last-child { border-right: 0; }
.seg > button[aria-checked="true"] { background: var(--color-fg); color: var(--color-bg); }
.seg > button[disabled] { color: var(--color-fg-faint); cursor: not-allowed; }
.seg-sm > button { padding: 0 var(--sp-2); }

/* ── frame strip: rooms / windows / layers ── */
.frame { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); margin-bottom: var(--sp-4); }
.frow { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); }
.frow:last-child { border-bottom: 0; }
.frow-label { flex: 0 0 64px; font-size: 11px; color: var(--color-fg-muted); padding-top: 7px; text-transform: uppercase; letter-spacing: .04em; }
.frow-items { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; flex: 1; align-items: center; }
.tab { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-h); padding: 2px var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); cursor: pointer; font-size: 12px; max-width: 100%; text-align: left; }
.tab[aria-selected="true"] { border-color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-fg); background: var(--color-bg-elevated); }
.tab .num { font-size: 11px; color: var(--color-fg-muted); }
.tab-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-fg-muted); }
.tab-x:hover { background: var(--color-bg-hover); color: var(--color-fg); }
.dots { display: inline-flex; gap: 3px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); }
.dot.ok { background: var(--color-success); }
.dot.owed { background: var(--color-danger); }
.add { border-style: dashed; color: var(--color-fg-muted); }
.room-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* window size editor */
.win-ed { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--color-border); background: var(--color-bg); }
.win-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--color-border); }
.win-row:last-of-type { border-bottom: 0; }
.fld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fld > span { font-size: 11px; color: var(--color-fg-muted); }
.w-name { width: 110px; } .w-type { width: 120px; } .w-num { width: 70px; } .w-parts { width: 44px; }
.widths { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; }
.width-cell { display: flex; align-items: flex-end; gap: 2px; }
.win-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding-top: var(--sp-2); }
.margins { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; }

/* ── the accordion stepper ── */
.layer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-2); flex-wrap: wrap; }
.layer-head h2 { font-size: 14px; margin: 0; }
.covers { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--sp-2); border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: 12px; background: var(--color-bg-elevated); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.step { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.step[data-open="true"] { border-color: var(--color-border-strong); box-shadow: var(--shadow-1); }
.step-head { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: 40px;
  padding: var(--sp-2) var(--sp-3); background: transparent; border: 0; cursor: pointer; text-align: left; border-radius: var(--radius-md); }
.step-head:hover { background: var(--color-bg-hover); }
.step-no { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  border: 1px solid var(--color-border-strong); color: var(--color-fg-muted); font-family: var(--font-mono); }
.step[data-open="true"] .step-no { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.step[data-state="done"] .step-no { border-color: var(--color-success); color: var(--color-success); }
.step[data-state="owed"] .step-no { border-color: var(--color-danger); color: var(--color-danger); }
.step-title { font-weight: 600; font-size: 13px; white-space: nowrap; }
.step-sum { color: var(--color-fg-muted); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.step[data-open="true"] .step-sum { display: none; }
.step-flag { font-size: 11px; white-space: nowrap; }
.step-body { padding: 0 var(--sp-4) var(--sp-3) calc(26px + var(--sp-3) + var(--sp-3)); display: none; }
.step[data-open="true"] .step-body { display: block; }
.q { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-2) 0; border-top: 1px solid var(--color-border); }
.q:first-child { border-top: 0; }
.q > label, .q > .ql { font-size: 12px; color: var(--color-fg-muted); padding-top: 6px; }
.qa { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-width: 0; }
.qa-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.step-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); margin-top: var(--sp-2); }
.picked { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.picked img, .picked .noimg { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--color-border); flex: 0 0 44px; }
.picked .ptxt { min-width: 0; overflow-wrap: anywhere; }
.stepper-n { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.stepper-n button { width: var(--ctl-h); height: calc(var(--ctl-h) - 2px); border: 0; background: var(--color-bg); cursor: pointer; }
.stepper-n input { width: 56px; height: calc(var(--ctl-h) - 2px); border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; background: var(--color-input-bg); color: var(--color-fg); }
.working-strip { font-size: 12px; padding: var(--sp-2) var(--sp-3); background: var(--color-bg-muted); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
pre.working { font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-3); margin: var(--sp-2) 0 0; max-height: 320px; overflow: auto; }

/* tiles (kiosk style, used inline for styles / rings / sets and inside the picture picker) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-2); width: 100%; }
.tiles.sm { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; 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-height: 44px; min-width: 0; }
.tile:hover { border-color: var(--color-border-strong); background: var(--color-bg-hover); }
.tile[aria-pressed="true"] { border-color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-fg); }
.tile .pic { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; color: var(--color-fg-muted); }
.tile .pic svg { width: 56%; height: 70%; }
.tile .tname { font-size: 12px; overflow-wrap: anywhere; }
.tile .tsub { font-size: 11px; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.tile .tprice { font-size: 12px; }
.tile.set { min-height: 64px; }
.tile.row { flex-direction: row; align-items: center; }
.tile.row .pic { width: 40px; flex: 0 0 40px; aspect-ratio: 1; }

/* hardware piece rows */
.hw { display: grid; grid-template-columns: 22px 98px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 4px 0; border-top: 1px dashed var(--color-border); }
.hw:first-child { border-top: 0; }
.hw .hwl { font-size: 12px; overflow-wrap: anywhere; }
.hw.off .hwl, .hw.off .combo { opacity: .55; }
.cb { width: 16px; height: 16px; margin: 0; accent-color: var(--color-fg); }
.cbwrap, .lbl-cb { cursor: pointer; }
.cbwrap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.win-fold { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lbl-cb { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 12px; min-height: 24px; cursor: pointer; }
details.more > summary { cursor: pointer; font-size: 12px; color: var(--color-fg-muted); padding: 4px 0; min-height: 24px; }

/* combobox */
.combo { position: relative; flex: 1; min-width: 150px; max-width: 360px; display: flex; gap: 4px; }
.combo .input { flex: 1; width: 100%; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; max-height: 280px; overflow: auto; background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); min-width: 260px; }
.opt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 4px var(--sp-2); cursor: pointer; font-size: 12px; min-height: 30px; }
.opt[aria-selected="true"], .opt:hover { background: var(--color-bg-hover); }
.opt .oimg { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; background: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; color: var(--color-fg-muted); }
.opt .oimg svg { width: 20px; height: 20px; }
.opt .otxt { min-width: 0; overflow-wrap: anywhere; }
.opt-empty { padding: var(--sp-3); font-size: 12px; color: var(--color-fg-muted); }

.warns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.wchip { font-size: 11px; padding: 2px var(--sp-2); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-fg); overflow-wrap: anywhere; }
.pchip { font-size: 11px; padding: 2px var(--sp-2); border-radius: var(--radius-sm); background: var(--color-bg-muted); color: var(--color-fg-muted); }
.notice { font-size: 12px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--color-bg-muted); border-left: 3px solid var(--color-border-strong); margin: var(--sp-2) 0; }
.notice.bad { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.empty { padding: var(--sp-6); text-align: center; color: var(--color-fg-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.empty h3 { color: var(--color-fg); margin: 0 0 var(--sp-2); font-size: 14px; }
.layer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); align-items: center; }
.xform { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; padding: var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.xlist { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.xrow { display: grid; grid-template-columns: minmax(0, 1fr) 56px auto 28px; gap: var(--sp-2); align-items: center; font-size: 12px; }
.xrow .xn { overflow-wrap: anywhere; }

/* ── the order (right pane) ── */
.o-room { margin-bottom: var(--sp-4); }
.o-room-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 2px solid var(--color-border-strong); }
.o-room-h h3 { margin: 0; font-size: 14px; }
.o-group { margin: var(--sp-2) 0 var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; }
.o-group[data-current="true"] { border-color: var(--color-border-strong); }
.o-group-h { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: 12px; background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border); cursor: pointer; }
.o-group-h .eyebrow { color: var(--color-fg-muted); overflow-wrap: anywhere; min-width: 0; }
.o-layer-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3) 4px; }
.o-layer-h .input { height: 26px; font-weight: 600; border-color: transparent; background: transparent; padding: 0 4px; }
.o-layer-h .input:hover, .o-layer-h .input:focus { border-color: var(--color-border-strong); background: var(--color-input-bg); }
.lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lines th { font-size: 11px; font-weight: 500; color: var(--color-fg-muted); text-align: right; padding: 2px var(--sp-2); }
.lines th:first-child { text-align: left; padding-left: var(--sp-3); }
.lines td { padding: 3px var(--sp-2); border-top: 1px solid var(--color-border); vertical-align: top; font-size: 12px; }
.lines td:first-child { padding-left: var(--sp-3); }
.lines col.c-qty { width: 62px; } .lines col.c-u { width: 50px; } .lines col.c-p { width: 88px; } .lines col.c-t { width: 104px; } .lines col.c-x { width: 32px; }
.lines .lname { overflow-wrap: anywhere; line-height: 1.3; padding-top: 5px; }
.lines .lname .cap { display: block; }
.lines .input { height: 26px; width: 100%; font-size: 12px; padding: 0 4px; }
.lines td.u { color: var(--color-fg-muted); font-size: 11px; text-align: left; padding-top: 7px; overflow-wrap: anywhere; }
.lines td.t { text-align: right; padding-top: 6px; white-space: nowrap; }
.lines tr.hl td { background: var(--color-info-soft); }
.lines tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--color-info); }
.lines tr.struck td { color: var(--color-fg-faint); }
.lines tr.struck .lname { text-decoration: line-through; }
.lines .needs { color: var(--color-danger); font-size: 11px; display: block; }
.lines .input.needs-in { border-color: var(--color-danger); }
.addline { padding: 4px var(--sp-3) var(--sp-2); }
.addline .combo { max-width: none; }
.o-sub { display: flex; justify-content: space-between; padding: 4px var(--sp-3); font-size: 12px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.total { display: flex; align-items: baseline; gap: var(--sp-2); }
.total .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-fg-muted); }
.total .num { font-size: 20px; font-weight: 600; }
.foot-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.blockers { font-size: 12px; color: var(--color-danger); margin-bottom: 4px; }
.foot-msg { font-size: 12px; color: var(--color-fg-muted); margin-top: 4px; min-height: 16px; }

/* dialogs (top layer) */
.dlg { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: 0; background: var(--color-bg-elevated); color: var(--color-fg);
  width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow-3); }
.dlg::backdrop { background: var(--color-scrim); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); }
.dlg-body { padding: var(--sp-4); overflow: auto; max-height: calc(100vh - 110px); }
.kiosk { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-3); }
.krail { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.krail button { text-align: left; border: 0; background: transparent; padding: 4px var(--sp-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; min-height: 26px; }
.krail button[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); }
.ktiles { max-height: 60vh; overflow: auto; }
.md-table { width: 100%; border-collapse: collapse; }
.md-table th, .md-table td { padding: 4px var(--sp-2); border-top: 1px solid var(--color-border); font-size: 12px; text-align: left; vertical-align: middle; }
.md-table th { color: var(--color-fg-muted); font-weight: 500; }
.md-table h4 { margin: var(--sp-3) 0 0; font-size: 12px; }
.mine-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-info); margin-left: 4px; vertical-align: middle; }
.ptree { font-size: 12px; }
.ptree details { margin-left: var(--sp-4); }
.ptree summary { display: flex; justify-content: space-between; gap: var(--sp-3); cursor: pointer; padding: 2px 0; }
.doc-lines { width: 100%; border-collapse: collapse; }
.doc-lines td, .doc-lines th { padding: 3px 6px; border-bottom: 1px solid var(--color-border); font-size: 12px; text-align: right; }
.doc-lines td:first-child, .doc-lines th:first-child { text-align: left; }
.sendtext { width: 100%; min-height: 220px; font-family: var(--font-sans); font-size: 12px; background: var(--color-input-bg); color: var(--color-fg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--sp-3); }
.print-doc { display: none; }
.phone-only, .u-inline { display: none; }

/* ── narrow desk and phone ── */
@media (max-width: 1023px) {
  .app { height: auto; min-height: 100vh; display: block; }
  .desk-only { display: none !important; }
  .panes { display: block; }
  .pane-est { border-right: 0; overflow: visible; padding: var(--sp-3); }
  .pane-order { display: block; }
  .order-scroll { overflow: visible; padding: var(--sp-3); }
  .order-foot { position: sticky; bottom: 0; }
  .mtabs { display: grid; grid-template-columns: 1fr 1fr; position: sticky; top: 0; z-index: 30; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-strong); }
  .mtabs button { min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; }
  .mtabs button[aria-pressed="true"] { border-bottom-color: var(--color-fg); font-weight: 600; }
  .app[data-mpane="est"] .pane-order { display: none; }
  .app[data-mpane="order"] .pane-est { display: none; }
  .tb-note { display: none; }
}
@media (max-width: 640px) {
  .topbar { padding: var(--sp-2) var(--sp-3); }
  .tb-left { flex: 1 0 100%; flex-wrap: nowrap; overflow: hidden; } /* FIX-1: always two rows on a phone, never 1↔2 */
  .tb-draft { overflow: hidden; text-overflow: ellipsis; }
  .tb-right .btn-sm { min-height: 44px; }
  .tb-extra { display: none !important; }
  .phone-only { display: inline-flex; }
  .u-inline { display: block; text-align: right; }
  .lines th.u, .lines td.u { padding: 0; font-size: 0; overflow: hidden; } /* FIX-1: keep the cell in the grid (display:none shifted price into the unit column and squeezed it); the unit shows under the qty */
  .lines col.c-u { width: 0; }
  .btn, .input, .seg > button, .tab, .chip, .tile, .step-head, .krail button, .tab-x { min-height: 44px; }
  .seg > button { height: auto; min-height: 42px; }
  .tab-x { min-width: 44px; }
  .q { grid-template-columns: 1fr; gap: 4px; }
  .q > label, .q > .ql { padding-top: 0; }
  .step-body { padding: 0 var(--sp-3) var(--sp-3); }
  .step-head { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .step-head .step-sum { grid-column: 2 / -1; }
  .frow { flex-direction: column; gap: 4px; }
  .frow-label { flex: none; padding-top: 0; }
  .hw { grid-template-columns: 44px minmax(0, 1fr); }
  .hw > .qa { grid-column: 1 / -1; flex-wrap: nowrap; }
  .hw > .qa .combo { flex: 1; }
  .hw.sub > .qa-col { grid-column: 1 / -1; }
  .hw.sub > span:empty { display: none; }
  .hw .hwp { grid-column: 1 / -1; }
  .cb { width: 22px; height: 22px; }
  .cbwrap, .lbl-cb { min-width: 44px; min-height: 44px; }
  .combo { min-width: 0; max-width: none; width: 100%; }
  .combo-list { min-width: 0; }
  .kiosk { grid-template-columns: 1fr; }
  /* LIVE-PORT: the live shop has ~60 fabric types; a wrapping rail filled the whole phone dialog → one scrolling row */
  .krail { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .krail button { flex: 0 0 auto; white-space: nowrap; }
  .lines col.c-u { width: 0; } .lines col.c-p { width: 84px; } /* FIX-1: the unit column is hidden on a phone (unit shows under the qty); a 40 px phantom column squeezed the price box to "187" for Rs 1,875 */ .lines col.c-t { width: 72px; } .lines col.c-qty { width: 54px; } .lines col.c-x { width: 44px; }
  .lines .input { height: 44px; }
  .o-layer-h { grid-template-columns: minmax(0, 1fr) auto; }
  .o-layer-h .lh-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .xrow { grid-template-columns: minmax(0, 1fr) 56px 44px; }
  .xrow .t { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

@media print {
  body > *:not(#print-doc) { display: none !important; }
  #print-doc { display: block !important; color: black; }
  html, body { background: white; }
}

/* LIVE-PORT (2026-09-29): live stock chips (kit/live-catalogue.js) sit inside tiles, search rows and order lines without stretching */
.tile .sj-stock { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.opt .sj-stock { margin-top: 2px; }
.lines .lname .sj-short { margin-left: 4px; vertical-align: 1px; }
.dlg-body .sj-orderlines { margin: var(--sp-3) 0; }