/*
  Infinity.Preferences — personal-settings host styling.

  Consumes the Infinity.UI Air design tokens (var(--air-*)) as the SINGLE source of truth for color, spacing,
  radius, type and motion. No fallback values: Infinity.UI is a hard package dependency, so the token stylesheet
  (air-design-tokens.css) is always present, and every color/scale value belongs to Infinity.UI — duplicating it
  here would fork the palette and drift from the theme. All colors resolve from the semantic tokens
  (--air-bg/--air-surface/--air-text/--air-accent/…), which the Infinity.UI Air Theme Engine regenerates at runtime
  (AirThemeProvider swaps one <style> element) per active theme, so this surface follows Light/Dark/System with no
  per-scheme CSS of its own.

  Served at _content/Infinity.Preferences/infinity-preferences.css. No hardcoded product colors, no copied
  Infinity.UI/AppShell styles.

  Layout model (desktop): a centered page container holds a full-height navigation rail (product brand + section
  rail + optional footer) beside a main working column (active-section header + content + one sticky action bar).
  The Overview content is itself a two-column dashboard (quick settings + navigation management, plus an "advanced"
  aside). On narrow viewports the rail collapses to a native <select> switcher and every multi-column region stacks.
*/

/* ------------------------------------------------------------ container ---- */

.infpref-host {
    max-width: 87.5rem;               /* ~1400px — the page never spans edge-to-edge */
    margin-inline: auto;
    padding: var(--air-space-5);
    color: var(--air-text);
    font-family: var(--air-font-family);
    font-size: var(--air-font-size-md);
    line-height: var(--air-line-height-normal);
    box-sizing: border-box;
}

.infpref-host *,
.infpref-host *::before,
.infpref-host *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- icons ---- */

.infpref-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    display: block;
}

/* --------------------------------------------------------------- status ---- */

.infpref-host__error {
    padding: var(--air-space-3) var(--air-space-4);
    border-radius: var(--air-radius-md);
    background: var(--air-danger-bg);
    color: var(--air-danger-text);
    border: 1px solid var(--air-danger-border);
}

.infpref-host__loading,
.infpref-host__empty {
    display: flex;
    align-items: center;
    gap: var(--air-space-2);
    padding: var(--air-space-6) var(--air-space-4);
    color: var(--air-text-muted);
}

.infpref-host__empty {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--air-space-1);
}

.infpref-host__empty-title { font-weight: var(--air-font-weight-semibold); margin: 0; }
.infpref-host__empty-desc { margin: 0; color: var(--air-text-muted); }

.infpref-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--air-border);
    border-top-color: var(--air-accent);
    animation: infpref-spin 0.7s linear infinite;
}

@keyframes infpref-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .infpref-spinner { animation-duration: 2s; }
}

/* ----------------------------------------------------------------- body ---- */

.infpref-host__body {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--air-space-5);
    align-items: stretch;
}

/* ---------------------------------------------------------------- rail ----- */

.infpref-host__rail {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-4);
    padding: var(--air-space-5) var(--air-space-4);
    background: var(--air-sidebar-bg);
    border: 1px solid var(--air-sidebar-border);
    border-radius: var(--air-radius-lg);
    align-self: stretch;   /* full-height rail beside the content, About pinned to its bottom */
}

.infpref-host__brand {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-2xs);
    padding: var(--air-space-2) var(--air-space-3);
}

.infpref-host__brandtitle {
    font-size: var(--air-font-size-lg);
    font-weight: var(--air-font-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--air-text);
}

.infpref-host__brandsubtitle {
    font-size: var(--air-font-size-sm);
    color: var(--air-text-muted);
}

.infpref-host__railfooter {
    margin-top: auto;
    padding-top: var(--air-space-3);
    border-top: 1px solid var(--air-sidebar-footer-border);
}

/* ------------------------------------------------------------- sidebar ---- */

.infpref-host__nav {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-2xs);
}

