/* ============================================================
   SPOOFWARD UI — shared design system (v1)
   Loaded on BOTH themes (default = Classic Light, space = Dark),
   on marketing + app + guest layouts. Load order:
     Tailwind (app.css) → spoofward-ui.css → theme-space.css
   Every colour in this file comes from a token so both themes work.
   ============================================================ */

/* ── 1. Font roles ─────────────────────────────────────────── */
:root {
    --font-brand: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-interface: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    /* Marketing type scale */
    --marketing-hero-size: clamp(3rem, 5.2vw, 5rem);
    --marketing-h2-size: clamp(2rem, 3.4vw, 3.25rem);
    --marketing-h3-size: clamp(1.25rem, 2vw, 1.75rem);
    --marketing-body-large: 1.125rem;
    --marketing-body: 1rem;
    --marketing-small: 0.875rem;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Control sizing */
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 48px;
    --input-height: 42px;

    /* Radius */
    --radius-card: 14px;
    --radius-control: 10px;
    --radius-badge: 999px;

    /* Motion */
    --motion-fast: 160ms;
    --motion-base: 220ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Shadows (card shadow is theme-agnostic per brief) */
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── 2. Semantic colour tokens ─────────────────────────────── */
/* Classic Light (theme name in code: "default") */
:root,
[data-theme="default"] {
    --color-bg: #F6F8FC;
    --color-bg-sidebar: #FFFFFF;
    --color-bg-header: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-soft: #F1F5F9;
    --color-border: #D8E0EB;
    --color-border-subtle: #E7ECF3;
    /* Interactive control boundaries are held to WCAG 2.2 SC 1.4.11 (3:1),
       which a divider colour is not required to meet. Separate token so the
       divider and the control edge can differ where they must.
       #94A3B8 was tried first and measures only 2.56:1 on white — it failed the
       very rule it was added for. #7C8AA0 measures 3.50:1 on #FFFFFF and
       3.26:1 on the #F4F7FA soft ground. */
    --color-border-control: #7C8AA0;

    --color-text-primary: #172033;
    --color-text-secondary: #475569;
    --color-text-muted: #5B6675;   /* 5.3:1 on surface-soft */
    --color-text-disabled: #94A3B8;
    --color-text-on-primary: #FFFFFF;

    --color-primary: #0284C7;
    --color-primary-hover: #0369A1;
    --color-primary-active: #075985;
    --color-primary-soft: rgba(2, 132, 199, 0.10);

    --color-success: #059669;
    --color-success-soft: rgba(5, 150, 105, 0.10);
    --color-warning: #D97706;
    --color-warning-soft: rgba(217, 119, 6, 0.10);
    --color-danger: #DC2626;
    --color-danger-soft: rgba(220, 38, 38, 0.10);
    --color-info: #2563EB;
    --color-info-soft: rgba(37, 99, 235, 0.10);
    --color-unknown: #64748B;
    --color-unknown-soft: rgba(100, 116, 139, 0.12);
    --color-ai: #7C3AED;              /* purple: AI labels only */
    --color-ai-soft: rgba(124, 58, 237, 0.10);

    --focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.25);
    /* Text-safe variants: the accent hues above are calibrated for fills, borders
       and icons (>=3:1). When an accent is used as NORMAL-SIZE TEXT, use these —
       every one clears 4.5:1 on --color-bg, --color-surface and --color-surface-soft. */
    --color-primary-text: #0369A1;
    --color-success-text: #047857;
    --color-warning-text: #B45309;
    --color-danger-text:  #B91C1C;
    --color-info-text:    #1D4ED8;
    --color-unknown-text: #5B6675;
    /* Solid fills that carry white label text (buttons). Must clear 4.5:1 vs #FFF. */
    --color-primary-fill: #0369A1;   /* 5.93:1 */
    --color-danger-fill:  #C21F1F;   /* 5.94:1 */

    --color-ai-text:      #6D28D9;

    color-scheme: light;
}

