/* Cava v4 — phone first, big targets, light + dark.
   The design system (DRM-1861, from the 10/21 side-by-side): paper, card, soft, line and ink stay. Everything that
   carries text is at least 4.5:1 (WCAG AA) on every surface it is drawn on, in light and in both darks: muted is
   #6b5b4e (was #7b6b5d, 4.4:1 on paper; now 5.6:1); one accent, Cava wine; status is outline pills (go, warn, cool,
   stop; warn was #a65e1b, 4.3:1, now #8f4f14, 5.5:1). Cormorant Garamond is for words only; Manrope is the UI and
   every number, bin and vintage, with lining figures, so A1 never reads "AI". Cards are 16 px, buttons 12 px and
   48 px tall, chips are pills, and every target is at least 44 px. test/design-system.test.mjs computes every text
   pair and every target from this file. */
:root {
  --paper: #f5eee2; --card: #fffaf1; --ink: #23170f; --muted: #6b5b4e; --line: #e5dac8;
  --wine: #6b1d24; --wine-ink: #fff7ef; --gold: #a9853a; --soft: #efe5d4;
  --go: #2f6b4f; --warn: #8f4f14; --stop: #9b2c2c; --cool: #3d6286;
  /* The letters a misread got wrong, marked like a highlighter (DRM-1861, "Same as Kessler?"): ink on it, a rule under it. */
  --mark: #f1dfa6; --mark-line: #8a6a24;
  /* A bottle on the rack map, by style (DRM-1861, slice 4): decorative marks, never text, with a rule round each. */
  --bottle-red: #6b1d24; --bottle-white: #e9d68f; --bottle-rose: #e8b0a6; --bottle-fizz: #fbf3d9; --bottle-other: #b8692a; --bottle-edge: #9c8b74;
  /* The five tiers' decorative colours (dots, borders, tints); never text. */
  --t1: #8b8279; --t2: #b19366; --t3: #c0605f; --t4: #7a1f2a; --t5: #b08a2e;
  /* Tier colours that carry TEXT (DRM-1855), each at least 4.5:1 where it is read: a badge's fill and its ink, and a
     picked tier's label on its tint. Pass, Decent pour, Pour me another and Bottle worth hiding take white ink
     (5.7–10:1); Holy grail is flat gold with dark ink (8.4:1). test/contrast.test.mjs computes every pair. */
  --t1-badge: #6b635c; --t2-badge: #80612f; --t3-badge: #a3403f; --t4-badge: #7a1f2a; --t5-badge: #d9b65a;
  --t1-badge-ink: #fff; --t2-badge-ink: #fff; --t3-badge-ink: #fff; --t4-badge-ink: #fff; --t5-badge-ink: #2b1d05;
  --t1-text: #6b635c; --t2-text: #80612f; --t3-text: #a3403f; --t4-text: #7a1f2a; --t5-text: #7b6120;
  --display: 'Cormorant Garamond', Georgia, serif;
  --ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Numbers: lining, tabular figures (Cormorant's old-style figures made "10" read "IO" and "A1" read "AI"). */
  --numerals: lining-nums tabular-nums;
  /* Shape: cards, list rows, buttons and pills; the floor for a finger (44 px) and a button's height (48 px). */
  --radius: 16px; --radius-row: 14px; --radius-btn: 12px; --radius-pill: 999px;
  --tap: 44px; --btn: 48px; --tabs: 68px;
  color-scheme: light;
}
/* Dark follows the phone (and data-theme pins it). The dark set carries over from before this slice, except the
   accent: #c4515d was 3.9:1 as text on the dark card (links, the active tab, bin counts), and its ink 4.2:1 on it;
   #d6666f is 4.9:1 and 5.4:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15100e; --card: #211916; --ink: #f2e8da; --muted: #a8988a; --line: #3a2d28;
    --wine: #d6666f; --wine-ink: #1a0f0d; --gold: #d0a95a; --soft: #2a201c;
    --go: #6fbf95; --warn: #e0a05a; --stop: #e07a7a; --cool: #8fb2d6;
    --mark: #5a4718; --mark-line: #d0a95a;
    --bottle-red: #b84a55; --bottle-white: #cdb96e; --bottle-rose: #c98f86; --bottle-fizz: #e6dcb8; --bottle-other: #c27a3c; --bottle-edge: #6b5b4e;
    --t1: #9a918a; --t2: #c8ab7d; --t3: #d97b79; --t4: #c4515d; --t5: #d6b25a;
    --t1-badge: #9a918a; --t2-badge: #c8ab7d; --t3-badge: #d97b79; --t4-badge: #bb4955; --t5-badge: #d6b25a;
    --t1-badge-ink: #1a0f0d; --t2-badge-ink: #1a0f0d; --t3-badge-ink: #1a0f0d; --t4-badge-ink: #fff; --t5-badge-ink: #2b1d05;
    --t1-text: #a19992; --t2-text: #c8ab7d; --t3-text: #db817f; --t4-text: #d27b84; --t5-text: #d6b25a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15100e; --card: #211916; --ink: #f2e8da; --muted: #a8988a; --line: #3a2d28;
  --wine: #d6666f; --wine-ink: #1a0f0d; --gold: #d0a95a; --soft: #2a201c;
  --go: #6fbf95; --warn: #e0a05a; --stop: #e07a7a; --cool: #8fb2d6;
  --mark: #5a4718; --mark-line: #d0a95a;
  --bottle-red: #b84a55; --bottle-white: #cdb96e; --bottle-rose: #c98f86; --bottle-fizz: #e6dcb8; --bottle-other: #c27a3c; --bottle-edge: #6b5b4e;
  --t1: #9a918a; --t2: #c8ab7d; --t3: #d97b79; --t4: #c4515d; --t5: #d6b25a;
  --t1-badge: #9a918a; --t2-badge: #c8ab7d; --t3-badge: #d97b79; --t4-badge: #bb4955; --t5-badge: #d6b25a;
  --t1-badge-ink: #1a0f0d; --t2-badge-ink: #1a0f0d; --t3-badge-ink: #1a0f0d; --t4-badge-ink: #fff; --t5-badge-ink: #2b1d05;
  --t1-text: #a19992; --t2-text: #c8ab7d; --t3-text: #db817f; --t4-text: #d27b84; --t5-text: #d6b25a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 16px; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: var(--wine); }

main { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 12px) 16px calc(var(--tabs) + env(safe-area-inset-bottom) + 24px); }
.screen > section, .screen > .card { margin-top: 18px; }
.boot, .center { display: grid; place-items: center; min-height: 40vh; }
.center-row { display: flex; justify-content: center; margin-top: 12px; }
.center-col { display: flex; flex-direction: column; align-items: center; margin-top: 12px; text-align: center; }
.center-col .error { margin: 8px 0 0; }
h1 { font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1; margin: 0; letter-spacing: -0.01em; }
h2, h3 { margin: 0 0 8px; }
h3 { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.section-title { font-family: var(--display); font-size: 24px; font-weight: 600; display: flex; gap: 8px; align-items: center; margin: 24px 0 8px; }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.muted { color: var(--muted); } .small { font-size: 14px; } .tiny { font-size: 12px; }
.error { color: var(--stop); }
.note { font-size: 14px; color: var(--warn); margin: 6px 0 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card p { margin: 6px 0; line-height: 1.45; }

.btn { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-btn); padding: 12px 16px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: var(--btn); }
.btn.primary { background: var(--wine); color: var(--wine-ink); border-color: var(--wine); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.btn.wide { width: 100%; margin-top: 12px; } .btn.big { min-height: 58px; font-size: 18px; }
.btn.grow { flex: 1; }
.btn:disabled { opacity: 0.5; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--wine); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.icon-btn { background: none; border: 0; padding: 8px; color: var(--muted); min-width: 44px; min-height: 44px; }
.row { display: flex; gap: 10px; margin-top: 14px; }

/* home */
.home-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 8px 0 16px; }
.screen-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.screen-head h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The Casa M room switcher (casam.me/rooms.js) in Cava's own tokens, light and dark. */
casam-rooms { flex: none; --casam-rooms-ink: var(--ink); --casam-rooms-bg: var(--card); --casam-rooms-line: var(--line);
  --casam-rooms-gold: var(--wine); --casam-rooms-mark-bg: var(--card); --casam-rooms-serif: var(--display); --casam-rooms-sans: var(--ui); }
