/* Shared check-in presentation; staff/admin pages retain their own layout. */
html.checkin-page { font-size: 20px; }
.checkin-page body { --text-lt: #334155; --sk-gray-mid: #475569; --primary-dk: #102033; }
.checkin-page button, .checkin-page select { line-height: 1.35; }
.checkin-page button { min-height: 52px; }
.checkin-page button:focus-visible, .checkin-page select:focus-visible {
  outline: 4px solid #fbbf24; outline-offset: 3px;
}
.checkin-page .kiosk-card { color: #102033; background: #fff; }
.checkin-page .kiosk-title { font-size: 1.6rem; }
.checkin-page .kiosk-subtitle { font-size: 1.2rem; color: #334155; }
.checkin-page .picker-btn { color: #102033; background: #fff; font-size: 1.35rem; border: 2px solid #475569; }
.checkin-page .picker-btn .sub { font-size: 1rem; color: #334155; }
.checkin-page .picker-back { font-size: 1.1rem; color: #102033; border: 2px solid #475569; border-radius: .5rem; padding: .5rem .8rem; text-decoration: none; }
.checkin-page .checkin-controls { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.checkin-page .checkin-controls button { font-size: 1.1rem; margin: 0; }
.checkin-page:fullscreen .navbar { display: none; }
.checkin-page:-webkit-full-screen .navbar { display: none; }

.checkin-page .kiosk-view { background: #12263f; color: #fff; }
.kiosk-view .kiosk-subtitle, .kiosk-view .tap-event-info,
.kiosk-view .event-box-sub, .kiosk-view .success-credit,
.kiosk-view .success-returning { color: #edf2f7; font-size: 1.1rem; }
.kiosk-view .kiosk-school-name { color: #fff; font-size: 1.6rem; }
.kiosk-view .kiosk-display-controls { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
.kiosk-view .kiosk-display-controls button { background: #fff; color: #102033; font-size: 1.1rem; border: 2px solid #fff; }
.kiosk-view .kiosk-error { background: #fff1f2; color: #881337; border: 2px solid #be123c; font-size: 1.1rem; }
.kiosk-view .success-title { color: #bbf7d0; }
.kiosk-view .exit-btn { color: #fff; background: #12263f; border-color: #cbd5e1; font-size: 1rem; }
.kiosk-view #screen-pin { height: 100vh; max-width: 1100px; padding: 1rem 1.25rem; min-height: 0; }
.kiosk-view #picker-title {
  align-self: flex-start; max-width: calc(100% - 230px); min-height: 5rem;
  color: #fff; font-size: 1.5rem; font-weight: 700; text-align: left; margin: 0 0 .75rem;
}
.kiosk-view .kiosk-list { display: flex; flex-direction: column; gap: .65rem; width: 100%; min-height: 0; flex: 1; overflow-y: auto; padding: .2rem; }
.kiosk-view .selection-grid > button { font-size: 1.35rem; padding: 1rem; min-height: 80px; white-space: normal; overflow-wrap: anywhere; flex-shrink: 0; }
.checkin-page .group-list { gap: .65rem; }
.checkin-page .group-list > button { min-height: 68px; border: 2px solid #475569; overflow-wrap: anywhere; flex-shrink: 0; }
.checkin-page .group-list > [role=status] { flex-shrink: 0; }
.checkin-page .group-list > div:last-child { flex-shrink: 0; }

@media (min-width: 900px) and (orientation: landscape) {
  .checkin-page .selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(80px, max-content); align-content: start; gap: .8rem; }
  .checkin-page .selection-grid > button { min-height: 80px; height: max-content; align-self: start; }
  .checkin-page .group-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .checkin-page .group-list > div, .checkin-page .group-list > select { grid-column: 1 / -1; }
  .checkin-page .kiosk-card { max-width: 1000px; padding: 1rem 1.5rem; }
  .checkin-page .kiosk-body { padding: 1rem; }
}
@media (max-width: 600px) {
  html.checkin-page { font-size: 18px; }
  .kiosk-view #picker-title { max-width: 100%; min-height: 0; margin-top: 6.5rem; font-size: 1.35rem; }
}

/* Reflow and enlarged text must never make a control unreachable. */
.checkin-page :is(a, [role=button], [tabindex]):focus-visible { outline: 4px solid #fbbf24; outline-offset: 3px; }
.kiosk-view { height: auto; overflow: auto; justify-content: flex-start; }
html.checkin-page:has(.kiosk-view) { height: auto; overflow: auto; }
.kiosk-view .kiosk-display-controls { position: static; align-self: flex-end; margin: .5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(100% - 1rem); }
.kiosk-view #pin-back-link { grid-column: 1; grid-row: 2; }
.kiosk-view #picker-title { max-width: 100%; min-height: 0; margin-top: 0; }
.kiosk-view #screen-pin { height: auto; min-height: 0; }
.kiosk-view .kiosk-list { overflow: visible; flex: none; }
.checkin-page .group-list > [role=status] { position: static !important; }
.checkin-page select { max-width: 100%; min-width: 0; }
.checkin-page .group-list > div:last-child { flex-wrap: wrap; }
.checkin-page .group-list > div:last-child > button { min-width: min(100%, 12rem); }
.kiosk-view #exit-overlay { color: #fff; background: #12263f; border: 2px solid #fff; border-radius: .75rem; width: min(90vw, 480px); max-height: 90dvh; overflow: auto; padding: 1rem; }
.kiosk-view #exit-overlay[open] { display: flex; flex-direction: column; align-items: center; }
.kiosk-view #exit-overlay::backdrop { background: rgba(0,0,0,.85); }
.checkin-page .kiosk-card { min-width: 0; }
.checkin-page .sessions-banner, .checkin-page .gps-status { color: #334155; }

.checkin-page :is(button, select, a, [role=button], [tabindex]):focus-visible { outline-color: #102033; }
.kiosk-view :is(button, select, a, [role=button], [tabindex]):focus-visible { outline-color: #fbbf24; }

.kiosk-view .exit-btn { position: static; margin-top: 1rem; }
.kiosk-view #kiosk-phone-qr { position: static !important; margin: 1rem; }
.kiosk-view .kiosk-display-controls button { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 600px) {
  .kiosk-view .kiosk-display-controls { grid-template-columns: minmax(0, 1fr); }
  .kiosk-view #pin-back-link { grid-row: 2; }
  .kiosk-view #checkin-more-time { grid-row: 3; }
}
.checkin-page .kiosk-card { overflow-wrap: anywhere; }
.checkin-page .checkin-controls { max-width: 100%; }
.checkin-page .checkin-controls button { max-width: 100%; overflow-wrap: anywhere; }
.checkin-page .picker-btn { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .checkin-page .kiosk-body { padding: .5rem; }
  .checkin-page .kiosk-card { padding: .75rem; }
}
.checkin-idle-feedback { width: 100%; max-width: 1100px; padding: .25rem 1rem; text-align: center; overflow-wrap: anywhere; }
.checkin-idle-feedback [role=timer] { font-size: 1rem; font-weight: 600; }
.checkin-idle-feedback [role=status] { font-size: 1rem; }
.checkin-idle-feedback button { padding: .5rem 1rem; font: inherit; border: 2px solid #475569; border-radius: .5rem; background: #fff; color: #102033; }
.checkin-page [hidden] { display: none !important; }