/* settings area (redesign): settings, me, profile, onboarding, sign-in pages, admin. Loaded after app.css; tokens only. */

/* Shared helpers (design/components.css; not in app.css section 1 yet) */
.stack--sm { gap: var(--space-2); }
.stack > *, .settings__card > *, .settings__sheet .sheet > * { margin-top: 0; margin-bottom: 0; }
.mono { font-family: var(--font-mono); font-size: .9375rem; }
.callout { align-items: flex-start; margin: 0; }
.callout > .icon { margin-top: 2px; }
.callout--ok { background: var(--ok-soft); color: var(--ink); }
.callout--ok > .icon { color: var(--ok); }
.callout--bad { background: var(--bad-soft); color: var(--ink); }
.callout--bad > .icon { color: var(--bad); }
.btn--danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--danger-solid:hover { background: color-mix(in srgb, var(--bad) 85%, #000); border-color: transparent; }
.list--flat { box-shadow: none; border-radius: var(--radius-md); }
.list__sub--wrap { white-space: normal; }
.list__item[aria-current="true"] { background: var(--accent-soft); }
.list__item[aria-current="true"] .list__title { color: var(--accent-text); }
.list__item > .icon { color: var(--ink-2); }
.list__item > .icon:last-child { color: var(--ink-3); }

/* Folded section: <details class="reveal"><summary>… chevron</summary>…</details> */
.reveal > summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; list-style: none; font-weight: 600; color: var(--ink-2); }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary:hover { color: var(--ink); }
.reveal__chev { margin-left: auto; transition: transform var(--dur); }
.reveal[open] > summary .reveal__chev { transform: rotate(90deg); }
.reveal[open] > :not(summary) { margin-top: var(--space-2); }
.reveal--card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.reveal--card[open] { padding-bottom: var(--space-4); }

/* Switch (checkbox inside .switch, or a <button role="switch" class="switch">) */
.switch { position: relative; width: 50px; height: 30px; flex: none; display: inline-block; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-3); cursor: pointer; transition: background var(--dur); }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__knob { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform var(--dur) var(--ease); pointer-events: none; }
.switch:has(input:checked), .switch[aria-checked="true"] { background: var(--accent); }
.switch:has(input:checked) .switch__knob, .switch[aria-checked="true"] .switch__knob { transform: translateX(20px); }
.switch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Make the hit area at least 44 px tall */
.switch::before { content: ""; position: absolute; inset: -7px -2px; }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; font-weight: 400; cursor: pointer; }
.setting-row__text { display: grid; gap: 2px; min-width: 0; }
.setting-row .label { margin: 0; }

