/* ============================================================
   Pulse Design System — Shield ITSM brand
   Source of truth: branding/brand-brief.md + branding/design-tokens.md
   (Phase 10 re-skin). Quiet, trustworthy, data-first. WCAG AA.
   Tokens first; components below. Class names are stable — views
   depend on them.
   ============================================================ */

/* ---------- Self-hosted fonts (no CDN; files under wwwroot/fonts).
   Plus Jakarta Sans + JetBrains Mono, both SIL OFL, latin subsets,
   sourced from google-webfonts-helper (gwfh.mranftl.com) 2026-07-03.
   Venera (logo wordmark) is inside the SVG logos only — never a UI face. */
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("../fonts/plus-jakarta-sans-v12-latin-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("../fonts/plus-jakarta-sans-v12-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("../fonts/plus-jakarta-sans-v12-latin-600.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700;
    font-display: swap; src: url("../fonts/plus-jakarta-sans-v12-latin-700.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800;
    font-display: swap; src: url("../fonts/plus-jakarta-sans-v12-latin-800.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("../fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("../fonts/jetbrains-mono-v24-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("../fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono"; font-style: normal; font-weight: 700;
    font-display: swap; src: url("../fonts/jetbrains-mono-v24-latin-700.woff2") format("woff2");
}

/* ---------- Design tokens (branding/design-tokens.md, verbatim core) ---------- */
:root {
    /* Brand core */
    --shield-navy: #2B394E;
    --shield-blue: #009BDF;   /* primary action, links */
    --shield-cyan: #00BDF2;   /* highlight only */
    --shield-gradient: linear-gradient(135deg, #0080C9 0%, #00B6ED 100%);

    /* Blue scale */
    --blue-050:#F0FAFE; --blue-100:#DBF4FD; --blue-200:#B5E9FB;
    --blue-300:#7ADBF8; --blue-400:#3FCCF6; --blue-500:#00BDF2;
    --blue-600:#009BDF; --blue-700:#0077B0; --blue-800:#005A85; --blue-900:#003E5A;

    /* Navy / neutral scale (always blue-leaning) */
    --navy-050:#F3F5F8; --navy-100:#E2E7EE; --navy-200:#C1CAD8;
    --navy-300:#96A4BB; --navy-400:#6B7C97; --navy-500:#4D5E79;
    --navy-600:#3A4A63; --navy-700:#2B394E; --navy-800:#222E40; --navy-900:#1A2230;

    /* Semantic (muted, never saturated) */
    --success:#2FAE66; --warning:#F0A500; --danger:#E03E4B; --info:#009BDF;
    /* AA text shades of the same hues, for small text on the tinted badge/
       alert backgrounds (the raw status tokens sit below 4.5:1 on light
       surfaces; WCAG AA is a repo invariant). Backgrounds/icons/rings use
       the raw tokens above. */
    --success-text:#1E6F42; --warning-text:#7A5400; --danger-text:#AC2733;
    --success-bg:#E6F5EC; --warning-bg:#FCF2DC; --danger-bg:#FBE8EA; --info-bg:var(--blue-050);

    /* Forensic kill-chain categories (docs/forensic-timeline-spec.md §5).
       Six hues for the six sections of the forensic checklist, used as the
       colour rail on the per-user Activity timeline. Deliberately NOT semantic:
       these say WHICH STAGE an event belongs to, while severity keeps using the
       semantic tokens above — the two channels must stay separable, or a
       critical reconnaissance event and a low-risk one would look alike.
       Muted and blue-leaning to sit inside the brand, and spread far enough
       apart in hue to survive the most common colour-vision deficiencies.
       Each pairs a rail/dot hue with an AA-contrast text shade of itself, since
       the raw hues are chosen for fills and sit below 4.5:1 as small text. */
    --fx-access:#2E6BC9;  --fx-access-t:#24559F;   /* Initial access */
    --fx-account:#7B5BD1; --fx-account-t:#5D42A9;  /* Account modification */
    --fx-persist:#C24A8C; --fx-persist-t:#99306A;  /* Persistence and evasion */
    --fx-recon:#0E9AA0;   --fx-recon-t:#0B767A;    /* Reconnaissance */
    --fx-exfil:#D2762A;   --fx-exfil-t:#9E551A;    /* Exfiltration and data access */
    --fx-impact:#C33B47;  --fx-impact-t:#A02733;   /* Impact and execution */

    /* Surfaces + text (light) */
    --page:#F4F7FB; --surface:#FFFFFF; --surface-2:#F3F5F8;
    --fg-1:#1A2230; --fg-2:#4D5E79; --fg-3:#7A8AA3;
    --border-1:#E2E7EE; --border-2:#C9D3E0;

    /* Type — Venera is the LOGO ONLY */
    --font-display:"Plus Jakarta Sans", system-ui, sans-serif;
    --font-body:"Plus Jakarta Sans", system-ui, sans-serif;
    --font-mono:"JetBrains Mono", ui-monospace, monospace;
    /* Type ramp raised app-wide for readability (2026-07-07). Previous scale
       topped out too small for dense views (xs 12 / sm 13 / base 15). The whole
       ramp is lifted ~1–2px, keeping the brand hierarchy ratios (body:h1 ≈ 1.6). */
    --text-xs: 0.8125rem;   /* 13  (was 12) */
    --text-sm: 0.875rem;    /* 14  (was 13) */
    --text-base: 1rem;      /* 16  (was 15) */
    --text-md: 1.125rem;    /* 18  (was 17) */
    --text-lg: 1.3125rem;   /* 21  (was 20) */
    --text-xl: 1.625rem;    /* 26  (was 24) */
    --text-2xl: 2rem;       /* 32  (was 30) */

    /* Spacing (4px grid) */
    --sp-1: 0.25rem;  /* 4 */
    --sp-2: 0.5rem;   /* 8 */
    --sp-3: 0.75rem;  /* 12 */
    --sp-4: 1rem;     /* 16 */
    --sp-5: 1.5rem;   /* 24 */
    --sp-6: 2rem;     /* 32 */
    --sp-7: 3rem;     /* 48 */

    /* Radius — 4px inputs, 8px buttons, 12px cards; pills for tags/avatars */
    --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:20px; --radius-pill:999px;
    --radius: var(--radius-md); /* legacy alias */

    /* Elevation (cool, navy-tinted) */
    --shadow-xs:0 1px 2px rgba(43,57,78,.06);
    --shadow-sm:0 2px 6px rgba(43,57,78,.08);
    --shadow-md:0 6px 16px rgba(43,57,78,.10);
    --shadow-lg:0 12px 32px rgba(43,57,78,.14);
    --shadow-glow:0 0 0 4px rgba(0,155,223,.18);
    --shadow: var(--shadow-sm); /* legacy alias */

    /* Motion — calm, no bounce */
    --ease-out:cubic-bezier(.2,.7,.2,1);
    --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

    /* Layout */
    --sidebar-width: 250px;
    /* Frame widened (2026-07-08) so the 10-tab client workspace bar stays on one
       line at desktop widths after the type-scale increase; mobile still wraps. */
    --content-max: 1400px;

    /* Focus ring (brand glow) */
    --focus-ring: var(--shadow-glow);

    /* ---- Legacy aliases (pre-rebrand variable names still used by views/
            older component rules; all resolve to brand tokens) ---- */
    --font-sans: var(--font-body);
    --gray-50: var(--navy-050);  --gray-100: var(--navy-100);
    --gray-200: var(--navy-100); --gray-300: var(--navy-200);
    --gray-400: var(--navy-300); --gray-500: var(--fg-3);
    --gray-600: var(--navy-500); --gray-700: var(--navy-600);
    --gray-800: var(--fg-1);     --gray-900: var(--navy-900);
    --primary-50: var(--blue-050);  --primary-100: var(--blue-100);
    --primary-200: var(--blue-200); --primary-400: var(--blue-400);
    --primary-500: var(--blue-600); --primary-600: var(--blue-600);
    --primary-700: var(--blue-700); --primary-800: var(--blue-800);
    --primary-900: var(--blue-900);
    --success-600: var(--success-text); --warning-700: var(--warning-text);
    --warning-500: var(--warning);      --danger-600: var(--danger);
    --danger-700: var(--danger-text);
    --info-600: var(--blue-600);
}

/* Dark theme override (branding/design-tokens.md). Applied when the html
   element carries data-theme="dark"; the app currently defaults to light. */
[data-theme="dark"] {
    color-scheme: dark;
    --page:#0F1620; --surface:#1A2432; --surface-2:#212E3F;
    --fg-1:#EDF1F7; --fg-2:#AEBBCE; --fg-3:#7E8EA6;
    --border-1:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16);
    --success-bg:rgba(47,174,102,.16); --warning-bg:rgba(240,165,0,.16);
    --danger-bg:rgba(224,62,75,.16);   --info-bg:rgba(0,155,223,.16);
    --success-text:#5BC98B; --warning-text:#F4BC45; --danger-text:#EC7A84;
    /* The lightest brand-blue tint is used as an "active/highlight" background
       across the app (filter tiles, as-of banners, selected rows). Retint it for
       dark so those panels become a subtle blue glow instead of a bright block. */
    --blue-050:rgba(0,155,223,.14); --blue-100:rgba(0,155,223,.20);

    /* Forensic category hues, lifted for the dark surface. The light values are
       chosen against #FFFFFF and go muddy on #1A2432, so both the rail hue and
       its text shade are re-stated here rather than reused. Text shades verified
       at 6:1 or better against --surface. */
    --fx-access:#6FA5F0;  --fx-access-t:#8FBCF7;
    --fx-account:#A98CF0; --fx-account-t:#BCA6F6;
    --fx-persist:#E483B8; --fx-persist-t:#EE9FC9;
    --fx-recon:#3FC7CE;   --fx-recon-t:#5FD8DE;
    --fx-exfil:#EFA05C;   --fx-exfil-t:#F2B274;
    --fx-impact:#E06B76;  --fx-impact-t:#F0868F;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; color-scheme: light; }

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--fg-1);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--fg-1); line-height: 1.25; margin: 0 0 var(--sp-3); }
h1 { font-size: var(--text-xl); font-weight: 700; }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: var(--text-md); font-weight: 600; }

p { margin: 0 0 var(--sp-3); }

a { color: var(--shield-blue); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--blue-700); text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.35em;
}

:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--radius-sm); }

.icon { vertical-align: -0.2em; flex-shrink: 0; }

/* ---------- App shell (sidebar + main) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--navy-900);
    color: var(--navy-100);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Shield ITSM logo (negative variant on the dark sidebar). The landscape
   SVG is a 2:1 lockup with generous internal padding. */
.brand-logo { display: block; width: 158px; height: auto; }
.auth-brand .brand-logo { width: 190px; margin: 0 auto; }

.brand-name {
    font-size: var(--text-md);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.01em;
}

.sidebar-product {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy-300);
    padding: var(--sp-2) var(--sp-4) 0;
}

.sidebar-nav { flex: 1; padding: var(--sp-3) var(--sp-2); overflow-y: auto; }

.nav-section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy-300);
    padding: var(--sp-3) var(--sp-2) var(--sp-1);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    color: var(--navy-100);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--shield-blue); color: #fff; }
.nav-link .icon { opacity: 0.9; }

.nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-pill);
    padding: 0.3em 0.55em;
}

.sidebar-footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-size: var(--text-sm);
}
.sidebar-user { color: #fff; font-weight: 600; margin-bottom: var(--sp-1); overflow-wrap: anywhere; }
.sidebar-footer .btn-signout {
    background: none;
    border: none;
    color: var(--navy-300);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
}
.sidebar-footer .btn-signout:hover { color: #fff; text-decoration: underline; }

.main {
    flex: 1;
    min-width: 0;
    /* Slightly tighter horizontal gutter reclaims width so the client tab bar
       stays single-line down to ~1366; vertical rhythm unchanged. */
    padding: var(--sp-6) var(--sp-5);
}
.main-inner { max-width: var(--content-max); margin: 0 auto; }
/* Data-dense pages (the report experience) use the full window width. */
.main-inner-full { max-width: none; }

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
/* Display heading per brand: uppercase, tight tracking, heavy weight. */
.page-header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.page-header .page-subtitle { color: var(--fg-3); margin: var(--sp-1) 0 0; }
/* Report type/scope under the report name — legible (secondary ink, larger),
   still subordinate to the name. */
.report-type { color: var(--fg-2); font-size: var(--text-md); font-weight: 600; margin: var(--sp-1) 0 0; }
/* Same value in the Reports list; capped width so long multi-baseline
   selections wrap to a second line instead of stretching the table. */
.report-type-cell { color: var(--fg-2); font-weight: 600; max-width: 280px; }

/* Mobile shell */
.sidebar-toggle { display: none; }

@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .sidebar { position: static; width: 100%; height: auto; }
    .sidebar-nav { display: none; padding-bottom: var(--sp-3); }
    .sidebar-footer { display: none; }
    .app-shell.nav-open .sidebar-nav,
    .app-shell.nav-open .sidebar-footer { display: block; }
    .sidebar-header { justify-content: flex-start; }
    .sidebar-toggle {
        display: block;
        margin-left: auto;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: var(--radius-md);
        color: var(--navy-100);
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--text-sm);
        cursor: pointer;
    }
    .main { padding: var(--sp-4); }
}

