/* Carpath Outreach — panel stylesheet (brand v3).
 *
 * Plain CSS, no build step. Fonts are self-hosted from /fonts (latin + latin-ext
 * subsets, font-display: swap); nothing is loaded from a CDN.
 *
 * Palette: Alpine Black #151B19 (ink), Carpath Green #254C43 (links, active, bands),
 * Mountain White #F6F5F0 (page), Signal Lime #B8E875 (CTAs/accents, never text on
 * light), Stone Grey #78847D (borders/decoration only), muted text #5E6A63, cards
 * #FFFFFF with 1px #E3E4DE lines. Focus ring: 2px green on light, lime on dark.
 * Type: Space Grotesk (headings), Inter (body/UI), IBM Plex Mono (kickers, numbers).
 *
 * Class names follow the x-sa component kit (sa-*); see docs/UI-KIT.md.
 */

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/space-grotesk/latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/space-grotesk/latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/space-grotesk/latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/space-grotesk/latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/space-grotesk/latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/space-grotesk/latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/inter/latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/inter/latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/inter/latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/inter/latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/inter/latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/inter/latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/ibm-plex-mono/latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/ibm-plex-mono/latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/ibm-plex-mono/latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/ibm-plex-mono/latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens — Carpath brand v3
   ========================================================================== */
:root {
    --sa-ink: #151B19;            /* Alpine Black: text, headings */
    --sa-green: #254C43;          /* Carpath Green: links, active, primary bands */
    --sa-green-hover: #1C3B34;
    --sa-bg: #F6F5F0;             /* Mountain White: page */
    --sa-lime: #B8E875;           /* Signal Lime: CTAs, accents (never text on light) */
    --sa-lime-hover: #A8DC5F;
    --sa-stone: #78847D;          /* Stone Grey: borders, decoration only */
    --sa-muted: #5E6A63;          /* small muted text (AA on white and Mountain White) */
    --sa-surface: #FFFFFF;
    --sa-surface-sunk: #FAFAF7;
    --sa-surface-hover: #F1F1EC;
    --sa-line: #E3E4DE;
    --sa-line-strong: #CDD0C8;

    --sa-success-bg: #E5EEEA; --sa-success-fg: #1D3D35; --sa-success-line: #C1D5CC;
    --sa-info-bg: #ECEFEB;    --sa-info-fg: #2C3833;    --sa-info-line: #D2D8D2;
    --sa-warning-bg: #F5F2DC; --sa-warning-fg: #574B0F; --sa-warning-line: #E2D9A3;
    --sa-critical-bg: #F8E9E6; --sa-critical-fg: #8E2A1E; --sa-critical-line: #E8C4BC;
    --sa-critical: #8E2A1E;
    --sa-critical-hover: #74221A;

    --sa-focus: var(--sa-green);
    --sa-radius: 8px;
    --sa-radius-sm: 6px;
    --sa-radius-lg: 12px;
    --sa-shadow: 0 1px 2px rgba(21, 27, 25, .05);
    --sa-shadow-pop: 0 10px 30px rgba(21, 27, 25, .14), 0 2px 6px rgba(21, 27, 25, .08);

    --sa-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sa-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sa-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --sa-sidebar-w: 232px;
    --sa-topbar-h: 52px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--sa-bg);
    color: var(--sa-ink);
    font: 400 14px/1.5 var(--sa-font-body);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
    font-family: var(--sa-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sa-ink);
    margin: 0;
    line-height: 1.25;
}
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
p { margin: 0 0 .75em; }
a { color: var(--sa-green); text-decoration: underline; text-decoration-color: rgba(37, 76, 67, .35); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
code, kbd, samp, pre { font-family: var(--sa-font-mono); font-size: 12.5px; }
code { background: var(--sa-surface-hover); border-radius: 4px; padding: 1px 5px; }
kbd { border: 1px solid var(--sa-line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--sa-surface); font-size: 11.5px; }
hr { border: 0; border-top: 1px solid var(--sa-line); margin: 16px 0; }
img, svg { max-width: 100%; }
::selection { background: var(--sa-lime); color: var(--sa-ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Shell: sidebar + topbar + main
   ========================================================================== */
.sa-skip {
    position: absolute; left: 12px; top: -40px; z-index: 100;
    background: var(--sa-lime); color: var(--sa-ink); padding: 8px 12px; border-radius: var(--sa-radius-sm);
    font-weight: 600; text-decoration: none;
}
.sa-skip:focus { top: 12px; }

.sa-shell { display: flex; min-height: 100vh; }

.sa-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sa-sidebar-w);
    display: flex; flex-direction: column;
    background: var(--sa-ink);
    color: rgba(246, 245, 240, .78);
    --sa-focus: var(--sa-lime);
}
.sa-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    height: var(--sa-topbar-h); padding: 0 18px;
    border-bottom: 1px solid rgba(246, 245, 240, .08);
    color: #F6F5F0; text-decoration: none;
}
.sa-sidebar-brand img { height: 22px; width: auto; display: block; }
.sa-sidebar-brand-tag {
    font: 500 10px/1 var(--sa-font-mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--sa-lime); border: 1px solid rgba(184, 232, 117, .35); border-radius: 4px; padding: 3px 5px;
}
.sa-nav { flex: 1; overflow-y: auto; padding: 14px 10px; }
.sa-nav-section {
    font: 500 10.5px/1 var(--sa-font-mono); letter-spacing: .12em; text-transform: uppercase;
    color: rgba(246, 245, 240, .5); padding: 14px 10px 8px;
}
.sa-nav-section:first-child { padding-top: 4px; }
.sa-nav ul { list-style: none; margin: 0; padding: 0; }
.sa-nav-link {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; margin: 1px 0;
    border-radius: var(--sa-radius-sm);
    color: rgba(246, 245, 240, .78); text-decoration: none;
    font-weight: 500; font-size: 13.5px;
}
.sa-nav-link svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.sa-nav-link:hover { background: rgba(246, 245, 240, .06); color: #F6F5F0; }
.sa-nav-link[aria-current="page"] { background: rgba(184, 232, 117, .10); color: #F6F5F0; }
.sa-nav-link[aria-current="page"] svg { opacity: 1; color: var(--sa-lime); }
.sa-nav-link[aria-current="page"]::before {
    content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sa-lime);
}
.sa-nav-count {
    margin-left: auto; font: 500 11px/1 var(--sa-font-mono); font-variant-numeric: tabular-nums;
    background: var(--sa-lime); color: var(--sa-ink); border-radius: 999px; padding: 3px 7px;
}
.sa-sidebar-foot {
    padding: 12px 18px; border-top: 1px solid rgba(246, 245, 240, .08);
    font: 400 11px/1.4 var(--sa-font-mono); color: rgba(246, 245, 240, .5); letter-spacing: .02em;
}

.sa-main { flex: 1; min-width: 0; margin-left: var(--sa-sidebar-w); display: flex; flex-direction: column; }

.sa-topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--sa-topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px;
    background: rgba(246, 245, 240, .92);
    backdrop-filter: saturate(1.2) blur(6px);
    border-bottom: 1px solid var(--sa-line);
}
.sa-topbar-title { font: 500 11px/1 var(--sa-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sa-muted); }
.sa-topbar-spacer { flex: 1; }
.sa-topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sa-muted); }
.sa-topbar-user form { margin: 0; }
.sa-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sa-green); color: #F6F5F0; font: 600 12px/1 var(--sa-font-display);
}
.sa-btn.sa-menu-toggle { display: none; }