.infpref-nav__group-label {
    padding: var(--air-space-3) var(--air-space-3) var(--air-space-1);
    margin-top: var(--air-space-2);
    border-top: 1px solid var(--air-sidebar-footer-border);
    font-size: var(--air-font-size-xs);
    font-weight: var(--air-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--air-sidebar-section);
}

/* The first group's label needs no separator above it. */
.infpref-host__nav > .infpref-nav__group-label:first-child { border-top: none; margin-top: 0; }

.infpref-host__navitem {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    align-items: center;
    gap: var(--air-space-3);
    text-align: left;
    min-height: 2.5rem;
    padding: var(--air-space-2) var(--air-space-3);
    border: none;
    border-radius: var(--air-radius-md);
    background: transparent;
    color: var(--air-sidebar-text);
    font: inherit;
    font-size: var(--air-font-size-md);
    font-weight: var(--air-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--air-transition), color var(--air-transition);
}

.infpref-host__navitem:hover {
    background: var(--air-sidebar-hover-bg);
    color: var(--air-sidebar-text-strong);
}

.infpref-host__navitem.is-active {
    background: var(--air-sidebar-active-bg);
    color: var(--air-sidebar-active-text);
    font-weight: var(--air-font-weight-semibold);
}

.infpref-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    color: var(--air-sidebar-icon);
}

.infpref-nav__icon .infpref-icon { width: 1.15rem; height: 1.15rem; }
.infpref-host__navitem:hover .infpref-nav__icon { color: var(--air-sidebar-text-strong); }
.infpref-host__navitem.is-active .infpref-nav__icon { color: var(--air-sidebar-active-icon); }

.infpref-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.infpref-host__navitem:focus-visible,
.infpref-select:focus-visible,
.infpref-segmented__item:focus-visible,
.infpref-sectioncard:focus-visible,
.infpref-toggle:focus-visible,
.infpref-overview-card:focus-visible,
.infpref-host__save:focus-visible,
.infpref-host__reset:focus-visible,
.infpref-pageheader__save:focus-visible,
.infpref-raillink:focus-visible {
    outline: 2px solid var(--air-focus-ring);
    outline-offset: 2px;
}

/* Native <select> section switcher — hidden on desktop, shown when the rail collapses. */
.infpref-host__navselect { display: none; }

/* --------------------------------------------------------------- main ----- */

.infpref-host__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--air-space-5);
}

.infpref-host__pagehead {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-1);
}

.infpref-host__title {
    font-size: var(--air-font-size-xl);
    font-weight: var(--air-font-weight-semibold);
    line-height: var(--air-line-height-tight);
    letter-spacing: -0.01em;
    margin: 0;
}

.infpref-host__subtitle {
    color: var(--air-text-muted);
    font-size: var(--air-font-size-md);
    margin: 0;
}

/* PreferencePageHeader (still a public component): its own header row + optional inline save. */
.infpref-host__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--air-space-4);
}

.infpref-host__heading { display: flex; flex-direction: column; gap: var(--air-space-1); }

.infpref-host__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--air-space-5);
}

/* Focused single-section editors (Appearance, Language, …) render as one calm card. */
.infpref-section {
    padding: var(--air-space-5);
    border-radius: var(--air-radius-lg);
    background: var(--air-card-bg);
    border: 1px solid var(--air-card-border);
    display: flex;
    flex-direction: column;
    gap: var(--air-space-4);
}

.infpref-section__body { display: flex; flex-direction: column; gap: var(--air-space-4); }

/* --------------------------------------------------------- overview dash --- */

.infpref-overview {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
    gap: var(--air-space-5);
    align-items: start;
}

.infpref-overview__main,
.infpref-overview__aside {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-5);
    min-width: 0;
}

/* A titled surface used by dashboard regions (quick settings, navigation, advanced). */
.infpref-panel {
    padding: var(--air-space-5);
    border-radius: var(--air-radius-lg);
    background: var(--air-card-bg);
    border: 1px solid var(--air-card-border);
    display: flex;
    flex-direction: column;
    gap: var(--air-space-4);
}

