/* PHASE·LANDING (601) — a navigation page, on the app's own card shell. (D-577)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 EVERYTHING STRUCTURAL COMES FROM `home-shell.css`. This file adds ONLY what the shell does not
 * have. It re-declares no card, no row, no gap.
 *
 *     .nh-mod     the card        .nh-mhead / .nh-mtitle   its head + title
 *     .nh-mstand  the standfirst  .nh-yrow / .nh-ychip …   the locked row
 *
 * In the bake-off I invented every one of those from scratch, and it cost an evening: twelve cards
 * where there should have been one; a heading and its rows in one indistinguishable font; doubled
 * gaps; a dead 44px at the foot of a card. Four different-looking symptoms, one cause — I drafted
 * from a blank slate, which is precisely what D-435's build rule forbids.
 *
 * ── THE VERTICAL RHYTHM IS NAMED BY ROLE, AND I HAND-ROLLED IT ─────────────────────────────────
 *     --rhythm-pad     module top/bottom       --rhythm-stand   standfirst → content
 *     --rhythm-head    h2 → standfirst          --rhythm-stack   module → module
 * I had written `gap: var(--space-12)` — the same NUMBER, the wrong NAME — inside a card that
 * already had --rhythm-pad. The gaps doubled. The tokens are named by role so the next person
 * changes the card gap ONCE.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE COLUMN is no longer here (D-711). It was the same token restated on .phl, .pha-read,
   .dev-read, .mtl-wrap, .tqp and .ssf — six copies, and two hosts that forgot it entirely. It now
   comes from `.appcol` in app.css, carried by the host `phase.js` mounts. */
.phl { min-height: 100%; padding: var(--rhythm-pad) 0; display: flex; flex-direction: column; }

/* the stack. THREE cards. Restraint: calm comes from FEW cards and cream whitespace — "busy" means
 * fewer boxes, not more styling (D-435 §7). */
.phl-stack { display: flex; flex-direction: column; gap: var(--rhythm-stack); }
.phl-inset { padding: 0 var(--rhythm-inset); }
.phl-mod { position: relative; }

/* ── THE HEADER: BARE, ON THE CREAM GROUND. Not a card — the drill-in pattern the collection reader
 *    uses. Eyebrow + display title, nothing lifted. ────────────────────────────────────────────── */
.phl-bar { display: flex; padding: 0 var(--rhythm-inset); }
.phl-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; }
.phl-close svg { width: var(--size-18); height: var(--size-18); }
.phl-close:active { opacity: 0.72; }
.phl-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* 🔴 TEAL. Andrew: "make this eyebrow teal as it's important framing."
 * "Phase 2 · weeks 9–16" is not decoration — it is WHERE SHE IS, and it anchors everything else on
 * the page. `--accent`, NOT teal-700: that tone is bespoke to the hero (D-430) and must not leak. */
.phl-eyebrow { padding: 0 var(--rhythm-inset); margin: 0; 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(--accent); }
.phl-title { padding: 0 var(--rhythm-inset); margin: var(--space-4) 0 var(--space-20); font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--text-display-sm); line-height: var(--leading-115); color: var(--text-primary); }

/* ── CARD 1 · the read. The CTA is the locked `.dpr-read` from the deep-read card — a thumb, not a
 *    cursor — and it sits at the BOTTOM, because a CTA is what you do after reading. ──────────── */
.phl-read { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); margin-left: calc(-1 * var(--space-12)); border: 0; background: 0; font-family: var(--font-label); font-size: var(--text-body-sm); font-weight: var(--weight-700); color: var(--accent); cursor: pointer; }
.phl-read svg { width: var(--size-16); height: var(--size-16); }
.phl-read:active { opacity: 0.72; }
.phl-read:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-card); }

/* the honest hole — it must NOT look like designed content (D-541). None of the 4 phase reads or 48
 * area reads is written; that is a fact the page states rather than dresses. */
.phl-hole { color: var(--text-tertiary); }

/* ── CARD 2 · the twelve. BARE CELLS. No boxes nested inside a card (D-435 §2 — twelve tiles were
 *    twelve cards, and Andrew caught it: "isnt our style to have cards?"). ────────────────────── */