/* Its mark is 34 px in rooms.js; a page's ::part() rule wins over the shadow tree's own, so here it is a 44 px target (DRM-1855). */
casam-rooms::part(mark) { width: 44px; height: 44px; }
.home-head casam-rooms { align-self: center; }
.home-head h1 { font-size: 52px; color: var(--wine); }
.scan-cta { width: 100%; display: flex; gap: 16px; align-items: center; text-align: left; background: var(--wine); color: var(--wine-ink); border: 0; border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px -14px rgba(80, 10, 20, 0.6); }
.scan-cta b { display: block; font-size: 20px; }
.scan-cta small { opacity: 0.85; font-size: 14px; }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-top: 16px; }
.counts > * { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 12px 8px; min-height: 44px; text-align: center; }
.counts b { display: block; font-family: var(--ui); font-weight: 800; font-variant-numeric: var(--numerals); font-size: 28px; line-height: 1; }
.counts small { color: var(--muted); font-size: 13px; }

.row-card { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 10px 12px; margin-top: 8px; }
.row-card.current { border-color: var(--wine); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 14px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.row-tiers { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 14px; }
.who-tier { display: inline-flex; gap: 4px; align-items: center; }

.tile { border-radius: 8px; object-fit: cover; flex: none; background: var(--soft); }
/* A bottle with no photo of its own is a flat tonal mark, not a gradient: the glass by style, with its label on it. */
.tile-blank { position: relative; display: grid; place-items: center; background: var(--line); --label: var(--card); }
.tile-blank::after { content: ''; width: 55%; height: 36%; border-radius: 2px; background: var(--label); }
.tile-blank.style-red { background: #4a1418; --label: #efe3c8; }
.tile-blank.style-white { background: #3f4a2a; --label: #f3ecd6; }
.tile-blank.style-rose { background: #b7616b; --label: #fff1e6; }
.tile-blank.style-sparkling { background: #2f3a24; --label: #f1e2b0; }
.tile-blank.style-dessert, .tile-blank.style-fortified { background: #6e4a1a; --label: #f3e2b8; }
.tile-blank.style-orange { background: #b8692a; --label: #fbe9cc; }

.tier-badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); color: var(--t3-badge-ink); background: var(--t3-badge); white-space: nowrap; }
.tier-badge.small { font-size: 12px; padding: 1px 7px; }
.tier-badge.t1 { background: var(--t1-badge); color: var(--t1-badge-ink); }
.tier-badge.t2 { background: var(--t2-badge); color: var(--t2-badge-ink); }
.tier-badge.t3 { background: var(--t3-badge); color: var(--t3-badge-ink); }
.tier-badge.t4 { background: var(--t4-badge); color: var(--t4-badge-ink); }
.tier-badge.t5 { background: var(--t5-badge); color: var(--t5-badge-ink); }

/* Status is an outline pill in its own colour: go, warn, cool, stop. */
.ready { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid currentColor; }
.ready.go { color: var(--go); } .ready.warn { color: var(--warn); } .ready.stop { color: var(--stop); } .ready.cool { color: var(--cool); }

/* tabs */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tab { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 700; padding: 6px 0; min-height: 44px; }
.tab.on { color: var(--wine); }
.tab.scan { width: 58px; height: 58px; margin: -18px auto 0; border-radius: 50%; background: var(--wine); color: var(--wine-ink); box-shadow: 0 8px 22px -8px rgba(80, 10, 20, 0.7); justify-content: center; }

/* sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(20, 10, 8, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 100dvh; height: 100dvh; overflow-y: auto; background: var(--paper); padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 24px); }
@media (min-width: 600px) { .sheet { height: auto; max-height: 92dvh; border-radius: 22px 22px 0 0; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: calc(-1 * (env(safe-area-inset-top) + 8px)); background: var(--paper); padding: 8px 0; z-index: 2; }
.sheet-head h2 { font-family: var(--display); font-size: 30px; font-weight: 600; margin: 0; }

/* scan (DRM-1861, slice 2): the live camera reads the label as soon as it is steady. The viewfinder, with its stage
   pill over the picture; the three stages under it; three photo slots (the front fills itself, the back and the pour
   snap from the live camera on a tap); and From photos. */
.viewfinder { position: relative; border-radius: var(--radius); overflow: hidden; background: #17110f; aspect-ratio: 3 / 4; max-height: 50dvh; margin: 12px 0 10px; }
.viewfinder video, .viewfinder .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder .guide { position: absolute; inset: 10% 8%; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 12px; pointer-events: none; }
.viewfinder .guide.go { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.viewfinder .starting { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
/* The stage pill sits on the picture, whatever the picture: white on a dark glass (over white it is still 7:1). */
.stage-pill { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0 auto; width: max-content; max-width: calc(100% - 24px); display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill); background: rgba(23, 17, 15, 0.78); color: #fff; font-weight: 700; }
.stage-pill.go { background: var(--wine); color: var(--wine-ink); }
.stage-pill.warn { background: var(--card); color: var(--warn); border: 1px solid var(--line); }
/* The three stages, as a row: label → reading → result. The one under way is the accent; the ones done are ticked. */
.stages { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 0 0 8px; }
.stages .step { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; min-height: 32px; }
.stages .step.on { border-color: var(--wine); color: var(--wine); }
.stages .step.done { color: var(--ink); background: var(--soft); border-color: transparent; }
.stages .arrow { color: var(--line); }
/* The file inputs are hidden; "From photos" is a full-width ghost button. */
.from-photos { margin-top: 10px; }
.slot.live .slot-empty { color: var(--wine); }
.slot.front.has { border-color: var(--go); }
.slot { position: relative; border-radius: 16px; overflow: hidden; background: var(--card); border: 1.5px dashed var(--line); aspect-ratio: 3 / 4; flex: 1; min-width: 0; }
.slot.big { aspect-ratio: 4 / 3; margin: 12px 0; border-color: var(--wine); }
.slot.has { border-style: solid; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot.big img { object-fit: contain; background: var(--soft); }
.slot-empty { width: 100%; height: 100%; background: none; border: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; }
.slot.big .slot-empty { color: var(--wine); font-size: 18px; }
.slot-empty small { font-weight: 500; }
/* Remove a photo: a 44 px target whose drawn circle is 30 px, so it still sits lightly on the photo's corner. */
.slot-clear { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: none; color: #fff; display: grid; place-items: center; }
.slot-clear::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); }
.slot-clear svg { position: relative; }
.slot-label { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 2px 8px; border-radius: 999px; }
.slot-row { display: flex; gap: 10px; }
.slot-row.small .slot { max-width: 110px; }

.hero-label { width: 100%; max-height: 300px; object-fit: contain; border-radius: 14px; background: var(--card); margin-bottom: 12px; }
.hero-label.small { width: 84px; height: 112px; object-fit: cover; margin: 0; flex: none; border-radius: var(--radius-btn); }
.id-head { display: flex; gap: 14px; align-items: flex-start; }
.wine-name { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.05; margin: 2px 0 6px; }
.known { background: var(--soft); border-radius: 14px; padding: 10px 14px; margin-top: 14px; font-size: 15px; }
.known p { margin: 4px 0; }
.big-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.choice { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; min-height: 120px; border-radius: 18px; border: 1.5px solid var(--wine); background: var(--card); color: var(--wine); font-weight: 800; font-size: 17px; }
.choice:active { background: var(--wine); color: var(--wine-ink); }
.big-choice.compact .choice { min-height: 76px; flex-direction: row; font-size: 16px; }
.form { margin: 16px 0; }
.form .eyebrow { display: block; margin: 12px 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-pill); padding: 9px 14px; font-weight: 700; min-height: 44px; }
.chip.on { background: var(--wine); color: var(--wine-ink); border-color: var(--wine); }
.chip small { opacity: 0.7; font-weight: 600; }
.qty-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-btn); overflow: hidden; background: var(--card); }
.stepper button { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; font-weight: 700; color: var(--wine); }
.stepper span { min-width: 36px; text-align: center; font-weight: 800; font-size: 18px; font-variant-numeric: var(--numerals); }
input, textarea { width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-btn); padding: 12px; min-height: var(--btn); font-size: 16px; }
textarea { resize: vertical; }
.bin-input, .place-input, .note-input { margin-top: 10px; }
label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 10px; }
label input { margin-top: 4px; color: var(--ink); font-weight: 500; }
label.inline { display: flex; align-items: center; gap: 10px; }
label.inline input { flex: 1; margin: 0; }
label.toggle { display: flex; gap: 10px; align-items: center; color: var(--ink); font-size: 16px; font-weight: 600; margin-top: 14px; min-height: 44px; }
label.toggle input { width: 22px; height: 22px; min-height: 0; accent-color: var(--wine); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.identity .chips { margin-top: 12px; }
.others { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 8px 0; font-size: 15px; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; }
.serve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.serve > div { background: var(--soft); border-radius: 12px; padding: 10px; text-align: center; }
.serve b { display: block; font-size: 15px; }
.serve small { color: var(--muted); font-size: 12px; }
.serve .note { grid-column: 1 / -1; color: var(--muted); }
.quote { font-family: var(--display); font-size: 19px; font-style: italic; }
.quote small { font-family: var(--ui); font-style: normal; font-size: 12px; color: var(--muted); }
.spin-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--wine); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* wset */
.wset .lede { font-family: var(--display); font-size: 21px; line-height: 1.25; }
.bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bar i { height: 8px; border-radius: 4px; background: var(--line); }
.bar i.on { background: var(--wine); }
.aromas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.aroma { background: var(--soft); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 14px; }

/* reaction */
.reaction { margin-top: 16px; border-color: var(--wine); }
.who { display: flex; gap: 8px; margin: 8px 0 12px; }
.who-btn { flex: 1; border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius-btn); padding: 8px; min-height: 48px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.who-btn.on { border-color: var(--who, var(--wine)); box-shadow: inset 0 0 0 1px var(--who, var(--wine)); }
.who-btn small { font-weight: 600; color: var(--muted); font-size: 12px; }
.tiers { display: grid; gap: 6px; }
/* One row a tier (DRM-1861, canvas row 4): the dots, the name, the hint at the end. */
.tier { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius-btn); padding: 4px 12px; min-height: 46px; align-items: center; }
/* The tier's dots are drawn, not typed: five 8 px discs, the tier's own colour up to its rank. */
.tier-dots { display: flex; gap: 3px; align-items: center; }
.tier-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tier-dots i.on { background: var(--tc, var(--t3)); }
.tier-label { font-weight: 800; font-size: 16px; }
.tier-hint { font-size: 12px; color: var(--muted); text-align: right; }
.tier.t1 { --tc: var(--t1); --tl: var(--t1-text); } .tier.t2 { --tc: var(--t2); --tl: var(--t2-text); } .tier.t3 { --tc: var(--t3); --tl: var(--t3-text); }
.tier.t4 { --tc: var(--t4); --tl: var(--t4-text); } .tier.t5 { --tc: var(--t5); --tl: var(--t5-text); }
.tier.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, var(--card)); }
.tier.on .tier-label { color: var(--tl, var(--tc)); }
.tier.t5.on { background: linear-gradient(100deg, color-mix(in srgb, var(--t5) 22%, var(--card)), var(--card)); }
.buy-again { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-weight: 700; }
.buy-again span { flex: 1; }
/* A holy grail's flourish: stroke icons in the gold, never emoji. */
.confetti { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; color: var(--t5-text); animation: pop 0.9s ease-out; }
@keyframes pop { from { transform: scale(0.4) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* cellar */
.search { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 0 12px; margin: 12px 0; color: var(--muted); }
.search input { border: 0; padding: 12px 0; background: none; }
/* minmax(0, 1fr): a long wine name in an open bin ellipsizes instead of widening the page past the phone. */
.bins { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bin { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px 10px; }
.bin-head { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 2px 4px; min-height: 44px; }
/* A bin's name is a number as much as a word (A1, C3): Manrope, lining figures. */
.bin-name { font-family: var(--ui); font-size: 22px; font-weight: 800; font-variant-numeric: var(--numerals); min-width: 52px; text-align: left; }
.bin-thumbs { flex: 1; display: flex; gap: 4px; }
.bin-count { font-weight: 800; color: var(--wine); font-size: 18px; font-variant-numeric: var(--numerals); }
.bin .row-card { border: 0; background: var(--soft); }

/* wine page */
.wine-hero { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; }
.wine-hero img { width: 84px; height: 112px; object-fit: cover; border-radius: var(--radius-btn); flex: none; }
.edit-holding { display: flex; gap: 8px; align-items: center; }
.edit-holding input { width: 90px; flex: none; }
.photos { margin-top: 14px; }
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
.photo-thumb { flex: none; border: 0; padding: 0; background: none; position: relative; scroll-snap-align: start; }
.photo-thumb img { width: 110px; height: 146px; object-fit: cover; border-radius: 10px; }
.photo-thumb span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 999px; padding: 1px 7px; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.92); display: grid; place-items: center; }
.lightbox img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; }
.lb-close { top: calc(env(safe-area-inset-top) + 12px); right: 12px; }
.lb-prev { left: 10px; top: 50%; } .lb-next { right: 10px; top: 50%; }
.big-num { font-family: var(--ui); font-weight: 800; font-variant-numeric: var(--numerals); font-size: 44px; letter-spacing: -0.02em; line-height: 1; margin: 4px 0; color: var(--wine); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs) + env(safe-area-inset-bottom) + 16px); z-index: 80; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 700; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5); width: max-content; max-width: calc(100vw - 32px); }
/* Undo (DRM-1171): a big, separate target, 10 seconds on screen. */
.toast.has-undo { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; width: max-content; }
.toast-undo { background: var(--paper); color: var(--ink); border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; font: inherit; font-weight: 800; flex: none; }
/* A row with its own action button beside it (Just scanned → dismiss). */
.row-with-action { display: flex; align-items: center; gap: 4px; }
.row-with-action .row-card { flex: 1; min-width: 0; }
.row-with-action .row-action { margin-top: 8px; min-width: 44px; min-height: 44px; }
.edit-holding { flex-wrap: wrap; }
.edit-holding .error { flex-basis: 100%; margin: 6px 0 0; }
.auth-wrap { min-height: 100dvh; }

