/* PHASE·DEVELOPMENT (606) — the area read. Render in web/js/cards/phase/development.render.js.
 *
 * ⚠️ MIRRORED FROM article.css (605), WHICH IS ITSELF MIRRORED FROM read.css (502).
 * The body grammar is deliberately identical — same measures, same item faces, same C3 band —
 * because 605's whole item vocabulary was derived by reading the SHIPPED week read off the
 * branch, value by value, after two attempts at writing it from memory produced things that
 * looked plausible and were wrong. Re-deriving it a third time here would risk a third
 * divergence for no gain.
 * 🔴 THIS IS A COPY, NOT SHARED CODE. Three surfaces now carry the same item styles
 * (read.css · article.css · this). That is one too many. The right end-state is a shared
 * item stylesheet all three import; until someone writes it, this comment is the only thing
 * tying them together, and a change to read.css silently drifts two files.
 *
 * WHAT IS GENUINELY NEW HERE, i.e. not in 605: .dev-swap + .dev-grid (the area switcher),
 * .dev-data (the typical-range cards) and .dev-tech (the technique grid). Everything else
 * is 605's object under a different prefix.
 */

/* --space-16, matching .wkr and .pha exactly. Both full-bleed escapes below use the same
   value; a 20 here would make every measure on this surface 4px narrower each side than the
   week read's, which is precisely the bug that cost a round on 605. */
/* 🔴 THE COLUMN (Gate 2 item 8, 2026-07-30) — same rule, same token, same reason as .pha-read
   (article.css) and .wkr (read.css:21): the fixed host escapes #app's column, so the read's own
   root joins it. */
.dev-read{background:var(--surface-card);min-height:100%;max-width:var(--layout-col-max);margin-inline:auto}
.dev{padding:0 var(--space-16) 0}

/* 🔴 LOCAL FALLBACK — DELETE ON MERGE. --surface-item-panel does not exist on main; it
   arrives with feat/read-port-wire. Same temporary declaration as article.css carries, and
   the same instruction: when that branch merges, BOTH must be deleted or two surfaces keep a
   private copy of a token the system already defines. */
.dev-read{--surface-item-panel:var(--cream-200)}

/* ── THE MASTHEAD — read.css lines 65–70, copied value for value (D-610 `actions` set:
      [chevron] [×], close outermost). The × wears --surface-well per D-664: a 40px control
      takes the CONTROL depth, not the band depth. ── */
.dev-read .mast-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0 var(--space-8)}
.dev-read .mast-word{font-family:var(--font-display);font-weight:var(--weight-wordmark);font-size:var(--size-20);letter-spacing:var(--tracking-neg-01);color:var(--text-primary)} /* token-exception: canonical wordmark size, matches topbar.css (D-411) */
.dev-read .mast-word b{color:var(--brand)}
.dev-read .mast-r{display:flex;align-items:center;gap:var(--space-8)}
.dev-read .mast-r .act-chev{width:var(--dim-40);height:var(--dim-40);background:var(--surface-card);box-shadow:var(--shadow-card);color:var(--accent)}
.dev-read .mast-r .act-chev svg{width:var(--size-18);height:var(--size-18)}
.dev-read .mast-btn{width:var(--dim-40);height:var(--dim-40);border-radius:var(--radius-round);background:var(--surface-well);box-shadow:none;color:var(--green-900);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.dev-read .mast-btn svg{width:var(--size-18);height:var(--size-18);display:block}
.dev-read .mast-btn:active{opacity:0.72}
.dev-read .mast-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ── THE HERO ─────────────────────────────────────────────────────────────────────────── */
.dev-hero{text-align:center;padding-top:var(--space-12);position:relative}

/* THE AREA SWITCHER. The name IS the control (option 3 of six, Andrew 2026-07-27 — "we cant
   have 2 sideways scrollers"). Rendered as a button so it is a real control with real states,
   not a div with a click handler.
   ⚠️ THE CARET IS A DISCLOSURE CHEVRON, AND IT IS GREY. D-663: main body → grey, masthead →
   teal. This one opens content in place, so it is the body case, and it must NOT read as the
   actions chevron sitting 40px above it in the bar. Down rather than right, because it drops
   a panel rather than revealing a menu. */
.dev-swap{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);background:0;border:0;padding:var(--space-4) var(--space-8);margin:0 auto;cursor:pointer;font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-28);line-height:var(--leading-115);color:var(--nav-active);border-radius:var(--radius-card)}
.dev-swap .i,.dev-swap .i svg{width:var(--size-24);height:var(--size-24);display:block;flex:none}
.dev-swap .i{color:var(--brand)}
.dev-swap .cd{width:var(--dim-16);height:var(--dim-16);flex:none;color:var(--text-tertiary);transition:transform var(--duration-200) var(--ease-standard)}
.dev-swap[aria-expanded="true"] .cd{transform:rotate(180deg)}
.dev-swap:active{opacity:.72}
.dev-swap:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
@media (prefers-reduced-motion: reduce){.dev-swap .cd{transition:none}}

