:root{--red:#b3132b;--red-dark:#8a0f21;--red-soft:#fbe9ec;--leaf:#2f7d32;--ink:#1d1d1f;--muted:#5f6368;--line:#dadce0;--bg:#faf7f5;--card:#fff;--gold:#c9a227;--silver:#9aa0a6;--bronze:#b0703c;--radius:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.4;color:var(--ink);background:var(--bg)}
a{color:var(--red)}
.brand{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;padding:14px 16px 12px;text-align:center;border-bottom:4px solid var(--leaf)}
.brand .title{font-size:1.45rem;font-weight:800;letter-spacing:.2px;margin:0;display:flex;align-items:center;justify-content:center;gap:.4em}
.brand .apple{font-size:1.2em;line-height:1}
.brand .host{font-size:.92rem;opacity:.95;margin-top:2px}
.brand .page{display:inline-block;margin-top:8px;background:rgba(255,255,255,.18);border-radius:999px;padding:2px 12px;font-size:.85rem;font-weight:600}
main{max-width:640px;margin:0 auto;padding:16px}
main.wide{max-width:1100px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
h1,h2,h3{margin:.2em 0 .5em;line-height:1.2}
h2{font-size:1.3rem}
label{display:block;font-weight:700;margin:14px 0 6px}
input,select,textarea{width:100%;font-size:1.1rem;padding:14px 12px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-height:54px}
input:focus,select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-size:1.1rem;font-weight:700;min-height:56px;padding:12px 20px;border:0;border-radius:12px;background:var(--red);color:#fff;cursor:pointer;text-decoration:none;touch-action:manipulation}
button:active,.btn:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:default}
button.secondary,.btn.secondary{background:#fff;color:var(--red);border:2px solid var(--red)}
button.ghost{background:#f1f3f4;color:var(--ink)}
button.danger{background:#fff;color:#b00020;border:2px solid #b00020}
button.small,.btn.small{min-height:40px;padding:6px 12px;font-size:.95rem;border-radius:9px}
.block{width:100%;margin-top:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{flex:1 1 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0;left:0;top:0}
.seg label{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:76px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:1.15rem;cursor:pointer;text-align:center}
.seg label{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.seg label small{font-weight:500;color:var(--muted);font-size:.85rem}
.seg input:checked+label{border-color:var(--red);background:var(--red-soft);color:var(--red-dark);box-shadow:0 0 0 3px var(--red-soft)}
.seg input:checked+label::before{content:"✓ Selected";font-size:.8rem;font-weight:800;color:#fff;background:var(--red);border-radius:999px;padding:1px 10px;margin-bottom:4px}
.seg input:focus-visible+label{outline:3px solid var(--red);outline-offset:2px}
.seg.invalid label{border-color:#b00020}
input[aria-invalid=true],select[aria-invalid=true]{border-color:#b00020;background:#fff8f7}
.field-err{color:#b00020;font-weight:700;font-size:.95rem;margin:6px 0 0}
.hp-wrap{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.muted{color:var(--muted)}
.msg{padding:12px 14px;border-radius:10px;margin:12px 0;font-weight:600}
.msg.error{background:#fdecea;color:#8c1d18;border:1px solid #f5c2bd}
.msg.ok{background:#e8f5e9;color:#1b5e20;border:1px solid #b9dfbb}
.hidden{display:none!important}
.confirm{text-align:center}
.confirm .label{font-size:1.3rem;font-weight:700;margin-top:6px}
.confirm .number{font-size:min(38vw,11rem);font-weight:900;line-height:1;color:var(--red);margin:10px 0;letter-spacing:-2px}
.confirm .vehicle{font-size:1.25rem;font-weight:700}
.confirm .tip{background:#fff8e1;border:2px dashed var(--gold);border-radius:12px;padding:12px;margin-top:16px;font-size:1.05rem}
.score-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0}
.score-row .name{font-weight:800;font-size:1.1rem}
.score-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.score-pick button{min-height:52px;padding:0;background:#fff;color:var(--ink);border:2px solid var(--line);font-size:1.15rem}
.score-pick button.on{background:var(--red);border-color:var(--red);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:48px;min-width:64px;padding:6px 12px;border-radius:10px;border:2px solid var(--line);background:#fff;color:var(--ink);font-weight:800;font-size:1.05rem}
.chip.done{background:#e8f5e9;border-color:#66bb6a;color:#1b5e20}
.chip.done::after{content:" ✓"}
.chip.sel{outline:3px solid var(--red)}
table{width:100%;border-collapse:collapse;font-size:.98rem}
th,td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:#f6f2f0;font-size:.85rem;text-transform:uppercase;letter-spacing:.4px;color:#444}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.top1 td{background:#fff6d6}
tr.top2 td{background:#f1f3f4}
tr.top3 td{background:#fbeee3}
.medal{display:inline-block;min-width:2em;text-align:center;font-weight:900;border-radius:999px;padding:2px 6px;color:#fff;font-size:.9rem}
.m1{background:var(--gold)}.m2{background:var(--silver)}.m3{background:var(--bronze)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.78rem;font-weight:700;background:#eee;color:#333;vertical-align:middle}
.badge.red{background:var(--red-soft);color:var(--red-dark)}
.badge.green{background:#e8f5e9;color:#1b5e20}
.badge.warn{background:#fff3cd;color:#7a5a00}
.award{border:3px solid var(--gold);background:linear-gradient(180deg,#fffdf3,#fff);text-align:center}
.award .big{font-size:2.6rem;font-weight:900;color:var(--red)}
.award h2{color:var(--red-dark)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{flex:0 0 auto}
.tabs button.active{background:var(--red-dark)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar>*{flex:0 0 auto}
.switch{display:flex;align-items:center;gap:10px;font-weight:700;margin:10px 0;cursor:pointer}
.switch input{width:28px;height:28px;min-height:0;accent-color:var(--red)}
dialog{border:0;border-radius:var(--radius);padding:0;width:min(560px,94vw);box-shadow:0 10px 40px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .card{margin:0;border:0}
footer{text-align:center;color:var(--muted);font-size:.85rem;padding:20px 10px 30px}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 14px}
.nav a{font-weight:700;text-decoration:none;padding:8px 12px;border-radius:9px;background:#fff;border:1px solid var(--line)}
.nav a.active{background:var(--red);color:#fff;border-color:var(--red)}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
/* Poster */
.poster{max-width:8in;margin:0 auto;text-align:center;padding:.4in .3in;background:#fff}
.poster .p-top{color:var(--red);font-size:2.4rem;font-weight:900;line-height:1.1}
.poster .p-host{font-size:1.15rem;margin:.2em 0 .6em}
.poster .p-call{font-size:2.8rem;font-weight:900;margin:.3em 0 .1em}
.poster .p-sub{font-size:1.3rem;color:#333}
.poster .qr{margin:.35in auto;width:5in;max-width:90%}
.poster .qr svg{width:100%;height:auto;display:block}
.poster .p-url{font-size:1.4rem;font-weight:700;word-break:break-all}
.poster .p-steps{font-size:1.15rem;margin-top:.25in;color:#333}
@media print{
  @page{margin:.45in}
  body{background:#fff;font-size:12pt}
  .no-print,.nav,footer,.toolbar,button{display:none!important}
  main,main.wide{max-width:none;padding:0}
  .card{box-shadow:none;border:1px solid #bbb;break-inside:avoid;page-break-inside:avoid}
  .brand{background:#fff!important;color:var(--red);border-bottom:3px solid var(--red);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr.top1 td,tr.top2 td,tr.top3 td,.medal{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .poster{padding:0}
  .class-block{break-before:auto}
}
/* Windshield sign (print.html): Letter landscape, readable from several feet away, minimal ink.
   Sizes use container units, so the same layout scales from the on-screen preview to the printed page. */
.ws-sheet{--red:#b3132b;position:relative;width:100%;max-width:10.3in;aspect-ratio:10.3/7.7;margin:0 auto 24px;background:#fff;color:#000;
  container-type:size;box-shadow:0 2px 10px rgba(0,0,0,.12);font-family:"Helvetica Neue",Arial,"Liberation Sans",Helvetica,sans-serif;overflow:hidden}
.ws-inner{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:2.2cqw 3cqw 2.4cqw;border:.25cqw solid var(--red);border-radius:1.2cqw}
.ws-head{text-align:center;border-bottom:.25cqw solid var(--red);padding-bottom:1cqh}
.ws-title{display:flex;align-items:center;justify-content:center;gap:.3em;font-size:4.4cqw;font-weight:800;line-height:1.1;letter-spacing:.01em}
.ws-apple{width:1em;height:1em;color:var(--red);flex:0 0 auto}
.ws-host{font-size:2.1cqw;margin-top:.4cqh;color:#222}
.ws-numzone{container-type:size;display:flex;align-items:center;justify-content:center;min-height:0}
.ws-number{font-weight:900;line-height:.76;letter-spacing:-.03em;white-space:nowrap;font-size:min(calc(96cqw / (var(--n) * .7)),128cqh);font-variant-numeric:lining-nums}
.ws-bottom{display:flex;align-items:flex-end;gap:3cqw;border-top:.25cqw solid var(--red);padding-top:1.4cqh}
.ws-info{flex:1 1 auto;min-width:0}
.ws-class{display:inline-block;font-size:2.6cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:.22cqw solid var(--red);border-radius:.8cqw;padding:.1em .6em}
.ws-vehicle{font-size:4.8cqw;font-weight:800;line-height:1.08;margin-top:.15em;overflow-wrap:anywhere}
.ws-owner{font-size:2.6cqw;margin-top:.2em;color:#111}
.ws-sep{color:var(--red)}
.ws-reg{font-size:1.4cqw;color:#555;margin-top:.5em}
.ws-qr{flex:0 0 14cqw;text-align:center}
.ws-qrcode svg{width:100%;height:auto;display:block}
.ws-qrtext{font-size:1.35cqw;line-height:1.25;margin-top:.6cqw}
.ws-qrtext b{font-size:1.25em;color:var(--red)}
@media print{
  /* the landscape @page rule lives in print.html only, so posters/results keep portrait Letter */
  body.print-page{background:#fff}
  body.print-page .brand,body.print-page #gate{display:none!important}
  .ws-sheet{width:10.3in;max-width:none;height:7.7in;aspect-ratio:auto;margin:0;box-shadow:none;break-after:page;page-break-after:always;break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ws-sheet:last-child{break-after:auto;page-break-after:auto}
}