/* Estimator v4 · variation B · Kiosk wizard. Colours only through kit/tokens.css variables.
   z values used: 30 (inline listboxes) · 50 (dialogs / drawers). Nothing floats over content. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { font-size: 13px; line-height: 1.35; overflow: hidden; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: var(--color-fg); }
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-width: 0; }
:root { --pad: 12px; --tile-min: 136px; --rail-w: 150px; }

/* ── top bar ─────────────────────────────────────────── */
.top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--pad); min-height: 44px;
  border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); flex-wrap: wrap; }
.top h1 { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; }
.top .note { color: var(--color-fg-muted); font-size: 12px; min-width: 0; }
/* FIX-1 (2026-09-29): the save note changes length on every edit ("Saving…" <-> "Saved on this device · 6:52 pm"); at 1024 px that
   flipped the wrapping top bar between 1 and 2 rows (44 <-> 77 px) inside a press, moving the page under the pointer. The quote note now
   takes only the leftover room on one line (ellipsis) and the save note keeps one width, so the bar's row count never depends on them. */
.top .note { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .draft { flex: none; min-width: 15.5em; }
.top .draft { color: var(--color-fg-faint); font-size: 12px; white-space: nowrap; }
.top .spacer { flex: 1; }
.top .grp { display: flex; gap: var(--sp-1); align-items: center; }
.ib { height: var(--ctl-h); min-width: var(--ctl-h); padding: 0 var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
  background-color: var(--color-bg-elevated); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); white-space: nowrap; }
.ib:hover:not(:disabled) { background-color: var(--color-bg-hover); }
.ib:disabled { opacity: .45; cursor: not-allowed; }
.ib[aria-pressed="true"] { background-color: var(--color-accent-soft); border-color: var(--color-accent); }
.ib.ghost { border-color: transparent; background-color: transparent; }
.ib.danger { color: var(--color-danger); }
.ib svg { width: 16px; height: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-lg { height: 36px; padding: 0 var(--sp-5); font-weight: 600; }

/* ── split ───────────────────────────────────────────── */
.main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
.main.v-est { grid-template-columns: minmax(0, 1fr) 36px; }
.main.v-ord { grid-template-columns: 36px minmax(0, 1fr); }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg); }
.left { border-right: 1px solid var(--color-border-strong); }
.collapsed-rail { display: flex; align-items: flex-start; justify-content: center; padding-top: var(--sp-3); }
.collapsed-rail .ib { writing-mode: vertical-rl; height: auto; padding: var(--sp-3) 0; min-width: 28px; }
.mbar { display: none; }

/* ── frame (rooms / windows / layers) ────────────────── */
.frame { padding: var(--sp-3) var(--pad) var(--sp-2); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); display: grid; gap: var(--sp-2); }
.frow { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.flabel { width: 64px; flex: none; font-size: 11px; color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.tabs { display: flex; gap: var(--sp-1); overflow-x: auto; min-width: 0; flex: 1; position: relative; scrollbar-width: thin; padding-bottom: 1px; }
.tab { height: var(--ctl-h); padding: 0 var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg);
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; white-space: nowrap; flex: none; }
.tab:hover { background: var(--color-bg-hover); }
.tab[aria-selected="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); font-weight: 600; }
.tab .sub { color: var(--color-fg-muted); font-weight: 400; font-size: 12px; }
.tab.add { border-style: dashed; color: var(--color-fg-muted); }
.dots { display: inline-flex; gap: 2px; }
.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); }
.factions { display: flex; gap: var(--sp-1); flex: none; }
.weditor { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, max-content)); gap: var(--sp-2) var(--sp-3); align-items: end;
  padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.fld { display: grid; gap: 2px; min-width: 0; }