.infpref-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--air-space-3);
}

.infpref-panel__heading { display: flex; flex-direction: column; gap: var(--air-space-2xs); min-width: 0; }
.infpref-panel__title { font-size: var(--air-font-size-lg); font-weight: var(--air-font-weight-semibold); margin: 0; }
.infpref-panel__desc { margin: 0; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }

/* ------------------------------------------------------- quick settings ---- */

.infpref-quickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--air-space-3);
}

.infpref-quicklist {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-2);
}

/* Shared card badge (circular, accent-tinted) used by quick cards and advanced list items. */
.infpref-overview-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--air-accent-soft);
    color: var(--air-accent);
    flex: 0 0 auto;
}

.infpref-overview-card__icon .infpref-icon { width: 1.25rem; height: 1.25rem; }

.infpref-overview-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon    .       chevron"
        "body    body    body";
    gap: var(--air-space-3);
    text-align: left;
    padding: var(--air-space-4);
    border-radius: var(--air-radius-md);
    border: 1px solid var(--air-card-border);
    background: var(--air-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--air-transition), background-color var(--air-transition);
}

.infpref-overview-card:hover {
    border-color: var(--air-card-hover-border);
    background: var(--air-hover);
}

.infpref-overview-card__icon { grid-area: icon; }
.infpref-overview-card__body { grid-area: body; display: flex; flex-direction: column; gap: var(--air-space-2xs); min-width: 0; }
.infpref-overview-card__title { font-weight: var(--air-font-weight-semibold); font-size: var(--air-font-size-md); }
.infpref-overview-card__desc {
    font-size: var(--air-font-size-sm);
    color: var(--air-text-muted);
    line-height: var(--air-line-height-normal);
}

.infpref-overview-card__chevron {
    grid-area: chevron;
    display: inline-flex;
    align-items: center;
    color: var(--air-text-subtle);
}

.infpref-overview-card__chevron .infpref-icon { width: 1.1rem; height: 1.1rem; }

/* Compact variant used by the secondary "advanced" list: a dense two-line row. */
.infpref-overview-card.is-compact {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon body chevron";
    align-items: center;
    padding: var(--air-space-3);
}

.infpref-overview-card.is-compact .infpref-overview-card__icon { width: 2.25rem; height: 2.25rem; }
.infpref-overview-card.is-compact .infpref-overview-card__icon .infpref-icon { width: 1.1rem; height: 1.1rem; }

/* ---------------------------------------------------------------- fields --- */

.infpref-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--air-space-3);
}

.infpref-field__text { display: flex; flex-direction: column; gap: var(--air-space-1); min-width: 0; }
.infpref-field__label { font-weight: var(--air-font-weight-medium); color: var(--air-form-label); }
.infpref-field__desc { margin: 0; font-size: var(--air-font-size-sm); color: var(--air-form-helper); }
.infpref-field__control { flex: 0 0 auto; }

/* Stacked variant: the control drops to its own full-width row beneath the label (for card grids etc.). */
.infpref-field--stacked { flex-direction: column; align-items: stretch; }
.infpref-field--stacked .infpref-field__control { flex: 1 1 auto; width: 100%; }

.infpref-note {
    margin: 0;
    font-size: var(--air-font-size-sm);
    color: var(--air-text-muted);
}

/* --------------------------------------------------------------- select ---- */

.infpref-select {
    min-width: 12rem;
    width: 100%;
    padding: var(--air-space-2) var(--air-space-3);
    border-radius: var(--air-radius-md);
    border: 1px solid var(--air-form-control-border);
    background: var(--air-form-control-bg);
    color: inherit;
    font: inherit;
    font-size: var(--air-font-size-md);
    cursor: pointer;
}

.infpref-select:focus-visible { border-color: var(--air-form-control-focus-border); }
.infpref-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------ segmented ---- */

