.compare-view-switch{display:flex;gap:8px;margin-bottom:16px}.compare-view-switch button{padding:10px 14px;min-height:42px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:800 11px Inter,sans-serif}.compare-view-switch button[aria-pressed=true]{background:#a3ce75;border-color:#a3ce75;color:#071d17}.compare-view-switch button:focus-visible,.top10-athlete:focus-visible,.top10-category:focus-visible{outline:2px solid #e8cf49;outline-offset:2px}.top10-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.top10-head span{color:var(--green);font:800 10px Inter,sans-serif;letter-spacing:1px}.top10-head h3{margin:5px 0;font:900 32px/1 'Barlow Condensed',sans-serif}.top10-head p,.top10-note,.top10-empty,.top10-date-control small{color:var(--muted);font:700 10px/1.5 Inter,sans-serif}.top10-head label{min-width:min(310px,45%);font:800 10px Inter,sans-serif;color:var(--green);letter-spacing:1px}.top10-category{display:block;width:100%;margin-top:6px;padding:10px;background:var(--panel);color:var(--text);border:1px solid var(--line);font:700 13px Inter,sans-serif}.top10-note{max-width:950px;margin:15px 0}.top10-chart-wrap{overflow-x:auto;overscroll-behavior-x:contain;background:var(--panel);border:1px solid var(--line);max-width:100%}.top10-chart{display:block;max-width:none}.top10-grid{stroke:var(--line);stroke-width:1}.top10-axis{font:700 11px Inter,sans-serif;fill:var(--muted)}.top10-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:top5-draw 1.1s ease-out forwards}.top10-cursor{stroke:var(--text);stroke-width:1;stroke-dasharray:4 5;opacity:.6}.top10-marker{opacity:0;animation:top5-appear .35s ease-out forwards;pointer-events:none}@keyframes top5-draw{to{stroke-dashoffset:0}}@keyframes top5-appear{to{opacity:1}}@media(prefers-reduced-motion:reduce){.top10-line{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.top10-marker{animation:none;opacity:1}}.top10-date-control{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:14px 0}.top10-date-control label{display:block;width:min(580px,70%);font:800 10px/1.5 Inter,sans-serif;color:var(--green);letter-spacing:1px}.top10-date-control strong{color:var(--text);margin-left:8px}.top10-slider{display:block;width:100%;margin:8px 0 0;accent-color:#a3ce75;cursor:pointer}.top10-date-control small{text-align:right}.top10-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}.top10-athlete{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 10px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-align:left;font:800 10px/1.4 Inter,sans-serif}.top10-athlete[aria-pressed=false]{opacity:.45}.top10-swatch{width:13px;height:13px;flex:none;border-radius:50%}.top10-name{min-width:0;flex:1}.top10-value{white-space:nowrap;color:var(--text)}@media(max-width:700px){.top10-head{align-items:start;flex-direction:column;gap:8px}.top10-head label{width:100%}.top10-date-control{gap:8px}.top10-legend{grid-template-columns:1fr}.top10-head h3{font-size:27px}}@media(orientation:landscape) and (max-height:600px){.top10-head{flex-direction:row;align-items:end}.top10-head label{width:auto}.top10-legend{grid-template-columns:repeat(2,minmax(0,1fr))}.top10-note{margin:8px 0}.top10-date-control{margin:8px 0}}

.top10-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.top10-chart-toolbar .top10-note{margin:12px 0}.top10-expand,.top10-restore,.top10-legend-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:800 11px Inter,sans-serif;cursor:pointer}.top10-expand,.top10-restore{font-size:19px}.top10-expand span,.top10-restore span{font:800 10px Inter,sans-serif;letter-spacing:.5px}.top10-expand:focus-visible,.top10-restore:focus-visible,.top10-legend-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}.top10-maxbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 10px;background:var(--bg);flex:none}.top10-maxbar>strong{font:900 23px/1 'Barlow Condensed',sans-serif;color:var(--text)}.top10-maxbar>div{display:flex;gap:5px}.compare-dialog.graph-maximized{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;z-index:9999}.compare-dialog.graph-maximized .compare-header,.compare-dialog.graph-maximized .compare-view-switch,.compare-dialog.graph-maximized .top10-head,.compare-dialog.graph-maximized .top10-chart-toolbar,.compare-dialog.graph-maximized .top10-date-control small{display:none}.compare-dialog.graph-maximized .compare-body{padding:0;overflow:hidden}.compare-dialog.graph-maximized .compare-top10{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}.compare-dialog.graph-maximized .top10-chart-wrap{height:0;min-height:0;flex:1;max-width:100%;border-left:0;border-right:0}.compare-dialog.graph-maximized .top10-date-control{flex:none;margin:0;padding:5px 12px 9px;background:var(--bg)}.compare-dialog.graph-maximized .top10-date-control label{width:100%}.compare-dialog.graph-maximized .top10-slider{margin:2px 0 0}.compare-dialog.graph-maximized .top10-legend{display:none}.compare-dialog.graph-maximized.graph-legend-open .top10-legend{display:grid;position:absolute;right:10px;bottom:55px;z-index:5;width:min(500px,calc(100% - 20px));max-height:45%;overflow:auto;padding:8px;border:1px solid var(--line);background:var(--bg);box-shadow:0 8px 32px #0007}.compare-dialog.graph-maximized .top10-athlete{padding:6px 8px}.compare-dialog.graph-maximized .top10-empty{padding:0 12px}.compare-dialog:fullscreen{background:var(--bg)}

/* Keep the comparison itself as the vertical scroll container on iOS web apps. */
.compare-dialog[open]{position:fixed;inset:0;display:block;width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.compare-dialog[open] .compare-header{position:sticky;top:0;z-index:8}
.compare-dialog[open] .compare-body{overflow:visible;min-height:0}
.compare-dialog[open] .top10-chart-wrap,.compare-dialog[open] .compare-scroll{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.compare-dialog.graph-maximized[open]{display:flex;overflow:hidden}
.compare-dialog.graph-maximized[open] .compare-body{overflow:hidden;flex:1;min-height:0}
@media(orientation:portrait) and (max-width:900px){.compare-dialog[open] .compare-rotate{position:fixed}}