/* ── THE TWELVE, FOUR ACROSS, THREE ROWS — ORDERED BY WHAT PARENTS ASK ABOUT. (2026-07-26)
   Andrew: "3 by four not 4x3 (3 rows). organise by the topics parents most ask questions
   about from most to last."

   THE ORDER IS DERIVED, NOT GUESSED. It comes from `web/data/question-pool.json` — 231
   authored questions, counted by domain:
     sleep 33 · movement 31 · social 27 · crying-and-soothing 23 · learning 22 · feeding 21 ·
     body-and-senses 20 · language 20 · growth 11 · health 11 · rhythm 11 · family 1
   Rows are the four most, the next four, the last four. Each row takes one colour, so the
   grouping is carried by hue with the rows already doing the proximity work.

   ⚠️ THE POOL IS A PROXY AND SHOULD NOT BE MISTAKEN FOR OBSERVED BEHAVIOUR. It counts how
   many questions WE AUTHORED per domain, not how often a parent asks. It is an editorial
   artefact built off the evidence base — good evidence, but evidence about our own coverage.
   The moment there is real usage data this order should be re-derived from it.
   ⚠️ AND IT EXPOSES A CONTENT GAP: `family` has ONE question against sleep's thirty-three.
   It sits last because it is barely covered, not because it matters least.

   🔴 THREE COLOUR BANDS OVER A FREQUENCY ORDER WILL READ AS PRIORITY TIERS. Row three is
   the faintest-ranked four in the palette AND the least-asked four, and a parent has no way
   to know the second fact — so it reads as "these matter less". Family and Health are in it.
   That is a claim we do not intend and cannot support; flagged, not hidden.

   🔴 AND IT CROSSES D-577 §2, KNOWINGLY. Colour-per-area was built and rejected because
   colour carries KIND app-wide (D-454: teal=read · clay=do · gold=watch · slate=track).
   --clay-700 here is the DO glyph colour in search, the toolkit and every reader chip.
   Per-row is coarser than per-area and a row never leaves this card, but the collision is
   the same in kind. Andrew's call, cost stated. */
.phl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16) var(--space-8); }
/* the card's eyebrow — the same role and voice as the milestones card's (.pmc-eb) above it,
   so the two cards on this tab share one grammar rather than one having a hat and one not. */
/* ⚠️ --rhythm-inset, NOT zero. The eyebrow was flush to the card edge while the title and
   standfirst sat on the module inset (.nh-mhead / .nh-mstand, D-510), so the three lines of
   one header started at two different left edges. A header whose own lines do not align is
   read as a mistake before it is read as words. */
.phl-eb { padding: 0 var(--rhythm-inset); font-family: var(--font-label); font-size: var(--text-micro); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--accent-hover); margin-bottom: var(--space-4); }
/* the teal full stop — the brand's sentence-ender, matching .pmc-ttl i on the card above */
/* the Development card's door — the third of the tab's three filled buttons (see the note
   in phase/hero.css on what three primaries costs). Slate because it is the card's own
   identity colour here; ⚠️ slate is kind=track elsewhere (D-454). */
/* ⚠️ THE CARD CLIPS ITS OWN DOOR — AND HAS TO LOSE ITS BOTTOM PADDING TO DO IT.
   `overflow: hidden` alone was not enough: .nh-mod (home-shell.css) carries padding on all
   four sides, so the band sat ABOVE a strip of card and its square corners showed against
   the rounded ones below. The band now breaks out sideways on --rhythm-inset and the module
   drops its bottom padding, so the band IS the card's bottom edge and the card's own radius
   is what shapes it. Three properties, one seam — none of them optional.
   THE ORIGINAL NOTE: The band ran full-bleed to the card's edge but kept
   SQUARE bottom corners inside a rounded card, so it poked out at both bottom corners and
   read as a rendering fault. `overflow: hidden` on the module makes the card's radius the
   authority — better than re-declaring the radius on the door, which would then have to be
   kept in sync with .phl-mod by hand.
   ⚠️ SLATE STAYS AT 600. Andrew asked for a lighter slate: there is not one. --slate-500 is
   3.35:1 against cream-50 and fails AA for 13px semibold; --slate-600 is 4.45:1, itself a
   hair under the 4.5 threshold. Going lighter means dark text, not white. */
.phl-mod { overflow: hidden; padding-bottom: 0; }
.phl-pick svg { width: var(--dim-16); height: var(--dim-16); }
/* ⚠️ --teal-800, the foot of the ramp (R2, chosen 2026-07-26). The three doors run
   600 → 700 → 800 down the screen, the same move D-654's phase lines make, so the tab reads
   as ONE gradient rather than three colour decisions. It starts at 600 and not at the ramp's
   actual middle because --teal-500 is 3.22:1 on cream and fails AA at 13px semibold — the
   middle of the ramp is not the middle of what is legible on white. */
