/* ============================================================ SPEC — design system (v55 multi-theme) ============================================================ Four themes anchored to world-class bars. Each one re-skins the entire app: color, accent, hairline strategy, display face, geometry, ornamental divider, drop-cap treatment. bemelmans — Carlyle Hotel, NYC. Leather-bound book. Walnut + 24kt gold leaf + oxblood + cream. Default theme. Embossed minimal radius. Display: Bodoni 72. Ornament: ❦ (fleuron). connaught — Connaught Bar, London. Silver salon. Midnight + platinum + Bristol blue. Sharp Deco geometry. Display: Didot. Ornament: ◇ (Deco lozenge). maison-premiere — Williamsburg, Brooklyn. Absinthe garden. Sage + antique brass + oxblood + champagne. Belle Époque flourish. Display: Big Caslon. Ornament: ❀ (laurel flower). smugglers-cove — San Francisco. Rum den / ship's hold. Deep teal + rum amber + doubloon gold. Weathered wood mood. Display: Bodoni 72. Ornament: ✦ (compass star). The theme is set by the data-theme attribute on . The inline boot script in index.html applies it from localStorage before first paint to avoid a flash. theme.js exposes the read/write API; settings-view.js renders the picker. Add a new theme by adding a [data-theme="X"] block below and registering its name in theme.js THEMES. Every block must provide the full token surface; nothing inherits across themes (other than the universals at :root, just below). ============================================================ */ /* ============================================================ UNIVERSALS — never overridden by themes ============================================================ */ :root { /* Type stacks — body + italic + sans + mono are the same across every theme. Display face is theme-specific (defined in each theme block as --serif-display). */ --serif: "Iowan Old Style", "Iowan", "Hoefler Text", "Cormorant Garamond", "EB Garamond", Georgia, serif; --serif-italic: "Big Caslon", "Hoefler Text", "Iowan Old Style", "Garamond", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "Menlo", monospace; /* Cross-theme geometry constants. Per-theme corner radius lives in --radius (defined in each theme block). */ --radius-md: 8px; --radius-lg: 12px; --hairline: 1px; /* Safe area */ --safe-top: env(safe-area-inset-top, 0); --safe-bottom: env(safe-area-inset-bottom, 0); } /* ============================================================ THEME — Bemelmans (default) Carlyle Hotel, NYC. Leather-bound book. 24kt gold leaf ceiling, Bemelmans mural cream walls, red leather banquettes, brass sconces, walnut tables. Vieux Carré poured neat at the corner stool. ============================================================ */ :root, [data-theme="bemelmans"] { /* Surfaces — walnut leather book spine */ --bg: #2a1c14; /* deep walnut */ --bg-2: #3a2618; /* lifted leather */ --bg-deep: #1a0f08; /* book spine shadow */ --surface: #4a3221; /* raised leather */ --surface-2: #5a3e2a; /* candle-lit leather */ --surface-3: #6b4a35; /* top-lit leather */ --paper: #f3e4cc; /* mural cream — inverted use */ /* Type — Bemelmans mural cream on walnut */ --ink: #f3e4cc; /* mural cream */ --ink-bright: #ffeed4; /* gilded cream */ --ink-dim: #b89773; /* aged paper */ --ink-faint: #8a6f54; /* faded ink, AA 5.6:1 */ /* Hairlines — leather seam + gold dust */ --rule: #5a3e26; /* leather seam */ --rule-strong: #7a563a; /* highlighted seam */ --rule-faint: rgba(201, 161, 77, 0.18); --rule-gold: rgba(201, 161, 77, 0.50); /* Accents — 24kt gold leaf system */ --brass-light: #d9b46a; /* light gold */ --accent: #c9a14d; /* 24kt gold leaf */ --accent-2: #d9b46a; /* light gold echo */ --accent-soft: #5a3a1a; /* gold shadow */ --brass: #c9a14d; /* gold leaf */ --brass-deep: #8a6a2a; /* dark gold */ --gold-foil: linear-gradient(135deg, #d9b46a 0%, #c9a14d 30%, #8a6a2a 60%, #e8c876 100%); /* Mood — oxblood banquette + banquette green */ --maraschino: #8a2438; /* oxblood leather */ --maraschino-2: #a3334a; /* lit oxblood */ --burgundy: #5a141f; /* deep oxblood */ --bottle: #1f3a2c; /* banquette green */ --bottle-2: #3a5e4a; /* banquette green lifted */ --absinthe: #c9a14d; /* gold */ --copper: #b87333; /* warm copper */ --rose-gold: #c9a081; /* rose gold */ --neon-amber: #d4a534; /* warm amber */ --red: #a3334a; /* oxblood */ /* Spirit-coded category bands — Bemelmans retune. Spirits filtered through warm gold candlelight; whiskey amber blends with palette gold, cool spirits get a slight warm-shift so they don't feel out of place. */ --spirit-whiskey: #d4a14d; /* deep amber, palette match */ --spirit-gin: #6ba88a; /* muted emerald */ --spirit-rum: #c9925a; /* caramel */ --spirit-agave: #7da260; /* muted palm */ --spirit-brandy: #c97c4a; /* rose-gold */ --spirit-vodka: #a8b8c4; /* warm-shifted silver */ --spirit-liqueur: #a874b8; /* warm violet */ --spirit-aperitif: #d85a72; /* cabaret pink */ --spirit-vermouth: #c45a72; /* cherry rose */ --spirit-wine: #a3334a; /* oxblood, palette match */ --spirit-multi: #d9b46a; /* light gold */ /* Display face + geometry */ --serif-display: "Bodoni 72", "Didot", "Hoefler Text", "Iowan Old Style", Georgia, serif; --radius: 2px; /* embossed-leather minimal */ /* Ornament — gilded fleuron (book ornament) */ --ornament-divider: "❦"; --ornament-section: "❦"; --dropcap-color: #c9a14d; /* gold leaf */ --dropcap-shadow: 0 1px 0 rgba(0,0,0,0.4); /* v66 — illuminated initial frame. Bemelmans gets a gilded box: thin gold-leaf border, subtle inset gold tint, soft 2px radius. Antique-library plate. No corner glyphs (the frame is the statement). */ --dropcap-frame-bg: rgba(201, 161, 77, 0.08); --dropcap-frame-border: 1px solid rgba(201, 161, 77, 0.55); --dropcap-frame-radius: 2px; --dropcap-ornament-pre: ""; --dropcap-ornament-post: ""; /* Atmosphere RGB tokens — used by body radial-gradient glow. Space- separated for the modern rgb(var(--x) / α) syntax. */ --accent-rgb: 201, 161, 77; /* gold leaf */ --maraschino-rgb:138, 36, 56; /* oxblood */ --brass-rgb: 201, 161, 77; /* gold leaf */ --bottle-rgb: 31, 58, 44; /* banquette green */ /* Token alias for "ink-on-accent" — text laid over an --accent fill. Theme-specific because each accent has different luminance. Bemelmans gold leaf is bright, so dark walnut ink reads well. */ --on-accent: #2a1c14; /* walnut */ /* v65 — printed spec card edition name. Mirrors the share-card byline ("from the Bemelmans edition · spec.app") so a printed recipe and a shared image read as the same artifact. */ --print-edition-name: "Bemelmans"; /* v74 — section-head plate. Each binding gets a distinct ornamental plate above section h4 ("Ingredients", "Method", "Notes"). Bemelmans gets a gilded fleuron in a thin gold-leaf box. */ --section-plate-glyph: "❦"; --section-plate-bg: rgba(201, 161, 77, 0.10); --section-plate-border: 1px solid rgba(201, 161, 77, 0.45); --section-plate-radius: 2px; --section-plate-color: #c9a14d; /* v74 — page-edge gilding. Thin 2px line on the right edge of cocktail cards — the gilded edge of a leather-bound book. */ --page-edge-color: rgba(201, 161, 77, 0.55); /* v74 — per-binding background texture. Painted into body::before beneath the vignette. Bemelmans gets fine fractal grain in warm gold (leather pebbling). 4.5% alpha — felt, not seen. */ --texture-image: url("data:image/svg+xml;utf8,"); --texture-size: 180px 180px; } /* ============================================================ THEME — Connaught Mayfair, London. Silver salon. Silver leaf ceiling, mirrored midnight panels, Bristol blue martini cart, polished marble bar, platinum geometric walls. Art Deco refined — sharp geometry, restrained ornament. ============================================================ */ [data-theme="connaught"] { /* Surfaces — midnight + steel */ --bg: #131826; /* midnight */ --bg-2: #1d2538; /* lifted midnight */ --bg-deep: #08101d; /* deepest mirror shadow */ --surface: #2c374f; /* steel panel */ --surface-2: #36425b; /* lit steel */ --surface-3: #485570; /* polished slate */ --paper: #f5f7fa; /* mirror white */ /* Type — silver moonlight on midnight */ --ink: #e8ebef; /* silver moonlight */ --ink-bright: #f5f7fa; /* mirror white */ --ink-dim: #8b95a8; /* cool slate */ --ink-faint: #6b7588; /* faded silver, AA 5.5:1 */ /* Hairlines — platinum hairlines, Deco parallel rules */ --rule: #2c374f; /* slate rule */ --rule-strong: #485570; /* polished slate */ --rule-faint: rgba(184, 192, 208, 0.18); --rule-gold: rgba(184, 192, 208, 0.50); /* "gold" = platinum here */ /* Accents — platinum + Bristol blue */ --brass-light: #d0d8e4; /* light platinum */ --accent: #b8c0d0; /* platinum */ --accent-2: #d0d8e4; /* light platinum echo */ --accent-soft: #2c374f; /* slate shadow */ --brass: #b8c0d0; /* platinum */ --brass-deep: #6b7588; /* deep platinum */ --gold-foil: linear-gradient(135deg, #d0d8e4 0%, #b8c0d0 30%, #6b7588 60%, #e8ebef 100%); /* Mood — Bristol blue + jade */ --maraschino: #2a4565; /* Bristol blue (martini cart) */ --maraschino-2: #3a5a82; /* lit Bristol */ --burgundy: #1a2c45; /* deep Bristol */ --bottle: #4a5f6e; /* deep teal-grey */ --bottle-2: #6b8499; /* powder blue */ --absinthe: #b8c0d0; /* platinum */ --copper: #8b95a8; /* cool copper */ --rose-gold: #b8a8a0; /* cool rose */ --neon-amber: #c8b896; /* dim amber */ --red: #b34555; /* deep ruby (jewel tone) */ /* Spirit-coded bands — Connaught retune. Cooler tones so spirits register against the silver/midnight bg without feeling warm-misplaced. Whiskey gets a slightly cooler amber; vodka leans bright silver. */ --spirit-whiskey: #d8b056; /* cool amber */ --spirit-gin: #5db89a; /* emerald */ --spirit-rum: #d9a86a; /* honey */ --spirit-agave: #7eb46a; /* palm */ --spirit-brandy: #c97c4a; /* rose-gold */ --spirit-vodka: #c0d0e0; /* bright silver, palette match */ --spirit-liqueur: #a874c8; /* violet */ --spirit-aperitif: #d85a82; /* pink */ --spirit-vermouth: #c8607a; /* rose pink */ --spirit-wine: #b34555; /* deep cherry */ --spirit-multi: #b8c0d0; /* platinum, palette match */ /* Display face + geometry */ --serif-display: "Didot", "Bodoni 72", "Hoefler Text", "Iowan Old Style", Georgia, serif; --radius: 0; /* sharp Deco geometry */ /* Ornament — Deco lozenge */ --ornament-divider: "◇"; --ornament-section: "◇"; --dropcap-color: #b8c0d0; /* platinum */ --dropcap-shadow: 0 1px 0 rgba(0,0,0,0.5); /* v66 — illuminated initial frame. Connaught gets a stepped Deco lozenge: zero-radius square, sharp platinum stroke, with an outset platinum outline + offset to read as a double-rule stencil (sharp Deco geometry — diamond, not circle). No corner glyphs (the geometry IS the ornament). */ --dropcap-frame-bg: rgba(184, 192, 208, 0.06); --dropcap-frame-border: 1px solid rgba(184, 192, 208, 0.65); --dropcap-frame-radius: 0; --dropcap-ornament-pre: ""; --dropcap-ornament-post: ""; /* Atmosphere RGB tokens — silver glow + Bristol blue counter-tint */ --accent-rgb: 184, 192, 208; /* platinum */ --maraschino-rgb:42, 69, 101; /* Bristol blue */ --brass-rgb: 184, 192, 208; /* platinum */ --bottle-rgb: 74, 95, 110; /* deep slate */ /* Ink-on-platinum — platinum is light, so dark midnight reads well */ --on-accent: #131826; /* midnight */ /* v65 — printed spec card edition name. */ --print-edition-name: "Connaught"; /* v74 — section-head plate. Connaught gets a sharp Deco lozenge: zero-radius square, platinum stroke, double-rule stencil. */ --section-plate-glyph: "◇"; --section-plate-bg: rgba(184, 192, 208, 0.08); --section-plate-border: 1px solid rgba(184, 192, 208, 0.55); --section-plate-radius: 0; --section-plate-color: #d0d8e4; /* v74 — page-edge gilding. Platinum hairline on the right edge of cocktail cards — the polished edge of a silver-leaf book. */ --page-edge-color: rgba(184, 192, 208, 0.55); /* v74 — per-binding background texture. Connaught gets sharp Deco pinstripes — repeating diagonal platinum lines on transparent. The silver-salon mirror polish in a wallpaper key. */ --texture-image: url("data:image/svg+xml;utf8,"); --texture-size: 32px 32px; } /* ============================================================ THEME — Maison Premiere Williamsburg, Brooklyn. Absinthe garden. Belle Époque + New Orleans absinthe house. Antique brass copper-drip fountain, marble subway tile, oxblood leather banquettes, herb garden, dim warm lamps. James Beard winner. ============================================================ */ [data-theme="maison-premiere"] { /* Surfaces — deep absinthe sage */ --bg: #2b3a34; /* deep sage */ --bg-2: #36473e; /* lifted sage */ --bg-deep: #1a2520; /* foliage shadow */ --surface: #475a4f; /* foliage */ --surface-2: #526a5b; /* lit foliage */ --surface-3: #647e6c; /* top-lit leaves */ --paper: #faf3e0; /* parchment */ /* Type — parchment cream on sage */ --ink: #f0e8d4; /* parchment cream */ --ink-bright: #faf3e0; /* chalk */ --ink-dim: #a89a78; /* aged paper */ --ink-faint: #80755a; /* faded ink, AA 5.4:1 */ /* Hairlines — antique brass with herb-leaf accents */ --rule: #475a4f; /* foliage rule */ --rule-strong: #647e6c; /* foliage rule lifted */ --rule-faint: rgba(200, 152, 88, 0.18); --rule-gold: rgba(200, 152, 88, 0.50); /* Accents — antique brass + oxblood */ --brass-light: #d9b078; /* light brass */ --accent: #c89858; /* antique brass */ --accent-2: #d9b078; /* light brass echo */ --accent-soft: #4a3a1c; /* brass shadow */ --brass: #c89858; /* antique brass */ --brass-deep: #8a6a2a; /* dark brass */ --gold-foil: linear-gradient(135deg, #d9b078 0%, #c89858 30%, #8a6a2a 60%, #e8c498 100%); /* Mood — oxblood banquette + fresh herb */ --maraschino: #99443a; /* oxblood */ --maraschino-2: #b85a4a; /* lit oxblood */ --burgundy: #6a2a24; /* deep oxblood */ --bottle: #6b8856; /* fresh herb */ --bottle-2: #88a572; /* lifted herb */ --absinthe: #b8a878; /* champagne */ --copper: #b07845; /* copper drip */ --rose-gold: #c89878; /* rose gold */ --neon-amber: #c8a068; /* champagne amber */ --red: #99443a; /* oxblood, palette match */ /* Spirit-coded bands — Maison Premiere retune. Botanical palette: gin and agave lean herbaceous, whiskey takes palette brass, wine is oxblood (palette match). */ --spirit-whiskey: #c89858; /* brass amber, palette match */ --spirit-gin: #6db89a; /* bright herb-emerald */ --spirit-rum: #d4a868; /* honey caramel */ --spirit-agave: #80c280; /* fresh sage */ --spirit-brandy: #c87850; /* rose-gold */ --spirit-vodka: #a8c0b8; /* silver-green */ --spirit-liqueur: #a874b8; /* amethyst */ --spirit-aperitif: #c45c75; /* oxblood pink */ --spirit-vermouth: #a8505f; /* bordeaux */ --spirit-wine: #99443a; /* oxblood, palette match */ --spirit-multi: #b8a878; /* champagne, palette match */ /* Display face + geometry */ --serif-display: "Big Caslon", "Bodoni 72", "Hoefler Text", "Iowan Old Style", Georgia, serif; --radius: 2px; /* lithograph minimal */ /* Ornament — laurel flower */ --ornament-divider: "❀"; --ornament-section: "❀"; --dropcap-color: #c89858; /* antique brass */ --dropcap-shadow: 0 1px 0 rgba(0,0,0,0.4); /* v66 — illuminated initial frame. Maison Premiere gets a botanical wreath: soft brass border, gentle 6px radius (rounded vine), with laurel-flower glyphs (❀) flanking the cap top-left and bottom-right — Belle Époque flourish. */ --dropcap-frame-bg: rgba(200, 152, 88, 0.07); --dropcap-frame-border: 1px solid rgba(200, 152, 88, 0.55); --dropcap-frame-radius: 6px; --dropcap-ornament-pre: "❀"; --dropcap-ornament-post: "❀"; /* Atmosphere RGB tokens — brass glow + oxblood + herb counter-tint */ --accent-rgb: 200, 152, 88; /* antique brass */ --maraschino-rgb:153, 68, 58; /* oxblood */ --brass-rgb: 200, 152, 88; /* antique brass */ --bottle-rgb: 107, 136, 86; /* fresh herb */ /* Ink-on-brass — brass is medium-light, so deep sage reads well */ --on-accent: #2b3a34; /* deep sage */ /* v65 — printed spec card edition name. */ --print-edition-name: "Maison Premiere"; /* v74 — section-head plate. Maison Premiere gets a botanical wreath: laurel flower in a softly-rounded brass cartouche. Belle Époque. */ --section-plate-glyph: "❀"; --section-plate-bg: rgba(200, 152, 88, 0.10); --section-plate-border: 1px solid rgba(200, 152, 88, 0.50); --section-plate-radius: 6px; --section-plate-color: #d9b078; /* v74 — page-edge gilding. Antique brass line on the right edge of cocktail cards — the brass-trimmed edge of a Belle Époque album. */ --page-edge-color: rgba(200, 152, 88, 0.55); /* v74 — per-binding background texture. Maison Premiere gets a botanical hatch: tiny brass laurel leaves arranged in a four-point diamond grid. Wallpaper of a Williamsburg absinthe garden. */ --texture-image: url("data:image/svg+xml;utf8,"); --texture-size: 84px 84px; } /* ============================================================ THEME — Smuggler's Cove San Francisco. Rum den / ship's hold. Three-level themed bar (rum den, shipwreck, navy galleon). Dark wood walls, brass nautical fittings, rope, parchment, candlelight. Modern tiki authority — tasteful, not kitsch. This is the spiritual successor to the v54 Tiki Sunset palette. ============================================================ */ [data-theme="smugglers-cove"] { /* Surfaces — nautical teal-wood */ --bg: #0f2230; /* deep nautical teal */ --bg-2: #1a3142; /* lifted teal-wood */ --bg-deep: #061521; /* deepest hold shadow */ --surface: #2a4555; /* foliage teal */ --surface-2: #34556a; /* lit teal */ --surface-3: #426a82; /* top-lit teal */ --paper: #fff2d8; /* candle cream */ /* Type — rum-soaked parchment on hold-dark */ --ink: #f3e3c5; /* rum-soaked parchment */ --ink-bright: #fff2d8; /* candle cream */ --ink-dim: #c4ad88; /* aged sail */ --ink-faint: #957f5e; /* faded ink, AA 5.5:1 */ /* Hairlines — rum amber rules */ --rule: #2a4555; /* foliage rule */ --rule-strong: #426a82; /* lifted rule */ --rule-faint: rgba(214, 132, 61, 0.20); --rule-gold: rgba(212, 165, 52, 0.50); /* Accents — rum amber + sunset coral + doubloon gold */ --brass-light: #e89a55; /* light amber */ --accent: #d6843d; /* rum amber */ --accent-2: #e89a55; /* light amber echo */ --accent-soft: #5a3018; /* amber shadow */ --brass: #d4a534; /* doubloon gold */ --brass-deep: #8a6a1a; /* dark gold */ --gold-foil: linear-gradient(135deg, #e89a55 0%, #d6843d 30%, #d4a534 60%, #f0b878 100%); /* Mood — sunset coral + palm green */ --maraschino: #c54a3f; /* sunset coral */ --maraschino-2: #d8604a; /* lit coral */ --burgundy: #6b1a1a; /* deep ember */ --bottle: #2d6e60; /* palm green */ --bottle-2: #4a8a76; /* lifted palm */ --absinthe: #d4a534; /* doubloon gold */ --copper: #d6843d; /* rum amber */ --rose-gold: #e89a78; /* rose gold */ --neon-amber: #d4a534; /* doubloon */ --red: #c54a3f; /* coral, palette match */ /* Spirit-coded bands — Smuggler's Cove retune. Rum gets the richest treatment (this is the rum den), spirits feel candlelit + sun-baked. */ --spirit-whiskey: #d6843d; /* rum amber, palette match */ --spirit-gin: #5db89a; /* emerald */ --spirit-rum: #e8b56a; /* golden caramel — featured spirit */ --spirit-agave: #7cc068; /* palm */ --spirit-brandy: #d8704a; /* rose-gold */ --spirit-vodka: #a8c4d8; /* silver-blue */ --spirit-liqueur: #b06ac8; /* violet */ --spirit-aperitif: #d85a72; /* coral pink */ --spirit-vermouth: #d8607a; /* cherry rose */ --spirit-wine: #c0506a; /* cherry */ --spirit-multi: #d4a534; /* doubloon, palette match */ /* Display face + geometry */ --serif-display: "Bodoni 72", "Didot", "Hoefler Text", "Iowan Old Style", Georgia, serif; --radius: 3px; /* weathered wood softness */ /* Ornament — compass star */ --ornament-divider: "✦"; --ornament-section: "✦"; --dropcap-color: #d6843d; /* rum amber */ --dropcap-shadow: 0 1px 0 rgba(0,0,0,0.5); /* v66 — illuminated initial frame. Smuggler's Cove gets a compass-rose stamp: weathered amber border, full pill radius (50%) so the frame reads as a ship's seal/oval, with four-point compass-star glyphs (✦) at top-left and bottom-right. */ --dropcap-frame-bg: rgba(214, 132, 61, 0.10); --dropcap-frame-border: 1.5px solid rgba(214, 132, 61, 0.60); --dropcap-frame-radius: 50%; --dropcap-ornament-pre: "✦"; --dropcap-ornament-post: "✦"; /* Atmosphere RGB tokens — rum amber sun + sunset coral + palm tints */ --accent-rgb: 214, 132, 61; /* rum amber */ --maraschino-rgb:197, 74, 63; /* sunset coral */ --brass-rgb: 212, 165, 52; /* doubloon gold */ --bottle-rgb: 45, 110, 96; /* palm green */ /* Ink-on-amber — rum amber is bright/warm, deep teal reads well */ --on-accent: #0f2230; /* nautical teal */ /* v65 — printed spec card edition name. */ --print-edition-name: "Smuggler's Cove"; /* v74 — section-head plate. Smuggler's Cove gets a compass medallion: four-point compass star in a weathered amber oval (pill radius). */ --section-plate-glyph: "✦"; --section-plate-bg: rgba(214, 132, 61, 0.12); --section-plate-border: 1px solid rgba(214, 132, 61, 0.55); --section-plate-radius: 50%; --section-plate-color: #e89a55; /* v74 — page-edge gilding. Doubloon gold on the right edge of cocktail cards — the brass-bound edge of a ship's logbook. */ --page-edge-color: rgba(212, 165, 52, 0.60); /* v74 — per-binding background texture. Smuggler's Cove gets weathered wood grain: anisotropic turbulence stretched horizontally, tinted rum amber. Ship's hold planking, very low alpha. */ --texture-image: url("data:image/svg+xml;utf8,"); --texture-size: 400px 140px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } /* Atmosphere — theme-driven gradient glow. Each theme contributes its own accent tint at the top and mood tints at the bottom; the bg fills the field. v54 baked Tiki Sunset coral/amber/pink into hardcoded literals here, which painted every theme orange even after switching. v55 routes the glow through theme tokens so Bemelmans gets gold-leaf ceiling glow, Connaught gets silver mirror, Maison Premiere gets brass + herb, Smuggler's Cove gets rum-amber + palm. The accent-rgb / maraschino-rgb / bottle-rgb tokens are defined per theme below. */ body { position: relative; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--maraschino-rgb), 0.07) 40%, transparent 70%), radial-gradient(ellipse 70% 50% at 30% 100%, rgba(var(--brass-rgb), 0.10) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 70% 100%, rgba(var(--bottle-rgb), 0.10) 0%, transparent 60%), var(--bg); } body::before { /* Subtle paper grain — neutral white tint at very low alpha, so the texture reads on every theme without imposing a warm-cream cast. v74: stacks a per-binding texture beneath the paper grain. The texture is themed (leather / pinstripe / botanical / wood), declared via --texture-image + --texture-size per theme block. Each binding now feels like a different surface, not just a different palette over the same canvas. */ content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"), var(--texture-image, none); background-size: 240px 240px, var(--texture-size, 200px 200px); background-repeat: repeat, repeat; pointer-events: none; z-index: 0; } body::after { /* Vignette — neutral darken at the edges, spotlight at center */ content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 0; } #app { position: relative; z-index: 1; } body { min-height: 100vh; min-height: 100dvh; } input, textarea, select, button { font-family: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } /* ============================================================================ v54 — Canonical .input style. Every ,

, and <select class="input"> uses this. Without it, iOS
   Safari (and a few other browsers) fall back to a white background with
   pale text — nearly unreadable on the deep teal canvas. This block also
   defeats Chrome's yellow autofill paint and gives focus a visible accent.
   ============================================================================ */
.input {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  width: 100%;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
  -webkit-text-fill-color: var(--ink);  /* iOS Safari ignores `color` on
                                           inputs without this */
  caret-color: var(--accent);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  opacity: 1;
}
.input:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
textarea.input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}
select.input {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(-45deg, transparent 50%, var(--ink-faint) 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
/* Defeat Chrome / Edge autofill yellow paint */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 30px var(--bg-2) inset !important;
  caret-color: var(--accent);
  transition: background-color 5000s ease-in-out 0s;
}
/* Number inputs — strip the spinner buttons; bartenders use the keyboard */
.input[type=number]::-webkit-inner-spin-button,
.input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input[type=number] { -moz-appearance: textfield; }
/* Date / time inputs — keep cursor visible against dark background */
.input[type=date],
.input[type=time],
.input[type=datetime-local] {
  color-scheme: dark;
}

a { color: var(--accent-2); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   APP SHELL
   ============================================================ */
#app {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  padding-top: var(--safe-top);
}

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: var(--hairline) solid var(--rule);
  background: linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 3px 0 var(--rule-faint), 0 8px 24px rgba(0,0,0,0.3);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 32px; height: 32px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  background: radial-gradient(circle at 30% 30%, rgba(232, 200, 120, 0.2), transparent 60%);
  color: var(--accent-2);
  font-size: 17px; line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px rgba(199, 156, 79, 0.12), inset 0 1px 0 rgba(232, 200, 120, 0.25);
}
.brand-name {
  font-family: var(--serif-display); font-size: 18px;
  letter-spacing: 0.32em; font-weight: 400;
  color: var(--accent-2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

.tabs { display: none; gap: 22px; align-items: center; }
.tab {
  color: var(--ink-dim); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 4px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-settings {
  padding: 12px;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
}
.tab-settings:hover { color: var(--accent); }
.tab-settings svg { display: block; }
.tab-settings:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px; border-radius: 6px;
}

.card, .tag-chip { -webkit-touch-callout: none; }

@media (min-width: 720px) {
  .tabs { display: flex; }
}

/* ============================================================
   BOTTOM TABS (mobile)
   ============================================================ */
.bottom-tabs {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(10, 9, 8, 0.96);
  backdrop-filter: blur(12px);
  border-top: var(--hairline) solid var(--rule);
  padding-bottom: var(--safe-bottom);
  z-index: 10;
}
.bottom-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0;
  color: var(--ink-faint);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color .15s;
}
.bottom-tab svg { width: 22px; height: 22px; transition: transform .15s; }
.bottom-tab.active { color: var(--accent); }
.bottom-tab.active svg { transform: scale(1.06); }

@media (min-width: 720px) { .bottom-tabs { display: none; } }

/* ============================================================
   VIEW
   ============================================================ */
.view {
  flex: 1;
  padding: 18px 22px 110px;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .view { padding-bottom: 40px; }
}

.view-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 6px 0 24px;
  padding: 8px 0 16px;
  border-bottom: 1.5px solid var(--accent);
  position: relative;
}
.view-header::before {
  /* Tiny diamond ornament above the title — Art Deco menu marker */
  content: "◆";
  position: absolute;
  top: -4px; left: 0;
  color: var(--accent);
  font-size: 8px;
  letter-spacing: 8px;
}
.view-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--rule-gold);
}
.view-title {
  font-family: var(--serif-display); font-size: 44px; font-weight: 400;
  margin: 8px 0 0; letter-spacing: 0.01em; line-height: 1;
  color: var(--ink-bright);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 40px rgba(216, 144, 89, 0.18);
}
.view-actions { display: flex; gap: 8px; }

