/* Dashboard + the centerpiece (Client-Based Programs and Services Availed) */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
  animation: page-fade-in 480ms var(--ease-silk);
}
.page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--sp-2);
  color: var(--mauve-900);
  line-height: 1;
}
.page-header__subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 300;
}
.page-header__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

.service-overview-panel {
  background:
    linear-gradient(135deg, rgba(201, 104, 90, .08), transparent 48%),
    var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  box-shadow: var(--elev-1);
  margin: var(--sp-7) 0;
}
.service-overview-panel__header {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
}
.service-overview-panel__eyebrow {
  margin: 0 0 var(--sp-1);
  color: var(--rose-700);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.service-overview-panel__title {
  margin: 0;
  color: var(--mauve-900);
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: 500;
}
.service-program-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3);
}
.service-program-chip {
  min-height: 112px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
}
.service-program-chip span {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.service-program-chip strong {
  color: var(--mauve-900);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  line-height: 1.2;
}
.service-milestone {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-default);
}
.service-milestone span {
  display: block;
  color: var(--rose-700);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.service-milestone strong {
  display: block;
  color: var(--mauve-900);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  margin-top: var(--sp-1);
}

/* =====================================================
   Clickable KPI cards & detail-disclosure surfaces
   "Everything clickable, every action shows detail"
   ===================================================== */

.kpi--link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--motion-ui, 180ms) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
              box-shadow var(--motion-ui, 180ms) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
              border-color var(--motion-ui, 180ms);
}
.kpi--link::after {
  content: "→";
  position: absolute;
  top: var(--sp-3, 12px);
  right: var(--sp-3, 12px);
  font-size: var(--fs-18, 1.125rem);
  color: var(--text-muted, rgba(63, 42, 54, 0.5));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
              transform var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.kpi--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2, 0 8px 24px rgba(63, 42, 54, 0.10));
}
.kpi--link:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.kpi--link:focus-visible {
  outline: 2px solid var(--accent, #c4944a);
  outline-offset: 2px;
}
.kpi--locked {
  cursor: not-allowed;
  filter: grayscale(0.15);
}
.kpi--locked:hover { transform: none; box-shadow: none; }
.kpi--locked::after { content: "Phase 2"; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; transform: none; }

/* Clickable category row */
.dashboard-category-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
              color var(--motion-fast, 120ms);
}
.dashboard-category-row:hover {
  padding-left: var(--sp-2, 8px);
  color: var(--mauve-800, #4f3645);
}
.dashboard-category-row:hover .dashboard-category-row__count {
  color: var(--accent, #c4944a);
}
.dashboard-category-row:focus-visible {
  outline: 2px solid var(--accent, #c4944a);
  outline-offset: 2px;
  border-radius: 4px;
}
.dashboard-category-row__count {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  color: var(--mauve-800, #4f3645);
  transition: color var(--motion-fast, 120ms);
}

/* Program chip → native disclosure */
details.service-program-chip { cursor: pointer; }
details.service-program-chip[open] {
  background: var(--surface-raised, #fff);
  box-shadow: var(--elev-1, 0 1px 2px rgba(63, 42, 54, 0.06));
}
.service-program-chip > summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  position: relative;
  padding-right: 22px;
}
.service-program-chip > summary::-webkit-details-marker { display: none; }
.service-program-chip > summary::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--fs-18, 1.125rem);
  color: var(--text-muted, rgba(63, 42, 54, 0.5));
  font-weight: 300;
  transition: color var(--motion-fast, 120ms);
}
details.service-program-chip[open] > summary::after { content: "−"; color: var(--accent, #c4944a); }
.service-program-chip__detail {
  margin-top: var(--sp-3, 12px);
  padding-top: var(--sp-3, 12px);
  border-top: 1px solid var(--border-subtle, rgba(63, 42, 54, 0.08));
  font-size: var(--fs-13, 0.8125rem);
  color: var(--text-muted, rgba(63, 42, 54, 0.7));
  line-height: 1.55;
}
.service-program-chip__detail ul {
  margin: var(--sp-2, 8px) 0 0;
  padding-left: 1.1rem;
}
.service-program-chip__detail li { margin-bottom: 4px; }

.service-milestone p { margin: var(--sp-1) 0 0; color: var(--text-secondary); }

@media (max-width: 720px) {
  .service-overview-panel__header {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   Dashboard centerpiece — title-first hierarchy
   --------------------------------------------------------------------
   The greeting ("Welcome back, Edgar") is intentionally small and
   ornamental. The CENTERPIECE title "Client-Based Programs and
   Services Availed" is the dominant element on the page — that's the
   product name, the operator's anchor.
   ================================================================= */
.dashboard-centerpiece {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: end;
  padding: var(--sp-8) var(--sp-7);
  margin-bottom: var(--sp-6);
  background:
    radial-gradient(640px 360px at 110% -20%, rgba(247, 111, 21, 0.16), transparent 60%),
    radial-gradient(520px 320px at -10% 110%, rgba(245, 74, 125, 0.10), transparent 60%),
    var(--surface-card);
  border: 1px solid rgba(168, 71, 10, 0.16);
  border-radius: var(--r-3xl);
  box-shadow: 0 18px 48px rgba(140, 50, 10, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  position: relative;
  overflow: hidden;
}
.dashboard-centerpiece__greeting {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-13);
  color: var(--mauve-700);
  letter-spacing: 0.02em;
}
.dashboard-centerpiece__greeting strong { color: var(--mauve-900); font-weight: 700; }
.dashboard-centerpiece__date { color: var(--text-muted); }
.dashboard-centerpiece__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.dashboard-centerpiece__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--mauve-900);
  line-height: 1.02;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(168, 71, 10, 0.10);
}
.dashboard-centerpiece__lede {
  margin: 0;
  max-width: 64ch;
  color: var(--text-secondary);
  font-size: var(--fs-16);
  line-height: 1.55;
}
.dashboard-centerpiece__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
  flex-shrink: 0;
}
.dashboard-centerpiece__actions .btn { justify-content: space-between; min-width: 220px; }
@media (max-width: 880px) {
  .dashboard-centerpiece { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); }
  .dashboard-centerpiece__actions { flex-direction: row; flex-wrap: wrap; }
  .dashboard-centerpiece__actions .btn { min-width: 0; flex: 1 1 200px; }
}

/* Centerpiece hero — premium, magazine-cover energy */
.centerpiece-hero {
  background:
    linear-gradient(135deg, rgba(212, 168, 90, 0.10), transparent 50%),
    linear-gradient(225deg, rgba(201, 104, 90, 0.08), transparent 50%),
    var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  padding: var(--sp-10) var(--sp-8);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
  box-shadow: var(--elev-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: page-fade-in 600ms var(--ease-silk);
}
.centerpiece-hero::before {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(201, 104, 90, 0.12), transparent 70%);
  top: -120px; right: -100px;
  pointer-events: none;
}
.centerpiece-hero::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(125, 107, 160, 0.10), transparent 70%);
  bottom: -80px; left: -60px;
  pointer-events: none;
}
.centerpiece-hero > * { position: relative; z-index: 1; }

