/* Plated design system: docs/DESIGN.md (approved 12 Nov 2026).
   Sage = action and place · Terracotta = warmth and cooking moments · Sand = the warm neutral ground.
   Always use these tokens; don't hard-code colours. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/static/fonts/fraunces-latin-opsz-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-display: swap; font-weight: 100 900; src: url(/static/fonts/fraunces-latin-opsz-italic.woff2) format('woff2-variations'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/static/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); }

:root {
  /* Light theme, Subtle sand */
  --bg: #FBF8F2;
  --surface: #FFFFFF;
  --surface-2: #F5EFE4;
  --surface-3: #EBE2D1;
  --band: #F2EADB;
  --border: #E7DFD0;
  --border-strong: #D6CAB4;
  --text: #1F1C18;
  --text-muted: #6A6157;
  /* Sage: primary */
  --accent: #4D6B4F;
  --accent-hover: #3E5740;
  --on-accent: #FFFFFF;
  --accent-text: #46634A;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  /* Terracotta: supporting (cooking, favourites, ratings, unread counts; never errors) */
  --terra: #B4532A;
  --on-terra: #FFFFFF;
  --terra-text: #A3461F;
  --terra-soft: color-mix(in srgb, var(--terra) 13%, var(--surface));
  /* Semantic (danger is crimson so it never reads as Terracotta) */
  --success: #276B43;
  --warning: #94570A;
  --danger: #B42338;
  --info: #2B6CB0;
  --success-soft: color-mix(in srgb, var(--success) 12%, var(--surface));
  --warning-soft: color-mix(in srgb, var(--warning) 12%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info) 12%, var(--surface));
  /* Elevation */
  --shadow-1: 0 1px 2px rgb(46 41 36 / 0.06), 0 1px 1px rgb(46 41 36 / 0.04);
  --shadow-2: 0 6px 16px -4px rgb(46 41 36 / 0.12), 0 2px 4px rgb(46 41 36 / 0.06);
  --shadow-3: 0 24px 48px -12px rgb(46 41 36 / 0.25);
  /* Type */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  /* Shape: inputs 6, buttons 10, cards 16 */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  /* Density: comfortable (default; phones, tablets, touch screens) */
  --ctl: 44px; --gap: 16px; --pad: 20px; --row: 12px; --fs-ui: 0.9375rem;
  --dur: 180ms;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  color-scheme: light;

  /* Older names used through the stylesheet, mapped onto the tokens above. */
  --ground: var(--bg);
  --ink: var(--text);
  --ink-2: var(--text);
  --muted: var(--text-muted);
  --line: var(--border-strong);
  --line-soft: var(--border);
  --sunk: var(--surface-2);
  --accent-ink: var(--accent-text);
  --blue: var(--info);
  --blue-ink: var(--info);
  --blue-soft: var(--info-soft);
  --blue-line: color-mix(in srgb, var(--info) 35%, var(--surface));
  --green: var(--success);
  --radius: var(--r-lg);
  --font: var(--font-ui);
  --mono: var(--font-mono);
}

/* Dark theme: deliberately designed, not inverted. Depth comes from lighter surfaces, not shadows. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --bg: #141311; --surface: #1D1B18; --surface-2: #292622; --surface-3: #36322C; --band: #221F1B;
    --border: #36322C; --border-strong: #47423A; --text: #F4F0E8; --text-muted: #ABA295;
    --accent: #8FB592; --accent-hover: #A3C4A5; --on-accent: #142017; --accent-text: #A3C4A5;
    --terra: #E08A63; --on-terra: #1F1C18; --terra-text: #EBA07D;
    --success: #6CC08F; --warning: #E3A548; --danger: #F2878F; --info: #7DB3EA;
    --shadow-1: 0 0 0 1px rgb(0 0 0 / 0); --shadow-2: 0 8px 20px -6px rgb(0 0 0 / 0.5); --shadow-3: 0 24px 48px -12px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root.theme-dark {
  --bg: #141311; --surface: #1D1B18; --surface-2: #292622; --surface-3: #36322C; --band: #221F1B;
  --border: #36322C; --border-strong: #47423A; --text: #F4F0E8; --text-muted: #ABA295;
  --accent: #8FB592; --accent-hover: #A3C4A5; --on-accent: #142017; --accent-text: #A3C4A5;
  --terra: #E08A63; --on-terra: #1F1C18; --terra-text: #EBA07D;
  --success: #6CC08F; --warning: #E3A548; --danger: #F2878F; --info: #7DB3EA;
  --shadow-1: 0 0 0 1px rgb(0 0 0 / 0); --shadow-2: 0 8px 20px -6px rgb(0 0 0 / 0.5); --shadow-3: 0 24px 48px -12px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* Automatic density: compact on wide screens used with a mouse or trackpad (approved breakpoint 1200 px).
   Touch screens and narrower layouts stay comfortable. Density changes spacing, never content. */