/* ============================================================
   SEARCH
   ============================================================ */
.search { position: relative; margin: 0 0 18px; }
.search input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 999px;
  padding: 12px 16px 12px 40px;
  font-size: 15px; color: var(--ink);
  font-family: var(--sans);
  letter-spacing: 0.005em;
  transition: border-color .15s, background .15s;
}
.search input::placeholder { color: var(--ink-faint); font-style: italic; }
.search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.search::before {
  content: ""; position: absolute; left: 14px; top: 50%;
  width: 18px; height: 18px; transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
}

/* ============================================================
   LISTS — menu-style line items
   ============================================================ */
.list { display: flex; flex-direction: column; gap: 0; }
.card {
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule);
  padding: 16px 4px 16px 14px;
  display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer;
  transition: background .2s, padding .2s, transform .15s;
  border-radius: 0;
  overflow: hidden;
}
.card:first-child { border-top: var(--hairline) solid var(--rule); }
/* Spirit-coded color band along the left edge — set via inline style on element. */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 4px;
  background: linear-gradient(180deg,
    var(--card-spirit-color, var(--rule-strong)) 0%,
    var(--card-spirit-color, var(--rule-strong)) 60%,
    color-mix(in srgb, var(--card-spirit-color, #555) 55%, black) 100%
  );
  opacity: 0.85;
  transition: opacity .2s, width .2s, box-shadow .25s;
  border-radius: 0 2px 2px 0;
}
.card:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--card-spirit-color, var(--accent)) 12%, transparent) 0%,
      color-mix(in srgb, var(--card-spirit-color, var(--accent)) 4%, transparent) 50%,
      transparent 100%);
  padding-left: 24px;
}
.card:hover::before {
  opacity: 1;
  width: 5px;
  box-shadow: 0 0 14px var(--card-spirit-color, transparent), 0 0 4px var(--card-spirit-color, transparent);
}
.card:active { transform: scale(0.998); }

/* Numbered cocktail prefix — small italic count above the title */
.card-num {
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--brass);
  font-size: 11px;
  letter-spacing: 0.32em;
  margin-bottom: 4px;
  display: block;
  text-transform: uppercase;
}

/* Bottle silhouette card thumbnail — replaces monogram for cocktail cards.
   Background is darker than --surface-2 so the bright bottle silhouettes
   pop crisply against the dark interior of the "case." */
.bottle-thumb {
  width: 56px; height: 68px;
  border-radius: 4px;
  border: 1px solid var(--rule-strong);
  /* v55: was hardcoded teal #0a1620/#050b13 — now follows theme via
     --bg-deep + --bg, so the bottle silhouette plate inherits the
     book-spine / mirror / foliage / hold mood per theme. */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 245, 221, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 221, 0.06),
    inset 0 -2px 10px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}
.bottle-thumb::after {
  /* Subtle highlight edge — like a glass reflection on the bottle */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, rgba(255, 245, 221, 0.08), transparent);
  pointer-events: none;
}
.bottle-silhouette {
  width: 38px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.bottle-silhouette svg {
  width: 100%; height: 100%; display: block;
  stroke-width: 0.6;
  opacity: 0.92;
}

.card-thumb {
  width: 56px; height: 56px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 245, 221, 0.10), transparent 60%),
    var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-display); font-style: italic; font-size: 28px;
  color: var(--accent-2);
  flex-shrink: 0;
  background-size: cover; background-position: center;
  border: 1px solid var(--rule-strong);
  letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255,245,221,0.06), 0 2px 6px rgba(0,0,0,0.5);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.card-body { flex: 1; min-width: 0; }
.card-title {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  margin: 0 0 4px; line-height: 1.2;
  color: var(--ink-bright);
  letter-spacing: 0.005em;
}
.card-meta {
  font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500;
}
.card-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
}

.tag {
  display: inline-block; padding: 3px 10px;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
  font-size: 10px; color: var(--ink-dim);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500;
}
.tag.score {
  background: var(--accent-soft); color: var(--accent-2);
  border-color: var(--accent);
  font-family: var(--serif); font-size: 12px;
  padding: 2px 10px;
  letter-spacing: 0.04em; text-transform: none;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
  text-align: center; padding: 80px 20px; color: var(--ink-dim);
}
.empty h3 {
  font-family: var(--serif-display); font-size: 24px;
  color: var(--ink); font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: 0.005em;
}
.empty p {
  margin: 0 0 22px; font-size: 15px;
  font-style: italic; line-height: 1.55;
}

/* ============================================================
   SECTION HEADERS — letterpress style
   ============================================================ */
.section-header {
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  margin: 26px 0 12px;
  padding: 0 4px 6px;
  border-bottom: var(--hairline) solid var(--rule-faint);
  font-weight: 600;
}
.section-header:first-child { margin-top: 0; }

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.chip-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 0 4px 16px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center;
  padding: 11px 18px; min-height: 44px;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
  font-size: 12px; color: var(--ink-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0; white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.chip.active {
  border-color: var(--accent);
  color: var(--ink-bright);
  background: linear-gradient(180deg, rgba(255, 140, 90, 0.30) 0%, rgba(255, 77, 109, 0.10) 100%);
  letter-spacing: 0.1em;
  box-shadow:
    0 0 0 1px rgba(255, 140, 90, 0.45),
    0 0 16px rgba(255, 140, 90, 0.30),
    inset 0 1px 0 rgba(255, 181, 133, 0.30);
  text-shadow: 0 0 10px rgba(255, 140, 90, 0.55);
}

/* ============================================================
   SUB-TABS (Encyclopedia)
   ============================================================ */
.sub-tabs {
  display: flex; gap: 14px;
  margin: 0 0 18px;
  border-bottom: var(--hairline) solid var(--rule-strong);
}
.sub-tab {
  background: transparent; border: 0;
  color: var(--ink-dim);
  font-size: 12px;
  padding: 10px 6px;
  font-family: inherit;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  min-height: 44px;
}
.sub-tab:hover { color: var(--ink); }
.sub-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================================
   SPIRIT SELECT (form)
   ============================================================ */
.spirit-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-md);
  padding: 12px 32px 12px 14px;
  font-size: 15px; color: var(--ink);
  font-family: inherit;
  width: 100%; box-sizing: border-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b9b09a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 10px;
}
.spirit-select:focus { outline: none; border-color: var(--accent); }

.filter-summary {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 4px 12px;
  font-style: italic;
}

/* ============================================================
   KEY FEATURES (Encyclopedia / Tools detail)
   ============================================================ */
.key-features { list-style: none; padding: 0; margin: 0; }
.key-features li {
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--rule);
}
.key-features li:last-child { border-bottom: 0; }
.key-features li::before {
  content: "·";
  color: var(--accent);
  position: absolute; left: 6px; top: 4px;
  font-size: 24px; font-weight: 700; line-height: 1;
}

/* ============================================================
   THUMBNAILS
   ============================================================ */
.monogram-thumb {
  font-family: var(--serif-display); font-style: italic;
  font-weight: 400;
  font-size: 30px; line-height: 1;
  border: var(--hairline) solid rgba(255, 255, 255, 0.06);
  letter-spacing: 0.02em;
  /* Default tint — overridden by [data-category-tint] below. */
  color: var(--accent-2);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-2) 28%, var(--bg)),
      color-mix(in srgb, var(--accent-2) 12%, var(--bg-deep)));
}
/* Encyclopedia category tints — derived from --spirit-* tokens so the
   monogram cards share a hue family with the Tiki Sunset palette
   (coral / peach / teal). Each tint reads its FG from var(--spirit-X)
   and builds the BG gradient via color-mix() against --bg / --bg-deep,
   keeping the ramp dark enough for the cream monogram to pop. */
