/*
 * home.css — Home / Today's Care surface (Canopy v2)
 * Phase 2b of the Canopy v2 rebuild plan.
 * Visual contract: docs/design/mockups/Mockup A - Home Today's Care.html
 * Token mapping:   docs/design/v2-token-translation.md
 *
 * ALL color / surface / spacing values resolve to var(--v2-*) tokens —
 * NO raw hex, NO inline oklch. The PreToolUse v2-raw-hex-warn hook
 * (.claude/hooks/v2-raw-hex-warn.py) enforces this on writes.
 *
 * Class scope: every selector starts with .home or .home-* to avoid
 * collision with shared selectors that other surfaces still use
 * (.zone-card, .pill-care-*, .filter-chip-row-care* — all stay in
 * style.css until Garden / Seeds rebuild lands).
 */

/* Hide the global tab-header chrome on the Home view — the new design
 * folds date/title/streak into the home surface itself. Other views
 * still show .tab-header normally. */
.app:has(#view-home.active) .tab-header {
  display: none;
}

.home {
  height: 100%;
  background: var(--v2-bg-primary);
  color: var(--v2-text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--v2-font-body);
}

.home-scroll {
  flex: 1;
  overflow-y: auto;
  padding-top: 8px;
}

/* ── Header ──────────────────────────────────────────────── */

.home-header {
  padding: 12px 16px 20px;
}
.home-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.home-eyebrow {
  font-family: var(--v2-font-body);
  font-size: 11px;
  color: var(--v2-text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.home-title {
  font-family: var(--v2-font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--v2-text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.home-streak {
  text-align: right;
  padding-top: 4px;
}
.home-streak-num {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--v2-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.home-streak-num.is-active {
  font-size: 28px;
  font-weight: 600;
  color: var(--v2-pop-sage);
}
.home-streak-label {
  font-family: var(--v2-font-body);
  font-size: 11px;
  color: var(--v2-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 2px 0 0;
}

/* ── Progress ──────────────────────────────────────────── */

.home-progress {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-progress-track {
  flex: 1;
  height: 4px;
  background: var(--v2-border-soft);
  border-radius: var(--v2-radius-full);
  overflow: hidden;
}
.home-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--v2-pop-sage);
  border-radius: var(--v2-radius-full);
  transition: width var(--v2-transition-base) var(--v2-ease-out);
}
.home-progress-text {
  font-family: var(--v2-font-body);
  font-size: 12px;
  color: var(--v2-text-tertiary);
  white-space: nowrap;
}

/* ── Zone / frost note ─────────────────────────────────── */

.home-zone-note {
  margin: 0 16px 16px;
  padding: 8px 12px;
  background: var(--v2-pop-slate-bg);
  border-radius: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--v2-pop-slate);
}
.home-zone-note svg {
  flex-shrink: 0;
  stroke: currentColor;
}
.home-zone-note-text {
  font-family: var(--v2-font-body);
  font-size: 13px;
  color: var(--v2-pop-slate);
  line-height: 1.4;
}

/* Phase 5 Task 4.3 — frost-note loading state shown until garden:hydrated, so
   a non-Omaha user never sees the Omaha default flash. Overrides the base
   .home-zone-note slate pill (this div carries both classes). */
.home-zone-note--skeleton {
  height: 1.25rem;
  width: 60%;
  padding: 0;
  border-radius: 6px;
  background: var(--v2-color-skeleton, rgba(0, 0, 0, 0.06));
}

/* ── Section labels ────────────────────────────────────── */

.home-section-label {
  font-family: var(--v2-font-body);
  font-size: 11px;
  color: var(--v2-text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.home-empty {
  font-family: var(--v2-font-body);
  font-size: 14px;
  color: var(--v2-text-tertiary);
  padding: 16px 0;
  font-style: italic;
}

/* ── Care list ─────────────────────────────────────────── */

.home-care-list {
  padding: 0 16px;
}
.home-care-list .home-section-label {
  margin-bottom: 8px;
}

.home-care-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--v2-border-soft);
}
.home-care-photo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--v2-bg-secondary);
  border: 1px solid var(--v2-edge);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
.home-care-photo span {
  font-family: monospace;
  font-size: 7px;
  color: var(--v2-text-tertiary);
  text-align: center;
  line-height: 1.3;
  padding: 3px;
}
.home-care-photo[style*="background-image"] span {
  display: none;
}
.home-care-body {
  flex: 1;
  min-width: 0;
}
.home-care-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* gap gives the .home-care-check expanded ::before hit area runway so it
     doesn't shadow taps meant for .home-care-name */
  gap: 16px;
  margin-bottom: 8px;
}
.home-care-name {
  font-family: var(--v2-font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--v2-text-primary);
  letter-spacing: -0.01em;
  cursor: pointer;
}
.home-care-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--v2-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  /* anchor for ::before invisible hit-target expansion */
  position: relative;
  transition: background var(--v2-transition-fast) var(--v2-ease-out),
              border-color var(--v2-transition-fast) var(--v2-ease-out);
}
/* Expand hit target to 44×44 (CLAUDE.md hard rule) without growing the visual.
   .home-care-name-row has gap: 16px so this 11px reach doesn't shadow the
   sibling .home-care-name tap zone. */
.home-care-check::before {
  content: '';
  position: absolute;
  inset: -11px;
}
.home-care-check.is-done {
  background: var(--v2-pop-sage);
  border-color: var(--v2-pop-sage);
}
.home-care-check.is-done::after {
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--v2-text-on-dark);
  border-bottom: 2px solid var(--v2-text-on-dark);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ── Chips (tags-style canonical) ──────────────────────── */

.home-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--v2-chip-height);
  padding: 0 7px;
  border-radius: var(--v2-chip-radius);
  font-family: var(--v2-font-body);
  font-size: var(--v2-chip-size);
  font-weight: var(--v2-chip-weight);
  letter-spacing: var(--v2-chip-tracking);
  text-transform: var(--v2-chip-transform);
  white-space: nowrap;
}
.home-chip svg {
  flex-shrink: 0;
  stroke: currentColor;
}
.home-chip-water        { background: var(--v2-pop-sage-bg);  color: var(--v2-pop-sage); }
.home-chip-water-urgent { background: var(--v2-pop-coral-bg); color: var(--v2-pop-coral); }
.home-chip-light        { background: var(--v2-pop-ochre-bg); color: var(--v2-pop-ochre); }
.home-chip-health       { background: var(--v2-pop-sage-bg);  color: var(--v2-pop-sage); }
.home-chip-health-low   { background: var(--v2-pop-coral-bg); color: var(--v2-pop-coral); }
.home-chip-heat         { background: var(--v2-heat-warmth-bg); color: var(--v2-heat-warmth); }
.home-chip-photo        { background: var(--v2-pop-slate-bg); color: var(--v2-pop-slate); }

