/* ============================================================================
   LDS portal — component library (Portal Reboot R2, 2026-05-31)
   Nine components. Build once, use everywhere. References styles/tokens.css.
   Naming: BEM-ish (block__element, block--modifier).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. .page-shell — the outer container + vertical rhythm
   -------------------------------------------------------------------------- */
.page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (min-width: 768px) {
  .page-shell { padding: var(--s-7); }
}
/* sections inside the shell sit a touch closer than the hero gap */
.page-shell > .section-card + .section-card { margin-top: calc(var(--s-5) - var(--s-6)); }

/* ----------------------------------------------------------------------------
   1. .hero — dark forest top panel
   -------------------------------------------------------------------------- */
.hero {
  background: var(--c-forest);
  color: var(--c-paper);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
}
@media (min-width: 768px) {
  .hero { padding: var(--s-7); }
}
.hero__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.hero__product {
  display: flex;
  align-items: center;
  gap: var(--s-3); /* 12px shield -> eyebrow */
}
.hero__eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-moss);
  margin: 0;
}
.hero__logos {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.hero__logos img { max-width: 96px; height: auto; }
.hero__title {
  font: var(--t-hero);
  color: var(--c-paper);
  margin: var(--s-4) 0 0;
}
.hero__subtitle {
  font: var(--t-body-lg);
  color: var(--c-moss);
  margin: var(--s-1) 0 0;
}
/* signed-in chip, top-right */
.hero__chip {
  background: var(--c-forest-d);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.hero__chip-label { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-moss); }
.hero__chip-value { font: var(--t-body); color: var(--c-paper); font-weight: 600; }

/* ----------------------------------------------------------------------------
   2. .stat-card — the workhorse, three sizes
   -------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.stats-grid--inline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }

.stat-card {
  background: var(--c-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.stat-card--hoverable { box-shadow: var(--shadow-1); transition: box-shadow var(--motion-base), transform var(--motion-base); }
.stat-card--hoverable:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.stat-card__icon { /* uses .lds-icon-circle from tokens.css */ }
.stat-card__label {
  font: var(--t-body);
  color: var(--c-ink-soft);
  margin: var(--s-1) 0 0;
}
.stat-card__value {
  font: var(--t-stat);
  color: var(--c-ink);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.stat-card__unit { font: var(--t-body-lg); color: var(--c-ink-soft); }
.stat-card__sub { font: var(--t-body); color: var(--c-ink-soft); }

.stat-card--hero .stat-card__value { font: var(--t-stat-lg); }
.stat-card--inline { padding: var(--s-4); }
.stat-card--inline .stat-card__value { font: var(--t-h2); }

/* two-line label variant (e.g. "Yesterday's electricity" / "30 May 2026") */
.stat-card__label--stacked { display: flex; flex-direction: column; }
.stat-card__label--stacked small { color: var(--c-ink-soft); font-size: 12px; }

/* ----------------------------------------------------------------------------
   3. .section-card — wrapper around every titled section
   -------------------------------------------------------------------------- */
.section-card {
  background: var(--c-paper);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.section-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.section-card__title { font: var(--t-h2); color: var(--c-ink); margin: 0; }
.section-card__subtitle { font: var(--t-body); color: var(--c-ink-soft); margin: 0; }
.section-card__body { margin-top: var(--s-5); }

/* ----------------------------------------------------------------------------
   4. .pill — chips, status badges, filter pills
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font: var(--t-body);
  background: var(--c-paper);
  border: 1px solid var(--c-sage);
  color: var(--c-ink);
  white-space: nowrap;
}
.pill--active { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-paper); }
.pill--warn { background: var(--c-warn-soft); border-color: transparent; color: var(--c-warn); }
.pill--success { background: var(--c-moss-soft); border-color: transparent; color: var(--c-forest); }
.pill--highlight { background: var(--c-gold-soft); border-color: transparent; color: var(--c-forest-d); }
.pill--micro { padding: 2px var(--s-3); font-size: 13px; }
.pill .lds-icon { width: 16px; height: 16px; }

/* ----------------------------------------------------------------------------
   5. .btn — buttons, three variants
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  font: var(--t-body-lg);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.btn .lds-icon { width: 18px; height: 18px; stroke: currentColor; }

.btn--primary { background: var(--c-forest); color: var(--c-paper); }
.btn--primary:hover { background: var(--c-forest-d); }

.btn--secondary { background: var(--c-paper); color: var(--c-forest); border-color: var(--c-forest); }
.btn--secondary:hover { background: var(--c-cream); }

.btn--ghost { background: transparent; color: var(--c-forest); }
.btn--ghost:hover { background: var(--c-cream); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--c-sage);
  color: var(--c-ink-soft);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   6. .site-grid + .site-grid__card — lead with the decision, not the data
   -------------------------------------------------------------------------- */
.site-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .site-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-grid { grid-template-columns: repeat(3, 1fr); } }

.site-grid__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--c-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--motion-base), transform var(--motion-base);
}
.site-grid__card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.site-grid__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.site-grid__icon { /* .lds-icon-circle */ }
.site-grid__title { font: var(--t-h3); color: var(--c-ink); margin: 0; flex: 1 1 auto; word-break: keep-all; overflow-wrap: anywhere; }
.site-grid__head .pill { margin-left: auto; }
.site-grid__primary { font: var(--t-stat); color: var(--c-ink); display: flex; align-items: baseline; gap: var(--s-2); }
.site-grid__primary .unit { font: var(--t-body-lg); color: var(--c-ink-soft); }
.site-grid__sub { font: var(--t-body); color: var(--c-ink-soft); }
.site-grid__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--border-hairline);
  font: var(--t-body);
  font-weight: 600;
  color: var(--c-forest);
}
.site-grid__action .lds-icon { color: var(--c-forest); }