.sa-content { width: 100%; max-width: 1360px; margin: 0 auto; padding: 22px 24px 48px; }

.sa-sidebar-scrim { display: none; }

@media (max-width: 960px) {
    .sa-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sa-sidebar.sa-sidebar-open { transform: none; box-shadow: var(--sa-shadow-pop); }
    .sa-sidebar-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(21, 27, 25, .4); }
    .sa-sidebar-scrim.sa-show { display: block; }
    .sa-main { margin-left: 0; }
    .sa-btn.sa-menu-toggle { display: inline-flex; }
    .sa-topbar { padding: 0 14px; }
    .sa-content { padding: 16px 14px 40px; }
    .sa-topbar-user .sa-topbar-email { display: none; }
}

/* Global blocking banner (sending blocked) — sits under the topbar on every panel page. */
.sa-global-banner {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 24px;
    background: var(--sa-critical-bg);
    border-bottom: 1px solid var(--sa-critical-line);
    color: var(--sa-critical-fg);
    font-size: 13.5px;
}
.sa-global-banner strong { font-weight: 600; }
.sa-global-banner .sa-kicker { color: var(--sa-critical-fg); margin: 2px 0 0; flex: none; }
.sa-global-banner a { color: var(--sa-critical-fg); font-weight: 600; }
@media (max-width: 960px) { .sa-global-banner { padding: 10px 14px; flex-wrap: wrap; } }

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.sa-kicker {
    font: 500 11px/1.2 var(--sa-font-mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--sa-muted); margin-bottom: 4px;
}
.sa-mono, .sa-num { font-family: var(--sa-font-mono); font-variant-numeric: tabular-nums; }
.sa-num { font-weight: 500; }
.sa-text-subdued { color: var(--sa-muted); }
.sa-text-critical { color: var(--sa-critical-fg); }
.sa-text-success { color: var(--sa-green); }
.sa-text-right { text-align: right; }
.sa-text-center { text-align: center; }
.sa-nowrap { white-space: nowrap; }
.sa-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-small { font-size: 12.5px; }