/* THE TWELVE. Same grammar as the phase landing's area grid (601) — a 4×3 of icon-over-label
   cells — because that grid is already locked and re-inventing an area picker here would give
   the app two. ONE LEVEL OF CARDING (D-435): the panel is the card; the cells inside it are
   plain rows, tone-lifted, not boxes-in-a-box.
   ⚠️ COLOUR IS NEVER PER-AREA (D-379 shape=area, D-404 colour=state). Every glyph is
   --brand; the only colour difference in the grid is the SELECTED state. */
.dev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);background:var(--surface-item-panel);border-radius:var(--radius-card);padding:var(--space-12);margin:var(--space-12) 0 var(--space-4)}
/* 🔴 WITHOUT THIS THE PANEL NEVER HIDES. The UA stylesheet's `[hidden]{display:none}` is a
   single attribute selector; `.dev-grid` is a class, so the class wins and `display:grid`
   overrode the hidden attribute — the twelve were on screen from first paint (Andrew,
   2026-07-27: "the area needs to start closed"). ⚠️ MY OWN TEST MISSED IT because it asserted
   `el.hidden === true`, which was perfectly true: the PROPERTY was set and the PIXELS ignored
   it. Assert on layout, not on state, whenever CSS could be overriding the state. */
.dev-grid[hidden]{display:none}
.dev-grid .gc{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);border:0;border-radius:var(--radius-card);background:var(--surface-card);cursor:pointer;font-family:var(--font-body)}
.dev-grid .gc .i,.dev-grid .gc .i svg{width:var(--size-18);height:var(--size-18);display:block}
.dev-grid .gc .i{color:var(--brand)}
.dev-grid .gc .l{font-size:var(--size-10);line-height:var(--leading-120);color:var(--text-secondary)}
/* 🔴 THE CURRENT AREA IS THE GREYED ONE — the picker greys what you CANNOT GO TO, and the one
   place you cannot go is where you already are (Andrew, 2026-07-27: "Only the current area
   (sleep) is greyed out (in your version it's the opposite, 11 are greyed out)").
   The first build had this exactly backwards on both counts: it highlighted the current area
   in teal and dimmed the eleven that had no authored read yet. That made AUTHORING STATE the
   loudest thing in a picker — twelve areas presented as "one available, eleven not" — when
   authoring state is our problem and not something to lead a parent with. It also disagreed
   with the phase landing, where all twelve are live.
   So: grey = you are here. Every other cell is a normal, selectable destination, including the
   ones not yet written — those land on the honest hole (D-541), which is a truthful
   destination rather than a reason to pre-dim the door. */
.dev-grid .gc.sel{background:var(--surface-item-panel);cursor:default;opacity:.5}
.dev-grid .gc.sel .l{font-weight:var(--weight-600)}
.dev-grid .gc:not(.sel):active{background:var(--teal-100)}
.dev-grid .gc:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ── THE SCOPE PAIR — 605'S TYPE, EXACTLY. ────────────────────────────────────────────────
   These two lines are `.pha-name` and `.pha-weeks` from article.css, value for value: Fraunces
   --size-20/--weight-500/--nav-active over Fraunces --size-16/--weight-500/--text-secondary.
   The phase read prints "Reaching and rolling / Weeks 17–26" there; this prints "In phase
   three / Weeks 17–26" in the same slot at the same weight, so the two surfaces read as one
   family rather than as two designs that happen to share a palette.
   ⚠️ COPIED, NOT RE-DERIVED — and therefore it DRIFTS if article.css changes. The eyebrow this
   replaces (uppercase --font-label in --accent) was my own invention and had no counterpart on
   605; matching the sibling surface beats inventing furniture for one card. */
.dev-scope{font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-20);line-height:var(--leading-115);color:var(--nav-active);margin-top:var(--space-8)}
.dev-wk{font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-16);line-height:var(--leading-115);color:var(--text-secondary);margin-top:var(--space-4)}