.monogram-thumb[data-category-tint] {
  color: var(--cat-tint-fg, var(--accent-2));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cat-tint-fg, var(--accent-2)) 32%, var(--bg)),
    color-mix(in srgb, var(--cat-tint-fg, var(--accent-2)) 14%, var(--bg-deep)));
}
.monogram-thumb[data-category-tint="whiskey"]  { --cat-tint-fg: var(--spirit-whiskey);  }
.monogram-thumb[data-category-tint="gin"]      { --cat-tint-fg: var(--spirit-gin);      }
.monogram-thumb[data-category-tint="rum"]      { --cat-tint-fg: var(--spirit-rum);      }
.monogram-thumb[data-category-tint="agave"]    { --cat-tint-fg: var(--spirit-agave);    }
.monogram-thumb[data-category-tint="brandy"]   { --cat-tint-fg: var(--spirit-brandy);   }
.monogram-thumb[data-category-tint="vodka"]    { --cat-tint-fg: var(--spirit-vodka);    }
.monogram-thumb[data-category-tint="liqueur"]  { --cat-tint-fg: var(--spirit-liqueur);  }
.monogram-thumb[data-category-tint="aperitif"] { --cat-tint-fg: var(--spirit-aperitif); }
.monogram-thumb[data-category-tint="vermouth"] { --cat-tint-fg: var(--spirit-vermouth); }
.monogram-thumb[data-category-tint="wine"]     { --cat-tint-fg: var(--spirit-wine);     }
.monogram-thumb[data-category-tint="multi"]    { --cat-tint-fg: var(--spirit-multi);    }
.monogram-thumb[data-category-tint="neutral"]  { --cat-tint-fg: var(--ink-faint);       }
.tool-thumb {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  border: var(--hairline) solid var(--rule);
}
.tool-thumb svg { width: 32px; height: 32px; display: block; }

.tool-detail-icon {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: var(--hairline) solid var(--rule);
  border-radius: 4px;
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
}
.tool-detail-icon svg { width: 50px; height: 50px; display: block; }

/* ============================================================
   CARD TITLE ROW (favorites + badge)
   ============================================================ */
.card-title-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card-title-row .card-title { margin: 0; }
.card-fav-mark {
  color: var(--accent); font-size: 14px; line-height: 1;
}
.card-badge {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent;
  color: var(--accent-2);
  padding: 3px 8px;
  border-radius: 2px;
  border: var(--hairline) solid var(--accent);
  font-weight: 600;
  line-height: 1.2;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-md);
  padding: 11px 20px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--sans);
  cursor: pointer;
  transition: background .15s, transform .1s;
  min-height: 44px;
}
.btn:hover { background: var(--accent-2); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 3px;
}
.btn-ghost {
  background: transparent;
  color: var(--ink-dim);
  border: var(--hairline) solid var(--rule-strong);
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: transparent;
}
.btn-danger {
  background: transparent;
  color: var(--red);
  border: var(--hairline) solid var(--red);
}
.btn-danger:hover { background: var(--red); color: var(--ink); }
.btn-sm { padding: 7px 14px; font-size: 11px; min-height: 36px; }
.btn-icon {
  width: 40px; height: 40px;
  padding: 0; justify-content: center;
}
.btn svg { width: 16px; height: 16px; }

/* ============================================================
   FAB
   ============================================================ */
.fab {
  position: fixed;
  right: 22px;
  bottom: calc(80px + var(--safe-bottom));
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brass-light) 0%, var(--accent) 60%, var(--brass-deep) 100%);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 1px rgba(232, 200, 120, 0.4),
    0 0 18px rgba(199, 156, 79, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 245, 221, 0.4),
    inset 0 -2px 4px rgba(111, 79, 31, 0.4);
  z-index: 8;
  transition: transform .15s, box-shadow .2s;
  /* Welcome flourish only — fires twice on view-mount and stops, instead of
     pulsing forever (audit flagged the constant glow as distracting + GPU
     drain on long-lived pages). */
  animation: fab-glow 3s ease-in-out 2;
}
@keyframes fab-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(232, 200, 120, 0.4),
      0 0 18px rgba(199, 156, 79, 0.35),
      0 8px 28px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 245, 221, 0.4),
      inset 0 -2px 4px rgba(111, 79, 31, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(232, 200, 120, 0.55),
      0 0 26px rgba(199, 156, 79, 0.55),
      0 10px 32px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 245, 221, 0.5),
      inset 0 -2px 4px rgba(111, 79, 31, 0.4);
  }
}
.fab:hover {
  transform: translateY(-1px) scale(1.04);
}
.fab:active { transform: scale(0.95); }
.fab svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); }

@media (min-width: 720px) {
  .fab { bottom: 32px; }
}

/* ============================================================
   SHEETS
   ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex; align-items: stretch; justify-content: center;
  animation: fade-in .2s ease;
}
@media (min-width: 720px) {
  .sheet-backdrop { align-items: flex-start; padding: 60px 20px; }
}
.sheet {
  background: var(--bg);
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column;
  animation: sheet-up .25s cubic-bezier(.2,.8,.2,1);
  max-height: 100dvh;
  overflow: hidden;
  /* Subtle paper-grain for depth on the sheet too */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0 0.31  0 0 0 0.018 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
@media (min-width: 720px) {
  .sheet {
    max-height: calc(100dvh - 120px);
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--rule-strong);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
}
.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 22px 18px;
  border-bottom: 1.5px solid var(--accent);
  flex-shrink: 0;
  padding-top: calc(24px + var(--safe-top));
  position: relative;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, rgba(199,156,79,0.10), transparent 70%),
    var(--bg);
}
.sheet-header::before {
  /* Tiny diamond ornaments centered above the title */
  content: "◆ · ◆";
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  color: var(--accent);
  font-size: 8px;
  letter-spacing: 6px;
  opacity: 0.7;
}
.sheet-header::after {
  content: "";
  position: absolute; left: 22px; right: 22px; bottom: -4px;
  height: 1px;
  background: var(--rule-gold);
}
@media (min-width: 720px) {
  .sheet-header { padding-top: 24px; }
  .sheet-header::before { top: 8px; }
}
.sheet-title {
  font-family: var(--serif-display); font-size: 28px;
  margin: 0; font-weight: 400;
  letter-spacing: 0.01em; line-height: 1.15;
  color: var(--ink-bright);
  text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 30px rgba(199, 156, 79, 0.15);
  flex: 1;
  padding-right: 12px;
}
.sheet-body {
  flex: 1; overflow-y: auto;
  padding: 22px 22px 28px;
  -webkit-overflow-scrolling: touch;
  /* Soft inner glow at top — like spotlight on the menu page */
  background: radial-gradient(ellipse 110% 30% at 50% 0%, rgba(199, 156, 79, 0.04), transparent 70%);
}
.sheet-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 18px;
  padding-bottom: calc(14px + var(--safe-bottom));
  border-top: var(--hairline) solid var(--rule);
  background: var(--bg);
  flex-shrink: 0;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up {
  from { transform: translateY(20px); opacity: 0.5; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   FORMS
   ============================================================ */
.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.field label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.field input, .field textarea, .field select {
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 15px; color: var(--ink);
  font-family: var(--sans);
  width: 100%; box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.field textarea {
  min-height: 84px; resize: vertical;
  font-family: var(--sans);
  line-height: 1.55;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  background: var(--surface);
}
.field-help {
  font-size: 11px; color: var(--ink-faint);
  font-style: italic;
}

/* ============================================================
   INGREDIENTS EDITOR
   ============================================================ */
.ingredients { display: flex; flex-direction: column; gap: 8px; }
.ingredient-row {
  display: grid;
  grid-template-columns: 56px 80px 1fr 36px;
  gap: 6px; align-items: center;
}
.ingredient-row input,
.ingredient-row .unit-select {
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 6px;
  padding: 9px 11px; font-size: 14px;
  width: 100%; box-sizing: border-box;
  color: var(--ink);
  font-family: inherit;
}
.ingredient-row input:focus,
.ingredient-row .unit-select:focus {
  outline: none; border-color: var(--accent);
}
.ingredient-row .unit-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b9b09a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
  background-size: 10px; cursor: pointer;
}
.ingredient-row .btn-icon {
  width: 36px; height: 36px;
  background: transparent; color: var(--ink-faint);
  border: var(--hairline) solid var(--rule);
  border-radius: 6px;
}
.ingredient-row .btn-icon:hover { color: var(--red); border-color: var(--red); }
.add-ingredient {
  background: transparent; color: var(--ink-dim);
  border: var(--hairline) dashed var(--rule-strong);
  border-radius: 6px; padding: 9px;
  font-size: 12px; letter-spacing: 0.06em;
}
.add-ingredient:hover {
  color: var(--accent); border-color: var(--accent);
}

/* ============================================================
   TAG EDITOR
   ============================================================ */
.tag-input-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-md); padding: 8px;
  min-height: 44px;
}
.tag-input-wrap:focus-within { border-color: var(--accent); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
  font-size: 12px; color: var(--ink);
  letter-spacing: 0.04em;
}
.tag-chip button {
  color: var(--ink-faint); font-size: 16px; line-height: 1;
}
.tag-chip button:hover { color: var(--red); }
.tag-input-wrap input {
  flex: 1; min-width: 80px;
  background: transparent; border: 0; padding: 4px;
  font-size: 14px; color: var(--ink);
}
.tag-input-wrap input:focus { outline: none; }

/* ============================================================
   STAR RATING
   ============================================================ */
.stars { display: inline-flex; gap: 4px; }
.stars button {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-size: 24px; line-height: 1;
  transition: color .12s;
}
.stars button.active { color: var(--accent); }
.stars button:hover { color: var(--accent-2); }
.stars-readonly {
  display: inline-flex; gap: 2px;
  color: var(--accent);
  font-size: 14px; line-height: 1;
  letter-spacing: 1px;
}

/* ============================================================
   PHOTO INPUT
   ============================================================ */
.photo-input {
  display: block; width: 100%;
  background: var(--bg-2);
  border: var(--hairline) dashed var(--rule-strong);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center; color: var(--ink-dim);
  font-size: 13px; letter-spacing: 0.06em;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, color .15s;
}
.photo-input:hover { border-color: var(--accent); color: var(--accent); }
.photo-input.has-photo {
  padding: 0; min-height: 200px; border-style: solid;
}
.photo-input img {
  width: 100%; max-height: 300px; object-fit: cover;
  border-radius: 5px; display: block;
}
.photo-input input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.photo-clear {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0, 0, 0, 0.78);
  border: var(--hairline) solid var(--rule-strong);
  color: var(--ink);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ============================================================
   DETAIL VIEW — printed-menu typography
   ============================================================ */
.detail-photo {
  width: 100%; max-height: 300px; object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  border: var(--hairline) solid var(--rule);
}

/* Drop cap for the first detail section's first paragraph.
   ::first-letter only accepts a narrow subset of properties — no
   position / z-index. The frame ::before below is z-index: -1 so
   the cap (in-flow, painted normally) renders on top of it. */
.sheet-body > *:first-child + .detail-section .detail-text:first-of-type::first-letter,
.sheet-body > .detail-section:first-of-type .detail-text:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-size: 3em;
  float: left;
  line-height: 0.9;
  margin: 4px 8px 0 0;
  color: var(--accent);
  font-style: italic;
}

/* v66 — illuminated initial frame.
   The drop-cap above stays as ::first-letter (floated). The frame is
   rendered as an absolutely-positioned ::before on the *paragraph*,
   sized to sit behind where the cap renders. ::after carries an
   optional decorative post-ornament glyph at the bottom-right.

Why on the paragraph and not on ::first-letter: combining
   ::first-letter + float + a sibling ::before causes Safari to clip
   or zero-size the cap. Keeping the frame on the paragraph as a
   non-floating absolute element sidesteps the bug entirely.

Each theme supplies five tokens:
     --dropcap-frame-bg      | fill behind the cap
     --dropcap-frame-border  | 1px solid var(--accent), or sharper
     --dropcap-frame-radius  | 0 (Connaught), 2px (Bemelmans),
                               6px (Maison), 50% (Smuggler stamp)
     --dropcap-ornament-pre  | top-left corner glyph or ""
     --dropcap-ornament-post | bottom-right corner glyph or ""
   Themes with no glyph supply "" so the pseudos render empty boxes. */
.sheet-body > *:first-child + .detail-section .detail-text:first-of-type,
.sheet-body > .detail-section:first-of-type .detail-text:first-of-type {
  position: relative;
  /* Establish a stacking context so the ::before frame can sit
     at z-index: -1 (behind the floated drop-cap) without falling
     behind the paragraph's ancestor backgrounds. */
  isolation: isolate;
}
.sheet-body > *:first-child + .detail-section .detail-text:first-of-type::before,
.sheet-body > .detail-section:first-of-type .detail-text:first-of-type::before {
  content: var(--dropcap-ornament-pre, "");
  position: absolute;
  top: 4px;
  left: -6px;
  width: 3.2em;
  height: 2.7em;
  background: var(--dropcap-frame-bg, transparent);
  border: var(--dropcap-frame-border, 0);
  border-radius: var(--dropcap-frame-radius, 0);
  /* The pre-ornament glyph (when present) sits at the top edge of
     the frame, small + accent-colored — it reads as a corner mark,
     not as text the cap is fighting with. */
  font-family: var(--serif-display, Georgia, serif);
  font-size: 0.72em;
  line-height: 1;
  color: var(--accent);
  text-align: left;
  padding: 2px 0 0 4px;
  z-index: -1;
  pointer-events: none;
}
.sheet-body > *:first-child + .detail-section .detail-text:first-of-type::after,
.sheet-body > .detail-section:first-of-type .detail-text:first-of-type::after {
  content: var(--dropcap-ornament-post, "");
  position: absolute;
  /* Bottom-right of the frame zone (frame is 3.2em × 2.7em from
     top:4 left:-6). Place the glyph just inside the bottom-right
     corner. */
  top: calc(2.7em - 0.4em);
  left: calc(3.2em - 6px - 0.9em);
  font-family: var(--serif-display, Georgia, serif);
  font-size: 0.72em;
  line-height: 1;
  color: var(--accent);
  z-index: -1;
  pointer-events: none;
}

.detail-section { margin-bottom: 30px; }
.detail-section h4 {
  font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--rule-faint);
  font-weight: 600;
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
.detail-section h4::before {
  /* v74 — section-head plate per binding.
     Was a flat 6px ◆ across every theme. Now a small ornamental
     cartouche carrying the theme's glyph: gilded fleuron box for
     Bemelmans, sharp Deco lozenge for Connaught, soft brass laurel
     for Maison Premiere, compass-rose medallion for Smuggler's Cove.
     Tokens live in each [data-theme] block. Falls back gracefully
     if a theme doesn't define them.
     v74-debug: shrunk plate from 22→16 so it doesn't inflate the
     header row (h4 text is just 10px). */
  content: var(--section-plate-glyph, "◆");
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-display);
  font-size: 9px;
  line-height: 1;
  width: 16px;
  height: 16px;
  background: var(--section-plate-bg, transparent);
  border: var(--section-plate-border, 0);
  border-radius: var(--section-plate-radius, 0);
  color: var(--section-plate-color, var(--accent));
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
}
/* Per-binding plate refinements — glyph-size optimizations for
   different glyph metrics. Connaught's lozenge reads thin: bump
   the glyph a touch. Maison Premiere's laurel flower has body;
   downscale. Smuggler's compass star wants to fill the medallion. */
[data-theme="connaught"] .detail-section h4::before {
  font-size: 11px;
}
[data-theme="maison-premiere"] .detail-section h4::before {
  font-size: 8px;
}
[data-theme="smugglers-cove"] .detail-section h4::before {
  font-size: 10px;
}
.detail-text {
  font-size: 15px; line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
}
/* Notes section reads italic — like a printed cocktail menu's marginalia */
.detail-section:has(h4) + .detail-section h4 + .detail-text {
  /* generic */
}

/* Ornamental divider between major sections in detail view */
.detail-section + .detail-section {
  position: relative;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: var(--hairline) solid var(--rule);
  position: relative;
}
.detail-meta-grid::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--rule-faint);
}
.detail-meta-item .label {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
  font-weight: 600;
}
.detail-meta-item .value {
  font-size: 15px; color: var(--ink);
  font-family: var(--serif);
  letter-spacing: 0.005em;
}

/* Ingredient list — printed cocktail-menu leader-dot style */
.ingredient-list { list-style: none; padding: 0; margin: 0; }
.ingredient-list li {
  display: grid;
  grid-template-columns: 60px auto 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1.5px dotted var(--rule-gold);
  font-size: 15px;
  align-items: baseline;
  transition: padding .15s, background .15s;
}
.ingredient-list li:last-child { border-bottom: 0; }
.ingredient-list li:hover {
  background: linear-gradient(90deg, rgba(199, 156, 79, 0.06), transparent 60%);
  padding-left: 6px;
}
.ingredient-list .amount {
  color: var(--accent-2);
  font-family: var(--serif-display); font-style: italic; font-weight: 400;
  font-size: 19px;
  white-space: nowrap;
  text-align: right;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.005em;
}
.ingredient-list .unit {
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
.ingredient-list .name {
  color: var(--ink);
  line-height: 1.4;
  font-family: var(--serif);
  font-size: 15px;
}

/* ============================================================
   REVERSE SUBSTITUTIONS — "this brand can replace…" on brand
   encyclopedia pages.
   ============================================================ */
.reverse-subs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reverse-subs-item {
  border-left: 2px solid var(--accent-2);
  padding-left: 12px;
}
.reverse-subs-target {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.reverse-subs-ratio {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
}
.reverse-subs-note {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-top: 4px;
}

/* ============================================================
   POUR COST VIEW
   ============================================================ */
/* Cost view re-uses the encyclopedia sub-tab pattern for consistency
   across "section selectors inside a view." */
.cost-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cost-tab {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}
.cost-tab:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}
.cost-tab.on {
  color: var(--accent);
  border-color: var(--accent);
}
/* Cost stats panel — unified onto the canonical Bar pattern (.bar-summary):
   38px Bodoni, ink color for the primary stat, accent for the highlighted
   one. The audit flagged the three "stats panel" dialects (Bar / Cost /
   Batch) as inconsistent; selectors below alias the cost-summary classes
   onto the same .stat-* / .bar-summary-* type system. */
.cost-summary {
  display: flex;
  justify-content: space-around;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 6px;
  padding: 18px 16px;
  margin-bottom: 20px;
}
.cost-summary-stat {
  text-align: center;
}
.cost-summary-num {
  font-family: var(--serif-display);
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cost-summary-stat-accent .cost-summary-num {
  color: var(--accent);
}
.cost-summary-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}
.cost-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}
.cost-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: var(--hairline) solid var(--rule);
}
.cost-row-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
}
.cost-row-cost {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cost-row-menu {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.cost-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 100px;
}
.cost-group-header {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.cost-price-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}
.cost-price-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}
.cost-price-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cost-currency {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-faint);
}
.cost-price-input {
  flex: 1 1 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  font-size: 14px;
}

/* ============================================================
   PAYWALL SHEET (Pro)
   ============================================================ */
