/* ══════════════════════════════════════════════════════════════════
   Venn Canteen · the pairing on the key moments (pop-up)
   Loaded by /menu/ and /pt/menu/ after /css/menu.css, whose tokens it uses.
   Markup per key moment: .pour-chips (two buttons under the tags) and a
   <dialog class="pour-sheet"> with that moment's wine and alcohol-free pour.
   Behaviour: /js/menu-pairing.js. Added 1 Oct 2026; source in _pairing-prototypes/production/.
   ══════════════════════════════════════════════════════════════════ */

/* ── the two buttons under the tags ── */
.pour-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pour-chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:5px 14px 5px 8px;border:1px solid rgba(17,17,16,.16);background:rgba(250,247,241,.5);cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:background .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pour-chip img{height:34px;width:auto;max-width:none;display:block;flex-shrink:0;filter:grayscale(1) contrast(.97);transition:filter .45s ease}
.pour-chip__k{font-family:'Inter',sans-serif;font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pour-chip__n{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:1.02rem;line-height:1.2;font-variant-numeric:lining-nums}
.pour-chip.is-active{background:var(--paper-note);border-color:rgba(17,17,16,.4)}
.pour-chip.is-active img,.pour-chip:focus-visible img{filter:none}
.pour-chip:focus{outline:none}
.pour-chip:focus-visible{outline:1px solid rgba(17,17,16,.4);outline-offset:2px}
/* hover only with a real pointer, so a tap on a phone is never read as a hover first */
@media (hover:hover){
  .pour-chip:hover{background:var(--paper-note);border-color:rgba(17,17,16,.3)}
  .pour-chip:hover img{filter:none}
}
/* the nudge, in the wheel's rhythm: the button lifts, the bottle blooms into colour and settles back to grey, twice */
@keyframes pour-chip-lift{0%{transform:scale(1);box-shadow:none}40%{transform:scale(1.045);box-shadow:0 4px 14px rgba(17,17,16,.14)}70%{transform:scale(1.015);box-shadow:0 2px 6px rgba(17,17,16,.08)}100%{transform:scale(1);box-shadow:none}}
@keyframes pour-chip-tint{0%{filter:grayscale(1)}40%{filter:grayscale(0)}72%{filter:grayscale(.25)}100%{filter:grayscale(1)}}
.pour-chips.pulse .pour-chip{animation:pour-chip-lift 1.3s cubic-bezier(.4,0,.2,1) 2}
.pour-chips.pulse .pour-chip img{animation:pour-chip-tint 1.3s cubic-bezier(.4,0,.2,1) 2}
.pour-chips.pulse .pour-chip + .pour-chip,.pour-chips.pulse .pour-chip + .pour-chip img{animation-delay:.16s}

/* ── the sheet: from the right on desktop, from the bottom on phones ── */
dialog.pour-sheet{position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;width:min(460px,100%);height:100%;max-width:100%;max-height:100%;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:-24px 0 60px rgba(17,17,16,.14);transform:translateX(102%);transition:transform .42s cubic-bezier(.4,0,.2,1)}
dialog.pour-sheet:not([open]){display:none}
dialog.pour-sheet[open]{display:flex}
dialog.pour-sheet.is-in{transform:none}
dialog.pour-sheet::backdrop{background:rgba(17,17,16,.36);animation:pour-sheet-fade .3s ease}
@keyframes pour-sheet-fade{from{opacity:0}to{opacity:1}}
.pour-sheet__in{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pour-sheet__grab{display:none}
.pour-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px 18px;border-bottom:1px solid rgba(17,17,16,.14);touch-action:none}
.pour-sheet__with{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:1.3rem;line-height:1.2;color:var(--ink);margin:0}
.pour-sheet__note{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:.6rem;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.pour-sheet__close{width:44px;height:44px;flex-shrink:0;border:1px solid rgba(17,17,16,.16);background:none;font:300 1.3rem/1 'Inter',sans-serif;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pour-sheet__close:focus{outline:none}
.pour-sheet__close:focus-visible{outline:1px solid rgba(17,17,16,.4);outline-offset:2px}
.pour-sheet__tabs{display:flex;gap:26px;padding:2px 28px 0;border-bottom:1px solid rgba(17,17,16,.14)}
.pour-sheet__tabs button{font-family:'Inter',sans-serif;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;margin:0 0 -1px;padding:0;min-height:46px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pour-sheet__tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.pour-sheet__tabs button:focus{outline:none}
.pour-sheet__tabs button:focus-visible{outline:1px solid rgba(17,17,16,.3);outline-offset:2px}
.pour-sheet__body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pour-sheet[data-show="wine"] .sheet-pour--zero,.pour-sheet[data-show="zero"] .sheet-pour--wine{display:none}
.sheet-stage{margin:0;background:var(--paper-alt);height:clamp(250px,40vh,390px);display:flex;align-items:flex-end;justify-content:center;padding-top:26px;border-bottom:1px solid rgba(17,17,16,.14)}
.sheet-stage img{height:88%;width:auto;max-width:none;display:block}
.sheet-text{padding:26px 28px 32px}
.sheet-text .pour__name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:2rem;line-height:1.04;color:var(--ink);margin:0 0 6px;text-wrap:balance;font-variant-numeric:lining-nums}
.sheet-text .pour__meta{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:1.06rem;line-height:1.35;color:rgba(17,17,16,.54);margin:0 0 18px;font-variant-numeric:lining-nums}
.sheet-text .pour__glass{font-family:'Inter',sans-serif;font-size:.78rem;line-height:1.9;color:rgba(17,17,16,.62);margin:0 0 18px}
.sheet-text .pour__why{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:1.16rem;line-height:1.55;color:rgba(17,17,16,.8);margin:0;padding-top:16px;border-top:1px solid rgba(17,17,16,.14)}

@media (max-width:640px){
  .pour-chips{margin-top:14px}
  .pour-chip{padding:4px 12px 4px 6px;gap:8px}
  .pour-chip img{height:30px}
  dialog.pour-sheet{inset:auto 0 0 0;width:100%;height:auto;max-height:calc(100% - 28px);transform:translateY(102%);box-shadow:0 -20px 60px rgba(17,17,16,.16)}
  .pour-sheet__grab{display:block;width:38px;height:4px;background:rgba(17,17,16,.2);margin:9px auto 0;border-radius:2px}
  .pour-sheet__head{padding:10px 20px 12px}
  .pour-sheet__tabs{padding:0 20px}
  .sheet-stage{height:clamp(190px,30vh,260px);padding-top:18px}
  .sheet-text{padding:20px 20px 26px}
  .sheet-text .pour__name{font-size:1.7rem}
  .sheet-text .pour__why{font-size:1.08rem}
}
@media (prefers-reduced-motion:reduce){
  dialog.pour-sheet,.pour-chip,.pour-chip img{transition:none!important}
  dialog.pour-sheet::backdrop{animation:none}
  .pour-chips.pulse .pour-chip,.pour-chips.pulse .pour-chip img{animation:none!important}
}