.fld > span { font-size: 11px; color: var(--color-fg-muted); }
.fld .input, .fld select { height: var(--ctl-h); width: 100%; }
.input.n { width: 84px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
select.input { padding-right: var(--sp-2); }
.widths { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: end; grid-column: 1 / -1; }
.wcell { display: flex; gap: var(--sp-1); align-items: end; padding: var(--sp-1); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.weditor .wfoot { grid-column: 1 / -1; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── step bar ────────────────────────────────────────── */
.stepbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.stepbtn { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3);
  border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; text-align: left; min-width: 0; min-height: 48px; }
.stepbtn:hover { background: var(--color-bg-hover); }
.stepbtn[aria-current="step"] { border-bottom-color: var(--color-accent); background: var(--color-bg); }
.stepbtn .n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.stepbtn.ok .n { background: var(--color-success); border-color: var(--color-success); color: var(--color-bg-elevated); }
.stepbtn.owed .n { border-color: var(--color-danger); color: var(--color-danger); }
.stepbtn .t { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.stepbtn .s { font-size: 11px; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.stepbtn.owed .s { color: var(--color-danger); }

/* ── step body ───────────────────────────────────────── */
.stepbody { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.stepbody.norail { grid-template-columns: minmax(0, 1fr); }
.rail { border-right: 1px solid var(--color-border); overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; background: var(--color-bg-elevated); position: relative; }
.rail .rh { font-size: 11px; color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: .04em; padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.ritem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1); align-items: center; min-height: 30px; padding: var(--sp-1) var(--sp-2);
  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left; }
.ritem:hover { background: var(--color-bg-hover); }
.ritem[aria-current="true"] { background: var(--color-accent-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent); }
.ritem .c { font-size: 11px; color: var(--color-fg-muted); font-family: var(--font-mono); }
.ritem .v { grid-column: 1 / -1; font-size: 11px; color: var(--color-fg-muted); font-weight: 400; overflow-wrap: anywhere; }
.ritem.owed .v { color: var(--color-danger); }
.ritem.off { color: var(--color-fg-faint); }
.sb > * { flex-shrink: 0; }
.sb { overflow-y: auto; padding: var(--pad); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.sh { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sh h2 { font-size: 15px; margin: 0; }
.sh .hint { color: var(--color-fg-muted); font-size: 12px; }
.search { position: relative; flex: 1; min-width: 180px; max-width: 420px; }
.search .input { width: 100%; padding-left: 28px; }
.search svg { position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--color-fg-faint); pointer-events: none; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: var(--sp-3); }
.tile { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); cursor: pointer; overflow: hidden; min-width: 0; box-shadow: var(--shadow-card); position: relative; }
.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 2px var(--color-accent); }
.tile .pic { aspect-ratio: 4 / 3; background: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; color: var(--color-fg-muted); }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .pic svg { width: 56%; height: 56%; }
.tile .meta { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: grid; gap: 2px; }
.tile .nm { font-weight: 600; overflow-wrap: anywhere; }
.tile .cd { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.tile .pr { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.tile .pr.owed { color: var(--color-danger); }
.tile .tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-fg);
  display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.tile[aria-pressed="true"] .tick { display: inline-flex; }
.tiles.big { --tile-min: 150px; }
.tiles.small { --tile-min: 120px; }
.tiles.small .tile .pic { aspect-ratio: 2 / 1; }
.more { align-self: flex-start; }

/* chosen card + form */
.chosen { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3);
  border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.chosen .thumb { width: 72px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; color: var(--color-fg-muted); }
.chosen .thumb img { width: 100%; height: 100%; object-fit: cover; }
.chosen .thumb svg { width: 60%; height: 60%; }
.chosen .nm { font-weight: 600; overflow-wrap: anywhere; }
.chosen .cap { font-size: 12px; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.form { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
.form > .lbl { color: var(--color-fg-muted); font-size: 12px; }
.form > .ctl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.form > .full { grid-column: 1 / -1; }
.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; flex-wrap: wrap; }
.seg button { height: var(--ctl-h); padding: 0 var(--sp-3); border: 0; border-right: 1px solid var(--color-border); background: var(--color-bg-elevated); cursor: pointer; white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button[aria-checked="true"] { background: var(--color-accent-soft); color: var(--color-fg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); }
.seg button:disabled { color: var(--color-fg-faint); cursor: not-allowed; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.stepper button { width: var(--ctl-h); height: var(--ctl-h); border: 0; background: var(--color-bg-elevated); cursor: pointer; font-size: 15px; }
.stepper output { min-width: 52px; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sw { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-height: 24px; }
.sw input { width: 16px; height: 16px; accent-color: var(--color-accent); margin: 0; }
.cap { font-size: 12px; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.cap.warn { color: var(--color-warn); }
.cap.bad { color: var(--color-danger); }
.owedbox { outline: 2px solid var(--color-danger); outline-offset: 1px; border-radius: var(--radius-sm); }
.strip { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.subtabs { display: inline-flex; gap: var(--sp-1); }
pre.work { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: var(--sp-3);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.notice { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-fg); font-size: 12px; overflow-wrap: anywhere; }
.notice.info { background: var(--color-info-soft); }
.notice.bad { background: var(--color-danger-soft); }
.empty { display: grid; gap: var(--sp-4); align-content: start; }
.empty h2 { margin: 0; font-size: 17px; }
.card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.review { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; }
.review .n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--color-border-strong); }
.review .n.ok { background: var(--color-success); border-color: var(--color-success); color: var(--color-bg-elevated); }
.review .n.owed { border-color: var(--color-danger); color: var(--color-danger); }

/* combobox */
.combo { position: relative; min-width: 200px; flex: 1; max-width: 380px; }
.combo .input { width: 100%; }
.combo .lb { position: absolute; left: 0; right: 0; top: calc(100% + 2px); bottom: auto; z-index: 30; max-height: 240px; overflow-y: auto; background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 2px; }
.combo .opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: 4px; cursor: pointer; min-height: 26px; align-items: center; }
.combo .opt[aria-selected="true"], .combo .opt:hover { background: var(--color-bg-hover); }
.combo .opt .nm { overflow-wrap: anywhere; }

/* step foot */
.stepfoot { border-top: 1px solid var(--color-border); background: var(--color-bg-elevated); padding: var(--sp-2) var(--pad); display: grid; gap: var(--sp-2); }
.checks { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.chip { font-size: 11px; padding: 2px var(--sp-2); border-radius: 999px; background: var(--color-warning-soft); overflow-wrap: anywhere; max-width: 100%; }
.chip.parked { background: var(--color-bg-muted); color: var(--color-fg-muted); }
.chip.bad { background: var(--color-danger-soft); color: var(--color-danger); }
.navrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.navrow .sum { font-size: 12px; color: var(--color-fg-muted); overflow-wrap: anywhere; text-align: center; }

/* ── right pane: the order ───────────────────────────── */
.rhead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--pad); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); min-height: 44px; flex-wrap: wrap; }
.rbody { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pad); container-type: inline-size; display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--sp-3); }
.oroom { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); overflow: hidden; }
.oroom > .hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--color-bg-raised); font-weight: 600; }
.owin > .hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--color-border); font-weight: 600; font-size: 12px; }
.owin > .hd .cap { font-weight: 400; }
.olayer { border-top: 1px dashed var(--color-border); }
.olayer.sel { background: var(--color-accent-soft); }
.olayer > .hd { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-5); font-size: 12px; }
.olayer > .hd .nm { font-weight: 600; overflow-wrap: anywhere; }
.ohead, .oline { display: grid; grid-template-columns: minmax(0, 1fr) 92px 88px 104px 28px; gap: var(--sp-2); align-items: center; padding: 3px var(--sp-3) 3px var(--sp-5); }
.ohead { font-size: 11px; color: var(--color-fg-faint); text-transform: uppercase; letter-spacing: .03em; }
.ohead > :not(:first-child), .oline .tot { text-align: right; }
.oline { min-height: 30px; border-top: 1px solid var(--color-border); }
.oline .nm { overflow-wrap: anywhere; min-width: 0; }
.oline .nm .kind { font-size: 11px; color: var(--color-fg-muted); margin-right: var(--sp-1); }
.oline .nm .code { font-family: var(--font-mono); font-size: 12px; }
.oline .nm .sub { display: block; font-size: 11px; color: var(--color-fg-muted); }
.oline .qty { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.oline .qty .input { width: 62px; height: 26px; padding: 0 4px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.oline .qty .u { font-size: 11px; color: var(--color-fg-muted); width: 24px; }
.oline .pr .input { width: 100%; height: 26px; padding: 0 4px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.oline .pr .msrp { display: block; white-space: nowrap; font-size: 11px; color: var(--color-fg-faint); text-align: right; font-family: var(--font-mono); }
.oline.owed .pr .input { border-color: var(--color-danger); background: var(--color-danger-soft); }
.oline .flag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--color-danger); }
.oline .tot { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oline.struck .nm, .oline.struck .tot { text-decoration: line-through; color: var(--color-fg-faint); }
.oline .x { width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: var(--color-fg-muted); }
.oline .x:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.oline.flash { animation: flash 900ms var(--ease-out); }
@keyframes flash { from { background: var(--color-accent-soft); } to { background: transparent; } }
.subtot { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-1) var(--sp-3); font-size: 12px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border); }
.subtot .num { color: var(--color-fg); }
@container (max-width: 470px) {
  .ohead { display: none; }
  .oline { grid-template-columns: minmax(0, 1fr) 84px 28px; grid-template-areas: "nm nm x" "qty pr tot"; padding-left: var(--sp-3); row-gap: 2px; }
  .oline .nm { grid-area: nm; } .oline .qty { grid-area: qty; justify-content: flex-start; } .oline .pr { grid-area: pr; } .oline .tot { grid-area: tot; grid-column: 3 / 4; }
  .oline { grid-template-columns: minmax(0, 1fr) 96px 84px; grid-template-areas: "nm nm x" "qty pr tot"; }
  .oline .x { grid-area: x; justify-self: end; }
  .olayer > .hd, .owin > .hd { padding-left: var(--sp-3); }
}
.rfoot { border-top: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); padding: var(--sp-2) var(--pad); display: grid; gap: var(--sp-2); }
.totrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3); }
.totrow .lbl { font-size: 12px; color: var(--color-fg-muted); }
.totrow .big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }
.blk { color: var(--color-danger); font-size: 12px; overflow-wrap: anywhere; }
.acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.acts .btn { flex: 1 1 auto; }
.btn.redtxt { color: var(--color-danger); border-color: var(--color-danger); }
.ptree details { border-top: 1px solid var(--color-border); }
.ptree summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); cursor: pointer; }
.ptree summary .nm { overflow-wrap: anywhere; }
.ptree .lv1 { padding-left: var(--sp-4); } .ptree .lv2 { padding-left: var(--sp-6); } .ptree .lv3 { padding-left: 32px; }
.ptree .leaf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-3); padding: 2px var(--sp-2) 2px 40px; font-size: 12px; }