.paywall-body {
  text-align: center;
  padding: 8px 4px 4px;
}
.paywall-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 8px;
}
.paywall-title {
  font-family: var(--serif-display);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink);
}
.paywall-pitch {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0 auto 24px;
  max-width: 320px;
}
.paywall-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.paywall-tier {
  position: relative;
  background: var(--surface-2);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.paywall-tier-best {
  border-color: var(--accent);
}
.paywall-tier-badge {
  position: absolute;
  top: -10px;
  right: 50%;
  transform: translateX(50%);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 4px;
}
.paywall-tier-price {
  font-family: var(--serif-display);
  font-size: 28px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.paywall-tier-period {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.paywall-tier-cta {
  width: 100%;
  margin-top: 6px;
  padding: 10px 8px;
  font-size: 12px;
}
.paywall-fineprint {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 14px auto 12px;
  max-width: 320px;
}
.paywall-dev-row {
  border-top: var(--hairline) solid var(--rule);
  padding-top: 14px;
  margin-top: 8px;
  text-align: center;
}
.paywall-dev-label {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

/* ============================================================
   PRINT STYLESHEET — themed cocktail-menu page (v65).

The pitch: a bartender taps "Print" inside a recipe sheet and gets
   what looks like a page from their bound spec book — typeset, leader-
   dotted ingredients, ornament between sections, edition byline at the
   foot. Not a screenshot of an app. A printed menu page.

How it works:
     1. The Print button in views.js adds class "printing-spec" to <body>
        and class "printing-target" to #sheet-root, then calls
        window.print().
     2. The rules below hide everything outside the printing-target and
        re-skin the recipe sheet for paper:
          - White paper ground regardless of dark theme (themes are
            normally walnut/midnight/sage/teal — on paper we INVERT so
            ink reads black-on-cream).
          - A5 portrait page (close to the 5x7 inch recipe card the
            spec asked for); 0.5 inch margins.
          - Masthead: SPEC · the {Edition} edition (theme display face
            via --serif-display, theme accent for the ornament).
          - Sub-line: family · glass · garnish (data-print-sub).
          - Drop cap on the cocktail name.
          - Leader-dotted ingredient rows preserved.
          - Ornamental divider (--ornament-divider) between sections.
          - Footer: from the {Edition} edition · spec.app, hairline
            above (matches share-card byline).
     3. Each [data-theme] block sets --print-edition-name; one rule
        below reads it into the masthead + footer ::before/::after
        content strings, so all four bindings get their own header
        without four print stylesheets.

Tear-down happens automatically after the print dialog closes (the
   trigger removes the classes); the screen UI is never altered.
   ============================================================ */
@media print {
  /* Page setup — A5 portrait, 0.5 inch margins. Browsers that respect
     @page will honor this; the rest fall back to the user's default
     paper size (still readable). */
  @page {
    size: A5 portrait;
    margin: 0.5in;
  }

/* INVERT the theme tokens for paper. Themes are dark-on-dark by
     default; on paper we want body type in black ink and headings in
     the theme accent. The accent and display face stay theme-driven
     so each binding's print page looks distinct (gold for Bemelmans,
     platinum for Connaught, antique brass for Maison Premiere, rum
     amber for Smuggler's Cove). */
  html, body {
    background: white !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

/* Step 1: hide the entire app. Anything not inside .printing-target
     stays out of the printout. We use display:none on the top-level
     app shell rather than visibility:hidden so blank columns don't
     reserve space at the top of the page. */
  body.printing-spec > #app > .app-header,
  body.printing-spec > #app > .bottom-tabs,
  body.printing-spec > #app > main#view,
  body.printing-spec > #app > #toast-root,
  body.printing-spec .tabs,
  body.printing-spec .bottom-tabs,
  body.printing-spec .app-header,
  body.printing-spec .fab,
  body.printing-spec .search,
  body.printing-spec .sub-tabs,
  body.printing-spec .toast,
  body.printing-spec .daily-pour,
  body.printing-spec .daily-pour-backdrop,
  body.printing-spec .snackbar {
    display: none !important;
  }

/* Step 2: tame the sheet shell — backdrop + sheet element become
     a plain document container. No fixed positioning, no shadows,
     no animations; the recipe sits on white paper. */
  body.printing-spec .sheet-backdrop {
    position: static !important;
    inset: auto !important;
    background: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  body.printing-spec .sheet {
    position: static !important;
    box-shadow: none !important;
    background: white !important;
    color: #111 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
    display: block !important;
  }

/* Hide app-shell chrome inside the sheet — drag handle, header
     (close button + title), footer (action buttons). The masthead
     below replaces the title; everything else is interactive and
     useless on paper. */
  body.printing-spec .sheet-drag-handle,
  body.printing-spec .sheet-header,
  body.printing-spec .sheet-footer {
    display: none !important;
  }

/* The body of the sheet IS the printout. Reset its surface and
     give it a typographic frame. */
  body.printing-spec .sheet-body {
    background: white !important;
    color: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    font-family: var(--serif, Georgia, "Iowan Old Style", serif) !important;
  }

/* HEADER STACK — three pseudo-elements, three different hosts, so
     all three blocks (masthead, title, subtitle/footer) can exist
     simultaneously without colliding on a single element's ::before.
       - .sheet            ::before → "SPEC · the {Edition} edition" masthead
       - .sheet-body       ::before → cocktail name (data-print-title)
       - .sheet-body       ::after  → subtitle + footer byline (one
                                       white-space:pre-line block)
     Each binding's --print-edition-name + --ornament-divider tokens
     flow through, so the printout speaks the active theme's voice
     without per-theme print rules. */

/* Cocktail name — set big, theme display face, left-aligned. */
  body.printing-spec .sheet-body::before {
    content: attr(data-print-title) !important;
    display: block !important;
    font-family: var(--serif-display, "Bodoni 72", "Didot", Georgia, serif) !important;
    font-size: 28pt !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.05 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    color: #111 !important;
    text-align: left !important;
    margin: 0 0 4pt !important;
    padding: 0 !important;
    border: 0 !important;
    text-shadow: none !important;
    /* drop-cap on the first letter of the title */
    /* (handled via ::first-letter below — pseudo on pseudo isn't
       supported, so we approximate with letter-spacing instead) */
  }

/* Sub-line — family · glass · garnish */
  body.printing-spec .sheet-body::after {
    content: attr(data-print-sub) "\A" var(--ornament-divider, "·") "\A from the " var(--print-edition-name, "Bemelmans") " edition  " var(--ornament-divider, "·") "  spec.app" !important;
    /* Note: the \A escapes split the string into three lines
       (subtitle, ornament, footer byline) thanks to white-space:
       pre-line below. Compact and theme-honest. */
    display: block !important;
    white-space: pre-line !important;
    margin-top: 28pt !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    text-align: center !important;
    font-family: var(--serif-italic, Georgia, serif) !important;
    font-style: italic !important;
    font-size: 9pt !important;
    line-height: 1.8 !important;
    letter-spacing: 0.08em !important;
    color: var(--accent, #b8860b) !important;
    text-shadow: none !important;
  }

/* Masthead — "SPEC · the {Edition} edition" — moved to .sheet
     ::before so it sits above the cocktail name in document order. */
  body.printing-spec .sheet::before {
    content: "SPEC  " var(--ornament-divider, "·") "  the " var(--print-edition-name, "Bemelmans") " edition" !important;
    display: block !important;
    font-family: var(--serif-display, "Bodoni 72", Georgia, serif) !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--accent, #b8860b) !important;
    text-align: center !important;
    margin: 0 0 22pt !important;
    padding-bottom: 8pt !important;
    border-bottom: 0.5pt solid var(--accent, #b8860b) !important;
    text-shadow: none !important;
  }

/* SUB-LINE under the cocktail title — small caps, accent color,
     theme ornament before. Realized as a ::before on the first
     detail-section so it sits between title and content. */
  body.printing-spec .sheet-body > .detail-section:first-of-type::before,
  body.printing-spec .sheet-body > .detail-photo + .detail-section::before,
  body.printing-spec .sheet-body > .detail-meta-grid + .detail-section::before {
    content: "";
    display: none;
  }

/* The detail-meta-grid carries Glass / Garnish / Category / Base.
     For print we already render those in the sub-line, so suppress
     the grid; everything below it is the recipe proper. */
  body.printing-spec .detail-meta-grid {
    display: none !important;
  }

/* Allergen chips — the "Contains: dairy, egg" block. Useful but
     visually noisy; render as a flat italic line. */
  body.printing-spec .detail-allergens {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 14pt !important;
    font-style: italic !important;
    font-size: 9pt !important;
    color: #555 !important;
  }
  body.printing-spec .detail-allergen-chip {
    display: inline !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 4pt 0 0 !important;
    color: #555 !important;
    font-size: 9pt !important;
  }
  body.printing-spec .detail-allergens-label {
    font-weight: 600 !important;
    margin-right: 4pt !important;
    color: #555 !important;
  }

/* SECTION HEADINGS — small caps, accent color, hairline rule
     under, no ◆ ornament dot in front (loses on paper). */
  body.printing-spec .detail-section {
    margin-bottom: 18pt !important;
    page-break-inside: avoid;
  }
  body.printing-spec .detail-section h4 {
    font-family: var(--serif-display, Georgia, serif) !important;
    font-size: 9pt !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--accent, #b8860b) !important;
    margin: 0 0 8pt !important;
    padding-bottom: 4pt !important;
    border-bottom: 0.5pt solid var(--accent, #b8860b) !important;
    background: transparent !important;
    display: block !important;
    text-shadow: none !important;
  }
  body.printing-spec .detail-section h4::before {
    display: none !important;
    content: none !important;
  }

/* INGREDIENTS — leader-dot rows, italic display-face amounts,
     small-caps units, body-face names. Reproduces the screen
     treatment, in black ink. */
  body.printing-spec .ingredient-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    page-break-inside: avoid;
  }
  body.printing-spec .ingredient-list li {
    display: grid !important;
    grid-template-columns: 56pt 64pt 1fr !important;
    gap: 10pt !important;
    padding: 4pt 0 !important;
    border-bottom: 0.5pt dotted #aaa !important;
    background: transparent !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    align-items: baseline !important;
  }
  body.printing-spec .ingredient-list li:last-child {
    border-bottom: 0 !important;
  }
  body.printing-spec .ingredient-list .amount {
    font-family: var(--serif-display, Georgia, serif) !important;
    font-style: italic !important;
    font-size: 12pt !important;
    color: #111 !important;
    text-align: right !important;
    text-shadow: none !important;
  }
  body.printing-spec .ingredient-list .unit {
    font-family: var(--sans, sans-serif) !important;
    font-size: 8pt !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #555 !important;
  }
  body.printing-spec .ingredient-list .name {
    font-family: var(--serif, Georgia, serif) !important;
    font-size: 11pt !important;
    color: #111 !important;
    line-height: 1.4 !important;
  }
  /* Encyclopedia link button — render as plain text. Underlines on
     paper read like emphasis the ingredient hasn't earned. */
  body.printing-spec .ingredient-link {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    font: inherit !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    cursor: default !important;
  }

/* Method + notes — the prose blocks. Body serif, comfortable
     leading, drop-cap on the first letter of method (printed-menu
     touch). */
  body.printing-spec .detail-text,
  body.printing-spec .tasting-prose {
    font-family: var(--serif, Georgia, serif) !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
    color: #111 !important;
    white-space: pre-wrap !important;
    background: transparent !important;
  }

/* Drop-cap on the cocktail name's first letter — mimics the
     editorial illuminated initial. The screen drop-cap rule
     targets the first detail-text; on paper we want it on the
     title itself, but ::first-letter on a generated content
     pseudo isn't reliable cross-browser. Apply it to the first
     detail-text instead, matching the screen treatment but
     larger + theme accent. */
  body.printing-spec .sheet-body > *:first-child + .detail-section .detail-text:first-of-type::first-letter,
  body.printing-spec .sheet-body > .detail-section:first-of-type .detail-text:first-of-type::first-letter,
  body.printing-spec .sheet-body .detail-section:first-of-type .detail-text:first-of-type::first-letter {
    font-family: var(--serif-display, Georgia, serif) !important;
    font-size: 3.5em !important;
    float: left !important;
    line-height: 0.9 !important;
    margin: 4pt 6pt 0 0 !important;
    color: var(--accent, #b8860b) !important;
    font-style: italic !important;
    text-shadow: none !important;
  }

/* v66 — illuminated initial frame on paper. Mirrors the screen
     treatment but tuned for paper: skip background fill (paper
     already provides the warm tone — a fill would dirty the page),
     keep just the border + corner ornament glyphs. The frame is a
     positioned ::before on the paragraph, z-index -1 so the cap
     paints on top. (Not on ::first-letter, to dodge the Safari
     clip bug when float + sibling ::before combine.) */
  body.printing-spec .sheet-body > *:first-child + .detail-section .detail-text:first-of-type,
  body.printing-spec .sheet-body > .detail-section:first-of-type .detail-text:first-of-type,
  body.printing-spec .sheet-body .detail-section:first-of-type .detail-text:first-of-type {
    position: relative !important;
    isolation: isolate !important;
  }
  body.printing-spec .sheet-body > *:first-child + .detail-section .detail-text:first-of-type::before,
  body.printing-spec .sheet-body > .detail-section:first-of-type .detail-text:first-of-type::before,
  body.printing-spec .sheet-body .detail-section:first-of-type .detail-text:first-of-type::before {
    content: var(--dropcap-ornament-pre, "") !important;
    position: absolute !important;
    top: 2pt !important;
    left: -3pt !important;
    width: 3.5em !important;
    height: 3em !important;
    background: transparent !important;
    border: var(--dropcap-frame-border, 0) !important;
    border-radius: var(--dropcap-frame-radius, 0) !important;
    font-family: var(--serif-display, Georgia, serif) !important;
    font-size: 0.7em !important;
    line-height: 1 !important;
    color: var(--accent, #b8860b) !important;
    text-align: left !important;
    padding: 2pt 0 0 3pt !important;
    z-index: -1 !important;
    pointer-events: none !important;
    text-shadow: none !important;
  }
  body.printing-spec .sheet-body > *:first-child + .detail-section .detail-text:first-of-type::after,
  body.printing-spec .sheet-body > .detail-section:first-of-type .detail-text:first-of-type::after,
  body.printing-spec .sheet-body .detail-section:first-of-type .detail-text:first-of-type::after {
    content: var(--dropcap-ornament-post, "") !important;
    position: absolute !important;
    top: calc(3em - 0.4em) !important;
    left: calc(3.5em - 3pt - 0.9em) !important;
    font-family: var(--serif-display, Georgia, serif) !important;
    font-size: 0.7em !important;
    line-height: 1 !important;
    color: var(--accent, #b8860b) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    text-shadow: none !important;
  }

/* HIDE — interactive UI that has no place on paper:
     - Pre-batch handoff button (a button to navigate to a tab —
       useless once printed)
     - Batch scale chip row (×1 / ×2 / ×4 / Custom — the printout
       captured a single scale; chips are a screen affordance)
     - Substitutions accordion (long; ships separately if needed)
     - Reverse subs (brand-page artifact; out of place on a recipe)
     - Cross-link list ("More in the X family") — these are
       navigation, not content
     - Comments thread — discussion is a screen surface
     - Discussion composer
     - Photo (we want a typeset page, not a photo print) */
  body.printing-spec .detail-prebatch-row,
  body.printing-spec .batch-scale-row,
  body.printing-spec .subs-section,
  body.printing-spec .reverse-subs-list,
  body.printing-spec .cross-link-list,
  body.printing-spec .comments-section,
  body.printing-spec .comments-placeholder,
  body.printing-spec .detail-photo {
    display: none !important;
  }

/* "More in the X family" wrapper section — its child cross-link
     list is hidden, so the heading would orphan above empty space.
     Hide the whole section. */
  body.printing-spec .detail-section:has(.cross-link-list) {
    display: none !important;
  }

/* Page-break hygiene — never split a heading off its body. */
  body.printing-spec h1,
  body.printing-spec h2,
  body.printing-spec h3,
  body.printing-spec h4 {
    page-break-after: avoid;
  }

/* Colors — force the printer to honor accent + ornament rather
     than stripping them. Some browsers print a default "ink-saving"
     mode that flattens color; this opts back in for our accents. */
  body.printing-spec .sheet,
  body.printing-spec .sheet-body,
  body.printing-spec .sheet-body * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================================
   SUBSTITUTIONS — collapsible block on cocktail detail sheet
   listing close swaps for ingredients we have sub data for.
   ============================================================ */
.subs-section summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}
.subs-section summary::-webkit-details-marker {
  display: none;
}
.subs-section summary h4::after {
  content: " ▾";
  color: var(--ink-faint);
  font-size: 0.85em;
}
.subs-section[open] summary h4::after {
  content: " ▴";
}
.subs-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}
.subs-item {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.subs-ingredient {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.subs-row {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  align-items: baseline;
}
.subs-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.subs-ratio {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.subs-note {
  grid-column: 1 / -1;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-top: 2px;
}

/* ============================================================
   BATCH SCALING CHIPS — multiplier control above ingredient list
   on canonical cocktail detail sheets.
   ============================================================ */
.batch-scale-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.batch-chip {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.batch-chip:hover {
  color: var(--ink-dim);
  border-color: var(--ink-faint);
}
.batch-chip.on {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.batch-chip-custom {
  border-style: dashed;
  font-style: italic;
}

/* ============================================================
   BATCH BUILDER — standalone freeform recipe scaler view
   (separate from the per-cocktail .batch-chip multiplier above).
   ============================================================ */
.batch-load-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.batch-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.batch-row {
  display: grid;
  grid-template-columns: 70px 60px 1fr 32px;
  gap: 6px;
  align-items: center;
}
.input.batch-amount,
.input.batch-unit,
.input.batch-name {
  padding: 9px 10px;
  font-size: 14px;
}
.input.batch-amount {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.batch-remove {
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: color 100ms ease, background 100ms ease;
}
.batch-remove:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.batch-mode-row {
  display: flex;
  gap: 6px;
  margin: 6px 0 12px;
}
.batch-mode-chip {
  flex: 1 1 auto;
  background: var(--surface-2);
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.batch-mode-chip:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.batch-mode-chip.on {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.batch-target-input {
  font-size: 18px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.batch-output {
  margin-top: 28px;
  padding: 18px 16px;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 6px;
}
.batch-output-empty {
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
  padding: 14px 0;
  font-size: 14px;
}
.batch-output-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
/* Batch output stats — unified onto the canonical Bar pattern. The mult
   is the highlighted stat (accent color, 38px Bodoni); the vol is the
   small uppercase ink-faint label. Matches .bar-summary-num /
   .bar-summary-label so the three views read as one type system. */
.batch-output-mult {
  font-family: var(--serif-display);
  font-size: 38px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.batch-output-vol {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.batch-output-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.batch-output-row {
  display: grid;
  grid-template-columns: 70px 50px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: var(--hairline) solid var(--rule);
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}
.batch-output-row:last-child { border-bottom: 0; }
.batch-output-row .amount {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.batch-output-row .unit {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Loader sheet (Load from library…) */
.loader-results {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.loader-row {
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule);
  padding: 14px 4px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  color: var(--ink);
  transition: background 100ms ease, padding-left 100ms ease;
}
.loader-row:hover {
  background: var(--surface-2);
  padding-left: 8px;
}
.loader-row-name {
  font-size: 16px;
  font-weight: 500;
}
.loader-row-meta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   BAR — inventory checklist (Tiki Sunset palette).
   Used by pantry-view.js. Same visual language as the Specs
   chip rows but with on/off pill state and grouped headers.
   ============================================================ */
.bar-summary {
  margin: 4px 0 18px;
  padding: 18px 16px;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 6px;
}
.bar-summary-row {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  gap: 16px;
}
.bar-summary-stat {
  text-align: center;
}
.bar-summary-num {
  font-family: var(--serif-display);
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bar-summary-stat-accent .bar-summary-num {
  color: var(--accent);
}
.bar-summary-stat-tap {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  transition: opacity 120ms ease, transform 120ms ease;
}
.bar-summary-stat-tap:not(:disabled):hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.bar-summary-stat-tap:disabled {
  cursor: default;
  opacity: 0.55;
}
.bar-summary-stat-tap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.bar-summary-cta {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}
.bar-summary-cta:hover {
  background: var(--accent-2);
}
.bar-summary-cta:active {
  transform: translateY(1px);
}
.bar-summary-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}
.bar-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.bar-groups {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 100px;       /* clear the bottom-tab bar */
}
.bar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 6px;
}
.bar-group-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.bar-group-count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bar-chip {
  background: transparent;
  color: var(--ink-dim);
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.bar-chip:hover {
  border-color: var(--ink-dim);
  color: var(--ink);
}
.bar-chip.on {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
.bar-chip.on:hover {
  background: var(--accent-2);
}
.bar-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   LONG-PRESS FAVORITE FLASH — confirms the toggle visually after
   a 500ms hold on a Specs card.
   ============================================================ */
@keyframes card-fav-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(255, 140, 90, 0.0); }
  30%  { box-shadow: 0 0 0 4px rgba(255, 140, 90, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 140, 90, 0.0); }
}
.card-fav-flash {
  animation: card-fav-flash-anim 0.6s ease-out 1;
}

/* ============================================================
   PROFILE — settings row with avatar monogram + name/venue inputs.
   ============================================================ */
.profile-group { padding: 14px 16px; }
.profile-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* Profile avatar — scaled-up sibling of .brand-mark. Hairline coral
   border, transparent fill with a soft inset radial highlight, italic
   Bodoni initials in --accent-2. The 48px size keeps it as the user's
   identity glyph (vs. the 32px header brand-mark). */
.profile-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: radial-gradient(circle at 30% 30%, rgba(232, 200, 120, 0.2), transparent 60%);
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px rgba(199, 156, 79, 0.12), inset 0 1px 0 rgba(232, 200, 120, 0.25);
}
.profile-fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-fields .input {
  font-size: 14px;
  padding: 8px 10px;
}

/* ============================================================
   COMMENTS / SUBTHREADS
   Local-only discussion under each cocktail and brand. The audit
   flagged this as "Reddit-grafted" — rebuilt in editorial dialect:
   italic-serif byline (like a printed marginalia), no emoji, ↳
   glyph for replies (matches the wine-list typography vocabulary).
   ============================================================ */
.comments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comments-empty {
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 14px;
  padding: 12px 0;
  text-align: center;
  margin: 0;
}
.comment-row {
  border-bottom: var(--hairline) solid var(--rule);
  padding: 10px 0;
  position: relative;
}
.comment-row.comment-reply {
  margin-left: 18px;
  padding-left: 18px;
  border-bottom: 0;
}
.comment-row.comment-reply::before {
  content: "↳";
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--accent-2);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
}
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.comment-author {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.comment-when {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.comment-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}
.comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.comment-action-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.comment-action-btn:hover { color: var(--accent); }
.comment-action-btn.comment-delete:hover { color: #ff6b6b; }
.comments-composer {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comments-textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--serif);
  font-size: 14px;
  padding: 10px;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
}
.comments-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.comments-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.comments-noprofile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 4px;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ============================================================
   SPECS FILTER TRIGGER — Pill button that opens the filter sheet.
   Replaces the v45-v50 inline Spirit/Profile/Era chip rows
   (which ate ~150px of chrome above the first card).
   ============================================================ */
.specs-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 4px 0 14px;
  cursor: pointer;
  transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}
.specs-filter-trigger:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}
.specs-filter-trigger.has-filters {
  color: var(--accent);
  border-color: var(--accent);
}
.specs-filter-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.specs-filter-icon svg { width: 100%; height: 100%; }
.specs-filter-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.specs-filter-count {
  display: none;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.specs-filter-trigger.has-filters .specs-filter-count {
  display: inline-block;
}

/* Filter sheet — Spirit/Profile/Era chip rows in a labeled column. */
.filter-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 6px;
}

/* ============================================================
   SPECS — inline "Edit my bar" link, only visible when the
   ✓ Possible filter is active. Replaces the standalone Bar tab.
   ============================================================ */
.specs-bar-hint:empty { display: none; }
.specs-bar-hint-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--surface-2);
  border: var(--hairline) solid var(--rule);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 8px 0 12px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.specs-bar-hint-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.specs-bar-hint-label {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.specs-bar-hint-count {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   prefers-reduced-motion — respect users who opt out of animation.
   Covers boot splash, sheet animations, FAB glow, transitions.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   BOOT SPLASH — shown while the seed installs on first run.
   ============================================================ */
.boot-splash {
  /* Viewport-pinned so it doesn't depend on the .view container being
     laid out. On returning visits the seed runs in <50ms; the splash is
     replaced before the fade-in delay even resolves. */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
  z-index: 1;
  animation: boot-fade-in 0.25s ease 0.15s forwards;
}
@keyframes boot-fade-in { to { opacity: 1; } }
.boot-splash-mark {
  font-family: var(--serif-display);
  font-size: 56px;
  letter-spacing: 0.32em;
  color: var(--accent);
  padding-left: 0.32em;
  text-shadow: 0 0 24px rgba(255, 140, 90, 0.25);
}
.boot-splash-sub {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

/* ============================================================
   STRUCTURED TASTING NOTES  (Nose / Palate / Finish / Mouthfeel)
   The deepening rounds rewrote brand tasting fields into a 4-section
   format. Render each section as a label + prose row so the bartender
   can scan instead of read a 600-char paragraph.
   ============================================================ */
.tasting-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tasting-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tasting-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tasting-prose {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* ============================================================
   CROSS-LINK LIST  (brand → cocktails, cocktail → variants)
   Each item is a button styled like a quiet menu row. Clicking
   closes the current detail sheet and opens the linked one.
   ============================================================ */
.cross-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cross-link-list li {
  border-bottom: var(--hairline) solid var(--rule);
}
.cross-link-list li:last-child {
  border-bottom: 0;
}
.cross-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
  transition: color 120ms ease, padding 120ms ease;
}
.cross-link:hover {
  color: var(--accent);
  padding-left: 4px;
}
.cross-link:focus-visible {
  color: var(--accent);
  padding-left: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.cross-link-name {
  flex: 1 1 auto;
  letter-spacing: 0.01em;
}
.cross-link-name::after {
  content: " ›";
  color: var(--ink-faint);
  font-family: var(--sans);
  margin-left: 6px;
  transition: color 120ms ease, transform 120ms ease;
}
.cross-link:hover .cross-link-name::after,
.cross-link:focus-visible .cross-link-name::after {
  color: var(--accent);
}
.cross-link-meta {
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 12px;
  flex: 0 0 auto;
}

/* ============================================================
   VERSIONS
   ============================================================ */
.versions-list { display: flex; flex-direction: column; gap: 0; }
.version-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: var(--hairline) solid var(--rule);
  font-size: 14px;
}
.version-row.current {
  color: var(--accent);
  font-family: var(--serif); font-style: italic;
}
.version-meta {
  color: var(--ink-faint);
  font-size: 11px; letter-spacing: 0.06em;
}

/* ============================================================
   TOAST
   ============================================================ */
#toast-root {
  position: fixed; bottom: calc(92px + var(--safe-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 200; pointer-events: none;
}
@media (min-width: 720px) {
  #toast-root { bottom: 32px; }
}
.toast {
  background: var(--surface-2);
  color: var(--ink);
  border: var(--hairline) solid var(--accent);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  animation: toast-in .2s ease, toast-out .25s ease 2.5s forwards;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-family: var(--serif); font-style: italic;
}
.toast-error {
  background: rgba(122, 31, 36, 0.15);
  color: var(--maraschino-2);
  border-color: var(--maraschino);
  font-style: normal;
}
@keyframes toast-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(-10px); opacity: 0; }
}

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-group {
  background: transparent;
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
  margin-bottom: 22px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px;
  border-bottom: var(--hairline) solid var(--rule);
  cursor: pointer;
  transition: background .12s, padding .15s;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row:hover {
  background: rgba(199, 156, 79, 0.04);
  padding-left: 10px;
}
.settings-row .label {
  font-size: 15px;
  font-family: var(--serif);
}
.settings-row .value {
  font-size: 13px; color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.settings-row .arrow {
  color: var(--accent); font-size: 18px;
}

.score-label {
  font-size: 11px; color: var(--ink-faint);
  margin-top: 4px; font-style: italic;
}

.confirm-text {
  font-size: 15px; color: var(--ink);
  padding: 8px 0 18px;
  line-height: 1.6;
  font-family: var(--serif);
}
.confirm-text strong { color: var(--accent-2); font-style: italic; }

/* ============================================================
   FLAVOR PAIRINGS (Create view)
   ============================================================ */
.pairing-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.pairing-row {
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 14px;
  background: transparent;
}
.pairing-list-tension .pairing-row {
  border-left-color: var(--maraschino);
}
.pairing-with {
  font-size: 14px;
  color: var(--ink);
  font-family: var(--serif); font-weight: 500;
  letter-spacing: 0.005em;
  margin-bottom: 3px;
}
.pairing-note {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  font-style: italic;
}

.view-intro { margin: 0; }

/* ============================================================
   ORNAMENTAL DIVIDERS — SVG flourish utility class
   Use as <div class="flourish"></div> wherever a section break feels right.
   ============================================================ */
.flourish {
  display: flex; align-items: center; justify-content: center;
  margin: 22px 0;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.4em;
  opacity: 0.7;
}
.flourish::before, .flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-faint), transparent);
  margin: 0 12px;
}
.flourish::before { background: linear-gradient(to right, transparent, var(--rule-faint)); }
.flourish::after  { background: linear-gradient(to left,  transparent, var(--rule-faint)); }

/* ============================================================
   FIELD SECTION HEADER (Tasting block in Journal edit form)
   ============================================================ */
.field-section-header {
  font-family: var(--serif); font-style: italic;
  font-size: 14px !important;
  color: var(--accent) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-top: var(--hairline) solid var(--rule-strong) !important;
  padding: 22px 0 6px !important;
  margin-top: 14px !important;
}

/* ============================================================================
   v53 — Messaging tab + Q&A board + connection points
   ============================================================================ */

/* Notification badge — used by both the top tab and bottom tab pip */
.notif-badge {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}
.notif-badge.on { display: inline-block; }
.tab { position: relative; }
.bottom-tab { position: relative; }

/* Board / Q&A list */
.board-search {
  width: 100%;
  margin-bottom: 12px;
}
.board-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}
.board-tag-chip {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.board-tag-chip.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.board-new-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 4px 0 16px;
  background: transparent;
  border: 1px dashed var(--rule);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}
.board-new-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.board-list { display: flex; flex-direction: column; gap: 1px; }
.board-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.board-row:hover { background: rgba(255,255,255,0.02); }
.board-row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.35;
}
.board-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
}
.board-row-dot { color: var(--ink-faint); }
.board-row-author { color: var(--ink-dim); }
.board-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.board-row-tag {
  font-size: 11px;
  color: var(--accent);
  background: rgba(216, 73, 43, 0.08);
  padding: 2px 7px;
  border-radius: 8px;
}

/* Board / Q&A detail */
.board-back { margin-bottom: 8px; }
.board-detail-head { margin-bottom: 16px; }
.board-detail-title {
  font-size: 22px;
  font-family: var(--serif-display);
  margin: 4px 0 8px;
  line-height: 1.2;
}
.board-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.board-detail-body {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-top: 10px;
  white-space: pre-wrap;
}
.board-related-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  background: rgba(216, 73, 43, 0.10);
  border: 1px solid rgba(216, 73, 43, 0.35);
  color: var(--accent);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.board-related-pill:hover {
  background: rgba(216, 73, 43, 0.18);
}
.board-answers-h {
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 500;
  margin: 18px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.board-answers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.board-answer {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.board-answer-reply {
  margin-left: 24px;
  border-left: 2px solid var(--rule);
}
.board-composer {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 8px;
}

/* Notifications row (used by both bell sheet and Activity sub-tab) */
.notif-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 12px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
}
.notif-row:hover { background: rgba(255,255,255,0.02); }
.notif-row-kind {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-weight: 600;
}
.notif-row-body {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.notif-row-when { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.notif-row.unseen .notif-row-kind { color: var(--accent); }
.notif-row.unseen .notif-row-body { color: var(--ink); }
.notif-list { display: flex; flex-direction: column; }

/* Messaging tab (Discussions + Activity sub-tabs) */
.messaging-body { display: flex; flex-direction: column; gap: 0; }
.messaging-activity-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.messaging-activity-list { display: flex; flex-direction: column; }
.messaging-discussion-list { display: flex; flex-direction: column; }
.messaging-discussion-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 14px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.messaging-discussion-row:hover { background: rgba(255,255,255,0.02); }
.messaging-discussion-target {
  font-size: 15px;
  font-family: var(--serif-display);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.messaging-discussion-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.messaging-discussion-dot { color: var(--ink-faint); }
.messaging-discussion-count { color: var(--ink-dim); }
.messaging-discussion-preview {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
}

/* Cocktail Discussion → "On the board" subsection */
.comments-related-board {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.comments-related-board-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
  font-weight: 600;
}
.comments-related-board-ask {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.comments-related-board-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1px;
}
.comments-related-board-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border-bottom: 1px solid var(--rule);
  gap: 8px;
}
.comments-related-board-row:hover { background: rgba(255,255,255,0.02); }
.comments-related-board-title {
  font-size: 13px;
  color: var(--ink);
  flex: 1;
  line-height: 1.4;
}
.comments-related-board-meta {
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.comments-related-board-empty {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 6px 0;
}

/* Reference tab body — sub-tabs already styled by .sub-tabs */
.reference-body { display: flex; flex-direction: column; }

/* tab-icon: shrink the icon-only header tabs (legacy, used pre-v53). */
.tab-icon {
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   v53 — quick-win polish (paywall honesty, prep for visible favorite star)
   ============================================================================ */
.paywall-tier-cta-soon {
  background: transparent !important;
  border: 1px dashed var(--rule) !important;
  color: var(--ink-faint) !important;
  cursor: not-allowed;
}
.paywall-tier-cta-soon:hover { background: transparent !important; }

/* v54 — inline profile in comments composer */
.comments-inline-profile {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comments-inline-profile-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

/* ============================================================================
   v54 — Friends + Collabs (Messaging tab)
   ============================================================================ */

/* "You" row at top of Friends sub-tab */
.friends-me {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(216, 73, 43, 0.06);
  border: 1px solid rgba(216, 73, 43, 0.18);
  border-radius: 8px;
  margin-bottom: 12px;
}
.friends-me-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.friends-me-body { flex: 1; }
.friends-me-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.friends-me-venue {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.friends-add-btn {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.friend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.friend-row.pinned {
  background: rgba(216, 73, 43, 0.04);
}
.friend-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}
.friend-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.friend-pin {
  color: var(--accent);
  font-size: 11px;
}
.friend-venue {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.friend-notes {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 4px;
}
.friend-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.friend-actions {
  display: flex;
  gap: 4px;
}
.icon-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

/* Collabs list */
.collab-new-btn {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}
.collab-list { display: flex; flex-direction: column; }
.collab-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 14px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.collab-row:hover { background: rgba(255, 255, 255, 0.02); }
.collab-row-title {
  font-size: 15px;
  font-family: var(--serif-display);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.collab-row-meta {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.collab-row-preview {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
}

/* Collab detail */
.collab-back { margin-bottom: 8px; }
.collab-head { margin-bottom: 16px; }
.collab-title {
  font-size: 22px;
  font-family: var(--serif-display);
  margin: 4px 0 6px;
  line-height: 1.2;
}
.collab-friends {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.collab-actions {
  display: flex;
  gap: 8px;
}
.collab-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.collab-item {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
}
.collab-item.mine {
  background: rgba(216, 73, 43, 0.06);
  border: 1px solid rgba(216, 73, 43, 0.18);
}
.collab-item-byline {
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.collab-item-when { color: var(--ink-faint); }
.collab-item-ref {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 6px;
}
.collab-item-ref:hover {
  background: rgba(255, 255, 255, 0.04);
}
.collab-item-body {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
  white-space: pre-wrap;
}
.collab-item-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.collab-item-delete:hover { color: var(--red); }

.collab-composer {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.collab-composer-textarea { width: 100%; }

/* Friend picker tiles in new-collab sheet */
.collab-friends-picker,
.share-chooser-friend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.friend-pick-tile,
.share-chooser-friend-tile {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  padding: 8px 12px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.friend-pick-tile.on,
.share-chooser-friend-tile.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.friend-pick-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* Share chooser sheet (cocktail detail → share) */
.share-chooser-btn {
  width: 100%;
  margin-bottom: 12px;
}
.share-chooser-section-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 12px 0 6px;
  font-weight: 600;
}
.share-chooser-collab-list { display: flex; flex-direction: column; gap: 1px; }
.share-chooser-collab-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.share-chooser-collab-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.share-chooser-collab-title {
  font-size: 14px;
  color: var(--ink);
}
.share-chooser-collab-meta {
  font-size: 11px;
  color: var(--ink-faint);
}

/* ============================================================================
   v54 design coherence pass — strengthen contrast and weight on the
   v53/v54 surfaces (Messaging, Friends, Collabs, Board, Activity, share-
   chooser, related-board card). The Tiki Sunset palette has deep teal as
   the canvas; rgba(255,255,255,0.02) row backgrounds were nearly invisible
   against #122a3a. These overrides nudge rows toward a more solid surface,
   bump small-text font weight, and tighten border definition so the UI
   reads coherent rather than washed-out.
   ============================================================================ */

/* Card / row backgrounds: lift from 2% white to a solid surface tone */
.board-row,
.notif-row,
.messaging-discussion-row,
.collab-row,
.collab-item,
.share-chooser-collab-row,
.comments-related-board-row,
.friend-row {
  background: rgba(255, 255, 255, 0.04);
}
.board-row:hover,
.notif-row:hover,
.messaging-discussion-row:hover,
.collab-row:hover,
.share-chooser-collab-row:hover,
.comments-related-board-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Borders: bump the v53/v54 hairlines to use the stronger rule tone so
   sections and rows have clear edges on the deep teal canvas. */
.board-row,
.notif-row,
.messaging-discussion-row,
.collab-row,
.share-chooser-collab-row,
.comments-related-board-row,
.friend-row,
.messaging-activity-list,
.notif-list,
.board-list,
.collab-list {
  border-color: var(--rule-strong);
}

/* Section headers (small caps eyebrows): bump weight + brightness */
.comments-related-board-h,
.share-chooser-section-h,
.comments-inline-profile-h,
.board-answers-h {
  color: var(--ink-dim);
  font-weight: 700;
}

/* Meta text was using --ink-faint at 11px — too thin on a saturated bg.
   Push to 12px and bump from faint to dim where the text matters. */
.board-row-meta,
.collab-row-meta,
.messaging-discussion-meta,
.notif-row-when,
.friend-meta,
.collab-item-when,
.collab-item-byline {
  font-size: 12px;
  color: var(--ink-dim);
}

/* Body text on rows: was --ink at 13px. Bump to 14px so cards feel
   substantial rather than caption-y. */
.board-row-title,
.collab-row-title,
.messaging-discussion-target,
.collab-title,
.friends-me-name,
.friend-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

/* Preview lines should be readable — bump to ink-dim from ink-faint */
.collab-row-preview,
.messaging-discussion-preview,
.board-detail-body,
.notif-row-body,
.friend-notes,
.collab-item-body {
  color: var(--ink-dim);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Notification UNSEEN rows: stronger highlight */
.notif-row.unseen {
  background: rgba(255, 140, 90, 0.10);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
.notif-row.unseen .notif-row-kind { color: var(--accent); font-weight: 700; }
.notif-row.unseen .notif-row-body { color: var(--ink); font-weight: 500; }

/* Pinned friend: more obvious accent band on the left */
.friend-row.pinned {
  background: rgba(255, 140, 90, 0.08);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

/* Tag chips: more solid, less ghost-y */
.board-tag-chip {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  font-weight: 500;
}
.board-tag-chip.on {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.board-row-tag {
  background: rgba(255, 140, 90, 0.14);
  color: var(--accent-2);
  font-weight: 600;
}

/* Related-cocktail pill on board question — make it read like an action */
.board-related-pill {
  background: rgba(255, 140, 90, 0.14);
  color: var(--accent-2);
  border: 1px solid rgba(255, 140, 90, 0.45);
  font-weight: 600;
  padding: 6px 12px;
}
.board-related-pill:hover {
  background: rgba(255, 140, 90, 0.22);
}

/* Icon buttons (pin / edit / +) on friend rows — more visible default */
.icon-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--rule-strong);
  font-size: 14px;
  font-weight: 500;
}
.icon-btn:hover {
  background: rgba(255, 140, 90, 0.18);
  border-color: var(--accent);
  color: var(--ink-bright);
}

/* The ghost "Coming soon" paywall buttons inherit a slightly more visible
   dashed style under Tiki palette */
.paywall-tier-cta-soon {
  border-color: var(--rule-strong) !important;
  color: var(--ink-dim) !important;
  font-weight: 500;
}

/* Inline profile composer: tighter edges + correct accent color */
.comments-inline-profile {
  background: rgba(255, 140, 90, 0.06);
  border-color: rgba(255, 140, 90, 0.25);
}

/* Share-chooser primary CTA: full-width accent fill, not ghost */
.share-chooser-btn {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.share-chooser-btn:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* Messaging top-tab badge + bottom-tab badge: the v53 badge sat at top:4 right:4
   which collided with text in the slim Messaging tab. Re-anchor inline. */
#messaging-tab-badge {
  position: static;
  display: none;
  margin-left: 6px;
  vertical-align: middle;
  background: var(--accent);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  color: var(--on-accent);
}
#messaging-tab-badge.on { display: inline-block; }
#messaging-bottom-badge {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.collab-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.collab-header-actions .collab-new-btn { flex: 1; margin-bottom: 0; }

/* v54 — visible favorite star on cocktail cards. Sits absolutely in the
   top-right corner so it doesn't reflow the title row. */
.cocktail-card { position: relative; }
.card-star {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  z-index: 2;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
.card-star:hover {
  background: rgba(0, 0, 0, 0.55);
  color: var(--ink);
  transform: scale(1.06);
}
.card-star.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.card-star.on:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* ============================================================================
   v54 — House cocktails (venue-tagged user uploads)
   ============================================================================ */
.house-venue-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.house-venue-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
}
.house-venue-pill:hover {
  background: rgba(255, 140, 90, 0.08);
  color: var(--ink);
}
.house-venue-pill.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.house-venue-pill-add {
  background: transparent;
  border-style: dashed;
}
/* "All venues" pill — italic editorial face that sits left of the bar
   names. Uses the same accent treatment when active so the whole strip
   reads as one switcher, not two. */
.house-venue-pill-all {
  font-family: var(--serif-italic);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Venue tag chip on cocktail cards in the All-venues view — small,
   uppercase, hairline. Marks which bar each cocktail belongs to. */
.house-cocktail-venue-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

.house-body { display: flex; flex-direction: column; }
.house-venue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.house-venue-name {
  font-size: 24px;
  font-family: var(--serif-display);
  margin: 0 0 4px 0;
  line-height: 1.15;
  color: var(--ink);
}
.house-venue-meta {
  font-size: 13px;
  color: var(--ink-dim);
}

.house-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.house-actions .btn:first-child { flex: 1; }
.house-search { width: 100%; margin-bottom: 12px; }
.house-list-wrap { display: flex; flex-direction: column; gap: 1px; }

.house-cocktail-list { display: flex; flex-direction: column; gap: 1px; }
.house-cocktail-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}
.house-cocktail-card:hover {
  background: rgba(255, 140, 90, 0.06);
  border-color: var(--accent);
}
.house-cocktail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.house-cocktail-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.house-cocktail-glass {
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.house-cocktail-ings {
  font-size: 13px;
  color: var(--ink-dim);
  font-style: italic;
  margin-bottom: 4px;
}
.house-cocktail-notes {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin-top: 4px;
}
.house-cocktail-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* Ingredient editor rows in the house cocktail sheet */
.house-ing-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.house-ing-row {
  display: grid;
  grid-template-columns: 56px 56px 1fr 32px;
  gap: 6px;
  align-items: center;
}
.house-ing-amt, .house-ing-unit, .house-ing-name { font-size: 13px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ============================================================================
   v54 — Tonight's Notes (shift handoff scratchpad) + spec-import sheet
   ============================================================================ */

/* Shift notes — running scratchpad UI */
.shiftnote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.shiftnote-eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.shiftnote-date {
  font-size: 18px;
  font-family: var(--serif-display);
  color: var(--ink);
}
.shiftnote-textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: rgba(255, 248, 232, 0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 14px;
  border-radius: 6px;
  margin-bottom: 6px;
  resize: vertical;
  min-height: 180px;
}
.shiftnote-textarea::placeholder {
  color: var(--ink-faint);
  white-space: pre-line;
}
.shiftnote-saved-stamp {
  font-size: 11px;
  color: var(--accent);
  text-align: right;
  height: 14px;
  font-style: italic;
  opacity: 0;
  transition: opacity 200ms ease;
  margin-bottom: 8px;
}
.shiftnote-saved-stamp.on { opacity: 1; }

.shiftnote-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.shiftnote-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.shiftnote-chip:hover {
  background: rgba(255, 140, 90, 0.10);
  color: var(--ink);
  border-color: var(--accent);
}

.shiftnote-past-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 8px;
}
.shiftnote-past-list { display: flex; flex-direction: column; gap: 1px; }
.shiftnote-past-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 12px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.shiftnote-past-row:hover {
  background: rgba(255, 255, 255, 0.07);
}
.shiftnote-past-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.shiftnote-past-preview {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* House view-switcher — same look as messaging sub-tabs */
.house-view-switcher { margin-top: -4px; margin-bottom: 16px; }

/* Spec-import sheet — single-spec import options */
.spec-import-section-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 8px;
}
.spec-import-options { display: flex; flex-direction: column; gap: 6px; }
.spec-import-option {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
}
.spec-import-option:hover {
  background: rgba(255, 140, 90, 0.08);
  border-color: var(--accent);
}
.spec-import-option-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.spec-import-option-meta {
  font-size: 12px;
  color: var(--ink-dim);
}

/* ============================================================================
   v54 — Create rebuild (Riff / Structure / Pairings) styles
   ============================================================================ */
.create-body { display: flex; flex-direction: column; gap: 12px; }
.create-mode-h { margin-bottom: 12px; }
.create-mode-h h2 {
  font-size: 22px;
  font-family: var(--serif-display);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.create-mode-h p {
  font-size: 13px;
  color: var(--ink-dim);
  font-style: italic;
  font-family: var(--serif-italic);
  margin: 0;
  line-height: 1.45;
}

/* Drafts list at the bottom of either picker */
.create-drafts-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin: 16px 0 6px;
}
.create-drafts-list { display: flex; flex-direction: column; }
.create-draft-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 10px 6px;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}
.create-draft-row:hover { background: rgba(255,140,90,0.08); }
.create-draft-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 2px;
}
.create-draft-meta {
  font-size: 11px;
  color: var(--ink-faint);
}

/* Editor head row (back button + meta) */
.create-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.create-editor-meta {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}
.create-editor-name {
  font-size: 18px;
  font-family: var(--serif-display);
  width: 100%;
}
.create-editor-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin: 16px 0 6px;
}

/* Riff picker */
.riff-picker-search { width: 100%; margin-bottom: 8px; }
.riff-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.riff-quickpick-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.riff-quickpick-chip:hover {
  background: rgba(255,140,90,0.1);
  color: var(--ink);
  border-color: var(--accent);
}

.riff-picker-list { display: flex; flex-direction: column; }
.riff-pick-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 12px 6px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.riff-pick-row:hover { background: rgba(255,140,90,0.08); }
.riff-pick-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.riff-pick-meta {
  font-size: 12px;
  color: var(--ink-dim);
  font-style: italic;
}

/* Riff editor — ingredient swap chips */
.riff-ing-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.riff-ing-row {
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  gap: 6px;
  align-items: center;
}
.riff-ing-amt {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-dim);
  padding: 8px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  text-align: right;
}
.riff-ing-name-btn {
  background: rgba(255,140,90,0.06);
  border: 1px dashed rgba(255,140,90,0.45);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.riff-ing-name-btn:hover {
  background: rgba(255,140,90,0.14);
  border-color: var(--accent);
}
.riff-ing-add { margin-top: 4px; }

/* Substitution chips inside the swap sheet */
.riff-swap-subs { margin-top: 12px; }
.riff-sub-chip {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 6px;
  color: inherit;
}
.riff-sub-chip:hover {
  background: rgba(255,140,90,0.08);
  border-color: var(--accent);
}
.riff-sub-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 2px;
}
.riff-sub-note {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.4;
}

/* Structure mode: template grid */
.structure-template-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
@media (min-width: 600px) {
  .structure-template-grid { grid-template-columns: 1fr 1fr; }
}
.structure-template-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.structure-template-card:hover {
  background: rgba(255,140,90,0.08);
  border-color: var(--accent);
}
.structure-template-name {
  font-size: 17px;
  font-family: var(--serif-display);
  color: var(--ink);
  margin-bottom: 4px;
}
.structure-template-desc {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-bottom: 6px;
}
.structure-template-slots {
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Structure slot rows */
.structure-slot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.structure-slot-row {
  display: grid;
  grid-template-columns: minmax(110px, 35%) 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.structure-slot-label-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.structure-slot-hint {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  line-height: 1.3;
}
.structure-slot-fields {
  display: grid;
  grid-template-columns: 56px 50px 1fr;
  gap: 6px;
  align-items: center;
}
.structure-slot-amt, .structure-slot-unit { font-size: 13px; }
.structure-slot-pick {
  background: rgba(255,140,90,0.06);
  border: 1px dashed rgba(255,140,90,0.45);
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.structure-slot-pick:hover {
  background: rgba(255,140,90,0.14);
  border-color: var(--accent);
}
.structure-slot-empty {
  color: var(--ink-faint);
  font-style: italic;
}

/* Slot picker sheet — list of suggestions */
.slot-picker-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.slot-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 10px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.slot-picker-row:hover {
  background: rgba(255,140,90,0.10);
  color: var(--ink-bright);
}

/* Action row at the bottom of any draft editor */
.create-action-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-strong);
}
.create-action-row .btn:first-child { flex: 1; }

/* ============================================================================
   v54 — Cost view upgrade (editable menu price + GP $ + engineering matrix)
   ============================================================================ */

/* Sort row */
.cost-sort-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
}
.cost-sort-label {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 11px;
  margin-right: 4px;
}
.cost-sort-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.cost-sort-btn.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* Per-drink table */
.cost-table-head, .cost-table-row {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 0.9fr 0.6fr 0.7fr 0.7fr;
  gap: 6px;
  align-items: center;
  padding: 6px 4px;
}
.cost-table-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 700;
  border-bottom: 1px solid var(--rule-strong);
  padding: 8px 4px;
}
.cost-th { text-align: right; }
.cost-th:first-child { text-align: left; }

.cost-table-row {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.cost-row-name {
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cost-row-cost {
  text-align: right;
  font-family: var(--mono);
  color: var(--ink-dim);
}
.cost-row-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.cost-row-menu .cost-currency {
  font-size: 12px;
  color: var(--ink-faint);
  position: absolute;
  left: 6px;
}
.cost-row-price-input {
  width: 100%;
  padding: 4px 4px 4px 14px !important;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
}
.cost-row-pourpct {
  text-align: right;
  font-family: var(--mono);
  color: var(--ink-dim);
  font-weight: 500;
}
.cost-row-pourpct.warn { color: var(--maraschino); font-weight: 700; }
.cost-row-pourpct.good { color: var(--bottle-2); font-weight: 700; }
.cost-row-gp {
  text-align: right;
  font-family: var(--mono);
  color: var(--ink);
  font-weight: 600;
}
.cost-row-velocity {
  display: flex;
  justify-content: flex-end;
}
.cost-row-vel-input {
  width: 100%;
  padding: 4px 6px !important;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
}

/* Summary stats — accent variant for weekly GP */
.cost-summary-stat-accent .cost-summary-num { color: var(--accent); }

/* Engineering matrix */
.cost-eng-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.cost-eng-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.cost-eng-stat-accent { border-color: var(--accent); }
.cost-eng-stat-accent .cost-eng-num { color: var(--accent); }
.cost-eng-num {
  font-family: var(--serif-display);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 2px;
}
.cost-eng-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.cost-eng-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) {
  .cost-eng-matrix { grid-template-columns: 1fr; }
}
.cost-eng-bucket {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 12px;
}
.cost-eng-bucket-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.cost-eng-bucket-advice {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 8px;
}
.cost-eng-bucket-empty {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}
.cost-eng-bucket-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cost-eng-bucket-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cost-eng-bucket-list li:last-child { border-bottom: 0; }
.cost-eng-bucket-name { color: var(--ink); }
.cost-eng-bucket-meta {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
}

/* Settings */
.cost-settings-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}
.cost-settings-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.cost-settings-hint {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin-bottom: 10px;
}
.cost-settings-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 140px;
}
.cost-settings-input { flex: 1; font-family: var(--mono); }
.cost-settings-suffix {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 14px;
}

/* ============================================================================
   v54 — Allergen flags: cocktail detail badges
   ============================================================================ */
.detail-allergens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(255, 92, 77, 0.08);
  border: 1px solid rgba(255, 92, 77, 0.30);
  border-radius: 4px;
}
.detail-allergens-label {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 4px;
}
.detail-allergen-chip {
  background: var(--red);
  color: var(--on-accent);
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================================
   v54 — Recents row + ingredient reverse lookup + tappable ingredient name
   ============================================================================ */

/* Recents row at the top of Specs (no-filter view only) */
.recents-row {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.recents-row-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 8px;
}
.recents-row-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recents-pill {
  background: rgba(255, 140, 90, 0.10);
  border: 1px solid rgba(255, 140, 90, 0.35);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-family: var(--serif-display);
  font-weight: 500;
  cursor: pointer;
}
.recents-pill:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Tappable ingredient name — opens the encyclopedia entry inline.
   Subtle dashed underline in the active theme accent so the affordance
   reads as a footnote-style link in a printed cocktail book, not a
   button or a pill. Each theme tints it via var(--accent). */
.ingredient-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline dashed var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-text-decoration: underline dashed var(--accent);
  transition: color .15s, text-decoration-color .15s;
}
.ingredient-link:hover,
.ingredient-link:focus-visible {
  color: var(--accent);
  text-decoration-style: solid;
  outline: none;
}

/* Ingredient lookup sheet — list of cocktails sharing an ingredient */
.ingredient-lookup-list { display: flex; flex-direction: column; }
.ingredient-lookup-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 12px 6px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.ingredient-lookup-row:hover { background: rgba(255,140,90,0.08); }
.ingredient-lookup-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.ingredient-lookup-meta {
  font-size: 12px;
  color: var(--ink-dim);
  font-style: italic;
}

/* v54 — Settings: Spec online account form */
.settings-supabase-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--rule);
}
.settings-supabase-form .input { flex: 1; }
.settings-supabase-form .btn { white-space: nowrap; }
.settings-row-info {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}

/* ============================================================================
   v54 — UX polish: drag-to-dismiss, larger glove targets, type-ahead
   ============================================================================ */

/* iOS-style drag handle at the top of every sheet */
.sheet-drag-handle {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule-strong);
  margin: 8px auto 4px;
  flex-shrink: 0;
  opacity: 0.6;
  cursor: grab;
}
.sheet-drag-handle:active { cursor: grabbing; opacity: 0.9; }
.sheet-header { cursor: default; }
@media (pointer: coarse) {
  /* On touch devices, indicate the header is grabbable too */
  .sheet-header { cursor: grab; }
}

/* Bottom-tab glove targets: bump min-height + tap area */
.bottom-tab {
  min-height: 60px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.bottom-tab svg { width: 22px; height: 22px; }

/* v54: type-ahead search suggestions — surfaces below the search box */
.specs-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.specs-search-suggestions {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  margin-top: 4px;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
  /* Empty by default; only takes space when populated */
}
.specs-search-suggestions:empty { display: none; }
.specs-search-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.specs-search-suggestion:last-child { border-bottom: 0; }
.specs-search-suggestion:hover {
  background: rgba(255, 140, 90, 0.10);
}
.specs-search-sugg-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.specs-search-sugg-meta {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

/* v54 — Walkthrough sheet (Settings → How to use Spec) */
.walkthrough-body-wrap {
  text-align: center;
  padding: 12px 4px 4px;
}
.walkthrough-counter {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 12px;
}
.walkthrough-title {
  font-family: var(--serif-display);
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.15;
}
.walkthrough-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  font-family: var(--serif);
  margin: 0 0 24px;
  text-align: left;
}
.walkthrough-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}
.walkthrough-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.walkthrough-dot.on {
  background: var(--accent);
}

/* ============================================================================
   v54 — Create rebuild: Flavor Compass + Seasonal + refined Riff
   ============================================================================ */

/* COMPASS — descriptor grid */
.compass-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
@media (max-width: 380px) {
  .compass-grid { grid-template-columns: repeat(3, 1fr); }
}
.compass-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 4px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: transform 100ms ease, background 100ms ease;
}
.compass-chip:hover {
  transform: scale(1.02);
}
/* Compass flavor groups — routed through theme tokens so the chips
   pick up each theme's vocabulary instead of fixed Tiki Sunset hues.
   warm → brass-light (gold-leaf / brass / champagne / amber)
   bright → absinthe (sun yellow / champagne / doubloon)
   aromatic → accent-2 (peach / platinum-light / brass-light / coral)
   dark → spirit-liqueur (violet — universal across themes) */
.compass-chip[data-group="warm"]     { color: var(--brass-light);    border-color: var(--rule-faint); }
.compass-chip[data-group="bright"]   { color: var(--absinthe);       border-color: var(--rule-gold);  }
.compass-chip[data-group="aromatic"] { color: var(--accent-2);       border-color: var(--rule-faint); }
.compass-chip[data-group="dark"]     { color: var(--spirit-liqueur); border-color: var(--rule-faint); }
.compass-chip.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
  transform: scale(1.04);
}
/* Active-state fills mirror the chip text colors so the chip looks like
   it's been "lit up" in the same hue family. Inverted ink gets routed
   through --on-accent / --bg per theme so it stays legible. */
.compass-chip.on[data-group="warm"]     { background: var(--brass-light);    color: var(--on-accent); }
.compass-chip.on[data-group="bright"]   { background: var(--absinthe);       color: var(--on-accent); }
.compass-chip.on[data-group="aromatic"] { background: var(--accent-2);       color: var(--on-accent); }
.compass-chip.on[data-group="dark"]     { background: var(--spirit-liqueur); color: var(--ink-bright); }

/* Summary + clear */
.compass-summary {
  margin-bottom: 12px;
}
.compass-summary-empty {
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}
.compass-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compass-summary-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}

/* Compass results — bridges, matches, build CTA */
.compass-results { display: flex; flex-direction: column; gap: 14px; }
.compass-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
}
.compass-section-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 10px;
}

/* Bridges */
.compass-bridge {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.compass-bridge:last-child { border-bottom: 0; padding-bottom: 0; }
.compass-bridge-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.compass-bridge-tag {
  background: rgba(255, 140, 90, 0.14);
  color: var(--accent-2);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.compass-bridge-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  font-family: var(--serif);
  margin: 0 0 8px;
}
.compass-bridge-tension {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif);
  margin: 0 0 8px;
}
.compass-tension-label {
  color: var(--maraschino);
  font-weight: 700;
  font-style: normal;
}
.compass-bridge-anchors,
.compass-bridge-exemplars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.compass-anchor-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-right: 2px;
}
.compass-anchor-chip {
  background: rgba(255,255,255,0.06);
  color: var(--ink-dim);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.compass-exemplar-chip {
  background: rgba(255, 214, 103, 0.10);
  border: 1px solid rgba(255, 214, 103, 0.40);
  color: var(--brass);
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}
.compass-exemplar-chip:hover {
  background: rgba(255, 214, 103, 0.20);
}
.compass-exemplar-chip.muted {
  background: rgba(255,255,255,0.03);
  border-color: var(--rule);
  color: var(--ink-faint);
  cursor: default;
}

/* Matches grid */
.compass-matches { display: flex; flex-direction: column; gap: 1px; }
.compass-match {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 6px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.compass-match:hover { background: rgba(255,140,90,0.08); }
.compass-match-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.compass-match-kind {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 400;
}
.compass-match-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.compass-match-tag.on {
  background: rgba(255, 140, 90, 0.18);
  color: var(--accent-2);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.compass-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compass-build-btn {
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-weight: 600;
}

/* SEASONAL — month + region toggles */
.seasonal-month-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.seasonal-month-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 14px;
  cursor: pointer;
  flex: 1 0 auto;
  min-width: 50px;
  text-align: center;
}
.seasonal-month-pill.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
}

.seasonal-region-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.seasonal-region-pill {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.seasonal-region-pill.on {
  background: rgba(255, 140, 90, 0.14);
  border-color: var(--accent);
  color: var(--accent-2);
  font-weight: 600;
}

.seasonal-note {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
}
.seasonal-note-month {
  font-family: var(--serif-display);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 4px;
}
.seasonal-note-essay {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  font-family: var(--serif);
  margin: 0;
  font-style: italic;
}

.seasonal-section-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin: 16px 0 8px;
}

.seasonal-featured {
  display: flex;
  flex-direction: column;
}
.seasonal-featured-row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 214, 103, 0.06);
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 8px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.seasonal-featured-row:hover { background: rgba(255, 214, 103, 0.14); }
.seasonal-featured-row.muted { background: rgba(255,255,255,0.02); cursor: default; }
.seasonal-featured-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.seasonal-featured-meta {
  font-size: 12px;
  color: var(--ink-dim);
  font-style: italic;
}

.seasonal-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
@media (min-width: 600px) {
  .seasonal-ingredient-grid { grid-template-columns: repeat(3, 1fr); }
}
.seasonal-ingredient {
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: inherit;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}
.seasonal-ingredient.peak {
  border-color: var(--accent);
  background: rgba(255, 140, 90, 0.06);
}
.seasonal-ingredient:hover {
  background: rgba(255, 140, 90, 0.10);
}
.seasonal-ingredient-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.seasonal-ingredient-meta {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  text-transform: capitalize;
}

/* RIFF — variant detection banner + inline subs row */
.riff-variant-banner {
  margin-bottom: 12px;
  /* empty banner is invisible; populated by _maybeDetectVariant */
}
.riff-variant-banner:empty { display: none; }
.riff-variant-detected {
  background: rgba(255, 214, 103, 0.10);
  border: 1px solid rgba(255, 214, 103, 0.40);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
  font-family: var(--serif);
}
.riff-variant-icon {
  color: var(--brass);
  font-size: 14px;
}
.riff-variant-link {
  background: none;
  border: 0;
  color: var(--accent-2);
  font-family: inherit;
  font-style: italic;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.riff-variant-link:hover { color: var(--accent); }

.riff-ing-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.riff-ing-subs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 76px;  /* align with the name button column */
  margin-bottom: 8px;
}
.riff-ing-sub-pill {
  background: rgba(255, 140, 90, 0.06);
  border: 1px dashed rgba(255, 140, 90, 0.35);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.riff-ing-sub-pill:hover {
  background: rgba(255, 140, 90, 0.16);
  color: var(--ink);
  border-style: solid;
}

/* ============================================================
   v55 — Theme picker tiles + ornamental glyphs per theme
   ============================================================ */

/* === Settings → Look & feel — theme picker grid === */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0 4px;
}

.theme-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 16px;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-tile:hover {
  border-color: var(--rule-strong);
}
.theme-tile.is-active {
  border-color: var(--accent);
  border-width: 2px;
  padding: 13px 13px 15px;        /* compensate for thicker border */
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-faint);
}

.theme-tile-swatch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  border: var(--hairline) solid var(--rule);
}
.theme-tile-quad { width: 100%; height: 100%; }

.theme-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.theme-tile-name {
  font-family: var(--serif-display);
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--ink-bright);
}
.theme-tile-bar {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2px;
}
.theme-tile-mood {
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* === Theme-aware ornamental dividers ===
   Section dividers can opt into the per-theme glyph by adding the
   .ornament class. Examples:
       <div class="section-mark"></div>     → fleuron / lozenge / etc.
       <hr class="ornament-rule">           → glyph centered between rules
   The actual glyph is sourced from --ornament-divider, which each
   [data-theme="X"] block sets independently. */
.section-mark {
  font-family: var(--serif-display);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  margin: 18px 0;
  letter-spacing: 4px;
  user-select: none;
}
.section-mark::before {
  content: var(--ornament-divider);
}

.ornament-rule {
  border: 0;
  height: 18px;
  position: relative;
  margin: 22px 0;
  text-align: center;
}
.ornament-rule::before,
.ornament-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 18px);
  height: var(--hairline);
  background: var(--rule-gold);
}
.ornament-rule::before { left: 0; }
.ornament-rule::after  { right: 0; }
.ornament-rule > span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: var(--bg);
  font-family: var(--serif-display);
  font-size: 14px;
  color: var(--accent);
  line-height: 18px;
  letter-spacing: 2px;
}
.ornament-rule > span::before {
  content: var(--ornament-divider);
}

/* === Theme-aware drop caps ===
   Apply .dropcap to the first letter of a paragraph (or use a span
   wrapper). Each theme gets its own color + shadow recipe. The
   typeface is the theme's display face, so it carries the theme
   voice without needing per-theme CSS rules. */
.dropcap {
  float: left;
  font-family: var(--serif-display);
  font-size: 3.4em;
  line-height: 0.85;
  padding: 6px 8px 0 0;
  margin-top: 4px;
  color: var(--dropcap-color);
  text-shadow: var(--dropcap-shadow);
  font-feature-settings: "lnum";
}

/* Connaught: tighter Deco geometry — the lozenge is a thin glyph,
   center it visually with extra letter-spacing on the section mark. */
[data-theme="connaught"] .section-mark {
  letter-spacing: 8px;
  font-size: 14px;
}

/* Maison Premiere: laurel-flower ornament reads bigger; tone it down. */
[data-theme="maison-premiere"] .section-mark {
  font-size: 16px;
  letter-spacing: 6px;
}

/* Smuggler's Cove: compass star reads loud — keep tight. */
[data-theme="smugglers-cove"] .section-mark {
  font-size: 17px;
  letter-spacing: 6px;
}

/* ============================================================
   v56 — Pre-batch row at the bottom of the recipe sheet
   ============================================================
   The button on every recipe that hands the cocktail to Batch.
   Sits flush right with a hairline above so it reads as a
   discrete action, not a continuation of the spec body. */
.detail-prebatch-row {
  display: flex;
  justify-content: flex-end;
  margin: 18px 0 4px;
  padding-top: 14px;
  border-top: var(--hairline) solid var(--rule-faint);
}
.detail-prebatch-row .btn {
  font-family: var(--serif-display);
  letter-spacing: 0.6px;
}

/* ============================================================
   v62 — CREATE rebuild: Doors row + Build slot editor
   ============================================================
   The Create tab is now structure-first. Above Build is a slim
   four-tile doors row (Structure / Compass / Seasonal / Canon).
   Build is the destination — a slot-based editor where each row
   is a printed cocktail-menu line: amount · unit · ingredient.
*/

.create-doors-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 0 14px;
  border-bottom: var(--hairline) solid var(--rule-faint);
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .create-doors-row {
    grid-template-columns: 1fr 1fr;
  }
}
.create-door-tile {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  min-height: 64px;
}
.create-door-tile:hover {
  border-color: var(--rule-gold);
  background: rgba(255, 214, 103, 0.05);
}
.create-door-tile.primary {
  border-color: var(--rule-gold);
}
.create-door-tile.on {
  border-color: var(--accent);
  background: rgba(255, 140, 90, 0.08);
}
.create-door-tile.on .create-door-label { color: var(--accent); }
.create-door-label {
  font-family: var(--serif-display);
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
}
.create-door-blurb {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-dim);
  font-style: italic;
  font-family: var(--serif-italic);
}

.create-door-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 18px;
}
.create-door-h h2 {
  font-family: var(--serif-display);
  font-size: 22px;
  margin: 4px 0 6px;
  color: var(--ink);
}
.create-door-h p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
  font-style: italic;
  font-family: var(--serif-italic);
  margin: 0 0 6px;
}

/* STRUCTURE picker — 6 editorial tiles */
.structure-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) {
  .structure-grid { grid-template-columns: repeat(3, 1fr); }
}
.structure-tile {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
  padding: 14px 14px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
  min-height: 120px;
}
.structure-tile:hover {
  border-color: var(--accent);
  background: rgba(255, 140, 90, 0.05);
}
.structure-tile-name {
  font-family: var(--serif-display);
  font-size: 19px;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.structure-tile-blurb {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.structure-tile-exemplars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: auto;
  padding-top: 6px;
  border-top: var(--hairline) dashed var(--rule-faint);
}
.structure-tile-ex {
  font-size: 11px;
  font-style: italic;
  font-family: var(--serif-italic);
  color: var(--ink-faint);
}

/* COMPASS — Build CTA panel */
.compass-build-cta {
  margin-top: 6px;
  padding: 12px 14px;
  border: var(--hairline) solid var(--rule-gold);
  border-radius: 6px;
  background: rgba(255, 214, 103, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compass-build-cta-line {
  font-size: 13px;
  color: var(--ink);
  font-family: var(--serif);
}
.compass-build-cta-line strong {
  color: var(--accent);
  font-weight: 600;
}
.compass-build-btn {
  align-self: flex-start;
}

/* BUILD HEADER */
.build-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 8px;
  border-bottom: var(--hairline) solid var(--rule-faint);
  margin-bottom: 14px;
}
.build-back {
  flex-shrink: 0;
}
.build-head-meta {
  font-size: 12.5px;
  color: var(--ink-dim);
  text-align: right;
  flex: 1;
  line-height: 1.3;
}
.build-head-structure {
  font-family: var(--serif-display);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.build-head-blurb {
  font-style: italic;
  font-family: var(--serif-italic);
  color: var(--ink-faint);
  font-size: 12px;
}
.build-head-sep { color: var(--rule-faint); }

.build-name {
  width: 100%;
  font-family: var(--serif-display);
  font-size: 22px;
  padding: 12px 8px;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule-faint);
  background: transparent;
  margin-bottom: 14px;
}
.build-name:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}

/* BUILD VARIANT BANNER — passive, never blocks */
.build-variant-banner { margin-bottom: 12px; }
.build-variant-banner:empty { display: none; }
.build-variant-detected {
  background: rgba(255, 214, 103, 0.10);
  border: 1px solid rgba(255, 214, 103, 0.40);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
  font-family: var(--serif);
}
.build-variant-icon {
  color: var(--brass);
  font-size: 14px;
}
.build-variant-link {
  background: none;
  border: 0;
  color: var(--accent-2);
  font-family: inherit;
  font-style: italic;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.build-variant-link:hover { color: var(--accent); }

/* BUILD SLOTS — printed-menu leader-dot lines */
.build-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.build-section-h {
  font-family: var(--serif-display);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 6px 0 4px;
}
.build-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 10px;
  border-bottom: var(--hairline) dashed var(--rule-faint);
}
.build-slot:last-child { border-bottom: 0; }
.build-slot.required .build-slot-label {
  color: var(--ink);
}
.build-slot.accent .build-slot-label {
  color: var(--accent-2);
}
.build-slot-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.build-slot-label {
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.build-slot-optional {
  font-size: 10.5px;
  font-style: italic;
  font-family: var(--serif-italic);
  color: var(--ink-faint);
  letter-spacing: 0.4px;
}
.build-slot-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  font-family: var(--serif);
}
.build-slot-amt,
.build-slot-unit {
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) dashed var(--rule-faint);
  padding: 4px 2px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}
.build-slot-unit {
  width: 56px;
  text-align: left;
  color: var(--ink-dim);
}
.build-slot-amt:focus,
.build-slot-unit:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}
.build-slot-leader {
  flex: 1;
  border-bottom: var(--hairline) dotted var(--rule-faint);
  margin: 0 4px 6px;
  min-width: 16px;
}
.build-slot-name {
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) dashed transparent;
  text-align: left;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 6px;
  flex: 0 0 auto;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.build-slot-name:hover {
  border-bottom-color: var(--rule-gold);
  color: var(--accent);
}
.build-slot-name.filled {
  color: var(--ink);
  font-weight: 500;
}
.build-slot-name-empty {
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif-italic);
}
.build-slot-remove {
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.build-slot-remove:hover { color: var(--red); }
.build-slot-add {
  align-self: flex-start;
  margin-top: 4px;
}

/* BUILD META — glass / method / ice */
.build-meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 12px;
  border-top: var(--hairline) solid var(--rule-faint);
  border-bottom: var(--hairline) solid var(--rule-faint);
}
.build-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.build-meta-label {
  font-family: var(--serif-display);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.build-meta-value {
  font-size: 13px;
  color: var(--ink);
  font-family: var(--serif);
}

/* SAVE row */
.build-save {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--serif-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* SLOT PICKER sheet */
.slot-pick-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.slot-pick-row {
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) dotted var(--rule-faint);
  text-align: left;
  padding: 10px 8px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.slot-pick-row:hover { background: rgba(255, 140, 90, 0.06); }
.slot-pick-row.selected {
  color: var(--accent);
  font-weight: 600;
}
.slot-pick-row.custom {
  font-style: italic;
  font-family: var(--serif-italic);
  color: var(--accent-2);
}
.slot-pick-subs {
  margin-top: 8px;
  padding: 8px 0;
  border-top: var(--hairline) solid var(--rule-faint);
  border-bottom: var(--hairline) solid var(--rule-faint);
}
.slot-pick-subs-h {
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.slot-pick-subs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* BUILD SAVE confirm strip in the promote sheet */
.build-save-confirm {
  padding: 10px 12px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: var(--hairline) solid var(--rule-faint);
}
.build-save-confirm-title {
  font-family: var(--serif-display);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.build-save-confirm-meta {
  font-size: 12px;
  font-style: italic;
  font-family: var(--serif-italic);
  color: var(--ink-dim);
}

/* ============================================================
   v63 — Daily Pour popup
   ============================================================
   Editorial cocktail-of-the-day card. Opens once per day on app
   launch. Feels like flipping the cocktail column in today's
   newspaper, not getting a notification. */
.daily-pour {
  text-align: center;
  padding: 16px 8px 4px;
  font-family: var(--serif);
  color: var(--ink);
}
.daily-pour-eyebrow {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.daily-pour-headline {
  font-family: var(--serif-display);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.daily-pour-headline::before,
.daily-pour-headline::after {
  content: "—";
  margin: 0 10px;
  color: var(--rule-gold);
}
.daily-pour-cocktail {
  font-family: var(--serif-display);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: var(--ink-bright);
  margin: 8px 24px 6px;
}
.daily-pour-family {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.daily-pour-note {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 16px 22px;
  font-style: italic;
}
.daily-pour-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: var(--hairline) solid var(--rule-faint);
}
.daily-pour-ctas .btn {
  font-family: var(--serif-display);
  letter-spacing: 0.6px;
  min-width: 200px;
}

/* ============================================================
   v67 — Wake-lock indicator + dog-ear corner
   ============================================================ */

/* #12 — Wake-lock indicator on recipe sheet.
   Renders only after holdWakeLock() resolves AND isWakeLockHeld()
   returns true (so we don't pretend on browsers without the API).
   Subtle italic line + a softly pulsing dot in the active accent.
   Lives at the bottom of sheet body; print stylesheet hides it. */
.wake-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 6px;
  padding: 6px 0 0;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.2px;
  border-top: var(--hairline) dashed var(--rule-faint);
  padding-top: 10px;
}
.wake-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 currentColor;
  animation: wake-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wake-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
.wake-indicator-text { line-height: 1; }
@media print {
  .wake-indicator { display: none !important; }
}

/* #16 — Dog-ear corner on starred cocktail cards.
   Matches the walkthrough copy "Tap the ★ on any cocktail card to
   dog-ear it." CSS-only triangle in the active accent, top-right
   corner, sits BEHIND the existing star button via z-index. We use
   :has() (Safari 15.4+, Chrome 105+) so the rule is purely visual
   and doesn't require adding a new class on every render. */
.cocktail-card:has(.card-star.on) {
  position: relative;
}
.cocktail-card:has(.card-star.on)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent var(--accent) transparent transparent;
  pointer-events: none;
  z-index: 1;
  /* Soft fold-shadow under the dog-ear so it reads as paper, not paint. */
  filter: drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.18));
  opacity: 0.9;
}
@media print {
  /* Don't print the dog-ear — paper has its own physical corners. */
  .cocktail-card:has(.card-star.on)::before { display: none !important; }
}

/* ============================================================
   v68 — Page-turn animation + theme tile preview state
   ============================================================ */

/* #13 — Page-turn on every route change.
   Subtle slide-from-right on the view container. ~220ms, eases out so
   it lands cleanly. We skip the animation when prefers-reduced-motion
   is set so vestibular-sensitive users aren't queasied. */
@keyframes spec-page-turn {
  from { transform: translateX(14px); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1;   }
}
.view.page-turn {
  animation: spec-page-turn 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .view.page-turn { animation: none; }
}

/* #14 — Theme tile preview state.
   While a tile is being long-pressed, give it a soft scale-up + accent
   ring so the bartender feels their finger is "weighing" the binding.
   Releasing commits (handled in JS); sliding off reverts. */
.theme-tile.is-previewing {
  transform: scale(1.02);
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    inset 0 0 0 1px var(--rule-faint);
  transition: transform 120ms cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 120ms ease,
              box-shadow 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .theme-tile.is-previewing { transform: none; }
}

/* ============================================================
   v71 — Onboarding (first-run welcome / profile / binding)
   ============================================================ */
.onboarding { padding: 16px 8px 4px; font-family: var(--serif); color: var(--ink); }
.onboarding-eyebrow {
  font-family: var(--serif-italic); font-style: italic; font-size: 13px;
  color: var(--ink-dim); letter-spacing: 0.4px; text-align: center; margin-bottom: 12px;
}
.onboarding-title {
  font-family: var(--serif-display); font-size: 28px; line-height: 1.15;
  color: var(--ink-bright); text-align: center; margin: 0 16px 16px;
}
.onboarding-body {
  font-family: var(--serif); font-size: 14px; line-height: 1.6;
  color: var(--ink); margin: 0 16px 16px; text-align: left;
}
.onboarding-disclaimer {
  font-family: var(--serif); font-size: 12px; line-height: 1.55;
  color: var(--ink-faint); font-style: italic; margin: 0 16px 20px;
  border-top: var(--hairline) dashed var(--rule-faint);
  padding-top: 12px;
}
.onboarding-form {
  display: flex; flex-direction: column; gap: 10px; margin: 12px 16px 18px;
}
.onboarding-ctas {
  display: flex; flex-direction: row; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-top: 12px; padding: 12px 8px 4px;
  border-top: var(--hairline) solid var(--rule-faint);
}
.onboarding-ctas .btn {
  font-family: var(--serif-display); letter-spacing: 0.6px;
}
.onboarding-bindings {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 8px 12px 18px;
}
.onboarding-binding {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; background: var(--bg-2);
  border: var(--hairline) solid var(--rule); border-radius: var(--radius);
  cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.onboarding-binding.is-active {
  border-color: var(--accent); border-width: 2px; padding: 11px;
  background: var(--surface);
}
.onboarding-binding-swatch {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  width: 44px; height: 44px; border-radius: var(--radius); overflow: hidden;
  border: var(--hairline) solid var(--rule);
}
.onboarding-binding-quad { width: 100%; height: 100%; }
.onboarding-binding-name {
  font-family: var(--serif-display); font-size: 15px; color: var(--ink-bright);
}
.onboarding-binding-bar {
  font-family: var(--serif-italic); font-style: italic; font-size: 11px;
  color: var(--accent); letter-spacing: 0.2px;
}

/* ============================================================
   v75 — Create reframe: compact seed rail, Spirit door, feedback panel
   ============================================================
   The 4-door layout was cumbersome — tall tiles with blurbs each
   acted like a sub-tab, and every door pick swapped a big panel
   in/out of view. v75 collapses the rail to compact pills with
   labels only; the blurb lives only in the drawer header that
   opens below. Result: the seed rail reads as ONE affordance,
   not four sub-tabs.

Canon is gone — replaced by a Spirit door (the way bartenders
   actually start a build). Canon-as-riff lives on cocktail recipe
   sheets now via "Riff this →".

Below Build, a new feedback panel speaks in five voices (variant
   match, ratio coach, flavor bridge, missing dimension, seasonal
   pull) so Create stops being a slot-filler and starts being a
   senior bartender looking over the shoulder.
   ============================================================ */

/* Compact seed rail — overrides the v62 .create-doors-row grid.
   Was: 4 tall tiles (label + italic blurb) on a 1.4fr 1fr 1fr 1fr grid.
   Now: a horizontal pill strip, labels only, drawer-style. */
.create-doors-row {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  padding: 4px 0 12px !important;
  margin-bottom: 10px !important;
}
.create-door-tile {
  min-height: 0 !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  background: var(--bg-2) !important;
}
.create-door-tile .create-door-blurb {
  /* Blurb hidden in the pill itself — it surfaces only in the drawer
     header, where it can be readable. Keeps the rail tight. */
  display: none !important;
}
.create-door-tile .create-door-label {
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.create-door-tile.on {
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.14) !important;
}
@media (max-width: 540px) {
  .create-doors-row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  .create-door-tile {
    padding: 7px 6px !important;
  }
  .create-door-tile .create-door-label {
    font-size: 10.5px;
    letter-spacing: 1px;
  }
}

/* === Spirit door (v75 — replaces Canon door) === */
.spirit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.spirit-tile {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 120ms ease, background 120ms ease;
}
.spirit-tile:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.04);
}
.spirit-tile.on {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.10);
}
.spirit-tile-name {
  font-family: var(--serif-display);
  font-size: 16px;
  color: var(--ink-bright);
  letter-spacing: 0.3px;
}
.spirit-tile-flavors {
  font-size: 11.5px;
  color: var(--ink-dim);
  font-style: italic;
  font-family: var(--serif-italic);
}

.spirit-empty {
  padding: 14px 12px;
  font-style: italic;
  font-family: var(--serif-italic);
  color: var(--ink-dim);
  font-size: 13.5px;
  text-align: center;
  border-top: var(--hairline) dashed var(--rule-faint);
  margin-top: 4px;
}
.spirit-suggest-h {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-dim);
  margin: 6px 0 8px;
}
.spirit-suggest-h strong {
  color: var(--accent);
  font-style: normal;
  font-family: var(--serif-display);
  letter-spacing: 0.3px;
}
.spirit-suggest-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .spirit-suggest-row { grid-template-columns: 1fr; }
}
.spirit-suggest-tile {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 120ms ease, background 120ms ease;
}
.spirit-suggest-tile:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.05);
}
.spirit-suggest-tile.primary {
  border-color: var(--rule-gold);
}
.spirit-suggest-name {
  font-family: var(--serif-display);
  font-size: 15px;
  color: var(--ink-bright);
}
.spirit-suggest-blurb {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-dim);
  font-style: italic;
  font-family: var(--serif-italic);
}
.spirit-exemplars-h {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px 0 8px;
  border-top: var(--hairline) dashed var(--rule-faint);
  padding-top: 12px;
}
.spirit-exemplars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spirit-exemplar-chip {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.spirit-exemplar-chip:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.05);
}

