/* Estate Sale Room web app. Tokens from design/tokens.md. Gold is for actions only. */
:root {
  --bg: #0B0905; --surface: #15110A; --surface-2: #1E1810; --line: #2E2617; --line-2: #3d3220;
  --ink: #F4EDE0; --muted: #A79E8E; --faint: #6f6757;
  --gold: #CFA84A; --gold-hi: #F3DFA2; --gold-lo: #9C7A2B; --on-gold: #0B0905;
  --metal: linear-gradient(180deg, #F3DFA2 0%, #CFA84A 55%, #9C7A2B 100%);
  --success: #8FD3A6; --danger: #F08A7E;
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --r: 2px; --tap: 44px; --side: 232px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.mono, .money { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.right { text-align: right; }
.hide { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.in:focus-visible { outline: none; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 22px; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand b { font: 500 17px/1.1 var(--display); letter-spacing: 0.01em; }
.brand small { display: block; font: 500 11px var(--sans); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }
.nav a { display: flex; align-items: center; gap: 12px; height: var(--tap); padding: 0 12px; border-radius: var(--r); color: var(--muted); text-decoration: none; font-weight: 500; transition: color .2s var(--ease), background .2s var(--ease); }
.nav a svg { width: 19px; height: 19px; flex: none; }
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a.on { color: var(--ink); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--ink); }
.side .who { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.who b { display: block; font-weight: 500; }
.who small { color: var(--muted); text-transform: capitalize; }
.main { min-width: 0; padding: 32px 40px 80px; max-width: 1360px; width: 100%; }
.tabbar { display: none; }
.testband { background: var(--surface); color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 8px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.testband a { color: var(--ink); }

/* ---------- type ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.head h1, h1.display { font: 400 42px/1.02 var(--display); margin: 0; letter-spacing: -0.01em; font-variation-settings: "opsz" 96; }
.head p { margin: 8px 0 0; color: var(--muted); }
.head .acts { display: flex; gap: 10px; flex-wrap: wrap; }
h2 { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin: 0 0 12px; }
h3 { font: 600 17px var(--sans); margin: 0 0 4px; }
.eyebrow { font: 500 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease); }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.btn.gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--ink); background: var(--surface); }
.btn.danger { color: var(--danger); border-color: #5a2a24; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn.big { min-height: 56px; font-size: 17px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: 999px; border: 1px solid transparent; background: none; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.card.flush { padding: 0; }
.grid { display: grid; gap: 16px; }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stat .eyebrow { margin-bottom: 10px; display: block; }
.stat .val { font: 500 28px/1.1 var(--mono); letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.stat .val.word { font: 500 22px/1.25 var(--sans); letter-spacing: 0; }
.stat .sub { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.stat a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.rule-banner { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); background: var(--surface-2); padding: 10px 14px; border-radius: var(--r); font-size: 14px; color: var(--muted); }
.rule-banner b { color: var(--ink); font-weight: 600; }
.list { list-style: none; margin: 0; padding: 0; }
.list li, .row-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); min-height: 56px; }
.list li:first-child { border-top: 0; }
.row-link { text-decoration: none; cursor: pointer; transition: background .15s var(--ease); }
.row-link:hover { background: var(--surface-2); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; }
.card-head a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); font-size: 13.5px; font-weight: 500; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--success); border-color: #2c4636; }
.pill.warn { color: var(--ink); border-color: var(--muted); }
.pill.bad { color: var(--danger); border-color: #5a2a24; }
.pill.plain::before { display: none; }

/* ---------- forms ---------- */
.f { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.in, textarea.in { width: 100%; min-height: var(--tap); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--ink); transition: border-color .15s var(--ease); }
textarea.in { min-height: 88px; resize: vertical; }
.in:focus { outline: none; border-color: var(--muted); background: var(--surface); }
.in::placeholder { color: var(--faint); }
.in.money { text-align: right; }
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search .in { padding-left: 42px; border-radius: 999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.chip span { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.chip.on { color: var(--ink); border-color: var(--ink); }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { flex: 1 1 280px; }
.toolbar select.in { width: auto; min-width: 150px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font-weight: 500; font-size: 13.5px; }
.seg button.on { background: var(--surface-2); color: var(--ink); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t th { text-align: left; font: 500 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t td { padding: 7px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr { cursor: pointer; transition: background .15s var(--ease); }
.t tbody tr:hover { background: var(--surface-2); }
.t .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.t tfoot td { font-weight: 600; border-top: 1px solid var(--line-2); }
.thumb { width: 38px; height: 38px; border-radius: var(--r); background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--line); flex: none; display: grid; place-items: center; color: var(--faint); }
.thumb svg { width: 18px; height: 18px; }
.titlecell { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.titlecell b { font-weight: 500; display: block; }
.titlecell small { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.chk { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }

/* ---------- register ---------- */
.reg { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.reg .find { position: sticky; top: 0; background: var(--bg); padding-bottom: 14px; z-index: 2; }
.scan { min-height: 56px; font-size: 17px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-align: left; padding: 0; cursor: pointer; overflow: hidden; transition: border-color .15s var(--ease), transform .1s var(--ease); display: flex; flex-direction: column; }
.tile:hover { border-color: var(--line-2); }
.tile:active { transform: scale(.98); }
.tile .ph { aspect-ratio: 16/10; background: var(--surface-2) center/cover no-repeat; display: grid; place-items: center; color: var(--faint); }
.tile .ph svg { width: 26px; height: 26px; }
.tile .tx { padding: 10px 12px 12px; display: grid; gap: 3px; }
.tile .tx b { font-weight: 500; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tile .tx .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--muted); font: 12px var(--mono); }
.tile .tx .price { font: 500 16px var(--mono); color: var(--ink); }
.tile .left { font: 500 11px var(--sans); color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.tile[disabled] { opacity: .45; cursor: not-allowed; }
.cart { position: sticky; top: 24px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.cart .lines { overflow-y: auto; flex: 1; min-height: 120px; }
.cline { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.cline:first-child { border-top: 0; }
.cline .t1 { font-weight: 500; }
.cline .t2 { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.cline .disc { color: var(--success); font-size: 12.5px; }
.cline .ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.step { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; }
.step button { width: 36px; height: 34px; border: 0; background: none; color: var(--ink); cursor: pointer; font-size: 17px; }
.step span { min-width: 22px; text-align: center; font-family: var(--mono); }
.totals { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 15px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); align-items: baseline; }
.totals .grand .money { font-size: 30px; font-weight: 500; }
.totals .save { color: var(--success); }
.cart .pay { padding: 0 20px 20px; display: grid; gap: 10px; }
.cartbar { display: none; }

/* ---------- sheets / modals ---------- */
.scrim { position: fixed; inset: 0; background: rgba(5, 4, 2, .86); z-index: 40; display: grid; place-items: center; padding: 16px; animation: fade .2s var(--ease); }
.sheet { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .25s var(--ease); }
.sheet.wide { width: min(760px, 100%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.sheet-head h3 { font: 600 19px/1.25 var(--sans); margin: 0; }
.sheet-body { padding: 22px; display: grid; gap: 18px; }
.sheet-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface); }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(620px, 100%); background: var(--surface); border-left: 1px solid var(--line-2); z-index: 41; overflow-y: auto; animation: slide .25s var(--ease); box-shadow: -30px 0 80px rgba(0,0,0,.5); }
.drawer-scrim { position: fixed; inset: 0; background: rgba(5,4,2,.6); z-index: 40; animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.due { text-align: center; padding: 6px 0 2px; }
.due .money { font-size: 44px; font-weight: 500; display: block; line-height: 1.1; }
.tender-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tender-pick button { min-height: 76px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; gap: 4px; font-weight: 500; padding: 10px; }
.tender-pick button svg { width: 22px; height: 22px; color: var(--gold); }
.tender-pick button:hover { border-color: var(--gold-lo); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick button { min-height: var(--tap); border: 1px solid var(--line-2); border-radius: 999px; background: none; cursor: pointer; font-family: var(--mono); }
.quick button:hover { border-color: var(--ink); }
.applied { display: grid; gap: 6px; }
.applied div { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r); }
.waiting { text-align: center; display: grid; gap: 10px; place-items: center; padding: 10px 0; }
.pulse { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center; animation: pulse 1.6s var(--ease) infinite; color: var(--gold); }
.pulse svg { width: 28px; height: 28px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(207,168,74,.08); } }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: rgba(143,211,166,.12); color: var(--success); display: grid; place-items: center; margin: 0 auto; }
.done-mark svg { width: 30px; height: 30px; }

/* ---------- PIN pad ---------- */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(207,168,74,.08), transparent 60%), var(--bg); }
.signin .box { width: min(340px, 100%); text-align: center; }
.signin .mark { width: 54px; height: 54px; margin: 0 auto 18px; }
.signin h1 { font: 400 40px/1.05 var(--display); margin: 0; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; font-variation-settings: "opsz" 96; }
.signin .shop { color: var(--muted); margin: 10px 0 34px; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; font-weight: 500; }
.dots { display: flex; justify-content: center; gap: 16px; margin: 0 0 8px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--muted); transition: background .15s var(--ease), border-color .15s var(--ease); }
.dots i.on { background: var(--gold); border-color: var(--gold); }
.dots.shake { animation: shake .35s var(--ease); }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pin-msg { min-height: 22px; color: var(--danger); font-size: 13.5px; margin-bottom: 14px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; }
.pad button { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 400 28px var(--sans); cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease); }
.pad button:hover { border-color: var(--muted); }
.pad button:active { background: var(--surface-2); }
.pad button.ghost { border-color: transparent; background: none; font-size: 15px; color: var(--muted); }
.demo-pins { margin-top: 30px; font-size: 12.5px; color: var(--faint); }
.demo-pins b { color: var(--muted); font-weight: 500; font-family: var(--mono); }
.sheet .pad button { width: 64px; height: 64px; font-size: 24px; }

/* ---------- auctions ---------- */
.auc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.auc { display: grid; grid-template-rows: 170px auto; text-decoration: none; overflow: hidden; padding: 0; transition: border-color .15s var(--ease); }
.auc:hover { border-color: var(--line-2); }
.auc .cover { background: var(--surface-2) center/cover no-repeat; position: relative; }
.auc .cover .pill { position: absolute; left: 14px; top: 14px; background: rgba(11,9,5,.8); }
.auc .body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.auc h3 { font: 600 18px/1.3 var(--sans); margin: 0; }
.kv { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.kv b { display: block; color: var(--ink); font: 500 15px var(--mono); }
.countdown { font-family: var(--mono); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { height: var(--tap); padding: 0 16px; border: 0; background: none; color: var(--muted); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-color: var(--ink); }

/* ---------- reports ---------- */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding: 10px 0 0; }
.bars div { flex: 1; background: var(--line-2); border-radius: 1px 1px 0 0; min-height: 2px; position: relative; transition: background .15s var(--ease); }
.bars div:hover { background: var(--ink); }
.bars div:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; background: var(--surface-2); border: 1px solid var(--line-2); padding: 4px 8px; font: 12px var(--mono); white-space: nowrap; border-radius: var(--r); z-index: 3; }
.bars-x { display: flex; justify-content: space-between; font: 11.5px var(--mono); color: var(--faint); margin-top: 6px; }
.pl { display: grid; gap: 0; }
.pl div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pl div.sum { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--line-2); font-size: 16px; }
.pl div.sub { padding-left: 16px; color: var(--muted); font-size: 14px; }
.meter { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--gold-lo); }

/* ---------- count ---------- */
.denoms { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 8px 0; }
.denom { display: grid; grid-template-columns: 56px 88px 1fr; align-items: center; gap: 12px; padding: 0 20px; }
.denom:nth-child(n+6) { border-left: 1px solid var(--line); }
.denom:nth-child(-n+5) { padding-left: 0; }
.denom span { color: var(--muted); }
.denom label { font-family: var(--mono); color: var(--muted); }
.denom .in { min-height: 40px; text-align: center; }
.denom span { text-align: right; font-family: var(--mono); }
.result { text-align: center; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); }
.result .money { font-size: 38px; display: block; }
.result.ok { border-color: #2c4636; } .result.ok .money { color: var(--success); }
.result.bad { border-color: #5a2a24; } .result.bad .money { color: var(--danger); }

/* ---------- toast ---------- */
#toast { position: fixed; left: calc(50% + var(--side) / 2); bottom: 28px; translate: -50% 14px; font-size: 14px; opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-weight: 500; transition: opacity .2s var(--ease), translate .2s var(--ease); width: max-content; max-width: min(480px, calc(100vw - 32px)); text-align: center; }
#toast.on { opacity: 1; translate: -50% 0; }
#toast.bad { background: var(--danger); }

/* ---------- labels + receipts (print) ---------- */
.print-only { display: none; }
.labels { display: flex; flex-wrap: wrap; gap: 16px; }
.label { background: #fff; color: #000; width: 2in; height: 1in; padding: .06in .09in; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; font-family: var(--sans); border-radius: 2px; }
.label .lt { font-size: 7.5pt; line-height: 1.1; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.label .lm { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.label .lp { font: 600 15pt/1 var(--mono); }
.label .lb img { height: .3in; width: 1.2in; object-fit: fill; }
.label .ls { font: 6.5pt var(--mono); display: flex; justify-content: space-between; }
.label.big { width: 2.25in; height: 1.25in; }
.label.big .lt { font-size: 8.5pt; }
.label.big .lp { font-size: 18pt; }
.label .lq img { width: .42in; height: .42in; }
.receipt { background: #fff; color: #111; width: 3.1in; padding: 18px 16px; font: 12px/1.45 var(--mono); border-radius: 2px; }
.receipt h4 { font: 600 16px var(--sans); margin: 0; text-align: center; letter-spacing: .04em; text-transform: uppercase; }
.receipt .c { text-align: center; }
.receipt hr { border: 0; border-top: 1px dashed #999; margin: 10px 0; }
.receipt .r { display: flex; justify-content: space-between; gap: 8px; }
.receipt .big { font-size: 15px; font-weight: 600; }

@media print {
  body { background: #fff; }
  .side, .tabbar, .head, .no-print, #toast, .testband { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .labels { gap: 0; }
  .label { break-after: page; border-radius: 0; }
  .receipt { width: auto; padding: 0; }
  .print-only { display: block; }
}

/* ---------- phone ---------- */
@media (max-width: 1100px) {
  .reg { grid-template-columns: minmax(0, 1fr) 340px; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  :root { --side: 0px; }
  .shell { display: block; }
  .side { display: none; }
  .main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .head { margin-bottom: 18px; }
  .head h1, h1.display { font-size: 34px; }
  .head .acts .btn { padding: 0 16px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(11,9,5,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 9px 0 8px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 500; background: none; border: 0; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .on { color: var(--gold); }
  .cols-4, .cols-3, .cols-2, .split, .form-grid { grid-template-columns: 1fr; }
  .cols-4.keep { grid-template-columns: 1fr 1fr; }
  .stat .val { font-size: 28px; }
  .card { padding: 16px; }
  .reg { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cart { display: none; position: fixed; inset: auto 0 0 0; top: 64px; max-height: none; z-index: 35; border-radius: 0; border-left: 0; border-right: 0; padding-bottom: env(safe-area-inset-bottom); }
  .cart.open { display: flex; }
  .cartbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 31; }
  .cartbar .btn { width: 100%; justify-content: space-between; min-height: 54px; }
  .t .hide-m { display: none; }
  .titlecell { min-width: 0; }
  .t td, .t th { padding: 10px 8px; }
  .drawer { width: 100%; }
  .sheet { max-height: calc(100vh - 24px); }
  .scrim { padding: 8px; align-items: end; }
  .denoms { grid-template-columns: 1fr; }
  .auc-cards { grid-template-columns: 1fr; }
  .pad button { width: 70px; height: 70px; }
  .toolbar select.in { flex: 1; min-width: 0; }
}
.testband svg, .rule-banner svg { width: 16px; height: 16px; flex: none; }

select.in { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79E8E' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.row-link svg, .list svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.show-m { display: none; }
.cat-chips { margin: 0 0 14px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.cat-chips .chip { flex: none; }
.labels-preview { padding: 8px 0 40px; }
@media screen { .labels-preview .label { transform: scale(1.6); transform-origin: top left; margin: 0 calc(2in * .6 + 16px) calc(1in * .6 + 16px) 0; } .labels-preview .label.big { margin: 0 calc(2.25in * .6 + 16px) calc(1.25in * .6 + 16px) 0; } }
.cart .empty-total { opacity: .5; }
@media (max-width: 820px) {
  .show-m { display: block; }
  .hide-m-inline { display: none; }
  .head h1, h1.display { font-size: 40px; }
  .head h1.long { font-size: 30px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
  .cartbar .btn { font-size: 15px; }
  .head .acts { width: 100%; }
  .head .acts input[type=date] { flex: 1; }
}

.reg > section { min-width: 0; }
.drawer .sheet-body { padding-bottom: 40px; }
.change-line { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.change-line .money { font-size: 26px; }
.change-line.short .money { color: var(--muted); }
.pinfield { font: 500 24px var(--mono); letter-spacing: .5em; text-align: center; max-width: 200px; margin: 0 auto; }
.status-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.status-chips .chip { flex: none; }
.range { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .denoms { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .denom, .denom:nth-child(-n+5) { padding: 0; border-left: 0 !important; grid-template-columns: 56px 1fr 90px; }
  .range input { flex: 1; min-width: 0; }
  .t td { padding: 9px 8px; }
}
.btn.gold[disabled] { background: transparent; border-color: var(--line-2); color: var(--muted); opacity: 1; }

.tiles { align-items: start; }
.tile.nophoto .ph { display: none; }
.tile .mono-badge { width: 30px; height: 30px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font: 500 13px var(--sans); color: var(--muted); flex: none; margin: 12px 12px 0; }
.tile .tx .meta span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tender-pick button.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.tender-pick button.primary svg { color: var(--on-gold); }
.stat.lead .val { font-size: 40px; }
.bars-wrap { position: relative; }
.bars-max { position: absolute; top: 0; left: 0; font: 11.5px var(--mono); color: var(--faint); }
@media (max-width: 820px) {
  #toast { left: 50%; bottom: calc(136px + env(safe-area-inset-bottom)); }
  .cart .clear-btn { display: none; }
  .inv-table thead { display: none; }
  .inv-table .chkcol { display: none; }
  .inv-table td { padding: 10px 4px; }
  .stat.lead .val { font-size: 32px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar select.in { flex: 1 1 0; }
}

/* ---------- iPhone Safari ---------- */
/* dvh = the visible height on iOS (100vh hides the bottom under Safari's toolbar). */
@supports (height: 100dvh) {
  .side { height: 100dvh; }
  .cart { max-height: calc(100dvh - 48px); }
  .sheet { max-height: calc(100dvh - 32px); }
}
.sheet-foot { flex-wrap: wrap; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 820px) {
  /* Under 16px, iOS zooms the page when a field is tapped and the layout falls off the screen. */
  .in, select.in, textarea.in, .scan { font-size: 16px; }
  .sheet { max-height: calc(100vh - 24px); }
  @supports (height: 100dvh) { .sheet { max-height: calc(100dvh - 16px); } }
  .sheet-foot .btn { flex: 1 1 auto; }
  .sheet-foot .btn[data-a=closeitem] { display: none; }  /* the X at the top closes it */
  .sheet-head, .sheet-body, .sheet-foot { padding-left: 16px; padding-right: 16px; }
  .drawer .sheet-body { padding-bottom: 24px; }
}