/* ── Settings page ───────────────────────────────────────── */
.settings { display: grid; gap: var(--space-5); }
.settings__head { margin-bottom: 0; }
.settings__detail { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.settings__card { display: grid; gap: var(--space-4); }
.settings__intro { display: grid; gap: 4px; }
.settings__intro h2 { margin: 0; }
.settings__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
.settings__fieldset > legend { padding: 0; margin-bottom: var(--space-2); }
.settings__fieldset .field { margin: 0; }
.settings__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.settings__note { display: flex; gap: 8px; align-items: flex-start; }
.settings__note .icon { margin-top: 2px; }
.settings__howto { display: grid; }
.settings__howto + h3, .settings__card h3 { margin: 0; }
.settings__card ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.settings__danger .list__title { color: var(--bad); }
.settings__danger > .icon:first-child { color: var(--bad); }
.settings__back { margin-bottom: 0; min-height: var(--tap); }
.settings .option:has(input[type="radio"]) { grid-template-columns: auto 1fr; }
.copyfield { display: flex; gap: var(--space-2); align-items: center; }
.copyfield > input, .copyfield > code { flex: 1; min-width: 0; }

/* Phone: the list alone (/settings) or one section with a back link (/settings/<section>) */
@media (max-width: 899px) {
  .settings--home .settings__detail { display: none; }
  .settings--home .settings__nav .list__item[aria-current] { background: none; }
  .settings--home .settings__nav .list__item[aria-current] .list__title { color: inherit; }
  .settings--detail .settings__nav, .settings--detail .settings__head { display: none; }
}
@media (min-width: 900px) {
  .settings { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .settings__head { grid-column: 1 / -1; }
  .settings__nav { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); }
  .settings__back { display: none; }
}

/* Appearance: three theme cards with a miniature of the app */
.theme-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-card { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
  cursor: pointer; text-align: center; font: var(--text-label); color: var(--ink); }
.theme-card:hover { border-color: var(--ink-3); }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-card__label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 22px; }
.theme-card[aria-pressed="true"] .theme-card__label .icon { color: var(--accent-text); }
.mini { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; display: grid; grid-template-rows: 20% 1fr; border: 1px solid rgba(0, 0, 0, .1); }
.mini__bar { display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.mini__bar b { width: 10px; height: 10px; border-radius: 3px; background: #b4441f; }
.mini__bar i { width: 34%; height: 4px; border-radius: 2px; }
.mini__body { padding: 8px; display: grid; gap: 6px; align-content: start; }
.mini__body span { height: 16px; border-radius: 4px; }
.mini--light { background: #f8f6f2; }
.mini--light .mini__bar i { background: #cfc7ba; }
.mini--light .mini__body span { background: #fff; border: 1px solid #e6e1d8; }
.mini--dark { background: #131416; }
.mini--dark .mini__bar i { background: #3d4248; }
.mini--dark .mini__body span { background: #1b1d20; border: 1px solid #2b2e33; }
.mini--dark .mini__bar b { background: #e8825f; }
.mini--system { background: linear-gradient(90deg, #f8f6f2 50%, #131416 50%); }
.mini--system .mini__bar i { background: #8f949b; }
.mini--system .mini__body span { background: linear-gradient(90deg, #fff 50%, #1b1d20 50%); border: 1px solid #8f949b55; }
@media (max-width: 420px) { .theme-card { padding: 6px; font-size: .8125rem; } .theme-card__label .icon { display: none; } }

/* Replies: pick a mail service, then one guide */
.guides__pick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.guides__chip { margin: 0; min-height: var(--tap); }
.guides__chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.guides__chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.guide { display: none; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); margin-top: var(--space-2); }
.guide h3 { margin: 0 0 var(--space-2); }
.guide p { margin: var(--space-2) 0 0; }
.guide__steps { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.guides:has(#guide-gmail:checked) .guide--gmail, .guides:has(#guide-outlook:checked) .guide--outlook, .guides:has(#guide-proton:checked) .guide--proton,
.guides:has(#guide-icloud:checked) .guide--icloud, .guides:has(#guide-hand:checked) .guide--hand { display: block; }

/* Sending address */
.sending-req { align-items: flex-start; }
.sending-req__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-3); }
.sending-req .list__title { white-space: normal; overflow-wrap: anywhere; }
.sending-req__help { margin: 4px 0 0; }
.sending-req .list__main > * + * { margin-top: var(--space-2); }

/* DNS records (own domain; admin senders) */
.dns-records { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.dns-record { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface); display: grid; gap: var(--space-2); }
.dns-record__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dns-record__fields { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-3); align-items: center; }
.dns-record__fields dt { font: var(--text-label); color: var(--ink-3); }
.dns-record__fields dd { margin: 0; grid-column: 2; }
.dns-record__fields code, .dns-setup code { font-size: .8125rem; overflow-wrap: anywhere; word-break: break-all; }
.dns-record p { margin: 0; }
.dns-providers { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 560px) { .dns-record__fields { grid-template-columns: 1fr; } .dns-record__fields dd { grid-column: 1; } }

/* Confirm sheet (delete account): opens with #delete-account (:target), no JS */
.settings__sheet:not(:target) { display: none; }
.settings__sheet { z-index: 70; }
.settings__sheet-close { position: absolute; inset: 0; }
.settings__sheet .sheet { position: relative; }
.settings__sheet-actions { justify-content: flex-end; }

/* ── Me page (phones) ────────────────────────────────────── */
.me-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.me-head h1 { margin: 0; font-size: 1.5rem; }
.me-head p { margin: 0; }
.me-lists { display: grid; gap: var(--space-4); }
.me-lists form { margin: 0; }
.me-lists button.list__item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.me-lists button.list__item:hover { background: var(--surface-2); }
.me-theme { justify-content: space-between; }

/* ── Sign-in pages (no user: they follow the device theme) ── */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.auth__card { width: 100%; max-width: 420px; display: grid; gap: var(--space-5); }
.auth__card > * { margin: 0; }
.auth__brand { justify-self: start; }
.auth__head { display: grid; gap: 10px; }
.auth__head > * { margin: 0; }
.auth__head--center { justify-items: center; text-align: center; }
.auth__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.auth__icon .icon { width: 34px; height: 34px; }
.auth__note { display: flex; gap: 8px; align-items: flex-start; }
.auth__note .icon { margin-top: 2px; }
.auth__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }
.auth__foot a { color: var(--ink-3); }
.auth__foot a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.auth .card > .flash:last-child { margin-bottom: 0; }
.auth .field { margin: 0; display: grid; gap: 6px; }
.auth .field label, .auth .field .label { margin: 0; }
.auth .choice-grid { grid-template-columns: 1fr 1fr; }
.auth .check { margin: 0; font-weight: 400; }
.prose { max-width: var(--reading-max); }

/* ── Onboarding ──────────────────────────────────────────── */
.onb { display: grid; gap: var(--space-5); }
.onb > * { margin: 0; }
.onb__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.onb__top .back { margin: 0; }
.onb .steps { margin: 0; }
.onb__head { display: grid; gap: 10px; }
.onb__head > * { margin: 0; }
.onb__head .display { font-size: clamp(1.75rem, 6vw, 2.25rem); }
.onb form.card { display: grid; gap: var(--space-4); }
.onb form.card .field, .onb form.card fieldset.field { margin: 0; }
.onb form.card .form-row { gap: var(--space-4) var(--space-3); }
.drop { display: grid; justify-items: center; gap: 10px; padding: var(--space-7) var(--space-5); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); text-align: center; cursor: pointer; font-weight: 400; margin: 0; transition: border-color var(--dur), background var(--dur); }
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.drop__icon .icon { width: 26px; height: 26px; }
.drop strong { font-size: 1.0625rem; }
.onb__working { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-7) var(--space-5); }
.onb__working .spinner { width: 36px; height: 36px; border-width: 3px; color: var(--accent); }

/* ── Profile ─────────────────────────────────────────────── */
.profile-id { display: flex; gap: var(--space-4); align-items: center; }
.profile-id img, .profile-id .avatar { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; flex: none; font-size: 1.25rem; cursor: default; }
.profile-id__text { display: grid; gap: 4px; min-width: 0; }
.profile-id__text > * { margin: 0; }
.profile-id__name { font: var(--text-h2); }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); font: var(--text-small); }
.meta-line span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.cv-section { display: grid; gap: var(--space-3); }
.cv-section + .cv-section { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.cv-section > * { margin: 0; }
.cv-entry { display: grid; gap: 2px; }
.cv-entry > * { margin: 0; }
.cv-entry ul { margin: 4px 0 0; padding-left: 1.2em; }
.chips .chip { cursor: default; }
.card.stack > h2, .card.stack > h3 { margin: 0; }
.form-card { display: grid; gap: var(--space-4); }
.form-card .field { margin: 0; }
.form-card .form-row { gap: var(--space-4) var(--space-3); }
.repeat-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-3); margin: 0; min-width: 0; }
.repeat-item .field { margin: 0; }
.repeat-item .form-row { gap: var(--space-3); }
.repeat-item .check { margin: 0; }
.repeat-row { display: flex; gap: var(--space-2); align-items: center; }
.repeat-row > input, .repeat-row > select { min-width: 0; }
@media (max-width: 560px) { .repeat-row { flex-wrap: wrap; } .repeat-row > input { flex-basis: 100% !important; } }
.sticky-save { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); z-index: 5; display: flex; gap: var(--space-2); padding: var(--space-3);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .sticky-save { bottom: var(--space-4); } }

/* ── Admin ───────────────────────────────────────────────── */
.admin-nav { margin-bottom: var(--space-5); overflow-x: auto; max-width: 100%; }
.admin-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: var(--radius-pill); color: var(--ink-2);
  font: 600 .9375rem/1 var(--font-sans); text-decoration: none; white-space: nowrap; }
.admin-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
.stat-strip__item { display: grid; gap: 2px; }
.stat-strip__value { font: 600 1.5rem/1.1 var(--font-serif); }
.stat-strip__label { font: var(--text-small); color: var(--ink-3); }
.admin .card { display: grid; gap: var(--space-4); }
.admin .card > * { margin: 0; }
.admin .card__head { margin: 0; flex-wrap: wrap; }
.admin .card__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.admin .list__item { flex-wrap: wrap; align-items: flex-start; }
.admin .list__title, .admin .list__sub { white-space: normal; overflow-wrap: anywhere; }
.admin .list__end { flex-wrap: wrap; justify-content: flex-end; }
.admin .list__note { flex-basis: 100%; margin: 0; font: var(--text-small); color: var(--ink-2); overflow-wrap: anywhere; }
.admin .list__actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin .list__actions form { margin: 0; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.admin .list__actions input, .admin .list__actions select, .admin .inline-form input, .admin .inline-form select { width: auto; min-height: 36px; padding: 6px 10px; }
.admin .list__actions select, .admin .inline-form select { padding-right: 36px; }
.admin .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.admin .inline-form label { margin: 0; }
.admin .field { margin: 0; }
.admin form.stack .form-row { gap: var(--space-4) var(--space-3); }
.admin .pill .icon { width: 14px; height: 14px; }
.admin .pill:has(.icon)::before { display: none; }
.admin code, .admin .kbd { overflow-wrap: anywhere; }
.admin pre.kbd { display: block; white-space: pre-wrap; padding: var(--space-3); margin: 0; }
.admin .meter { width: 80px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: inline-block; vertical-align: middle; }
.admin .meter > span { display: block; height: 100%; background: var(--ok); }
.admin .meter--warn > span { background: var(--warn); }
.admin .meter--bad > span { background: var(--bad); }
.setup-notes { display: grid; gap: var(--space-3); }
.setup-notes code { font-size: .8125rem; }
.dns-plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: var(--text-small); }
.dns-plain li { display: grid; grid-template-columns: minmax(0, 2fr) 60px minmax(0, 3fr); gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--line); }
.dns-plain li:first-child { border-top: 0; color: var(--ink-3); font-weight: 600; }
@media (max-width: 560px) { .dns-plain li { grid-template-columns: 1fr; } .dns-plain li:first-child { display: none; } }
.auth__card--wide { max-width: var(--reading-max); }
.auth { align-items: start; }
@media (min-height: 700px) { .auth { align-items: center; } }
.prose__section h2 { margin: 0 0 var(--space-2); font-size: 1.1875rem; }
.prose__section p { margin: 0; }
.prose .page-head { margin-bottom: var(--space-4); }
.me-lists .list > * + form { border-top: 1px solid var(--line); }
/* Admin pages carry long technical strings (URLs, keys, DNS names): let them wrap instead of widening the page. */
.admin .card, .dns-setup, .sending-req .list__title { overflow-wrap: anywhere; }
.sending-req .list__main { min-width: 0; }
.admin .form-row > *, .settings__card .form-row > * { min-width: 0; }
.admin .list__main { flex: 1 1 220px; }
@media (max-width: 560px) { .admin .list__item > .logo { display: none; } .admin .list__item { padding: var(--space-3) var(--space-4); } }