/* === Feedback panel (v75 — "senior bartender voice") === */
.fb-panel {
  margin: 18px 0 14px;
  border-top: var(--hairline) solid var(--rule-faint);
  padding-top: 14px;
}
.fb-panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.fb-panel-h-mark {
  font-size: 7px;
  line-height: 1;
  color: var(--accent);
}
.fb-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fb-card {
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.04);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fb-card-label {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.fb-card-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.fb-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fb-tag {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-dim);
  padding: 1px 8px;
  border: 1px solid var(--rule-faint);
  border-radius: 999px;
}
.fb-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rule-gold);
  text-underline-offset: 2px;
  cursor: pointer;
}
.fb-link:hover {
  color: var(--accent-2);
}
/* Tone the cards by voice so the bartender clocks at-a-glance which
   note is firing. Variant = gold (it's praise), Ratio = warm (it's
   correction), Bridge = neutral, Missing = warning, Seasonal = sage. */
.fb-card.fb-variant   { border-left-color: var(--brass); background: rgba(var(--brass-rgb, 201, 161, 77), 0.06); }
.fb-card.fb-ratio     { border-left-color: var(--copper); background: rgba(var(--accent-rgb, 200, 152, 88), 0.05); }
.fb-card.fb-bridge    { border-left-color: var(--accent); background: rgba(var(--accent-rgb, 200, 152, 88), 0.04); }
.fb-card.fb-missing   { border-left-color: var(--maraschino); background: rgba(var(--maraschino-rgb, 153, 68, 58), 0.05); }
.fb-card.fb-seasonal  { border-left-color: var(--bottle); background: rgba(var(--bottle-rgb, 107, 136, 86), 0.06); }

