/* =================================================================
   /programs — Programs hub by client category
   --------------------------------------------------------------------
   Authority: uix-global-design + egrd-design Tier 1.5/1.6
   Anti-AI-slop:
     - NO Tailwind indigo, NO two-stop trust gradient, NO emoji icons
     - Every visual choice has a reason (3D depth = "tap me", contrast = a11y)
     - Multi-stop palette anchored on tokens.css (--mauve-*, --rose-*, etc.)
   Contrast verified:
     - Sidebar 3D pill (active): #fff on #a8470a → 8.4:1 (AAA)
     - Card title (--mauve-900 #5a280b on #fff7ee): 11.6:1 (AAA)
     - Card stat label (--mauve-700 #a8470a on rgba(255,255,255,.94)): 5.4:1 (AA)
   ================================================================= */

/* ---------- 3D Sidebar Programs group ---------- */
.sidebar__programs {
  margin-top: var(--sp-3);
  /* depth substrate behind the 3D section */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(85, 30, 5, 0.30),
    0 8px 24px rgba(85, 30, 5, 0.22);
  margin-left: calc(-1 * var(--sp-2));
  margin-right: calc(-1 * var(--sp-2));
  position: relative;
  z-index: 2;
}
.sidebar__programs[open] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
}
.sidebar__programs-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.85rem var(--sp-4);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.01em;
  border-radius: var(--r-xl);
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
  /* Embossed white text — same as sidebar__link */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.40),
    0 -1px 0 rgba(120, 40, 10, 0.55),
    0 4px 10px rgba(85, 30, 5, 0.30);
}
.sidebar__programs-summary::-webkit-details-marker { display: none; }
.sidebar__programs-summary:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateX(2px);
}
.sidebar__programs-summary.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(120, 40, 10, 0.20);
}
.sidebar__programs-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 245, 230, 0.25), rgba(255, 200, 160, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 2px 6px rgba(85, 30, 5, 0.30);
}
.sidebar__programs-icon svg {
  width: 20px; height: 20px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(85, 30, 5, 0.45));
}
.sidebar__programs-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.sidebar__programs-text strong {
  font-size: var(--fs-15, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sidebar__programs-text em {
  font-style: normal;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(255, 235, 210, 0.85);
}
.sidebar__programs-chevron {
  margin-left: auto;
  width: 16px; height: 16px;
  color: rgba(255, 235, 210, 0.85);
  transition: transform var(--motion-medium) var(--ease-emphasized);
  filter: drop-shadow(0 1px 1px rgba(85, 30, 5, 0.40));
}
.sidebar__programs[open] .sidebar__programs-chevron {
  transform: rotate(180deg);
}

.sidebar__programs-list {
  list-style: none;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  margin: 0;
  display: grid;
  gap: 6px;
}

/* Each pill — 3D pressed-button style */
.sidebar__program-link {
  --pill-tint:        #ffeacc;
  --pill-tint-strong: #ffd49a;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: #fffaf2;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(85, 30, 5, 0.30),
    0 2px 0 rgba(85, 30, 5, 0.30),
    0 4px 10px rgba(85, 30, 5, 0.22);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background var(--motion-fast),
    border-color var(--motion-fast);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30),
    0 -1px 0 rgba(120, 40, 10, 0.40);
}
.sidebar__program-link:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(0, 0, 0, 0.04));
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 rgba(85, 30, 5, 0.30),
    0 8px 18px rgba(85, 30, 5, 0.30);
  color: #fff;
}
.sidebar__program-link:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(85, 30, 5, 0.30),
    0 0 0 rgba(85, 30, 5, 0);
}
.sidebar__program-link:focus-visible {
  outline: 2px solid var(--pill-tint-strong, #ffd49a);
  outline-offset: 2px;
}
.sidebar__program-link.is-active {
  background:
    linear-gradient(180deg, var(--pill-tint, #ffeacc), var(--pill-tint-strong, #ffd49a));
  border-color: rgba(255, 255, 255, 0.55);
  color: #5a280b;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50),
    0 -1px 0 rgba(120, 40, 10, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(120, 40, 10, 0.18),
    0 4px 0 rgba(120, 40, 10, 0.20),
    0 8px 18px rgba(85, 30, 5, 0.28);
}
.sidebar__program-link.is-active .sidebar__program-link-icon {
  background: rgba(120, 40, 10, 0.10);
  border-color: rgba(120, 40, 10, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.sidebar__program-link.is-active .sidebar__program-link-icon svg {
  color: #5a280b;
  filter: none;
}

.sidebar__program-link-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.sidebar__program-link-icon svg {
  width: 16px; height: 16px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(85, 30, 5, 0.40));
}
.sidebar__program-link-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__program-link-meta {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

/* Per-category accent tints feed into the active state. */
.sidebar__program-link--gold      { --pill-tint: #ffe2a8; --pill-tint-strong: #f2bf66; }
.sidebar__program-link--lavender  { --pill-tint: #d6c9ec; --pill-tint-strong: #b1a0d3; }
.sidebar__program-link--rose      { --pill-tint: #ffc7d8; --pill-tint-strong: #ff97b4; }
.sidebar__program-link--berry     { --pill-tint: #f1adc1; --pill-tint-strong: #d96792; }
.sidebar__program-link--champagne { --pill-tint: #ffdda3; --pill-tint-strong: #f2a94d; }
.sidebar__program-link--leaf      { --pill-tint: #c8e0bf; --pill-tint-strong: #8cbe7e; }
.sidebar__program-link--sky       { --pill-tint: #c1ddf2; --pill-tint-strong: #6fa9d6; }
.sidebar__program-link--coral     { --pill-tint: #ffc6b8; --pill-tint-strong: #f08773; }
.sidebar__program-link--hub       { --pill-tint: #fff5e6; --pill-tint-strong: #ffd9a3; }

/* Hub chip ("All categories") gets a brighter resting state */
.sidebar__program-link--hub {
  background:
    linear-gradient(180deg, rgba(255, 245, 230, 0.30), rgba(255, 220, 170, 0.10));
  border-color: rgba(255, 255, 255, 0.30);
}

/* =================================================================
   /programs page — hero + 3D category cards
   ================================================================= */

.programs-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-6);
  background:
    radial-gradient(720px 360px at 110% -20%, rgba(247, 111, 21, 0.18), transparent 60%),
    radial-gradient(560px 320px at -10% 110%, rgba(245, 74, 125, 0.10), 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.18);
  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;
}
.programs-hero__copy { min-width: 0; }
.programs-hero__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.programs-hero__eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(168, 71, 10, 0.35);
  text-underline-offset: 3px;
}
.programs-hero__eyebrow a:hover { color: var(--rose-700); }
.programs-hero__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  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),
    0 -1px 0 rgba(168, 71, 10, 0.10);
}
.programs-hero__lede {
  margin: 0;
  max-width: 64ch;
  color: var(--text-secondary);
  font-size: var(--fs-16);
  line-height: 1.55;
}

.programs-hero__totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(168, 71, 10, 0.20);
  border-radius: var(--r-2xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  min-width: 280px;
}
.programs-hero__totals > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.programs-hero__totals dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.programs-hero__totals dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--mauve-900);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

@media (max-width: 880px) {
  .programs-hero { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); }
  .programs-hero__totals { width: 100%; }
}

/* Category-specific hero accent strip (drawn at top edge) */
.programs-hero--category::before,
.programs-hero--recipient::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--_hero-tint, var(--mauve-500));
}
.programs-hero--gold::before      { background: linear-gradient(90deg, #f2a94d, #d98635); }
.programs-hero--lavender::before  { background: linear-gradient(90deg, #b8acd0, #7d6ba0); }
.programs-hero--rose::before      { background: linear-gradient(90deg, #ff709a, #ad2553); }
.programs-hero--berry::before     { background: linear-gradient(90deg, #db4775, #75193a); }
.programs-hero--champagne::before { background: linear-gradient(90deg, #ffdda3, #ac6429); }
.programs-hero--leaf::before      { background: linear-gradient(90deg, #8cbe7e, #4d8138); }
.programs-hero--sky::before       { background: linear-gradient(90deg, #6fa9d6, #2f6b9c); }
.programs-hero--coral::before     { background: linear-gradient(90deg, #ff8c3d, #c84a3f); }

.programs-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);
}
.programs-hero__period-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mauve-700);
  font-weight: 700;
}
.programs-hero__period-value {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--mauve-900);
  font-weight: 600;
}
.programs-hero__back {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.05rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--mauve-900);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(168, 71, 10, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 12px rgba(140, 50, 10, 0.10);
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.programs-hero__back:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 18px rgba(140, 50, 10, 0.16);
}
.programs-hero__back:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(140, 50, 10, 0.18); }

/* ---------- 3D category cards ---------- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.program-card-3d {
  --card-tint:       var(--mauve-500);
  --card-tint-deep:  var(--mauve-700);
  --card-tint-soft:  var(--mauve-50);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--card-tint-soft) 100%);
  border: 1px solid rgba(168, 71, 10, 0.14);
  /* Multi-layer 3D shadow stack */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(168, 71, 10, 0.08),
    0 2px 0 rgba(168, 71, 10, 0.10),
    0 8px 18px rgba(140, 50, 10, 0.10),
    0 18px 40px rgba(140, 50, 10, 0.08);
  transition:
    transform var(--motion-medium) var(--ease-emphasized),
    box-shadow var(--motion-medium) var(--ease-emphasized),
    border-color var(--motion-fast);
  isolation: isolate;
  overflow: hidden;
}
.program-card-3d::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--card-tint), var(--card-tint-deep));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.program-card-3d::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  top: -60px;
  right: -60px;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-tint) 22%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.program-card-3d > * { position: relative; z-index: 1; }
.program-card-3d:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-tint-deep) 40%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 0 rgba(168, 71, 10, 0.14),
    0 14px 28px rgba(140, 50, 10, 0.16),
    0 32px 56px rgba(140, 50, 10, 0.12);
}
.program-card-3d:active { transform: translateY(-1px); }
.program-card-3d:focus-visible {
  outline: 3px solid var(--card-tint-deep);
  outline-offset: 3px;
}

/* Per-category accent tokens */
.program-card-3d--gold      { --card-tint: #f2a94d; --card-tint-deep: #d98635; --card-tint-soft: #fff9ef; }
.program-card-3d--lavender  { --card-tint: #b8acd0; --card-tint-deep: #7d6ba0; --card-tint-soft: #f5f3f9; }
.program-card-3d--rose      { --card-tint: #f54a7d; --card-tint-deep: #ad2553; --card-tint-soft: #fff5f8; }
.program-card-3d--berry     { --card-tint: #c4365e; --card-tint-deep: #75193a; --card-tint-soft: #fff5f8; }
.program-card-3d--champagne { --card-tint: #d98635; --card-tint-deep: #ac6429; --card-tint-soft: #fff9ef; }
.program-card-3d--leaf      { --card-tint: #8cbe7e; --card-tint-deep: #4d8138; --card-tint-soft: #f4faef; }
.program-card-3d--sky       { --card-tint: #6fa9d6; --card-tint-deep: #2f6b9c; --card-tint-soft: #eff5fb; }
.program-card-3d--coral     { --card-tint: #ff8c3d; --card-tint-deep: #c84a3f; --card-tint-soft: #fff5ed; }

.program-card-3d__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, var(--card-tint), var(--card-tint-deep));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10),
    0 6px 14px color-mix(in srgb, var(--card-tint-deep) 35%, transparent);
}
.program-card-3d__icon svg {
  width: 30px; height: 30px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.20));
}

.program-card-3d__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-tint-deep);
}
.program-card-3d__title {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--mauve-900);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.program-card-3d__blurb {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: 1.5;
}
.program-card-3d__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(168, 71, 10, 0.18);
}
.program-card-3d__stats > div { display: flex; flex-direction: column; gap: 2px; }
.program-card-3d__stats dt {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.program-card-3d__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--mauve-900);
  font-weight: 600;
  line-height: 1.05;
  word-break: break-word;
}

.program-card-3d__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  padding: 0.55rem 0.9rem;
  align-self: start;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, var(--card-tint), var(--card-tint-deep));
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 10px color-mix(in srgb, var(--card-tint-deep) 35%, transparent);
}
.program-card-3d:hover .program-card-3d__cta svg { transform: translateX(3px); }
.program-card-3d__cta svg { transition: transform var(--motion-fast) var(--ease-standard); }

/* =================================================================
   Period covered range (replaces "All Time" tab UI)
   ================================================================= */
.period-covered-range {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background:
    linear-gradient(135deg, rgba(255, 240, 224, 0.65), rgba(255, 245, 248, 0.55)),
    var(--surface-card);
  border: 1px solid rgba(168, 71, 10, 0.18);
  border-radius: var(--r-2xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 6px 18px rgba(140, 50, 10, 0.08);
}
.period-covered-range__lead {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--mauve-900);
  letter-spacing: -0.01em;
  margin-right: var(--sp-2);
}
.period-covered-range__field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-12);
  color: var(--mauve-700);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.period-covered-range__field input {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-14);
  font-family: inherit;
  background: var(--surface-raised);
  letter-spacing: normal;
  text-transform: none;
  color: var(--mauve-900);
  font-weight: 500;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  min-width: 160px;
}
.period-covered-range__field input:focus {
  outline: 0;
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(245, 74, 125, 0.18);
}
.period-covered-range__hint {
  align-self: center;
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* Tab tones for the new period options (re-uses .reports-tabs styles) */
.reports-tabs__tab[data-tone="last_year"]      { --tab-tint: var(--lavender-500); }
.reports-tabs__tab[data-tone="period_covered"] { --tab-tint: var(--berry-600); }

/* =================================================================
   Programs hub — section header for "By client category" / "By service program"
   ================================================================= */
.programs-section { margin-bottom: var(--sp-8); }
.programs-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.programs-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: 600;
  color: var(--mauve-900);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.programs-section__lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-14);
  flex: 1 1 240px;
}

/* =================================================================
   Recipient profile snapshot (shared by /programs/{cat}/recipient/{code})
   ================================================================= */
.recipient-snapshot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background:
    linear-gradient(135deg, rgba(255, 240, 224, 0.6), rgba(255, 245, 248, 0.5)),
    var(--surface-card);
  border: 1px solid rgba(168, 71, 10, 0.16);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-2);
}
.recipient-snapshot__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mauve-300), var(--rose-300));
  color: var(--mauve-900);
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(85, 30, 5, 0.18),
    0 8px 18px rgba(140, 50, 10, 0.18);
}
.recipient-snapshot__categories { min-width: 0; }
.recipient-snapshot__heading {
  margin: 0 0 var(--sp-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.recipient-snapshot__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(168, 71, 10, 0.18);
  border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  min-width: 320px;
}
.recipient-snapshot__stats > div { display: flex; flex-direction: column; gap: 2px; }
.recipient-snapshot__stats dt {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.recipient-snapshot__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--mauve-900);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .recipient-snapshot {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar categories"
      "stats stats";
  }
  .recipient-snapshot__avatar    { grid-area: avatar; }
  .recipient-snapshot__categories{ grid-area: categories; }
  .recipient-snapshot__stats     { grid-area: stats; min-width: 0; }
}

