/* Keep late-added navigation items and utility cards independently reachable. */
@media (min-width:901px){
  .side{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important;overflow:hidden!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
  .sidebar-brand{flex:0 0 auto!important}
  .side .nav{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px 5px 12px 0!important}
  .side .nav button{flex:0 0 auto!important}
  .sidefoot{position:static!important;inset:auto!important;flex:0 0 auto!important;max-height:min(38dvh,300px)!important;overflow-x:hidden!important;overflow-y:auto!important;margin-top:8px!important;padding-right:3px}
}
@media (min-width:901px) and (max-height:760px){
  .sidebar-brand{height:108px!important;min-height:108px!important}
  .sidebar-brand img{width:82px!important;height:92px!important}
  .side .nav{gap:3px!important}
  .side .nav button{min-height:40px!important;padding-block:8px!important}
  .sidefoot{max-height:32dvh!important}
}
@media (max-width:900px){
  .mobile{overflow-x:auto!important;scroll-snap-type:x proximity;scrollbar-gutter:stable;overscroll-behavior-x:contain}
  .mobile button{flex:0 0 auto;scroll-snap-align:start}
}

@media (min-width:901px) and (max-height:900px){
  .sidebar-brand{height:132px!important;min-height:132px!important}
  .sidebar-brand img{width:96px!important;height:108px!important}
  .sidefoot{max-height:24dvh!important}
  .sidefoot .clock{padding:7px 9px!important;margin-top:5px!important}
  .sidebar-event-timer{margin-bottom:6px!important;padding:8px 10px!important}
}
@media (min-width:901px){
  .side .nav{scroll-padding-block:8px}
  .side .nav::-webkit-scrollbar,.sidefoot::-webkit-scrollbar{width:7px}
  .side .nav::-webkit-scrollbar-thumb,.sidefoot::-webkit-scrollbar-thumb{border-radius:99px;background:color-mix(in srgb,var(--st-cyan) 28%,transparent)}
}
@media (max-width:900px){
  .mobile{padding-bottom:max(6px,env(safe-area-inset-bottom))!important;scroll-padding-inline:12px;-webkit-overflow-scrolling:touch}
  .mobile button{min-width:max(82px,22vw)!important}
  .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
}