.center-text { text-align: center; margin: -4px 0 8px; }
/* What we paid (DRM-1185) */
.paid-line { margin: 2px 0 0; }
.paid-line b { color: var(--ink); }
/* Open soon without a WSET card (DRM-1170) */
.ready.est { border-style: dashed; }
.source-tag { font-size: 12px; color: var(--muted); font-style: italic; }
.source-tag.conf-low { color: var(--warn); font-style: normal; font-weight: 700; }
.window-line { margin: 4px 0 8px; }
.window-line .window-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.window-line p { margin: 4px 0 0; }
.window-basis { margin-top: 4px; }
.check-title { margin: 18px 0 2px; }
.no-window { margin-top: 12px; }
/* Cellar search with no match (DRM-1855): say so, and a way back. */
.empty-search { margin: 18px 0 0; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.empty-search p { margin: 0 0 10px; }
/* What did you think?: each tap's save, said in the card (DRM-1855). */
.reaction .save-state { min-height: 1.45em; }

/* "Same as Kessler?" (DRM-1861, decision 7): the read is a letter or two from wines we know. What was read, then
   "Which is it?" as radio cards (the whole card is the target), the letters that differ marked, and the choice's own
   words on the button at the foot. */
.same-head { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.same-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; }
.same-head b { font-size: 17px; }
.hero-label.tiny { width: 66px; height: 88px; object-fit: cover; margin: 0; flex: none; border-radius: 10px; }
.which { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.which legend { padding: 0; margin-bottom: 8px; }
.which-card { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; min-height: 44px; border-radius: var(--radius-row); background: var(--card); border: 2px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.which-card.on { border-color: var(--wine); }
.which-card input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--wine); }
.which-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.which-text b { font-size: 16px; }
mark.diff { background: var(--mark); color: var(--ink); border-bottom: 2px solid var(--mark-line); font-weight: 800; padding: 0 1px; }
.same-fields { margin-top: 4px; }
.ours-typed { margin-top: 14px; }
.ours-typed .row-card { margin-top: 6px; }
/* The sheet's own foot: its main action and the way out, at the bottom of the screen as drawn (the sheet's content is a
   column at least a screen tall, the foot pushed to its end), and kept in reach while a long sheet scrolls. */
.same-as, .fix-wine, .into, .edit-pour { display: flex; flex-direction: column; min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 112px); }
.sheet-foot { position: sticky; bottom: 0; z-index: 1; margin: auto -16px 0; padding: 12px 16px 8px; background: var(--paper); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sheet-foot .error { margin: 0 0 6px; }
.sheet-foot .btn.wide { margin-top: 0; }

/* Fix this wine (DRM-1861, decision 7): a duplicate of one of ours first, outlined in warn, with Merge; the fields; then
   Save the fix and Delete this wine at the foot. */
.fix-dup { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-row); background: var(--card); border: 1.5px solid var(--warn); display: flex; flex-direction: column; gap: 8px; }
.fix-dup p { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.fix-dup svg { flex: none; margin-top: 2px; color: var(--warn); }
.fix-dup .btn.wide { margin-top: 0; }
.btn.warn { background: var(--warn); color: var(--card); border-color: var(--warn); }
.two-one { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.fix-form { margin-top: 4px; }
.fix-form fieldset { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.fix-form legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.link-btn.danger { color: var(--stop); }

/* The Cellar (DRM-1861, slice 4; canvas row 6): Wines | Rack, a segmented control; then the line of counts and what
   we paid (never a guess at today's value, decision 4). */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; margin-top: 12px; border-radius: var(--radius-btn); background: var(--soft); }
.seg button { min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-weight: 800; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(35, 23, 15, 0.12); }
.cellar-line { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; }
.cellar-line b { color: var(--ink); }
.cellar-empty { margin-top: 18px; }
/* Filter chips scroll sideways on a phone rather than wrap into three rows. */
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 10px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; white-space: nowrap; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 700; }
.list-head .link-btn { font-size: 14px; }
.wine-rows { display: flex; flex-direction: column; gap: 8px; }
/* A wine row: the name wraps (never an ellipsis), the vintage is its own chip so it is never cut off. */
.wine-row { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 10px 12px; min-height: 44px; }
.wine-row .row-main { display: flex; flex-direction: column; gap: 5px; }
.wine-row-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.wine-row-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.vchip { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--soft); color: var(--ink); font-weight: 800; font-size: 13px; font-variant-numeric: var(--numerals); }
.bchip { display: inline-block; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); font-weight: 800; font-variant-numeric: var(--numerals); }
.wine-row-tiers { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tier-mini { display: inline-flex; gap: 4px; align-items: center; }
.mini-dots { display: inline-flex; gap: 2px; }
.mini-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mini-dots i.on.t1 { background: var(--t1); } .mini-dots i.on.t2 { background: var(--t2); } .mini-dots i.on.t3 { background: var(--t3); }
.mini-dots i.on.t4 { background: var(--t4); } .mini-dots i.on.t5 { background: var(--t5); }

/* The rack map (canvas row 6, decision 5): the bins as they stand, a mark per bottle by style; the bin tapped lists
   what is in it, each with Open one. A rack wider than the phone scrolls sideways inside its own box. */
.rack-scroll { overflow-x: auto; margin: 10px -16px 0; padding: 0 16px; }
.rack-grid { display: grid; gap: 8px; min-width: 0; }
.rack-cell { min-height: 78px; border-radius: var(--radius-btn); border: 2px solid var(--line); background: var(--card); padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; text-align: left; color: var(--ink); }
.rack-cell.on { border-color: var(--wine); background: color-mix(in srgb, var(--wine) 10%, var(--card)); }
.rack-cell.empty .rack-count { color: var(--muted); }
.rack-cell-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; width: 100%; }
.rack-cell-head b { font-size: 18px; font-weight: 800; font-variant-numeric: var(--numerals); }
.rack-count { font-size: 14px; font-weight: 800; color: var(--wine); font-variant-numeric: var(--numerals); }
.rack-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rack-others .rack-cell { min-height: 54px; }
.rack-cell.nobin { border-style: dashed; justify-content: center; align-items: center; font-weight: 700; font-size: 14px; }
.marks { display: flex; flex-wrap: wrap; gap: 3px; }
.mark { display: inline-block; width: 9px; height: 14px; border-radius: 3px; border: 1px solid var(--bottle-edge); }
.mark.m-red { background: var(--bottle-red); } .mark.m-white { background: var(--bottle-white); } .mark.m-rose { background: var(--bottle-rose); }
.mark.m-fizz { background: var(--bottle-fizz); } .mark.m-other { background: var(--bottle-other); }
.rack-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.rack-legend span { display: inline-flex; gap: 5px; align-items: center; }
.rack-set { margin-top: 4px; justify-content: flex-start; text-align: left; font-size: 14px; }
.bin-panel { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.bin-panel .section-title { margin: 8px 0 0; }
.bin-wine { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 8px 8px 8px 12px; }
.bin-wine-link { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); }
.bin-wine-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.btn.soft { background: var(--paper); flex: none; }
.rack-layout .layout-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; min-height: 44px; }
.rack-preview { display: grid; gap: 4px; margin-top: 16px; }
.rack-preview i { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line); background: var(--card); }

