/* HOME·HERO — week hero card styles · SINGLE SOURCE OF TRUTH.
 * Imported by BOTH workbench/home/week-hero.html AND the app (web/index.html).
 * Tokens only (D-421). Extracted from app.css 2026-07-10 (card-dev Phase 0).
 * Class prefix: wkhero-*. Do NOT restyle wkhero-* anywhere else (mirror check 16). */

/* ============================================================================
 * Week hero (D-430 · Home card 1) — ported from the locked workbench
 * reference workbench/surfaces/home-week-hero.html under D-432 (namespaced
 * wkhero-*; the old .week-progress/.pbar/.hero home implementation retired).
 * Hero TONE = --teal-700 by decision (D-430), one stop darker than --accent.
 * ========================================================================== */
.wkhero {
  margin: 0 var(--space-16) var(--space-12); /* match the composed Home cards below (nh-* use the same); bottom gap so it doesn't touch the search pill */
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  padding: var(--space-24) var(--space-20) var(--space-20);
  text-align: center;
}.wkhero-wkrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
}.wkhero-step {
  width: var(--dim-44);
  height: var(--dim-44);
  display: grid;
  place-items: center;
  background: var(--surface-ground);
  color: var(--teal-700);
  cursor: pointer;
  border: 1px solid var(--border-hairline); /* token-exception */
  border-radius: var(--radius-round);
}.wkhero-step svg {
  width: var(--dim-16);
  height: var(--dim-16);
  display: block;
}.wkhero-step[aria-disabled="true"] {
  color: var(--text-tertiary);
}.wkhero-num {
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--size-60);
  line-height: var(--leading-100);
  letter-spacing: var(--tracking-neg-015);
  color: var(--teal-700);
  cursor: pointer;                 /* tap → week picker (WEEKS·PICKER) */
}.wkhero-num:active {
  opacity: 0.6;
}.wkhero-weeks {
  font-family: var(--font-label);
  font-weight: var(--weight-600);
  font-size: var(--size-12);
  letter-spacing: var(--tracking-14);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-4) 0 var(--space-8); /* tweak 2026-07-10: WEEKS sits closer to the number; phase caption follows */
}/* Return affordance (D-430/D-434) — SIBLING of .wkhero-weeks, never nested
 * inside it (nesting made it inherit the label's uppercase + tracking = the
 * live "WEEKS·THIS WEEK" collision). Shown only when the displayed week ≠
 * the baby's current week. */
.wkhero-return {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-8);   /* now sits between WEEKS and the phase caption */
  background: var(--teal-100);
  color: var(--teal-700);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-12) var(--space-4) var(--space-12);
  font-family: var(--font-label);
  font-size: var(--size-11);
  font-weight: var(--weight-600);
  cursor: pointer;
}.wkhero-return[hidden] {
  display: none;
}.wkhero-return svg {
  width: var(--size-13);
  height: var(--size-13);
}.wkhero-return:active {
  background: var(--teal-200);
}.wkhero-phase {
  font-family: var(--font-display);
  font-weight: var(--weight-500);
  font-size: var(--size-16);
  color: var(--teal-700);
  margin-bottom: var(--space-8);
  cursor: pointer;                 /* tap → phase surface (PHASE·LANDING) */
}.wkhero-phase:active {
  opacity: 0.6;
}.wkhero-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--size-24);
  line-height: var(--leading-115);
  color: var(--text-primary);
  margin: 0 0 var(--space-12);
}.wkhero-desc {
  font-size: var(--size-14);
  line-height: var(--leading-140);
  color: var(--text-secondary);
  margin: 0 0 var(--space-20);
}.wkhero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  background: var(--teal-700);
  color: var(--text-on-accent);
  border: 0;
  border-radius: var(--radius-12);
  padding: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--size-15);
  font-weight: var(--weight-600);
  cursor: pointer;
}.wkhero-cta svg {
  width: var(--dim-16);
  height: var(--dim-16);
}/* ARBS phase bars — widths ∝ phase length (9:8:9:13:13, D-626), teal ramp L→R.
 * Fills transition once on appear / on step, then sit static (calm). */