/* Dark (theme name in code: "space")
   ─────────────────────────────────────────────────────────────────────────
   PHASE4 — the dark application palette, as specified:

     background #0A0E1A · surface #111827 · elevated #142033 · border #243247
     primary accent #18BDF2 · success #10B981 · warning #F59E0B
     critical #EF4444 · primary text #F8FAFC · secondary text #94A3B8

   Measured against the three grounds (background / surface / elevated), the
   text pairs are 18.40 / 16.96 / 15.63 for primary text, 7.51 / 6.92 / 6.38
   for secondary, 8.80 / 8.11 / 7.48 for the accent, 7.59 / 6.99 / 6.45 for
   success, 8.97 / 8.26 / 7.61 for warning and 5.12 / 4.71 / 4.35 for
   critical — every one clears 4.5:1 as body text except critical on the
   ELEVATED surface (4.35:1), which is why the danger tone is only used at
   metric size there and the danger chip below gets a lighter ink. */
[data-theme="space"] {
    --color-bg: #0A0E1A;
    --color-bg-sidebar: #080C18;
    --color-bg-header: #0D1322;
    --color-surface: #111827;
    --color-surface-raised: #142033;
    --color-surface-soft: #121B2C;
    --color-border: #243247;
    --color-border-subtle: #1B2638;
    /* The specified divider colour (#243247) measures 1.37:1 on the surface and
       1.26:1 on the elevated surface. Correct for a divider — SC 1.4.11 exempts
       purely decorative boundaries — but these are also the edges of every
       input, select and textarea, and a control boundary must reach 3:1.
       #5E6E88 measures 3.43 / 3.16 / 3.72 against surface / elevated / page. */
    --color-border-control: #5E6E88;

    --color-text-primary: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #7F8A9D;
    --color-text-disabled: #5F6B7D;
    --color-text-on-primary: #06121F;

    --color-primary: #18BDF2;
    --color-primary-hover: #5AD2F7;
    --color-primary-active: #0E9AC8;
    --color-primary-soft: rgba(24, 189, 242, 0.12);

    --color-success: #10B981;
    --color-success-soft: rgba(16, 185, 129, 0.12);
    --color-warning: #F59E0B;
    --color-warning-soft: rgba(245, 158, 11, 0.12);
    --color-danger: #EF4444;
    --color-danger-soft: rgba(239, 68, 68, 0.12);
    --color-info: #3B82F6;
    --color-info-soft: rgba(59, 130, 246, 0.12);
    --color-unknown: #94A3B8;
    --color-unknown-soft: rgba(148, 163, 184, 0.12);
    --color-ai: #A78BFA;
    --color-ai-soft: rgba(167, 139, 250, 0.12);

    --focus-ring: 0 0 0 3px rgba(24, 189, 242, 0.40);
    /* On the dark ground these three base accents clear 4.5:1 as text on all
       three grounds — the worst pairing is 6.38:1. The two below do not. */
    --color-primary-text: var(--color-primary);
    --color-success-text: var(--color-success);
    --color-warning-text: var(--color-warning);
    /* PHASE4 — the FILL colours are the specified #EF4444 / #3B82F6 and are
       used for bars, rules and borders. As INK they are the two that do not
       clear 4.5:1: #EF4444 measures 4.35:1 on the elevated surface and 4.24:1
       on its own 12% chip, #3B82F6 3.81:1 and 4.16:1. The readable ink is one
       step lighter — verified 5.35:1 and 5.50:1 at the worst pairing — which
       is the same split the light theme already makes for tinted chips. */
    --color-danger-text:  #F87171;
    --color-info-text:    #60A5FA;
    --color-unknown-text: var(--color-text-secondary);
    /* Dark theme: primary buttons use near-black label text on the bright accent;
       the danger fill is darkened so its white label clears 4.5:1. */
    --color-primary-fill: var(--color-primary);
    --color-danger-fill:  #DC2626;   /* white label 4.83:1 */

    --color-ai-text:      var(--color-ai);

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-card-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    color-scheme: dark;
}

/* Legacy variable bridge — older blades use --ms-* directly. */
:root,
[data-theme="default"],
[data-theme="space"] {
    --ms-blue: var(--color-primary);
    --ms-dark: var(--color-text-primary);
    --ms-green: var(--color-success);
    --ms-bg: var(--color-bg);
    --ms-card: var(--color-surface);
    --ms-card-border: var(--color-border-subtle);
    --ms-text: var(--color-text-primary);
    --ms-text-muted: var(--color-text-secondary);
    --ms-input-bg: var(--color-surface);
    --ms-input-border: var(--color-border);
    --ms-hover-bg: var(--color-primary-soft);
    --ms-accent: var(--color-ai);
}

