/* Layout and motion. Uses theme tokens only (css/themes.css); no color, font or radius literals here.
   Sizes are in em off the stage font-size, so one layout scales from a desktop preview to the 1080x1920 panel. */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden;background:#000}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left;touch-action:manipulation}
svg{display:block}

#viewport{position:fixed;inset:0;display:grid;place-items:center}
#stage{
  --h:min(100vh, calc(100vw * 16 / 9));
  height:var(--h);width:calc(var(--h) * 9 / 16);font-size:calc(var(--h) / 46);
  position:relative;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-body);
}
#screen{position:absolute;inset:0;display:flex;flex-direction:column}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.screen > *{flex-shrink:0}  /* fixed parts never squeeze; the one flex:1 area per screen absorbs the space */
h1,h2,h3{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);line-height:1.05}

/* press feedback on everything tappable */
button{transition:transform .15s ease}
button:active{transform:scale(.96)}

/* ---------- home ---------- */
.home{padding:1.6em 1.2em 1.3em;gap:.8em}
.kicker{font-size:.62em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.home h1{font-size:2.2em;margin:.3em 0 .25em}
.lede{font-size:.8em;color:var(--mute)}
.tiles{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.7em}
.tile{border-radius:var(--radius);padding:1.1em;position:relative;overflow:hidden;display:flex;flex-direction:column;
  opacity:0;transform:translateY(1.2em);animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards}
.tile:nth-child(2){animation-delay:.08s}.tile:nth-child(3){animation-delay:.16s}.tile:nth-child(4){animation-delay:.24s}
.tile::after{content:"";position:absolute;width:9em;height:9em;border-radius:50%;background:var(--bg);opacity:.35;right:-3em;bottom:-3.5em}
.tile-text{position:relative;z-index:1;display:flex;flex-direction:column}
.tile b{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);font-size:1.4em;line-height:1.05}
.tile small{font-size:.66em;font-weight:700;opacity:.8;margin-top:.35em}
.tile-art{position:absolute;right:.3em;bottom:.3em;width:46%;height:64%;z-index:1}
.tile-art svg,.tile-art img{width:100%;height:100%;object-fit:contain}
.tile-beer{background:var(--cat-beer);color:var(--cat-beer-ink)}
.tile-wine{background:var(--cat-wine);color:var(--cat-wine-ink)}
.tile-cider{background:var(--cat-cider);color:var(--cat-cider-ink)}
.tile-na{background:var(--cat-na);color:var(--cat-na-ink)}
.help{background:var(--primary);color:var(--on-primary);border-radius:var(--radius);padding:1.1em 1.2em;display:flex;
  justify-content:space-between;align-items:center;font-weight:900;font-size:1.1em;box-shadow:var(--shadow);font-family:var(--font-head)}
.help span{font-size:.6em;font-weight:700;opacity:.9;font-family:var(--font-body)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em}
.quick button{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9em .8em;
  font-weight:800;font-size:.78em;display:flex;align-items:center;gap:.5em}
.quick svg{width:1.4em;height:1.4em;flex:none;color:var(--primary)}

/* ---------- motion ---------- */
.screen.enter{animation:enter .22s ease-out}
@keyframes enter{from{opacity:0}}
@keyframes rise{to{opacity:1;transform:none}}
.bub{animation:bubble 3s linear infinite}
@keyframes bubble{from{transform:translateY(0);opacity:0}15%{opacity:.85}to{transform:translateY(-140px);opacity:0}}


/* ---------- shared: top bar, pills, chips, buttons ---------- */
.bar{display:flex;align-items:center;gap:.6em;padding:1em 1.2em .7em}
.bar h2{flex:1;min-width:0;font-size:1.45em;line-height:1.3}
.bar h2.long{font-size:1.05em}
.bar h2.xlong{font-size:.8em;overflow-wrap:anywhere}
.pill{height:2.6em;padding:0 1em;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.4em;font-weight:800;font-size:.75em;flex:none}
.pill svg{width:1.3em;height:1.3em}
.chip{min-height:2.4em;padding:0 .9em;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.35em;font-weight:700;font-size:.66em;white-space:nowrap;flex:none}
.chip .n{opacity:.6;font-weight:600}
.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.chip svg{width:1.3em;height:1.3em}
.primary-btn{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-sm);padding:1em 1.4em;
  font-weight:800;font-size:.8em;text-align:center;box-shadow:var(--shadow)}

