/* ==========================================================================
   Tickets, ticket view and gate. Builds on css/base.css (tokens, .btn, .field,
   .ticket). Loaded after it.
   ========================================================================== */

.app{min-height:100svh;display:flex;flex-direction:column}
.app__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:var(--rule) solid var(--ink)}
.app__top img{height:38px;width:auto}
.app__top a{font-weight:700;font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.app__main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:22px 16px 60px}
.app h1{font-family:var(--f-display);text-transform:uppercase;line-height:.9;font-size:clamp(46px,13vw,84px);letter-spacing:.005em}
.app h2{font-family:var(--f-display);text-transform:uppercase;line-height:.95;font-size:30px}
.kicker{font-family:var(--f-mark);font-size:20px;color:var(--yellow);transform:rotate(-2deg);display:inline-block}
.state{display:inline-block;margin-top:12px;padding:5px 10px;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.state--low{background:var(--red)}
.state--full{background:var(--cream)}
.muted{color:var(--muted)}
.small{font-size:14px}
.gap{display:grid;gap:16px;align-content:start}
.gap-sm{display:grid;gap:10px}
.mt{margin-top:22px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row > .grow{flex:1 1 auto}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font-weight:700;cursor:pointer}

/* quantity stepper */
.stepper{justify-self:start;display:inline-grid;grid-template-columns:52px 64px 52px;border:3px solid var(--ink);background:var(--cream);color:var(--ink)}
.stepper button{border:0;background:var(--yellow);font-size:26px;font-weight:700;cursor:pointer}
.stepper button:disabled{background:#E7DDC6;cursor:not-allowed}
.stepper output{display:grid;place-items:center;font-family:var(--f-display);font-size:30px}

.guest{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px}
.guest .field > label{font-size:11px}
@media (max-width:420px){.guest{grid-template-columns:1fr}}

.total{display:flex;justify-content:space-between;align-items:baseline;border-top:3px solid var(--line);padding-top:14px}
.total b{font-family:var(--f-display);font-size:34px}
.note{border:3px solid var(--ink);background:var(--cream);color:var(--ink);padding:12px 14px;font-weight:700}
.note--bad{background:var(--ink);color:#FF8074;border-color:var(--red)}
.note--good{background:var(--teal)}

/* the ticket, shareable */
.pass{--punch:var(--ink)}
.pass .ticket__body{display:grid;gap:12px}
.pass__name{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(30px,9vw,44px);line-height:.92;word-break:break-word}
.pass__meta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5F5748}
.pass__code{font-family:var(--f-mono);font-size:15px;font-weight:700;letter-spacing:.06em}
.qr{position:relative;width:100%;max-width:280px;aspect-ratio:1;border:3px solid var(--ink);background:var(--cream)}
.qr svg{width:100%;height:100%}
.qr__cover{position:absolute;inset:0;display:grid;place-items:center;gap:6px;background:var(--ink);color:var(--cream);border:0;cursor:pointer;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;text-align:center}
.qr__cover span{font-family:var(--f-display);font-size:38px;letter-spacing:0}
.stamp{display:inline-block;border:3px solid currentColor;padding:4px 10px;font-family:var(--f-display);font-size:22px;
  text-transform:uppercase;color:#1F7A3A;transform:rotate(-4deg)}

.tlist{display:grid;gap:10px}
.tlist__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:3px solid var(--ink);
  background:var(--cream);color:var(--ink);padding:12px}
.tlist__item b{display:block;font-size:17px}
.tlist__item small{font-family:var(--f-mono);font-size:12px}
.tlist__item .btn{padding:10px 14px;font-size:13px;box-shadow:3px 3px 0 var(--ink)}
.wa{--btn-bg:#25D366}

.confetti-burst{position:fixed;inset:0;pointer-events:none;z-index:900}

/* ---------------------------------------------------------------- gate */
.gate{background:var(--ink);color:var(--cream)}
.gate .app__main{max-width:640px;padding-bottom:110px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:600;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--ink-soft);border-top:var(--rule) solid var(--yellow);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{background:none;border:0;color:var(--cream);padding:12px 4px 14px;font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;display:grid;gap:4px;justify-items:center}
.tabs button i{font-style:normal;font-size:22px;line-height:1}
.tabs button[aria-selected="true"]{background:var(--yellow);color:var(--ink)}
.who{font-size:13px;font-weight:700}
.scan{position:relative;width:100%;aspect-ratio:1;max-height:62svh;background:#000;border:3px solid var(--yellow);overflow:hidden}
.scan video{width:100%;height:100%;object-fit:cover}
.scan__frame{position:absolute;inset:16%;border:4px solid rgba(255,207,51,.9);border-radius:6px;pointer-events:none}
.scan__off{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px}
.result{position:fixed;inset:0;z-index:800;display:grid;place-items:center;text-align:center;padding:24px;color:var(--ink)}
.result--in{background:#38D27A}
.result--warn{background:var(--yellow)}
.result--bad{background:var(--red)}
.result--vendor{background:var(--lilac)}
.result__big{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(56px,18vw,120px);line-height:.85}
.result__name{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(28px,8vw,48px);margin-top:14px;word-break:break-word}
.result__sub{font-weight:700;margin-top:10px;font-size:17px}
.gate .field > label{color:#B9B2C9}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:3px solid var(--cream)}
.seg button{background:none;border:0;color:var(--cream);padding:13px 6px;font-weight:700;cursor:pointer;font-size:15px}
.seg button + button{border-left:3px solid var(--cream)}
.seg button[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}
.card{border:3px solid rgba(251,243,226,.25);padding:14px;display:grid;gap:10px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kv div{border:3px solid rgba(251,243,226,.25);padding:12px}
.kv b{display:block;font-family:var(--f-display);font-size:32px;line-height:1}
.kv small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B9B2C9}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:2px solid rgba(251,243,226,.15);padding:10px 0}
.res b{display:block}
.res small{color:#B9B2C9;font-size:13px}
.badge-in{color:#38D27A;font-weight:700}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:8px 6px;border-bottom:2px solid rgba(251,243,226,.15);vertical-align:top}
.tbl th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#B9B2C9}
.tbl-wrap{overflow-x:auto}
.gate .check{background:var(--ink-soft);color:var(--cream);border-color:rgba(251,243,226,.4)}
.gate .check:has(input:checked){background:var(--yellow);color:var(--ink)}
.tbl input[type="number"]{width:74px;background:var(--cream);color:var(--ink);border:2px solid var(--cream);padding:6px;font-size:14px}
.tbl input[type="checkbox"]{width:20px;height:20px;accent-color:var(--yellow)}

/* ------------------------------------------------------------- vendors */
.perks{display:grid;gap:8px}
.perks li{border-left:4px solid var(--yellow);padding:4px 0 4px 12px}
.perks b{color:var(--yellow)}
.terms{border:3px solid rgba(251,243,226,.3);padding:12px 14px}
.terms summary{cursor:pointer;font-weight:700}
.terms ol{list-style:decimal;padding-left:20px;margin-top:10px;display:grid;gap:8px;font-size:14px}
.ordr{border:3px solid rgba(251,243,226,.3);padding:12px;display:grid;gap:8px}
.ordr--paid{border-color:var(--yellow);background:rgba(255,207,51,.08)}
.ordr--ready{border-color:var(--blue)}
.ordr--review{border-color:var(--red)}
.ordr__id{font-family:var(--f-mono);font-size:20px;letter-spacing:.04em}
.tabs button{position:relative}
.dot{position:absolute;top:8px;right:calc(50% - 20px);width:10px;height:10px;border-radius:50%;background:var(--red)}
.seg--sm button{padding:var(--s-1) var(--s0);min-height:44px;font-size:13px}
.stepper--sm{grid-template-columns:44px 44px 44px}
.stepper--sm button{font-size:20px}
.stepper--sm output{font-size:20px}
.res--btn{width:100%;background:none;border:0;border-bottom:2px solid rgba(251,243,226,.15);color:inherit;text-align:left;cursor:pointer;font:inherit}
.gate .card .row{flex-wrap:nowrap}

/* --------------------------------------------------------------- shops */
.shop{border:3px solid var(--ink);background:var(--cream);color:var(--ink);padding:14px;display:grid;gap:10px}
.shop h3{font-family:var(--f-display);text-transform:uppercase;font-size:26px;line-height:1}
.shop__cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5F5748}
.shop .res{border-bottom-color:rgba(11,10,15,.12)}
.shop .res small{color:#5F5748}
.basket{position:sticky;bottom:0;background:var(--ink);border-top:4px solid var(--yellow);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:grid;gap:8px;max-width:560px;margin:0 auto;width:100%}
.ordbig{font-family:var(--f-mono);font-size:clamp(34px,11vw,56px);font-weight:700;letter-spacing:.04em;line-height:1}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.steps span{border:3px solid rgba(251,243,226,.25);padding:8px 4px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.steps span.on{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

#sync{color:var(--yellow)}
.res--btn[aria-pressed="true"]{background:rgba(255,207,51,.15)}

/* vendor form: checklists inside a plain fieldset */
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field > legend{padding:0;margin-bottom:8px}
/* admin cards: small inline controls stay readable on the dark gate theme */
#v-admin .card > .row select,#v-admin .card > .row input:not([type="checkbox"]),#v-admin .card > input{background:var(--cream);color:var(--ink);border:2px solid var(--cream);padding:8px;font:inherit;font-size:14px;max-width:100%}
#v-admin [data-note],#v-admin [data-glink]{width:100%}

/* Admin sub-tabs: two rows of three on a phone */
.seg--grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:var(--cream)}
.seg--grid button,.seg--grid button + button{border-left:0;background:var(--ink)}
.seg--grid button[aria-pressed="true"]{background:var(--yellow)}
/* Money: the one number first, then where it came from */
.rev{display:grid;gap:10px}
.rev__total{border:3px solid var(--yellow);padding:16px}
.rev__total b{display:block;font-family:var(--f-display);font-size:clamp(34px,11vw,52px);line-height:1;color:var(--yellow)}
.rev__total small,.rev__tile small{display:block;color:#B9B2C9;font-size:12px;margin-top:6px}
.rev__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rev__tile{border:2px solid rgba(251,243,226,.3);padding:12px}
.rev__tile b{display:block;font-size:20px}
.lead__fields{font-size:13px;color:#B9B2C9;white-space:pre-wrap;overflow-wrap:anywhere}

/* review fixes: card rows wrap on small phones; bigger tap targets where a mis-tap costs money */
.gate .card .row.small{flex-wrap:wrap}
.card .linkish{padding:12px 4px}
.seg--grid button{padding:13px 6px;font-size:14px}
#banner:not([hidden]),#fee:not([hidden]),#group:not([hidden]){margin-bottom:16px}

/* Inside the home page's ticket sheet: the sheet has its own close bar. */
.embedded .app__top{display:none}

/* Press feedback everywhere a finger lands. */
.stepper button,.tabs button,.seg button{transition:transform .12s var(--ease-out),background var(--dur)}
.stepper button:active:not(:disabled),.seg button:active,.tabs button:active{transform:translateY(2px)}