/* ── 3. Base typography ────────────────────────────────────── */
.font-brand { font-family: var(--font-brand); }
.font-interface { font-family: var(--font-interface); }

body.sw-app {
    font-family: var(--font-interface);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.sw-app h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.sw-app h2 { font-size: 19px; line-height: 1.3; font-weight: 650; }
.sw-app h3 { font-size: 16px; line-height: 1.35; font-weight: 600; }
.sw-app h1, .sw-app h2, .sw-app h3 { color: var(--color-text-primary); }
.sw-app code, .sw-app kbd, .sw-app pre, .sw-app samp { font-family: var(--font-mono); }

body.sw-marketing {
    font-family: var(--font-interface);
    font-size: var(--marketing-body);
    line-height: 1.6;
}
.sw-marketing h1, .sw-marketing h2, .sw-marketing h3,
.sw-marketing .font-brand { font-family: var(--font-brand); }
.sw-marketing h1 { font-size: var(--marketing-hero-size); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.sw-marketing h2 { font-size: var(--marketing-h2-size); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.sw-marketing h3 { font-size: var(--marketing-h3-size); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.sw-marketing p, .sw-marketing li, .sw-marketing td, .sw-marketing th,
.sw-marketing input, .sw-marketing textarea, .sw-marketing select, .sw-marketing button,
.sw-marketing label, .sw-marketing nav { font-family: var(--font-interface); }
.sw-marketing code, .sw-marketing pre, .sw-marketing kbd, .sw-marketing samp { font-family: var(--font-mono); }

/* Keep text >= 12px everywhere the system is loaded */
.sw-app .text-\[10px\], .sw-app .text-\[11px\] { font-size: 12px !important; }

/* Short uppercase metadata labels */
.sw-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── 4. Focus ring (every interactive sw-* element) ────────── */
.sw-btn:focus-visible,
.sw-input:focus-visible, .sw-select:focus-visible, .sw-textarea:focus-visible,
.sw-card[tabindex]:focus-visible, a.sw-card:focus-visible,
.sw-status-action:focus-visible,
.sw-table a:focus-visible, .sw-table button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ── 5. Cards ──────────────────────────────────────────────── */
.sw-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
}
.sw-card-flat { box-shadow: none; }
.sw-card-soft { background: var(--color-surface-soft); box-shadow: none; }
.sw-card-raised { background: var(--color-surface-raised); }
.sw-card-title {
    font-family: var(--font-interface);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}
.sw-card-title + .sw-card-desc { margin-top: calc(-1 * var(--space-2)); }
.sw-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}
.sw-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.sw-card-header .sw-card-title { margin-bottom: 0; }
.sw-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}
@media (max-width: 640px) {
    .sw-card { padding: var(--space-5) 18px; }
}

/* ── 6. Page header ────────────────────────────────────────── */
.sw-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.sw-page-header > div:first-child { min-width: 0; flex: 1 1 320px; }
.sw-page-header h1,
.sw-page-title {
    font-family: var(--font-interface);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 0;
}
.sw-page-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
    max-width: 68ch;
}
.sw-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.sw-section-title {
    font-family: var(--font-interface);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}
@media (max-width: 640px) {
    .sw-page-header h1, .sw-page-title { font-size: 24px; }
}

/* ── 7. Buttons ────────────────────────────────────────────── */
.sw-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--button-height-md);
    padding: 0 var(--space-4);
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font-family: var(--font-interface);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    color: var(--color-text-primary);
    background: transparent;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.sw-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.sw-btn:disabled, .sw-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.sw-btn-primary {
    background: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-text-on-primary);
}
.sw-btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.sw-btn-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.sw-btn-secondary {
    background: var(--color-surface);
    /* A button edge is the boundary of a control, so SC 1.4.11 applies to it;
       a card edge is a divider and is exempt. Only clickable edges moved. */
    border-color: var(--color-border-control);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-card-sm);
}
.sw-btn-secondary:hover { background: var(--color-surface-soft); border-color: var(--color-border-control); }
.sw-btn-secondary:active { background: var(--color-surface-raised); }