/* ---------- Client workspace header + tabs (Phase 10 IA) ---------- */
/* The client name + tab bar stick to the top on scroll (border+shadow only
   when stuck; the name condenses to reclaim vertical space). */
.client-header-sentinel { height: 1px; margin: 0; }
.client-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--page);
    margin-bottom: var(--sp-5);
    padding-top: var(--sp-2);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}
.client-header.stuck { box-shadow: 0 1px 0 var(--border-1), var(--shadow-xs); }
.client-header.stuck .client-title { font-size: 20px; margin-bottom: var(--sp-2); }
.client-title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    transition: font-size var(--dur-fast) var(--ease-out), margin-bottom var(--dur-fast) var(--ease-out);
}
.client-tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border-1);
    flex-wrap: wrap;
}
.client-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2);
    margin-bottom: -1px;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--fg-2);
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.client-tab:hover { color: var(--fg-1); text-decoration: none; border-bottom-color: var(--navy-200); }
.client-tab.active { color: var(--shield-blue); border-bottom-color: var(--shield-blue); }

/* Assess dropdown (grouped assessment workflow). Click to open; cross-fade + 8px lift. */
.tab-menu { position: relative; display: inline-flex; }
.tab-menu-trigger { cursor: pointer; background: none; font-family: inherit; }
.tab-menu-trigger .chevron, .tab-menu-trigger svg:last-of-type { transition: transform var(--dur-fast) var(--ease-out); }
.tab-menu-trigger[aria-expanded="true"] svg:last-of-type { transform: rotate(180deg); }
.tab-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 4px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.tab-menu.open .tab-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.tab-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px 12px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.tab-menu-item:hover, .tab-menu-item:focus-visible { background: var(--surface-2); color: var(--fg-1); text-decoration: none; outline: none; }
.tab-menu-item.active { color: var(--shield-blue); }

/* Below wide desktop, drop the tab icons (labels stay) so the 8-tab bar
   stays single-line down to ~1200; wraps gracefully below that. */
@media (max-width: 1200px) {
    .client-tabs .client-tab svg:first-child { display: none; }
    .tab-menu-item svg { display: none; }
}

/* Generic in-page tab bar (settings etc.) shares the same look. */
.tab-bar { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-1); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tab-bar .client-tab { margin-bottom: -1px; }

/* ---------- Value dashboard ---------- */
.value-hero-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (max-width: 800px) { .value-hero-grid { grid-template-columns: 1fr; } }
.value-hero-grid .card { margin-bottom: 0; }
.value-deltas { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.value-delta-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: var(--sp-1); }
.value-delta-value { font-size: var(--text-md); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.value-arrow { color: var(--fg-3); }
.value-narrative { font-size: var(--text-md); line-height: 1.65; margin-bottom: 0; max-width: 80ch; }

/* ---------- Overview / dashboard stat cards (big mono numerals per brand) ---------- */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.overview-grid .card { margin-bottom: 0; }
.overview-stat-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    margin-bottom: var(--sp-2);
}
.overview-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--fg-1);
    line-height: 1.1;
    margin-bottom: var(--sp-1);
}
.overview-stat-unit {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-3);
    margin-left: var(--sp-1);
}

/* ---------- Auth shell (login and onboarding screens) ---------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    background:
        radial-gradient(1000px 500px at 85% -10%, rgba(0, 155, 223, 0.10), transparent 60%),
        var(--page);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-6);
}
.auth-card-wide { max-width: 560px; }

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
/* One word since the PulseShield -> Pulse rename. The emphasis that used to
   sit on the "Shield" half (brand blue, weight 700) moves onto the whole
   wordmark, so the name keeps its weight on the auth card instead of
   deflating into something that reads as a subtitle. */
.auth-brand .brand-name { color: var(--blue-700); font-size: var(--text-lg); font-weight: 700; }

.auth-title { font-size: var(--text-xl); margin-bottom: var(--sp-1); }
.auth-subtitle { color: var(--fg-3); margin-bottom: var(--sp-5); }
.auth-footnote { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--fg-3); text-align: center; }

/* ---------- Forms (label above, 1px border, always-visible focus ring) ---------- */
.form-field { margin-bottom: var(--sp-4); }

.form-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-2);
    margin-bottom: var(--sp-1);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font: inherit;
    color: var(--fg-1);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--shield-blue);
    box-shadow: var(--shadow-glow);
}
.form-field input.input-validation-error,
.form-field select.input-validation-error {
    border-color: var(--danger);
}

/* App-wide styling of native form controls so bare <select>/<input type=date|time>
   match the design system everywhere (kept native — no JS dropdowns). Selects
   get a Lucide chevron; date/time popups follow the theme via color-scheme. */
select,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: var(--fg-1);
    background-color: var(--surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color-scheme: light dark;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
select {
    padding-right: 34px;
    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='%237A8AA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
select:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus {
    outline: none;
    border-color: var(--shield-blue);
    box-shadow: var(--shadow-glow);
}

.input-code {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    letter-spacing: 0.35em;
    text-align: center;
}

.field-help { display: block; font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--sp-1); }
/* Field label with a help icon beside it — keeps the icon on the label's line. */
.label-help { display: flex; align-items: center; margin-bottom: var(--sp-1); }
.label-help label { margin-bottom: 0; }
.field-error { display: block; font-size: var(--text-xs); color: var(--danger-text); margin-top: var(--sp-1); }

.form-errors { color: var(--danger-text); font-size: var(--text-sm); }
.form-errors ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.form-errors:empty { display: none; }

.form-check { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.form-check input { width: auto; }
.form-check label { margin: 0; font-weight: 500; }

/* Baseline options with an explanatory paragraph under each. */
.baseline-option { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-1); }
.baseline-option:last-child { border-bottom: none; }
.baseline-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.baseline-check { width: auto !important; flex: 0 0 auto; margin: 0; }
.baseline-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-3); cursor: pointer; margin: 0; }
.baseline-name { flex: 0 0 auto; white-space: nowrap; color: var(--fg-1); }
.baseline-count { color: var(--fg-3); font-size: var(--text-xs); margin-left: 4px; }
.baseline-summary { flex: 1; min-width: 0; color: var(--fg-2); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baseline-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--fg-2); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; padding: 2px 6px; }
.baseline-more:hover { color: var(--shield-blue); }
.baseline-about { margin: var(--sp-2) 0 0 calc(var(--sp-2) + 22px); color: var(--fg-2); font-size: var(--text-sm); line-height: 1.55; max-width: 80ch; }

/* Generic expander (Run-assessment More, collapsed callouts, collapsed forms).
   Reveal = cross-fade + 8px lift; collapse hides instantly. */
[data-expand-panel] { display: none; }
[data-expand].open [data-expand-panel] { display: block; animation: reveal-lift var(--dur-base) var(--ease-out); }
[data-expand].open [data-expand-trigger] { display: none; }
.xp-chevron { display: inline-flex; transition: transform var(--dur-fast) var(--ease-out); }
[data-expand].open [data-expand-toggle] .xp-chevron { transform: rotate(180deg); }
@keyframes reveal-lift { from { opacity: 0; transform: translateY(-8px); } }

/* Collapsed callout: one line (icon + lead + first sentence, ellipsis) + Details. */
.callout { border-left: 3px solid var(--navy-300); background: var(--surface-2); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); color: var(--fg-2); }
.callout-amber { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning-text); }
.callout-head { display: flex; align-items: center; gap: var(--sp-2); }
.callout-head > svg { flex: 0 0 auto; }
.callout-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callout-summary strong { color: inherit; }
.callout-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; padding: 0; opacity: 0.9; }
.callout-more:hover { opacity: 1; text-decoration: underline; }
.callout-detail { margin-top: var(--sp-2); line-height: 1.5; }
.callout-detail strong { color: inherit; }

/* Partial-coverage chip (Profiles table — no multi-line boxes in cells). */
.chip-partial { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--sp-2); padding: 1px 8px; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning-text); cursor: help; white-space: nowrap; }

.form-actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); }

/* Text-styled cancel/secondary action within a form-actions row. */
.btn-link {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: var(--fg-3); cursor: pointer; text-decoration: underline;
    transition: color var(--dur-fast) var(--ease-out);
}
.btn-link:hover { color: var(--fg-1); }

/* ---------- Notifications list (unread = brand dot + tinted row) ---------- */
.notif-cat { position: relative; }
.notif-dot {
    display: inline-block; width: 8px; height: 8px; margin-right: 8px;
    border-radius: 50%; background: var(--shield-blue); vertical-align: middle;
}
.notif-unread { background: var(--surface-2); }
.notif-unread .notif-title { font-weight: 600; color: var(--fg-1); }
.notif-read .notif-title { font-weight: 400; }
.notif-read td { color: var(--fg-3); }
.notif-read .notif-title { color: var(--fg-2); }

/* ---------- Buttons (verb-first; solid blue primary; press = .9 opacity;
              focus = 4px brand glow) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: var(--sp-2) var(--sp-4);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { opacity: 0.9; }
.btn:focus-visible { box-shadow: var(--shadow-glow); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--shield-blue); color: #fff; }
.btn-primary:hover { background: var(--blue-700); color: #fff; }

.btn-secondary { background: var(--surface); color: var(--fg-2); border-color: var(--border-2); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--navy-300); color: var(--fg-1); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-text); color: #fff; }

.btn-ghost { background: transparent; color: var(--shield-blue); }
.btn-ghost:hover { background: var(--blue-050); }

.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.btn-block { width: 100%; }

/* Inline text-styled button (a POST that reads as a link within prose). */
.btn-inline-link {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: var(--shield-blue); cursor: pointer; text-decoration: underline;
}
.btn-inline-link:hover { color: var(--blue-700); }

/* ---------- Cards (white, 1px border, 12px radius, subtle shadow — never
              borderless) ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-5);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-1);
}
.card-header h2, .card-header h3 { margin: 0; }
.card-body { padding: var(--sp-5); }
.card-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-1); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-1);
    padding: var(--sp-2) var(--sp-4);
    white-space: nowrap;
}
.table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--navy-050);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-2); }
.table .table-empty { text-align: center; color: var(--fg-3); padding: var(--sp-6); }

/* IDs, thumbprints, counts, timestamps — the mono face per brand. */
.mono, .table td code { font-family: var(--font-mono); }

/* Clickable rows (anchor-stretch pattern): a real anchor in the primary cell is
   stretched over the whole row via ::after, so the entire row is one link —
   free middle-click/ctrl-click new-tab and keyboard focus. Secondary controls
   sit above the stretched anchor so they stay independently clickable. */
tr.row-link { position: relative; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
tr.row-link:hover { background: var(--surface-2); }
.row-link-anchor { color: var(--fg-1); text-decoration: none; }
.row-link-anchor::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.row-link-anchor:focus-visible { outline: none; }
.row-link-anchor:focus-visible::after { box-shadow: inset var(--shadow-glow); border-radius: var(--radius-sm); }
tr.row-link:hover .row-link-anchor { color: var(--shield-blue); }
/* Keep in-row controls (delete, mark-read, other links) above the stretched anchor. */
tr.row-link .row-actions, tr.row-link a:not(.row-link-anchor), tr.row-link button, tr.row-link form { position: relative; z-index: 2; }
.row-actions { text-align: right; width: 1%; white-space: nowrap; }
.row-actions form { display: inline; }

/* Small destructive icon button (report delete): quiet until hovered. */
.btn-icon-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.btn-icon-delete:hover { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger); }
.btn-icon-delete:focus-visible { box-shadow: var(--shadow-glow); outline: none; }

/* ---------- Badges (muted status chips; pill radius reserved for tags) ---------- */
.badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-pill);
    padding: 0.35em 0.75em;
    white-space: nowrap;
}
.badge-neutral { background: var(--surface-2); color: var(--fg-2); }
.badge-primary { background: var(--blue-100); color: var(--blue-800); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }

