/* ═════════════════════════════════════════════════════════════════════════════════════════════
 * 429 SHARED·AREACHIP — the lead kind-icon on a row: ONE circle + a registry glyph.
 * ═════════════════════════════════════════════════════════════════════════════════════════════
 * Consolidates the chip pack's JOB 05 (Andrew, "yes", 2026-09-04) — nine private copies that all
 * drew the same thing, a circle that says what kind of thing the row leads to:
 *
 *   .mc-dchip    (cards/collections/mine.css:34)      the door out to 803
 *   .nh-sachip   (home-shell.css:98)                   the tools-rail card chip
 *   .nh-ychip    (home-shell.css:127)                  the locked collection row
 *   .nh-tchip    (home-shell.css:76)                   🔴 DEAD — declared, 0 consumers. Not carried.
 *   .phl-chip    (cards/phase/landing.css:221)         the areas grid, disc dropped by ruling
 *   .phl-pchip   (cards/phase/landing.css:326)         the phase-picker number
 *   .crd-chip    (cards/collection/reader.css:78)      the read's item rows
 *   .loop-chip   (cards/shared/loop.css:99)            the BabyLoops corner chip
 *   .ys-chip     (cards/home/your-stuff.css:47)        her saved items
 *   .ytools-chip (app.css:3320)                        stranded by D-549 — exactly .ys-chip.track
 *
 * SHAPE = area (D-444: the glyph says which area; the circle is constant). COLOUR = the FAMILY
 * (D-454), never per-area. Registered 2026-08-22 on the STEP-6 atom audit; built 2026-09-04 by
 * this consolidation. Renderer: web/js/cards/shared/areachip.render.js (one class-grammar author
 * — a class concatenated at runtime is a class no source linter can check, which is the D-548
 * failure twice over).
 *
 * EXTENDED 2026-09-16 (wip/8-areachip-sizes-states) — the snake + dashboard Milestones list
 * need three more things this atom was not carrying: a 48 size (the snake pebble, the dashboard
 * list's lead), three states (met / dim / own — the per-milestone marking on the snake), the
 * five phase colours (data-phase="1..5" drives --ac-fill / --ac-ink through the same extension
 * points the families use), and a labelled variant (icon + area name together, the tap sheet's
 * labelled area chip). Each was a consumer-side hand-roll before; the build moves the rules
 * HERE so the chip is one component with variants, not eleven.
 *
 * ── THE TWO TEALS ARE NOT DRIFT (measured 2026-09-04, WCAG, 16px root) ─────────────────────────
 *   teal-600 on teal-100 = 3.80:1 — clears the 3:1 GRAPHICS floor (WCAG 1.4.11), fails 4.5 text.
 *   teal-700 on teal-100 = 5.23:1 — clears the 4.5:1 TEXT floor.
 * `.ac--teal` is the text-safe teal because its row chip carries a NUMBER (the phase picker), not
 * only a glyph. Glyph-only chips take a family (`ac--read` IS teal-100 + teal-600/accent — the
 * loop chassis' own teal family, loop.css:37). Unifying them would have pushed the picker's
 * numbers to 3.80:1; keeping them is the accessibility floor, not inconsistency.
 * ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the chassis. 40 is the size that carries its own weight (a row's lead, a card corner);
 *    the fill defaults to the read family so a missing colour class renders VISIBLE teal, never
 *    the transparent chip that was D-548's trap. Every emit site names its family anyway. ── */
.ac { display: flex; align-items: center; justify-content: center; flex: none;
      width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round);
      background: var(--ac-fill, var(--kind-read-fill));
      color: var(--ac-ink, var(--kind-read-icon)); }
.ac svg { width: var(--size-18); height: var(--size-18); display: block; }

/* ── size. Three sizes, per the 2026-09-16 extension: 48 is the snake pebble and the dashboard
 *    list lead (was the kept `.mtl-pw` engine value); 40 leads its own row; 32 sits beside
 *    type and stays quiet. WAS .crd-chip / .nh-sachip at dim-32. ── */
.ac--sm { width: var(--dim-32); height: var(--dim-32); }
.ac--lg { width: 48px; height: 48px; } /* token-exception */

/* ── glyph size. Box and glyph are independent axes in the measured set (40 carried 18/20/24;
 *    32 carried 16/18), so they are named separately. The default 18 is the modal pair. ── */
.ac--g16 svg { width: var(--size-16); height: var(--size-16); }   /* was .crd-chip svg */
.ac--g20 svg { width: var(--size-20); height: var(--size-20); }   /* was .mc-dchip svg · the .cls-row row bump */
.ac--g24 svg { width: var(--size-24); height: var(--size-24); }   /* was .loop-chip svg (dim-24 = 24px at 16px root) */
.ac--g28 svg { width: var(--size-28); height: var(--size-28); }   /* was .phl-chip svg */