.sw-btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}
.sw-btn-ghost:hover { background: var(--color-surface-soft); color: var(--color-text-primary); }

.sw-btn-danger {
    background: var(--color-danger-fill);
    border-color: var(--color-danger-fill);
    color: #FFFFFF;
}
.sw-btn-danger:hover { filter: brightness(1.08); }
.sw-btn-danger-outline {
    background: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.sw-btn-danger-outline:hover { background: var(--color-danger-soft); }

.sw-btn-link {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: var(--color-primary);
    font-weight: 600;
}
.sw-btn-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
/* --color-primary (#0284C7) is 4.09:1 on white — under AA for 14px text.
   --color-primary-text (#0369A1) is the token meant for text and clears AA on
   every ground (5.93 white / 5.42 soft / 5.03 on a warning tint). */
.sw-btn-link { color: var(--color-primary-text); }

.sw-btn-icon {
    width: var(--button-height-md);
    padding: 0;
    color: var(--color-text-secondary);
}
.sw-btn-icon:hover { background: var(--color-surface-soft); color: var(--color-text-primary); }
.sw-btn-icon svg { width: 18px; height: 18px; }

.sw-btn-sm { height: var(--button-height-sm); padding: 0 var(--space-3); font-size: 13px; }
.sw-btn-sm.sw-btn-icon { width: var(--button-height-sm); }
.sw-btn-sm svg { width: 14px; height: 14px; }
.sw-btn-md { height: var(--button-height-md); }
.sw-btn-lg { height: var(--button-height-lg); padding: 0 var(--space-6); font-size: 15px; }
.sw-btn-lg.sw-btn-icon { width: var(--button-height-lg); }
.sw-btn-block { width: 100%; }

/* ── 8. Forms ──────────────────────────────────────────────── */
.sw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.sw-label {
    display: block;
    font-family: var(--font-interface);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}
.sw-label .sw-required { color: var(--color-danger); margin-left: 2px; }
.sw-help {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
}
.sw-input, .sw-select, .sw-textarea {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-height: var(--input-height);
    padding: 0 var(--space-3);
    font-family: var(--font-interface);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-control);
    box-shadow: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.sw-input::placeholder, .sw-textarea::placeholder { color: var(--color-text-muted); }
.sw-input:hover, .sw-select:hover, .sw-textarea:hover { border-color: var(--color-text-disabled); }
/* This block sits AFTER the :focus-visible ring declared above and at the same
   specificity, so `outline: none` used to cancel it — the design system's focus
   indicator never actually appeared on a text field. The tinted border and ring
   are kept; the outline is left to the rule above. */
.sw-input:focus, .sw-select:focus, .sw-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.sw-input:disabled, .sw-select:disabled, .sw-textarea:disabled {
    background: var(--color-surface-soft);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}
.sw-textarea { min-height: 120px; padding: var(--space-3); resize: vertical; line-height: 1.55; }
.sw-select {
    padding-right: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F8A9D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
}
.sw-input.sw-mono, .sw-textarea.sw-mono { font-family: var(--font-mono); font-size: 13px; }
.sw-input[aria-invalid="true"], .sw-select[aria-invalid="true"], .sw-textarea[aria-invalid="true"],
.sw-input.is-invalid, .sw-textarea.is-invalid, .sw-select.is-invalid {
    border-color: var(--color-danger);
}
.sw-input[aria-invalid="true"]:focus, .sw-textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}
.sw-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-danger);
    margin: 0;
}
.sw-error::before {
    content: "";
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sw-input-group { display: flex; gap: var(--space-2); }
.sw-input-group .sw-input { flex: 1 1 auto; min-width: 0; }
.sw-checkbox, .sw-radio { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* ── 9. Badges ─────────────────────────────────────────────── */
.sw-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-badge);
    border: 1px solid transparent;
    font-family: var(--font-interface);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    background: var(--color-unknown-soft);
    color: var(--color-text-secondary);
}
.sw-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.sw-badge-success { background: var(--color-success-soft); color: var(--color-success-text); }
.sw-badge-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.sw-badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.sw-badge-info    { background: var(--color-info-soft);    color: var(--color-info-text); }
.sw-badge-primary { background: var(--color-primary-soft); color: var(--color-primary-text); }
.sw-badge-neutral, .sw-badge-waiting { background: var(--color-unknown-soft); color: var(--color-text-secondary); }
.sw-badge-locked  { background: var(--color-surface-soft); color: var(--color-text-muted); border-color: var(--color-border-subtle); }
.sw-badge-ai      { background: var(--color-ai-soft); color: var(--color-ai-text); }
/* Light theme: darken semantic text slightly for AA on tinted chips */
[data-theme="default"] .sw-badge-success, :root:not([data-theme="space"]) .sw-badge-success { color: #047857; }
[data-theme="default"] .sw-badge-warning, :root:not([data-theme="space"]) .sw-badge-warning { color: #B45309; }
.sw-badge-dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── 10. Status block (icon + label + explanation + action) ── */
.sw-status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-control);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-soft);
    color: var(--color-text-primary);
    --status-color: var(--color-unknown);
    --status-soft: var(--color-unknown-soft);
}
.sw-status-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--status-soft);
    color: var(--status-color);
}
.sw-status-icon svg { width: 18px; height: 18px; }
.sw-status-body { flex: 1 1 auto; min-width: 0; }
.sw-status-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
    margin: 0 0 2px;
}
.sw-status-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}
.sw-status-action { margin-top: var(--space-3); }
.sw-status-action.sw-btn-link { margin-top: var(--space-2); }
.sw-status-success { --status-color: var(--color-success); --status-soft: var(--color-success-soft); border-color: var(--color-success-soft); }
.sw-status-warning { --status-color: var(--color-warning); --status-soft: var(--color-warning-soft); border-color: var(--color-warning-soft); }
.sw-status-danger  { --status-color: var(--color-danger);  --status-soft: var(--color-danger-soft);  border-color: var(--color-danger-soft); }
.sw-status-info    { --status-color: var(--color-info);    --status-soft: var(--color-info-soft);    border-color: var(--color-info-soft); }
.sw-status-waiting { --status-color: var(--color-info);    --status-soft: var(--color-unknown-soft); }
.sw-status-locked  { --status-color: var(--color-text-muted); --status-soft: var(--color-surface-raised); }
.sw-status-inline { padding: 0; border: 0; background: transparent; }
.sw-status-inline .sw-status-icon { width: 24px; height: 24px; border-radius: 6px; }
.sw-status-inline .sw-status-icon svg { width: 14px; height: 14px; }

