/* ============================================================================
   PayrAdvisors — Payer Transparency Data page
   Page-specific styles for page-payr-pricing-data.php: the benchmark card, the
   KPI dashboard, and Chart.js card wrappers. Loads on top of service-page.css.
   Strict 5-color brand.
   ============================================================================ */

/* ---------- Benchmark showcase (sample report) ---------- */
.pd-bench-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 900px) { .pd-bench-grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-6); } }

.pd-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.pd-card__title { font-size: var(--fs-h6); color: var(--navy); }
.pd-card__note { font-size: var(--fs-small); color: var(--faint); margin: 2px 0 var(--space-4); }

/* Sample patient/report header */
.pd-bench__kicker { font-size: var(--fs-small); color: var(--blue); font-weight: var(--weight-emphasis); }
.pd-bench__name { font-family: var(--font-serif); font-weight: var(--weight-heading); font-size: var(--fs-h4); color: var(--navy); margin-top: 2px; }
.pd-bench__npi { font-size: var(--fs-small); color: var(--muted); margin-top: var(--space-1); }
.pd-bench__code { color: var(--magenta); font-weight: var(--weight-emphasis); margin-top: var(--space-4); }
.pd-bench__desc { font-size: var(--fs-small); color: var(--muted); margin-top: var(--space-1); line-height: 1.5; }

.pd-bench__figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.pd-fig { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-3); text-align: center; }
.pd-fig--you { border-color: var(--magenta); background: rgba(230, 0, 126, 0.05); }
.pd-fig__value { font-family: var(--font-serif); font-weight: var(--weight-heading); font-size: var(--fs-h5); color: var(--navy); line-height: 1; }
.pd-fig--you .pd-fig__value { color: var(--magenta); }
.pd-fig__label { font-size: 0.6875rem; color: var(--muted); margin-top: var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Chart cards ---------- */
.pd-canvas-wrap { position: relative; width: 100%; height: 300px; margin-top: var(--space-2); }
.pd-disclaimer { font-size: 0.6875rem; color: var(--faint); margin-top: var(--space-4); }

/* ---------- KPI dashboard ---------- */
.pd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (min-width: 760px) { .pd-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.pd-kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.pd-kpi__value { font-family: var(--font-serif); font-weight: var(--weight-heading); font-size: var(--fs-h3); color: var(--navy); line-height: 1; }
.pd-kpi--accent .pd-kpi__value { color: var(--magenta); }
.pd-kpi__label { font-size: var(--fs-small); color: var(--muted); margin-top: var(--space-2); }

.pd-viz-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 760px) { .pd-viz-grid { grid-template-columns: 1fr 1fr; } }