/* ---------- browse ---------- */
.chips-row{display:flex;gap:.4em;padding:0 1.2em;overflow:hidden}
.tools{display:flex;align-items:center;gap:.5em;padding:.6em 1.2em 0}
.sorts{display:flex;gap:.1em;margin-left:auto}
.sort{font-size:.6em;font-weight:700;color:var(--mute);padding:.7em .75em;border-radius:999px}
.sort.on{background:var(--surface-2);color:var(--ink)}
.count{padding:.5em 1.2em .4em;font-size:.65em;color:var(--mute)}
.count b{color:var(--ink)}
.grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:.5em;padding:0 1.2em}
.grid.from-right{animation:slide-r .28s ease-out}
.grid.from-left{animation:slide-l .28s ease-out}
@keyframes slide-r{from{transform:translateX(1.5em);opacity:.3}}
@keyframes slide-l{from{transform:translateX(-1.5em);opacity:.3}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55em;display:flex;gap:.55em;min-height:0;overflow:hidden}
.card-art{width:3.4em;flex:none;border-radius:calc(var(--radius-sm) * .7);background:var(--bg);display:flex;align-items:center;justify-content:center;padding:.2em 0}
.card-art svg,.card-art img{width:100%;height:100%;object-fit:contain}
.card-meta{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.08em}
.card .brand{font-size:.46em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);line-height:1.25}
.card .name{font-size:.7em;font-weight:800;line-height:1.15;font-family:var(--font-head);overflow-wrap:anywhere}
.card .name.long{font-size:.62em}
.card .style{font-size:.52em;color:var(--mute)}
.card-foot{margin-top:auto;display:flex;align-items:baseline;gap:.4em}
.price{color:var(--price);font-weight:900}
.card .price{font-size:.82em}
.card .size{font-size:.48em;color:var(--mute)}
.card-loc{display:flex;align-items:center;gap:.25em;font-size:.5em;font-weight:800;color:var(--primary)}
.card-loc svg{width:1.2em;height:1.2em}
.badge{display:inline-flex;align-items:center;gap:.3em;border-radius:999px;padding:.25em .65em;font-size:.46em;font-weight:800;
  background:var(--surface-2);color:var(--mute);margin-top:.2em}
.badge svg{width:1.1em;height:1.1em}
.badge-pick{background:var(--badge-bg);color:var(--badge-ink)}
.badge-local,.badge-organic,.badge-nsa{background:var(--loc-bg);color:var(--loc-ink)}
.pager{display:flex;align-items:center;justify-content:space-between;padding:.6em 1.2em 1em;font-weight:700;color:var(--mute)}
.pager span{font-size:.75em}
.pager-btn{display:inline-flex;align-items:center;gap:.4em;padding:.9em 1.4em;font-size:.75em;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-weight:800;color:var(--ink)}
.pager-btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.pager-btn:disabled{opacity:.35}
.pager-btn svg{width:1.2em;height:1.2em}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;text-align:center;padding:2em}
.empty b{font-size:1.1em;font-family:var(--font-head)}
.empty span{color:var(--mute);font-size:.8em}
.more{position:absolute;inset:0;z-index:5;background:var(--bg);display:flex;flex-direction:column;padding:1.2em;gap:.8em;overflow:hidden;
  animation:sheet .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet{from{transform:translateY(3em);opacity:0}}
.more-head{display:flex;align-items:center;justify-content:space-between}
.more-head h3{font-size:1.4em}
.more-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:.9em;overflow:hidden}
.more h4{font-size:.55em;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.5em}
.more .chips{display:flex;flex-wrap:wrap;gap:.35em}