.sa-hidden, [hidden] { display: none !important; }
.sa-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sa-mt { margin-top: 16px; }
.sa-mb { margin-bottom: 16px; }
.sa-mt-sm { margin-top: 8px; }
.sa-mb-sm { margin-bottom: 8px; }
.sa-stack > * + * { margin-top: 16px; }
.sa-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Inline search / filter rows: the input grows, selects and buttons keep their width. */
.sa-row > .sa-input { flex: 1 1 220px; width: auto; min-width: 0; }
.sa-row > .sa-select { flex: 0 1 auto; width: auto; }

/* ==========================================================================
   Page header
   ========================================================================== */
.sa-page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.sa-page-header-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.sa-page-header h1 { overflow-wrap: anywhere; }
.sa-subtitle { color: var(--sa-muted); margin-top: 4px; font-size: 13.5px; }
.sa-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sa-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-top: 2px; flex: none;
    border: 1px solid var(--sa-line-strong); border-radius: var(--sa-radius-sm);
    background: var(--sa-surface); color: var(--sa-ink);
}
.sa-back:hover { background: var(--sa-surface-hover); }
.sa-back svg { width: 16px; height: 16px; }

/* ==========================================================================
   Grid
   ========================================================================== */
.sa-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.sa-grid > * { grid-column: span 12; min-width: 0; }
.sa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-grid--2 > * { grid-column: auto; }
.sa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-grid--3 > * { grid-column: auto; }
.sa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sa-grid--4 > * { grid-column: auto; }
.sa-grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.sa-grid--sidebar > * { grid-column: auto; }
.sa-col-3 { grid-column: span 3 !important; }
.sa-col-4 { grid-column: span 4 !important; }
.sa-col-5 { grid-column: span 5 !important; }
.sa-col-6 { grid-column: span 6 !important; }
.sa-col-7 { grid-column: span 7 !important; }
.sa-col-8 { grid-column: span 8 !important; }
.sa-col-9 { grid-column: span 9 !important; }
.sa-col-12 { grid-column: 1 / -1 !important; }
@media (max-width: 1100px) {
    .sa-grid--sidebar, .sa-grid--3, .sa-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .sa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .sa-grid--2, .sa-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .sa-grid > [class*="sa-col-"] { grid-column: 1 / -1 !important; }
}

/* ==========================================================================
   Card
   ========================================================================== */
.sa-card {
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
    min-width: 0;
}
.sa-card-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--sa-line);
}
/* The title takes the line; actions that do not fit next to it wrap under it (narrow screens). */
.sa-card-header > :first-child { flex: 1 1 auto; min-width: 0; }
.sa-card-header h2 { font-size: 15px; }
.sa-card-header .sa-kicker { margin-bottom: 2px; }
.sa-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sa-card-body { padding: 16px; }
.sa-card--flush > .sa-card-body { padding: 0; }
.sa-card-footer { padding: 10px 16px; border-top: 1px solid var(--sa-line); background: var(--sa-surface-sunk); border-radius: 0 0 var(--sa-radius-lg) var(--sa-radius-lg); }
.sa-card + .sa-card { margin-top: 16px; }
.sa-grid > .sa-card + .sa-card { margin-top: 0; }

