@media(max-width:1050px){
 .topbar{height:auto;min-height:68px;flex-wrap:wrap;gap:10px;padding:12px 18px}
 .topbar nav{display:flex;order:3;width:100%;overflow-x:auto;height:auto}
 .topbar nav a{white-space:nowrap;flex-shrink:0}
 .toolbar{flex-wrap:wrap}
 .toolbar label{flex:1}
 .toolbar select{min-width:0;width:100%}
 .navigator{flex-wrap:wrap}
 .navigator strong{min-width:0}
}
@media(max-width:700px){
 main{padding:18px 12px}
 .heading{flex-wrap:wrap;gap:12px}
 .heading h1{font-size:32px}
 .topbar{padding:10px 12px}
 .topbar nav a{padding:10px;font-size:12px}
 .toolbar{padding:12px;gap:12px}
 .toolbar label{flex-basis:100%}
 .navigator strong{font-size:14px;margin-left:5px}
 .compact-grid:not(.day-view){grid-template-columns:1fr}
 .compact-grid .day-cell{min-height:90px}
 .compact-grid .event-pill{font-size:12px;height:auto;padding:8px}
 .calendar{min-height:0}
 .dialog-actions{flex-wrap:wrap}
 #event-form{padding:18px}
 .form-grid input,.form-grid select{min-width:0;width:100%}
}
/* Shared interaction polish for touch and keyboard use. */
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #5aa5eb;outline-offset:3px}
@media(pointer:coarse){button,select,summary{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.heading{padding:24px;border:1px solid #dce7f3;border-radius:20px;background:linear-gradient(120deg,#fff 30%,#e9f5ff);box-shadow:0 10px 28px #244c7609}
.calendar-card{box-shadow:0 12px 32px #244c7610}.day-cell.selected{box-shadow:inset 0 0 0 2px #efb72f}
@media(max-width:700px){.heading{padding:18px}}