/* ============================================================================
   PRIMI HOUSE DESIGN SYSTEM — components.css
   Reusable classes built on primi-theme.css tokens. Import BOTH files.
   Encodes the non-negotiable conventions so they never get re-taught per build:
   shared baselines, bottom-pinned equal-height panels, honest proportional bars,
   right-aligned tabular numerals, correct logo-per-ground.
   ============================================================================ */

.pd {
  font-family: var(--pd-font);
  font-size: var(--pd-text-base);
  line-height: var(--pd-lh-base);
  color: var(--pd-text);
  background: var(--pd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pd *,  .pd *::before, .pd *::after { box-sizing: border-box; }

/* ---- Typography helpers ---------------------------------------------- */
.pd-eyebrow {
  font-size: var(--pd-text-2xs);
  font-weight: var(--pd-weight-semi);
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
  color: var(--pd-muted);
}
.pd-title    { font-size: var(--pd-text-2xl); line-height: var(--pd-lh-2xl); font-weight: var(--pd-weight-bold); letter-spacing: var(--pd-tracking-tight); margin: 0; }
.pd-section  { font-size: var(--pd-text-xl);  line-height: var(--pd-lh-xl);  font-weight: var(--pd-weight-semi); letter-spacing: -0.01em; margin: 0; }
.pd-lead     { font-size: var(--pd-text-md);  line-height: var(--pd-lh-md);  color: var(--pd-text-secondary); margin: 0; }
.pd-muted    { color: var(--pd-muted); }
.pd-num      { font-family: var(--pd-font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Card / panel ---------------------------------------------------- */
.pd-card {
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  padding: var(--pd-space-5);
  box-shadow: var(--pd-shadow-1);
}

/* ---- Equal-height panel row: bottoms pinned -------------------------- */
/* All panels stretch to the tallest; each panel is a column that pushes its
   last child (chart/note) to the bottom edge so bottoms align. */
.pd-panel-row {
  display: grid;
  grid-template-columns: repeat(var(--pd-cols, 3), 1fr);
  gap: var(--pd-space-4);
  align-items: stretch;
}
.pd-panel {
  display: flex;
  flex-direction: column;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  padding: var(--pd-space-5);
  box-shadow: var(--pd-shadow-1);
}
.pd-panel > .pd-panel-foot { margin-top: auto; padding-top: var(--pd-space-4); }

/* ---- KPI / stat tile: shared baseline via fixed-height label slot ----- */
/* The .pd-kpi-label slot is a FIXED height so a 1- or 2-line label never
   pushes the big number off the shared baseline across a row of tiles. */
.pd-kpi-row {
  display: grid;
  grid-template-columns: repeat(var(--pd-cols, 4), 1fr);
  gap: var(--pd-space-4);
}
.pd-kpi {
  display: flex;
  flex-direction: column;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  padding: var(--pd-space-5);
  box-shadow: var(--pd-shadow-1);
}
.pd-kpi-label {
  min-height: 2.9em;              /* fixed slot absorbs 1-2 line labels */
  display: flex;
  align-items: flex-start;
  font-size: var(--pd-text-sm);
  line-height: 1.35;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-muted);
  margin: 0 0 var(--pd-space-3);
}
.pd-kpi-value {
  font-family: var(--pd-font-num);
  font-size: var(--pd-text-3xl);
  line-height: var(--pd-lh-3xl);
  font-weight: var(--pd-weight-bold);
  letter-spacing: var(--pd-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--pd-text);
}
.pd-kpi-sub {
  margin-top: var(--pd-space-2);
  font-size: var(--pd-text-xs);
  color: var(--pd-muted);
  display: flex;
  align-items: baseline;
  gap: var(--pd-space-2);        /* one separator style: use · between stats */
}
.pd-delta { font-family: var(--pd-font-num); font-weight: var(--pd-weight-semi); font-variant-numeric: tabular-nums; }
.pd-delta.up   { color: var(--pd-success); }
.pd-delta.down { color: var(--pd-danger); }

/* ---- Honest proportional bar group ----------------------------------- */
/* Every bar scales to the GROUP'S true max (--pd-bar-max). Set each bar's
   --pd-bar to its value; width = value/max. Never render two values full-width. */
.pd-bars { display: flex; flex-direction: column; gap: var(--pd-space-3); }
.pd-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, max-content) 1fr max-content;
  align-items: center;
  gap: var(--pd-space-3);
}
.pd-bar-name  { font-size: var(--pd-text-sm); color: var(--pd-text-secondary); }
.pd-bar-track { position: relative; height: 12px; background: var(--pd-surface-2); border-radius: var(--pd-radius-sm); overflow: hidden; }
.pd-bar-fill  {
  display: block;              /* REQUIRED: width is ignored on inline elements */
  height: 100%;
  width: calc(var(--pd-bar) / var(--pd-bar-max) * 100%);
  background: var(--pd-series);
  border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;  /* rounded data-end */
}
.pd-bar-val   { font-family: var(--pd-font-num); font-size: var(--pd-text-sm); font-variant-numeric: tabular-nums; color: var(--pd-text); text-align: right; min-width: 3.5em; }

/* ---- Data table: right-aligned tabular numerals, one right edge ------- */
.pd-table { width: 100%; border-collapse: collapse; font-size: var(--pd-text-sm); }
.pd-table thead th {
  font-size: var(--pd-text-2xs);
  font-weight: var(--pd-weight-semi);
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
  color: var(--pd-muted);
  text-align: left;
  padding: var(--pd-space-2) var(--pd-space-3);
  border-bottom: 1px solid var(--pd-border-strong);
}
.pd-table td {
  padding: var(--pd-space-3);
  border-bottom: 1px solid var(--pd-border);
  color: var(--pd-text);
}
.pd-table th.pd-n, .pd-table td.pd-n {
  font-family: var(--pd-font-num);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* parenthetical annotations live in their own muted column, never inline */
.pd-table td.pd-annot { font-family: var(--pd-font-num); color: var(--pd-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-table tbody tr:last-child td { border-bottom: none; }

/* ---- Buttons --------------------------------------------------------- */
.pd-btn {
  font-family: inherit;
  font-size: var(--pd-text-sm);
  font-weight: var(--pd-weight-semi);
  border-radius: var(--pd-radius-md);
  padding: var(--pd-space-3) var(--pd-space-5);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pd-btn-primary { background: var(--pd-action); color: var(--pd-on-action); }
.pd-btn-primary:hover { background: var(--pd-action-hover); }
.pd-btn-secondary { background: var(--pd-surface); color: var(--pd-text); border-color: var(--pd-border-strong); }
.pd-btn-secondary:hover { background: var(--pd-surface-2); }
.pd-btn:focus-visible { outline: 2px solid var(--pd-focus); outline-offset: 2px; }

/* ---- Chips / status badges (color never alone — icon/text carries it) - */
.pd-chip {
  display: inline-flex; align-items: center; gap: var(--pd-space-2);
  font-size: var(--pd-text-xs); font-weight: var(--pd-weight-semi);
  padding: 2px var(--pd-space-3); border-radius: var(--pd-radius-pill);
}
.pd-chip.good   { background: var(--pd-green-50);  color: var(--pd-link); }
.pd-chip.warn   { background: #fdf3e2;             color: var(--pd-warn); }
.pd-chip.danger { background: #fbeceb;             color: var(--pd-danger); }
:root[data-theme="dark"] .pd-chip.good   { background: rgba(90,168,112,.15); color: var(--pd-success); }
:root[data-theme="dark"] .pd-chip.warn   { background: rgba(224,153,42,.15); color: var(--pd-warn); }
:root[data-theme="dark"] .pd-chip.danger { background: rgba(214,69,69,.18);   color: var(--pd-danger); }

/* ---- Logo lockup — CORRECT wordmark per ground ----------------------- */
/* Real assets only (never recreated):
   light ground -> pd-lockup-light.png  (green emblem + BLACK wordmark)
   dark  ground -> PD_green_white_sm.png (green emblem + WHITE wordmark)
   Set the path via CSS var when importing into a deliverable, or use <img>
   directly with the class for sizing. */
.pd-logo { display: inline-block; height: 28px; width: auto; }
.pd-logo-lg { height: 40px; }
/* Guard against invisible-logo regressions: the wrong-ground variant is hidden. */
.pd-on-light .pd-logo--dark  { display: none; }
.pd-on-dark  .pd-logo--light { display: none; }

/* ---- Section rhythm -------------------------------------------------- */
.pd-stack > * + * { margin-top: var(--pd-space-5); }
.pd-divider { height: 1px; background: var(--pd-border); border: 0; margin: var(--pd-space-6) 0; }

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after { transition: none !important; animation: none !important; }
}