/* Stat tiles (dashboard) */
.sa-stat { padding: 14px 16px; }
.sa-stat-label { font: 500 11px/1.2 var(--sa-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sa-muted); }
.sa-stat-value { font: 600 28px/1.1 var(--sa-font-display); letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sa-stat-meta { color: var(--sa-muted); font-size: 12.5px; margin-top: 4px; }
a.sa-stat-link { color: inherit; text-decoration: none; display: block; border-radius: var(--sa-radius-lg); }
a.sa-stat-link:hover .sa-card { border-color: var(--sa-line-strong); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.sa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--sa-line-strong); border-radius: var(--sa-radius-sm);
    background: var(--sa-surface); color: var(--sa-ink);
    font: 500 13.5px/1 var(--sa-font-body);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.sa-btn:hover { background: var(--sa-surface-hover); border-color: var(--sa-stone); }
.sa-btn:disabled, .sa-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.sa-btn svg { width: 15px; height: 15px; flex: none; }
.sa-btn--primary { background: var(--sa-lime); border-color: var(--sa-ink); color: var(--sa-ink); font-weight: 600; }
.sa-btn--primary:hover { background: var(--sa-lime-hover); border-color: var(--sa-ink); }
.sa-btn--dark { background: var(--sa-green); border-color: var(--sa-green); color: #F6F5F0; }
.sa-btn--dark:hover { background: var(--sa-green-hover); border-color: var(--sa-green-hover); }
.sa-btn--critical { background: var(--sa-critical); border-color: var(--sa-critical); color: #FFFFFF; }
.sa-btn--critical:hover { background: var(--sa-critical-hover); border-color: var(--sa-critical-hover); }
.sa-btn--critical-outline { color: var(--sa-critical-fg); border-color: var(--sa-critical-line); }
.sa-btn--critical-outline:hover { background: var(--sa-critical-bg); border-color: var(--sa-critical-fg); }
.sa-btn--plain { background: transparent; border-color: transparent; color: var(--sa-green); }
.sa-btn--plain:hover { background: var(--sa-surface-hover); border-color: transparent; }
.sa-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.sa-btn--block { width: 100%; }
.sa-btn-icon { width: 34px; padding: 0; }
.sa-btn--sm.sa-btn-icon { width: 28px; }
.sa-btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sa-btn-group form { margin: 0; display: inline-flex; }

/* ==========================================================================
   Forms
   ========================================================================== */
.sa-field { margin-bottom: 14px; }
.sa-field:last-child { margin-bottom: 0; }
.sa-label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 5px; color: var(--sa-ink); }
.sa-required { color: var(--sa-critical-fg); margin-left: 2px; }
.sa-help { color: var(--sa-muted); font-size: 12.5px; margin-top: 5px; }
.sa-error { color: var(--sa-critical-fg); font-size: 12.5px; margin-top: 5px; font-weight: 500; }

.sa-input, .sa-select, .sa-textarea {
    display: block; width: 100%;
    min-height: 34px; padding: 6px 10px;
    border: 1px solid var(--sa-line-strong); border-radius: var(--sa-radius-sm);
    background: var(--sa-surface); color: var(--sa-ink);
    font: 400 14px/1.4 var(--sa-font-body);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.sa-input::placeholder, .sa-textarea::placeholder { color: #7D8781; }
.sa-input:hover, .sa-select:hover, .sa-textarea:hover { border-color: var(--sa-stone); }
.sa-input:focus, .sa-select:focus, .sa-textarea:focus,
.sa-input:focus-visible, .sa-select:focus-visible, .sa-textarea:focus-visible {
    outline: none; border-color: var(--sa-green); box-shadow: 0 0 0 2px rgba(37, 76, 67, .9);
}
.sa-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.sa-textarea--code { font-family: var(--sa-font-mono); font-size: 12.5px; }
.sa-select {
    appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6A63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.sa-select--sm, .sa-input--sm { min-height: 28px; padding-top: 3px; padding-bottom: 3px; font-size: 12.5px; }
.sa-invalid, .sa-input.sa-invalid, .sa-select.sa-invalid, .sa-textarea.sa-invalid { border-color: var(--sa-critical); }
.sa-input[readonly] { background: var(--sa-surface-sunk); }

.sa-check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13.5px; }
.sa-check input[type="checkbox"], .sa-check input[type="radio"] { margin: 2px 0 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sa-green); width: 15px; height: 15px; }

.sa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sa-form-grid > .sa-field { margin-bottom: 14px; }
.sa-form-grid > .sa-form-grid-full { grid-column: 1 / -1; }
.sa-form-grid-full > .sa-field { margin-bottom: 14px; }
/* A fieldset used as a field (checkbox groups): no browser frame, legend styled as a label. */
fieldset.sa-field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.sa-field > legend { padding: 0; }
@media (max-width: 720px) { .sa-form-grid { grid-template-columns: minmax(0, 1fr); } }
.sa-form-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding-top: 4px; }

/* ==========================================================================
   Badges, chips
   ========================================================================== */
.sa-badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 20px; padding: 0 7px;
    border-radius: 4px; border: 1px solid transparent;
    font: 500 11.5px/1 var(--sa-font-body); white-space: nowrap;
    background: #EEEEE8; color: #3B4440; border-color: #DEDFD8;
}
.sa-badge--success { background: var(--sa-success-bg); color: var(--sa-success-fg); border-color: var(--sa-success-line); }
.sa-badge--info { background: var(--sa-info-bg); color: var(--sa-info-fg); border-color: var(--sa-info-line); }
.sa-badge--warning { background: var(--sa-warning-bg); color: var(--sa-warning-fg); border-color: var(--sa-warning-line); }
.sa-badge--critical { background: var(--sa-critical-bg); color: var(--sa-critical-fg); border-color: var(--sa-critical-line); }
.sa-badge--attention { background: var(--sa-lime); color: var(--sa-ink); border-color: #9CCB59; }
.sa-badge--new { background: var(--sa-green); color: #F6F5F0; border-color: var(--sa-green); }
.sa-badge--mono { font-family: var(--sa-font-mono); letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }

.sa-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 8px 0 10px;
    border: 1px solid var(--sa-line-strong); border-radius: 999px;
    background: var(--sa-surface); color: var(--sa-ink); font-size: 12.5px; text-decoration: none;
}
.sa-chip svg { width: 12px; height: 12px; color: var(--sa-muted); }
.sa-chip:hover { border-color: var(--sa-green); }
.sa-chip--clear { border-style: dashed; color: var(--sa-green); }

/* ==========================================================================
   Banners (flash, inline notices)
   ========================================================================== */
.sa-flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sa-flashes:empty { display: none; }
.sa-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--sa-info-line); border-left-width: 3px; border-radius: var(--sa-radius);
    background: var(--sa-info-bg); color: var(--sa-info-fg);
    font-size: 13.5px;
}
.sa-banner > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.sa-banner ul { margin: 4px 0 0; padding-left: 18px; }
.sa-banner p:last-child { margin-bottom: 0; }
.sa-banner--success { background: var(--sa-success-bg); color: var(--sa-success-fg); border-color: var(--sa-success-line); border-left-color: var(--sa-green); }
.sa-banner--info { border-left-color: var(--sa-stone); }
.sa-banner--warning { background: var(--sa-warning-bg); color: var(--sa-warning-fg); border-color: var(--sa-warning-line); border-left-color: #A08A1C; }
.sa-banner--critical { background: var(--sa-critical-bg); color: var(--sa-critical-fg); border-color: var(--sa-critical-line); border-left-color: var(--sa-critical); }
.sa-banner-close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; }