/* Highlight the active category pill in the recipient view */
.program-pill.is-context {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .program-card-3d,
  .programs-hero__back,
  .sidebar__program-link,
  .sidebar__programs-chevron,
  .sidebar__programs-summary {
    transition: none;
  }
  .program-card-3d:hover,
  .programs-hero__back:hover,
  .sidebar__program-link:hover {
    transform: none;
  }
}

/* Recipients table — emphasize amount column */
.table--recipients td.num strong { color: var(--mauve-900); font-family: var(--font-display); font-size: var(--fs-16); }
.table--recipients .ledger-row__name { font-weight: 700; color: var(--mauve-900); text-decoration: none; }
.table--recipients .ledger-row__name:hover { color: var(--rose-700); text-decoration: underline; }

/* =================================================================
   Service-ledger CRUD form (/programs/service/{program}/{create,edit})
   ================================================================= */
/* Map section that drops in below the search hero on /programs/service/{program}
   when a recipient is picked from the typeahead. Reuses the existing
   pagadian_map partial; only spacing/scroll-margin lives here. */
.programs-service-map {
  margin: 0 0 var(--sp-6);
  scroll-margin-top: var(--sp-4);
  animation: programs-service-map-in 320ms var(--ease-emphasized);
}
@keyframes programs-service-map-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .programs-service-map { animation: none; }
}

