/* Shared hub charts and replay. House palette (eight categorical slots, validated for
   color-vision deficiency in light and dark); every color is a custom property here so
   pages never need a style attribute. */
:root{--hc-surface:#fcfcfb;--hc-ink:#0b0b0b;--hc-ink-2:#52514e;--hc-muted:#898781;--hc-grid:#e1e0d9;--hc-axis:#c3c2b7;--hc-border:rgba(11,11,11,.10);--hc-track:#cde2fb;--hc-fill:#2a78d6;--hc-accent:#2a78d6;--hc-s0:#2a78d6;--hc-s1:#eb6834;--hc-s2:#1baf7a;--hc-s3:#eda100;--hc-s4:#e87ba4;--hc-s5:#008300;--hc-s6:#4a3aa7;--hc-s7:#e34948;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--hc-surface:#1a1a19;--hc-ink:#ffffff;--hc-ink-2:#c3c2b7;--hc-muted:#898781;--hc-grid:#2c2c2a;--hc-axis:#383835;--hc-border:rgba(255,255,255,.10);--hc-track:#184f95;--hc-fill:#3987e5;--hc-accent:#3987e5;--hc-s0:#3987e5;--hc-s1:#d95926;--hc-s2:#199e70;--hc-s3:#c98500;--hc-s4:#d55181;--hc-s5:#008300;--hc-s6:#9085e9;--hc-s7:#e66767;}
}
:root[data-theme="dark"]{--hc-surface:#1a1a19;--hc-ink:#ffffff;--hc-ink-2:#c3c2b7;--hc-muted:#898781;--hc-grid:#2c2c2a;--hc-axis:#383835;--hc-border:rgba(255,255,255,.10);--hc-track:#184f95;--hc-fill:#3987e5;--hc-accent:#3987e5;--hc-s0:#3987e5;--hc-s1:#d95926;--hc-s2:#199e70;--hc-s3:#c98500;--hc-s4:#d55181;--hc-s5:#008300;--hc-s6:#9085e9;--hc-s7:#e66767;}

/* charts */
.hub-chart{margin:0 0 18px;min-width:0}
.hc-title{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--hc-ink)}
.hc-svg{display:block;max-width:100%;height:auto;overflow:visible;font:11px system-ui,-apple-system,"Segoe UI",sans-serif}
.hc-gridline{stroke:var(--hc-grid);stroke-width:1}
.hc-axis{stroke:var(--hc-axis);stroke-width:1}
.hc-tick{fill:var(--hc-muted);font-variant-numeric:tabular-nums}
.hc-label{fill:var(--hc-ink-2);font-size:11px}
.hc-line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round;fill:none}
.hc-line.hc-future{opacity:.18}
.hc-dashed{stroke-dasharray:5 4}
.hc-key{stroke-width:2.5;stroke-linecap:round}
.hc-dot{stroke:var(--hc-surface);stroke-width:2}
.hc-marker-rule{stroke:var(--hc-ink-2);stroke-width:1}
.hc-crosshair{stroke:var(--hc-muted);stroke-width:1}
.hc-hit{cursor:crosshair}
.hc-tip-box{fill:var(--hc-surface);stroke:var(--hc-border);stroke-width:1}
.hc-tip-head{fill:var(--hc-ink-2);font-size:11px}
.hc-tip-row{font-size:11px}
.hc-tip-val{fill:var(--hc-ink);font-weight:600;font-variant-numeric:tabular-nums}
.hc-tip-name{fill:var(--hc-ink-2)}
.hc-bar-g:focus{outline:none}
.hc-bar-g:focus .hc-hit,.hc-bar-g:hover .hc-hit{fill:var(--hc-border)}
.hc-bar-value{fill:var(--hc-ink)}
.hc-line.hc-s0,.hc-key.hc-s0{stroke:var(--hc-s0)}
.hc-dot.hc-s0,.hc-bar.hc-s0{fill:var(--hc-s0)}
.hc-line.hc-s1,.hc-key.hc-s1{stroke:var(--hc-s1)}
.hc-dot.hc-s1,.hc-bar.hc-s1{fill:var(--hc-s1)}
.hc-line.hc-s2,.hc-key.hc-s2{stroke:var(--hc-s2)}
.hc-dot.hc-s2,.hc-bar.hc-s2{fill:var(--hc-s2)}
.hc-line.hc-s3,.hc-key.hc-s3{stroke:var(--hc-s3)}
.hc-dot.hc-s3,.hc-bar.hc-s3{fill:var(--hc-s3)}
.hc-line.hc-s4,.hc-key.hc-s4{stroke:var(--hc-s4)}
.hc-dot.hc-s4,.hc-bar.hc-s4{fill:var(--hc-s4)}
.hc-line.hc-s5,.hc-key.hc-s5{stroke:var(--hc-s5)}
.hc-dot.hc-s5,.hc-bar.hc-s5{fill:var(--hc-s5)}
.hc-line.hc-s6,.hc-key.hc-s6{stroke:var(--hc-s6)}
.hc-dot.hc-s6,.hc-bar.hc-s6{fill:var(--hc-s6)}
.hc-line.hc-s7,.hc-key.hc-s7{stroke:var(--hc-s7)}
.hc-dot.hc-s7,.hc-bar.hc-s7{fill:var(--hc-s7)}
.hc-legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin:6px 0 12px}
.hc-legend-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--hc-border);border-radius:999px;background:var(--hc-surface);color:var(--hc-ink);font:13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.hc-legend-item[aria-pressed="false"]{color:var(--hc-muted);text-decoration:line-through}
.hc-legend-item[aria-pressed="false"] .hc-swatch{opacity:.3}
.hc-legend-item:focus-visible,.hr-btn:focus-visible,.hr-scrub:focus-visible,.hr-speed:focus-visible,.hr-run:focus-visible,.hr-task:focus-visible{outline:2px solid var(--hc-accent);outline-offset:2px}
.hc-spark{vertical-align:middle}
.hc-spark-line{stroke:var(--hc-accent);stroke-width:1.5;fill:none;stroke-linejoin:round}
.hc-spark-dot{fill:var(--hc-accent)}
.hc-meter{min-width:0}
.hc-meter-head{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:4px}
.hc-meter-label{color:var(--hc-ink-2)}
.hc-meter-value{color:var(--hc-ink);font-variant-numeric:tabular-nums}
.hc-meter-svg{display:block;width:100%;height:8px}
.hc-meter-track{fill:var(--hc-track)}
.hc-meter-fill{fill:var(--hc-fill)}

