/* Settings =========================================================
           Rebuilt as a grouped list rather than a stack of boxes: each section
           is one card, every row is the same 56px height with the same inset,
           and there is a single divider treatment between rows instead of the
           old mix of a 2px title rule and 1px row rules.
           ================================================================== */

        .settings-container {
            max-width: var(--container-narrow);
            margin: 0 auto;
        }

        .settings-section {
            background: var(--surface-1);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            /* Rows carry their own block padding, so the card only insets. */
            padding-block: var(--space-1) var(--space-4);
            padding-inline: var(--space-5);
            margin-block-end: var(--space-5);
            box-shadow: var(--elev-2);
        }

        /* Now an <h2>; the UA heading margin has to be zeroed so the section
           spacing is unchanged. Styled as a quiet group label — small, muted
           and clearly subordinate to the rows beneath it. */
        .settings-section-title {
            font-size: var(--text-sm);
            color: var(--text-muted);
            font-weight: var(--weight-bold);
            margin-block: var(--space-4) 0;
            padding-block-end: var(--space-3);
            border-block-end: 1px solid var(--border-color);
        }

        /* Row --------------------------------------------------------------
           One height, one inset, one divider. */
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-4);
            min-height: 56px;
            padding-block: var(--space-3);
            border-block-end: 1px solid var(--border-color);
        }

        .setting-item:last-child {
            border-block-end: none;
        }

        .setting-label {
            font-size: var(--text-md);
            font-weight: var(--weight-medium);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            min-width: 0;
        }

        /* Was 14px at 0.7 opacity — muddy and below the body minimum. */
        .setting-desc {
            font-size: var(--text-base);
            font-weight: var(--weight-normal);
            color: var(--text-secondary);
            opacity: 1;
            line-height: var(--leading-snug);
        }

        /* Rendered as <button role="switch">; the button UA styles have to be
           reset so the track keeps its original look. */
        .toggle-switch {
            position: relative;
            flex-shrink: 0;
            appearance: none;
            width: 50px;
            height: 26px;
            padding: 0;
            border: none;
            background: var(--surface-3);
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: background-color var(--transition-normal);
        }

        /* 50x26 is below the 44px tap target, so widen the hit area without
           changing the painted track. */
        .toggle-switch::before {
            content: "";
            position: absolute;
            inset: 50% auto auto 50%;
            width: var(--tap-target);
            height: var(--tap-target);
            transform: translate(50%, -50%);
        }

        .toggle-switch.active,
        .toggle-switch[aria-checked="true"] {
            background: var(--primary-color);
        }

        .toggle-slider {
            position: absolute;
            inset-block-start: 3px;
            inset-inline-start: 3px;
            width: 20px;
            height: 20px;
            background: var(--surface-1);
            border-radius: var(--radius-full);
            box-shadow: var(--elev-1);
            transition: transform var(--transition-normal);
        }

        /* Knob travels toward the inline-end edge in both writing directions. */
        .toggle-switch.active .toggle-slider,
        .toggle-switch[aria-checked="true"] .toggle-slider {
            transform: translateX(-24px);
        }

        :dir(ltr) .toggle-switch.active .toggle-slider,
        :dir(ltr) .toggle-switch[aria-checked="true"] .toggle-slider {
            transform: translateX(24px);
        }

        /* Accent picker ----------------------------------------------------- */
        .color-picker-container {
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
            padding-block: var(--space-4);
            border-block-end: 1px solid var(--border-color);
        }

        .settings-section > .color-picker-container:last-child {
            border-block-end: none;
        }

        .color-option {
            width: var(--tap-target);
            height: var(--tap-target);
            padding: 0;
            border-radius: var(--radius-full);
            cursor: pointer;
            border: 2px solid transparent;
            transition:
                transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
            box-shadow: var(--elev-2);
        }

        /* Was `scale(1.05)` / `scale(1.1)`; selection is now shown with a ring
           so the swatches never change size or jostle each other. */
        .color-option:hover {
            transform: translateY(-2px);
            box-shadow: var(--elev-4);
        }

        .color-option.active,
        .color-option[aria-pressed="true"] {
            border-color: var(--surface-1);
            transform: none;
            box-shadow: var(--elev-3), 0 0 0 2px var(--text-color);
        }

        /* The swatch is a solid fill, so the ring needs to sit clear of it. */
        .color-option:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 3px;
        }

        /* Row controls ------------------------------------------------------ */
        .font-size-controls {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            flex-shrink: 0;
        }

        .font-size-btn {
            width: var(--tap-target);
            height: var(--tap-target);
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-full);
            border: 1px solid rgba(var(--primary-rgb), 0.3);
            background: rgba(var(--primary-rgb), 0.08);
            color: var(--primary-color);
            font-size: var(--text-lg);
            font-weight: var(--weight-bold);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
        }

        .font-size-btn:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--on-primary);
        }

        .font-size-btn--danger {
            background: var(--danger-surface);
            border-color: var(--danger);
            color: var(--danger);
        }

        .font-size-btn--danger:hover {
            background: var(--danger);
            border-color: var(--danger);
            color: var(--on-primary);
            filter: none;
        }

        /* Replaces the ~200 characters of inline style that used to sit on
           #ramadanStartSelect; the look now comes from the `.select`
           component and this only constrains the width. */
        .ramadan-start-select {
            width: auto;
            max-width: 100%;
            /* font-size stays at the component's 16px so iOS does not zoom. */
        }

        .font-size-display {
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            color: var(--text-secondary);
            min-width: 64px;
            text-align: center;
        }

        /* Notifications ----------------------------------------------------- */
        .notification-time-picker {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            margin-block-start: var(--space-3);
        }

        .time-input {
            min-height: var(--tap-target);
            padding-block: var(--space-3);
            padding-inline: var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--surface-2);
            color: var(--text-color);
            /* 16px minimum so iOS does not zoom the page on focus. */
            font-size: var(--text-md);
            font-family: inherit;
            transition:
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
        }

        .time-input:focus-visible {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: var(--focus-ring);
        }

        .days-selector {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
            margin-block-start: var(--space-3);
        }

        .day-btn {
            min-height: 36px;
            padding-block: var(--space-2);
            padding-inline: var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-full);
            background: var(--surface-2);
            color: var(--text-secondary);
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
        }

        .day-btn:hover {
            border-color: rgba(var(--primary-rgb), 0.45);
            color: var(--text-color);
        }

        .day-btn.active {
            background: var(--primary-color);
            color: var(--on-primary);
            border-color: var(--primary-color);
        }

        .notification-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            margin-block-start: var(--space-4);
        }

        /* Was `--bg-color` — the page background painted inside a card, which
           made the row disappear entirely in dark mode. */
        .notification-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-3);
            min-height: 56px;
            padding-block: var(--space-3);
            padding-inline: var(--space-4);
            background: var(--surface-2);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
        }

        .notification-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            min-width: 0;
        }

        .notification-time {
            font-size: var(--text-md);
            color: var(--text-color);
            font-weight: var(--weight-semibold);
            font-feature-settings: "tnum";
        }

        .notification-days {
            font-size: var(--text-base);
            color: var(--text-secondary);
            opacity: 1;
        }

        .delete-notification-btn {
            background: var(--danger-surface);
            color: var(--danger);
            border: 1px solid transparent;
            min-height: var(--tap-target);
            padding-block: var(--space-2);
            padding-inline: var(--space-4);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            flex-shrink: 0;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
        }

        .delete-notification-btn:hover {
            background: var(--danger);
            border-color: var(--danger);
            color: var(--on-primary);
        }

        .add-notification-btn {
            width: 100%;
            min-height: var(--tap-target);
            padding-block: var(--space-3);
            padding-inline: var(--space-4);
            border: 1px dashed rgba(var(--primary-rgb), 0.5);
            border-radius: var(--radius-md);
            background: rgba(var(--primary-rgb), 0.05);
            color: var(--primary-color);
            font-size: var(--text-md);
            font-weight: var(--weight-semibold);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
            margin-block-start: var(--space-3);
        }

        .add-notification-btn:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            border-style: solid;
            color: var(--on-primary);
        }

        /* Type preview ------------------------------------------------------ */
        .preview-text {
            font-size: var(--font-size-ayah);
            line-height: var(--leading-quran);
            text-align: start;
            padding: var(--space-5);
            background: var(--surface-2);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-color);
            margin-block-start: var(--space-4);
        }

        /* Save -------------------------------------------------------------- */
        .save-btn {
            width: 100%;
            min-height: 52px;
            padding-block: var(--space-4);
            padding-inline: var(--space-5);
            border: none;
            border-radius: var(--radius-md);
            background: var(--primary-color);
            color: var(--on-primary);
            font-size: var(--text-md);
            font-weight: var(--weight-semibold);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                box-shadow var(--transition-fast);
            margin-block-start: var(--space-6);
            font-family: 'cairo', sans-serif;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            box-shadow: var(--elev-2);
        }

        .save-btn:hover {
            background: var(--primary-light);
            box-shadow: var(--elev-4);
        }

        @media (max-width: 768px) {
            .settings-section {
                padding-inline: var(--space-4);
            }

            .setting-item {
                gap: var(--space-3);
            }
        }

        /* Section titles now carry a leading icon so the groups are scannable
           at a glance rather than reading as a wall of identical labels. */
        .settings-section-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .settings-section-title > i {
            color: var(--primary-color);
            font-size: 1rem;
        }

        /* A control too wide to sit beside its label drops under it.
           Doubled class on purpose: app-ui.css loads AFTER this file and sets
           `.setting-item { align-items: center }` at the same specificity, so a
           single-class rule here loses and the whole block renders centred. */
        .setting-item.setting-item--stacked {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: var(--space-3);
        }

        .setting-item.setting-item--stacked .select {
            width: 100%;
            max-width: none;
            text-align: start;
        }

        /* Every row reads from the start edge (the right, in RTL). */
        .setting-item.setting-item--stacked .setting-label,
        .setting-item.setting-item--stacked .setting-desc {
            text-align: start;
        }

        /* Segmented control ------------------------------------------------
           Used where a toggle would be lossy: theme has three states, and the
           reader mode and Asr madhab both read better as named choices. */
        .segmented {
            display: flex;
            gap: 4px;
            padding: 4px;
            border-radius: var(--radius-md);
            background: var(--surface-3);
        }

        /* Segment labels stay centred inside their own pill — the row's LABEL
           and description are what read from the start edge, not the choices. */
        .segmented-option {
            flex: 1 1 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 6px;
            min-height: 40px;
            padding: var(--space-2) var(--space-2);
            border: 0;
            border-radius: calc(var(--radius-md) - 4px);
            background: transparent;
            color: var(--text-secondary);
            font: inherit;
            font-size: var(--text-base);
            font-weight: var(--weight-medium);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }

        .segmented-option > i {
            font-size: 0.95rem;
        }

        .segmented-option.is-active {
            background: var(--surface-1);
            color: var(--primary-dark);
            font-weight: var(--weight-semibold);
            box-shadow: var(--elev-1);
        }

        .segmented-option:focus-visible {
            box-shadow: var(--focus-ring);
            outline: none;
        }

        /* Storage meter ----------------------------------------------------- */
        .storage-meter {
            padding-block: var(--space-4) var(--space-3);
            border-block-end: 1px solid var(--border-color);
        }

        .storage-meter-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: var(--space-3);
            margin-block-end: var(--space-2);
            font-size: var(--text-base);
            color: var(--text-secondary);
        }

        #storagePercentLabel {
            font-weight: var(--weight-semibold);
            color: var(--primary-dark);
            font-variant-numeric: tabular-nums;
        }

        .storage-meter-track {
            height: 8px;
            border-radius: 999px;
            background: var(--surface-3);
            overflow: hidden;
        }

        .storage-meter-fill {
            width: 0;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--primary-light), var(--primary-color));
            transition: width 0.4s ease-out;
        }

        /* Quran font picker -------------------------------------------------
           Each option renders its own sample, so the choice is made by looking
           at the face rather than reading its name. */
        .quran-font-picker {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
            gap: var(--space-2);
        }

        .quran-font-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 2px;
            padding: var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--surface-2);
            color: var(--text-color);
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }

        .quran-font-option:hover { border-color: var(--green-200); }
        .quran-font-option:focus-visible { box-shadow: var(--focus-ring); outline: none; }

        .quran-font-option.is-active {
            border-color: var(--primary-color);
            background: rgba(var(--primary-rgb), 0.07);
        }

        .quran-font-sample {
            font-size: 1.35rem;
            line-height: 1.7;
            color: var(--primary-dark);
            white-space: nowrap;
        }

        .quran-font-name {
            font-family: var(--font-ui);
            font-size: var(--text-xs);
            color: var(--text-muted);
        }

        .quran-font-option.is-active .quran-font-name {
            color: var(--primary-color);
            font-weight: var(--weight-semibold);
        }

        /* Explanatory copy above a group of controls. */
        .section-note {
            margin: var(--space-3) 0 var(--space-2);
            font-size: var(--text-xs);
            line-height: var(--leading-snug);
            color: var(--text-muted);
        }

        /* Which prayers to be reminded of ------------------------------------ */
        .prayer-pick {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
        }

        .prayer-pick-chip {
            min-height: 40px;
            padding-inline: var(--space-4);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: var(--surface-2);
            color: var(--text-secondary);
            font: inherit;
            font-size: var(--text-base);
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, color 0.15s;
        }

        .prayer-pick-chip.is-active {
            border-color: var(--primary-color);
            background: rgba(var(--primary-rgb), 0.1);
            color: var(--primary-dark);
            font-weight: var(--weight-semibold);
        }

        .prayer-pick-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }

        /* Delivery-capability notice. Says plainly whether reminders will
           arrive with the app closed, which genuinely varies by browser. */
        .notify-status {
            margin-block: var(--space-3);
            padding: var(--space-3);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            background: var(--surface-2);
            font-size: var(--text-xs);
            line-height: var(--leading-snug);
            color: var(--text-secondary);
        }

        .notify-status:empty { display: none; }

        .notify-status.is-ok {
            border-color: color-mix(in srgb, var(--success) 40%, transparent);
            background: var(--success-surface);
            color: var(--success);
        }

        .notify-status.is-warn {
            border-color: color-mix(in srgb, var(--warning) 40%, transparent);
            background: var(--warning-surface);
            color: var(--warning);
        }

        /* Offline juz downloads ---------------------------------------------- */
        .juz-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: var(--space-2);
            margin-block-start: var(--space-4);
        }

        .juz-chip {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: var(--space-2) 4px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--surface-1);
            color: var(--text-color);
            font: inherit;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }

        .juz-chip:hover { border-color: var(--primary-color); }
        .juz-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }

        .juz-chip-num {
            font-size: var(--text-md);
            font-weight: var(--weight-semibold);
            font-variant-numeric: tabular-nums;
        }

        .juz-chip-state {
            font-size: var(--text-2xs);
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            min-height: 1em;
        }

        .juz-chip.is-done {
            border-color: var(--success);
            background: var(--success-surface);
        }

        .juz-chip.is-done .juz-chip-num,
        .juz-chip.is-done .juz-chip-state { color: var(--success); }

        .juz-chip.is-partial {
            border-color: var(--warning);
        }

        .juz-chip.is-partial .juz-chip-state { color: var(--warning); }

        .juz-chip.is-loading {
            border-color: var(--primary-color);
            background: rgba(var(--primary-rgb), 0.07);
        }

        /* Collapsible sub-section (the 30-juz picker). */
        .collapse-toggle {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
            min-height: var(--tap-target);
            margin-block-start: var(--space-3);
            padding: var(--space-3);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--surface-2);
            color: var(--text-color);
            font: inherit;
            font-size: var(--text-base);
            font-weight: var(--weight-medium);
            text-align: start;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }

        .collapse-toggle:hover { border-color: var(--primary-color); }
        .collapse-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }

        .collapse-toggle-meta {
            margin-inline-start: auto;
            font-size: var(--text-xs);
            font-weight: var(--weight-semibold);
            color: var(--primary-color);
            font-variant-numeric: tabular-nums;
        }

        .collapse-toggle-icon {
            flex: 0 0 auto;
            font-size: 0.85rem;
            color: var(--text-muted);
            transition: transform 0.2s;
        }

        .collapse-toggle.is-open .collapse-toggle-icon { transform: rotate(180deg); }

        /* `display: grid` on .juz-grid outranks the UA [hidden] rule. */
        .juz-grid[hidden] { display: none; }