:root{color-scheme:dark;--red:#d00000;--bg:#0f0f0f;--border:#454545;--text:#fff;--muted:#bdbdbd;--shadow:0 18px 48px #0006;font-family:Inter,Roboto,Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:var(--text)}button,a{transition:background .16s,border-color .16s}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:3px}[hidden]{display:none!important}#app{height:100dvh;min-height:360px;position:relative;overflow:hidden}#map{position:absolute;inset:0;background:#131719}.glass{background:rgba(15,15,15,.94);border:1px solid #454545e0;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.topbar{position:absolute;top:18px;left:18px;right:18px;height:64px;border-radius:18px;padding:9px 17px 9px 10px;display:flex;align-items:center;justify-content:space-between;z-index:4}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:#fff}.brand img{border-radius:12px;object-fit:contain}.brand strong{display:block;font-size:18px;letter-spacing:-.4px}.brand small{display:block;color:#ff4545;font-size:10px;font-weight:800;letter-spacing:1.7px;margin-top:4px}.topbar nav{display:flex;gap:10px;align-items:center}.topbar nav a{color:#ddd;text-decoration:none;font-size:12px;font-weight:600;padding:10px 12px;border-radius:10px}.topbar nav a:first-child{border:1px solid var(--border);background:#232323}.topbar nav a:hover{background:#333}.topbar nav span{margin-left:10px;color:#f66}
.weather-panel{position:absolute;top:96px;bottom:36px;left:18px;width:350px;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;z-index:3}.mode-panel{flex:none;padding:20px}.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#e76868}h1{font-size:27px;letter-spacing:-1px;margin:8px 0 5px}.panel-intro p{font-size:12px;color:var(--muted);margin:0 0 17px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#090909;border:1px solid #2d2d2d;padding:4px;border-radius:14px}.mode-switch button{min-height:40px;border:1px solid transparent;border-radius:10px;background:transparent;color:#bdbdbd;font-size:12px;font-weight:750;white-space:nowrap}.mode-switch button span{margin-right:4px;font-size:16px}.mode-switch button.active{background:var(--red);border-color:#e32424;color:#fff;box-shadow:0 4px 14px #d0000026}.mode-switch button:not(.active):hover{background:#292929}
.day-controls{margin-top:13px}.day-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:3px;border:1px solid #363636;background:#161616;border-radius:10px}.day-switch button{padding:8px;border:0;border-radius:7px;background:transparent;color:#aaa;font-size:10px;font-weight:750;letter-spacing:.6px}.day-switch button.active{background:#353535;color:#fff;box-shadow:inset 0 0 0 1px #686868}.forecast-heading{display:flex;flex-direction:column;gap:5px;margin:12px 0 0;font-size:13px;line-height:1.3;font-weight:500}.forecast-heading strong{font-size:10px;font-weight:800;letter-spacing:1px;color:#edabab}.day-hint{font-size:10px;color:#999;line-height:1.4;margin:7px 0 0}.day-hint.warning{color:#efc88c}.demo-note{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.4;color:#c7c7c7;margin-top:13px}.demo-tag{border:1px solid #ad8543;background:#3c2f1e;color:#f0cc83;border-radius:5px;font-size:8px;font-weight:800;letter-spacing:1px;padding:3px 5px;line-height:1.2;flex:none}.updated{color:#999;font-size:10px;line-height:1.4;margin:7px 0 14px}.region-label{display:block;font-size:9px;font-weight:750;letter-spacing:1px;color:#999;margin-bottom:7px}select{width:100%;min-height:36px;background:#202020;border:1px solid var(--border);color:#eee;border-radius:9px;padding:7px 10px;font-size:12px}
.details-panel{min-height:0;display:flex;flex:1;flex-direction:column;overflow:hidden;border-top:1px solid #353535}.sheet-toggle{display:none}#detailsBody{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent;padding:20px}.detail-eyebrow{font-size:9px;letter-spacing:1.5px;color:#a3a3a3;text-transform:uppercase;font-weight:700}.detail-title{font-size:21px;line-height:1.2;letter-spacing:-.5px;margin:9px 0 5px}.detail-subtitle{font-size:11px;line-height:1.6;color:#aaa;margin:0}.value-row{display:flex;align-items:center;gap:13px;margin:20px 0 12px}.main-value{font-size:49px;font-weight:750;line-height:1;letter-spacing:-2px}.value-unit{font-size:18px;letter-spacing:0;color:#999;font-weight:500}.weather-symbol{font-size:35px;color:#999}.category{font-size:12px;color:#c8c8c8;margin:0 0 16px;line-height:1.5}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric{border:1px solid #333;background:#202020a6;border-radius:12px;padding:12px}.metric small{display:block;color:#999;font-size:10px;margin-bottom:7px}.metric strong{font-size:12px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}.detail-note{color:#aaa;font-size:11px;line-height:1.6;border-top:1px solid #303030;margin:16px 0 0;padding-top:13px}.cold-note{font-size:11px;line-height:1.5;color:#f0cc83;border-left:2px solid #d5a15c;padding:8px 10px;background:#392d1d88;border-radius:0 8px 8px 0}.data-empty{display:flex;align-items:center;gap:7px;color:#b6b6b6;font-size:11px;margin-top:12px}.data-empty:before{content:"";width:5px;height:5px;border-radius:50%;background:#999;flex:none}.breadcrumb{display:flex;flex-wrap:wrap;gap:5px;font-size:10px;color:#777;margin-bottom:16px}.breadcrumb button{padding:0;border:0;background:transparent;color:#bbb;font-size:10px}.breadcrumb button:hover{color:white}
.map-context{position:absolute;top:98px;left:386px;border-radius:11px;display:flex;align-items:center;gap:9px;padding:10px 13px;font-size:10px;letter-spacing:.8px;z-index:2;color:#ccc}.context-dot{width:6px;height:6px;background:var(--red);border-radius:50%}.map-context button{padding:0 0 0 10px;margin-left:5px;border:0;border-left:1px solid #454545;background:transparent;color:#bbb;font-size:10px;letter-spacing:0}.map-notice{position:absolute;top:147px;left:386px;border-radius:10px;padding:10px 13px;font-size:11px;max-width:390px;color:#ddd;z-index:2}.legend{position:absolute;bottom:36px;right:18px;max-width:calc(100% - 410px);border-radius:13px;padding:11px 14px;font-size:10px;z-index:2;color:#ccc}.legend-title{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#999;margin:0 0 8px}.legend-scale{display:flex;gap:8px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:5px;font-size:9px}.swatch{display:inline-block;width:9px;height:9px;flex:none;border-radius:3px}.legend-weather{display:flex;align-items:center;gap:9px}
.mapboxgl-ctrl-top-right{top:138px;right:18px}.mapboxgl-ctrl-group{background:#191919!important;border:1px solid #454545;box-shadow:var(--shadow)!important;border-radius:11px!important;overflow:hidden}.mapboxgl-ctrl-group button{width:36px;height:36px}.mapboxgl-ctrl-group button+button{border-top:1px solid #454545}.mapboxgl-ctrl-group button span{filter:invert(1)}.mapboxgl-ctrl-group button:hover{background:#333!important}.mapboxgl-ctrl-bottom-right{font-size:10px}.noscript{position:absolute;left:20%;right:20%;top:45%;padding:20px;border-radius:16px}.mapboxgl-canvas:focus-visible{outline:2px solid white;outline-offset:-3px}.mapboxgl-canvas:focus:not(:focus-visible){outline:none}
@media(min-width:701px) and (max-height:780px){.mode-panel{padding:15px 18px}.panel-intro p{display:none}h1{font-size:23px;margin-bottom:12px}.day-controls{margin-top:9px}.forecast-heading{margin-top:9px;font-size:12px}.day-hint{display:none}.demo-note{margin-top:9px}.updated{margin-bottom:10px}#detailsBody{padding:18px}.value-row{margin:13px 0 10px}.main-value{font-size:40px}}
@media(max-width:700px){.topbar{top:10px;left:10px;right:10px;height:58px;border-radius:16px;padding:8px 10px}.brand img{width:39px;height:39px;border-radius:10px}.brand{gap:8px}.brand strong{font-size:16px}.brand small{font-size:8px;letter-spacing:1.4px}.topbar nav a{font-size:11px;padding:9px}.home-link{display:none}.topbar nav span{margin-left:3px}.weather-panel{inset:0;width:auto;border:0;background:transparent;box-shadow:none;backdrop-filter:none;pointer-events:none;overflow:visible}.mode-panel{position:absolute;top:78px;left:10px;right:10px;padding:7px;border:1px solid #454545e0;border-radius:16px;background:rgba(15,15,15,.95);box-shadow:var(--shadow);backdrop-filter:blur(14px);pointer-events:auto}.panel-intro,.region-label,#regionSelect{display:none}.mode-switch{border:0;padding:0;gap:5px;background:transparent}.mode-switch button{min-height:37px;font-size:12px}.day-controls{margin:8px 5px 0}.day-switch button{padding:7px;font-size:10px}.forecast-heading{margin-top:8px;gap:3px;font-size:12px}.forecast-heading strong{font-size:9px;letter-spacing:.6px}.day-hint{display:none}.day-hint.warning{display:block;font-size:10px;margin-top:5px}.demo-note{margin:8px 5px 0;gap:6px;font-size:10px;line-height:1.35}.updated{font-size:9px;margin:5px 5px 2px}.demo-tag{font-size:8px;padding:3px 4px}.details-panel{position:absolute;left:10px;right:10px;bottom:36px;flex:none;max-height:38dvh;border:1px solid #454545e0;border-radius:20px;background:rgba(15,15,15,.96);box-shadow:var(--shadow);pointer-events:auto}.sheet-toggle{display:flex;flex:none;position:relative;align-items:center;gap:8px;background:transparent;border:0;width:100%;padding:23px 17px 13px;text-align:left;font-size:12px;font-weight:650}.handle{position:absolute;top:9px;left:calc(50% - 18px);width:36px;height:3px;border-radius:3px;background:#777}.chevron{margin-left:auto;color:#aaa}.details-panel.collapsed .chevron{transform:rotate(180deg)}.details-panel.collapsed #detailsBody{display:none}#detailsBody{padding:0 17px 17px}.detail-title{font-size:20px;margin:6px 0}.detail-eyebrow{font-size:8px}.main-value{font-size:38px}.value-row{margin:13px 0 10px}.weather-symbol{font-size:27px}.metric{padding:10px}.metric small{margin-bottom:5px}.metric strong{font-size:11px}.detail-note{margin-top:12px;padding-top:10px;font-size:10px}.category{margin-bottom:12px;font-size:11px}.map-context{top:var(--map-controls-top,185px);left:10px;padding:9px;font-size:8px;gap:6px;max-width:calc(100% - 62px)}.map-context button{font-size:9px;white-space:nowrap}.mapboxgl-ctrl-top-right{top:var(--map-controls-top,185px);right:10px}.mapboxgl-ctrl-group button{width:32px;height:32px}.map-notice{top:calc(var(--map-controls-top,185px) + 40px);left:10px;max-width:calc(100% - 65px);font-size:10px}.legend{right:10px;bottom:104px;max-width:calc(100% - 20px);padding:9px 11px;display:none}.weather-panel:has(.details-panel.collapsed)~.legend{display:block}.legend-title{font-size:8px;margin-bottom:6px}.legend-item{font-size:8px}.legend-scale{gap:7px}.breadcrumb{margin-top:4px;margin-bottom:10px}}
@media(max-width:700px) and (max-height:600px){.topbar{height:49px}.brand img{width:32px;height:32px}.mode-panel{top:68px}.mode-switch button{min-height:30px}.details-panel{max-height:34dvh;bottom:28px}.demo-note{margin-top:5px}.day-switch button{padding:5px}.forecast-heading{font-size:10px;gap:2px;margin-top:5px}.day-controls{margin-top:5px}.sheet-toggle{padding:19px 13px 9px}.legend{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* One fixed control header, one scrolling detail area and one small footer. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mode-panel{padding:18px 20px 14px}.panel-intro h1{margin:0 0 14px;font-size:25px}
.forecast-heading{display:block;margin:11px 0 0;font-size:13px;line-height:1.45;font-weight:650;color:#eee}
.panel-status{font-size:11px;line-height:1.45;color:#efc88c;margin:10px 0 0}
.publication-hint{font-size:11px;line-height:1.45;color:#bfc4c8;margin:0 0 12px;overflow-wrap:anywhere}
@media(max-width:700px){.publication-hint{font-size:10px;margin-bottom:10px}}
#regionSelect{margin-top:14px}.day-hint.warning{margin-top:7px}
#detailsBody{padding:18px 20px}.detail-title{font-size:25px;line-height:1.2;margin:0 0 16px}
.value-row{margin:8px 0 10px}.main-value{font-size:54px}.category{font-size:13px;margin:0 0 17px}
.weather-symbol{font-size:32px}.metrics:empty{display:none}
.ride-window{display:flex;align-items:center;gap:12px;border:1px solid #393939;background:#232323;border-radius:13px;padding:13px 14px}
.ride-clock{font-size:28px;line-height:1;color:#e8a0a0;flex:none}.ride-window h3{font-size:11px;line-height:1.4;color:#bdbdbd;font-weight:500;margin:0 0 5px}
.ride-window strong{font-size:27px;line-height:1.2;font-weight:700;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.region-note{font-size:11px;line-height:1.5;color:#aaa;margin:13px 0 0}.condition-note{font-size:11px;line-height:1.5;color:#efc88c;margin:10px 0 0}
.empty-state{font-size:13px;line-height:1.65;color:#bdbdbd;margin:0}
.breadcrumb{margin:16px 0 0;padding-top:12px;border-top:1px solid #303030}
.panel-footer{flex:none;border-top:1px solid #303030;font-size:10px;color:#999;margin:0;padding:10px 20px}
@media(min-width:701px) and (max-height:780px){.mode-panel{padding:14px 18px}.panel-intro h1{font-size:23px;margin-bottom:12px}#detailsBody{padding:16px 18px}.detail-title{font-size:23px;margin-bottom:13px}.main-value{font-size:46px}.ride-window{padding:11px 12px}.ride-window strong{font-size:25px}}
@media(max-width:700px){
 .mode-panel{padding:7px}.panel-status{margin:7px 5px 1px;font-size:10px}.forecast-heading{font-size:12px;margin-top:8px}.day-controls{margin:8px 5px 2px}
 #detailsBody{padding:0 16px 14px}.detail-title{display:none}.sheet-toggle{padding:22px 16px 10px;min-height:46px}
 .value-row{margin:5px 0 8px}.main-value{font-size:42px}.category{font-size:12px;margin-bottom:12px}
 .ride-window{padding:10px 12px;gap:10px}.ride-window strong{font-size:24px}.ride-window h3{font-size:10px;margin-bottom:4px}.ride-clock{font-size:25px}
 .panel-footer{padding:8px 16px;font-size:9px}.details-panel.collapsed .panel-footer{display:none}.region-note,.condition-note{font-size:10px;line-height:1.45;margin-top:9px}.breadcrumb{margin-top:10px;padding-top:8px}
}
@media(max-width:700px) and (max-height:600px){.forecast-heading{font-size:11px;margin-top:5px}.day-controls{margin-top:5px}.main-value{font-size:34px}.ride-window{padding:7px 10px}.ride-window strong{font-size:21px}.sheet-toggle{padding-top:19px;min-height:42px}}
.ride-comment{font-size:12px;line-height:1.55;color:#ddd;margin:0 0 15px}
.ride-conditions{margin:14px 0 0}.ride-conditions h3{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:#aaa;margin:0 0 8px}
.ride-conditions-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ride-conditions-grid .metric{padding:9px 10px;border-radius:9px}.ride-conditions-grid small{margin-bottom:4px}.ride-conditions-grid strong{font-size:11px}
@media(max-width:700px){.ride-comment{font-size:11px;line-height:1.4;margin-bottom:9px}.ride-conditions{margin-top:10px}.ride-conditions h3{font-size:8px;margin-bottom:6px}.ride-conditions-grid{gap:5px}.ride-conditions-grid .metric{padding:7px 8px}.ride-conditions-grid strong{font-size:10px}.ride-conditions-grid small{font-size:9px}}
@media(max-width:700px){.details-panel:has(.ride-comment){max-height:46dvh}.details-panel:has(.ride-comment) .main-value{font-size:36px}.details-panel:has(.ride-comment) .category{margin-bottom:8px}}

/* Current city weather: compact header and the existing shared details panel. */
.weather-controls{margin-top:10px}.weather-forecast-heading{font-size:11px;line-height:1.45;color:#bbb;margin:0;font-variant-numeric:tabular-nums}
.weather-description,.weather-time{font-size:12px;color:#bbb;line-height:1.6;margin:0 0 12px}.weather-credit{font-size:11px;color:#bbb;margin:16px 0 9px}.weather-credit a{color:#dedede;text-underline-offset:3px}.weather-disclaimer{font-size:10px;line-height:1.55;color:#999;margin:0}
@media(max-width:700px){.weather-controls{margin:7px 5px 2px}.weather-forecast-heading{font-size:10px}.weather-description,.weather-time{font-size:11px;margin:4px 0 10px}.weather-credit{margin-top:12px}.weather-panel:has(#weatherControls:not([hidden])) .details-panel{max-height:34dvh}}

/* Explain the existing scale without covering the map with an onboarding overlay. */
.score-intro h2{font-size:20px;line-height:1.25;letter-spacing:-.4px;margin:0 0 10px}
.score-intro p{font-size:12px;line-height:1.6;color:#bdbdbd;margin:0 0 14px}
.score-intro .score-intro-lead{font-size:13px;color:#eee}
.score-intro-steps{list-style:none;padding:0;margin:18px 0;display:grid;gap:13px}
.score-intro-steps li{display:flex;align-items:flex-start;gap:11px}
.score-intro-steps li>span{flex:none;width:29px;height:29px;display:grid;place-items:center;background:#292222;border:1px solid #483434;border-radius:8px;color:#efa9a9;font-size:18px}
.score-intro-steps strong,.score-intro-tip strong{font-size:12px;font-weight:650;color:#eee}
.score-intro-steps p{font-size:11px;line-height:1.5;margin:3px 0 0}
.score-intro-tip{padding:12px;border:1px solid #393939;border-radius:10px;background:#202020}
.score-intro-tip p{font-size:11px;line-height:1.5;margin:5px 0 0}
.province-hint{font-size:12px;line-height:1.6;color:#c8c8c8;margin:15px 0 0;padding-top:12px;border-top:1px solid #343434}
.score-legend summary{font-size:10px;font-weight:650;color:#ddd;cursor:pointer;list-style:none}
.score-legend summary::-webkit-details-marker{display:none}
.score-legend summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
.score-legend .legend-scale{display:grid;gap:7px;margin-top:10px}
.score-legend .legend-item{display:flex;gap:7px;font-size:10px;line-height:1.3}
.legend-range{min-width:44px;font-variant-numeric:tabular-nums;color:#eee}
@media(min-width:701px){.score-legend summary{pointer-events:none}}
@media(max-width:700px){
 .score-intro h2{display:none}.score-intro p{font-size:11px;margin-bottom:10px}.score-intro .score-intro-lead{font-size:12px;margin-top:4px}
 .score-intro-steps{gap:10px;margin:13px 0}.score-intro-steps strong,.score-intro-tip strong{font-size:11px}.score-intro-tip{padding:10px}
 .province-hint{font-size:11px;line-height:1.5;margin-top:10px;padding-top:10px}
 .legend{display:block!important;bottom:calc(var(--details-height,46px) + 44px);max-width:calc(100% - 20px);padding:9px 11px;
   max-height:max(90px,calc(100dvh - var(--map-controls-top,185px) - var(--details-height,46px) - 92px));overflow:auto}
 .score-legend summary::after{content:' +';color:#aaa}.score-legend[open] summary::after{content:' −'}
 .score-legend .legend-item{font-size:10px}.score-legend .legend-scale{gap:7px}
}
@media(min-width:560px) and (max-width:700px) and (max-height:600px){
 .legend{top:14px;bottom:auto;right:150px;z-index:5;max-width:190px;max-height:44px;padding:5px 9px}
 .score-legend .legend-scale{display:flex;flex-wrap:nowrap;overflow:auto;gap:14px;margin-top:4px;padding-bottom:2px;scrollbar-width:thin}
 .score-legend .legend-item{flex:none}
}
#countyPicker{margin-top:8px}
@media(max-width:700px){#regionSelect{display:block;min-height:32px;margin-top:8px;font-size:11px}#countyPicker{margin-top:6px}#countySelect{min-height:32px;font-size:11px}}

/* Static guide link; map legend and categories stay unchanged. */
.legend-guide{display:inline-flex;align-items:center;gap:7px;min-height:32px;margin-top:7px;color:#d6dce4;font-size:11px;text-decoration:underline;text-underline-offset:3px}.legend-guide:hover{color:#fff}.legend-guide:focus-visible{outline:2px solid #ffc400;outline-offset:3px}


/* Homepage download CTA, scoped to the map header. */
.topbar-brand{display:flex;align-items:center;gap:20px;min-width:0}
.topbar .download-cta{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:38px;padding:0 12px;border:1px solid transparent;border-radius:0;background:#d00000;color:#fff;text-decoration:none;font:800 12px/1.1 'Barlow Condensed',sans-serif;letter-spacing:1.35px;text-transform:uppercase;white-space:nowrap;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.topbar .download-cta:hover{transform:translateY(-2px)}
.topbar .download-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:700px){.topbar-brand{gap:8px;flex:none}.topbar{gap:8px}.topbar .download-cta{width:116px;padding-inline:6px;font-size:11px;letter-spacing:1px;white-space:normal;text-align:center}.topbar nav{gap:0}.topbar nav a{white-space:nowrap}}
@media(max-width:380px){.topbar-brand .brand img{display:none}.topbar-brand{gap:6px}.topbar .brand strong{font-size:15px}.topbar nav a{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.topbar .download-cta:hover{transform:none}}
@media(min-width:701px) and (max-height:600px){
 .weather-panel{top:78px;bottom:20px}.mode-panel{padding:10px 14px}.panel-intro h1{font-size:20px;margin-bottom:6px}
 .mode-switch button{min-height:30px}.day-controls{margin-top:6px}.day-switch button{padding:5px}
 .forecast-heading{margin-top:6px;font-size:11px}.panel-status{margin-top:6px;font-size:10px}#regionSelect{margin-top:8px;min-height:30px}
}


/* Mobile map workspace. Desktop styles above remain the source of truth. */
.mobile-only,.mobile-summary,.mobile-dialog{display:none}
@media(max-width:700px), (max-width:960px) and (max-height:500px) and (pointer:coarse){
 html,body{height:100%;overflow:hidden}
 #app{height:100dvh;min-height:0}
 .topbar{top:calc(8px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));height:44px;padding:4px 6px;border-radius:13px;gap:8px}
 .topbar-brand{flex:1;min-width:0;gap:0}.topbar .brand{gap:7px;min-width:0}.topbar-brand .brand img{display:block;width:29px;height:29px;border-radius:8px}.topbar .brand strong{font-size:15px}.topbar .brand small{font-size:7px;letter-spacing:1.1px;margin-top:2px}
 .mobile-header-actions{display:flex;align-items:center;gap:4px;flex:none}
 .mobile-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:10px;background:#202020;color:var(--text);font-size:19px;font-weight:700;line-height:1}
 .mobile-icon svg{pointer-events:none}.mobile-icon:hover{background:#303030}
 .weather-panel{inset:0;width:auto;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;pointer-events:none;overflow:visible}
 .mode-panel{position:absolute;top:calc(60px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:6px;padding:6px;border:1px solid var(--border);border-radius:13px;background:rgba(15,15,15,.95);box-shadow:var(--shadow);backdrop-filter:blur(14px);pointer-events:auto}
 .mode-panel .panel-intro{display:none}.mode-switch{grid-column:1;grid-row:1;min-width:0;display:grid;grid-template-columns:1.15fr 1fr;gap:2px;padding:3px;border:1px solid #303030;background:#090909;border-radius:10px}
 .mode-switch button{min-width:0;min-height:38px;padding:0 3px;border-radius:7px;font-size:11px;white-space:nowrap}.mode-switch button span{display:none}
 #dayControls{display:contents}.day-switch{grid-column:2;grid-row:1;min-width:0;gap:2px;padding:3px;border-radius:10px}.day-switch button{min-width:0;min-height:38px;padding:0 3px;font-size:9px;letter-spacing:0}
 .forecast-heading{grid-column:2;grid-row:2;align-self:center;min-width:0;font-size:10px;line-height:1.35;margin:0;overflow-wrap:anywhere;color:var(--text)}
 .mobile-region-row{display:flex;grid-column:1;grid-row:2;min-width:0}.mobile-region-row button{display:flex;align-items:center;gap:6px;width:100%;min-width:0;min-height:40px;padding:6px 8px;background:#252525;border:1px solid var(--border);border-radius:9px;text-align:left;font-size:11px;font-weight:650}
 #mobileRegionName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-region-row button>span:first-child{font-size:17px;color:#efa9a9}.mobile-region-row button>span:last-child{color:var(--muted)}
 .day-hint.warning,.panel-status{grid-column:1/-1;margin:0;font-size:10px;line-height:1.35;overflow-wrap:anywhere}.day-hint.warning{display:block}.mode-panel .weather-controls{grid-column:2;grid-row:2;align-self:center;margin:0;min-width:0}.weather-forecast-heading{font-size:9px;line-height:1.35;margin:0;overflow-wrap:anywhere}
 .mode-panel:has(#dayControls[hidden]) .mode-switch{grid-column:1/-1}
 #detailsPanel{position:absolute;left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex:none;flex-direction:column;min-height:0;max-height:max(110px,min(60dvh,calc(100dvh - var(--map-controls-top,180px) - 76px - env(safe-area-inset-bottom,0px))))!important;border:1px solid var(--border);border-radius:17px;background:rgba(15,15,15,.97);box-shadow:var(--shadow);pointer-events:auto;overflow:hidden}
 #detailsPanel[hidden]{display:none!important}
 .sheet-toggle{display:flex;flex:none;position:relative;align-items:center;gap:8px;min-height:44px;width:100%;padding:18px 12px 8px;background:transparent;border:0;text-align:left;font-size:12px;font-weight:650}.handle{top:6px}.chevron{margin-left:auto;flex:none}#sheetTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #detailsBody{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 14px 14px}.detail-title{display:none}.panel-footer{padding:7px 14px;font-size:9px}
 #detailsPanel.collapsed #detailsBody,#detailsPanel.collapsed .panel-footer{display:none}
 #detailsPanel.collapsed .mobile-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;flex:0 1 auto;min-height:0;max-height:24dvh;overflow:auto;overscroll-behavior:contain;padding:1px 12px 12px}
 .mobile-summary .value-row{grid-column:1;grid-row:1;margin:0}.mobile-summary .main-value{font-size:32px;letter-spacing:-1px}.mobile-summary .value-unit{font-size:12px}.mobile-summary .category{grid-column:1;grid-row:2;margin:3px 0 0;font-size:10px;line-height:1.35}
 .mobile-summary .ride-window{grid-column:2;grid-row:1/span 2;align-self:center;gap:0;max-width:132px;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;padding:0 0 0 10px}.mobile-summary .ride-clock{display:none}.mobile-summary .ride-window h3{font-size:8px;margin-bottom:4px;line-height:1.3}.mobile-summary .ride-window strong{font-size:18px;white-space:nowrap}
 .mobile-summary .empty-state{grid-column:1/-1;font-size:11px;line-height:1.45;margin:0}.mobile-summary .condition-note{grid-column:1/-1;font-size:10px;line-height:1.4;margin:7px 0 0}.mobile-summary .region-note{grid-column:1/-1;grid-row:1;border:0;padding:0;margin:0 0 6px;font-size:10px;color:#efc88c}
 .mobile-summary:has(>.region-note) .value-row{grid-row:2}.mobile-summary:has(>.region-note) .category{grid-row:3}.mobile-summary:has(>.region-note) .ride-window{grid-row:2/span 2}
 .map-context{top:var(--map-controls-top,180px);left:calc(8px + env(safe-area-inset-left,0px));max-width:calc(100% - 62px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));min-height:36px;gap:6px;padding:8px;font-size:8px;border-radius:10px}.map-context button{font-size:9px;white-space:nowrap}.mapboxgl-ctrl-top-right{top:var(--map-controls-top,180px);right:calc(8px + env(safe-area-inset-right,0px))}.mapboxgl-ctrl-group button{width:36px;height:36px}
 .map-notice{top:calc(var(--map-controls-top,180px) + 44px);left:calc(8px + env(safe-area-inset-left,0px));max-width:calc(100% - 62px);font-size:10px}
 #legend{display:block!important;top:auto;right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(var(--details-height,0px) + 32px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 16px);max-height:max(44px,min(40dvh,calc(100dvh - var(--map-controls-top,180px) - var(--details-height,0px) - 86px)));padding:9px 11px;border-radius:11px;overflow:auto}
 #legend[hidden],.weather-panel:has(#detailsPanel:not(.collapsed):not([hidden]))~#legend{display:none!important}.score-legend summary{min-height:20px;font-size:10px}.score-legend summary::after{content:' +';color:var(--muted)}.score-legend[open] summary::after{content:' −'}.score-legend .legend-scale{display:grid;gap:8px;margin-top:10px;overflow:visible;padding:0}.score-legend .legend-item{font-size:10px;line-height:1.3}
 .mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right{bottom:env(safe-area-inset-bottom,0px)}
 .mobile-dialog[open]{display:flex;flex-direction:column;position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px));padding:0;border:1px solid var(--border);border-bottom:0;border-radius:20px 20px 0 0;background:var(--bg);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
 .mobile-dialog::backdrop{background:#0009}.mobile-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(14px,env(safe-area-inset-right,0px)) 12px max(14px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--border);flex:none}.mobile-dialog-header h2{font-size:17px;margin:0;line-height:1.3}.mobile-dialog-header .mobile-icon{width:40px;height:40px;font-size:25px}.mobile-dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
 #mobileRegionFields label.sr-only{position:static;display:block;width:auto;height:auto;margin:0 0 8px;padding:0;clip:auto;overflow:visible;white-space:normal;font-size:12px;line-height:1.4;color:var(--muted)}#mobileRegionFields #regionSelect,#mobileRegionFields #countySelect{display:block;width:100%;min-height:48px;margin:0;padding:12px;font-size:14px}#mobileRegionFields #countyPicker{margin-top:18px}
 .mobile-done{display:block;width:100%;min-height:46px;margin-top:20px;padding:10px 14px;border:1px solid var(--red);border-radius:10px;background:var(--red);color:var(--text);font-weight:750;font-size:13px}
 #mobileMenuView,#mobileMenuView nav{display:grid;gap:8px}#mobileMenuView[hidden]{display:none!important}#mobileMenuView a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:#242424;text-decoration:none;font-size:14px;font-weight:650}#mobileMenuView .download-cta{justify-content:center;background:var(--red);border-color:var(--red)}#mobileMenuView .home-link{display:flex}#mobileMenuView .analytics-settings{min-height:44px;text-align:left;font-size:12px;margin:4px 0 0}
 .mobile-dialog .score-intro h2{display:none}.mobile-dialog .score-intro p{font-size:13px;line-height:1.6}.mobile-dialog .score-intro .score-intro-lead{font-size:14px}.mobile-dialog .score-intro-steps{gap:16px;margin:20px 0}.mobile-dialog .score-intro-steps strong,.mobile-dialog .score-intro-tip strong{font-size:13px}
}
@media(max-height:500px) and (max-width:700px), (max-width:960px) and (max-height:500px) and (pointer:coarse){
 .topbar{top:calc(6px + env(safe-area-inset-top,0px));height:40px}.topbar .brand img{width:27px;height:27px}.mode-panel{top:calc(52px + env(safe-area-inset-top,0px))}.mode-switch button,.day-switch button{min-height:32px}.mobile-region-row button{min-height:34px}.forecast-heading{font-size:10px}.mobile-summary .main-value{font-size:27px}.mobile-summary .ride-window strong{font-size:16px}
}

@media(min-width:560px) and (max-width:700px) and (max-height:500px), (min-width:560px) and (max-width:960px) and (max-height:500px) and (pointer:coarse){
 .mode-panel{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.3fr)}.mode-switch{grid-column:1;grid-row:1}.mode-switch button{font-size:10px}.day-switch{grid-column:2;grid-row:1}.mobile-region-row{grid-column:3;grid-row:1}.forecast-heading,.mode-panel .weather-controls{grid-column:4;grid-row:1}.mode-panel:has(#dayControls[hidden]) .mode-switch{grid-column:1/3}
 .mapboxgl-ctrl-group{display:flex}.mapboxgl-ctrl-group button+button{border-top:0;border-left:1px solid var(--border)}.map-context{max-width:calc(100% - 100px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
 #legend{top:var(--map-controls-top,120px);right:calc(96px + env(safe-area-inset-right,0px));bottom:auto;max-width:190px;max-height:min(60dvh,calc(100dvh - var(--map-controls-top,120px) - 24px))}.map-context{max-width:calc(100% - 260px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
}