.centerpiece-hero__eyebrow {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 700;
  color: var(--rose-700);
  margin: 0 0 var(--sp-2);
}
.centerpiece-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  letter-spacing: var(--tracking-display);
  color: var(--mauve-900);
  line-height: 1.05;
}
.centerpiece-hero__lede {
  color: var(--text-secondary);
  max-width: 760px;
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 300;
  line-height: 1.55;
}

/* Filter bar — glass */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.filter-bar select, .filter-bar input {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0.45rem 0.75rem;
  font-size: var(--fs-14);
  font-family: inherit;
  background: var(--surface-raised);
  transition: border-color var(--motion-fast);
}
.filter-bar select:hover, .filter-bar input:hover { border-color: var(--rose-300); }
.filter-bar select:focus, .filter-bar input:focus {
  outline: 0;
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(201, 104, 90, 0.15);
}

/* Ledger row */
.ledger-row__client { display: flex; align-items: center; gap: var(--sp-3); }
.ledger-row__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mauve-200), var(--rose-200));
  color: var(--mauve-800);
  display: grid; place-items: center;
  font-weight: 500;
  font-size: var(--fs-14);
  flex-shrink: 0;
  font-family: var(--font-display);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.ledger-row__name { font-weight: 600; color: var(--mauve-900); }
