/* SHARED·AREACELL (1062) — THE AREA DOOR. Render in web/js/cards/shared/areacell.render.js.
 *
 * One of the twelve areas as a tappable cell: her glyph above the area's SHORT name. Twelve of
 * them, in a 4×3 grid, ARE the areas card on the Phases tab — but the grid is the card's, not
 * this component's. This is one door. The recipe that arranges twelve of them stays with the
 * consumer (.phl-grid in phase/landing.css).
 *
 * ── WHERE EVERY VALUE COMES FROM ──────────────────────────────────────────────────────────────
 * Lifted, value for value, from the SHIPPED rules this file replaces —
 * `web/css/cards/phase/landing.css` `.phl-cell` / `.phl-chip` / `.phl-chip svg` / `.phl-al`
 * (read at commit ede4813f, `sed -n '196,300p'`). Nothing is re-derived from memory; the two
 * rulings those rules carry are carried over with them:
 *
 *   · NO DISC (Andrew, 2026-08-23, option D2 of the areas-disc bake-off — commit b4cc6cfe; the
 *     CONTROL D1 was the current design and lost to it). The glyph sits on the card at its own
 *     size: no fill, no fixed 44px box. ⚠️ THE EXCEPTION IS SCOPED AND MUST NOT GENERALISE —
 *     everywhere the KIND varies the coloured disc is doing real work; here all twelve are
 *     READS, so the disc never varied and a code with one value told a parent nothing. Rejected
 *     on the record: D3 kept the ring and read as an empty plate; D4 shrank the disc and kept
 *     the weight without the presence; D5 dropped the disc AND grew the glyph, two variables at
 *     once. (This is BUILD-LIST CHOOSE 15's sanctioned exception: a `bare` area chip.)
 *   · FRAUNCES 500 AT META SIZE (F2 of the areas-colour bake-off — the arm that shipped). The
 *     area name is a NAME, not an eyebrow: sentence case, display font, primary ink. Its three
 *     rejected arms (F1 Inter, F3 Schibsted sentence, F4 Schibsted uppercase) are archived on
 *     workbench/phase/_bakeoffs/areas-colour.html. ⚠️ F3 no longer differs from F1 — --font-label
 *     resolved to Inter when Schibsted was retired (D-780) — so that arm cannot be looked at any
 *     more; it is a record, not a live option.
 *   · TEAL, AND ONLY TEAL, ON THE GLYPH (D-379 upheld; D-454). Twelve areas in twelve hues was
 *     built, shown in situ and rejected: colour carries KIND app-wide, so an area palette costs
 *     the whole app to buy one page. --kind-read-icon DELIBERATELY, not --accent: they resolve
 *     to the same teal-600 today, but every one of the twelve is a READ, so the semantic route
 *     stays correct if the kind ramp ever moves.
 *
 * ── THE LABEL BOX IS A FIXED TWO LINES, AND THAT IS A BUG FIX, NOT A PREFERENCE ───────────────
 * Ten of the twelve short names fit one line; two do not, historically — so cells in one row had
 * different heights, the row's baseline broke, and the grid stopped reading as ROWS. Reserving
 * the second line whether or not it is used makes all twelve cells identical and every row level.
 * ⚠️ THE TRADE, STATED: if a label ever wraps, the reserved line is USED and the cell grows. The
 * twelve are a fixed set today; this is the thing to check if the areas or their names change.
 *
 * ── SELF-CONTAINED (D-470/D-475) ─────────────────────────────────────────────────────────────
 * Every element this card renders is styled here under `.acell`, including the `font-family` and
 * `color` a bare <button> would otherwise take from the user agent. The card must render the same
 * inside the app's ~21 stylesheets as it does on a quiet WB page.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

.acell { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: 0; border: 0; background: 0; cursor: pointer; text-align: center; font-family: var(--font-body); color: var(--text-primary); }
.acell:active { opacity: 0.72; }
.acell:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-card); }

.acell-g { display: flex; align-items: center; justify-content: center; background: none; width: auto; height: auto; color: var(--kind-read-icon); }
/* ⚠️ 28px, NOT 20px. Recognition depends on an icon's CHARACTERISTIC CUES surviving at the
   rendered size, 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 the old 44px disc, ~80% of every cell's ink was identical to its
   eleven neighbours. */
.acell-g svg { width: var(--size-28); height: var(--size-28); }

.acell-l { 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; }

/* ── ONE SIZE. THE PICKER PLACEMENT (.acell-dense) IS GONE — 2026-09-09, Andrew: "I prefer this."
 * Shown both sizes of the door side by side, at 390px and 360px, in the real area read with the
 * switcher open, he chose the OPEN one: the glyph at its own 28px, no box behind it.
 *
 * WHAT WAS DELETED, AND WHY IT COULD BE. Six rules — `.acell-dense`, `.acell-dense .acell-g`,
 * `.acell-dense .acell-g svg`, `.acell-dense .acell-l`, `.acell-dense:not(.acell-cur):active`
 * and `.acell-dense.acell-cur` — which between them carried a SECOND type scale under one
 * component's name: 18px glyph v 28, body font v display, --size-10 v --text-meta, secondary
 * ink v primary, no two-line reserve, plus a box (background · radius · padding). The file
 * itself flagged that as the open question for the founder rather than resolving it. He has
 * resolved it, and the answer is that there is one size.
 *
 * ⚠️ IT FITS, MEASURED, NOT ASSUMED. In 606's disclosure panel the door is (screen − 32 page
 * inset − 24 panel padding − 24 gaps) / 4 = 77.5px at a 390px screen and 70px at 360px. All
 * twelve short names render on one line at both: `labelOverflowPx` 0 and `horizOverflow` 0 for
 * every cell, measured in the real read with the picker open. The panel grew 190px → 230.78px
 * and still ends 287px above the foot of the screen. If the twelve areas or their `short` names
 * ever change, that is the measurement to re-run.
 *
 * ⚠️ AND THE COLOUR WAS NEVER A DIFFERENCE. The deleted rule set the glyph to --brand and the
 * comment beside it claimed --brand and --kind-read-icon "resolve to different values". They do
 * not: tokens.css line 453 `--brand: var(--teal-600)` and line 487 `--kind-read-icon:
 * var(--teal-600)`. So the glyph does not move a pixel of colour on either consumer. */

/* ── THE CURRENT AREA (.acell-cur) ─────────────────────────────────────────────────────────────
 * 🔴 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)"). 606's first
 * build had this exactly backwards: it highlighted the current area and dimmed the eleven with
 * no authored read yet, which made AUTHORING STATE the loudest thing in a picker. Authoring
 * state is our problem; an unwritten area is a normal destination that lands on the honest hole
 * (D-541), which is a truthful place to arrive rather than a reason to bar the door.
 * ⚠️ ONLY A PICKER HAS A CURRENT AREA. On the Phases tab no area is current — all twelve are
 * destinations — so this state never fires there. It is a state of the component, consumed by
 * 606 today and by any future in-place switcher. */
.acell-cur { cursor: default; opacity: 0.5; }
/* the base :active dim must not reach the inert cell — same reason as the rule above. */
.acell-cur:active { opacity: 0.5; }
.acell-cur .acell-l { font-weight: var(--weight-600); }