/* ==========================================================================
   Tables
   ========================================================================== */
.sa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sa-table th {
    position: sticky; top: 0;
    text-align: left; white-space: nowrap;
    padding: 8px 12px;
    background: var(--sa-surface-sunk);
    border-bottom: 1px solid var(--sa-line);
    font: 600 11.5px/1.2 var(--sa-font-body); letter-spacing: .02em; color: var(--sa-muted);
}
.sa-table td { padding: 8px 12px; border-bottom: 1px solid #ECEDE8; vertical-align: middle; }
.sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-table tbody tr:hover td { background: #FAFAF6; }
.sa-table td.sa-text-right, .sa-table th.sa-text-right { text-align: right; }
.sa-table .sa-num, .sa-table td[style*="text-align:right"] { font-family: var(--sa-font-mono); font-variant-numeric: tabular-nums; }
.sa-table-main { font-weight: 500; color: var(--sa-ink); }
.sa-table-sub { display: block; color: var(--sa-muted); font-size: 12.5px; margin-top: 1px; }
.sa-table-sub code { word-break: break-all; }
/* One clipped line in a table cell (full text in its title). Its intrinsic width is
   only its min-width (size containment), so a long address or name never widens the
   column: the column's own width share decides and the text ellipsises. Block, so a
   .sa-table-sub clip stays a sub-line. */
.sa-clip {
    display: block; contain: inline-size; min-width: 7rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sa-table-actions { text-align: right; white-space: nowrap; width: 1%; }
.sa-table-actions .sa-btn-group { justify-content: flex-end; flex-wrap: nowrap; }
.sa-card > .sa-card-body > .sa-table-wrap:only-child .sa-table th:first-child,
.sa-card--flush .sa-table th:first-child, .sa-card--flush .sa-table td:first-child { padding-left: 16px; }
.sa-card--flush .sa-table th:last-child, .sa-card--flush .sa-table td:last-child { padding-right: 16px; }
.sa-card--flush .sa-table th:first-child { border-top-left-radius: var(--sa-radius-lg); }
.sa-card--flush .sa-table th:last-child { border-top-right-radius: var(--sa-radius-lg); }

.sa-description-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 13.5px; }
.sa-description-list dt { color: var(--sa-muted); font-weight: 500; }
.sa-description-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .sa-description-list { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sa-description-list dd { margin-bottom: 8px; } }

/* Set / not set status rows (settings) */
.sa-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-stone); margin-right: 6px; vertical-align: 1px; }
.sa-status-dot--on { background: var(--sa-green); box-shadow: 0 0 0 3px rgba(184, 232, 117, .55); }
.sa-status-dot--off { background: transparent; border: 1.5px solid var(--sa-critical); }

/* ==========================================================================
   Tabs, dropdowns
   ========================================================================== */
.sa-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sa-line); margin-bottom: 12px; overflow-x: auto; }
.sa-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--sa-muted); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap;
    background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}
.sa-tab:hover { color: var(--sa-ink); }
.sa-tab--active { color: var(--sa-ink); border-bottom-color: var(--sa-green); }
.sa-tab-pane { display: none; }
.sa-tab-pane--active { display: block; }