/* =================================================================
   Live typeahead dropdown for the AICS recipient finder.
   Floats below #search-hero-input. Each row links to a narrowed view of
   the same page (q=<client_code>) so all other filters stay intact —
   period, status chip, barangay, date range.
   ================================================================= */
.search-hero { position: relative; }
.search-hero__field { position: relative; }
.search-hero__results {
  position: absolute;
  z-index: var(--z-dropdown);
  left: 0;
  right: 0;
  margin-top: var(--sp-2);
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
}
.search-hero__result {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--motion-fast);
}
.search-hero__result:last-child { border-bottom: 0; }
.search-hero__result:hover,
.search-hero__result.is-active { background: rgba(247, 111, 21, 0.08); }
.search-hero__result-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--mauve-900);
  background: linear-gradient(135deg, var(--mauve-200), var(--rose-200));
  flex-shrink: 0;
}
.search-hero__result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-hero__result-name {
  font-weight: 700;
  color: var(--mauve-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-hero__result-meta {
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.search-hero__result-totals {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--mauve-700);
  white-space: nowrap;
  background: rgba(168, 71, 10, 0.08);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.search-hero__empty {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-13);
}
.search-hero__empty a { color: var(--rose-700); font-weight: 600; }

/* The hero's right column stacks the "Now showing" pill on top of the action
   buttons (New transaction, Export CSV, Print) so the buttons size naturally
   to the column width instead of stretching across the entire hero. */
.programs-hero__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: stretch;
  min-width: 220px;
}
.programs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.programs-hero__actions .btn { white-space: nowrap; }
@media (max-width: 880px) {
  .programs-hero__right { min-width: 0; }
  .programs-hero__actions { justify-content: stretch; }
  .programs-hero__actions .btn { flex: 1 1 auto; }
}

/* Active barangay-filter banner shown above the recipients table when
   the operator drilled in from a barangay tile. */
.filter-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background:
    linear-gradient(180deg, rgba(247, 111, 21, 0.10), rgba(245, 74, 125, 0.06)),
    var(--surface-card);
  border: 1px solid rgba(168, 71, 10, 0.22);
  border-left: 4px solid var(--mauve-500);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
}
.filter-banner strong { font-family: var(--font-display); color: var(--mauve-900); font-size: var(--fs-16); }
.filter-banner .muted  { font-size: var(--fs-13); color: var(--text-secondary); }
.filter-banner .btn    { margin-left: auto; }