/* Into the cellar (canvas row 5): the wine, how many (a stepper and 1/3/6/12), a tap-a-bin rack, the price and where it
   came from; "Opening one now too" and a button that says what it will do, at the foot. */
.into-wine { display: flex; gap: 12px; align-items: center; margin-top: 4px; font-size: 16px; line-height: 1.3; }
.into .eyebrow { display: block; margin: 16px 0 8px; }
.into .qty-row { justify-content: flex-start; gap: 8px; }
.chip.qty { min-width: 44px; font-variant-numeric: var(--numerals); }
.into-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bin-grid-wrap { display: flex; flex-direction: column; gap: 8px; }
.bin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bin-tile { min-height: 62px; border-radius: var(--radius-btn); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 6px 12px; text-align: left; }
.bin-tile.on { background: var(--wine); color: var(--wine-ink); border-color: var(--wine); }
.bin-tile-head { display: flex; width: 100%; justify-content: space-between; align-items: baseline; font-variant-numeric: var(--numerals); }
.bin-tile-head b { font-size: 18px; font-weight: 800; }
.bin-tile-head span { font-size: 14px; font-weight: 700; }
.bin-tile-tag { font-size: 11px; font-weight: 700; }
.bin-grid.others .bin-tile { min-height: 52px; }
.bin-tile.nobin { border-style: dashed; justify-content: center; align-items: center; font-weight: 700; font-size: 14px; }
.into .price { margin-top: 16px; font-size: 14px; }
.money-input { flex: 1; display: flex; align-items: center; gap: 4px; min-height: var(--btn); padding: 0 12px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 16px; }
.money-input span { color: var(--muted); }
.money-input input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; padding: 0; margin: 0; font-weight: 600; }
.from { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.from-label { font-size: 14px; font-weight: 700; color: var(--muted); }

/* Got it (DRM-1861, slice 5; canvas row 3): what we know in the soft box, then one primary action (Open one from the
   bin it lives in, or Pour it), Add bottles and Poured out under it, and Just looking. */
.known-last { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.known-buy { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.decide-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.decide-actions .btn.wide { margin-top: 0; }
.btn.outline { border: 1.5px solid var(--wine); color: var(--wine); background: var(--card); }
.link-btn.quiet { color: var(--muted); }

/* The pour page (canvas row 4): the wine in a line, where it came from and when, then "What did you think?". */
.pour-head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pour-head .icon-btn { color: var(--ink); flex: none; }
.pour-title { flex: 1; min-width: 0; margin: 0; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.08; }
.pour-title .vchip { font-family: var(--ui); vertical-align: 3px; }
.pour-facts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pour-facts p { margin: 0; font-size: 15px; }
.when { display: flex; flex-direction: column; gap: 8px; }
.when-date { max-width: 240px; }
.pour-page .reaction { margin-top: 12px; }
.reaction-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.reaction-head h3 { margin: 0; }
.reaction .save-state.done { display: flex; gap: 6px; align-items: center; color: var(--go); font-weight: 700; font-size: 14px; }
.after-tier { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.buy-label { font-size: 14px; font-weight: 700; }
.chip.yn { min-width: 52px; }
.chip svg { vertical-align: -3px; }
/* The pour photo, a 44 px round camera button in the rating card's row. */
.icon-btn.round { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; }
.icon-btn.round.done { color: var(--go); border-color: var(--go); }
.note-box { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 10px; }
.note-box .note-input { margin-top: 0; }
.pour-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 8px; }

/* Edit pour (canvas row 10): when, where, the bottle; Save changes and Delete this pour at the foot, and who may. */
.edit-pour fieldset { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.edit-pour fieldset:disabled { opacity: 0.7; }
.edit-pour legend { padding: 0; margin-bottom: 8px; }
.edit-pour label { margin-top: 0; }
.bottle-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.btn.danger-outline { background: transparent; color: var(--stop); border: 1.5px solid var(--stop); }
.sheet-foot .foot-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0; }
.sheet-foot .btn.wide + .btn.wide { margin-top: 6px; }

/* Every tab's header (DRM-1861, slice 6): search from any tab, then the room switcher. */
.head-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Home, Tonight first (canvas row 1; decision 1): one pick above the fold, outlined in the accent. */
.tonight { margin-top: 14px; background: var(--card); border: 1.5px solid var(--wine); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tonight-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tonight-top h2 { margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wine); font-weight: 800; }
.tonight-wine { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); min-height: 44px; }
.tonight-wine .tile { width: 72px !important; height: 96px !important; border-radius: 10px; }
.tonight-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tonight-name { font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1.08; }
.cook-row { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-btn); background: var(--soft); border: 0; color: var(--ink); text-align: left; font-size: 14px; }
.cook-row svg:first-child { color: var(--wine); flex: none; }
.cook-row span { flex: 1; }
.tonight-actions { display: flex; gap: 10px; }
.nudge-row { width: 100%; margin-top: 12px; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: var(--radius-row); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-align: left; font-size: 15px; }
.nudge-row svg:first-child { color: var(--warn); flex: none; }
.nudge-row span { flex: 1; }
.counts-line { width: 100%; margin-top: 6px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 15px; text-align: left; }
.counts-line b { color: var(--ink); font-variant-numeric: var(--numerals); }
.counts-go { display: inline-flex; align-items: center; gap: 4px; color: var(--wine); font-weight: 700; }
.section-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.section-row .section-title { margin-bottom: 0; }
.home .soon .wine-row { margin-top: 8px; }
.wine-row.check { border-style: dashed; border-color: var(--line); }
/* What did you think?, on Home: the rating is one tap on the row. */
.think-card { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.think-wine { display: flex; gap: 12px; align-items: center; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); min-height: 44px; }
.think-wine .row-main { display: flex; flex-direction: column; gap: 2px; }
.tier-row { display: flex; gap: 6px; align-items: center; }
.tier-row-who { width: 44px; font-size: 13px; font-weight: 800; }
.tier-tap { flex: 1; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; padding: 0; }
.tier-tap .tier-dots { gap: 2px; }
.tier-tap .tier-dots i { width: 7px; height: 7px; }
.tier-tap.t1 { --tc: var(--t1); } .tier-tap.t2 { --tc: var(--t2); } .tier-tap.t3 { --tc: var(--t3); } .tier-tap.t4 { --tc: var(--t4); } .tier-tap.t5 { --tc: var(--t5); }
.tier-tap.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, var(--card)); }
.think-card .save-state { margin: 0; min-height: 1.45em; }
/* Just scanned, folded to one line. */
.just-scanned { margin-top: 12px; }
.fold-row { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--radius-row); border: 1px dashed var(--line); background: transparent; color: var(--ink); text-align: left; }
.fold-row svg:first-child { color: var(--wine); flex: none; }
.fold-text { flex: 1; display: flex; flex-direction: column; }
.flip { transform: rotate(180deg); }

