:root {
  --c0: #1f77b4;
  --c1: #ff7f0e;
  --c2: #2ca02c;
  --c3: #d62728;
  --c4: #9467bd;
  --c5: #8c564b;
  --c6: #e377c2;
  --c7: #7f7f7f;
  --c8: #bcbd22;
  --c9: #17becf;
  --ink: #172033;
  --muted: #617086;
  --paper: #edf1f5;
  --panel: #ffffff;
  --line: #cbd3dd;
  --line-light: #e1e6ec;
  --header: #111827;
  --header-soft: #202a3a;
  --page-gutter: 18px;
  --shadow: 0 1px 2px rgba(20, 30, 45, 0.08);
  color-scheme: light;
  font-family: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  min-width: 320px;
}

a { color: inherit; }

.site-header {
  align-items: center;
  background: var(--header);
  border-bottom: 1px solid #2e394b;
  color: #f3f6fa;
  display: flex;
  height: 54px;
  justify-content: space-between;
  padding: 0 var(--page-gutter);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { align-items: center; display: inline-flex; text-decoration: none; }
.brand img { display: block; height: 38px; width: auto; }
.footer-brand img { height: 42px; }

.site-header nav { align-items: center; display: flex; gap: 26px; height: 100%; }
.site-header nav a { color: #9eabbd; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover, .site-header nav .nav-active { color: white; }
.site-header nav .nav-active { border-bottom: 2px solid var(--c0); display: flex; height: 100%; align-items: center; }

main { margin: auto; max-width: none; padding: 0 var(--page-gutter) 36px; width: 100%; }

.data-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 92px;
  padding: 18px 4px 14px;
}
h1 { font-size: clamp(1.55rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.data-heading > div:first-child > p { color: var(--muted); font-size: 0.82rem; line-height: 1.4; margin: 7px 0 0; }

.sync-card { align-items: center; display: flex; gap: 9px; padding-left: 24px; }
.sync-card span:last-child { display: grid; }
.sync-card small { color: var(--muted); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.sync-card strong { font-size: 0.76rem; font-weight: 600; margin-top: 2px; }
.pulse { background: var(--c2); border-radius: 50%; box-shadow: 0 0 0 3px rgba(44, 160, 44, 0.14); height: 7px; width: 7px; }

.filter-panel {
  align-items: end;
  background: var(--header);
  border: 1px solid #2f3a4b;
  border-radius: 3px;
  color: white;
  display: grid;
  gap: 10px;
  grid-template-columns: 1.8fr repeat(4, minmax(120px, 1fr)) auto;
  padding: 10px 12px 11px;
}
.filter-panel label { display: grid; gap: 4px; min-width: 0; }
.filter-panel label > span { color: #9eabbd; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

select {
  appearance: none;
  background-color: var(--header-soft);
  background-image: linear-gradient(45deg, transparent 50%, #aeb8c6 50%), linear-gradient(135deg, #aeb8c6 50%, transparent 50%);
  background-position: calc(100% - 14px) 53%, calc(100% - 9px) 53%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  border: 1px solid #465268;
  border-radius: 2px;
  color: #f5f7fa;
  font: inherit;
  font-size: 0.74rem;
  height: 34px;
  min-width: 0;
  overflow: hidden;
  padding: 0 28px 0 9px;
  text-overflow: ellipsis;
  width: 100%;
}
select:hover { border-color: #6c7a91; }
select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--c0); outline-offset: 2px; }

.reset-button {
  background: var(--header-soft);
  border: 1px solid #465268;
  border-radius: 2px;
  color: #c7d0dd;
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  height: 34px;
  letter-spacing: 0.06em;
  padding: 0 14px;
  text-transform: uppercase;
}
.reset-button:hover { background: #2a3547; border-color: var(--c0); color: white; }

.analysis-grid { display: block; margin: 10px 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); }
.panel-header { align-items: flex-start; display: flex; justify-content: space-between; padding: 13px 17px 6px; }
.panel-kicker { color: var(--c0); font-size: 0.59rem; font-weight: 700; letter-spacing: 0.1em; margin: 0 0 3px; text-transform: uppercase; }
.panel h2 { font-size: 1.12rem; font-weight: 600; line-height: 1.2; margin: 0; }
.panel-header p:not(.panel-kicker) { color: var(--muted); font-size: 0.7rem; margin: 3px 0 0; }

.chart-tools { display: grid; gap: 6px; justify-items: end; margin-left: 24px; max-width: 72%; }
.chart-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.chart-controls label { align-items: center; display: flex; gap: 5px; }
.chart-controls label > span { color: var(--muted); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.chart-controls select { background-color: #f4f6f8; border-color: var(--line); color: var(--ink); font-size: 0.66rem; height: 27px; min-width: 86px; }
.chart-controls select:disabled { cursor: not-allowed; opacity: 0.5; }
.chart-reset-button { background: #f4f6f8; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); cursor: pointer; font: inherit; font-size: 0.62rem; font-weight: 600; height: 27px; padding: 0 9px; }
.chart-reset-button:hover:not(:disabled) { border-color: var(--c0); color: var(--c0); }
.chart-reset-button:disabled { cursor: default; opacity: 0.45; }
.series-legend { display: flex; flex-wrap: wrap; gap: 4px 13px; justify-content: flex-end; }
.series-legend span { align-items: center; color: #4f5c6e; cursor: default; display: inline-flex; font-size: 0.62rem; gap: 5px; transition: opacity 100ms ease; white-space: nowrap; }
.series-legend i { border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.series-legend.has-active-series span:not(.is-active) { opacity: 0.22; }
.series-legend span.is-active { color: var(--ink); font-weight: 600; }

.chart-wrap { min-height: 490px; padding: 0 13px 10px; position: relative; }
#trend-chart { cursor: crosshair; display: block; height: 460px; overflow: visible; touch-action: none; user-select: none; width: 100%; }
.chart-grid-line { stroke: #cfd5dd; stroke-width: 1; }
.chart-axis-label { fill: #58667a; font-family: "Source Sans 3", sans-serif; font-size: 12px; }
.chart-area { fill: rgba(31, 119, 180, 0.08); stroke: none; }
.chart-series { transition: opacity 100ms ease; }
#trend-chart.has-active-series .chart-series:not(.is-active) { opacity: 0.12; }
#trend-chart.has-active-commit .chart-line { opacity: 0.16; }
#trend-chart.has-active-commit .chart-point { opacity: 0.12; }
#trend-chart.has-active-commit .chart-point.is-commit-peer { fill: var(--panel); opacity: 1; r: 4.8; stroke-width: 2.2; }
#trend-chart.has-active-commit .chart-point.is-hovered-point { fill: var(--ink); r: 6; }
.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.chart-line.is-active { stroke-width: 2.8; }
.chart-point { fill: var(--panel); stroke-width: 1.5; transition: opacity 100ms ease, r 100ms ease; }
.chart-point-series.is-active .chart-point { r: 4.2; stroke-width: 2; }
.series-0 { stroke: var(--c0); }
.series-1 { stroke: var(--c1); }
.series-2 { stroke: var(--c2); }
.series-3 { stroke: var(--c3); }
.series-4 { stroke: var(--c4); }
.series-5 { stroke: var(--c5); }
.series-6 { stroke: var(--c6); }
.series-7 { stroke: var(--c7); }
.series-8 { stroke: var(--c8); }
.series-9 { stroke: var(--c9); }
.series-legend .series-0 { background: var(--c0); }
.series-legend .series-1 { background: var(--c1); }
.series-legend .series-2 { background: var(--c2); }
.series-legend .series-3 { background: var(--c3); }
.series-legend .series-4 { background: var(--c4); }
.series-legend .series-5 { background: var(--c5); }
.series-legend .series-6 { background: var(--c6); }
.series-legend .series-7 { background: var(--c7); }
.series-legend .series-8 { background: var(--c8); }
.series-legend .series-9 { background: var(--c9); }
#trend-chart .chart-point:hover, #trend-chart .chart-point:focus { fill: var(--ink); r: 5.5; }
.linked-point { cursor: pointer; }
.chart-point.warn { stroke: var(--c1); }
.chart-point.fail { stroke: var(--c3); }
.chart-hover-guide { pointer-events: none; stroke: #56657a; stroke-dasharray: 3 3; stroke-width: 1; visibility: hidden; }
.chart-hover-guide.is-visible { visibility: visible; }
.chart-zoom-selection { fill: rgba(31, 119, 180, 0.12); pointer-events: none; stroke: var(--c0); stroke-dasharray: 4 3; stroke-width: 1; visibility: hidden; }
.chart-zoom-selection.is-visible { visibility: visible; }
.chart-tooltip { background: #111827; border: 1px solid #3b4658; border-radius: 2px; color: white; font-size: 0.7rem; line-height: 1.45; max-width: 280px; padding: 7px 9px; pointer-events: none; position: absolute; transform: translate(-50%, calc(-100% - 9px)); z-index: 5; }
.chart-tooltip strong { display: block; font-size: 0.8rem; }
.chart-tooltip.commit-tooltip { max-height: 438px; max-width: none; overflow: hidden; padding: 0; transform: translateX(-50%); width: min(460px, calc(100% - 18px)); }
.commit-tooltip-header { border-bottom: 1px solid #3b4658; display: grid; gap: 2px; padding: 8px 10px 7px; }
.commit-tooltip-header strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; letter-spacing: 0.01em; }
.commit-tooltip-header span { color: #aeb9c9; font-size: 0.62rem; }
.commit-tooltip-groups { max-height: 340px; overflow: hidden; }
.commit-tooltip-group { border-bottom: 1px solid #303b4c; padding: 6px 10px 7px; }
.commit-tooltip-group.is-active { background: rgba(31, 119, 180, 0.18); box-shadow: inset 3px 0 var(--c0); }
.commit-tooltip-group-header { align-items: center; display: grid; gap: 6px; grid-template-columns: 8px minmax(0, 1fr) auto; margin-bottom: 3px; }
.commit-tooltip-group-header i { border-radius: 50%; height: 7px; width: 7px; }
.commit-tooltip-group-header b { font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit-tooltip-group-header span { color: #9eabbd; font-size: 0.57rem; }
.commit-tooltip-group-header .series-0 { background: var(--c0); }
.commit-tooltip-group-header .series-1 { background: var(--c1); }
.commit-tooltip-group-header .series-2 { background: var(--c2); }
.commit-tooltip-group-header .series-3 { background: var(--c3); }
.commit-tooltip-group-header .series-4 { background: var(--c4); }
.commit-tooltip-group-header .series-5 { background: var(--c5); }
.commit-tooltip-group-header .series-6 { background: var(--c6); }
.commit-tooltip-group-header .series-7 { background: var(--c7); }
.commit-tooltip-group-header .series-8 { background: var(--c8); }
.commit-tooltip-group-header .series-9 { background: var(--c9); }
.commit-tooltip-observation { align-items: baseline; display: flex; gap: 9px; justify-content: space-between; padding-left: 14px; }
.commit-tooltip-observation b { font-size: 0.63rem; font-variant-numeric: tabular-nums; min-width: 54px; }
.commit-tooltip-observation span { color: #c0c9d6; font-size: 0.59rem; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.commit-tooltip-group small { color: #8f9caf; display: block; font-size: 0.56rem; padding-left: 14px; }
.commit-tooltip-hint { background: #182233; color: #9eabbd; font-size: 0.57rem; padding: 6px 10px; }

.metrics {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 10px;
}
.metric { min-height: 105px; padding: 14px 17px 12px; position: relative; }
.metric + .metric { border-left: 1px solid var(--line-light); }
.metric p { color: var(--muted); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 5px; text-transform: uppercase; }
.metric strong { display: block; font-size: 1.8rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.metric small { color: var(--muted); display: block; font-size: 0.68rem; margin-top: 7px; }
.metric-icon { color: var(--c0); font-size: 1rem; position: absolute; right: 15px; top: 12px; }
.metric-icon-good { color: var(--c2); }
.metric-icon-time { color: var(--c1); }
.metric-icon-span { color: var(--c4); }

.health-panel { align-items: center; display: grid; grid-template-columns: 165px 92px 1fr; margin-bottom: 10px; min-height: 102px; }
.health-panel .panel-header { padding: 14px 17px; }
.donut-wrap { height: 78px; position: relative; width: 78px; }
.donut { height: 100%; transform: rotate(-90deg); width: 100%; }
.donut-base, .donut-segment { fill: none; stroke-width: 10; }
.donut-base { stroke: #dfe4ea; }
.donut-segment { stroke-linecap: butt; transition: stroke-dasharray 200ms ease; }
.donut-pass { stroke: var(--c2); }
.donut-warn { stroke: var(--c1); }
.donut-fail { stroke: var(--c3); }
.donut-label { display: grid; inset: 0; place-content: center; pointer-events: none; position: absolute; text-align: center; }
.donut-label strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.03em; }
.donut-label small { color: var(--muted); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; }
.health-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 15px 0 8px; }
.health-list div { border-left: 1px solid var(--line-light); display: grid; font-size: 0.7rem; gap: 3px; padding: 8px 16px; }
.health-list dt { align-items: center; color: var(--muted); display: flex; gap: 6px; }
.health-list dd { font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 600; margin: 0; }
.status-dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.status-dot.pass { background: var(--c2); }
.status-dot.warn { background: var(--c1); }
.status-dot.fail { background: var(--c3); }
.status-dot.unknown { background: var(--c7); }

.table-panel { margin-bottom: 10px; padding-bottom: 3px; }
.table-panel .panel-header { padding-bottom: 10px; }
.table-note { color: var(--muted); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; margin-top: 7px; text-transform: uppercase; }
.table-scroll { max-height: 520px; overflow: auto; }
table { border-collapse: collapse; min-width: 780px; width: 100%; }
thead { position: sticky; top: 0; z-index: 2; }
th { background: #e9edf2; border-bottom: 1px solid var(--line); color: #536176; font-size: 0.59rem; font-weight: 700; letter-spacing: 0.07em; padding: 7px 13px; text-align: left; text-transform: uppercase; }
th:first-child, td:first-child { padding-left: 17px; }
th:last-child, td:last-child { padding-right: 17px; }
td { border-top: 1px solid var(--line-light); font-size: 0.72rem; padding: 7px 13px; white-space: nowrap; }
tbody tr:hover { background: #eef5fb; }
.test-cell { max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.test-cell strong { font-size: 0.74rem; font-weight: 600; }
.test-cell small { color: var(--muted); display: inline; font-size: 0.63rem; margin-left: 7px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.65rem; font-variant-numeric: tabular-nums; }
.status-pill { border: 1px solid; border-radius: 2px; display: inline-block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; min-width: 50px; padding: 2px 6px; text-align: center; }
.status-pill.pass { background: rgba(44, 160, 44, 0.09); border-color: rgba(44, 160, 44, 0.45); color: #177318; }
.status-pill.warn { background: rgba(255, 127, 14, 0.1); border-color: rgba(255, 127, 14, 0.5); color: #a24b00; }
.status-pill.fail { background: rgba(214, 39, 40, 0.09); border-color: rgba(214, 39, 40, 0.45); color: #a51c1d; }
.status-pill.unknown { background: rgba(127, 127, 127, 0.09); border-color: #aeb4bc; color: #59616b; }
.empty-state { color: var(--muted); font-size: 0.75rem; padding: 30px 15px; text-align: center; }

footer { align-items: center; background: var(--header); color: #d8deE8; display: flex; justify-content: space-between; min-height: 74px; padding: 15px var(--page-gutter); }
footer p { color: #8996a8; font-size: 0.72rem; }
footer > a { color: #aeb8c6; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.07em; text-decoration: none; text-transform: uppercase; }
.error-banner { background: var(--c3); border-radius: 2px; bottom: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.2); color: white; font-size: 0.75rem; left: 50%; max-width: calc(100vw - 30px); padding: 9px 13px; position: fixed; transform: translateX(-50%); z-index: 30; }
.is-loading .panel, .is-loading .metric { opacity: 0.65; }

.commit-main { max-width: none; }
.breadcrumbs { align-items: center; color: var(--muted); display: flex; font-size: 0.7rem; gap: 7px; padding: 13px 2px 0; }
.breadcrumbs a { color: var(--c0); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.commit-heading { align-items: center; display: flex; justify-content: space-between; min-height: 112px; padding: 15px 2px 14px; }
.commit-heading h1 { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 600; letter-spacing: -0.035em; }
.run-heading h1 { font-size: clamp(1.15rem, 2.3vw, 1.9rem); overflow-wrap: anywhere; }
.commit-heading > div > p:not(.panel-kicker) { color: var(--muted); font-size: 0.76rem; margin: 7px 0; }
.github-button { background: var(--header); border: 1px solid #2d394c; border-radius: 3px; color: white; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; padding: 9px 13px; text-decoration: none; }
.github-button:hover { background: #202a3a; border-color: var(--c0); }
.commit-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.commit-tag { background: #e2e7ed; border: 1px solid #cbd3dd; border-radius: 2px; color: #4d5a6c; font-size: 0.61rem; padding: 2px 6px; text-decoration: none; }
a.commit-tag:hover { border-color: var(--c0); color: var(--c0); }
.commit-pager { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.commit-pager-button { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; display: grid; min-height: 58px; padding: 8px 13px; text-decoration: none; }
.commit-pager-button:hover { background: #eef5fb; border-color: rgba(31, 119, 180, 0.55); }
.commit-pager-button > span { color: var(--c0); font-size: 0.57rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.commit-pager-button strong { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.77rem; font-weight: 600; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit-pager-button small { color: var(--muted); font-size: 0.6rem; }
.commit-pager-button.next { justify-items: end; text-align: right; }
.commit-pager-button.is-disabled { background: #e7ebf0; border-color: #d6dce4; cursor: default; opacity: 0.65; pointer-events: none; }
.commit-pager-button.is-disabled > span { color: var(--muted); }
.commit-metrics { margin-bottom: 10px; }
.commit-runs-panel { margin-bottom: 10px; }
.commit-runs-scroll { max-height: none; }
.run-id-link { color: var(--c0); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.67rem; text-decoration: none; }
.run-id-link:hover { text-decoration: underline; }
.commit-metrics .metric strong { font-size: 1.65rem; }
.metric-change.improved { color: var(--c2); }
.metric-change.regressed { color: var(--c3); }
.metric-change.stable { color: var(--muted); }

.change-summary { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); margin-bottom: 10px; min-height: 92px; }
.change-summary-label { align-content: center; display: grid; padding: 12px 17px; }
.change-summary-label strong { font-size: 0.88rem; }
.change-summary-label small { color: var(--muted); font-size: 0.63rem; margin-top: 2px; }
.change-count { align-content: center; border-left: 1px solid var(--line-light); display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 7px; padding: 10px; }
.change-count > span { font-size: 1.1rem; font-weight: 700; grid-row: 1 / 3; }
.change-count strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1; }
.change-count small { color: var(--muted); font-size: 0.61rem; }
.change-count.improved > span { color: var(--c2); }
.change-count.stable > span { color: var(--c0); }
.change-count.regressed > span { color: var(--c3); }
.change-count.new > span { color: var(--c7); }

.commit-table-header { align-items: end; padding-bottom: 11px; }
.commit-filters { display: grid; gap: 8px; grid-template-columns: minmax(190px, 1.5fr) minmax(120px, 1fr) minmax(120px, 1fr) auto; margin-left: 24px; }
.run-filters { grid-template-columns: minmax(210px, 1.5fr) minmax(130px, 1fr) auto; }
.commit-filters label { display: grid; gap: 3px; }
.commit-filters label > span { color: var(--muted); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.commit-filters input, .commit-filters select { background: #f5f7f9; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); font: inherit; font-size: 0.68rem; height: 30px; padding: 0 8px; }
.commit-filters select { padding-right: 26px; }
.commit-filters input:focus-visible, .commit-filters select:focus-visible { outline: 2px solid var(--c0); outline-offset: 1px; }
.tree-actions { align-items: end; display: flex; gap: 4px; }
.tree-actions button { background: #f5f7f9; border: 1px solid var(--line); border-radius: 2px; color: #4f5c6e; cursor: pointer; font: inherit; font-size: 0.61rem; height: 30px; padding: 0 8px; white-space: nowrap; }
.tree-actions button:hover { background: #e9edf2; border-color: #aeb8c6; color: var(--ink); }
.commit-table-scroll { max-height: none; }
.tree-group-row td { background: #e9edf2; border-top: 1px solid #c4ccd7; padding: 0; }
.tree-group-row:hover td { background: #e4e9ef; }
.tree-toggle { align-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 7px; min-height: 32px; padding: 5px 17px; text-align: left; width: 100%; }
.tree-toggle:focus-visible { outline: 2px solid var(--c0); outline-offset: -2px; }
.tree-caret { color: var(--c0); font-family: ui-monospace, monospace; font-size: 0.72rem; width: 10px; }
.tree-toggle strong { font-size: 0.73rem; font-weight: 700; }
.tree-group-meta { color: var(--muted); font-size: 0.6rem; font-weight: 400; margin-left: 5px; }
.tree-child-row td:first-child { padding-left: 27px; }
.tree-section { align-items: center; display: flex; gap: 7px; }
.tree-section strong { font-size: 0.71rem; font-weight: 600; }
.commit-result-row.regressed { background: rgba(214, 39, 40, 0.025); }
.commit-result-row.improved { background: rgba(44, 160, 44, 0.025); }
.previous-commit { display: grid; gap: 1px; }
.previous-commit a { color: var(--c0); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.64rem; text-decoration: none; }
.previous-commit a:hover { text-decoration: underline; }
.previous-commit small { color: var(--muted); font-size: 0.59rem; }
.previous-run a { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-delta { border: 1px solid; border-radius: 2px; display: inline-block; font-size: 0.6rem; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 59px; padding: 2px 5px; text-align: right; }
.performance-delta.improved { background: rgba(44, 160, 44, 0.08); border-color: rgba(44, 160, 44, 0.4); color: #177318; }
.performance-delta.stable { background: rgba(31, 119, 180, 0.07); border-color: rgba(31, 119, 180, 0.32); color: #155d91; }
.performance-delta.regressed { background: rgba(214, 39, 40, 0.08); border-color: rgba(214, 39, 40, 0.4); color: #a51c1d; }
.performance-delta.new { background: rgba(127, 127, 127, 0.07); border-color: #c0c5cb; color: #68717c; text-align: center; }

.spreadsheet-main { padding-bottom: 18px; }
.sheet-heading { min-height: 82px; }
.live-state { align-items: center; display: flex; gap: 9px; padding-left: 24px; }
.live-state > span:last-child { display: grid; }
.live-state small { color: var(--muted); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.live-state strong { font-size: 0.76rem; font-weight: 600; margin-top: 2px; }
.live-state.error .pulse { background: var(--c1); box-shadow: 0 0 0 3px rgba(255, 127, 14, 0.14); }
.live-state.connecting .pulse { background: var(--c7); box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.14); }

.sheet-filters {
  align-items: end;
  background: var(--header);
  border: 1px solid #2f3a4b;
  border-radius: 3px;
  color: white;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(210px, 2fr) minmax(185px, 1.45fr) minmax(120px, 1fr) repeat(6, minmax(112px, 1fr)) auto;
  margin-bottom: 10px;
  padding: 10px 12px 11px;
}
.sheet-filters label { display: grid; gap: 4px; min-width: 0; }
.sheet-filters label > span { color: #9eabbd; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sheet-filters input {
  background: var(--header-soft);
  border: 1px solid #465268;
  border-radius: 2px;
  color: #f5f7fa;
  font: inherit;
  font-size: 0.7rem;
  height: 34px;
  min-width: 0;
  padding: 0 9px;
  width: 100%;
}
.sheet-filters input::placeholder { color: #7f8ca0; }
.sheet-filters input:hover { border-color: #6c7a91; }
.sheet-filters input:focus-visible { border-color: var(--c0); outline: 2px solid var(--c0); outline-offset: 1px; }
.sheet-filters input::-webkit-calendar-picker-indicator { filter: invert(0.75); }

.sheet-panel { overflow: hidden; padding-bottom: 0; }
.sheet-toolbar { align-items: center; display: flex; justify-content: space-between; min-height: 54px; padding: 8px 13px 7px 17px; }
.sheet-toolbar h2 { font-size: 1.05rem; font-weight: 600; line-height: 1.15; margin: 0; }
.sheet-range { color: var(--muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.sheet-scroll { max-height: calc(100vh - 315px); min-height: 390px; overflow: auto; }
.sheet-scroll:focus-visible { outline: 2px solid var(--c0); outline-offset: -2px; }
.spreadsheet-table { min-width: 3280px; table-layout: auto; }
.spreadsheet-table thead { top: 0; }
.spreadsheet-table th { padding: 0; white-space: nowrap; }
.spreadsheet-table th:first-child { padding-left: 4px; }
.spreadsheet-table th:last-child { padding-right: 4px; }
.spreadsheet-table th > button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: inherit;
  gap: 5px;
  height: 31px;
  letter-spacing: inherit;
  padding: 0 9px;
  text-transform: inherit;
  width: 100%;
}
.spreadsheet-table th > button:hover { background: #dce3eb; color: var(--ink); }
.spreadsheet-table th > button:focus-visible { outline: 2px solid var(--c0); outline-offset: -2px; }
.spreadsheet-table th > button span { color: var(--c0); font-size: 0.72rem; min-width: 8px; }
.spreadsheet-table td { font-size: 0.68rem; height: 30px; max-width: 340px; overflow: hidden; padding: 5px 9px; text-overflow: ellipsis; }
.spreadsheet-table th:first-child, .spreadsheet-table td:first-child { padding-left: 13px; }
.spreadsheet-table th:last-child, .spreadsheet-table td:last-child { padding-right: 13px; }
.spreadsheet-table td a { color: var(--c0); text-decoration: none; }
.spreadsheet-table td a:hover { text-decoration: underline; }
.spreadsheet-table .date-cell { max-width: none; }
.spreadsheet-table .numeric-cell { text-align: right; }
.spreadsheet-table .run-cell { max-width: 360px; }
.spreadsheet-table .path-cell { max-width: 390px; }
.spreadsheet-table .section-cell { max-width: 260px; }
.spreadsheet-table .commit-cell { max-width: 250px; }
.spreadsheet-table .command-cell { max-width: 480px; }
.spreadsheet-table .artifact-cell { max-width: 480px; }
.spreadsheet-table .metadata-cell { max-width: 380px; }
.spreadsheet-table .status-pill { vertical-align: middle; }
.sheet-row-new { animation: new-result 4s ease-out; }
@keyframes new-result {
  from { background: rgba(44, 160, 44, 0.24); }
  to { background: transparent; }
}
.sheet-pagination { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; min-height: 44px; padding: 6px 12px; }
.sheet-pagination span { color: var(--muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; min-width: 120px; text-align: center; }
.sheet-pagination button { background: #f5f7f9; border: 1px solid var(--line); border-radius: 2px; color: #445166; cursor: pointer; font: inherit; font-size: 0.64rem; font-weight: 600; height: 29px; padding: 0 10px; }
.sheet-pagination button:hover:not(:disabled) { background: #e9edf2; border-color: var(--c0); color: var(--c0); }
.sheet-pagination button:disabled { cursor: default; opacity: 0.45; }

@media (max-width: 1100px) {
  .filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-tools { max-width: 62%; }
  .health-panel { grid-template-columns: 150px 90px 1fr; }
  .health-list div { padding: 7px 9px; }
  .commit-table-header { align-items: flex-start; display: grid; gap: 10px; }
  .commit-filters { margin-left: 0; width: 100%; }
  .sheet-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sheet-filter-wide { grid-column: span 2; }
}

@media (max-width: 760px) {
  :root { --page-gutter: 8px; }
  .site-header nav a:first-child { display: none; }
  main { padding-bottom: 25px; }
  .data-heading { align-items: flex-start; display: grid; gap: 12px; padding: 16px 3px 12px; }
  h1 { font-size: 1.55rem; }
  .sync-card { padding-left: 0; }
  .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px; }
  .filter-panel label:first-child { grid-column: 1 / -1; }
  .reset-button { width: 100%; }
  .panel-header { padding-left: 11px; padding-right: 11px; }
  .series-legend, .table-note { display: none; }
  .trend-panel .panel-header { display: block; }
  .chart-tools { justify-items: start; margin: 8px 0 0; max-width: none; }
  .chart-wrap { min-height: 350px; padding-left: 3px; padding-right: 3px; }
  #trend-chart { height: 340px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { min-height: 98px; }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-light); }
  .metric:nth-child(4) { border-top: 1px solid var(--line-light); }
  .health-panel { display: grid; grid-template-columns: 1fr 85px; padding: 5px 0; }
  .health-list { grid-column: 1 / -1; margin: 4px 8px; }
  .health-list div:first-child { border-left: 0; }
  .table-scroll { max-height: 440px; }
  footer { align-items: flex-start; display: grid; gap: 10px; }
  footer p { margin: 0; }
  .commit-heading { align-items: flex-start; display: grid; gap: 13px; }
  .github-button { justify-self: start; }
  .commit-metrics { grid-template-columns: repeat(2, 1fr); }
  .change-summary { grid-template-columns: repeat(2, 1fr); }
  .change-summary-label { grid-column: 1 / -1; }
  .change-count:nth-child(2), .change-count:nth-child(4) { border-left: 0; }
  .commit-filters { grid-template-columns: 1fr; }
  .tree-actions { align-items: center; }
  .sheet-heading { align-items: flex-start; display: grid; gap: 10px; }
  .live-state { padding-left: 0; }
  .sheet-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px; }
  .sheet-filter-wide { grid-column: 1 / -1; }
  .sheet-scroll { max-height: calc(100vh - 410px); min-height: 330px; }
  .sheet-toolbar { padding-left: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}