/* Pulse Analytics — chart bits on top of the shared Ledger chrome. */

.main, .tbl .num, .mono { font-variant-numeric: tabular-nums; }

/* ---------- SVG charts ---------- */
.chart-svg { width: 100%; height: auto; display: block; }
.cbase { stroke: var(--kds-border); stroke-width: 1; }
.cbar { fill: color-mix(in srgb, var(--kds-accent) 72%, var(--kds-surface-2)); }
.cbar--wkend { fill: color-mix(in srgb, var(--kds-accent) 40%, var(--kds-surface-2)); }
.cbar--today { fill: var(--kds-accent); }
.cv {
  fill: var(--kds-fg-muted); text-anchor: middle;
  font: 600 10px var(--kds-font-mono);
}
.cv--today { fill: color-mix(in srgb, var(--kds-accent) 70%, var(--kds-fg)); }
.cl {
  fill: var(--kds-fg-faint); text-anchor: middle;
  font: 500 9px var(--kds-font-mono); letter-spacing: 0.04em;
}

.chart-legend {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10px/1 var(--kds-font-mono); color: var(--kds-fg-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.chart-legend__dot {
  width: 10px; height: 10px; border-radius: 2px; margin-left: 10px;
  background: color-mix(in srgb, var(--kds-accent) 72%, var(--kds-surface-2));
}
.chart-legend__dot--wkend { background: color-mix(in srgb, var(--kds-accent) 40%, var(--kds-surface-2)); }

/* ---------- Hourly footfall strip ---------- */
.hstrip { display: flex; align-items: flex-end; gap: 3px; height: 72px; }
.hstrip__col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.hstrip__bar {
  width: 100%; min-height: 2px; border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--kds-accent) 62%, var(--kds-surface-2));
}
.hstrip__bar--peak { background: var(--kds-accent); }
.hstrip__bar--zero { background: var(--kds-surface-2); }
.hstrip__ticks {
  display: flex; gap: 3px; margin-top: 4px;
  font: 500 9px/1 var(--kds-font-mono); color: var(--kds-fg-faint);
}
.hstrip__ticks span { flex: 1; text-align: center; }

/* ---------- Uptime strip ---------- */
.seg--u { fill: color-mix(in srgb, var(--kds-positive) 70%, var(--kds-surface-2)); }
.seg--d { fill: var(--kds-warning); }
.seg--o { fill: color-mix(in srgb, var(--kds-danger) 75%, var(--kds-surface-2)); }
.uplegend {
  display: flex; gap: var(--kds-sp-4); margin-top: var(--kds-sp-2);
  font: 500 10px/1 var(--kds-font-mono); color: var(--kds-fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.uplegend span { display: inline-flex; align-items: center; gap: 6px; }
.seg-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.seg-key--u { background: color-mix(in srgb, var(--kds-positive) 70%, var(--kds-surface-2)); }
.seg-key--d { background: var(--kds-warning); }
.seg-key--o { background: color-mix(in srgb, var(--kds-danger) 75%, var(--kds-surface-2)); }

/* ---------- Wide horizontal bars (screens / funnel) ---------- */
.bar--wide { grid-template-columns: 150px 1fr 52px; }
.conv {
  font: 500 10px/1 var(--kds-font-mono); color: var(--kds-fg-faint);
  padding: 2px 0 2px 162px; letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .bar--wide { grid-template-columns: 110px 1fr 44px; }
  .conv { padding-left: 122px; }
}

/* ---------- Tables ---------- */
.rowlink { cursor: pointer; }
.rowlink:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: -2px; }
.path { font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }
.trend-up { color: var(--kds-positive); }
.trend-down { color: var(--kds-danger); }
.t-warn { color: var(--kds-warning); }
.t-danger { color: var(--kds-danger); }