/* WEEKS·PICKER (501) — 53 weeks, banded by phase, one tap. (D-572)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * The week digit on the home hero — the biggest tap target in the app — toasted "coming soon".
 * The card has been registered in cards.json since 2026-07-10, pointing at a file that was never
 * created.
 *
 * SHAPE: a grid, banded by phase (bake-off A). The job is JUMP, not browse: one tap, and the whole
 * year visible at once. The scrubber read beautifully as a year and then you tried to drag to week
 * 40; the two-step phase-first matched the recordings page but added a step to a task that should
 * be instant.
 *
 * ── COLOUR = STATE, NEVER DECORATION (D-404) ────────────────────────────────────────────────────
 *   NOW      --accent fill. She is here. ONE of these, ever.
 *   BEHIND   the default. Reachable, ordinary — she may have a second baby, or be reading back.
 *   AHEAD    quieter, and NOT disabled. See below.
 *
 * ⚠️ AHEAD IS REACHABLE, AND THAT IS A DECISION. The collection reader's COMING UP band IS disabled
 * (D-568), and D-490 exists because the app once pushed weaning at a two-week-old's parent. But that
 * is a different VERB: D-490 is about PUSH — the app deciding, unasked, to put weaning in front of
 * her. A picker is PULL. She opened it. She chose. And D-455 explicitly requires past and future to
 * be REACHABLE. Locking the year would be the app deciding a mother may not read ahead about her own
 * child.
 *
 * A whisper, not a gate — the same rule as the stage label (D-570), and for the same reason.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.wkp { min-height: 100%; padding: var(--rhythm-pad); display: flex; flex-direction: column; gap: var(--space-12); }

.wkp-bar { display: flex; align-items: center; }
.wkp-close { width: var(--dim-40); height: var(--dim-40); border: 0; background: 0; color: var(--text-secondary); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wkp-close svg { width: var(--size-18); height: var(--size-18); }
.wkp-close:active { opacity: 0.72; }
.wkp-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.wkp-title { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-28); line-height: var(--leading-115); color: var(--text-primary); margin: 0 0 var(--space-8); }

/* ── the phase band. BARE, not carded (D-435: one level of carding; a heading is not a box). ──── */
.wkp-phase { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-20); }
.wkp-ph { display: flex; align-items: baseline; gap: var(--space-8); margin: 0; }
.wkp-phn { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-tertiary); }
.wkp-phl { font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-500); color: var(--text-primary); }

/* six across. A 44px minimum on every cell — this is a grid of small targets and it is the one
 * place in the app where a thumb-sized miss sends her to the wrong week (G6 / control-height floor,
 * check 26). */
.wkp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }

.wkp-w {
  aspect-ratio: 1;
  min-height: var(--dim-44);
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  font-family: var(--font-label);
  font-size: var(--text-meta);
  font-weight: var(--weight-600);
  color: var(--text-secondary);
  cursor: pointer;
}
.wkp-w:active { background: var(--surface-card-hover); }
.wkp-w:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* 🔴 SHE IS HERE. Exactly one of these. Colour = state (D-404), and the state is "you are here" —
 * which is a fact about her, not a decoration, and is the only thing on this screen allowed to be
 * loud. NOT gold: gold NOTICES, and it means "this is about your baby's safety" (D-440). */
.wkp-w.is-now {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--weight-700);
  box-shadow: none;
}
.wkp-w.is-now:active { background: var(--accent-hover); }

/* ── 🔴 AHEAD: I MADE THE RIGHT DECISION AND THEN STYLED IT INTO ITS OPPOSITE. (D-575) ──────────
 *
 * Andrew, on the rendered card: "i think we agreed that users can see all weeks."
 *
 * We did. I wrote it into the register, the tests and three comment blocks — *ahead is REACHABLE,
 * a whisper not a gate* — and then I gave it `background: 0; box-shadow: none; color: tertiary`.
 *
 * On screen that is not a whisper. It is a DISABLED CONTROL. Stripping the card, the shadow and the
 * ink is the exact visual vocabulary the reader uses for COMING UP, which genuinely IS shut (D-568),
 * and the vocabulary every app on earth uses for "you cannot press this". Forty of the fifty-three
 * weeks looked switched off.
 *
 * ⚠️ AND NO CHECK COULD EVER HAVE CAUGHT IT. The test asserts `!disabled` — and it PASSED, because
 * the button was not disabled. It was only DRESSED as disabled. Every automated thing I own was
 * looking at the attribute; the only instrument that can see the difference between "reachable" and
 * "looks reachable" is a human eye, which is the entire reason the workbench exists — and which I
 * had, an hour earlier, shipped without a pin tool.
 *
 * SO: AHEAD KEEPS THE CARD AND THE SHADOW. It is a real, pressable week, and it must look like one.
 * The ONLY differences are ink weight and colour — enough to say "this hasn't happened yet", nowhere
 * near enough to say "you may not go there". The one loud cell on the screen is where she is. */
.wkp-w.is-ahead {
  color: var(--text-tertiary);
  font-weight: var(--weight-400);
}
.wkp-w.is-ahead:active { background: var(--surface-card-hover); }