/* Menu → Preferences dialog (frontend/js/menu/preferences.js).
 * Shell = character.css .char-backdrop / .char-dialog (same as Licenses);
 * this file only adds the setting rows and the switch. */
.pref-dialog { width: 470px; }
.pref-rows { margin: 4px 0 0; }
.pref-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 6px; border-top: 1px solid var(--b2-line, #E5E7EB);
}
.pref-row:first-child { border-top: 0; }
.pref-text { flex: 1 1 auto; min-width: 0; }
.pref-name { font-size: 12.5px; font-weight: 600; color: var(--b2-ink, #111216); }
.pref-desc { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--b2-ink-3, #6B7280); }
/* Switch: 34×20, amber when on (the user/action colour), grey when off. */
.pref-switch {
    position: relative; flex: 0 0 34px; width: 34px; height: 20px; padding: 0;
    border: 0; border-radius: 999px; background: var(--b2-line-2, #D1D5DB);
    cursor: pointer; transition: background .15s ease-out;
}
.pref-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(17, 18, 22, .2);
    transition: left .15s ease-out;
}
.pref-switch.on { background: var(--b2-user-rule, #E0B65E); }
.pref-switch.on::after { left: 16px; }
.pref-switch:focus-visible { outline: 2px solid rgba(224, 182, 94, .5); outline-offset: 2px; }
.pref-switch:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .pref-switch, .pref-switch::after { transition: none; } }