/* ── 11. Monospace values ──────────────────────────────────── */
.sw-mono {
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}
.sw-code {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.sw-code-block {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

/* ── 12. Tables ────────────────────────────────────────────── */
.sw-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-control);
    background: var(--color-surface);
}
.sw-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-interface);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-text-primary);
}
.sw-table th, .sw-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-subtle);
}
.sw-table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface-soft);
    white-space: nowrap;
}
.sw-table tbody tr:last-child td { border-bottom: 0; }
.sw-table tbody tr:hover td { background: var(--color-primary-soft); }
.sw-table-sticky thead th { position: sticky; top: 0; z-index: 2; }
.sw-table-zebra tbody tr:nth-child(even) td { background: var(--color-surface-soft); }
.sw-table td.sw-mono, .sw-table .sw-mono { font-size: 13px; }
.sw-table .sw-num { text-align: right; font-variant-numeric: tabular-nums; }
.sw-table-compact th, .sw-table-compact td { padding: 7px 10px; }

/* ── 13. Danger zone ───────────────────────────────────────── */
.sw-danger-zone {
    border: 1px solid var(--color-danger-soft);
    border-left: 3px solid var(--color-danger);
    background: var(--color-danger-soft);
    border-radius: var(--radius-card);
    padding: var(--space-5) var(--space-6);
    box-shadow: none;
}
.sw-danger-zone .sw-card-title { color: var(--color-danger-text); }
.sw-danger-zone .sw-card-desc { color: var(--color-text-secondary); }

