/* 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.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.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(--size-28); 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?"). ────────────────────── */
.phl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) 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); }
.phl-chip svg { width: var(--size-20); height: var(--size-20); }
.phl-al { font-family: var(--font-label); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-05); line-height: var(--leading-115); color: var(--text-secondary); text-align: 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); }