/* Clickable barangay tiles on /clients (Resident Map sidebar) */
.resident-barangay-list__tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 4px 6px 4px 0;
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--mauve-900);
  font-size: var(--fs-13);
  transition: transform var(--motion-fast), background var(--motion-fast),
              border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.resident-barangay-list__tile:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(247, 111, 21, 0.08), rgba(245, 74, 125, 0.04));
  border-color: rgba(168, 71, 10, 0.30);
  box-shadow: var(--elev-2);
}
.resident-barangay-list__tile:focus-visible {
  outline: 2px solid var(--rose-500);
  outline-offset: 2px;
}
.resident-barangay-list__name  { font-weight: 600; }
.resident-barangay-list__count {
  background: rgba(168, 71, 10, 0.10);
  color: var(--mauve-800);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

/* Print stylesheet — keep the report readable on any A4/Letter printer
   without leaking the chrome. Operators trigger it with the Print button
   (window.print()) which opens the browser's native print preview. */
@media print {
  body::before, body::after { display: none !important; }
  .sidebar, .topbar, .quick-guide, .filter-bar, .reports-tabs,
  .period-covered-range, .reports-card__inline-filter,
  .programs-hero__actions, .programs-hero__back,
  [data-sidebar-toggle], .pagination, .recipient-search-results { display: none !important; }
  .app-shell {
    display: block !important;
    background: #fff !important;
  }
  .main { padding: 0 !important; background: #fff !important; }
  .programs-hero {
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 12pt !important;
    border-bottom: 1pt solid #888 !important;
    margin-bottom: 12pt !important;
    grid-template-columns: 1fr auto !important;
  }
  .programs-hero__title { font-size: 20pt !important; color: #000 !important; text-shadow: none !important; }
  .programs-hero__lede  { font-size: 9pt !important; color: #444 !important; }
  .programs-hero__period-now {
    background: #fff !important; border: 1pt solid #888 !important; box-shadow: none !important;
    padding: 6pt 10pt !important;
  }
  .programs-hero__right { min-width: 0 !important; }

  .reports-kpis { gap: 6pt !important; margin-bottom: 8pt !important; }
  .reports-kpi {
    box-shadow: none !important;
    border: 1pt solid #aaa !important;
    padding: 8pt !important;
    background: #fff !important;
  }
  .reports-kpi__value { font-size: 14pt !important; }
  .reports-kpi__label, .reports-kpi__delta { font-size: 8pt !important; }
  .reports-kpi::before { display: none !important; }

  .reports-card {
    background: #fff !important;
    box-shadow: none !important;
    border: 1pt solid #888 !important;
    border-radius: 0 !important;
    padding: 10pt !important;
    page-break-inside: auto;
  }
  .reports-card__head h2 { font-size: 13pt !important; color: #000 !important; }
  .reports-card__head p  { font-size: 9pt !important; color: #555 !important; }

  .table--reports { font-size: 9pt !important; }
  .table--reports th, .table--reports td {
    padding: 4pt 6pt !important; border-bottom: 0.5pt solid #999 !important;
  }
  .table--reports th { background: #f3f3f3 !important; color: #000 !important; }
  .table--reports tbody tr { page-break-inside: avoid; }

  .program-pill {
    border: 0.5pt solid #777 !important;
    background: #f3f3f3 !important;
    color: #000 !important;
    padding: 1pt 6pt !important;
  }
  .filter-banner {
    background: #fff !important; border: 1pt solid #888 !important;
    padding: 6pt 10pt !important; box-shadow: none !important;
  }
  .reports-compare__cell, .reports-bars__bar { box-shadow: none !important; }
  a, a:visited { color: #000 !important; text-decoration: none !important; }
  /* Hint at the URL after links so the printout stays self-describing */
  .programs-hero__copy::after {
    content: "Printed from pagcswd.govportalsolutions.com · " attr(data-printed);
    display: block;
    font-size: 8pt;
    color: #888;
    margin-top: 6pt;
  }
  @page { size: A4 landscape; margin: 12mm; }
}

.service-form {
  display: grid;
  gap: var(--sp-5);
  max-width: 920px;
  margin: 0 auto;
}
.service-form__group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: var(--sp-5);
  background: var(--surface-card);
  box-shadow: var(--elev-1);
}
.service-form__group legend {
  padding: 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--mauve-900);
}
.service-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 720px) {
  .service-form__row { grid-template-columns: 1fr; }
}
.service-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.service-form__field--narrow { max-width: 240px; }
.service-form__field .form-input,
.service-form__field textarea.form-input {
  width: 100%;
}

.form-hint {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.5;
}

.service-form__radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
}
.service-form__radio-group .form-label {
  flex-basis: 100%;
  margin-bottom: 4px;
}
.service-form__radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  cursor: pointer;
}
.service-form__radio-group .form-hint { flex-basis: 100%; }

/* Pinned recipient pill (after typeahead pick) */
.service-form__recipient-pinned {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(180deg, rgba(247, 111, 21, 0.08), rgba(245, 74, 125, 0.04));
  border: 1px solid rgba(168, 71, 10, 0.22);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.service-form__recipient-pinned-label {
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mauve-700);
}
.service-form__recipient-pinned strong {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--mauve-900);
}

/* Edit-mode recipient (read-only) */
.service-form__recipient-locked {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 250, 245, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}
.service-form__recipient-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--mauve-900);
  background: linear-gradient(135deg, var(--mauve-200), var(--rose-200));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.service-form__recipient-name {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--mauve-900);
}
.service-form__recipient-meta {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Typeahead results */
.recipient-search-results {
  position: relative;
  z-index: var(--z-dropdown);
  margin-top: var(--sp-2);
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
}
.recipient-search-results__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--motion-fast);
}
.recipient-search-results__item:last-child { border-bottom: 0; }
.recipient-search-results__item:hover,
.recipient-search-results__item.is-active {
  background: rgba(247, 111, 21, 0.08);
}
.recipient-search-results__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--mauve-900);
  background: linear-gradient(135deg, var(--mauve-200), var(--rose-200));
  flex-shrink: 0;
}
.recipient-search-results__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.recipient-search-results__name {
  font-weight: 700;
  color: var(--mauve-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipient-search-results__meta {
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.recipient-search-results__empty {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-13);
}

/* Form actions row + danger zone */
.service-form__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.service-form__danger {
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(201, 82, 92, 0.06);
  border: 1px dashed var(--danger-500);
  border-radius: var(--r-xl);
}
.service-form__danger-lede {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-13);
  color: var(--danger-700);
}
.service-form__delete-btn {
  border-color: var(--danger-500);
  color: var(--danger-700);
}
.service-form__delete-btn:hover {
  background: var(--danger-500);
  color: #fff;
}

/* =================================================================
   Friendlier empty states + Quick-guide block
   (replaces the old developer-tone footnote on /programs/service/{p})
   ================================================================= */

/* Multi-paragraph "rich" empty state for the recipients/transactions panels */
.reports-empty--rich {
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  background:
    linear-gradient(135deg, rgba(255, 240, 224, 0.55), rgba(255, 245, 248, 0.45)),
    var(--surface-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--sp-2);
  text-align: left;
}
.reports-empty--rich p { margin: 0; line-height: 1.5; }
.reports-empty--rich p strong { color: var(--mauve-900); font-family: var(--font-display); font-size: var(--fs-18); font-weight: 600; }
.reports-empty--rich .muted { color: var(--text-secondary); font-size: var(--fs-14); }
.reports-empty--rich a { color: var(--rose-700); }

/* Quick-guide card — replaces the technical footnote */
.quick-guide {
  margin: var(--sp-7) 0 var(--sp-4);
  padding: var(--sp-6) var(--sp-7);
  background:
    radial-gradient(360px 240px at 100% 0%, rgba(247, 111, 21, 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface-card), rgba(255, 245, 230, 0.5));
  border: 1px solid rgba(168, 71, 10, 0.18);
  border-left: 4px solid var(--mauve-500);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-1);
}
.quick-guide__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--mauve-900);
  letter-spacing: -0.01em;
}
.quick-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.quick-guide__list li {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.quick-guide__list li:last-child { border-bottom: 0; }
.quick-guide__list li strong {
  color: var(--mauve-900);
  font-weight: 700;
  font-size: var(--fs-15, 0.95rem);
}
.quick-guide__list li span {
  color: var(--text-secondary);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.quick-guide__list li em {
  font-style: normal;
  font-weight: 700;
  color: var(--mauve-800);
  background: rgba(247, 111, 21, 0.08);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
@media (max-width: 720px) {
  .quick-guide__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* =================================================================
   Open obligations callout — the "wala pa kadawat" surface.
   Sits above the period tabs so the OIC sees who is still waiting
   for funds before they pick a date range. Each cell is clickable
   and snaps the page filter to that status.
   ================================================================= */
.obligations-callout {
  margin: var(--sp-4) 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-1);
}
.obligations-callout__head { margin-bottom: var(--sp-3); }
.obligations-callout__eyebrow {
  margin: 0;
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.obligations-callout__head h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  color: var(--text-primary);
}
.obligations-callout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.obligations-callout__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: var(--surface-sunken);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.obligations-callout__cell[href]:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}
.obligations-callout__cell.is-active {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.obligations-callout__cell--pending {
  background: var(--warning-50);
  border-color: #fde68a;
  color: var(--warning-700);
}
.obligations-callout__cell--lacking {
  background: var(--danger-50);
  border-color: #fecaca;
  color: var(--danger-700);
}
.obligations-callout__cell--released {
  background: var(--success-50);
  border-color: #bbf7d0;
  color: var(--success-700);
}
.obligations-callout__label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.85;
}
.obligations-callout__big {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary);
}
.obligations-callout__sub {
  font-size: var(--fs-13);
  color: var(--text-secondary);
}
.obligations-callout__cta {
  margin-top: 6px;
  font-size: var(--fs-12);
  font-weight: 700;
}

/* =================================================================
   Release-status filter chips — sit right under the period tabs.
   Uses the same visual language as a chip filter but rendered as a
   nav so the URL is shareable and back-button-friendly.
   ================================================================= */
.status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-4);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--fs-13);
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease-standard);
}
.status-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.status-chip.is-active {
  background: var(--mauve-800);
  color: var(--text-inverse);
  border-color: var(--mauve-800);
  box-shadow: var(--elev-1);
}
.status-chip[data-status="pending_funds"].is-active { background: var(--warning-700); border-color: var(--warning-700); }
.status-chip[data-status="lacking_docs"].is-active  { background: var(--danger-700);  border-color: var(--danger-700); }
.status-chip[data-status="released"].is-active      { background: var(--success-700); border-color: var(--success-700); }

