/* ----------------------------------------------------------- 6 cards/KPI */

/* Cards are for things that are genuinely a separate object (a panel of
   controls, a chart with its own table). Lists, tables and the day strip sit
   directly on the page — boxing everything is how a tool stops having a
   hierarchy. */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4x) var(--s4x);
  margin-bottom: var(--s4x);
  box-shadow: var(--shadow);
}

.card > :last-child {
  margin-bottom: 0;
}

.card.warning {
  border-color: rgba(255, 200, 87, 0.5);
}

.card-quiet {
  background: var(--sunken);
  border-color: var(--border-subtle);
  box-shadow: none;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s3x);
  margin: 0 0 var(--s6x);
}

.kpi {
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s3x) var(--s4x) 14px;
  position: relative;
  /* Kept visible unconditionally (not gated behind :has(.kpi-x)) so a
     browser without :has() support still lets the explainer tooltip escape
     the tile instead of clipping it away entirely -- losing the "?"
     affordance below in that case is fine, losing the content is not. */
  overflow: visible;
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ink);
  /* Matches the tile's own corners exactly (same box, same radius) so it
     still reads as clipped even with the tile's own overflow set to
     visible above -- the explainer tooltip needs to escape the tile, but
     this accent bar must not. */
  border-radius: var(--r-md) 0 0 var(--r-md);
}

.kpi.is-ok::before {
  background: var(--ok);
}
.kpi.is-warn::before {
  background: var(--warn);
}
.kpi.is-bad::before {
  background: var(--bad);
}
.kpi.is-quiet::before {
  background: var(--haze);
}

/* A tile carrying an explainer (.kpi-x) gets the "help available" cursor;
   overflow is already visible unconditionally on the base .kpi rule above
   so the tooltip escapes the tile even where :has() is unsupported. */
.kpi:has(.kpi-x) {
  cursor: help;
}

.kpi:has(.kpi-x):hover,
.kpi:has(.kpi-x):focus-within {
  z-index: 2;
}

/* Small "there's more" affordance, top-right of any tile with an
   explainer -- a dot-in-a-circle rather than reworking .kpi-l's text. */
.kpi:has(.kpi-x)::after {
  /* Review fix (major): the `<content> / <alt>` form below is unsupported in
     Firefox, where an invalid `content` computes to `none` -- no box at all,
     so the whole affordance silently vanished there once .kpi-x became
     hover/focus-revealed (it used to be permanent visible text). Plain
     `content: "?"` is universally supported; it is a visual affordance only,
     so being announced alongside the tile's own text is fine -- the real
     announcement of the explainer sentence is handled by aria-describedby on
     the tile (see .kpi-x below), not by this pseudo-element. */
  content: "?";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 13px;
  height: 13px;
  line-height: 12px;
  text-align: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.kpi .kpi-v {
  /* Proportional figures: a standalone display number set in tabular-nums
     reads loose. tabular-nums is for columns, not headline figures. */
  display: block;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.kpi .kpi-v small {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
  margin-left: 3px;
  letter-spacing: 0;
}

.kpi .kpi-l {
  display: block;
  color: var(--text-2);
  font-size: var(--t-xs);
  margin-top: 6px;
}

.kpi .kpi-d {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.kpi .kpi-d.up {
  color: var(--ok);
}
.kpi .kpi-d.down {
  color: var(--warn);
}

/* Legacy stat tile (screens 3-6) kept on the same visual footing. */
.stat .v {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stat .l {
  color: var(--text-2);
  font-size: var(--t-xs);
  margin-top: 6px;
}

/* ------------------------------------------------------- 7 chips & pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.7;
  border: 1px solid transparent;
}

.pill.ro {
  background: rgba(96, 14, 104, 0.55);
  color: var(--akoya);
  border-color: rgba(250, 137, 255, 0.5);
}

.pill.live {
  background: var(--ok);
  color: var(--siphon);
  font-weight: 700;
}

.pill.snap {
  background: rgba(6, 240, 251, 0.1);
  color: var(--voltage);
  border-color: rgba(6, 240, 251, 0.36);
}

.pill.snap.unknown,
.pill.freshness.unknown {
  background: rgba(255, 200, 87, 0.12);
  color: var(--warn);
  border-color: rgba(255, 200, 87, 0.4);
}

.pill.freshness {
  background: rgba(61, 220, 151, 0.12);
  color: var(--ok);
  border-color: rgba(61, 220, 151, 0.34);
}

.pill.locked {
  background: rgba(164, 159, 198, 0.14);
  color: var(--muted);
}

.chip,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  background: rgba(164, 159, 198, 0.15);
  color: var(--text-2);
  white-space: nowrap;
  border: 1px solid transparent;
}

.chip .dot,
.legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.chip.ok {
  background: rgba(61, 220, 151, 0.14);
  color: var(--ok);
  border-color: rgba(61, 220, 151, 0.3);
}

.chip.warn {
  background: rgba(255, 200, 87, 0.14);
  color: var(--warn);
  border-color: rgba(255, 200, 87, 0.32);
}

.chip.bad {
  background: rgba(255, 107, 107, 0.14);
  color: var(--bad);
  border-color: rgba(255, 107, 107, 0.32);
}

.chip .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3x);
  font-size: 13px;
  color: var(--text-2);
  margin: var(--s2x) 0 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-code {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
  color: var(--muted);
}
.product-identity {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.product-identity strong {
  font-weight: 600;
}

.tariff-periods { margin: .5rem 0; text-align: left; min-width: 11rem; }
.tariff-periods > div { display: flex; justify-content: space-between; gap: .75rem; margin: .25rem 0; }
.tariff-periods dt, .tariff-periods dd { margin: 0; white-space: nowrap; }
.consumption-provenance { text-align: left; max-width: 25rem; white-space: normal; }
.consumption-provenance dd { margin-left: 0; margin-bottom: .5rem; }
.period-comparison { min-width: 65rem; }
.period-comparison caption { white-space: normal; }

.members-table td { vertical-align: top; }