/* ============================================================
   v74 — Page-edge gilding on cocktail cards
   ============================================================
   The diagnosis: Connaught reads as a different world because
   you feel its cool palette everywhere — the spirit-band on the
   left edge of every card. The other bindings have palettes but
   no second "signature moment." v74 adds one: a thin gilded line
   on the RIGHT edge of every cocktail card, theme-colored. The
   spirit band still tells you what's in the drink. The page edge
   tells you what edition of the book you're reading. Subtle, but
   present on every card on every screen.

--page-edge-color is declared per theme block. The pseudo sits
   below the dog-ear (z-index ≤ 0) so favorites still read on top.
   ============================================================ */
.cocktail-card::after {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--page-edge-color, var(--rule-gold)) 18%,
    var(--page-edge-color, var(--rule-gold)) 82%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 200ms ease, width 200ms ease;
}
.cocktail-card:hover::after {
  opacity: 1;
  width: 2px;
}
@media print {
  /* Page-edge is a screen affordance. Printed paper has its own
     physical edge — don't double it up with ink. */
  .cocktail-card::after { display: none !important; }
}

/* ============================================================
   v76 — RESUME / PORTFOLIO BUILDER
   ============================================================
   Career infrastructure for bartenders. Daily journaling becomes
   a living portfolio that can be exported to a 1-page resume PDF
   or multi-page portfolio PDF, themed in the active binding so
   the document is identifiably theirs.

Two surfaces:
     1. Screen editor (.resume-stats, .resume-section, .resume-field…)
     2. Print layout  (.resume-print, .resume-print-section…)
   The print stylesheet near the bottom of this block flips display
   when body.printing-resume is set, hiding the app shell and
   showing the .resume-print-root injected into <body>.
   ============================================================ */

