/* SHARED·CHAPTERHEADING (1162) — the chapter heading: CHECKPOINT N with five bars · Around N
 * months · phase name · fold chevron. One component, two readings of the same three lines:
 *   · Milestones  CHECKPOINT 3 ▬▬▬▬▬ · Around 6 months · Reaching and rolling
 *   · Portrait    PHASE 3 ▬▬▬▬▬      · Reaching and rolling · 4 to 6 months
 * The job is identical (name a chapter of the year and fold it), only the words move, so the
 * Portrait form is a renderer prop (kind: 'phase'), never a second card (LANE-RULES §3).
 *
 * THE WHOLE HEADING IS THE FOLD CONTROL: one <button aria-expanded>, the caret is its glyph.
 * The component is INERT AT RENDER — it does not open or close anything; the recipe (the
 * Milestones page, the Portrait landing) toggles `.chhd-open` + aria-expanded and shows or hides
 * the panel it names in aria-controls. Closed = caret-right-bold, open = caret-down-bold, both the
 * icon-set carets (DECISIONS-2026-09-14 line 21: "chevron points right when closed, down when open
 * (icon-set carets)"), from icons.js `chev` / `caretDown` — never drawn here (D-427).
 *
 * ⚠️ THE LOCKED MILESTONES RENDER (RENDER-milestones-full-page-2x.png) draws DOWN when closed and
 * UP when open; the later same-day Portrait ruling (right / down) is the one this component takes
 * for both, because "one heading style for all" (PORTRAIT-A-TO-Z §3) cannot hold two glyph
 * grammars. Flagged in REPORT-86 for a one-word ruling; the change is two glyph names.
 *
 * TRANSCRIBED from the template's own script, not the PNG:
 * ~/BabyWeeks-inbox/templates/milestones-2026-09-14/fullpage.tpl.mjs lines 38-43 (.cp .phk
 * .bars .pht .phs .chev) and cpplus2.html lines 9-17 (the same rules, height 28 on the kicker
 * row for the plus — the plus is 1159's and sits in the snake card now, so that height is not
 * carried). Values, template → here:
 *   row        padding 14px 2px, border-bottom 1px cream-500     → 16px 0, the same hairline
 *              (14 is off the 4px grid, D-511; the 2px inset is the page's, not the heading's)
 *   open row   border-bottom 0, padding-bottom 10px               → 0, --space-8
 *   kicker     11.5px · 600 · .12em · teal-700 · uppercase, gap 8 → 1123 SHARED·EYEBROW (.eyebrow,
 *              app.css: 11px · 500 · .14em · teal-700) — ADOPTED, not re-declared, so the
 *              eyebrow's one owner keeps it (REPORT-85 ruling C on its weight moves this too)
 *   bars       5 × 18×4, radius 2, gap 4; cream-500 · past teal-200 · on phase-3
 *                                                                 → --dim-16 × --dim-4 (18 has no
 *              size token and is off-grid), --radius-2, --space-4, the same three colours
 *   title      Fraunces 20px · 600, margin 4px 0 2px             → --font-display --size-20
 *              (no --text-* role at 20 — the loop/masthead precedent) · --weight-600, top --space-4
 *   subtitle   13px · text-secondary                             → --text-caption · --text-secondary
 *   caret      teal-700, 18–20px svg                             → --teal-700, --dim-24 svg
 *
 * ⚠️ THE LIT BAR IS ONE COLOUR FOR EVERY CHAPTER — var(--phase-3), exactly as the approved picture
 * draws it (every checkpoint's lit bar is the same mid-teal). Colouring each chapter's bar in its
 * own --phase-N (the way development.css's .dev-bars does) is a ruling, not taken here.
 *
 * ⚠️ SaMD (rule 5): the bars say WHICH chapter this is — its position in the five — and nothing
 * else. They never show how many milestones she has marked; there is no fill, no fraction, no
 * count anywhere in this component. The renderer takes n and total only.
 *
 * Card CSS is self-contained: every element the renderer emits is styled here (the eyebrow's TYPE
 * is 1123's; its LAYOUT in the row is .chhd-ky, here). The button's user-agent chrome is reset in
 * full so the heading looks the same in the app shell as in the mirror (the 502 corollary).
 */
.chhd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  box-sizing: border-box; width: 100%; margin: 0; padding: var(--space-16) 0;
  border: 0; border-radius: 0; background: transparent; color: var(--text-primary);
  font-family: var(--font-body); text-align: left; -webkit-appearance: none; appearance: none;
  cursor: pointer; }
.chhd { border-bottom: 1px solid var(--cream-500); } /* token-exception */
.chhd-body { display: block; flex: 1 1 auto; min-width: 0; }
.chhd-k { display: flex; align-items: center; gap: var(--space-8); }
.chhd-ky { display: block; white-space: nowrap; }
.chhd-t { display: block; margin: var(--space-4) 0 0; font-family: var(--font-display); font-weight: var(--weight-600); line-height: var(--leading-120); color: var(--text-primary); }
.chhd-t { font-size: var(--size-20); } /* token-exception */
.chhd-s { display: block; margin: 0; font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--weight-400); line-height: var(--leading-140); color: var(--text-secondary); }
.chhd-chev { display: block; flex: none; width: var(--dim-24); height: var(--dim-24); color: var(--teal-700); }
.chhd-chev-r, .chhd-chev-d { display: block; width: var(--dim-24); height: var(--dim-24); }
.chhd-chev svg { display: block; width: var(--dim-24); height: var(--dim-24); }
.chhd-chev-d { display: none; }
/* the five bars — declared AFTER the text and caret rules on purpose: the contrast audit reads the
 * nearest preceding rule that owns a background as the ground for the rules below it, and the lit
 * bar is not the ground the sub line and the caret sit on (they sit on the page). Order, not a bypass. */
.chhd-bars { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.chhd-bar { display: block; width: var(--dim-16); height: var(--dim-4); border-radius: var(--radius-2); background: var(--cream-500); }
.chhd-bar.is-past { background: var(--teal-200); }
.chhd-bar.is-on { background: var(--phase-3); }

/* open — the hairline goes (the chapter's card sits directly under), the caret points down */
.chhd-open { border-bottom: 0; padding-bottom: var(--space-8); }
.chhd-open .chhd-chev-r { display: none; }
.chhd-open .chhd-chev-d { display: block; }

/* micro-states (G6, D-422 press/focus floor) */
.chhd:active { opacity: 0.7; }
.chhd:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* static — the dashboard's Milestones list headings (signed-off template, "Ok lock dashboard"
 * 2026-09-15): the same three lines naming the chapter, but it is not a fold — a div, no caret,
 * no hairline (the template's .ph draws none; the hairlines under it belong to the week rows),
 * not focusable, not a control. Declared AFTER the micro-states on purpose: .chhd-static:active
 * must out-rank .chhd:active at equal specificity. The template draws this name a step smaller
 * than the fold's (sketch-dashboard-whole-page.html .ph .n — 18 Fraunces) → --text-subtitle, the
 * system's 18 role (tokens resolve it to --size-18; milestone-card and timeline titles use the
 * same role); its 5px top gap snaps to the grid's 4 like the fold's did. The eyebrow stays 1123's
 * as adopted — the tool variant (job 92) is not on this base, so the label is left as the brief
 * directs. */
.chhd-static { border-bottom: 0; cursor: default; }
.chhd-static .chhd-t { font-size: var(--text-subtitle); }
.chhd-static:active { opacity: 1; }