/* ============================================================================
   ATLAS REDESIGN — KpiCard component styles  (v1.2 / v1.3)
   Branch: atlas-redesign-2026-06-29
   Tokens only (--r-*). Rides both themes via the inherited token set.
   Loaded once, globally (before per-screen sheets). Selectors: .rd-kpic* / .rd-kpis.
   ========================================================================== */

/* responsive grid wrapper (optional helper; screens may use their own grid).
   minmax(0,1fr) — NOT bare 1fr — so a card's min-content can never force the
   grid (and, via the flex-item min-width:auto chain, the whole .rd-screen)
   out to desktop width on a phone viewport. */
.rd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.rd-kpis[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-kpis[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-kpis[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- card ---------------------------------------------------------------- */
.rd-kpic {
  --kpic-accent: var(--r-primary);
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  min-height: 130px;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-shadow-card);
  transition: box-shadow var(--r-dur) var(--r-ease),
              transform var(--r-dur) var(--r-ease),
              border-color var(--r-dur) var(--r-ease);
}
.rd-kpic:hover {
  box-shadow: var(--r-shadow-hover);
  transform: translateY(-2px);
  border-color: var(--r-hairline-2);
}
.rd-kpic--good    { --kpic-accent: var(--r-good); }
.rd-kpic--clay    { --kpic-accent: var(--r-clay); }
.rd-kpic--amber   { --kpic-accent: var(--r-amber); }
.rd-kpic--primary { --kpic-accent: var(--r-primary); }

/* ---- header row: mono eyebrow + delta chip ------------------------------- */
.rd-kpic__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rd-kpic__label {
  font-family: var(--r-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-kpic__delta {
  display: inline-flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  font-family: var(--r-font-mono);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r-radius-pill);
  padding: 2px 8px;
}
.rd-kpic__delta.is-up   { color: var(--r-chip-up-ink);   background: var(--r-chip-up-surface); }
.rd-kpic__delta.is-risk { color: var(--r-chip-risk-ink); background: var(--r-chip-risk-surface); }
.rd-kpic__delta.is-down { color: var(--r-chip-down-ink); background: var(--r-chip-down-surface); }
.rd-kpic__delta.is-flat { color: var(--r-muted);         background: var(--r-seg-track); }

/* ---- value + sub --------------------------------------------------------- */
.rd-kpic__value {
  font-family: var(--r-font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-top: 10px;
  color: var(--r-ink);
  font-variant-numeric: tabular-nums;
}
.rd-kpic__sub {
  font-size: 12px;
  color: var(--r-muted);
  margin-top: 3px;
}

/* ---- footer chart slot --------------------------------------------------- */
.rd-kpic__foot { margin-top: auto; padding-top: 14px; }

/* area sparkline */
.rd-kpic__spark { display: block; width: 100%; height: 40px; }
.rd-kpic__area  { fill: var(--kpic-accent); fill-opacity: var(--r-spark-fill); }
.rd-kpic__line  {
  fill: none;
  stroke: var(--kpic-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* momentum bars (light→accent ramp via opacity) */
.rd-kpic__bars { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.rd-kpic__bar  {
  flex: 1;
  background: var(--kpic-accent);
  border-radius: 3px 3px 0 0;
  opacity: 0.42;
}
.rd-kpic__bar:nth-child(n+4) { opacity: 0.6; }
.rd-kpic__bar:nth-child(n+6) { opacity: 0.8; }
.rd-kpic__bar:last-child     { opacity: 1; }

/* at-risk segments */
.rd-kpic__segs { display: flex; gap: 4px; }
.rd-kpic__seg  { flex: 1; height: 7px; border-radius: 3px; background: var(--r-good); }
.rd-kpic__seg.is-risk { background: var(--r-amber); }

/* goal-progress bar */
.rd-kpic__track {
  height: 8px;
  border-radius: 6px;
  background: var(--r-seg-track);
  overflow: hidden;
}
.rd-kpic__fill { height: 100%; border-radius: 6px; background: var(--kpic-accent); }

/* honest empty footer */
.rd-kpic__foot-empty { height: 40px; display: flex; align-items: center; }
.rd-kpic__baseline {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--r-seg-track);
}

/* responsive: collapse the 4-up to 2-up on narrow viewports.
   The [data-n] variants must be repeated here — kpi-card.js stamps data-n on
   every strip, and .rd-kpis[data-n="4"] (0,2,0) outweighs a bare .rd-kpis
   (0,1,0) regardless of the media query, which kept strips 4-across at 390px. */
@media (max-width: 1180px) {
  .rd-kpis,
  .rd-kpis[data-n="3"],
  .rd-kpis[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rd-kpis,
  .rd-kpis[data-n] { grid-template-columns: minmax(0, 1fr); }
}