/* ---------- product detail ---------- */
.spacer{flex:1}
.detail{gap:.8em;padding-bottom:1em}
.d-top{display:flex;gap:1em;padding:0 1.2em}
.d-art{width:9em;height:13em;flex:none;border-radius:var(--radius);background:var(--surface);display:flex;align-items:center;justify-content:center;padding:1em 0}
.d-art svg,.d-art img{width:100%;height:100%;object-fit:contain}
.d-head{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.2em}
.d-brand{font-size:.6em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.d-head h2{font-size:1.7em;line-height:1.1}
.d-head h2.long{font-size:1.3em}
.d-style{font-size:.72em;color:var(--mute)}
.d-pick{font-size:.58em;margin-top:.3em}
.d-price{margin-top:auto;display:flex;align-items:baseline;gap:.5em}
.d-price .price{font-size:1.9em;letter-spacing:-.02em}
.d-price .size{font-size:.7em;color:var(--mute)}
.d-loc{margin:0 1.2em;background:var(--loc-bg);color:var(--loc-ink);border-radius:var(--radius);padding:.9em 1.2em;display:flex;align-items:center;gap:.9em;
  opacity:0;transform:translateY(1em);animation:rise .55s .45s cubic-bezier(.2,.8,.2,1) forwards}
.d-pin{width:2.4em;height:2.4em;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;animation:bob 1.6s 1s ease-in-out infinite}
.d-pin svg{width:1.3em;height:1.3em}
@keyframes bob{40%{transform:translateY(-.25em)}}
.d-loc small{display:block;font-size:.55em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.d-loc b{display:block;font-size:1.45em;font-weight:900;white-space:nowrap;font-family:var(--font-head)}
.d-facts{display:grid;grid-template-columns:1fr 1fr;gap:.6em 1em;padding:0 1.2em}
.d-facts span,.d-research span,.d-notes span{display:block;font-size:.52em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.d-facts b{font-size:.75em;font-weight:700}
.d-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:.7em;padding:.8em 1.2em 0;border-top:1px solid var(--line);margin:0 1.2em;padding-left:0;padding-right:0}
.d-research{display:grid;grid-template-columns:1fr 1fr;gap:.5em 1em}
.d-research div{border-left:3px solid var(--line);padding-left:.6em}
.d-research b{display:block;font-size:.68em;font-weight:700;line-height:1.3}
.d-art.cat-beer{background:var(--cat-beer)}.d-art.cat-wine{background:var(--cat-wine)}.d-art.cat-cider{background:var(--cat-cider)}.d-art.cat-na{background:var(--cat-na)}
.d-research b.yes{color:var(--primary)}
.d-research b.unk{color:var(--mute);font-weight:500}
.d-notes p{font-size:.78em;line-height:1.4;margin:.15em 0 .55em}
.d-qr{display:flex;gap:.9em;align-items:center;margin:0 1.2em;padding-top:.8em;border-top:1px solid var(--line)}
.qr{background:#fff;padding:.25em;border-radius:var(--radius-sm);flex:none;width:4.6em;height:4.6em}
.qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.d-qr b{display:block;font-size:.8em}
.d-qr span{display:block;font-size:.62em;color:var(--mute);margin-top:.15em}
.d-qr small{display:block;font-size:.5em;color:var(--mute);margin-top:.4em}

/* pour animation on the detail drink */
.d-art .liquid{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:pour 1.1s .15s cubic-bezier(.3,.7,.2,1) forwards}
.d-art .foam{opacity:0;animation:fade .4s 1.1s forwards}
@keyframes pour{to{transform:scaleY(1)}}
@keyframes fade{to{opacity:1}}

/* ---------- search ---------- */
.sbox{margin:.2em 1.2em .8em;height:2.7em;border-radius:999px;border:3px solid var(--primary);background:var(--surface);display:flex;align-items:center;
  padding:0 1.1em;font-size:1em;font-weight:800;letter-spacing:.02em;white-space:pre}
.sbox .ph{color:var(--mute);font-weight:600;font-size:.8em;letter-spacing:0}
.caret{width:3px;height:1.2em;background:var(--primary);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:.5em;padding:0 1.2em}
.s-msg{flex:1;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:.85em;padding:0 2em;text-align:center}
.see-all{border:2px dashed var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:.4em;
  font-weight:900;color:var(--primary);font-size:.85em}
.see-all svg{width:1.2em;height:1.2em}
.kb{margin-top:.8em;background:var(--surface);border-top:1px solid var(--line);padding:.6em .6em .9em;display:flex;flex-direction:column;gap:.35em}
.kb-row{display:flex;gap:.3em;justify-content:center}
.key{height:2.3em;flex:1;max-width:2.4em;border-radius:.4em;background:var(--bg);border:1px solid var(--line);font-size:.85em;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-body)}
.key:active{background:var(--primary);color:var(--on-primary)}
.key.wide{max-width:none;flex:2.2;font-size:.65em;height:2.95em}
.key.space{max-width:none;flex:4;font-size:.65em;height:2.95em}
.key.go{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}

/* ---------- help me choose ---------- */
.quiz{padding-bottom:1.4em}
.bar h2.center{text-align:center;font-size:1.1em}
.progress{display:flex;justify-content:center;gap:.4em;padding:.6em 0 0}
.progress i{width:3.2em;height:.32em;border-radius:999px;background:var(--line)}
.progress i.on{background:var(--primary)}
.q-step{text-align:center;color:var(--primary);font-size:.6em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-top:1.3em}
.q-title{text-align:center;font-size:1.9em;margin:.3em 1.2em .7em;line-height:1.35}
.opts{flex:1;min-height:0;display:flex;flex-direction:column;gap:.6em;padding:0 1.2em}
.opt{flex:1;min-height:0;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:.8em 1.1em;
  display:flex;align-items:center;gap:.9em;opacity:0;transform:translateY(1em);animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards}
.opt:nth-child(2){animation-delay:.06s}.opt:nth-child(3){animation-delay:.12s}.opt:nth-child(4){animation-delay:.18s}.opt:nth-child(5){animation-delay:.24s}
.opt:active{border-color:var(--primary)}
.opt span{flex:1;min-width:0}
.opt b{display:block;font-size:1.05em;font-family:var(--font-head);font-weight:var(--head-weight)}
.opt small{display:block;font-size:.66em;color:var(--mute);margin-top:.2em}
.opt > svg{width:1.3em;height:1.3em;color:var(--mute);flex:none}
.dot{width:1.6em;height:1.6em;border-radius:50%;flex:none;border:2px solid var(--line)}
.dot-beer{background:var(--cat-beer-ink)}.dot-wine{background:var(--cat-wine-ink)}.dot-cider{background:var(--cat-cider-ink)}
.dot-na{background:var(--cat-na-ink)}.dot-ink{background:var(--ink)}

/* ---------- staff popup (5 taps, top center) ---------- */
#staff-zone{position:absolute;top:0;left:40%;width:20%;height:3.6em;z-index:30}
#staff{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:1.2em}
#staff[hidden]{display:none}
#staff::before{content:"";position:absolute;inset:0;background:var(--scrim)}
.staff-card{position:relative;width:100%;max-width:18em;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3em;display:flex;flex-direction:column;gap:.7em;
  animation:sheet .25s cubic-bezier(.2,.8,.2,1)}
.staff-card h2{font-size:1.3em;line-height:1.3}
.staff-label{font-size:.6em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.staff-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.staff-look{display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.6em .3em;border-radius:var(--radius-sm);
  border:2px solid var(--line);font-weight:800;font-size:.8em}
.staff-look[aria-pressed="true"]{border-color:var(--primary);background:var(--surface-2)}
.staff-swatch{width:2.6em;height:2.6em;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center}
.staff-swatch b{width:1.2em;height:1.2em;border-radius:50%;background:var(--primary)}
.staff-sales,.staff-close{min-height:2.8em;border-radius:999px;font-weight:800;font-size:.8em;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:.5em}
.staff-sales{background:var(--primary);color:var(--on-primary)}
.staff-sales:disabled{background:var(--surface-2);color:var(--mute);cursor:default}
.staff-sales small{font-size:.8em;font-weight:700}
.staff-close{border:1px solid var(--line)}

/* ---------- reduced motion: keep last so these end states win ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tile,.opt{opacity:1;transform:none}
  .bub{opacity:0}
  .d-loc{opacity:1;transform:none}
  .d-art .liquid{transform:none}
  .d-art .foam{opacity:1}
}