/* Household variant of the existing portal site-card button (R3b). The base
   .portal-portfolio-site-card (styles.css) is display:grid with 3 fixed rows;
   the household layout is a simple flex column so the action line sits last. */
.portal-portfolio-site-card--household {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.portal-portfolio-site-card--household .portal-portfolio-site-metrics { margin-top: var(--s-1); }

/* ----------------------------------------------------------------------------
   7. .insight-row — the "Where Do I Look First?" list
   -------------------------------------------------------------------------- */
.insight-list { display: flex; flex-direction: column; gap: var(--s-2); }
.insight-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-paper);
  border: var(--border-hairline);
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-fast);
}
.insight-row:hover { background: var(--c-cream-soft); }
.insight-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--c-cream-soft);
  color: var(--c-forest);
  font: var(--t-body);
  font-weight: 700;
  flex: 0 0 auto;
}
.insight-row__text { flex: 1 1 auto; font: var(--t-body-lg); }
.insight-row__chevron { color: var(--c-ink-soft); }

/* ----------------------------------------------------------------------------
   8. .funder-evidence-card — 2-up grid, each card carries a concept icon
   -------------------------------------------------------------------------- */
.funder-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 768px) { .funder-evidence-grid { grid-template-columns: repeat(2, 1fr); } }
.funder-evidence-card {
  background: var(--c-cream-soft);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.funder-evidence-card__head { display: flex; align-items: center; gap: var(--s-3); }
.funder-evidence-card__title { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-forest); margin: 0; }
.funder-evidence-card__body { font: var(--t-body); color: var(--c-ink); }

/* ----------------------------------------------------------------------------
   9. .household-header — thin identity band (Site Spotlight Option A)
      Not numbered in the brief's "nine" but specified as the Site Spotlight
      replacement; lives here so R3/R4 can use it directly.
   -------------------------------------------------------------------------- */
.household-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) 0;
}
.household-header__id { display: flex; align-items: center; gap: var(--s-3); }
.household-header__name { font: var(--t-h1); margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.household-header__meta { font: var(--t-body); color: var(--c-ink-soft); margin: 2px 0 0; }
.household-header__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.household-header__freshness { font: var(--t-body); color: var(--c-ink-soft); display: inline-flex; align-items: center; gap: var(--s-2); }
.household-header__freshness--ok { color: var(--c-forest); }
.household-header__freshness--warn { color: var(--c-warn); }

/* Amber emphasis for a volunteer card that has something to flag (R4). */
.section-card.portal-card-amber {
  background: var(--c-warn-soft);
  border-color: transparent;
}

/* "See the charts" collapsible at the foot of the volunteer summary (R4). */
.portal-charts-details > summary.portal-charts-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font: var(--t-h3);
  color: var(--c-ink);
  list-style: none;
}
.portal-charts-details > summary.portal-charts-summary::-webkit-details-marker { display: none; }
.portal-charts-details > summary.portal-charts-summary .lds-icon { color: var(--c-forest); }
.portal-charts-details[open] > summary.portal-charts-summary { margin-bottom: var(--s-4); }