/* ── Care rail — show-all toggle ────────────────────────── */

.home-care-show-all {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--v2-text-secondary);
  font: 500 0.75rem/1.4 var(--v2-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease-out;
}
.home-care-show-all:hover,
.home-care-show-all:active,
.home-care-show-all:focus-visible {
  color: var(--v2-text-primary);
}
.home-care-show-all:focus-visible {
  outline: 2px solid var(--v2-text-primary);
  outline-offset: -2px;
}

/* ── Garden strip ──────────────────────────────────────── */

.home-garden {
  padding: 16px 16px 0;
}
.home-garden .home-section-label {
  margin-bottom: 8px;
}
.home-garden-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.home-garden-cards::-webkit-scrollbar {
  display: none;
}
.home-zone-card {
  min-width: 96px;
  padding: 12px;
  background: var(--v2-bg-card);
  border-radius: 14px;
  border: 1px solid var(--v2-border-soft);
  flex-shrink: 0;
  box-shadow: var(--v2-shadow-warm);
  cursor: pointer;
  transition: background var(--v2-transition-fast) var(--v2-ease-out);
}
.home-zone-card:hover,
.home-zone-card:focus-visible {
  background: var(--v2-bg-card-hover);
}
.home-zone-num {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--v2-text-primary);
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.home-zone-name {
  font-family: var(--v2-font-body);
  font-size: 12px;
  color: var(--v2-text-secondary);
  display: block;
  margin-top: 1px;
  line-height: 1.3;
}
.home-zone-germ {
  font-family: var(--v2-font-body);
  font-size: 11px;
  color: var(--v2-pop-ochre);
  display: block;
  margin-top: 3px;
}
.home-zone-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--v2-radius-full);
  font-family: var(--v2-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-zone-tag-ground  { background: var(--v2-pop-sage-bg);  color: var(--v2-pop-sage);  margin-top: 6px; }
.home-zone-tag-starter { background: var(--v2-pop-ochre-bg); color: var(--v2-pop-ochre); margin-top: 4px; }

/* ── Bottom spacer (for nav clearance) ─────────────────── */

.home-bottom-spacer {
  height: 16px;
}

/* ─── RESTORED SECTIONS (REL-132 follow-up) ─────────────────────
 * Per CLAUDE.md Hard Rule #8 (codified after REL-132): mockup approval
 * is style-only. The 9 sections below were dropped in REL-132 because
 * Mockup A didn't draw them; restoration brings them back inside the
 * new Home, restyled with --v2-* tokens. Sections #5 (recent photos)
 * and #7 (seed list rows) intentionally remain dropped.
 * ──────────────────────────────────────────────────────────────── */

/* (#1) Weather strip */
.home-weather {
  margin: 0 16px 16px;
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-full);
  box-shadow: var(--v2-elev-1);
}
.home-weather-icon {
  width: 26px; height: 26px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--v2-pop-slate-bg); color: var(--v2-pop-slate);
  display: flex; align-items: center; justify-content: center;
}
.home-weather-icon svg { stroke: currentColor; width: 16px; height: 16px; }
.home-weather-temp {
  flex: 1; min-width: 0;
  font-family: var(--v2-font-body);
  font-weight: 600; font-size: 14px; line-height: 1.15;
  color: var(--v2-text-primary);
  font-variant-numeric: tabular-nums;
}
.home-weather-frost {
  flex-shrink: 0;
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--v2-pop-ochre-bg);
  color: var(--v2-pop-ochre);
  border-radius: var(--v2-radius-full);
  padding: 4px 10px;
}
.home-weather-frost-num {
  font-family: var(--v2-font-body);
  font-weight: 700; font-size: 14px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.home-weather-frost-label {
  font-family: var(--v2-font-body);
  font-weight: 600; font-size: 11px; line-height: 1.2;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* (#2) Watering alert — coral safety nudge */
.home-alert {
  margin: 0 16px 16px;
  padding: 12px 16px;
  background: var(--v2-pop-coral-bg);
  border: 1px solid var(--v2-pop-coral);
  border-left: 4px solid var(--v2-pop-coral);
  border-radius: var(--v2-radius-md);
}
.home-alert-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.home-alert-title {
  font-family: var(--v2-font-display); font-size: 15px; font-weight: 600;
  color: var(--v2-pop-coral); margin: 0;
}
.home-alert-temp {
  font-family: var(--v2-font-body); font-size: 12px;
  color: var(--v2-text-tertiary);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.home-alert-list {
  font-family: var(--v2-font-body); font-size: 14px;
  color: var(--v2-text-secondary); line-height: 1.5;
}
.home-alert-row {
  padding: 4px 0; border-bottom: 1px solid var(--v2-pop-coral-bg);
}
.home-alert-row:last-child { border-bottom: none; }
.home-alert-row strong {
  font-weight: 500; color: var(--v2-text-primary);
}

/* (#3) Garden stats 2-up — Plants / Avg Health */
.home-stats {
  margin: 0 16px 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.home-stat-card {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-md);
  padding: 12px;
  text-align: left;
}
.home-stat-value {
  font-family: var(--v2-font-display);
  font-size: 28px; font-weight: 600;
  color: var(--v2-text-primary); line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.home-stat-value.is-accent { color: var(--v2-accent-botanical); }
.home-stat-unit {
  font-family: var(--v2-font-body); font-size: 13px;
  color: var(--v2-text-tertiary); font-weight: 400;
  margin-left: 2px;
}
.home-stat-label {
  font-family: var(--v2-font-body); font-size: 11px;
  color: var(--v2-text-tertiary);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 4px; display: block;
}

/* (#4) Greenthumb — seasonal narrative + concern attention */
.home-greenthumb {
  margin: 0 16px 16px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-lg);
  padding: 16px;
  box-shadow: var(--v2-elev-1);
}
.home-greenthumb-head {
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--v2-font-display); font-weight: 600; font-size: 18px;
  color: var(--v2-text-primary);
  letter-spacing: -0.005em;
}
.home-greenthumb-icon {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--v2-pop-sage-bg); color: var(--v2-accent-botanical);
  display: flex; align-items: center; justify-content: center;
}
.home-greenthumb-icon svg { stroke: currentColor; width: 13px; height: 13px; }
.home-greenthumb-narrative {
  font-family: var(--v2-font-body); font-size: 14px; line-height: 1.55;
  color: var(--v2-text-secondary); margin-bottom: 12px;
}
.home-greenthumb-narrative:last-child { margin-bottom: 0; }
.home-greenthumb-attention {
  width: 100%;
  display: flex; gap: 12px; align-items: center;
  padding: 12px;
  background: var(--v2-pop-coral-bg);
  border: 1px solid var(--v2-pop-coral);
  border-radius: var(--v2-radius-md);
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--v2-font-body);
}
.home-greenthumb-attention-thumb {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: var(--v2-bg-secondary);
  background-size: cover; background-position: center;
}
.home-greenthumb-attention-thumb--fallback {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--v2-pop-coral) 18%, var(--v2-bg-secondary));
  color: var(--v2-pop-coral);
}
.home-greenthumb-attention-thumb--fallback svg {
  width: 22px; height: 22px; opacity: 0.7;
}
.home-greenthumb-attention-name {
  font-family: var(--v2-font-display); font-weight: 600; font-size: 15px;
  color: var(--v2-text-primary); line-height: 1.2;
}
.home-greenthumb-attention-note {
  margin-top: 2px;
  font-family: var(--v2-font-body); font-weight: 500; font-size: 13px;
  color: var(--v2-pop-coral);
}

