/* Shared RideRelay design system. Feature styles define layout and data colours. */
:root{
 --section-gap:24px;
 --radius-card:20px;--radius-control:12px;--radius-pill:999px;--control-radius:12px;
 --surface-floating:rgba(255,255,255,.96);--glass-bg:rgba(255,255,255,.62);--glass-edge:rgba(220,220,220,.75);
 --shadow-card:0 1px 2px #00000003;--shadow-float:0 10px 28px #0000000d,0 2px 6px #00000005;
 --shadow-menu:0 18px 45px #00000016,0 3px 10px #00000008;--on-primary:#fff;
 --account-fill:#ECEEF0;--account-text:#30363B;--focus-ring:#0055aa;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 color:var(--text-primary);background:var(--background);line-height:1.5;
}
:root[data-theme=dark]{
 --surface-floating:rgba(26,26,26,.97);--glass-bg:rgba(26,26,26,.62);--glass-edge:rgba(75,75,75,.7);
 --shadow-card:0 1px 2px #00000016;--shadow-float:0 10px 30px #0005,0 2px 5px #0003;
 --shadow-menu:0 18px 45px #0007,0 3px 10px #0004;--on-primary:#111820;
 --account-fill:#34383C;--account-text:#F5F5F5;--focus-ring:#81B9F0;
}
body{background:var(--background);color:var(--text-primary)}
button,input,select,textarea{font-family:inherit}
:root,button,a,summary,input,select,textarea,.leaflet-container a{-webkit-tap-highlight-color:transparent}
:where(button,a,summary,input,select,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* Programmatically focused headings are announcement targets. */
:root :is(h1,h2,h3,h4,h5,h6)[tabindex]:focus{outline:none;box-shadow:none}
main{max-width:1240px;padding:16px 28px 64px;margin:auto;scroll-margin-top:100px}
#dashboard{display:block}.tab-content{width:100%;min-width:0}.tab{scroll-margin-top:100px}
h1{font-size:30px;font-weight:700;letter-spacing:-.8px;margin:0 0 24px}h2{font-weight:650;letter-spacing:-.25px}h3{font-weight:600}
.muted,dt,.ride-metric-label{color:var(--text-secondary)}
:is(.panel,.automation-layout .card){background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
:is(.panel,.automation-layout .card):not(.ride){padding:24px}
:is(.message,.route-setup,.route-point,.heatmap-timeline){background:var(--surface);border-radius:var(--radius-card)}
button,.button{border-radius:var(--radius-control);border-color:var(--border-subtle);background-color:var(--surface);color:var(--text-primary);font-weight:500;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s}
button:hover,.button:hover{border-color:var(--border-control);color:var(--text-primary);background-color:var(--surface-muted)}
button.primary,button.strava,.button.primary{border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);border-color:transparent;font-weight:600}
button.primary:is(:hover,:active),button.strava:is(:hover,:active),.button.primary:hover{background:var(--primary-hover);color:var(--on-primary);border-color:transparent;box-shadow:0 3px 10px #0055aa18}
button.quiet{background:transparent;border-color:transparent;color:var(--text-secondary)}button.quiet:hover{background:var(--surface-muted);color:var(--text-primary)}
input,select,textarea{color:var(--text-primary);background:var(--surface);border-color:var(--border-control);border-radius:var(--radius-control);accent-color:var(--primary)}
input::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:.75}
:root[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B0B0B0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
:is(.segmented,.gear-chart-tabs,.automation-modes){background:var(--surface-muted);border-radius:var(--radius-pill);padding:4px;gap:3px}
:is(.segmented,.gear-chart-tabs,.automation-modes)>button{border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);box-shadow:none}
:is(.segmented,.gear-chart-tabs)>button[aria-pressed=true],.automation-modes>button[aria-selected=true]{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px #0000000b}
.filter-pills button,.automation-chip,.town-chip{border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border-subtle)}
.filter-pills button[aria-pressed=true]{background:var(--selection-background);color:var(--primary);border-color:var(--primary)}
:is(.badge,.app-connection){border-radius:var(--radius-pill)}
:root[data-theme] :is(.gear-delete,.automation-danger){color:var(--error-text)!important}
:is(.gear-delete,.automation-danger):hover{background:var(--error-background)}
/* The top bar is shared by all pages, including the public privacy pages. */
.app-header{display:block;position:relative;max-width:none;margin:0;padding:0;height:92px;z-index:1100}
.topbar{position:fixed;z-index:1100;top:calc(12px + env(safe-area-inset-top,0px));left:16px;right:16px;max-width:1200px;margin:auto;height:58px;padding:6px 12px;display:flex;align-items:center;gap:12px;border:1px solid var(--glass-edge);border-radius:var(--radius-pill);background:var(--surface-floating);box-shadow:0 2px 8px #00000004;transition:background .2s,box-shadow .2s;isolation:isolate}
.app-header.scrolled .topbar{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow-float)}
.app-header .brand{flex:none;padding-inline-start:12px;gap:9px;font-size:20px;font-weight:680;letter-spacing:-.65px;white-space:nowrap;color:var(--text-primary)}.app-header .brand img{width:28px;height:28px}
#desktop-nav-slot{flex:1;min-width:0}#header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
#header-actions :is(.theme-toggle,#menu-toggle){display:flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:42px;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--text-primary)}
#header-actions :is(.theme-toggle,#menu-toggle):hover{background:var(--surface-muted)}#header-actions svg{display:block}
#main-nav{display:flex;align-items:stretch;flex-direction:column;gap:3px;padding:0;border:0;min-width:0}
#main-nav button{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:12px;font-size:15px;font-weight:500;white-space:normal;background:transparent;color:var(--text-secondary);text-align:left;box-shadow:none}
#main-nav button:hover{background:var(--surface-muted);color:var(--text-primary)}
#main-nav button[aria-current=page]{color:var(--primary);background:var(--selection-background)}
.connected-app-card>.heading{flex-wrap:wrap;gap:12px}.connected-app-card .app-identity{flex:1 1 170px}.connected-app-card .app-identity h3{min-width:0;overflow-wrap:anywhere}.connected-app-card .app-connection{flex:none}.app-ai-icon{display:grid;place-items:center;background:var(--selection-background);color:var(--primary)}.app-ai-icon svg{display:block;width:30px;height:30px}.connected-app-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.nav-group{position:relative;min-width:0}.nav-group-heading{display:flex}
#main-nav .nav-group-main{font-size:16px;min-height:46px}
.nav-submenu{position:static;min-width:0;padding:0 0 6px 18px;background:transparent;border:0;box-shadow:none}
#main-nav .nav-submenu button{width:100%;border-radius:12px;padding:10px 14px}
#account-switcher{display:block;position:relative;margin:0;flex:none;max-width:220px}#account-switcher>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:8px 15px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--account-fill);color:var(--account-text);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:0 1px 3px #0000000b}
#account-switcher>summary::-webkit-details-marker{display:none}#account-display{overflow:hidden;text-overflow:ellipsis}#account-switcher>summary svg{flex:none}
.account-popover{position:absolute;right:0;top:calc(100% + 12px);width:260px;max-width:calc(100vw - 32px);padding:8px;background:var(--surface-floating);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:18px;box-shadow:var(--shadow-menu)}
#header-account-options .account-option,.account-popover #logout{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 12px;font-size:14px;font-weight:400;background:transparent;border:0;border-radius:12px;text-align:left;color:var(--text-primary)}
#header-account-options .account-option[aria-current]{color:var(--primary);background:var(--selection-background)}#header-account-options .account-option:hover,.account-popover #logout:hover{background:var(--surface-muted)}.account-popover #logout{color:var(--text-secondary);margin-top:4px}
#mobile-menu{position:fixed;z-index:1090;top:calc(82px + env(safe-area-inset-top,0px));left:auto;right:16px;width:430px;max-width:calc(100% - 32px);max-height:calc(100dvh - 106px - env(safe-area-inset-top,0px));margin:0;padding:14px;border-radius:24px;border:1px solid var(--border-subtle);background:var(--surface-floating);box-shadow:var(--shadow-menu);overflow:auto;overscroll-behavior:contain}
#mobile-nav-slot #main-nav{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:0;border:0}
#mobile-nav-slot #main-nav>button,#mobile-nav-slot .nav-group-main{width:100%;min-height:46px;padding:11px 14px;font-size:16px}
#mobile-nav-slot .nav-submenu{position:static;box-shadow:none;border:0;background:transparent;padding:3px 0 6px 18px;min-width:0}
#mobile-nav-slot #main-nav .nav-submenu button{font-size:15px;min-height:44px;padding:10px 14px}
#mobile-account-slot{margin-top:12px}#mobile-account-slot #account-switcher{max-width:none;width:100%}#mobile-account-slot #account-switcher>summary{width:100%;min-height:46px;justify-content:space-between}
#mobile-account-slot .account-popover{position:static;width:100%;max-width:none;margin-top:8px;border:0;box-shadow:none;background:transparent;padding:0}
body.menu-open{position:fixed;width:100%;overflow:hidden}
/* All map chrome follows the theme. The OSM tile filter never reaches routes,
   aerial imagery, municipal polygons, radar tiles, markers or other data layers. */
.leaflet-container{background:var(--surface-muted);font-family:inherit}
.rr-osm-tiles{filter:none}
:root[data-theme=dark] .rr-osm-tiles,.weather-wind-mode:not(.rr-map-hybrid) .rr-osm-tiles{filter:grayscale(1) invert(1) brightness(.8) contrast(.9)}
.weather-wind-mode:not(.rr-map-hybrid) .leaflet-tile-pane{filter:none}
:is(.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-bar,.rr-map-layers,.rr-map-status,.route-map-clock,.heatmap-map-clock,.route-discovery,.rr-map-fullscreen-controls,.playback-speed-menu){background:var(--surface-floating);color:var(--text-primary);border-color:var(--border-subtle);box-shadow:var(--shadow-float)}
.leaflet-bar a,.leaflet-bar button,.rr-map-tools button{background:var(--surface);color:var(--text-primary);border-color:var(--border-subtle)}
.leaflet-bar a:hover,.leaflet-bar button:hover,.rr-map-tools button:hover{background:var(--surface-muted);color:var(--primary)}
.leaflet-popup a.leaflet-popup-close-button{color:var(--text-secondary)}.leaflet-popup-content{color:var(--text-primary)}
.leaflet-control-attribution,.dashboard-osm .leaflet-control-attribution{background:var(--surface-floating)!important;color:var(--text-secondary)}
.rr-map-fullscreen{background:var(--background);color:var(--text-primary)}
.route-map-clock button,.heatmap-map-clock button{background:#0055AA;color:#fff}.route-map-clock button:hover,.heatmap-map-clock button:hover{background:#004488;color:#fff}
.weather-wind-mode .route-map-clock{background:var(--surface-floating);color:var(--text-primary);border-color:var(--border-subtle)}
:is(.map-wrap,.route-map-frame){border-radius:var(--radius-card);border:1px solid var(--border-subtle)}
:root[data-theme=dark] :is(.gear-bar-track,.gear-chart-track,.automation-token-row,.automation-summary-chip,.automation-match){background:var(--surface-muted);border-color:var(--border-subtle)}
:root[data-theme=dark] :is(.gear-selection-clear,.route-discovery summary,.route-discovery){color:var(--text-primary)}
:root[data-theme=dark] .automation-confirm{background:var(--surface);color:var(--text-primary)}
/* Roomier layouts on large screens, compact controls and surfaces on phones. */
@media(min-width:1101px){.app-header .topbar{gap:10px}}
@media(min-width:768px){
 #desktop-nav-slot #main-nav{flex-direction:row;align-items:center;justify-content:center;gap:2px}
 #desktop-nav-slot #main-nav>button,#desktop-nav-slot #main-nav .nav-group-main{width:auto;min-height:44px;padding:8px 10px;font-size:14px;white-space:nowrap;border-radius:var(--radius-pill)}
 #desktop-nav-slot .nav-submenu{display:none;position:absolute;top:calc(100% - 1px);left:0;min-width:210px;padding:8px;background:var(--surface-floating);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:var(--shadow-menu);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
 #desktop-nav-slot .nav-group:last-child>.nav-submenu{left:auto;right:0}
 #desktop-nav-slot .nav-expanded>.nav-submenu{display:block}
 #desktop-nav-slot .nav-group:has([aria-current=page]) .nav-group-main{color:var(--primary)}
 #desktop-nav-slot #main-nav .nav-submenu button{min-height:44px;font-size:14px;white-space:nowrap}
 #header-actions #menu-toggle{display:none}
 #account-switcher{max-width:160px}
}
@media(min-width:768px) and (max-width:1099px){
 .app-header:has(#main-nav:not([hidden])){height:138px}
 .topbar:has(#main-nav:not([hidden])){height:106px;display:grid;grid-template-columns:minmax(0,1fr) auto;border-radius:28px;gap:0 12px}
 .topbar:has(#main-nav:not([hidden])) #desktop-nav-slot{grid-column:1/-1;grid-row:2;align-self:start}
 .topbar:has(#main-nav:not([hidden])) #header-actions{grid-column:2;grid-row:1}
 #desktop-nav-slot #main-nav{justify-content:space-evenly}
}
@media(max-width:767px){#desktop-nav-slot{display:none}.app-header{height:88px}.topbar{left:16px;right:16px}.app-header .brand{font-size:20px}}
@media(max-width:600px){
 .app-header{height:calc(86px + env(safe-area-inset-top,0px))}.topbar{left:12px;right:12px;padding-inline:12px;height:56px;gap:6px}
 .app-header .brand{font-size:19px;gap:8px}.app-header .brand img{width:28px;height:28px}#header-actions{gap:2px}
 main{padding:10px 16px 40px}h1{font-size:28px;margin-bottom:22px}
 :is(.panel,.automation-layout .card):not(.ride){padding:20px}.panel.ride{padding:0}
 #mobile-menu{left:12px;right:12px;width:auto;max-width:none;padding:12px;border-radius:22px}
 .privacy-page{padding:10px 16px 40px}.privacy-back{font-size:12px;max-width:95px}.app-header .privacy-back{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){button,.button,.topbar{transition:none}}
#mobile-menu{bottom:auto;height:auto}
:root .panel.dashboard-latest{padding:0}:root .panel.dashboard-planned{padding:14px 18px}
:root .ride-analysis .panel{background:var(--surface);border-color:var(--border-subtle);box-shadow:var(--shadow-card)}
:root[data-theme=dark] .dashboard-route{background:var(--surface-muted)}
:root[data-theme=dark] .dashboard-osm .leaflet-tile-pane{filter:none}
body:has(.rr-map-fullscreen[open]) .app-header{visibility:hidden}
.app-header>.topbar>.theme-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:10px;border:0;border-radius:50%;background:transparent;flex:none;color:var(--text-primary)}
@media(max-width:600px){:root .panel.dashboard-planned{padding:12px 14px}}
.app-header{border:0;background:transparent;box-shadow:none}
:root[data-theme=dark] .app-header .brand{color:#fff}
:root[data-theme=dark] .app-header .brand img{filter:brightness(1.7) saturate(.9)}
:root[data-theme=dark] .ride-wahoo img{filter:brightness(0) invert(1)}
#dashboard button:is(.primary,.strava),#login-panel button.strava{border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);border-color:transparent}
#dashboard button:is(.primary,.strava):hover,#login-panel button.strava:hover{background:var(--primary-hover);color:var(--on-primary)}
#dashboard :is(.segmented,.gear-chart-tabs,.automation-modes)>button{border-radius:var(--radius-pill)}
:is(.automation-heading,.gear-page-heading)>h1{margin:0}:is(.automation-heading,.gear-page-heading){align-items:center;margin-bottom:24px}
.automation-layout .card{margin:0}.automation-rule-list{display:grid;gap:16px}.automation-layout{gap:var(--section-gap)}
#header-actions :is(.theme-toggle,#menu-toggle),.app-header>.topbar>.theme-toggle{width:44px;height:44px;min-height:44px}
@media(pointer:coarse){#main-nav button{min-height:44px}}
.account-grid{grid-template-columns:minmax(0,1fr);gap:var(--section-gap)}.account-grid>.panel{grid-column:auto}
:root #tab-settings :is(.account-accounts,.account-preferences,.account-connections)>h2{margin:0 0 20px;font-size:18px;line-height:1.3}
:root #tab-settings .account-map-options{grid-template-columns:1fr;gap:16px}
:root #tab-settings .account-map-options h3{margin:0 0 8px;font-size:14px;line-height:1.5}
:root .segmented.compact-choice{display:inline-flex;width:auto;max-width:100%;margin:0;padding:3px;gap:2px}
:root .segmented.compact-choice>button{position:relative;flex:0 0 auto;min-height:30px;height:30px;padding:4px 10px;font-size:13px;line-height:20px;white-space:nowrap}
:root .segmented.compact-choice>button::after{content:'';position:absolute;inset:-7px 0}
:root #tab-settings .account-preference-note{margin:12px 0 0;font-size:12px}
:root #tab-settings .account-connections .app-grid{display:block}
:root #tab-settings .connected-app-card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
:root #tab-settings .connected-app-card+.connected-app-card{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-subtle)}
:root #tab-settings .connected-app-card h3{margin:0;font-size:17px;line-height:1.3}

@media(min-width:800px){.account-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
/* Bike selection shares the Lijst/Kaart and Automatisch/Bulk tab component. */
:root #tab-gear #gear-bikes{display:flex;flex-wrap:nowrap;gap:3px;width:fit-content;max-width:100%;min-width:0;margin:0 0 20px;padding:4px;border:0;overflow-x:auto}
:root #tab-gear #gear-bikes .gear-bike{flex:0 0 auto;min-width:0;max-width:100%;width:auto;border-radius:var(--radius-pill);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root #tab-gear .gear-identity-default{margin-top:16px}
:root #tab-gear .gear-identity-default>label{display:flex;flex-direction:column;gap:6px;font-size:13px}
@media(max-width:760px){:root #tab-gear #gear-bikes{width:100%}:root #tab-gear #gear-bikes .gear-bike{flex:1 0 auto}}
.power-peak{background:var(--selection-background);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-card)}.power-peak a{color:var(--primary)}.power-peak small{color:var(--text-secondary)}
.rr-map-tools>button[aria-pressed=true]{color:var(--primary)}.rr-map-tools>button+button{border-top-color:var(--border-subtle)}
.route-map-clock>button,.heatmap-map-clock>button{background:var(--primary);color:var(--on-primary)}
.route-map-clock>button:not(:disabled):is(:hover,:active,:focus-visible){background:var(--primary-hover);color:var(--on-primary)}
.route-map-clock .playback-speed-menu button[aria-checked=true]{background:var(--primary);color:var(--on-primary)}
.route-map-clock .playback-speed-menu button:not(:disabled):is(:hover,:active,:focus-visible){background:var(--primary-hover);color:var(--on-primary)}
/* Location symbols retain their category colours and white contrast disks. */
.route-poi-marker{--primary:#0055AA;background:#fff}.bikepacking-cluster{background:#fff}
:root{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
.topbar{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px))}
main{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
@media(max-width:600px){.topbar{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px))}main,.privacy-page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}

.account-popover,#mobile-menu{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.app-header .privacy-back{margin-left:auto}
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:var(--radius-control);border-color:var(--border-control)}
.privacy-language a{border-radius:var(--radius-pill)}

/* Touch headings reserve the pointer stream for hold-and-slide selection. */
#main-nav button,#menu-toggle{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#main-nav.nav-touch-selecting button[aria-current=page]:not(.nav-touch-target){background:transparent;color:var(--text-secondary)}
#main-nav button.nav-touch-target{background:var(--selection-background);color:var(--primary)}
#account-switcher>summary{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#account-switcher .account-option.nav-touch-target{background:var(--selection-background);color:var(--primary)}

/* One geometry and surface for controls on every interactive map. */
:root{--map-control-size:40px;--map-control-icon:20px;--map-control-radius:8px;--map-control-gap:10px}
.leaflet-container .leaflet-bar{border:1px solid var(--border-subtle);border-radius:var(--map-control-radius);box-shadow:var(--shadow-float);background:var(--surface-floating)}
.leaflet-container :is(.rr-map-tools>button,.leaflet-control-zoom.leaflet-bar a){box-sizing:border-box;width:var(--map-control-size);height:var(--map-control-size);min-width:var(--map-control-size);min-height:var(--map-control-size);padding:0;line-height:var(--map-control-size);display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:var(--surface-floating);color:var(--text-primary);font-weight:500}
.leaflet-container :is(.rr-map-tools>button+button,.leaflet-control-zoom.leaflet-bar a+a){border-top:1px solid var(--border-subtle)}
.leaflet-container :is(.rr-map-tools>button,.leaflet-control-zoom.leaflet-bar a):first-child{border-radius:calc(var(--map-control-radius) - 1px) calc(var(--map-control-radius) - 1px) 0 0}
.leaflet-container :is(.rr-map-tools>button,.leaflet-control-zoom.leaflet-bar a):last-of-type{border-radius:0 0 calc(var(--map-control-radius) - 1px) calc(var(--map-control-radius) - 1px)}
.leaflet-container :is(.rr-map-tools>button,.leaflet-control-zoom.leaflet-bar a):hover{background:var(--surface-muted);color:var(--primary)}
.leaflet-container .rr-map-tools>button[aria-pressed=true]{color:var(--primary)}
.leaflet-container :is(.rr-map-tools,.leaflet-control-zoom) svg{display:block;width:var(--map-control-icon);height:var(--map-control-icon);margin:auto}
.leaflet-container .map-fit{box-sizing:border-box;position:static;display:block;width:auto;height:var(--map-control-size);min-height:var(--map-control-size);padding:0 12px;margin:0;border:1px solid var(--border-subtle);border-radius:var(--map-control-radius);background:var(--surface-floating);color:var(--text-primary);box-shadow:var(--shadow-float);font-family:inherit;font-size:13px;font-weight:500;line-height:20px;white-space:nowrap}
.leaflet-container .map-fit:hover{background:var(--surface-muted);color:var(--primary)}
.leaflet-container .town-map-options{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.leaflet-container .town-map-options #municipal-track-status:not(:empty){margin:6px 0 0;padding:8px 12px;background:var(--surface-floating);border:1px solid var(--border-subtle);border-radius:var(--map-control-radius)}
.leaflet-container .route-extras{box-sizing:border-box;padding:0;border:1px solid var(--border-subtle);border-radius:var(--map-control-radius);background:var(--surface-floating);color:var(--text-primary);box-shadow:var(--shadow-float)}
.leaflet-container .route-extras>summary{box-sizing:border-box;height:calc(var(--map-control-size) - 2px);min-height:calc(var(--map-control-size) - 2px);padding:0 12px;font-size:13px;font-weight:500;line-height:calc(var(--map-control-size) - 2px);white-space:nowrap}
.leaflet-container .route-extras[open]>:not(summary){margin-left:12px;margin-right:12px}
.leaflet-container :is(.route-map-clock,.heatmap-map-clock){height:var(--map-control-size);min-height:var(--map-control-size);border-radius:var(--map-control-radius);box-shadow:var(--shadow-float)}
.leaflet-container :is(.route-map-clock,.heatmap-map-clock)>button{box-sizing:border-box;flex:0 0 var(--map-control-size);width:var(--map-control-size);height:var(--map-control-size);min-width:var(--map-control-size);min-height:var(--map-control-size);padding:0;border-radius:var(--map-control-radius)}
.leaflet-container :is(.route-map-clock,.heatmap-map-clock)>button svg{width:var(--map-control-icon);height:var(--map-control-icon)}
/* Attribution sits against the bottom edge; fullscreen has no tall safe-area filler. */
.leaflet-container .leaflet-bottom,.rr-map-fullscreen .leaflet-bottom{bottom:0}
.leaflet-container .leaflet-control-attribution{margin:0!important;border:0;border-radius:0;box-shadow:none;padding:2px 5px;max-width:100%;font-size:10px;line-height:14px}
.rr-map-fullscreen .leaflet-bottom.leaflet-right{right:0}
.rr-map-fullscreen .leaflet-control-attribution{padding:1px 4px;font-size:9px;line-height:12px}
.rr-map-fullscreen .leaflet-bottom .rr-map-tools{margin-right:calc(var(--map-control-gap) + env(safe-area-inset-right,0px));margin-bottom:var(--map-control-gap)}

.leaflet-container .map-fit.leaflet-control{margin:var(--map-control-gap) var(--map-control-gap) 0 0}

.leaflet-container .leaflet-bottom.leaflet-right{max-width:100%}
.leaflet-container .leaflet-bottom.leaflet-left :is(.route-map-clock,.heatmap-map-clock){margin-bottom:calc(var(--map-attribution-height,16px) + var(--map-control-gap))}
.leaflet-container .playback-speed-menu{grid-template-columns:repeat(4,var(--map-control-size))}
.leaflet-container .playback-speed-menu button{width:var(--map-control-size);height:var(--map-control-size);min-height:var(--map-control-size);border-radius:var(--map-control-radius)}
.leaflet-container .rr-map-layers{border-radius:var(--map-control-radius)}
:is(.map-wrap,.route-map-frame) .leaflet-control-attribution{padding-inline:12px}
/* One compact entry point for recording relationships across providers. */
.ride-entry .ride-open{gap:10px;padding:18px 20px}.ride-entry .ride-open .ride-preview{padding:0;cursor:inherit;font-variant-numeric:tabular-nums}
.ride-entry .ride-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px 8px;min-width:0;min-height:44px}
.ride-entry .ride-open .ride-date{min-width:0;margin:0;overflow-wrap:anywhere}
.ride-source-slot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;min-width:0}.ride-source-label{font-size:12px;font-weight:400;line-height:1.4}
.ride-entry .ride-source-control{position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;width:auto;min-width:44px;height:44px;min-height:44px;margin:0;padding:0 2px;border:0;border-radius:0;background:transparent;color:var(--text-secondary);box-shadow:none;vertical-align:middle}
.ride-entry button.ride-source-control:hover{background:transparent;border:0;box-shadow:none;color:var(--text-primary)}
.ride-entry .ride-source-control .ride-provider-mark{flex:0 0 38px;width:38px;height:18px;min-height:0;padding:0;border-radius:0}
.ride-source-status{display:flex;align-items:center;justify-content:center;width:18px;height:18px}
.ride-source-status svg{display:block;width:18px;height:18px}
@media(max-width:760px){.ride-entry .ride-open{padding:16px}.ride-entry .ride-meta-row{padding-inline:16px}}

body.ride-links-open{overflow:hidden}.ride-links-dialog{box-sizing:border-box;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--border-subtle);border-radius:24px;background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-menu);overflow:auto;overscroll-behavior:contain}.ride-links-dialog::backdrop{background:#0006;backdrop-filter:blur(3px)}
.ride-links-dialog>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--surface);border:0;flex-wrap:nowrap}.ride-links-dialog h2{font-size:20px;margin:0}.ride-links-dialog h3{font-size:14px;margin:0;font-weight:600}.ride-links-body{padding:0 20px 20px;display:grid;gap:20px}.ride-links-body section{display:grid;gap:10px}.ride-links-body p{margin:0;font-size:14px}.ride-links-body small{display:block;font-size:12px;line-height:1.5}.ride-links-body strong{font-size:14px;font-weight:550;overflow-wrap:anywhere}.ride-links-context{display:flex;gap:8px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--border-subtle)}
.ride-links-dialog .ride-link-icon{display:flex;align-items:center;justify-content:center;flex:none;width:40px;min-height:40px;padding:10px;border:0;background:transparent;color:var(--text-secondary);border-radius:50%;box-shadow:none}.ride-links-dialog .ride-link-icon:hover{background:var(--surface-muted)}.ride-link-row{display:flex;align-items:center;gap:6px;min-width:0}.ride-links-dialog .ride-link-description{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:8px 0;text-align:left;border:0;background:transparent;color:var(--text-primary);box-shadow:none}.ride-links-dialog button.ride-link-description:hover{color:var(--primary)}.ride-link-provider{color:var(--strava);display:flex;align-items:center;justify-content:center;flex:none;width:42px}.ride-link-provider svg,.ride-link-provider img{display:block;max-width:42px;max-height:24px}:root[data-theme=dark] .ride-link-provider img{filter:brightness(0) invert(1)}
.ride-link-search-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.ride-link-search-head input{min-width:0;width:145px;padding:7px 8px;font-size:13px;min-height:36px}.ride-link-list{border:0;padding:0;margin:0;min-width:0;display:grid;gap:4px}.ride-link-choice{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer}.ride-link-choice input{width:18px;height:18px;flex:none;margin:0}.ride-link-choice:has(input:disabled){opacity:.6}.ride-links-dialog .ride-link-more{justify-self:start;padding:4px 0;min-height:36px;border:0;background:transparent;font-size:13px;color:var(--primary);box-shadow:none}.ride-links-dialog .ride-link-remove{color:var(--error-text);background:transparent;border:0;box-shadow:none}.ride-link-confirm{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;width:100%;font-size:13px;padding:8px 0}.ride-link-confirm>span:first-child{width:100%}.ride-link-confirm button{display:flex;align-items:center;gap:6px;padding:6px 10px;min-height:36px;font-size:13px}.ride-link-status{font-size:13px;color:var(--text-secondary)}
@media(max-width:600px){.ride-links-dialog{width:100%;max-width:none;max-height:85dvh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}.ride-links-body{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}}

.ride-link-timeline{display:grid;gap:7px}.ride-link-timeline-labels{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.ride-link-timeline-labels>span:last-child{text-align:right}.ride-link-timeline-bar{display:flex;height:8px;overflow:hidden;border-radius:999px;background:var(--border-control)}.ride-link-timeline-bar>span{height:100%;flex:none}.ride-link-timeline-bar .is-linked{background:var(--primary)}.ride-link-timeline-bar .is-free{background:var(--border-control)}


.wahoo-sharing{display:grid;gap:8px;margin-top:16px;font-size:13px}.wahoo-sharing>span{color:var(--text-secondary)}.wahoo-sharing label{display:flex;align-items:center;gap:10px;min-height:36px}.wahoo-sharing input{width:18px;height:18px;margin:0}

/* Summary and map share one surface, with only the outer corners rounded. */
.map-card{margin-bottom:var(--section-gap);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-float);overflow:hidden}
.map-card-header{padding:20px 24px 18px}
.map-card-header .town-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;margin:0}
.map-card-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.map-card-stat>strong{font-size:28px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.map-card-stat>span{font-size:13px;color:var(--text-secondary)}
.map-card-header .town-progress>.town-percent{font-size:24px;line-height:1.2;margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.map-card-header .town-progress-track{grid-column:1/-1;background:var(--surface-muted)}
.map-card-header .town-progress-track progress,.map-card-header .town-progress-track progress::-webkit-progress-bar{background:var(--surface-muted)}
.map-card-header :is(.town-projection,#municipal-status){margin:12px 0 0}
.map-card-header #municipal-status:empty{display:none}
.map-card>.map-wrap{margin:0;border:0;border-radius:0}
@media(max-width:480px){.map-card-header{padding:16px 18px}.map-card-header .town-progress{gap:12px}.map-card-stat>strong{font-size:24px}.map-card-header .town-progress>.town-percent{font-size:23px}.map-card-stat>span{font-size:12px}}

/* Shared form controls and action buttons. Data visualizations and map tools keep their own geometry. */
:root{--field-fill:#F3F4F5;--field-active:#FFFFFF;--field-edge:#E1E3E6;--field-focus:#17191B;--action-hover:#E8EAED;--form-height:40px;--form-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626A72' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme=dark]{--field-fill:#272A2D;--field-active:#34383C;--field-edge:#41464B;--field-focus:#F5F5F5;--action-hover:#34383C;--form-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B0B0B0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
:root :is(#dashboard,#login-panel,dialog) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),select,textarea){box-sizing:border-box;appearance:none;-webkit-appearance:none;height:var(--form-height);min-height:var(--form-height);padding:8px 12px;border:1px solid var(--field-edge);border-radius:12px;background-color:var(--field-fill);color:var(--text-primary);font:inherit;font-size:16px;line-height:22px;box-shadow:none;transition:background-color .15s,border-color .15s,box-shadow .15s}
:root :is(#dashboard,#login-panel,dialog) select:not([multiple]){appearance:none;padding-right:36px;background-image:var(--form-chevron);background-size:16px;background-position:right 12px center;background-repeat:no-repeat}
:root :is(#dashboard,#login-panel,dialog) textarea{height:auto;min-height:104px;resize:vertical}
:root :is(#dashboard,#login-panel,dialog) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]):not([type=file]),select,textarea):focus{outline:0;border-color:var(--field-focus);background-color:var(--field-active);box-shadow:inset 0 0 0 1px var(--field-focus)}
:root :is(#dashboard,#login-panel,dialog) :is(input,select,textarea):is([aria-invalid=true],:user-invalid){border-color:var(--error-text)}
:root :is(#dashboard,#login-panel,dialog) :is(input,select,textarea):is([aria-invalid=true],:user-invalid):focus{box-shadow:inset 0 0 0 1px var(--error-text)}
:root :is(#dashboard,#login-panel,dialog) label{font-size:13px;font-weight:400}
:root :is(#dashboard,#login-panel,dialog) label:has(input:is([type=checkbox],[type=radio])){font-size:14px}
:root :is(#dashboard,#login-panel,dialog) .ui-action{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--form-height);height:auto;padding:8px 10px;border:1px solid var(--field-edge);border-radius:12px;background:var(--field-fill);color:var(--text-primary);font:inherit;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;box-shadow:none;cursor:pointer;vertical-align:middle;max-width:100%}
:root :is(#dashboard,#login-panel,dialog) .ui-action:hover{background:var(--action-hover);border-color:var(--border-control);color:var(--text-primary);box-shadow:none}
:root :is(#dashboard,#login-panel,dialog) .ui-action:focus-visible{outline:2px solid var(--field-focus);outline-offset:2px}
:root :is(#dashboard,#login-panel,dialog) .ui-action:is(.primary,.strava){background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:500}
:root :is(#dashboard,#login-panel,dialog) .ui-action:is(.primary,.strava):hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
:root :is(#dashboard,#login-panel,dialog) .ui-action.ui-danger{background:var(--error-background);border-color:color-mix(in srgb,var(--error-text) 24%,transparent);color:var(--error-text);text-decoration:none}
:root :is(#dashboard,#login-panel,dialog) .ui-action.ui-danger:hover{background:color-mix(in srgb,var(--error-text) 16%,var(--surface));border-color:var(--error-text);color:var(--error-text)}
:root :is(#dashboard,#login-panel,dialog) .ui-action:disabled{cursor:default;opacity:.5}
:root :is(#dashboard,#login-panel,dialog) .ui-action.ui-icon{flex:0 0 var(--form-height);width:var(--form-height);height:var(--form-height);padding:0}
.ui-action svg,.ui-action-icon{display:block;width:18px;height:18px;flex:none;pointer-events:none}
:root #dashboard :is(#route-reverse,#works-refresh).ui-action{flex:0 0 var(--form-height);width:var(--form-height);height:var(--form-height);min-height:var(--form-height);padding:0;border:1px solid var(--field-edge);background:var(--field-fill);color:var(--text-primary)}
:root #dashboard :is(#route-reverse,#works-refresh).ui-action:hover{background:var(--action-hover);border-color:var(--border-control)}
:root #dashboard #route-reverse.ui-action[aria-pressed=true]{background:var(--selection-background);border-color:var(--primary);color:var(--primary)}
:root #dashboard .route-picker>div{gap:8px}
:root #dashboard .account-source-footer{gap:8px}
:root #dashboard .account-management>summary.ui-action{width:max-content;max-width:100%}
:root #dashboard .account-access-row .ui-action{flex-shrink:0}
@media(pointer:coarse),(max-width:600px){:root{--form-height:44px}}
@media(prefers-reduced-motion:reduce){:root :is(input,select,textarea){transition:none}}
:root :is(#dashboard,#login-panel,dialog) .ui-action[aria-pressed=true]:not(.primary):not(.strava){background:var(--selection-background);border-color:var(--primary);color:var(--primary)}
:root #dashboard .works-date-field>span{font-size:13px;font-weight:400}

:root :is(#dashboard,#login-panel,dialog) .ui-disclosure::after{content:'';display:block;flex:none;width:6px;height:6px;margin-left:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
:root :is(#dashboard,#login-panel,dialog) details[open]>.ui-disclosure::after{transform:translateY(2px) rotate(225deg)}
:root :is(#dashboard,#login-panel,dialog) .ui-action:not(.primary):not(.strava){font-size:13px}

/* Action hierarchy. See docs/ui-controls.md. Compact surfaces sit inside a
   44px touch target on touchscreens, keeping small actions easy to hit. */
:root{--action-small-height:30px;--action-small-radius:9px;--action-small-icon:16px;--action-title-size:32px;--action-danger-fill:color-mix(in srgb,var(--error-text) 4%,var(--surface))}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=compact]{position:relative;isolation:isolate;min-height:var(--action-small-height);height:auto;width:auto;max-width:100%;flex:0 0 auto;padding:4px 9px;border-radius:var(--action-small-radius);font-size:13px;line-height:20px;background:var(--field-fill);border-color:var(--field-edge);color:var(--text-primary)}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=compact]:hover{background:var(--action-hover);border-color:var(--border-control)}
:root :is(#dashboard,#login-panel,dialog) .ui-action.ui-danger[data-ui-variant=compact]{background:var(--action-danger-fill);border-color:color-mix(in srgb,var(--error-text) 15%,transparent);color:var(--error-text)}
:root :is(#dashboard,#login-panel,dialog) .ui-action.ui-danger[data-ui-variant=compact]:hover{background:var(--error-background);border-color:color-mix(in srgb,var(--error-text) 35%,transparent)}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=title]{position:relative;isolation:isolate;flex:0 0 var(--action-title-size);min-width:var(--action-title-size);width:var(--action-title-size);height:var(--action-title-size);min-height:var(--action-title-size);padding:0;border-radius:var(--action-small-radius)}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=inline]{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:var(--action-small-radius);background:transparent;color:var(--error-text)}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=inline]:hover{background:var(--action-danger-fill);border-color:transparent;color:var(--error-text)}
:root :is(#dashboard,#login-panel,dialog) .ui-action:is([data-ui-variant=compact],[data-ui-variant=title],[data-ui-variant=inline]) :is(svg,.ui-action-icon){width:var(--action-small-icon);height:var(--action-small-icon);flex:0 0 var(--action-small-icon)}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=confirm]{min-height:var(--form-height);padding:8px 14px;background:var(--error-text);border-color:var(--error-text);color:var(--surface)}
:root[data-theme] :is(#dashboard,#login-panel,dialog) .ui-action.automation-danger[data-ui-variant=confirm]{color:var(--surface)!important}
:root :is(#dashboard,#login-panel,dialog) .ui-action[data-ui-variant=confirm]:hover{background:color-mix(in srgb,var(--error-text) 85%,#000);color:var(--surface)}
:root #dashboard :is(.account-source-footer,.account-sync .actions,.account-access-row){row-gap:14px}
:root #dashboard .town-route-actions #municipal-reload-routes{width:auto;justify-self:start}
@media(pointer:coarse),(max-width:600px){
 :root :is(#dashboard,#login-panel,dialog) .ui-action:is([data-ui-variant=compact],[data-ui-variant=title])::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%);border-radius:inherit}
}

/* Planned routes are separate cards, keyed to the same colour as their map line. */
:root #municipal-plan-routes{display:grid;gap:14px;margin:16px 0}
:root #municipal-plan-routes .town-plan-card{padding:14px 14px 14px 16px;border:1px solid var(--border-subtle);border-left:4px solid var(--route-colour);border-radius:14px;background:color-mix(in srgb,var(--route-colour) 3%,var(--surface));min-width:0}
:root #municipal-plan-routes .town-plan-card>.heading{align-items:flex-start;flex-wrap:nowrap;gap:10px;margin:0}
:root #municipal-plan-routes .town-plan-name{border:0;padding:0;min-width:0;flex:1;font-size:15px;line-height:1.45}
:root #municipal-plan-routes .town-plan-card>.muted{font-size:13px;line-height:1.6;margin:8px 0 12px}
:root #municipal-plan-routes .town-plan-chips:empty{display:none}
:root #municipal-plan-routes .town-plan-card>.muted:last-child{margin-bottom:0}
/* A municipality is a plain list row. Keep its name and note left aligned. */
:root #municipal-list>li{margin:0;padding:0;border-bottom:1px solid var(--border-subtle)}
:root #municipal-list .town-list-link{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(90px,1fr);align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 0;background:transparent;border:0;border-radius:0;color:var(--text-primary);text-align:left;text-decoration:none;font-size:13px;line-height:1.5;box-sizing:border-box}
:root #municipal-list .town-list-link>span{min-width:0;text-align:left;overflow-wrap:normal;word-break:normal}
:root #municipal-list .town-list-link>.muted{display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;font-size:12px}
:root #municipal-list .town-list-link:hover>span:first-child{color:var(--primary);text-decoration:underline}
:root #municipal-list .town-list-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Personal Garmin connection uses the same account controls as Wahoo. */
#garmin-key-submit-form{display:grid;gap:12px;margin:12px 0 16px;max-width:480px}#garmin-api-key{width:100%;min-width:0}#garmin-key-submit-form button{justify-self:start}#garmin-key-form{margin:12px 0}#garmin-panel>.actions{flex-wrap:wrap}#garmin-panel .app-icon{filter:none;opacity:1}#garmin-panel h3{color:var(--text-primary)}

:root .garmin-mark{border-radius:5px}
:root .ride-provider-mark .garmin-mark,:root #ride-wahoo-open .garmin-mark{width:24px;height:24px;object-fit:contain;filter:none}:root #ride-wahoo-open:has(.garmin-mark){width:auto;flex-basis:auto;min-width:32px;gap:4px}

/* Dashboard navigation keeps a full touch target within compact visual controls. */
:root #dashboard :is(.dashboard-ride-actions,.dashboard-goal)>button.ui-action[data-ui-variant=compact]{min-height:44px;height:auto}