/* ============================================================================
   Lantern hero v2 (Portal Hero Polish) — scoped under .portal-hero-v2 so it
   cleanly overrides the legacy .portal-hero layout in styles.css.
   ========================================================================== */
.hero.portal-hero-v2 {
  display: block;
  background: var(--c-forest);
  color: var(--c-paper);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  overflow: hidden;
}
.portal-hero-v2 .hero__main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: start;
}
.portal-hero-v2 .hero__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.portal-hero-v2 .hero__shield { width: 64px; height: 64px; margin-bottom: var(--s-3); }
.portal-hero-v2 .hero__eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-moss);
  margin: 0;
}
.portal-hero-v2 .hero__title {
  font-family: var(--f-head);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-paper);
  margin: 0;
  letter-spacing: -0.01em;
}
.portal-hero-v2 .hero__subtitle {
  font-family: var(--f-head);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-moss);
  margin: 0;
  max-width: 56ch;
}
.portal-hero-v2 .hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-4);
}
.portal-hero-v2 .hero__signin-chip {
  background: var(--c-forest-d);
  border: 1px solid rgba(151, 188, 98, 0.18);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  min-width: 280px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.portal-hero-v2 .hero__signin-label {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-moss);
}
.portal-hero-v2 .hero__signin-email {
  font: var(--t-body-lg);
  font-weight: 600;
  color: var(--c-paper);
  word-break: break-all;
}
.portal-hero-v2 .hero__signin-status { font-size: 12px; color: var(--c-moss); opacity: 0.75; }
.portal-hero-v2 .hero__action-row { display: flex; gap: var(--s-3); align-items: center; }
.portal-hero-v2 .hero__partners { margin-top: var(--s-7); }
.portal-hero-v2 .hero__partners-rule {
  height: 1px;
  background: linear-gradient(to right, rgba(196, 153, 58, 0.6), rgba(196, 153, 58, 0));
  margin-bottom: var(--s-5);
  max-width: 320px;
}
.portal-hero-v2 .hero__partners-label {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-moss);
  opacity: 0.7;
  margin: 0 0 var(--s-3);
}
.portal-hero-v2 .hero__partners-logos { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.portal-hero-v2 .hero__partner-logo { height: 32px; width: auto; opacity: 0.85; }
/* The customer (AgeUK) logo is a colour card; a soft paper pill keeps it legible
   on the dark partner band (fallback until a white-mono variant is supplied). */
.portal-hero-v2 #portal-customer-logo { height: 40px; opacity: 1; background: var(--c-paper); border-radius: var(--r-sm); padding: 4px 8px; }
@media (max-width: 768px) {
  .hero.portal-hero-v2 { padding: var(--s-5); }
  .portal-hero-v2 .hero__main { grid-template-columns: 1fr; gap: var(--s-5); }
  .portal-hero-v2 .hero__shield { width: 48px; height: 48px; }
  .portal-hero-v2 .hero__actions { align-items: stretch; }
  .portal-hero-v2 .hero__signin-chip { min-width: 0; }
}

/* Loading skeleton — shimmer placeholder (e.g. the wallboard hero before data).
   Tuned for dark surfaces (white shimmer at low opacity); text is hidden while
   shimmering, returns when the class is removed. */
.lds-skeleton {
  color: transparent !important;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
  animation: lds-shimmer 1.4s ease infinite;
  display: inline-block;
  min-width: 220px;
  min-height: 1em;
}
@keyframes lds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ----------------------------------------------------------------------------
   View toggle — Volunteer / Detailed (header control)
   -------------------------------------------------------------------------- */
.view-toggle { display: inline-flex; align-items: center; gap: var(--s-2); }
[data-detailed-only] { display: none; }
.is-detailed [data-detailed-only] { display: revert; }
.is-detailed [data-volunteer-only] { display: none; }