/* dash-home-redesign-v1 — W-70-1 — Parent dashboard landing page redesign. */
/*
 * Planning: .archon/queued-builds/WAVE-70-dashboard-home-redesign.md
 *
 * Targets the markup rendered by src/views/dashboard/home.ejs:
 *   .dash-home                        — <section> wrapper
 *   .dash-home__hero                  — greeting hero (eyebrow + name + lead)
 *   .dash-home__eyebrow               — uppercase "Your dashboard" label
 *   .dash-home__greeting              — serif "Welcome back, <name>" headline
 *   .dash-home__lead                  — supporting copy under the greeting
 *   .dash-home__stats                 — at-a-glance <dl> with three tiles
 *   .dash-home__stat                  — single tile (term + value pair)
 *   .dash-home__stat-label            — small uppercase label
 *   .dash-home__stat-value            — large headline number
 *   .dash-home__banner                — success / error flash
 *   .dash-home__cta-card              — "Add a child" card
 *   .dash-home__cta-body              — heading + copy column inside the CTA
 *   .dash-home__cta-heading           — CTA card heading
 *   .dash-home__cta-copy              — CTA card supporting copy
 *   .dash-home__cta-button            — primary action button anchor
 *   .dash-home__url-example           — inline <code> mimic of saadjie.com/<slug>
 *   .dash-home__children              — children-grid section root
 *   .dash-home__section-header        — heading + "see all" row (per section)
 *   .dash-home__section-heading       — h2 for a section
 *   .dash-home__section-link          — right-aligned secondary link
 *   .dash-home__child-grid            — <ul> grid of W63 child-card partials
 *   .dash-home__child-item            — <li> wrapper per child
 *   .dash-home__week-chip             — weekly total chip below each card
 *   .dash-home__week-chip-label       — small label inside the chip
 *   .dash-home__week-chip-value       — chip headline value
 *   .dash-home__empty                 — inline empty-state block
 *   .dash-home__empty-heading         — empty-state headline
 *   .dash-home__empty-body            — empty-state supporting copy
 *   .dash-home__recent                — recent-contributions section root
 *   .dash-home__recent-list           — <ul> of contribution-card partials
 *   .dash-home__recent-item           — <li> wrapper per contribution
 *   .dash-home__recent-link-row       — "view <child>'s page" link row
 *   .dash-home__recent-child-link     — the per-row child-page link
 *
 * WHY this is a NEW stylesheet (not appended to dashboard.css): Phase D
 * of the redesign system carves the parent-facing surfaces into focused
 * component stylesheets that sit cleanly on the W56–W67 token +
 * primitive layers. Carving the home landing into its own file lets a
 * future home-page rotation touch ONE file and the W70 audit grep the
 * dash-home-redesign-v1 marker without parsing the legacy aggregate
 * dashboard.css (which still hosts the manage-children list rules).
 *
 * WHY no raw hex / rgba in this file: ANTI-RAW-VALUE proof-gate (W56)
 * rejects raw colour literals in any non-token file. Every colour goes
 * through var(--color-*), every shape via var(--radius-*) / var(--shadow-*),
 * every spacing via var(--space-*), every duration / easing via the
 * compound --transition-* presets (or the named --duration-* / --ease-*
 * tokens).
 *
 * WHY mobile-first stack: the W26 mobile-responsiveness baseline (and
 * the W83 R-t11 slow-3G audit) target 320–414px Android viewports first.
 * The landing stacks hero → CTA card → children list → recent list in a
 * single column; tablet+ breakpoints flip the children grid into a 2-up
 * (640px) and 3-up (960px) grid and the stats row into a horizontal
 * inline layout.
 *
 * WHY the stats row uses <dl> + display: grid (not <ul> of mixed labels):
 * each stat is a definition-list pair (term: label, definition: value).
 * Grid lays them out as equal-width tiles without forcing the markup
 * to be a list of indistinguishable <li>s. Screen readers announce the
 * pairing naturally.
 *
 * WHY the children grid is a real CSS grid (not flex auto-wrap): grid
 * gives every tile the same width regardless of content length, which
 * matters when one parent has "Mia" and the next has "Christopher
 * Alexander". Flex with `flex: 1 1 16rem` would let the longer name
 * eat into the column width.
 *
 * FLOW: tokens/* → reset.css → cards.css → motion.css → radius-shadow.css
 *       → dashboard.css → dashboard-home.css (this file).
 *       dashboard-home.css sits ABOVE the legacy dashboard.css so a
 *       .dash-home-scoped selector can override the legacy .dashboard
 *       rules without specificity gymnastics.
 *
 * CONSTRAINT: WCAG 1.4.11 — every coloured text + background pair below
 * stays above the 4.5:1 AA floor by composing only token pairs that
 * have been pre-audited (the W58 contrast audit pinned the safe
 * pairings). Anything new should be checked against the audit script
 * in scripts/ before shipping.
 */

/* ============================================================
 * Page-level wrapper
 * ============================================================ */

.dash-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-5);
  padding-inline: var(--content-padding-x);
  max-width: var(--container-max-wide);
  margin-inline: auto;
  color: var(--color-text);
  font-family: var(--font-family-base);
  background-color: var(--color-bg);
}

/* ============================================================
 * Greeting hero
 * WHY a tinted brand-lighter backdrop (not white): the landing's
 * hero needs to read as a "you are home" cue, distinct from the
 * surrounding page surface. A soft brand-lighter tint pairs with
 * the W68 public-profile hero pattern so the two surfaces feel
 * like one design.
 * ============================================================ */