/* 🔴 TOP CORNERS ROUNDED — THE THIRD DOOR (2026-07-26). D-659's ramp is a TAB decision, so
 * the door SHAPE is one too: hero and milestones were rounded first and this one left square
 * for a round, which gave the tab two door grammars. Radius is --radius-card-lg for the same
 * reason as the other two — the BOTTOM corners are not this element's, they are the card's,
 * produced by .phl-mod's `overflow: hidden` clipping the band. Match the token or the band is
 * symmetrical in intent and visibly not in fact.
 * ⚠️ NO NEGATIVE MARGIN, unlike .phz-door. `.nh-mod` is `padding: var(--rhythm-pad) 0` — ZERO
 * horizontal — so this band has nothing to escape. .phz-door's card supplies 20px of side
 * padding and must break out of it. Three doors, two opposite box models: never share a
 * declaration across them.
 * ⚠️ AND THIS ONE IS STILL NOT A BUTTON. "Take your pick" has no destination — its targets
 * are the twelve circles ABOVE it — so it stays a <div> with an UP arrow (D-659). Rounding
 * its top makes it look more pressable than it is; that tension is now sharper, not resolved,
 * and D-659's open question ("whether it becomes a real door or drops to a line of text
 * above the grid") is still open.
 * ⚠️ The duplicate `margin-top` in the old rule is dropped — it was declared twice. */
.phl-pick { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); box-sizing: border-box; width: 100%; margin-top: var(--space-16); padding: var(--space-16) var(--space-20); border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0; background: var(--teal-800); color: var(--text-on-accent); font-family: var(--font-body); font-size: var(--size-15); font-weight: var(--weight-600); }
.phl-door { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; text-align: left; padding: var(--space-12) var(--space-16); border: 0; background: var(--slate-600); font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--weight-600); color: var(--text-on-accent); cursor: pointer; margin-top: var(--space-16); }
.phl-door svg { width: var(--dim-16); height: var(--dim-16); }
.phl-door:active { opacity: 0.72; }
.phl-door:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.phl-dot { font-style: normal; color: var(--accent); }
.phl-ghd { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-600); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-8); }
.phl-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: 0; border: 0; background: 0; cursor: pointer; }
.phl-cell:active { opacity: 0.72; }
.phl-cell:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-card); }

/* 🔴 TEAL, AND ONLY TEAL. (D-379 upheld — "KIND colours the tile; AREA is an icon, not a colour.")
 * Every area read is a READ, so every chip is teal (D-454). The alternative — twelve areas, twelve
 * hues — was built and shown: it looked better on THIS page and would have cost the whole app. If
 * Sleep is gold here it must be gold in search, the toolkit, home and the reader chip, and then
 * teal=read · clay=do · gold=watch · slate=track means nothing at all. */
.phl-chip { width: var(--dim-44); height: var(--dim-44); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; background: var(--kind-read-fill); color: var(--kind-read-icon); }

/* ── THE THREE GROUP COLOURS = THE CTA RAMP (2026-07-26, after D-659) ──
   600 → 700 → 800, the same three values as the three doors, in the same increasing order
   down the screen. The rows and the buttons now say the SAME THING with the SAME steps, so
   the tab has one colour idea instead of two that happen to coexist.
   ⚠️ AND IT RETIRES THE BORROWED HUES. green-900 and slate were doing this job before, and
   slate is kind=track everywhere else (D-454) — the D-577 §2 collision this whole thread
   kept paying for. Staying inside teal borrows nothing from any kind, which is the option
   (C4) that was on the table from the start and only became obviously right once the doors
   settled on the same ramp.
   ── the old note ──────────────────────────────────────────────────────
   Brand teal · the deep evergreen · clay. Teal and green-900 are the two the brand
   already treats as primary (D-650 names --green-900 as the ONE sanctioned non-teal
   accent); clay is the third because it is the only remaining hue with real separation
   from both — gold is reserved for NOTICE (D-440) and putting a caution colour on a
   third of a parent's development areas would say something we do not mean.
   ⚠️ THE DISC IS TINTED TOO, NOT JUST THE GLYPH. A clay glyph on the teal-100 disc reads
   as a mistake rather than a category — the fill has to move with it or the outline looks
   like a rendering error. If only the outline is wanted, drop the two background lines. */
