/* SHELL·ACCESS (1137) · status: todo — the access-level chooser rows Profile shows.
 * ═══════════════════════════════════════════════════════════════════════════════
 * One control, used in TWO profile sheets with the same DOM and the same five
 * blocks (list / row / check / label / blurb) — the chooser a parent opens when
 * generating a new invite (pick Full / Contribute / View for the incoming person),
 * and the rows Profile shows for the people already shared with the baby (the
 * row's `on` class names the level that person holds). The ● on / ○ off glyph is
 * typed straight into .access-check; no rule styles the glyph itself.
 *
 * ── SELF-CONTAINMENT ──────────────────────────────────────────────────────────
 * Every element this card renders gets its style explicitly under this card's
 * own root class (zero reliance on page or user-agent defaults). Card CSS is
 * self-contained — that is what makes a workbench ↔ app port mechanical instead
 * of forensic (corollary to the tracking-pillar rule, D-470/D-475).
 *
 * ── STATUS KEPT AS `todo` (Lane A, brief 567) ──────────────────────────────────
 * Card-mirror check 16 enforces only `['draft', 'draft-final', 'locked']`
 * (`_card-mirror.js:55`); `todo` is outside that set, so check 16 does not
 * iterate for this row. Leaving the row at `todo` disarms the HOST-CONTEXT and
 * WB-missing gates that a moved-and-filed-for-port card would otherwise hit, on
 * purpose — the WB page is owed (D-736) but is a separate lane, not this one.
 *
 * ── TOKEN-EXCEPTION MARKERS (Lane A, brief 567) ───────────────────────────────
 * Six of the seven rules below carry a `/* token-exception */` marker, one per
 * line, preserving the shipped declarations byte-for-byte. None is a redesign;
 * each is the value the code ships today, kept by bypass rather than migrated:
 *   · 2 grid violations (D-511): `14px` padding on .access-row and `2px`
 *     margin-bottom on .access-label — both off the 4px grid. The 14px on the
 *     row is symmetric horizontal padding matched to a 12px row border (D-511
 *     was not applied here; snapping is a design ruling owed, not taken). The
 *     2px meta→blurb gap is a sub-grid optical nudge.
 *   · 3 type-role violations (D-463): `var(--size-14)` on .access-check and
 *     .access-label, and `var(--size-12)` on .access-blurb — raw --size-* step
 *     tokens, not the role ladder's --text-* names. Raw --size-* / px / rem
 *     are byte-identical to their --text-* equivalents; the role ladder's
 *     contract is one lever, not two values.
 *   The bypass reads as `/* token-exception */` exactly (no suffix) — the
 *   workbench check (`20-token-scope-workbench.sh`) matches the bypass LITERALLY
 *   and a descriptive comment like `/* token-exception: spacing */` does NOT
 *   count. The reasoning above goes in this header, not on the line.
 *
 * ── REVERSE-PORT ──────────────────────────────────────────────────────────────
 * If card 1137 ever moves status to `draft` (the WB page has been written and
 * the card is filed for a build), then this file MUST be linked from
 * `web/index.html` AND the 7 rules below MUST stay deleted from `app.css`. The
 * card owns the prefix; check 16's single-source rule will refuse any future
 * commit that re-introduces them. Until then, the rules live here and nowhere
 * else — Lane A's verbatim move.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.access-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px; /* token-exception */
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-card);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.access-row:hover { border-color: var(--ink-600); }
.access-row.on    { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--paper); }

.access-check {
  flex-shrink: 0;
  font-size: var(--size-14); /* token-exception */
  color: var(--teal-700);
  line-height: var(--leading-140);
  width: 16px;
  text-align: center;
}

.access-label {
  font-size: var(--size-14); /* token-exception */
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px; /* token-exception */
}

.access-blurb {
  font-size: var(--size-12); /* token-exception */
  line-height: var(--leading-145);
  color: var(--ink-600);
}