/* SHARED·RADIOPICKER (1154) — the icon-and-label choice tiles and their 2-column grid.
 * Used by onboarding's language/sex/basics questions (views/onboarding.js) and the profile edit
 * sheets (views/profile.js: language, sex, feeding mode); the same tile shape also composes the
 * feedback-reason grid in cards/shared/report.js. `.radio-tile.on` is the chosen state and
 * carries `aria-pressed="true"` on the host element. The grid's two columns are overridden to
 * one when a caller sets `style="grid-template-columns: 1fr"` inline (the
 * `.radio-grid.radio-grid[style*="1fr"]` rule) — the more-specific selector wins on purpose so
 * callers can opt a single-row grid without us carrying a second variant.
 *
 * STATUS: kept `todo` per the row's standing. Card-mirror check 16 does NOT iterate this row
 * (ENFORCED allowlist at `_card-mirror.js:55`); this stylesheet is linked from `web/index.html`
 * BY HAND while the row is `todo`. REVERSE-PORT: if the row ever moves to `draft`, the link must
 * stay in `web/index.html` and the 12 rules MUST stay deleted from `web/css/app.css` — a return
 * to `todo` means a return to the kept source.
 *
 * TOKEN-EXCEPTION MARKERS (6): three raw `--size-*` declarations (`.radio-tile .ic` is 32,
 * `.radio-tile.row .ic` is 28, `.radio-tile.row small` is 12 — none of these map to a
 * `--text-*` role, so a role swap would change the meaning of "icon size 32"); three off-grid
 * values (`.radio-grid` gap 10px, margin-bottom 14px; `.radio-tile.row` padding-left 14px —
 * the row tile gets a tight 14px L/R to keep its label inline with the grid's 16px padding).
 * Mirrors brief 569 (topicchip 3 markers). One `@media (max-width: 480px) .radio-grid { 1fr }`
 * collapses the grid to one column on narrow screens — a third variant alongside the base 2-col
 * and the inline-style 1-col override. */

/* Radio grid / tile selection */
.radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;                                    /* token-exception */
  margin-bottom: 14px;                          /* token-exception */
}

.radio-grid.radio-grid[style*="1fr"] {
  grid-template-columns: 1fr;
}

.radio-tile {
  background: var(--paper-card);
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.radio-tile:hover {
  border-color: var(--accent);
  background: var(--surface-hover-wash);
}

.radio-tile.on {
  border-color: var(--accent);
  background: var(--surface-notice);
}

.radio-tile .ic {
  font-size: var(--size-32);                    /* token-exception */
  margin-bottom: 8px;
  display: block;
}

.radio-tile .body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.radio-tile.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  grid-column: 1 / -1;
  padding: 12px 14px;                           /* token-exception */
}

.radio-tile.row .ic {
  font-size: var(--size-28);                    /* token-exception */
  margin-bottom: 0;
  flex-shrink: 0;
}

.radio-tile.row .body {
  flex: 1;
}

.radio-tile.row .body > div:first-child {
  font-weight: 500;
  color: var(--ink);
}

.radio-tile.row small {
  font-size: var(--size-12);                    /* token-exception */
  color: var(--ink-600);
}

/* Responsive: collapse to one column on narrow screens. The equal-column override is the
 * single-column "wide" case set inline by callers — on narrow screens it just stays single. */
@media (max-width: 480px) {
  .radio-grid {
    grid-template-columns: 1fr;
  }
}