/* 1157 SHARED·SETTINGROW — the tappable rows of the profile screen's settings
 * lists, and the group panel that holds them.
 * ═══════════════════════════════════════════════════════════════════════════════
 * EXTRACTED 2026-09-28 (brief 9500, the profile shared-component alignment) —
 * MOVED out of web/css/app.css (the census group .setting block, lines 810–836)
 * and aligned to the index-type panel standard the app already ships
 * (web/css/home-shell.css .nh-panel) and the signed-off profile drawings of
 * 2026-09-20: a --surface-card panel, --radius-card-lg corners, the --shadow-card
 * every index module carries, hairline-separated rows.
 *
 * ── THE ALIGNMENT, VALUE BY VALUE ──────────────────────────────────────────────
 * MOVED VERBATIM: the row's flex anatomy, its hairline border and :last-child
 * release, the cursor + background transition. CHANGED to the index standard (the
 * type's standard wins — LANE-RULES §2; no new ruling taken):
 *   · group background --paper-card → var(--surface-card) (the alias's real name;
 *     identical value).
 *   · group radius --r-md → var(--radius-card-lg) (12px → the index panel's
 *     large radius) + box-shadow var(--shadow-card) added (the index panel look).
 *   · group margin-bottom 18px → var(--space-20) (18 is off the 4px grid).
 *   · row padding 12px 14px → var(--space-12) var(--space-16) (14 is off-grid;
 *     16 is the module inset the index rows use).
 *   · row border --rule → var(--border-hairline) (alias's real name).
 *   · row gap var(--space-12) added (index rows separate left cluster and
 *     trailing piece by the row gap, not by chance).
 *   · :hover background --black-a02 → var(--surface-card-hover) — the declared
 *     hover state keeps its name and takes the index feedback colour; :active
 *     joins it (the index rows' press feedback — this is a touch app).
 *
 * ⚠️ THE DUAL SPELLING RETIRES. app.css carried `.settings-group, .setting-group`
 * as one declaration — two names for one panel, emitted as a pair in one place
 * and singly everywhere else. The card owns ONE name, `.setting-group`; the one
 * dual-class emitter (views/profile.js babyGroup) stops carrying the second
 * spelling in the same commit.
 *
 * ⚠️ BOUNDARY — the row CONTENT belongs to the caller; the row owns the row
 * chrome only (registry note). The pieces inside are 1156 SHARED·ROWPIECE; a row
 * carrying a switch wears the toggleswitch card (433).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.setting-group {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: var(--space-20);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: background 0.15s ease;
}

.setting-row:last-child {
  border-bottom: 0;
}

/* hover — the declared pointer state, in the index feedback colour */
.setting-row:hover {
  background: var(--surface-card-hover);
}

/* active — the touch standard (index rows press with the same tint) */
.setting-row:active {
  background: var(--surface-card-hover);
}

.setting-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}