.sa-dropdown { position: relative; display: inline-block; }
.sa-dropdown-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
    min-width: 200px; max-height: 360px; overflow-y: auto;
    padding: 6px;
    background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow-pop);
}
.sa-dropdown-menu--left { right: auto; left: 0; }
.sa-dropdown.sa-open > .sa-dropdown-menu { display: block; }
.sa-dropdown-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 8px; border-radius: var(--sa-radius-sm);
    color: var(--sa-ink); text-decoration: none; font-size: 13.5px; cursor: pointer;
    background: none; border: 0; text-align: left;
}
.sa-dropdown-item:hover { background: var(--sa-surface-hover); }

/* ==========================================================================
   List kernel (<x-sa.list>)
   ========================================================================== */
.sa-list { background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-lg); box-shadow: var(--sa-shadow); }
.sa-list-views { padding: 0 12px; margin-bottom: 0; }
.sa-list-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-bottom: 1px solid var(--sa-line);
}
.sa-list-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; margin: 0; }
.sa-list-search { position: relative; flex: 0 1 280px; min-width: 180px; }
.sa-list-search svg { position: absolute; left: 9px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--sa-muted); pointer-events: none; }
.sa-list-search .sa-input { padding-left: 30px; min-height: 30px; font-size: 13px; }
.sa-list-filter { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sa-list-filter .sa-select { width: auto; max-width: 240px; }
.sa-list-filter--range { border: 0; padding: 0; }
.sa-list-filter--range legend { float: left; margin: 0 4px 0 0; font-size: 12.5px; color: var(--sa-muted); }
.sa-list-filter--range .sa-input { width: auto; min-height: 28px; padding: 2px 6px; font-size: 12.5px; }
.sa-list-filter--on, .sa-select.sa-list-filter--on { border-color: var(--sa-green); background-color: #F3F7F4; }
.sa-list-filter-count { font: 500 11px/1 var(--sa-font-mono); color: var(--sa-green); }
.sa-list-filter-count:empty { display: none; }
.sa-list-filter-menu { min-width: 220px; }
.sa-list-filter-option { justify-content: flex-start; }
.sa-list-facet { margin-left: auto; font: 400 11.5px/1 var(--sa-font-mono); color: var(--sa-muted); font-variant-numeric: tabular-nums; }
.sa-list-per .sa-select { width: auto; }
.sa-list.sa-js [data-sa-nojs] { display: none; }
.sa-list-toolbar-aside { display: flex; gap: 6px; align-items: center; }
.sa-list-toolbar-aside:empty { display: none; }

.sa-list-bulkbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; margin: 0;
    background: var(--sa-ink); color: #F6F5F0;
    --sa-focus: var(--sa-lime);
}
.sa-list-bulkbar .sa-btn { background: transparent; color: #F6F5F0; border-color: rgba(246, 245, 240, .3); }
.sa-list-bulkbar .sa-btn:hover { background: rgba(246, 245, 240, .08); }
.sa-list-bulkbar .sa-btn--critical-outline { color: #F3C7BF; border-color: rgba(243, 199, 191, .5); }
.sa-list-bulkbar .sa-btn--critical { background: #B8402F; border-color: #B8402F; color: #FFF; }
.sa-list-bulkbar .sa-btn--plain { color: var(--sa-lime); border-color: transparent; }
.sa-list-bulk-main, .sa-list-bulk-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.sa-list-bulk-count { font: 500 12px/1 var(--sa-font-mono); color: var(--sa-lime); margin-right: 4px; }
.sa-list-bulk-actions { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.sa-list-body[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
.sa-list-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; }
.sa-list-table .sa-table th:first-child, .sa-list-table .sa-table td:first-child { padding-left: 14px; }
.sa-list-check-col { width: 34px; }
.sa-list-row--link { cursor: pointer; }
.sa-list-row-link { color: var(--sa-ink); font-weight: 500; text-decoration: none; }
.sa-list-row-link:hover { color: var(--sa-green); text-decoration: underline; }
.sa-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.sa-sort svg { width: 12px; height: 12px; opacity: .45; }
.sa-sort:hover { color: var(--sa-ink); }
.sa-sort--asc, .sa-sort--desc { color: var(--sa-green); }
.sa-sort--asc svg, .sa-sort--desc svg { opacity: 1; }
.sa-list-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-top: 1px solid var(--sa-line);
}
.sa-list-meta { font: 400 12px/1 var(--sa-font-mono); font-variant-numeric: tabular-nums; }
.sa-pagination { display: flex; gap: 2px; align-items: center; }
.sa-pagination a, .sa-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 6px;
    border-radius: var(--sa-radius-sm);
    font: 500 12.5px/1 var(--sa-font-mono); font-variant-numeric: tabular-nums;
    color: var(--sa-ink); text-decoration: none;
}
.sa-pagination a:hover { background: var(--sa-surface-hover); }
.sa-page-current { background: var(--sa-green); color: #F6F5F0 !important; }
.sa-page-gap { color: var(--sa-muted) !important; }
.sa-page-disabled { opacity: .4; }

.sa-list-cards { display: none; }
@media (max-width: 720px) {
    .sa-list-table { display: none; }
    .sa-list-cards { display: block; }
    .sa-list-card { padding: 12px 14px; border-bottom: 1px solid var(--sa-line); }
    .sa-list-card-head { display: flex; align-items: flex-start; gap: 10px; }
    .sa-list-card-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin: -2px 0 0 -4px; cursor: pointer; }
    .sa-list-card-check input { width: 16px; height: 16px; margin: 0; }
    .sa-list-card-title { font-weight: 600; color: var(--sa-ink); text-decoration: none; }
    .sa-list-card-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 6px 0 0; font-size: 13px; }
    .sa-list-card-body div { display: contents; }
    .sa-list-card-body dt { color: var(--sa-muted); }
    .sa-list-card-body dd { margin: 0; overflow-wrap: anywhere; }
    .sa-list-card-actions { margin-top: 8px; }
    .sa-list-search { flex: 1 1 100%; }
}
.sa-list .sa-empty { border: 0; }

/* Sequence editor: the inline "Remove this step?" prompt that replaces a step's tools. */
.os-step-confirm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.os-step-confirm-text { font-size: 13px; font-weight: 500; color: var(--sa-critical-fg); margin-right: 2px; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.sa-empty { text-align: center; padding: 36px 20px; color: var(--sa-muted); }
.sa-empty-icon { width: 36px; height: 36px; color: var(--sa-stone); margin-bottom: 8px; }
.sa-empty h3 { font-size: 15px; margin-bottom: 4px; }
.sa-empty p { max-width: 420px; margin: 0 auto 12px; font-size: 13.5px; }
.sa-empty-actions { display: inline-flex; gap: 8px; }

/* ==========================================================================
   Modal (shared confirm dialog)
   ========================================================================== */
.sa-modal { display: none; position: fixed; inset: 0; z-index: 80; align-items: center; justify-content: center; padding: 16px; }
.sa-modal.sa-modal-open { display: flex; }
.sa-modal-backdrop { position: absolute; inset: 0; background: rgba(21, 27, 25, .5); }
.sa-modal-dialog {
    position: relative; width: 100%; max-width: 440px;
    background: var(--sa-surface); border-radius: var(--sa-radius-lg); box-shadow: var(--sa-shadow-pop);
}
.sa-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sa-line); }
.sa-modal-close { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--sa-muted); border-radius: var(--sa-radius-sm); }
.sa-modal-close:hover { background: var(--sa-surface-hover); color: var(--sa-ink); }
.sa-modal-close svg { width: 18px; height: 18px; display: block; }
.sa-modal-body { padding: 16px; }
.sa-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--sa-line); background: var(--sa-surface-sunk); border-radius: 0 0 var(--sa-radius-lg) var(--sa-radius-lg); }
.sa-modal form { margin: 0; }

