/* Personal appearance uses the same design tokens as the rest of the portal. */
html[data-profile-palette="ocean"] body {
    --personal-tab-text: var(--accent);
    --accent: #0e7490;
    --accent-soft: #e0f2fe;
    --action-bg: #0e7490;
    --action-hover: #155e75;
    --action-active: #164e63;
}

html[data-profile-palette="forest"] body {
    --personal-tab-text: var(--accent);
    --accent: #166534;
    --accent-soft: #dcfce7;
    --action-bg: #166534;
    --action-hover: #14532d;
    --action-active: #052e16;
}

html[data-profile-palette="plum"] body {
    --personal-tab-text: var(--accent);
    --accent: #7e22ce;
    --accent-soft: #f3e8ff;
    --action-bg: #7e22ce;
    --action-hover: #6b21a8;
    --action-active: #581c87;
}

html[data-profile-palette="ocean"] body.theme-dark {
    --accent: #67e8f9;
    --accent-soft: #123b49;
}

html[data-profile-palette="forest"] body.theme-dark {
    --accent: #86efac;
    --accent-soft: #183d2b;
}

html[data-profile-palette="plum"] body.theme-dark {
    --accent: #d8b4fe;
    --accent-soft: #352044;
}

html[data-profile-contrast="high"] body {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --card: #ffffff;
    --card-soft: #f1f5f9;
    --surface-header: #e2e8f0;
    --text: #0f172a;
    --muted: #334155;
    --border: #475569;
    --border-control: #334155;
    --nav-bg: #ffffff;
    background-image: none;
}

html[data-profile-contrast="high"] body.theme-dark {
    --bg: #020617;
    --bg-elevated: #0f172a;
    --card: #0f172a;
    --card-soft: #1e293b;
    --surface-header: #1e293b;
    --text: #ffffff;
    --muted: #e2e8f0;
    --border: #94a3b8;
    --border-control: #cbd5e1;
    --nav-bg: #020617;
}

html[data-profile-contrast="high"] .form-text,
.profile-management .form-text {
    color: var(--muted);
}

html[data-profile-contrast="high"] .btn-close {
    opacity: 1;
}

html[data-profile-contrast="high"] body.theme-dark .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

html[data-profile-font-size="large"] { font-size: 112.5%; }
html[data-profile-font-size="larger"] { font-size: 125%; }
html[data-profile-zoom="80"] { --profile-page-scale: 0.8; zoom: 0.8; }
html[data-profile-zoom="90"] { --profile-page-scale: 0.9; zoom: 0.9; }
html[data-profile-zoom="110"] { --profile-page-scale: 1.1; zoom: 1.1; }
html[data-profile-zoom="120"] { --profile-page-scale: 1.2; zoom: 1.2; }

/* Viewport units keep their unscaled dimensions. Constrain the visible dialog
   surface as well as its Bootstrap wrapper when personal zoom is active. */
html[data-profile-zoom]:not([data-profile-zoom="100"]) :is(dialog, [data-movable-dialog]) {
    min-inline-size: 0;
    max-inline-size: calc(100vw / var(--profile-page-scale) - 1rem);
    max-block-size: calc(100dvh / var(--profile-page-scale) - 1rem);
}

html[data-profile-zoom]:not([data-profile-zoom="100"]) .modal-dialog > .modal-content {
    min-inline-size: 0;
    max-inline-size: 100%;
    max-block-size: calc(100dvh / var(--profile-page-scale) - 1rem);
}

.profile-preferences-form {
    align-items: start;
}

.profile-appearance-fieldset,
[data-profile-preferences-status] {
    grid-column: 1 / -1;
}

.profile-appearance-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.profile-appearance-hint {
    margin-top: 0.85rem;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .profile-appearance-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .profile-appearance-options { grid-template-columns: minmax(0, 1fr); }
}