* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 system-ui, sans-serif; color: #142742; background: #f2f6fc; }
header { background: white; border-bottom: 1px solid #aebed1; padding: .5rem max(1rem, calc((100% - 46rem)/2)); }
header img { display: block; width: min(100%, 19rem); height: auto; }
main { max-width: 48rem; margin: auto; padding: 1rem; }
fieldset, article, dialog { border: 1px solid #aebed1; border-radius: .5rem; background: white; padding: 1rem; margin: 1rem 0; }
dialog { margin: auto; max-width: min(42rem, 92vw); max-height: 85vh; overflow: auto; }
label { display: block; margin: .75rem 0; }
input:not([type=checkbox]) { display: block; padding: .65rem; border: 1px solid #526680; border-radius: .3rem; width: 100%; }
input, button { font: inherit; }
button { min-height: 44px; margin: .25rem .25rem .25rem 0; border: 0; border-radius: .35rem; background: #1856a6; color: white; padding: .5rem 1rem; cursor: pointer; }
button:disabled { opacity: .65; cursor: default; }
a { color: #174b91; margin-right: .75rem; }
:focus-visible { outline: 3px solid #9b4300; outline-offset: 3px; }
.notice { white-space: pre-wrap; }
[role=alert] { color: #952026; }
.dashboard-title, .visit-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.dashboard-title h1, .visit-title h3 { margin: 0; overflow-wrap: anywhere; }
.secondary { background: white; color: #174b91; border: 1px solid #aebed1; }
.occupancy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-radius: .75rem; color: white; background: #163b68; }
.occupancy strong { font-size: 1.65rem; }
.dashboard-tabs { display: flex; gap: .5rem; border-bottom: 1px solid #aebed1; }
.dashboard-tabs a { padding: .6rem .75rem; margin: 0; text-decoration: none; }
.dashboard-tabs [aria-current=page] { border-bottom: 3px solid #1856a6; font-weight: 700; }
.dashboard-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; background: white; padding: .75rem; border: 1px solid #d3ddea; border-radius: .75rem; }
.dashboard-filters label, .dashboard-filters button { margin: 0; }
.dashboard-filters a { align-self: center; }
.dashboard-filters select { display: block; min-height: 44px; max-width: 100%; font: inherit; border: 1px solid #526680; border-radius: .3rem; background: white; color: #142742; padding: .4rem; }
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .75rem; margin: 1rem 0; }
.visit-grid article { margin: 0; border-color: #d3ddea; box-shadow: 0 2px 8px #1427420d; overflow-wrap: anywhere; }
.visit-grid article p { margin: .45rem 0; }
.visit-status { background: #edf1f7; color: #354760; border-radius: 1rem; padding: .2rem .65rem; font-size: .85rem; font-weight: 700; }
.visit-status.on-site { background: #e0f4e8; color: #145335; }
.kiosk { text-align: center; padding: clamp(1rem, 4vw, 2.5rem); background: white; border: 1px solid #d3ddea; border-radius: 1rem; }
.kiosk h1 { margin: .25rem 0; font-size: clamp(2rem, 5vw, 3rem); }
.kiosk-location { margin: 0; color: #354760; }
.kiosk-qr { display: block; width: min(100%, 22.5rem); height: auto; margin: 1rem auto; }
.kiosk-action { display: inline-block; min-height: 56px; margin: 0; padding: .85rem 2rem; border-radius: .55rem; background: #1856a6; color: white; font-weight: 700; text-decoration: none; }
.kiosk-success { background: #e0f4e8; color: #145335; padding: .65rem; border-radius: .5rem; }
.school-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.school-lanes .kiosk { padding: clamp(.5rem, 2vw, 1.5rem); }
.school-lanes .kiosk h2 { font-size: clamp(1rem, 2.8vw, 1.6rem); margin: 0; }
.school-lanes .kiosk-action { padding: .75rem; }
.reception-nav, .reception-utilities, .reception-actions, .reception-steps { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.reception-nav { margin: 1rem 0; padding: .35rem; background: #e6edf7; border-radius: .7rem; }
.reception-nav a, .reception-utilities a { margin: 0; padding: .6rem .85rem; border-radius: .5rem; text-decoration: none; font-weight: 650; }
.reception-nav a[aria-current=page] { background: #163b68; color: white; }
.reception-utilities a { background: white; border: 1px solid #d3ddea; }
.reception-heading { margin: 1rem 0; }
.reception-heading h1 { margin: 0; }
.reception-heading p { margin: .25rem 0; color: #354760; }
.reception-steps { padding: 0; list-style: none; }
.reception-steps li { padding: .35rem .65rem; border-radius: .4rem; background: #e6edf7; }
.reception-steps [aria-current=step] { background: #d9eaff; color: #123c70; font-weight: 700; }
.reception-steps a { margin: 0; }
.entrance-grid, .reception-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .75rem; }
.entrance-card, .reception-panel { display: block; margin: 0 0 .75rem; padding: 1rem; background: white; border: 1px solid #d3ddea; border-radius: .75rem; }
.entrance-card { text-decoration: none; }
.entrance-card:hover { border-color: #1856a6; background: #f7faff; }
.entrance-card strong, .entrance-card span { display: block; }
.entrance-card strong { font-size: 1.25rem; color: #142742; overflow-wrap: anywhere; }
.entrance-card .entrance-action { margin-top: .75rem; font-weight: 700; }
.entrance-action span { display: inline; }
.reception-fields label { margin: 0; min-width: 0; }
.reception-actions { justify-content: space-between; }
.reception-panel h2 { margin: 0; font-size: 1.2rem; }
#confirmation::backdrop { background: #14274299; }
#confirmation ol { padding-left: 1.4rem; overflow-wrap: anywhere; }
#confirmation dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; margin: .35rem 0 .85rem; }
#confirmation dt { color: #354760; }
#confirmation dd { margin: 0; }
@media (max-width: 420px) {
    .school-lanes { grid-template-columns: 1fr; }
}
