/* The Cellar Book. Loaded after app.css and brand.css, so it inherits Night
   Camp, Zilla Slab over Lexend, the buttons, the toast and the confirm
   dialog, and only adds its own pieces. The look is the Cellar Book page
   Chris used on claude.ai on 2026-09-28, moved onto the site's own tokens. */

.cb{ max-width:980px; margin:0 auto; }
/* .btn, .cb-field and .cb-check all set a display, which beats the browser's
   own [hidden] rule; without this a hidden button or field still shows. */
[hidden]{ display:none !important; }
/* app.css gives every label margin-bottom:6px, for its own stacked forms.
   Here the grid gaps do the spacing, so the extra 6px only pushed things off
   centre: the Whiskey | Wine switch sat high in its pill (Chris, 2026-09-29). */
.cb label, dialog.sheet label{ margin-bottom:0; }
.sheet-btns{ display:flex; gap:8px; align-items:center; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cb-wait{ color:var(--slate); padding:40px 0; }
.cb a{ color:var(--amber); }

/* ---------- mast ---------- */
.cb-mast{ margin:4px 0 16px; }
.cb-mast .eyebrow a{ color:inherit; text-decoration:none; }
.cb-erow{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; }
.cb-erow .eyebrow{ margin:0; }
.cb-others{ display:inline-flex; align-items:center; gap:4px; min-height:44px; margin:-8px 0; padding:0 2px; font:500 0.8125rem/1 'Lexend',system-ui,sans-serif; color:var(--slate) !important; text-decoration:none; white-space:nowrap; }
.cb-others:hover{ color:var(--cream) !important; }
.cb-others span{ color:var(--amber); font-size:1rem; }
.cb-iconbtn{ width:44px; min-width:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
/* The cog is a link, and .cb a paints links gold; it matches Share instead. */
.cb a.cb-iconbtn, .cb a.cb-iconbtn:hover{ color:var(--cream); }
.cb-iconbtn svg{ width:22px; height:22px; display:block; }
.cb-add{ width:52px; }
.cb-add svg{ width:27px; height:27px; }
.cb-mast .eyebrow a:hover{ text-decoration:underline; }
/* The title row: the glass and title stay together; the buttons are one
   group that, when there is no room beside the title, drops to its own row
   aligned right (Chris, 2026-09-29, on an iPhone). */
.cb-mrow{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-top:6px; }
.cb-mtitle{ display:flex; align-items:center; gap:8px; flex:1 1 240px; min-width:0; }
.cb-mbtns{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
/* The Cellar Book glass, idling beside the title (glassHTML in app.js). */
.cb-glass{ flex:none; width:76px; height:76px; padding:0; margin:-8px -6px -8px -10px; border:0; background:transparent; cursor:pointer; border-radius:14px; }
@media (min-width:700px){ .cb-glass{ width:88px; height:88px; margin:-10px -6px -10px -12px; } }
.cb-glass svg{ width:100%; height:100%; display:block; overflow:visible; }
.cb-glass:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.cb-glass .g-wave{ animation:cbgWave 3.4s linear infinite; }
.cb-glass .g-wave2{ animation:cbgWave 5.2s linear infinite reverse; }
/* The ice is one piece: the mountain above the whiskey and the part below
   it bob and tilt together about one point on the waterline, while the
   waterline (the clip on the lower part) stays put (Chris, 2026-09-29: they
   "should move together as one piece"). */
.cb-glass .g-bob{ transform-box:view-box; transform-origin:34px 34.4px; animation:cbgBob 3.4s ease-in-out infinite; }
.cb-glass .g-glint{ opacity:0; animation:cbgGlint 7s ease-in-out infinite; }
.cb-glass.is-still *{ animation:none !important; }
@keyframes cbgWave{ from{ transform:translateX(0); } to{ transform:translateX(-16px); } }
@keyframes cbgBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-1.1px) rotate(-2deg); } }
@keyframes cbgGlint{ 0%,70%,100%{ opacity:0; } 80%{ opacity:.55; } }
.cb-mrow h1{ flex:1 1 auto; min-width:0; margin:0; font-size:1.9rem; line-height:1.1; text-wrap:balance; }
.cb-sub{ margin:8px 0 0; color:var(--slate); font-size:var(--step--1); }
.cb-mast .btn{ min-height:44px; }
/* Share and Settings are the small ones; Add stays full size. The ::after
   keeps a 44px area to tap around each. */
.cb-mast .cb-iconbtn.sm{ width:36px; min-width:36px; height:36px; min-height:36px; border-radius:10px; position:relative; }
.cb-mast .cb-iconbtn.sm svg{ width:18px; height:18px; }
.cb-mast .cb-iconbtn.sm::after{ content:""; position:absolute; inset:-4px; }

/* ---------- shelves ---------- */
/* Four tabs across the 354px content box: they share the width equally
   rather than scroll, so Archive is never cut off on a phone. The tabs and
   the chips below centre their words (align-items:center): lined up on the
   baseline inside a min-height, the words sat 3px high (Chris, 2026-09-29). */
/* The shelves are a chain of four bubbles the gold flows along (chainHTML
   in app.js); 346px wide, inside the 354px phone box. The buttons are the
   bubbles' hit areas; the drawing is a picture. */
