/* ═══════════════════════════════════════════════════════════ LSF SETTINGS ADDITIONS (appended to lsf-enhancements.css) Sections 40–47 — activates all previously non-functional settings: accent colours, density, high contrast, large targets, screen-reader hints, privacy shield, i18n, quiz prefs. ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════ 40. LAYOUT DENSITY [data-density="compact"] on ══════════════════════════════════════ */ [data-density="compact"] .glass-card, [data-density="compact"] .card, [data-density="compact"] .s-card, [data-density="compact"] .form-section, [data-density="compact"] .identity-card { padding: 14px 16px !important; } [data-density="compact"] .stat-tile { padding: 12px 8px !important; } [data-density="compact"] .s-toggle-row { padding: 10px 12px !important; margin-bottom: 6px !important; } [data-density="compact"] .snav-item { padding: 8px 10px !important; } [data-density="compact"] .history-item { padding: 9px 10px !important; margin-bottom: 6px !important; } [data-density="compact"] .s-field-group { gap: 10px !important; } [data-density="compact"] .badge-card { padding: 10px 8px !important; } [data-density="compact"] .res-item { padding: 10px 12px !important; } /* ══════════════════════════════════════ 41. HIGH CONTRAST MODE [data-high-contrast="1"] on ══════════════════════════════════════ */ [data-high-contrast="1"] { --text-main: #000; --text-dim: #111; --text-muted: #333; --border: #555; --card: #fff; --bg-alt: #f0f0f0; } [data-high-contrast="1"][data-theme="dark"] { --text-main: #fff; --text-dim: #e0e0e0; --text-muted: #bbb; --border: #aaa; --card: #111; --bg-alt: #1e1e1e; } [data-high-contrast="1"] * { font-weight: 600 !important; } [data-high-contrast="1"] a, [data-high-contrast="1"] .snav-item.active { text-decoration: underline; } [data-high-contrast="1"] .btn, [data-high-contrast="1"] .pill-opt, [data-high-contrast="1"] .snav-item { border-width: 2px !important; } [data-high-contrast="1"] .s-input, [data-high-contrast="1"] .s-textarea, [data-high-contrast="1"] .s-select { border-width: 2px !important; border-color: #000 !important; } [data-high-contrast="1"][data-theme="dark"] .s-input, [data-high-contrast="1"][data-theme="dark"] .s-textarea, [data-high-contrast="1"][data-theme="dark"] .s-select { border-color: #fff !important; } [data-high-contrast="1"] .lsf-toggle-track { border: 2px solid currentColor; } [data-high-contrast="1"] :focus-visible { outline: 3px solid var(--coral) !important; outline-offset: 3px !important; } /* ══════════════════════════════════════ 42. LARGE CLICK TARGETS [data-large-targets="1"] on ══════════════════════════════════════ */ [data-large-targets="1"] .btn, [data-large-targets="1"] button { min-height: 48px !important; padding-top: 12px !important; padding-bottom: 12px !important; } [data-large-targets="1"] .snav-item { min-height: 48px !important; } [data-large-targets="1"] .s-input, [data-large-targets="1"] .s-select, [data-large-targets="1"] .s-textarea { padding: 15px 18px !important; font-size: 1rem !important; } [data-large-targets="1"] .lsf-toggle { width: 56px !important; height: 32px !important; } [data-large-targets="1"] .lsf-toggle-track::after { width: 25px !important; height: 25px !important; } [data-large-targets="1"] .lsf-toggle input:checked + .lsf-toggle-track::after { transform: translateX(24px) !important; } [data-large-targets="1"] .tab-btn { padding: 12px 18px !important; font-size: 0.9rem !important; } [data-large-targets="1"] .pill-opt { padding: 14px 18px !important; } [data-large-targets="1"] .subject-chip { padding: 10px 18px !important; font-size: 0.9rem !important; } [data-large-targets="1"] .accent-swatch { width: 52px !important; height: 52px !important; } /* ══════════════════════════════════════ 43. SCREEN-READER HELPER STYLES [data-sr-hints="1"] on ══════════════════════════════════════ */ [data-sr-hints="1"] *:focus-visible { outline: 3px solid var(--coral) !important; outline-offset: 2px !important; } [data-sr-hints="1"] .sr-only-hint { position: static !important; width: auto !important; height: auto !important; clip: auto !important; white-space: normal !important; font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 3px; } /* ══════════════════════════════════════ 45. GLOBAL FONT SIZE CLASSES Applied to by font-range slider ══════════════════════════════════════ */ html[data-font-size="1"] { font-size: 13px; } html[data-font-size="2"] { font-size: 14px; } html[data-font-size="3"] { font-size: 15px; } html[data-font-size="4"] { font-size: 16.5px; } html[data-font-size="5"] { font-size: 18px; } /* ══════════════════════════════════════ 46. NOTIFICATION STATUS DOTS Real-time visual for push toggle state ══════════════════════════════════════ */ .notif-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; transition: background 0.3s; } .notif-status-dot.on { background: var(--emerald, #00c9a7); } .notif-status-dot.off { background: var(--border); } /* ══════════════════════════════════════ 47. QUIZ REMINDER TIME PICKER INLINE ══════════════════════════════════════ */ .reminder-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-muted); margin-top: 8px; padding: 6px 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 99px; } .reminder-status.active { color: var(--emerald, #00c9a7); border-color: rgba(0,201,167,0.3); background: var(--emerald-light, rgba(0,201,167,0.08)); } .reminder-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ══════════════════════════════════════ 48. CONNECTED ACCOUNT — LINKED STATE ══════════════════════════════════════ */ .connected-card.is-linked { border-color: rgba(0,201,167,0.3); background: var(--emerald-light, rgba(0,201,167,0.06)); } /* ══════════════════════════════════════ 49. SETTINGS SAVE FEEDBACK (inline) ══════════════════════════════════════ */ @keyframes settingsSaved { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } .setting-saved-flash { animation: settingsSaved 0.35s cubic-bezier(0.34,1.56,0.64,1); } /* ══════════════════════════════════════ 50. DANGER ZONE confirm button overrides opacity when a text prompt is not yet filled ══════════════════════════════════════ */ .danger-btn[disabled] { opacity: 0.4 !important; cursor: not-allowed !important; }