/* ── the families (D-454/D-549, retired Watch 2026-09-16 by D-734). One shape, three
 *    token pairs — read / do / track. Animation items ride .ac--do (clay). ── */
.ac--read  { --ac-fill: var(--kind-read-fill);  --ac-ink: var(--kind-read-icon); }
.ac--do    { --ac-fill: var(--kind-do-fill);    --ac-ink: var(--kind-do-icon); }
.ac--track { --ac-fill: var(--kind-track-fill); --ac-ink: var(--kind-track-icon); }

/* ── teal = OUT of family (D-454: showcase), and TEXT-safe — see the header. This was
 *    .nh-ychip's rest state and the phase picker's number chip. ── */
.ac--teal { --ac-fill: var(--teal-100); --ac-ink: var(--teal-700); }

/* ── the box-context override (the 407 lesson): on a card washed in the chip's OWN family fill
 *    the family fill vanishes, so the chip takes the card surface and keeps only the family ink.
 *    WAS .nh-sachip + the three .nh-sa-* colour rules (home-shell.css:87–98). The Watch invert
 *    (.ac--surface.ac--watch) retired 2026-09-16 — D-734: animation items ride Do, which
 *    already had no surface invert; the card surface is the right background. ── */
.ac--surface { background: var(--surface-card); }

/* ── states. Declared AFTER the families so a state wins a family at equal specificity —
 *    the same order the kept sheets accidentally had (the coming rule sat under the k-* rules). ── */

/* her own content (vs the app's): cream, dashed. WAS .ys-chip.user == .nh-ychip.nh-user. */
.ac--user { --ac-fill: var(--cream-100); --ac-ink: var(--text-secondary); border: 1px dashed var(--cream-600); /* token-exception */ }

/* the add-new placeholder: no fill at all, ghost ink. WAS .ys-chip.ys-ghost. */
.ac--ghost { background: transparent; --ac-ink: var(--ink-400); border: 1px dashed var(--cream-600); /* token-exception */ }

/* a read she hasn't got yet — quiet, hollow (D-452: visible, not locked). WAS .crd-b-coming .crd-chip. */
.ac--coming { background: 0; color: var(--ink-400); }

/* she is HERE — colour = state (D-404). WAS .phl-prow.is-now .phl-pchip. */
.ac--now { --ac-fill: var(--accent); --ac-ink: var(--text-on-accent); }

/* ── the disc dropped BY RULING on the phase landing (D-577-scoped exception, landing.css:203:
 *    all twelve areas are reads there, so the disc carries no information and only adds weight.
 *    ⚠️ SCOPED TO THAT CARD — a surface where the kind VARIES must keep the disc. The colour
 *    stays on the glyph (--kind-read-icon), where it is load-bearing. WAS .phl-chip. ── */
.ac--bare { width: auto; height: auto; background: none; border-radius: 0; }

/* the phase picker's number: a chip that carries TEXT, not a glyph — which is why its teal is
   the text-safe one. WAS .phl-pchip (landing.css:326). */
.ac--num { font-family: var(--font-label); font-size: var(--text-body); font-weight: var(--weight-700); }

/* ── MET / DIM / OWN — the three states the snake needs (and the dashboard Milestones list
 *    inherits). Each is a NAMED STATE of the atom, not a consumer override (D-532), and the
 *    renderer validates it the same way it validates `now` and `coming`.
 *
 *    `met`   = she marked this milestone — accent fill, cream ink. The marked face on the
 *              snake (kept timeline.css:153 `.mtl-f1`); the chip inherits the marking.
 *    `dim`   = she hasn't yet — quiet, hollow. Outline in the chip's own --ac-fill (so a phase
 *              chip wears a phase-coloured outline, not a generic teal one), ink-900 for the
 *              glyph (Andrew: "the question mark is not legible enough. should be in dark, as
 *              well as other icons not marked" — kept reasoning from timeline.css:149).
 *    `own`   = her own first — gold-300 fill, gold-700 ink. Gold is provenance (D-440), never
 *              a status, and this state is hers on the snake, on the dashboard list, on the
 *              tap sheet. The area glyph names the area (timeline render.js — "shape says what
 *              a thing IS"); gold colour alone marks provenance. ── */
.ac--met { --ac-fill: var(--accent); --ac-ink: var(--text-on-accent); }
.ac--dim { background: transparent; --ac-ink: var(--ink-900); border: 2px solid var(--ac-fill, var(--kind-read-fill)); } /* token-exception */
.ac--own { --ac-fill: var(--gold-300); --ac-ink: var(--gold-700); }
/* the OWN-MET pair — she marked one of HER OWN firsts. Gold is provenance, not a status, so the
   chip stays gold at met too (gold-500, the accent step), and the ink inverts for legibility. */