/* ── dialogs (z 50) ──────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: var(--color-scrim); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 5vh var(--sp-4); overflow-y: auto; }
.dlg { background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  width: min(760px, 100%); display: flex; flex-direction: column; max-height: 90vh; }
.dlg.wide { width: min(980px, 100%); }
.dlg > header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); }
.dlg > header h2 { margin: 0; font-size: 15px; flex: 1; }
.dlg > .bd { padding: var(--sp-4); overflow-y: auto; display: grid; gap: var(--sp-3); }
.dlg > footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border); display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
table.md { width: 100%; border-collapse: collapse; font-size: 12px; }
table.md th { text-align: left; font-size: 11px; color: var(--color-fg-muted); font-weight: 500; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--color-border); }
table.md td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.md td.nm { overflow-wrap: anywhere; }
table.md .grp td { background: var(--color-bg-raised); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
table.md .input { height: 26px; width: 100%; max-width: 180px; }
.mine-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); margin-left: var(--sp-1); vertical-align: middle; }
.quotelist { display: grid; gap: var(--sp-2); }
.qitem { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.share { white-space: pre-wrap; font-family: var(--font-sans); background: var(--color-success-soft); padding: var(--sp-3); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.menu { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; bottom: auto; min-width: 200px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 2px; display: grid; }
.menu button { text-align: left; border: 0; background: transparent; padding: var(--sp-2) var(--sp-3); border-radius: 4px; cursor: pointer; min-height: 28px; }
.menu button:hover, .menu button:focus-visible { background: var(--color-bg-hover); }
.anchor { position: relative; display: inline-flex; }

/* ── printable quote document ────────────────────────── */
.printdoc { display: none; }
.pdoc { background: var(--color-bg-elevated); color: var(--color-fg); font-family: var(--font-sans); padding: 14mm 12mm; max-width: 820px; margin: 0 auto; }
.pdoc h1 { font-size: 20px; margin: 0 0 4px; }
.pdoc .muted { color: var(--color-fg-muted); font-size: 12px; }
.pdoc table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.pdoc th, .pdoc td { padding: 4px 6px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.pdoc td.r, .pdoc th.r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pdoc .rm td { font-weight: 700; background: var(--color-bg-raised); }
.pdoc .wn td { font-weight: 600; }
.pdoc .tt td { font-weight: 700; font-size: 14px; border-top: 2px solid var(--color-fg); }
.dlg .pdocwrap { background: var(--color-bg-muted); padding: var(--sp-3); border-radius: var(--radius-sm); }
@media print {
  @page { size: letter portrait; margin: 0; }
  html, body { background: var(--color-bg-elevated) !important; overflow: visible !important; height: auto !important; }
  .app, .layer-root { display: none !important; }
  .printdoc { display: block !important; }
}

/* ── phone / tablet (< 1024): one pane at a time, total bar always visible ── */
@media (max-width: 1023px) {
  :root { --pad: 10px; --tile-min: 104px; --rail-w: 0px; }
  .main, .main.v-est, .main.v-ord { grid-template-columns: minmax(0, 1fr); }
  .main[data-mpane="est"] .right, .main[data-mpane="ord"] .left { display: none; }
  .left { border-right: 0; }
  .viewbtns { display: none !important; }
  .top .note { display: none; }
  .mbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--pad);
    border-top: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); }
  .mbar .big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; }
  .mbar .lbl { font-size: 11px; color: var(--color-fg-muted); }
  .stepbody { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--color-border); padding: var(--sp-1) var(--sp-2); }
  .rail .rh { display: none; }
  .ritem { flex: none; min-height: 44px; grid-template-columns: auto auto; }
  .ritem .v { display: none; }
  .ritem[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--color-accent); }
  .stepbtn { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--sp-1); min-height: 52px; }
  .stepbtn .n { grid-row: auto; }
  .stepbtn .s { display: none; }
  .stepbtn .t { font-size: 11px; }
  .form { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); }
  .form > .lbl { margin-top: var(--sp-2); }
  .flabel { display: none; }
  .frame { gap: var(--sp-1); }
}
@media (pointer: coarse) {
  .ib, .tab, .btn, .seg button, .stepper button, .input, .ritem, .menu button, .combo .opt { min-height: 44px; }
  .stepper button { width: 44px; }
  .oline .x { width: 44px; height: 44px; }
}

.nw { white-space: nowrap; }
.tab.add.out { flex: none; }
@media (max-width: 1023px) {
  .rfoot .totrow { display: none; }
  .factions .lbltxt { display: none; }
  .frow .tab.add { padding: 0 var(--sp-2); }
}
.frow .menu { left: auto; right: 0; }
.rail > *, .frame > *, .rfoot > *, .stepfoot > * { flex-shrink: 0; }

.crumb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; width: 100%; min-height: 44px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); cursor: pointer; text-align: left; }
.crumb .nm { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .navrow .sum { display: none; }
  .navrow { grid-template-columns: auto minmax(0, 1fr); }
  .navrow .btn-primary { justify-self: end; }
  .top .draft { display: none; }
}
/* LIVE-PORT 2026-09-29: stock chip on every pick tile (kit/live-catalogue.js owns the chip's own look) */
.tile .stk { display: block; min-width: 0; line-height: 16px; }
.tile .stk .sj-stock { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.combo .opt .cap .sj-stock { margin-left: 4px; }
.oline .nm .sj-short { margin-left: var(--sp-1); vertical-align: 1px; }
.dlg h3.olh { margin: 0; font-size: 13px; }
.dlg .sj-orderlines { min-width: 0; }