@media (min-width: 1200px) and (pointer: fine) {
  :root { --ctl: 36px; --gap: 12px; --pad: 14px; --row: 8px; --fs-ui: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.4; }
a { color: var(--accent-ink); }
h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 8px 0; }
main { max-width: 640px; margin: 0 auto; padding-bottom: 24px; }
main.has-tabbar { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
input, select, textarea, button { font: inherit; color: inherit; }
img { max-width: 100%; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pad { padding: 16px 20px; padding-top: max(20px, env(safe-area-inset-top)); }
.pad.top { padding-bottom: 8px; padding-top: max(28px, calc(env(safe-area-inset-top) + 12px)); }
.pad-x { padding-left: 20px; padding-right: 20px; }
.top-gap { margin-top: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.warn { color: var(--accent-ink) !important; font-weight: 600; }
.mono { font-family: var(--mono); }
.row { display: flex; align-items: center; }
.row.between, .between { justify-content: space-between; }
.row.gap, .gap { gap: 10px; }
/* A field with a button beside it: line the button up with the box, not the label. */
form.row:has(label), .row:has(> label) { align-items: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.center-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 60px; }

.section { margin: 22px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
details.card > summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.notes { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.error { background: #FEE2E2; color: #7F1D1D; padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.flash { position: sticky; top: 0; z-index: 30; background: var(--ink); color: var(--ground); padding: 12px 20px; padding-top: max(12px, env(safe-area-inset-top)); font-weight: 500; text-align: center; animation: flash-out 0.3s 4s forwards; }
@keyframes flash-out { to { opacity: 0; visibility: hidden; height: 0; padding: 0; } }

/* Forms */
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 16px; font-weight: 400; color: var(--ink);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--ink); }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); font-weight: 500; min-height: 44px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.card { border: 1px solid var(--line); padding: 14px 16px; }
legend { font-weight: 700; color: var(--ink); padding: 0 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn.wide, form > .btn.wide { width: 100%; }
form .btn.wide { width: 100%; }
.two > form .btn { width: 100%; }

/* Codes & chips */
.code { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); }
.code.big { font-size: 20px; color: var(--ink); }
.code.huge { font-size: 44px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; padding: 6px 18px; }
.code-chip { font-family: var(--mono); font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: var(--ground); text-decoration: none; flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--sunk); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip.blue { background: var(--blue-soft); color: var(--blue-ink); }

/* Navigation */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.crumbs .here { color: var(--ink); font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; margin-bottom: 8px; min-height: 36px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; align-items: center; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; min-width: 56px; min-height: 48px; justify-content: center; }
.tabbar a.on { color: var(--ink); }
.tabbar .scanbtn { width: 62px; height: 62px; min-width: 0; margin-top: -30px; border-radius: 20px; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / 0.18); }
.seg { display: flex; padding: 4px; background: var(--sunk); border-radius: 12px; gap: 2px; }
.seg > a, .seg > label, .seg > button { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14px; border: 0; background: transparent; cursor: pointer; text-align: center; }
.seg > a.on, .seg > button[aria-selected=true] { background: var(--surface); color: var(--ink); font-weight: 600; }
.seg > label { flex-direction: row; }
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 600; }
.seg > label:has(input:focus-visible) { outline: 3px solid var(--accent); }
.seg.tabs { margin: 14px 0 6px; }

/* Search */
.search { position: relative; margin: 6px 0 14px; }
.search svg { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.search input[type=search]:not([type=checkbox]) { min-height: 54px; padding-left: 48px; border: 2px solid var(--ink); border-radius: 14px; font-size: 17px; }
.results-wrap { display: flex; flex-direction: column; }
.results { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.result { display: flex; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none; }
.result-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.result-title { font-size: 17px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; padding: 0 20px 6px; }
.stat { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.stat strong { font-size: 24px; }
.stat span { font-size: 13px; color: var(--muted); }
.stat.blue { background: var(--blue-soft); border-color: var(--blue-line); }
.stat.accent { background: var(--accent-soft); border-color: transparent; }

/* Places & lists */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.place { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; min-height: 76px; }
.place-name { font-size: 16px; font-weight: 600; }
.list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list + .list { margin-top: 10px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.list-row:last-child { border-bottom: 0; }
.list-row.stacked { flex-direction: column; align-items: stretch; gap: 8px; }
.list-row.dim { opacity: 0.6; }
.list-row > a { color: inherit; text-decoration: none; }
.link-row { display: flex; align-items: center; gap: 10px; color: var(--accent-ink) !important; font-weight: 600; min-height: 44px; }
.item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 16px; border-bottom: 1px solid var(--line-soft); min-height: 56px; }
.item-row:last-child { border-bottom: 0; }
.item-name { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; font-weight: 600; flex: 1; min-width: 0; padding: 6px 0; }
.stepper { display: flex; align-items: center; }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; color: var(--muted); cursor: pointer; border-radius: 10px; }
.stepper .qty { font-family: var(--mono); font-weight: 600; min-width: 36px; text-align: center; }
.stepper.big button { width: 64px; height: 64px; font-size: 30px; background: var(--sunk); color: var(--ink); }
.stepper.big .qty { font-size: 34px; min-width: 90px; }
.qty-card { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.qty-card.low { border-color: var(--accent); }

/* Location page */
.hero { height: 190px; background: var(--ink-2) center / cover no-repeat; }
.out-card { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: var(--radius); color: var(--blue-ink); }
.eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.out-card .btn { color: var(--blue-ink); border-color: var(--blue-line); }
.out-card .btn.dark { background: var(--blue-ink); color: #fff; border-color: var(--blue-ink); }
.avatars { display: flex; }
.avatars .avatar + .avatar { margin-left: -12px; box-shadow: 0 0 0 2px var(--blue-soft); }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.action, .action-form > .action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px; text-align: center; }
.action-form { display: contents; }
.history { margin-top: 20px; }
.history summary { cursor: pointer; font-weight: 600; color: var(--muted); min-height: 36px; }
.history ul { list-style: none; padding: 0; margin: 6px 0 0; }
.history li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }

/* Grids */
.grid-wrap { margin-top: 16px; padding: 10px; background: #2B2925; border-radius: 16px; }
.grid-box { container-type: inline-size; margin: 0 auto; }
.grid { display: grid; gap: 6px; }
@container (max-width: 340px) { .grid.gf .cell-meta, .grid.gf .cell-items { display: none; } .grid.gf .cell-name { font-size: 11px; } }
.grid.full .cell { display: flex; flex-direction: column; justify-content: space-between; padding: 8px; border-radius: 8px; background: #FFFFFF; color: #1C1B19; text-decoration: none; position: relative; min-width: 0; overflow: hidden; }
.grid.full .cell.hl { background: var(--accent); color: #fff; }
.grid.full .cell.free { background: transparent; border: 2px dashed #6B665E; padding: 0; }
.grid.full .cell.free:hover, .grid.full .cell.free:focus-visible { border-color: #FDBA74; }
.cell-name { font-size: 13px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.cell-meta { font-size: 11px; color: #5F5B54; }
.cell-items { font-size: 11px; color: #3D3A35; line-height: 1.2; flex: 1; padding-top: 2px; overflow-wrap: anywhere; }
.cell.hl .cell-items { color: #fff; }
.cell.hl .cell-meta { color: #fff; }
.cell-out { position: absolute; top: 4px; right: 6px; color: #1D4ED8; font-size: 14px; }
.grid-foot { margin-top: 8px; gap: 10px; }
.grid.mini { gap: 2px; width: 84px; flex-shrink: 0; padding: 4px; background: var(--sunk); border-radius: 6px; align-self: flex-start; }
.grid.mini .cell { background: #CFC8BC; border-radius: 2px; }
.grid.mini .cell.hl { background: var(--accent); }

/* Checkout */
.banner { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; margin-top: 12px; }
.banner.ok { background: var(--green); color: #fff; }
.people { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.person { flex-direction: row; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 16px; font-weight: 400; cursor: pointer; }
.person:last-child { border-bottom: 0; }

/* Shopping */
.shop-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--line-soft); }
.shop-row:last-child { border-bottom: 0; }
.shop-row a { color: inherit; text-decoration: none; }
.shop-row .btn { color: var(--ink); }

/* Labels */
.labels { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.label-card { margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.label-img { overflow-x: auto; padding: 8px; background: #fff; border-radius: 6px; }
.label-img svg { display: block; height: var(--label-h, 72px); width: auto; }
.label-card figcaption { margin-top: 10px; gap: 10px; }

/* Auth */
.auth { max-width: 420px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.auth .brand { font-family: var(--mono); font-weight: 700; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; }
.auth form { margin-top: 12px; }

/* Scanner */
body.dark { background: #141311; color: #fff; }
body.dark main { max-width: none; padding: 0; }
.scanner { display: flex; flex-direction: column; min-height: 100dvh; }
.scan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 16px 8px; position: relative; z-index: 2; }
.round { width: 44px; height: 44px; border-radius: 22px; background: #2B2925; color: #fff; border: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.seg.dark { background: #2B2925; }
.seg.dark > button { color: #C9C3B8; padding: 0 9px; white-space: nowrap; font-size: 13px; }
.scan-top .seg { flex: 0 1 auto; }
.seg.dark > button[aria-selected=true] { background: #fff; color: #1C1B19; }
.viewfinder { position: relative; flex: 1; min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viewfinder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame { position: relative; width: 240px; height: 240px; border-radius: 18px; box-shadow: 0 0 0 4px #EA580C, 0 0 0 100vmax rgb(0 0 0 / 0.45); }
.hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-weight: 500; color: #E9E5DE; text-shadow: 0 1px 3px #000; margin: 0; padding: 0 16px; }
.sheet { background: var(--surface); color: var(--ink); border-radius: 24px 24px 0 0; padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 6px; }
.sheet-title { font-weight: 700; font-size: 17px; margin: 0; }
.step { display: flex; align-items: center; gap: 12px; }
.dot { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dot.done { background: var(--green); color: #fff; }
.dot.pending { border: 3px solid var(--accent); }
.moved { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(16, 185, 129, 0.16); }
.moved > div { flex: 1; }
.step-line { width: 2px; height: 14px; background: var(--line); margin-left: 13px; }
.manual { display: flex; gap: 8px; padding: 0 20px max(20px, env(safe-area-inset-bottom)); background: var(--surface); }
.manual input { min-height: 42px !important; }

@media (min-width: 700px) {
  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media print {
  .tabbar, .flash, .seg, .btn, p.muted, h1, .crumbs { display: none !important; }
  body { background: #fff; }
  .label-card { border: 0; padding: 0; break-inside: avoid; }
  .label-card figcaption { display: none; }
  .label-img svg { height: auto; width: auto; max-width: 100%; }
}

/* Grid editing */
.grid-tools { margin-top: 16px; }
.grid-tools + .grid-wrap { margin-top: 8px; }
.grid-tools .seg > button[aria-checked=true] { background: var(--surface); color: var(--ink); font-weight: 600; }
.grid.mode-move, .grid.mode-select { touch-action: none; user-select: none; -webkit-user-select: none; }
.grid.mode-move .cell[data-bin] { cursor: grab; box-shadow: 0 0 0 2px #FDBA74 inset; }
.grid.mode-select .cell { cursor: crosshair; }
.grid .cell.dragging { z-index: 5; opacity: 0.9; cursor: grabbing; box-shadow: 0 10px 24px rgb(0 0 0 / 0.45); transition: none; }
.grid-overlay { z-index: 4; pointer-events: none; border-radius: 8px; border: 3px solid; }
.grid-overlay.drop.ok { border-color: #10B981; background: rgb(16 185 129 / 0.18); }
.grid-overlay.sel.ok { border-color: #EA580C; background: rgb(234 88 12 / 0.28); }
.grid-overlay.bad { border-color: #F87171; background: rgb(248 113 113 / 0.2); }
.grid-selbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.grid-selbar[hidden] { display: none; }
.btn.disabled { opacity: 0.45; pointer-events: none; }
dialog.confirm { border: 0; border-radius: 18px; padding: 20px; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
dialog.confirm::backdrop { background: rgb(0 0 0 / 0.5); }

.label-stale { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; text-decoration: none; }

.chip.tag { background: var(--ink); color: var(--ground); }
.tag-picks { margin-top: -6px; }
.tag-picks .chip { border: 0; cursor: pointer; min-height: 30px; padding: 4px 10px; font-family: inherit; }
.tag-text { color: var(--accent-ink); font-weight: 600; }

/* Where am I: sticky top bar + type badges */
.topbar { position: sticky; top: 0; z-index: 15; display: flex; flex-direction: column; gap: 2px; padding: max(10px, env(safe-area-inset-top)) 16px 8px; background: var(--ground); border-bottom: 1px solid var(--line); }
.topbar .up { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--ink); text-decoration: none; margin-left: -6px; align-self: flex-start; padding-right: 10px; border-radius: 10px; }
.topbar .up:hover { background: var(--sunk); }
.up-text { display: flex; flex-direction: column; line-height: 1.15; }
.up-kind { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.up-name { font-size: 16px; font-weight: 700; }
.topbar .crumbs { font-size: 12px; padding-left: 2px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.topbar .crumbs a { padding: 2px 0; }
.topbar + .pad, .topbar + .hero + .pad { padding-top: 14px; }
.page-head { align-items: flex-start; }
.page-head h1 { margin-top: 6px; }
.type-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--kind); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.kind-dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--kind); color: #fff; flex-shrink: 0; }
.place .kind-dot { width: 26px; height: 26px; }

.pad > .topbar:first-child { margin: calc(-1 * max(20px, env(safe-area-inset-top))) -20px 14px; }
.out-card .btn.dark { background: var(--blue); border-color: var(--blue); color: #fff; }
.field-legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }

/* Identify */
.snap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; margin-top: 14px; border: 2px dashed var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; }
.snap:hover, .snap:focus-within { border-color: var(--accent); }
.snap-title { font-size: 17px; font-weight: 700; }
.preview { margin-top: 14px; }
.preview img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; background: var(--sunk); }
.hint-line { min-height: 1.4em; font-weight: 600; }
.hint-line.error { color: var(--danger); }
.summary { font-size: 17px; font-weight: 600; margin: 0; }
.ai-item.off { opacity: 0.5; }
.ai-item.off input:not([data-pick]) { pointer-events: none; }
.chip.green { background: #D1FAE5; color: #065F46; }

.brand-logo { display: block; }
.brand-logo img { display: block; height: 44px; width: auto; }
.brand-logo.small img { height: 30px; }
.auth .brand-logo { margin-bottom: 14px; }

/* ---------------------------------------------------------------- Kept additions */
.flush { padding-left: 0 !important; padding-right: 0 !important; }
.search.flush svg { left: 16px; }
.lede { font-size: 17px; color: var(--ink-2); margin: 4px 0 6px; }
.money { font-family: var(--mono); font-weight: 600; font-size: 14px; white-space: nowrap; }
.chip.danger { background: #FEE2E2; color: #991B1B; }
.chip.green { background: #D1FAE5; color: #065F46; }
@media (prefers-color-scheme: dark) { .chip.danger { background: #3B1414; color: #FCA5A5; } .chip.green { background: #0B2E22; color: #6EE7B7; } }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips.scroll .chip { padding: 6px 10px; font-size: 13px; }
.chips.quick .chip { border: 0; cursor: pointer; min-height: 32px; padding: 4px 12px; font-family: inherit; }
.stat.danger { background: #FEE2E2; border-color: transparent; color: #7F1D1D; }
.stat.danger span { color: #7F1D1D; }
@media (prefers-color-scheme: dark) { .stat.danger { background: #3B1414; color: #FCA5A5; } .stat.danger span { color: #FCA5A5; } }
.stat strong { font-size: 22px; letter-spacing: -0.01em; }
select.compact { min-height: 38px !important; padding: 4px 10px !important; font-size: 14px !important; width: auto !important; }

/* Thumbnails, galleries, photos */
.thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--sunk); }
.thumb.small { width: 40px; height: 40px; border-radius: 8px; }
.thumb.empty { display: flex; align-items: center; justify-content: center; }
.gallery { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--ink); scrollbar-width: none; }
.gallery a { flex: 0 0 auto; scroll-snap-align: start; }
.gallery img { display: block; height: 240px; width: auto; max-width: 92vw; object-fit: cover; }
.gallery a:only-child { flex: 1; }
.gallery a:only-child img { width: 100%; max-width: none; object-fit: contain; background: var(--ink); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.photo-grid figcaption { margin-top: 6px; }
.preview-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; }
.preview-strip img { height: 120px; border-radius: 10px; }
.snap.small-snap { padding: 18px 16px; margin-top: 0; }
.kind-dot.doc-pdf { background: #475569; font: 700 10px var(--mono); width: 40px; height: 40px; }

/* Facts */
.facts { display: flex; flex-direction: column; padding: 4px 16px; margin: 0; }
.fact { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--muted); font-size: 14px; }
.fact dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.fact.mono { font-family: inherit; }
.fact.mono dd { font-family: var(--mono); font-size: 14px; }

/* Banners */
.banner { color: var(--ink); }
.banner > svg { flex-shrink: 0; }
.banner form { margin: 0; }
.ok-banner { background: #D1FAE5; color: #064E3B; }
.warn-banner { background: var(--accent-soft); color: var(--accent-ink); }
.danger-banner { background: #FEE2E2; color: #7F1D1D; }
.muted-banner { background: var(--sunk); color: var(--ink-2); }
@media (prefers-color-scheme: dark) { .ok-banner { background: #0B2E22; color: #6EE7B7; } .danger-banner { background: #3B1414; color: #FCA5A5; } }

/* Lists */
.list.flat { border: 0; border-radius: 0; margin-top: 8px; }
.chevrons .list-row > svg { transform: rotate(180deg); color: var(--muted); flex-shrink: 0; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 14px; }
.empty .btn { margin-top: 6px; }
.results .empty { margin-top: 0; }
.snippet { margin: 0; padding: 0 16px 12px 68px; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
mark { background: var(--accent-soft); color: var(--accent-ink); border-radius: 3px; padding: 0 2px; }
.result .thumb { width: 72px; height: 72px; }
.result-body .chips:empty { display: none; }
h2.section.row a { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* Onboarding */
.onboarding { gap: 10px; }
.step-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--sunk); color: var(--ink); text-decoration: none; font-weight: 600; }
.step-link .num { width: 28px; height: 28px; border-radius: 14px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.step-link.done { color: var(--muted); text-decoration: line-through; }

/* Documents */
.doc-preview { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--sunk); }
.doc-preview iframe { display: block; width: 100%; height: 60vh; border: 0; background: #fff; }
.doc-preview img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.doc-text, .code-block { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; max-height: 360px; overflow: auto; margin: 10px 0 0; }
.code-block { background: var(--sunk); padding: 12px; border-radius: 10px; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--sunk); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
label.apply { align-items: center; flex-wrap: wrap; }
.apply-input { flex: 1 1 160px; }
.token-new { border-color: var(--accent); }

/* Scanner (Kept has a single mode) */
.scan-title { font-weight: 600; color: #E9E5DE; }
.scan-error { margin: 0; padding: 12px 20px; background: #7F1D1D; color: #fff; font-weight: 600; }
.scanner .manual { padding-top: 16px; }

@media (min-width: 700px) {
  .gallery img { height: 320px; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Paperless picker */
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pl-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pl-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 8px; background: var(--sunk); }
.pl-title { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.pl-card .btn { margin-top: auto; }
@media (min-width: 700px) { .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* AI assist on item pages */
.assist { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; }
.assist.stack { align-items: stretch; }
.assist > a.small { margin-left: auto; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; flex-shrink: 0; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.suggest { margin-top: 10px; border-color: var(--accent); }
.suggest-row { display: flex; align-items: flex-start; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* To-dos and projects */
.tasks { border-radius: var(--radius); }
.task-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 8px; border-bottom: 1px solid var(--line-soft); }
.task-row form { margin: 0; }
.tick { width: 30px; height: 30px; margin: 7px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.task-row.done .tick { background: var(--green); border-color: var(--green); }
.task-row.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-body { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; padding: 6px 0; min-width: 0; }
.task-title { font-weight: 600; overflow-wrap: anywhere; }
.overdue { color: var(--danger); font-weight: 600; }
.warn { color: var(--accent-ink); font-weight: 600; }
.add-task { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; align-items: start; }
.add-task input[name=title] { min-height: 40px !important; }
.add-task .more-fields { grid-column: 1 / -1; grid-row: 2; }
.add-task > .btn { grid-column: 2; grid-row: 1; min-height: 40px; }
.project-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--green); border-radius: 3px; }

/* Ask */
.ask-link { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; margin-bottom: 6px; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--ground); text-decoration: none; }
.ask-link svg { grid-row: span 2; color: #FDBA74; }
.ask-link span { font-weight: 600; }
.ask-link .muted { color: #C9C3B8; font-weight: 400; }
.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 150px; }
.bubble { max-width: 92%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.bubble p { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 4px 0 6px; padding-left: 20px; }
.bubble.user { align-self: flex-end; background: var(--ink); color: var(--ground); border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.thinking { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.bubble.error { color: var(--danger); }
.ask-bar { position: fixed; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 19; display: flex; gap: 8px; align-items: flex-end; max-width: 640px; margin: 0 auto; padding: 10px 16px; background: var(--ground); border-top: 1px solid var(--line); }
.ask-bar textarea { min-height: 46px !important; max-height: 160px; resize: none; }
.ask-bar .btn { transform: rotate(180deg); width: 46px; padding: 0; flex-shrink: 0; }

/* Paint & details */
.swatch { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); flex-shrink: 0; }
.swatch.empty { background: var(--sunk); color: var(--muted); font-weight: 700; }
.color-input { width: 64px !important; min-height: 46px; padding: 4px !important; }
.fact-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 8px; }
.fact-add input { min-height: 40px !important; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 14px 0 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-month { position: relative; margin: 18px 0 8px 40px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.tl-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; color: inherit; text-decoration: none; }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--muted); flex-shrink: 0; z-index: 1; box-shadow: 0 0 0 3px var(--ground); }
.tl-dot.k-bought { background: var(--accent); }
.tl-dot.k-work { background: var(--green); }
.tl-dot.k-project { background: var(--blue); }
.tl-dot.k-paint { background: #7C3AED; }

/* Spending months */
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 140px; align-items: end; padding: 12px 12px 8px; }
.mcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.mbar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); }
.mlabel { font-size: 11px; color: var(--muted); }
.trace ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.trace li { margin: 2px 0; }
.assist .row form { margin: 0; }
.doc-line { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.doc-line:last-child { border-bottom: 0; }
.doc-line > .list-row { flex: 1; border-bottom: 0; min-width: 0; }
.doc-line form { margin: 0 8px 0 0; }

/* =====================================================================
   Responsive: phone (default) → tablet → desktop, plus dual-screen.
   ===================================================================== */
.sidebar { display: none; }
.side-gap { display: block; height: 10px; }

/* Mouse and trackpad: show what's clickable */
@media (hover: hover) and (pointer: fine) {
  a.list-row:hover, .list-row > a:hover, a.result:hover, a.place:hover, a.project-card:hover, a.stat:hover, .tl-item:hover, a.ask-link:hover, .step-link:hover { background: var(--sunk); }
  a.result:hover, a.place:hover, a.project-card:hover { border-color: var(--muted); }
  .btn:hover { border-color: var(--muted); }
  .btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
  .chip:hover { filter: brightness(0.96); }
  .tick:hover { border-color: var(--green); }
  .snap:hover { border-color: var(--accent); }
}

/* Tablet and up: more room, card grids */
@media (min-width: 700px) {
  main { max-width: 960px; }
  .pad { padding-left: 28px; padding-right: 28px; }
  .pad-x { padding-left: 28px; padding-right: 28px; }
  .pad > .topbar:first-child { margin-left: -28px; margin-right: -28px; }
  .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 0 28px; }
  .results.flush { padding: 0; }
  .results > .empty { grid-column: 1 / -1; }
  .places { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .gallery img { height: 320px; }
  .pl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  .bubble { max-width: 75%; }
  .auth { padding-top: 12vh; }
}

/* Icon rail from tablet size (iPad portrait and up); the bottom tab bar goes away */
@media (min-width: 768px) {
  body.has-sidebar { padding-left: 80px; }
  .sidebar {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: fixed; z-index: 25; top: 0; bottom: 0; left: 0; width: 80px;
    padding: max(16px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none;
  }
  .sidebar a { display: flex; align-items: center; justify-content: center; gap: 12px; width: 52px; height: 48px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; flex-shrink: 0; }
  .sidebar a span { display: none; }
  .sidebar a.on { background: var(--ink); color: var(--ground); }
  .side-links { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
  .side-logo { margin-bottom: 6px; }
  .side-logo img { border-radius: 9px; }
  .sidebar .side-scan { background: var(--accent); color: #fff; margin-bottom: 10px; }
  @media (hover: hover) { .sidebar a:not(.on):not(.side-scan):hover { background: var(--sunk); color: var(--ink); } .sidebar .side-scan:hover { background: var(--accent-ink); } }
  .tabbar { display: none; }
  main.has-tabbar { padding-bottom: 40px; }
  .ask-bar { left: 80px; bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat { padding-bottom: 110px; }
  .flash { margin-left: 0; }
}

/* Desktop: full sidebar with labels, two columns */
@media (min-width: 1000px) {
  .cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .col-a > :first-child, .col-b > :first-child { margin-top: 22px; }
  .pad > form.stack, .pad > form + form.stack, .pad > .stack > form.stack { max-width: 720px; }
  .pad > .search { max-width: 720px; }
  /* Form pages: keep everything (delete, extra sections) the same width as the form, centred on the page. */
  .pad:has(> form.stack) > :not(.cols):not(.topbar) { max-width: 720px; }
  /* ...and centre that narrower column (back link included) in the space beside the sidebar. */
  .pad:has(> form.stack):not(:has(> .cols)) { max-width: 776px; margin-left: auto; margin-right: auto; }
  .identify, .ask .pad { max-width: 760px; }
  .gallery { justify-content: flex-start; }
  .gallery a:only-child { flex: 0 1 auto; }
  .gallery a:only-child img { width: auto; max-width: 100%; }
}
@media (min-width: 1180px) {
  body.has-sidebar { padding-left: 248px; }
  main { max-width: 1240px; padding-left: 12px; padding-right: 12px; }
  .sidebar { width: 248px; align-items: stretch; padding-left: max(14px, env(safe-area-inset-left)); padding-right: 14px; }
  .side-links { align-items: stretch; }
  .sidebar a { width: auto; justify-content: flex-start; padding: 0 14px; height: 44px; }
  .sidebar a span { display: inline; }
  .side-logo { font-size: 22px; font-weight: 700; color: var(--ink) !important; letter-spacing: -0.02em; padding: 0 6px !important; height: 56px !important; }
  .side-logo:hover { background: transparent !important; }
  .ask-bar { left: 248px; }
}

/* Dual-screen phones (Surface Duo, Galaxy Fold spanned): keep each column on its own screen */
@media (horizontal-viewport-segments: 2) {
  body.has-sidebar { padding-left: 0; }
  .sidebar { display: none; }
  .tabbar { display: flex; }
  main { max-width: none; }
  main.has-tabbar { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .pad > :not(.cols):not(.topbar), main > .results, main > .gallery { max-width: calc(env(viewport-segment-width 0 0) - 40px); }
  .cols {
    display: grid; align-items: start;
    grid-template-columns: calc(env(viewport-segment-width 0 0) - 40px) calc(env(viewport-segment-width 1 0) - 40px);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 40px);
  }
  .col-a > :first-child, .col-b > :first-child { margin-top: 22px; }
  .ask-bar { left: 0; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: env(viewport-segment-width 0 0); margin: 0; }
}
.sidebar .wide-only { display: none; }
@media (min-width: 768px) { .has-sidebar main .brand-logo { display: none; } }
@media (min-width: 768px) and (max-height: 820px) { .sidebar a { height: 42px; } .side-gap { height: 4px; } }
@media (min-width: 1000px) {
  .gallery { background: transparent; gap: 10px; padding: 16px 40px 0; }
  .gallery img { border-radius: 14px; height: 300px; }
  .gallery a:only-child img { background: transparent; }
}
@media (min-width: 1180px) {
  .sidebar .rail-only { display: none; }
  .sidebar .wide-only { display: block; }
  .sidebar .wide-only img { height: 34px; width: auto; }
}
@media (horizontal-viewport-segments: 2) {
  /* Keep the tab bar (and its scan button) off the hinge, on the left screen. */
  .tabbar { right: auto; width: env(viewport-segment-width 0 0); }
  .flash { max-width: env(viewport-segment-width 0 0); }
}
@media (horizontal-viewport-segments: 2) { .has-sidebar main .brand-logo { display: block; } }

/* =====================================================================
   Navigation v2: Home · Places · (+) · Items · More, quick actions, Ask button
   ===================================================================== */
.tabbar .addbtn { width: 62px; height: 62px; min-width: 0; margin-top: -30px; border-radius: 22px; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / 0.2); }
.ai-fab { position: fixed; z-index: 21; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #FDBA74; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); text-decoration: none; }
.ai-fab:hover { background: var(--accent-ink); color: #fff; }

/* Quick actions sheet */
dialog.quick { border: 0; padding: 18px 18px max(18px, env(safe-area-inset-bottom)); margin: auto auto 0; width: 100%; max-width: 560px; border-radius: 28px 28px 0 0; background: var(--ground); color: var(--ink); box-shadow: 0 -10px 40px rgb(0 0 0 / 0.25); }
dialog.quick[open] { animation: sheet-up 0.22s ease-out; }
dialog.quick::backdrop { background: rgb(0 0 0 / 0.45); }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.quick[open] { animation: none; } }
.quick-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 14px; }
.quick-head h2 { margin: 0; font-size: 24px; }
.quick-head .round { position: absolute; right: 0; top: 0; }
.round.light { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.quick-badge { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-grid.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.quick-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 112px; padding: 14px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; text-align: center; }
.quick-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.quick-all { margin-top: 12px; background: var(--sunk); border-color: transparent; }
@media (min-width: 768px) {
  dialog.quick { margin: auto; border-radius: 24px; padding-bottom: 18px; }
  .ai-fab { bottom: 24px; right: 24px; }
}

/* Place photos */
.place-hero { height: 200px; background: var(--photo) center / cover no-repeat; }
.place-photo { display: block; width: 100%; max-width: 480px; border-radius: 14px; margin-bottom: 10px; }
@media (min-width: 1000px) { .place-hero { height: 280px; margin: 16px 40px 0; border-radius: 20px; } }

/* Sidebar v2 */
.sidebar .side-add { background: var(--accent); color: #fff; margin-bottom: 10px; }
.sidebar .side-ask { margin-top: auto; background: var(--ink); color: #FDBA74; }
@media (hover: hover) { .sidebar .side-add:hover { background: var(--accent-ink); } }

.tl-dot.k-built { background: #57534E; color: #fff; }
.tl-dot.k-moved { background: #9F1239; }
/* Ask button on every screen size */
@media (min-width: 768px) { .ai-fab { display: flex; bottom: 24px; right: 24px; } }

/* Find manuals online: candidates to preview and add */
label.narrow { max-width: calc(50% - 5px); }
.manual-finds { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 80px; }
.manual-finds > .assist { box-shadow: none; padding: 4px 0; background: none; border: 0; }
.finds { display: flex; flex-direction: column; }
.find-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.find-row:first-child { border-top: 0; padding-top: 4px; }
.find-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.find-text strong { overflow-wrap: anywhere; line-height: 1.3; }
.find-text .muted { overflow-wrap: anywhere; }
.find-btns { flex: none; }
.find-btns form { margin: 0; }
.chip.tiny { font-size: 0.72rem; padding: 2px 8px; min-height: 0; }
.btn.ok { color: var(--ok, #15803D); }
@media (max-width: 560px) {
  .find-row { flex-direction: column; align-items: stretch; }
  .find-btns > * { flex: 1; }
  .find-btns .btn { width: 100%; justify-content: center; }
}
dialog.preview { border: 0; padding: 0; width: min(1000px, calc(100vw - 24px)); height: min(92vh, 1200px); max-height: none; border-radius: 18px; background: var(--surface); color: var(--ink); overflow: hidden; }
dialog.preview[open] { display: flex; flex-direction: column; }
dialog.preview::backdrop { background: rgb(0 0 0 / 0.55); }
.preview-head { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.preview-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-head form { margin: 0; }
.preview-body { position: relative; flex: 1; background: #fff; }
.preview-body .loading { position: absolute; inset: 0; display: grid; place-items: center; color: #57534E; font-size: 0.95rem; }
.preview-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) { .preview-head strong { flex-basis: 100%; white-space: normal; } dialog.preview { width: 100vw; height: 100dvh; border-radius: 0; margin: 0; max-width: none; } }

[data-file-count]:empty { display: none; }
/* Four stat tiles on a phone: two by two, not three and one left over. */
@media (max-width: 767px) { .stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
details.move-due { margin-top: 8px; }
details.move-due > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--accent-ink); padding: 6px 2px; }
details.move-due > summary::-webkit-details-marker { display: none; }
details.move-due[open] > summary { margin-bottom: 4px; }

/* Bills & renewals */
.chip.ok-chip { background: #D1FAE5; color: #065F46; }
@media (prefers-color-scheme: dark) { .chip.ok-chip { background: #0B2E22; color: #6EE7B7; } }
.danger-text { color: #B91C1C; }
@media (prefers-color-scheme: dark) { .danger-text { color: #FCA5A5; } }
.months.bills-chart { grid-template-columns: repeat(var(--n, 12), 1fr); }
a.mcol { text-decoration: none; color: inherit; }
a.mcol:hover .mbar { filter: brightness(1.15); }
.mbar.hot { background: #DC2626; }
details.edit-box > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
details.edit-box > summary::-webkit-details-marker { display: none; }
details.edit-box[open] > summary { margin-bottom: 4px; }
details.edit-box > form { margin-top: 0; }
.accent-text { color: var(--accent-ink); font-weight: 600; }
.danger-text svg, .accent-text svg { vertical-align: -2px; }

/* Seasonal checklists */
.projects { display: flex; flex-direction: column; gap: 10px; }
.checklist { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.checklist form { margin: 0; border-top: 1px solid var(--line); }
.checklist form:first-child { border-top: 0; }
.check-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; min-height: 52px; }
.check-row:hover { background: var(--sunk); }
.check-row .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; color: #fff; }
.check-row.done .tick { background: var(--green); border-color: var(--green); }
.check-row.done > span:last-child { color: var(--muted); text-decoration: line-through; }
.month-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 420px) { .month-pick { grid-template-columns: repeat(4, 1fr); } }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: block; text-align: center; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-check input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.inline-form { display: inline; margin: 0; }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.banner.recall { align-items: flex-start; }
.banner.recall form { display: inline; }
.part-row { gap: 10px; }
.part-text { color: inherit; text-decoration: none; min-width: 0; }
.part-btns { flex: none; flex-wrap: wrap; justify-content: flex-end; }
.stepper { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.stepper button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stashed-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .part-row { flex-wrap: wrap; } .part-btns { width: 100%; justify-content: flex-start; } }

/* Usage-based upkeep */
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 600; }
.seg > label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.usage-card .bar.hot > span { background: #DC2626; }
.usage-card .bar > span { background: var(--accent); }
a.banner { text-decoration: none; }
.entity-id { overflow-wrap: anywhere; margin-top: 2px; }

/* Date fields on iPhone: same height and width as other fields, text on the left (Safari otherwise
   draws them taller, centred, and wider than their column). */
input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; height: 46px; line-height: 24px; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 24px; }
input[type=date]::-webkit-calendar-picker-indicator { margin-left: auto; }
.two > *, .row > label.grow { min-width: 0; }

/* Spare parts on a job */
.stepper button { width: 40px; height: 40px; }
fieldset.parts-used { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
fieldset.parts-used legend { padding: 0; margin-bottom: 4px; font-weight: 600; color: var(--muted); }
label.part-pick { align-items: flex-start; min-height: 40px; padding: 8px 0; }
label.part-pick input { margin-top: 3px; flex: none; }
.ha-pick { gap: 10px; flex-wrap: wrap; }
.ha-pick .ha-part { width: auto; min-width: 160px; flex: 0 1 220px; }
@media (max-width: 560px) { .ha-pick .ha-part { flex: 1 1 100%; } }

/* Home Assistant readings */
.batt { display: inline-block; width: 34px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; vertical-align: middle; opacity: 0.8; padding: 1px; }
.batt::after { content: ''; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }
.batt > span { display: block; height: 100%; background: var(--green); border-radius: 1px; }
.batt.mid > span { background: #D97706; }
.batt.low > span { background: #DC2626; }
.sensor-val { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
button.pick-entity { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.pick-entity.on { background: var(--sunk); }

/* Emergency info */
.emergency .num-link { color: inherit; text-decoration: none; }
.btn.danger-btn { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.shutoffs { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .shutoffs { grid-template-columns: 1fr 1fr; } }
.shutoff { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.shutoff img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sunk); }
.shutoff-text { padding: 12px 14px 14px; }
.shutoff h3 { margin: 0 0 6px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.shutoff p { margin: 4px 0; font-size: 14px; }
.pre { white-space: pre-line; }
table.breakers { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
table.breakers th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); }
table.breakers td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
table.breakers td:first-child { width: 48px; }
table.breakers tr.main td, table.breakers tr.rcd td { background: var(--sunk); }
td.narrow-cell { width: 40px; text-align: right; }
td.narrow-cell form { margin: 0; }
.breaker-add { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 6px; }
@media (max-width: 560px) { .breaker-add { grid-template-columns: 56px 1fr auto; } .breaker-add select { grid-column: 1 / 3; } }
.share-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr { width: 140px; flex: none; background: #fff; padding: 6px; border-radius: 10px; border: 1px solid var(--line); }
.qr svg { display: block; width: 100%; height: auto; }
.qr-sign { text-align: center; max-width: 520px; margin: 40px auto; padding: 24px; }
.qr-sign h1 { font-size: 40px; margin: 0 0 8px; }
.qr-sign .qr.big { width: 360px; margin: 24px auto 8px; border: 0; }
.emergency.public h1 { display: flex; align-items: center; gap: 10px; color: #B91C1C; }
@media print {
  .print-page .tabbar, .print-page .side, .print-page .ai-fab, .print-page .flash { display: none !important; }
  .print-page { background: #fff; color: #000; }
  .emergency.printable .shutoffs { grid-template-columns: 1fr 1fr; }
  .emergency.printable .shutoff img { max-height: 180px; }
  .emergency .btn { border: 0; padding: 0; min-height: 0; background: none; color: #000; }
}
pre.code { background: var(--sunk); padding: 10px 12px; border-radius: 10px; overflow-x: auto; font-size: 12.5px; line-height: 1.6; margin: 0; white-space: pre; }

/* emergency: add a number */
form.number-add { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: end; }
@media (max-width: 640px) {
  form.number-add { grid-template-columns: 1fr auto; }
  form.number-add .na-name { grid-column: 1 / -1; }
}

/* Spare part ↔ Stashed item picker */
.stashed-pick { display: flex; flex-direction: column; gap: 8px; }
.stashed-results { max-height: 280px; overflow-y: auto; }
.stashed-results button.list-row { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.stashed-results button.list-row:hover { background: var(--hover, rgba(127,127,127,.08)); }
.stashed-chosen { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }

/* Label pickers (Labels to print, Labels for a place) */
.pick-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pick-row input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--accent); }
.pick-row .grow { flex: 1; min-width: 0; }
label.list-row.pick-row { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
label.list-row.pick-row .chip { flex-shrink: 0; }
.pick-bar { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); padding-top: 8px; z-index: 5; }
.pick-bar .btn:disabled { opacity: .5; }

/* Phone ↔ PC link */
.link-qr-wrap { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; align-items: center; margin-top: 16px; }
.link-qr { background: #fff; padding: 10px; border-radius: 12px; }
.link-qr svg { display: block; width: 100%; height: auto; }
.link-state { margin: 0; font-size: 17px; }
.link-steps { margin: 0; padding-left: 18px; }
@media (max-width: 560px) { .link-qr-wrap { grid-template-columns: 1fr; } .link-qr { max-width: 240px; } }
.link-pill { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 13px; font-weight: 600; }
@media (min-width: 900px) { .link-pill { bottom: 20px; } }
.link-pill a { color: var(--ink); text-decoration: none; }
.link-pill button { border: 0; background: var(--sunk, rgba(127,127,127,.15)); color: var(--ink); border-radius: 99px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.link-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.link-pill.off .dot { background: var(--muted); box-shadow: none; }
.link-toast { position: fixed; left: 50%; top: 16px; transform: translate(-50%, -150%); z-index: 50; max-width: min(92vw, 520px); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--ground); font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .25s; }
.link-toast.show { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .link-toast { transition: none; } }
.link-filled { outline: 3px solid #16A34A; outline-offset: 2px; transition: outline-color 1s; }

/* Scanner: tabs, sheet, feedback */
.scan-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.12); }
.scan-tabs button { border: 0; background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.scan-tabs button[aria-selected=true] { background: #fff; color: #111; }
.scan-sheet { margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; }
.scan-sheet p { margin: 0; }
.scan-sheet .muted { color: rgba(255,255,255,.7); }
.frame.flash-ok { animation: frame-ok .5s ease-out; }
.frame.flash-err { animation: frame-err .6s ease-out; }
@keyframes frame-ok { 0% { box-shadow: 0 0 0 10px #22C55E, 0 0 0 100vmax rgb(34 197 94 / 0.35); } }
@keyframes frame-err { 0%, 40% { box-shadow: 0 0 0 10px #EF4444, 0 0 0 100vmax rgb(239 68 68 / 0.3); } }
@media (prefers-reduced-motion: reduce) { .frame.flash-ok, .frame.flash-err { animation-duration: .01s; } }
.viewfinder { position: relative; }
.sound-btn { position: absolute; right: 14px; top: 14px; z-index: 3; }
.round.muted-btn { opacity: .55; }
.round.muted-btn svg path:last-child { display: none; }
.sound-btn.needs-tap { width: auto; padding: 0 12px 0 10px; gap: 6px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #fff; animation: tap-pulse 1.6s ease-in-out infinite; }
.sound-btn.needs-tap::after { content: 'Tap for sound'; }
@keyframes tap-pulse { 50% { box-shadow: 0 0 0 6px rgb(255 255 255 / .18); } }
@media (prefers-reduced-motion: reduce) { .sound-btn.needs-tap { animation: none; } }
.scan-sheet .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
/* An odd tile out at the end of the + menu fills the row */
.quick-grid:not(.wide) > .quick-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Scan button on serial / model number boxes, and its camera sheet */
.fieldscan-wrap { position: relative; display: block; }
.fieldscan-wrap > input { width: 100%; padding-right: 52px; }
.fieldscan-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 42px; height: 38px; border: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
@media (prefers-color-scheme: dark) { .fieldscan-btn { background: #3A2416; color: #FDBA8C; } }
.fieldscan { position: fixed; inset: 0; z-index: 100; background: #0B0A09; color: #fff; display: flex; flex-direction: column; }
.fieldscan-top { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 16px 10px; font-weight: 700; font-size: 17px; }
.fieldscan-view { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fieldscan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fieldscan-frame { position: relative; width: min(86vw, 420px); height: 150px; border-radius: 14px; box-shadow: 0 0 0 4px #EA580C, 0 0 0 100vmax rgb(0 0 0 / 0.45); }
.fieldscan-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; margin: 0; text-shadow: 0 1px 3px #000; }
.fieldscan-result { background: var(--surface); color: var(--ink); padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.fieldscan-value { font-size: 20px; font-weight: 700; margin: 0; word-break: break-all; }

/* Vehicle card */
.vehicle { margin-top: 12px; }
.plate { display: inline-block; font-family: var(--mono); font-weight: 800; font-size: 18px; letter-spacing: .06em; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); }
.vstats { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 8px; }
.vstats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--sunk, rgba(127,127,127,.08)); min-width: 0; }
.vstats strong { font-size: 17px; white-space: nowrap; }
@media (max-width: 380px) { .vstats strong { font-size: 15px; } }
.vstats span { font-size: 12px; color: var(--muted); }
.vehicle .list-row { border: 1px solid var(--line); border-radius: 12px; }
.small-head { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 0 0; }
.vehicle-more summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.odo-form input { width: 100%; }
.vstats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .vstats.four { grid-template-columns: 1fr 1fr; } }
.nudge { padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
@media (prefers-color-scheme: dark) { .nudge { background: #3A2416; color: #FDBA8C; } }
.chips .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.small-head a { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Bills from Alloc */
.bill-alloc > a { color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.bill-alloc > .row { flex-shrink: 0; align-items: center; }
.alloc-note { margin: 8px 0 0; }
.alloc-copy details summary { cursor: pointer; }

/* ---- Plated ---- */
.hh-bar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(8px); }
body.has-sidebar .hh-bar { margin-left: var(--sidebar-w, 0); }
.hh-switch { position: relative; }
.hh-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14px; }
.hh-switch > summary::-webkit-details-marker { display: none; }
.hh-switch .chip { font-size: 11px; padding: 1px 6px; }
.hh-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 0.15); padding: 6px; display: flex; flex-direction: column; }
.hh-menu form { margin: 0; }
.hh-menu button, .hh-menu a { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; text-align: left; color: inherit; text-decoration: none; cursor: pointer; }
.hh-menu button:hover, .hh-menu a:hover { background: var(--sunk); }
.hh-menu button.on { font-weight: 700; color: var(--accent-ink); }
.hh-menu a { border-top: 1px solid var(--line-soft); margin-top: 4px; color: var(--accent-ink); }
.link-btn { background: none; border: 0; padding: 0 2px; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font: inherit; }
.inline-form { display: inline; margin: 0; }
.chip .link-btn { text-decoration: none; margin-left: 4px; }
.list-row input.grow, .row input.grow { flex: 1; min-width: 0; }

/* ---- Design system: typography and components (docs/DESIGN.md) ---- */
body { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2.display, .display { font-family: var(--font-display); font-weight: 560; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 2rem; line-height: 1.2; }
.lede { color: var(--text-muted); }
.section { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow.terra { color: var(--terra-text); }
.num, .money { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus); }

.btn { min-height: var(--ctl); border-radius: var(--r-md); font-size: var(--fs-ui); font-weight: 600; transition: background var(--dur), border-color var(--dur); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.terra { background: var(--terra); border-color: var(--terra); color: var(--on-terra); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
input, select, textarea { min-height: var(--ctl); border-radius: var(--r-sm); border-color: var(--border-strong); background: var(--surface); font-size: var(--fs-ui); }
.card, .list { border-color: var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.list-row { padding-block: var(--row); border-color: var(--border); }
.stat { border-color: var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.stat strong { font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Chips: semantic colours always come with words (and usually an icon), never colour alone. */
.chip { font-size: 0.75rem; font-weight: 600; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-muted); }
.chip.accent { background: var(--accent-soft); color: var(--accent-text); }
.chip.terra { background: var(--terra-soft); color: var(--terra-text); }
.chip.success { background: var(--success-soft); color: var(--success); }
.chip.warning { background: var(--warning-soft); color: var(--warning); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--info-soft); color: var(--info); }

.banner { border-radius: var(--r-md); }
.ok-banner { background: var(--success-soft); }
.danger-banner { background: var(--danger-soft); }
.warn-banner { background: var(--warning-soft); }
.muted-banner { background: var(--surface-2); }
.error { background: var(--danger-soft); color: var(--danger); }
.danger-text { color: var(--danger) !important; }
.flash { background: var(--text); color: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-3); }

.tabbar a.on, .sidebar a.on { color: var(--accent-text); }
.sidebar a.on { background: var(--accent-soft); }
.side-logo .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--text); }
.hh-switch > summary { border-color: var(--border); }
.hh-menu { border-color: var(--border); box-shadow: var(--shadow-3); }
.hh-menu button.on, .hh-menu a { color: var(--accent-text); }
.auth h1 { font-family: var(--font-display); }
.auth .brand-logo { display: flex; align-items: center; gap: 12px; }

/* ---- Recipes (stage 1) ---- */
@media (min-width: 900px) { main:has(.wide-page), main:has(.recipe) { max-width: 1100px; } }
.three { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-head h1 { margin-top: 2px; }
.recipe-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.rcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-1); color: inherit; text-decoration: none; transition: box-shadow var(--dur), transform var(--dur); }
.rcard:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.rimg { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--band), color-mix(in srgb, var(--surface-3) 80%, var(--terra))); display: grid; place-items: center; color: var(--text-muted); }
.rimg img { width: 100%; height: 100%; object-fit: cover; }
.rimg .fav { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 90%, transparent); display: grid; place-items: center; color: var(--terra); }
.rbody { padding: var(--pad); display: grid; gap: 8px; align-content: start; }
.rbody h3 { font-family: var(--font-display); font-weight: 560; font-size: 1.1875rem; line-height: 1.25; margin: 0; }
.rmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8125rem; color: var(--text-muted); align-items: center; }
.rmeta.big { font-size: 0.9375rem; color: var(--text); }
.rmeta span { display: inline-flex; gap: 5px; align-items: center; }
.stars { display: inline-flex; gap: 1px; color: var(--terra); }
.stars svg { fill: currentColor; }
.stars svg.off { fill: none; stroke: var(--border-strong); stroke-width: 1.4; }
.round-btn { width: var(--ctl); height: var(--ctl); border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.round-btn.fav.on { color: var(--terra); border-color: color-mix(in srgb, var(--terra) 40%, var(--surface)); background: var(--terra-soft); }
.rate .star-btn { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--border-strong); min-height: 32px; }
.rate .star-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.rate .star-btn.on { color: var(--terra); }
.rate .star-btn.on svg { fill: currentColor; }
.recipe-hero { max-height: 340px; overflow: hidden; }
.recipe-hero img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; display: block; }
.recipe h2.display { font-size: 1.5rem; margin: 0 0 8px; }
.recipe-cols { display: grid; gap: calc(var(--gap) + 12px); }
@media (min-width: 900px) { .recipe-cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: start; } .ingredients-col { position: sticky; top: 64px; } }
.ing-list { list-style: none; margin: 0; padding: 0; }
.ing-list li { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ing-list li.sec-head, .steps li.sec-head { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-top: 16px; border-bottom: 0; }
.ing-list .amt { font-weight: 600; text-align: right; }
.ing-list a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.servings-form input { width: 4.5em; min-height: 36px; margin-left: 6px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.step-no { width: 28px; height: 28px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; margin-top: 2px; }
.plain { margin: 0; padding-left: 18px; }
.pre { white-space: pre-wrap; }
.menu-more { position: relative; }
.menu-more > summary { list-style: none; }
.menu-more > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 6px; display: grid; }
.menu-pop form { margin: 0; }
.menu-pop a, .menu-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 8px; color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--surface-2); }
.photo-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.photo-cell { position: relative; }
.photo-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); display: block; }
.photo-cell form { position: absolute; top: 4px; right: 4px; }
.empty-state { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 32px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.empty-state .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.empty-state h2 { font-size: 1.25rem; margin: 0; }
.review-row.flagged { background: var(--warning-soft); }
.review-row select { margin-top: 4px; width: 100%; }
.recipe-form textarea { font-family: var(--font-ui); line-height: 1.5; }
.chip svg { vertical-align: -2px; }
button.chip { border: 0; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 600; }

/* ---- Cook mode and timers ---- */
body.cook-mode main { max-width: none; padding-bottom: 120px; }
.cook { min-height: 100dvh; }
.cook-top { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--border); }
.cook-title { display: grid; flex: 1; min-width: 0; }
.cook-title strong { font-family: var(--font-display); font-weight: 560; font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cook-cols { display: grid; gap: 20px; padding: 20px 16px; max-width: 1200px; margin: 0 auto; }
/* Side by side on wide screens, and whenever a phone or tablet is turned sideways: ingredients left, method right. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  .cook-cols { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .cook-steps { min-height: 0; }
  .cook-ings { position: sticky; top: 72px; align-self: start; max-height: calc(100dvh - 88px); overflow: auto; overscroll-behavior: contain; }
}
/* Sideways on a phone there isn't much height: tighten things so a step and its buttons fit. */
@media (orientation: landscape) and (max-height: 520px) {
  .cook-top { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .cook-cols { padding-top: 12px; gap: 16px; }
  .cook-ings { top: 56px; max-height: calc(100dvh - 68px); }
  .cook-step { padding: 16px; margin-top: 8px; }
  .step-text { font-size: 1.1875rem; }
  .tick-row { min-height: 40px; font-size: 1rem; }
  .step-buttons { margin-top: 10px; }
  .btn.big { min-height: 48px; }
}
/* Stacked (upright phone): leave room so the step can always scroll up to the top, even on a short recipe. */
.cook-steps { min-height: calc(100dvh - 80px); }
.cook-list { list-style: none; margin: 0; padding: 0; }
.cook-list li.sec-head { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-top: 12px; }
.tick-row { display: grid; grid-template-columns: 26px minmax(4.5em, auto) 1fr; gap: 10px; align-items: center; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem; cursor: pointer; }
.tick-row input { width: 22px; height: 22px; accent-color: var(--accent); min-height: 0; }
.tick-row .amt { font-weight: 600; text-align: right; }
.tick-row:has(input:checked) { color: var(--text-muted); text-decoration: line-through; }
.cook-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 14px; margin-top: 12px; }
.cook-step.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step-text { font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.5; margin: 0; }
.step-ings { list-style: none; margin: 0; padding: 12px 14px; background: var(--band); border-radius: var(--r-md); display: grid; gap: 4px; }
.step-ings .amt { font-weight: 700; }
.step-buttons { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-top: 16px; }
.btn.big { min-height: 56px; font-size: 1.0625rem; }
.timer-bar { position: fixed; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 30; display: grid; gap: 6px; padding: 0 12px; pointer-events: none; }
body.cook-mode .timer-bar, body:not(:has(.tabbar)) .timer-bar { bottom: calc(12px + env(safe-area-inset-bottom)); }
.timer-bar .timer { pointer-events: auto; max-width: 520px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: var(--text); color: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.timer-bar .t-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; }
.timer-bar .t-left { font-size: 1.25rem; font-weight: 700; }
.timer-bar .timer.paused .t-left { opacity: 0.6; }
.timer-bar .timer.done { background: var(--terra); color: var(--on-terra); animation: pulse 1s ease-in-out infinite; }
.timer-bar .btn { min-height: 34px; }
.timer-bar .btn.ghost { color: inherit; }
@keyframes pulse { 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .timer-bar .timer.done { animation: none; } }
.hh-bar { gap: 8px; align-items: center; }
.icon-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; color: var(--text-muted); border: 1px solid var(--border); background: var(--surface); }
.icon-link:hover { color: var(--text); }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 200px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.mini-card { scroll-snap-align: start; display: grid; gap: 4px; color: inherit; text-decoration: none; }
.mini-img { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, var(--band), color-mix(in srgb, var(--surface-3) 80%, var(--terra))); display: grid; place-items: center; color: var(--text-muted); }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-title { font-family: var(--font-display); font-weight: 560; line-height: 1.25; }
.tick-row { color: var(--text); font-weight: 400; }
@media (max-width: 600px) {
  .recipe-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rcard { flex-direction: row; }
  .rcard .rimg { width: 112px; flex: none; aspect-ratio: auto; min-height: 96px; }
  .rcard .rimg .fav { top: 6px; right: 6px; width: 28px; height: 28px; }
  .rcard .rimg .fav svg { width: 16px; height: 16px; }
  .rbody { padding: 12px 14px; }
  .rbody h3 { font-size: 1.0625rem; }
}
.unit-toggle { display: inline-flex; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; gap: 2px; margin: 6px 0 4px; }
.unit-toggle a { padding: 5px 12px; border-radius: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-decoration: none; min-height: 30px; display: inline-flex; align-items: center; }
.unit-toggle a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* Version comparison */
.list-row.selected { background: var(--accent-soft); }
.list-row > a.grow { color: inherit; text-decoration: none; }
.diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.diff li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 6px 8px; border-radius: 6px; line-height: 1.45; }
.diff li.same { color: var(--text-muted); }
.diff li.add { background: var(--success-soft); }
.diff li.del { background: var(--danger-soft); }
.diff li.change { background: var(--warning-soft); }
.diff-no { color: var(--text-muted); font-size: 0.8125rem; text-align: right; }
.diff-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.diff li.add .diff-tag { color: var(--success); }
.diff li.del .diff-tag { color: var(--danger); }
.diff li.change .diff-tag { color: var(--warning); }
.diff ins, .diff-fields ins { text-decoration: none; background: color-mix(in srgb, var(--success) 22%, transparent); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.diff del, .diff-fields del { color: var(--danger); text-decoration: line-through; }
.diff-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.diff-fields dt { color: var(--text-muted); font-size: 0.875rem; }
.diff-fields dd { margin: 0; }
.diff-key { display: inline-block; padding: 1px 8px; border-radius: 99px; font-weight: 600; margin-right: 4px; }
.diff-key.add { background: var(--success-soft); color: var(--success); }
.diff-key.change { background: var(--warning-soft); color: var(--warning); }
.diff-key.del { background: var(--danger-soft); color: var(--danger); }

/* Icons sit on the text line in list rows */
.list-row > span > svg:first-child, .list-row > a > svg:first-child, .chip > svg:first-child { vertical-align: -4px; margin-right: 8px; flex: none; }
.chip > svg:first-child { vertical-align: -2px; margin-right: 2px; }

/* Messages ("Saved", "Restored version 2") float as a toast at the bottom, so you see them wherever you're scrolled to. */
.flash {
  position: fixed; top: auto; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%); width: max-content; max-width: min(92vw, 520px); margin: 0;
  padding: 12px 18px; border-radius: var(--r-md); text-align: center; cursor: pointer;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-3);
  animation: toast-in 0.2s ease-out, toast-out 0.3s 4s forwards;
}
@media (min-width: 768px) { .flash { bottom: 24px; left: calc(50% + 40px); margin-left: 0; max-width: 520px; } }
@media (min-width: 1180px) { .flash { left: calc(50% + 124px); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: toast-out 0.01s 4s forwards; } }

/* ---- Pantry (stage 2) ---- */
.pantry-list { display: grid; gap: 8px; }
@media (min-width: 900px) { .pantry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pantry-ing { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.pantry-ing > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; cursor: pointer; list-style: none; min-height: 60px; }
.pantry-ing > summary::-webkit-details-marker { display: none; }
.pantry-ing > summary .chev { color: var(--text-muted); transform: rotate(180deg); transition: transform var(--dur, 0.15s); display: flex; }
.pantry-ing[open] > summary .chev { transform: rotate(270deg); }
.pantry-ing[open] > summary { border-bottom: 1px solid var(--border); }
.pantry-ing > .list { border: 0; border-radius: 0; }
.batch-row > svg:last-child, .list-row.small-row > svg:last-child { transform: rotate(180deg); color: var(--text-muted); flex: none; }
.list-row.small-row { min-height: 40px; }
.loc-seg { flex-wrap: wrap; }
.loc-seg > label { flex: 1 0 auto; }
.num { font-variant-numeric: tabular-nums; }
.neg { color: var(--danger); }
.pos { color: var(--success); }
.right { text-align: right; }
.lead { font-size: 1.0625rem; margin: 4px 0 14px; }
.h2 { font-size: 1.375rem; margin: 2px 0 4px; }
.warn-card { border-color: var(--warning); background: var(--warning-soft); }
.small-select { min-height: 32px; padding: 2px 8px; font-size: 0.8125rem; width: auto; }
.danger-text { color: var(--danger); }

.product-card { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.product-card img, .product-card .ph { width: 88px; height: 88px; flex: none; border-radius: var(--r-md); object-fit: contain; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); }
.product-card.small { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; }
.product-card.small img, .product-card.small .ph { width: 52px; height: 52px; }

.batch-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.batch-facts dt { color: var(--text-muted); font-size: 0.875rem; }
.batch-facts dd { margin: 0; }
.batch-facts:empty { display: none; }

.actions-grid { display: grid; gap: 10px; }
@media (min-width: 700px) { .actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.actions-grid > .card { margin: 0; }
.danger-box > summary { color: var(--danger); }
.history-list .list-row { align-items: flex-start; }

.exp-row a { color: inherit; text-decoration: none; }
.exp-row form { margin: 0; }

/* What can I cook? */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.filter-bar label { font-size: 0.8125rem; }
.filter-bar select { min-width: 8em; }
.cook-results { display: grid; gap: 10px; }
@media (min-width: 900px) { .cook-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cook-card { display: grid; gap: 8px; margin: 0; }
.cook-card > a { color: inherit; text-decoration: none; }
.cook-card .thumb { width: 56px; height: 56px; }
.pct { font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: var(--r-full); background: var(--band); }
.pct.most { background: var(--warning-soft); color: var(--warning); }
.pct.full { background: var(--success-soft); color: var(--success); }

/* Notifications */
.icon-link.bell { position: relative; }
.icon-link .badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--terra); color: var(--on-terra, #fff); font-size: 0.6875rem; font-weight: 700; line-height: 17px; text-align: center; }
.note-row { align-items: flex-start; }
.note-row .note-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--band); color: var(--text-muted); }
.note-row.unread { background: var(--accent-soft); }
.note-row.unread .note-ic { background: var(--surface); color: var(--accent); }

/* Camera barcode scanner (from Stashed) */
.fieldscan-wrap { position: relative; display: block; }
.fieldscan-wrap > input { width: 100%; padding-right: 52px; }
.fieldscan-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 42px; height: 38px; border: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fieldscan { position: fixed; inset: 0; z-index: 100; background: #0B0A09; color: #fff; display: flex; flex-direction: column; }
.fieldscan-top { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 16px 10px; font-weight: 700; font-size: 17px; }
.fieldscan-top .round { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 18px; }
.fieldscan-view { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fieldscan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fieldscan-frame { position: relative; width: min(86vw, 420px); height: 150px; border-radius: 14px; box-shadow: 0 0 0 4px var(--accent), 0 0 0 100vmax rgb(0 0 0 / 0.45); }
.fieldscan-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; margin: 0; text-shadow: 0 1px 3px #000; }
.fieldscan-result { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); background: #1D1B18; display: grid; gap: 8px; }
.fieldscan-value { font-size: 22px; margin: 0; }
input.link-filled { box-shadow: 0 0 0 3px var(--accent-soft); }
.chip.on .muted { color: inherit; opacity: 0.75; }
a.pantry-ing { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; min-height: 60px; color: inherit; text-decoration: none; }
a.pantry-ing > svg:last-child { transform: rotate(180deg); color: var(--text-muted); flex: none; }
a.pantry-ing:hover { border-color: var(--border-strong); }
.indent { margin-left: 30px; }
.warn-card label.check { align-items: flex-start; }
.warn-card label.check input { margin-top: 3px; }