/* ⚠️ ONE DISC, THREE GLYPH COLOURS (Andrew, 2026-07-26). An earlier pass tinted the disc
   to match each glyph; the disc is now --kind-read-fill for all twelve and ONLY the glyph
   changes. That is the literal reading of "differentiate the icon outlines", and it has an
   argument behind it: the disc is what says WHAT KIND OF THING this is — every one of the
   twelve is a READ (D-454: teal = read), and that is true of all of them, so it should not
   vary. The glyph is what says WHICH one. Vary the part that varies.
   ⚠️ Watch clay on teal-100: a warm glyph on a cool wash is the pairing most likely to read
   as a rendering error rather than a category. If any row fails, it is this one. */
/* ── THE ROWS TAKE THE THREE DOOR COLOURS (Andrew, 2026-07-26): --teal-600 → 700 → 800,
   the exact three fills of the three CTAs, in the same order down the screen. The tab now
   has ONE colour idea: the doors and the rows say the same thing with the same three steps.
   ⚠️ This was tried once and reverted ("this didn't work") when the rows were the only
   thing using it; it works now because the DOORS carry the same ramp, so the repetition
   reads as a system rather than as three near-identical greens.
   Contrast on the --teal-100 disc improves with it — 600/700/800 are all darker than the
   phase tones they replace. Old note below.
   ── THE ROWS TAKE THE BAR COLOURS (superseded): the same teal ramp the ARBS bars
   under the hero use, in the same increasing order down the screen. One colour idea on the
   tab instead of a grid borrowing hues from other kinds — this retires --green-900 and
   --slate-600 here, and with them the D-454 collision (slate is kind=track everywhere else)
   that every earlier version was paying for.

   🔴 IT USES THE RAMP'S TOP HALF, NOT THE BOTTOM. Measured on the --teal-100 disc the five
   phase tones give 1.18 · 1.52 · 2.02 · 2.75 · 3.80. The pale end is not a low-contrast
   glyph colour, it is an INVISIBLE one — --phase-1 at 1.18:1 renders as an empty disc. So
   the rows take --phase-3 → --phase-4 → --phase-5: same ramp, same direction, the three
   stops that can carry a 28px stroke.
   ⚠️ Even 3.80 is short of AA and the top row at 2.02 is well short. If these must pass, the
   DISC has to go — which is the fix this card has been circling all along, since ~80% of
   every cell's ink is the identical container, not the glyph inside it. */
/* ⚠️ ROW 1 = --phase-3, one step down the bar ramp from the tone that failed.
   On the --teal-100 disc: --phase-2 was 1.52:1 (effectively invisible), --phase-3 is 2.02:1.
   Better, still short of AA, and still the lightest of the three rows by design.
   The ceiling here is the DISC, not the tone — 80% of every cell's ink is the container, so
   any glyph colour light enough to feel like the pale bars will sit close to it. */
.phl-g1 .phl-chip { color: var(--phase-3); }
.phl-g2 .phl-chip { color: var(--teal-600); }
/* SLATE, not clay — Andrew: "don't like the red". ⚠️ It borrows from kind=track (stats and
   tools) rather than kind=do, which is a rarer kind, so the D-454 collision surfaces less
   often; it does not disappear. */
.phl-g3 .phl-chip { color: var(--teal-800); }
/* ⚠️ 28px, NOT 20px. Recognition depends on an icon's CHARACTERISTIC CUES surviving at the
   rendered size (UNC, filled-vs-outline), and NN/G's image-grid research is blunt that
   undersized images in a grid "are likely to be ignored completely" — a grid only beats a
   text list when the pictures genuinely differentiate. At 20px inside a 44px disc, ~80% of
   every cell's ink was identical to its eleven neighbours. */