.infpref-segmented {
    display: inline-flex;
    width: 100%;
    padding: var(--air-space-2xs);
    gap: var(--air-space-2xs);
    border-radius: var(--air-radius-md);
    background: var(--air-bg-muted);
    border: 1px solid var(--air-border);
}

.infpref-segmented__item {
    flex: 1 1 0;
    padding: var(--air-space-2) var(--air-space-3);
    border: none;
    border-radius: var(--air-radius-sm);
    background: transparent;
    color: var(--air-text-muted);
    font: inherit;
    font-size: var(--air-font-size-sm);
    font-weight: var(--air-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--air-transition), color var(--air-transition);
}

.infpref-segmented__item:hover:not(.is-selected) { background: var(--air-hover); color: var(--air-text); }

.infpref-segmented__item.is-selected {
    background: var(--air-accent);
    color: var(--air-accent-text);
}

.infpref-segmented.is-disabled { opacity: 0.5; }

/* --------------------------------------------------------------- toggle ---- */

.infpref-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--air-space-2);
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.infpref-toggle__track {
    display: inline-block;
    width: 2.35rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--air-border-strong);
    border: 1px solid var(--air-border);
    position: relative;
    transition: background-color var(--air-transition);
    flex: 0 0 auto;
}

.infpref-toggle__thumb {
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--air-surface);
    transform: translateY(-50%);
    transition: left var(--air-transition);
}

.infpref-toggle.is-on .infpref-toggle__track { background: var(--air-accent); border-color: transparent; }
.infpref-toggle.is-on .infpref-toggle__thumb { left: calc(100% - 1.1rem); background: var(--air-accent-text); }
.infpref-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.infpref-toggle__state { font-size: var(--air-font-size-sm); color: var(--air-text-muted); }

/* ---------------------------------------------------------------- cards ---- */

.infpref-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--air-space-3);
    width: 100%;
}

.infpref-sectioncard {
    display: flex;
    flex-direction: column;
    gap: var(--air-space-2);
    text-align: left;
    padding: var(--air-space-4);
    border-radius: var(--air-radius-md);
    border: 1px solid var(--air-card-border);
    background: var(--air-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--air-transition), background-color var(--air-transition);
}

.infpref-sectioncard:hover { border-color: var(--air-card-hover-border); background: var(--air-hover); }

.infpref-sectioncard.is-selected {
    border-color: var(--air-accent);
    background: var(--air-accent-soft);
}

.infpref-sectioncard__head { display: flex; align-items: center; gap: var(--air-space-2); }
.infpref-sectioncard__icon { display: inline-flex; align-items: center; color: var(--air-accent); }
.infpref-sectioncard__icon .infpref-icon { width: 1.15rem; height: 1.15rem; }
.infpref-sectioncard__title { font-weight: var(--air-font-weight-semibold); }

.infpref-sectioncard__badge {
    margin-left: auto;
    font-size: var(--air-font-size-xs);
    font-weight: var(--air-font-weight-semibold);
    padding: 0.1rem var(--air-space-2);
    border-radius: 999px;
    background: var(--air-accent-soft);
    color: var(--air-accent);
}

.infpref-sectioncard__check { display: inline-flex; align-items: center; margin-left: auto; color: var(--air-accent); }
.infpref-sectioncard__check .infpref-icon { width: 1.05rem; height: 1.05rem; }
.infpref-sectioncard__badge + .infpref-sectioncard__check { margin-left: var(--air-space-1); }

.infpref-sectioncard__desc { font-size: var(--air-font-size-sm); color: var(--air-text-muted); }
.infpref-cards.is-disabled { opacity: 0.5; }

/* ------------------------------------------------- navigation management --- */

.infpref-navtable {
    border: 1px solid var(--air-card-border);
    border-radius: var(--air-radius-md);
    overflow: hidden;
}

.infpref-navtable__head,
.infpref-nav-list__item {
    display: grid;
    grid-template-columns: 1.25rem 1.5rem minmax(6rem, 12rem) minmax(0, 1fr) auto 1.25rem;
    align-items: center;
    gap: var(--air-space-3);
    padding: var(--air-space-3) var(--air-space-4);
}