/* ---------- Alerts ---------- */
.alert {
    display: block;
    border-radius: var(--radius-md);
    border: 1px solid;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
}
.alert-info { background: var(--info-bg); border-color: var(--blue-200); color: var(--blue-800); }
.alert-success { background: var(--success-bg); border-color: #BDE3CD; color: var(--success-text); }
.alert-warning { background: var(--warning-bg); border-color: #EFD9A2; color: var(--warning-text); }
.alert-danger { background: var(--danger-bg); border-color: #F3C2C7; color: var(--danger-text); }

/* ---------- Recurring-schedule day picker ---------- */
.day-picker { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.day-pill {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.day-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-pill span {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    padding: var(--sp-1) var(--sp-3);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.day-pill input:checked + span { background: var(--shield-blue); border-color: var(--shield-blue); color: #fff; }
.day-pill input:focus-visible + span { box-shadow: var(--shadow-glow); }
.day-pill:hover span { border-color: var(--navy-300); }

/* ---------- Onboarding fast path ---------- */
.fastpath {
    background: var(--blue-050);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}
.fastpath h3 { margin-bottom: var(--sp-2); }
.fastpath .setup-steps { margin-bottom: 0; }

.manual-fallback {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.manual-fallback > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--fg-2);
    font-size: var(--text-sm);
}
.manual-fallback > summary:hover { color: var(--fg-1); }
.manual-fallback[open] { padding-bottom: var(--sp-4); }

/* ---------- MFA enrollment specifics ---------- */
.setup-steps { padding-left: var(--sp-5); margin-bottom: var(--sp-5); }
.setup-steps li { margin-bottom: var(--sp-3); }

.qr-frame {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    margin: var(--sp-3) 0 var(--sp-2);
}
.qr-frame svg { display: block; width: 180px; height: 180px; }

.shared-key { font-size: var(--text-sm); color: var(--fg-2); }

.recovery-codes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-2);
    padding: 0;
    margin: 0 0 var(--sp-5);
}
.recovery-codes code {
    display: block;
    text-align: center;
    padding: var(--sp-2);
    font-size: var(--text-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
}

/* ---------- Findings / remediation (Phase 10 §5) ---------- */
.finding-handled td { opacity: 0.72; }           /* visual suppression only — data untouched */
.finding-handled td:hover { opacity: 1; }
.finding-editor { margin-top: var(--sp-2); }
.finding-editor > summary { cursor: pointer; color: var(--shield-blue); }
.finding-editor form { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); flex-wrap: wrap; }
.finding-editor select, .finding-editor input { font-size: var(--text-sm); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--fg-1); }
.finding-editor select { padding-right: 30px; }
.finding-editor input { min-width: 220px; }

/* ---------- Run log ---------- */
.run-log {
    background: var(--navy-900);
    color: var(--navy-100);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin: 0;
    max-height: 480px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.run-log:empty::before { content: "No output yet."; color: var(--navy-300); }

/* ---------- Arch gauge (shared _ArchGauge.cshtml): 270° arc open at the bottom,
              rounded caps, value dominating the centre. Replaces the old
              half-donut gauge and the linear fill bars. ---------- */
.arch-gauge { display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 auto; --ag-track: var(--navy-100); }
[data-theme="dark"] .arch-gauge { --ag-track: var(--border-2); }
.ag-ring { position: relative; }
.ag-ring svg { display: block; width: 100%; height: 100%; }
.gauge-sm .ag-ring { width: 64px; height: 64px; }
.gauge-md .ag-ring { width: 120px; height: 120px; }
.gauge-lg .ag-ring { width: 180px; height: 180px; }
/* Stroke = 6% of the gauge box: the viewBox is 100 units → 6 units renders as
   6% of the rendered size (sm ~4px, md ~7px, lg ~11px). */
.ag-track { fill: none; stroke: var(--ag-track); stroke-width: 6; stroke-linecap: round; }
.ag-value { fill: none; stroke-width: 6; stroke-linecap: round; }
.ag-animate { animation: arch-sweep var(--dur-slow) var(--ease-out); }
@keyframes arch-sweep { from { stroke-dasharray: 0 100; } }
@media (prefers-reduced-motion: reduce) { .ag-animate { animation: none; } }

/* Full-bleed overlay centred on the geometric centre of the circle (the open
   bottom does not shift the optical centre). Value only — sublabel lives below. */
.ag-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ag-stack { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
.ag-num, .ag-plain { font-family: var(--font-mono); font-weight: 600; color: var(--fg-1); line-height: 1; }
.ag-pct { font-size: 0.55em; font-weight: 600; }
.ag-grade { font-family: var(--font-body); font-weight: 800; color: var(--fg-1); line-height: 1; }
.ag-sub-num { font-family: var(--font-mono); font-weight: 600; color: var(--fg-2); margin-top: 3px; }
/* Sublabel sits below the SVG (never clipping the arc); 13px Jakarta muted. */
.ag-sublabel { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); margin-top: 4px; text-align: center; }
/* Primary numeral = 22% of the box; % unit stays 0.55em of the numeral. */
.gauge-sm .ag-num, .gauge-sm .ag-plain { font-size: 14px; }
.gauge-md .ag-num, .gauge-md .ag-plain { font-size: 26px; }
.gauge-lg .ag-num, .gauge-lg .ag-plain { font-size: 40px; }
/* Grade variant (lg): letter ~26% of the box, % beneath ~40% of the letter. */
.gauge-lg .ag-grade { font-size: 47px; }
.gauge-lg .ag-sub-num { font-size: 19px; }
.gauge-md .ag-grade { font-size: 26px; }
.gauge-md .ag-sub-num { font-size: 13px; }
.donut-row { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

/* ---------- Pass-rate trend chart (data-viz-spec: brand blue line, quiet
              hairline grid, mono labels, gradient wash) ---------- */
.trend-wrap { position: relative; }

.trend-grid { stroke: var(--border-1); stroke-width: 1; }
.trend-tick { fill: var(--fg-2); font-size: 13px; font-family: var(--font-mono); }
.trend-area { fill: url(#trend-fill); opacity: 0.10; }   /* the one approved gradient, low opacity */
.trend-line { fill: none; stroke: var(--shield-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--shield-blue); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.trend-dot:focus-visible { outline: none; stroke: var(--blue-200); stroke-width: 3; }
.trend-crosshair { stroke: var(--navy-200); stroke-width: 1; pointer-events: none; }
.trend-endlabel { fill: var(--fg-2); font-size: 13px; font-weight: 600; font-family: var(--font-mono); }

.trend-tooltip {
    position: absolute;
    top: 0;
    background: var(--navy-900);
    color: var(--navy-050);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-2);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.trend-tooltip strong { color: #fff; }

/* ============================================================
   Enhanced report view (Phase 11) — summary band, filter tiles,
   findings list + reading pane. Brand tokens throughout; severity
   colors always ride WITH text labels (never color-alone).
   ============================================================ */

/* Summary band */
.report-summary-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-6);
    align-items: start;
}
@media (max-width: 800px) { .report-summary-grid { grid-template-columns: 1fr; } }
.report-posture { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.report-delta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.delta-pill {
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}
.delta-up { background: var(--success-bg); color: var(--success-text); }
.delta-down { background: var(--danger-bg); color: var(--danger-text); }
.delta-flat { background: var(--surface-2); color: var(--fg-2); }
.report-drift-line { display: flex; gap: var(--sp-2); }

.framing-toggle {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    padding: 2px;
    margin-bottom: var(--sp-3);
}
.framing-btn {
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--fg-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.framing-btn.active { background: var(--surface); color: var(--shield-blue); box-shadow: var(--shadow-xs); }
.narrative-text { font-size: var(--text-md); line-height: 1.65; margin-bottom: var(--sp-3); max-width: 70ch; }
.report-meta { color: var(--fg-3); margin-bottom: 0; }

.export-form { display: inline-flex; gap: var(--sp-2); align-items: center; }
.export-framing {
    font: inherit; font-size: var(--text-xs); color: var(--fg-2);
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-2); background: var(--surface);
}

/* Filter tiles */
.report-explorer { padding: var(--sp-5); }
.report-tiles {
    display: flex;
    gap: var(--sp-6);
    flex-wrap: wrap;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-1);
    margin-bottom: var(--sp-3);
}
.ftile-group-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    margin-bottom: var(--sp-2);
}
.ftile-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ftile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 84px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ftile:hover:not(:disabled) { border-color: var(--navy-300); }
.ftile:disabled { opacity: 0.45; cursor: default; }
.ftile.active { border-color: var(--shield-blue); background: var(--blue-050); box-shadow: inset 0 0 0 1px var(--shield-blue); }
.ftile-count { font-size: var(--text-xl); font-weight: 600; color: var(--fg-1); line-height: 1.1; }
.ftile-label { font-size: var(--text-sm); color: var(--fg-2); font-weight: 600; }
.ftile.st-failed .ftile-count { color: var(--danger-text); }
.ftile.st-passed .ftile-count { color: var(--success-text); }

/* Severity bar list (labeled; color reinforces, text identifies) */
.ftile-group-sev { min-width: 260px; }
.sev-bar-row {
    display: grid;
    grid-template-columns: 86px 1fr 34px;
    gap: var(--sp-2);
    align-items: center;
    width: 100%;
    font: inherit;
    font-size: var(--text-sm);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 2px var(--sp-2);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sev-bar-row:hover:not(:disabled) { background: var(--surface-2); }
.sev-bar-row:disabled { opacity: 0.45; cursor: default; }
.sev-bar-row.active { border-color: var(--shield-blue); background: var(--blue-050); }
.sev-bar-label { text-align: left; font-weight: 600; color: var(--fg-2); }
.sev-bar-track { display: block; height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.sev-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.sev-bar-count { text-align: right; color: var(--fg-2); }
.sev-critical { background: #AC2733; }
.sev-high { background: var(--danger); }
.sev-medium { background: var(--warning); }
.sev-low { background: var(--navy-400); }
.sev-info { background: var(--navy-300); }
.sev-other { background: var(--navy-200); }

/* Severity chips in rows/pane (text label + hue) */
.sev-chip {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-pill);
    padding: 0.3em 0.65em;
    color: #fff;
}
.sev-chip.sev-medium { color: var(--navy-900); }
.sev-chip.sev-low, .sev-chip.sev-info, .sev-chip.sev-other { color: #fff; }
/* Muted severity chip on non-open rows (passed/handled/skipped): keep the label,
   drop the alarm colour. Placed last so it wins over the hue rules above. */
.sev-chip.sev-muted { background: var(--surface-2); color: var(--fg-2); }

/* Chips bar */
.report-chipbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* report.js toggles this with `bar.hidden = !any`, and display:flex above beats
   the UA [hidden] rule — so with no active filters the bar stayed on screen as
   an empty strip holding its bottom margin. */
.report-chipbar[hidden] { display: none; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--blue-800);
    background: var(--blue-100);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.35em 0.75em;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--blue-200); }
.chip-clear { background: var(--surface-2); color: var(--fg-2); }
.chip-clear:hover { background: var(--navy-100); }

/* Toolbar + split layout */
.report-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); gap: var(--sp-3); }
.report-sort {
    font: inherit; font-size: var(--text-sm); color: var(--fg-1);
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-2); background: var(--surface); margin-left: var(--sp-1);
}
.report-split {
    display: grid;
    /* Wide screens: bounded list, the reading pane takes the remaining width. */
    grid-template-columns: minmax(340px, 480px) 1fr;
    gap: var(--sp-5);
    align-items: start;
}
/* Narrow screens: single column; once a test is selected, the pane takes
   over with a back-to-list button (set by report.js). */
@media (max-width: 900px) {
    .report-split { grid-template-columns: 1fr; }
    .report-split.has-selection .test-list,
    .report-split.has-selection .report-toolbar { display: none; }
    .reading-pane { position: static; max-height: none; }
}
.pane-back { display: none; margin-bottom: var(--sp-3); }
@media (max-width: 900px) { .pane-back { display: inline-flex; } }

/* Findings list — designed to read well narrow; titles wrap. */
.test-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.tl-row {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--navy-050);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: var(--surface-2); }
.tl-row:focus-visible { outline: none; box-shadow: inset var(--shadow-glow); }
.tl-row.tl-active { background: var(--blue-050); box-shadow: inset 3px 0 0 var(--shield-blue); }
.tl-row.tl-handled { opacity: 0.62; }        /* visual de-emphasis only — data untouched */
.tl-row.tl-handled:hover, .tl-row.tl-handled.tl-active { opacity: 1; }
.tl-top { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-1); }
.tl-id { font-size: var(--text-sm); color: var(--fg-2); font-weight: 600; }
.tl-title { font-size: var(--text-base); color: var(--fg-1); line-height: 1.45; overflow-wrap: anywhere; }
.tl-empty { padding: var(--sp-5); text-align: center; }

.drift-chip {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-pill);
    padding: 0.3em 0.65em;
}
.drift-reg { background: var(--danger-bg); color: var(--danger-text); border: 1px dashed var(--danger); }
.drift-res { background: var(--success-bg); color: var(--success-text); border: 1px dashed var(--success); }
.res-chip {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-pill);
    padding: 0.3em 0.65em;
    background: var(--surface-2);
    color: var(--fg-2);
    border: 1px solid var(--border-1);
}
.res-chip.res-open { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
/* Handled states (remediated / accepted risk / false positive) wear BRAND
   BLUE (#009BDF) per Part A — navy ink on the blue keeps small text AA. */
.res-chip.res-handled { background: var(--shield-blue); color: var(--navy-900); border-color: transparent; }
.ftile.st-handled .ftile-count { color: var(--blue-700); }

/* Reading pane */
.reading-pane {
    position: sticky;
    top: var(--sp-4);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: var(--sp-5) var(--sp-6);
}
.pane-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    min-height: 240px;
    color: var(--fg-3);
    text-align: center;
}
/* The [hidden] attribute must always win — display:flex above was overriding
   it, which kept the "Select a test…" placeholder on screen after selection. */
