/* Evolvd: the vendor's till. Every deal is a receipt and the day is a till roll: thermal paper on a warm ground,
   ink text, money owns colour (in green with "+", out orange with "−"), each deal kind its own hue, cobalt only on what
   can be pressed. Archivo condensed with tabular figures for money, wide for section heads. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/static/fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* Dark: the till at night. Deep ink ground, receipts a step lighter, warm paper-white text. */
:root {
  --bg: #121315;          /* the counter under the roll */
  --s1: #1c1d20;          /* a receipt */
  --s2: #26282c;          /* an inset well: fields, tracks, secondary buttons */
  --line: rgba(241, 236, 226, .09);
  --line-strong: rgba(241, 236, 226, .18);
  --text: #f1ece2;        /* paper white */
  --muted: #a39d92;
  --accent: #7d97ff;      /* cobalt: only what can be pressed */
  --accent-ink: #0b1440;
  --accent-glow: rgba(0, 0, 0, .55);
  /* the clear case of a graded card (slab) */
  --slab-fill: linear-gradient(165deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .1));
  --slab-edge: rgba(255, 255, 255, .3);
  --slab-rim: rgba(255, 255, 255, .05);
  --slab-sheen: rgba(255, 255, 255, .09);
  --ok: #45d08a;          /* sure, and money in */
  --out: #ff9152;         /* money out */
  --warn: #ffb020;        /* check */
  --bad: #ff6b6b;         /* failed */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dock-h: 92px;
  --bar-h: 64px;          /* the phone's bottom bar */
  --bad-text: #ff8f8f;    /* red text on dark */
  --accent-hover: #97acff;
  --hover: #222326;       /* a row under the pointer */
  --glass: rgba(28, 29, 32, .78);         /* dock, floating bars */
  --glass-strong: rgba(28, 29, 32, .94);
  --glass-line: rgba(241, 236, 226, .1);
  --tint: rgba(241, 236, 226, .045);      /* hover wash */
  --backdrop: rgba(0, 0, 0, .55);
  --shadow: rgba(0, 0, 0, .7);
  /* each kind of deal owns one hue: a purchase is money out, a sale money in, a trade cards for cards */
  --k-purchase: var(--out);
  --k-sale: var(--ok);
  --k-trade: #b49cff;
  --k-adjustment: #8a857c;
  color-scheme: dark;
}
/* Light: thermal paper on a warm counter, the default for the fair hall's fluorescent light (Settings → Appearance;
   prefs.js sets data-theme on <html>). The camera keeps its dark overlay: it sits on live video. */
:root[data-theme="light"] {
  --bg: #e9e5dc;
  --s1: #fbfaf6;
  --s2: #efebe2;
  --line: rgba(46, 38, 24, .1);
  --line-strong: rgba(46, 38, 24, .2);
  --text: #1b1915;        /* ink */
  --muted: #655f54;
  --accent: #2b52e6;
  --accent-ink: #ffffff;
  --accent-glow: rgba(46, 38, 24, .25);
  --slab-fill: linear-gradient(165deg, rgba(255, 255, 255, .95), rgba(230, 226, 216, .7) 45%, rgba(248, 246, 240, .9));
  --slab-edge: rgba(46, 38, 24, .22);
  --slab-rim: rgba(46, 38, 24, .04);
  --slab-sheen: rgba(255, 255, 255, .3);
  --accent-hover: #1f40c4;
  --ok: #157a41;
  --out: #b9440f;
  --warn: #9a5a00;
  --bad: #c62f2f;
  --bad-text: #b3262a;
  --hover: #f5f2ea;
  --glass: rgba(251, 250, 246, .82);
  --glass-strong: rgba(251, 250, 246, .95);
  --glass-line: rgba(46, 38, 24, .12);
  --tint: rgba(46, 38, 24, .04);
  --backdrop: rgba(30, 24, 14, .35);
  --shadow: rgba(46, 38, 24, .28);
  --k-trade: #6a3fd1;
  --k-adjustment: #8a8478;
  color-scheme: light;
}
:root[data-theme="light"] .pill.down { color: var(--bad-text); }
/* the camera sits on live video: it keeps the dark colours in either theme */
:root[data-theme="light"] .cam { --bg: #0a0b0d; --s1: #131519; --s2: #1b1e23; --text: #f2f3f5; --muted: #a3a9b2;
  --accent: #7d97ff; --accent-ink: #0b1440; --accent-hover: #97acff; --ok: #45d08a; --warn: #ffb020; color: var(--text); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.4 var(--font); -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
::selection { background: var(--accent); color: var(--accent-ink); }
input { caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px 16px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num, .rows .pct, .alts .pct, .bars { font-variant-numeric: tabular-nums; }
html { scrollbar-color: var(--line-strong) transparent; }
/* money has its own voice: Archivo condensed, tabular, tight. Every amount on a receipt, a row or a figure. */
.big, .num, .price-val, .stat-pair b, .strip dd, .rows .pct span, .mini .v, .k-total b, .roll-fig b, .stmt td.n, .table .n {
  font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; }
.num.in, .rows .pct span.in, .big.in { color: var(--ok); }
.num.out, .rows .pct span.out, .big.out { color: var(--out); }
[hidden] { display: none !important; }

/* ---- top bar ---------------------------------------------------------------------------------- */
.top { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px 14px; }
/* the mark: a till slip in ink, its bottom edge torn */
.logo { display: grid; place-items: center; width: 26px; height: 31px; border-radius: 3px 3px 0 0; background: var(--text); color: var(--bg);
  -webkit-mask: radial-gradient(circle 3px at 50% 100%, transparent 96%, #000) 0 0 / 6.5px 100%;
  mask: radial-gradient(circle 3px at 50% 100%, transparent 96%, #000) 0 0 / 6.5px 100%; }
.logo svg { width: 16px; height: 16px; stroke-width: 2.2; margin-top: -3px; }
.wordmark { font-size: 18px; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px;
  background: var(--s1); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pill.up::before, .pill.down::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pill.down { color: var(--bad-text); }
.pill.down::before { background: var(--bad); }

.view { display: none; }
.view.active { display: block; }

/* ---- cards and shared bits -------------------------------------------------------------------- */
/* a card is a slip of paper: a small sharp radius, no outline, lifted off the counter by a soft shadow */
.card { background: var(--s1); border: 0; border-radius: 6px; padding: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
/* a receipt: a card whose bottom edge is perforated, torn off the roll */
.receipt { border-radius: 6px 6px 0 0; padding-bottom: 24px; box-shadow: none;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) 0 0 / 14px 100%;
  mask: radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) 0 0 / 14px 100%; }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.big { font-size: 54px; font-weight: 800; line-height: .95; letter-spacing: -.02em; margin-top: 6px; }
.section-head { display: flex; align-items: baseline; margin: 28px 2px 10px; }
h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
/* section heads on the roll: wide caps, like the printed header of a receipt */
.section-head h2 { font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.text-btn { margin-left: auto; min-height: 36px; padding: 4px 2px; border: 0; background: none; color: var(--accent); font: 600 14px var(--font); cursor: pointer; }
.text-btn:hover { color: var(--accent-hover); }
/* the phone stock list's order, beside its search (the desk table sorts by its column heads) */
.st-find { display: flex; gap: 8px; }
.st-sort { flex-shrink: 0; min-height: 50px; padding: 0 30px 0 14px; border-radius: 14px; border: 1px solid var(--line-strong);
  color: var(--text); font: 600 15px var(--font); cursor: pointer; appearance: none; -webkit-appearance: none;
  background: var(--s1) no-repeat; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; }
.st-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.desk .st-sort { display: none; }

/* first run */
.empty-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.empty p { margin: 8px 0 0; color: var(--muted); }
.tips { margin: 14px 0 0; padding: 12px 0 0 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.tips li { margin: 3px 0; }

/* session summary */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--s2); color: var(--muted); }
.chip.muted { background: var(--s2); color: var(--muted); }
.chip.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad-text); }
.chip.busy { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; margin-top: 16px; }
.bars i { flex: 1 1 0; max-width: 28px; min-height: 4px; border-radius: 3px 3px 1px 1px; background: var(--accent); transform-origin: bottom;
  animation: grow .6s var(--ease-out) both; }
.bars i.warn { background: var(--warn); }
.bars i.bad { background: var(--bad); }
.bars i.busy { background: var(--s2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes pulse { 50% { opacity: .45; } }

/* recent scans */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rows li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 14px 8px 8px;
  background: var(--s1); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.rows li:hover { background: var(--hover); border-color: var(--line-strong); }
.rows img { width: 40px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: var(--s2); }
.rows .t { min-width: 0; }
.rows b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .pct { text-align: right; font-size: 15px; font-weight: 800; }
.rows .pct small { font-size: 11px; font-weight: 700; color: var(--ok); }
.rows .unsure { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.rows .unsure .pct small { color: var(--warn); }
.rows .error .pct small { color: var(--bad-text); }
.rows .error.card-back .pct small { color: var(--muted); }  /* a photo of card backs: skipped, not failed */
.rows .corrected .pct small { color: var(--accent); }
.rows .pct span.guide { color: var(--muted); }  /* TCGplayer, no Cardmarket price: a guide only */
.rows .pct small.guide { color: var(--warn); }
.rows .queued img, .rows .scanning img { opacity: .5; }
.rows .scanning .pct small { color: var(--accent); }
.rows .filed { animation: row-in .5s var(--ease-out); }
@keyframes row-in { from { transform: translateY(-10px); opacity: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); } }

.catalog { margin: 20px 2px 0; font-size: 12px; color: var(--muted); text-align: center; }
.desktop-qr { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.desktop-qr img { flex-shrink: 0; border-radius: 8px; background: #fff; padding: 6px; }
.desktop-qr code { display: block; margin-top: 4px; font: 700 17px/1.3 var(--font); color: var(--accent); word-break: break-all; }

/* card search: a field at the top of home; while it has a query its results replace the scans */
.find-row { display: flex; gap: 8px; margin: 2px 0 16px; }
.find { position: relative; display: block; flex: 1; min-width: 0; }
.find > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.find input { width: 100%; min-height: 50px; padding: 12px 14px 12px 46px; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--s1); color: var(--text); font: 16px var(--font); }
.find input::placeholder { color: var(--muted); }
.find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.find:focus-within > svg { color: var(--accent); }
/* the camera inside the search field: the other way to search, it starts scanning */
.find:has(.find-scan) input { padding-right: 56px; }
/* with a login the barcode button sits left of the camera (sealed.js) */
.find:has(.find-barcode:not([hidden])) input { padding-right: 98px; }
.find-scan.find-barcode { right: 46px; }
.find-scan { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 11px; background: none; color: var(--accent); cursor: pointer; }
.find-scan:hover { background: var(--tint); }
.find-scan:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
#find-stock, #find-sealed { margin-bottom: 18px; }
:is(#find-stock, #find-sealed) .section-head h2 { font-size: 14px; font-weight: 700; color: var(--muted); }
/* what the search looks in (sealed.js): a set filter is cards only, so the chips give way to its chip */
.chips.filter.find-scope { margin: -4px 0 16px; }
#home:has(#set-chip:not([hidden])) .find-scope { display: none; }
#find-box[data-scope="cards"] #find-stock,
#find-box[data-scope="sealed"] :is(#find-sets, #find-stock, .section-head:has(#find-title), #find-results, #find-grid) { display: none; }

/* recent searches: one scrolling row of chips under the search field, shown while not searching */
.recent .section-head { margin-top: 0; }
.recent .section-head h2 { font-size: 14px; font-weight: 700; color: var(--muted); }
.recent-list { display: flex; gap: 8px; margin: 0 0 18px; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.recent-list::-webkit-scrollbar { display: none; }
.recent-list button { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; min-height: 38px; padding: 0 14px;
  border-radius: 99px; border: 1px solid var(--line-strong); background: var(--s1); color: var(--text); font: 14px var(--font);
  white-space: nowrap; cursor: pointer; }
.recent-list button span { overflow: hidden; text-overflow: ellipsis; }
.recent-list button svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted); }
.recent-list button:hover { border-color: var(--accent); }
.recent-list:empty { display: none; }
/* the cards opened lately: pictures two side by side on the phone (more columns at desk width) */
.recent-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.recent-cards:empty { display: none; }
.recent-cards li { min-width: 0; cursor: pointer; }
.recent-cards img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 9px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line); }
.recent-cards li:hover img { box-shadow: 0 0 0 1px var(--accent); }
.recent-cards b { display: block; margin-top: 8px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-cards span { display: block; margin-top: 1px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#find-box .section-head { margin-top: 0; }
#find-title { font-size: 14px; font-weight: 700; color: var(--muted); }
#find-results .pct span { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
#find-results .pct small { color: var(--muted); }
.find-sets { display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 50px; padding: 0 14px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--s1); color: var(--text); cursor: pointer; }
.find-sets svg { width: 20px; height: 20px; color: var(--accent); }
.find-sets:hover { border-color: var(--accent); }
#find-sets:not(:empty) { margin-bottom: 18px; }
.rows.sets .pct small { color: var(--muted); }
.rows.sets .pct span { font-size: 12px; font-weight: 800; letter-spacing: .04em; }

.find-sets.on { border-color: var(--accent); color: var(--accent); }
.rows .current { border-color: var(--accent); }

/* the set filter under the search field: tap to remove */
.set-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 38px; margin: -6px 0 16px; padding: 0 10px 0 8px;
  border-radius: 99px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); cursor: pointer; }
.set-chip span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-chip svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent); }
.set-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* set picker: a sheet that slides up over home */
.sheet { position: fixed; inset: 0; z-index: 15; }
body.sheet-open { overflow: hidden; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); animation: fade .2s ease-out; }
.sheet-panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); height: min(86dvh, 760px);
  display: flex; flex-direction: column; padding: 8px 16px 0; border-radius: 22px 22px 0 0; background: var(--bg);
  border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: 0 -20px 50px -10px var(--shadow); animation: sheet-up .3s var(--ease-out); }
.sheet-panel::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 10px; }
.sheet-head h2 { font-size: 20px; }
.sheet-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
.sheet-list .section-head:first-of-type { margin-top: 14px; }
/* List for sale: which channel (channels.js), a short sheet of the same kind */
.sheet-panel.short { height: auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.sell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sell-ch { display: grid; gap: 3px; width: 100%; min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--s1); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sell-ch:hover { background: var(--hover); border-color: var(--line-strong); }
.sell-ch b { font-size: 16px; }
.sell-ch small { color: var(--muted); font-size: 13px; }
#st-sell:not([hidden]) + #st-sold { margin-left: 18px; }
/* desk width: the set picker comes in from the right like the other sheets (item, deal, card); a short one (List for
   sale) is a small dialog in the middle. Neither slides up from the bottom */
.desk .sheet-panel { inset: 0 0 0 auto; transform: none; width: var(--sheet); height: auto; padding: 14px 24px 0; border-radius: 0;
  border: 0; border-left: 1px solid var(--line-strong); box-shadow: -30px 0 60px -30px var(--shadow); animation: sheet-in .3s var(--ease-out); }
.desk .sheet-panel::before { display: none; }
.desk .sheet-list { margin: 0 -24px; padding: 0 24px 24px; }
.desk .sheet-panel.short { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 48px));
  padding: 4px 20px 20px; border-radius: 18px; border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -20px var(--shadow);
  animation: dialog-in .2s var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .desk .sheet-panel { animation: fade .15s ease-out; } }
@keyframes sheet-up { from { transform: translate(-50%, 100%); } }
@keyframes fade { from { opacity: 0; } }
.set-tools { display: flex; gap: 8px; }
.seg { display: flex; flex-shrink: 0; padding: 3px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-strong); }
.seg button { min-width: 44px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.set-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.set-grid li { min-width: 0; cursor: pointer; }
.set-grid img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 7px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line); transition: transform .15s var(--ease-out); }
.set-grid li:hover img { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent); }
.set-grid span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.set-grid b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-open-set { display: block; margin: 8px 0 0; padding-left: 0; }
#home.finding :is(#scans-slip, .catalog) { display: none !important; }

/* ---- glass dock with the shutter -------------------------------------------------------------- */
.dock { position: fixed; z-index: 5; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(528px, calc(100% - 20px)); height: var(--dock-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px;
  border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line); box-shadow: 0 20px 40px -12px var(--shadow); }
.dock-side { display: grid; justify-items: center; gap: 4px; min-width: 64px; min-height: 56px; align-content: center; padding: 4px 6px; border: 0;
  border-radius: 14px; background: none; color: var(--muted); font: 500 12px var(--font); cursor: pointer; }
.dock-side:first-child { justify-self: start; }
.dock-side:last-child { justify-self: end; }
.dock-side:hover:not(:disabled) { color: var(--text); background: var(--tint); }
.dock-side:disabled { opacity: .5; cursor: default; }
.thumbs { display: flex; height: 26px; }
.thumbs img { width: 19px; height: 26px; object-fit: cover; border-radius: 3px; margin-left: -8px; box-shadow: 0 0 0 2px var(--s1); }
.thumbs img:first-child { margin-left: 0; }
.shutter { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; cursor: pointer; user-select: none;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent), 0 10px 30px -6px var(--accent-glow);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.shutter svg { width: 30px; height: 30px; stroke-width: 2; }
.shutter:hover { background: var(--accent-hover); }
.shutter:active { transform: scale(.93); }

#home.active { padding-bottom: calc(var(--dock-h) + 28px); }

/* ---- result view ---------------------------------------------------------------------------- */
.pager { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 44px 1fr 44px 44px; gap: 8px; align-items: center;
  margin: 0 -16px; padding: 6px 16px 10px; background: linear-gradient(var(--bg) 70%, transparent); }
#nav-pos, #i-nav-pos { text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }
button.icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--s1); border: 1px solid var(--line); color: var(--text); }
button.icon:hover:not(:disabled) { background: var(--s2); }

.hero { position: relative; width: min(210px, 56vw); margin: 6px auto 0; }
.hero-card { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 12px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line), 0 26px 40px -22px var(--shadow); }
/* A card you can turn in the light: it tilts toward the finger (or the mouse) and a soft sheen follows it, as on a
   card in a sleeve under a lamp. A neutral sheen, never a holo effect: it must not make a plain card look foiled.
   app.js (tiltCard) sets --rx/--ry (degrees) and --gx/--gy (the sheen's offset, % of the card); only transform and
   opacity change, so the phone composites it without repainting. A slab turns as one piece with the sheen on the case.
   Left alone the card sways slowly by itself (.sway: app.js sets the next swing every few seconds and the transition
   draws it); a finger takes over from wherever the swing is, and on release the card springs back and sways on. */
.tilt { position: relative; border-radius: 12px; --rx: 0; --ry: 0; --gx: 0%; --gy: 0%;
  transform: perspective(800px) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); touch-action: pan-y; }
/* a held card is being turned: no image callout or context menu (it would cancel the touch) and no image drag */
.tilt img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.tilt.sway { transition: transform 2.8s cubic-bezier(.45, 0, .55, 1); }
.tilt.held { transition: transform .1s ease-out; }
.glare { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; }
.glare::before { content: ""; position: absolute; inset: -50%; transform: translate(var(--gx), var(--gy));
  background: radial-gradient(circle at center, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1) 22%, transparent 42%);
  transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.tilt.sway .glare { opacity: .6; transition-duration: 1.2s; }
.tilt.sway .glare::before { transition: transform 2.8s cubic-bezier(.45, 0, .55, 1); }
.tilt.held .glare { opacity: 1; transition-duration: .15s; }
.tilt.held .glare::before { transition: transform .1s ease-out; }
#item.sealed .glare { display: none; }
@media (prefers-reduced-motion: reduce) { .tilt { transform: none; } .glare { display: none; } }
.mine { position: absolute; left: -58px; bottom: -12px; width: 40%; margin: 0; transform: rotate(-6deg); }
.mine img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 8px; background: var(--s2);
  box-shadow: 0 0 0 3px var(--bg), 0 12px 22px -8px var(--shadow); }
.mine figcaption { margin-top: 6px; font-size: 11px; color: var(--muted); text-align: center; transform: rotate(6deg); }
.hero-cap { margin: 10px 0 0; text-align: right; font-size: 12px; color: var(--muted); }
/* The card's language, on its picture and at the start of each row's subline: a Japanese card often has only its
   English print's picture, so the picture alone would say English. JP red, EN neutral, amber "?" when nothing printed
   on the card told the language and the other language's print is a real contender. */
.lang-flag { position: absolute; top: 12px; right: -12px; z-index: 2; display: grid; justify-items: end; gap: 3px; margin: 0;
  padding: 7px 11px; border-radius: 10px; background: var(--s1); color: var(--text); line-height: 1;
  box-shadow: 0 0 0 1px var(--line-strong), 0 10px 20px -8px var(--shadow); }