.ledger-row__meta {
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Program pills — soft pastel chip set */
.program-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.program-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-12);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.program-pill--aics  { background: var(--rose-50);     color: var(--rose-700);     border-color: var(--rose-200); }
.program-pill--osca  { background: var(--champagne-50);color: var(--champagne-600);border-color: var(--champagne-200); }
.program-pill--pwd   { background: var(--lavender-50); color: var(--lavender-500); border-color: var(--lavender-200); }
.program-pill--solo  { background: var(--mauve-50);    color: var(--mauve-700);    border-color: var(--mauve-200); }
.program-pill--women { background: #fce7f0;            color: var(--berry-600);    border-color: #f9d2dd; }

/* Charts area */
.charts-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(12, 1fr);
}
.chart-tile {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.chart-tile--6 { grid-column: span 6; }
.chart-tile--4 { grid-column: span 4; }
.chart-tile--12 { grid-column: span 12; }
@media (max-width: 960px) {
  .chart-tile--6, .chart-tile--4 { grid-column: span 12; }
}

/* =================================================================
   /dashboard/reports — Recipients & Social Services Report
   --------------------------------------------------------------------
   Top-tier polish: hero with floating period chip, 6-tab period
   switcher with brand-tinted active pill, 4-up KPI cards (each KPI
   tinted with a different brand hue, never two-stop trust gradient),
   per-period at-a-glance strip, 30-day SVG sparkline, by-program
   horizontal bars, barangay top-10 ranked list, paginated transactions
   table with inline filter bar.
   ================================================================= */

.reports-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: end;
  padding: var(--sp-8) var(--sp-7);
  margin-bottom: var(--sp-5);
  background:
    radial-gradient(720px 360px at 110% -20%, rgba(247, 111, 21, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(168, 71, 10, 0.06), rgba(245, 74, 125, 0.04)),
    var(--surface-card);
  border: 1px solid rgba(168, 71, 10, 0.16);
  border-radius: var(--r-3xl);
  box-shadow: 0 18px 48px rgba(140, 50, 10, 0.10), inset 0 1px 0 rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
}
.reports-hero__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.reports-hero__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--mauve-900);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.reports-hero__lede {
  margin: 0;
  max-width: 60ch;
  color: var(--text-secondary);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.reports-hero__period-now {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(168, 71, 10, 0.20);
  border-radius: var(--r-2xl);
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.reports-hero__period-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mauve-700);
  font-weight: 700;
}
.reports-hero__period-value {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--mauve-900);
  font-weight: 600;
}
@media (max-width: 720px) {
  .reports-hero { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); }
  .reports-hero__period-now { text-align: left; }
}

