/* SIP IT review round 1: photographic bands, welcome scrim + honesty chip, home feed, Find where/taste/sticky CTA,
   Ask Alibi, shortlist streaming, desktop two-phone composition, toast + bottom-padding fixes. Loaded last. */

/* ---- never hide content behind the tab bar */
.phone.has-tabs main { padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)); }
.find, .ideas, .cb, .cart, .alibi { padding-bottom: 12px; }
.drink { padding-bottom: 28px; }

/* ---- toast must never sit on controls: above the tab bar normally, under the header in full-screen cook mode */
.phone:not(.has-tabs) .toast { bottom: auto; top: 84px; }
body[data-route="welcome"] .toast { top: 16px; }

/* ---- photographic page band (real velvet / back-bar photography + scrim) */
.band { position: relative; min-height: 196px; display: flex; align-items: flex-end; overflow: hidden; background: radial-gradient(70% 90% at 30% 20%, #7a2a2f, var(--velvet-deep) 60%, var(--bg)); border-bottom: 1px solid #c9a24b55; }
.band-img { filter: saturate(1.15) brightness(.85); }
.band-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,7,6,.96) 0%, rgba(11,7,6,.68) 45%, rgba(58,16,20,.35) 80%, rgba(11,7,6,.6) 100%); }
.band-text { position: relative; padding: 56px var(--pad) 18px; width: 100%; }
.band-text .h1 { margin-top: 4px; text-shadow: 0 2px 14px #000; overflow-wrap: anywhere; }
.band-text .caps { color: #D5C6AE; }
.band-sub { margin-top: 6px; font: italic 17px/24px var(--serif); color: #E3D6BF; text-shadow: 0 1px 10px #000; }
.band-back { position: absolute; z-index: 2; top: max(10px, env(safe-area-inset-top)); left: 10px; min-height: 48px; padding: 0 16px 0 10px; display: inline-flex; align-items: center; gap: 2px; border-radius: 24px; border: 1px solid #c9a24b88; background: rgba(11,7,6,.62); color: var(--gold-hi); font: 600 15px/20px var(--sans); cursor: pointer; backdrop-filter: blur(4px); }
.band-back svg { width: 22px; height: 22px; }
.pro-screen { padding-top: 22px; }
.cart-sum { margin: 14px 0 0; min-height: 0; } .cart-sum:empty { display: none; }
.cart-foot, .cb-foot { padding-bottom: 8px; }

/* ---- velvet as a real accent on cards */
.surface { box-shadow: inset 3px 0 0 var(--velvet), 0 8px 24px #0007; }
.find, .ideas, .cb, .cart, .alibi { background: radial-gradient(520px 340px at 90% 120px, #5a1a1f66, transparent 70%), radial-gradient(420px 300px at -10% 55%, #5a1a1f33, transparent 70%), linear-gradient(180deg, #170b09, var(--bg) 40%); }

/* ---- welcome: stronger scrim, readable type, honesty chip */
.w-scrim { background: linear-gradient(to bottom, rgba(11,7,6,.86) 0%, rgba(11,7,6,.72) 34%, rgba(11,7,6,.55) 52%, rgba(11,7,6,.9) 80%, rgba(11,7,6,.97) 100%); }
.w-photo { object-position: 50% 40%; }
.w-top { padding: 6px 12px 0; }
.w-top::before { content: ""; position: absolute; inset: -30px -10px -10px; z-index: -1; background: radial-gradient(closest-side, rgba(11,7,6,.7), transparent); }
.w-h1 { font-weight: 400; text-shadow: 0 2px 22px #000, 0 0 2px #000; }
.w-tag { color: var(--text); text-shadow: 0 2px 18px #000, 0 0 3px #000; }
.w-support { color: #F0E4CE; text-shadow: 0 1px 12px #000, 0 0 3px #000; }
.w-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid #c9a24b88; background: rgba(11,7,6,.78); color: #E3D6BF; font: 600 12px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.w-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.w-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.w-about { text-shadow: 0 1px 8px #000; }

/* ---- home: feed hero, caps name, visible thumbnail strip, quick actions */
.h-hero { height: min(52dvh, 460px); min-height: 340px; }
.h-h1 { margin: 0; }
.h-feat { display: block; margin: 0; min-height: 48px; font: 400 30px/36px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-shadow: 0 2px 16px #000; text-decoration: none; overflow-wrap: anywhere; }
.h-featdesc { margin-top: 2px; font: italic 16px/22px var(--serif); color: #E3D6BF; text-shadow: 0 1px 10px #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-body { padding-top: 4px; }
.h-sec { margin: 16px 0 10px; }
.h-strip { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad) 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.h-strip::-webkit-scrollbar { display: none; }
.h-strip li { flex: 0 0 auto; scroll-snap-align: start; }
.h-thumb { position: relative; display: block; width: 92px; height: 116px; border-radius: 12px; overflow: hidden; border: 1px solid #c9a24b55; background: var(--wood2); color: var(--text); text-decoration: none; }
.h-tname { position: absolute; left: 6px; right: 6px; bottom: 6px; font: 400 13px/16px var(--serif); text-shadow: 0 1px 6px #000; overflow-wrap: anywhere; }
.h-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.h-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; padding: 8px 6px; border-radius: 14px; border: 1px solid #c9a24b66; background: linear-gradient(180deg, #3a1014, #1A0F0C); color: var(--text); text-decoration: none; font: 600 13px/18px var(--sans); text-align: center; }
.h-q svg { color: var(--gold-hi); }
.h-q small { font-size: 11px; line-height: 14px; color: var(--gold-hi); letter-spacing: .06em; text-transform: uppercase; }

/* ---- find: where toggle, taste segments, sticky Show drinks */
.find-where { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.where-opt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px; border: 1.5px solid #6b5530; background: #170d09; color: var(--text); font: 600 16px/22px var(--sans); cursor: pointer; }
.where-opt svg { width: 22px; height: 22px; color: var(--gold-hi); }
.where-opt[aria-checked="true"] { border-color: var(--gold-hi); background: linear-gradient(180deg, var(--velvet), #3a1014); box-shadow: 0 0 0 1px var(--gold) inset; }
.find-zp { margin-top: 12px; }
.find-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.find-seg .chip { min-height: 48px; }
.find-seg .chip[aria-checked="true"] { background: linear-gradient(180deg, #d6b25a, #b98f3b); color: #1A0F0C; border-color: var(--gold-hi); font-weight: 600; }
.find-seg .chip:disabled { opacity: .4; cursor: not-allowed; }
#spirit-wrap.is-off { opacity: .5; }
.find-alibi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: var(--text); }
.find-alibi .h-ct { display: block; font: 600 16px/22px var(--sans); } .find-alibi .h-cd { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.find-cta { position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); z-index: 5; margin-top: 24px; padding: 20px var(--pad) 12px; text-align: center; background: linear-gradient(to top, rgba(11,7,6,.98) 70%, rgba(11,7,6,0)); }
.find-cta .find-help { margin-top: 6px; }
.find-help:empty { display: none; }

/* ---- ask alibi */
.alibi-lab { margin-top: 18px; }
.alibi-note { margin-top: 16px; }
.alibi-out { margin-top: 8px; padding-bottom: 24px; }
.alibi-out .idea-gh { margin-top: 16px; }

/* ---- shortlist */
.idea-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--gold-hi); min-height: 20px; }
.idea-prog:empty { display: none; }
.idea-dots { display: inline-flex; gap: 4px; } .idea-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); animation: dotp 1s ease-in-out infinite; } .idea-dots i:nth-child(2) { animation-delay: .15s; } .idea-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotp { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.idea-source { margin-top: 14px; color: var(--muted); text-align: center; padding-bottom: 12px; }
.idea-morewrap { margin-top: 16px; } .idea-morewrap:empty { display: none; }
.idea-card .art-save { width: 48px; height: 48px; }
.idea-ul .idea-card:nth-child(n) { border-left: 3px solid var(--velvet); }

/* ---- recipe: optional ingredients */
.is-opt .di-st { color: var(--muted); }

/* ---- cookbook: richer rows */
.cb-row { border-left: 3px solid var(--velvet); box-shadow: 0 10px 28px #0008; }
.cb-link { min-height: 124px; }
.cb-photo { flex-basis: 100px; height: 100px; border-radius: 14px; }
.cb-all { margin-top: 4px; }

/* ---- desktop: front phone + tilted second phone showing the Tonight feed */
.phones { position: relative; display: flex; justify-content: center; width: 100%; }
.phone-back { display: none; }
@media (min-width: 900px) {
  .phones { width: 390px; justify-content: flex-start; }
}
@media (min-width: 1100px) {
  .stage { gap: 56px; }
  .phones { width: 560px; }
  .phones .phone { position: relative; z-index: 2; flex: none; }
  .phone-back { display: block; position: absolute; z-index: 1; left: 190px; top: 50%; width: 390px; height: min(844px, calc(100dvh - 48px)); margin-top: calc(min(844px, calc(100dvh - 48px)) / -2 + 24px); border: 1px solid #3b2a1c; border-radius: 40px; box-shadow: 0 30px 90px #000a, 0 0 0 10px #120a07, 0 0 0 11px #3b2a1c; transform: rotate(7deg); transform-origin: 50% 90%; background: var(--bg); pointer-events: none; filter: brightness(.82) saturate(.95); }
}

/* sticky CTAs need the window (not .phone) to be the scroller on phones: clip instead of hide */
@media (max-width: 899.98px) { .phone { overflow-x: clip; overflow-y: visible; } }

/* ---- round 2: content always clears the tab bar (+ sticky CTA when present) */
html { scroll-padding-bottom: calc(var(--tab-h) + 32px + env(safe-area-inset-bottom)); }
html:has(.find-cta) { scroll-padding-bottom: calc(var(--tab-h) + 128px + env(safe-area-inset-bottom)); }
.phone.has-tabs main { padding-bottom: calc(var(--tab-h) + 48px + env(safe-area-inset-bottom)); }
.find-cta { margin-top: 12px; padding: 12px var(--pad) 10px; background: #0B0706; border-top: 1px solid #c9a24b55; box-shadow: 0 -10px 24px #0B0706; }
.find-cta .find-help { margin-top: 4px; }
.find-cta .btn { min-height: 52px; }
.find-block { padding-bottom: 4px; }
.find .band, .alibi .band { min-height: 168px; }
.find .band-text, .alibi .band-text { padding-top: 52px; }
.h-sec { margin-top: 20px; }
.idea-source { margin-bottom: 8px; }
@media (min-width: 900px) { .phone.has-tabs main { padding-bottom: calc(var(--tab-h) + 48px); } .find-cta { bottom: var(--tab-h); } }