/* === Editor: stats panel === */
.resume-stats {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.05);
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
}
.resume-stats-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.resume-stats-h-mark { font-size: 7px; line-height: 1; }
.resume-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 540px) {
  .resume-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.resume-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 4px;
  border-left: 2px solid var(--rule-gold);
  padding-left: 10px;
}
.resume-stat-value {
  font-family: var(--serif-display);
  font-size: 24px;
  line-height: 1;
  color: var(--ink-bright);
  letter-spacing: 0.5px;
}
.resume-stat-label {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  color: var(--ink-dim);
  font-family: var(--serif-italic);
  font-style: italic;
}
.resume-stat-sub {
  font-size: 10.5px;
  color: var(--ink-faint);
  font-family: var(--sans);
  margin-top: 2px;
}
.resume-stats-meta {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-dim);
  border-top: var(--hairline) dashed var(--rule-faint);
  padding-top: 8px;
  margin-top: 6px;
}

/* === Editor: sections === */
.resume-section-h {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: var(--hairline) solid var(--rule-faint);
}
.resume-section-h h2 {
  font-family: var(--serif-display);
  font-size: 20px;
  color: var(--ink-bright);
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}
.resume-section-blurb {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}
.resume-section {
  display: flex; flex-direction: column; gap: 10px;
}
.resume-empty {
  padding: 12px 14px;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.03);
  border-left: 2px solid var(--rule-faint);
  border-radius: 4px;
}