/* The wrapper is the scroll target for #filters anchor — when the user
   clicks a chip, the page reloads and the browser jumps here instead of
   scrolling back to the very top. tabindex=-1 lets us focus()
   programmatically without it being in the natural tab order. */
.filters-anchor {
  /* Bit of breathing room from the obligations callout above.
     scroll-margin-top accounts for any sticky header. */
  scroll-margin-top: 16px;
}

/* =================================================================
   Search hero — the prominent labelled search above the recipients
   table. Replaces the old small inline filter that was hidden inside
   the table header. Big, single source of truth, with helper tips.
   ================================================================= */
.search-hero {
  margin: var(--sp-3) 0 var(--sp-5);
  padding: var(--sp-5);
  background: linear-gradient(180deg,
    var(--surface-card) 0%,
    rgba(247, 111, 21, 0.04) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-1);
}
.search-hero__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.search-hero__label { display: flex; flex-direction: column; gap: 4px; }
.search-hero__label-text {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--text-primary);
}
.search-hero__label-hint {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: 1.5;
}
.search-hero__label-hint em { color: var(--rose-700); font-style: normal; font-weight: 600; }
.search-hero__label-hint strong { color: var(--text-primary); }

.search-hero__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: #fff;
  border: 2px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: 4px 4px 4px var(--sp-3);
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.search-hero__field:focus-within {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 4px rgba(201, 104, 90, 0.18);
}
.search-hero__icon { display: flex; color: var(--text-muted); }
.search-hero__field:focus-within .search-hero__icon { color: var(--rose-600); }
.search-hero__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: var(--sp-3) 0;
  font-size: var(--fs-16);
  font-family: var(--font-body);
  background: transparent;
  color: var(--text-primary);
  min-width: 0;
}
.search-hero__input::placeholder {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-14);
}
.search-hero__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--warm-200);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease-standard);
}
.search-hero__clear:hover { background: var(--rose-100); color: var(--rose-700); }
.search-hero__submit {
  flex-shrink: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.search-hero__tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-13);
  color: var(--text-secondary);
}
.search-hero__tips li::before {
  content: "•";
  margin-right: 6px;
  color: var(--rose-500);
}
.search-hero__tips kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-12);
  background: var(--warm-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-primary);
}

