/* Shared breakpoints for navigation, header and content. */
.app-shell,.topbar,.top-right,main#content{min-width:0}
.app-shell>.topbar{padding-inline:22px;gap:18px}
.topbar .top-right{min-width:0;max-width:100%;gap:12px}
.topbar .weather-toggle,.topbar .calendar-toggle{min-width:0;flex-shrink:1}
.topbar .weather-summary,.topbar .calendar-widget-summary{min-width:0}
.topbar .theme-toggle{flex-shrink:0}
.sidebar>.brand{white-space:nowrap}
.sidebar>.brand:before{content:none}
.section-heading>div,.calendar-toolbar>*{min-width:0}
#discover-intro .home-slide{height:auto;min-height:310px}
#discover-intro .home-feature-copy{overflow-wrap:break-word}
@media(min-width:801px) and (max-width:1180px){.sidebar>.brand{font-size:33px;margin-left:8px;letter-spacing:-1.8px}.sidebar .nav-item{padding-inline:10px;font-size:14px}}
@media(min-width:701px) and (max-width:800px){.sidebar>.brand{font-size:0;margin-left:6px}.sidebar>.brand:before{content:'α';display:inline;font-size:39px}.sidebar>.brand span{font-size:11px}}
@media(max-width:1100px){.topbar .breadcrumb{display:none}.topbar .top-right{width:100%;justify-content:flex-end}#calendar-section .calendar-months{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 :root{--side:0px}
 .sidebar{inset:0 0 auto;height:63px;width:100%;padding:0 84px 0 12px;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line)}
 .sidebar>.brand{font-size:26px;margin:0 8px 0 0;flex-shrink:0;letter-spacing:-1.5px}
 .sidebar>.brand:before{display:none;content:none}
 .sidebar .side-label,.sidebar .side-bottom,.sidebar .nav-text{display:none}
 .sidebar nav{display:flex;gap:2px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
 .sidebar .nav-item{width:32px;min-width:32px;padding:7px;margin:0;flex-shrink:0;justify-content:center}
 .sidebar .nav-item svg{width:18px;height:18px}
 .app-shell{margin-left:0}
 .app-shell>.topbar{margin-top:63px;height:auto;min-height:76px;padding:8px 14px}
 .topbar .top-right{gap:8px;align-items:stretch}
 .topbar .weather-toggle,.topbar .calendar-toggle{flex:1;max-width:none}
 .topbar .calendar-toggle{flex:1.2}
 .topbar .theme-toggle{position:fixed;right:14px;top:13px;width:60px;height:36px;z-index:25}
 #discover-intro .hero{grid-template-columns:1fr;position:relative}
 #discover-intro .hero-copy{max-width:100%;padding:22px 24px;position:relative;z-index:1}
 #discover-intro .hero h1{font-size:clamp(30px,6vw,39px)}
 #discover-intro .hero-copy>p:not(.eyebrow){max-width:85%;font-size:14px}
 #discover-intro .record-scene{position:absolute;right:-65px;bottom:0;width:165px;height:165px;min-height:0;opacity:.25;pointer-events:none;border-radius:50%;background:transparent}
 #discover-intro .record{width:160px;height:160px;left:50%;top:0}
 #discover-intro .record-caption,#discover-intro .record-sticker,#discover-intro .record-foot{display:none}
 #discover-intro .home-slide{min-height:340px}
 .home-slider-controls{flex-wrap:wrap}
 #calendar-section .calendar-months{grid-template-columns:repeat(2,minmax(0,1fr))}
 .calendar-toolbar .calendar-name-search input{width:0;min-width:100px}
}
@media(max-width:580px){#calendar-section .calendar-months{grid-template-columns:1fr}}
@media(max-width:360px){.home-slider-dots{order:5;flex-basis:100%}.home-slider-controls{justify-content:center}.home-slider-count{margin:0}.sidebar .nav-item{width:30px;min-width:30px}.topbar .weather-icon{display:none}}

/* Short, targeted transitions soften breakpoint changes without delaying
   viewport sizing, scrolling, game boards or pointer interactions. */
@media(prefers-reduced-motion:no-preference){
 .app-shell{transition:margin-left 180ms ease-out}
 .sidebar{transition:width 180ms ease-out,padding 180ms ease-out}
 .sidebar>.brand{transition:font-size 180ms ease-out,margin 180ms ease-out,letter-spacing 180ms ease-out}
 .sidebar .nav-item{transition:padding 180ms ease-out,background-color 150ms ease-out,color 150ms ease-out}
 .app-shell>.topbar{transition:padding 180ms ease-out,gap 180ms ease-out}
 .topbar .top-right{transition:gap 180ms ease-out}
 main#content{transition:padding 180ms ease-out}
 #discover-intro .hero-copy,.home-feature-copy{transition:padding 180ms ease-out}
 #discover-intro .hero h1,.home-feature-copy h2{transition:font-size 180ms ease-out}
 .calendar-months,.station-grid,.games-grid{transition:gap 180ms ease-out}
 #calendar-section .calendar-month{transition:padding 180ms ease-out}
}

/* The theme switch owns a grid column; it never floats over navigation. */
@media(max-width:700px){
 .sidebar{display:grid;grid-template-columns:auto minmax(0,1fr) 60px;gap:8px;padding:0 12px;transition:none}
 .sidebar>.brand{margin:0}
 .sidebar nav{width:100%;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-block:4px}
 .sidebar>.theme-toggle{position:relative;width:60px;height:36px;min-width:0;z-index:auto}
 .home-feature{overflow:hidden}
}

/* Keep station search and ordering together, including narrow screens. */
.filterbar{flex-wrap:nowrap}
.filterbar .search-wrap{flex:1 1 0;min-width:0}
.filterbar #sort-filter{flex:0 0 auto;width:150px;max-width:40%;min-width:0}
@media(max-width:700px){.filterbar .search-wrap{gap:6px;padding-inline:9px}.filterbar .search-wrap>svg{flex-shrink:0}.filterbar .search-wrap kbd{display:none}.filterbar #sort-filter{width:120px}}

@media(min-width:1181px){#games-section .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Weather/calendar cards share a baseline and grow safely when text wraps. */
.app-shell>.topbar{height:auto;min-height:88px;padding-block:10px}
.topbar .top-right{align-items:stretch}
.topbar .weather-toggle,.topbar .calendar-toggle{min-height:64px;height:auto;align-self:stretch;align-items:center}
.topbar .weather-summary,.topbar .calendar-widget-summary{flex:1;gap:4px}
.topbar .weather-summary strong,.topbar .calendar-widget-summary strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;line-height:1.4}
.topbar .weather-summary small,.topbar .calendar-widget-summary small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
.topbar .theme-toggle{align-self:center}
.topbar .weather-chevron{flex-shrink:0}
@media(max-width:700px){
 .app-shell>.topbar{min-height:88px;padding-block:10px}
 .topbar .top-right{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px}
 .topbar .weather-toggle,.topbar .calendar-toggle{width:100%;max-width:none;min-height:66px;padding:10px;gap:8px}
 .topbar .weather-summary strong,.topbar .calendar-widget-summary strong{font-size:12px}
 .topbar .weather-summary small,.topbar .calendar-widget-summary small{font-size:11px}
 .topbar .weather-chevron,.topbar .calendar-widget-summary small span{display:none}
}
@media(max-width:430px){
 .topbar .weather-icon,.topbar .calendar-widget-icon{display:none}
 .topbar .top-right{grid-template-columns:repeat(2,minmax(0,1fr))}
}