.dash-home__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-brand-lighter);
  border: 1px solid var(--color-brand-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.dash-home__eyebrow {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.dash-home__greeting {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  word-break: break-word;
}

.dash-home__lead {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ---------- Stats row inside the hero ---------- */

.dash-home__stats {
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.dash-home__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.dash-home__stat-label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.dash-home__stat-value {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-brand-dark);
}

/* ============================================================
 * Flash banners
 * WHY a thin coloured border + tinted background pair (not a flat
 * full-bleed banner): keeps the banner readable without dominating
 * the landing. Pulls from the status token pairings so AA contrast
 * is guaranteed by the token layer.
 * ============================================================ */

.dash-home__banner {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.dash-home__banner--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.dash-home__banner--error {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* ============================================================
 * Add-a-child CTA card
 * WHY mobile stack (heading + copy on top, button below): on a 320px
 * viewport a horizontal split would either squash the copy or make
 * the button thumb-unfriendly. The card stacks vertically with the
 * button full-width on mobile; tablet+ flips it horizontal.
 * ============================================================ */

.dash-home__cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-left: var(--space-1) solid var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.dash-home__cta-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dash-home__cta-heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.dash-home__cta-copy {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.dash-home__url-example {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}

.dash-home__cta-button {
  /* WHY align-self start (not stretch) on tablet+: lets the button
     sit as a comfortably-sized primary action rather than a
     full-bleed banner. On mobile the .btn primitive's width:100%
     wins; this only takes effect at the tablet override below. */
  align-self: stretch;
}

/* ============================================================
 * Section header row (used by .dash-home__children and .dash-home__recent)
 * WHY flex with space-between: section heading on the left, optional
 * "manage all" / "see audit" link on the right. The link is muted
 * (link-coloured, not button-styled) so the primary CTA in each
 * section reads as the main action.
 * ============================================================ */

.dash-home__section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.dash-home__section-heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.dash-home__section-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-link);
  text-decoration: none;
  transition: var(--transition-color);
}

.dash-home__section-link:hover,
.dash-home__section-link:focus {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* ============================================================
 * Children grid
 * WHY a CSS grid with auto-rows minmax(0, auto): the W63 child-card
 * partials inside each <li> already carry the .card padding +
 * background + shadow, so this layer only sets the GRID. Letting
 * the grid expand each row to its tallest child means a long
 * welcome line on one card doesn't force the others to grow.
 * ============================================================ */

.dash-home__children {
  display: block;
}

.dash-home__child-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.dash-home__child-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Weekly-total chip ----------
   WHY a pill below the card (not inside): the W63 child-card partial
   already exposes a `total` slot for the all-time total; the spec
   asks for an at-a-glance "this week" pairing too. Stamping the
   weekly chip OUTSIDE the partial keeps the partial single-purpose
   while still grouping the chip with the card visually via the
   .dash-home__child-item flex column. */

.dash-home__week-chip {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-sage-lighter);
  border: 1px solid var(--color-sage-light);
  border-radius: var(--radius-pill);
  color: var(--color-sage-dark);
  align-self: flex-start;
}

.dash-home__week-chip-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-sage-dark);
}

.dash-home__week-chip-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-sage-dark);
}

/* ============================================================
 * Empty states (children-grid empty, recent-list empty)
 * WHY a dashed border (not a solid card): the empty state should
 * read as a placeholder, not a finished panel. Dashed border is
 * the established "this is waiting to be filled" affordance.
 * ============================================================ */

.dash-home__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.dash-home__empty-heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.dash-home__empty-body {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-inline: auto;
}

.dash-home__empty-body code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  padding: 0 var(--space-1);
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* ============================================================
 * Recent contributions list
 * WHY a stacked list (no grid): contributions are read newest-first
 * top-to-bottom — a single column matches that reading pattern. The
 * W63 contribution-card partial inside each <li> handles its own
 * status colouring + padding; this layer just sets the gap.
 * ============================================================ */

.dash-home__recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-home__recent-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dash-home__recent-link-row {
  margin: 0;
  padding-inline-start: var(--space-4);
  font-size: var(--font-size-sm);
}

.dash-home__recent-child-link {
  color: var(--color-text-link);
  text-decoration: none;
  transition: var(--transition-color);
}

.dash-home__recent-child-link:hover,
.dash-home__recent-child-link:focus {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* ============================================================
 * Tablet + desktop overrides
 * WHY two breakpoints (640px + 960px): below 640px the landing
 * stacks as a single column for a thumb. At 640px+ the stats row
 * goes 3-up, the CTA card flips horizontal, and the children grid
 * becomes 2-up. At 960px+ the children grid expands to 3-up.
 * ============================================================ */

@media (min-width: 640px) {
  .dash-home__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-home__cta-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .dash-home__cta-body {
    flex: 1 1 auto;
  }

  .dash-home__cta-button {
    align-self: center;
    width: auto;
    flex-shrink: 0;
  }

  .dash-home__child-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-home__greeting {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 960px) {
  .dash-home__child-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-home__hero {
    padding: var(--space-7) var(--space-6);
  }
}

/* ============================================================
 * Print override — collapse decorative chrome on print.
 * WHY: a printed dashboard is most useful as a flat audit trail.
 * Drop the brand backdrop, shadows, and chips; keep the content
 * legible in black-and-white.
 * ============================================================ */

@media print {
  .dash-home__hero,
  .dash-home__cta-card,
  .dash-home__stat {
    background-color: var(--color-bg);
    box-shadow: none;
    border-color: var(--color-border);
  }
  .dash-home__week-chip {
    background-color: var(--color-bg);
    border-color: var(--color-border);
  }
}