/* settings — page styles. Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  /* Appearance: two themes to pick, each previewed in its own tokens (data-theme on the preview). */
  .theme-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .theme-pick { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); text-align: left; }
  .theme-pick-label { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-1) var(--sp-1); color: var(--text-2); }
  .theme-pick-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .theme-pick-name b { color: var(--text); }
  .theme-pick-name small { font-size: var(--fs-xs); color: var(--text-3); }
  .theme-pick-label .picked { color: var(--brand-text); }
  .theme-preview { position: relative; display: block; height: 104px; overflow: hidden; border-radius: var(--r-sm);
    background: var(--bg); border: 1px solid var(--border-subtle); color: var(--text); }
  .theme-preview > span, .theme-preview > span > span { position: absolute; display: block; }
  .tp-bar { left: 0; right: 0; top: 0; height: 20px; background: var(--surface-nav); border-bottom: 1px solid var(--border-subtle); }
  .tp-logo { left: var(--sp-2); top: 7px; width: 32px; height: 6px; border-radius: var(--r-pill); background: var(--text-3); }
  .tp-chip { right: var(--sp-2); top: 5px; width: 26px; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--border); }
  .tp-card { left: var(--sp-3); right: var(--sp-3); top: 30px; bottom: var(--sp-3); border-radius: var(--r-xs);
    background: var(--surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-1); }
  .tp-title { left: var(--sp-2); top: var(--sp-2); width: 42%; height: 7px; border-radius: var(--r-pill); background: var(--text); }
  .tp-line { left: var(--sp-2); top: 22px; width: 64%; height: 4px; border-radius: var(--r-pill); background: var(--text-3); }
  .tp-line.short { top: 31px; width: 40%; }
  .tp-btn { right: var(--sp-2); bottom: var(--sp-2); width: 36px; height: 12px; border-radius: 3px; background: var(--brand); }

  /* Sound: one row that is the switch. */
  .setting-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-3) var(--sp-4); text-align: left;
    transition: background-color var(--t-fast), border-color var(--t-fast); }
  .setting-row:hover { background: var(--surface-3); border-color: var(--border); }
  .setting-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); color: var(--text-2);
    background: var(--surface-3); border: 1px solid var(--border-subtle); }
  .setting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .setting-text small { color: var(--text-3); }

  /* Notifications: the device switch, then one switch per kind (off until the device is on). */
  .setting-rows { display: grid; gap: var(--sp-2); }
  .setting-row:disabled { cursor: not-allowed; }
  .setting-row:disabled:hover { background: var(--surface-2); border-color: var(--border-subtle); }
  .setting-row:disabled .toggle-track, .setting-row:disabled .setting-text b { opacity: .5; }
}