/* 1155 SHARED·ROLEPICKER — the relationship / role tile grid: a 2-column grid of
 * choice tiles that lets a parent select "you / mum / dad / grandparent / family
 * etc." Used on the Profile relationship editor (web/js/views/profile.js: ~1093
 * the role grid; ~1186 the relationship editor) and on the new-user relationship
 * sheet emitted by onboarding (web/js/views/onboarding.js:225). The active tile
 * carries `.on`; per-tile icons carry a `.ic` span.
 *
 * Copy-first extraction off web/css/app.css. FIVE rules in total, all carrying
 * the `.role-` prefix (the 2026-08-25 single-source rule is a hard "any selector
 * leading with the prefix lives here, period" — check 16 fails a WB↔app drift
 * the moment one strays to app.css):
 *   · 2 top-level rules: .role-grid · .role-tile
 *   · 3 descendant compounds: .role-tile:hover · .role-tile.on · .role-tile .ic
 *
 * Reverse-port from web/css/app.css lines 2007-2037 (the role-grid/tile
 * sub-section of the "Invite modal — role tiles, access list, share link box"
 * banner; the access-list rows that follow are owned by 1137 SHELL·ACCESS and
 * stay in app.css). Values are UNCHANGED — every literal lifted verbatim.
 *
 * Class names UNCHANGED — the consumers in profile.js / onboarding.js already
 * emit `role-grid` and `role-tile`, so wiring is a registry row + index.html
 * link, never a renderer change.
 *
 * ⚠️ SELF-CONTAINMENT (LANE-RULES §3): every element a card renders gets its
 * style explicitly under its own root classes (zero reliance on page/user-agent
 * defaults). Local :root aliases below mirror app.css's own :root block for
 * the five aliases these rules reference that live as ALIASES in app.css (not
 * in web/styles/tokens.css): --paper, --paper-card, --ink, --rule, --r-md.
 * The static contrast audit (check 56) reads each CSS file independently and
 * cannot cross-resolve into app.css's :root; without these local aliases it
 * reports false-positive unresolved foreground/background pairs on
 * .role-tile ({color: var(--ink)} on {background: var(--paper-card)} +
 * .role-tile.on {background: var(--paper)}). Each alias resolves to the same
 * colour at runtime (--paper → --surface-ground, --paper-card → --surface-card,
 * --ink → --text-primary, --rule → --border-hairline, --r-md → --radius-card).
 * Renders identically.
 *
 * Token linter bypass: the four `/* token-exception */` markers below preserve
 * pre-existing debt lifted from app.css verbatim — one for check 23 (gap 10px
 * on .role-tile), one for check 23 (padding 14px on .role-tile), and two for
 * check 25 (`var(--size-14)` on .role-tile and `var(--size-18)` on .role-tile .ic).
 * Forward-only checks treat a NEW file as if all its lines were added; the
 * markers declare these as pre-existing debt, not new debt. Values remain
 * candidates for future tokenisation. Same in-band bypass used on signin.css
 * (brief 497), consent.css (547), access.css (498), radiopicker.css (551),
 * and the rest of wave-1.
 */

:root {
  --paper:        var(--surface-ground);
  --paper-card:   var(--surface-card);
  --ink:          var(--text-primary);
  --rule:         var(--border-hairline);
  --r-md:         var(--radius-card);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.role-tile {
  display: flex;
  align-items: center;
  gap: 10px;                          /* token-exception */
  padding: 12px 14px;                 /* token-exception */
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-card);
  cursor: pointer;
  font-size: var(--size-14);          /* token-exception */
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.role-tile:hover { border-color: var(--ink-600); }

.role-tile.on {
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.role-tile .ic { font-size: var(--size-18); line-height: var(--leading-100); }   /* token-exception */