.infpref-navtable__head {
    background: var(--air-bg-muted);
    border-bottom: 1px solid var(--air-border);
    font-size: var(--air-font-size-xs);
    font-weight: var(--air-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--air-text-subtle);
}

.infpref-navtable__head-page { grid-column: 3 / span 2; }
.infpref-navtable__head-toggle { grid-column: 5; text-align: center; white-space: nowrap; }

.infpref-nav-list { list-style: none; margin: 0; padding: 0; }

.infpref-nav-list__item {
    border-bottom: 1px solid var(--air-border);
    transition: background-color var(--air-transition);
}

.infpref-nav-list__item:last-child { border-bottom: none; }
.infpref-nav-list__item:hover { background: var(--air-hover); }
.infpref-nav-list__item.is-hidden .infpref-nav-list__page { color: var(--air-text-muted); }
.infpref-nav-list__item.is-hidden .infpref-nav-list__icon { opacity: 0.55; }

.infpref-nav-list__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--air-text-subtle);
    cursor: grab;
}

.infpref-nav-list__handle .infpref-icon { width: 1.1rem; height: 1.1rem; }
.infpref-nav-list__handle.is-locked { visibility: hidden; }

.infpref-nav-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--air-accent);
}

.infpref-nav-list__icon .infpref-icon { width: 1.2rem; height: 1.2rem; }

.infpref-nav-list__page { font-weight: var(--air-font-weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infpref-nav-list__desc { font-size: var(--air-font-size-sm); color: var(--air-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infpref-nav-list__toggle { display: inline-flex; justify-content: center; }

.infpref-nav-list__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--air-text-subtle);
}

.infpref-nav-list__menu .infpref-icon { width: 1.15rem; height: 1.15rem; }

.infpref-navtable__footer {
    display: flex;
    align-items: center;
    gap: var(--air-space-2);
    margin: var(--air-space-3);
    padding: var(--air-space-3);
    border: 1px dashed var(--air-info-border);
    border-radius: var(--air-radius-md);
    color: var(--air-info-text);
    background: var(--air-info-bg);
}

.infpref-navnote__icon { display: inline-flex; align-items: center; color: var(--air-info-text); }
.infpref-navnote__icon .infpref-icon { width: 1.1rem; height: 1.1rem; }
.infpref-navtable__footer .infpref-note { color: var(--air-info-text); }

/* ------------------------------------------------------- placeholder ------- */

.infpref-placeholder {
    padding: var(--air-space-6);
    border-radius: var(--air-radius-md);
    border: 1px dashed var(--air-border);
    background: var(--air-bg-muted);
    text-align: center;
}

.infpref-placeholder__title { margin: 0 0 var(--air-space-1); font-weight: var(--air-font-weight-semibold); }
.infpref-placeholder__desc { margin: 0; color: var(--air-text-muted); }

/* ------------------------------------------------------ rail footer link --- */

.infpref-raillink {
    display: flex;
    align-items: center;
    gap: var(--air-space-3);
    width: 100%;
    padding: var(--air-space-2) var(--air-space-3);
    border: none;
    border-radius: var(--air-radius-md);
    background: transparent;
    color: var(--air-sidebar-text);
    font: inherit;
    font-size: var(--air-font-size-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--air-transition), color var(--air-transition);
}

.infpref-raillink:hover { background: var(--air-sidebar-hover-bg); color: var(--air-sidebar-text-strong); }
.infpref-raillink__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; color: var(--air-sidebar-icon); }
.infpref-raillink__icon .infpref-icon { width: 1.15rem; height: 1.15rem; }

/* ---------------------------------------------------------- action bar ----- */

.infpref-host__actions {
    display: flex;
    align-items: center;
    gap: var(--air-space-3);
    padding: var(--air-space-4);
    border-radius: var(--air-radius-lg);
    background: var(--air-surface);
    border: 1px solid var(--air-card-border);
    position: sticky;
    bottom: var(--air-space-4);
}

.infpref-host__status { flex: 1 1 auto; text-align: center; font-size: var(--air-font-size-sm); }
.infpref-host__savenote { color: var(--air-text-muted); }
.infpref-host__savedok { color: var(--air-success-text); font-weight: var(--air-font-weight-medium); }
.infpref-host__savefail { color: var(--air-danger-text); font-weight: var(--air-font-weight-medium); }

.infpref-actionbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--air-space-3);
    padding: var(--air-space-2) var(--air-space-4);
    border-radius: var(--air-radius-md);
    border: 1px solid var(--air-border);
    background: var(--air-surface);
    color: var(--air-text);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--air-transition), border-color var(--air-transition);
}

