/* The queue demo (/showroom/queue). Loaded on that page only, after styles.css.
   Every class starts qu- so nothing leaks into or out of the rest of the site.
   The shop is a made-up walk-in barber's: black, cream, pole red and blue, one yellow for "do this". */

@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2")}

.qu-wrap,.qu-intro,.qu-after,.qu-sheet,.qu-toast{--qu-black:#141414;--qu-black-2:#232323;--qu-cream:#F4EFE6;--qu-cream-2:#C9C1B4;--qu-red:#C8202A;
  --qu-blue:#1F4E9A;--qu-yellow:#F4B942;--qu-ink:#14213D;--qu-heavy:"Archivo Black","Archivo",Arial,sans-serif;--qu-mono:"IBM Plex Mono",Consolas,monospace}

/* ------------------------------------------------------------ the Pagefive bits around the shop */
.qu-intro{padding-block:clamp(28px,2rem + 2vw,60px) 18px}
.qu-intro .lead{font-size:1.15rem;color:var(--ink-2);max-width:62ch}
.qu-crumb{font-size:.95rem;color:var(--ink-2);margin-bottom:.6em}
.qu-noscript{background:var(--tint);border:1px solid #EBD38F;padding:12px 14px}
.qu-after{padding-block:clamp(44px,3rem + 3vw,96px)}
.qu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px)}
.qu-cols h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.qu-cols p{color:var(--ink-2)}
.qu-steps{margin:0 0 1em;padding-left:1.4em;display:grid;gap:10px}
.qu-steps li::marker{font-family:var(--display);font-weight:800;color:var(--accent)}
.qu-back{margin:1.4em 0 .8em}
@media (max-width:820px){.qu-cols{grid-template-columns:1fr}}

/* ------------------------------------------------------------ the shop */
.qu-shop{background:var(--qu-black);color:var(--qu-cream);border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:8px 8px 0 var(--ink)}
.qu-shop :focus-visible{outline:3px solid var(--qu-yellow);outline-offset:3px}
.qu-top{display:grid;grid-template-columns:22px 1fr;border-bottom:2px solid var(--qu-cream)}
.qu-pole{background:repeating-linear-gradient(-45deg,var(--qu-red) 0 14px,var(--qu-cream) 14px 28px,var(--qu-blue) 28px 42px,var(--qu-cream) 42px 56px);background-size:100% 79.2px;animation:qu-pole 3s linear infinite}
@keyframes qu-pole{to{background-position:0 79.2px}}
.qu-top-in{padding:clamp(18px,1rem + 1.6vw,32px) clamp(16px,1rem + 2vw,40px)}
.qu-eg{display:inline-block;margin:0 0 10px;font:500 .78rem/1.3 var(--qu-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--qu-black);background:var(--qu-cream);padding:3px 8px}
.qu-name{font:400 clamp(2.4rem,1.4rem + 4.6vw,4.8rem)/.92 var(--qu-heavy);letter-spacing:-.02em;text-transform:uppercase;margin:0 0 .18em;max-width:none}
.qu-tag{font-size:1.08rem;margin:0 0 .4em;max-width:none}
.qu-hours{margin:0;color:var(--qu-cream-2);font-size:.98rem;max-width:none}
.qu-hours b{color:var(--qu-yellow);font-weight:600}

.qu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,410px)}
.qu-main{padding:clamp(18px,1rem + 1.6vw,32px) clamp(16px,1rem + 2vw,40px);display:grid;gap:26px;align-content:start;min-width:0}
.qu-play{padding:clamp(18px,1rem + 1.6vw,32px) clamp(16px,1rem + 1.6vw,32px);border-left:2px solid var(--qu-cream);background:var(--qu-black-2);min-width:0}
@media (max-width:899px){.qu-grid{grid-template-columns:1fr}.qu-play{border-left:0;border-top:2px solid var(--qu-cream)}}
.qu-h{font:400 1.15rem/1.15 var(--qu-heavy);text-transform:uppercase;letter-spacing:.01em;margin:0 0 12px;color:var(--qu-cream)}
.qu-view[hidden]{display:none}

