/* ── Account settings (/settings/, and the tabs of /users//) ─────────── A stack of panels inside one tab — «Безпека» and «Оформлення» here, the same two subjects on the account page — capped narrow enough that the forms inside stay readable on a wide screen. Both pages' *first* tab is a two-column grid instead: `.account-cols` (pages/accounts.css) there, `.settings-cols` below here. */ .settings-page { display: flex; flex-direction: column; gap: 16px; max-width: var(--panel-measure); } /* The first tab of «Мій обліковий запис»: two columns of *equal* width, where `/users//` gives its own left column the wider track (`.account-cols`). The difference is what is in them — there a form with a person picker and a multi-select, here a four-row readout, which beside «Стан запису» over «Входи та спроби» left the tab lopsided. `auto-fit` rather than `repeat(2, …)` so the layout follows the content: an account without `users.logins` renders no second panel at all (the partial emits nothing), so the grid has one child, the sibling track collapses, and the remaining one spans the width instead of leaving a hole where a panel would be. The 360px minimum is what decides the collapse to a single column — below two of them plus the gap there is only ever one track, so this needs no breakpoint of its own. `min-width: 0` on the children for the reason `.account-cols` spells out: a grid item's `auto` minimum is its content, so a long unbroken value inside one widens the page rather than the box. */ .settings-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; } .settings-cols > * { min-width: 0; } /* …and when there *is* only one column, cap it like the tabs beside it — the same measure, hence the same token: a six-row readout whose values start at 200px reads as a stretched table across a 1400px screen. `:has()` rather than a class from the view, because «скільки тут колонок» is a fact about this markup — the same reasoning `.theme-tile:has(input:checked)` below is written with. */ .settings-cols:has(> :only-child) { max-width: var(--panel-measure); } /* The profile readout is a plain `.dl` (same one the person/movement/location details use) — only the nested list of access-group names is new. */ .dl-list { list-style: none; margin: 5px 0 0; padding: 0; color: var(--muted); font-size: 12.5px; } .settings-form { max-width: 420px; } .settings-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } /* ── Theme picker (the «Оформлення» section of /settings/) ───────────────── Mode segmented control + palette grid + the save status line. Each .swatch resolves the palette's own tokens (themes.css duplicates every selector onto `.swatch[data-theme][data-mode]`), so the preview is pixel-accurate and js/settings/theme.js only flips the swatch's data-mode. Every control is a