/* (#6) Seed summary */
.home-seeds {
  margin: 0 16px 16px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-lg);
  padding: 16px;
  text-align: center;
}
.home-seeds-num {
  font-family: var(--v2-font-display); font-size: 36px; font-weight: 600;
  color: var(--v2-pop-sage); line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.home-seeds-label {
  font-family: var(--v2-font-body); font-size: 13px;
  color: var(--v2-text-secondary);
  margin-top: 4px;
}
.home-seeds-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 12px;
}
.home-seeds-pill {
  display: inline-flex; align-items: center;
  height: var(--v2-chip-height);
  padding: 0 7px;
  border-radius: var(--v2-chip-radius);
  font-family: var(--v2-font-body);
  font-size: var(--v2-chip-size); font-weight: var(--v2-chip-weight);
  letter-spacing: var(--v2-chip-tracking);
  text-transform: var(--v2-chip-transform);
}
/* Sub-wave 2 — canonical taxonomy class names. is-early collapses
   sowed/cutting/nursery_start for compact display. is-planted now means
   in-ground (Alt C canonical) and is colored botanical-positive. */
.home-seeds-pill.is-early      { background: var(--v2-pill-shade-bg); color: var(--v2-pill-shade-text); }
.home-seeds-pill.is-germinated { background: var(--v2-pop-sage-bg);   color: var(--v2-pop-sage); }
.home-seeds-pill.is-potted-up  { background: var(--v2-pop-sage-bg);   color: var(--v2-accent-botanical-dark); }
.home-seeds-pill.is-planted    { background: var(--v2-pop-sage-bg);   color: var(--v2-accent-botanical-dark); }
.home-seeds-pill.is-failed     { background: var(--v2-pop-coral-bg);  color: var(--v2-pop-coral); }

