/* Card Tally's look: the approved design (design/card-tally.pen). Black Label palette, Workshop type pairing
   (Bricolage Grotesque for headings and numbers, Figtree for text), light and dark by the device's setting or the choice in Settings.
   Every colour is a variable named as in the design file. No inline styles anywhere (the Content-Security-Policy forbids them). */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/figtree-latin-wght-normal.woff2') format('woff2'); }

:root {
  --bg: #F4F4F2; --surface: #FFFFFF; --sunken: #E9E9E6; --tag-fill: #E9E9E6; --text: #111111; --muted: #5E5E5E; --line: #DCDCD8;
  --accent: #111111; --on-accent: #FFFFFF; --accent-soft: #F1E7CF; --pos: #17703A; --neg: #B3382C; --on-neg: #FFFFFF; --neg-soft: #FBE4E0;
  --warn: #7A4B00; --warn-soft: #FDE6C0; --link: #7F5B0C; --gold: #B8892B; --flag: #F5B942; --on-flag: #3A2410;
  --scrim: rgba(0, 0, 0, 0.4); --blue-soft: #DCE8F7; --on-blue: #1F4E8C;
  --font-head: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif;
  color-scheme: light;
}
/* Dark follows the device unless the settings say Light (data-theme="light") or Dark (data-theme="dark"); app/appearance.js sets it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C; --surface: #161617; --sunken: #060607; --tag-fill: #2C2C30; --text: #F5F5F3; --muted: #A3A3A0; --line: #2B2B2D;
    --accent: #D9B24C; --on-accent: #15110A; --accent-soft: #2A2415; --pos: #5BD98A; --neg: #F08A7C; --on-neg: #1A0A07; --neg-soft: #3A1713;
    --warn: #F5B942; --warn-soft: #3A2410; --link: #D9B24C; --gold: #D9B24C;
    --scrim: rgba(0, 0, 0, 0.6); --blue-soft: #172536; --on-blue: #8DB8F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0B0C; --surface: #161617; --sunken: #060607; --tag-fill: #2C2C30; --text: #F5F5F3; --muted: #A3A3A0; --line: #2B2B2D;
  --accent: #D9B24C; --on-accent: #15110A; --accent-soft: #2A2415; --pos: #5BD98A; --neg: #F08A7C; --on-neg: #1A0A07; --neg-soft: #3A1713;
  --warn: #F5B942; --warn-soft: #3A2410; --link: #D9B24C; --gold: #D9B24C;
  --scrim: rgba(0, 0, 0, 0.6); --blue-soft: #172536; --on-blue: #8DB8F0;
  color-scheme: dark;
}
/* Density (Settings, Appearance): Compact makes the rows of the lists shorter. */
:root { --row-h: 86px; --table-row-h: 68px; --list-row-h: 64px; }
:root[data-density="compact"] { --row-h: 72px; --table-row-h: 52px; --list-row-h: 52px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font-body); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg.icon { flex: none; }
.gold { color: var(--gold); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------------------------------------------------------------- logo */
.lockup { display: flex; align-items: center; gap: 8px; height: 48px; }
.lockup-mark { display: block; width: 48px; height: 48px; color: var(--text); }
.lockup-mark svg { display: block; width: 100%; height: 100%; }
.lockup-name { font: 800 22px/1 var(--font-head); color: var(--text); white-space: nowrap; }

/* ---------------------------------------------------------------- the shell */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.page { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; width: 100%; }
.sidebar { display: none; }
.only-desktop { display: none !important; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; height: calc(84px + env(safe-area-inset-bottom));
  padding: 6px 8px calc(22px + env(safe-area-inset-bottom) * 0.5); background: var(--surface); border-top: 1px solid var(--line);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 11px; min-width: 0; }
.tab-wrap { position: relative; width: 48px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.tab[aria-current="page"] { color: var(--link); font-weight: 600; }
.tab[aria-current="page"] .tab-wrap { background: var(--accent-soft); }
.tab-add .add-circle { width: 30px; height: 30px; margin: 3px 0 1px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.tab-add[aria-current="page"] .add-circle { outline: 2px solid var(--link); outline-offset: 2px; }
.badge { position: absolute; top: -2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--neg); color: var(--on-neg); font: 700 10px/18px var(--font-body); text-align: center; padding: 0 5px; }

.screen-title { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 12px; }
.screen-title h1 { font: 600 28px/1.2 var(--font-head); color: var(--text); min-width: 0; overflow-wrap: anywhere; }   /* 0.22.1: a long title wraps, never "His..." */
.title-note { color: var(--muted); font-size: 14px; white-space: nowrap; }
.home-header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 12px; }
.sync-line { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.home-header .sync-line { min-width: 0; white-space: normal; text-align: right; line-height: 1.25; }   /* wraps to two lines on the narrowest phones */
.sentence { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- panels, rows */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.panel-title { padding: 16px 16px 10px; display: flex; align-items: center; gap: 10px; }
.panel-title h2 { font: 700 16px/1.2 var(--font-head); color: var(--text); }
.panel-title .panel-note { color: var(--muted); font-size: 13px; margin-left: auto; }
.panel-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; min-height: var(--list-row-h); padding: 0 16px; border-top: 1px solid var(--line); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; }
.panel-title + .row, .panel > .row:first-child { border-top: 0; }
.row-link:hover { background: var(--bg); }
.row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.row-title { font-size: 15px; font-weight: 600; color: var(--text); }
.row-line { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-kv { min-height: 48px; justify-content: space-between; }
.kv-label { color: var(--muted); font-size: 14px; }
.kv-value { font-size: 14px; font-weight: 600; color: var(--text); text-align: right; }
.kv-value.neg { color: var(--neg); }
.faq-q { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.empty h2 { font: 700 16px/1.2 var(--font-head); }
.empty p { color: var(--muted); font-size: 13px; max-width: 300px; }
.empty svg { color: var(--gold); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--line); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag-waiting { background: var(--flag); color: var(--on-flag); }
.tag-bad { background: var(--neg-soft); color: var(--neg); }
.tag-ok { background: var(--line); color: var(--muted); }
.helper { padding: 0 16px 10px; color: var(--muted); font-size: 13px; }
.row-sub { color: var(--muted); font-size: 12px; }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bullets li { display: flex; gap: 8px; font-size: 14px; }
.bullets li::before { content: '•'; color: var(--muted); }
.group-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.answer p + p { margin-top: 10px; }
.answer p { font-size: 14px; }
.desc h3 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.desc p { font-size: 13px; color: var(--muted); }
.desc p + h3 { margin-top: 10px; }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 600; white-space: nowrap; width: 100%; }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--text); }
@media (hover: hover) { .btn-secondary:hover { background: var(--bg); } }
.btn-primary { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .btn-primary:hover { filter: brightness(1.12); } }
.btn-danger { background: var(--neg); color: var(--on-neg); }
.btn-danger:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary:disabled { opacity: 1; background: var(--sunken); color: var(--muted); border-color: var(--line); }   /* 0.22.3: a button that is off still reads (about 5 to 1) */
.btn-back { width: auto; flex: none; }
.btn-text { background: none; border: 0; color: var(--neg); font-size: 13px; font-weight: 600; height: 44px; padding: 0 4px; width: auto; }
.btn-text:hover { text-decoration: underline; }
.btn-link { background: none; border: 0; color: var(--link); font-size: 13px; font-weight: 600; width: auto; padding: 0; height: auto; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text); }
.input { height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; color: var(--text); }
.input::placeholder { color: var(--muted); }
/* A date box (the browser's own) never grows past its column: iOS Safari gives it a width of its own, so a long date ("October 21, 2026") ran out of the box at 375 wide (0.21.0). */
input[type="date"].input { min-width: 0; max-width: 100%; display: block; -webkit-appearance: none; appearance: none; text-align: left; line-height: 42px; padding-top: 0; padding-bottom: 0; }
input[type="date"].input::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
@media (max-width: 480px) { .ff-row:has(input[type="date"]) { flex-direction: column; } }
.input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.field-note { font-size: 12px; color: var(--muted); min-height: 0; }
.field-note:empty { display: none; }
.field-note.bad { color: var(--neg); }
.message { padding: 12px 14px; border-radius: 12px; font-size: 13px; background: var(--neg-soft); color: var(--neg); border: 1px solid var(--neg); }
.message.info { background: var(--accent-soft); color: var(--text); border-color: var(--line); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.switch-row .row-text { gap: 2px; }
.switch-row .row-line { white-space: normal; }
.panel-body.desc { gap: 4px; }
.switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; border: 0; padding: 3px; background: var(--line); display: flex; align-items: center; }
.switch[aria-checked="true"] { background: var(--accent); justify-content: flex-end; }
.switch .knob { width: 20px; height: 20px; border-radius: 10px; background: var(--surface); }
.switch[aria-checked="true"] .knob { background: var(--on-accent); }
.actions { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
.device-row { min-height: 64px; }
.device-row .row-line { white-space: normal; }

/* ---------------------------------------------------------------- pop-ups (always centred) and the More sheet */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; max-height: 90dvh; overflow: auto; }
.dialog h2 { font: 700 22px/1.2 var(--font-head); overflow-wrap: anywhere; }
.dialog p { font-size: 14px; }
.dialog-actions { display: flex; gap: 12px; }
.dialog-actions .btn { flex: 1; min-width: 0; padding: 0 10px; }
.dialog-actions.stack { flex-direction: column; }
.dialog-actions.stack .btn { flex: none; width: 100%; }
.code-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: center; font: 700 26px/1.1 var(--font-head); letter-spacing: 0.08em; overflow-wrap: anywhere; }
.link-text { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 640px; background: var(--surface); border-radius: 20px 20px 0 0; padding: 10px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
.sheet h2 { font: 700 22px/1.2 var(--font-head); padding: 12px 4px 4px; }
.sheet .row { min-height: 56px; padding: 0 4px; }
.sheet .row-title { font-size: 16px; }
.sync-block { display: flex; align-items: flex-start; gap: 8px; padding: 12px 4px 0; }
.sync-block .row-title { font-size: 13px; }

/* ---------------------------------------------------------------- sign-in pages */
.auth { min-height: 100dvh; display: flex; justify-content: center; padding: 32px 16px; }
.auth-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.auth-col .lockup { align-self: center; }
.auth h1 { font: 600 28px/1.2 var(--font-head); }

/* ---------------------------------------------------------------- tags */
.tag-soft { background: var(--accent-soft); color: var(--link); }
.tag-sunken { background: var(--tag-fill); color: var(--text); }   /* 0.27.1: lifted off a dark card (--sunken is near-black there) */
.tag-neutral { background: var(--tag-fill); color: var(--text); }   /* 0.29.0: the Selling tags (at a Show, on eBay, on a Live Stream) are neutral; gold stays for trades, soft blue is In Stock */
.tag-muted { background: var(--tag-fill); color: var(--muted); }
.tags { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow: hidden; }
.tags .tag { display: block; flex: 0 0 auto; line-height: 22px; }
.tags .tag-lane { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- photos (5 by 7) and the red mark */
.photo { position: relative; flex: none; display: flex; align-items: center; justify-content: center; background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.photo img.fit-whole { object-fit: contain; }   /* a slab's photo is narrower than 5 by 7: shown whole, on the box's own background */
.photo-thumb { width: 44px; height: 62px; }
.photo-cell { width: 36px; height: 50px; }
.photo-tile { width: 92px; height: 130px; }
.photo-big { width: 170px; height: 238px; border-radius: 6px; }
.photo-big img { border-radius: 5px; }
.photo-failed { flex-direction: column; gap: 10px; padding: 10px; text-align: center; }   /* a picture that cannot be loaded says so in words, never a broken image */
.photo-note { font-size: 12px; line-height: 1.35; }
.photo-empty { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.photo-attn { border: 2px solid var(--neg); }
.attn-mark {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--neg); color: var(--on-neg);
  border: 1.5px solid var(--surface); display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-body);
}

/* ---------------------------------------------------------------- Cards list (one row height, nothing wraps) */
.card-row { display: flex; align-items: center; gap: 10px; height: var(--row-h); padding: 0 10px; border-top: 1px solid var(--line); color: var(--text); width: 100%; }
.panel > .card-row:first-child { border-top: 0; }
a.card-row:hover { background: var(--bg); }
.card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.card-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-line { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-cost { flex: none; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.add-card-btn { width: auto; }
.export-cards-btn { width: auto; flex: none; }

/* ---------------------------------------------------------------- Settings, Card Ladder (Phase 6) */
.row-wrap { height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; align-items: flex-start; }
.row-wrap .row-line { white-space: normal; overflow: visible; }
.row-stack { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px; padding-bottom: 12px; }
.row-stack .kv-value { text-align: left; }
.report-host, .history-host { display: contents; }
.import-row { min-height: 64px; }
.import-row .row-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-row .tag { flex: none; }

/* ---------------------------------------------------------------- Cards page: search, filters, the three views */
.search-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.search:focus-within { outline: 2px solid var(--link); outline-offset: 1px; }
.search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 14px; color: var(--text); -webkit-appearance: none; appearance: none; }
.search-input::placeholder { color: var(--muted); font-size: 13px; }   /* 0.26.6: the Cards search words fit one line on a phone */
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear { display: flex; border: 0; background: none; padding: 6px; margin-right: -6px; color: var(--muted); }
.filter-sort { display: flex; gap: 10px; }
.filter-sort .btn { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--accent-soft); color: var(--link); font-size: 13px; font-weight: 600; white-space: nowrap; }
.view-switch .seg-opt { flex: 1; }
.list-host { display: flex; flex-direction: column; }
.show-more { margin-top: 12px; }
.card-values { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.card-sub { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.row-list, .tile-grid { overflow-anchor: none; }   /* 0.30.0: the list keeps the screen where it is itself when rows come and go (app/list-window.js) */
.win-spacer { grid-column: 1 / -1; pointer-events: none; }   /* the empty space that stands for the rows above and below the ones drawn */
.tile { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--text); }
a.tile:hover { border-color: var(--muted); }
.tile-photo { position: relative; display: flex; align-items: center; justify-content: center; height: 168px; flex: none; background: var(--sunken); }
.tile-sticker { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 44px); height: 22px; padding: 0 8px; border-radius: 6px; background: var(--surface); font-size: 12px; font-weight: 600; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-photo .tile-mark { top: 8px; right: 8px; width: 18px; height: 18px; }
.tile-info { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0; }
.tile-line { font-size: 12px; line-height: 1.4; color: var(--muted); min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-info .card-cost { text-align: left; }
.table-scroll { overflow-x: auto; }
.thead, .trow { display: grid; grid-template-columns: 36px minmax(160px, 1fr) 56px 72px 92px 72px 76px 76px 76px 68px; column-gap: 12px; align-items: center; padding: 0 16px; min-width: 800px; }
.thead.no-sticker, .trow.no-sticker { grid-template-columns: 36px minmax(160px, 1fr) 72px 92px 72px 76px 76px 76px 68px; }
.thead.no-cost, .trow.no-cost { grid-template-columns: 36px minmax(160px, 1fr) 56px 72px 92px 72px 76px 76px 68px; }   /* a person who may not see cost has no Paid column */
.thead.no-cost.no-sticker, .trow.no-cost.no-sticker { grid-template-columns: 36px minmax(160px, 1fr) 72px 92px 72px 76px 76px 68px; }
.thead { height: 40px; background: var(--sunken); font-size: 12px; font-weight: 600; color: var(--muted); }
.trow { height: var(--table-row-h); border-top: 1px solid var(--line); color: var(--text); font-size: 14px; }
a.trow:hover { background: var(--bg); }
.tcell { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcell.c-card { align-items: stretch; gap: 2px; }
.tcell.c-photo { overflow: visible; }
.tcell .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 22px; }
.trow .pos { color: var(--pos); font-weight: 600; }
.search-sort { display: flex; gap: 12px; align-items: flex-start; }
.filters-row { display: flex; flex-wrap: wrap; gap: 12px; }
.picker { gap: 10px; }
.picker-sm { width: auto; height: 40px; font-size: 13px; }
.filters-row .select-wrap, .search-sort .select-wrap { width: auto; }
.picker-sm + .menu { right: auto; min-width: 100%; width: max-content; max-width: 320px; }
.sheet.tall { max-height: 88dvh; overflow: auto; }
/* A sheet or pop-up scrolls inside itself and never hands the scroll on to the page behind it (0.21.0). */
html.scroll-lock, html.scroll-lock body { overflow: hidden; overscroll-behavior: none; }
.sheet-scrim { overscroll-behavior: contain; touch-action: none; }
.sheet { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.modal-scrim, .modal, .dialog { overscroll-behavior: contain; }
.sheet.tall { max-height: min(88vh, 88dvh); }
.sheet .ff { margin-top: 6px; }
.sheet-actions { display: flex; gap: 10px; padding-top: 12px; }
.sheet-actions .btn { flex: 1; min-width: 0; }
.row-pick { cursor: pointer; justify-content: space-between; }
.row-pick[aria-selected="true"] .row-title { color: var(--link); }
.link-icon { color: var(--link); }

/* ---------------------------------------------------------------- Add Card and Edit */
.seg-opt { border: 1px solid transparent; background: none; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); min-width: 0; padding: 0 8px; }
.seg-opt[aria-selected="true"], .seg-opt[aria-checked="true"] { background: var(--surface); border-color: var(--line); color: var(--text); }
.segmented { display: flex; gap: 2px; padding: 3px; height: 44px; background: var(--sunken); border-radius: 10px; }
.segmented .seg-opt { flex: 1; }
.segmented.has-error { outline: 2px solid var(--neg); }
.form-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.ff { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ff > label, .ff-label { font-size: 12px; color: var(--muted); }
.ff-row { display: flex; gap: 12px; }
.ff-sm { flex: 0 0 96px; }
.ff-sticker { flex: 0 0 140px; }
.input.has-error { border-color: var(--neg); }
textarea.input { height: auto; min-height: 44px; padding: 11px 12px; resize: none; field-sizing: content; max-height: 160px; line-height: 1.4; }
.panel:has(.form-body) { overflow: visible; }
.select-wrap { position: relative; }
.select { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.select.placeholder > span { color: var(--muted); }
.select svg { color: var(--muted); }
.menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; max-height: min(424px, 50dvh); overflow: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.menu-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-size: 14px; text-align: left; }
.menu-opt:hover, .menu-opt:focus-visible { background: var(--bg); }
.menu-opt[aria-selected="true"] { background: var(--accent-soft); }
.menu-opt svg { color: var(--link); }
.form-section h3 { font: 600 17px/1.2 var(--font-head); }
.form-section p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sub-panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sub-panel h3 { font: 700 16px/1.2 var(--font-head); }
.hint { font-size: 12px; color: var(--muted); }
.cost-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--accent-soft); border-radius: 10px; padding: 12px 16px; color: var(--link); }
.cost-bar .cost-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.cost-bar .cost-label small { font-size: 12px; }   /* 0.22.1: full strength; at 85% it measured 3.76:1 */
.cost-bar .figure { font: 600 20px/1.2 var(--font-head); white-space: nowrap; }
.photo-group { display: flex; flex-direction: column; gap: 6px; }
.photo-row { display: flex; align-items: center; gap: 12px; }
.photo-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-buttons .btn { flex: 1 1 140px; }   /* two across when there is room, one under the other at 320 wide */
.value-source { font-size: 13px; color: var(--muted); }
.find-body { gap: 12px; }
.find-row { display: flex; align-items: flex-end; gap: 10px; }
.find-row .ff { flex: 1; }
.panel .find-row .btn { flex: 0 0 auto; width: auto; min-width: 96px; }
.panel .find-result .btn { width: auto; }
.find-result { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.find-result:empty { display: none; }
.find-result .sentence.bad { color: var(--neg); }
.find-scan { height: 52px; flex: none; min-height: 44px; }
.find-scan.btn-secondary { background: #FFFFFF; color: #111111; border: 1.5px solid #111111; }   /* Scan Slab is white with black type and icon in both themes (0.20.1), so it is not the same yellow as Save Card */
.find-scan.btn-secondary:hover { background: #F1F1EE; }
.scan-screen { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; flex-direction: column; overflow: hidden; }   /* 0.26.6: nothing on the scan screen can scroll the page sideways */
.scan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }   /* 0.26.5: 4 px less above and below, to give the camera view back the room that three lines of sentence now keep */
.scan-top h2 { font: 700 20px/1.2 var(--font-head); }
.scan-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #111; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
.scan-stage.ready .scan-video { opacity: 1; }
.scan-guide { position: absolute; left: 19%; right: 19%; top: 50%; aspect-ratio: 2.4 / 1; transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, border-color 0.15s ease; }
.scan-stage.ready .scan-guide { opacity: 1; }
.scan-guide.seeing { border-color: #F5B942; }
@media (prefers-reduced-motion: reduce) { .scan-video, .scan-guide { transition: none; } }
.scan-bottom { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.scan-bottom .sentence { color: #E6E6E2; font-size: 14px; line-height: 1.45; min-height: calc(3 * 1.45em); display: flex; align-items: center; justify-content: center; text-align: center; }   /* room for three lines always: the camera view must not shrink when a longer sentence comes (a shorter view fitted the slab frame too small and the scan fell back to the label frame, 0.26.5) */
.scan-bottom .sentence.bad { color: #FFB4A9; }
.scan-bottom .btn { background: #fff; color: #111; }
/* After the read (0.15.0): the number, the slab's photo in place of the camera, and up to three buttons. On the black screen the main button is gold, the others white. */
.scan-bottom .btn-primary { background: #D9B24C; color: #15110A; }
.scan-actions { display: flex; flex-direction: column; gap: 8px; }
.scan-actions.scan-actions-row { flex-direction: row; }   /* Cancel and Take Photo Now side by side: one button's height, so the camera view stays as tall as it was */
.scan-actions-row .btn { flex: 1 1 0; min-width: 0; }
/* Slab Found (0.21.0): a band across the camera view, never over the middle of the picture, so the whole slab and its frame stay in sight (Tucker: it "can't cover the camera view,
   so the user can't see if it's even centered"). Since 0.21.2 along the BOTTOM, just above the instruction line: Safari's camera notice covers the top of the page each time the
   scanner opens. The frame is fitted to the stage above the band (FOUND_BAND_PX in views/scan-ui.js). Big bold white words with the count's digit beside them in gold. */
.scan-found { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 3px 16px; height: 46px; box-sizing: border-box; background: rgba(0, 0, 0, 0.62); pointer-events: none; text-align: center; z-index: 2; }
.scan-found.hidden { display: none; }
.scan-found-words { font: 800 28px/1 var(--font-head); color: #fff; letter-spacing: 0.01em; white-space: nowrap; }   /* one line, never clipped: 'Slab Found' and the digit are all the band holds (0.26.2) */
.scan-number { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 4px 12px; background: rgba(0, 0, 0, 0.62); font: 700 15px/1.3 var(--font-head); color: #fff; text-align: center; }   /* over the top of the camera view, not under it (0.26.5) */
.scan-stage.has-number .scan-shot { top: 40px; height: calc(100% - 52px); }
.scan-label-zone { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600; }
.scan-shot { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.scan-stage.after .scan-guide { opacity: 0; }
.find-pop { font-size: 13px; font-weight: 600; color: var(--text); }
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.action-bar .row-pair { display: flex; gap: 10px; }
.action-bar .row-pair .btn { flex: 1; min-width: 0; }
.btn-lg { height: 52px; }
.page.has-bar { padding-bottom: calc(var(--bar-h, 96px) + 32px); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.form-actions .btn-remove { margin-right: auto; }
.btn-danger-outline { background: var(--surface); border-color: var(--neg); color: var(--neg); }
.btn-danger-outline:hover { background: var(--neg-soft); }
.back-row { display: flex; align-items: center; min-height: 48px; }
.crumb { font-size: 13px; color: var(--muted); }
.crumb a { color: var(--link); font-weight: 600; }

/* ---------------------------------------------------------------- Card Detail */
.detail-title { font: 600 28px/1.2 var(--font-head); overflow-wrap: anywhere; }
.detail-line { font-size: 14px; color: var(--muted); }
.identity { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; }
.photo-center { display: flex; justify-content: center; width: 100%; }
/* Reference pictures (Phase 5C): the tag on the big photo, the source note under it, the Find panel and the pop-up that lists the candidates. */
.photo-ref-tag { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.reference-note { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.reference-find { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.dialog-ref { max-width: 440px; }
.ref-list { display: flex; flex-direction: column; gap: 10px; }
.ref-candidate { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ref-candidate:disabled { opacity: 0.6; cursor: default; }
.ref-picture { flex: none; width: 56px; height: 78px; object-fit: contain; background: var(--sunken); border-radius: 4px; }
.ref-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-text .row-line { white-space: normal; }
.ref-use { color: var(--link); font-size: 13px; font-weight: 600; }
.card-line-ref { display: flex; align-items: center; gap: 6px; }
.card-line-ref .ref-set { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-line-ref .ref-only { flex: none; height: 18px; line-height: 18px; padding: 0 6px; font-size: 11px; }
.attention { background: var(--neg-soft); border-color: var(--neg); }
.attention .panel-title { align-items: center; }
.attention-mark { width: 16px; height: 16px; border-radius: 50%; background: var(--neg); color: var(--on-neg); display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-body); flex: none; }
.attention-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 16px; border-top: 1px solid var(--line); }
.attention-row .btn { width: auto; height: 44px; padding: 0 14px; }
.attention-row .btn-link { height: auto; }
.row-kv .kv-value.big { font: 600 17px/1.2 var(--font-head); }
.kv-value .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.detail-cols { display: flex; flex-direction: column; gap: 14px; }
.stack-14, .form-host { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------- Settings: Appearance, Lists, Field Names, New Card Defaults */
.group { display: flex; flex-direction: column; gap: 6px; }
.group-label { font-size: 12px; color: var(--muted); }
.list-row { align-items: center; min-height: 64px; padding-top: 12px; padding-bottom: 12px; cursor: pointer; }
.list-row .row-line { white-space: normal; font-size: 13px; }
.list-row[aria-current="true"] { background: var(--accent-soft); }
.list-row[aria-current="true"] .row-title { color: var(--link); }
.editor-sentence { font-size: 13px; color: var(--muted); }
.panel-helper { padding: 16px 16px 12px; font-size: 13px; color: var(--muted); }
.opt-list { display: flex; flex-direction: column; }
.opt-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px 0 8px; border-top: 1px solid var(--line); background: var(--surface); }
.opt-list .opt-row:first-child { border-top: 0; }
.opt-row.dragging { position: relative; z-index: 3; background: var(--accent-soft); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.opt-row.is-hidden .opt-name { color: var(--muted); }
.opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grip { display: flex; border: 0; background: none; padding: 10px 4px; color: var(--muted); cursor: grab; touch-action: none; border-radius: 6px; }
.icon-btn { display: flex; border: 0; background: none; padding: 10px; border-radius: 8px; color: var(--muted); }
.icon-btn:hover { background: var(--bg); color: var(--text); }
.opt-edit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.opt-edit .input { height: 38px; }
.opt-edit-row { display: flex; align-items: center; gap: 2px; }
.opt-edit-row .input { flex: 1; min-width: 0; }
.add-row { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-top: 1px solid var(--line); }
.btn-quiet { background: none; border-color: transparent; color: var(--text); }
.btn-quiet svg { color: var(--muted); }
.btn-quiet:hover { background: var(--bg); }
.section-note { font-size: 13px; color: var(--muted); }
.panel-body p.sentence { font-size: 13px; }
.settings-host { display: flex; flex-direction: column; gap: 14px; }
.panel-note-pad { padding: 0 16px 12px; }
.panel:has(.select-wrap) { overflow: visible; }

/* ---------------------------------------------------------------- Shows (Phase 8) */
.tag-pos { background: var(--pos); color: var(--surface); }
.shows-host { display: flex; flex-direction: column; gap: 14px; }
.add-show-btn { width: 100%; }
.show-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.show-name-row, .show-title-row { display: flex; align-items: center; gap: 6px 10px; min-width: 0; }
.show-title-row { flex-wrap: wrap; }
.show-title-row .tag { flex: none; }
.show-name { font: 600 18px/1.25 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.show-line { font-size: 13px; color: var(--muted); }
.show-title-row .detail-title { min-width: 0; overflow-wrap: anywhere; flex: 0 1 auto; }   /* 0.22.1: the whole name wraps, so the Active tag is never pushed off the edge */
.view-link { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-size: 14px; font-weight: 600; }
.show-goal { display: flex; flex-direction: column; gap: 6px; }
.goal-text { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.goal-track { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.goal-track::-webkit-progress-bar { background: var(--sunken); border-radius: 4px; }
.goal-track::-webkit-progress-value { background: var(--gold); border-radius: 4px; }
.goal-track::-moz-progress-bar { background: var(--gold); border-radius: 4px; }
.show-goal-pad { padding: 4px 16px 16px; }
.show-counts .tag { flex: none; }
.show-row { min-height: var(--list-row-h); padding-top: 8px; padding-bottom: 8px; }
.show-row .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.name-row .tag, .name-row .attention-mark { flex: none; }
.name-row .row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcell .name-row .tag { max-width: none; overflow: visible; }
.show-profit { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.show-profit .figure, .item-amount .figure { font: 600 15px/1.2 var(--font-head); white-space: nowrap; }
.figure.neg, .tcell.neg { color: var(--neg); }
.past-controls { padding: 0 16px 12px; }
.show-more { margin: 12px 16px 16px; width: calc(100% - 32px); }
.panel-empty { padding: 4px 16px 20px; color: var(--muted); font-size: 13px; }
.cost-note { padding: 8px 16px 16px; color: var(--muted); font-size: 13px; }
.show-actions-row { display: flex; gap: 10px; }
.show-actions-row .btn { flex: 1; }
.show-item { min-height: var(--list-row-h); padding-top: 8px; padding-bottom: 8px; }
.item-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.view-all { min-height: 52px; }
.view-all .row-title { color: var(--link); }
.delete-group { display: flex; flex-direction: column; gap: 8px; }
.ff-state { flex: 0 0 110px; }
.switch-row-form { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.switch-row-form .row-title strong { font-weight: 700; }
.switch-row-form .switch-name { font-weight: 400; }
.shows-section { display: flex; flex-direction: column; gap: 12px; }
.shows-section h2, .past-head h2 { font: 700 20px/1.2 var(--font-head); }
.modal-scrim { z-index: 45; overflow: auto; align-items: flex-start; }
.modal { width: 100%; max-width: 560px; margin: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-wide { max-width: 860px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-head h2, .modal-title h2 { font: 600 26px/1.2 var(--font-head); }
.modal-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modal-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.show-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.show-columns > div { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  .current-body { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 24px; align-items: center; padding: 4px 16px 20px; }
  .show-identity { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .show-totals .row { border-top: 0; min-height: 36px; padding: 0; }
  .show-actions { display: flex; flex-direction: row; gap: 10px; grid-column: 3; justify-self: end; }   /* 0.22.3: side by side, one weight each */   /* always the last column, so a member with no totals still has it at the right edge */
  .show-actions .btn, .panel .show-actions .btn { width: 130px; }
  .past-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .stable { grid-template-columns: minmax(140px, 2fr) 150px 130px 110px 110px 120px 64px 24px; }
  .stable.no-totals { grid-template-columns: minmax(140px, 2fr) 170px 150px 24px; }
  .th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
  .th-sort:hover { color: var(--text); }
  .chev-spacer { width: 18px; }
  .c-show .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .add-show-btn { width: auto; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  body { font-size: 14px; }
  .app { flex-direction: row; }
  .only-phone { display: none !important; }
  .only-desktop { display: flex !important; }
  .tabbar { display: none; }
  .main { padding-bottom: 0; min-width: 0; }
  .sidebar {
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px; flex: none; width: 240px; padding: 24px 16px; background: var(--surface); border-right: 1px solid var(--line);
    position: sticky; top: 0; height: 100dvh; overflow: auto;
  }
  .sidebar-top { display: flex; flex-direction: column; gap: 20px; }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); font-size: 14px; background: none; border: 0; width: 100%; text-align: left; }
  .nav-item svg { color: var(--muted); }
  .nav-item:hover { background: var(--bg); }
  .nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--link); font-weight: 600; }
  .nav-item[aria-current="page"] svg { color: var(--link); }
  .nav-item.settings-open { background: none; color: var(--text); font-weight: 600; }   /* 0.22.3: the open section is bold, never highlighted; only the page you are on is */
  .nav-sub { padding-top: 2px; display: flex; flex-direction: column; }
  .nav-sub .nav-item { height: 34px; padding-left: 40px; font-size: 13px; }
  .nav-sub .nav-item[aria-current="page"] { color: var(--link); }
  .nav-sub .nav-signout { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; height: 44px; padding-left: 12px; }
  .sidebar-top { padding-bottom: 24px; }
  .offline-status { padding: 0 4px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
  .page { max-width: 1320px; margin: 0 auto; padding: 32px; gap: 24px; }   /* 0.22.1: the page uses the window and sits in the middle of a very wide one, never in a narrow column on the left */
  .screen-title h1 { font-size: 30px; }
  .page-header .sentence { font-size: 14px; margin-top: 4px; }
  .section-heading { display: flex; flex-direction: column; gap: 4px; }
  .section-heading h2 { font: 700 24px/1.2 var(--font-head); }
  .section-heading p { color: var(--muted); font-size: 14px; }
  .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .columns > div { display: flex; flex-direction: column; gap: 16px; }
  .section-narrow { max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
  .btn { width: auto; }
  .panel .btn { width: 100%; }
  .dialog-actions .btn { width: auto; }
  .sheet-scrim { align-items: center; }
  .photo-big { width: 260px; height: 364px; }
  .photo-buttons .btn { flex: 0 0 180px; }
  .form-host, .detail-host { gap: 24px; }
  .panel .attention-row .btn { width: auto; }
  .attention-row .row-title { white-space: nowrap; }
  .page.has-bar { padding-bottom: 32px; }
  .action-bar { left: 240px; align-items: center; }   /* the bar starts where the page does, not under the sidebar, and its buttons keep a sensible width */
  .action-bar > * { width: 100%; max-width: 560px; }
  .page .finish-spacer { display: block; height: 72px; }
  .add-columns { display: flex; gap: 16px; align-items: flex-start; }
  .add-columns > * { flex: 1; min-width: 0; }
  .detail-cols { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }
  .detail-cols > div { display: flex; flex-direction: column; gap: 16px; }
  .detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .detail-head .actions-right { display: flex; gap: 10px; }
  .detail-head .btn { width: auto; }
  .tile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .view-switch-desktop { width: 240px; }
  .search-sort .picker-sm { height: 44px; }
  .lists-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .lists-columns > div { display: flex; flex-direction: column; gap: 16px; }
  .settings-host { gap: 16px; }
}
@media (max-width: 899px) {
  .page-header { display: none; }
  .section-heading { display: none; }
}
/* On a phone or tablet, iOS Safari zooms the page in when a field with text under 16px gets focus and leaves it zoomed.
   Every text box, search box, date box, and number box (they all share .input or .search-input) is 16px on touch (the drop-down
   boxes are buttons that open a list, not fields);
   the 14px of the design stays on a computer. Pinch zoom stays on. */
@media (pointer: coarse) {
  .input:not(.select), .search-input { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .spin { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* ---------------------------------------------------------------- Sales and History (Phase 9) */
.tag-blue { background: var(--blue-soft); color: var(--on-blue); }
.tag-gold { background: var(--accent-soft); color: var(--link); }
.neg { color: var(--neg); }
.sell-summary { height: auto; min-height: var(--row-h); padding: 12px 16px; }
.profit-line { border-top: 1px solid var(--line); }
.hist-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hist-controls .picker { width: auto; }
.hist-types { flex: 1 1 100%; }   /* 0.22.3: the All, Buys and Sales control has the whole row on a phone, with room for its labels */
.hist-types .seg-opt { min-width: 76px; padding: 0 12px; }
.hist-row2 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1 1 100%; }
.hist-row2 .btn { width: auto; flex: 1 1 auto; }
@media (min-width: 900px) { .hist-types { flex: none; } .hist-row2 { flex: none; } .hist-row2 .btn { flex: none; } }
.hist-totals { display: flex; gap: 24px; flex-wrap: wrap; }
.hist-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13px; }
.hist-stat { display: flex; flex-direction: column; gap: 2px; }
.hist-stat .figure { font: 600 20px/1.2 var(--font-head); }
.dialog-tall { min-height: 420px; }
.htable { grid-template-columns: 90px minmax(0, 2fr) minmax(0, 1.8fr) minmax(0, 1.2fr) 64px 76px 84px 84px 18px; column-gap: 10px; min-width: 0; }
.htable.no-money { grid-template-columns: 90px minmax(0, 2fr) minmax(0, 1.8fr) minmax(0, 1.2fr) 64px 76px 18px; }
.htable .tcell .tag { display: inline-block; vertical-align: middle; }
.htable .tcell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 0.22.1: a block, so WebKit shows "..." and a long set name never runs into the next column */
.th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* ---------------------------------------------------------------- Home and Exports (Phase 12) */
.home-host { display: flex; flex-direction: column; gap: 14px; }
.home-banner:empty { display: none; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-actions .quick-btn { height: 56px; }
.quick-actions .quick-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.banner-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px; width: 100%; text-align: left; font-size: 15px; font-weight: 600; color: var(--text); }
.banner-link { cursor: pointer; }
.banner-link:hover { background: var(--bg); }
.banner-label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.banner-go { display: flex; align-items: center; gap: 4px; flex: none; color: var(--link); font-size: 14px; }
.home-note { padding: 0 4px; }
.row-kv .figure { font: 600 17px/1.2 var(--font-head); }
.home-stats { display: flex; gap: 24px; padding: 8px 20px 16px; }
.home-stat { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.home-figure .figure { font: 600 28px/1.2 var(--font-head); white-space: nowrap; }
.home-attention .row-title { white-space: nowrap; }
.export-picks .seg-opt { font-size: 13px; padding: 0 2px; white-space: nowrap; }
.export-desc { color: var(--muted); font-size: 13px; }
@media (min-width: 900px) {
  .quick-actions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .quick-actions .quick-btn:last-child:nth-child(odd) { grid-column: auto; }
  .home-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
  .home-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
  .home-row + .home-row { grid-template-columns: 1fr 1.4fr; }
  .home-title { align-items: flex-start; justify-content: space-between; }
  .home-title .sync-line { margin-top: 12px; font-size: 13px; }
  .home-attention .row-line { white-space: normal; }
}

/* ---------------------------------------------------------------- To Do (Phase 7, Part A) */
.count-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--flag); color: var(--on-flag); font-size: 13px; font-weight: 700; white-space: nowrap; }
.todo-banner:empty, .todo-show:empty, .todo-flash:empty, .todo-pill-host:empty { display: none; }
.todo-sync { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.todo-sync .btn { width: 100%; }
.todo-last-synced { color: var(--muted); font-size: 12px; }
.todo-sentence { line-height: 1.5; }
.todo-filters { display: flex; align-items: flex-start; gap: 8px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }   /* every chip is in view; none is cut at the edge */
.fchips::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.fchip:hover { background: var(--bg); }
.fchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--gold); color: var(--link); }
.todo-list { display: flex; flex-direction: column; gap: 14px; }
.todo-show-note, .todo-flash-msg { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.todo-item .item-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 0; }
.todo-item .item-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.item-title { font: 600 15px/1.3 var(--font-head); color: var(--text); overflow-wrap: anywhere; }
.slab { flex: none; width: 44px; height: 62px; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--link); }
.slab-grader { font-size: 10px; font-weight: 600; }
.slab-grade { font: 700 16px/1 var(--font-head); }
.todo-item .item-details { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.item-note { color: var(--muted); font-size: 13px; padding-top: 4px; }
.todo-item .item-actions { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.todo-item .decision { display: flex; gap: 12px; }
.todo-item .decision .btn { flex: 1; min-width: 0; }
.todo-item .item-actions > .btn { width: 100%; }
.item-edit { display: flex; flex-direction: column; gap: 12px; }
.item-edit-toggle { align-self: flex-start; padding: 4px 0; }
.item-message:empty { display: none; }
.todo-more { align-self: stretch; }
.pick-results { display: flex; flex-direction: column; max-height: 288px; overflow: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.pick-results .row { min-height: 56px; border-top: 1px solid var(--line); }
.pick-results .row:first-child { border-top: 0; }
.pick-results .panel-empty { padding: 16px; }
.pick-summary { font-weight: 600; font-size: 14px; }
.dialog .search { margin: 8px 0; }
.badge.hidden { display: none; }
@media (min-width: 900px) {
  .todo-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .todo-title { max-width: none; flex: 1; }
  .todo-actions { display: flex; align-items: flex-start; gap: 12px; }
  .todo-actions .count-pill { margin-top: 6px; }
  .todo-sync { align-items: flex-start; }
  .todo-sync .btn { width: auto; }
  .fchip { height: 36px; }   /* a computer's pointer: smaller is fine; a phone keeps 44 */
  .todo-filters { flex-wrap: wrap; }
  .fchips { overflow: visible; flex-wrap: wrap; flex: 0 1 auto; }
  .todo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .todo-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .nav-item .badge-inline { position: static; margin-left: auto; min-width: 21px; height: 20px; line-height: 20px; border-radius: 10px; }
}

/* ---------------------------------------------------------------- Deals (Phase 11, Part A2) */
.deals-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deals-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deals-title h1 { font: 600 28px/1.2 var(--font-head); }
.new-deal-btn { width: auto; flex: none; }
.group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sunken); font-size: 12px; font-weight: 700; }
.deal-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); min-height: var(--row-h); color: var(--text); }
.panel > .deal-row:first-child { border-top: 0; }
a.deal-row:hover, a.dtrow:hover { background: var(--bg); }
.deal-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.deal-row-name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }   /* 0.25.1: a long deal name wraps onto as many lines as it needs instead of being cut mid-name */
.deal-row-line { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-table { overflow: hidden; }
.dhead, .dtrow { display: grid; grid-template-columns: minmax(0, 1.8fr) 100px 52px minmax(150px, 1fr) 66px 66px 84px 92px 108px; gap: 8px; align-items: center; padding: 0 16px; }   /* 0.22.3: the Deal and Show columns take the spare width; the rest fit their content */
.dhead { height: 40px; background: var(--sunken); font-size: 12px; color: var(--muted); font-weight: 600; }   /* the same header band as History's table */
.dtrow { height: var(--table-row-h); border-top: 1px solid var(--line); color: var(--text); font-size: 13px; }
.dhead + .dtrow { border-top: 0; }
.dcell { min-width: 0; overflow: hidden; }
.dcell.cash { white-space: nowrap; text-overflow: ellipsis; }
.dcell .ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtrow .dcell.name { font-weight: 600; }
.dcell.gain { text-align: right; }
/* Part B2b: the Deals page's search and filter, the red mark with progress, the sortable headers */
.deals-controls { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.deals-controls .search-wrap { flex: 1 1 220px; }
.deal-attention-chip { gap: 8px; }
.deal-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--neg); color: var(--on-neg); font: 700 11px/1 var(--font-body); }
.deal-attention-chip .deal-mark { margin-right: 0; }
.deal-row-attn { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--neg); }
.deal-view-all { width: 100%; border-top: 1px solid var(--line); }
.dsort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.dcell.gain .dsort { margin-left: auto; }
.dcell.name { display: flex; align-items: center; }
.dcell.name .ellipsis { flex: 1; min-width: 0; }
.deal-table.no-money .dhead, .deal-table.no-money .dtrow { grid-template-columns: minmax(0, 1.8fr) 100px 52px minmax(150px, 1fr) 66px 66px 92px; }
.gain-so-far { color: var(--muted); font-size: 11px; font-weight: 400; }

/* the sheet or pop-up a deal opens */
.overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.overlay-head h2 { font: 700 22px/1.2 var(--font-head); padding: 0; }
.overlay-x { flex: none; }
.overlay-modal { max-width: 560px; background: var(--surface); }
.overlay-modal:has(.choice-grid) { max-width: 720px; }
.overlay-sheet { gap: 12px; }
.overlay-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.overlay-actions .btn { width: auto; min-width: 140px; }
.sheet .overlay-actions .btn { width: 100%; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.choice-heading { font: 600 15px/1.3 var(--font-head); margin-top: 4px; }
.choice-grid { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; min-height: 64px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; width: 100%; }
@media (hover: hover) { .choice:hover { background: var(--bg); } }
.choice[aria-checked="true"] { background: var(--accent-soft); border-color: var(--text); }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-title { font-size: 15px; font-weight: 600; }
.choice[aria-checked="true"] .choice-title { color: var(--link); }
.choice-line { font-size: 12px; color: var(--muted); }
.choice-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
.choice[aria-checked="true"] .choice-dot { border-color: var(--text); background: radial-gradient(circle, var(--text) 0 4px, transparent 5px); }
.bulk-note { color: var(--link); font-weight: 600; }
.balance-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.balance-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; width: 100%; }
.balance-row:first-child { border-top: 0; }
.balance-row:hover { background: var(--bg); }
.balance-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.balance-now { font-size: 12px; color: var(--muted); white-space: nowrap; }
.inventory-list { max-height: 360px; }
.inventory-row { cursor: pointer; }
.inventory-row .photo-cell { flex: none; }
.entry-price { flex: 0 0 38%; max-width: 160px; display: flex; }
.entry-find .panel { border: 0; background: none; overflow: visible; }
.entry-find .panel-title, .entry-find .find-body .hint { display: none; }
.entry-find .find-body { padding: 0; }
.entry-phone .entry-find .find-row { display: none; }
.entry-phone .entry-find .find-scan { width: 100%; }
.entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-foot .btn-link { display: inline-flex; align-items: center; gap: 4px; height: 44px; color: var(--link); font-size: 14px; }
.entry-add { width: auto; min-width: 120px; }
.entry-details { display: flex; flex-direction: column; gap: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0; }
.icon-btn:hover { background: var(--bg); }
.panel-title .panel-action { margin-left: auto; height: auto; color: var(--link); font-size: 13px; font-weight: 600; background: none; border: 0; padding: 4px 0; }
.panel-empty { padding: 16px; color: var(--muted); font-size: 13px; }

/* the deal form */
.deal-host { display: contents; }
.deal-identity { display: flex; flex-direction: column; gap: 4px; }
.deal-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.deal-title { font: 600 24px/1.2 var(--font-head); min-width: 0; overflow-wrap: anywhere; flex: 1 1 100%; }   /* the whole name, never cut; the tag and the pencil go on the line under it */
.deal-name-edit { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; }
.deal-name-input { font-weight: 600; }
.deal-subline { color: var(--muted); font-size: 13px; }
.deal-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); min-height: 76px; }
.panel-title + .deal-lines > .deal-line:first-child, .deal-lines > .deal-line:first-child { border-top: 0; }
.deal-line.is-grey { opacity: 0.6; }
/* a Completed or Passed deal opens locked (0.20.0): the panels are inert, and what only edits is hidden until Edit Deal */
.is-locked .panel-action, .is-locked .icon-btn, .is-locked .deal-line-link, .is-locked .fix-it, .is-locked .fix-link, .is-locked .lot-btn, .is-locked .fin-remove { display: none !important; }   /* 0.26.9: !important, because the 44 px tap rule below set them to inline-flex again and a deal opened for reading showed Remove and Add From Inventory */
.change-list { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.lot-photo { width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; background: var(--sunken, #eee); }
.lot-buttons { display: flex; gap: 8px; }
.finish-head { display: flex; flex-direction: column; gap: 6px; }
.finish-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.finish-tools .finish-tool { flex: 1 1 150px; width: auto; height: auto; min-height: 44px; white-space: normal; }
.finish-tools:empty { display: none; }
.finish-tool { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; text-align: center; font-size: 14px; }
.finish-instruction { margin: 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.finish-instruction:empty { display: none; }
.finish-instruction.is-ready { color: var(--pos); }
.finish-lane { padding: 4px 2px 0; }
.finish-lane .lane-question { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text); }
.bar-reason { margin: 0; text-align: center; font-size: 13px; }
.fin-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.finish-rows > .fin-row:first-child, .finish-rows > .deal-line:first-child { border-top: 0; }
.fin-row-top { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.fin-row-top .spacer { flex: 1; }
.fin-num { font-size: 12px; font-weight: 600; color: var(--muted); }
.fin-name { width: 100%; }
.fin-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-row-foot:empty { display: none; }
.fin-row-foot .price-box { margin-left: auto; }
.finish-spacer { display: none; }
.kv-value .pos { color: var(--pos); font-weight: 600; }
.deal-fact { margin: 0; padding: 12px 16px; font-size: 15px; line-height: 1.4; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.breakdown > .deal-fact:first-child { border-top: 0; }
.fact-pos { color: var(--pos); font-weight: 600; }
.fact-neg { color: var(--neg); font-weight: 600; }
.fact-wait { color: var(--muted); }
.deal-fact-note { display: block; margin-top: 2px; font: 500 13px/1.35 var(--font-body); color: var(--muted); }   /* 0.29.2: what the ahead-in-value figure compares, small under it */
.trade-value-note { display: block; margin-top: 4px; font: 500 13px/1.35 var(--font-body); color: var(--muted); }
.deal-fact-link { padding: 0 16px 10px; }
.fix-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.deal-line-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1; }
.deal-line-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.deal-line-sub { font-size: 12px; color: var(--muted); }
.deal-line-link { color: var(--link); font-size: 13px; height: auto; padding: 4px 0; }
.slab-blank { background: var(--sunken); color: var(--muted); }
.price-box { display: flex; align-items: flex-start; gap: 8px; flex: none; }
.price-label { font-size: 12px; color: var(--muted); line-height: 1.15; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 44px; white-space: nowrap; }   /* 0.29.2: Market Value and Into It For stay on one line, level with their box (they wrapped to two lines, low on the left) */
.price-hint { font-size: 11px; line-height: 1.2; }
.price-field { display: flex; flex-direction: column; gap: 4px; }
.price-input { width: 108px; text-align: right; }
.cash-body { gap: 12px; }
.cash-body .ff-label:empty { display: none; }
.deal-show .switch-row { border-top: 0; }
.deal-decide { padding-top: 0; gap: 6px; }
.deal-show:not(:has(.switch-row)) .deal-decide { padding-top: 16px; }
.breakdown-row .kv-value { display: inline-flex; align-items: center; gap: 10px; }
.kv-value .neg { color: var(--neg); }
.balance-ok { color: var(--pos); display: inline-flex; align-items: center; gap: 4px; }
.breakdown-row .kv-value > span { white-space: nowrap; }
.balance-off { color: var(--neg); }
.balance-wait { color: var(--muted); font-weight: 500; }
.breakdown-row .kv-value > span.balance-wait { white-space: normal; }
.fix-it { width: auto; height: 44px; padding: 0 14px; }
.deal-note { padding: 4px 16px 16px; }
.deal-note.bad, .deal-help { color: var(--neg); }
.deal-sentences { display: flex; flex-direction: column; gap: 6px; }
.deal-phone-sentences { padding: 0 4px 8px; }
.deal-pick { cursor: pointer; }
.deal-lines-panel .deal-link-row { min-height: 56px; }
.deal-view { color: var(--link); font-size: 13px; font-weight: 600; white-space: nowrap; }
.deal-link-row .row-title { font-size: 14px; }
@media (max-width: 899px) {
  .deal-line { flex-wrap: wrap; }
  .deal-line .price-box { order: 3; flex: 1 0 100%; justify-content: flex-end; }
}
@media (min-width: 900px) {
  .deals-head { margin-bottom: 4px; }
  .deal-modal { max-width: 1000px; background: var(--surface); }
  .deal-head { align-items: flex-start; }
  .deal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .deal-footer { display: flex; align-items: center; gap: 10px; position: sticky; bottom: -24px; z-index: 2; margin: 0 -24px -24px; padding: 14px 24px; background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }   /* the buttons stay in view at the bottom of the pop-up */
  .deal-footer .btn { width: auto; min-width: 140px; }
  .deal-footer .spacer { flex: 1; }
  .choice-kinds { display: grid; grid-template-columns: repeat(3, 1fr); }
  .choice-entries { display: grid; grid-template-columns: 1fr 1fr; }
  .entry-desktop .entry-find .find-row .btn { min-width: 96px; }
}

/* Reading the label (Phase 5B): the small tag beside a box the label filled, the one quiet line under the form's title, and the Card Detail check. */
.tag-label { height: 18px; padding: 0 6px; margin-left: 6px; font-size: 11px; vertical-align: middle; gap: 3px; background: var(--accent-soft); color: var(--link); }
.tag-label svg { flex: none; }
/* The wait while the label is read (0.21.5): the detail boxes are covered, the photo is not. */
.read-waiting { position: relative; }
.read-waiting .photo-group { position: relative; z-index: 3; }
.read-cover { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-start; padding: 28px 16px; border-radius: inherit; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.read-cover.hidden { display: none; }
.read-cover-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); max-width: 320px; }
.read-spinner { color: var(--text); }
.read-cover-line { margin: 0; font-weight: 600; color: var(--text); }
.read-cover-skip { min-height: 44px; padding: 0 12px; background: none; border: 0; font: inherit; text-decoration: underline; color: var(--link); cursor: pointer; }
/* A slab already in the inventory (0.21.5): one obvious panel at the top of the form. */
.dup-slab { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--neg-soft); border: 2px solid var(--neg); }
.dup-slab.hidden { display: none; }
.dup-slab-line { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.label-line { margin: 0; }
.label-line.reserve { min-height: 1.5em; }   /* once a reading is asked for, the line keeps its height whether it has words or not, so the form below it does not move */
.label-line.quiet { visibility: hidden; }
.label-line.offline { padding: 8px 12px; border-radius: 10px; background: var(--neg-soft); color: var(--neg); border: 1px solid var(--neg); font-weight: 600; }   /* No signal: a red banner in the palette's red */
.reading-room .ff:has(.tag-label) .field-note:empty { display: block; min-height: 15px; }   /* a box a reading can fill keeps the height of the sentence that may appear under it */
.reading-room .ff-sm:has(.tag-label) { flex-basis: 138px; }   /* and the Year box is already wide enough for its tag */
.label-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.label-check .sentence { color: var(--text); font-size: 14px; flex: 1 1 220px; }
.label-check .label-check-actions { display: flex; gap: 8px; }
.label-check .btn { width: auto; height: 36px; padding: 0 12px; }
.panel-subtitle { padding: 12px 16px 4px; margin: 0; border-top: 1px solid var(--line); }
.ff-sm:has(.tag-label:not(.hidden)) { flex-basis: 138px; }   /* the narrow Year box makes room for its tag instead of wrapping the label over its neighbour */

/* eBay (Phase 7, Part B): the disconnected banner with Reconnect, and the small Disconnect link at the bottom of Settings, eBay */
.ebay-banner, .ebay-sales-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ebay-banner-text { flex: 1 1 220px; }
.ebay-banner .ebay-reconnect, .panel .ebay-banner .ebay-reconnect, .ebay-sales-notice .ebay-reconnect { width: auto; height: 36px; flex: 0 0 auto; text-decoration: none; }
/* Phase 10: the calm notice that asks for one more approval before eBay sales can be read, and the small copy-the-ID action on Card Detail */
.ebay-sales-notice { margin-bottom: 12px; }
.copy-id-row { display: flex; justify-content: center; padding: 6px 0 2px; }
.copy-id-fallback { font-size: 12px; color: var(--muted); text-align: center; }
.copy-id-value { display: block; user-select: all; word-break: break-all; color: var(--text); }
.item-card-link { display: inline-block; margin-top: 4px; }
.ebay-disconnect { display: flex; justify-content: center; padding: 4px 0; }

/* Add Another Card, offered once on Card Detail right after a save from Add Card (0.19.3). */
.added-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.added-note .btn { width: auto; flex: 0 0 auto; }

/* A cost that comes from a deal (0.20.1): the box shows the figure and cannot be changed, with a plain line and a link under it. */
.input-locked { background: var(--sunken); color: var(--muted); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--muted); }
.cost-from-deal { margin-top: -4px; font-size: 12px; color: var(--muted); }
.cost-from-deal .link { color: var(--link); font-weight: 600; text-decoration: underline; }

/* The red mark on Deals in the navigation: a small red circle with an exclamation mark */
.deals-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--neg); color: var(--on-neg); font: 700 11px/1 var(--font-body); }
.deals-mark.hidden { display: none; }
.deals-mark-tab { position: absolute; top: -3px; right: -3px; border: 1.5px solid var(--surface); }
.deals-mark-inline { margin-left: auto; }
.deals-mark-row { margin-left: 4px; }

/* Add From Inventory: several cards ticked at once, one Add button kept in view (0.21.0) */
.tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--on-accent); }
.tick.on { background: var(--accent); border-color: var(--accent); }
.inventory-row.is-picked { background: var(--accent-soft); }
.inventory-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; margin-top: 4px; }
.inventory-actions .inventory-add { min-width: 160px; }
.sheet .inventory-actions .btn { width: 100%; }

/* Search in Settings (0.21.1): the box under the sentence, the results in place of the page, and the setting a result opened marked for a moment */
.settings-search { margin: 0 0 12px; }
.settings-results { margin-bottom: 12px; }
.settings-results .panel-empty { margin: 8px 0; }
.search-hit { animation: search-hit 2.4s ease-out; border-radius: 10px; }
@keyframes search-hit { 0%, 70% { box-shadow: 0 0 0 3px var(--link); background: var(--accent-soft); } 100% { box-shadow: 0 0 0 3px transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .search-hit { animation: none; box-shadow: 0 0 0 3px var(--link); } }

/* An eBay purchase for the slab just scanned (0.21.1): the sentence and its button, in the same message box the form uses for other notices */
.ebay-slab-match { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ebay-slab-match .ebay-slab-text { font-weight: 600; }

/* Mark as Duplicate (0.21.1): the two cards side by side in a wide pop-up, a Keep This Card under each */
.dialog.dialog-wide { max-width: 640px; }
.dup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.dup-head { font: 700 13px/1.2 var(--font-head); color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.dup-label { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 8px; }
.dup-cell { font-size: 14px; overflow-wrap: anywhere; }
.dup-cell.differs { font-weight: 600; }
.dup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.dup-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dup-name { font: 700 14px/1.3 var(--font-head); overflow-wrap: anywhere; }
@media (max-width: 480px) { .dup-cols { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- 0.22.1: Support, spacing, and the full width of a computer */
.settings-landing, .support-host, .support-home { display: flex; flex-direction: column; gap: 14px; }
.settings-results, .support-results { margin-bottom: 0; }
.support-search { margin: 0; }
.support-head { display: flex; flex-direction: column; gap: 4px; }
.support-heading { font: 700 18px/1.2 var(--font-head); padding: 8px 0 0; color: var(--text); }
.support-grid, .topic-columns { display: flex; flex-direction: column; gap: 14px; }
.support-reading { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.topic-grid { display: none; }
.faq-row { padding-top: 12px; padding-bottom: 12px; }
.faq-q { min-width: 0; overflow-wrap: anywhere; }
.answer-title h2 { font: 700 20px/1.25 var(--font-head); overflow-wrap: anywhere; }
.topic-title:hover h2 { color: var(--link); }
.topic-title .panel-note { flex: none; white-space: nowrap; }
.about-lockup { min-height: 72px; }
.screen-title > .btn:not(.btn-back) { width: auto; flex: none; }
.screen-title h1 { flex: 1 1 auto; }
.screen-title .btn-back { flex: none; }
.settings-rest { display: flex; flex-direction: column; gap: 16px; }
.red-note { color: var(--neg); }
@media (min-width: 900px) {
  .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }   /* 0.22.3: cards in a row are one height, their titles one band high */
  .topic-grid .topic-title { min-height: 64px; }
  .topic-columns, .support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .support-reading { max-width: 880px; }
  .support-list { max-width: none; }
  .support-home { gap: 16px; }
  /* Settings sections fill the window: the panels flow into two columns, and a section that is one panel keeps a readable width */
  .settings-host { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; max-width: 880px; }
  .settings-host:has(> .panel ~ .panel) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }   /* two or more panels flow into two columns; one panel keeps a readable width */
  .settings-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .settings-panels:has(> .panel ~ .panel) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-panels:not(:has(> .panel ~ .panel)) > .panel { max-width: 880px; }
  .settings-panels > :not(.panel) { grid-column: 1 / -1; }
}

/* 0.22.2: Delete Deal apart from the buttons that finish a deal; the question on the Finish screen; the chooser's reason line */
.deal-danger { display: flex; justify-content: center; margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.deal-danger.hidden { display: none; }
.deal-modal .deal-danger { justify-content: flex-start; margin: 12px 0 0; }
.finish-lane .lane-ask { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--text); }
.finish-lane .segmented { height: auto; flex-wrap: wrap; }   /* 0.26.2: the shared two-way control, a white tab on a grey track, like every other */
.finish-lane .seg-opt { min-height: 44px; font-size: 15px; }
.finish-tiles .step-choice { min-height: 60px; font-size: 16px; }   /* 0.29.2: the places to sell are tiles, as on the lane question */
.finish-cost-ask { margin: 0; padding: 8px 16px 0; font-size: 14px; font-weight: 600; color: var(--text); }
.finish-cost-ask:empty { display: none; }
.finish-tiles .step-choice-icon { width: 40px; height: 40px; }
.choice-entry-block.hidden { display: none; }
/* 0.22.2: the Cards list row on a phone. The name, set and tags keep to their own column and are cut with "..." there; the three figures keep theirs and are never covered. */
.card-row .card-text { overflow: hidden; }
.card-row .card-text > * { min-width: 0; max-width: 100%; }
.card-row { gap: 8px; }
.card-row .card-values { flex: none; min-width: 0; gap: 3px; }
.card-row .card-values > * { overflow: visible; white-space: nowrap; }   /* 0.27.1: a figure takes its full width and is never cut; the name and set give way instead */
.card-row .card-cost { font-size: 12.5px; }
.card-row .card-sub { font-size: 12px; }

/* 0.22.3 */
.fin-why { white-space: normal; line-height: 1.4; }
.fin-remove { width: auto; min-width: 44px; height: 44px; min-height: 44px; padding: 0 14px; font-size: 14px; flex: none; }
.panel .fin-remove { width: auto; }   /* 0.26.7: `.panel .btn` is full width and was winning, so on a computer Remove stretched across a deal's card row and squeezed the name into a column of letters */
.finish-why { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.todo-sentence { max-width: none; }
.price-text { align-items: center; gap: 8px; }
.price-text .price-label { line-height: 1.2; }
.price-figure { font-size: 15px; font-weight: 600; }
.message.ok { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); border-color: var(--pos); font-weight: 600; }
.deal-lines-panel .deal-link-row { flex-wrap: wrap; row-gap: 2px; }
.deal-lines-panel .deal-link-row .row-text { flex: 1 1 100%; }
.deal-lines-panel .deal-link-row .row-title { white-space: normal; }
.deal-lines-panel .deal-link-row .deal-view { margin-left: auto; }
@media (min-width: 900px) { .home-cols .home-figure .figure { font-size: 24px; } .home-cols .home-stats { gap: 16px; padding-left: 16px; padding-right: 16px; } }
@media (min-width: 900px) { .panel:has(> .card-row) { max-width: 880px; } }
@media (max-width: 899px) { .hist-row2 > :first-child { flex: 1 1 100%; } .hist-row2 > :first-child .picker, .hist-row2 > .picker-sm { width: 100%; } }

.price-profit { margin: -4px 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.price-profit.pos { color: var(--pos); }
.price-profit.neg { color: var(--neg); }
/* 0.22.4: a long deal name wraps to two lines in the Deals table (the row is tall enough) instead of ending in "..." */
.dtrow .dcell.name .ellipsis { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 0.23.0: Add Card, one question per screen (design/card-tally.pen "Add Card 1 Start" to "Add Card 6 Saved") */
.add-view, .add-flow { display: flex; flex-direction: column; gap: 14px; }
.one-at-a-time .btn-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.step-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.step-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; background: none; border: 0; font: 700 15px/1 var(--font-body); color: var(--text); }
.step-count { font-size: 14px; font-weight: 600; color: var(--muted); }
.step-progress { display: flex; gap: 8px; }
.step-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.step-progress span.on { background: var(--accent); }
.step-body { display: flex; flex-direction: column; gap: 14px; }
.step-title { font: 800 clamp(26px, 7.4vw, 32px)/1.1 var(--font-head); color: var(--text); overflow-wrap: anywhere; }
.step-sentence { font-size: 15px; color: var(--muted); }
.step-context { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.step-echo { display: flex; flex-direction: column; gap: 8px; }
.step-echo:not(:has(> :not(.hidden):not(:empty))) { display: none; }
.step-problem:empty { display: none; }
.step-all { align-self: center; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; }
.step-skip { min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--muted); font: 700 15px/1 var(--font-body); }
.step-skip:hover { color: var(--text); }
.step-bar { align-items: stretch; }
.step-bar .step-skip { align-self: center; }

.step-answer .input { height: 60px; border-radius: 14px; font: 700 22px/1 var(--font-head); padding: 0 16px; }
.step-answer .input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.step-answer > label { font-size: 14px; }
.step-answer .input::placeholder { font-weight: 500; }
.step-money input.input { height: 88px; text-align: center; font: 800 44px/1 var(--font-head); border: 2px solid var(--accent); }
.step-money input.input::placeholder { color: var(--muted); opacity: 0.7; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key { height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 22px/1 var(--font-body); display: flex; align-items: center; justify-content: center; }
.key:active { background: var(--accent-soft); }

.step-choices { display: flex; flex-direction: column; gap: 8px; }
.step-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; font: 700 16px/1.2 var(--font-head); color: var(--text); }
@media (hover: hover) { .step-choice:hover { background: var(--bg); } }
.step-choice[aria-checked="true"] { border: 2px solid var(--accent); background: var(--accent-soft); padding: 0 13px; }
.step-choice-name { flex: 1; min-width: 0; }
.step-choice-tick { margin-left: auto; display: flex; visibility: hidden; color: var(--accent); }
.step-choice[aria-checked="true"] .step-choice-tick { visibility: visible; }
.step-lanes .step-choice { min-height: 76px; font-size: 18px; }
.step-choice-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--on-blue); }
.step-choice[aria-checked="true"] .step-choice-icon { background: var(--surface); color: var(--accent); }

.start-choice { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.start-scan { flex-direction: column; min-height: 210px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.start-type { min-height: 76px; }
.start-name { font: 800 24px/1.1 var(--font-head); }
.start-scan .start-name { font-size: 28px; }
.start-line { font-size: 14px; }
/* Scan Raw Card (0.32.0): between Scan Slab and Type It In, the same outline as Type It In so Scan Slab stays the main choice; the icon over two centred lines. */
.start-raw { flex-direction: column; min-height: 118px; gap: 4px; padding: 10px 16px; }
.start-raw .start-text { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.start-raw .start-line { color: var(--muted); }
/* the year and the variation a raw reading offers to tap (0.32.0) */
.step-suggest-block { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.step-suggest-title { font: 700 18px/1.25 var(--font-head); color: var(--text); }
/* the Scan Raw Card camera screen (0.32.0): Cancel sits in the top bar, white on the black screen like the buttons under the picture */
.raw-scan .scan-top .btn { background: #fff; color: #111; min-height: 40px; height: 40px; padding: 0 16px; width: auto; flex: none; }

.step-tag { align-self: flex-start; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; }
.step-card { position: relative; min-height: 220px; padding: 4px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.step-rows { display: flex; flex-direction: column; }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.step-row:first-child { border-top: 0; }
.step-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-row-label { font-size: 13px; color: var(--muted); }
.step-row-value { font: 700 22px/1.2 var(--font-head); overflow-wrap: anywhere; }
.step-fix { flex: none; min-width: 44px; min-height: 44px; padding: 0 8px; background: none; border: 0; color: var(--link); font: 700 15px/1 var(--font-body); text-decoration: underline; }
.fix-label { display: flex; flex-direction: column; gap: 6px; }
.fix-label img { width: 100%; max-height: 160px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }

.step-saved { align-items: center; text-align: center; padding-top: 72px; gap: 10px; }
.saved-mark { width: 128px; height: 128px; margin-bottom: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pos); background: color-mix(in srgb, var(--pos) 16%, var(--surface)); }
.saved-title { font: 800 40px/1.1 var(--font-head); color: var(--pos); }
.saved-card { font: 700 19px/1.3 var(--font-head); overflow-wrap: anywhere; }
.saved-line { font-size: 15px; color: var(--muted); }

@media (min-width: 900px) {
  .add-flow-desktop .step-shell { display: grid; grid-template-columns: 300px 1fr; min-height: 560px; padding: 0; overflow: hidden; }
  .step-side { padding: 28px 20px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
  .step-side-title { font: 800 22px/1.2 var(--font-head); }
  .step-side-line { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
  .step-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .step-item-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--muted); font-size: 15px; font-weight: 500; }
  button.step-item-btn:hover { background: var(--bg); }
  .step-item.here .step-item-btn { background: var(--accent-soft); color: var(--text); font-weight: 700; }
  .step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
  .step-item.here .step-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .step-num.done { background: var(--pos); border-color: var(--pos); color: var(--on-accent); }
  .step-main { display: flex; align-items: flex-start; justify-content: center; padding: 32px; }   /* 0.26.9: the title and the progress bar sit in the same place on a short step and a long one */
  .step-main-in { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
  .step-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  .step-actions-gap { flex: 1; }
  .add-flow-desktop .step-shell .btn { width: auto; min-width: 120px; }
  .add-flow-desktop .step-choices:not(.step-lanes) { display: grid; grid-template-columns: 1fr 1fr; }
  .add-flow-desktop .step-saved { padding-top: 24px; }
  .step-all { align-self: flex-start; padding: 0; }
}

/* 0.23.1: review fixes for Add Card */
.step-head { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px; margin-top: -8px; padding: 8px 0; background: var(--bg); }   /* starts at the top of the page (the page's own 8px is inside it), so it is in the same place scrolled or not */   /* the back button, the count and the segments stay put on every step */
.step-back { min-width: 44px; }
.step-skip, .step-all, .one-at-a-time .btn-link, .step-fix { min-height: 44px; min-width: 44px; }
.one-at-a-time .btn-link { padding: 0 8px; }
.key { height: 48px; }
/* a button that is off still shows its edges, in both themes (the 0.22.3 look was too faint on the dark bar); 0.25.1: this is the one look of every primary button that is off (Next, Add, Mark Completed, Finish Deal) */
.btn-primary:disabled { background: color-mix(in srgb, var(--muted) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); color: color-mix(in srgb, var(--text) 68%, var(--surface)); }   /* 0.26.6: the words of a button that is off read at a glance in dark too (about 9 to 1); the fill and edge still say it is off */

/* 0.24.0: Sell a Card, one question per screen (design/card-tally.pen "Sell 1 Sold For" to "Sell 3 Profit"). The rest is Add Card's look above. */
.step-profit { margin: 0; font-size: 17px; text-align: center; }
.sell-sentence { font-size: 16px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.sell-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.sell-hero.pos { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 40%, var(--line)); }
.sell-hero.neg { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); }
.sell-hero-label { font-size: 16px; font-weight: 600; color: var(--muted); }
.sell-hero.pos .sell-hero-label, .sell-hero.pos .sell-hero-figure { color: var(--pos); }
.sell-hero.neg .sell-hero-label, .sell-hero.neg .sell-hero-figure { color: var(--neg); }
.sell-hero-figure { font: 800 clamp(40px, 12vw, 56px)/1.1 var(--font-head); overflow-wrap: anywhere; }
.sell-lines { gap: 0; }
.sell-lines .row-kv { padding: 8px 0; }
.step-body .segmented { flex-wrap: wrap; }

/* 0.24.1: tap areas of at least 44 px for the segmented choices on the one-question flows and the full forms behind Show All Fields */
.add-view .segmented { height: auto; }
.add-view .segmented .seg-opt { min-height: 44px; }

/* ---------------------------------------------------------------- 0.25.0: Record a Trade, one question per screen (design/card-tally.pen "Trade 2 Cards You Give" to "Trade 7 Check Your Trade"). The rest is Add Card's look above. */
.trade-flow .search { height: 52px; border-radius: 14px; }
.pick-count { margin: 0; font-weight: 600; color: var(--text); }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; }
.pick-row .tick { width: 30px; height: 30px; border-radius: 8px; border-width: 2px; }
.pick-row.is-picked { border: 2px solid var(--accent); background: var(--accent-soft); padding: 7px 13px; }
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-name { font: 700 16px/1.2 var(--font-head); overflow-wrap: anywhere; }
.pick-line { font-size: 13px; color: var(--muted); }
.worth-rows { display: flex; flex-direction: column; gap: 10px; }
.worth-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.worth-name { flex: 1; min-width: 0; padding-top: 16px; font: 700 16px/1.2 var(--font-head); overflow-wrap: anywhere; }
.worth-field { flex: none; width: 160px; display: flex; flex-direction: column; gap: 4px; }
.worth-input { height: 56px; border-radius: 12px; text-align: center; font: 800 22px/1 var(--font-head); padding: 0 8px; }
.worth-input:focus { outline: 0; border: 2px solid var(--accent); padding: 0 7px; }
.incoming-list { display: flex; flex-direction: column; gap: 8px; }
.incoming-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.incoming-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.incoming-name { font: 700 16px/1.2 var(--font-head); overflow-wrap: anywhere; }
.incoming-line { font-size: 13px; color: var(--muted); }
.incoming-remove { flex: none; }
.step-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; border: 2px solid var(--accent); border-radius: 12px; background: none; color: var(--link); font: 700 17px/1 var(--font-body); }
.step-choice-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.step-choice-line { font: 500 14px/1.2 var(--font-body); color: var(--muted); }
.cash-pay .step-choice-icon { background: var(--neg-soft); color: var(--neg); }
.cash-receive .step-choice-icon { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--pos); }
.cash-amount { display: flex; flex-direction: column; gap: 10px; }
.trade-flow .step-lanes .step-choice { min-height: 64px; }
.trade-sum { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.trade-sum .deal-fact:first-child { border-top: 0; }
.trade-value { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: 700 18px/1.3 var(--font-head); }
.trade-value.pos { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 40%, var(--line)); color: var(--pos); }
.trade-value.neg { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); color: var(--neg); }
.trade-facts { display: flex; flex-direction: column; }
.trade-facts .deal-fact:first-child { border-top: 0; }
.trade-flow .bar-reason { margin: 0; }
@media (min-width: 900px) { .worth-field { width: 200px; } .pick-list { max-height: 400px; overflow-y: auto; padding: 2px; } }

/* ---------------------------------------------------------------- 0.25.1: review fixes for Record a Trade */
html { scroll-padding-bottom: calc(var(--bar-h, 96px) + 16px); }   /* a box or line scrolled into view stops above the fixed bar */
.deal-line .icon-btn, .deal-title-row .icon-btn { width: 44px; height: 44px; }   /* the remove X and the pencil: a 44 px hit area */
.inventory-row { min-height: 56px; }
.inventory-row .tick { width: 28px; height: 28px; border-radius: 8px; }

/* ---------------------------------------------------------------- 0.26.0: Total Only trades and the bulk deals, one question per screen */
.key-off { visibility: hidden; }   /* the number pad for a count has no decimal point */
textarea.step-note { height: auto; min-height: 132px; max-height: 240px; padding: 12px 14px; border-radius: 14px; font: 500 18px/1.4 var(--font-body); resize: vertical; }
textarea.step-note:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.step-lot { max-height: 320px; width: 100%; }
.step-photo-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.step-photo-buttons .btn { flex: 1 1 160px; min-height: 52px; }

/* ---------------------------------------------------------------- 0.26.1: review fixes for the deal questions */
.finish-tools { flex-direction: column; flex-wrap: nowrap; }   /* Change the Total and Change the Number of Cards: stacked, so neither wraps */
.finish-tools .finish-tool { flex: none; width: 100%; white-space: nowrap; }
.figure.pos, .tcell.pos, .row-line .pos { color: var(--pos); }   /* a profit above $0.00 is green in History and in a sale's breakdown */
.where-choice .step-choice-icon { background: var(--sunken); color: var(--muted); }   /* where it sold is not a buy: no soft blue */
.step-bar .step-skip-btn, .step-actions .step-skip-btn { min-height: 48px; }

/* ---------------------------------------------------------------- 0.26.2: design sweep, batch 1 (figures and flows) */
/* The header of every one-question screen is solid from edge to edge, and the question title stays just under it while a long list scrolls (it slid half under the progress bar). */
.step-head { box-shadow: -16px 0 0 var(--bg), 16px 0 0 var(--bg); }   /* the page's side gutters are painted too, so nothing shows beside it as the list scrolls under */
.step-body > .step-title { position: sticky; top: 70px; z-index: 4;   /* 70 = the header: 8 + the 44 px row + 4 + the 6 px bar + 8 */
   padding: 6px 0 8px; background: var(--bg); box-shadow: -16px 0 0 var(--bg), 16px 0 0 var(--bg); }
@media (min-width: 900px) { .step-head { position: static; box-shadow: none; } .step-body > .step-title { position: static; padding: 0; box-shadow: none; background: none; } }
.finish-host .step-head { position: sticky; }
.finish-host .finish-head .step-title { margin: 0; }
@media (min-width: 900px) { .finish-host .step-head { margin-bottom: 4px; } }
.step-why, .worth-why { text-align: center; font-size: 14px; font-weight: 600; color: var(--text); }   /* an instruction, not an error: not red */
.step-skip-line { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }   /* 0.26.6: the one line under Skip for Now on the price */
/* Things to tap are 44 px tall on a phone: a link set in small type gets the room around it, not a bigger word. */
@media (max-width: 899px) {
  .btn-link, .deal-line-link, .panel-title .panel-action, .item-edit-toggle, .item-card-link, .entry-more, .copy-id, .fix-link { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .deal-line-link { padding: 0; }
  .panel-title .btn-link, .panel-title .panel-action { margin-top: -12px; margin-bottom: -12px; }   /* the 44 px hit area overlaps the panel's own padding, so the title row stays as tall as it was */
}

/* ---------------------------------------------------------------- 0.26.3: design sweep, batch 2 (words and consistency) */
.pass-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pass-note { margin: 0; text-align: center; }
.add-deal-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.add-deal-wrap .btn { width: 100%; }
.add-deal-note { margin: 0; text-align: center; }
.field-hint { margin: 2px 0 0; }
.ff-row:has(.field-hint) { align-items: flex-start; }
.status-note { margin: 0; }
.rename-btn { gap: 6px; }
/* A switch is 44 px tall to tap; the track drawn inside it is still the slim one. */
.switch { width: 52px; height: 44px; padding: 0; border-radius: 0; background: none; display: block; position: relative; }
.switch[aria-checked="true"] { background: none; }
.switch::before { content: ''; position: absolute; left: 4px; top: 9px; width: 44px; height: 26px; border-radius: 13px; background: var(--line); }
.switch[aria-checked="true"]::before { background: var(--accent); }
.switch .knob { position: absolute; left: 7px; top: 12px; width: 20px; height: 20px; border-radius: 10px; background: var(--surface); }
.switch[aria-checked="true"] .knob { left: 30px; background: var(--on-accent); }
/* Settings sub-pages: a long title shrinks and stays on one line beside Back; Offline and Sync fills the width like the others. */
@media (max-width: 899px) {
  .search { height: 46px; }
  .segmented { height: 50px; }
  input.search { flex: none; }
  .picker-sm { height: 44px; }
  .search-clear { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0; margin-right: -12px; }
  .grip { min-height: 44px; min-width: 32px; align-items: center; }
  .opt-row .icon-btn, .opt-edit-row .icon-btn { width: 44px; height: 44px; }
  .view-link { min-height: 44px; }
  .add-deal-note { font-size: 12px; }
}
@media (max-width: 899px) {
  .title-with-back h1, .title-with-back h2 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
}
.tag-lane .lane-short { display: none; }
@media (max-width: 899px) { .card-row .tag-lane .lane-long, .tile .tag-lane .lane-long { display: none; } .card-row .tag-lane .lane-short, .tile .tag-lane .lane-short { display: inline; } }

/* ---------------------------------------------------------------- 0.26.9: review fixes of the deal screens */
.deal-show .deal-note { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--text); line-height: 1.4; }   /* the 'part of a show' box has even padding and the panels' own text size */
.action-bar .field-note.bad, .action-bar .split-note { margin: 0; text-align: center; font-size: 13px; }
.action-bar .field-note:empty { display: none; }
.deal-footer .footer-notes { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deal-footer .footer-notes .field-note, .deal-footer .footer-notes .split-note { margin: 0; text-align: left; font-size: 13px; }
.deal-footer .footer-notes .field-note:empty { display: none; }

/* ---------------------------------------------------------------- 0.27.0: Choose Later */
.lane-pick { display: flex; flex-direction: column; gap: 12px; }
.lane-pick-row { display: flex; flex-direction: column; gap: 6px; }
.lane-pick-title { font: 700 15px/1.3 var(--font-head); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; min-height: 44px; }
.lane-pick-choices { flex-wrap: wrap; height: auto; }
.lane-pick-choices .seg-opt { min-height: 44px; border-color: var(--line); background: var(--surface); color: var(--text); }
.where-sold .step-choice { min-height: 64px; }
.nobreak { white-space: nowrap; }

/* ---------------------------------------------------------------- 0.27.1: Choose Later and Somewhere Else stay on one line in a form's choices on a phone: each choice takes the room its words need */
.ff .segmented .seg-opt, .add-view .segmented .seg-opt { flex: 1 1 auto; white-space: nowrap; padding: 0 4px; }

/* Recent Sales (0.28.0): the button under Asking Price, and the small link with a circled "i" on a card's row. */
.rs-box { scroll-margin-bottom: calc(var(--bar-h, 96px) + 16px); display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.rs-note { margin: 0; }
.rs-note.offline { color: var(--neg); }
.rs-button.is-off, .rs-box.is-off .rs-button { opacity: 0.5; cursor: default; }
.rs-inline { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font: 600 13px/1.2 var(--font-body); }
.rs-link { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font: 600 13px/1.2 var(--font-body); text-decoration: none; position: relative; }
.rs-link::after { content: ''; position: absolute; left: -4px; right: -2px; top: -14px; bottom: -14px; }   /* a 44 px tall tap area on a link that is 16 px tall */
.rs-inline.is-off .rs-link { color: var(--muted); }
.rs-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--muted); }
.rs-info::after { content: ''; position: absolute; left: 0; right: -28px; top: -14px; bottom: -14px; }   /* 44 px wide and tall, reaching away from the link beside it */
.rs-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rs-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 50%; }   /* 0.29.0: a ring hugging the circle, so it clears the word Sales beside it */
.rs-tip { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: 240px; max-width: calc(100vw - 32px); padding: 10px 44px 10px 12px; border-radius: 10px; background: var(--text); color: var(--bg); font: 400 13px/1.35 var(--font-body); display: flex; flex-direction: column; gap: 6px; }   /* inverted: dark bubble in light mode, light bubble in dark mode */
.rs-tip::before { content: ''; position: absolute; bottom: -4px; left: var(--arrow, 24px); width: 8px; height: 8px; background: var(--text); transform: rotate(45deg); }
.rs-tip.below { bottom: auto; top: calc(100% + 8px); }
.rs-tip.below::before { bottom: auto; top: -4px; }
.rs-tip-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--bg); display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.rs-tip-close:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; }
.rs-tip.hidden { display: none; }
.worth-text { flex: 1; min-width: 0; padding-top: 16px; display: flex; flex-direction: column; align-items: flex-start; }
.worth-text .worth-name { padding-top: 0; flex: none; }
.deal-line-text .rs-inline { margin-top: 0; }

/* ---------------------------------------------------------------- 0.29.0: Live Stream, one line under it (Whatnot, eBay Live, Fanatics Live) */
.seg-line { display: block; font: 500 12px/1.25 var(--font-body); color: var(--muted); white-space: normal; margin-top: 2px; }
.segmented:has(.seg-line) { flex-wrap: wrap; height: auto; }
.segmented .seg-opt:has(.seg-line) { flex: 1 1 100%; min-height: 52px; padding: 4px 8px; white-space: normal; }
.segmented .seg-opt:not(:has(.seg-line)) { min-height: 44px; }
.opt-line { display: block; font: 500 12px/1.25 var(--font-body); color: var(--muted); }
.opt-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opt-name-wrap { padding: 8px 0; }
.opt-name-wrap .opt-name { flex: none; }

/* ---------------------------------------------------------------- 0.33.0: Search eBay (the Pen frames "Search eBay"): big controls, the chosen one filled in the accent colour */
.sx-head { display: flex; flex-direction: column; gap: 6px; }
.sx-panel { padding-top: 18px; gap: 20px; }
.sx-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sx-label { font: 700 14px/1.3 var(--font-body); color: var(--text); }
.sx-seg { display: flex; gap: 2px; padding: 3px; background: var(--sunken); border-radius: 14px; }
.sx-seg .sx-opt { flex: 1; min-height: 52px; border: 1px solid transparent; background: none; color: var(--muted); font-weight: 600; }
.sx-seg .sx-opt[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sx-grid { display: grid; gap: 8px; }
.sx-grid .sx-opt { background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 700; }
.sx-grid .sx-opt[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sx-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 52px; padding: 4px 6px; border-radius: 12px; font-size: 16px; line-height: 1.2; text-align: center; }
@media (hover: hover) { .sx-grid .sx-opt:not([aria-checked="true"]):not([aria-disabled="true"]):hover { background: var(--bg); } }
.sx-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.sx-opt-line { font-size: 12px; font-weight: 500; }
.sx-graders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-grades { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sx-grades .sx-opt { grid-column: span 2; }
.sx-grades .sx-opt:nth-child(n+4) { grid-column: span 3; }
.sx-listings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-hours .sx-opt { min-height: 48px; font-size: 14px; padding: 4px 2px; white-space: nowrap; }
.sx-preview { background: var(--accent-soft); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.sx-preview-label { font-size: 13px; color: var(--muted); }
.sx-preview-text { font: 700 18px/1.3 var(--font-head); color: var(--text); overflow-wrap: anywhere; }
.sx-preview-text.is-empty { font: 500 15px/1.3 var(--font-body); color: var(--muted); }
.sx-plain { color: var(--muted); font-size: 14px; line-height: 1.4; }   /* the line is text with the "i" after its last word, so a long (offline) sentence never leaves the "i" alone */
.sx-plain .rs-inline { margin: 0 0 0 5px; vertical-align: middle; }
.sx-plain-text.offline { color: var(--neg); }
.sx-go { min-height: 52px; font-size: 16px; font-weight: 700; border-radius: 12px; text-decoration: none; }
.sx-go.is-off { background: var(--sunken); color: var(--muted); border-color: var(--line); cursor: default; }
.sx-bar .sx-plain { font-size: 14px; }
@media (min-width: 900px) {
  .sx-cols { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .sx-cols .sx-side { order: -1; }
  .sx-side .panel-body { padding-top: 16px; gap: 14px; }
  .sx-graders { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sx-grades { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sx-grades .sx-opt, .sx-grades .sx-opt:nth-child(n+4) { grid-column: auto; }
  .sx-listings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sx-opt { font-size: 15px; }
}
@media (min-width: 1200px) {
  .sx-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .sx-cols .sx-side { order: 0; position: sticky; top: 24px; }
}