.cb-chain{ position:relative; width:346px; max-width:100%; aspect-ratio:346 / 52; margin-bottom:14px; }
.cb-chain svg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.ch-track{ fill:#262a31; }
.ch-liq{ fill:var(--amber); }
.ch-ico{ fill:none; stroke:var(--slate); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s; }
.ch-n{ fill:var(--amber); font:600 15px 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1,'lnum' 1; transition:fill .15s; }
.ch-n.sm{ font-size:12px; }
.ch-n.x5{ font-size:14px; }
.ch-ico.lit{ stroke:#1c1d21; }
.ch-n.lit{ fill:#1c1d21; }
.ch-btn{ position:absolute; top:0; bottom:0; appearance:none; border:0; background:transparent; padding:0; margin:0; cursor:pointer; border-radius:999px; }
.ch-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }

/* ---------- tiles ---------- */
.cb-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
@media (max-width:680px){
  .cb-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* An odd card out takes the whole row rather than leave a hole. */
  .cb-tiles > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
.cb-tile{ appearance:none; text-align:left; border:1px solid var(--line); background:var(--navy-soft); color:var(--cream); border-radius:12px; padding:12px 14px 13px; display:flex; flex-direction:column; gap:3px; cursor:pointer; min-width:0; font:inherit; }
.cb-tile:hover{ border-color:rgba(191,196,174,0.45); }
.cb-tile[aria-pressed="true"]{ border-color:var(--amber-dim); box-shadow:inset 0 0 0 1px var(--amber-dim); }
.cb-tile .k{ font:600 0.6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.cb-tile .v{ font:600 1.85rem/1.1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1,'lnum' 1; }
.cb-tile .s{ font-size:0.78rem; line-height:1.35; color:var(--slate); }
.cb-tile.tone-ok .v{ color:var(--ok); }
.cb-tile.tone-warn .v{ color:#d9a15b; }
.cb-tile.tone-bad .v{ color:var(--danger); }

/* ---------- tools ---------- */
.cb-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.cb-search{ flex:1 1 240px; position:relative; min-width:0; display:block; }
.cb-search svg{ position:absolute; left:14px; top:50%; width:16px; height:16px; transform:translateY(-50%); fill:none; stroke:var(--slate); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.cb-input{ width:100%; background:var(--navy-deep); color:var(--cream); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:400 16px/1.3 'Lexend',system-ui,sans-serif; min-height:44px; }
.cb-search .cb-input{ padding-left:40px; padding-right:44px; border-radius:999px; background:var(--navy-soft); }
.cb-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }
.cb-clear{ position:absolute; right:2px; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; border:0; background:transparent; border-radius:999px; cursor:pointer; display:none; align-items:center; justify-content:center; }
.cb-search.has-q .cb-clear{ display:inline-flex; }
.cb-clear svg{ position:static; transform:none; width:22px; height:22px; padding:4px; border-radius:50%; background:rgba(191,196,174,.16); stroke:var(--cream); stroke-width:1.8; stroke-linecap:round; }
.cb-clear:hover svg{ background:rgba(191,196,174,.28); }
.cb-clear:focus-visible{ outline:2px solid var(--amber); outline-offset:-4px; }
/* app.css makes every select full width; these sit side by side. */
.cb-sel{ width:auto; flex:0 1 auto; appearance:none; -webkit-appearance:none; background:var(--navy-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bfc4ae' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; border:1px solid var(--line); color:var(--cream); border-radius:999px; padding:10px 32px 10px 14px; font:400 0.875rem/1.2 'Lexend',system-ui,sans-serif; min-height:44px; max-width:100%; cursor:pointer; }
select.cb-input{ appearance:none; -webkit-appearance:none; background:var(--navy-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bfc4ae' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; padding-right:32px; }
.cb-input::placeholder{ color:rgba(191,196,174,0.5); }
.cb-input[aria-invalid="true"]{ border-color:var(--danger); }
textarea.cb-input{ resize:vertical; min-height:84px; }
.cb-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.cb-fchip{ appearance:none; border:1px solid var(--line); background:transparent; color:var(--slate); border-radius:999px; padding:8px 12px; font:500 0.8125rem/1 'Lexend',system-ui,sans-serif; cursor:pointer; display:inline-flex; gap:7px; align-items:center; min-height:36px; }
.cb-fchip:hover{ color:var(--cream); }
.cb-fchip[aria-pressed="true"]{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.cb-fchip .n{ font:600 0.8125rem/1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1; }
/* Clear: first in the row whenever the list is narrowed (2026-10-01). */
.cb-fclear{ color:var(--amber); border-color:rgba(207,169,99,.55); }
.cb-fclear:hover, .cb-fclear:focus-visible{ color:var(--cream); border-color:var(--amber); }
/* The list | racks switch: gold liquid flowing between two bubbles (see
   flowHTML in app.js). The buttons are the bubbles' hit areas. */
.cb-flow{ position:relative; width:108px; height:50px; margin:8px 0 4px; }
.cb-flow svg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.cb-flow-track{ fill:#262a31; }
.cb-flow-liq{ fill:var(--amber); }
.cb-flow .ico-list{ fill:none; stroke:var(--slate); stroke-width:2.6; stroke-linecap:round; transition:stroke .25s; }
.cb-flow .ico-rack{ fill:var(--slate); transition:fill .25s; }
.cb-flow[data-on="list"] .ico-list{ stroke:#1c1d21; }
.cb-flow[data-on="rack"] .ico-rack{ fill:#1c1d21; }
.cb-flow-btn{ position:absolute; top:0; bottom:0; width:50%; appearance:none; border:0; background:transparent; padding:0; margin:0; cursor:pointer; border-radius:999px; }
.cb-flow-btn[data-mode="list"]{ left:0; }
.cb-flow-btn[data-mode="rack"]{ right:0; }
.cb-flow-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.cb-fadein{ animation:cbFadeIn .24s ease-out; }
@keyframes cbFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
/* Shelf and view switches as view transitions (smoothly() in app.js). The
   page itself stays live: only the named parts animate, each switch writes
   its own timings, and everything lands with the gold (--fx-ms). */
:root[data-cbfx]::view-transition-old(root){ animation:none; opacity:0; }
:root[data-cbfx]::view-transition-new(root){ animation:none; }
:root[data-cbfx]::view-transition-group(*){ animation-duration:var(--fx-ms,.6s); animation-timing-function:cubic-bezier(.65,0,.35,1); }
@keyframes cbFlipOut{ from{ transform:perspective(var(--fx-p,600px)) rotateY(0); } to{ transform:perspective(var(--fx-p,600px)) rotateY(calc(var(--fx-dir,1) * 90deg)); } }
@keyframes cbFlipIn{ from{ transform:perspective(var(--fx-p,600px)) rotateY(calc(var(--fx-dir,1) * -90deg)); } to{ transform:perspective(var(--fx-p,600px)) rotateY(0); } }
@keyframes cbFlapOut{ from{ transform:perspective(var(--fx-p,500px)) rotateX(0); } to{ transform:perspective(var(--fx-p,500px)) rotateX(90deg); } }
@keyframes cbFlapIn{ from{ transform:perspective(var(--fx-p,500px)) rotateX(-90deg); } to{ transform:perspective(var(--fx-p,500px)) rotateX(0); } }
@keyframes cbTurnOut{ from{ transform:perspective(var(--fx-p,1400px)) rotateY(0); } to{ transform:perspective(var(--fx-p,1400px)) rotateY(calc(var(--fx-dir,1) * -90deg)); } }
@keyframes cbTurnIn{ from{ transform:perspective(var(--fx-p,1400px)) rotateY(calc(var(--fx-dir,1) * 90deg)); } to{ transform:perspective(var(--fx-p,1400px)) rotateY(0); } }

/* ---------- list ---------- */
.cb-kind{ font-size:1.6rem; margin:28px 0 0; padding-bottom:9px; border-bottom:2px solid var(--cream); }
.cb-list > .cb-kind:first-child{ margin-top:12px; }
.cb-group-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; padding:18px 0 8px; border-bottom:1px solid var(--line); font-size:1.125rem; }
.cb-group-h .n{ font:400 0.8125rem/1 'Lexend',system-ui,sans-serif; color:var(--slate); white-space:nowrap; }
.cb-rows{ list-style:none; margin:0; padding:0; }
.cb-flat{ margin-top:8px; border-top:1px solid var(--line); }
.cb-row{ appearance:none; width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); color:inherit; text-align:left; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 4px; cursor:pointer; font:inherit; }
.cb-row:hover{ background:rgba(38,40,46,0.55); }
.cb-row.is-done{ opacity:.6; }
.cb-main{ display:flex; flex-direction:column; min-width:0; gap:2px; }
.cb-name{ font:500 1rem/1.3 'Lexend',system-ui,sans-serif; overflow-wrap:anywhere; }
.cb-line{ font-size:0.84rem; line-height:1.35; color:var(--slate); overflow-wrap:anywhere; }
.cb-meta{ font-size:0.78rem; line-height:1.35; color:var(--slate); opacity:.85; overflow-wrap:anywhere; }
.cb-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.cb-fig{ font:600 1.3rem/1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1,'lnum' 1; white-space:nowrap; }
.cb-fig small{ font:400 0.6875rem/1 'Lexend',system-ui,sans-serif; color:var(--slate); margin-left:4px; }
.cb-empty{ padding:36px 0; display:grid; gap:14px; justify-items:start; color:var(--slate); }
.cb-empty p{ margin:0; }

/* ---------- state chips ---------- */
.cb-chip{ display:inline-flex; align-items:center; font:500 0.72rem/1 'Lexend',system-ui,sans-serif; padding:4px 8px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.tone-ok{ color:var(--ok); }
.tone-warn{ color:#d9a15b; }
.tone-bad{ color:var(--danger); }
.tone-gold{ color:var(--amber); }
.tone-neutral{ color:var(--slate); }
.cb-chip.tone-neutral{ border-color:var(--line); }

/* ---------- thumbs and bottle glyphs ---------- */
.cb-thumb{ position:relative; display:block; width:44px; height:60px; flex:none; }
.cb-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:6px; background:var(--navy-soft); }
.cb-thumb-lg{ width:84px; height:116px; }
.cb-glyph{ width:100%; height:100%; display:block; }
.g-glass{ fill:rgba(242,237,218,0.05); stroke:var(--slate); stroke-width:1.3; stroke-linejoin:round; }
.g-dark{ fill:#2f3238; }
.g-liq{ fill:var(--amber); opacity:.92; }
.g-cap{ fill:#b7a38e; }
.g-foil{ fill:#886c45; }
.g-foil-gold{ fill:#886c45; }
.g-foil-ok{ fill:var(--ok); }
.g-foil-warn{ fill:#d9a15b; }
.g-foil-bad{ fill:var(--danger); }
.g-foil-neutral{ fill:#8a8f82; }
.g-label{ fill:var(--cream); opacity:.16; }
.cb-badge{ position:absolute; right:-7px; bottom:-5px; background:var(--cream); color:var(--navy); font:600 0.6875rem/1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1; padding:3px 5px; border-radius:999px; }

/* ---------- sheets ---------- */
/* margin:auto is what centres a modal dialog. The browser's own stylesheet
   sets it, but app.css's *{margin:0} reset wins over that (the same trap
   dialog.confirm notes in app.css), so without it every sheet sat in the
   top left corner on a computer. Phones get a bottom sheet below. */
dialog.sheet{ border:0; padding:0; margin:auto; background:var(--navy-soft); color:var(--cream); width:min(640px, calc(100% - 32px)); max-height:min(90vh, 900px); max-height:min(90dvh, 900px); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.55); overflow:hidden; }
dialog.sheet[open]{ display:flex; flex-direction:column; }
dialog.sheet::backdrop{ background:rgba(6,8,10,.72); }
@media (max-width:640px){
  dialog.sheet{ width:100%; max-width:100%; margin:auto 0 0; border-radius:16px 16px 0 0; max-height:92vh; max-height:92dvh; }
}
.sheet-form{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px 10px 20px; border-bottom:1px solid var(--line); flex:none; }
.sheet-k{ margin:0; font:600 0.6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.sheet-h{ margin:0; font-size:1.3rem; line-height:1.2; }
.sheet-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 20px 24px; }
.sheet-foot{ flex:none; display:flex; gap:10px; padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:var(--navy-soft); }
.sheet-foot .btn{ flex:1; }

/* ---------- detail ---------- */
.d-photo{ background:var(--navy); border-radius:12px; overflow:hidden; display:flex; justify-content:center; margin-bottom:16px; min-height:120px; }
.d-photo img{ display:block; max-width:100%; max-height:44vh; width:auto; height:auto; object-fit:contain; }
.d-hero{ display:flex; gap:16px; align-items:flex-end; }
.d-eyebrow{ margin:0 0 4px; font:600 0.6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.d-title{ margin:0; font-size:1.7rem; line-height:1.12; text-wrap:balance; }
.d-sub{ margin:6px 0 0; color:var(--slate); }
.d-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.d-stats{ display:flex; flex-wrap:wrap; gap:14px 26px; margin:18px 0 4px; padding:14px 0; border-block:1px solid var(--line); }
.d-stat{ display:grid; gap:4px; }
.d-stat .v{ font:600 1.35rem/1.1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1,'lnum' 1; }
.cb-k{ font:600 0.6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.d-sec{ margin-top:18px; display:grid; gap:10px; }
.d-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.d-val{ font:600 1rem/1.2 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1; }
.d-note{ margin:0; font-size:0.8125rem; color:var(--slate); }
.d-steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.d-step{ appearance:none; border:1px solid var(--line); background:var(--navy-deep); color:var(--slate); border-radius:10px; padding:8px 4px 7px; min-height:64px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font:500 0.75rem/1.1 'Lexend',system-ui,sans-serif; }
.d-step svg{ width:18px; height:30px; }
.d-step[aria-pressed="true"]{ border-color:var(--amber-dim); color:var(--cream); background:rgba(207,169,99,0.10); box-shadow:inset 0 0 0 1px var(--amber-dim); }
.d-step:disabled{ cursor:default; opacity:.7; }
/* A card a bottle (bottlesHTML in app.js), swiped, or stepped with the
   arrows and dots. The row of cards runs to the sheet's edges. */
.d-bottles .d-top{ align-items:center; }
.d-nav{ display:inline-flex; align-items:center; gap:6px; }
.d-arrow{ appearance:none; border:1px solid var(--line); background:var(--navy-deep); color:var(--cream); width:36px; height:36px; border-radius:999px; cursor:pointer; display:grid; place-items:center; padding:0; position:relative; }
.d-arrow::after{ content:""; position:absolute; inset:-4px; }
.d-arrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.d-arrow:disabled{ opacity:.3; cursor:default; }
.d-count{ min-width:58px; text-align:center; }
.d-cards{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; margin:0 -20px; padding:2px 20px 4px; scroll-padding-inline:20px; }
.d-cards::-webkit-scrollbar{ display:none; }
.d-cards.one{ overflow:visible; margin:0; padding:0; }
.d-card{ flex:0 0 90%; min-width:0; scroll-snap-align:start; border:1px solid var(--line); background:var(--navy-deep); border-radius:14px; padding:12px; display:grid; gap:10px; align-content:start; }
.d-cards.one .d-card{ flex-basis:100%; }
.d-cards:not(.one) .d-card[aria-current="true"]{ border-color:var(--amber-dim); box-shadow:inset 0 0 0 1px var(--amber-dim); }
.d-card-top{ display:flex; gap:12px; align-items:center; }
.d-card-top .cb-glyph{ width:30px; height:48px; flex:none; }
.d-cstate{ display:block; font:600 1.05rem/1.2 'Zilla Slab','Rockwell',serif; }
.d-csub{ display:block; font-size:.8125rem; color:var(--slate); margin-top:2px; }
/* Five levels fit a card: tighter gaps, and labels that give a little on a
   narrow phone ("Shoulder", "4 glasses"). */
.d-card .d-steps{ gap:4px; }
.d-card .d-step{ padding:8px 1px 7px; font-size:clamp(9.5px, 2.8vw, 11.5px); letter-spacing:-.01em; min-width:0; }
.d-cacts{ display:flex; flex-wrap:wrap; gap:8px; }
.d-cacts .btn{ min-height:44px; }
.d-dots{ display:flex; justify-content:center; gap:4px; }
.d-dots button{ appearance:none; border:0; background:transparent; padding:0; width:24px; height:24px; display:grid; place-items:center; cursor:pointer; }
.d-dots button::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .2s, transform .2s; }
.d-dots button[aria-current="true"]::before{ background:var(--amber); transform:scale(1.25); }
.cb-move button[aria-current="true"]{ color:var(--amber); }
/* Pouring now: who is pouring what, above the shelves, and on the card. */
.cb-pouring{ display:grid; gap:6px; margin:0 0 14px; }
.cb-pour{ appearance:none; display:flex; align-items:center; gap:10px; width:100%; min-height:44px; text-align:left; border:1px solid var(--amber-dim); background:rgba(207,169,99,.08); color:var(--cream); border-radius:12px; padding:9px 12px; font:inherit; font-size:.875rem; line-height:1.35; cursor:pointer; }
.cb-pour svg{ width:22px; height:22px; flex:none; color:var(--amber); }
.cb-pour strong{ font-weight:600; }
.cb a.cb-pour{ color:var(--cream); text-decoration:none; }
.cb-pour > span:not(.cb-pour-go){ flex:1 1 auto; min-width:0; }
.cb-pour-go{ flex:none; color:var(--amber); font-size:1.4rem; line-height:1; padding-left:4px; }
.cb-pour:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.d-pouring{ margin:0; display:flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--amber); }
.d-pouring svg{ width:16px; height:16px; flex:none; }
.wbar{ position:relative; height:14px; border-radius:999px; background:#2f3238; }
.wbar-win{ position:absolute; top:0; bottom:0; border-radius:999px; background:currentColor; opacity:.42; border:1px solid currentColor; }
.wbar-now{ position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; background:var(--cream); border-radius:2px; }
.d-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.d-actions .btn{ min-height:44px; }
.btn-toggle[aria-pressed="true"]{ border-color:var(--amber-dim); color:var(--amber); }
.cb-rating{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.cb-dots{ display:flex; gap:2px; }
.cb-dot{ appearance:none; width:34px; height:34px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; }
.cb-dot::before{ content:""; width:17px; height:17px; border-radius:50%; border:1.5px solid var(--slate); }
.cb-dot.on::before{ background:var(--amber); border-color:var(--amber); }
.cb-dot:disabled{ cursor:default; }
.cb-facts{ display:grid; grid-template-columns:minmax(104px,max-content) minmax(0,1fr); gap:9px 18px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.cb-facts dt{ color:var(--slate); font-size:0.8125rem; line-height:1.45; }
.cb-facts dd{ margin:0; overflow-wrap:anywhere; }
.d-notes p{ margin:6px 0 0; white-space:pre-wrap; max-width:65ch; }
.d-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.d-ask{ border:1px solid rgba(207,169,99,0.35); background:rgba(207,169,99,0.07); border-radius:12px; padding:12px 14px; }
.d-ask p{ margin:0; }
.d-ask p + p{ margin-top:6px; }
.d-hist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.d-hist li{ border-left:2px solid var(--line); padding:2px 0 2px 12px; font-size:0.875rem; }

/* ---------- forms ---------- */
.cb-form{ display:grid; gap:14px; align-content:start; }
.cb-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cb-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cb-field > .cb-lbl, .cb-lbl{ font:600 0.72rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--slate); }
.cb-hint{ margin:0; font-size:0.78rem; color:var(--slate); }
.cb-err{ margin:0; color:var(--danger); font-size:0.8125rem; }
.cb-sub-h{ margin:6px 0 0; font-size:1.05rem; }
/* Whiskey | agave | wine when adding: round bubbles like the chain's, with the shelves' icons (see kindPickHTML). */
.cb-kind-pick{ position:relative; width:164px; height:52px; }
.cb-kind-pick > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
/* The sheet is lighter than the page, so the bubbles are the form's own wells here. */
.cb-kind-pick .cb-flow-track{ fill:var(--navy-deep); }
.kp-ico{ fill:none; stroke:var(--slate); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.cb-kind-pick[data-on="whiskey"] .kp-whiskey, .cb-kind-pick[data-on="agave"] .kp-agave, .cb-kind-pick[data-on="wine"] .kp-wine{ stroke:#1c1d21; }
.kp-opt{ position:absolute; top:0; bottom:0; margin:0; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* A label photo left to Claude: the gold drains and no kind is lit until one is tapped. */
.cb-kind-pick .cb-flow-liq{ transition:opacity .25s; }
.cb-kind-pick.unsure .cb-flow-liq{ opacity:0; }
.cb-kind-pick.unsure .kp-ico{ stroke:var(--slate); }
.kp-hint{ margin-top:6px; }
/* ...and its bottle in the list: drawn in dashes, a question on the label. */
.g-unsure .g-glass{ stroke-dasharray:3 2.6; }
.g-unsure .g-cap{ opacity:.55; }
.g-q{ fill:var(--slate); font:600 11px 'Zilla Slab','Rockwell',serif; }
.kp-opt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.kp-opt:has(input:focus-visible){ outline:2px solid var(--amber); outline-offset:1px; }
#e-form[data-kind="wine"] .w-only, #e-form[data-kind="whiskey"] .v-only{ display:none; }
.cb-photo-prev{ display:flex; align-items:center; justify-content:center; min-height:64px; background:var(--navy-deep); border-radius:10px; overflow:hidden; }
.cb-photo-prev img{ display:block; max-height:220px; max-width:100%; }
.cb-row-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.cb-check{ display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.cb-check input{ width:20px; height:20px; accent-color:var(--amber); margin:0; }
.cb-people{ display:flex; flex-wrap:wrap; gap:6px; }
.cb-person{ appearance:none; border:1px solid var(--line); background:transparent; color:var(--slate); border-radius:999px; padding:9px 13px; font:500 0.8125rem/1 'Lexend',system-ui,sans-serif; cursor:pointer; min-height:40px; }
.cb-person[aria-pressed="true"]{ background:rgba(207,169,99,0.14); border-color:var(--amber-dim); color:var(--cream); }
.cb-addname{ display:flex; gap:8px; }
.cb-addname .cb-input{ flex:1; }

/* ---------- racks ---------- */
.cb-rack{ margin:14px 0 22px; }
.cb-rack h3{ margin:0 0 10px; font-size:1.15rem; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cb-rack h3 span{ font:400 0.8125rem/1 'Lexend',system-ui,sans-serif; color:var(--slate); }
/* The rack from the front: each slot is a bottle end (neck out, the foil in
   the status colour) or an empty cradle, with a wood rail under every row
   (gridHTML in app.js). The foil takes its colour from the tone class on the
   slot; nothing here borrows currentColor, which once painted a placed
   bottle the page colour. */
.cb-grid{ display:grid; gap:4px; align-items:center; }
.cb-cell{ appearance:none; aspect-ratio:1; min-width:0; border:0; background:transparent; cursor:pointer; padding:0; position:relative; border-radius:50%; }
.cb-cell svg{ width:100%; height:100%; display:block; overflow:visible; }
.cb-cell::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:-3.5px; height:3px; background:#b7a38e; opacity:.45; pointer-events:none; }
.be-glass{ fill:#18221d; stroke:rgba(242,237,218,.2); stroke-width:1; }
.be-shine{ fill:none; stroke:rgba(242,237,218,.3); stroke-width:2.2; stroke-linecap:round; }
.be-neck{ fill:#223029; stroke:rgba(242,237,218,.14); stroke-width:1; }
.be-foil{ fill:#8a8f82; }
.be-dot{ fill:rgba(0,0,0,.18); }
.be-glint{ fill:none; stroke:rgba(255,255,255,.45); stroke-width:1.2; stroke-linecap:round; }
.be-cradle{ fill:none; stroke:rgba(191,196,174,.3); stroke-width:1.4; stroke-dasharray:2.5 2.5; }
.cb-cell.tone-ok .be-foil{ fill:var(--ok); }
.cb-cell.tone-warn .be-foil{ fill:#d9a15b; }
.cb-cell.tone-bad .be-foil{ fill:var(--danger); }
.cb-cell.tone-gold .be-foil{ fill:var(--amber); }
.cb-cell.tone-neutral .be-foil{ fill:#8a8f82; }
.cb-cell:not(.full):hover .be-cradle{ stroke:rgba(207,169,99,.7); }
.cb-cell.mine{ outline:3px solid var(--cream); outline-offset:-1px; }
.cb-cell:disabled{ cursor:default; }
.cb-cell.taken{ opacity:.35; }
.cb-cell:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.cb-rack .cb-legend i{ border-radius:50%; }
/* Searching on the racks: matches ringed in cream, everything else dimmed. */
.cb-grid.searching .cb-cell:not(.full) svg{ opacity:.35; }
.cb-cell.is-dim svg{ opacity:.18; filter:grayscale(.85); }
.cb-cell.is-hit{ outline:2px solid var(--cream); outline-offset:0; }
.cb-area button.is-dim{ opacity:.28; }
.cb-area button.is-hit{ border-color:var(--cream); box-shadow:inset 0 0 0 1px var(--cream); }
.cb-rowlab, .cb-collab{ font:500 0.6875rem/1 'Lexend',system-ui,sans-serif; color:var(--slate); text-align:center; font-feature-settings:'tnum' 1; }
.cb-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:0.78rem; color:var(--slate); }
.cb-legend i{ display:inline-block; width:12px; height:12px; border-radius:4px; background:currentColor; vertical-align:-1px; margin-right:6px; }
.cb-areas{ display:grid; gap:10px; }
.cb-area{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.cb-area h4{ margin:0 0 8px; font:600 0.8125rem/1.2 'Lexend',system-ui,sans-serif; color:var(--slate); letter-spacing:.04em; }
.cb-area ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.cb-prow{ display:flex; gap:8px; align-items:center; margin:10px 0 12px; }
.cb-prow .cb-search{ flex:1 1 auto; }
.cb-prow .btn{ flex:none; min-height:44px; }
.cb-left{ font:600 0.75rem/1 'Zilla Slab','Rockwell',serif; color:var(--amber); margin-left:4px; }
.cb-area button{ appearance:none; border:1px solid var(--line); background:var(--navy-soft); color:var(--cream); border-radius:999px; padding:8px 12px; font:400 0.8125rem/1.1 'Lexend',system-ui,sans-serif; cursor:pointer; min-height:36px; }
/* A cart or shelf part's way in: a dashed space the size of a tap. */
.cb-area .cb-put{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:10px; border:1px dashed var(--line); background:transparent; color:var(--slate); border-radius:10px; padding:8px 12px; font:500 0.8125rem/1.2 'Lexend',system-ui,sans-serif; }
.cb-area h4 + .cb-put, .cb-area .cb-put:first-child{ margin-top:0; }
.cb-area .cb-put::before{ content:"+"; font:600 1.15rem/1 'Zilla Slab','Rockwell',serif; color:var(--amber); }
.cb-area .cb-put:hover, .cb-area .cb-put:focus-visible{ border-color:var(--amber); color:var(--cream); }

/* ---------- shelves, revised (2026-10-01, after Opus's notes) ----------
   Each part of a cart, cabinet or fridge is a shelf of bottles with a tag
   under every bottle (its name, then its year or its style), the way a store
   shelf is labelled. A stand is 60px wide and 104px tall, so a tap is well
   over 44px. Only the Nordin palette is used: kraft #b7a38e and lake gold
   #886c45 for wood, link gold #cfa963 for the cart's brass, slate for steel,
   cream for the fridge light. Rows that wrap get a faint line under the
   bottles; the shelf itself (plank, brass bar or glass) is drawn once, under
   the last row, so a cart with no parts stays a one-tier cart however many
   bottles it holds. In a fridge, wine lies down with its end out, like the
   rack; a spirit stands. */
.cb-shelfunit .cb-case{ position:relative; border-radius:10px; border:1px solid var(--line); padding:4px 12px 14px; }
.cb-shelf{ position:relative; }
.cb-shelf + .cb-shelf{ margin-top:10px; }
.cb-shelfhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; margin:0 0 -4px; }
.cb-shelfhead h4{ margin:0; font:600 0.8125rem/1.2 'Lexend',system-ui,sans-serif; color:var(--slate); letter-spacing:.04em; }
/* The way in for editors: one round plus beside the part's name. */
.cb-addhere{ appearance:none; width:44px; height:44px; margin-left:auto; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--amber); font:600 1.35rem/1 'Zilla Slab','Rockwell',serif; cursor:pointer; display:grid; place-items:center; padding:0 0 2px; }
.cb-addhere:hover, .cb-addhere:focus-visible{ border-color:var(--amber); background:rgba(207,169,99,.08); }
.cb-shelfrow{ --bw:60px; --gh:48px; --bh:104px; --rg:10px; --wrapline:rgba(183,163,142,.28);
  position:relative; display:grid; grid-template-columns:repeat(auto-fill, var(--bw)); grid-auto-rows:var(--bh); row-gap:var(--rg); column-gap:4px; justify-content:start; padding:4px 0 0;
  background:linear-gradient(to bottom, transparent 0 calc(var(--gh) + 4px), var(--wrapline) calc(var(--gh) + 4px) calc(var(--gh) + 6px), transparent 0) 0 0 / 100% calc(var(--bh) + var(--rg)) repeat-y; }
/* The shelf proper, under the last row's bottles, full width. */
.cb-shelfrow::after{ content:""; position:absolute; left:-12px; right:-12px; bottom:calc(var(--bh) - var(--gh) - 3px); height:3px; background:rgba(183,163,142,.7); box-shadow:0 1px 0 rgba(0,0,0,.5); pointer-events:none; }
/* One bottle: the glyph on the shelf, its tag hung under the shelf edge. */
.cb-stand{ appearance:none; border:0; background:transparent; padding:0; margin:0; width:var(--bw); height:var(--bh); cursor:pointer; position:relative; border-radius:6px; display:grid; align-content:start; justify-items:center; color:inherit; text-align:center; }
.cb-stand .cb-glyph{ width:calc(var(--gh) * 0.625); height:var(--gh); display:block; margin:0 auto; overflow:visible; }
.cb-stand .cb-endglyph{ width:calc(var(--gh) - 4px); height:calc(var(--gh) - 4px); display:block; margin:2px auto; overflow:visible; }
.cb-stand::before{ content:""; position:absolute; left:24%; right:24%; top:calc(var(--gh) - 2px); height:5px; border-radius:50%; background:rgba(0,0,0,.55); filter:blur(2px); }
.cb-stand .g-glass{ stroke-width:1.5; }
.cb-tag{ position:absolute; left:1px; right:1px; top:calc(var(--gh) + 9px); font:400 10px/1.15 'Lexend',system-ui,sans-serif; color:var(--cream); }
.cb-tagname{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; opacity:.88; }
.cb-tagsub{ display:block; margin-top:1px; font-size:9.5px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-stand.tone-ok [class*="g-foil"], .cb-stand.tone-ok .g-cap, .cb-stand.tone-ok .be-foil{ fill:var(--ok); }
.cb-stand.tone-warn [class*="g-foil"], .cb-stand.tone-warn .g-cap, .cb-stand.tone-warn .be-foil{ fill:#d9a15b; }
.cb-stand.tone-bad [class*="g-foil"], .cb-stand.tone-bad .g-cap, .cb-stand.tone-bad .be-foil{ fill:var(--danger); }
.cb-stand.tone-gold [class*="g-foil"], .cb-stand.tone-gold .g-cap, .cb-stand.tone-gold .be-foil{ fill:var(--amber); }
.cb-stand.tone-neutral [class*="g-foil"], .cb-stand.tone-neutral .g-cap, .cb-stand.tone-neutral .be-foil{ fill:#8a8f82; }
.cb-stand:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.cb-stand.is-dim{ opacity:.18; filter:grayscale(.85); }
.cb-stand.is-hit{ outline:2px solid var(--cream); outline-offset:0; }
.cb-shelfunit .cb-shelf-empty{ margin:0; padding:2px 0 6px; }
@media (min-width:700px){ .cb-shelfrow{ --bw:76px; --gh:64px; --bh:128px; column-gap:6px; } .cb-tag{ font-size:11px; } .cb-tagsub{ font-size:10.5px; } }

/* ---------- the looks ---------- */
/* A cabinet: lake gold and kraft wood, slim. */
.look-cabinet .cb-case{ border:3px solid #886c45; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(183,163,142,.35), inset 0 10px 16px rgba(0,0,0,.28); }
/* A bar cart: link gold rails, one brass bar per part, wheels. */
.look-cart .cb-case{ border:0; border-radius:0; padding:4px 12px 0; }
.look-cart .cb-case::before, .look-cart .cb-case::after{ content:""; position:absolute; top:0; bottom:14px; width:2px; border-radius:2px; background:var(--amber); opacity:.85; }
.look-cart .cb-case::before{ left:2px; } .look-cart .cb-case::after{ right:2px; }
.look-cart .cb-shelfrow::after{ background:var(--amber); box-shadow:0 1px 0 rgba(0,0,0,.45); }
.look-cart .cb-wheels{ display:flex; justify-content:space-between; margin:-7px -5px 0; }
.look-cart .cb-wheels i{ width:14px; height:14px; border-radius:50%; border:2.5px solid var(--amber); background:var(--navy); }
/* A fridge: slate steel, a cream light, glass shelves; wine lies with its end out. */
.look-fridge .cb-case{ border:3px solid rgba(191,196,174,.55); border-radius:8px; background:linear-gradient(rgba(242,237,218,.06), transparent 40%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); padding-top:8px; }
.look-fridge .cb-case::before{ content:""; position:absolute; left:22%; right:22%; top:0; height:2px; border-radius:0 0 2px 2px; background:rgba(242,237,218,.85); box-shadow:0 0 12px 3px rgba(242,237,218,.28); }
.look-fridge .cb-shelfrow{ --wrapline:rgba(242,237,218,.18); }
.look-fridge .cb-shelfrow::after{ height:2px; background:rgba(242,237,218,.5); box-shadow:0 2px 6px rgba(242,237,218,.22); }
/* A counter: no walls, and the shelf is a charcoal stone slab with a cream
   edge, from the bottles' feet down to just above their tags (Fable's v1
   slab, in the palette). */
.look-counter .cb-case{ border:0; border-radius:0; padding:4px 0 0; }
.look-counter .cb-shelfrow::after{ left:0; right:0; height:8px; bottom:calc(var(--bh) - var(--gh) - 8px); border-radius:2px; background:#292b2f; box-shadow:inset 0 1px 0 rgba(242,237,218,.45), 0 2px 0 rgba(0,0,0,.45); }
.cb-look-seg button{ min-width:0; }

/* ---------- the rack, revised: slim lake-gold frame, one slat a row ----------
   One full-width kraft slat under every row, drawn once by the grid (no more
   one-pixel steps between cells), a shadow that sits each bottle end on its
   slat, a faint hollow where a slot is empty (so the empties show, with their
   cradle on top), and a 3px lake gold frame round the slots so the rack and
   the cabinet read as the same furniture. No back panel: the page ground
   stays, so the dashed cradles keep their contrast. The frame and slats are
   absolutely placed grid children on grid-column 2/-1 and grid-row 2/-1,
   which needs grid-template-rows declared (gridHTML: auto repeat(rows, auto))
   and --rows on the grid; the label column widens to 34px. */
.cb-rackunit .cb-grid{ position:relative; --gap:4px; padding:0 10px 10px 0; }
.cb-rackunit .cb-collab{ padding-bottom:12px; }
.cb-rackunit .cb-rowlab{ text-align:left; padding-left:4px; }
.cb-rackunit .cb-grid::before{ content:""; position:absolute; grid-column:2 / -1; grid-row:2 / -1; inset:-9px; border:3px solid #886c45; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(183,163,142,.35), inset 0 8px 14px rgba(0,0,0,.22); pointer-events:none; }
.cb-rackunit .cb-grid::after{ content:""; position:absolute; grid-column:2 / -1; grid-row:2 / -1; inset:0 calc(0px - var(--gap)) calc(0px - var(--gap)) calc(0px - var(--gap)); z-index:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0 1px, rgba(183,163,142,.62) 1px 4px, transparent 4px) 0 0 / 100% calc(100% / var(--rows, 12)) repeat-y; }
.cb-rackunit .cb-cell{ z-index:1; }
.cb-rackunit .cb-cell::after{ display:none; }
.cb-rackunit .cb-cell:not(.full)::before{ content:""; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(0,0,0,.3), rgba(0,0,0,.08) 68%, transparent 72%); pointer-events:none; }
.cb-rackunit .cb-cell.full::before{ content:""; position:absolute; left:18%; right:18%; bottom:0; height:5px; border-radius:50%; background:rgba(0,0,0,.6); filter:blur(2px); pointer-events:none; }
.cb-newhere{ margin-top:16px; }
/* The cellar's total in Settings, whichever card shows at the top. */
.cb-worth{ display:grid; gap:2px; margin:14px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--navy-deep); }
.cb-worth b{ font:700 1.6rem/1.1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1,'lnum' 1; color:var(--cream); }
.cb-worth span:last-child{ font:400 .8125rem/1.4 'Lexend',system-ui,sans-serif; color:var(--slate); }
/* The rating and worth sorts over the list: a tap, highest first; again, lowest. */
.cb-sortbar{ display:flex; justify-content:flex-end; align-items:center; gap:6px; margin:2px 0 8px; }
.cb-sortk{ font:600 .6875rem/1 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); margin-right:2px; }
.cb-sortbtn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; min-width:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--slate); font:500 .8125rem/1 'Lexend',system-ui,sans-serif; cursor:pointer; }
.cb-sortbtn[aria-pressed="true"]{ border-color:var(--amber); color:var(--cream); background:rgba(207,169,99,.10); }
.cb-sortbtn span{ color:var(--amber); font-weight:600; }
/* Critics' scores on a bottle's card: the points in the slab, who gave them after. */
.d-crit .cb-k{ display:block; margin-bottom:8px; }
.d-scores{ display:flex; flex-wrap:wrap; gap:8px; }
.d-score{ display:inline-flex; align-items:baseline; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--navy-deep); font:400 .8125rem/1.2 'Lexend',system-ui,sans-serif; color:var(--slate); }
.d-score b{ font:700 1.05rem/1 'Zilla Slab','Rockwell',serif; color:var(--cream); font-feature-settings:'tnum' 1,'lnum' 1; }

/* ---------- the wedding box ---------- */
/* Chris and his wife's box (2026-10-01), at the foot of the racks. A tap
   swings the lid up on its hinges: a board with a thickness, its carved face
   riding above the underside and its edges turning with it. The open lid
   stands taller than the box, so the box makes room above itself. */
.cb-box .wb-stage{ position:relative; display:block; width:calc(100% - 24px); max-width:420px; margin:0 auto; aspect-ratio:360/262; padding:0; border:0; background:none; cursor:pointer;
  perspective:2800px; perspective-origin:50% 0; transition:margin-top 1.15s cubic-bezier(.5,.05,.25,1); -webkit-tap-highlight-color:transparent; }
.cb-box.open .wb-stage{ margin-top:calc(min(100% - 24px, 420px) * .24); }
.cb-box .wb-stage > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.cb-box .wb-inside{ filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.cb-box .wb-lid{ --t:13px; position:absolute; left:0; top:0; width:100%; height:95.42%; transform-origin:50% 0; transform-style:preserve-3d;
  transition:transform 1.25s cubic-bezier(.5,.05,.25,1.04); will-change:transform; }
.cb-box.open .wb-lid{ transform:rotateX(103deg); }
.cb-box .wb-lid svg{ position:absolute; inset:0; width:100%; height:100%; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.cb-box .wb-lid .top{ transform:translateZ(var(--t)); }
.cb-box .wb-lid .under{ transform:rotateX(180deg); }
.cb-box .wb-lid .edge{ position:absolute; display:block; }
.cb-box .wb-lid .front{ left:0; top:100%; width:100%; height:var(--t); transform-origin:50% 0; transform:rotateX(90deg); border-radius:0 0 3px 3px;
  background:repeating-linear-gradient(90deg,rgba(90,44,16,0) 0 23px,rgba(90,44,16,.22) 23px 24px),linear-gradient(180deg,#7e431d,#b8743f 38%,#a5612e 70%,#8a4b22); }
.cb-box .wb-lid .side{ top:0; width:var(--t); height:100%; transform-origin:0 50%; transform:rotateY(-90deg); background:linear-gradient(90deg,#74401c,#a5612e); }
.cb-box .wb-lid .side.left{ left:0; }
.cb-box .wb-lid .side.right{ left:100%; }
.cb-box .wb-lid .shade{ opacity:0; transition:opacity 1.25s ease; }
.cb-box.open .wb-lid .shade{ opacity:.5; }
.cb-box .wb-hinges{ pointer-events:none; }
.cb-box .lidshade{ opacity:0; transition:opacity 1.1s ease .25s; }
.cb-box.open .lidshade{ opacity:1; }
.cb-box .lamp{ opacity:0; transition:opacity 1.2s ease .35s; }
.cb-box.open .lamp{ opacity:1; }
.cb-box .glow{ opacity:0; }
/* The night itself: the carving catches the lamplight. */
.cb-box.night .glow{ animation:cbBreathe 3.4s ease-in-out infinite; }
.cb-box.night .wb-stage::before{ content:""; position:absolute; inset:-8% -6%; border-radius:40px; z-index:-1;
  background:radial-gradient(closest-side,rgba(207,169,99,.42),rgba(207,169,99,0)); animation:cbBreathe 3.4s ease-in-out infinite; }
@keyframes cbBreathe{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.cb-box .cork-new{ animation:cbDrop .7s cubic-bezier(.3,.7,.3,1.3) both; }
@keyframes cbDrop{ from{ opacity:0; transform:translateY(-30px); } to{ opacity:1; transform:none; } }
.wb-cap{ margin:12px 0 0; display:flex; justify-content:space-between; align-items:baseline; gap:12px; font:400 .875rem/1.35 'Lexend',system-ui,sans-serif; color:var(--slate); }
.wb-cap b{ font-weight:500; color:var(--cream); }
.cb-box.night .wb-cap b{ color:var(--amber); }
/* What it holds opens out beneath it. */
.wb-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .75s cubic-bezier(.25,.8,.25,1) .2s; }
.cb-box.open .wb-panel{ grid-template-rows:1fr; }
.wb-panel > div{ overflow:hidden; min-height:0; }
.wb-card{ margin-top:16px; border:1px solid var(--line); border-radius:14px; background:var(--navy-soft); padding:16px 16px 18px; display:grid; gap:16px; }
.wb-eyebrow{ margin:0; font:600 .6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--amber); }
.wb-title{ margin:4px 0 0; font:600 1.5rem/1.15 'Zilla Slab','Rockwell',serif; text-wrap:balance; }
.wb-count{ display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.wb-count .n{ font:700 2.75rem/1 'Zilla Slab','Rockwell',serif; font-feature-settings:'tnum' 1,'lnum' 1; }
.wb-count .u{ font:400 .9375rem/1.2 'Lexend',system-ui,sans-serif; color:var(--slate); }
.wb-k{ margin:0 0 6px; font:600 .6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.wb-v strong{ display:block; font:500 1rem/1.3 'Lexend',system-ui,sans-serif; overflow-wrap:anywhere; }
.wb-v span{ display:block; font:400 .8125rem/1.45 'Lexend',system-ui,sans-serif; color:var(--slate); }
.wb-corks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:8px; }
.wb-corks button{ appearance:none; display:grid; justify-items:center; gap:5px; width:100%; min-height:44px; padding:10px 4px 9px; border:1px solid var(--line); border-radius:12px; background:var(--navy-deep); color:var(--cream); cursor:pointer; font:inherit; }
.wb-corks button[aria-pressed="true"]{ border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber); }
.wb-corks svg{ width:46px; height:19px; display:block; }
.wb-corks b{ font:600 .8125rem/1 'Zilla Slab','Rockwell',serif; }
.wb-corks i{ font:400 .6875rem/1 'Lexend',system-ui,sans-serif; font-style:normal; color:var(--slate); }
.wb-note{ margin:8px 0 0; font:400 .875rem/1.45 'Lexend',system-ui,sans-serif; color:var(--slate); }
.wb-note strong{ font-weight:500; color:var(--cream); }
.wb-corkform{ display:flex; gap:8px; margin-top:10px; }
.wb-corkform .cb-input{ flex:1 1 auto; min-width:0; }
.wb-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wb-picks{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.wb-picks button{ appearance:none; width:100%; min-height:44px; text-align:left; display:grid; gap:3px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--navy-deep); color:var(--cream); cursor:pointer; font:inherit; }
.wb-picks button[aria-pressed="true"]{ border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber); }
.wb-picks strong{ font:500 .9375rem/1.3 'Lexend',system-ui,sans-serif; }
.wb-picks span{ font:400 .8125rem/1.3 'Lexend',system-ui,sans-serif; color:var(--slate); }
.wb-done{ margin:0; padding:10px 12px; border-radius:10px; background:var(--navy-deep); font:400 .875rem/1.45 'Lexend',system-ui,sans-serif; color:var(--slate); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.wb-done strong{ font-weight:500; color:var(--cream); }
@media (prefers-reduced-motion: reduce){
  .cb-box .wb-stage, .wb-panel{ transition:none; }
  .cb-box .wb-lid{ transition:opacity .35s ease; }
  .cb-box.open .wb-lid{ transform:none; opacity:0; }
  .cb-box.open .wb-stage{ margin-top:0; }
  .cb-box.night .glow, .cb-box.night .wb-stage::before, .cb-box .cork-new{ animation:none; }
  .cb-box.night .glow{ opacity:.8; }
}

/* ---------- chooser and settings ---------- */
.cb-sec{ margin:22px 0 0; }
.cb-sec > h2{ font-size:1.2rem; margin:0 0 10px; }
.cb-cards{ display:grid; gap:12px; }
.cb-card-link .name{ display:block; font-size:1.2rem; }
.cb-card-link .meta{ display:block; margin-top:3px; }
.cb-setting{ padding:16px; }
.cb-setting h2{ margin:0 0 4px; font-size:1.15rem; }
.cb-setting > p{ margin:0 0 12px; color:var(--slate); font-size:0.875rem; }
/* Take a copy: the hint under its buttons, and the line that says a copy is ready. */
#s-copy .cb-hint{ margin:10px 0 0; }
#s-export-status{ margin:8px 0 0; font-size:0.78rem; }
#s-export-status:empty{ margin:0; }
.cb-share{ list-style:none; margin:0; padding:0; }
.cb-share li{ display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cb-share li:last-child{ border-bottom:0; }
.cb-seg{ display:inline-flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:999px; }
.cb-seg button{ appearance:none; border:0; background:transparent; color:var(--slate); font:500 0.8125rem/1 'Lexend',system-ui,sans-serif; padding:9px 13px; border-radius:999px; cursor:pointer; min-height:36px; }
.cb-seg button[aria-pressed="true"]{ background:#2f3238; color:var(--cream); box-shadow:inset 0 0 0 1px var(--line); }
.cb-adminnote{ margin:0 0 14px; font-size:0.875rem; }
.cb-sec-note{ margin:-4px 0 10px; }
.cb-subbtn{ font:inherit; color:var(--amber); padding:0; min-height:0; }
.cb-sh-intro{ margin-bottom:6px; }
.cb-shlink{ display:grid; gap:6px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.cb-shlink .cb-prow{ margin:0; }
#sh-link{ font-size:0.875rem; }
.cb-units{ list-style:none; margin:0 0 12px; padding:0; }
.cb-units li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cb-draw{ display:grid; gap:12px; padding:14px; border:1px dashed var(--line); border-radius:12px; margin-top:6px; }
.cb-preview{ max-width:360px; }
.cb-addr{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:0.875rem; color:var(--slate); }
.cb-addr .cb-input{ width:auto; flex:1 1 140px; }
.cb-danger{ border-color:rgba(224,133,115,0.4); }

/* ---------- talk ---------- */
.cb-talk{ border:1px solid var(--line); border-radius:12px; padding:10px 14px 8px; margin-bottom:14px; background:var(--navy-soft); }
.cb-talk-h{ margin:0 0 2px; font:600 0.6875rem/1.3 'Lexend',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.cb-talk ul{ list-style:none; margin:0; padding:0; }
.cb-talk button{ appearance:none; border:0; background:transparent; color:var(--cream); text-align:left; font:400 0.875rem/1.4 'Lexend',system-ui,sans-serif; padding:7px 0; cursor:pointer; width:100%; min-height:40px; overflow-wrap:anywhere; }
.cb-talk .said{ color:var(--slate); }
.cb-talk button:hover .said{ color:var(--cream); }
.t-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.t-list li{ border-left:2px solid var(--amber-dim); padding:2px 0 2px 12px; }
.t-who{ margin:0; font-size:0.8125rem; }
.t-who span{ color:var(--slate); margin-left:6px; }
.t-text{ margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.t-del{ font-size:0.78rem; margin-top:4px; }
.t-post{ display:flex; justify-content:flex-end; }
.d-talk textarea.cb-input{ min-height:64px; }

/* ---------- serve and keep ---------- */
.d-care p{ margin:0; font-size:0.875rem; line-height:1.45; }
.d-care .cb-k{ display:block; margin-bottom:2px; }

/* ---------- adding ---------- */
.cb-more{ border:1px solid var(--line); border-radius:12px; padding:0 14px; }
.cb-more summary{ cursor:pointer; padding:12px 0; font:500 0.875rem/1.35 'Lexend',system-ui,sans-serif; color:var(--slate); min-height:44px; display:flex; align-items:center; }
.cb-more summary::before{ content:"+"; font:600 1.1rem/1 'Zilla Slab','Rockwell',serif; color:var(--amber); width:18px; flex:none; }
.cb-more[open] summary::before{ content:"–"; }
.cb-more summary::-webkit-details-marker{ display:none; }
.cb-more[open] summary{ color:var(--cream); }
.cb-more-body{ padding:0 0 14px; }
.cb-photo-empty{ padding:14px 16px; text-align:center; }
.cb-seg-wide{ display:flex; width:100%; }
.cb-seg-wide button{ flex:1 1 0; padding:9px 6px; line-height:1.15; min-height:44px; }

.cb-toast-btn{ appearance:none; border:0; background:transparent; color:var(--amber); font:600 0.875rem/1 'Lexend',system-ui,sans-serif; padding:6px 8px; margin-left:10px; cursor:pointer; border-radius:999px; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }