/* ===== Admin (#/admin) + print preview (#/print/*) — Admin-UI builder =====
   Scoped: .adm-*, .pr-*, body[data-page="admin"|"print"]. Print-only rules live in print.css. */

body[data-page="admin"], body[data-page="print"] { padding-bottom: 0; }
body[data-page="admin"] .tabbar, body[data-page="print"] .tabbar { display: none; }
body[data-page="admin"] .toasts, body[data-page="print"] .toasts { bottom: 16px; }
body[data-page="admin"] .wrap { max-width: 1200px; }
body[data-page="print"] { background: #E5E7EB; }
body[data-page="print"] .wrap { max-width: none; padding: 16px 12px 40px; }
body[data-page="print"] .footer { display: none; }
.adm [hidden], .pr-doc [hidden], .adm-dialog [hidden] { display: none !important; }

/* ---- auth ---- */
.adm-auth { max-width: 460px; margin: 0 auto; }
.adm-mt { margin-top: 12px; }
.adm-setup { margin-top: 16px; }
.adm-setup form { padding-bottom: 14px; }

/* ---- shell ---- */
.adm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.adm-head h1 { margin: 0; }
.adm-vaultbar, .adm-stale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; margin: 8px 0; font-weight: 600; }
.adm-vaultbar { background: var(--gold-l); color: #6B4E05; border: 1px solid #F3D27A; }
.adm-stale { background: #DBEAFE; color: #1E3A8A; border: 1px solid #BFDBFE; }
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 10px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.adm-tab {
  flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.adm-tab:hover { border-color: var(--navy); }
.adm-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.adm-panel { padding-top: 6px; outline: none; }
.adm-sec h2 { font-size: 1.15rem; }
.adm-sec h3 { font-size: 1.02rem; }
.adm-sec-plain { margin: 18px 0 8px; }
.adm-sec-plain > h2 { margin: 0 0 8px; }
details.adm-sec > summary { font-size: 1.05rem; }
.btn.small-btn { padding: 8px 12px; font-size: .9rem; }
.adm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.adm-inline input, .adm-inline select { width: auto; }
.adm-warn-text { color: var(--warn); font-weight: 600; }
.adm-okline { color: var(--ok); font-weight: 600; }
.adm-break { word-break: break-all; }
.adm-w100 { flex-basis: 100%; margin: 0; }
.adm-mono, .adm-secret code, .adm-steam { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---- dashboard ---- */
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0; }
.adm-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.adm-tile-v { font-size: 1.7rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2; }
.adm-tile-l { color: var(--muted); font-size: .9rem; }
.adm-deadline { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.adm-deadline:last-child { border-bottom: 0; }
.adm-deadline-l { font-weight: 600; min-width: 230px; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.adm-filter {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: .92rem; cursor: pointer;
}
.adm-filter[aria-pressed="true"] { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.adm-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.adm-team {
  display: grid; gap: 4px; align-content: start; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--warn);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.adm-team.is-ok { border-left-color: var(--ok); }
.adm-team header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.adm-team h3 { margin: 0; font-size: 1.35rem; }
.adm-team header .chip { white-space: nowrap; flex: 0 0 auto; }
.adm-team footer { margin-top: 6px; }
.adm-line { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
.adm-line b { text-align: right; }
.adm-line.ok b { color: var(--ok); }
.adm-line.bad b { color: var(--err); }

/* ---- roster ---- */
.adm-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.adm-pick {
  min-height: 44px; min-width: 64px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); border-bottom: 3px solid var(--warn);
  background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.adm-pick.ok { border-bottom-color: var(--ok); }
.adm-pick small { font-weight: 400; color: var(--muted); }
.adm-pick[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.adm-pick[aria-pressed="true"] small { color: #CBD5E1; }
.adm-actions { margin-bottom: 4px; }
.adm-roster th, .adm-roster td { vertical-align: top; }
.adm-roster input[type="text"] { min-width: 130px; }
.adm-roster .adm-in-xs { min-width: 56px; width: 64px; }
.adm-roster .adm-in-id { min-width: 200px; }
.adm-slot { white-space: nowrap; color: var(--navy); padding-top: 18px !important; }
.adm-tog { text-align: center; }
.adm-tog-l { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; cursor: pointer; }
.adm-x { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); }
.adm-x:hover { color: var(--err); border-color: var(--err); }

/* ---- consent grid ---- */
.adm-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.adm-counts .chip { font-size: .85rem; padding: 4px 10px; }
.adm-sec select { width: auto; min-width: 160px; }
.adm-grid-wrap { max-height: 72vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.adm-grid-wrap thead th { position: sticky; top: 0; z-index: 1; background: #fff; box-shadow: 0 1px 0 var(--line); }
.adm-consent td { padding: 2px 6px; vertical-align: middle; }
.adm-consent tr.need-alias td { background: #FFF7ED; }
.adm-consent .adm-alias { min-width: 170px; }
.adm-consent tr.need-alias .adm-alias { border-color: var(--warn); }
.adm-steam { font-size: .88rem; overflow-wrap: anywhere; }

/* ---- access ---- */
.adm-print { margin-top: 12px; }
.adm-print h3 { margin-top: 0; }

/* ---- draw ---- */
.adm-secret { display: grid; gap: 2px; margin: 8px 0; }
.adm-secret code { font-size: 1rem; background: #F1F5F9; padding: 8px 10px; border-radius: 8px; word-break: break-all; }
.adm-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.adm-numcell { display: grid; gap: 4px; margin: 0; }
.adm-num { font-size: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
#adm-secret-in { flex: 1 1 340px; width: auto; }
.adm-filebtn { position: relative; overflow: hidden; margin: 0; font-weight: 600; }
.adm-filebtn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.adm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 10px 0; }
.adm-gbox { border: 2px solid var(--gA); background: var(--gA-l); border-radius: 12px; padding: 10px 12px; }
.adm-gbox h3 { margin: 0 0 6px; color: var(--gA-t); }
.adm-gbox.grp-B { border-color: var(--gB); background: var(--gB-l); } .adm-gbox.grp-B h3 { color: var(--gB-t); }
.adm-gbox.grp-V { border-color: var(--gV); background: var(--gV-l); } .adm-gbox.grp-V h3 { color: var(--gV-t); }
.adm-gbox.grp-G { border-color: var(--gG); background: var(--gG-l); } .adm-gbox.grp-G h3 { color: var(--gG-t); }
.adm-gbox ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.adm-gbox li { display: flex; gap: 10px; font-size: 1.05rem; }
.adm-gbox li b { min-width: 2.2em; }
.adm-seat { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.adm-seat select { flex: 1; width: auto; }
.adm-inputs { columns: 2; list-style: none; padding: 0; margin: 8px 0; }
.adm-inputs li { display: flex; justify-content: space-between; gap: 10px; break-inside: avoid; padding: 2px 6px 2px 0; }
.adm-danger { border-color: #FCA5A5; }
.adm-danger > summary { color: var(--err); }
.adm-danger .btn { margin-bottom: 12px; }
.adm-hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }

/* ---- results ---- */
.adm-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.adm-match { display: grid; gap: 8px; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.adm-match.st-live { border-left: 6px solid var(--warn); }
.adm-match.st-reported { border-left: 6px solid var(--gold); }
.adm-match.st-final { border-left: 6px solid var(--ok); }
.adm-score-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px auto 58px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.adm-tname { font-weight: 700; overflow-wrap: anywhere; line-height: 1.25; }
.adm-tname.right { text-align: right; }
.adm-score { text-align: center; font-size: 1.25rem; font-weight: 700; padding: 6px 4px; }
.adm-colon { font-weight: 800; }
.adm-match select { width: auto; flex: 1 1 200px; }
.adm-match .field-error:empty { display: none; }
.adm-move { margin: 0; padding: 0 10px; }
.adm-move > summary { min-height: 40px; padding: 8px 0; font-size: .9rem; }
.adm-move .adm-inline { padding-bottom: 10px; }
.adm-stands { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.adm-stand { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--gA); border-radius: 12px; padding: 10px 12px; }
.adm-stand.grp-B { border-top-color: var(--gB); } .adm-stand.grp-V { border-top-color: var(--gV); } .adm-stand.grp-G { border-top-color: var(--gG); }
.adm-stand h3 { margin: 0; }
.adm-standtbl th, .adm-standtbl td { padding: 6px 4px; }
.adm-lot { margin-top: 10px; padding: 10px 12px; background: var(--err-l); border-radius: 10px; }
.adm-lot h4 { margin: 0 0 6px; }
.adm-lot .btn { margin-top: 8px; }
.adm-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 1.05rem; }

/* ---- announcements, settings, audit ---- */
.adm-anns { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.adm-anns li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.adm-anns li.is-hidden { opacity: .6; }
.adm-ann-text { flex: 1 1 260px; }
.adm-sec input[type="url"] { flex: 1 1 280px; width: auto; }
.adm-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; }
.adm-audit td { vertical-align: top; }
.adm-purge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.adm-purge p { flex: 1 1 280px; margin: 0; }
#adm-purge { max-width: 220px; }
.adm-sec hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---- dialog ---- */
.adm-dialog { border: 0; border-radius: 16px; padding: 20px; width: min(92vw, 480px); color: var(--ink); box-shadow: 0 20px 50px rgba(15, 23, 42, .35); }
.adm-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.adm-dialog h2 { margin-top: 0; font-size: 1.2rem; }
.adm-dialog p { margin: .4em 0; }
.adm-dlg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 560px) {
  .adm-head h1 { font-size: 1.3rem; }
  .adm-deadline-l { min-width: 0; flex-basis: 100%; }
  .adm-matches { grid-template-columns: 1fr; }
  .adm-score-row { grid-template-columns: minmax(0, 1fr) 52px auto 52px minmax(0, 1fr); }
  .adm-score-row .chip { grid-column: 1 / -1; justify-self: center; }
  .adm-inputs { columns: 1; }
}

/* ===== Print preview on screen (sizes in mm = same as on paper) ===== */
.pr-toolbar { max-width: 210mm; margin: 0 auto 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); }
.pr-toolbar h1 { font-size: 1.2rem; margin: 0; }
.pr-toolbar p { margin: 8px 0 0; }
.pr-doc { display: grid; gap: 16px; justify-content: center; overflow-x: auto; padding-bottom: 8px; }
.pr-sheet { width: 210mm; min-height: 297mm; padding: 10mm; background: #fff; color: #111827; box-shadow: 0 2px 14px rgba(15, 23, 42, .18); font-size: 10pt; line-height: 1.35; }
.qr svg { display: block; width: 100%; height: 100%; }
.pr-grid { display: grid; grid-template-columns: repeat(2, 94.5mm); border-top: .3mm dashed #9CA3AF; border-left: .3mm dashed #9CA3AF; }
.pr-grid-cards { grid-auto-rows: 90mm; }
.pr-grid-pins { grid-auto-rows: 45mm; }
.pr-grid-refs { grid-auto-rows: 135mm; }
.pr-cell { border-right: .3mm dashed #9CA3AF; border-bottom: .3mm dashed #9CA3AF; overflow: hidden; break-inside: avoid; }
.pr-steps { margin: 0; padding-left: 5mm; font-size: 9.5pt; line-height: 1.3; display: grid; gap: 1.5mm; }
.pr-warn { font-size: 8.5pt; font-weight: 700; color: #B91C1C; background: #FEF2F2; border: .3mm solid #FCA5A5; border-radius: 2mm; padding: 1.2mm 2mm; }

/* school brand row (SPEC v5: logo + «Octolearn London School» on every printed card/slip) */
.pr-brand { display: flex; align-items: center; gap: 2mm; min-width: 0; }
.pr-logo { flex: 0 0 auto; display: block; width: 7mm; height: 7mm; border-radius: 1.2mm; }
.pr-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pr-brand-text b { font-size: 8pt; font-weight: 800; color: #0D0447; letter-spacing: .01em; }
.pr-brand-text span { font-size: 7pt; color: #4B5563; }
.pr-brand-tag { margin-left: auto; align-self: flex-start; font-size: 7pt; color: #6B7280; text-transform: uppercase; letter-spacing: .02em; text-align: right; }

/* class card (94.5 × 90 mm) */
.pr-card { padding: 3.5mm 5mm; display: flex; flex-direction: column; gap: 1.1mm; }
.pr-card-name { font-size: 28pt; font-weight: 800; line-height: 1; color: #1F2A44; }
.pr-card-name.long { font-size: 20pt; line-height: 1.25; }
.pr-card-body { display: flex; gap: 3.5mm; align-items: flex-start; }
.pr-qr-card { flex: 0 0 44mm; width: 44mm; height: 44mm; }
.pr-card .pr-steps { font-size: 8.5pt; line-height: 1.25; gap: 1.2mm; }
.pr-card-deadline { font-size: 11pt; font-weight: 700; margin-top: auto; }
.pr-card .pr-warn { padding: 1mm 2mm; }
.pr-contact { font-size: 7.5pt; line-height: 1.25; color: #374151; }

/* teacher PIN slip (94.5 × 45 mm): brand / team + warning | PIN / note */
.pr-pin {
  padding: 3.5mm 5mm; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 4mm; row-gap: 1.2mm;
  grid-template-areas: "brand brand" "team code" "warn code" "note note";
}
.pr-pin .pr-brand { grid-area: brand; }
.pr-pin .pr-logo { width: 6mm; height: 6mm; }
.pr-pin-team { grid-area: team; align-self: end; font-size: 17pt; line-height: 1.15; color: #1F2A44; overflow-wrap: anywhere; }
.pr-pin-team.long { font-size: 14pt; }
.pr-pin-codebox { grid-area: code; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
.pr-pin-label { font-size: 8.5pt; font-weight: 600; color: #374151; }
.pr-pin-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 22pt; line-height: 1.15; letter-spacing: .12em; margin-right: -.12em; }
.pr-pin-warn { grid-area: warn; align-self: start; font-size: 10.5pt; font-weight: 800; color: #B91C1C; }
.pr-pin-note { grid-area: note; margin: .6mm 0 0; font-size: 8pt; line-height: 1.3; color: #374151; }

/* referee slip (94.5 × 135 mm) */
.pr-ref { padding: 5mm 6mm; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.2mm; }
.pr-ref .pr-brand { align-self: stretch; text-align: left; }
.pr-ref .pr-logo { width: 9mm; height: 9mm; }
.pr-ref-label { font-size: 20pt; font-weight: 800; color: #1F2A44; line-height: 1.15; }
.pr-ref-station { font-size: 11pt; font-weight: 600; }
.pr-qr-ref { width: 54mm; height: 54mm; }
.pr-ref-valid { font-size: 10pt; font-weight: 700; }
.pr-ref .pr-steps { text-align: left; }

/* site poster (A4) */
.pr-site { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4mm; padding-top: 12mm; }
.pr-site-brand { display: flex; flex-direction: column; align-items: center; gap: 2mm; }
.pr-site-logo { display: block; width: 22mm; height: 22mm; border-radius: 3mm; }
.pr-site-school { font-size: 15pt; font-weight: 800; color: #0D0447; letter-spacing: .02em; }
.pr-site-title { font-size: 40pt; line-height: 1.05; margin: 0; color: #1F2A44; }
.pr-site-title span { color: #B8860B; }
.pr-site-sub { font-size: 15pt; margin: 0; }
.pr-site-dates { font-size: 13pt; font-weight: 700; margin: 0; }
.pr-qr-site { width: 115mm; height: 115mm; margin: 2mm 0; }
.pr-site-cta { font-size: 16pt; font-weight: 800; margin: 0; }
.pr-site-url { font-size: 14pt; margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.pr-site-list { list-style: none; padding: 0; margin: 0; font-size: 12pt; display: flex; flex-wrap: wrap; justify-content: center; gap: 2mm 6mm; }
.pr-site-list li::before { content: "✓ "; color: #15803D; font-weight: 800; }
.pr-site-prize { margin: 0; font-size: 12pt; font-weight: 700; color: #8A6508; text-wrap: balance; }
.pr-site-contact { margin: 0; font-size: 12pt; font-weight: 700; color: #1F2A44; }
.pr-site-foot { margin: auto 0 0; font-size: 9pt; color: #6B7280; text-wrap: balance; }

/* draw secret */
.pr-secret .pr-logo { width: 9mm; height: 9mm; }
.pr-secret h1 { font-size: 24pt; margin: 6mm 0 2mm; }
.pr-secret-box { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 20pt; line-height: 1.6; letter-spacing: .04em; word-spacing: .3em; padding: 6mm; margin: 6mm 0; border: .6mm solid #1F2A44; border-radius: 3mm; }
.pr-secret-commit { font-size: 9pt; word-break: break-all; }
.pr-secret .pr-steps { font-size: 11pt; gap: 2mm; margin-top: 6mm; }