/* ── 14. Empty state ───────────────────────────────────────── */
.sw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-soft);
    color: var(--color-text-secondary);
}
.sw-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-unknown-soft);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}
.sw-empty-icon svg { width: 22px; height: 22px; }
.sw-empty-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.sw-empty-text { font-size: 13px; line-height: 1.6; max-width: 46ch; margin: 0; }
.sw-empty .sw-btn { margin-top: var(--space-3); }

/* ── 15. Misc helpers ──────────────────────────────────────── */
.sw-divider { border: 0; border-top: 1px solid var(--color-border-subtle); margin: var(--space-6) 0; }
.sw-stack > * + * { margin-top: var(--space-4); }
.sw-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sw-form-width { max-width: 1000px; }
.sw-text-secondary { color: var(--color-text-secondary); }
.sw-text-muted { color: var(--color-text-muted); }
.sw-link { color: var(--color-primary-text); font-weight: 500; text-decoration: none; }
.sw-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.sw-ai-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--color-ai);
}

/* ── 16. Tailwind display utilities must outrank sw-* components ──
   This file loads AFTER Tailwind, so a component that sets `display`
   (.sw-btn, .sw-badge, .sw-status, .sw-field …) would otherwise beat
   `.hidden` / `.lg:hidden` at equal specificity and source order —
   e.g. `class="sw-btn sw-btn-primary hidden sm:inline-flex"` stayed
   visible on mobile and `class="sw-btn … lg:hidden"` stayed visible on
   desktop. Re-declaring the display utilities here, in Tailwind's own
   order (base first, `.hidden` last, then breakpoints ascending),
   restores the documented behaviour without touching specificity. */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:inline-block { display: inline-block; }
    .sm\:inline { display: inline; }
    .sm\:flex { display: flex; }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:grid { display: grid; }
    .sm\:hidden { display: none; }
}
@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:inline-block { display: inline-block; }
    .md\:inline { display: inline; }
    .md\:flex { display: flex; }
    .md\:inline-flex { display: inline-flex; }
    .md\:grid { display: grid; }
    .md\:hidden { display: none; }
}
@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:inline-block { display: inline-block; }
    .lg\:inline { display: inline; }
    .lg\:flex { display: flex; }
    .lg\:inline-flex { display: inline-flex; }
    .lg\:grid { display: grid; }
    .lg\:hidden { display: none; }
}
@media (min-width: 1280px) {
    .xl\:block { display: block; }
    .xl\:inline-block { display: inline-block; }
    .xl\:inline { display: inline; }
    .xl\:flex { display: flex; }
    .xl\:inline-flex { display: inline-flex; }
    .xl\:grid { display: grid; }
    .xl\:hidden { display: none; }
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   PACK 7 — shared primitives promoted out of page scope.
   Tooltip: the product had no tooltip anywhere before pack 7. Several score,
   disposition and chart surfaces depend on one, so it belongs in the design
   system rather than in a single page's <style> block.
   ═══════════════════════════════════════════════════════════════════════════ */
            /* PACK7 §6 — tooltip primitive. Colours are design-system tokens only,
               so both Classic Light (default) and Dark (space) are covered. */
            .sw-tip { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; }
            .sw-tip-trigger {
                display: inline-flex; align-items: center; justify-content: center;
                width: 18px; height: 18px; padding: 0; margin: 0 0 0 4px;
                border: 0; border-radius: 50%; background: transparent; cursor: pointer;
                color: var(--color-text-muted);
            }
            .sw-tip-trigger svg { width: 14px; height: 14px; }
            .sw-tip-trigger:hover { color: var(--color-primary-text); }
            .sw-tip-trigger:focus-visible {
                outline: 2px solid var(--color-primary);
                outline-offset: 2px;
                color: var(--color-primary-text);
            }
            /* Collapsed: clipped, NOT display:none, so aria-describedby still resolves. */
            .sw-tip-bubble {
                position: absolute;
                width: 1px; height: 1px;
                margin: -1px; padding: 0; border: 0;
                overflow: hidden;
                clip-path: inset(50%);
                white-space: nowrap;
            }
            .sw-tip-bubble.is-open {
                position: absolute;
                z-index: 70;
                top: calc(100% + 8px);
                width: max-content;
                max-width: min(320px, calc(100vw - 32px));
                height: auto; margin: 0;
                padding: 10px 12px;
                overflow: visible;
                clip-path: none;
                white-space: normal;
                border: 1px solid var(--color-border);
                border-radius: var(--radius-control, 8px);
                background: var(--color-surface-raised);
                color: var(--color-text-secondary);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
                font-family: var(--font-interface);
                font-size: 12px;
                font-weight: 400;
                line-height: 1.55;
                text-align: left;
                text-transform: none;
                letter-spacing: 0;
            }
            .sw-tip-sm.is-open { max-width: min(240px, calc(100vw - 32px)); }
            .sw-tip-end .sw-tip-bubble.is-open   { right: 0; }
            .sw-tip-start .sw-tip-bubble.is-open { left: 0; }
            .sw-tip-center .sw-tip-bubble.is-open { left: 50%; transform: translateX(-50%); }
            .sw-tip-bubble .sw-tip-title {
                display: block; margin-bottom: 4px;
                font-weight: 600; color: var(--color-text-primary);
            }
            .sw-tip-bubble .sw-tip-text { display: block; }
            .sw-tip-bubble dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
            .sw-tip-bubble dt { color: var(--color-text-muted); }
            .sw-tip-bubble dd { margin: 0; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
            /* 375px: never let a bubble push the page sideways. */
            @media (max-width: 420px) {
                .sw-tip-bubble.is-open { position: fixed; left: 12px; right: 12px; transform: none; max-width: none; top: auto; }
            }

/* Visually-hidden utility — the design system had none. */
.sw-visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Modal shell around a native <dialog>: focus containment, Escape-to-close and
   an inert background come from the element itself, not from JS. */
.sw-dialog {
    width:min(620px, calc(100vw - 24px)); max-height:88vh; padding:0;
    border:1px solid var(--color-border); border-radius:var(--radius-control, 10px);
    background:var(--color-surface); color:var(--color-text-primary);
    box-shadow:0 20px 50px rgba(0,0,0,.30);
}
.sw-dialog-sm { width:min(460px, calc(100vw - 24px)); }
.sw-dialog::backdrop { background:rgba(6,12,24,.55); }
.sw-dialog-body { padding:var(--space-4); overflow-y:auto; max-height:88vh; }
.sw-dialog-close-form { position:sticky; top:0; display:flex; justify-content:flex-end; padding:var(--space-2) var(--space-2) 0; margin:0; }

/* CRITICAL alert tier. Reuses the danger palette with a solid border and
   uppercase weight — there is no --color-critical token and inventing a hex
   would break the theme contract. */
.sw-badge-critical { border-color: var(--color-danger); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* ── 19. Expandable drawer (PACK8) ──────────────────────────
   The disclosure primitive that carries DETAILED explanations, as the
   tooltip primitive above carries short definitions. The trigger is a real
   <button> with aria-expanded + aria-controls, so it is keyboard operable
   and gets the focus ring in §4. Markup: resources/views/components/sw-drawer.blade.php */
.sw-drawer { min-width: 0; }
.sw-drawer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-interface);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: var(--color-primary-text);
}
.sw-drawer-trigger:hover { text-decoration: underline; }
.sw-drawer-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.sw-drawer-chevron { display: inline-flex; flex-shrink: 0; }
.sw-drawer-chevron svg {
    width: 14px; height: 14px;
    transition: transform var(--motion-fast) var(--ease-out);
}
.sw-drawer-trigger[aria-expanded="true"] .sw-drawer-chevron svg { transform: rotate(90deg); }
.sw-drawer-panel {
    margin-top: var(--space-2);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.sw-drawer-panel[hidden] { display: none; }
.sw-drawer-panel > :first-child { margin-top: 0; }
.sw-drawer-panel > :last-child { margin-bottom: 0; }
.sw-drawer-sm { font-size: 12px; }
.sw-drawer-tone-card > .sw-drawer-panel {
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-control);
    background: var(--color-surface-soft);
}
@media (prefers-reduced-motion: reduce) {
    .sw-drawer-chevron svg { transition: none; }
}