/* Product metrics pages (metrics.js): sequential ramp for heatmaps (one hue, light -> dark). */
:root {
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #6da7ec;
  --seq-4: #3987e5;
  --seq-5: #256abf;
  --seq-6: #184f95;
  --seq-7: #0d366b;
  --seq-ink-1: #0b0b0b;
  --seq-ink-2: #0b0b0b;
  --seq-ink-3: #0b0b0b;
  --seq-ink-4: #ffffff;
  --seq-ink-5: #ffffff;
  --seq-ink-6: #ffffff;
  --seq-ink-7: #ffffff;
}
/* Dark: near-zero recedes toward the dark surface, so the ramp runs dark -> light. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --seq-1: #0d366b;
    --seq-2: #184f95;
    --seq-3: #256abf;
    --seq-4: #3987e5;
    --seq-5: #6da7ec;
    --seq-6: #9ec5f4;
    --seq-7: #cde2fb;
    --seq-ink-1: #ffffff;
    --seq-ink-2: #ffffff;
    --seq-ink-3: #ffffff;
    --seq-ink-4: #0b0b0b;
    --seq-ink-5: #0b0b0b;
    --seq-ink-6: #0b0b0b;
    --seq-ink-7: #0b0b0b;
  }
}
:root[data-theme="dark"] {
  --seq-1: #0d366b;
  --seq-2: #184f95;
  --seq-3: #256abf;
  --seq-4: #3987e5;
  --seq-5: #6da7ec;
  --seq-6: #9ec5f4;
  --seq-7: #cde2fb;
  --seq-ink-1: #ffffff;
  --seq-ink-2: #ffffff;
  --seq-ink-3: #ffffff;
  --seq-ink-4: #0b0b0b;
  --seq-ink-5: #0b0b0b;
  --seq-ink-6: #0b0b0b;
  --seq-ink-7: #0b0b0b;
}

.heatmap text.cell-label {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.heatmap text.row-label,
.heatmap text.col-label {
  fill: var(--text-secondary);
  font-size: 12px;
}
.heatmap rect.cell-empty {
  fill: transparent;
  stroke: var(--grid);
}
.ramp-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  color: var(--text-secondary);
  font-size: 12px;
}
.ramp-legend i {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 2px;
}
.segmented {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.segmented button[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--page);
}
.card-head .segmented {
  margin-left: 12px;
}

/* Filter labels a page does not use (dashboard.js sets hidden; label display rules would override it). */
.filters label[hidden] {
  display: none;
}