.ac--own.ac--met { --ac-fill: var(--gold-500); --ac-ink: var(--text-on-highlight); }

/* ── PHASE COLOURS — one colour per phase, applied by `data-phase` so a consumer declares
 *    which phase a first's week sits in and the chip wears it. Drives fill + ink through the
 *    chip's own --ac-fill / --ac-ink extension points — the same plumbing the families use,
 *    so a phase chip and a family chip are one chip with different colour overrides.
 *    Phases 4 and 5 take cream-50 ink (the brand-anchor end of the ramp); phases 1–3 take
 *    ink-900 (light end of the ramp). --phase-N-on is the token, declared in tokens.css:83-87. ── */
.ac[data-phase="1"] { --ac-fill: var(--phase-1); --ac-ink: var(--phase-1-on); }
.ac[data-phase="2"] { --ac-fill: var(--phase-2); --ac-ink: var(--phase-2-on); }
.ac[data-phase="3"] { --ac-fill: var(--phase-3); --ac-ink: var(--phase-3-on); }
.ac[data-phase="4"] { --ac-fill: var(--phase-4); --ac-ink: var(--phase-4-on); }
.ac[data-phase="5"] { --ac-fill: var(--phase-5); --ac-ink: var(--phase-5-on); }

/* ── STATE × PHASE — the two combinations a phase must NOT take. Declared AFTER the phase
 *    block because the attribute selector above (class + attribute) outranks a single state
 *    class, so without these the phase quietly overrode both states (found on the v3
 *    exhibit: the phase-4 dim chip's glyph painted cream on the cream snake ground — an
 *    "empty" circle — and the phase-4 own chip wore phase teal instead of gold). ── */
/* dim keeps the ink-900 glyph even when a phase drives its outline: the OUTLINE goes phase
   colour (via --ac-fill, the rule above), the GLYPH stays dark — Andrew: "the question mark
   is not legible enough. should be in dark, as well as other icons not marked" (kept
   timeline.css:149, and the kept .mtl-f0 rule it became). */
.ac--dim[data-phase] { --ac-ink: var(--ink-900); }
/* gold is provenance (D-440), never a status — an own chip stays gold even when a phase
   rides along. The dashboard list enforces the same order in its own dress (1060
   milestonerow.css: "the own rule stands AFTER the phase rules so an own row is gold even
   if a caller passes a phase too"); the atom now carries it itself. The marked pair keeps
   its gold-500 step. */
.ac--own[data-phase] { --ac-fill: var(--gold-300); --ac-ink: var(--gold-700); }
.ac--own.ac--met[data-phase] { --ac-fill: var(--gold-500); --ac-ink: var(--text-on-highlight); }

/* ── LABELLED VARIANT — icon + area name together (the tap sheet's labelled area chip,
 *    timeline.css:179-183 `.mtl-chip`/`.mtl-chip-ic`). The chip stays a chip — same atom,
 *    same circle — and the wrapper adds an inline label to its right: 10px caps, text-
 *    secondary, the area's SHORT name. The chip inside the label stays 16 so the chip stays
 *    quiet beside its own label.
 *    USAGE: <span class="ac-lab"><span class="ac ac--read ac--g16">{svg}</span><span
 *    class="ac-lab-t">MOVEMENT</span></span>. The chip + text are siblings — the label is
 *    not nested inside the circle, so the chip's own width / focus / hit-target are intact. ── */
.ac-lab { display: inline-flex; align-items: center; gap: var(--space-8); } /* token-exception */
.ac-lab > .ac { width: var(--dim-16); height: var(--dim-16); }
.ac-lab > .ac svg { width: var(--size-16); height: var(--size-16); } /* token-exception */
/* override .ac--sm if a consumer stacks label + sm chip — the labelled form takes 16 regardless */
.ac-lab > .ac--sm { width: var(--dim-16); height: var(--dim-16); }
.ac-lab-t { 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(--text-secondary); }

/* align-exception: .accard — the MIRROR PAGE's card row (workbench/shared/areachip.html only;
   the component itself renders no such row). The labelled state's row wraps to two lines
   exactly as the blessed v5 exhibit shows it (MOVEMENT · SLEEP · CRYING & SOOTHING on the
   first line, HEALTH and the captioned phase-coloured chip on the second). Each line centres
   its own children; the spread check 70 measures is the wrap, not a misalignment.
   Declared 2026-09-16 when the page first mounted its states inside the phone frame (brief 83)
   and the row became measurable — nothing about the component's own CSS changed. */