/* usagestats.css — styles for the server-usage viz page (usagestats.php).
 *
 * Palette lives HERE as custom properties and nowhere else: usagestats.js reads
 * the family hues back out with getComputedStyle, so colour is defined once. The
 * four family hues + chrome/ink are the dataviz reference palette (light surface),
 * validated (node validate_palette.js): the four family bases pass every gate,
 * light-mode aqua/yellow carry a sub-3:1 contrast WARN which the direct band
 * labels + the table view satisfy (the "relief" rule).
 *
 * Light-only on purpose: the surrounding site (altorg.css) is a light theme, so a
 * prefers-color-scheme:dark card would be a dark island on a white page. If the
 * site ever gains a dark theme, add a dark block here and the JS picks it up
 * unchanged. */

.usage-wrap {
  /* chrome / ink (dataviz reference, light) */
  --surface:   #fcfcfb;
  --plane:     #f4f3ef;
  --ink:       #0b0b0b;
  --ink2:      #52514e;
  --muted:     #898781;
  --grid:      #e6e5df;
  --axis:      #c3c2b7;
  --ring:      rgba(11,11,11,0.10);
  --ring2:     rgba(11,11,11,0.06);

  /* version-family hues (co-occurring families sit on validated-safe adjacent
   * slots blue/orange/aqua/yellow): 3.3 3.4 3.6 5.0 */
  --fam-3-3:   #2a78d6;
  --fam-3-4:   #eb6834;
  --fam-3-6:   #1baf7a;
  --fam-5-0:   #eda100;

  /* ascensions: its own chart, so no collision with the family hues — a distinct
   * regal violet for the "win" series. */
  --asc:       #4a3aa7;

  max-width: 1080px;
  margin: 0 auto;
  padding: 4px 6px 40px;
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.usage-wrap h1 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 6px 0 20px;
}
.usage-empty { color: var(--ink2); padding: 24px 0; }
.usage-foot {
  color: var(--muted);
  font-size: 12px;
  margin-top: 26px;
}

/* ---- KPI row -------------------------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--ring2);
  border-radius: 10px;
  padding: 12px 14px;
}
.kpi.hero { grid-column: span 2; }
.kpi .kpi-label {
  color: var(--ink2);
  font-size: 12px;
  text-transform: none;
  margin-bottom: 4px;
}
.kpi .kpi-value {
  font-weight: 640;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
.kpi.hero .kpi-value { font-size: 46px; font-weight: 680; letter-spacing: -0.02em; }
.kpi .kpi-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }

/* ---- chart cards ---------------------------------------------------------- */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--ring2);
  border-radius: 12px;
  padding: 16px 16px 12px;
  margin-bottom: 22px;
}
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 6px;
}
.chart-title { font-size: 16px; font-weight: 620; }
.chart-note  { color: var(--muted); font-size: 12px; }

/* control row (segmented toggles + checkbox), one row above the chart */
.controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.segmented {
  display: inline-flex;
  border: 1px solid var(--axis);
  border-radius: 8px;
  overflow: hidden;
}
.segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 13px;
  padding: 4px 11px;
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--axis); }
.segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.seg-label { color: var(--muted); font-size: 12px; margin-right: 2px; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; cursor: pointer; }
.chk input { accent-color: var(--fam-3-3); }

/* ---- svg marks ------------------------------------------------------------ */
.usage-svg { display: block; width: 100%; height: auto; }
.usage-svg .grid line { stroke: var(--grid); shape-rendering: crispEdges; }
.usage-svg .grid path { stroke: none; }
.usage-svg .axis path,
.usage-svg .axis .domain { stroke: var(--axis); }
.usage-svg .axis line { stroke: var(--axis); }
.usage-svg .axis text { fill: var(--muted); font-size: 11px; }
.usage-svg .y-axis text { font-variant-numeric: tabular-nums; }

/* stacked area layers: solid fill, 1px surface-colour separator (the 2px gap the
 * spec asks for is the two adjacent layers' strokes meeting). */
.usage-svg .layer {
  stroke: var(--surface);
  stroke-width: 1;
  stroke-linejoin: round;
}
.usage-svg .layer.dim { opacity: 0.18; }        /* legend hover emphasis */
.usage-svg .band-label {
  fill: #fff;
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.28);
  stroke-width: 2.4px;
  pointer-events: none;
}

/* ascensions overlay (right axis): a surface halo keeps the violet line legible
 * over the multicolour stack. */
.usage-svg .asc-halo { fill: none; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.usage-svg .asc-line { fill: none; stroke: var(--asc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.usage-svg .asc-dot  { fill: var(--asc); stroke: var(--surface); stroke-width: 2; }

/* right axis + its title are coloured to bind them to the ascension line
 * (dual-axis clarity — the one place colouring an axis to its series earns it). */
.usage-svg .asc-axis text { fill: var(--asc); }
.usage-svg .asc-axis .domain, .usage-svg .asc-axis line { stroke: var(--asc); opacity: 0.45; }
.usage-svg .axis-title { fill: var(--muted); font-size: 11px; }
.usage-svg .axis-title.asc { fill: var(--asc); }

/* crosshair + hover */
.usage-svg .crosshair { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.usage-svg .hit { fill: transparent; }

/* ---- legend --------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.legend .grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.legend .grp-name { color: var(--ink2); font-size: 12px; font-weight: 600; margin-right: 2px; }
.legend .item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink2); cursor: default;
  background: none; border: 0; padding: 0;
}
.legend .item.mut { opacity: 0.4; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px var(--ring2) inset; }
.legend .sw.line { height: 0; width: 14px; border-radius: 0; border-top: 3px solid var(--asc); box-shadow: none; }
.legend .item .val { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- tooltip -------------------------------------------------------------- */
.usage-tip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  /* 50% white so the chart reads through it; blur keeps the text legible over the
   * busy stack (falls back to a plain translucent white where unsupported). */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  border: 1px solid var(--ring);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  padding: 8px 10px;
  font-size: 12px;
  min-width: 150px;
  opacity: 0;
  transition: opacity 0.08s;
}
.usage-tip.on { opacity: 1; }
.usage-tip .tip-h { font-weight: 640; margin-bottom: 5px; }
/* reset the site-wide `table { margin:1em; border; padding }` (altorg.css) that
 * otherwise leaks in — the tooltip lives on <body>, outside .usage-wrap — and
 * shoves this inner table right, past the tooltip edge. */
.usage-tip table { border-collapse: collapse; width: 100%; margin: 0; padding: 0; border: 0; }
.usage-tip td { padding: 1px 0; vertical-align: baseline; }
.usage-tip td.k { color: var(--ink2); padding-left: 8px; }
.usage-tip td.v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 12px; }
.usage-tip .key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.usage-tip .tip-total td { border-top: 1px solid var(--ring2); padding-top: 3px; }

@media (max-width: 560px) {
  .kpi.hero { grid-column: span 2; }
  .kpi.hero .kpi-value { font-size: 38px; }
}