.pane-empty[hidden] { display: none; }
.pane-empty p { max-width: 34ch; margin: 0; font-size: var(--text-base); }
.pane-head { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pane-title { font-size: var(--text-xl); font-weight: 700; line-height: 1.3; margin-bottom: var(--sp-2); }
.pane-drift-note {
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}
.drift-reg-note { background: var(--danger-bg); color: var(--danger-text); }
.drift-res-note { background: var(--success-bg); color: var(--success-text); }
.pane-res {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
}
.pane-res-state { margin-bottom: var(--sp-2); }
.pane-res-form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pane-res-form select, .pane-res-form input {
    font: inherit; font-size: var(--text-base); color: var(--fg-1);
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-2); background-color: var(--surface);
}
.pane-res-form select { padding-right: 30px; }
.pane-res-form input { flex: 1; min-width: 180px; }
.pane-section { margin-bottom: var(--sp-4); }
.pane-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    margin-bottom: var(--sp-2);
}
.pane-md { font-size: var(--text-base); line-height: 1.65; }
.pane-md p { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.pane-md h4 { font-size: var(--text-base); font-weight: 700; margin: var(--sp-3) 0 var(--sp-1); }
.md-table-wrap { overflow-x: auto; margin-bottom: var(--sp-2); }
.md-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.md-table th {
    text-align: left; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--fg-3); background: var(--surface-2);
    border-bottom: 1px solid var(--border-1); padding: var(--sp-1) var(--sp-2); white-space: nowrap;
}
.md-table td { border-bottom: 1px solid var(--navy-050); padding: var(--sp-1) var(--sp-2); vertical-align: top; font-family: var(--font-mono); }
.md-pass { color: var(--success-text); font-weight: 700; }
.md-fail { color: var(--danger-text); font-weight: 700; }
.pane-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.pane-notrun { background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.report-toolbar-controls { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.toggle-notrun { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
.toggle-notrun input { width: auto; margin: 0; }
.activity-filters { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.activity-filters .form-field { min-width: 130px; }

/* Guided fix (remediation library) in the reading pane */
.pane-fix { border: 1px solid var(--blue-200); border-radius: var(--radius-md); background: var(--blue-050); padding: var(--sp-3) var(--sp-4); }
.pane-fix-head { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pane-fix-head .pane-section-title { margin-bottom: 0; }
.pane-fix-warn { color: var(--warning-text); font-weight: 600; margin-bottom: var(--sp-2); }
.pane-fix-fills { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.pane-fill-list { margin: var(--sp-1) 0 var(--sp-2); padding-left: var(--sp-4); font-size: var(--text-sm); }
.pane-fill-list li { margin-bottom: 2px; }
.pane-fix-code { margin: var(--sp-2) 0; }
.pane-fix-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* ---------- Utilities ---------- */
/* Muted = fg-2 (not fg-3): most muted text is small (13–14px), where fg-3
   (#7A8AA3) fails WCAG AA. fg-3 is reserved for 16px+/decorative via .text-faint. */
.text-muted { color: var(--fg-2); }
.text-faint { color: var(--fg-3); }
.text-danger { color: var(--danger-text); }
.text-success { color: var(--success-text); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Compliance crosswalk (framework lens + attestations) ---- */
.framework-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.framework-tab {
    display: inline-block; padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-1); border-radius: var(--radius-md);
    background: var(--surface); color: var(--fg-2); font-size: var(--text-sm);
    font-weight: 600; text-decoration: none;
}
.framework-tab:hover { border-color: var(--border-2); color: var(--fg-1); }
.framework-tab.active { background: var(--shield-blue); border-color: var(--shield-blue); color: #fff; }
.compliance-tiles { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.compliance-tile {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 110px;
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-1); border-radius: var(--radius-md);
    background: var(--surface-2);
}
.compliance-tile .tile-count { font-size: var(--text-xl); font-weight: 700; color: var(--fg-1); }
.compliance-tile .tile-label { font-size: var(--text-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
/* Clickable filter tiles (button elements) share the tile look with affordance. */
button.compliance-tile { cursor: pointer; text-align: left; font: inherit; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
button.compliance-tile:hover { border-color: var(--border-2); }
button.compliance-tile:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
button.compliance-tile.active { border-color: var(--shield-blue); box-shadow: inset 0 0 0 1px var(--shield-blue); background: var(--blue-050, var(--surface-2)); }
button.compliance-tile.active .tile-label { color: var(--shield-blue); }
.compliance-tile-static { cursor: default; }
.compliance-filterbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.control-details summary { cursor: pointer; font-weight: 600; color: var(--fg-1); }
.control-details[open] summary { margin-bottom: var(--sp-2); }
.control-body { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 2px solid var(--border-1); }
.control-h { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin: var(--sp-3) 0 var(--sp-1); }
.attest-form { margin-top: var(--sp-2); max-width: 560px; }
.attest-fields { display: flex; gap: var(--sp-3); }

/* ---- Conditional Access coverage grid ---- */
.ca-asof {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
    background: var(--blue-050); border: 1px solid var(--blue-200);
    border-radius: var(--radius-md); color: var(--fg-1); font-size: var(--text-sm);
}
.ca-asof svg { color: var(--shield-blue); flex-shrink: 0; }

/* ---------- Help pages (topic library + topic body) ---------- */
.help-crumb { font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--sp-1); display: flex; gap: 6px; align-items: center; }
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.help-topic-card {
    display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3);
    border: 1px solid var(--border-1); border-radius: var(--radius-md);
    background: var(--surface); text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.help-topic-card:hover { border-color: var(--shield-blue); background: var(--surface-2); text-decoration: none; }
.help-topic-card[hidden] { display: none; }
.help-topic-title { font-weight: 600; color: var(--fg-1); font-size: var(--text-sm); }
.help-topic-summary { font-size: var(--text-xs); color: var(--fg-2); line-height: 1.5; }
.help-area[hidden] { display: none; }
.help-body { max-width: 68ch; color: var(--fg-1); font-size: var(--text-base); line-height: 1.65; }
.help-body h2 { font-size: var(--text-md); margin: var(--sp-5) 0 var(--sp-2); }
.help-body h2:first-child { margin-top: 0; }
.help-body h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin: var(--sp-4) 0 var(--sp-2); }
.help-body p { margin: 0 0 var(--sp-3); }
.help-body ul, .help-body ol { margin: 0 0 var(--sp-3); padding-left: 22px; }
.help-body li { margin-bottom: 6px; }
.help-body strong { color: var(--fg-1); }
.help-body code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm); }

/* ---------- Help menu (sidebar; same weight as nav items, opens upward) ---------- */
.help-menu { width: 100%; }
.help-menu-trigger {
    width: 100%; background: none; border: none; cursor: pointer; font: inherit;
    font-size: var(--text-sm); font-weight: 500; text-align: left;
}
.help-menu-trigger svg:last-child { margin-left: auto; opacity: .7; }
.help-menu .help-menu-panel { top: auto; bottom: calc(100% + 4px); left: 0; min-width: 210px; }
.help-menu-version { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border-1); font-size: var(--text-xs); color: var(--fg-3); }
/* The narrow-viewport rule that hides tab-menu icons must not strip the help menu. */
@media (max-width: 1200px) { .help-menu-panel .tab-menu-item svg { display: inline-block; } }

/* ---------- Context-help popovers (_HelpIcon partial) ---------- */
.help-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.help-btn { background: none; border: none; padding: 2px; margin: 0 0 0 6px; cursor: pointer; color: var(--fg-3); display: inline-flex; line-height: 0; border-radius: 50%; transition: color var(--dur-fast) var(--ease-out); }
.help-btn:hover { color: var(--fg-2); }
.help-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.help-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 300;
    width: max-content; max-width: 300px;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: var(--sp-3);
    /* Reset inherited heading styling — the icon often sits inside an h1. */
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; line-height: 1.5;
    color: var(--fg-2); text-align: left; text-transform: none; letter-spacing: normal; white-space: normal;
    animation: reveal-lift var(--dur-base) var(--ease-out);
}
.help-pop[hidden] { display: none; }
.help-pop-lead { font-weight: 700; color: var(--fg-1); }
.help-pop-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: var(--text-xs); margin-top: 2px; }
.help-pop-right { left: auto; right: 0; }
.help-pop-up { top: auto; bottom: calc(100% + 8px); }
@media (prefers-reduced-motion: reduce) { .help-pop { animation: none; } }

/* ---------- CA policy slide-over (Clients/ConditionalAccess) ---------- */
.ca-pol-link { background: none; border: none; padding: 0; font: inherit; color: var(--shield-blue); cursor: pointer; text-align: left; }
.ca-pol-link:hover { text-decoration: underline; }
.ca-slideover { position: fixed; inset: 0; z-index: 200; }
.ca-slideover-scrim { position: absolute; inset: 0; background: rgba(15, 22, 32, .45); }
.ca-slideover-panel { position: absolute; top: 0; right: 0; height: 100%; width: 480px; max-width: 92vw; background: var(--surface); box-shadow: var(--shadow-lg); overflow-y: auto; padding: var(--sp-5); outline: none; animation: reveal-lift var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ca-slideover-panel { animation: none; } }
.ca-slideover-close { position: absolute; top: var(--sp-3); right: var(--sp-3); background: none; border: none; color: var(--fg-2); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.ca-slideover-close:hover { background: var(--surface-2); color: var(--fg-1); }
.ca-panel-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-right: 32px; }
.ca-panel-name { margin: 0; font-size: var(--text-lg); }
.ca-panel-dates { font-size: var(--text-xs); color: var(--fg-3); margin: 4px 0 0; }
.ca-panel-asof { font-size: var(--text-xs); color: var(--fg-3); margin: 2px 0 var(--sp-4); }
.ca-panel-sec { border-top: 1px solid var(--border-1); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.ca-panel-sec h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin: 0 0 var(--sp-2); }
.ca-panel-list { margin: 0; padding-left: 18px; font-size: var(--text-sm); color: var(--fg-1); }
.ca-panel-list li { margin-bottom: 3px; }
.ca-panel-excl { margin-top: var(--sp-2); border-left: 3px solid var(--warning); background: var(--warning-bg); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }
.ca-panel-excl .ca-panel-list { color: var(--warning-text); margin-top: 4px; }
.ca-panel-flag { display: flex; gap: var(--sp-2); align-items: baseline; margin-bottom: var(--sp-2); flex-wrap: wrap; }

/* ---------- Users master-detail (Clients/Users) ---------- */
.userx { display: grid; grid-template-columns: 340px 1fr; padding: 0; overflow: hidden; }
.userx-list { display: flex; flex-direction: column; border-right: 1px solid var(--border-1); min-height: 560px; max-height: calc(100vh - 200px); background: var(--surface); }
.userx-search { display: flex; gap: var(--sp-2); padding: var(--sp-4); border-bottom: 1px solid var(--border-1); }
/* Fix 3 (Users only): the filter field had no token styling (browser-default small).
   Match the app's standard input sizing — base-size text, comfortable padding, the
   token border/radius/focus ring. The "Risky only" button stretches to the same height. */
.userx-search input {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    color: var(--fg-1);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.userx-search input:focus { outline: none; border-color: var(--shield-blue); box-shadow: var(--shadow-glow); }
.userx-search input::placeholder { color: var(--fg-3); }
.userx-riskonly { flex-shrink: 0; font: inherit; font-size: var(--text-xs); font-weight: 600; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-1); background: var(--surface); color: var(--fg-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.userx-riskonly:hover { border-color: var(--danger); color: var(--danger-text); }
.userx-riskonly.active { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; }
.userx-items { flex: 1; overflow-y: auto; padding: var(--sp-2) 0; }
.userx-items:focus-visible { outline: 2px solid var(--shield-blue); outline-offset: -2px; }
.userx-item { display: flex; width: 100%; text-align: left; gap: 12px; align-items: center; padding: 10px var(--sp-4); background: none; border: none; border-left: 3px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.userx-item:hover { background: var(--surface-2); }
.userx-item.selected { background: var(--surface-2); border-left-color: var(--shield-blue); }
/* The button's display:flex overrides the [hidden] UA rule — restore hiding so filtering works. */
.userx-item[hidden] { display: none; }
.userx-pinned { margin-bottom: var(--sp-2); border-bottom: 1px solid var(--border-1); padding-top: 12px; padding-bottom: 14px; }
.userx-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: hsl(var(--ux-hue) 60% 92%); color: hsl(var(--ux-hue) 50% 40%); }
[data-theme="dark"] .userx-av { background: hsl(var(--ux-hue) 32% 24%); color: hsl(var(--ux-hue) 66% 74%); }
.userx-av-inv { background: var(--blue-050); color: var(--shield-blue); }
[data-theme="dark"] .userx-av-inv { background: rgba(0, 155, 223, .16); }
.userx-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.userx-name { font-weight: 600; color: var(--fg-1); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userx-upn { font-size: 12.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userx-chips { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* Fix 1 (Security sub-pages only, scoped to [data-md-root]): list titles match the
   triage-feed finding-title size (--text-base, as .sec-feed-title inherits), and the
   lead-reason line (.userx-upn here) clamps to 2 lines — title + 2 reason lines = 3.
   Rows top-align with a touch more vertical padding so 3-line and short rows balance. */
[data-md-root] .userx-item { align-items: flex-start; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
[data-md-root] .userx-name { font-size: var(--text-base); }
[data-md-root] .userx-upn {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Fix 2 (Users tab only, scoped to [data-userx]): bump both list lines ~10% for
   readability (name 15 → 16.5, UPN 12.5 → 13.75). Truncation/layout unchanged. */
[data-userx] .userx-name { font-size: 16.5px; }
[data-userx] .userx-upn { font-size: 13.75px; }
.userx-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.userx-dot-off { background: var(--fg-3); opacity: .55; }
.userx-nomatch { padding: var(--sp-5) var(--sp-4); color: var(--fg-2); font-size: var(--text-sm); text-align: center; }

/* ---- Sort + audience row (Users list) ---- */
/* The search row's rule was the separator between controls and list; with the
   sort row, count and hint below it, the separator moves to the list itself.
   Scoped to [data-userx] because the Security pages reuse .userx-items. */
[data-userx] .userx-search { border-bottom: none; padding-bottom: var(--sp-3); }
[data-userx] .userx-items { border-top: 1px solid var(--border-1); }
.userx-tools { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--sp-4); }
.userx-tools-row { display: flex; align-items: center; gap: 6px; }
.userx-tools-l { flex: 0 0 auto; font-size: var(--text-xs); font-weight: 600; color: var(--fg-3); }
.userx-sortsel {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--text-xs); font-weight: 600;
    color: var(--fg-1); background: var(--surface); border: 1px solid var(--border-1);
    border-radius: var(--radius-md); padding: 5px 8px; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.userx-sortsel:hover { border-color: var(--border-2); }
.userx-sortsel:focus { outline: none; border-color: var(--shield-blue); box-shadow: var(--shadow-glow); }
.userx-aud { display: flex; width: 100%; border: 1px solid var(--border-1); border-radius: var(--radius-md); overflow: hidden; }
.userx-aud-btn {
    flex: 1 1 0; text-align: center;
    font: inherit; font-size: var(--text-xs); font-weight: 600; padding: 5px 9px;
    background: var(--surface); color: var(--fg-2); border: none; border-left: 1px solid var(--border-1);
    cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.userx-aud-btn:first-child { border-left: none; }
.userx-aud-btn:hover { background: var(--surface-2); color: var(--fg-1); }
.userx-aud-btn.active { background: var(--shield-blue); color: #fff; }
.userx-count { margin: 6px var(--sp-4) var(--sp-3); font-size: var(--text-xs); color: var(--fg-3); }
.userx-hint { margin: -6px var(--sp-4) var(--sp-3); font-size: var(--text-xs); color: var(--fg-3); line-height: 1.4; }

/* Last-seen age chip. Present in the markup at all times so the row height is
   stable, but only revealed while a last-sign-in sort is active — you should be
   able to read the value you ordered by, and not carry it the rest of the time. */
.userx-seen { display: none; font-size: 11px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.userx-showseen .userx-seen { display: inline; }
.userx-seen-never { color: var(--warning-text); }
.userx-detail { padding: var(--sp-6) 40px; overflow-y: auto; max-height: calc(100vh - 200px); animation: reveal-lift var(--dur-base) var(--ease-out); }
.userx-back { display: none; }
.chip-risk { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); background: var(--danger-bg); color: var(--danger-text); }

/* ---- Redesigned user detail pane (comfortable density, capped reading width) ---- */
.ux-detail { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 760px; }
/* 760px is a reading measure, right for the Details view's prose and chips and
   too narrow for the two data-dense panes: the detail column is ~980px wide, so
   the sign-in and activity views were leaving a fifth of it empty while their
   facet lists wrapped. Widen only while one of those panes is showing, so the
   Details view keeps its comfortable line length. Degrades to 760px wherever
   :has() is unsupported, which is merely the previous behaviour. */
.ux-detail:has(> [data-view="signins"]:not([hidden])),
.ux-detail:has(> [data-view="activity"]:not([hidden])) { max-width: none; }
/* display:flex overrides the [hidden] UA rule — restore so only the selected pane shows. */
.userx-pane[hidden] { display: none; }

.ux-hero { display: flex; gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border-1); }
.ux-avatar {
    flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 25px; letter-spacing: .02em;
    background: hsl(var(--ux-hue) 62% 93%); color: hsl(var(--ux-hue) 52% 40%);
    box-shadow: inset 0 0 0 1px hsl(var(--ux-hue) 45% 82%);
}
[data-theme="dark"] .ux-avatar {
    background: hsl(var(--ux-hue) 34% 22%); color: hsl(var(--ux-hue) 68% 74%);
    box-shadow: inset 0 0 0 1px hsl(var(--ux-hue) 28% 36%);
}
.ux-hero-main { min-width: 0; }
.ux-hero-name { margin: 0 0 5px; font-size: var(--text-xl); line-height: 1.2; }
.ux-upn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: none; border: none; padding: 0; cursor: copy; color: var(--fg-2); font-size: var(--text-sm); }
.ux-upn .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-upn svg { flex: 0 0 auto; opacity: .5; }
.ux-upn:hover { color: var(--shield-blue); }
.ux-upn:hover svg { opacity: 1; }
.ux-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); align-items: center; }
.ux-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); }
.ux-status-on { background: var(--success-bg); color: var(--success-text); }
.ux-status-off { background: var(--surface-2); color: var(--fg-2); }

.ux-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1px; background: var(--border-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.ux-fact { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-4) var(--sp-3); background: var(--surface); }
.ux-fact-n { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--fg-1); line-height: 1; }
.ux-fact-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }

.ux-risk { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--radius-md); background: var(--danger-bg); border-left: 3px solid var(--danger); }
.ux-risk-icon { color: var(--danger-text); flex: 0 0 auto; display: flex; }
.ux-risk-title { font-weight: 700; color: var(--danger-text); font-size: var(--text-sm); text-transform: capitalize; }
.ux-risk-sub { font-size: var(--text-xs); color: var(--fg-2); margin-top: 3px; }

.ux-card { border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.ux-card-accent { border-left: 3px solid var(--warning); }
.ux-card-head { display: flex; align-items: center; gap: 8px; padding: 11px var(--sp-4); background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); border-bottom: 1px solid var(--border-1); }
.ux-card-head svg { color: var(--fg-3); flex: 0 0 auto; }
.ux-card-count { margin-left: auto; font-family: var(--font-mono); font-weight: 700; color: var(--fg-1); font-size: var(--text-sm); }
.ux-card-body { padding: var(--sp-4); }
.ux-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ux-chips .badge { padding: 4px 10px; }

.ux-cov-stats { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ux-cov-stat { flex: 1; text-align: center; padding: var(--sp-4) var(--sp-3); border-radius: var(--radius-md); background: var(--surface-2); }
.ux-cov-stat-warn { background: var(--warning-bg); }
.ux-cov-n { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--fg-1); line-height: 1; }
.ux-cov-stat-warn .ux-cov-n { color: var(--warning-text); }
.ux-cov-l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-top: 6px; }
.ux-caption { font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--sp-2); line-height: 1.5; }
.ux-pol-group { margin-top: var(--sp-4); }
.ux-pol-label { display: block; font-size: 11px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.ux-pol-list { display: flex; flex-wrap: wrap; gap: 6px; }

.userx-pol { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-1); font-size: var(--text-xs); color: var(--fg-1); text-decoration: none; }
.userx-pol:hover { border-color: var(--shield-blue); color: var(--shield-blue); }
.userx-pol-state { color: var(--fg-3); font-size: 11px; }
.userx-pol-warn { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
.userx-pol-warn:hover { border-color: var(--warning); color: var(--warning-text); }

.ux-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--fg-3); border-top: 1px solid var(--border-1); padding-top: var(--sp-3); }
.ux-meta-k { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; flex: 0 0 auto; }
.ux-meta-v { background: none; border: none; padding: 0; cursor: copy; color: var(--fg-2); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; }
.ux-meta-v:hover { color: var(--shield-blue); }

