/* Any-size 16:9 desktop workstation UI (1366x768 → 4K, fluid scaling):
   split-pane session workbench, pinned right-side map + graphs,
   semantic metric color coding, inline micro-bars.
   Dark M3 square-corner system preserved. Zero external deps.
   Desktop-only: no mobile breakpoints, layout scales down via fluid
   minmax() columns + vh heights instead of collapsing. */
details.card{padding:0}
details.card>summary.card-head,.telemetry-head{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.95rem;font-weight:600;border-bottom:1px solid #0000}
details.card>summary.card-head{cursor:pointer}
details.card[open]>summary.card-head,.telemetry-head{border-bottom-color:var(--bd);background:var(--s2)}
details.card>summary.card-head::-webkit-details-marker{display:none}
details.card>summary.card-head::after{content:"+";margin-left:auto;color:var(--t);font-weight:700}
details.card[open]>summary.card-head::after{content:"–"}
details.card>summary.card-head:focus-visible{outline:2px solid var(--p);outline-offset:2px}
details.card>.card-body,.telemetry-card>.card-body{padding:10px 12px}
details.card>.card-body>.muted:first-child{margin-top:0}
.telemetry-card{padding:0;display:flex;flex-direction:column;min-height:0}
.telemetry-head{justify-content:space-between}
.telemetry-tools{margin:0}
.card-compact{padding:10px 12px}
.card-compact h2{font-size:.95rem;margin:0 0 4px}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0}
.toolbar .btn{padding:4px 9px;font-size:.84rem}
.toolbar .sep{width:1px;height:18px;background:var(--bd)}
.form-compact{display:grid;gap:8px;padding:10px}
.form-compact label{display:grid;gap:4px;font-size:.86rem}
.form-compact.cols-2{grid-template-columns:1fr 1fr}
.form-compact.cols-3{grid-template-columns:1fr 1fr 1fr}
.page-head h1{font-size:1.25rem}
.page-head{margin-bottom:8px}
.badge-row{margin:6px 0 0;gap:6px}
.empty-state{padding:14px 12px}
.empty-state .empty-icon{display:none}
.comment .media-list{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.comment .media-list img{width:96px;height:96px}
dl.kv.compact{grid-template-columns:auto 1fr;gap:2px 10px;font-size:.86rem}
label .ms-icon-sm,dt .ms-icon-sm,summary .ms-icon-sm,h2 .ms-icon-sm,h3 .ms-icon-sm{vertical-align:-4px}
.uplot-mount{min-height:150px}
.meta-grid{display:grid;gap:4px 12px;font-size:.86rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cal-day{min-height:56px}
.feed-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Session Split-Screen Workbench (fluid 16:9: 1366x768 → 4K): Left scrollable
   analysis, Right pinned map + graphs. Column minimums fit ~1024px windows;
   wider screens grow by fr share, capped by .container. */
.session-workbench{display:grid;grid-template-columns:minmax(340px,44fr) minmax(420px,56fr);gap:clamp(8px,1vw,14px);align-items:start}
.workbench-left{display:grid;gap:10px;min-width:0}
.workbench-right{position:sticky;top:10px;height:calc(100vh - 20px);display:grid;grid-template-rows:minmax(260px,1fr) minmax(280px,1fr);gap:10px;min-width:0}
.workbench-right .telemetry-card>.card-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:8px 10px}
.workbench-right .map-box{flex:1;height:100%;min-height:220px}
.workbench-right #series-chart{display:flex;flex-direction:column;flex:1;min-height:0}
.workbench-right .series-stage{flex:1;min-height:190px}

/* Fullscreen performance graph: Fullscreen API target is the telemetry card. */
.telemetry-card:fullscreen{background:var(--bg);width:100vw;height:100vh;padding:12px;gap:10px;overflow:auto}
.telemetry-card:fullscreen .card-body{flex:1;min-height:0;width:100%;padding:8px 10px}
.telemetry-card:fullscreen #series-chart{width:100%;flex:1;min-height:0}
.telemetry-card:fullscreen .series-stage{flex:1;min-height:0;width:100%}
.telemetry-card:fullscreen .uplot{max-width:none}
.telemetry-card.is-fullscreen-fallback{position:fixed;inset:0;z-index:80;background:var(--bg);width:100vw;height:100vh;padding:12px;gap:10px;overflow:auto}
.telemetry-card.is-fullscreen-fallback .card-body{flex:1;min-height:0;width:100%}
.telemetry-card.is-fullscreen-fallback #series-chart{width:100%;flex:1;min-height:0}
.telemetry-card.is-fullscreen-fallback .series-stage{flex:1;min-height:0;width:100%}
.telemetry-card.is-fullscreen-fallback .uplot{max-width:none}

/* KPI Strip & Live Telemetry HUD */
.kpi-strip,.telemetry-hud{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.kpi-chip,.hud-chip{background:var(--s2);border:var(--b);padding:3px 8px;font-size:.82rem;display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.kpi-hr,.metric-hr{color:var(--dn);border-color:#f28b8255}
.kpi-pace,.metric-pace{color:var(--p);border-color:#8ab4f855}
.metric-power{color:var(--wn);border-color:#fdd66355}
.metric-elevation{color:var(--ok);border-color:#81c99555}
.metric-cadence{color:var(--cad);border-color:#c58af955}

/* Metric-coded toolbar toggles & lap table micro-bars */
.metric-btn-hr[aria-pressed=true]{color:var(--dn);border-color:var(--dn);background:#f28b821a}
.metric-btn-pace[aria-pressed=true]{color:var(--p);border-color:var(--p);background:#8ab4f81a}
.metric-btn-power[aria-pressed=true]{color:var(--wn);border-color:var(--wn);background:#fdd6631a}
.metric-btn-elevation[aria-pressed=true]{color:var(--ok);border-color:var(--ok);background:#81c9951a}
.metric-btn-cadence[aria-pressed=true]{color:var(--cad);border-color:var(--cad);background:#c58af91a}
.lap-table th.col-pace{color:var(--p)}
.lap-table th.col-hr{color:var(--dn)}
.lap-table th.col-power{color:var(--wn)}
.lap-table th.col-elev{color:var(--ok)}
.lap-table td.col-pace{background:linear-gradient(90deg,#8ab4f822 var(--bar-pct,0%),#0000 var(--bar-pct,0%))}
.lap-table td.col-hr{background:linear-gradient(90deg,#f28b8222 var(--bar-pct,0%),#0000 var(--bar-pct,0%))}
.lap-table td.col-power{background:linear-gradient(90deg,#fdd66322 var(--bar-pct,0%),#0000 var(--bar-pct,0%))}

/* Left rail cohesion: single vertical stack, same card chrome as right telemetry */
.workbench-left>details.card,.workbench-left>.card{width:100%;min-width:0}
.workbench-left summary.card-head{min-width:0}
.workbench-left summary.card-head svg{flex:none}
.zone-stack{display:grid;gap:12px}
.zone-subhead{font-size:.9rem;margin:0 0 6px;display:flex;align-items:center;gap:6px}
.zone-now>summary{cursor:pointer}
.gear-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gear-list .pill{display:inline-flex;align-items:center;gap:6px}
.feed-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.card>h2.card-head{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:-12px -12px 10px;font-size:.95rem;font-weight:600;background:var(--s2);border-bottom:1px solid var(--bd)}

/* Wind direction flow arrow: points where wind blows to (FROM+180) */
.wind-dir{white-space:nowrap}
.wind-arrow{display:inline-block;transform-origin:50% 50%;vertical-align:-4px}
/* CSP-safe bars: width applied via data-bar-width + app.js (no inline style) */
.zone-fill[data-bar-width],.progress-bar[data-bar-width]{display:block}
/* Compare alignment toggle: layout lives here, not inline */
.compare-mode{margin:8px 0}

/* Feed cards: full-width header, narrow portrait map left (max ~1/3), stat dashboard right */
.feed-card{display:grid;gap:12px}
.feed-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:var(--b);padding-bottom:8px}
.feed-head{margin:0;font-size:1.05rem;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-head a{color:var(--tx);text-decoration:none}
.feed-head a:hover{text-decoration:underline}
.feed-byline{margin:0;display:flex;align-items:center;gap:6px;white-space:nowrap}
.feed-card-grid{display:grid;grid-template-columns:minmax(200px,32%) minmax(0,1fr);gap:14px;align-items:stretch}
.feed-map{position:relative;overflow:clip;min-width:0;min-height:240px;background:var(--s2);border:var(--b)}
.feed-map .mini-map{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.feed-map .thumb-link{position:absolute;inset:0;display:block;min-width:0}
.feed-map .route-thumb{width:100%;height:100%;aspect-ratio:auto}
.feed-map-empty{position:absolute;inset:0;margin:0;padding:18px 12px;text-align:center;display:grid;place-items:center;align-content:center;gap:6px;box-sizing:border-box}
.feed-main{min-width:0;display:grid;gap:10px;align-content:start;align-self:start}
/* Stat tiles: stretch across full column width, metric color-coded values */
.stat-tiles{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.stat-tile{background:var(--s2);border:var(--b);padding:8px 10px;display:grid;gap:2px;align-content:center;min-width:0;font-variant-numeric:tabular-nums}
.stat-tile .ms-icon-sm{color:var(--t)}
.stat-tile.kpi-pace .stat-val{color:var(--p)}
.stat-tile.kpi-hr .stat-val{color:var(--dn)}
.stat-tile.metric-elevation .stat-val{color:var(--ok)}
.stat-val{font-size:1.02rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.stat-sub{font-size:.78rem;font-weight:400;color:var(--t)}
.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--t)}
/* Elevation strip: always visible, full column width */
.feed-elev{margin:0;background:var(--s2);border:var(--b);padding:8px 10px;display:grid;gap:6px}
.feed-elev.is-pregen{border-color:#81c99544;background:linear-gradient(180deg,#81c9950d,#0000 55%),var(--s2)}
.feed-elev figcaption{font-size:.78rem}
.feed-elev-cap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-elev-title{font-weight:600;color:var(--tx)}
.feed-elev-range{margin-left:auto;color:var(--t);font-variant-numeric:tabular-nums}
.pill-elev-gain{border-color:#81c99566;color:var(--ok)}
.pill-elev-loss{border-color:#8ab4f866;color:var(--p)}
.feed-elev-chart{min-width:0}
.feed-elev-chart .ele-spark{width:100%;height:72px;color:var(--ok)}
.feed-elev-chart .ele-rich{width:100%;height:112px;display:block;color:var(--ok)}
/* Pregen chart body: crisp HTML y labels + geometry-only SVG (no in-SVG
   text: it would distort under preserveAspectRatio="none"). */
.feed-elev-body{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:stretch}
.feed-elev-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:.78rem;color:var(--t);font-variant-numeric:tabular-nums;padding:2px 0;white-space:nowrap}
.feed-elev-x{display:flex;justify-content:space-between;margin-left:60px;font-size:.75rem;color:var(--t);font-variant-numeric:tabular-nums;white-space:nowrap}
.feed-elev-marks{display:flex;gap:6px;flex-wrap:wrap;margin-left:60px}
.pill-mark-hr{color:var(--dn);border-color:#f28b8255}
.pill-mark-speed{color:var(--p);border-color:#8ab4f855}
.pill-mark-power{color:var(--wn);border-color:#fdd66355}
/* Pregenerated rich profile geometry */
.ele-rich .ele-line{fill:none;stroke:#81c995;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ele-rich .ele-grid{stroke:#2c2c38;stroke-width:1;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.ele-rich .ele-beam{opacity:.85}
.ele-rich .ele-plinth{fill:#0b120e;stroke:#81c9952e;stroke-width:1}
.ele-rich .ele-plinth-edge{stroke:#81c99566;stroke-width:1.5;vector-effect:non-scaling-stroke}
.ele-rich .ele-steep-up{fill:#fdd663;opacity:.1}
.ele-rich .ele-steep-down{fill:#8ab4f8;opacity:.1}

/* Context tiles: conditions / effort / gear / tags fill remaining width */
.ctx-tiles{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ctx-tile{background:var(--s2);border:var(--b);padding:8px 10px;display:grid;gap:4px;align-content:start;min-width:0}
.ctx-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--t);display:flex;align-items:center;gap:6px}
.ctx-val{font-size:.88rem;overflow:hidden;text-overflow:ellipsis}
.ctx-pills{display:flex;gap:6px;flex-wrap:wrap}
.feed-prs{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.feed-notes{margin:0;padding:8px 12px;border-left:3px solid var(--p);background:var(--s2);color:var(--tx);font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feed-actions{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Segment boards: high-density leaderboard tables share lap micro-bars.
   Time/distance/effort columns get the same --bar-pct wash (set by
   segment_sort.js via CSSOM, CSP-safe). Deltas vs best are heat-tinted. */
.seg-table{min-width:640px}
.seg-table td.col-time{background:linear-gradient(90deg,#8ab4f822 var(--bar-pct,0%),#0000 var(--bar-pct,0%))}
.seg-table td.col-efforts{background:linear-gradient(90deg,#81c99522 var(--bar-pct,0%),#0000 var(--bar-pct,0%))}
.seg-table td.col-dist{background:linear-gradient(90deg,#8ab4f818 var(--bar-pct,0%),#0000 var(--bar-pct,0%))}
.seg-table th.col-time{color:var(--p)}
.delta-best{color:var(--ok);font-weight:700}
.delta-mid{color:var(--wn);font-weight:600}
.delta-slow{color:var(--dn)}
/* Sport filter as segmented radios (links keep hrefs for no-JS). */
.seg-radios .seg-radio[aria-checked=true]{background:var(--s3);border-color:var(--p);color:var(--tx)}
/* Segment detail: feed-style map + KPI strip reuse. */
.seg-kpis{margin:6px 0}
.seg-map{min-height:220px}
.seg-map .mini-map{height:260px;aspect-ratio:auto}

/* Discovery polish (search/calendar/compare): sport dots, compare grid, delta heat, A/B swatches */
.cal-dots{display:flex;gap:4px;flex-wrap:wrap}
.cal-dot{display:inline-block;width:9px;height:9px;background:var(--t)}
.dot-run{background:var(--p)}
.dot-bike{background:var(--wn)}
.dot-strength{background:var(--dn)}
.dot-swim{background:var(--ok)}
.dot-other{background:var(--cad)}
.cal-dist{font-size:.75rem}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.cmp-card{padding:0}
.card.cmp-card>h2.card-head{margin:0}
.cmp-card>.kpi-strip{padding:10px 12px}
.sw{display:inline-block;width:22px;height:0;border-top:3px solid var(--tx);flex:none}
.sw-dash{border-top-style:dashed}
.delta-pill{white-space:nowrap}
.delta-pos{color:var(--wn);border-color:var(--wn)}
.delta-neg{color:var(--p);border-color:var(--p)}
kbd{background:var(--s3);border:var(--b);padding:0 5px;font-size:.8rem;font-family:inherit}

/* Session info pills (always visible, feed-style): metric color coding.
   HRM = HR red, shoes = pace blue, bike = power amber, visibility members
   = ok green, shares reuse metric colors, off = dimmed. */
.pill-hrm{color:var(--dn);border-color:#f28b8255}
.pill-shoes{color:var(--p);border-color:#8ab4f855}
.pill-bike{color:var(--wn);border-color:#fdd66355}
.pill-watch{color:var(--t)}
.pill-vis-members{color:var(--ok);border-color:#81c99555}
.pill-vis-private{color:var(--t)}
.pill-share-on-map{color:var(--ok);border-color:#81c99555}
.pill-share-on-hr{color:var(--dn);border-color:#f28b8255}
.pill-share-on-power{color:var(--wn);border-color:#fdd66355}
.pill-share-on-laps{color:var(--p);border-color:#8ab4f855}
.pill-share-on-comments{color:var(--cad);border-color:#c58af955}
.pill-off{color:var(--t);opacity:.7}
.session-info{padding:0}
.session-info-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;font-size:.95rem;font-weight:600;background:var(--s2);border-bottom:1px solid var(--bd)}
.session-info-head>span{display:flex;align-items:center;gap:8px}
.session-info-title{margin:0 0 4px}
.session-weather{display:grid;gap:8px;background:var(--s2);border:var(--b);padding:8px 10px}
.session-weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.session-weather-cell{display:grid;gap:4px;align-content:start;min-width:0}
.session-weather-source{margin:0}
.session-info>.card-body{display:grid;gap:10px;padding:10px 12px}
.session-info .ctx-tiles{margin:0}

/* Wind flow arrows: server-rendered 16-sector rotation classes so the
   arrow points the right way with JS disabled, on stale JS, or before
   app.js runs (no unrotated flash). data-wind-deg + app.js refines to the
   exact degree as progressive enhancement. Sector i centers on FROM
   heading i*22.5 deg; rotation = (i*22.5+90)%360 (base glyph points east,
   arrow shows flow = where wind blows TO). */
.wind-s0{transform:rotate(90deg)}
.wind-s1{transform:rotate(112.5deg)}
.wind-s2{transform:rotate(135deg)}
.wind-s3{transform:rotate(157.5deg)}
.wind-s4{transform:rotate(180deg)}
.wind-s5{transform:rotate(202.5deg)}
.wind-s6{transform:rotate(225deg)}
.wind-s7{transform:rotate(247.5deg)}
.wind-s8{transform:rotate(270deg)}
.wind-s9{transform:rotate(292.5deg)}
.wind-s10{transform:rotate(315deg)}
.wind-s11{transform:rotate(337.5deg)}
.wind-s12{transform:rotate(0deg)}
.wind-s13{transform:rotate(22.5deg)}
.wind-s14{transform:rotate(45deg)}
.wind-s15{transform:rotate(67.5deg)}

/* First-review onboarding popup (fresh session, owner only, once).
   Desktop workstation modal: dark M3, square corners, scrollable card. */
.modal-backdrop{display:none;position:fixed;inset:0;z-index:90;background:#000a}
.modal-backdrop.is-open{display:block}
.modal{display:none;position:fixed;inset:0;z-index:91;place-items:center;padding:24px;box-sizing:border-box}
.modal.is-open{display:grid}
.modal-card{width:min(860px,100% - 48px);max-height:calc(100vh - 48px);overflow:auto;background:var(--s1);border:var(--b);box-shadow:0 24px 64px #000c}
.modal-head{display:grid;gap:4px}
.modal-head h2{margin:0;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.modal-card fieldset{border:var(--b);padding:10px;display:grid;gap:8px;min-width:0}
.modal-card legend{padding:0 6px;font-weight:600;display:flex;align-items:center;gap:6px}
body.has-modal{overflow:hidden}