/* THE RANGE BARS. 605's bars say "how far through the year this read sits"; THESE SAY WHAT
   THE READ COVERS (D-660). Same object, different claim — a Family read spanning the year
   fills all five, and that is scope, not progress. D-630 still applies: never achievement. */
.dev-tick{display:flex;align-items:center;justify-content:center;gap:var(--space-12);margin-top:var(--space-16)}
.dev-tick .cst{background:0;border:0;padding:0;width:var(--dim-24);height:var(--dim-24);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand)}
.dev-tick .cst svg{width:10px;height:10px;flex:none} /* token-exception */
.dev-tick .cst:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.dev-bars{display:flex;gap:var(--space-4);align-items:center;width:9rem;flex:none} /* token-exception */
.dev-bars span{flex:1;border-radius:var(--radius-pill);height:7px;background:var(--teal-100);transition:background var(--duration-200) var(--ease-standard)} /* token-exception */
.dev-bars span.off{background:var(--teal-100)}

.dev-prov{display:flex;justify-content:center;align-items:center;margin:var(--space-12) 0 0;font-family:var(--font-display)}
.dev-prov .rev{display:inline-flex;align-items:center;gap:var(--space-4);color:var(--text-secondary);font-weight:var(--weight-500);font-size:var(--size-13)}
.dev-prov .rev svg{width:var(--dim-16);height:var(--dim-16);color:var(--accent)}

.art{transition:opacity 450ms cubic-bezier(.22,.61,.36,1)}
.art.out{opacity:0}
@media (prefers-reduced-motion: reduce){.art{transition:none}}

/* ── BODY — 605's objects, prefix swapped. ── */
.dev-headline{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-28);line-height:var(--leading-115);text-align:left;margin-top:var(--space-20)}
.dev-headline .fs{color:var(--brand)}
.dev-stand{font-family:var(--font-display);font-weight:var(--weight-400);font-style:italic;font-size:var(--size-17);line-height:var(--leading-155);color:var(--text-secondary);margin:var(--space-12) 0 var(--space-24)}
.dev-p{font-size:var(--size-15);line-height:var(--leading-165);color:var(--text-primary);margin-top:var(--space-12)}
.dev-p + .dev-p{margin-top:calc(-1 * (var(--space-8) + var(--nudge-2)))}
.dev-sub{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--text-subtitle);line-height:var(--leading-120);margin:0;flex:1;min-width:0}
.dev-subrow{display:flex;align-items:center;gap:var(--space-8);margin:var(--space-24) 0 0}
.dev-subrow + .dev-p{margin-top:var(--nudge-1)}
/* size the glyph or it fills its container — Icons.get() returns an <svg> with no intrinsic
   size, and unconstrained it renders at the parent's full width (a 300px book, twice, on 605) */
.dev-read .cv{width:var(--dim-16);height:var(--dim-16);color:var(--text-tertiary);flex:none}

.dev-ey{display:flex;align-items:center;gap:var(--space-8);font-family:var(--font-label);font-size:var(--size-11);font-weight:var(--weight-600);letter-spacing:var(--tracking-05);text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-8)}
.dev-ey svg{width:var(--dim-16);height:var(--dim-16);flex:none}

.dev-keys{margin:var(--space-16) 0 0}
.dev-keys ul{list-style:none;margin:0;padding:0}
.dev-keys li{font-size:var(--size-14);line-height:var(--leading-150);padding-left:var(--space-20);position:relative;margin-bottom:var(--space-8)}
.dev-keys li::before{content:'';position:absolute;left:var(--space-8);top:calc(var(--space-8) - var(--nudge-1));width:var(--dim-5);height:var(--dim-5);border-radius:var(--radius-round);background:var(--accent)} /* token-exception */
.dev-keys a{color:var(--text-primary);text-decoration:none;display:block}