@media (max-width: 900px) {
    .userx { grid-template-columns: 1fr; }
    .userx-list { max-height: none; border-right: none; }
    .userx-detail { display: none; }
    .userx.userx-showdetail .userx-list { display: none; }
    .userx.userx-showdetail .userx-detail { display: block; max-height: none; }
    .userx-back { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--text-sm); color: var(--shield-blue); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--sp-3); }
}
.ca-tiles { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ca-tile { display: flex; flex-direction: column; min-width: 90px; }
.ca-tile-n { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; }
.ca-tile-l { font-size: var(--text-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.ca-viewtabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ca-viewtab {
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-1); border-radius: var(--radius-md);
    background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.ca-viewtab:hover { border-color: var(--border-2); color: var(--fg-1); }
.ca-viewtab.active { background: var(--shield-blue); border-color: var(--shield-blue); color: #fff; }

.ca-grid { table-layout: fixed; }
.ca-grid th { white-space: normal; vertical-align: bottom; }
.ca-grid .ca-aud-head { width: 190px; }
.ca-grid td.ca-cell { vertical-align: top; border-left: 1px solid var(--border-1); }
.ca-aud-label { font-weight: 600; color: var(--fg-1); }
.ca-aud-sub { font-size: var(--text-xs); color: var(--fg-3); }
.ca-cell-enforced { background: rgba(0, 155, 223, 0.07); }
.ca-cell-unenforced { background: var(--warning-bg); }
.ca-cell-none { background: var(--surface); }

/* ---- What-If verdict grid ---- */
.wi-grid td.wi-cell { vertical-align: middle; text-align: center; border-left: 1px solid var(--border-1); }
.wi-cell.wi-success { background: var(--success-bg); }
.wi-cell.wi-warning { background: var(--warning-bg); }
.wi-cell.wi-danger { background: var(--danger-bg); }
.wi-cell.wi-none { background: var(--surface); }
.wi-verdict { font: inherit; font-size: var(--text-sm); font-weight: 600; background: none; border: none; cursor: pointer; color: var(--fg-1); padding: 4px 8px; border-radius: var(--radius-sm); }
.wi-verdict:hover { text-decoration: underline; }
.wi-verdict-static { cursor: default; }
.wi-cell.wi-danger .wi-verdict { color: var(--danger-text); }
.wi-cell.wi-warning .wi-verdict { color: var(--warning-text); }
.wi-cell.wi-success .wi-verdict { color: var(--success-text); }
.ca-swatch.wi-success { background: var(--success-bg); }
.ca-swatch.wi-warning { background: var(--warning-bg); }
.ca-swatch.wi-danger { background: var(--danger-bg); }
.wi-drill-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.wi-drill-list li { padding: 8px 0; border-bottom: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 2px; }
.wi-drill-list a { font-weight: 600; }
.wi-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.wi-sum { padding: var(--sp-4) var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border-1); text-align: center; }
.wi-sum.wi-success { background: var(--success-bg); border-color: transparent; }
.wi-sum.wi-warning { background: var(--warning-bg); border-color: transparent; }
.wi-sum.wi-danger { background: var(--danger-bg); border-color: transparent; }
.wi-sum-n { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--fg-1); line-height: 1; }
.wi-sum-d { font-size: 16px; color: var(--fg-3); }
.wi-sum-l { font-weight: 600; font-size: var(--text-sm); margin-top: 6px; }
.wi-sum-q { font-size: var(--text-xs); color: var(--fg-3); margin-top: 2px; }
.wi-scenario { padding: 8px 0; border-bottom: 1px solid var(--border-1); }
.wi-scenario summary { cursor: pointer; font-size: var(--text-sm); color: var(--fg-1); }
.wi-userchips { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.wi-chip { font-size: var(--text-xs); padding: 5px 10px; border-radius: var(--radius-sm); border-left: 3px solid var(--border-2); background: var(--surface-2); color: var(--fg-2); }
.wi-chip strong { color: var(--fg-1); }
.wi-chip-0 { border-left-color: var(--success); background: var(--success-bg); color: var(--success-text); }
.wi-chip-0 strong { color: var(--success-text); }
.wi-chip-1 { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning-text); }
.wi-chip-1 strong { color: var(--warning-text); }
.wi-chip-2 { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger-text); }
.wi-chip-2 strong { color: var(--danger-text); }
.ca-none { color: var(--fg-3); }
.ca-pol { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: 2px; }
.ca-pol-name { font-size: var(--text-xs); color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.ca-state {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: 0 5px;
    border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0;
}
.ca-state-enabled { background: var(--success-bg); color: var(--success-text); }
.ca-state-report { background: var(--warning-bg); color: var(--warning-text); }
.ca-state-disabled { background: var(--navy-100); color: var(--fg-3); }
.ca-state-unknown { background: var(--navy-100); color: var(--fg-3); }
.ca-flags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.ca-flag {
    font-size: var(--text-xs); font-weight: 600; padding: 0 5px; border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--border-1);
}
.ca-flag-warn { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
.ca-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--text-xs); color: var(--fg-2); }
.ca-legend-item { display: flex; align-items: center; gap: var(--sp-1); }
.ca-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-1); }
.ca-legend-note { flex-basis: 100%; color: var(--fg-3); }
.ca-reach-name { font-weight: 600; }
.ca-mark { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: 0 6px; border-radius: var(--radius-pill); }
.ca-mark-inc { background: rgba(0, 155, 223, 0.12); color: var(--blue-700); }
.ca-mark-exc { background: var(--danger-bg); color: var(--danger-text); }