/* Search from any tab (canvas row 7): the box in the header, Everything | Notes, results grouped, the words marked. */
.search-head { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 -8px; }
.search-head .icon-btn { color: var(--ink); flex: none; }
.search-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--btn); margin: 0; padding: 0 4px 0 12px; border-radius: var(--radius-btn); border: 2px solid var(--wine); background: var(--card); color: var(--muted); }
.search-box input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; padding: 0; margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); outline: none; }
.search-screen > .chips { margin-top: 10px; }
.search-hint { margin-top: 16px; }
.find-group { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.find-group h2 { margin: 0; }
.find-group .row-card { margin-top: 0; }
.find-row.had { border-style: dashed; }
.find-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
mark.hit { background: var(--mark); color: var(--ink); padding: 0 1px; border-radius: 2px; }
.find-note { flex-direction: column; align-items: flex-start; gap: 6px; }
.find-note .quote { margin: 0; line-height: 1.25; }
.find-meta { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.buy-tag { display: inline-flex; gap: 4px; align-items: center; color: var(--go); font-weight: 800; }
.find-none { margin: 40px 8px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.find-none h1 { font-size: 28px; line-height: 1.1; }
.find-none p { margin: 0; line-height: 1.45; }
.find-none-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--soft); color: var(--wine); display: grid; place-items: center; }
/* Open soon follows the counts line closely, as drawn. */
.home .soon { margin-top: 8px; }
.home .soon .section-title { margin-top: 8px; }

/* A wine's page, verdict first (DRM-1861, slice 7; canvas row 8). */
.wine-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px -8px; }
.wine-top .icon-btn { color: var(--ink); }
.verdict, .holdings, .serve-card, .wset-line, .cook { margin-top: 14px; }
.verdict-rows { display: flex; flex-direction: column; gap: 6px; }
.verdict-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.verdict-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.holdings { display: flex; flex-direction: column; gap: 10px; }
.holdings .btn.wide { margin-top: 0; }
.held-line { margin: 0; font-size: 15px; }
.holdings-edit { display: flex; flex-direction: column; gap: 8px; }
.ready-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.chip.food { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); text-decoration: none; }
.chip.food svg { color: var(--wine); }
.cook .chips { margin-top: 4px; }
.cook h3 { margin-bottom: 0; }
.wset-line .lede { margin: 4px 0; }
.our-pours .pour-card { margin-top: 8px; padding: 10px 12px; }
.pour-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pour-card-when { flex: 1; min-width: 0; min-height: 44px; background: none; border: 0; padding: 0; text-align: left; color: var(--muted); font-size: 14px; font-weight: 700; }
.pour-card-said { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.pour-card-said .quote { font-size: 17px; }
.photo-more { flex: none; width: 110px; height: 146px; border-radius: 10px; border: 1px dashed var(--line); background: var(--card); color: var(--wine); font-weight: 800; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.fold { margin-top: 14px; }
.fold .card { margin-top: 8px; }

/* The WSET card (canvas row 9): today's grade first, the structure on a low–high scale, the nose by where each aroma
   comes from, food that opens Cocina, the window said once, the rest folded. */
.wset-page h1 { font-size: 34px; }
.back-to { font-weight: 700; font-size: 15px; text-align: left; }
.grade-card, .sat-card, .nose-card { margin-top: 14px; }
.grade-card p { margin: 6px 0; }
.sat-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 700; }
.sat-list { margin: 0; }
.sat-line.sat-scale-row { border-bottom: 0; padding-bottom: 0; }
.sat-line { display: grid; grid-template-columns: 84px 1fr 96px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sat-line dt { font-weight: 600; }
.sat-line dd { margin: 0; }
.sat-line .val { font-size: 13px; color: var(--muted); text-align: right; text-transform: capitalize; }
.aroma-groups { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin-top: 4px; }
.aroma-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.aroma-groups .aromas { margin: 0; }
.wset-page .cook { margin-top: 14px; }
.window-said { margin-top: 14px; }

/* The Journal (canvas row 10a): chips, a heading for each month, and each pour as a card with what each of us said. */
.journal-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.month-h { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 10px 0 0; }
.jcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 6px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.jcard-top { display: flex; gap: 10px; align-items: flex-start; }
.jcard-photo { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; background: var(--soft); }
.jcard-what { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; }
.jcard-name { font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.jcard .icon-btn { flex: none; display: grid; place-items: center; padding: 0; width: 44px; height: 44px; }
.jperson { display: flex; flex-direction: column; gap: 2px; padding-right: 8px; }
.jwho { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; }
.jcard .quote { font-size: 18px; line-height: 1.25; }
.jcard .buy-tag, .buy-row .buy-tag { font-size: 13px; gap: 6px; }

/* Us (canvas row 12a) and We'd buy again (row 11a). */
.us-head { align-items: flex-end; }
.us-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.us > .us-card, .us > .us-lists, .us > .us-settings { margin-top: 12px; }
.us-counts { margin: 12px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.us-counts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 10px 4px; }
.us-counts dd { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: var(--numerals); }
.us-counts dt { font-size: 13px; color: var(--muted); }
.us-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.card-label { margin: 0; font-family: var(--ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.match-row { display: flex; align-items: baseline; gap: 12px; }
.match-row .small { line-height: 1.4; }
.match-pct { font-size: 44px; font-weight: 800; line-height: 1; color: var(--wine); font-variant-numeric: var(--numerals); flex: none; }
.match-eg { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; }
.match-eg .eyebrow { font-weight: 800; letter-spacing: 0.06em; }
.match-eg b { font-size: 15px; }
.match-tiers { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; font-weight: 700; }
.match-tiers .who-tier { gap: 6px; white-space: nowrap; }
.us-lists { padding: 0; display: flex; flex-direction: column; }
.list-link { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.list-link:last-child { border-bottom: 0; }
.list-link b { flex: 1; font-size: 15px; }
.list-n { color: var(--muted); font-weight: 700; font-variant-numeric: var(--numerals); }
.tone-go { color: var(--go); flex: none; } .tone-warn { color: var(--warn); flex: none; }
.grail-dot { width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; background: var(--t5-badge); flex: none; }
.paid-total { display: flex; flex-direction: column; }
.paid-total b { font-size: 26px; font-weight: 800; color: var(--wine); font-variant-numeric: var(--numerals); }
.us-card p.small { margin: 0; }
.keep-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.keep-bar span { display: block; min-width: 4px; }
.keep-bar .m-red { background: var(--bottle-red); } .keep-bar .m-white { background: var(--bottle-white); } .keep-bar .m-rose { background: var(--bottle-rose); }
.keep-bar .m-fizz { background: var(--bottle-fizz); } .keep-bar .m-other { background: var(--bottle-other); }
.keep-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.keep-legend .mark { width: 8px; height: 12px; vertical-align: -2px; }
.us-settings { display: flex; flex-direction: column; gap: 8px; }
.set-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 700; }
.lang-seg { margin: 0; width: 200px; flex: none; }
.lang-seg button { font-size: 14px; }
.set-row input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--wine); flex: none; }
.us-settings + .card { margin-top: 16px; }
.back-head { margin: 0 0 0 -8px; }
.title-block { display: flex; flex-direction: column; gap: 2px; }
.title-block h1 { font-size: 36px; line-height: 1.05; }
.buy-again-page .chips.scroll { margin-bottom: 10px; }
.buy-row { color: var(--ink); text-decoration: none; }
.buy-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.stock-pill { padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid currentColor; font-size: 12px; font-weight: 800; }
.stock-pill.go { color: var(--go); } .stock-pill.warn { color: var(--warn); } .stock-pill.stop { color: var(--stop); }

/* The first run (canvas row 14a): three steps, in any order; the first one marked. And the empty Cellar, Journal and a
   wine that isn't ours: what to do, never one grey line. */
.fr-intro { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.fr-intro h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.05; }
.fr-intro p { margin: 0; font-size: 15px; }
.fr-steps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fr-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; gap: 12px; }
.fr-step.first { border: 1.5px solid var(--wine); }
.fr-n { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; font-variant-numeric: var(--numerals); }
.fr-step.first .fr-n { background: var(--wine); color: var(--wine-ink); }
.fr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fr-body > b { font-size: 17px; }
.fr-body > .muted { font-size: 14px; line-height: 1.4; }
.fr-body .chips .chip { font-size: 14px; }
.btn.outline-wine { background: var(--card); color: var(--wine); border: 1.5px solid var(--wine); font-weight: 800; }
.empty-state { margin: 18px 0 0; padding: 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.empty-state p { margin: 0; line-height: 1.45; }
.us-empty { margin: 12px 0 0; }