.dev-item{background:var(--surface-item-panel);border:0;border-radius:0 var(--radius-card) var(--radius-card) 0;margin:var(--space-12) 0 0;padding:var(--space-8) var(--space-16) var(--space-16)}
.dev-item.track{border-left:var(--dim-4) solid var(--kind-track-icon)}
.dev-item.do{border-left:var(--dim-4) solid var(--kind-do-icon)}
.dev-item.tool{border-left:var(--dim-4) solid var(--kind-track-icon);display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-12) var(--space-16)}
.dev-worth{background:var(--surface-item-panel);border:0;border-left:var(--dim-4) solid var(--gold-700);border-radius:0 var(--radius-card) var(--radius-card) 0;margin:var(--space-16) 0 0;padding:var(--space-8) var(--space-16) var(--space-16)}
.dev-item .qk,.dev-worth .qk{display:flex;align-items:center;gap:var(--space-8);font-family:var(--font-display);font-size:var(--size-16);font-weight:var(--weight-600);margin-bottom:var(--space-4)}
.dev-item .qk svg,.dev-worth .qk svg{width:var(--dim-16);height:var(--dim-16)}
.dev-item.track .qk{color:var(--kind-track-icon)}
.dev-worth .qk{color:var(--gold-700);margin-bottom:var(--space-8)}
.dev-worth p{font-size:var(--size-13);line-height:var(--leading-150);margin:0;color:var(--text-primary)}
.dev-item.track .q{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-15);color:var(--text-primary);margin-bottom:calc(var(--space-8) + var(--nudge-2))}
.dev-item.track .opts{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.dev-item.track .opts button{font-family:var(--font-body);font-size:var(--size-13);font-weight:var(--weight-500);color:var(--kind-track-icon);background:var(--surface-card);border:1px solid var(--slate-300);border-radius:var(--radius-pill);padding:var(--space-4) var(--space-12);cursor:pointer} /* token-exception */
.dev-item.track .opts button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.dev-item.do .head{display:flex;align-items:center;gap:var(--space-8);margin-bottom:var(--nudge-2)}
.dev-item .ti{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-14);flex:1;min-width:0}
.dev-item .d{font-size:var(--size-13);line-height:var(--leading-150);color:var(--text-secondary);margin-top:var(--space-4)}
.dev-item.tool .tic{flex:none;width:var(--dim-32);height:var(--dim-32);border-radius:var(--radius-round);background:var(--slate-200);color:var(--kind-track-icon);display:flex;align-items:center;justify-content:center}
.dev-item.tool .tic svg{width:var(--dim-16);height:var(--dim-16)}
.dev-item.tool .k{font-family:var(--font-label);font-size:var(--size-10);font-weight:var(--weight-600);text-transform:uppercase;letter-spacing:var(--tracking-05);color:var(--kind-track-icon)}
.dev-item.tool .ti{font-size:var(--size-16);margin-top:var(--nudge-2)}

/* ── THE DATA BLOCK (D-221) — NEW ON THIS SURFACE. ────────────────────────────────────────
   Kind is TRACK (slate, D-454): this is evidence, the thing you consult. It is NOT teal —
   teal is read/act, and colouring the numbers teal would make them feel like an instruction.
   ⚠️ THE STANDFIRST LINE IS NOT DECORATION. "Population ranges, not a measure of your baby"
   is the SaMD guardrail rendered as copy (D-396 r5/r7, D-283). A grid of numbers on a baby
   app invites exactly the reading the app may never support, and the sentence is the cheapest
   possible defence against it. Do not delete it to save a line. */
.dev-data{margin:var(--space-24) 0 0}
.dev-datanote{font-size:var(--size-13);line-height:var(--leading-150);color:var(--text-secondary);margin:0 0 var(--space-12)}
.dev-data .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.dev-data .dc{background:var(--surface-item-panel);border:0;border-left:var(--dim-4) solid var(--kind-track-icon);border-radius:0 var(--radius-card) var(--radius-card) 0;padding:var(--space-12) var(--space-12) var(--space-12) var(--space-12)}
.dev-data .dc .k{font-family:var(--font-label);font-size:var(--size-10);font-weight:var(--weight-600);text-transform:uppercase;letter-spacing:var(--tracking-05);color:var(--kind-track-icon);line-height:var(--leading-120)}
.dev-data .dc .v{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-16);line-height:var(--leading-120);color:var(--text-primary);margin-top:var(--space-4)}
.dev-data .dc .n{font-size:var(--size-12);line-height:var(--leading-150);color:var(--text-secondary);margin:var(--space-4) 0 0}
.dev-data .dc .s{font-family:var(--font-label);font-size:var(--size-10);text-transform:uppercase;letter-spacing:var(--tracking-05);color:var(--text-tertiary);margin-top:var(--space-8)}

/* ── THE TECHNIQUE GRID (D-224) — NEW ON THIS SURFACE. ────────────────────────────────────
   Kind is DO (clay, D-454) — these are things you try. Rows rather than tiles, because a
   technique is identified by its NAME and a tile grid would spend the width on nothing.
   The list is phase-filtered in the renderer (D-218), so an unsafe technique is absent rather
   than greyed: a greyed-out swaddle row still teaches a parent that swaddling belongs here. */
