/* AI Cloud theme component: Settings Sections */
/* Shared carded settings vocabulary. A theme-level layer so any surface can adopt
   the same settings look without coupling to another feature module: the self-service
   profile sections (Users' _user-fields.php) and the Appearance sub-module admin pages
   (Buttons / Icons / Typography) both consume this, and neither depends on the other.
   Markup is emitted by the core mp_settings_* view helpers.

   Every rule is scoped to an .mp-settings* / .mp-admin-* class — no bare-element or
   .card overrides — so the component is safe to load app-wide. Tokens are
   foundation/typography-owned and always carry literal fallbacks; this file defines
   none of its own. Scheme-aware throughout. */

/* ===== Carded settings sections ==========================================
   Each group is a standard .card with a tinted icon header. Lifted verbatim from
   the Users module's sections layout so the profile surfaces render identically —
   now from one definition, and available to any surface via the core helpers. */
.mp-settings{grid-column:1 / -1;display:flex;flex-direction:column;gap:16px;--mp-settings-action-w:280px;}
.mp-settings-section{margin:0;}
.mp-settings-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.mp-settings-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--mp-ink-strong);background:var(--mp-fill-06);border:1px solid var(--mp-fill-10);}
.mp-settings-ico svg{width:19px;height:19px;display:block;}
.mp-settings-ico[data-tint="green"]{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 26%,transparent);}
.mp-settings-ico[data-tint="blue"]{color:var(--mp-ink-blue);background:color-mix(in srgb,var(--mp-ink-blue) 12%,transparent);border-color:color-mix(in srgb,var(--mp-ink-blue) 26%,transparent);}
.mp-settings-ico[data-tint="violet"]{color:var(--mp-ink-violet);background:color-mix(in srgb,var(--mp-ink-violet) 12%,transparent);border-color:color-mix(in srgb,var(--mp-ink-violet) 26%,transparent);}
.mp-settings-head-text{min-width:0;}
.mp-settings-head-text h2{margin:0;font-size:var(--mp-fs-lg,16px);line-height:var(--mp-lh-snug,1.25);}
.mp-settings-head-text p{margin:3px 0 0;color:var(--muted);font-size:var(--mp-fs-base,13px);}
.mp-settings-body{min-width:0;}

/* ===== Page head =========================================================
   The muted subtitle line + optional trailing slot (badge / count) that sits above
   the section stack. Generalized from the /profile page's inline page head. */
.mp-settings-head-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.mp-settings-sub{margin:0;color:var(--muted);font-size:var(--mp-fs-md,14px);line-height:var(--mp-lh-normal,1.5);max-width:80ch;}
.mp-settings-head-bar-end{margin-left:auto;display:inline-flex;align-items:center;gap:10px;}

/* ===== Admin toolbar =====================================================
   Shared toolbar shell for the settings/admin pages: a .card with a space-between
   row (count/status left, actions right) plus a status note. Replaces the three
   near-identical bespoke toolbars (mp-btn-toolbar / mp-icons-toolbar / mp-typo-toolbar).
   Page-unique controls (Icons' search, Typography's dirty flag) stay in each module's
   own CSS and drop into the row/actions slots; --sticky is opt-in (Typography). */
.mp-admin-toolbar{padding:14px 16px;}
.mp-admin-toolbar--sticky{position:sticky;top:0;z-index:5;}
.mp-admin-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.mp-admin-toolbar-count{font-size:var(--mp-fs-sm,12px);font-weight:var(--mp-fw-heavy,800);letter-spacing:var(--mp-ls-wide,0.04em);text-transform:uppercase;color:var(--mp-ink-slate2,#9fb2c8);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mp-admin-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Stale/regenerate accent, unified to amber (assets out of date → action needed).
   Applies to any regenerate control in the toolbar carrying .is-stale. */
.mp-admin-toolbar-actions .btn.is-stale{box-shadow:0 0 0 1px var(--mp-amber-45,rgba(245,158,11,.45)) inset;}
.mp-admin-toolbar-actions .btn.is-busy{opacity:.6;pointer-events:none;}

/* Status note (stale / gap / info) — one component, tinted by modifier. */
.mp-admin-note{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 12px;border-radius:var(--radius,8px);font-size:var(--mp-fs-sm,12px);line-height:var(--mp-lh-normal,1.4);border:1px solid transparent;}
.mp-admin-note .mp-icon{flex:0 0 auto;margin-top:1px;}
.mp-admin-note code{background:var(--mp-sh-25,rgba(0,0,0,.25));padding:0 4px;border-radius:3px;}
.mp-admin-note.is-hidden{display:none;}
.mp-admin-note--amber{border-color:var(--mp-amber-30,rgba(245,158,11,.30));background:var(--mp-amber-08,rgba(245,158,11,.08));color:var(--mp-ink-amber,#fde68a);}
.mp-admin-note--danger{border-color:var(--mp-red-34,rgba(244,63,94,.34));background:var(--mp-danger-08,rgba(244,63,94,.08));color:var(--mp-ink-danger,#fecdd3);}
.mp-admin-note--info{border-color:var(--border);background:var(--mp-slate-06,rgba(148,163,184,.06));color:var(--muted);}

/* ===== Settings toggle row ================================================
   A .remember-toggle laid out as [icon] [label + description] [switch], the switch
   pinned to the trailing edge. The shared switch is reused verbatim: the input stays
   DOM-adjacent to its .toggle-ui so `input:checked + .toggle-ui` keeps firing - only
   CSS `order` re-slots the switch to the end. Tints resolve against scheme-aware
   tokens (foundation/typography-owned, literal fallbacks). This is the canonical
   settings toggle row; the mail notification prefs' .mp-notif-row is the same pattern
   and should converge onto this. */
.remember-toggle.mp-settings-toggle-row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:11px 13px;min-height:56px;margin-top:0;}
.mp-settings-toggle-row .mp-settings-toggle-ico{order:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--mp-ink-strong);background:var(--mp-fill-06);border:1px solid var(--mp-fill-10);}
.mp-settings-toggle-row .mp-settings-toggle-ico svg{width:16px;height:16px;display:block;}
.mp-settings-toggle-row .mp-settings-toggle-ico[data-tint="green"]{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 26%,transparent);}
.mp-settings-toggle-row .mp-settings-toggle-ico[data-tint="blue"]{color:var(--mp-ink-blue);background:color-mix(in srgb,var(--mp-ink-blue) 14%,transparent);border-color:color-mix(in srgb,var(--mp-ink-blue) 26%,transparent);}
.mp-settings-toggle-row .mp-settings-toggle-ico[data-tint="violet"]{color:var(--mp-ink-violet);background:color-mix(in srgb,var(--mp-ink-violet) 14%,transparent);border-color:color-mix(in srgb,var(--mp-ink-violet) 26%,transparent);}
.mp-settings-toggle-row .mp-settings-toggle-copy{order:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mp-settings-toggle-row .mp-settings-toggle-copy small{margin-top:0;color:var(--muted);font-size:var(--mp-fs-sm,12px);line-height:var(--mp-lh-normal,1.4);}
.mp-settings-toggle-row .toggle-ui{order:2;}