.lang-flag b { font-size: 16px; font-weight: 800; letter-spacing: .05em; }
.lang-flag small { font-size: 11px; font-weight: 600; color: var(--muted); }
.lang-flag.ja b { color: var(--bad-text); }
.lang-flag.unsure { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent), 0 10px 20px -8px var(--shadow); }
.lang-flag.unsure b { color: var(--warn); }
.slab.on ~ .lang-flag { top: auto; bottom: 24px; }  /* off the grading label */
.lang-tag { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 5px; background: var(--s2); color: var(--text);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 16px; vertical-align: 1px; }
.lang-tag.ja { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad-text); }
.lang-tag.unsure { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

/* A graded card: the card image in a drawn slab, a clear case with the grading label on top. The label is the
   physical object (white, framed in the grader's colour) and reads the same in both themes; the case takes its
   tone from the theme. The same facts are in the result's "Grading label" row, so the label is aria-hidden. */
.slab-label { display: none; }
.slab.on { position: relative; padding: 7px 8px 13px; border-radius: 13px; background: var(--slab-fill);
  box-shadow: inset 0 0 0 1px var(--slab-edge), inset 0 0 0 4px var(--slab-rim), 0 26px 40px -22px var(--shadow),
    0 14px 28px -14px var(--shadow); }
.slab.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, transparent 38%, var(--slab-sheen) 47%, transparent 58%); }
.slab.on .hero-card { border-radius: 5px; box-shadow: 0 0 0 1px var(--slab-edge), 0 0 0 4px var(--slab-rim); }
.slab.on .slab-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  margin: 0 0 10px; padding: 5px 7px 4px; border: 3px solid var(--slab-frame, #8b929c); border-radius: 3px;
  background: var(--sl-bg, #f6f6f3); color: var(--sl-ink, #17191c); font-size: 8px; font-weight: 700; line-height: 1.3;
  letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* Each grader's label in its own house style (its website's colours and how the real label looks), so a slab is
   recognised at a glance: PSA white in a red frame; CGC white under a black band; BGS gold (9.5), silver (9 and
   below) or black (10) in a gold frame; ACE navy and gold; RaukCard white in blue with a yellow edge by the grade. */
.slab[data-grader="PSA"] .slab-label { --sl-mark: #233f8f; }
.slab[data-grader="CGC"] .slab-label { --sl-mark: #c90000; border-width: 2px; border-top-width: 9px; }
.slab[data-grader="BGS"] .slab-label { --sl-bg: linear-gradient(100deg, #e9d9a8, #c9a85a 60%, #dcc695);
  --sl-mark: #1c1b1e; }
.slab[data-grader="BGS"][data-tier="silver"] .slab-label { --sl-bg: linear-gradient(100deg, #eceef0, #aeb2b8 60%, #d6d8dc); }
.slab[data-grader="BGS"][data-tier="black"] .slab-label { --sl-bg: #1c1b1e; --sl-ink: #e9d9a8; --sl-mark: #dcc695;
  --sl-grade: #dcc695; }
.slab[data-grader="ACE"] .slab-label { --sl-bg: linear-gradient(160deg, #0b2a4a, #03162b); --sl-ink: #f1e6cc;
  --sl-mark: #d3aa65; --sl-grade: #e8c17d; border-width: 2px; }
.slab[data-grader="RaukCard"] .slab-label { --sl-mark: #0080af; border-left: 7px solid #ffc14a; }
.slab[data-grader="SGC"] .slab-label { --sl-bg: #1d1f23; --sl-ink: #f3f3f1; --sl-mark: #f3f3f1; }
.slab[data-grader="TAG"] .slab-label { --sl-mark: #17191c; border-width: 2px; }
.slab-label span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slab-label :is(.sl-num, .sl-gname, .sl-grade, .sl-cert) { text-align: right; }
.slab-label .sl-name { font-size: 9px; font-weight: 800; text-transform: none; }  /* keeps PSA's small "ex" */
.slab-label .sl-grade { font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--sl-grade, inherit); }
.slab-label .sl-mark { align-self: end; font-weight: 800; letter-spacing: .12em;
  color: var(--sl-mark, var(--slab-frame, #17191c)); }
.slab-label .sl-cert { align-self: end; }
.desk #item .slab.on .slab-label { font-size: 7px; }
/* list and table thumbnails: a slab in miniature, the label as a strip in the grader's colour */
img.slabbed { padding: 1px; border: 1px solid var(--slab-edge); border-top: 6px solid var(--slab-frame, #8b929c);
  border-radius: 3px; background: var(--slab-fill); }
h1 { margin: 18px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.subname { margin: 3px 0 0; font-size: 16px; color: var(--muted); }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.badge { padding: 1px 7px; border-radius: 6px; background: var(--s2); color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.badge.ja { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad-text); }
.badge.graded { background: var(--accent); color: var(--accent-ink); }

/* card from a page photo: the photo with every card outlined, this one highlighted */
.page { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 12px; }
.page-fig { position: relative; margin: 0; line-height: 0; }
.page-fig img { display: block; width: 150px; border-radius: 8px; background: var(--s2); }
.page-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-fig polygon { fill: rgba(10, 11, 13, .35); stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.page-fig polygon:hover { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.page-fig polygon.here { fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 3; }
.page-pos { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-top: 2px; }
.page .note { margin-top: 4px; }
#r-page-open { margin: 2px 0 0; padding-left: 0; }

/* page view: the whole photo, numbered, then the page's value and its cards */
.page-fig.wide { margin: 6px 0 0; }
.page-fig.wide img { width: 100%; border-radius: 14px; }
.page-fig text { fill: #fff; font-weight: 800; text-anchor: middle; dominant-baseline: central; paint-order: stroke;
  stroke: rgba(10, 11, 13, .75); pointer-events: none; font-family: var(--font); }
.page-value { margin-top: 12px; }

/* mark view: drag a box around a card on the photo */
.remark { display: block; margin: 8px 0 0; padding-left: 0; }
#markview .pager { grid-template-columns: 44px 1fr; }
#m-title { font-size: 14px; font-weight: 700; color: var(--muted); }
.mark-fig { width: fit-content; max-width: 100%; margin: 6px auto 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.mark-fig img { max-height: 68dvh; width: auto; max-width: 100%; margin: 0 auto; }
.mark-fig polygon { cursor: crosshair; fill: rgba(10, 11, 13, .35); }
.mark-fig polygon:hover { fill: rgba(10, 11, 13, .35); }  /* not the teal hover of .page-fig: nothing to tap here */
.mark-fig rect { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.mark-fig rect.busy { fill: color-mix(in srgb, var(--accent) 32%, transparent); animation: pulse 1.2s ease-in-out infinite; }
.mark-fig rect.failed { fill: rgba(232, 93, 93, .18); stroke: var(--bad-text); }
#m-nums { position: absolute; inset: 0; pointer-events: none; line-height: 1; }
#m-nums span { position: absolute; transform: translate(-50%, -50%); min-width: 26px; padding: 4px 6px; border-radius: 13px;
  background: var(--accent); color: var(--accent-ink); font: 800 14px/18px var(--font); text-align: center; }
#m-nums span.failed { background: #c0282b; color: #fff; }  /* the light theme's red: white reads on it in both themes */
#m-msg:empty { display: none; }
#m-msg.warn { color: var(--warn); }
.page-value .big { font-size: 40px; }
.page-eur { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.page-value.loading .big { color: transparent; width: 6ch; border-radius: 8px; background: var(--s2); animation: pulse 1.2s ease-in-out infinite; }
#pageview .rows .pct span { font-size: 14px; }
/* a card left out of the page (not buying it): still listed, dimmed, out of the value */
#pageview .rows li { grid-template-columns: 40px 1fr auto auto; padding-right: 8px; }
#pageview .rows button.skip { width: 36px; height: 36px; color: var(--muted); }
#pageview .rows button.skip:hover { color: var(--text); border-color: var(--line-strong); }
#pageview .rows button.skip svg { width: 16px; height: 16px; }
/* ... and a page or scan left out of a collection, the same way */
:is(#pageview, #lotview) .rows li.skipped { border-style: dashed; background: transparent; }
:is(#pageview, #lotview) .rows li.skipped :is(img, .t, .pct) { opacity: .45; }
:is(#pageview, #lotview) .rows li.skipped b, :is(#pageview, #lotview) .rows li.skipped .pct span { text-decoration: line-through; }
:is(#pageview, #lotview) .rows li.skipped .pct small { color: var(--muted); }
#pageview .rows li.skipped button.skip, #lotview .rows li.skipped button.rm { color: var(--accent); }
.page-fig g.skip polygon { fill: rgba(10, 11, 13, .7); stroke-dasharray: 4 4; stroke: rgba(255, 255, 255, .35); }
.page-fig g.skip text { opacity: .45; }
/* page row on the home screen: the photo as a small stack */
.rows .page-row img { box-shadow: 3px -3px 0 -1px var(--s2), 6px -6px 0 -2px var(--line-strong); }
#pageview.active ~ .toast, #lotview.active ~ .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
/* collections: one row on home (a deeper stack than a page) */
.rows .lot-row img { box-shadow: 3px -3px 0 -1px var(--s2), 6px -6px 0 -2px var(--line-strong), 9px -9px 0 -3px var(--s2), 12px -12px 0 -4px var(--line-strong); }
/* rows with their own remove button: collections on home, a collection's pages and scans */
.rows li:is(.lot-row, .removable) { grid-template-columns: 40px 1fr auto auto; padding-right: 8px; }
.rows li button.rm { width: 36px; height: 36px; color: var(--muted); }
.rows li button.rm:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.rows li button.rm:disabled { opacity: .35; }
.rows li button.rm svg { width: 16px; height: 16px; }
.empty #empty-lot { margin: 10px 0 0; padding-left: 0; }
.lot-name { margin-top: 4px; }
.lot-name input { font-size: 18px; font-weight: 700; }
#lot-empty { margin: 0 2px; }
.actions.lot-actions { display: flex; }
.lot-actions button { flex: 1; min-width: 0; }
.lot-actions button[hidden] { display: none; }
.lot-actions .lot-photos { flex: 0 0 52px; display: grid; place-items: center; padding: 0; }
/* a bought collection is done: no more scans, cards or Tradera photos into it, and its purchase instead of Buy */
#lotview:not(.bought) #lot-deal, #lotview.bought .lot-actions > :not(#lot-deal),
#lotview.bought :is(#lot-tr, #lot-add) { display: none; }
.rows .lot-row.bought .pct small { color: var(--ok); }
/* a Tradera listing in a collection: the link form, then what the listing asks beside the collection's value */
#lot-tr-add { margin: 10px 0 0; padding-left: 0; }
.lot-tr-form { display: flex; align-items: flex-end; gap: 8px; }
.lot-tr-form .field { flex: 1; }
.lot-tr-form button { flex: none; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.lot-tr-form button:hover:not(:disabled) { background: var(--accent-hover); }
.lot-tr-offer { display: grid; gap: 4px; margin-top: 12px; }
#lot-tr-title { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.lot-tr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lot-tr-price b { font-size: 20px; }
.lot-tr-price small { color: var(--muted); }
.lot-tr-offer .note { margin: 4px 0 0; }
/* cards added to a collection by search: the field, then the matches; each tap adds a copy */
.lot-actions .lot-photos.on { border-color: var(--accent); color: var(--accent); }
.lot-add { margin-top: 12px; scroll-margin-top: 12px; }
.lot-add-bar { display: flex; align-items: flex-end; gap: 8px; }
.lot-add-bar .field { flex: 1; }
.lot-add-bar .text-btn { flex: none; min-height: 46px; padding: 0 6px; }
#lot-add-msg { margin: 8px 2px; }
#lot-add-results .pct { min-width: 2.5em; text-align: right; font-weight: 700; color: var(--accent); }
#lot-add-results li:not(.added) .pct { font-size: 24px; font-weight: 500; line-height: 1; }
#lot-add-results li.added { border-color: var(--line-strong); }
#lot-add-results li.added .pct { color: var(--ok); }
/* a card added by search in the result view: no photo, so nothing about a scan */
#result.added .mine, #result.added #r-remark, #result.added .confidence, #result.added #r-ocr-row,
#result.added:not(.picking) #alt-title { display: none; }

.confidence { margin-top: 16px; }
.conf-row { display: flex; align-items: center; gap: 14px; }
.conf-row .big { color: var(--ok); }
.confidence.mid .conf-row .big { color: var(--warn); }
.confidence.low .conf-row .big { color: var(--warn); }
.confidence.fixed .conf-row .big { color: var(--accent); font-size: 30px; }
.conf { flex: 1; height: 6px; border-radius: 3px; background: var(--s2); overflow: hidden; margin-top: 6px; }
.conf div { height: 100%; border-radius: 3px; background: var(--ok); }
.conf div.mid { background: var(--warn); }
.conf div.low { background: var(--warn); }
.verdict { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.verdict.check { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.verdict.fixed { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.verdict-margin:not(:empty)::before { content: "· "; }
.confirm-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.confirm-btn { margin-left: auto; min-height: 40px; padding: 0 16px; border: 1px solid var(--warn); border-radius: 99px; background: none;
  color: var(--warn); font: 700 14px var(--font); cursor: pointer; }
.confirm-btn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.confirm-btn:disabled { opacity: .5; cursor: default; }
.note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* market price: headline size, so the confidence stays the one big number */
.price { margin-top: 10px; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.price-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.price-val { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.price-val.none { color: var(--muted); font-size: 20px; font-weight: 700; }
.price.loading .price-val { color: transparent; width: 5ch; border-radius: 6px; background: var(--s2); animation: pulse 1.2s ease-in-out infinite; }
.price a { color: var(--accent); text-decoration: none; }
/* condition picker (Cardmarket's scale) and the TCGplayer price for it, quieter than the Cardmarket headline */
.price .seg.cond { margin: 8px 0 4px; }
.price .seg.cond button { min-height: 32px; padding: 0 6px; font-size: 13px; font-weight: 700; }
.price-row.alt { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.price-row.alt .price-val { font-size: 18px; font-weight: 700; }
/* a slab: its grade's price from Tradera or eBay sales first, the ungraded card's prices below a line */
.graded-price { margin: 6px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.graded-price .gr-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.graded-price .gr-msg { margin-top: 4px; font-size: 13px; color: var(--muted); }
/* Tradera and eBay: each market its own price, one under the other with a rule between, so neither reads as the other's */
.graded-price .gr-market { padding: 8px 0; }
.graded-price .gr-market + .gr-market { border-top: 1px dashed var(--line); }
.graded-price .gr-head { display: flex; align-items: center; gap: 8px; }
.graded-price .gr-m { font-size: 14px; font-weight: 700; }
/* the market whose price deal lines and values use */
.graded-price .gr-used { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: var(--tint); color: var(--muted); }
.graded-price .pr-median { margin-top: 2px; }
.graded-price .pr-median b { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.graded-price .pr-median b.none { color: var(--muted); font-size: 18px; font-weight: 700; }
.graded-price .gr-sub { display: block; font-size: 13px; color: var(--muted); }
/* graded prices on a card's own page (catalog card, stock copy): a grade is asked for when tapped */
.graded-pick { position: relative; }
#c-graded { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.graded-pick .gr-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.graded-pick .seg button { min-height: 32px; padding: 0 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.graded-pick .pr-median { margin: 8px 0 0; }
.graded-pick .gp-val { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.graded-pick .gp-val.none { color: var(--muted); font-size: 17px; font-weight: 700; }
.graded-pick .gp-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.graded-pick.loading .gp-sub { animation: pulse 1.2s ease-in-out infinite; }
.graded-pick.plan-locked .seg { opacity: .55; }
.graded-pick > .lock-i { position: absolute; top: 2px; right: 0; }
#c-graded > .lock-i { top: 12px; }
#i-graded-box > .lock-i { top: 14px; right: 14px; }
.gr-sales > summary { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer;
  min-height: 32px; display: flex; align-items: center; }
.gr-sales .sales { margin-top: 4px; }
/* Sale titles are long and alike: the price and date lead, the title is a quiet second line */
.gr-sales .sales a { flex-direction: column; gap: 2px; }
.gr-sales .sales .num { color: var(--text); font-weight: 600; }
.gr-sales .sales .t { font-size: 12px; color: var(--muted); }

.price-row.alt .price-val.none { font-size: 15px; }
/* no Cardmarket price: the TCGplayer row is the one to go by, a guide (warn) rather than the market price */
.price-row.alt.guide .price-val { color: var(--warn); }
/* the user's own value for a scan: counts instead of the market price on the page */
.own-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.own-row label { flex: 1; font-size: 14px; font-weight: 600; }
#r-own-in { width: 15ch; max-width: 55%; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--s2); color: var(--text); font: 700 16px var(--font); font-variant-numeric: tabular-nums; text-align: right; }
#r-own-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
#r-own-in::placeholder { font-weight: 500; color: var(--muted); font-size: 13px; }
.own-row span { font-weight: 700; color: var(--muted); }
.cert-link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cert-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Vinted draft: front (the scan) + back slot + price and the send button */
.vinted { margin-top: 10px; }
.v-photos { display: grid; grid-template-columns: 64px 64px 1fr; gap: 12px; align-items: start; margin-top: 10px; }
.v-photos figure { margin: 0; }
.v-photos figcaption { margin-top: 5px; font-size: 11px; color: var(--muted); text-align: center; }
.v-photos img, .v-slot { display: block; width: 64px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; background: var(--s2); }
.v-slot { display: grid; place-items: center; position: relative; overflow: hidden; border: 1px dashed var(--line-strong); cursor: pointer; }
.v-slot:hover { border-color: var(--accent); color: var(--accent); }
.v-slot:has(img:not([hidden])) { border-style: solid; border-color: var(--line); }
.v-slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
#v-back-add { display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 600; }
.v-pick { display: inline-block; padding: 2px 0; color: var(--accent); font-weight: 600; white-space: nowrap; cursor: pointer; }
.v-side { display: grid; gap: 8px; min-width: 0; }
.v-price-in { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#v-price { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--s2); color: var(--text); font: 800 20px var(--font); font-variant-numeric: tabular-nums; }
#v-price:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.v-price-in span { font-weight: 700; color: var(--muted); }
.v-go { min-height: 44px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.v-go:hover:not(:disabled) { background: var(--accent-hover); }
.vinted.sent .v-go { background: var(--s2); border-color: var(--line); color: var(--text); }
#v-status.ok { color: var(--ok); }
#v-status.warn { color: var(--warn); }
#v-status.bad { color: var(--bad-text); }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 10px 0 0; }
.details dt { font-size: 12px; color: var(--muted); }
.details dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; word-break: break-word; }
.details .i-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.details .i-sub.stale { color: var(--warn); }
.details .i-sub.up { color: var(--ok); }
.details .i-sub.down { color: var(--bad-text); }
.details .i-sub.i-link { width: fit-content; font-weight: 600; color: var(--accent); text-decoration: none; }
.details .i-sub.i-link:hover { color: var(--accent-hover); }

/* alternatives: a strip at rest, a full list while correcting */
.alt-wrap { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.alt-search { flex: 0 0 76px; display: grid; place-items: center; align-content: center; gap: 6px; height: 106px; padding: 0; border-radius: 10px;
  background: var(--s1); border: 1px dashed var(--line-strong); color: var(--text); font: 600 12px var(--font); cursor: pointer; }
.alt-search:hover { border-color: var(--accent); color: var(--accent); }
.alts { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.alts li { flex: 0 0 76px; font-size: 12px; color: var(--muted); text-align: center; }
.alts img { display: block; width: 76px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 8px; background: var(--s2); opacity: .85; }
.alts .t { display: none; }
.alts .pct { display: block; margin-top: 5px; font-weight: 700; }
.picking .alt-wrap { display: block; margin: 0; padding: 0; overflow: visible; }
.picking .alt-search { display: none; }
.alts.list, .picking .alts { display: grid; gap: 6px; }
.alts.list li, .picking .alts li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 14px 8px 8px;
  text-align: left; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--text); }
.alts.list li:hover, .picking .alts li:hover { border-color: var(--accent); }
.alts.list img, .picking .alts img { width: 44px; border-radius: 4px; opacity: 1; }
.alts.list .t, .picking .alts .t { display: block; min-width: 0; }
.alts .t b { display: block; font-size: 15px; font-weight: 700; }
.alts .t small { display: block; font-size: 13px; color: var(--muted); }
.alts.list .pct, .picking .alts .pct { margin: 0; color: var(--muted); }
.hint { margin: 0 2px 10px; color: var(--accent); font-weight: 600; }
#search { width: 100%; min-height: 50px; margin: 12px 0 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--s1); color: var(--text); font: 16px var(--font); }
#search::placeholder { color: var(--muted); }
#search:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }

/* ---- buttons -------------------------------------------------------------------------------- */
button { font: 700 15px var(--font); }
.actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
.actions button { min-height: 52px; border-radius: 8px; border: 1px solid var(--line); background: var(--s2); color: var(--text); cursor: pointer;
  transition: background-color .15s, transform .1s var(--ease-out); }
.actions button:active { transform: scale(.98); }
.actions button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.actions button.primary:hover { background: var(--accent-hover); }
.actions:has(#btn-retry:not([hidden])) { grid-template-columns: 1fr 1fr; }
.actions.sticky { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 2; margin-top: 22px; }
button:disabled { opacity: .3; cursor: default; }

/* ---- pending -------------------------------------------------------------------------------- */
.pending { text-align: center; }
.pending .hero { display: grid; place-items: center; }
.pending .hero > * { grid-area: 1 / 1; }
.pending .hero-card { opacity: .55; box-shadow: 0 0 0 1px var(--line); }
.spinner { width: 44px; height: 44px; border: 3px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; margin: 22px 0 0; padding: 0; }
.steps li { padding-top: 8px; border-top: 3px solid var(--s2); font-size: 12px; font-weight: 600; color: var(--muted); }
.steps li.past { border-color: var(--accent); color: var(--text); }
.steps li.now { border-color: var(--accent); color: var(--accent); }
.steps.failed li.now { border-color: var(--bad); color: var(--bad-text); }
#r-pending-msg { margin: 14px 0 0; color: var(--muted); }
#r-pending-msg.warn { color: var(--bad-text); }
/* a page photo while it is read: outlines waiting (dashed, pulsing), read (teal), holding no card (dimmed) */
.live-fig { margin: 0 auto; }
.live-fig img { width: 100%; height: auto; border-radius: 10px; }
.live-fig polygon { pointer-events: none; stroke-width: 2; }
.live-fig g.wait polygon { fill: rgba(10, 11, 13, .45); stroke: rgba(255, 255, 255, .6); stroke-dasharray: 6 5; animation: live-wait 1.4s ease-in-out infinite; }
.live-fig g.read polygon { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); }
.live-fig g.empty polygon { fill: rgba(10, 11, 13, .65); stroke: rgba(255, 255, 255, .25); }
@keyframes live-wait { 50% { fill: rgba(10, 11, 13, .25); } }
.live-rows { margin-top: 16px; text-align: left; }
.live-rows li { animation: live-in .3s var(--ease-out); }
.live-rows .pct small { color: var(--muted); }
@keyframes live-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .live-fig g.wait polygon, .live-rows li { animation: none; } }

#result.slide-l #r-body, #result.slide-l .pending, #cardview.slide-l #c-body { animation: slide-l .25s var(--ease-out); }
#result.slide-r #r-body, #result.slide-r .pending, #cardview.slide-r #c-body { animation: slide-r .25s var(--ease-out); }
@keyframes slide-l { from { transform: translateX(28px); opacity: .2; } }
@keyframes slide-r { from { transform: translateX(-28px); opacity: .2; } }

/* ---- toast: floats above the dock ----------------------------------------------------------- */
.toast { position: fixed; z-index: 10; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dock-h) + 10px); transform: translateX(-50%);
  width: max-content; max-width: min(508px, calc(100% - 40px)); padding: 10px 16px 10px 12px; border-radius: 99px; cursor: pointer;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--glass-line);
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 30px -10px var(--shadow);
  animation: toast-in .35s var(--ease-out); }
.toast b { margin-right: 8px; padding: 2px 8px; border-radius: 99px; font-size: 12px; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.toast.unsure b { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
#result.active ~ .toast, #cardview.active ~ .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
@keyframes toast-in { from { transform: translate(-50%, 14px); opacity: 0; } }

footer { max-width: 560px; margin: 0 auto; padding: 0 16px calc(var(--dock-h) + 36px); font-size: 11px; color: var(--muted); text-align: center; }
footer a { color: inherit; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}
body:has(#result.active, #pageview.active, #cardview.active) footer { padding-bottom: 24px; }
#low-conf { display: none !important; } /* the verdict chip already says it */

/* ---- in-page camera: full screen, the shutter where the dock's shutter was ------------------ */
.cam { position: fixed; inset: 0; z-index: 20; background: #000; overflow: hidden; }
body.cam-open { overflow: hidden; }
/* the whole frame, as the scanner gets it (cover cut off the sides and looked zoomed in); black above and below.
   fitVideo (app.js) gives it the exact box once the stream's size is known */
#cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* card-shaped guide: dims everything outside a 63:88 frame */
.cam-guide { position: absolute; left: 50%; top: 46%; width: min(78vw, 58dvh * 63 / 88); aspect-ratio: 63 / 88; transform: translate(-50%, -50%);
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .38); pointer-events: none; }
/* a shot (shoot() sets .snap): a white flash, the guide's frame snaps in and the shutter dips. The pulse is on the
   guide's ::after so the guide's own box (guideRect, read on the next quick tap) never moves */
.cam-guide::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid #fff; opacity: 0; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam.snap .cam-flash { animation: flash .35s ease-out; }
.cam.snap .cam-guide::after { animation: guide-snap .4s cubic-bezier(.2, .8, .3, 1); }
.cam.snap .cam-bar .shutter { animation: shutter-dip .22s ease-out; }
@keyframes flash { from { opacity: .9; } }
@keyframes guide-snap { from { opacity: 1; transform: scale(.93); } 60% { opacity: .8; } }
@keyframes shutter-dip { 35% { transform: scale(.85); } }
/* the global reduced-motion rule would cut the flash to nothing: keep it (a fade, no movement), drop the rest */
@media (prefers-reduced-motion: reduce) {
  .cam.snap .cam-flash { animation-duration: .3s !important; }
  .cam.snap .cam-guide::after, .cam.snap .cam-bar .shutter { animation: none !important; }
}
.cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.cam-top button.icon { background: rgba(28, 31, 36, .72); border-color: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cam-mode { margin-left: auto; display: flex; padding: 3px; border-radius: 99px; background: rgba(28, 31, 36, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .12); }
.cam-mode button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 99px; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.cam-mode button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.cam-mode button[hidden] { display: none; }
.cam.page .cam-guide { display: none; }
.cam-hint { position: absolute; left: 0; right: 0; top: calc(max(14px, env(safe-area-inset-top)) + 58px); margin: 0; text-align: center;
  padding: 0 68px; font-size: 15px; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
/* torch and zoom: round keys either side of the hint, above the card guide */
.cam-tool { position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 52px); display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(28, 31, 36, .72); color: var(--text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 700 14px var(--font); cursor: pointer; }
.cam-tool[hidden] { display: none; }
.cam-tool.torch { left: 16px; }
/* zoom: one round key with the level in use; open, it is a pill with every level (it covers the hint for a moment) */
.cam-zoom { position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 52px); right: 16px; display: flex; gap: 2px; padding: 2px;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(28, 31, 36, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cam-zoom[hidden] { display: none; }
.cam-zoom button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text);
  font: 700 13px var(--font); cursor: pointer; }
.cam-zoom button[aria-pressed="true"] { color: #ffd23f; }
.cam-zoom.open button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); }
.cam-zoom:not(.open) button:not([aria-pressed="true"]) { display: none; }
.cam-tool[aria-pressed="true"] { background: #ffd23f; border-color: #ffd23f; color: #1a1400; }
.cam-tool[aria-pressed="true"] svg { fill: currentColor; }
.cam-hint .text-btn { margin-left: 6px; min-height: 0; padding: 0; font-size: 14px; }
.cam-bar { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(528px, calc(100% - 20px)); height: var(--dock-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px;
  border-radius: 28px; background: rgba(28, 31, 36, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .1); }
.cam-bar .dock-side:first-child { justify-self: start; }
.cam-bar .cam-done { justify-self: end; color: var(--text); font: 700 15px var(--font); }
.cam-bar .shutter { border: 0; }
/* the bar's left side: this camera session's cards and what they are worth together */
.cam-sum { justify-self: start; display: grid; gap: 2px; min-width: 64px; padding-left: 4px; line-height: 1.1; }
.cam-sum b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.cam-sum small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cam-sum[hidden] { display: none; }
/* /?camdebug=1: what the camera gives, to send when the preview looks wrong on a phone */
.cam-debug { position: absolute; left: 16px; right: 16px; top: calc(max(14px, env(safe-area-inset-top)) + 104px); margin: 0; padding: 8px;
  border-radius: 8px; background: rgba(0, 0, 0, .7); color: #fff; font: 11px/1.4 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; }
.cam-debug[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the reel: one small card per photo above the bar, newest first; it scrolls sideways and fades out on the right */
.cam-reel { position: absolute; left: 0; right: 0; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dock-h) + 8px);
  margin: 0; padding: 4px 16px; list-style: none; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.cam-reel::-webkit-scrollbar { display: none; }
.cam-reel[hidden] { display: none; }
.cam-reel li { flex: none; scroll-snap-align: start; }
.reel-tile { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center;
  width: 176px; height: 68px; padding: 6px 10px 6px 6px; border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(28, 31, 36, .8); color: var(--text); font: inherit; text-align: left;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.reel-tile:active { transform: scale(.97); }
.rt-img { width: 40px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--s2); }
.rt-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-t { display: grid; min-width: 0; line-height: 1.25; }
.rt-t b, .rt-t small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rt-t b { font-size: 14px; font-weight: 700; }
.rt-t small { font-size: 12px; color: var(--muted); }
.rt-t em { font-style: normal; font-weight: 700; color: var(--warn); }
.rt-v { min-height: 1.25em; font-size: 14px; font-weight: 800; color: var(--accent); }
/* confidence rail along the bottom edge: how sure the match is, how far a page got, red when it failed */
.reel-tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--conf, 0%); background: var(--ok);
  border-radius: 0 2px 2px 0; transition: width .4s var(--ease-out); }
.reel-tile.unsure { border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.reel-tile.unsure::after { background: var(--warn); }
.reel-tile.error::after { background: var(--bad); }
.reel-tile.error .rt-img img { opacity: .45; filter: grayscale(1); }
.reel-tile.error .rt-t b { color: var(--muted); }
.reel-tile.reading::after { background: rgba(255, 255, 255, .55); }
/* the photo being read: dimmed, a teal line sweeping down it */
.reel-tile.reading .rt-img { position: relative; }
.reel-tile.reading .rt-img img { opacity: .6; }
.reel-tile.reading .rt-img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent); animation: rt-scan 1.2s ease-in-out infinite alternate; }
@keyframes rt-scan { to { transform: translateY(54px); } }
.reel-tile.enter { animation: rt-in .45s var(--ease-out); }
@keyframes rt-in { from { opacity: 0; transform: translateX(-28px) scale(.9); } }
/* identified: the picture flips from the photo to the card, and a sheen crosses the tile */
.reel-tile.landed .rt-img { animation: rt-flip .5s var(--ease-out); }
@keyframes rt-flip { from { transform: perspective(200px) rotateY(-90deg); } }
.reel-tile.landed::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent) 22%, transparent) 45%, rgba(255, 255, 255, .18) 50%, transparent 65%);
  transform: translateX(-100%); animation: rt-sheen .9s .15s ease-out forwards; }
.reel-tile.unsure.landed::before { background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--warn) 20%, transparent) 45%, rgba(255, 255, 255, .14) 50%, transparent 65%); }
@keyframes rt-sheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .reel-tile.enter, .reel-tile.landed .rt-img, .reel-tile.reading .rt-img::after { animation: none; }
  .reel-tile.landed::before { display: none; }
}

.https-tip { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.https-tip a { color: var(--accent); font-weight: 700; word-break: break-all; }
button.shutter { border: 0; padding: 0; }
.cam-bar .shutter { grid-column: 2; }

/* ==== business side (ledger): tabs, login, stock, deals, overview, compose ======================== */
/* the sections. Phone: a bar along the bottom, in the thumb's reach (Overview, Cards, Scan, Stock, Deals) with Scan
   raised in the middle as the one primary action; Calendar and Settings sit in the corner of the top bar. Only on the
   section screens, not inside a card or deal. Desk width: a rail down the left (below). */
.tabs button { min-height: 40px; padding: 0 6px; border: 0; border-radius: 99px; background: none; color: var(--muted);
  font: 700 14px var(--font); cursor: pointer; transition: background-color .15s, color .15s; }
.tabs > button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0;
  min-height: 50px; padding: 4px 2px; border-radius: 14px; font-size: 12px; }
.tabs > button svg { width: 22px; height: 22px; }
.tabs > button .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs > button[aria-current="page"] svg { color: var(--text); }
.desk .tab-scan { display: none !important; }
body:not(.desk) .tabs { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 0; margin: 0;
  padding: 4px max(6px, calc(50% - 274px)) max(6px, env(safe-area-inset-bottom));
  background: var(--s1); border-top: 1px solid var(--line-strong); box-shadow: 0 -10px 24px -18px var(--shadow); }
/* (no backdrop-filter on the bar: it would make it the containing block of Calendar and Settings, which are fixed to
   the top of the screen) */
body:not(.desk) .tabs > [data-tab="overview"] { order: 1; }
body:not(.desk) .tabs > [data-tab="home"] { order: 2; }
body:not(.desk) .tabs > .tab-scan { order: 3; }
body:not(.desk) .tabs > [data-tab="stock"] { order: 4; }
body:not(.desk) .tabs > [data-tab="deals"] { order: 5; }
/* the page you are on: an ink rule over the icon, the word in ink */
body:not(.desk) .tabs > button[aria-current="page"] { color: var(--text); }
body:not(.desk) .tabs > button[aria-current="page"]::before { content: ""; position: absolute; top: -5px; left: 50%; width: 24px; height: 3px;
  margin-left: -12px; border-radius: 0 0 3px 3px; background: var(--text); }
/* Scan: a cobalt key raised out of the bar */
body:not(.desk) .tabs > .tab-scan { align-self: start; justify-self: center; width: 64px; min-height: 64px; margin-top: -22px;
  border-radius: 20px; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--bg), 0 12px 20px -10px var(--shadow); transition: transform .15s var(--ease-out), background-color .15s; }
body:not(.desk) .tabs > .tab-scan svg { width: 26px; height: 26px; stroke-width: 2; }
body:not(.desk) .tabs > .tab-scan:hover { background: var(--accent-hover); color: var(--accent-ink); }
body:not(.desk) .tabs > .tab-scan:active { transform: scale(.94); }
/* Calendar and Settings: round keys in the top bar's corner */
body:not(.desk) .tabs > :is([data-tab="calendar"], [data-tab="settings"]) { position: fixed; top: max(12px, env(safe-area-inset-top));
  width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--text); }
body:not(.desk) .tabs > [data-tab="settings"] { right: max(10px, calc(50% - 270px)); }
body:not(.desk) .tabs > [data-tab="calendar"] { right: max(56px, calc(50% - 224px)); }
body:not(.desk) .tabs > :is([data-tab="calendar"], [data-tab="settings"])[aria-current="page"] { background: var(--text); color: var(--bg); }
body:not(.desk) .tabs > :is([data-tab="calendar"], [data-tab="settings"])[aria-current="page"]::before { display: none; }
body:not(.desk) .tabs > :is([data-tab="calendar"], [data-tab="settings"])[aria-current="page"] svg { color: var(--bg); }
body:not(.desk) .tabs > :is([data-tab="calendar"], [data-tab="settings"]) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); }
body.ledger:not(.desk) .top { padding-right: 112px; }
/* on the section screens the top bar stays (Calendar and Settings live in it); inside a card or deal the view's own
   sticky pager takes the top */
body.ledger:not(.desk):is([data-view="home"], [data-view="scans"], [data-view="selling"], [data-view="stock"], [data-view="deals"], [data-view="overview"], [data-view="calendar"], [data-view="settings"]) .top {
  position: sticky; top: 0; z-index: 5; background: var(--bg); }
body.ledger:not(.desk) .wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ledger:not(.desk) .pill.up { display: none; }  /* the scanner's status only when it is down */
/* the bar covers the bottom of the page: room for it under the last row, and the home dock steps aside for Scan */
body.ledger:not(.desk) main { padding-bottom: calc(var(--bar-h) + 40px); }
body.ledger:not(.desk) #home .dock { display: none; }
/* Scan is the bar's one primary: the section's own action (New deal, Record a purchase) steps down to a paper key on
   the left, above the bar, over the thumbnails rather than the amounts */
body.ledger:not(.desk):is([data-view="stock"], [data-view="deals"]) .actions.sticky { justify-items: start; pointer-events: none; }
body.ledger:not(.desk):is([data-view="stock"], [data-view="deals"]) .actions.sticky > button { pointer-events: auto; width: auto;
  min-height: 46px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--s1); color: var(--text);
  box-shadow: 0 12px 22px -12px var(--shadow); }
body.ledger:not(.desk):is([data-view="stock"], [data-view="deals"]) .actions.sticky > button:hover { background: var(--hover); }
body.ledger:not(.desk) #home.active { padding-bottom: 0; }
body.ledger:not(.desk):is([data-view="home"], [data-view="scans"], [data-view="selling"], [data-view="stock"], [data-view="deals"], [data-view="overview"], [data-view="calendar"], [data-view="settings"]) :is(.actions.sticky, .toast) {
  bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom)); }
body.ledger:not(.desk):is([data-view="home"], [data-view="scans"], [data-view="selling"], [data-view="stock"], [data-view="deals"], [data-view="overview"], [data-view="calendar"], [data-view="settings"]) footer {
  padding-bottom: calc(var(--bar-h) + 32px); }
body:not([data-view="home"]):not([data-view="scans"]):not([data-view="selling"]):not([data-view="stock"]):not([data-view="deals"]):not([data-view="overview"]):not([data-view="calendar"]):not([data-view="settings"]) .tabs { display: none; }

/* forms */
.field { display: grid; gap: 4px; min-width: 0; margin-top: 12px; }
.field .label { font-size: 12px; }
.field input, .field select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--s2); color: var(--text); font: 16px var(--font); font-variant-numeric: tabular-nums; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 48px; }
.pw-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 0 9px 9px 0; background: none; color: var(--muted); cursor: pointer; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--text); }
.field input::placeholder { color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.field-grid > .wide { grid-column: 1 / -1; }
/* the price box above the cards: "Price" beside Per card / Lump sum, then the % keys in one row (or the lump sum) */
#k-price { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin-top: 4px; }
#k-price[hidden] { display: none; }
#k-price > :not(.label, #k-mode) { grid-column: 1 / -1; }
#k-price #k-mode { margin-top: 0; }
#k-pcts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#k-pcts .chip { min-height: 44px; padding: 0 4px; }
#k-pcts .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.field-row.three { grid-template-columns: 1.1fr .8fr 1.3fr; }
#i-grade-row[hidden] { display: none; }
.grade-edit { display: block; margin: 6px 0 0; padding-left: 0; }
.form-buttons { display: flex; justify-content: flex-end; gap: 20px; margin-top: 8px; }
.form-buttons .text-btn { margin: 0; }
.field input:disabled { opacity: .45; }
.form-card { margin-top: 12px; }
.form-card > .text-btn { display: block; margin: 8px 0 0; padding-left: 0; }
.note.bad { color: var(--bad-text); }
.note.price-warn { color: var(--warn); }

/* segmented choices (kind of deal, price mode, who pays) */
.seg { display: flex; padding: 3px; border-radius: 99px; background: var(--s1); border: 1px solid var(--line); }
.seg button { flex: 1; min-height: 38px; padding: 0 12px; border: 0; border-radius: 99px; background: none; color: var(--muted);
  font: 700 14px var(--font); cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.seg.small { margin-top: 10px; background: var(--s2); }
.seg.small button[aria-checked="true"] { background: var(--s1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.compose-pager { grid-template-columns: 44px 1fr 44px; }

/* filter chips that are buttons */
.chips.filter { margin: 0 0 14px; }
.chips.filter button, #k-pcts .chip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--s1);
  color: var(--muted); font: 700 13px var(--font); cursor: pointer; }
.chips.filter button[aria-checked="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
#k-pcts .chip:not([aria-pressed="true"]):hover { color: var(--accent); border-color: var(--accent); }

/* login */
.auth { margin-top: 8px; }
.auth h1 { margin: 0; }
.auth-lang { width: max-content; margin: 0 0 14px auto; }
.auth-lang button { min-height: 32px; font-size: 13px; }
.auth .actions { margin-top: 16px; }
#auth-switch { margin: 10px 0 0; padding-left: 0; }

/* money: money in green, out plain; the sign says it too, never colour alone */
.num.in, .rows .pct span.in { color: var(--ok); }
.num.out, .rows .pct span.out { color: var(--out); }
.rows .pct span.muted, .big.muted { color: var(--muted); }
.rows .loss .pct small { color: var(--bad-text); }

/* stock */
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.stat-pair b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.stat-pair small { display: block; font-size: 12px; color: var(--muted); }
.stock-sum { margin-bottom: 14px; }
/* Stock's customer view (body.customer, ledger.js setCustomer): only what a customer may see, each card with its price.
   Costs, totals, margins and the vendor's buttons go, and the phone list stands in for the table at desk width. */
#st-customer[aria-pressed="true"] { padding: 4px 12px; border-radius: 999px; background: var(--text); color: var(--bg); }
body.customer :is(#stock .stock-sum, #st-sell, #st-share, #st-sold, #stock .st-tools, #stock .table-wrap, #st-buy) { display: none !important; }
/* the phone's Customer view key: the paper pill on the right of the action row, opposite Record a purchase (the desk
   CSS hides the row; desk width has #st-customer in the section head) */
body.ledger:not(.desk)[data-view="stock"] #stock .actions.sticky { grid-auto-flow: column; justify-content: space-between; }
body.ledger:not(.desk)[data-view="stock"] #stock .actions.sticky > button { padding: 0 14px; white-space: nowrap; }
body.ledger:not(.desk)[data-view="stock"] #stock .actions.sticky > #st-show { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; }
#st-show svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.ledger:not(.desk)[data-view="stock"] #stock .actions.sticky > #st-show[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
body:not(.ledger) #st-show, .desk #st-show { display: none; }
body.customer.desk #st-list { display: grid; }
body.customer #st-list li { cursor: default; }
.deal-sum .stat-pair { grid-template-columns: repeat(3, 1fr); }
/* phone: the stock and deals summaries are receipt headers, not hero numbers: the total on the heading's line, the
   parts as lines under a ruled edge */
body:not(.desk) .stock-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 14px 16px 6px; }
body:not(.desk) .stock-sum > .label { font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
body:not(.desk) .stock-sum > .big { margin: 0; font-size: 32px; text-align: right; }
body:not(.desk) .stock-sum .stat-pair { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 0; margin-top: 10px; padding-top: 2px;
  border-top: 2px solid var(--text); }
body:not(.desk) .stock-sum .stat-pair > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
body:not(.desk) .stock-sum .stat-pair > div:last-child { border-bottom: 0; }
body:not(.desk) .stock-sum .stat-pair .label { font-size: 14px; }
body:not(.desk) .stock-sum .stat-pair b { grid-row: 1 / span 2; grid-column: 2; font-size: 18px; text-align: right; }
body:not(.desk) .stock-sum .stat-pair small:empty { display: none; }
body:not(.desk) .stock-sum .unit { display: none; }
#stock .st-find, #pick > .find { margin: 2px 0 16px; }
:is(#stock, #deals, #deal, #pick) .rows .pct small { color: var(--muted); }
.rows li.sold { opacity: .55; }
/* several copies of one card: one stacked row; tapped open, its copies sit indented underneath */
.rows .stack img { box-shadow: 3px -3px 0 -1px var(--s2), 6px -6px 0 -2px var(--line-strong); }
.rows .stack.open { border-color: var(--line-strong); }
.rows li.copy { grid-template-columns: 1fr auto; min-height: 48px; margin-left: 28px; padding-left: 14px; }
.rows li.copy b { font-size: 14px; }
.empty-note { margin: 18px 2px 0; color: var(--muted); font-size: 14px; }
.actions.two { grid-template-columns: 1fr 1fr; }
.actions.two:has(> [hidden]) { grid-template-columns: 1fr; }
.actions.three { grid-template-columns: 1fr 1fr 1fr; }

/* deals */
.deal-row.voided { opacity: .5; }
.deal-row.voided b { text-decoration: line-through; }
.deal-head { margin-top: 8px; }
.deal-head .big { font-size: 52px; }
.deal-head .label { font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
/* saved: the receipt prints out of the till top-down, then settles with a small tug as it is torn off */
.deal-head.printing { animation: print .75s cubic-bezier(.3, .7, .2, 1) both; transform-origin: 50% 0; }
@keyframes print {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(-10px); }
  70% { clip-path: inset(0 0 0 0); transform: translateY(0); }
  84% { transform: translateY(3px) rotate(-.6deg); }
  100% { clip-path: inset(0 0 0 0); transform: none; }
}
.saved-day { display: block; margin-top: 2px; font-weight: 700; color: var(--text) !important; font-stretch: 85%;
  font-variant-numeric: tabular-nums; }
#dl-info { margin-top: 16px; }
#dl-void { color: var(--bad-text); }
/* right after saving: the deal view opens with this on top */
.saved { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 4px; padding: 14px;
  border-radius: 6px; background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  animation: saved-in .45s var(--ease-out); }
.saved[hidden] { display: none; }
.saved-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: var(--accent-ink); }
.saved-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; animation: saved-tick .4s .15s var(--ease-out) backwards; }
.saved .t { display: grid; gap: 2px; min-width: 0; }
.saved b { font-size: 17px; }
.saved small { color: var(--muted); font-size: 13px; }
.saved .primary { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--ok); background: var(--ok); color: var(--accent-ink);
  cursor: pointer; transition: transform .1s var(--ease-out); }
.saved .primary:active { transform: scale(.97); }
/* the same banner after putting cards on Tradera (tradera.js); red when Tradera said no */
#i-tr-sent, #tb-sent { margin-bottom: 12px; }
.saved .t .text-btn { justify-self: start; margin: 0; padding: 0; min-height: 32px; display: flex; align-items: center; text-decoration: none; }
.saved.failed { background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.saved.failed .saved-mark { background: var(--bad); }
.saved.failed .saved-mark svg { stroke-dasharray: none; animation: none; }  /* the tick's dash is too short for the ✕'s two strokes */
.saved.failed .primary { background: transparent; color: var(--text); border-color: var(--line-strong); }
@keyframes saved-in { from { transform: translateY(-8px) scale(.98); opacity: 0; } }
@keyframes saved-tick { from { stroke-dashoffset: 24; } }

/* overview: today's till roll (phone). A long receipt: the date printed in wide caps, the day's profit as the view's one
   display number, then the till's lines and how many deals made them */
.roll { margin-top: 2px; padding: 16px 18px 26px; }
.roll-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--text); }
.roll-head h2 { font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; }
.roll-date { font-size: 13px; font-weight: 700; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.roll .big { font-size: 64px; margin-top: 4px; }
.roll-lines { margin-top: 14px; }
.roll-lines > div:last-child { border-top: 2px solid var(--text); border-bottom: 0; margin-top: -1px; }
.roll-lines > div:last-child :is(dt, dd) { color: var(--text); font-weight: 800; }
.roll-count { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.desk #o-period-head { display: none !important; }
/* the till drawer: one tray per payment method that moved money today */
.drawer { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
/* four or more payment methods (an event's costs add bank and card) don't fit one row on a phone */
.drawer:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer > div { display: grid; gap: 2px; min-width: 0; padding: 9px 10px 8px; border-radius: 4px; background: var(--s2);
  box-shadow: inset 0 2px 4px -2px var(--shadow); }
.drawer .label { font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; }
.drawer b { font-size: clamp(14px, 4.4vw, 17px); font-weight: 800; overflow-wrap: anywhere; }
/* receipts on a roll: one strip of paper, perforated top and bottom, each deal a line on it */
.rows.roll-list { gap: 0; padding: 8px 14px; background: var(--s1);
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) top / 14px 51% repeat-x,
    radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) bottom / 14px 51% repeat-x;
  mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) top / 14px 51% repeat-x,
    radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) bottom / 14px 51% repeat-x; }
.rows.roll-list:empty { display: none; }
.rows.roll-list > li { padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.rows.roll-list > li:last-child { border-bottom: 0; }
.rows.roll-list > li:hover { background: var(--tint); }
/* the deal's kind printed as a stamp in its hue, the word inside it */
.kind-tag { display: inline-block; margin-right: 8px; padding: 2px 6px 1px; border-radius: 2px; background: var(--kc); color: var(--s1);
  font-size: 10.5px; font-weight: 800; font-stretch: 125%; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase;
  vertical-align: 2px; }
.deal-row.voided .kind-tag { background: none; color: var(--kc); box-shadow: inset 0 0 0 1.5px var(--kc); text-decoration: line-through; }
/* a deal's kind: a stamp of its hue before the word, the same hue the calendar dots use */
.deal-row { --kc: var(--k-adjustment); }
.deal-row.purchase { --kc: var(--k-purchase); }
.deal-row.sale { --kc: var(--k-sale); }
.deal-row.trade { --kc: var(--k-trade); }


.stats dd { font-size: 17px; }
/* figures as the lines of a receipt: label left, amount right, a dotted leader between */
.details.stats { grid-template-columns: 1fr; gap: 0; }
.details.stats > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.details.stats > div:last-child { border-bottom: 0; }
.details.stats dt { flex: 1; font-size: 14px; color: var(--muted); }
.details.stats dd { margin: 0; font-size: 17px; font-weight: 700; text-align: right; }

/* team: members and open invites */
.switch { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; cursor: pointer; }
.switch b { display: block; font-size: 15px; }
.switch small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.switch input { flex-shrink: 0; width: 22px; height: 22px; margin-left: auto; accent-color: var(--accent); cursor: pointer; }
#o-hidden { margin: 0 0 8px; }
.rows.team li { grid-template-columns: 1fr auto; cursor: default; }
.rows.team li:hover { background: var(--s1); border-color: var(--line); }
.team-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
.team-side .text-btn { margin: 0; min-height: 32px; font-size: 13px; }
.team-side .text-btn.danger { color: var(--bad-text); }
#o-invites:not(:empty) { margin-top: 6px; }
.invite { margin-bottom: 8px; }
.invite-for { display: block; margin-top: 14px; }
/* scanned off the owner's screen: always dark on white, whatever the theme */
.invite-qr { display: block; width: 196px; height: 196px; margin: 12px 0 4px; padding: 8px; border-radius: 10px; background: #fff; }
.invite code { display: block; margin-top: 6px; font: 700 15px/1.35 var(--font); color: var(--accent); word-break: break-all; user-select: all; }
.seg-btns.two { grid-template-columns: 1fr 1fr; }
.seg-btns.two:has(> [hidden]) { grid-template-columns: 1fr; }

/* result view: record the card */
.record { margin-top: 10px; }
.record .note { margin: 4px 0 0; }
.record .note:empty { display: none; }
.seg-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.seg-btns button { min-height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--s2); color: var(--text); cursor: pointer; }
.seg-btns button:hover { border-color: var(--accent); color: var(--accent); }

/* compose: a card per line with its price, quantity and condition */
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: 44px 1fr 36px; gap: 4px 12px; align-items: start; padding: 10px; background: var(--s1);
  border: 1px solid var(--line); border-radius: 12px; }
.line img { width: 44px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: var(--s2); }
.line .t { min-width: 0; padding-top: 2px; }
.line b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line small { display: block; font-size: 13px; color: var(--muted); }
.line .mk { font-size: 12px; }
.line button.icon.rm { width: 36px; height: 36px; }
.line .rm svg { width: 16px; height: 16px; }
.line.waiting { grid-template-columns: 44px 1fr; opacity: .7; }
.line.waiting b { font-weight: 600; color: var(--muted); }
.line-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.line-fields .field { margin-top: 4px; }
.line-fields .field select { padding-left: 8px; padding-right: 2px; }  /* four fields a row at 375 px: room for "Raw" */
/* ways to add cards: two equal keys a row, an odd last one the full width */
.add-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.add-row > :not([hidden]):last-child:nth-child(odd) { grid-column: 1 / -1; }
.add-row button { justify-content: center; }
.add-row button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--s1); color: var(--text); cursor: pointer; }
.add-row button:hover { border-color: var(--accent); color: var(--accent); }
.add-row svg { width: 18px; height: 18px; }
#k-pcts { margin-top: 10px; }
#k-error { margin: 14px 2px 0; }
/* the deal's total: a slip coming up out of the till, its top edge perforated. Kept low so the cards above it show
   on a small phone: how it was paid, then the total beside Save (a trade's two figures over Save) */
.compose-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 16px 16px 12px; border-radius: 0 0 8px 8px; background: var(--s1);
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) 0 0 / 14px 100%;
  mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) 0 0 / 14px 100%;
  filter: drop-shadow(0 -6px 14px var(--shadow)); }
.compose-bar > .k-pay, .compose-bar.pair > :is(.k-sum, #k-save) { grid-column: 1 / -1; }
.compose-bar #k-save { min-height: 48px; padding: 0 18px; }
.k-sum { display: grid; gap: 2px 14px; margin: 0; min-width: 0; }
.k-sum.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-sum:empty { display: none; }
.k-total { display: grid; gap: 3px; min-width: 0; }
.k-total .label { font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.k-total b { font-size: clamp(22px, 7.4vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.k-total b.long { font-size: clamp(18px, 5.4vw, 24px); }  /* "129 333,45 kr" still fits beside Save, never cut */
.k-total b.in { color: var(--ok); }
.k-total b.out { color: var(--out); }
.k-total b.loss { color: var(--bad-text); }
.k-sum.pair .k-total b { font-size: clamp(18px, 5.6vw, 26px); }
.k-sum.pair .k-total b.long { font-size: clamp(15px, 4.6vw, 22px); }
/* how it was paid: one tap per deal, right above Save */
.k-pay { display: grid; gap: 6px; }
.k-pay:not(.ask) .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }  /* the keys say it */
.k-pay .label { font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.k-pay .seg.small { margin-top: 0; }
.k-pay .seg button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 4px; font-weight: 700; }
.k-pay .seg button[aria-checked="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.k-pay.ask .label { color: var(--bad-text); }
.k-pay-qr { width: 15px; height: 15px; margin-left: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Swish: the QR code is held up to the customer's phone, so it is as big as the sheet allows, on white in both themes */
.swish-qr { display: grid; place-items: center; margin: 4px 0 12px; }
.swish-qr img { width: min(280px, 72vw); aspect-ratio: 1; padding: 10px; border-radius: 14px; background: #fff; }
.swish-amt { display: grid; justify-items: center; gap: 2px; margin: 0 0 10px; }
.swish-amt b { font-size: 34px; font-weight: 800; font-stretch: 125%; color: var(--ok); }
.swish-amt small { color: var(--muted); font-size: 14px; }
.swish-panel .actions { margin-top: 12px; }
.swish-panel .actions .primary { width: 100%; }
.k-pay.ask .seg { border-color: var(--bad-text); box-shadow: 0 0 0 1px var(--bad-text); }
.k-line { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-sum.pair .k-line { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.k-line:empty { display: none; }
.k-cap { font-size: 12px; color: var(--muted); }
.k-margin { display: grid; gap: 1px; }
.k-margin b { font-size: 14px; font-weight: 800; color: var(--text); }
.k-line .loss { color: var(--bad-text); }

/* pick: tap rows to choose them */
.pick-list li.chosen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* the tick sits on the picture, so ticking a row never rewraps its name and moves the rows under it */
.pick-list li { position: relative; }
.pick-list li.chosen::after { content: "\2713"; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 800 12px/20px var(--font); text-align: center; pointer-events: none; }
#pick .pager { grid-template-columns: 44px 1fr auto; }
#pk-title { text-align: left; font-size: 16px; font-weight: 800; color: var(--text); }
#pk-note { margin: 0 2px 12px; }
#pk-note:empty { display: none; }
body:has(#stock.active, #deals.active, #overview.active, #item.active, #deal.active, #compose.active, #pick.active, #product.active, #plink.active, #login.active, #settings.active) footer { padding-bottom: 24px; }

/* ==== desk width (≥1024px; desk.js sets body.desk once logged in): the back office ==================== */
/* Same world as the phone: paper on the counter, ink text, cobalt only on what can be pressed, green and orange for
   money in/out. A rail on the left, the overview as a canvas of tiles, stock and deals as tables, and a sheet on the
   right for a card, a deal or recording one. */
body:not(.desk) .desk-only { display: none !important; }
.desk { --rail: 248px; --sheet: min(460px, 36vw); --gut: 40px; }
.desk .top { display: none; }
.desk main { max-width: none; padding: 28px var(--gut) 40px calc(var(--rail) + var(--gut)); }
.desk[data-sheet] main { padding-right: calc(var(--sheet) + var(--gut)); }
.desk footer { max-width: none; margin: 0; padding: 0 var(--gut) 28px calc(var(--rail) + var(--gut)); text-align: left; }
/* the scanner screens keep their phone column, centred in the space next to the rail */
.desk:is([data-view="result"], [data-view="pageview"], [data-view="cardview"]) main > .view.active:not(#item, #deal, #compose, #pick, #product, #plink) { max-width: 600px; margin: 0 auto; }
.desk :is(.dock, .mode, .toast) { left: calc(50% + var(--rail) / 2); }
.desk :is(#home, #scans).active ~ .toast, .desk :is(#result, #cardview, #pageview, #lotview).active ~ .toast { bottom: max(16px, env(safe-area-inset-bottom)); }

/* rail */
.desk .tabs { position: fixed; inset: 0 auto 0 0; z-index: 6; width: var(--rail); margin: 0; padding: 22px 14px;
  display: flex !important; flex-direction: column; gap: 2px; overflow-y: auto; background: var(--bg); border-right: 1px solid var(--line); }
.desk .tabs > button { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 12px; font-size: 15px;
  justify-content: flex-start; text-align: left; }
.desk .tabs > button svg { width: 20px; height: 20px; flex-shrink: 0; }
.desk .tabs > button:hover { background: var(--s1); }
.desk .tabs > button[aria-current="page"] { background: var(--s1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.desk .tabs > button[aria-current="page"] svg { color: var(--text); }
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 20px; min-width: 0; }
.rail-toggle { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none;
  color: var(--text); cursor: pointer; }
.rail-toggle:hover { background: var(--s1); }
.rail-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 4px 0 8px; border-top: 1px solid var(--line); }
.rail-me { flex: 1; min-width: 0; }
.rail-me b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-me small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk .tabs .rail-foot > button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.desk .tabs .rail-foot > button:hover { background: var(--s1); color: var(--text); }
.desk .tabs .rail-foot svg { width: 18px; height: 18px; }
.rail-name { min-width: 0; }
.rail-name b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-name small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-search { flex: none; margin: 0 0 10px; }
.rail-search input { min-height: 42px; padding: 8px 34px 8px 40px; border-radius: 12px; font-size: 14px; }
.rail-search svg { left: 12px; width: 18px; height: 18px; }
.rail-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.desk .tabs > .rail-record { justify-content: center; margin: 0 0 18px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.desk .tabs > .rail-record:hover { background: var(--accent-hover); }
.desk .tabs > .rail-record kbd { margin-left: 4px; border-color: color-mix(in srgb, currentColor 35%, transparent); }
kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 5px; font: 700 11px/1.3 var(--font);
  color: inherit; opacity: .75; text-align: center; }

/* overview canvas */
.desk :is(#o-hidden, #o-period, #o-figures) { display: none !important; }
/* team and settings: pages of their own at desk width */
.page-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.page-bar h1 { margin: 0; font-size: 28px; }
#team-body { max-width: 760px; }
#team-body #o-team-head { margin-top: 0; }
#team-body #o-team-head h2 { display: none; }
/* the phone opens Team from Settings and goes back there; at desk width the rail is there */
.team-pager { grid-template-columns: 44px 1fr; }
.desk .team-pager { display: none; }
body:not(.desk) #team .page-bar h1 { font-size: 26px; }
.placeholder { max-width: 760px; }
.placeholder .note { max-width: 62ch; }
/* reports: the period for the books, its statement and the CSV downloads */
.rp-bar { flex-wrap: wrap; }
.rp-bar .seg { margin-left: auto; }
.rp-bar .seg button { flex: none; min-height: 36px; padding: 0 14px; }
.rp-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; }
.rp-date { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rp-date input { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--s1);
  color: var(--text); font: 600 14px var(--font); color-scheme: dark; }
.rp-date input:focus { border-color: var(--accent); outline: none; }
.rp-status { align-self: center; font-size: 14px; color: var(--muted); }
.rp-status.bad { color: var(--bad-text); }
.rp-btn { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--s2);
  color: var(--text); font: 600 14px var(--font); white-space: nowrap; cursor: pointer; }
.rp-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rp-btn:disabled { opacity: .6; cursor: default; }
.rp-range .rp-btn { margin-left: auto; }
.rp-print-head { display: none; }
.rp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rp-result, .rp-stock, .rp-money { grid-column: span 4; }
.rp-files { grid-column: span 5; }
.rp-months { grid-column: span 7; }
/* a statement: label on the left, amount on the right, subtotals and the total ruled off */
.stmt { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.stmt :is(th, td) { padding: 7px 0; font-weight: 400; text-align: left; vertical-align: baseline; }
.stmt th small { display: block; font-size: 12px; color: var(--muted); }
.stmt td.n { text-align: right; white-space: nowrap; padding-left: 12px; }
.stmt tr.sub :is(th, td) { border-top: 1px solid var(--line-strong); font-weight: 700; }
.stmt tr.sub:first-child :is(th, td) { border-top: 0; padding-top: 0; }
.stmt tr.total :is(th, td) { border-top: 2px solid var(--line-strong); padding-top: 10px; font-size: 16px; font-weight: 800; }
.stmt.grid thead th { padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.stmt.grid thead th.n { text-align: right; }
.stmt.grid tbody :is(th, td) { border-top: 1px solid var(--line); }
.stmt.grid tbody tr.total :is(th, td) { border-top: 2px solid var(--line-strong); font-size: 14px; }
.stmt .muted { color: var(--muted); }
.rp-files-note { margin: -6px 0 6px; }
.rp-list { margin: 0; padding: 0; list-style: none; }
.rp-list li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.rp-list li:first-child { border-top: 0; }
.rp-list li > span { flex: 1; min-width: 0; }
.rp-list b { display: block; font-size: 15px; }
.rp-list small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.rp-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; cursor: pointer; }
.rp-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rp-scroll { overflow-x: auto; margin: 0 -22px -20px; }
.table.rp-table tbody tr { cursor: default; }
.table.rp-table tbody tr:hover td { background: none; }
.table.rp-table th { position: static; }
.table.rp-table :is(th, td) { padding-left: 10px; padding-right: 10px; }
.table.rp-table :is(th, td):last-child { padding-right: 22px; }
.table.rp-table :is(th, td):first-child { padding-left: 22px; }
@media (max-width: 1279px) {
  .rp-result, .rp-stock { grid-column: span 6; }
  .rp-money, .rp-files, .rp-months { grid-column: span 12; }
}
/* the phone: Reports is a page opened from the Overview, one column, the periods a row to scroll sideways */
body:not(.desk) #reports .page-bar h1 { font-size: 26px; }
body:not(.desk) .rp-bar .seg { margin-left: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
body:not(.desk) .rp-grid { grid-template-columns: minmax(0, 1fr); }
body:not(.desk) .rp-grid > .tile { grid-column: 1 / -1; padding: 16px; }
body:not(.desk) .rp-range .rp-btn { margin-left: 0; }
body:not(.desk) .rp-list li { flex-wrap: wrap; gap: 8px 16px; }
body:not(.desk) .rp-scroll { margin: 0 -16px -16px; }
/* the statement on paper: black on white, only the period's figures */
@media print {
  :root { --text: #000; --muted: #555; --line: #ccc; --line-strong: #888; color-scheme: light; }
  html, body { background: #fff; color: #000; }
  .desk main { padding: 0; }
  .desk .tabs, .desk footer, .toast, .rp-bar .seg, .rp-range, .rp-files, .rp-months, #rp-hidden { display: none !important; }
  .page-bar { margin-bottom: 4px; }
  .rp-print-head { display: block; margin: 0 0 18px; font-size: 14px; }
  .rp-grid { display: block; }
  .rp-grid .tile { margin-bottom: 16px; padding: 0; border: 0; background: none; break-inside: avoid; }
  .stmt { max-width: 520px; }
}
/* desk overview: the till roll down the left (today, the drawer, the day's receipts: the phone's first screen), the
   period as a canvas on the right: one sheet for its profit, curve and figures, then what needs a look, stock, calendar */
.desk #overview.active { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); column-gap: 28px;
  align-items: start; max-width: 1560px; }
.desk #overview > * { grid-column: 1; min-width: 0; }
.desk #overview > .canvas-bar { grid-column: 1 / -1; margin-bottom: 18px; }
.desk #overview > #o-canvas { grid-column: 2; grid-row: 2 / span 8; }
/* the roll and the period sheet are headed alike and start on one line: their rules and big numbers line up */
.desk #overview > #o-roll { margin-top: 0; padding: 22px 26px 30px; }
.desk #overview > .section-head { margin-top: 24px; }
.canvas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; margin-bottom: 28px; }
.canvas-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.canvas-bar h1 { margin: 0; font-size: 28px; }
.canvas-bar .seg { margin-left: auto; }
.canvas-bar .seg button { flex: none; min-height: 36px; padding: 0 16px; }
.tile { min-width: 0; padding: 20px 22px; background: var(--s1); border: 0; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.tile h2 { margin: 0; font-size: 15px; }
.tile-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.tile-head .text-btn { min-height: 0; padding: 0; }
.t-start { grid-column: 1 / -1; padding: 28px; }
.t-start h2 { font-size: 22px; }
.t-start .note { max-width: 62ch; }
.tile-actions { display: flex; gap: 10px; margin-top: 18px; }
.tile-actions button { min-height: 46px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--s2); color: var(--text); cursor: pointer; }
.tile-actions button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.t-period { grid-column: 1 / -1; padding: 22px 26px 18px; }
.t-period .big, .desk #o-roll .big { margin-top: 4px; font-size: 64px; white-space: nowrap; }
.period-subs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin-top: 10px; }
.period-subs p { margin: 0; padding: 0; }
.chart-head { margin: 24px 0 10px; }
.chart-head h3 { margin: 0; font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.details.stats.period-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin-top: 18px; border-top: 1px solid var(--line); }
.details.stats.period-lines > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.big.loss, .num.loss, .mini .v.loss { color: var(--bad-text); }
.t-sub { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.t-cmp { margin: auto 0 0; padding-top: 16px; font-size: 14px; font-weight: 700; color: var(--muted); }
.readout { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart { display: block; width: 100%; height: 190px; overflow: visible; }
.chart rect { stroke: none; }
.chart .hit { fill: transparent; }
.chart .bar { fill: var(--ok); opacity: .8; transition: opacity .15s, fill .15s; }
.chart .bar.neg { fill: var(--bad); }
.chart g { outline: none; cursor: default; }
.chart g:hover .bar, .chart g:focus .bar { opacity: 1; }
.chart g:hover .bar.neg, .chart g:focus .bar.neg { opacity: 1; }
.chart .zero { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }
.t-attn { grid-column: span 7; }
.t-cal { grid-column: span 5; grid-row: span 2; }
.t-stock { grid-column: span 7; }
#c-hidden { grid-column: 1 / -1; margin: 0; }
.canvas.no-figures .figures, .canvas.empty :is(.figures, .t-attn) { display: none; }

.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: calc(100% + 16px);
  margin: 0 -8px; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mini button:hover { background: var(--s2); }
.mini img { width: 28px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; background: var(--s2); }
.mini b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mini .v.in { color: var(--ok); }
.mini .v.out { color: var(--out); }
.attn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.attn-head { padding: 0 0 6px; border: 0; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; }
.attn-head:hover { color: var(--accent); }
.attn-foot { display: block; margin: 12px 0 0; padding: 0; min-height: 0; }
.attn-foot:disabled { color: var(--muted); opacity: 1; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 20px; margin: 0; }
.strip dt { font-size: 12px; color: var(--muted); }
.strip dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }


/* stock and deals as tables */
.desk :is(#st-list, #d-list) { display: none; }
.desk :is(#stock, #deals) .actions.sticky { display: none; }
/* the stock and deals summaries: a row of equal figures, label over value over note, ruled apart like a ledger */
.desk .stock-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; row-gap: 4px;
  margin-bottom: 18px; padding: 18px 0; }
.desk .deal-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.desk .stock-sum > .label { grid-area: 1 / 1; padding: 0 22px; }
.desk .stock-sum .stat-pair { display: contents; }
.desk .stock-sum .stat-pair > div { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; padding: 0 22px; border-left: 1px solid var(--line); }
.desk .stock-sum :is(.big, .stat-pair b) { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.desk .stock-sum > .big { grid-area: 2 / 1; padding: 0 22px; }
.desk .stock-sum .unit { margin-left: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
/* Stock at desk width, laid out without moving the phone's markup (the section head and the tools fall apart into the
   flow): the heading, the tabs and the section's actions on one line; the search, the filters and the row count on the
   next with the row count; the total under them (desk.js stockTotal) in place of the summary card; then the table. */
.desk #stock.active { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.desk #stock :is(.section-head, .st-tools) { display: contents; }
.desk #stock .stock-sum { display: none; }
.desk #stock > :is(.table-wrap, #st-list, .empty-note) { flex: 1 0 100%; order: 5; }
.desk #stock::before { content: ""; order: 2; flex: 1 0 100%; }  /* the line break after the heading's line */
.desk #stock > .st-h { order: 1; margin: 0 14px 16px 0; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.desk #stock > .st-groups { order: 1; margin: 0 auto 16px 0; }
.desk #stock :is(#st-sell, #st-share, #st-customer) { order: 1; min-height: 38px; margin: 0 0 16px 8px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--s2); color: var(--text); font: 700 14px var(--font); }
.desk #stock :is(#st-sell, #st-share, #st-customer):hover { background: var(--hover); }
.desk #stock #st-customer[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.desk #stock > .st-find { display: contents; }
.desk #stock .st-find > .find { order: 3; flex: 0 1 380px; margin: 0 4px 12px 0; }
.desk #stock .st-find > .find input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.desk #stock :is(#st-nomarket, #st-sold) { order: 3; margin: 0 0 12px; }
.desk #stock #st-sold { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--s1);
  color: var(--muted); font: 700 13px var(--font); }
.desk #stock #st-sold:hover { color: var(--text); }
.desk #stock #st-sold[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.desk #stock #st-title { order: 4; margin: 0 0 12px auto; color: var(--muted); }
/* the total: the rows shown summed up, small-labelled figures on a line of their own between the search and the table
   (beside the search they did not fit at 1280px with the filters) */
.desk #stock .st-total { order: 4; flex: 1 0 100%; display: flex; gap: 36px; margin: 2px 0 16px; }
.desk #stock .st-total dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.desk #stock .st-total dt small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.desk #stock .st-total dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.desk #stock .st-total .muted { color: var(--muted); }
.desk #stock .st-total .pos { color: var(--ok); }
.desk #stock .st-total .neg { color: var(--bad-text); }
.desk #stock .table-wrap { min-width: 0; overflow-x: clip; }
/* beside a sheet the table may not fit: it scrolls sideways again, and its head stays at its own top */
.desk[data-sheet] #stock .table-wrap { overflow-x: auto; }
.st-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.chip-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--s1); color: var(--muted);
  font: 700 13px var(--font); cursor: pointer; }
.chip-btn:hover { color: var(--text); }
.chip-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.table-wrap { overflow-x: auto; background: var(--s1); border: 0; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; background: var(--s1); border-bottom: 1px solid var(--line-strong);
  font: 600 12px var(--font); color: var(--muted); text-align: left; white-space: nowrap; }
.table th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.table th button:hover, .table th[aria-sort="ascending"] button, .table th[aria-sort="descending"] button { color: var(--text); }
.table th[aria-sort="ascending"] button::after, .table th[aria-sort="descending"] button::after { content: ""; display: inline-block; width: 5px; height: 5px;
  margin-left: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-2px) rotate(45deg); }
.table th[aria-sort="ascending"] button::after { transform: translateY(1px) rotate(-135deg); }
.table td { padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table tbody tr { cursor: pointer; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--tint); }
.table tbody tr.on td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table .n { text-align: right; }
.table .muted { color: var(--muted); }
.table .pos { color: var(--ok); font-weight: 700; }
.table .neg { color: var(--bad-text); font-weight: 700; }
.table tr:is(.sold, .voided) td { opacity: .5; }
.table tr.voided .kind { text-decoration: line-through; }
.table .kind { font-weight: 700; }
.table tr.stack .card-cell img { box-shadow: 2px -2px 0 -1px var(--s2), 4px -4px 0 -2px var(--line-strong); }
.table tr:is(.stack.open, .copy) td { background: var(--tint); }
.table tr.copy .card-cell { padding-left: 54px; }
.table tr.copy .card-cell img { display: none; }
.card-cell img { width: 28px; aspect-ratio: 63 / 88; margin-right: 12px; object-fit: cover; border-radius: 3px; background: var(--s2); vertical-align: middle; }
.card-cell > span { display: inline-block; max-width: 300px; vertical-align: middle; }
.card-cell b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.card-cell small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.desk #deals .chips.filter { margin-bottom: 16px; }
/* with a sheet open the table keeps the columns that matter: card, numbers, margin */
.desk[data-sheet] .table .opt { display: none; }
.desk[data-sheet] .card-cell > span { max-width: 170px; }
.desk[data-sheet] main { padding-right: calc(var(--sheet) + 24px); }
.desk[data-sheet] .table :is(th, td) { padding-left: 10px; padding-right: 10px; }
/* When and Deal keep their place when a sheet opens: only the cards column gives and takes room */
#d-table :is(th, td):nth-child(1) { width: 96px; padding-left: 14px; padding-right: 14px; }
#d-table :is(th, td):nth-child(2) { width: 90px; padding-left: 14px; padding-right: 14px; }

/* the sheet: a card, a deal, recording a deal, picking cards */
.desk :is(#item, #deal, #compose, #pick, #evsheet, #product, #plink, #tlist, #share).active,
.desk[data-sheet="cardview"] #cardview.active { position: fixed; top: 0; right: 0; bottom: 0; z-index: 8; width: var(--sheet);
  padding: 0 24px 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 60px -30px var(--shadow); animation: sheet-in .3s var(--ease-out); }
.desk :is(#item, #deal, #compose, #pick, #evsheet, #product, #plink, #tlist, #cardview) .pager { margin: 0 -24px; padding: 16px 24px 10px; }
.desk :is(#item, #deal, #compose, #pick, #evsheet, #product, #plink, #tlist, #share) .actions.sticky { bottom: 16px; }
.desk #item .hero { width: 170px; }
@keyframes sheet-in { from { transform: translateX(28px); opacity: 0; } }

/* calendar and events (calendar.js). Deal kinds are dots, event kinds are tinted bars; teal stays for the selection */
:root { --ev-fair: #ffb020; --ev-event: #c08cff; --ev-other: #8b929c; }
:root[data-theme="light"] { --ev-fair: #b06e00; --ev-event: #8a4fd8; --ev-other: #6b6558; }
.page-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--s2); color: var(--text); font: 700 14px var(--font); cursor: pointer; }
.page-btn svg { width: 18px; height: 18px; }
.page-btn.primary { margin-left: auto; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.page-btn.primary:hover { background: var(--accent-hover); }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--s1); color: var(--text); cursor: pointer; }
.icon-btn:hover { background: var(--s2); }
.icon-btn svg { width: 18px; height: 18px; }
.cal-bar h1 { min-width: 9.5ch; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cal-side { display: grid; gap: 16px; align-items: start; }
.cal-month { padding: 14px 14px 12px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { padding: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-head span { padding-left: 8px; }
.cal-head .wk, .cal-grid .wk { padding: 0; text-align: center; }
.cal-grid .wk { padding-top: 9px; font-size: 11px; font-weight: 600; color: var(--muted); opacity: .7; font-variant-numeric: tabular-nums; }
.cal-cell { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 104px; padding: 6px 6px 7px;
  border: 1px solid transparent; border-radius: 12px; background: var(--s2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cal-cell:hover { border-color: var(--line-strong); }
.cal-cell.out { background: transparent; }
.cal-cell.out .d { color: var(--muted); opacity: .6; }
.cal-cell.on { border-color: var(--text); background: var(--s1); box-shadow: inset 0 0 0 1px var(--text); }
.cal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-cell .d { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.cal-cell.today .d { background: var(--text); color: var(--bg); }
.cal-cell .evs { display: grid; gap: 2px; min-width: 0; }
.ev-bar { display: block; min-width: 0; padding: 1px 6px; border-radius: 5px; border-left: 3px solid var(--evc);
  background: color-mix(in srgb, var(--evc) 16%, transparent); color: var(--text); font-size: 11.5px; font-weight: 700; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-bar.cont { border-left-color: transparent; color: color-mix(in srgb, var(--text) 70%, transparent); }
.ev-more { padding-left: 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
.fair { --evc: var(--ev-fair); }
.event { --evc: var(--ev-event); }
.other { --evc: var(--ev-other); }
.cal-cell .dl { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: auto; font-size: 12px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-cell .dots { display: inline-flex; gap: 3px; }
.k { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--k-adjustment); }
.k.sale { background: var(--k-sale); }
.k.purchase { background: var(--k-purchase); }
.k.trade { background: var(--k-trade); }
.cal-cell .pr { position: absolute; top: 11px; right: 8px; max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-cell .pr.in, .cd-stats .in { color: var(--ok); }
.cal-cell .pr.loss, .cd-stats .loss { color: var(--bad-text); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 4px 0; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ev-swatch { display: inline-block; width: 12px; height: 9px; border-radius: 2px; border-left: 3px solid var(--evc);
  background: color-mix(in srgb, var(--evc) 30%, transparent); }
.cal-status { margin-left: auto; }
.cd-stats { margin-bottom: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-stats dd { font-size: 17px; }
.cd-sub { margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
#cd-events:empty, #cu-list:empty { display: none; }

.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev-list button { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--evc); border-radius: 12px; background: var(--s2); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.ev-list button:hover { border-color: var(--line-strong); border-left-color: var(--evc); }
.ev-list .when { display: grid; justify-items: center; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ev-list .when b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ev-list .when small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ev-list .t { min-width: 0; }
.ev-list .t b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-list .t small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-list .t .kindl { color: var(--evc); font-weight: 700; }
.ev-list.compact button { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
.ev-list.compact .when b { font-size: 17px; }
.ev-list.compact .when small { font-size: 10px; }
.ev-list li.past button { opacity: .75; }
.ev-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1100px; }
.ev-lists > .evl-now { grid-column: 1 / -1; }

.field textarea { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--s2);
  color: var(--text); font: 16px/1.4 var(--font); resize: vertical; }
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.field textarea::placeholder, .field input::placeholder { color: var(--muted); }
#ev-kind { margin-top: 14px; }
#ev-kind button[data-kind]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: var(--evc); vertical-align: 1px; }
#ev-kind [data-kind="fair"] { --evc: var(--ev-fair); }
#ev-kind [data-kind="event"] { --evc: var(--ev-event); }
#ev-kind [data-kind="other"] { --evc: var(--ev-other); }
#ev-head { font-weight: 800; }
.ev-result-text { margin: 6px 0 0; font-size: 18px; font-weight: 800; }
.ev-result .text-btn { display: block; margin: 6px 0 0; padding-left: 0; }
.ev-delete { display: block; margin: 4px 0 32px; padding: 10px 0; }
.desk[data-sheet] .cal-layout, .desk[data-sheet] .ev-lists { grid-template-columns: minmax(0, 1fr); }
.desk[data-sheet] .cal-cell { min-height: 88px; }
.desk[data-sheet] .cal-cell .pr { display: none; }

/* the small calendar on the overview */
.mcal-month { font-size: 13px; font-weight: 600; color: var(--muted); }
.mcal-head, .mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.mcal-head { margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; }
.mcal button { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; height: 40px; padding: 5px 0 0;
  border: 0; border-radius: 10px; background: none; color: var(--text); font: 600 13px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.mcal button:hover { background: var(--s2); }
.mcal button.out { color: var(--muted); opacity: .45; }
.mcal .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.mcal .today .n { background: var(--text); color: var(--bg); font-weight: 800; }
.mcal .ev .n { box-shadow: inset 0 -3px 0 var(--evc); border-radius: 6px; }
.mcal .today.ev .n { border-radius: 50%; box-shadow: 0 0 0 2px var(--evc); }
.mcal .marks { display: flex; gap: 2px; height: 5px; }
.mcal .marks .k { width: 5px; height: 5px; }
.mcal-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; width: 100%; margin: 12px 0 0; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--evc); border-radius: 12px; background: var(--s2); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.mcal-next:hover { border-color: var(--line-strong); border-left-color: var(--evc); }
.mcal-next .l { grid-row: span 2; align-self: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mcal-next b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcal-next small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* narrower desks (tablets, small laptops): the rail shrinks to icons, the menu button lays it out in full over the
   page, the canvas regroups and the sheet lies over the table instead of squeezing it */
@media (max-width: 1279px) {
  .desk { --rail: 76px; --gut: 28px; --sheet: min(440px, 48vw); }
  .desk .rail-toggle { display: grid; }
  .desk:not(.rail-open) .tabs :is(.lbl, .rail-name, .rail-me, kbd, .logo, .rail-n) { display: none; }
  .desk:not(.rail-open) .tabs > .rail-sub { margin-left: 0; }
  .desk:not(.rail-open) .rail-search { display: none; }
  .desk:not(.rail-open) .tabs > button, .desk:not(.rail-open) .tabs .rail-foot > button { justify-content: center; padding: 0; }
  .desk:not(.rail-open) .rail-brand { justify-content: center; padding: 2px 0 14px; }
  .desk:not(.rail-open) .rail-foot { justify-content: center; padding: 14px 0 0; }
  .desk.rail-open .tabs { width: 260px; box-shadow: 30px 0 60px -30px var(--shadow); }
  .desk[data-sheet] main { padding-right: var(--gut); }
  .desk #overview.active { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); column-gap: 20px; }
  .t-attn { grid-column: 1 / -1; }
  .t-stock, .t-cal { grid-column: span 6; grid-row: auto; }
  .details.stats.period-lines { grid-template-columns: 1fr; }
  .canvas-bar { flex-wrap: wrap; }
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-cell { min-height: 88px; }
}

/* ==== settings (settings.js): a grouped list whose rows open a page; on the phone the page takes the list's place,
   at desk width it sits beside the list ======================================================================== */
.top button.top-settings { flex-shrink: 0; width: 38px; height: 38px; }
.top .top-settings svg { width: 20px; height: 20px; }
#settings .page-bar { margin-bottom: 14px; }
.settings-body { max-width: 640px; padding-bottom: 32px; }
.s-group + .s-group, .s-index > .note + .s-group { margin-top: 24px; }
.s-group-h, .desk .s-page-head h2 { margin: 0 2px 8px; font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* the list is one slip of paper, its rows ruled apart */
.s-list { background: var(--s1); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.s-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0; padding: 10px 14px 10px 16px;
  border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.s-item + .s-item { border-top: 1px solid var(--line); }
.s-item:hover { background: var(--s2); }
.s-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s-item > span { flex: 1; min-width: 0; }
.s-item b { display: block; font-size: 15px; font-weight: 700; }
.s-item small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-item.switch small { white-space: normal; }
.s-item > svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--muted); }
.s-item.s-danger b { color: var(--bad-text); }
#s-login-note { margin: 18px 2px 0; }
/* a page: its own heading under a way back to the list */
.s-page-head { margin-bottom: 14px; }
.s-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -6px 0 2px -6px; padding: 0 6px; border: 0;
  background: none; color: var(--accent); font: 600 15px var(--font); cursor: pointer; }
.s-back svg { width: 18px; height: 18px; }
.s-page-head h2 { font-size: 24px; outline: none; }
body:not(.desk) #settings.s-in-page :is(.s-index, .page-bar) { display: none; }
.settings-body .form-card { margin-top: 0; }
.settings-body .form-card + .form-card, .settings-body .card + .card { margin-top: 10px; }
.settings-body .seg.small { margin-top: 8px; }
.settings-body .text-btn { display: block; margin: 8px 0 0; padding-left: 0; }
.settings-body .form-card .actions { margin-top: 14px; }
/* desk width: the list on the left (the open page marked), the page on the right */
.desk .settings-body { max-width: 1000px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.desk .s-pages { max-width: 640px; }
.desk .s-back { display: none; }
/* the page's heading is set like the list's group heads, so the first card of each side starts on one line */
.desk .s-page-head { margin-bottom: 0; }
.desk .s-item[aria-current="page"] { background: var(--s2); box-shadow: inset 3px 0 0 var(--accent); }
.settings-body .note.s-first { margin-top: 0; }
.settings-body .seg-btns { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.s-now { margin: 6px 0 0; font-weight: 700; word-break: break-all; }
.s-row { display: flex; align-items: center; gap: 12px; }
.s-row > div, .s-row > .note { flex: 1; min-width: 0; }
.s-row b { display: block; font-size: 15px; }
.s-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.s-row .text-btn { flex-shrink: 0; margin: 0 0 0 auto; max-width: 50%; text-align: right; }
#s-login-note { margin-top: 18px; }
.danger-card { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.actions button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.actions button.danger:hover { filter: brightness(1.08); }
.field input:disabled { opacity: .7; }
/* without a login: a close button and the gear in the top bar; logged in, Settings is a tab (the rail at desk width) */
.settings-pager { grid-template-columns: 44px 1fr; }
:is(.desk, .ledger) .settings-pager, .ledger .top-settings { display: none; }
body:not(.desk) #settings .page-bar h1 { font-size: 26px; }

/* ==== calendar on the phone: a compact month (the date, event stripes and deal dots), the day underneath ======== */
body:not(.desk) .cal-bar { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
body:not(.desk) .cal-bar h1 { flex: 1; min-width: 0; font-size: 24px; }
body:not(.desk) #cal-new { display: none; }  /* the day below has Plan event for the selected day */
body:not(.desk) .cal-layout, body:not(.desk) .cal-side { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body:not(.desk) .cal-month { margin: 0 -8px; padding: 10px 6px 10px; }
body:not(.desk) :is(.cal-head, .cal-grid) { grid-template-columns: 18px repeat(7, minmax(0, 1fr)); gap: 3px; }
body:not(.desk) .cal-head span { padding-left: 0; text-align: center; }
body:not(.desk) .cal-grid .wk { padding-top: 12px; font-size: 10px; }
body:not(.desk) .cal-cell { align-items: center; gap: 3px; min-height: 52px; padding: 4px 1px 5px; border-radius: 10px; }
body:not(.desk) .cal-cell .d { width: 26px; height: 26px; }
body:not(.desk) .cal-cell .evs { width: 100%; gap: 2px; padding: 0 3px; }
body:not(.desk) .cal-cell .ev-bar { height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--evc); font-size: 0; }
body:not(.desk) .cal-cell .ev-bar.cont { background: color-mix(in srgb, var(--evc) 55%, transparent); }
body:not(.desk) .cal-cell :is(.ev-more, .pr, .dl > span:last-child) { display: none; }
body:not(.desk) .cal-cell .dl { margin-top: auto; }
body:not(.desk) .cal-cell .dots { gap: 2px; }
body:not(.desk) .cal-cell .dots .k { width: 5px; height: 5px; }
body:not(.desk) .cal-cell .dots .k:nth-child(n+4) { display: none; }
body:not(.desk) .cal-legend { gap: 6px 12px; margin: 10px 4px 0; font-size: 11.5px; }
body:not(.desk) .cal-status { flex-basis: 100%; margin-left: 0; }
body:not(.desk) .cal-status:empty { display: none; }

/* ---- Tradera (tradera.js): the listings on a card, the listing form, the account in Settings ---- */
.tr-box { margin-top: 14px; }
.tr-head { display: flex; align-items: center; gap: 12px; }
.tr-head .text-btn:disabled { color: var(--muted); cursor: default; }
.tr-head .text-btn + .text-btn { margin-left: 0; }
.tr-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.tr-list:empty { display: none; }
.tr-list li { padding-top: 10px; border-top: 1px solid var(--line); }
.tr-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tr-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tr-sub:empty { display: none; }
.tr-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tr-acts:empty { display: none; }
.tr-acts .text-btn { display: inline-flex; align-items: center; margin-left: 0; text-decoration: none; }
.text-btn.danger { color: var(--bad-text); }
.tr-gap { display: block; margin-top: 16px; }
/* Settings: the shipping per kind, rows of (shipping, buyer pays, remove) */
.tr-ship-kind { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tr-ship-kind > b { display: block; font-size: 15px; }
.tr-ship-kind > small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.tr-ship-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 44px; gap: 8px; align-items: end; }
.tr-ship-row .field { margin-top: 8px; }
.tr-ship-row + .tr-ship-row .label { display: none; }  /* the column names once, over the first row */
.tr-ship-row select { padding-right: 6px; text-overflow: ellipsis; }
.tr-ship-row .icon-btn { width: 44px; height: 46px; border-radius: 10px; }
.settings-body .tr-ship-save { margin-top: 16px; }
#tlist .field-row { align-items: end; }
#tlist .field textarea { min-height: 150px; resize: vertical; }

/* Tradera bulk (#tbulk) */
.tr-chips { margin-top: 8px; }
.tr-vars { margin: 6px 0 4px; }
.tr-vars .chip-btn { min-height: 30px; padding: 0 10px; font-size: 13px; }
.tr-add-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.tr-add-row button { min-height: 46px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2);
  color: var(--text); font: 600 14px var(--font); cursor: pointer; }
.tr-add-row button.primary-lite { border-color: var(--accent); color: var(--accent); }
.tr-scan-note { margin-top: 8px; font-size: 13px; }
.tr-pick { margin-top: 12px; }
.tr-pick .rows { margin-top: 8px; max-height: 50vh; overflow: auto; }
.tr-bulk { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tr-bulk > li { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); }
/* photos picked for the list: how far they have come, and each one still being read */
.tb-progress { margin: 0 0 10px; }
.tb-progress p { margin: 0 0 6px; font-size: 14px; }
.tb-progress span { color: var(--muted); }
.tb-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tb-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s var(--ease-out); }
.tb-progress.done .tb-bar i { background: var(--ok); }
.tr-bulk > li.tb-wait { border-style: dashed; color: var(--muted); }
.tr-bulk > li.tb-wait .tb-name { text-align: left; }
.tb-wait .tb-photo { position: relative; }
.tb-wait .tb-photo img { opacity: .6; }
.tb-wait.reading .tb-photo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent); animation: tb-scan 1.2s ease-in-out infinite alternate; }
@keyframes tb-scan { to { transform: translateY(73px); } }
@media (prefers-reduced-motion: reduce) { .tb-wait.reading .tb-photo::after { animation: none; } }
.tr-bulk > li.done { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.tr-bulk > li.failed { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.tb-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.tb-photos { display: flex; flex-wrap: wrap; gap: 6px; max-width: 114px; }
.tb-gallery { flex-basis: 100%; margin: 0; min-height: 28px; padding: 0; font-size: 12px; text-align: left; }
.tb-photo { position: relative; display: grid; place-items: center; width: 54px; aspect-ratio: 63 / 88; overflow: hidden; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--s2); color: var(--muted); font-size: 11px; text-align: center; cursor: pointer; }
.tb-photo img { width: 100%; height: 100%; object-fit: cover; }
.tb-photo.empty { border-style: dashed; color: var(--accent); font-weight: 600; padding: 2px; }
.tb-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tb-name b { display: block; font-size: 15px; line-height: 1.25; }
.tb-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.tb-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--s2); color: var(--muted); font-size: 18px; cursor: pointer; }
.tb-stock { margin-top: 10px; font-size: 13px; color: var(--muted); }
.tb-stock select { max-width: 100%; margin-top: 4px; min-height: 36px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--s2); color: var(--text); font: inherit; padding: 4px 8px; }
.tb-stock.missing { color: var(--warn); }
.tb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tb-fields .field { margin-top: 8px; }
.tb-fields .field input, .tb-fields .field select { min-height: 42px; }
.tb-status { margin-top: 8px; font-size: 13px; }
.tb-status:empty { display: none; }
.tb-status.bad { color: var(--bad-text); }
.tb-status.ok { color: var(--ok); }
.tb-market { grid-column: 1 / -1; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* photos of a stock row's copy (item view) */
.i-photos { margin-top: 14px; }
.i-photo-row { display: flex; gap: 12px; margin-top: 10px; }
.i-photo-box { display: grid; gap: 4px; justify-items: center; }
.i-photo-box small { color: var(--muted); font-size: 12px; }
.tb-photo.i-photo { width: 92px; }
.tr-pct-any { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.tr-pct-any input { width: 70px; min-height: 34px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--s1); color: var(--text); font: inherit; text-align: center; }
.tb-name { min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tb-name:hover b { color: var(--accent); }
/* the picker's rows tick like checkboxes (the empty .pct is the box) */
.tr-pick li .pct { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.tr-pick li.chosen { border-color: var(--line-strong); background: var(--tint); }
.tr-pick li.chosen .pct { background: var(--text); box-shadow: none; }
.tr-pick li.chosen .pct span { display: block; width: 6px; height: 11px; margin-top: -3px; border: solid var(--bg); border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

/* at desk width the list is a page laid out like For sale: one strip of settings for every card, the ways to add
   cards on a line, the cards as a table, and a bar at the bottom that adds them up and sends them. The picker for
   scans or stock opens as a column on the right of the table. */
.desk #tbulk.active { display: grid; grid-template-columns: minmax(0, 1fr) 0; grid-template-rows: repeat(10, auto) 1fr;
  align-items: start; max-width: 1440px;
  padding-bottom: 96px; }
.desk #tbulk.active:has(#tb-pick:not([hidden])) { grid-template-columns: minmax(0, 1fr) 380px; }
.desk #tbulk :is(.tb-side, .tb-main) { display: contents; }
.desk #tbulk > :is(.pager, .page-bar, #tb-sent), .desk #tbulk .tb-settings { grid-column: 1 / -1; }
.desk #tbulk .pager { grid-row: 1; margin-bottom: 4px; }
.desk #tbulk .page-bar { grid-row: 2; }
.desk #tbulk #tb-sent { grid-row: 3; }  /* right after sending (tradera.js) */
.desk #tbulk .tb-settings { grid-row: 4; }
.desk #tbulk .tr-add-row { grid-column: 1; grid-row: 5; }
.desk #tbulk #tb-sum { grid-column: 1; grid-row: 6; }
.desk #tbulk .tb-progress { grid-column: 1; grid-row: 7; }
.desk #tbulk .section-head { grid-column: 1; grid-row: 8; }
.desk #tbulk .tb-table { grid-column: 1; grid-row: 9; }
.desk #tbulk .tr-scan-note { grid-column: 1; grid-row: 10; }
.desk #tbulk #tb-pick { grid-column: 2; grid-row: 5 / 12; }  /* the last row (1fr) takes its height, not the table's */

/* the settings: one strip, a group per setting with its label over it, hairlines between */
.desk #tbulk .tb-settings { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 0 22px; padding: 0;
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.desk #tbulk .tb-every { display: none; }
.desk #tbulk .tb-set { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 22px 16px; }
.desk #tbulk .tb-set:not([hidden]) ~ .tb-set { border-left: 1px solid var(--line); }
.desk #tbulk .tb-set > .label { margin: 0; font-size: 12px; color: var(--muted); }
.desk #tbulk .tb-set .seg.small { margin: 0; }
.desk #tbulk .tb-set .seg.small button { min-height: 36px; padding: 0 18px; white-space: nowrap; }
.desk #tbulk #tb-days-f[hidden] { display: none; }
.desk #tbulk #tb-days { min-height: 42px; }
.desk #tbulk .tb-set .tr-chips { margin: 0; flex-wrap: nowrap; }
.desk #tbulk .tb-set-ship { flex: 1 1 200px; }
.desk #tbulk #tb-ship { margin: 0; color: var(--text); font-size: 14px; line-height: 1.45; }
.desk #tbulk #tb-test { flex-basis: 100%; margin: 0; padding: 10px 22px; border-top: 1px solid var(--line); }

/* the ways to add cards, with the count and Remove all at the end of the same line */
.desk #tbulk .tr-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.desk #tbulk .tr-add-row > .label { margin-right: 6px; font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.desk #tbulk .tr-add-row button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px;
  border-radius: 8px; border-color: var(--line-strong); font-size: 14px; }
.desk #tbulk .tr-add-row button svg { width: 18px; height: 18px; flex: none; }
.desk #tbulk .tr-add-row button:hover { border-color: var(--accent); color: var(--accent); }
.desk #tbulk .tr-add-row button.primary-lite { background: var(--s1); }
.desk #tbulk .tr-add-row button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.desk #tbulk .section-head { margin: 10px 2px 10px; }
.desk #tbulk:not(:has(#tb-list > li)) .section-head { display: none; }
.desk #tbulk .section-head .text-btn { margin: 0 0 0 auto; min-height: 0; padding: 0; font-size: 13px; }
.desk #tbulk #tb-sum { margin: 0 0 12px; }
.desk #tbulk .tb-progress { margin: 0 0 12px; }

/* the cards: a table on paper, one row per card */
.desk #tbulk { --tb-cols: 104px minmax(170px, 1.25fr) minmax(210px, 1.2fr) minmax(150px, .85fr) 92px 32px; }
/* with the picker open beside it the table gives up width: narrower columns and gaps */
.desk #tbulk.active:has(#tb-pick:not([hidden])) { --tb-cols: 98px minmax(110px, 1fr) minmax(130px, .9fr) minmax(140px, .9fr) 68px 28px; --tb-gap: 12px; }
.desk #tbulk .tb-table { min-width: 0; background: var(--s1); border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.desk #tbulk .tb-thead { display: grid; grid-template-columns: var(--tb-cols); column-gap: var(--tb-gap, 18px); padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong); font: 600 12px var(--font); color: var(--muted); white-space: nowrap; }
.desk #tbulk .tb-thead .n { text-align: right; }
.desk #tbulk .tb-table:not(:has(#tb-list > li)) .tb-thead { display: none; }
.desk #tbulk .tr-bulk > li { display: grid; grid-template-columns: var(--tb-cols); grid-template-areas: "photos name stock fields mkt x"
  "photos status status status status x"; column-gap: var(--tb-gap, 18px); align-items: center; padding: 12px 16px; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; background: none; transition: background-color .15s; }
.desk #tbulk .tr-bulk > li:last-child { border-bottom: 0; }
.desk #tbulk .tr-bulk > li:hover { background: var(--tint); }
.desk #tbulk .tr-bulk > li.tb-wait { border-bottom: 1px dashed var(--line-strong); }
.desk #tbulk .tr-bulk > li.done { opacity: .6; }
.desk #tbulk .tr-bulk > li.failed { background: color-mix(in srgb, var(--bad) 5%, transparent); }
.desk #tbulk .tb-top { display: contents; }
.desk #tbulk .tb-photos { grid-area: photos; flex-wrap: nowrap; gap: 6px; max-width: none; }
.desk #tbulk .tb-photo { width: 46px; border-radius: 4px; }
.desk #tbulk .tb-photo.empty { font-size: 11px; line-height: 1.2; text-align: center; }
.desk #tbulk .tb-name { grid-area: name; }
.desk #tbulk .tb-name { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.desk #tbulk .tb-name > :not(img) { grid-column: 2; }
.desk #tbulk .tb-name b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk #tbulk .tb-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk #tbulk .tb-card { grid-row: 1 / 3; width: 30px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: var(--s2); }
.desk #tbulk .tb-x { grid-area: x; display: grid; place-items: center; width: 32px; height: 32px; background: none; }
.desk #tbulk .tb-x:hover { background: var(--s2); color: var(--text); }
.desk #tbulk .tb-stock { grid-area: stock; min-width: 0; margin: 0; }
.desk #tbulk .tb-stock select { width: 100%; min-height: 40px; margin: 0; }
.desk #tbulk .tb-new { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.desk #tbulk .tb-stock select + .tb-new { margin-top: 8px; }
.desk #tbulk .tb-new .field { margin: 0; }
.desk #tbulk .tb-new .field .label { font-size: 11px; }
.desk #tbulk .tb-new :is(input, select) { min-height: 38px; }
.desk #tbulk .tb-fields { grid-area: fields; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 8px; }
.desk #tbulk .tb-fields .field { margin: 0; }
.desk #tbulk .tb-fields .field .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.desk #tbulk .tb-fields input { width: 100%; min-height: 42px; padding: 0 10px; text-align: right; font-size: 16px; font-weight: 700; font-stretch: 78%; }
.desk #tbulk .tb-pct-of { grid-row: 2; grid-column: 1 / -1; min-height: 16px; white-space: nowrap; margin-top: 4px; font-size: 12px; color: var(--muted); text-align: right; }
.desk #tbulk .tb-mkt { grid-area: mkt; text-align: right; font-size: 16px; font-weight: 700; font-stretch: 78%; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.desk #tbulk .tb-mkt.none { font-size: 13px; font-weight: 500; font-stretch: 100%; color: var(--muted); }
.desk #tbulk .tb-status { grid-area: status; margin: 8px 0 0; }
.desk #tbulk #tb-empty { margin: 0; padding: 44px 24px; text-align: center; font-size: 15px; }
.desk #tbulk .tr-scan-note { max-width: 72ch; margin: 12px 2px 0; }
.desk #tbulk:has(#tb-list > li) .tr-scan-note { display: none; }

/* the picker: a column beside the table */
.desk #tbulk #tb-pick { position: sticky; top: 24px; margin: 0 0 0 24px; padding: 16px; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -22px var(--shadow); }
.desk #tbulk #tb-pick .tr-head .label { font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.desk #tbulk #tb-pick .rows { max-height: calc(100vh - 290px); }
.desk #tbulk #tb-pick .actions { margin-top: 12px; }

/* the bar at the bottom, like For sale's: what the list adds up to, and Put on Tradera */
.desk #tbulk .tb-sendbar { position: fixed; z-index: 7; bottom: 22px; left: calc(var(--rail) + (100% - var(--rail)) / 2);
  transform: translateX(-50%); display: flex; align-items: center; gap: 18px; margin: 0; padding: 8px 8px 8px 20px;
  border-radius: 14px; background: var(--text); color: var(--bg); box-shadow: 0 18px 40px -14px var(--shadow); animation: sl-up .3s var(--ease-out); }
.desk[data-sheet] #tbulk .tb-sendbar { left: calc(var(--rail) + (100% - var(--rail) - var(--sheet)) / 2); }
.desk #tbulk:not(:has(#tb-list > li)) .tb-sendbar { display: none; }
.desk #tbulk .tb-bar-sum { display: flex; align-items: baseline; gap: 10px; margin: 0; white-space: nowrap; }
.desk #tbulk .tb-bar-sum b { font-size: 15px; }
.desk #tbulk #tb-bar-s { font-size: 13px; opacity: .7; font-variant-numeric: tabular-nums; }
.desk #tbulk #tb-send { width: auto; min-height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.desk #tbulk #tb-send:disabled { background: color-mix(in srgb, var(--bg) 18%, transparent); color: color-mix(in srgb, var(--bg) 60%, transparent); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .desk #tbulk .tb-sendbar { animation: none; } }

/* Selling (selling.js, desk width): listings out for sale and stock free to list */
.sl-bar { flex-wrap: wrap; }
.sl-bar .seg button { flex: none; min-height: 36px; padding: 0 16px; }
.sl-bar .seg small { margin-left: 2px; opacity: .7; }
.sl-bar .page-btn:disabled { opacity: .5; cursor: default; }
#sl-note { margin: -6px 0 16px; }
.sl-sum { margin-bottom: 18px; }
.sl-sum .strip small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.sl-sum .strip small.in { color: var(--ok); }
.sl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.sl-tools .find { flex: 0 1 360px; margin: 0; }
.sl-tools .find input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.sl-tools .chips.filter { margin: 0; }
.sl-tools .chips.filter small { opacity: .7; }
.sl-hint { margin: 0 0 0 auto; font-size: 13px; color: var(--muted); }
.sl-table .sl-ck { width: 34px; padding-right: 0; }
.sl-table .sl-ck input { display: block; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sl-table td > small { display: block; font-size: 12px; color: var(--muted); }
.sl-table td > small.hi { color: var(--warn); font-weight: 700; }
.sl-table .card-cell small.sl-why { margin-top: 2px; color: var(--warn); white-space: normal; }
.sl-table .sl-ends.soon span { color: var(--out); font-weight: 700; }
.sl-table tbody tr.ticked td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.table tbody tr.sl-grp { cursor: default; }
.table tbody tr.sl-grp td, .table tbody tr.sl-grp:hover td { padding: 18px 14px 8px; background: none; }
.sl-grp h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 12px; font-weight: 800; font-stretch: 125%;
  letter-spacing: .08em; text-transform: uppercase; }
.sl-grp h3 small { font-size: 13px; letter-spacing: 0; color: var(--muted); }
.sl-grp .why { font-size: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--muted); }
.sl-grp .text-btn { min-height: 0; padding: 0; font-size: 13px; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
.sl-grp.attn h3 { color: var(--warn); }
.sl-table .sl-act { text-align: right; }
.sl-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--s2);
  color: var(--text); font: 700 13px var(--font); white-space: nowrap; cursor: pointer; }
.sl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sl-btn:disabled { opacity: .5; cursor: default; }
.sl-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sl-btn.primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--accent-ink); }
.sl-ext { color: var(--accent); font-size: 13px; font-weight: 600; }
.sl-photos span { display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 700;
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sl-photos span.has { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); box-shadow: none; }
#selling.active { padding-bottom: 72px; }
/* what is ticked, and what can be done with it: a bar over the bottom of the page */
.sl-selbar { position: fixed; z-index: 7; bottom: 22px; left: calc(var(--rail) + (100% - var(--rail)) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 14px; background: var(--text); color: var(--bg);
  box-shadow: 0 18px 40px -14px var(--shadow); animation: sl-up .3s var(--ease-out); }
.desk[data-sheet] .sl-selbar { left: calc(var(--rail) + (100% - var(--rail) - var(--sheet)) / 2); }
@keyframes sl-up { from { transform: translate(-50%, 24px); opacity: 0; } }
.sl-selbar b { white-space: nowrap; }
#sl-sel-sub { margin-right: 4px; font-size: 13px; opacity: .7; white-space: nowrap; }
.sl-sel-acts { display: flex; gap: 6px; }
.sl-selbar .sl-btn { border-color: transparent; background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); }
.sl-selbar .sl-btn:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, var(--bg) 24%, transparent); color: var(--bg); }
.sl-selbar .sl-btn.primary { background: var(--accent); color: var(--accent-ink); }
.sl-selbar .sl-btn.ghost { background: none; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .sl-selbar { animation: none; } }
/* For sale on the phone: a page under Stock (its slip there, #st-forsale) with lists instead of the tables */
.desk :is(#st-forsale, .sl-rows), body.customer #st-forsale { display: none !important; }
.sl-slip-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s2); color: var(--muted); }
.sl-slip-i svg { width: 20px; height: 20px; }
body:not(.desk) #selling .page-bar { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
body:not(.desk) #selling .page-bar h1 { flex: 1; }
body:not(.desk) #selling .sl-bar .seg { order: 3; width: 100%; }
body:not(.desk) #selling .sl-bar .seg button { flex: 1; padding: 0 8px; }
body:not(.desk) #selling .sl-sum { display: none; }
body:not(.desk) .sl-tools .find { flex: 1 1 100%; }
body:not(.desk) .sl-tools .chips.filter { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
body:not(.desk) .sl-tools .chips.filter button { flex: none; }
body:not(.desk) .sl-hint { margin: 0; }
h3.sl-grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 18px 0 8px; font-size: 12px; font-weight: 800;
  font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
h3.sl-grp:first-child { margin-top: 4px; }
h3.sl-grp.attn { color: var(--warn); }
h3.sl-grp small { font-size: 13px; letter-spacing: 0; color: var(--muted); }
h3.sl-grp .why { flex-basis: 100%; font-size: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--muted); }
h3.sl-grp .text-btn { min-height: 0; padding: 0; font-size: 13px; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
.sl-rows .pct small { color: var(--muted); font-weight: 600; }
.sl-rows .pct small.soon { color: var(--out); font-weight: 700; }
.sl-rows .pct small.warn { color: var(--warn); }
.sl-rows .t small.sl-why { color: var(--warn); white-space: normal; }
.sl-rows .t .sl-btn { margin-top: 6px; }
.tr-pics { display: flex; gap: 6px; margin-top: 8px; }
.tr-pics:empty { display: none; }
.tr-pics img { width: 46px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }


/* ==== sealed products (sealed.js): barcode camera, product view, product picker ======================= */
#bcam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a wide frame for the barcode, with a line across it */
.bcam-guide { position: absolute; left: 50%; top: 42%; width: min(84vw, 520px); aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .38); pointer-events: none; }
.bcam-guide::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .85; animation: bcam-line 1.4s ease-in-out infinite alternate; }
@keyframes bcam-line { from { transform: translateY(-18px); } to { transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .bcam-guide::after { animation: none; } }
.bcam .cam-hint { color: var(--text); padding: 0 20px; }
/* the card camera's bar (.cam-bar): this session's scans on the left, the shutter (Photo mode only), Done; without a
   queue (one scan, then back) only the shutter is used, and in Barcode mode nothing: the bar goes */
.bcam-cambar { display: none; }
.bcam.multi:not(.nocam) .bcam-cambar, .bcam.can-shoot.photo:not(.nocam) .bcam-cambar { display: grid; }
.bcam:not(.multi) .bcam-cambar :is(#bcam-sum, #bcam-done) { visibility: hidden; }
.bcam:not(.photo) #bcam-shoot { visibility: hidden; }
/* the digits field sits above the bar */
.bcam .bcam-bar { bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dock-h) + 10px); }
.bcam:not(.multi) .bcam-bar { bottom: max(12px, env(safe-area-inset-bottom)); }
/* the reel sits above the digits field in Barcode mode, right above the bar in Photo mode */
.bcam .cam-reel { bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dock-h) + 82px); }
.bcam.photo .cam-reel, .bcam.nocam .cam-reel { bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dock-h) + 8px); }
.bcam .rt-img { background: var(--s2); }
.bcam .reel-tile:not(.reading) .rt-img img { object-fit: contain; }
/* modes: with a shutter to offer, Barcode | Photo of the box replaces the title */
#bcam-mode { display: none; }
.bcam.can-shoot:not(.nocam) #bcam-mode { display: flex; }
.bcam.can-shoot:not(.nocam) .bcam-title { display: none; }
.bcam.photo .bcam-guide { display: none; }
#sealed-tray { margin-bottom: 18px; }
.bcam.photo:not(.nocam) .bcam-bar { display: none; }  /* no digits to type while photographing the box */

.bcam-title { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border-radius: 99px;
  background: rgba(28, 31, 36, .72); border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 700; color: var(--text); }
.bcam-title svg { width: 18px; height: 18px; color: var(--accent); }
.bcam.nocam :is(#bcam-video, .bcam-guide) { display: none; }
.bcam.nocam .cam-hint { top: 38%; font-weight: 600; }
.bcam-bar { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(528px, calc(100% - 20px)); display: flex; gap: 8px; padding: 8px; border-radius: 20px;
  background: rgba(28, 31, 36, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .1); }
.bcam-bar input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .35); color: var(--text); font: 600 17px var(--font); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.bcam-bar input::placeholder { color: var(--muted); letter-spacing: 0; font-weight: 500; }
.bcam-bar button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  font: 700 15px var(--font); cursor: pointer; }

/* a product has no card shape: square pictures, and a box icon while the catalog has no picture of it */
.thumb-none { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 4px; background: var(--s2); color: var(--muted); }
.line .thumb-none { width: 44px; }
.thumb-none svg { width: 22px; height: 22px; stroke-width: 1.5; }
.hero .sealed-icon { display: none; }
#item.sealed .hero { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--s1); }
#item.sealed .hero-card { grid-area: 1 / 1; }
#item.sealed .slab { display: contents; }  /* a product is never graded: its picture and icon stay in the grid */
#item.sealed .sealed-icon { display: block; grid-area: 1 / 1; width: 38%; height: 38%; stroke-width: 1.2; color: var(--muted); }
#item.sealed img:not([hidden]) + .sealed-icon { display: none; }
.sealed-hero { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--s1); }
.sealed-hero .hero-card { grid-area: 1 / 1; aspect-ratio: 1; object-fit: contain; background: none; }
.sealed-hero .sealed-icon { display: block; grid-area: 1 / 1; width: 38%; height: 38%; stroke-width: 1.2; color: var(--muted); }
.sealed-hero img:not([hidden]) + .sealed-icon { display: none; }
#item.sealed .hero-card { aspect-ratio: 1; object-fit: contain; }
.sealed-rows img { aspect-ratio: 1; object-fit: contain; }
.codes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.codes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 15px;
  border-bottom: 1px solid var(--line); }
.codes li:last-child { border-bottom: 0; }
.codes .text-btn { min-height: 0; padding: 0; font-size: 14px; }
.pr-own img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--s2); }
.pr-own .num { margin-right: auto; color: var(--muted); font-size: 14px; }
#pl-code, #pl-photo-note { margin: 4px 0 14px; }
#pr-nophoto { margin: 12px 2px 0; }
.pr-price { margin-top: 12px; }
.price-links { display: flex; flex-wrap: wrap; column-gap: 16px; margin: 4px 0 0; }
.price-links .text-btn { display: inline-flex; align-items: center; margin: 0; text-decoration: none; }
.price-links:not(:has(a:not([hidden]))) { display: none; }
.sales { list-style: none; margin: 10px 0 0; padding: 0; }
.sales a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none; font-size: 14px; }
.sales a:hover .t { color: var(--accent); }
.sales .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sales .num { flex-shrink: 0; color: var(--muted); }
#pr-tradera { display: inline-block; margin-top: 8px; }
#pl-find .find-row { margin-bottom: 4px; }
#pl-form { margin-top: 18px; }
.desk #product .hero { width: 170px; }
/* a sealed scan: as a card's result, but a box is square and the photo is a photo, not a card cut out */
#sresult .hero-card { aspect-ratio: 1; object-fit: contain; background: var(--s1); }
#sresult .mine img { aspect-ratio: 3 / 4; }
#sresult .hero-card.none { object-fit: scale-down; padding: 22%; }
.sealed-alts img { aspect-ratio: 1; object-fit: contain; }
.sr-link { width: 100%; margin-top: 14px; }
.sr-open { display: block; margin: 10px auto 0; }
#sresult.slide-l #sr-body, #sresult.slide-l .pending { animation: slide-l .25s var(--ease-out); }
#sresult.slide-r #sr-body, #sresult.slide-r .pending { animation: slide-r .25s var(--ease-out); }
#item.slide-l > :not(.pager) { animation: slide-l .25s var(--ease-out); }
#item.slide-r > :not(.pager) { animation: slide-r .25s var(--ease-out); }

/* stock tabs (All / Singles / Slabs / Sealed items) and the item view's facts with their Edit button */
.st-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
.st-groups::-webkit-scrollbar { display: none; }
.st-groups button { flex-shrink: 0; padding: 0 10px; white-space: nowrap; }
.st-groups small { margin-left: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.st-groups button[aria-checked="true"] small { color: inherit; opacity: .75; }
.i-facts .details { margin: 0; }
.i-facts .details .wide { grid-column: 1 / -1; }
.i-facts .details .wide dd { font-weight: 400; }
.i-facts > .text-btn { display: block; margin: 10px 0 -6px; padding-left: 0; }
.text-btn.inline { min-height: 0; margin: 0; padding: 0; font-size: 15px; }
.form-btns { display: flex; justify-content: flex-end; gap: 20px; margin-top: 8px; }
.form-btns .text-btn { margin-left: 0; }
.text-btn.quiet { color: var(--muted); }
.text-btn.quiet:hover { color: var(--text); }

/* ==== Search at desk width: a catalogue to browse. The field leads, results are a grid of card pictures, a card
   opens in the sheet beside them (desk.js) and scanning lives in the field's own buttons instead of the dock ===== */
.desk #home.active { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-auto-flow: row dense; column-gap: 20px;
  align-content: start; max-width: 1600px; padding-bottom: 0; }
.desk #home > * { grid-column: 1 / -1; min-width: 0; }
.desk #home .dock { display: none; }
/* the field and its set filter are one control */
.desk #home .find-row { gap: 16px; margin: 0 0 22px; }
.desk #home .find input { min-height: 56px; padding: 12px 14px 12px 50px; border-radius: 16px 0 0 16px; font-size: 17px; }
.desk #home .find > svg { left: 18px; }
.desk #home .find .find-scan { display: none; }
.desk #home .find-sets { min-height: 56px; margin-left: -17px; padding: 0 20px 0 16px; border-radius: 0 16px 16px 0; font-weight: 700;
  border-left-color: var(--line); }
.desk #home .find-sets:hover, .desk #home .find-sets.on { border-color: var(--accent); }
.scan-group { display: flex; align-items: center; flex-shrink: 0; gap: 2px; min-height: 56px; padding: 0 5px 0 16px; border-radius: 16px;
  background: var(--s1); border: 1px solid var(--line-strong); }
.scan-group-l { margin-right: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.scan-group button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: 700 14px var(--font); cursor: pointer; transition: background-color .15s; }
.scan-group button svg { width: 19px; height: 19px; color: var(--accent); }
.scan-group button:hover { background: var(--s2); }
.scan-group button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body:has(#find-barcode[hidden]) #desk-scan-sealed { display: none; }
.desk #home .set-chip { justify-self: start; margin-top: -8px; }

/* the slip to Scans sits under the field, as wide as it needs; the data-source line last */
.desk #home > .scans-slip { order: 1; justify-self: start; width: auto; min-width: 340px; margin: -6px 0 22px; }
.desk #home > :is(.find-row, .find-scope, .set-chip) { order: 0; }
.desk #home > :not(.find-row, .find-scope, .set-chip, .scans-slip, .catalog) { order: 2; }
.desk #home .find-scope { margin: -8px 0 22px; }
.desk #home > .catalog { order: 3; text-align: left; }

/* recent searches wrap instead of scrolling sideways */
.desk #home .recent-list { flex-wrap: wrap; overflow: visible; }

/* list sections (matching sets, own stock, sealed, scans) fill the width in columns */
.desk #home :is(#find-sets, #find-stock-list, #find-sealed-list) {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.desk #home #find-sets:not(:empty) { margin-bottom: 22px; }
.desk :is(#find-stock, #find-sealed) { margin-bottom: 22px; }

/* cards: a grid of pictures (search results, a set, the cards opened lately) */
.desk #home :is(#find-results, #find-grid, #recent-cards) { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px 16px; margin: 0 0 28px; padding: 0; overflow: visible; }
.desk #find-results li { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; background: none; border: 0;
  border-radius: 10px; }
.desk #find-results li:hover { background: none; }
.desk #home :is(#find-results, #find-grid, #recent-cards) img { width: 100%; height: auto; border-radius: 9px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.desk #find-results .t { margin-top: 10px; }
.desk #find-results b { font-size: 14px; }
.desk #find-results .t small { margin-top: 1px; font-size: 12px; }
.desk #find-results .pct { display: flex; align-items: center; gap: 8px; margin-top: 6px; text-align: left; }
.desk #find-results .pct span { padding: 1px 6px; border-radius: 5px; background: var(--s2); font-size: 10px; }
.desk #find-results .pct small { font-size: 12px; }
.desk #home :is(#find-grid, #recent-cards) li { flex: none; }
.desk #home :is(#find-grid, #recent-cards) b { margin-top: 2px; font-size: 14px; }
.desk #home #recent-cards span { margin-top: 1px; font-size: 12px; }
.desk #home #find-grid span { margin-top: 10px; font-size: 12px; }
.desk #home #recent-cards b { margin-top: 10px; }
.desk #home :is(#find-results, #find-grid, #recent-cards) li:hover img { transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--accent), 0 16px 28px -14px var(--shadow); }
.desk #home :is(#find-results, #find-grid, #recent-cards) li.on img { box-shadow: 0 0 0 2px var(--accent), 0 16px 32px -14px var(--accent-glow); }
.desk #home :is(#find-results, #find-grid, #recent-cards) li.on b { color: var(--accent); }
:is(#find-results, #find-grid, #recent-cards) li:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .desk #home :is(#find-results, #find-grid, #recent-cards) li:hover img { transform: none; } }

/* the card in the sheet: a bigger picture than the phone's */
.desk[data-sheet="cardview"] #cardview .hero { width: 230px; margin-top: 10px; }
@media (max-width: 1279px) {
  .desk #home.active { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* ==== plans (plans.js): padlocks on what the plan doesn't include, the plan page, a page photo's unread cards ====
   A locked entry point is still pressable (it opens the plan page), so it keeps its own colours; the padlock is ink.
   Where you are on the plan page is ink, like every selection: never cobalt, which is only for what can be pressed. */
.lock-i { display: none; width: 12px; height: 12px; stroke-width: 2.2; color: var(--muted); }
.plan-locked .lock-i { display: inline-block; }
.tabs > button.plan-locked { position: relative; }
.tabs > button.plan-locked .lock-i { position: absolute; top: 6px; left: calc(50% + 8px); width: 12px; height: 12px; }
/* the phone's round Calendar key: the padlock sits on its rim */
body:not(.desk) .tabs > [data-tab="calendar"].plan-locked .lock-i { top: auto; left: auto; right: -3px; bottom: -3px;
  width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--s1); box-shadow: 0 0 0 1px var(--line-strong); }
.desk .tabs > button.plan-locked .lock-i { position: static; margin-left: auto; }
.settings-body button.plan-locked { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.text-btn.plan-locked .lock-i { margin-left: 6px; vertical-align: -1px; }
/* a locked part of the overview: its content dimmed under a cover that says what it would show */
:is(.tile, .plan-area)[data-feature] { position: relative; }
.tile.plan-locked { min-height: 200px; }  /* room for the cover when the locked content has nothing to show */
.plan-area.plan-locked { min-height: 150px; }
:is(.tile, .plan-area).plan-locked > :not(.plan-cover):not(.tile-head) { opacity: .25; filter: grayscale(1); pointer-events: none; }
.tile.plan-locked .tile-head .text-btn { display: none; }
.plan-cover { position: absolute; inset: 56px 16px 16px; display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center; }
.plan-area .plan-cover { inset: 36px 0 0; }
.plan-cover svg { width: 22px; height: 22px; color: var(--text); }
.plan-cover p { margin: 0; max-width: 28ch; font-size: 14px; color: var(--text); }
.plan-cover .text-btn { margin: 0; }
.toast-action { margin-left: 6px; padding: 2px 10px; border: 0; border-radius: 99px; background: var(--s2);
  color: var(--accent); font: 700 13px var(--font); cursor: pointer; }

/* the plan page: your plan as a receipt (its head over a 2px ink rule, usage as ruled lines), then the plans as slips */
.plans-pager { grid-template-columns: 44px 1fr; }
.desk .plans-pager { display: none; }
body:not(.desk) #plans .page-bar h1 { font-size: 26px; }
.plans-body { max-width: 980px; padding-bottom: 32px; }
.pl-want { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 6px;
  background: var(--s2); color: var(--text); font-size: 15px; font-weight: 600; }
.pl-want svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--text); }
.pl-want span { flex: 1; min-width: 0; }
.pl-want .text-btn { flex-shrink: 0; min-height: 0; margin: 0; padding: 0; }
.pl-current { max-width: 640px; }
.pl-now { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.pl-usage { display: grid; }
.pl-meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 15px; }
.pl-meter-l { color: var(--muted); }
.pl-meter-n { font-weight: 700; }
.pl-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--s2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--text); }
.pl-meter.full .pl-bar i { background: var(--warn); }
.pl-meter.full .pl-meter-n { color: var(--warn); }
.pl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 18px 0 4px; }
.pl-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pl-card.suggested { box-shadow: 0 0 0 2px var(--text), 0 10px 22px -16px var(--shadow); }  /* the plan with what you wanted */
.pl-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--text); }
.pl-head h2 { margin: 0; font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; }
.pl-head .chip { margin-left: auto; }
.pl-limits, .pl-feats { margin: 0; padding: 0; list-style: none; display: grid; font-size: 14px; }
.pl-limits li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pl-limits span { color: var(--muted); }
.pl-feats { gap: 8px; }
.pl-feats li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.pl-feats svg { width: 16px; height: 16px; margin-top: 1px; stroke-width: 2.2; }
.pl-feats .has svg { color: var(--text); }
.pl-feats .no { color: var(--muted); }
.pl-feats .no span { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.pl-feats .no svg { width: 13px; height: 13px; margin: 3px 0 0 2px; color: var(--muted); }
.pl-feats .want span { font-weight: 700; }
/* promised, not built yet: faded but not struck through (it is not missing from the plan), with a chip saying so */
.pl-feats .soon { grid-template-columns: 18px auto 1fr; color: var(--muted); }
.pl-feats .soon svg { color: var(--muted); }
.pl-feats .soon .chip { justify-self: start; padding: 1px 8px; border: 1px dashed var(--line-strong); background: none;
  font-size: 11px; font-style: normal; color: var(--muted); }
.pl-feats .has.want span { color: var(--text); }
.pl-up { margin-top: auto; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--s2);
  color: var(--muted); font: 700 15px var(--font); }

/* a page photo on a plan without page scans: the card read, the others found but not read (skipped: dashed) */
.page-locked .page-fig polygon { cursor: default; }
.page-locked .page-fig polygon:hover { fill: color-mix(in srgb, var(--bg) 35%, transparent); }
.page-fig polygon.locked { fill: color-mix(in srgb, var(--bg) 60%, transparent); stroke: var(--line-strong); stroke-dasharray: 6 5; }
.lock-label { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.lock-label svg { width: 15px; height: 15px; color: var(--text); }
.skel-rows { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.skel-rows li { display: grid; grid-template-columns: 26px 1fr 14px; gap: 10px; align-items: center; padding: 6px 8px;
  border-radius: 4px; background: var(--s2); }
.skel-rows svg { width: 14px; height: 14px; color: var(--muted); }
.sk-img { display: block; width: 26px; height: 36px; border-radius: 4px; background: var(--line-strong); }
.skel-rows span { display: grid; gap: 6px; }
.sk-line { display: block; height: 8px; border-radius: 99px; background: var(--line-strong); }
.sk-line.short { width: 55%; opacity: .6; }
.skel-rows .sk-more { display: block; padding: 2px 8px; background: none; font-size: 13px; color: var(--muted); }
.locked-more { color: var(--muted); }  /* skeletons stay still: they are unread cards, not something loading */
/* a card or deal opened from the overview lies over it: the overview keeps its layout underneath (only the tables
   make room for the sheet, so their marked row stays in sight) */
.desk[data-sheet] main:has(> #overview.active) { padding-right: var(--gut); }
.t-period .roll-head h2 { font-size: 13px; }
/* a date and time field has a native minimum width on phones (iOS) that pushed it out of its card: it follows the
   field's width like every other input */
.field input:is([type="datetime-local"], [type="date"], [type="time"]) { display: block; min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none; text-align: left; }
.field input:is([type="datetime-local"], [type="date"], [type="time"])::-webkit-date-and-time-value { text-align: left; }

/* the event under way (live-event.js): a strip at the top of every page, a stamp on its receipts, a line in the deal */
.live-ev { margin: 0 0 14px; padding: 8px 12px 8px 4px; border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 10%, var(--s1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.live-ev-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; padding: 0 0 0 8px;
  border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.live-ev-open .t { display: grid; min-width: 0; }
.live-ev-open b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-ev-open small { font-size: 12px; color: var(--muted); }
.live-l { font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.live-ev-bar { display: flex; align-items: center; gap: 8px; }
.live-ev-bar .text-btn { flex: none; margin: 0; }
.live-chev { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
body.locked .live-ev { display: none !important; }
.desk .live-ev { max-width: 720px; }

/* costs (ledger.js applyCosts): every cost, margin and profit is a `.cost`; a member gets none (body.nocosts) and has
   no Overview: on the phone Cards takes its place, so Scan stays in the middle of the bar */
body.nocosts .cost, body.nocosts .tabs > [data-tab="overview"] { display: none !important; }
body.nocosts:not(.desk) .tabs > [data-tab="home"] { grid-column: span 2; }

.roll-ev:not(:has(> :not([hidden]))) { display: none; }
.roll-ev { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.roll-ev > .page-btn { width: 100%; justify-content: center; }
.roll-ev > .page-btn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roll-ev-form { display: grid; gap: 10px; }
.roll-ev-form .note { margin: 0; }
.roll-ev-actions { display: flex; align-items: center; gap: 12px; }
.roll-ev-actions .text-btn { margin-left: 0; }

.ev-tag { display: inline-block; max-width: 16ch; margin-right: 6px; padding: 0 5px; border-radius: 2px; vertical-align: -2px;
  box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); font-size: 10.5px; font-weight: 800; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.k-event { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 6px 6px 6px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 10%, var(--s2)); }
.k-event .t { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-event .text-btn { margin-left: auto; }
.k-event.off { background: var(--s2); color: var(--muted); }
.k-event.off .live-dot { background: var(--muted); animation: none; }

/* the deal view: the event the deal was logged to, a band of its own under the receipt */
.dl-event { display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0 4px; padding: 14px 14px 14px 16px;
  border: 0; border-radius: 6px; background: color-mix(in srgb, var(--ok) 10%, var(--s1)); color: var(--text);
  box-shadow: inset 4px 0 0 var(--ok), 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
  font: inherit; text-align: left; cursor: pointer; }
.dl-event:hover { background: color-mix(in srgb, var(--ok) 15%, var(--s1)); }
.dl-event-i { flex: none; width: 28px; height: 28px; color: var(--ok); }
.dl-event .t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dl-event .label { color: var(--ok); }
.dl-event b { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-event small { font-size: 13px; color: var(--muted); }
.dl-event-go { flex: none; width: 18px; height: 18px; color: var(--muted); }
.ev-result .rows.roll-list { margin: 4px -4px 0; }
/* the event's end of the day: its takings as the roll's ruled lines, the drawer per payment method, then its files */
.ev-lines { margin-top: 12px; }
.ev-lines + .ev-lines { margin-top: 10px; }
#ev-figs { margin-bottom: 14px; }
/* the event's costs: a ruled list (what it was for, the day and how it was paid, the amount, void) and the form */
.ev-costs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ev-costs-head b { font-size: 18px; font-weight: 800; }
.ev-costs-head b:empty { display: none; }
.ev-cost-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ev-cost-list:empty { display: none; }
.ev-cost-list li { display: grid; grid-template-columns: 1fr auto 36px; gap: 10px; align-items: center; min-height: 48px;
  padding: 6px 0; border-bottom: 1px dashed var(--line-strong); }
.ev-cost-list .t { display: grid; gap: 2px; min-width: 0; }
.ev-cost-list .t b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-cost-list .t small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-cost-list .num { font-weight: 800; color: var(--out); }
.ev-cost-list button.rm { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ev-cost-list button.rm:hover { color: var(--bad-text); background: var(--hover); }
.ev-cost-list button.rm svg { width: 18px; height: 18px; }
.ev-costs > .note { margin: 6px 0 0; }
.ev-costs > .text-btn { display: block; margin: 6px 0 0; padding-left: 0; }
.ev-cost-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line-strong); }
.ev-cost-form .field-row > .field { min-width: 0; }
.ev-cost-form input { min-width: 0; width: 100%; }
.ev-cost-form .seg-btns { margin-top: 0; }
.ev-cost-form .seg-btns button[aria-checked="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.ev-cost-form .seg.small { margin-top: 0; }
.ev-cost-form .field-row, .ev-cost-form .note { margin: 0; }
.ev-books { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.ev-books .note { margin: 4px 0 10px; }
.ev-books-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==== Scans (#scans): what the cameras brought in, apart from looking cards up on Cards ===========================
   On the phone a page under Cards (its own back key, the bar keeps Cards current); at desk width a rail page under
   Cards with how many scans to check. The scans are one receipt (value, bars, how many, what wants a look) with
   what to do with them under it, then the list. */
/* the slip on Cards: the scans in one line, a tap opens Scans */
.scans-slip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px;
  padding: 10px 10px 10px 12px; border: 0; border-radius: 6px; background: var(--s1); color: var(--text); text-align: left; font: inherit;
  cursor: pointer; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); transition: background-color .15s; }
.scans-slip:hover { background: var(--hover); }
.scans-slip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slip-fan { position: relative; display: block; width: 50px; height: 42px; }
.slip-fan:empty { width: 30px; border-radius: 4px; background: var(--s2); }
.slip-fan img { position: absolute; top: 1px; width: 28px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; background: var(--s2);
  box-shadow: 0 0 0 1.5px var(--s1), 0 4px 8px -4px var(--shadow); }
.slip-fan img:nth-child(1) { left: 0; transform: rotate(-8deg); }
.slip-fan img:nth-child(2) { left: 11px; transform: rotate(-1deg); }
.slip-fan img:nth-child(3) { left: 22px; transform: rotate(6deg); }
.scans-slip .t { min-width: 0; }
.scans-slip b { display: block; font-size: 15px; font-weight: 700; }
.slip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.slip-chips:empty { display: none; }
.slip-chips .chip { padding: 2px 9px; }
.scans-slip .chev { width: 20px; height: 20px; color: var(--muted); }

.find-hint { margin: 6px 2px 0; color: var(--muted); font-size: 15px; text-wrap: pretty; }
#home:is(.finding, :has(#recent:not([hidden])), :has(#scans-slip:not([hidden]))) .find-hint { display: none; }
#home:is(.finding, :has(#scans-slip:not([hidden]))) :is(#https-tip, #desktop-qr) { display: none !important; }
#scans .page-bar { flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; }
body:not(.desk) #scans .page-bar { gap: 4px; margin-bottom: 14px; }
.sc-back { display: grid; place-items: center; width: 40px; height: 44px; margin-left: -10px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--accent); cursor: pointer; }
.sc-back:hover { background: var(--tint); }
.sc-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.desk .sc-back { display: none; }
#scans .page-bar h1 { font-size: 30px; font-stretch: 78%; letter-spacing: -.01em; line-height: 1; }
.session .big { margin-top: 4px; }
.session .bars { height: 40px; margin-top: 14px; }
.session .bars i:not(.warn, .bad, .busy) { background: color-mix(in srgb, var(--text) 78%, transparent); }  /* ink: not pressable */
.s-lines { margin-top: 12px; border-top: 1px solid var(--line); }
.s-lines > div.warn :is(dt, dd) { color: var(--warn); }
.s-lines > div.bad :is(dt, dd) { color: var(--bad-text); }
.s-lines > div:is(.warn, .bad) dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: currentColor; vertical-align: 1px; }
.actions.scan-acts { display: flex; flex-wrap: wrap; margin-top: 14px; }
.scan-acts > * { flex: 1 1 40%; padding: 0 12px; font: 700 15px var(--font); }
.scan-acts > .primary { flex-basis: 100%; }
#scans .empty-title { margin-top: 16px; }
#scans .empty .actions { margin-top: 16px; }
#scans .empty #empty-lot { display: block; margin: 8px auto 0; }

/* the rail: Scans indented under Cards, with how many to check */
.rail-sub { margin-left: 22px; }
.desk .tabs > .rail-sub { min-height: 36px; font-size: 14px; }
.rail-n { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn);
  font-size: 12px; font-weight: 800; font-stretch: 78%; font-variant-numeric: tabular-nums; }

/* desk width: the scan group beside the heading, the receipt as one strip, the scans as a table */
.desk #scans.active { max-width: 1240px; }
.desk #scans .page-bar { justify-content: space-between; margin-bottom: 20px; }
.desk #scans .page-bar h1 { font-size: 34px; }
/* the receipt as one strip: the value, the counts beside it, what to do with the scans at its right end */
.desk #scans .scan-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.desk #scans .scan-side > .session { grid-area: 1 / 1 / 2 / 3; display: grid; grid-template-columns: auto auto 1fr; column-gap: 56px;
  align-items: end; padding: 16px 22px 28px; }
.desk #scans .session > .roll-head { grid-column: 1 / -1; margin-bottom: 12px; }
.desk #scans .session > .label { grid-column: 1; grid-row: 2; }
.desk #scans .session > .big { grid-column: 1; grid-row: 3; font-size: 46px; }
.desk #scans .session .bars { display: none; }  /* the table says it row by row */
.desk #scans .s-lines { grid-column: 2; grid-row: 2 / 4; display: flex; gap: 36px; margin: 0; border: 0; }
.desk #scans .s-lines > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 3px; border: 0; }
.desk #scans .s-lines dt { flex: none; font-size: 13px; }
.desk #scans .s-lines dd { font-size: 28px; font-weight: 800; line-height: 1; text-align: left; }
.desk #scans .scan-side > .scan-acts { grid-area: 1 / 2 / 2 / 3; z-index: 1; flex-wrap: nowrap; gap: 8px; margin: 0 22px 34px 0; }
.desk #scans .scan-acts > * { flex: none; min-height: 44px; padding: 0 18px; }
.desk #scans #tray-list { display: none; }
.desk #scans #tray > .section-head { margin-top: 26px; }
.desk .sc-table .card-cell > span { max-width: 520px; }
.desk .sc-table tr.unsure td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.desk .sc-table tr.waiting .card-cell img { opacity: .5; }
.desk .sc-table tr.waiting .card-cell b { color: var(--muted); font-weight: 600; }
.desk .sc-table td:nth-child(2) { width: 120px; }
.desk .sc-table td:nth-child(3) { width: 170px; }
.desk .sc-table td:last-child { width: 130px; font-size: 16px; font-weight: 800; }
.desk .sc-table td.muted:last-child { font-weight: 500; font-size: 14px; }
.desk #scans #sealed-tray-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
/* desk, nothing scanned yet: one drop slip across the column, the till waiting for paper. Its drop area is the
   primary way in (photos already on the computer); the camera, sealed and a collection are the quiet line under it.
   The page bar's Scan group would say the same again, so it waits until something is in */
.desk #scans:has(> #empty:not([hidden])) .scan-group { display: none; }
.desk #empty .empty-phone { display: none; }
.desk #scans > #empty { padding: 18px 26px 30px; }
.drop-area { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 320px; padding: 36px 28px;
  border: 1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 6px; text-align: center;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.drop-area > svg { width: 34px; height: 34px; color: var(--muted); margin-bottom: 16px; transition: color .2s, transform .3s var(--ease-out); }
.drop-area .empty-title { font-size: 34px; font-stretch: 78%; letter-spacing: -.01em; line-height: 1; }
.drop-area p { max-width: 50ch; margin: 10px 0 0; color: var(--muted); font-size: 15px; text-wrap: pretty; }
.drop-pick { min-height: 46px; margin-top: 22px; padding: 0 26px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font: 700 15px var(--font); cursor: pointer;
  transition: background-color .15s, transform .1s var(--ease-out); }
.drop-pick:hover { background: var(--accent-hover); }
.drop-pick:active { transform: scale(.98); }
.drop-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.drop-area small { margin-top: 14px; color: var(--muted); font-size: 13px; }
.drop-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 14px -10px 0; }
.drop-more button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: 600 14px var(--font); cursor: pointer; transition: background-color .15s; }
.drop-more button svg { width: 17px; height: 17px; color: var(--accent); }
.drop-more button:hover { background: var(--tint); }
.drop-more button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body:has(#find-barcode[hidden]) #empty-sealed { display: none; }
/* a collection is a way of working, not another way to scan: set apart at the line's right end as a paper pill */
.drop-lot { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-left: 10px; }
.drop-lot span { max-width: 44ch; color: var(--muted); font-size: 13px; line-height: 1.35; text-align: right; text-wrap: pretty; }
.drop-more .drop-lot button { flex: none; min-height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--line-strong); background: var(--s2);
  font-weight: 700; }
.drop-more .drop-lot button:hover { background: var(--hover); border-color: var(--accent); }
/* photos dragged over the slip: the area takes the ink of what can be pressed */
#scans.dropping .drop-area { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
#scans.dropping .drop-area > svg { color: var(--accent); transform: translateY(-4px); }
/* photos dragged over Scans: a veil over the page says where they go (at any width: a tablet or a narrow window
   takes drops too); at desk width the empty slip's own drop area says it instead */
.drop-veil { display: none; }
#scans.active { position: relative; }
.desk #scans.dropping:has(> #empty:not([hidden])) > .drop-veil { display: none; }
#scans.dropping > .drop-veil { position: absolute; inset: -8px; z-index: 5; display: grid; place-items: center;
  border: 1.5px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--bg) 82%, transparent);
  pointer-events: none; animation: veil-in .2s var(--ease-out); }
.drop-veil span { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 8px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px var(--shadow); font-size: 16px; font-weight: 700; }
.drop-veil svg { width: 20px; height: 20px; color: var(--accent); }
@keyframes veil-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drop-veil { animation: none !important; } .drop-area > svg { transition: none; } }
.desk #home > #desktop-qr { justify-self: start; max-width: 640px; }

/* the welcome guide (guide.js): the page dimmed round a hole over one key, a receipt slip beside it */
.guide { position: fixed; inset: 0; z-index: 20; }
.guide.plain { background: var(--backdrop); display: grid; place-items: center; padding: 16px; }
.guide-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 100vmax var(--backdrop), 0 0 0 2px var(--accent) inset;
  pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.guide-slip { position: fixed; width: min(340px, calc(100vw - 32px)); margin: 0; animation: fade .2s ease-out;
  transition: left .25s ease, top .25s ease; }
.guide.plain .guide-slip { position: static; }
.guide-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-strong); font-size: 12px; font-weight: 800; font-stretch: 125%;
  letter-spacing: .1em; text-transform: uppercase; }
.guide-head #guide-n { color: var(--muted); }
.guide-text { margin: 0; font-size: 16px; line-height: 1.45; }
.guide-text > span { display: block; }
.guide-text > span + span { margin-top: 6px; }
.guide-hi { font-size: 22px; font-weight: 800; }
.guide-slip .actions { margin-top: 16px; }
.guide-slip .actions button.text-btn { min-height: 40px; margin: 0 auto; padding: 4px 12px; border: 0; background: none; color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .guide-hole, .guide-slip { transition: none; animation: none; } }

/* the ? keys: the page's guide again. On the phone a round key in the top bar beside Calendar and Settings; at desk
   width a round key in the bottom right corner, clear of the rail; the deal form has one in its bar. Every page tour
   ends by pointing at it, so it is found where it is */
.guide-q { font-weight: 800; font-size: 17px; line-height: 1; }
.guide-help-top { display: none; }
body.ledger .guide-help-top:not([hidden]) { position: fixed; z-index: 6; display: grid; place-items: center; width: 38px;
  height: 38px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--s1);
  color: var(--text); cursor: pointer; box-shadow: 0 6px 16px -10px var(--shadow); }
body.ledger:not(.desk) .guide-help-top:not([hidden]) { top: max(12px, env(safe-area-inset-top)); right: max(102px, calc(50% - 178px)); }
body.ledger:not(.desk):has(.guide-help-top:not([hidden])) .top { padding-right: 158px; }
body.ledger.desk .guide-help-top:not([hidden]) { right: 24px; bottom: 24px; width: 44px; height: 44px; }
.desk .guide-help-top:hover { background: var(--s2); }
.desk .guide-help-top .guide-q { font-size: 19px; }
body:not(.ledger) .guide-help, body.customer .guide-help { display: none; }

/* the ? key in a view's own bar (scan, page, collection) and in the camera's top row */
#result .pager, #pageview .pager { grid-template-columns: 44px 1fr 44px 44px 44px; }
#lotview .pager { grid-template-columns: 44px 1fr 44px; }
.cam-top #cam-help { margin-left: auto; color: #f2f3f5; }

/* ---- a share link's page (share.html, share-page.js): a customer's view of some stock, no login ------------- */
.share-page main { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: 40px; }
.shp-head { padding: 20px 18px 28px; }
.shp-find { margin: 16px 0 0; }
.shp-from { display: block; font-size: 12px; font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); }
.shp-head h1 { margin: 4px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.shp-title { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.shp-sum { margin: 14px 0 0; padding-top: 10px; border-top: 2px solid var(--text); font-size: 13px; color: var(--muted); }
.shp-set h2 { margin: 26px 2px 10px; font-size: 12px; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; }
.shp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 520px) { .shp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shp-card { display: grid; align-content: start; gap: 8px; padding: 8px 8px 12px; border-radius: 6px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.shp-card img, .shp-none { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 4px; background: var(--s2); }
.shp-none { display: grid; place-items: center; color: var(--muted); }
.shp-card .t { min-width: 0; padding: 0 4px; }
.shp-card b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.shp-card small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.shp-price { display: block; margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.shp-price.num { font-stretch: 78%; }
.shp-price.ask { font-size: 14px; font-weight: 600; color: var(--muted); }
.shp-card.sold img, .shp-card.sold .shp-none { opacity: .35; filter: grayscale(1); }
.shp-card.sold b { color: var(--muted); }
.shp-card.sold .shp-price { font-size: 12px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); }
/* "Made with <app>": quiet, under the cards; the whole line opens the app */
.shp-made { display: flex; align-items: center; gap: 12px; margin: 36px 0 0; padding: 14px 2px 0; border-top: 1px solid var(--line);
  color: var(--muted); text-decoration: none; font-size: 13px; }
.shp-made .logo { flex: none; width: 22px; height: 27px; }
.shp-made .logo svg { width: 14px; height: 14px; }
.shp-made b { color: var(--text); font-weight: 800; font-stretch: 112%; }
.shp-made small { display: block; margin-top: 1px; font-size: 12px; }
.shp-made:hover b { color: var(--accent); }
.shp-gone { margin-top: 30vh; text-align: center; font-size: 16px; color: var(--text); }

/* ---- Share with a customer (#share, share.js): pick rows, make a link ------------------------------------ */
.sh-intro { margin: -6px 2px 14px; }
.sh-find { margin-bottom: 10px; }
.chips.filter.sh-groups { margin: 0 0 10px; }
/* the filters: Sets (opens the list) and the customer price from-to on one line, wrapping on a narrow phone */
.sh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.sh-set-btn { display: inline-flex; align-items: center; gap: 4px; }
.sh-set-btn small { font-weight: 700; }
.sh-set-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; transform: rotate(90deg);
  transition: transform .15s; }
.sh-set-btn[aria-expanded="true"] svg { transform: rotate(-90deg); }
.sh-range { display: flex; align-items: center; gap: 6px; }
.sh-range .label { margin: 0 2px 0 0; }
.sh-range input { width: 64px; min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--s2); color: var(--text); font: 700 16px var(--font); text-align: right;
  font-variant-numeric: tabular-nums lining-nums; }
.sh-range input::placeholder { color: var(--muted); font-weight: 500; }
.sh-range input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.sh-range input.bad { border-color: var(--bad-text); }
.sh-range > span { color: var(--muted); font-size: 13px; }
/* the set list: find a set, tick several, Done closes it; the picked ones stay as chips (a tap takes one out) */
.sh-setpick { margin: 0 0 12px; padding: 12px; }
.sh-setpick .find { margin: 0 0 8px; }
.sh-set-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.sh-set-list label { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sh-set-list li:last-child label { border-bottom: 0; }
.sh-set-list input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.sh-set-list small { color: var(--muted); font-weight: 700; }
.sh-setpick-end { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.sh-setpick-end .primary { min-height: 40px; padding: 0 20px; width: auto; }
.sh-sets { margin: -4px 0 12px; }
.sh-sets:empty { display: none; }
.sh-sets .chip-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--text); border-color: var(--text);
  color: var(--bg); }
.sh-sets .chip-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.sh-more { margin: -4px 2px 10px; color: var(--bad-text); }
.rows li.sh-row { grid-template-columns: 22px 40px 1fr auto; cursor: pointer; }
.sh-row input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sh-row:has(input[type="checkbox"]:not(:checked)) :is(img, .thumb-none, .t, .sh-price) { opacity: .45; }
.sh-opts { margin-top: 18px; }
.sh-opts .seg { margin-top: 8px; }
.sh-again { display: block; margin: 14px 0 0; }
.rows li.sh-link { grid-template-columns: 1fr auto; min-height: 56px; padding-left: 14px; }
.rows li.sh-link .text-btn { margin: 0; }
.rows li.sh-link.ended b { color: var(--muted); }
.rows li.sh-link small { white-space: normal; }
.rows li.sh-link button.t { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rows li.sh-link button.t:hover b { color: var(--accent); }
.rows li.sh-link.on { border-color: var(--text); }
.sh-row .sh-sold { color: var(--bad-text); font-weight: 700; }
/* at desk width Share is a sheet beside the stock table: × closes it, the phone's page has a back arrow */
.sh-i-close, .desk .sh-i-back { display: none; }
.desk .sh-i-close { display: block; }
.desk #share .page-bar { margin: 0 -24px 14px; padding: 16px 24px 0; }
.desk #share .page-bar h1 { font-size: 24px; }
.desk #sh-back { display: grid; }
/* a row's price on a share link: the customer price, typed over for this link (.own: one of its own) */
.sh-price { display: flex; align-items: center; gap: 4px; cursor: text; }
.sh-price input { width: 72px; min-height: 40px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--s2); color: var(--text); font: 800 16px var(--font); font-stretch: 78%; text-align: right;
  font-variant-numeric: tabular-nums lining-nums; }
.sh-price input::placeholder { color: var(--muted); font-weight: 600; }
.sh-price input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.sh-price input.own { border-color: var(--text); }
.sh-price span { font-size: 13px; color: var(--muted); }
.sh-price-note { margin: -4px 2px 10px; }