.reports-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.reports-tabs__tab {
  padding: 0.6rem 1.05rem 0.7rem;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--mauve-700);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background var(--motion-fast), color var(--motion-fast),
              transform var(--motion-medium) var(--ease-emphasized),
              box-shadow var(--motion-medium) var(--ease-emphasized);
  --tab-tint: var(--mauve-700);
}
.reports-tabs__tab[data-tone="today"]      { --tab-tint: var(--mauve-700); }
.reports-tabs__tab[data-tone="this_week"]  { --tab-tint: var(--rose-700); }
.reports-tabs__tab[data-tone="this_month"] { --tab-tint: var(--champagne-600); }
.reports-tabs__tab[data-tone="this_year"]  { --tab-tint: var(--berry-600); }
.reports-tabs__tab[data-tone="all_time"]   { --tab-tint: var(--mauve-800); }
.reports-tabs__tab[data-tone="custom"]     { --tab-tint: var(--lavender-500); }
.reports-tabs__tab:hover {
  color: var(--tab-tint);
  background: rgba(168, 71, 10, 0.06);
  transform: translateY(-1px);
}
.reports-tabs__tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--tab-tint), color-mix(in srgb, var(--tab-tint) 75%, #000 25%));
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px -4px color-mix(in srgb, var(--tab-tint) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.reports-custom-range {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: end;
  margin: var(--sp-3) 0 var(--sp-5);
}

.reports-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.reports-kpi {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-2);
  isolation: isolate;
  overflow: hidden;
}
.reports-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--_tint, var(--mauve-700));
  opacity: 0.95;
}
.reports-kpi--accent  { --_tint: var(--mauve-700); }
.reports-kpi--gold    { --_tint: var(--champagne-500); }
.reports-kpi--success { --_tint: var(--success-500); }
.reports-kpi--berry   { --_tint: var(--berry-500); }
.reports-kpi__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mauve-700);
}
.reports-kpi__value {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: var(--mauve-900);
  line-height: 1;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.reports-kpi__delta { margin: 0; font-size: var(--fs-12); color: var(--text-muted); }

.reports-compare {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-1);
}
.reports-compare__head { margin-bottom: var(--sp-4); }
.reports-compare__head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--mauve-900);
  font-weight: 600;
}
.reports-compare__head p { margin: 0; color: var(--text-muted); font-size: var(--fs-14); }
.reports-compare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.reports-compare__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: rgba(255, 240, 230, 0.50);
  border: 1px solid rgba(168, 71, 10, 0.10);
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-fast), border-color var(--motion-fast),
              transform var(--motion-medium) var(--ease-emphasized);
}
.reports-compare__cell:hover {
  background: rgba(255, 230, 215, 0.72);
  border-color: rgba(168, 71, 10, 0.24);
  transform: translateY(-2px);
}
.reports-compare__cell.is-current {
  background: linear-gradient(180deg, rgba(247, 111, 21, 0.10), rgba(245, 74, 125, 0.06));
  border-color: var(--mauve-500);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.reports-compare__label {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--mauve-700);
  font-weight: 700;
}
.reports-compare__big {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  color: var(--mauve-900);
  font-weight: 600;
  line-height: 1.1;
}
.reports-compare__sub { margin: 0; font-size: var(--fs-12); color: var(--text-muted); }

.reports-sparkline {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-1);
}
.reports-sparkline header { margin-bottom: var(--sp-3); }
.reports-sparkline header h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--mauve-900);
  font-weight: 600;
}
.reports-sparkline header p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }
.reports-sparkline svg { width: 100%; height: 80px; display: block; }
.reports-sparkline__legend { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--text-muted); }

.reports-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
@media (max-width: 880px) { .reports-grid { grid-template-columns: 1fr; } }

.reports-card {
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-1);
}
.reports-card--full { grid-column: 1 / -1; }
.reports-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.reports-card__head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--mauve-900);
  font-weight: 600;
}
.reports-card__head p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }

.reports-card__inline-filter { display: flex; gap: var(--sp-2); align-items: center; }
.reports-card__inline-filter .form-input--sm,
.reports-card__inline-filter .form-select--sm {
  min-height: 36px; padding: 0.4rem 0.7rem; font-size: var(--fs-13);
}

.reports-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.reports-bar {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-fast);
}
.reports-bar:hover { background: rgba(247, 111, 21, 0.05); }
.reports-bar__label { font-weight: 700; font-size: var(--fs-14); color: var(--mauve-900); }
.reports-bar__track {
  height: 14px;
  background: rgba(168, 71, 10, 0.08);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.reports-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mauve-500), var(--mauve-700));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.reports-bar__fill[data-program="aics"]        { background: linear-gradient(90deg, var(--mauve-400), var(--mauve-600)); }
.reports-bar__fill[data-program="osca"]        { background: linear-gradient(90deg, var(--champagne-300), var(--champagne-500)); }
.reports-bar__fill[data-program="pwd"]         { background: linear-gradient(90deg, var(--mauve-500), var(--mauve-800)); }
.reports-bar__fill[data-program="solo_parent"] { background: linear-gradient(90deg, var(--rose-300), var(--rose-500)); }
.reports-bar__fill[data-program="women"]       { background: linear-gradient(90deg, #db4775, var(--berry-600)); }
.reports-bar__meta { text-align: right; }
.reports-bar__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--mauve-900);
  line-height: 1;
}
.reports-bar__meta small { display: block; color: var(--text-muted); font-size: var(--fs-12); margin-top: 2px; }

