:root { font-family: system-ui, sans-serif; color: #002645; background: #f2f5f7; }
body { margin: 0; }
header { background: #002645; color: white; padding: 1.25rem; }
.portal-header { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; }
.portal-logo { display: block; width: min(12rem, 100%); height: auto; padding: .5rem; box-sizing: border-box; border-radius: .3rem; background: white; }
main { max-width: 72rem; margin: auto; padding: 1rem; }
button { background: #002645; color: white; cursor: pointer; }
button, input, select, textarea { font: inherit; padding: .45rem; border: 1px solid #617785; border-radius: .3rem; }
form { display: grid; gap: .8rem; max-width: 30rem; }
label { display: grid; gap: .25rem; }
.inline { display: flex; align-items: end; margin-bottom: 1rem; }
details, section { background: white; border-radius: .5rem; padding: 1rem; }
summary { cursor: pointer; }
details form { margin-top: 1rem; }
.months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; text-align: center; }
.away { background: #d0e6f6; }
.overlap { background: #ffcf88; font-weight: bold; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 40rem) {
    .months { grid-template-columns: 1fr; }
    .days > span { min-height: 1.8rem; }
    button, input, select, textarea { box-sizing: border-box; min-height: 44px; max-width: 100%; }
    .inline { flex-wrap: wrap; }
    li { margin-bottom: .65rem; }
}