/* redesign-total-v1 — W-68-2 — Running-total panel component layer. */
/*
 * Planning: .archon/queued-builds/WAVE-68-public-profile-redesign.md
 *
 * Targets the markup rendered by src/views/components/total-panel.ejs.
 * The panel is the headline figure on a public child profile (and, in
 * future waves, on the parent dashboard summary). It pairs a quiet
 * eyebrow heading with a large display-weight Rands figure and a
 * decorative rhythm row.
 *
 * Class taxonomy (BEM-ish):
 *   .total-panel               — outer <section>
 *   .total-panel__eyebrow      — "Running total" small uppercase label
 *   .total-panel__amount       — wrapper around the figure + caption
 *   .total-panel__rands        — large currency figure
 *   .total-panel__caption      — "saved so far" small caption
 *   .total-panel__rhythm       — decorative dot row (aria-hidden)
 *   .total-panel__dot          — single accent dot
 *
 * WHY a brand-coloured surface (not the page background): the panel is
 * the headline figure visitors come for; tying it to the brand colour
 * gives it visual weight and reads as "this is the number". The
 * brand-darker shade is the WCAG-AA-safe pairing with the inverse text
 * colour (white) — keeps the figure legible without relying on a
 * theme-tinted background that varies per child.
 *
 * WHY a token-only palette: ANTI-RAW-VALUE proof-gate (W56) rejects
 * hex / rgba in any non-token file. Every colour reads through
 * var(--color-*); every spacing through var(--space-*); every shape
 * through var(--radius-*).
 *
 * WHY mobile-first (no media-query default): 320–414px viewports are
 * the load-bearing target. The figure scales via clamp() rather than
 * a media-query ladder so the panel reads correctly across the whole
 * mobile range without abrupt jumps.
 *
 * FLOW: tokens.css → spacing.css → typography.css → radius-shadow.css →
 *       cards.css → total-panel.css (this file) → page-feature CSS.
 *
 * CONSTRAINT: brand-darker on white text is the established AA-safe
 * pairing (token comments call out the contrast budget). Do NOT change
 * either colour without re-running scripts/contrast-audit.js — even a
 * one-shade shift can sink the pair below 4.5:1.
 */

/* ---------- Panel root ---------- */
.total-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-brand-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  /* WHY position:relative: lets the rhythm row anchor flush to the
     baseline without forcing a hard min-height on the section. */
  position: relative;
  text-align: center;
  /* WHY overflow:hidden: the decorative dot row uses a subtle scale
     hover effect in a future wave; clipping keeps the dots from
     escaping the rounded corners. */
  overflow: hidden;
}

/* ---------- Eyebrow heading ----------
   WHY uppercase + wide tracking: reads as a "label" rather than a
   competing heading. The amount below carries the visual weight; the
   eyebrow is the semantic anchor for AT (it's the h2 the
   aria-labelledby points at) but should not steal the eye. */
.total-panel__eyebrow {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-inverse);
  /* WHY a slight opacity (not a different colour token): keeps the
     text-inverse pair contract intact while telegraphing "this is
     supporting copy, not the headline". */
  opacity: 0.85;
}

/* ---------- Amount + caption block ---------- */
.total-panel__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

/* WHY clamp() on the figure: at 320px the figure should not exceed the
   panel width; on a desktop the panel is wider and the figure can grow
   to a marketing-display weight without overflowing. */
.total-panel__rands {
  font-family: var(--font-family-heading);
  font-size: clamp(var(--font-size-3xl), 8vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  /* WHY word-break:keep-all: the formatted Rands string contains a
     non-breaking space as the thousands separator; we still pin
     keep-all defensively so an awkward viewport doesn't break the
     figure across lines. */
  word-break: keep-all;
}

.total-panel__caption {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-inverse);
  opacity: 0.85;
}

/* ---------- Decorative rhythm row ----------
   WHY ornamental dots (not a chart / progress bar): the running total
   has no target (parents can save as much as they like); a progress
   bar would imply a goal. Three quiet dots give the panel a baseline
   anchor without inventing a metric. */
.total-panel__rhythm {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.total-panel__dot {
  display: block;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background-color: var(--color-brand-light);
  opacity: 0.6;
}

/* ---------- Tablet + desktop pivot ---------- */
@media (min-width: 640px) {
  .total-panel {
    padding: var(--space-7) var(--space-6);
    gap: var(--space-4);
  }
}