.dev-tech{margin:var(--space-24) 0 0}
.dev-tech .tg{display:flex;flex-direction:column;gap:var(--space-8)}
.dev-tech .tc{display:flex;align-items:center;gap:var(--space-12);width:100%;text-align:left;background:var(--surface-item-panel);border:0;border-left:var(--dim-4) solid var(--kind-do-icon);border-radius:0 var(--radius-card) var(--radius-card) 0;padding:var(--space-12) var(--space-16);cursor:pointer;font-family:var(--font-body)}
.dev-tech .tc .t{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-14);color:var(--text-primary);flex:none}
.dev-tech .tc .n{font-size:var(--size-12);color:var(--text-secondary);flex:1;min-width:0}
.dev-tech .tc:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.dev-tech .tc:active{transform:scale(0.995)}

.dev-faq{margin:var(--space-24) 0 0;padding:0;border:0;border-radius:0}
.dev-faq details{border-top:1px solid var(--border-hairline);padding:var(--space-8) 0} /* token-exception */
.dev-faq summary{font-size:var(--size-14);font-weight:var(--weight-600);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-12)}
.dev-faq summary::-webkit-details-marker{display:none}
.dev-faq .a{font-size:var(--size-13);line-height:var(--leading-150);color:var(--text-secondary);margin:var(--space-8) 0 0}
.dev-faq .src{font-family:var(--font-label);font-size:var(--size-10);text-transform:uppercase;letter-spacing:var(--tracking-05);color:var(--text-tertiary);margin-top:var(--space-4)}

.dev-sources{margin:var(--space-20) 0 0}
.dev-sources ul{list-style:none;margin:0;padding:0}
.dev-sources li{font-size:var(--size-12);line-height:var(--leading-150);padding-left:var(--space-16);position:relative;margin-bottom:var(--space-4);color:var(--text-secondary)}
.dev-sources li::before{content:'';position:absolute;left:2px;top:calc(var(--space-4) + var(--nudge-2));width:var(--dim-6);height:var(--dim-6);border-radius:var(--radius-round);background:var(--accent)} /* token-exception */
.dev-sources li b{color:var(--text-primary)}

/* the honest hole (D-541) — a real sentence, never a blank page or an invented read */
.dev-hole{margin:var(--space-32) 0 var(--space-32)}
.dev-hole p{font-size:var(--size-15);line-height:var(--leading-165);color:var(--text-primary);margin-top:var(--space-8)}
.dev-hole p.q{color:var(--text-secondary);font-size:var(--size-13)}

/* ── THE C3 BAND — forward-look + stepper as ONE continuous band, mirrored from read.css.
      The full-bleed escape is calc(-1 * --space-16) to match .dev's container padding; a
      mismatch here is what left 605's foot 4px narrow each side for a whole round. ── */
.dev-cu{background:var(--surface-item-panel);margin:var(--space-24) calc(-1 * var(--space-16)) 0;padding:var(--space-12) var(--space-16) 0}
.dev-cu .t{font-size:var(--size-14);color:var(--text-secondary);margin:var(--nudge-1) 0 0}
.dev-stepper{display:flex;align-items:stretch;gap:var(--space-8);background:var(--surface-item-panel);margin:0 calc(-1 * var(--space-16));padding:var(--space-8) var(--space-16) var(--space-12)}
.dev-step{flex:1;display:flex;align-items:center;gap:var(--space-8);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:var(--space-12);cursor:pointer;text-align:left} /* token-exception */
.dev-step.next{justify-content:flex-end;text-align:right}
.dev-step .ar{flex:none;width:var(--dim-32);height:var(--dim-32);border-radius:var(--radius-round);background:var(--surface-well);color:var(--nav-active);display:flex;align-items:center;justify-content:center;font-size:var(--size-20);line-height:1}
.dev-step .lab .e{display:block;font-family:var(--font-label);font-size:var(--size-10);font-weight:var(--weight-700);text-transform:uppercase;letter-spacing:var(--tracking-05);color:var(--accent)}
/* two lines always reserved — the band must not change height between reads (see article.css) */
.dev-step .lab .t{display:block;font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-14);line-height:var(--leading-115);min-height:calc(2 * var(--size-14) * 1.15);color:var(--text-primary)}
.dev-step:active{transform:scale(0.99)}
.dev-step:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
/* one neighbour ⇒ one card, full width — never a hidden placeholder holding a gap open, which
   would imply a read that does not exist. Hit on the first two-read area (Crying & Soothing). */
.dev-step.solo{flex:1 1 100%}