.infpref-actionbtn:hover:not([disabled]) { background: var(--air-hover); }
.infpref-actionbtn[disabled] { opacity: 0.5; cursor: not-allowed; }

.infpref-actionbtn__icon { width: 1.25rem; height: 1.25rem; }
.infpref-actionbtn__text { display: flex; flex-direction: column; gap: var(--air-space-2xs); text-align: left; line-height: var(--air-line-height-tight); }
.infpref-actionbtn__label { font-weight: var(--air-font-weight-semibold); font-size: var(--air-font-size-md); }
.infpref-actionbtn__hint { font-size: var(--air-font-size-xs); color: var(--air-text-muted); }

.infpref-actionbtn--primary {
    background: var(--air-accent);
    border-color: transparent;
    color: var(--air-accent-text);
}

.infpref-actionbtn--primary:hover:not([disabled]) { background: var(--air-accent-hover); }
.infpref-actionbtn--primary .infpref-actionbtn__hint { color: var(--air-accent-text); opacity: 0.8; }

/* PreferencePageHeader inline save (component still public; not used by the host's single action bar). */
.infpref-pageheader__save {
    display: inline-flex;
    align-items: center;
    gap: var(--air-space-2);
    padding: var(--air-space-2) var(--air-space-4);
    border-radius: var(--air-radius-md);
    border: 1px solid transparent;
    background: var(--air-accent);
    color: var(--air-accent-text);
    font: inherit;
    font-weight: var(--air-font-weight-semibold);
    cursor: pointer;
}