/* ---- Client Overview (posture story) ---- */
.ov-hero { display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: stretch; }
.ov-hero .card { margin-bottom: 0; }
.ov-hero-grade .card-body { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.ov-hero-title { font-size: var(--text-lg); margin: 0 0 var(--sp-3); }
.ov-deltas { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-3); }
.ov-delta { display: flex; flex-direction: column; gap: 2px; }
.ov-delta-label { font-size: var(--text-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.ov-delta-value { font-size: var(--text-md); color: var(--fg-1); font-weight: 600; }
.delta-pill { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); margin-left: var(--sp-1); }
.delta-up { background: var(--success-bg); color: var(--success-text); }
.delta-down { background: var(--danger-bg); color: var(--danger-text); }
.ov-spark { display: block; margin: var(--sp-2) 0 var(--sp-3); max-width: 560px; }
.ov-spark-line { fill: none; stroke: var(--shield-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov-spark-dot { fill: var(--shield-blue); }
.ov-spark-label { fill: var(--fg-2); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.ov-coverage { font-size: var(--text-sm); color: var(--fg-2); margin: 0; }

.ov-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ov-row .card { margin-bottom: 0; }
.ov-attn-label { font-size: var(--text-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--sp-2); }
.ov-attn-lead { font-size: var(--text-md); color: var(--fg-1); }
.ov-hi { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); margin-left: var(--sp-2); background: var(--danger-bg); color: var(--danger-text); }

.ov-fw-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.ov-fw { display: flex; align-items: center; gap: var(--sp-3); }
.ov-fw-body { min-width: 0; }
.ov-fw-name { font-weight: 600; color: var(--fg-1); font-size: var(--text-sm); }
.ov-fw-sub { margin-top: 2px; }

.ov-ca { margin-bottom: var(--sp-4); }
.ov-ca-finding { border-left: 3px solid var(--warning); }
.ov-ca-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.ov-ca-line { font-size: var(--text-md); color: var(--fg-1); }

.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ov-tiles .card { margin-bottom: 0; }
.ov-tile-strong { font-size: var(--text-md); font-weight: 600; color: var(--fg-1); }

@media (max-width: 720px) {
    .ov-hero { grid-template-columns: 1fr; }
}

/* ---- Assessment-completeness caveat (informative, calm; never danger) ---- */
.coverage-caveat {
    margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2); border: 1px solid var(--border-1);
    border-left: 3px solid var(--navy-300);
    border-radius: var(--radius-md); color: var(--fg-2); font-size: var(--text-sm); line-height: 1.5;
}
.coverage-caveat strong { color: var(--fg-1); }
/* Mapped-control gaps use the warning token's calm text shade, not a red alert. */
.coverage-caveat-mapped { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning-text); }
.coverage-caveat-mapped strong { color: var(--warning-text); }
.coverage-caveat-inline { margin-top: 4px; padding: 2px 8px; font-size: var(--text-xs); border-left-width: 2px; display: inline-block; }

/* ---- Microsoft Secure Score tiles (Microsoft's measure; distinct from the Pulse score) ---- */
.ov-msscore { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ov-msscore .card { margin-bottom: 0; }
.ov-ms-row { display: flex; align-items: center; gap: var(--sp-4); }
.ov-ms-meta { min-width: 0; }
.ov-ms-value { font-size: var(--text-lg); font-weight: 700; color: var(--fg-1); margin: var(--sp-1) 0 var(--sp-2); }
.ov-ms-max { font-size: var(--text-sm); color: var(--fg-3); font-weight: 600; }

/* ---- Primary-framework alignment arc (featured on the Overview) ---- */
.ov-align { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border-1); }
.ov-align-arc { flex: 0 0 auto; }
.ov-align-detail { flex: 1 1 320px; min-width: 260px; }
.ov-align-title { font-size: var(--text-md); margin: 0 0 var(--sp-1); }
.ov-align-lead { font-size: var(--text-md); color: var(--fg-1); }

/* ---- Theme toggle (sidebar; the sidebar is always dark navy) ---- */
.theme-toggle { display: inline-flex; gap: 2px; background: rgba(255,255,255,.06); border-radius: var(--radius-md); padding: 2px; margin-bottom: var(--sp-3); }
.theme-opt { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 26px; border: none; background: none; color: var(--navy-200); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.theme-opt:hover { color: #fff; }
.theme-opt.active { background: rgba(255,255,255,.15); color: #fff; }
.theme-opt:focus-visible { outline: 2px solid var(--blue-200); outline-offset: 1px; }

/* Info affordance in a table header (replaces footer legends). */
.th-info { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--fg-3); cursor: help; }
.th-info:hover, .th-info:focus-visible { color: var(--shield-blue); outline: none; }

/* Active sort link (dashboard): weight + ink, not mono (words stay Jakarta). */
.sort-links a { color: var(--fg-2); }
.sort-links a:hover { color: var(--shield-blue); }
.sort-active { color: var(--fg-1) !important; font-weight: 700; }

/* Two-line WHEN column (activity log): date over time-with-zone; never wraps. */
.when-cell { white-space: nowrap; width: 1%; }
.when-stack { display: flex; flex-direction: column; line-height: 1.35; }
.when-stack .js-local-date { font-size: var(--text-sm); color: var(--fg-1); }
.when-stack .js-local-time { font-size: var(--text-xs); color: var(--fg-2); font-family: var(--font-mono); }

/* ---------- Getting started card (dashboard) ----------
   Tokens only, so it inherits both themes. Completed steps recede; the next
   incomplete step is the one that leads. */
.gs-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.gs-progress { display: flex; align-items: center; gap: var(--sp-4); }
.gs-intro { max-width: 60ch; }

.gs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.gs-step { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; }

.gs-mark { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--fg-3); }
.gs-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border-2); }

.gs-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
.gs-blurb { font-size: var(--text-xs); color: var(--fg-3); }
.gs-more { margin-left: var(--sp-2); font-weight: 600; }

/* Done: muted, with a success check. */
.gs-step.gs-done .gs-mark { color: var(--success); }
.gs-step.gs-done .gs-label { font-weight: 500; color: var(--fg-3); }
.gs-step.gs-done .gs-label a { color: var(--fg-3); }
.gs-step.gs-done .gs-blurb { display: none; }

/* Next: the step that leads. */
.gs-step.gs-next { background: var(--surface-2); border-color: var(--border-1); }
.gs-step.gs-next .gs-dot { border-color: var(--shield-blue); background: color-mix(in srgb, var(--shield-blue) 25%, transparent); }

@media (max-width: 640px) {
    .gs-progress { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ---- Security Dashboard: inbox-rule sub-page (Security area) ---- */
.sec-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.sec-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }

.sec-subpage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-3); }
.sec-subpage { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.sec-subpage:hover { border-color: var(--border-2); }
.sec-subpage-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); flex: 0 0 auto; color: var(--fg-2); background: var(--surface-2); }
.sec-subpage-icon.sec-danger { color: var(--danger-text); background: var(--danger-bg); }
.sec-subpage-icon.sec-warning { color: var(--warning-text); background: var(--warning-bg); }
.sec-subpage-icon.sec-success { color: var(--success-text); background: var(--success-bg); }
.sec-subpage-body { flex: 1 1 auto; }
.sec-subpage-body h2 { margin: 0 0 var(--sp-1); font-size: 1rem; }

.sec-notice { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--fg-2); }
.sec-notice h2 { margin: 0 0 var(--sp-1); font-size: 1.05rem; }
.sec-notice > svg { color: var(--warning-text); flex: 0 0 auto; }
.sec-notice.sec-ok > svg { color: var(--success-text); }

.sec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.sec-tile { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--sp-3); text-align: center; }
.sec-tile-n { display: block; font-size: 1.6rem; font-weight: 600; color: var(--fg-1); }
.sec-tile-l { display: block; font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--sp-1); }
.sec-tile-n.sec-danger { color: var(--danger-text); }
.sec-tile-n.sec-warning { color: var(--warning-text); }

.sec-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.sec-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--sp-3); cursor: pointer; color: inherit; }
.sec-row:hover { border-color: var(--border-2); }
.sec-row-muted { opacity: 0.75; }
.sec-row-main { flex: 1 1 auto; min-width: 0; }
.sec-row-upn { display: block; font-weight: 600; color: var(--fg-1); }
.sec-row-lead { display: block; font-size: var(--text-sm); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-row-count { font-size: var(--text-xs); color: var(--fg-3); flex: 0 0 auto; }
.sec-new { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--shield-blue); border: 1px solid var(--shield-blue); border-radius: var(--radius-pill); padding: 0 var(--sp-2); margin-left: var(--sp-1); }
.sec-footer { margin-top: var(--sp-1); }
.sec-reviewed { margin-top: var(--sp-2); }
.sec-reviewed > summary { cursor: pointer; color: var(--fg-2); font-size: 0.9rem; padding: var(--sp-2) 0; }

.sec-panel-title { margin: 0 0 var(--sp-3); word-break: break-all; }
.sec-panel-fwd { background: var(--surface-2); border-radius: var(--radius-md); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.sec-panel-fwd p { margin: var(--sp-1) 0 0; color: var(--fg-2); font-size: 0.9rem; }
.sec-rule { border-top: 1px solid var(--border-1); padding: var(--sp-3) 0; }
.sec-rule-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sec-rule-name { font-weight: 600; color: var(--fg-1); word-break: break-word; }
.sec-rule-reason { margin: var(--sp-2) 0 0; color: var(--fg-2); font-size: 0.9rem; }
.sec-rule-raw { margin-top: var(--sp-2); }
.sec-rule-raw > summary { cursor: pointer; color: var(--fg-3); font-size: var(--text-sm); }
.sec-rule-raw dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--text-sm); }
.sec-rule-raw dt { color: var(--fg-3); }
.sec-rule-raw dd { margin: 0; color: var(--fg-2); word-break: break-word; }
.sec-inline-form { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-2); flex-wrap: wrap; }
.sec-note { flex: 1 1 100%; min-width: 0; width: 100%; min-height: 4.5rem; resize: vertical; font: inherit; color: var(--fg-1); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.sec-note:focus { outline: none; border-color: var(--shield-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shield-blue) 18%, transparent); }

/* App-detail facts grid (OAuth apps slide-over) */
.app-facts { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.app-facts > div { display: flex; gap: var(--sp-2); align-items: baseline; }
.app-facts dt { color: var(--fg-3); font-size: var(--text-xs); min-width: 72px; }
.app-facts dd { margin: 0; color: var(--fg-2); font-size: var(--text-sm); word-break: break-all; }

/* Break-glass section (privileged-access sub-page) */
.sec-breakglass { margin-top: var(--sp-4); }
.sec-breakglass h2 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }

/* Users detail pane: account (created + last sign-in) line */
.ux-account { display: flex; gap: var(--sp-5); margin-top: var(--sp-3); flex-wrap: wrap; }
.ux-account-item { display: flex; flex-direction: column; gap: 2px; }
.ux-account-l { font-size: var(--text-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.03em; }
.ux-account-v { font-size: 0.9rem; color: var(--fg-2); }

/* Identity-risk detection timeline (slide-over) */
.risk-det { border-top: 1px solid var(--border-1); padding: var(--sp-2) 0; }
.risk-det:first-child { border-top: none; }
.risk-det-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Security tab landing (triage feed + posture strip) ---- */
.sec-status { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }

/* ---- Security sweep progress ----
   The strip is toggled with the hidden attribute, so the display rule MUST be
   restored for [hidden] — author styles beat the UA stylesheet by cascade
   origin, and without this the bar would be permanently on screen. */
.sec-sweep {
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--sp-4); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
    background: var(--blue-050);
}
.sec-sweep[hidden] { display: none; }
.sec-sweep-row { display: flex; align-items: center; gap: var(--sp-2); }
.sec-sweep-label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
.sec-sweep-step { margin-left: auto; font-size: var(--text-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sec-sweep-note { margin: 0; font-size: var(--text-xs); color: var(--fg-3); }
.sec-sweep-track { height: 6px; border-radius: var(--radius-pill); background: var(--border-1); overflow: hidden; }
.sec-sweep-fill {
    height: 100%; width: 0; border-radius: var(--radius-pill);
    background: var(--shield-blue);
    transition: width var(--dur-base) var(--ease-out);
}
.sec-sweep-spin {
    width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
    border: 2px solid var(--shield-blue); border-top-color: transparent;
    animation: sec-sweep-rotate 850ms linear infinite;
}
@keyframes sec-sweep-rotate { to { transform: rotate(360deg); } }

/* A spinner is decoration; honour a reduced-motion preference. The bar still
   conveys progress without it. */
@media (prefers-reduced-motion: reduce) {
    .sec-sweep-spin { animation: none; }
    .sec-sweep-fill { transition: none; }
}
.sec-status-main { display: flex; gap: var(--sp-3); align-items: center; }
.sec-status-main h1 { margin: 0; }
.sec-status-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.sec-status-danger { color: var(--danger-text); background: var(--danger-bg); }
.sec-status-warning { color: var(--warning-text); background: var(--warning-bg); }
.sec-status-success { color: var(--success-text); background: var(--success-bg); }

.sec-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.sec-strip-tile { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--sp-3); text-decoration: none; color: inherit; }
.sec-strip-tile:hover { border-color: var(--border-2); }
.sec-strip-off { opacity: 0.55; }
.sec-strip-n { font-size: 1.7rem; font-weight: 600; color: var(--fg-1); }
.sec-strip-l { font-size: var(--text-xs); color: var(--fg-3); }
.sec-strip-sub { font-size: var(--text-xs); color: var(--danger-text); }

.sec-newband { border: 1px solid var(--danger); border-radius: var(--radius-lg); padding: var(--sp-3); background: var(--danger-bg); }
.sec-newband > h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 1rem; color: var(--danger-text); }
.sec-newband > h2 > svg { color: var(--danger-text); }