.phl-chip svg { width: var(--size-28); height: var(--size-28); }
/* ⚠️ THE LABEL BOX IS A FIXED TWO LINES, AND THIS IS A BUG FIX, NOT A PREFERENCE.
   Ten of the twelve labels fit one line; "Crying & Soothing" and "Body & Senses" wrap to
   two. So cells in the same row had different heights, the row's baseline broke, and the
   grid stopped reading as ROWS at all — which would have defeated any grouping treatment
   layered on top of it. Reserving the second line whether it is used or not makes all
   twelve cells identical and every row level.

   ⚠️ AND THE AREA NAME IS NOT AN EYEBROW. It used to be set in the LABEL role — uppercase,
   Schibsted, tracked — which is the app's grammar for an EYEBROW, the same grammar the
   group heading above it uses. Two levels of the same hierarchy in one typeface, one case
   and one size: the heading could not out-rank the things it was heading, and the whole
   block read as one texture. Worse, the heading was --text-tertiary and the names were
   --text-secondary, so the hierarchy was upside down — the label was quieter than its own
   contents.
   So the two levels now differ on THREE axes at once: the group heading stays the eyebrow
   (uppercase · label font · tertiary), and the area name becomes what it actually is — a
   NAME: sentence case, body font, primary ink. Sentence case also restores word-shape, the
   ascender/descender silhouette that lets a reader identify a word without reading it,
   which is the differentiator left once hue is unavailable (D-577 §2). */
/* ⚠️ FRAUNCES, and it is the on-brand answer rather than a preference. The phase surface
   ALREADY speaks Fraunces small: the hero's anchor line is Fraunces at caption size and the
   deck's week ranges at meta size, both on this same tab — so Inter here would make the
   areas card the odd one out on its own screen. And the role fits: D-429 gives Fraunces the
   display role, and each of these twelve is the TITLE OF A READ, not body copy and not a UI
   label. (Inter and Schibsted at this size were near-identical in the bake-off; choosing
   between them was choosing nothing.)
   ⚠️ CHECK THE OPTICAL AXIS ON A REAL PHONE. Fraunces is variable with optical sizing; at
   this size you want the small-optical cut doing its job, not a shrunk display cut. If the
   labels read thin or fussy rather than warm, that is the axis, not the typeface. */
.phl-al { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--text-meta); text-transform: none; letter-spacing: normal; line-height: var(--leading-115); color: var(--text-primary); text-align: center; min-height: calc(2 * var(--leading-115) * var(--text-meta)); display: flex; align-items: flex-start; justify-content: center; }

/* ── CARD 3 · all four phases. THE LOCKED ROW (.nh-yrow) — chip · name · sub-line · chevron.
 *
 * 🔴 I BUILT MY OWN AND THE HIERARCHY COLLAPSED. Andrew: "this doesnt work with the heading and like
 * all in the same font." The card title is Fraunces 17; my row name was Fraunces 16. The LOCKED row
 * is ALSO Fraunces 16 — and it works, because of what I had left out: the 40px chip anchoring the
 * left, and the Schibsted 12 sub-line underneath. THE CHIP AND THE SUB-LINE CARRY THE HIERARCHY. The
 * type never did that job alone. I had copied the type without the structure. ─────────────────── */
.phl-rows { display: flex; flex-direction: column; }
.phl-prow { width: 100%; border: 0; border-top: 1px solid var(--border-hairline); background: 0; text-align: left; } /* token-exception: a hairline */
.phl-prow:active { background: var(--surface-card-hover); }
.phl-prow:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.phl-prow .nh-ychev svg { width: 100%; height: 100%; display: block; }
.phl-pchip { font-family: var(--font-label); font-size: var(--text-body); font-weight: var(--weight-700); }

/* she is HERE. Colour = STATE (D-404) — the one legitimate use of it on this page, and it lands on
 * the CHIP, which is where the locked card puts its colour too. NO "you are here" caption: the chip
 * says it, and a sentence explaining what the page is showing her is noise. */
.phl-prow.is-now .phl-pchip { background: var(--accent); color: var(--text-on-accent); }
.phl-prow.is-now .nh-yname { color: var(--accent); }

/* ── THE TAB'S COPY OF THIS CARD — its shell only. (2026-07-26)
   ⚠️ These rules were written into milestone-card.css first and CHECK 16 REJECTED IT:
   ".phl-* styled outside its card CSS". Correct — a card's rules living in a neighbour's
   stylesheet is how a card acquires two owners, which is the whole failure this surface
   spent the week paying for. They belong here, with the card they style.
   ── CARD 3's shell on the TAB. 601 renders "In this phase" inside its own .phl-stack,
   which supplies the side margins; on the tab there is no stack, so the wrapper gives the
   card the same gutter the two cards above it use. Nothing else about the card changes —
   it is 601's card, not a copy of it. ── */
.phz-areas { margin: var(--space-12) var(--space-16) 0; }
.phz-areas .phl-mod { margin: 0; }