/* === Editor: fields === */
.resume-field {
  display: flex; flex-direction: column; gap: 4px;
}
.resume-field-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.resume-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* === Editor: chip pickers (spirit focus + techniques) === */
.resume-chip-picker {
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.02);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--rule-faint);
}
.resume-chip-picker-h {
  font-family: var(--serif-display);
  font-size: 14px;
  color: var(--ink-bright);
  margin-bottom: 4px;
}
.resume-chip-picker-hint {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.resume-chip-selected {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
  min-height: 32px;
}
.resume-chip-empty {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
}
.resume-chip-suggested-h {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 8px 0 6px;
}
.resume-chip-suggested {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.resume-chip {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.resume-chip:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.06);
}
.resume-chip.on {
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.18);
  border-color: var(--accent);
  color: var(--ink-bright);
}
.resume-chip-x { opacity: 0.7; }
.resume-chip-add {
  margin-top: 4px;
  font-size: 13px;
}

/* === Editor: work history rows === */
.resume-work-list { display: flex; flex-direction: column; gap: 14px; }
.resume-work-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
}
.resume-work-row-fields {
  display: flex; flex-direction: column; gap: 10px;
}
.resume-work-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.resume-current-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-dim);
  font-family: var(--serif-italic);
  font-style: italic;
}
.resume-row-remove { color: var(--maraschino); }

/* === Editor: cert / award / ref rows === */
.resume-cert-list, .resume-award-list, .resume-ref-list {
  display: flex; flex-direction: column; gap: 8px;
}
.resume-cert-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule-faint);
  border-radius: 4px;
  align-items: center;
}
.resume-cert-name {
  font-family: var(--serif-display);
  font-size: 14.5px;
  color: var(--ink-bright);
}
.resume-cert-name a { color: var(--accent); }
.resume-cert-meta {
  grid-column: 1 / 2;
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-dim);
}
.resume-cert-row > .btn { grid-row: 1 / 3; grid-column: 2; }

/* === Editor: signature cocktails === */
.resume-sig-list { display: flex; flex-direction: column; gap: 8px; }
.resume-sig-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule-faint);
  border-radius: 6px;
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.03);
}
.resume-sig-row.missing {
  display: flex; justify-content: space-between;
  color: var(--ink-faint); font-style: italic;
}
.resume-sig-rank {
  font-family: var(--serif-display);
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0;
  min-width: 28px;
  text-align: center;
}
.resume-sig-body { min-width: 0; }
.resume-sig-name {
  font-family: var(--serif-display);
  font-size: 15.5px;
  color: var(--ink-bright);
}
.resume-sig-meta {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.resume-sig-actions { display: flex; gap: 4px; }

.resume-sig-picker-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px; max-height: 60vh; overflow-y: auto;
}
.resume-sig-picker-row {
  background: transparent;
  border: 1px solid var(--rule-faint);
  border-radius: 4px;
  padding: 10px 12px;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.resume-sig-picker-row:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.05);
}
.resume-sig-picker-row.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 152, 88), 0.12);
}
.resume-sig-picker-name {
  font-family: var(--serif-display);
  font-size: 14.5px;
  color: var(--ink-bright);
}
.resume-sig-picker-pick {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--accent);
}
.resume-sig-picker-meta {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* === Editor: export row === */
.resume-export-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 36px;
  padding: 18px 0 0;
  border-top: var(--hairline) solid var(--rule-faint);
}
.resume-export-row .btn {
  font-family: var(--serif-display);
  letter-spacing: 0.4px;
}

/* ============================================================
   v76 — PRINT LAYOUT (resume + portfolio PDF)
   ============================================================
   When body has class .printing-resume, we hide everything except
   the injected .resume-print-root. The print sheet uses the theme
   tokens already on :root / [data-theme="X"] so the PDF carries
   the active binding's voice (Bemelmans walnut, Connaught Deco,
   Maison Premiere sage, Smuggler's Cove rum amber).
   ============================================================ */
.resume-print-root { display: none; }
body.printing-resume #app,
body.printing-resume #view,
body.printing-resume .bottom-tabs,
body.printing-resume .app-header,
body.printing-resume .sheet-backdrop,
body.printing-resume .sheet,
body.printing-resume .toast,
body.printing-resume .boot-splash { display: none !important; }
body.printing-resume .resume-print-root {
  display: block;
  position: relative;
  z-index: 9999;
  background: #fff;
  color: #111;
  min-height: 100vh;
}
body.printing-resume::before,
body.printing-resume::after { display: none !important; }

.resume-print {
  max-width: 8.5in;
  margin: 0 auto;
  padding: 0.5in 0.6in;
  background: #fff;
  color: #111;
  font-family: "Iowan Old Style", "Hoefler Text", "Cormorant Garamond", Georgia, serif;
  font-size: 11pt;
  line-height: 1.45;
}

.resume-print-header {
  border-bottom: 2pt solid var(--accent, #b8860b);
  padding-bottom: 14pt;
  margin-bottom: 18pt;
}
.resume-print-name {
  font-family: var(--serif-display, "Bodoni 72", "Didot", Georgia, serif);
  font-size: 32pt;
  line-height: 1;
  letter-spacing: 0.5pt;
  color: #111;
}
.resume-print-tagline {
  font-family: var(--serif-italic, "Big Caslon", Georgia, serif);
  font-style: italic;
  font-size: 13pt;
  color: #333;
  margin-top: 4pt;
}
.resume-print-line {
  font-size: 10pt;
  color: #444;
  margin-top: 8pt;
  letter-spacing: 0.2pt;
}

.resume-print-section {
  margin-bottom: 16pt;
  page-break-inside: avoid;
}
.resume-print-section h3 {
  font-family: var(--serif-display, "Bodoni 72", Georgia, serif);
  font-size: 12pt;
  letter-spacing: 2pt;
  text-transform: uppercase;
  margin: 0 0 8pt;
  color: var(--accent, #b8860b);
  border-bottom: 0.5pt solid #ccc;
  padding-bottom: 3pt;
}
.resume-print-section p {
  margin: 0 0 6pt;
  font-size: 11pt;
}

.resume-print-job {
  margin-bottom: 10pt;
  page-break-inside: avoid;
}
.resume-print-job-line1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5pt;
}
.resume-print-job-role { font-weight: 600; }
.resume-print-job-venue { font-style: italic; }
.resume-print-job-dates {
  font-size: 10pt;
  color: #555;
}
.resume-print-job-city {
  font-size: 10pt;
  color: #666;
  font-style: italic;
}
.resume-print-job-body {
  font-size: 10.5pt;
  margin-top: 3pt;
  color: #222;
}

.resume-print-skill-line { font-size: 11pt; margin-bottom: 4pt; }
.resume-print-cert { font-size: 11pt; margin-bottom: 4pt; }

.resume-print-page-break {
  page-break-before: always;
}
.resume-print-ing-list {
  margin: 4pt 0 0 18pt;
  padding: 0;
  font-size: 11pt;
  list-style: square;
}

.resume-print-footer {
  margin-top: 24pt;
  padding-top: 10pt;
  border-top: 0.5pt solid #ccc;
  text-align: center;
  font-size: 9pt;
  color: #777;
  font-style: italic;
  letter-spacing: 0.5pt;
}
.resume-print-edition::before {
  content: var(--print-edition-name, "Bemelmans");
  font-weight: 600;
  font-style: normal;
  color: var(--accent, #b8860b);
  letter-spacing: 1pt;
}

@media print {
  @page { margin: 0.5in 0.6in; }
  body.printing-resume {
    background: #fff !important;
  }
}