/* User settings page (M-096). Content presentation only (behaviour is the reused Stimulus controllers,
 * markup is settings.blade.php) — token-driven so it re-skins with the theme and works in both render
 * modes (coding-standards §4, §12). Mobile-first: the language field stacks under its control on narrow
 * screens and sits inline from the small breakpoint up. */

.platform-settings {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-lg);
}

.platform-settings__head {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs);
}

.platform-settings__title {
    margin: 0;
    font-size: var(--platform-font-size-xl);
    font-weight: 700;
}

.platform-settings__lead {
    margin: 0;
    color: var(--platform-color-text-muted, var(--platform-color-text));
}

.platform-settings__hint {
    margin: 0 0 var(--platform-space-md);
    color: var(--platform-color-text-muted, var(--platform-color-text));
    font-size: var(--platform-font-size-sm);
}

.platform-settings__label {
    display: block;
    margin-bottom: var(--platform-space-xs);
    font-size: var(--platform-font-size-sm);
    font-weight: 600;
}

/* Select + Save inline from the small breakpoint up; stacked below it. */
.platform-settings__field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-sm);
}

.platform-settings__select {
    flex: 1 1 12rem;
    max-width: 20rem;
}

/* The reused rail style-picker (M-094) sits on the DARK rail by default; on the light content surface its
 * buttons must read against the surface, so re-colour the rail-flavoured buttons here (presentation only —
 * the markup stays the shared partial, §3). The flyout popover keeps its shared `.platform-popover` look. */
.platform-settings__theme .platform-rail__item {
    color: var(--platform-color-text);
}

.platform-settings__theme .platform-rail__item:hover,
.platform-settings__theme .platform-rail__item:focus-visible {
    color: var(--platform-color-text);
    background: var(--platform-color-surface-muted);
}

.platform-settings__theme .platform-theme-styles[aria-expanded="true"] {
    color: var(--platform-color-accent);
    background: var(--platform-color-accent-surface);
}