.infpref-pageheader__save[disabled] { opacity: 0.5; cursor: not-allowed; }
.infpref-btn__icon { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------------- a11y ------ */

.infpref-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------- responsive ----- */

/* Large tablets: the overview dashboard folds to a single column before the rail collapses. */
@media (max-width: 64rem) {
    .infpref-overview { grid-template-columns: 1fr; }
}

/* Tablet and below: collapse the section rail into the native <select> switcher. */
@media (max-width: 48rem) {
    .infpref-host__body {
        grid-template-columns: 1fr;
    }

    .infpref-host__rail {
        position: static;
        max-height: none;
        flex-direction: column;
    }

    .infpref-host__nav { display: none; }
    .infpref-host__railfooter { display: none; }

    .infpref-host__navselect {
        display: block;
    }

    .infpref-host__navselect .infpref-select { width: 100%; }

    .infpref-field { flex-direction: column; align-items: stretch; }
    .infpref-field__control { width: 100%; }
    .infpref-segmented { display: flex; }
    .infpref-segmented__item { flex: 1 1 0; }

    /* Navigation table: drop the description column so rows stay legible when narrow. */
    .infpref-navtable__head,
    .infpref-nav-list__item {
        grid-template-columns: 1.25rem 1.5rem minmax(0, 1fr) auto 1.25rem;
    }
    .infpref-navtable__head-page { grid-column: 3; }
    .infpref-navtable__head-toggle { display: none; } /* avoid label collision on narrow rows */
    .infpref-nav-list__desc { display: none; }

    /* Action bar: flow at the end of the content (not sticky) so it never overlaps stacked content, and let the
       two buttons share the row evenly. */
    .infpref-host__actions { position: static; }
    .infpref-actionbtn { flex: 1 1 0; justify-content: center; }
    .infpref-host__status { display: none; }
}

/* Phones: quick settings become a single readable column. */
@media (max-width: 30rem) {
    .infpref-quickgrid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   SINGLE-PAGE PERSONAL SETTINGS
   One responsive column with a readable centred maximum width, compact cards, and a single action bar
   that stays reachable on tall pages. Replaces the rail + tab-per-setting layout, whose fixed rail and
   one-field panels left most of the viewport empty.
   Every value resolves from an --air-* token; every selector is .infpref-* scoped.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

.infpref-host--single { display: block; height: auto; overflow: visible; }

.infpref-page {
    display: flex; flex-direction: column; gap: var(--air-space-lg);
    width: 100%;
    /* A readable measure: settings rows are label + control, and a full-width row on a wide monitor
       separates the two by so much that they stop reading as a pair. */
    max-width: 56rem;
    margin-inline: auto;
    padding: var(--air-space-xl) var(--air-space-lg) var(--air-space-2xl);
    box-sizing: border-box;
}

.infpref-page__head { display: flex; flex-direction: column; gap: var(--air-space-2xs); }
.infpref-page__title {
    margin: 0; font-family: var(--air-font-family); font-size: var(--air-font-size-xl);
    font-weight: var(--air-font-weight-semibold); color: var(--air-text); line-height: 1.25;
}
.infpref-page__subtitle { margin: 0; font-size: var(--air-font-size-sm); color: var(--air-text-muted); }

.infpref-page__warning {
    margin: 0; padding: var(--air-space-sm) var(--air-space-md);
    border: 1px solid var(--air-warning-border); border-radius: var(--air-radius-md);
    background: var(--air-warning-bg); color: var(--air-warning-text);
    font-size: var(--air-font-size-sm);
}

.infpref-page__body { display: flex; flex-direction: column; gap: var(--air-space-lg); }

/* ── Settings card: one compact surface per section ── */
.infpref-sectioncard {
    display: flex; flex-direction: column; gap: var(--air-space-md);
    padding: var(--air-space-lg);
    border: 1px solid var(--air-card-border); border-radius: var(--air-radius-lg);
    background: var(--air-card-bg);
}
.infpref-sectioncard__head { display: flex; flex-direction: column; gap: var(--air-space-2xs); }
.infpref-sectioncard__title {
    margin: 0; font-size: var(--air-font-size-md); font-weight: var(--air-font-weight-semibold);
    color: var(--air-text); line-height: 1.3;
}
.infpref-sectioncard__desc { margin: 0; font-size: var(--air-font-size-xs); color: var(--air-text-muted); }
.infpref-sectioncard__body { display: flex; flex-direction: column; gap: var(--air-space-md); }
.infpref-sectioncard--advanced { background: var(--air-surface-subtle); }

.infpref-advanced { display: flex; flex-direction: column; gap: var(--air-space-md); }

/* ── The general card's rows: compact, evenly separated, no wasted vertical space ── */
.infpref-general { display: flex; flex-direction: column; gap: var(--air-space-md); }
.infpref-general > * + * { padding-top: var(--air-space-md); border-top: 1px solid var(--air-border-soft); }

/* ── Inline per-field feedback, next to the control the user touched ── */
.infpref-fielderror {
    margin: var(--air-space-2xs) 0 0; font-size: var(--air-font-size-xs);
    color: var(--air-danger-text); font-weight: var(--air-font-weight-medium);
}
.infpref-fieldnote { margin: var(--air-space-2xs) 0 0; font-size: var(--air-font-size-xs); color: var(--air-text-muted); }

/* ── Language search, shown only when the culture list is long enough to need it ── */
.infpref-search {
    width: 100%; min-height: 2.25rem; margin-bottom: var(--air-space-xs);
    padding: var(--air-space-xs) var(--air-space-sm);
    border: 1px solid var(--air-form-control-border); border-radius: var(--air-radius-sm);
    background: var(--air-surface); color: var(--air-text);
    font-family: var(--air-font-family); font-size: var(--air-font-size-sm);
    box-sizing: border-box;
}
.infpref-search:focus-visible { outline: 2px solid var(--air-focus-ring); outline-offset: 1px; border-color: var(--air-form-control-focus-border); }

/* ── The single action bar. Sticky inside the settings column so it stays reachable on a tall page,
      with the page's bottom padding reserving room so it never covers the last card. ── */
.infpref-host--single .infpref-host__actions {
    position: sticky; bottom: var(--air-space-md); z-index: 1;
    display: flex; align-items: center; gap: var(--air-space-md);
    padding: var(--air-space-md) var(--air-space-lg);
    border: 1px solid var(--air-border); border-radius: var(--air-radius-lg);
    background: var(--air-surface-elevated); box-shadow: var(--air-shadow-md);
}
.infpref-host--single .infpref-host__status { flex: 1 1 auto; min-width: 0; text-align: center; }

.infpref-host__dirty {
    display: inline-flex; align-items: center; gap: var(--air-space-xs);
    font-size: var(--air-font-size-xs); color: var(--air-warning-text);
}
.infpref-host__dirtymark {
    width: 0.5rem; height: 0.5rem; border-radius: var(--air-radius-xl);
    background: currentColor; flex: none;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
    .infpref-page { max-width: 100%; padding: var(--air-space-lg) var(--air-space-md) var(--air-space-xl); }
}

/* ── Mobile: one column, full-width controls, full-width stacked actions ── */
@media (max-width: 640px) {
    .infpref-page { gap: var(--air-space-md); padding: var(--air-space-md) var(--air-space-sm) var(--air-space-xl); }
    .infpref-page__title { font-size: var(--air-font-size-lg); }
    .infpref-sectioncard { padding: var(--air-space-md); border-radius: var(--air-radius-md); }

    .infpref-host--single .infpref-host__actions {
        flex-direction: column-reverse; align-items: stretch;
        bottom: var(--air-space-xs); padding: var(--air-space-sm);
    }
    .infpref-host--single .infpref-host__actions .infpref-actionbtn { width: 100%; justify-content: center; }
    .infpref-host--single .infpref-host__status { text-align: center; }
}

/* ── Forced colours: the card edges and the sticky bar must survive colour removal ── */
@media (forced-colors: active) {
    .infpref-sectioncard, .infpref-host--single .infpref-host__actions { border: 1px solid CanvasText; }
    .infpref-host__dirtymark { background: CanvasText; }
}

/* ── Tabbed presentation ──────────────────────────────────────────────────────────────────────────────────
   The tab CONTROL is Infinity.UI's: .air-tabs / .air-tabs-strip / .air-tab / .air-tabpanel carry the strip
   layout, the active and focus treatment, the horizontal strip scrolling, the narrow-viewport padding and the
   forced-colors rules. They ship in _content/Infinity.UI/css/air-components.css, which a consuming app already
   links alongside the design tokens.

   This package keeps only what it actually owns: the text it renders INSIDE the panel, and how wide the page is.
   Anything else here would be a second, silently diverging copy of a contract Infinity.UI owns. ── */
.infpref-tabdesc { margin: 0; font-size: var(--air-font-size-xs); color: var(--air-text-muted); }

/* A tabbed page carries far more content per view than the stacked one, so the readable measure widens.
   The previous 56rem left most of a 1920px desktop unused.

   NOT yet expressed as Infinity.UI 1.3.0's --air-content-max-width (1100px) / --air-content-max-width-large
   (1200px): this page renders at 72rem = 1152px, so neither token reproduces the current layout — adopting one
   would narrow the page by 52px or widen it by 48px. That is a production layout decision, not a refactor, so
   the measured value stands until the intended width is confirmed. */
.infpref-page { max-width: 72rem; }