/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V5 */
/* Hallmark · genre: editorial · macrostructure: ticket · tone: celebratory show desk · anchor hue: 30 */
:root { color-scheme:light; --paper:oklch(96% .019 79); --surface:oklch(99% .009 80); --ink:oklch(24% .025 45); --muted:oklch(48% .021 50); --rule:oklch(80% .025 60); --accent:oklch(58% .21 32); --accent-ink:oklch(99% .009 80); --focus:oklch(43% .17 32); --font:system-ui,-apple-system,'Segoe UI','Leelawadee UI',sans-serif; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; overflow-x:clip; }
body { background:var(--paper); color:var(--ink); font:16px/1.6 var(--font); }
.shell { max-width:680px; margin:0 auto; padding:24px 20px max(28px,env(safe-area-inset-bottom)); }
.brandline { display:flex; align-items:center; gap:10px; font-weight:800; font-size:12px; letter-spacing:.08em; padding:0 0 20px; border-bottom:1px solid var(--rule); }
.symbol { color:var(--accent); font-size:28px; line-height:1; } .edition { margin-left:auto; color:var(--muted); font:11px var(--font); white-space:nowrap; }
.hero { padding:48px 0 40px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.18em; margin:0 0 16px; }
h1,h2,p { margin:0; } h1,h2 { font-style:normal; overflow-wrap:anywhere; } h1 { font-size:clamp(34px,7vw,54px); line-height:1.2; letter-spacing:-.04em; font-weight:850; } h2 { font-size:clamp(25px,6vw,34px); line-height:1.22; margin:6px 0 18px; }
.intro { margin-top:24px; max-width:40ch; color:var(--muted); }
.ticket { background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:0 12px 28px oklch(24% .025 45 / .07); }
.ticket-edge { display:flex; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px dashed var(--rule); color:var(--muted); font-size:13px; font-weight:650; }
#clock { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:800; }
.ticket-body { padding:30px 20px 32px; display:grid; gap:12px; } .ticket-body[hidden] { display:none; }
.ticket-body p { max-width:48ch; } .ticket-body .state-label { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.05em; }
button { min-height:52px; padding:12px 20px; border-radius:6px; border:1px solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer; font:700 16px var(--font); white-space:nowrap; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); margin-top:16px; }
button:hover { filter:brightness(.93); } button:active { transform:translateY(1px); } button:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } button:disabled { opacity:.55; cursor:default; transform:none; }
.code { font-size:clamp(18px,5vw,26px); letter-spacing:.08em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.footnote { font-size:13px; color:var(--muted); } footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:24px 0; color:var(--muted); font-size:12px; }
input { width:100%; min-height:50px; border:1px solid var(--rule); border-radius:6px; padding:10px 12px; background:var(--surface); color:var(--ink); font:700 20px var(--font); text-transform:uppercase; letter-spacing:.05em; }
label { font-weight:700; } .check-row { display:flex; align-items:center; gap:12px; } .check-row input { width:20px; height:20px; min-height:20px; accent-color:var(--accent); } .staff-override { border-top:1px dashed var(--rule); } #message { color:var(--accent); min-height:24px; }
@media(max-width:375px) { .shell { padding:16px 14px 24px; } .hero { padding:36px 0 32px; } .brandline { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { button:active { transform:none; } }