.reports-rank { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: rank; }
.reports-rank li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
}
.reports-rank li:nth-child(odd) { background: rgba(255, 250, 245, 0.6); }
.reports-rank__index {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mauve-700);
  color: #fff;
  display: grid; place-items: center;
  font-size: var(--fs-12);
  font-weight: 700;
}
.reports-rank__name { font-weight: 600; color: var(--mauve-900); font-size: var(--fs-14); }
.reports-rank__bar {
  height: 8px;
  background: rgba(168, 71, 10, 0.08);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.reports-rank__bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--rose-400), var(--mauve-600));
  border-radius: var(--r-pill);
}
.reports-rank__meta { text-align: right; font-size: var(--fs-13); color: var(--mauve-800); }
.reports-rank__meta strong { color: var(--mauve-900); }
.reports-rank__meta small { display: block; color: var(--text-muted); font-size: var(--fs-12); }

.table-scroll { width: 100%; overflow-x: auto; }
.table--reports { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table--reports th, .table--reports td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.table--reports th {
  background: rgba(255, 240, 230, 0.55);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mauve-700);
  white-space: nowrap;
}
.table--reports td.num, .table--reports th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--reports tbody tr:hover { background: rgba(247, 111, 21, 0.04); }
.table--reports a { color: var(--mauve-800); text-decoration: none; font-weight: 600; }
.table--reports a:hover { text-decoration: underline; }
.table--reports small { display: block; font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }

.reports-empty {
  margin: 0;
  padding: var(--sp-5);
  background: rgba(255, 250, 245, 0.6);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-align: center;
}

.reports-footnote {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 240, 224, 0.5);
  border-left: 4px solid var(--mauve-500);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--fs-13);
}
.reports-footnote strong { color: var(--mauve-800); }

@media (prefers-reduced-motion: reduce) {
  .reports-tabs__tab,
  .reports-compare__cell { transition: none; }
  .reports-tabs__tab:hover,
  .reports-tabs__tab.is-active,
  .reports-compare__cell:hover { transform: none; }
}

/* ============================================================================
   Legal-basis panel — surfaces the SP ordinances that legally back each
   program. Visual rationale: paper-document feel (warm off-white surface,
   restrained mauve typography, mono numerals for ordinance numbers) so it
   reads as authoritative reference material, not "feature card". Reuses
   brand tokens; no new colours.
   ============================================================================ */
.legal-basis-panel {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, #fffaf6 0%, #fff5ee 100%);
  border: 1px solid var(--ivory-300);
  border-left: 3px solid var(--rose-500);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(60,28,38,0.04);
}
.legal-basis-panel__head { margin-bottom: var(--sp-4); }
.legal-basis-panel__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--rose-700, #a8470a);
  margin-bottom: 4px;
}
.legal-basis-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  margin: 0 0 4px;
  color: var(--mauve-900);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.legal-basis-panel__lede {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.legal-basis-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.legal-basis-panel__item {
  background: #fff;
  border: 1px solid var(--ivory-200);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.legal-basis-panel__item:hover {
  border-color: var(--rose-300);
  box-shadow: 0 4px 10px -6px rgba(60,28,38,0.12);
}
.legal-basis-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.legal-basis-panel__stem {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--mauve-900);
  letter-spacing: 0.01em;
}
.legal-basis-panel__decade {
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.legal-basis-panel__links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.legal-basis-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--fs-12);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-sm, 6px);
  background: var(--rose-500);
  color: #fff;
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.legal-basis-panel__link:hover {
  background: var(--rose-600, #b8395a);
  transform: translateY(-1px);
}
.legal-basis-panel__link--ghost {
  background: transparent;
  color: var(--rose-700, #a8470a);
  border: 1px solid var(--rose-300);
}
.legal-basis-panel__link--ghost:hover {
  background: var(--rose-50);
  color: var(--rose-700, #a8470a);
}
.legal-basis-panel__hits {
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .legal-basis-panel__item,
  .legal-basis-panel__link { transition: none; }
  .legal-basis-panel__link:hover { transform: none; }
}