/* (#8) Seasonal tip — month tip + tasks */
.home-seasonal {
  margin: 0 16px 16px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-lg);
  padding: 16px;
}
.home-seasonal-eyebrow {
  font-family: var(--v2-font-body); font-size: 11px;
  color: var(--v2-pop-sage);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 4px;
}
.home-seasonal-title {
  font-family: var(--v2-font-display); font-size: 18px; font-weight: 600;
  color: var(--v2-text-primary); line-height: 1.3; margin: 0 0 8px;
}
.home-seasonal-tip {
  font-family: var(--v2-font-body); font-size: 14px;
  color: var(--v2-text-secondary); line-height: 1.55;
  margin: 0 0 10px;
}
.home-seasonal-tasks {
  list-style: none; padding: 0; margin: 0;
}
.home-seasonal-tasks li {
  font-family: var(--v2-font-body); font-size: 13px;
  color: var(--v2-text-secondary); line-height: 1.5;
  padding: 4px 0 4px 22px;
  position: relative;
}
.home-seasonal-tasks li::before {
  content: "\2713";
  position: absolute; left: 4px; top: 4px;
  color: var(--v2-pop-sage);
  font-weight: 700;
}

/* (#9) Weekly report — "This Week in Your Garden" */
.home-report {
  margin: 0 16px 16px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-lg);
  padding: 16px;
  box-shadow: var(--v2-elev-1);
}
.home-report-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.home-report-title {
  font-family: var(--v2-font-display); font-size: 18px; font-weight: 600;
  color: var(--v2-text-primary); margin: 0;
}
.home-report-dates {
  font-family: var(--v2-font-body); font-size: 12px;
  color: var(--v2-text-tertiary);
}
.home-report-narrative {
  font-family: var(--v2-font-body); font-size: 14px;
  color: var(--v2-text-secondary); line-height: 1.55;
  margin-bottom: 12px;
}
.home-report-score {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-border-soft);
  border-bottom: 1px solid var(--v2-border-soft);
  margin-bottom: 12px;
}
.home-report-score-num {
  font-family: var(--v2-font-display); font-size: 32px; font-weight: 600;
  color: var(--v2-pop-sage); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.home-report-score-label {
  font-family: var(--v2-font-body); font-size: 12px;
  color: var(--v2-text-tertiary);
}
.home-report-delta {
  margin-left: auto;
  font-family: var(--v2-font-body); font-weight: 600; font-size: 14px;
  padding: 4px 8px; border-radius: var(--v2-radius-pill);
}
.home-report-delta.up   { background: var(--v2-pop-sage-bg);  color: var(--v2-pop-sage); }
.home-report-delta.down { background: var(--v2-pop-coral-bg); color: var(--v2-pop-coral); }
.home-report-delta.same { background: var(--v2-pop-slate-bg); color: var(--v2-pop-slate); }
.home-report-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin-bottom: 12px;
}
.home-report-stat {
  background: transparent; border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-md); padding: 8px 6px;
  text-align: center; cursor: pointer;
  font-family: var(--v2-font-body);
  min-width: 0;
}
.home-report-stat-num {
  font-family: var(--v2-font-display); font-size: 20px; font-weight: 600;
  color: var(--v2-text-primary); line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.home-report-stat-num.is-text {
  font-size: 14px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-report-stat-num.is-good  { color: var(--v2-pop-sage); }
.home-report-stat-num.is-coral { color: var(--v2-pop-coral); }
.home-report-stat-label {
  font-family: var(--v2-font-body); font-size: 11px;
  color: var(--v2-text-tertiary);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 4px; display: block;
}
.home-report-cta {
  width: 100%; padding: 10px;
  background: var(--v2-pop-sage); color: var(--v2-text-on-dark);
  border: none; border-radius: var(--v2-radius-md);
  font-family: var(--v2-font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; cursor: pointer;
  min-height: var(--v2-btn-height-md);
}

/* (#10) What's New card */
.home-whats-new {
  margin: 0 16px 16px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-lg);
  padding: 16px;
}
.home-whats-new-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.home-whats-new-title {
  font-family: var(--v2-font-display); font-size: 18px; font-weight: 600;
  color: var(--v2-text-primary); margin: 0;
}
.home-whats-new-count {
  font-family: var(--v2-font-body); font-size: 12px;
  color: var(--v2-text-tertiary); margin-top: 2px;
}
.home-whats-new-dismiss {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: var(--v2-text-tertiary);
  padding: 0 8px; min-width: 44px; min-height: 44px;
}
.home-whats-new-toggle {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--v2-font-body); font-size: 13px; font-weight: 500;
  color: var(--v2-pop-sage); cursor: pointer;
  padding: 6px 0;
}
.home-whats-new-items { margin-top: 8px; }
.home-whats-new-item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--v2-border-soft);
}
.home-whats-new-item:last-child { border-bottom: none; }
.home-whats-new-item-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--v2-edge);
  flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.home-whats-new-item.is-validated .home-whats-new-item-check {
  background: var(--v2-pop-sage); border-color: var(--v2-pop-sage);
}
.home-whats-new-item-check svg { stroke: var(--v2-text-on-dark); }
.home-whats-new-item-content { flex: 1; min-width: 0; cursor: pointer; }
.home-whats-new-item-title {
  font-family: var(--v2-font-body); font-size: 14px;
  color: var(--v2-text-primary); line-height: 1.3;
}
.home-whats-new-item-meta {
  font-family: var(--v2-font-body); font-size: 12px;
  color: var(--v2-pop-sage); margin-top: 2px;
}

/* (#11) Ideas link */
.home-ideas-link {
  display: block;
  margin: 0 16px 24px;
  padding: 16px 20px;
  text-align: center;
  font-family: var(--v2-font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v2-pop-sage);
  text-decoration: none;
  border: 1.5px dashed var(--v2-border-soft);
  border-radius: var(--v2-radius-lg);
  transition: border-color var(--v2-transition-fast) var(--v2-ease-out),
              background var(--v2-transition-fast) var(--v2-ease-out);
}
.home-ideas-link:hover,
.home-ideas-link:focus-visible {
  border-color: var(--v2-pop-sage);
  background: var(--v2-pop-sage-bg);
}