/* ==========================================================================
   Spinner, background job widget
   ========================================================================== */
.sa-spinner {
    display: inline-block; width: 14px; height: 14px; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: sa-spin .7s linear infinite; vertical-align: -2px;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }

.sa-job { padding: 12px 14px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius); background: var(--sa-surface); }
.sa-job + .sa-job { margin-top: 8px; }
.sa-job-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-job-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--sa-ink); }
.sa-job-spinner { color: var(--sa-green); }
.sa-job-bar { position: relative; height: 4px; margin-top: 10px; border-radius: 999px; background: #ECEDE8; overflow: hidden; }
.sa-job-bar-fill { height: 100%; background: var(--sa-green); border-radius: inherit; transition: width .3s ease; }
.sa-job--succeeded .sa-job-bar-fill { background: var(--sa-lime); }
.sa-job--failed .sa-job-bar-fill { background: var(--sa-critical); }
.sa-job-bar--indeterminate .sa-job-bar-fill { width: 30% !important; animation: sa-indeterminate 1.3s ease-in-out infinite; }
@keyframes sa-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.sa-job-message, .sa-job-error { font-size: 12.5px; margin-top: 6px; }

/* ==========================================================================
   Mail editor (<x-sa.mail-editor>)
   ========================================================================== */
.sa-mail-editor { border: 1px solid var(--sa-line-strong); border-radius: var(--sa-radius); background: var(--sa-surface); }
.sa-mail-editor.sa-invalid { border-color: var(--sa-critical); }
.sa-mail-editor:focus-within { border-color: var(--sa-green); box-shadow: 0 0 0 2px rgba(37, 76, 67, .9); }
.sa-mail-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--sa-line); background: var(--sa-surface-sunk); border-radius: var(--sa-radius) var(--sa-radius) 0 0; }
.sa-mail-toolbar button, .sa-mail-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 6px;
    border: 0; border-radius: var(--sa-radius-sm); background: transparent; color: var(--sa-ink);
    cursor: pointer; font-size: 14px;
}
.sa-mail-toolbar button:hover, .sa-mail-btn:hover, .sa-mail-toolbar button[aria-pressed="true"] { background: var(--sa-surface-hover); }
.sa-mail-sep { width: 1px; height: 18px; background: var(--sa-line); margin: 0 4px; }
.sa-mail-vars { height: 28px; border: 1px solid var(--sa-line-strong); border-radius: var(--sa-radius-sm); background: var(--sa-surface); color: var(--sa-ink); font: 400 12.5px/1 var(--sa-font-body); padding: 0 6px; }
.sa-mail-area { padding: 10px 12px; font: 14px/1.55 Arial, Helvetica, sans-serif; outline: none; overflow-wrap: anywhere; color: #1F2421; }
.sa-mail-area:empty::before { content: attr(data-placeholder); color: var(--sa-muted); }
.sa-mail-area blockquote { margin: 0 0 0 .8em; padding-left: .8em; border-left: 3px solid var(--sa-line-strong); color: var(--sa-muted); }
.sa-mail-area img { max-width: 100%; height: auto; }
.sa-mail-area table { border-collapse: collapse; }
.sa-mail-area ul, .sa-mail-area ol { padding-left: 1.4em; }
.sa-mail-status { font-size: 12px; padding: 0 12px 6px; }
.sa-mail-status:empty { display: none; }

/* ==========================================================================
   Auth (guest layout)
   ========================================================================== */
.sa-guest {
    min-height: 100vh;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.sa-guest-band {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 40px 48px;
    background: var(--sa-green); color: #F6F5F0;
    --sa-focus: var(--sa-lime);
}
.sa-guest-band img { height: 26px; width: auto; display: block; align-self: flex-start; }
.sa-guest-band h1 { color: #F6F5F0; font-size: 34px; letter-spacing: -0.04em; font-weight: 600; max-width: 13ch; line-height: 1.1; }
.sa-guest-band .sa-kicker { color: var(--sa-lime); }
.sa-guest-band p { color: rgba(246, 245, 240, .78); max-width: 38ch; margin: 12px 0 0; }
.sa-guest-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 140px; color: rgba(184, 232, 117, .16); pointer-events: none; }
.sa-guest-foot { font: 400 11px/1.4 var(--sa-font-mono); letter-spacing: .06em; color: rgba(246, 245, 240, .6); position: relative; }
.sa-guest-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.sa-guest-card { width: 100%; max-width: 400px; }
.sa-guest-card h2 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 6px; }
.sa-guest-card .sa-subtitle { margin: 0 0 22px; }
.sa-guest-card .sa-btn--primary { width: 100%; height: 40px; font-size: 14px; }
.sa-guest-mobile-logo { display: none; margin-bottom: 28px; }
.sa-guest-mobile-logo img { height: 24px; width: auto; }
@media (max-width: 860px) {
    .sa-guest { grid-template-columns: minmax(0, 1fr); }
    .sa-guest-band { display: none; }
    .sa-guest-mobile-logo { display: block; }
}

.sa-qr { display: inline-block; padding: 12px; background: #FFFFFF; border: 1px solid var(--sa-line); border-radius: var(--sa-radius); line-height: 0; }
.sa-qr svg { width: 184px; height: 184px; display: block; }
.sa-secret {
    display: inline-block; font: 500 13px/1.4 var(--sa-font-mono); letter-spacing: .08em; overflow-wrap: anywhere; /* wraps between the 4-character groups */
    background: var(--sa-surface-sunk); border: 1px dashed var(--sa-line-strong); border-radius: var(--sa-radius-sm); padding: 6px 10px;
}
.sa-code-input { font: 500 20px/1 var(--sa-font-mono) !important; letter-spacing: .3em; text-align: center; min-height: 44px !important; }
.sa-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 8px 0 0; padding: 12px; list-style: none; background: var(--sa-surface-sunk); border: 1px solid var(--sa-line); border-radius: var(--sa-radius); font: 500 13px/1.4 var(--sa-font-mono); }
.sa-steps { counter-reset: sa-step; list-style: none; padding: 0; margin: 0 0 18px; }
.sa-steps li { counter-increment: sa-step; position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--sa-ink); }
.sa-steps li::before {
    content: counter(sa-step, decimal-leading-zero); position: absolute; left: 0; top: 1px;
    font: 500 11px/18px var(--sa-font-mono); color: var(--sa-green);
}

/* ==========================================================================
   Placeholder (pages awaiting their screen task)
   ========================================================================== */
.sa-placeholder { border: 1px dashed var(--sa-line-strong); border-radius: var(--sa-radius-lg); padding: 28px; text-align: center; color: var(--sa-muted); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(120, 132, 125, .04) 10px 20px); }