/* ==========================================================================
   Admin traffic dashboard (#296, epic #292)

   Layers on .corpus-container's local palette (corpus.css) rather than
   introducing a second one — the admin surfaces should look like one
   product until a real design-token system lands.

   Chart colors are NOT eyeballed. Every value below was run through the
   house palette validator against this view's cream surface (#f6efe7):

     - p50/p95 ordinal ramp (#c08b5a → #7a4e2d): ALL CHECKS PASS
       (monotone lightness, ΔL gap, light end 2.60:1 vs surface, 7° hue spread)
     - bot-share meter track (#c08b5a) against the same fill: ALL PASS
     - status roles: the reserved fixed status palette, used unchanged

   Two deliberate departures, both documented by the same rules:

     1. `good` (2.94:1) and `warning` (1.61:1) sit below 3:1 on this cream
        surface. That is documented behavior for the status palette, and the
        mitigation is the relief rule — the view spells out every status
        class and its count in a labelled legend, so status color never
        carries meaning on its own.
     2. Bot-vs-human is a METER, not a two-color stacked bar. The obvious
        accent-plus-gray pairing failed the normal-vision separation floor
        (ΔE 14.1, below the 15 floor) and darkening the gray made it worse
        by converging on the brown. A single ratio against a whole is a
        meter anyway.
   ========================================================================== */

.metrics {
  --mx-accent: #7a4e2d;
  --mx-accent-light: #c08b5a;
  --mx-good: #0ca30c;
  --mx-neutral: #8a7d70;
  --mx-warning: #fab219;
  --mx-critical: #d03b3b;
  --mx-surface: #f6efe7;
  --mx-grid: rgba(27, 23, 21, 0.18);
}

/* --- banners ------------------------------------------------------------ */

.metrics-banner {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--co-notice-border);
  background: var(--co-notice-bg);
  font-size: 0.9rem;
  line-height: 1.5;
}

.metrics-banner--stale {
  border-color: var(--mx-critical);
  background: #fdeceb;
}

.metrics-banner code {
  background: rgba(27, 23, 21, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.metrics-freshness {
  font-size: 0.85rem;
  color: var(--co-ink-muted);
  margin: 0.25rem 0 1.25rem;
}

/* --- range filter ------------------------------------------------------- */

.metrics-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.metrics-range {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--co-border);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--co-ink);
}

.metrics-range--active {
  background: var(--mx-accent);
  border-color: var(--mx-accent);
  color: #fff;
}

/* --- KPI row ------------------------------------------------------------ */

.metrics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.metrics-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--co-border);
  border-radius: 8px;
  background: var(--mx-surface);
}

.metrics-kpi__label {
  font-size: 0.8rem;
  color: var(--co-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The hero figure: the number a reader should see first. Values wear text
   tokens, never a series color. */
.metrics-kpi__value {
  font-size: 1.9rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--co-ink);
}

.metrics-kpi__note {
  display: block;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--co-ink-muted);
}

.metrics-kpi__delta {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--co-ink-muted);
}

/* Direction is carried by an arrow glyph as well as color — a delta must
   not depend on hue alone. */
.metrics-kpi__delta--up::before { content: "▲ "; color: var(--mx-good); }
.metrics-kpi__delta--down::before { content: "▼ "; color: var(--mx-critical); }

/* --- panels ------------------------------------------------------------- */

.metrics-panel { margin-bottom: 2rem; }

.metrics-panel h2 {
  font-family: ui-serif, Georgia, "Iowan Old Style", serif;
  font-size: 1.15rem;
  margin: 0 0 0.15rem;
}

.metrics-panel__sub {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--co-ink-muted);
}

.metrics-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}

/* --- charts ------------------------------------------------------------- */

.metrics-chart {
  width: 100%;
  height: 120px;
  display: block;
  overflow: visible;
}

.metrics-column { fill: var(--mx-accent); }

/* A measured-but-empty window still shows a sliver, so "no traffic" reads
   differently from "the pipeline never ran here". */
.metrics-column--zero { fill: var(--mx-grid); }

/* Hairline, solid, recessive. Never dashed. */
.metrics-baseline {
  stroke: var(--mx-grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.metrics-line {
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* The chart's viewBox is stretched to fit its container, which would
     otherwise scale the stroke unevenly along each axis. */
  vector-effect: non-scaling-stroke;
}

.metrics-line--0 { stroke: var(--mx-accent-light); }
.metrics-line--1 { stroke: var(--mx-accent); }

.metrics-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--co-ink-muted);
  margin-top: 0.35rem;
}

.metrics-empty {
  font-size: 0.85rem;
  color: var(--co-ink-muted);
  font-style: italic;
}

/* --- legend ------------------------------------------------------------- */

.metrics-legend {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--co-ink-muted);
}

.metrics-legend--wrap { flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.6rem; }

.metrics-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: baseline;
}

.metrics-swatch--p50 { background: var(--mx-accent-light); }
.metrics-swatch--p95 { background: var(--mx-accent); }
.metrics-swatch--good { background: var(--mx-good); }
.metrics-swatch--neutral { background: var(--mx-neutral); }
.metrics-swatch--warning { background: var(--mx-warning); }
.metrics-swatch--critical { background: var(--mx-critical); }

/* --- rank bars ---------------------------------------------------------- */

.metrics-rank { width: 100%; }
.metrics-rank__count { text-align: right; font-variant-numeric: tabular-nums; }

.metrics-rank-bar {
  margin-top: 0.3rem;
  height: 4px;
  border-radius: 2px;
  background: rgba(122, 78, 45, 0.12);
}

.metrics-rank-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--mx-accent);
}

/* --- stacked status bar ------------------------------------------------- */

.metrics-stack {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  /* The 2px surface gap is what separates touching segments — never a
     stroke, which would add ink that is not data. */
  gap: 2px;
  background: var(--mx-surface);
}

.metrics-stack__segment { min-width: 2px; }
.metrics-stack__segment--good { background: var(--mx-good); }
.metrics-stack__segment--neutral { background: var(--mx-neutral); }
.metrics-stack__segment--warning { background: var(--mx-warning); }
.metrics-stack__segment--critical { background: var(--mx-critical); }

/* --- bot meter ---------------------------------------------------------- */

.metrics-meter {
  height: 18px;
  border-radius: 4px;
  background: var(--mx-accent-light);
  overflow: hidden;
}

.metrics-meter__fill {
  height: 100%;
  background: var(--mx-accent);
}

.metrics-meter__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--co-ink-muted);
}

/* Respect a reader who has asked for less motion; nothing here animates
   today, but the range links are the obvious place a transition creeps in. */
@media (prefers-reduced-motion: reduce) {
  .metrics-range { transition: none; }
}