.wkhero-bars {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-20);
  cursor: pointer;                 /* tap → phase surface (PHASE·LANDING) */
}.wkhero-bars:active {
  opacity: 0.7;
}.wkhero-track {
  height: var(--dim-6);
  border-radius: var(--radius-4);
  background: var(--surface-sunken);
  overflow: hidden;
}.wkhero-fill {
  height: 100%;
  border-radius: var(--radius-4);
  transition: width var(--duration-300) var(--ease-standard);
  /* Appear: each fill runs 0 → its width once on first paint, then sits
   * static (calm register — no pulse/loop). Steps animate via transition. */
  animation: wkhero-fill-appear var(--duration-300) var(--ease-standard);
}@keyframes wkhero-fill-appear {
  from { width: 0%; }
}.wkhero-fill-1 { background: var(--teal-700); }.wkhero-fill-2 { background: var(--teal-600); }.wkhero-fill-3 { background: var(--teal-500); }.wkhero-fill-4 { background: var(--teal-400); }.wkhero-fill-5 { background: var(--teal-300); }/* 5th step (D-626) — a bar with no fill class renders INVISIBLE, silently. */
/* Week-step crossfade (D-422: ~400–500ms total, fade+slide out then in). */
.wkhero-fade {
  transition: opacity var(--duration-200) var(--ease-in-out),
    transform var(--duration-200) var(--ease-in-out);
}.wkhero-fade.is-swapping {
  opacity: 0;
  transform: translateY(var(--space-4));
}/* Micro-states (D-422 / G6): press tone + focus ring on every control. */
.wkhero-step:active { background: var(--surface-card-hover); }.wkhero-cta:active { filter: brightness(0.94); transform: scale(0.98); }.wkhero-step:focus-visible,
.wkhero-cta:focus-visible,
.wkhero-return:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ── D-484(6) · THE PRETERM BANNER ─────────────────────────────────────────────
 * The most safety-relevant element on the home surface.
 *
 * Our week content is written for a baby born AT TERM. For a preterm baby it can be
 * actively wrong — and the dangerous case is FEEDING: "feed on cue" and "5 wet nappies
 * means she's getting enough" assume a baby who reliably wakes and asks. A sleepy
 * late-preterm baby does not, so on-cue feeding can UNDER-FEED exactly the baby least
 * able to afford it.
 *
 * ⚠️ IT SHOWS ON **BOTH** PATHS — opted-in AND opted-out — until the baby reaches their
 * due date. The opt-out governs which WEEK NUMBER we display. It does not make term
 * feeding advice safe for a 34-weeker. Autonomy governs the clock; it does not govern
 * whether we serve known-unsafe content.
 *
 * TWO STATES:
 *   .wkhero-warn.is-alert  — RED. Pre-due-date. Directive, not a disclaimer.
 *   .wkhero-warn.is-clear  — GREEN. The due date arrives (opted-in only). A good day —
 *                            the one moment in this flow we get to be warm for free.
 * ⚠️ @provisional-pending-clinical-signoff — the COPY is not ours. A paediatrician signs
 * it before it reaches a parent. */
.wkhero-warn { display: flex; gap: var(--space-12); align-items: flex-start; margin: 0 0 var(--space-16); padding: var(--space-12) var(--space-16); border-radius: var(--radius-12); }
.wkhero-warn[hidden] { display: none; }
.wkhero-warn.is-alert { background: var(--surface-danger); border-left: var(--space-4) solid var(--error-600); }
.wkhero-warn.is-clear { background: var(--surface-info); border-left: var(--space-4) solid var(--info-500); }
.wkhero-warn-ic { flex: none; width: var(--size-18); height: var(--size-18); margin-top: var(--space-4); }
.wkhero-warn.is-alert .wkhero-warn-ic { color: var(--error-600); }
.wkhero-warn.is-clear .wkhero-warn-ic { color: var(--info-500); }
.wkhero-warn-tx { min-width: 0; }
.wkhero-warn-hd { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-700); color: var(--text-primary); margin: 0 0 var(--space-4); line-height: var(--leading-140); }
.wkhero-warn-bd { font-size: var(--size-13); color: var(--text-primary); margin: 0; line-height: var(--leading-150); }
/* The directive sentence. This is the one that protects the baby — it must not read as
 * a footnote to the sentence above it. */
.wkhero-warn-bd b { font-weight: var(--weight-700); }