/* fix-bug2a-kpi-quieter.css
 * Bug 2a: KPI tiles too chunky and accent-fill on Pipeline borrows weight.
 *
 * Quiet Operator: accent ≤10% of pixels, reserved for action not state.
 * The Today KPIs are state metrics — no accent. All three look the same,
 * tighter padding, smaller number weight, narrower container.
 *
 * Scoped to .statline only — Reports page KPIs (#repKpis using .kpis) unchanged.
 */

/* container — narrower, sits right not stretched */
.statline {
  display: inline-flex !important;
  gap: 8px !important;
  width: auto !important;
  max-width: max-content !important;
}

/* tile — quieter padding, smaller, flat */
.statline .kpi {
  height: auto !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  min-width: 110px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* drop the peach accent on Pipeline — equal weight with the others */
.statline .kpi.lead {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.statline .kpi.lead .kl {
  color: var(--muted) !important;
}

/* the number — smaller, lighter, still readable */
.statline .kpi .kn {
  font: 700 16px/1 var(--display, var(--body, system-ui)) !important;
  letter-spacing: -0.02em;
  color: var(--ink, var(--sage950));
}

/* the label — unchanged */
.statline .kpi .kl {
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 720px) {
  .statline {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    width: 100% !important;
    max-width: none !important;
  }
  .statline .kpi {
    min-width: 0;
  }
}

/* Refinement: 4 tiles in a 2×2 grid, action-ordered.
 * Follow Up Now (top-left) gets the soft accent treatment —
 * one tile, ≤10% accent budget, reserved for THE action.
 */
.statline {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 360px !important;
}

.statline .kpi {
  min-width: 0 !important;
  height: auto !important;
  min-height: 44px !important;
}

/* Follow Up Now — soft accent fill (the action signal) */
.statline .kpi.action {
  background: var(--accent, oklch(0.94 0.08 75)) !important;
  border-color: transparent !important;
}
.statline .kpi.action .kn {
  color: var(--accent-ink, var(--ink, var(--sage950))) !important;
}
.statline .kpi.action .kl {
  color: var(--accent-ink, var(--ink, var(--sage950))) !important;
  opacity: 0.75;
}

/* Override the earlier .lead rule we kept — Pipeline now plain, not accented */
.statline .kpi.lead {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.statline .kpi.lead .kl {
  color: var(--muted) !important;
}

@media (max-width: 720px) {
  .statline {
    grid-template-columns: 1fr 1fr !important;
    max-width: none !important;
    width: 100% !important;
  }
  .statline .kpi:nth-child(3) {
    grid-column: auto;
  }
}