.sec-feed-h { font-size: 1.05rem; margin: 0 0 var(--sp-2); }
.sec-feed { display: flex; flex-direction: column; gap: var(--sp-2); }
.sec-feed-item { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--sp-3); text-decoration: none; color: inherit; }
.sec-feed-item:hover { border-color: var(--border-2); }
.sec-feed-main { flex: 1 1 auto; min-width: 0; }
.sec-feed-title { display: block; font-weight: 600; color: var(--fg-1); }
.sec-feed-reason { display: block; font-size: var(--text-sm); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-feed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.sec-feed-tag { font-size: var(--text-xs); color: var(--fg-3); border: 1px solid var(--border-1); border-radius: var(--radius-pill); padding: 0 var(--sp-2); }

.sec-group { border: 1px solid var(--border-2); border-radius: var(--radius-md); overflow: hidden; }
.sec-group-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); flex-wrap: wrap; }
.sec-group-subject { font-weight: 600; color: var(--fg-1); }
.sec-group-items { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); }
.sec-group-items .sec-feed-item { border-color: var(--border-1); }
/* Confirm-band collapsed cluster: <details><summary> as the group head */
details.sec-group > summary { cursor: pointer; list-style: none; }
details.sec-group > summary::-webkit-details-marker { display: none; }
details.sec-group > summary > svg:last-child { margin-left: auto; transition: transform 0.15s ease; color: var(--fg-3); }
details.sec-group[open] > summary > svg:last-child { transform: rotate(180deg); }
.sec-confirm-band { margin-top: var(--sp-4); }
.sec-confirm-lead { margin: 0 0 var(--sp-2); }
.sec-unavailable { margin-top: var(--sp-2); }

/* Main-dashboard multi-tenant security alert band (conditional) */
.dash-alert-band { display: flex; align-items: center; gap: var(--sp-3); background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); text-decoration: none; color: var(--danger-text); }
.dash-alert-band:hover { filter: brightness(0.98); }
.dash-alert-band > svg { flex: 0 0 auto; }
.dash-alert-band span { color: var(--fg-1); }
.dash-alert-band .dash-alert-cta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--danger-text); font-size: var(--text-sm); white-space: nowrap; }

/* Section divider inside a master-detail list column (Security sub-pages) */
.userx-section { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); }
.userx-item .badge { flex: 0 0 auto; }
.mdx-empty { padding: var(--sp-6); color: var(--fg-2); }

/* ============================================================
   Sign-in activity (Task 5) — Details/Sign-in activity pane
   toggle, range controls, and the color-coded event list.
   Scoped sx-* prefix; existing tokens only (success/warning/
   danger/blue-700), no new hues. Outcome owns color; MFA/device/
   location/client app are neutral chips — legacy auth is the one
   amber exception. The verdict banner, signal tiles and activity
   strip (Task 6) mount in [data-sx-summary] — see that section below.
   ============================================================ */

/* Details | Sign-in activity segmented toggle, in the pane hero. */
.sx-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--radius-pill); padding: 2px; margin-left: auto; flex: 0 0 auto; }
.sx-toggle-btn { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); background: transparent; border: none; border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sx-toggle-btn.active { background: var(--surface); color: var(--shield-blue); box-shadow: var(--shadow-xs); }
.sx-toggle-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.sx-view { padding-top: var(--sp-5); }

/* Range segmented control + non-interactive switch. */
.sx-controls { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sx-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--radius-pill); padding: 2px; }
.sx-seg-btn { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); background: transparent; border: none; border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sx-seg-btn.active { background: var(--surface); color: var(--shield-blue); box-shadow: var(--shadow-xs); }
.sx-seg-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.sx-switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--text-sm); color: var(--fg-2); }
.sx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-switch-track { position: relative; width: 34px; height: 19px; border-radius: var(--radius-pill); background: var(--border-2); transition: background-color var(--dur-fast) var(--ease-out); flex: 0 0 auto; }
.sx-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur-fast) var(--ease-out); }
.sx-switch input:checked + .sx-switch-track { background: var(--shield-blue); }
.sx-switch input:checked + .sx-switch-track::after { transform: translateX(15px); }
.sx-switch input:focus-visible + .sx-switch-track { box-shadow: var(--shadow-glow); }

.sx-custom { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin: calc(var(--sp-4) * -1) 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-radius: var(--radius-md); }
.sx-custom[hidden] { display: none; } /* an explicit `display` above would otherwise beat the UA [hidden] rule at equal specificity */

/* ---- Pane title + anchored help ----
   A help icon on a line of its own is unreadable: the reader can see there is
   an explanation available but not what it explains. Every icon in these panes
   is therefore anchored to the words it belongs to — a pane title, or a short
   label in the help row below the controls. */
.sx-pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.sx-pane-title { margin: 0; font-size: var(--text-md); font-weight: 700; color: var(--fg-1); display: inline-flex; align-items: center; gap: var(--sp-1); }

.sx-helprow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); }
.sx-helprow-item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 600; color: var(--fg-3); }
.sx-custom .form-field { margin-bottom: 0; min-width: 200px; }

/* Loading / error / empty states — reuse .alert-warning / .alert-danger / .callout. */
.sx-host { min-height: 72px; }
.sx-loading { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-3); font-size: var(--text-sm); padding: var(--sp-5) 0; }
.sx-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--shield-blue); animation: sx-spin .7s linear infinite; flex: 0 0 auto; }
@keyframes sx-spin { to { transform: rotate(360deg); } }

.sx-state { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sx-state > svg { flex: 0 0 auto; margin-top: 2px; }
.sx-state-body p { margin: 0 0 var(--sp-2); }
.sx-state-body p:last-child { margin-bottom: 0; }

.sx-empty { padding: var(--sp-4) 0; }
.sx-clampnote, .sx-truncnote { margin-bottom: var(--sp-3); }

/* Event list: 3px left band + pastel tint by OUTCOME ONLY (never a second
   color dimension at once — buries the signal, per design review). */
.sx-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.sx-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--border-2); background: var(--surface-2); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); }
.sx-row:hover { filter: brightness(0.98); }
[data-theme="dark"] .sx-row:hover { filter: brightness(1.12); }
.sx-row:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.sx-row.sx-o-success { border-left-color: var(--success); background: var(--success-bg); }
.sx-row.sx-o-failure { border-left-color: var(--danger); background: var(--danger-bg); }
.sx-row.sx-o-interrupted { border-left-color: var(--warning); background: var(--warning-bg); }

.sx-row-when { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); min-width: 148px; }
.sx-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.sx-row-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.sx-row-chevron { flex: 0 0 auto; color: var(--fg-3); display: flex; transition: transform var(--dur-fast) var(--ease-out); }
.sx-row[aria-expanded="true"] .sx-row-chevron { transform: rotate(180deg); }

/* Chips: neutral by default (device/location/client app). MFA uses the
   validated blue pair; legacy auth is the single amber exception. */
.sx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--surface); border: 1px solid var(--border-1); color: var(--fg-2); white-space: nowrap; }
.sx-chip-mfa { background: var(--info-bg); color: var(--blue-700); border-color: transparent; }
/* --blue-700 (#0077B0) is only validated against the OPAQUE light --info-bg
   (--blue-050). In dark mode --info-bg becomes a translucent overlay
   (rgba(0,155,223,.16)) composited over the row's own tinted background, and
   --blue-700 is never redefined for dark — measured ≈2.0-2.2:1 there, well
   under AA. --blue-200 on that same dark composite measures ≈7.5-8.4:1. The
   app resolves "system dark" to [data-theme="dark"] at apply time (site.js),
   so this single selector covers both explicit and system dark. */
[data-theme="dark"] .sx-chip-mfa { color: var(--blue-200); }
.sx-chip-legacy { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }

.sx-row-detail { margin: 4px 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius-md); }
.sx-detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-4); font-size: var(--text-sm); margin: 0; }
.sx-detail-grid dt { color: var(--fg-3); font-weight: 600; }
.sx-detail-grid dd { margin: 0; color: var(--fg-1); word-break: break-word; }

@media (max-width: 640px) {
    .sx-row { flex-wrap: wrap; }
    .sx-row-when { min-width: 0; }
    .sx-row-chevron { margin-left: auto; }
}

/* ============================================================
   Sign-in activity (Task 6) — verdict banner, signal tiles, and
   the activity strip. Mount in [data-sx-summary], above .sx-host.
   Same sx-* scoping and token discipline as Task 5.

   The strip's ticks use --success-text/--warning-text/--danger-
   text — NOT the solid --success/--warning/--danger. Measured:
   the solid tokens have no dark-mode value at all and fail the
   3:1 mark floor on a light surface (--success 2.85:1, --warning
   2.08:1 on white). The -text tokens clear the floor in both
   modes (success 6.16 light / 7.58 dark, warning 6.78 / 9.03,
   danger 6.79 / 5.72) — this is the same pair Task 5 already
   uses for the row list, so the strip and the list agree.
   ============================================================ */

/* ---- verdict banner: tinted by verdict.worst. Severity->tone mapping
   matches SeverityClass() already used across the Security sub-pages
   (Critical/High -> danger, Medium -> warning, Low -> neutral, Clean ->
   the calm success variant — never a reworded warning shell). Tint
   pairs are the same ones .alert-success/-warning/-danger already use. */
.sx-verdict { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--radius-md); border: 1px solid transparent; margin-bottom: var(--sp-4); }
.sx-verdict-icon { flex: 0 0 auto; display: flex; margin-top: 2px; color: inherit; }
.sx-verdict-headline { margin: 0; font-weight: 700; }
.sx-verdict-signals { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
.sx-verdict-signals li { margin-bottom: 4px; }
.sx-verdict-signals li:last-child { margin-bottom: 0; }

.sx-verdict-success { background: var(--success-bg); border-color: #BDE3CD; color: var(--success-text); }
.sx-verdict-neutral { background: var(--surface-2); border-color: var(--border-1); color: var(--fg-2); }
.sx-verdict-warning { background: var(--warning-bg); border-color: #EFD9A2; color: var(--warning-text); }
.sx-verdict-danger { background: var(--danger-bg); border-color: #F3C2C7; color: var(--danger-text); }

/* ---- signal tiles: five, neutral by default (mirrors .sec-tiles/.sec-tile,
   same layout under the sx- namespace). Failed/countries take the danger
   ink when non-zero / >1; the other three stay neutral. */
.sx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sx-tile { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--sp-3); text-align: center; }
.sx-tile-n { display: block; font-size: var(--text-xl); font-weight: 600; color: var(--fg-1); line-height: 1.1; }
.sx-tile-l { display: block; font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--sp-1); }
.sx-tile-n.sx-tile-danger { color: var(--danger-text); }

/* ---- activity strip: x = time, no y-axis, height encodes nothing — a tick
   is a tick. Night shading (hours outside 08:00-18:00 viewer-local) reuses
   --surface-2, the same "quiet surface" token used everywhere else in this
   file. aria-hidden on the whole strip: the row list carries the
   accessible path, this is decoration over data already fully there. */
.sx-strip { position: relative; margin-bottom: var(--sp-2); }
.sx-strip-track { position: relative; height: 40px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-1); overflow: hidden; }
.sx-strip-night { position: absolute; top: 0; bottom: 0; background: var(--surface-2); pointer-events: none; }

/* Hit target (12px) is wider than the visible mark (3px), per the hover
   requirement. The mark gets a 2px surface-colored halo so adjacent ticks
   stay visually separable even when close together in time. */
.sx-strip-hit { position: absolute; top: 0; bottom: 0; width: 12px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
.sx-strip-mark { display: block; width: 3px; height: 24px; border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); }
.sx-tick-success { background: var(--success-text); }
.sx-tick-failure { background: var(--danger-text); }
.sx-tick-interrupted { background: var(--warning-text); }
.sx-tick-unknown { background: var(--fg-3); } /* an unrecognized outcome must not be asserted as a definite color — same rule as the row list */

.sx-strip-axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--sp-1); }

/* Hover tooltip: reuses the trend chart's already-validated dark bubble
   (.trend-tooltip, ~line 1018) rather than inventing a new color pair —
   --navy-900/--navy-050 are raw palette values with no dark-mode
   redefinition, so this one fixed-dark bubble already works unchanged in
   both themes (measured ≈14.6:1, see the task report). */
.sx-strip-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--navy-900); color: var(--navy-050); font-size: var(--text-xs); font-family: var(--font-mono); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-sm); z-index: 2; }
.sx-strip-tip-time { font-weight: 600; color: #fff; }
.sx-strip-tip-meta { margin-top: 2px; opacity: 0.85; }

/* ---------- Per-user forensic activity timeline (docs/forensic-timeline-spec.md) ----------
   Prefix "fx-". Reuses the sign-in pane's controls wholesale (.sx-seg,
   .sx-custom, .sx-host) so the two views feel like one family; everything below
   is the parts a timeline needs that an event list did not.

   Two independent colour channels, never merged:
     - the CATEGORY rail (.fx-c-<slug>) says which kill-chain stage
     - the SEVERITY dot (.fx-dot-<level>) says how alarming
   Colour is never the only carrier: every row also states its category and its
   severity in text, so the timeline survives greyscale printing and colour
   vision deficiency. */

.fx-view { display: flex; flex-direction: column; gap: var(--sp-4); }
/* display:flex overrides the [hidden] UA rule — restore hiding, or this pane
   renders underneath whichever tab is actually selected. Author styles beat the
   UA stylesheet regardless of specificity, so the attribute alone is not enough.
   Same trap as .userx-pane, .userx-item, .sx-custom, .pane-empty and .help-pop
   above; it is the single most repeated bug in this file. */
.fx-view[hidden] { display: none; }

/* ---- Verdict banner ---- */
.fx-verdict { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--border-1); background: var(--surface-2); }
.fx-verdict-Critical { border-color: var(--danger); background: var(--danger-bg); }
.fx-verdict-High { border-color: var(--warning); background: var(--warning-bg); }
.fx-verdict-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--fg-2); box-shadow: var(--shadow-xs); }
.fx-verdict-Critical .fx-verdict-icon { color: var(--danger-text); }
.fx-verdict-High .fx-verdict-icon { color: var(--warning-text); }
.fx-verdict-body { min-width: 0; }
.fx-verdict-head { font-weight: 700; color: var(--fg-1); line-height: 1.35; }
.fx-verdict-signals { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--text-sm); color: var(--fg-2); }

