/* Shared spacing scale: use these tokens for all subsequent page layouts. */
:root{--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--page-gap:var(--space-lg);--section-gap:var(--space-xl);--card-inset:var(--space-lg)}
#app-header{margin-bottom:var(--page-gap)}
.card{margin-bottom:var(--page-gap);padding:var(--card-inset);}.card.compact-list{padding:0 var(--card-inset)}
.section-head{margin:var(--section-gap) 0 var(--space-md);gap:var(--space-md)}
.range-controls,.filter-row,.segment{margin:var(--space-md) 0 var(--page-gap)}
.range-controls select{margin-top:0}.range-controls>span{margin-top:0}.range-controls>.text-button{margin-bottom:0}
.notice{margin:var(--space-md) 0;padding:var(--space-sm) var(--space-md)}
.stats-grid{margin:var(--space-md) 0;gap:var(--space-md)}
.profile-overview,.calendar-layout,.groups-grid{gap:var(--page-gap);margin-top:var(--page-gap)}
.source-note{margin-top:var(--page-gap)}
.page-compare{gap:var(--space-md);align-items:start}
.page-compare>*{margin:0}
.page-compare>.selector-stack{margin:0;gap:var(--space-md)}
.page-compare>.range-controls{margin:0;min-height:34px}
.page-compare>.stats-grid{margin:0;gap:var(--space-md);align-self:start}
.page-compare>.streak-card{padding:var(--space-md) var(--space-lg);margin:0}
.page-compare>.versus-card{padding:var(--space-lg);margin:0}
.page-compare .versus-avatars{padding:0 0 var(--space-sm)}
.page-compare .versus-avatars .avatar{width:36px;height:36px;font-size:12px;border-radius:11px}
.page-compare .versus-avatars b{margin-top:var(--space-xs);font-size:12px}
.page-compare .versus-avatars small{margin-top:2px;font-size:13px}
.page-compare .versus-numbers{font-size:40px;line-height:1.1;gap:var(--space-xl)}
.page-compare .versus-label{margin:var(--space-xs) 0;font-size:10px}
.page-compare .winrate{margin:var(--space-xs) 0;height:6px}.winrate>span{transform-origin:left;animation:winrate-build .85s ease-out both}
.page-compare .versus-stats{margin-top:var(--space-xs)}
.page-compare .definition{padding:var(--space-sm) 0;font-size:11px}
.page-compare .stat-tile{padding:var(--space-md);min-height:84px}
.compare-toolbar{display:flex;align-items:center;gap:var(--page-gap);flex-wrap:wrap;min-width:0}
.compare-toolbar>.segment{flex:0 0 auto;margin:0}
.compare-toolbar>.compare-explanation{flex:1 1 280px;font-size:10px;line-height:1.6;color:#7b8e82}
.compare-explanation .icon{display:inline-block;vertical-align:-2px;width:13px;height:13px;margin-right:var(--space-xs)}
.page-compare>.source-note{margin:var(--space-xs) auto 0}
.page-compare>.chart-card{margin:0}
.dashboard-banner>.card,.groups-grid>.card{margin-bottom:0}
.card.matrix-card,.card.placement-card,.card.annual-leaders-card{padding:0}
.compare-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--page-gap);align-items:stretch}
.compare-summary .card,.compare-summary .stats-grid{margin:0}
.compare-metrics{display:flex;flex-direction:column;gap:var(--space-md);min-width:0}
.compare-metrics>.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.compare-metrics>.streak-card{flex:1;padding:var(--space-md) var(--space-lg)}
.interactive-chart{margin-top:var(--space-md);min-width:0}
.infographic-summary{display:flex;align-items:flex-start;gap:clamp(18px,4vw,48px);padding:var(--space-sm) 0 var(--space-md);border-bottom:1px solid #dce5de}
.infographic-summary>div{min-width:0}.infographic-summary span{display:block;font-size:10px;color:#84958a;margin-bottom:var(--space-xs)}
.infographic-summary strong{font-size:27px;line-height:1.2;color:#3e5535;font-weight:750;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.infographic-summary strong small{font-size:14px;color:#89998a;font-weight:500;letter-spacing:0}
.infographic-summary strong[data-direction=down]{color:#b17a69}
.chart-toolbar{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;margin:var(--space-md) 0 var(--space-xs)}
.chart-toolbar label{display:flex;align-items:center;gap:6px;min-width:0;font-size:10px;color:#809084}
.chart-toolbar select,.chart-toolbar input{background:#f5f8f3;border:1px solid #dce5d5;border-radius:8px;color:#65795a;font-family:inherit;font-size:11px;padding:6px 8px;min-width:0;max-width:100%;height:32px}
.chart-toolbar input{width:123px;color-scheme:light}.chart-preset select{width:130px}
.chart-date-range{display:flex;align-items:center;gap:var(--space-sm);min-width:0}.chart-date-range>span{font-size:10px;color:#a0ae9e}
.chart-zoom-controls{display:flex;gap:var(--space-xs);margin-left:auto}
.chart-zoom-controls button{height:32px;width:32px;border-radius:9px;background:#e5eddb;border:1px solid #d8e4ca;color:#617d48;font-size:19px;line-height:1;font-weight:500}
.chart-zoom-controls button:hover:not(:disabled){background:#d9e6c9}.chart-zoom-controls button:disabled{opacity:.4;cursor:default}
.chart-canvas{height:280px;width:100%;min-width:0;position:relative;touch-action:pan-y;outline-offset:2px}
.chart-canvas:focus-visible{outline:2px solid #9bb77c;border-radius:8px}
.chart-footnote{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;font-size:9px;color:#8b9b8d;line-height:1.6;margin-top:var(--space-xs)}
.chart-footnote [data-chart-visible]{color:#6f8662;font-weight:600}
.chart-tooltip{display:flex;flex-direction:column;gap:6px;line-height:1.5}.chart-tooltip>b{font-size:10px;color:#7d8f79}.chart-tooltip strong{font-size:16px;color:#4b6839}.chart-tooltip span{font-size:11px;color:#748470}.chart-tooltip small{font-size:12px;font-weight:500}
.chart-data-table{margin-top:var(--space-sm)}.chart-data-table summary{cursor:pointer;color:#8a9b83;font-size:10px;font-weight:500;width:max-content}
.chart-table-scroll{max-height:230px;overflow:auto;margin-top:var(--space-sm)}.chart-data-table table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}.chart-data-table th,.chart-data-table td{font-weight:500;padding:var(--space-sm);border-bottom:1px solid #dde6da}.chart-data-table thead th{position:sticky;top:0;background:#eef4e9;color:#6f865f}
.chart-accessible-value:empty{display:none}.chart-accessible-value:not(:empty){font-size:11px;line-height:1.5;color:#687f5b;margin-top:var(--space-sm)}
.chart-reveal{animation:chart-reveal .6s ease-out both}.chart-card>.subtle{font-size:10px;margin:var(--space-sm) 0 0}
@keyframes chart-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes winrate-build{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:900px){.chart-toolbar{gap:var(--space-sm)}.chart-preset>span{display:none}.chart-date-range label>span{display:none}.chart-preset select{width:112px}.chart-toolbar input{width:117px}}
@media(max-width:600px){
 :root{--page-gap:var(--space-md);--section-gap:var(--space-lg);--card-inset:var(--space-md)}
 .page-compare{display:flex;flex-direction:column;gap:var(--space-md)}.page-compare>*{width:100%;margin:0}.page-compare>.range-controls{max-width:450px}.page-compare>.source-note{width:auto}
 .page-compare>.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page-compare .stat-tile{min-height:70px;padding:var(--space-sm)}.page-compare .stat-tile strong{font-size:23px}.page-compare .stat-tile small{font-size:9px}
 .compare-summary{grid-template-columns:1fr}.compare-metrics{gap:var(--space-md)}
 .page-compare .versus-numbers{font-size:39px}.page-compare .versus-avatars b{font-size:11px}.page-compare .versus-avatars small{font-size:13px}
 .compare-toolbar{gap:var(--space-sm)}.compare-toolbar>.compare-explanation{flex-basis:100%;font-size:9px}.compare-toolbar .segment button{font-size:11px}
 .chart-canvas{height:245px}.infographic-summary{gap:var(--space-lg)}.infographic-summary strong{font-size:23px}.infographic-summary span{font-size:9px}.infographic-summary strong small{font-size:11px}
 .chart-toolbar{gap:var(--space-sm)}.chart-preset{flex:1}.chart-preset select{width:100%}.chart-zoom-controls{margin-left:0}.chart-date-range{order:3;width:100%;gap:var(--space-sm)}.chart-date-range label{flex:1}.chart-date-range input{width:100%}.chart-date-range label>span{display:block}
 .chart-footnote>span:last-child{font-size:8px}.chart-data-table table{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.chart-reveal,.winrate>span{animation:none}}