/* replay */
.hub-replay{background:var(--hc-surface);color:var(--hc-ink);border:1px solid var(--hc-border);border-radius:14px;padding:14px 16px;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;min-width:0}
.hr-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hr-btn{min-width:44px;min-height:36px;padding:4px 12px;border:1px solid var(--hc-border);border-radius:8px;background:var(--hc-surface);color:var(--hc-ink);font:inherit;cursor:pointer}
.hr-play{min-width:72px;font-weight:600}
.hr-scrub-label{flex:1 1 180px;display:flex;min-width:0}
.hr-scrub{width:100%;min-width:0;accent-color:var(--hc-accent)}
.hr-speed,.hr-run,.hr-task{min-height:36px;border:1px solid var(--hc-border);border-radius:8px;background:var(--hc-surface);color:var(--hc-ink);font:inherit;max-width:100%}
.hr-run-label,.hr-task-label{max-width:100%}
.hr-stops{margin-top:8px}
.hr-stop{font-size:13px}
.hr-btn[aria-pressed="true"]{background:var(--hc-track);border-color:var(--hc-accent)}
.hr-btn:disabled{opacity:.45;cursor:default}
.hr-note{margin:0;color:var(--hc-ink-2);font-size:13px}
.hr-records{grid-column:1 / -1}
.hr-legend-note{display:flex;align-items:center;gap:6px;margin:-6px 0 10px;color:var(--hc-ink-2);font-size:13px}
.hr-legend-note:empty{display:none}
.hc-vline{stroke:var(--hc-muted);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.hr-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hr-readouts{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:12px 0 4px;align-items:start}
.hr-readouts p{margin:0}
.hr-step{font-weight:600;font-variant-numeric:tabular-nums}
.hr-clock{color:var(--hc-ink-2);font-variant-numeric:tabular-nums}
.hr-cost{grid-column:1 / -1}
.hr-hw{grid-column:1 / -1;color:var(--hc-ink-2);font-size:13px}
.hr-muted,.hr-empty{color:var(--hc-muted);margin:0}
.hr-charts{margin-top:6px}
.hr-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 16px}
.hr-events-title{margin:4px 0;font-weight:600;font-size:14px}
.hr-event-list{list-style:none;margin:0 0 10px;padding:0;font-size:13px}
.hr-event-list li{display:flex;gap:10px;padding:3px 0;border-top:1px solid var(--hc-grid)}
.hr-ev-step{flex:0 0 auto;color:var(--hc-muted);font-variant-numeric:tabular-nums;min-width:84px}
.hr-ev-text{min-width:0;overflow-wrap:anywhere}
.hr-table summary{cursor:pointer;color:var(--hc-ink-2);font-size:13px}
.hr-table{overflow-x:auto}
.hr-table table{border-collapse:collapse;font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums}
.hr-table th,.hr-table td{padding:3px 10px 3px 0;text-align:left;border-bottom:1px solid var(--hc-grid)}
.hr-table td{text-align:right}
@media (max-width:480px){
  .hub-replay{padding:12px}
  .hr-readouts{grid-template-columns:1fr}
  .hr-scrub-label{flex-basis:100%;order:5}
}
@media (forced-colors:active){
  .hc-line,.hc-key{stroke:CanvasText}
  .hc-dot,.hc-bar,.hc-meter-fill{fill:CanvasText}
  .hc-vline{stroke:GrayText}
}