/* who's in the chairs, and the line */
.qu-chairs{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qu-chairs li{border:2px solid var(--qu-cream-2);padding:10px 12px;display:grid;gap:2px;min-width:0}
.qu-chairs li.qu-you{border-color:var(--qu-yellow);background:var(--qu-yellow);color:var(--qu-black)}
.qu-chair-n{font:500 .78rem/1.2 var(--qu-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--qu-cream-2)}
.qu-you .qu-chair-n{color:var(--qu-black)}
.qu-chairs b{font-size:1.3rem;line-height:1.15;overflow-wrap:anywhere}
.qu-chairs small{font-size:.92rem;color:var(--qu-cream-2)}
.qu-you small{color:var(--qu-black)}
.qu-waiting{margin:0 0 8px;color:var(--qu-cream-2);max-width:none}
.qu-line{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.qu-line li{font-size:.92rem;padding:3px 10px;border:1.5px solid #6E675D;color:var(--qu-cream);white-space:nowrap}
.qu-line li.qu-me{background:var(--qu-yellow);border-color:var(--qu-yellow);color:var(--qu-black);font-weight:600}
.qu-line li.qu-more{border-style:dashed;color:var(--qu-cream-2)}
.qu-line li:first-child::before{content:"Next: ";color:var(--qu-cream-2)}
.qu-line li.qu-me:first-child::before{color:var(--qu-black)}

/* the join form */
.qu-join form{display:grid;gap:16px}
.qu-field{display:grid;gap:6px;font-weight:600}
.qu-field small{font-weight:400;color:var(--qu-cream-2)}
.qu-field input{font:inherit;font-weight:400;font-size:1.05rem;min-height:48px;padding:10px 12px;border:2px solid var(--qu-cream);border-radius:var(--radius);background:var(--qu-cream);color:var(--qu-black);width:100%;max-width:360px}
.qu-field input::placeholder{color:#6B6459}
.qu-field input:focus-visible{outline:3px solid var(--qu-yellow);outline-offset:2px}
.qu-cuts{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qu-cuts legend{font-weight:600;margin-bottom:8px;padding:0}
.qu-cut{position:relative;cursor:pointer}
.qu-cut input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qu-cut-in{display:grid;gap:2px;height:100%;padding:12px;border:2px solid #6E675D;border-radius:var(--radius)}
.qu-cut-in b{font-size:1.05rem;line-height:1.2}
.qu-price{font:400 1.5rem/1.1 var(--qu-heavy);color:var(--qu-yellow)}
.qu-cut-in small{font-size:.88rem;color:var(--qu-cream-2)}
.qu-cut input:checked + .qu-cut-in{border-color:var(--qu-yellow);box-shadow:inset 0 0 0 2px var(--qu-yellow);background:#2C2A26}
.qu-cut input:focus-visible + .qu-cut-in{outline:3px solid var(--qu-yellow);outline-offset:3px}
@media (max-width:560px){.qu-cuts{grid-template-columns:1fr}.qu-cut-in{grid-template-columns:1fr auto;align-items:center}.qu-cut-in small{grid-column:1 / -1}}

/* buttons */
.qu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;border:2px solid var(--qu-cream);border-radius:var(--radius);font:600 1.02rem/1.2 var(--body);cursor:pointer;text-decoration:none}
.qu-btn-go{background:var(--qu-yellow);color:var(--qu-black);border-color:var(--qu-black);box-shadow:4px 4px 0 var(--qu-cream);transition:transform .12s ease,box-shadow .12s ease}
.qu-btn-go:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--qu-cream)}
.qu-btn-go:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--qu-cream)}
.qu-btn-ghost{background:transparent;color:var(--qu-cream)}
.qu-btn-ghost:hover{background:#2C2A26}
.qu-btn-stop{background:var(--qu-red);color:#fff;border-color:var(--qu-black)}
.qu-join .qu-btn-go{justify-self:start;font-size:1.1rem;padding-inline:26px}

/* your ticket */
.qu-ticket{display:grid;gap:16px;justify-items:start}
.qu-stub{background:var(--qu-cream);color:var(--qu-black);padding:16px 18px 18px;width:100%;max-width:440px;border-radius:var(--radius);position:relative;
  -webkit-mask:radial-gradient(circle 9px at 0 64px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 64px,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 64px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 64px,#0000 98%,#000) right/51% 100% no-repeat}
.qu-stub-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;height:48px;overflow:hidden;margin:0 0 22px;padding-bottom:12px;border-bottom:2px dashed #9A9184;font:500 .82rem/1.3 var(--qu-mono);text-transform:uppercase;letter-spacing:.05em;max-width:none}
.qu-stub-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qu-big{margin:0;display:grid}
.qu-big small{font:500 .78rem/1.2 var(--qu-mono);text-transform:uppercase;letter-spacing:.06em;color:#4A443B}
.qu-big b{font:400 clamp(3rem,2.2rem + 3vw,4.4rem)/1 var(--qu-heavy);letter-spacing:-.02em;display:inline-block}
#qu-t-place{color:var(--qu-red)}
.qu-bump{animation:qu-bump .5s ease-out}
@keyframes qu-bump{0%{transform:translateY(-10px);opacity:.2}100%{transform:none;opacity:1}}
.qu-wait{font-weight:600;font-size:1.2rem;margin:14px 0 0}
.qu-ahead{margin:0;color:#4A443B}
.qu-how{margin:0;color:var(--qu-cream-2);max-width:56ch}
.qu-how b{color:var(--qu-cream)}

/* you're up */
.qu-up{display:grid;gap:16px;justify-items:start}
.qu-upcard{background:var(--qu-yellow);color:var(--qu-black);padding:18px 20px 20px;border:4px solid var(--qu-cream);width:100%;max-width:520px;border-radius:var(--radius)}
.qu-upcard:focus{outline:none}
.qu-upcard.qu-flash{animation:qu-flash .7s steps(2,jump-none) 4}
@keyframes qu-flash{0%{background:var(--qu-yellow)}100%{background:var(--qu-cream)}}
.qu-up-small{margin:0 0 6px;font:500 .85rem/1.3 var(--qu-mono);text-transform:uppercase;letter-spacing:.06em}
.qu-up-big{font:400 clamp(2.2rem,1.4rem + 3.4vw,3.6rem)/.98 var(--qu-heavy);letter-spacing:-.02em;margin:0 0 .3em;max-width:none}
.qu-up-line{margin:0;font-weight:600}
.qu-up-btns{display:flex;flex-wrap:wrap;gap:12px}
.qu-onway-msg{margin:0;color:var(--qu-cream-2)}
.qu-onway-msg:empty{display:none}
.qu-shop[data-view=up] .qu-top{background:var(--qu-yellow);color:var(--qu-black)}
.qu-shop[data-view=up] .qu-hours{color:var(--qu-black)}
.qu-shop[data-view=up] .qu-hours b{color:var(--qu-black)}

/* the game */
.qu-rule{margin:0 0 12px;color:var(--qu-cream-2);font-size:.98rem}
.qu-touch{display:none}
.qu-game{position:relative;width:100%;max-width:400px;aspect-ratio:360/400;margin:0 auto;border:2px solid var(--qu-cream);background:#E9E3D8;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.qu-game.qu-on{touch-action:none}
.qu-game canvas{display:block;width:100%;height:100%}
.qu-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:20px;text-align:center;background:rgba(20,20,20,.84)}
.qu-overlay[hidden]{display:none}
.qu-ov-msg{margin:0;color:var(--qu-cream);font-weight:600;font-size:1.05rem;max-width:26ch}
.qu-ov-msg b{display:block;font:400 2.6rem/1 var(--qu-heavy);color:var(--qu-yellow);margin-bottom:6px}
.qu-pads{display:none;grid-template-columns:1fr 1fr;gap:10px;max-width:400px;margin:10px auto 0}
.qu-pad{min-height:58px;border:2px solid var(--qu-cream);border-radius:var(--radius);background:var(--qu-black);color:var(--qu-cream);font:400 1.6rem/1 var(--qu-heavy);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.qu-pad.qu-held{background:var(--qu-yellow);color:var(--qu-black)}
@media (max-width:899px),(pointer:coarse){.qu-pads{display:grid}.qu-touch{display:inline}.qu-keys{display:none}}
.qu-result{margin:12px 0 0;font-weight:600;min-height:1.5em}
.qu-board-h{margin-top:18px}
.qu-board{list-style:none;margin:0;padding:0;counter-reset:qu;border-top:2px solid #6E675D}
.qu-board li{counter-increment:qu;display:grid;grid-template-columns:2.2em 1fr auto;gap:8px;align-items:center;padding:8px 4px;border-bottom:2px solid #3A3833}
.qu-board li::before{content:counter(qu);font:400 1rem/1 var(--qu-heavy);color:var(--qu-cream-2)}
.qu-board li span{overflow-wrap:anywhere}
.qu-board li b{font:500 1.05rem/1 var(--qu-mono)}
.qu-board li.qu-me{background:var(--qu-yellow);color:var(--qu-black)}
.qu-board li.qu-me::before{color:var(--qu-black)}
.qu-board li.qu-new{animation:qu-new .9s ease-out}
@keyframes qu-new{0%{transform:translateX(-14px);opacity:0}100%{transform:none;opacity:1}}
.qu-fine{font-size:.88rem;color:var(--qu-cream-2);margin:10px 0 0}

/* the confirm sheets */
.qu-sheet{border:2px solid var(--ink);border-radius:var(--radius);padding:0;background:var(--qu-cream);color:var(--qu-black);width:min(460px,calc(100vw - 32px));box-shadow:8px 8px 0 var(--ink)}
.qu-sheet::backdrop{background:rgba(20,20,20,.6)}
.qu-sheet form{padding:22px 22px 20px}
.qu-sheet-h{font:400 1.5rem/1.15 var(--qu-heavy);margin:0 0 .4em;letter-spacing:-.01em}
.qu-sheet-p{margin:0 0 18px;color:#3F3A33}
.qu-sheet-btns{display:flex;flex-wrap:wrap;gap:12px}
.qu-sheet .qu-btn-go{box-shadow:4px 4px 0 var(--qu-black)}
.qu-sheet .qu-btn-go:hover{box-shadow:2px 2px 0 var(--qu-black)}
.qu-sheet .qu-btn-ghost{color:var(--qu-black);border-color:var(--qu-black)}
.qu-sheet .qu-btn-ghost:hover{background:#E4DDD0}
.qu-sheet .qu-btn-stop{color:#fff}
.qu-sheet[open]{animation:qu-rise .22s ease-out}
@keyframes qu-rise{0%{transform:translateY(24px);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:600px){
  .qu-sheet{margin:auto 0 0;width:100%;max-width:100%;border-width:2px 0 0;box-shadow:none;border-radius:10px 10px 0 0}
  .qu-sheet form{padding:22px 16px calc(20px + env(safe-area-inset-bottom))}
  .qu-sheet-btns .qu-btn{flex:1 1 140px}
}

/* the "you're up" toast, for when you are down the page playing */
.qu-toast{position:fixed;left:0;right:0;margin-inline:auto;bottom:16px;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:var(--qu-yellow);color:var(--qu-black);border:2px solid var(--qu-black);box-shadow:6px 6px 0 var(--qu-black);padding:12px 14px;width:max-content;max-width:calc(100vw - 32px);
  animation:qu-rise .3s ease-out}
.qu-toast[hidden]{display:none}
.qu-toast p{margin:0;font:400 1.25rem/1.1 var(--qu-heavy)}
.qu-toast .qu-btn-go{box-shadow:none;border-color:var(--qu-black);background:var(--qu-black);color:var(--qu-cream)}

/* reduced motion: nothing moves on its own; the game still plays */
@media (prefers-reduced-motion:reduce){
  .qu-pole{animation:none}
  .qu-bump,.qu-board li.qu-new,.qu-sheet[open],.qu-toast{animation:none}
  .qu-upcard.qu-flash{animation:none;border-color:var(--qu-red);box-shadow:0 0 0 4px var(--qu-cream)}
  .qu-btn-go{transition:none}
}