.search-hero__active {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--success-50);
  border: 1px solid #bbf7d0;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  color: var(--success-700);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.search-hero__active strong { color: var(--text-primary); }
.search-hero__active-clear {
  margin-left: auto;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .search-hero { padding: var(--sp-4); }
  .search-hero__label-text { font-size: var(--fs-18); }
  .search-hero__field { flex-wrap: wrap; padding: var(--sp-2); }
  .search-hero__submit { width: 100%; justify-content: center; }
  .search-hero__tips { gap: var(--sp-2); flex-direction: column; }
}

/* =================================================================
   Print rules — hide chrome, keep only the data the OIC will sign.
   Triggered by the Print button in the page header (data-print-page).
   ================================================================= */
@media print {
  .sidebar, .topbar, .programs-hero__actions,
  .reports-tabs, .status-chips, .search-hero,
  .obligations-callout__cta, .quick-guide,
  .pagination, .filter-banner, .reports-card__head .btn,
  .reports-card__inline-filter, [data-print-page] {
    display: none !important;
  }
  body { background: #fff; }
  .programs-hero,
  .reports-kpis,
  .reports-card,
  .obligations-callout {
    box-shadow: none;
    border: 1px solid #e5e5e5;
    page-break-inside: avoid;
  }
  table { font-size: 11pt; }
  /* Show the period + program label clearly at the top of the printout. */
  .programs-hero__title { font-size: 18pt; }
  .programs-hero__period-now { font-size: 11pt; }
  /* Print-only footer with the LGU + date stamp. */
  .reports-card--full::after {
    content: "Printed " attr(data-printed-at) " · MSWDO Pagadian";
    display: block;
    margin-top: 12mm;
    font-size: 9pt;
    color: #777;
    text-align: right;
  }
}