/* ---- Counter strip ---- */
.fx-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fx-stat { flex: 1 1 96px; min-width: 96px; padding: var(--sp-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); text-align: center; }
.fx-stat-n { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--fg-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-stat-l { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--fg-3); }
.fx-stat-crit .fx-stat-n { color: var(--danger-text); }
.fx-stat-high .fx-stat-n { color: var(--warning-text); }

/* ---- Category filter chips ---- */
.fx-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.fx-chip { display: inline-flex; align-items: center; gap: var(--sp-2); font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.fx-chip:hover { background: var(--surface-2); }
.fx-chip:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.fx-chip[aria-pressed="false"] { opacity: 0.45; }
.fx-chip-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; background: var(--fx-hue, var(--border-2)); }
.fx-chip-n { color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* Category hues. The swatch, the rail, the count pill and the label all read
   from one token pair per category, so re-hueing a category is a two-line
   change and nothing can drift out of step with it. */
.fx-c-access  { --fx-hue: var(--fx-access);  --fx-hue-t: var(--fx-access-t); }
.fx-c-account { --fx-hue: var(--fx-account); --fx-hue-t: var(--fx-account-t); }
.fx-c-persist { --fx-hue: var(--fx-persist); --fx-hue-t: var(--fx-persist-t); }
.fx-c-recon   { --fx-hue: var(--fx-recon);   --fx-hue-t: var(--fx-recon-t); }
.fx-c-exfil   { --fx-hue: var(--fx-exfil);   --fx-hue-t: var(--fx-exfil-t); }
.fx-c-impact  { --fx-hue: var(--fx-impact);  --fx-hue-t: var(--fx-impact-t); }

/* ---- Timeline ---- */
.fx-day { margin-top: var(--sp-4); }
.fx-day:first-child { margin-top: 0; }
.fx-day-label { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--fg-3); background: var(--surface); }

.fx-rows { display: flex; flex-direction: column; }

.fx-row { display: grid; grid-template-columns: 72px 4px 1fr auto; gap: 0 var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--border-1); }
.fx-row:last-child { border-bottom: none; }
.fx-row-expandable { cursor: pointer; }
.fx-row-expandable:hover { background: var(--surface-2); }
.fx-row:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--radius-sm); }

.fx-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.fx-rail { align-self: stretch; border-radius: var(--radius-pill); background: var(--fx-hue, var(--border-2)); min-height: 22px; }

.fx-main { min-width: 0; }
.fx-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.fx-title-t { font-weight: 600; color: var(--fg-1); }
.fx-count { font-size: var(--text-xs); font-weight: 700; color: var(--fx-hue-t, var(--fg-2)); background: var(--surface-2); border-radius: var(--radius-pill); padding: 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.fx-cat { font-size: var(--text-xs); font-weight: 600; color: var(--fx-hue-t, var(--fg-3)); }
.fx-detail { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-2); overflow-wrap: anywhere; }
.fx-meta { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--text-xs); color: var(--fg-3); }
.fx-meta-i { display: inline-flex; align-items: center; gap: 4px; }
.fx-meta-i.mono { font-family: var(--font-mono); }

/* Right-hand markers */
.fx-marks { display: flex; align-items: center; gap: var(--sp-2); padding-top: 2px; }
.fx-dot { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.fx-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); flex: 0 0 auto; }
.fx-dot-Critical { color: var(--danger-text); } .fx-dot-Critical::before { background: var(--danger); }
.fx-dot-High     { color: var(--warning-text); } .fx-dot-High::before { background: var(--warning); }
.fx-dot-Medium   { color: var(--info-600); }     .fx-dot-Medium::before { background: var(--info); }
.fx-dot-Low      { color: var(--fg-3); }         .fx-dot-Low::before { background: var(--border-2); }
.fx-dot-Clean    { color: var(--fg-3); }         .fx-dot-Clean::before { background: var(--border-2); }

/* "Done to this account" is structurally different from everything else in the
   timeline, so it gets a dashed outline rather than another colour — the six
   category hues are already spoken for, and a seventh would dilute them. */
.fx-rel { font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); border: 1px dashed var(--border-2); border-radius: var(--radius-pill); padding: 0 var(--sp-2); white-space: nowrap; }
.fx-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--danger-text); }

.fx-row-failed .fx-title-t { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--fg-3); }

/* Expanded burst members */
.fx-sub { grid-column: 3 / -1; margin-top: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--border-1); display: flex; flex-direction: column; gap: var(--sp-1); }
.fx-sub-row { display: flex; gap: var(--sp-3); font-size: var(--text-xs); color: var(--fg-2); }
.fx-sub-time { font-family: var(--font-mono); color: var(--fg-3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fx-sub-name { overflow-wrap: anywhere; }

/* ---- Coverage gaps: the "Pulse could not see this" blocks ---- */
.fx-gaps { display: flex; flex-direction: column; gap: var(--sp-2); }
.fx-gap { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-2); border-left: 3px solid var(--fg-3); border-radius: var(--radius-md); background: var(--surface-2); }
.fx-gap-what { font-weight: 700; color: var(--fg-1); font-size: var(--text-sm); }
.fx-gap-why { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-2); }
.fx-gap-fix { margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--fg-3); }

/* ---- Toolbar (preserve / export) ---- */
.fx-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.fx-toolbar-note { margin-right: auto; font-size: var(--text-xs); color: var(--fg-3); }

@media (max-width: 640px) {
    .fx-row { grid-template-columns: 58px 4px 1fr; }
    .fx-marks { grid-column: 3; margin-top: var(--sp-2); padding-top: 0; }
    .fx-sub { grid-column: 3; }
}

/* ---------- Facet filtering (shared by the Sign-in activity and Activity panes) ----------
   Exclude is the primary gesture: an excluded value stays visible, struck
   through and dimmed, so the reader can always see what they have taken out.
   A filter you cannot see is a filter you forget you applied. */

.fct { border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); }

.fct-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.fct-toggle-panel { font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--fg-2); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); }
.fct-toggle-panel::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur-fast) var(--ease-out); }
.fct-toggle-panel[aria-expanded="true"]::before { transform: rotate(90deg); }
.fct-toggle-panel:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--radius-sm); }

/* The hidden-count is a warning, not a caption: it is the only thing telling
   the reader that what they are looking at is not the whole window. */
.fct-note { font-size: var(--text-xs); font-weight: 700; color: var(--warning-text); background: var(--warning-bg); border-radius: var(--radius-pill); padding: 1px var(--sp-2); }
.fct-reset { margin-left: auto; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--shield-blue); background: none; border: none; cursor: pointer; padding: 0; }
.fct-reset:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--radius-sm); }

.fct-body { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: 0 var(--sp-3) var(--sp-3); }
/* display:flex above beats the UA [hidden] rule — restore hiding. */
.fct-body[hidden] { display: none; }

.fct-group { flex: 1 1 260px; min-width: 0; }
.fct-group-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--fg-3); margin-bottom: var(--sp-1); }
.fct-group-n { font-weight: 600; color: var(--fg-3); background: var(--surface-2); border-radius: var(--radius-pill); padding: 0 var(--sp-2); }

.fct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* Two lines per value, not one.
   The first version put the value, its count, a full date range and two action
   buttons on a single flex line. The buttons and the range are fixed-size, so
   they claimed the width first and the value — the one thing the row exists to
   show — was squeezed to its min-content. With `overflow-wrap: anywhere` that
   min-content is ONE CHARACTER, so an IPv4 address rendered as a vertical
   column of digits. Stacking removes the competition entirely: the value gets
   the full width on its own line, the metadata sits underneath. */
.fct-row { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-1) 0; border-bottom: 1px solid var(--border-1); min-width: 0; }
.fct-row:last-child { border-bottom: none; }
.fct-row-off .fct-val { text-decoration: line-through; }
.fct-row-off { opacity: .5; }

/* A value with no events under the current narrowing — e.g. an address that
   never appeared in the location you selected. Kept in the list, because
   "never appeared there" is an answer worth reading, but it must not look as
   available as a value that still has matches. Distinct from .fct-row-off,
   which means YOU excluded it: struck through is a choice, faded is a fact. */
.fct-row-empty { opacity: .4; }
.fct-row-empty .fct-count { color: var(--fg-3); }
.fct-act:disabled { opacity: .45; cursor: default; }
.fct-act:disabled:hover { border-color: var(--border-1); color: var(--fg-3); background: none; }

.fct-val-btn { width: 100%; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-2); font: inherit; text-align: left; background: none; border: none; padding: 2px var(--sp-1); border-radius: var(--radius-sm); cursor: pointer; }
.fct-val-btn:hover { background: var(--surface-2); }
.fct-val-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* break-word, NOT anywhere: `anywhere` also shrinks the element's min-content
   size to a single character, which is what let the address column collapse.
   `break-word` wraps an over-long value (an IPv6 address) without ever telling
   the layout the element can be one character wide. */
.fct-val { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); color: var(--fg-1); overflow-wrap: break-word; }
.fct-val-mono { font-family: var(--font-mono); }
.fct-count { font-size: var(--text-xs); font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.fct-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-1) 0 var(--sp-2); min-width: 0; }
.fct-when { font-size: var(--text-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fct-acts { display: flex; gap: var(--sp-1); flex: 0 0 auto; }

/* Actions stay visible rather than appearing on hover: they are unreachable by
   keyboard and invisible on touch otherwise. */
.fct-act { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--fg-3); background: none; border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 0 var(--sp-2); cursor: pointer; }
.fct-act:hover, .fct-act:focus-visible { border-color: var(--border-2); color: var(--fg-1); background: var(--surface-2); }
.fct-act:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.fct-more { margin-top: var(--sp-1); font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--shield-blue); background: none; border: none; padding: 0; cursor: pointer; }
.fct-more:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--radius-sm); }

/* A stat tile that opens the matching facet group. The counts and the filter
   are the same idea seen twice, so the number is the way in. */
.sx-tile-btn, .fx-stat-btn { cursor: pointer; }
.sx-tile-btn:hover, .fx-stat-btn:hover { border-color: var(--border-2); background: var(--surface-2); }
.sx-tile-btn:focus-visible, .fx-stat-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* Said whenever a figure has been recomputed over a filtered subset, so a
   number on screen is never ambiguous about what it counted. */
.fct-filtered-note { font-size: var(--text-xs); color: var(--warning-text); }

/* ---------- IP reputation badges (AbuseIPDB) ----------
   Attached after the pane has rendered, so the evidence is never held up
   waiting on a third party. Four bands plus an explicit "not checked": an
   address with no verdict must never look like an address that came back
   clean — the absence of a verdict is not a verdict. */

/* One badge per provider, side by side. Deliberately not merged into a single
   worst-of score: two services disagreeing about an address is itself worth
   seeing, and a merged number hides which half of the picture is doing the work. */
.rep-group { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.rep-tag { font-size: 9px; font-weight: 800; letter-spacing: .03em; opacity: .75; }

.rep { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-pill); padding: 0 var(--sp-2); white-space: nowrap; border: 1px solid transparent; }
.rep-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.rep-text { line-height: 1.6; }

.rep-malicious  { color: var(--danger-text);  background: var(--danger-bg);  border-color: var(--danger); }
.rep-suspicious { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning); }
/* "Reported" is any non-zero confidence at all. Kept visually closer to
   suspicious than to clean: a handful of reports is still a hit. */
.rep-reported   { color: var(--warning-text); background: var(--warning-bg); }
/* A hosting, datacenter or Tor address with no abuse reports. Not clean and not
   accused — worth a look because a person does not usually sign in from a
   server. Blue rather than green or amber: this is information, not a verdict. */
.rep-hosting    { color: var(--info-600); background: var(--info-bg); border-color: var(--info); }
.rep-clean      { color: var(--success-text); background: var(--success-bg); }
/* Deliberately grey and unemphatic — this is an absence of information, and
   dressing it up as a result would be the whole mistake. */
.rep-unknown    { color: var(--fg-3); background: var(--surface-2); }

/* In a facet row the badge sits at the left of the metadata line. */
.fct-rep { flex: 0 0 auto; display: inline-flex; }
.fct-rep:empty { display: none; }

/* On a timeline meta line it follows the address itself. */
.fx-meta-i[data-rep-ip] .rep { margin-left: var(--sp-1); }

/* In the sign-in row detail the badge follows the address value. */
.sx-detail-grid dd[data-rep-ip] .rep { margin-left: var(--sp-2); }