/* TrueNorth CMMC Compliance — dark theme, no external deps */
/* Inter font loaded locally or falls back to system-ui (no CDN dependency) */

/* ── Self-hosted fonts (Atlas skin) — OFL, vendored WOFF2, no CDN ──────── */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/atkinson-400.woff2') format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url('/static/fonts/atkinson-400-italic.woff2') format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/atkinson-700.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/fraunces-400-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/jetbrains-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/jetbrains-500.woff2') format('woff2');}

:root {
    --bg: #0f1117;
    --bg-card: #1a1d27;
    --bg-hover: #22252f;
    --bg-header: #0b0d12;
    --border: #33374a;
    --border-light: #272b38;
    --text: #ededf0;
    --text-bright: #ffffff;
    --text-muted: #a1a4b0;
    --text-dim: #9a9dab;     /* was #7b7e8c: 4.0:1 on cards, under AA */
    --sidebar-w: 280px;      /* one value: the sidebar and the header name both use it */
    --blue: #3b82f6;
    --blue-dark: #2563eb;
    --green: #22c55e;
    --yellow: #eab308;
    --orange: #f97316;
    --red: #ef4444;
    --purple: #a855f7;
    --accent: hsl(217, 91%, 60%);
    --bg-sidebar: #161820;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
    /* Semantic overlays */
    --overlay-light: rgba(255,255,255,.06);
    --overlay-medium: rgba(255,255,255,.12);
    --overlay-subtle: rgba(255,255,255,.03);
    --blue-bg: rgba(59,130,246,.15);
    --blue-bg-hover: rgba(59,130,246,.25);
    --blue-border: rgba(59,130,246,.3);
    --blue-bg-active: rgba(59,130,246,.08);
    --blue-bg-cal: rgba(59,130,246,.2);
    --red-bg: rgba(239,68,68,.15);
    --red-bg-hover: rgba(239,68,68,.25);
    --red-border: rgba(239,68,68,.3);
    --green-border: rgba(34,197,94,.3);
    --orange-bg: rgba(249,115,22,.15);
    --yellow-bg: rgba(234,179,8,.15);
    --green-bg: rgba(34,197,94,.15);
    --purple-bg: rgba(168,85,247,.15);

    /* ── vNext design-system layer (additive; existing vars unchanged) ── */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    /* Spacing scale (4px base) */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
    /* Type scale */
    --fs-xs: .68rem; --fs-sm: .78rem; --fs-base: .85rem; --fs-md: 1rem;
    --fs-lg: 1.15rem; --fs-xl: 1.6rem; --fs-2xl: 2rem;
    --lh-tight: 1.25; --lh-base: 1.6;
    /* Radius scale */
    --radius-sm: 4px; --radius-lg: 12px; --radius-pill: 999px;
    /* Elevation + focus */
    --shadow-lg: 0 8px 24px rgba(0,0,0,.4);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    /* Motion */
    --transition-fast: .12s ease; --transition: .15s ease;
    /* Z-index scale */
    --z-dropdown: 50; --z-sticky: 100; --z-modal: 200; --z-toast: 1000; --z-skiplink: 10000;
    /* Semantic color aliases (intent -> existing hues) */
    --color-danger: var(--red); --color-warning: var(--yellow); --color-success: var(--green);
    --color-info: var(--blue); --color-accent: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
 *  ATLAS SKIN  —  data-skin="atlas" on <html> (set by the top-bar switcher).
 *  A warm, editorial re-theme: warm near-black surfaces, emerald primary,
 *  Fraunces serif headings + Atkinson Hyperlegible body. It only overrides
 *  design tokens (the classic look under :root is untouched), so every
 *  component follows automatically. Toggle is server-rendered (tn_theme
 *  cookie) so there is no flash of the wrong theme on first paint.
 *  ════════════════════════════════════════════════════════════════════════ */
[data-skin="atlas"] {
    --bg: #0f0d0b;            /* warm near-black (vs the classic cool #0f1117) */
    --bg-card: #1f1c18;
    --bg-hover: #262219;
    --bg-header: #151210;
    --bg-sidebar: #151210;
    --border: #302b22;
    --border-light: #231f19;
    --text: #f0ebe3;         /* warm cream */
    --text-bright: #faf6ee;
    --text-muted: #b5afa4;
    --text-dim: #9b9488;
    /* Emerald primary — drives every --blue-based component (buttons, logo,
       active nav, focus rings). Info pills (.pill-blue, hard-coded) stay blue. */
    --blue: #10b981;
    --blue-dark: #0e9f6e;
    --blue-bg: rgba(16,185,129,.14);
    --blue-bg-hover: rgba(16,185,129,.22);
    --blue-border: rgba(16,185,129,.32);
    --blue-bg-active: rgba(16,185,129,.10);
    --blue-bg-cal: rgba(16,185,129,.20);
    --accent: #10b981;
    /* Softer, slightly desaturated semantics (Atlas palette) */
    --green: #34d399;  --green-bg: rgba(52,211,153,.15);  --green-border: rgba(52,211,153,.3);
    --red: #f87171;    --red-bg: rgba(248,113,113,.15);   --red-bg-hover: rgba(248,113,113,.25); --red-border: rgba(248,113,113,.3);
    --yellow: #fbbf24; --yellow-bg: rgba(251,191,36,.15);
    --orange: #fb923c; --orange-bg: rgba(251,146,60,.15);
    --purple: #a78bfa; --purple-bg: rgba(167,139,250,.15);
    /* Warm layered depth + rounder corners */
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(35,31,25,.6);
    --shadow-md: 0 4px 16px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
    --radius: 10px;
    --radius-lg: 14px;
    /* The signature: Fraunces serif display + Atkinson Hyperlegible body */
    --font-sans: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
    --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
/* Serif headings + KPI numerals — the single most recognisable Atlas cue. */
[data-skin="atlas"] h1,
[data-skin="atlas"] h2,
[data-skin="atlas"] h3,
[data-skin="atlas"] h4,
[data-skin="atlas"] .kpi-value {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ── Themed scrollbars ───────────────────────────────────────── */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--text-dim); }
::-webkit-scrollbar-corner       { background: var(--bg); }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Header */
header {
    background: var(--bg-header);
    color: var(--text-bright);
    padding: 1rem 1.5rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.header-left { display: flex; align-items: center; gap: .75rem; }
.logo-icon { width: 28px; height: 28px; color: var(--blue); flex-shrink: 0; }
header h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: .5rem; margin: 0; }
.badge {
    /* Tinted, not solid: white on --blue was 3.7:1 at this size (axe, F-UI). */
    background: var(--blue-bg);
    color: var(--text-bright);
    border: 1px solid var(--blue-border);
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
.badge-dim {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: .7rem;
}
.badge-update {
    background: var(--green);
    color: var(--bg);
    font-size: .65rem;
    text-decoration: none;
    animation: pulse-update 2s ease-in-out infinite;
}
.header-center {
    position: absolute;
    left: calc(240px + (100% - 240px) / 2);
    transform: translateX(-50%);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.header-right { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; }
.user-name { font-size: .875rem; opacity: .85; white-space: nowrap; font-weight: 500; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: .4rem .8rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.25;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    /* The secondary look IS the base look: a plain .btn used to have no fill
       at all and rendered as browser-default text (UI review §1). */
    background: var(--overlay-light);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
}
.btn-secondary { background: var(--overlay-light); color: var(--text); border: 1px solid var(--border); }
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.btn:active { transform: scale(.96); box-shadow: none; }
/* A size, not a style: row actions and toolbars. */
.btn-sm { padding: .28rem .6rem; font-size: .75rem; }
.btn:not(.btn-primary):not(.btn-danger):not(.btn-view):not(.btn-save):not(.btn-help):not(.btn-step):hover {
    background: var(--overlay-medium);
}

/* Layout: sidebar + main */
html, body { height: 100%; overflow: hidden; }

.layout {
    display: flex;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 0 0 1.25rem 0;
    position: sticky;
    top: 0;
    height: calc(100vh - 56px);
    /* The nav is ~20 items across four groups. On a laptop viewport, or at a
       browser zoom above 100%, the last group runs past the fold -- hidden
       clipped it with no way to reach it. `stable` reserves the gutter so the
       links do not shift sideways when the bar appears. */
    overflow-y: auto;
    scrollbar-gutter: stable;
}
/* Thin, low-contrast bar: the nav is chrome, the scrollbar should not shout. */
.sidebar { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sidebar::-webkit-scrollbar { width: 10px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border: 3px solid var(--bg-card);
    border-radius: 5px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.sidebar { position: relative; }
.sidebar ul { list-style: none; display: flex; flex-direction: column; min-height: 100%; padding-top: .75rem; padding-right: 1.25rem; }
.sidebar li { margin: 0; }
.nav-link {
    display: block;
    padding: .7rem 1.25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.nav-link:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.nav-link.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}
.nav-link.active {
    color: var(--text-bright);
    background: var(--blue-bg-active);
    border-left-color: var(--blue);
}

/* Section titles */
.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.home-header .section-title { margin-bottom: 0; }
.global-search-wrap {
    position: relative;
    flex: 0 1 400px;
}
.global-search-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: .85rem;
}
.global-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(96,165,250,.15);
}
.search-results-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.search-results-dropdown.open { display: block; }
.search-result-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--overlay-light);
    cursor: pointer;
}
.search-result-item:hover { background: var(--overlay-light); }
.search-result-type {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent);
    min-width: 70px;
}
.search-result-title {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-no-results {
    padding: .75rem;
    color: var(--text-muted);
    font-size: .8rem;
    text-align: center;
}
.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* Main */
main { flex: 1; min-width: 0; padding: 1.5rem 2rem 3rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* A symmetric gutter keeps centred content (the home page search bar) on the
       column's true centre whether or not the page scrolls. */
    scrollbar-gutter: stable both-edges; }

/* KPI Row */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi-row.has-divider {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.kpi-row.has-divider .kpi-card { flex: 1 1 160px; min-width: 160px; }
.kpi-divider {
    flex: 0 0 2px;
    align-self: stretch;
    background: var(--border-light);
    margin: .4rem -0.5rem;
    border-radius: 1px;
}
.kpi-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.kpi-card.kpi-overdue          { border-top-color: var(--red); }
.kpi-card.kpi-upcoming         { border-top-color: var(--yellow); }
.kpi-card.kpi-tasks            { border-top-color: var(--green); }
.kpi-card.kpi-policies-ok      { border-top-color: var(--green); }
.kpi-card.kpi-policies-missing { border-top-color: var(--red); }
/* kpi-config-ok / kpi-config-bad removed — no longer used */
.kpi-card.kpi-changes-open     { border-top-color: var(--blue); }
.kpi-card.kpi-changes-pending  { border-top-color: var(--yellow); }
.kpi-card.kpi-changes-done     { border-top-color: var(--green); }
.kpi-card.kpi-incidents-open   { border-top-color: var(--red); }
.kpi-card.kpi-incidents-crit   { border-top-color: var(--red); }
.kpi-card.kpi-incidents-resolved { border-top-color: var(--green); }
.kpi-card.kpi-audit-passed     { border-top-color: var(--green); }
.kpi-card.kpi-audit-days       { border-top-color: var(--yellow); }
.kpi-card.kpi-audit-next       { border-top-color: var(--red); }
.kpi-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.kpi-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--text-bright); white-space: nowrap; }
.kpi-value.val-green  { color: var(--green); }
.kpi-value.val-red    { color: var(--red); }
.kpi-value.val-blue   { color: var(--blue); }
.kpi-value.val-orange { color: var(--orange); }
.kpi-value.val-yellow { color: var(--yellow); }
.kpi-value.val-dim    { color: var(--text-dim); font-size: 1.2rem; }
.kpi-value.val-date   { font-size: 1.4rem; }
.kpi-label { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; font-weight: 600; }

/* Panels */
.panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
}
.panel h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* (two-col removed — unused) */

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th {
    text-align: left;
    padding: .6rem .75rem;
    background: var(--overlay-medium);
    color: var(--text-bright);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
    color: var(--text);
    font-weight: 500;
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr.row-completed { opacity: .5; }
.data-table tbody tr.row-overdue  { background: rgba(239, 68, 68, 0.08); }
/* An import row whose incoming value is blank: it would erase what is already there. */
.data-table tbody tr.row-danger   { background: var(--red-bg); box-shadow: inset 3px 0 0 var(--red); }
.data-table tbody tr.row-highlight {
    background: var(--blue-bg-active);
    outline: 1px solid var(--blue);
    animation: highlight-fade 3s ease-out forwards;
}
@keyframes highlight-fade {
    0% { background: var(--blue-bg-cal); outline-color: var(--blue); }
    70% { background: var(--blue-bg-cal); outline-color: var(--blue); }
    100% { background: transparent; outline-color: transparent; }
}

/* Status pills
   Color guide — consistent semantics:
     red    = critical/failure/rejected/overdue/disabled/breach
     orange = high severity/warning/elevated concern
     yellow = medium severity/pending/needs attention/in-review
     green  = success/complete/approved/active/compliant
     blue   = informational/category/type indicator/in-progress
     purple = policy/documentation/cloud category
     gray   = neutral/unknown/not-assessed/inactive
*/
.pill {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
    letter-spacing: .02em;
}
.pill-red    { background: rgba(239,68,68,.2); color: #f87171; }
.pill-orange { background: rgba(249,115,22,.2); color: #fb923c; }
.pill-yellow { background: rgba(234,179,8,.2); color: #facc15; }
.pill-green  { background: rgba(34,197,94,.2); color: #4ade80; }
.pill-blue   { background: rgba(59,130,246,.2); color: #60a5fa; }
.pill-purple { background: rgba(168,85,247,.2); color: #c084fc; }
.pill-gray   { background: rgba(255,255,255,.08); color: var(--text-muted); }
a.pill-link  { text-decoration: none; cursor: pointer; transition: opacity .15s; }
a.pill-link:hover { opacity: .7; }

/* Priority dots */
.priority-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: middle;
}
.priority-critical { background: var(--red); }
.priority-high     { background: var(--orange); }
.priority-medium   { background: var(--yellow); }
.priority-low      { background: var(--green); }

/* Domain chart - horizontal bars */
.domain-chart { display: flex; flex-direction: column; gap: .6rem; }
.domain-bar-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}
.domain-toggle {
    cursor: pointer;
    display: inline-block;
    color: var(--blue);
    font-size: .85rem;
    font-weight: 600;
    user-select: none;
}
.domain-toggle::-webkit-details-marker { display: none; }
.domain-toggle::marker { content: ""; }
.domain-details[open] .domain-toggle { margin-bottom: .85rem; }
.domain-label {
    width: 340px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: .6rem;
}
.dl-code { width: 2.4rem; flex-shrink: 0; }
.dl-name { overflow: hidden; text-overflow: ellipsis; }
.domain-group { margin-bottom: .25rem; }
.domain-bar-clickable { cursor: pointer; transition: opacity .15s; }
.domain-bar-clickable:hover { opacity: .8; }
.domain-detail {
    display: none;
    padding: .5rem 0 .75rem 0;
    margin-left: 340px;
}
.domain-detail.open { display: block; }
.domain-detail-table { font-size: .75rem; }
.domain-controls-link {
    display: block;
    margin-top: .5rem;
    margin-left: auto;
    width: fit-content;
    padding: .35rem .7rem;
    font-size: .72rem;
    font-family: inherit;
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.domain-controls-link:hover { background: var(--blue-bg-hover); }
.domain-bar-bg {
    flex: 1;
    height: 20px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);   /* recessed depth */
}
.domain-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
    /* Solid fill whose shade slides continuously red(0) -> green(120) with the
       completion %: hue = pct * 1.2. The overlay gradient is a vertical gloss
       (top highlight, bottom shade) for a polished sheen — it does NOT change the
       hue, which still comes from background-color. */
    background-color: hsl(calc(var(--pct, 100) * 1.2) 45% 42%);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%,
                      rgba(255, 255, 255, .015) 48%, rgba(0, 0, 0, .10) 100%);
}
.domain-pct {
    width: 7.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.dp-frac { width: 3.6rem; text-align: right; color: var(--text-muted); font-weight: 500; }
.dp-pct  { width: 2.6rem; text-align: right; }
.bar-green  { background: var(--green); }
.bar-yellow { background: var(--yellow); }
.bar-orange { background: var(--orange); }
.bar-red    { background: var(--red); }

/* TOTAL COMPLIANCE bar acts as the expander for the control-family list */
.total-summary { display: block; cursor: pointer; list-style: none; }
.total-summary::-webkit-details-marker { display: none; }
.total-summary::marker { content: ""; }
.total-summary:hover .domain-bar-bg { box-shadow: 0 0 0 1px var(--accent); }
.total-caret { display: inline-block; color: var(--text-muted); transition: transform .2s; }
.domain-details[open] .total-caret { transform: rotate(180deg); }
.domain-details[open] > .total-summary { margin-bottom: .85rem; }

.empty-msg { color: var(--text-dim); font-size: .875rem; padding: 1rem 0; }
.text-muted { color: var(--text-muted); }

/* Admin forms */
.form-row { margin-bottom: .75rem; }
.form-row label {
    display: block;
    font-size: .78rem;
    color: var(--text);
    margin-bottom: .3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.form-input {
    width: 100%;
    max-width: 400px;
    padding: .5rem .75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: .82rem;
}
.form-input:focus { outline: none; border-color: var(--blue); }
/* Native select popups paint on the platform's own white ground, so an option that
   inherits the page text colour renders white-on-white -- unreadable until highlighted.
   This is global on purpose: it was fixed three times per-component before, and every
   select added since missed the fix. (Safari/macOS ignores option styling entirely.) */
option { background: var(--bg-card); color: var(--text); }
/* Control assessment form: use the full panel width for statements/answers */
.control-form .form-input { max-width: none; }
.control-form textarea.form-input { min-height: 5rem; }
/* Tailored policy-authoring forms (Document Workbench) — readable single column,
   help + control tags beneath each field instead of sprawling to the right. */
.policy-form-bar { display: flex; justify-content: flex-start; margin-bottom: .75rem; }
.policy-form fieldset {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1rem 1.35rem 1.35rem;
    margin-bottom: 1.25rem;
}
.policy-form legend { padding: 0 .45rem; color: var(--text-bright); font-weight: 600; font-size: .92rem; }
.policy-form .section-intro { margin: .1rem 0 1rem; max-width: 70ch; }
/* Responsive grid: short fields flow into columns to use the full width;
   textareas / multiselects and static notes span the whole row. */
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; align-items: start; }
@media (max-width: 1200px) { .policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .policy-grid { grid-template-columns: 1fr; } }
.policy-grid .form-row { margin-bottom: 0; }
.policy-grid .field-wide, .policy-grid .policy-static { grid-column: 1 / -1; }
.policy-static { margin: 0; }
.policy-form .form-input { max-width: 100%; }
.field-help { margin: .35rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
.field-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .45rem; }
.field-controls-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-right: .1rem; }
.pill-code { font-family: var(--font-mono); }
.form-input-file { display: none; }
.form-input-sm {
    padding: .3rem .5rem;
    font-size: .72rem;
    max-width: 160px;
}
.form-row-inline {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}
.form-row-inline .form-input {
    width: auto;
    flex: 1;
    min-width: 140px;
}
.form-input-wide { max-width: 100%; }
.form-input-narrow { max-width: 80px; }
.form-input-date { max-width: 160px; }
.form-input-select { max-width: 180px; }
.btn-primary {
    background: var(--blue-dark);
    color: var(--text-bright);
    border: 1px solid transparent;
    padding: .5rem 1.25rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.btn-primary:hover { background: var(--blue); }
.btn-help { background: var(--green); color:#000; font-weight:600; border-color: var(--green); text-decoration:none; }
.btn-help:hover { filter: brightness(1.1); }

/* CMMC Controls: fixed column widths so SPRS/Status align across every domain table */
.controls-table { table-layout: fixed; width: 100%; }
.controls-table th { white-space: normal; }   /* let long headers wrap instead of overflowing */
.controls-table .col-practice { width: 9.5rem; }
.controls-table .col-name { width: auto; }
/* Bigger, bolder practice code; name sits right next to it, left-aligned. */
.controls-table td:first-child a { font-size: .95rem; font-weight: 700; }
.controls-table td:nth-child(2), .controls-table th:nth-child(2) { text-align: left; padding-left: .25rem; }
.controls-table .col-type { width: 8rem; }
.controls-table .col-sprs { width: 4rem; }
.controls-table .col-poam { width: 5.5rem; }
.controls-table .col-status { width: 9rem; }
.controls-table td, .controls-table th { font-size: .85rem; }
/* Only the Name column ellipsizes; the pill columns must not clip their pills
   (a 6rem clip was cutting off the "Technology" type pill). */
.controls-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Portal hero: large centered title + Google-style centered pill search */
.portal-hero { text-align: center; padding: 2rem 1rem 2.25rem; }
.portal-hero .portal-title {
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 700; letter-spacing: -1px; line-height: 1.05;
    color: var(--text-bright); margin: 0 0 1.6rem;
}
.portal-search { max-width: 600px; margin: 0 auto; position: relative; }
.portal-search .portal-search-input {
    width: 100%; max-width: none; text-align: center; font-size: 1.05rem;
    padding: .75rem 1.25rem; border-radius: 24px;
}

/* Live search typeahead dropdown */
.ac-box {
    position:absolute; top:100%; left:0; right:0; z-index:50; margin-top:4px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.35); max-height:340px; overflow-y:auto;
}
.ac-item {
    display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem;
    color:var(--text); text-decoration:none; border-bottom:1px solid var(--border);
    font-size:.85rem;
}
.ac-item:last-child { border-bottom:none; }
.ac-item:hover, .ac-item.ac-active { background:var(--bg-hover); }
.ac-type {
    flex:0 0 auto; font-size:.66rem; text-transform:uppercase; letter-spacing:.03em;
    color:var(--text-muted); background:var(--bg); border:1px solid var(--border);
    border-radius:3px; padding:.05rem .35rem; min-width:5.5rem; text-align:center;
}

/* Checkbox groups */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .25rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--text);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.checkbox-label input[type="checkbox"] {
    accent-color: var(--blue);
    width: 16px;
    height: 16px;
}

/* Inline form inputs (tables) */
.form-input-inline {
    width: 100%;
    padding: .35rem .5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: .78rem;
}
.form-input-inline:focus { outline: none; border-color: var(--blue); }
.btn-save {
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid var(--blue-border);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.btn-save:hover { background: var(--blue-bg-hover); }
.btn-saved { color: var(--green) !important; }
.btn-danger {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid var(--red-border);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.btn-danger:hover { background: var(--red-bg-hover); }
.btn-view {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid var(--green-border);
    text-decoration: none;
}
.btn-view:hover { background: var(--green); color: var(--text-bright); }
.btn-disabled { opacity: .25; pointer-events: none; cursor: default; }
.btn-inline-delete {
    background: none;
    border: none;
    color: var(--red);
    font-size: .85rem;
    cursor: pointer;
    padding: 0 .25rem;
    font-family: inherit;
    opacity: .5;
    transition: opacity .15s;
}
.btn-inline-delete:hover { opacity: 1; }

/* File upload inline */
.upload-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.form-input-file-sm { display: none; }
.file-upload-btn {
    display: inline-block;
    padding: .35rem .7rem;
    background: var(--overlay-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: inherit;
    font-size: .72rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.file-upload-btn:hover {
    background: var(--overlay-medium);
    color: var(--text);
}
.file-upload-name {
    font-size: .7rem;
    color: var(--text-muted);
    margin-left: .4rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* File links */
.file-list { margin-top: .3rem; }
.file-link {
    display: inline-block;
    font-size: .82rem;
    color: var(--blue);
    text-decoration: none;
    margin-right: .5rem;
    white-space: nowrap;
}
.file-link:hover { text-decoration: underline; }
/* Keep the link colour in EVERY state — no browser-default visited purple
   (unreadable on dark) after the first click. */
.file-link:visited, .file-link:active { color: var(--blue); }

/* Panel header row (title + button side by side) */
.panel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}
.panel-header-row h2 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
}

/* Calendar grid */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cal-month-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-bright);
    min-width: 160px;
    text-align: center;
    white-space: nowrap;
}
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}
.cal-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    overflow: visible;
}
.cal-day {
    min-height: 116px;
    min-width: 0;
    background: var(--bg);
    border-radius: 4px;
    padding: .25rem .35rem;
    font-size: .72rem;
    position: relative;
}
.cal-day-num { font-weight: 600; color: var(--text-muted); font-size: .72rem; }
.cal-day.today {
    border: 1px solid var(--green);
    background: rgba(34,197,94,.06);
}
.cal-day.today .cal-day-num { color: var(--green); font-weight: 700; }
@keyframes pulse-today {
    0%, 100% { background: var(--bg); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    50% { background: rgba(34,197,94,.08); box-shadow: 0 0 8px 2px rgba(34,197,94,.2); }
}
.cal-day.other-month { opacity: .3; }
.cal-day.cal-day-upcoming {
    border: 1px solid var(--yellow);
    background: rgba(234,179,8,.04);
}
.cal-day.cal-day-overdue {
    border: 1px solid var(--red);
    background: rgba(239,68,68,.04);
}
@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0); }
    50% { box-shadow: 0 0 8px 2px rgba(234,179,8,.25); background: rgba(234,179,8,.06); }
}
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50% { box-shadow: 0 0 8px 2px rgba(239,68,68,.25); background: rgba(239,68,68,.06); }
}
@keyframes pulse-update {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}
.cal-event-wrap {
    position: relative;
}
.cal-event {
    display: block;
    font-size: .6rem;
    line-height: 1.3;
    padding: .15rem .25rem;
    margin-top: .15rem;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    background: var(--blue-bg-cal);
    color: var(--blue);
    cursor: pointer;
}
.cal-event-wrap:nth-child(n+4) {
    display: none;
}
.cal-day-more {
    font-size: .55rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: .1rem;
}
.cal-event-done {
    opacity: .4;
    text-decoration: line-through;
}
.cal-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem .85rem;
    font-size: .78rem;
    color: var(--text);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    line-height: 1.5;
    /* Let the tooltip grow to its natural width instead of being squished
       to the column width (~1/7 of the calendar). Width cap prevents
       giant boxes on long task titles. */
    width: max-content;
    min-width: 180px;
    max-width: min(340px, 90vw);
    white-space: normal;
    word-wrap: break-word;
}
.cal-event-wrap:hover .cal-tooltip { display: block; }
.cal-event-wrap { position: relative; overflow: visible; }
/* For cells in the left-most column, anchor the tooltip to the cell's
   left edge instead of centering, so it doesn't overflow into the sidebar. */
.cal-day:first-child .cal-tooltip,
.cal-day:nth-child(7n+1) .cal-tooltip {
    left: 0;
    transform: none;
}
/* Mirror for the right-most column. */
.cal-day:nth-child(7n) .cal-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

/* Calendar add modal */
.cal-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,.6);
    align-items: center;
    justify-content: center;
}
.cal-modal.open { display: flex; }
.cal-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-md);
}
.cal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text-bright);
}
.cal-modal-header .btn { font-size: 1.1rem; padding: .2rem .5rem; }
/* (help-modal-box removed — unused) */
.help-content {
    font-size: .82rem;
    line-height: 1.7;
    color: var(--text);
}
.help-content h3 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-top: 1.25rem;
    margin-bottom: .4rem;
}
.help-content ul {
    list-style: none;
    padding: 0;
}
.help-content li {
    padding: .2rem 0;
    padding-left: 1rem;
    position: relative;
}
.help-content li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--blue);
    font-weight: 700;
}
.help-content p { margin-bottom: .5rem; }
.help-content code {
    background: var(--bg);
    padding: .15rem .4rem;
    border-radius: 3px;
    font-size: .75rem;
    color: var(--text-muted);
}

/* Collapsible explanation */
.explain-toggle {
    display: inline-block;
    padding: .25rem .6rem;
    background: var(--overlay-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: inherit;
    font-size: .72rem;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.explain-toggle:hover { background: var(--overlay-medium); }
.explain-toggle.has-content { color: var(--green); border-color: var(--green-border); }
.explain-body { display: none; margin-top: .5rem; }
.explain-body.open { display: block; }
.control-req-text { display: none; margin-top: .5rem; padding: .5rem .75rem; background: var(--overlay-light); border-left: 3px solid var(--blue); border-radius: 4px; font-size: .85rem; line-height: 1.5; color: var(--text-muted); word-wrap: break-word; }
.control-req-text.open { display: block; }
.control-id-toggle { border-bottom: 1px dashed var(--blue); }
.control-id-toggle:hover { color: var(--blue); }
.explain-textarea {
    width: 100%;
    min-height: 120px;
    padding: .5rem .6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: .8rem;
    resize: vertical;
    line-height: 1.5;
}
.explain-textarea:focus { outline: none; border-color: var(--blue); }

/* Audit date click-to-edit */
.audit-click-edit { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
.audit-date-hidden { position: absolute; opacity: 0; width: 0; height: 0; }
.audit-set-form {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* Login page */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}
.login-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/flag.svg') center/cover no-repeat;
    opacity: 0.01;
    pointer-events: none;
}
.login-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1;
}
.login-subtitle {
    font-size: .7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
    margin-bottom: 1rem;
}
.login-logo {
    margin-top: 1.25rem;
    text-align: center;
    color: var(--text-dim);
    opacity: .4;
}
.login-logo svg {
    width: 32px;
    height: 32px;
}
.login-box h1 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: .25rem;
}
.login-box .form-row { text-align: left; }
.login-error {
    background: var(--red-bg);
    color: var(--red);
    padding: .5rem .75rem;
    border-radius: var(--radius);
    font-size: .82rem;
    margin-bottom: 1rem;
}

.login-notice {
    margin-top: .75rem;
    padding: .6rem .75rem;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 4px;
    font-size: .75rem;
    color: #fca5a5;
    line-height: 1.4;
}
.login-notice strong { color: #f87171; }

/* Control type select */
.type-select {
    padding: .15rem .4rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
}
.type-technology { background: var(--blue-bg); color: var(--blue); }
.type-policy { background: var(--purple-bg); color: var(--purple); }
.type-documentation { background: var(--orange-bg); color: var(--orange); }


/* Definition view/edit toggle */
.def-view { color: var(--text); }

/* Utility classes */
.nowrap { white-space: nowrap; }
/* Control/practice IDs: three templates ask for this and it had no rule. */
.mono { font-family: var(--font-mono); }
.mt-sm { margin-top: .5rem; }
.mt-md { margin-top: .75rem; }
.mt-lg { margin-top: 1rem; }
.mb-sm { margin-bottom: .5rem; }
.mb-md { margin-bottom: .75rem; }
.mb-lg { margin-bottom: 1rem; }
.w-full { width: 100%; }
.d-none { display: none !important; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-gap-sm { gap: .35rem; }
.flex-gap { gap: .5rem; }
.flex-wrap { flex-wrap: wrap; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.text-no-decoration { text-decoration: none; }
.text-inherit { color: inherit; text-decoration: none; }

/* Inline style replacements — layout */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.grid-2col-tight { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.panel-mb { margin-bottom: 1rem; }

/* Inline style replacements — sizing */
.input-w-sm { max-width: 80px; }
.input-w-md { max-width: 140px; }
.input-w-lg { max-width: 180px; }
.input-w-date { max-width: 160px; }
.input-w-full { max-width: 100%; }
.input-w-110 { width: 110px; }
.input-w-120 { width: 120px; }
.panel-narrow { max-width: 450px; }
.max-w-350 { max-width: 350px; }
.max-w-400 { max-width: 400px; }
.max-w-500 { max-width: 500px; }

/* Inline style replacements — colors & text */
.text-bright { color: var(--text-bright); }
.text-main { color: var(--text); }
.text-dim-color { color: var(--text-dim); }
.text-muted-color { color: var(--text-muted); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.border-dashed { border-style: dashed; }
.font-sm { font-size: .68rem; }
.font-xs { font-size: .6rem; }
.font-xxs { font-size: .5rem; }

/* Inline style replacements — display */
.hidden { display: none; }

/* Inline style replacements — KPI grid variants */
.kpi-row-sm { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 1rem; }
.kpi-row-md { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1rem; }
.kpi-row-lg { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1rem; }
.kpi-border-blue { border-top-color: var(--blue); }
.kpi-border-green { border-top-color: var(--green); }

/* Inline style replacements — admin helpers */
.fw-500 { font-weight: 500; }
.ml-auto { margin-left: auto; }
.pills-gap-sm { gap: .3rem; }
.file-date-meta { font-size: .62rem; margin-left: auto; }

/* Inline style replacements — specific components */
.total-compliance-bar { margin-bottom: 0; padding-bottom: 0; }
/* Restore divider only when the per-domain chart is actually expanded. */
.total-compliance-bar:has(+ .domain-chart:not([style*="display: none"])) {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.total-compliance-label { font-weight: 700; color: var(--text-bright); }
.total-compliance-bg { height: 28px; }
.total-compliance-pct { font-size: .9rem; font-weight: 700; color: var(--text-bright); }
.no-poam-pill { margin-right: 1rem; }
.drift-btn { font-size: .65rem; opacity: .35; }

/* Change Requests Actions column — keep controls compact so the table
   doesn't push the Apply button off the right edge (issue: user reported
   apply button off-page). Stack the status form above the Edit button. */
.cr-actions-cell { min-width: 170px; vertical-align: top; }
.cr-status-form {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .3rem;
}
.cr-status-select { max-width: 110px; }
.cr-edit-btn { margin-top: .2rem; }

/* ── POA&M page (issue #4 redesign) ─────────────────────────── */
.poam-table td { vertical-align: middle; }
.poam-milestone-summary { font-size: .78rem; color: var(--text); }
.poam-panel td { background: var(--bg); border-top: 2px solid var(--blue-border); }
.poam-panel-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    padding: .75rem .5rem;
}
@media (max-width: 900px) {
    .poam-panel-grid { grid-template-columns: 1fr; }
}
.poam-panel-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}
.poam-milestone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.poam-milestone-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.poam-milestone-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.poam-justification { max-width: 400px; font-size: .78rem; color: var(--text-muted); }
/* Help-tip icon — native `title` attribute provides the hover text. */
.help-tip {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: .85em;
    color: var(--text-muted);
    cursor: help;
    margin-left: .25rem;
    vertical-align: baseline;
    transition: color .15s;
}
.help-tip:hover,
.help-tip:focus-visible { color: var(--blue); outline: none; }
.sev-color-green { --sev-color: var(--green); }
.sev-color-yellow { --sev-color: var(--yellow); }
.sev-color-orange { --sev-color: var(--orange); }
.sev-color-red { --sev-color: var(--red); }
.sev-color-muted { --sev-color: var(--text-muted); }
.kev-margin { margin-left: .3rem; }
.disp-by { font-size: .6rem; color: var(--text-dim); display: block; }
.disp-select { width: auto; font-size: .7rem; padding: .2rem .3rem; }
.filter-remove-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; align-items: center; }
.filter-remove-label { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.filter-remove-btn { cursor: pointer; font-family: inherit; color: var(--red); border-color: var(--red-border); background: var(--red-bg); }

/* MFA pages */
.mfa-code-input { text-align: center; font-size: 1.5rem; letter-spacing: .3em; }
.mfa-help-text { margin-top: 1rem; font-size: .72rem; color: var(--text-dim); text-align: center; }
.mfa-instructions { font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; }
.mfa-qr-wrap { background: #fff; padding: 1rem; display: inline-block; border-radius: var(--radius); }
.mfa-qr-img { width: 200px; height: 200px; display: block; }
.mfa-manual-key { font-size: .72rem; color: var(--text-dim); margin-top: .75rem; }
.mfa-manual-code { font-size: .8rem; color: var(--blue); user-select: all; }
.mfa-confirm-input { max-width: 160px; text-align: center; font-size: 1.2rem; letter-spacing: .2em; }
.mfa-confirm-instructions { font-size: .82rem; color: var(--text-muted); margin-bottom: .75rem; }
.mfa-warning { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(234,179,8,.3); margin-bottom: 1rem; }
.mfa-codes-box { background: var(--bg); padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: .9rem; line-height: 2; max-width: 300px; user-select: all; }
.mfa-code-line { font-weight: 700; color: var(--text-bright); letter-spacing: .15em; }
.mfa-code-count { font-size: .75rem; color: var(--text-muted); margin-top: .75rem; }
.pw-policy-note { font-size: .78rem; color: var(--text-muted); margin-bottom: 1rem; }

/* Admin page specific */

/* Audit card provider field */
.audit-editable { cursor: pointer; }
.kpi-provider {
    margin-top: .4rem;
    font-size: .75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.audit-view-text { color: var(--text-muted); }
.provider-form {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.provider-label {
    font-size: .75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.provider-input {
    width: 120px;
    padding: .2rem .4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: .75rem;
    text-align: center;
}
.provider-input:focus { outline: none; border-color: var(--blue); }

/* SSO login divider */
.sso-divider {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.sso-divider p { margin-bottom: .75rem; }

/* Scanner action bar */
.scanner-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.scanner-bar-actions { display: flex; gap: .5rem; align-items: center; }

/* ── Accessibility ─────────────────────────────────────────────── */

/* Focus-visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
.btn:focus-visible,
.form-input:focus-visible,
.form-input-inline:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Click feedback */
.nav-link { transition: background .15s, color .15s, transform .1s; }
.nav-link:active { transform: scale(.97); opacity: .75; }

.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:active { background: var(--overlay-medium); }

a.pill-link { transition: opacity .15s, transform .1s; }
a.pill-link:active { transform: scale(.93); opacity: .6; }

.domain-bar-clickable { transition: opacity .15s, transform .1s; }
.domain-bar-clickable:active { transform: scaleX(.99); opacity: .65; }

.domain-controls-link { transition: background .15s, transform .1s; }
.domain-controls-link:active { transform: scale(.96); }

.kpi-link { transition: background .15s, transform .1s; }
.kpi-link:active { transform: scale(.98); }
.kpi-active { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-bg-active); }

.explain-toggle { transition: background .15s, transform .1s; }
.explain-toggle:active { transform: scale(.97); }

.file-link { transition: opacity .15s, transform .1s; }
.file-link:active { transform: scale(.97); opacity: .6; }

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: .5rem 1rem;
    background: var(--blue);
    color: var(--text-bright);
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease-in-out;
}
.skip-link:focus {
    top: .5rem;
}

/* Screen reader only */
.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;
}

/* ── Form validation ───────────────────────────────────────────── */
.form-input:user-invalid,
.form-input-inline:user-invalid {
    border-color: var(--red);
}
.form-input:required:placeholder-shown {
    border-left: 3px solid var(--orange);
}

/* ── Table overflow on small screens ───────────────────────────── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Responsive: tablet (<=1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
    .header-center { display: none; }
    .domain-label { width: 200px; }
    .domain-detail { margin-left: 200px; }
    .controls-table { table-layout: auto; }
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ── Responsive: mobile (<=768px) ──────────────────────────────── */
@media (max-width: 768px) {
    html, body { overflow: auto; }

    header {
        padding: .75rem 1rem;
        flex-wrap: wrap;
        gap: .5rem;
    }
    header h1 { font-size: 1rem; }
    .header-center { display: none; }
    .header-right { gap: .5rem; }
    .user-name { display: none; }

    .layout {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        padding: .5rem 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
    }
    .sidebar ul {
        display: flex;
        gap: 0;
        overflow-x: auto;
        padding: 0 .5rem;
    }
    .sidebar li { flex-shrink: 0; }
    .nav-link {
        padding: .5rem .75rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: .72rem;
    }
    .nav-link.active {
        border-left-color: transparent;
        border-bottom-color: var(--blue);
    }

    main { padding: 1rem; overflow-y: visible; }

    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
    .kpi-card { padding: .75rem .5rem; }
    .kpi-value { font-size: 1.5rem; }
    .kpi-value.val-date { font-size: 1.1rem; }

    .panel { padding: 1rem; }

    /* Stack form rows */
    .form-row-inline { flex-direction: column; align-items: stretch; }
    .form-row-inline .form-input { min-width: 100%; }
    .form-input { max-width: 100%; }

    /* Domain bars */
    .domain-bar-row { flex-wrap: wrap; }
    .domain-label { width: 100%; margin-bottom: .25rem; }
    .domain-detail { margin-left: 0; }

    /* Calendar */
    .cal-day { min-height: 88px; }
    .cal-event { font-size: .55rem; }

    /* Tables */
    .data-table { font-size: .75rem; }
    .data-table th, .data-table td { padding: .4rem .5rem; }

    /* Upload inline */
    .upload-inline { flex-wrap: wrap; }

    /* Scanner bar */
    .scanner-bar { flex-direction: column; align-items: flex-start; gap: .5rem; }

    /* Login */
    .login-box { padding: 1.5rem 1.25rem; margin: 1rem; }
}

/* ── Responsive: small mobile (<=480px) ────────────────────────── */
@media (max-width: 480px) {
    header h1 { font-size: .85rem; }
    .badge { font-size: .6rem; padding: .15rem .4rem; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .kpi-value { font-size: 1.25rem; }
    .cal-cells { gap: 1px; }
    .cal-day { min-height: 40px; padding: .15rem .2rem; }
    .cal-day-num { font-size: .6rem; }
    .cal-event { display: none; }
    .cal-weekdays { font-size: .6rem; }
    .section-title { font-size: .95rem; }
    .panel h2 { font-size: .9rem; }
}

/* Compliance trend chart */
.trend-chart-wrap { width: 100%; }
.trend-chart { width: 100%; height: auto; display: block; }
.trend-diamond-link { cursor: pointer; }

.trend-hover-target { opacity: 0; transition: opacity .15s; cursor: pointer; }
.trend-hover-target:hover { opacity: 0.25; }

/* CVE Feed toolbar */
/* Page header: H2 + feed-source pills + actions, all vertically centered. */
.cve-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cve-page-header .section-title { margin: 0; }
.cve-page-header-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.cve-toolbar { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.cve-tb-row {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
}
.cve-tb-block { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.cve-tb-grow { flex: 1; min-width: 0; }
.cve-tb-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    flex-shrink: 0;
}
.cve-tb-label {
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    margin-bottom: .45rem;
}
.cve-tb-big {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-bright);
}
.cve-tb-sub {
    font-size: .6rem;
    color: var(--text-dim);
    margin-top: .15rem;
}
.cve-tb-date-val {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-bright);
    white-space: nowrap;
}
/* Tech filter pills — match the app-standard pill sizing (.78rem). */
.cve-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.cve-tb-pill {
    display: inline-block;
    padding: .28rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--overlay-light);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    letter-spacing: .02em;
}
.cve-tb-pill:hover { background: var(--overlay-medium); color: var(--text); }
.cve-tb-pill-on {
    background: var(--blue-bg);
    border-color: var(--blue-border);
    color: var(--blue);
}
.cve-tb-pill-on:hover { background: var(--blue-bg-hover); }
/* Add-filter row: text input + clearly separated + button on the right. */
.cve-pill-add-form {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .25rem;
}
.cve-pill-input {
    width: 140px;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: .78rem;
}
.cve-pill-input:focus { outline: none; border-color: var(--blue); border-style: solid; }
.cve-pill-input::placeholder { color: var(--text-dim); font-style: italic; }
.cve-pill-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--blue-border);
    background: var(--blue-bg);
    color: var(--blue);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.cve-pill-add-btn:hover { background: var(--blue); color: var(--text-bright); }
/* Date input */
.cve-date-input {
    width: 120px;
    padding: .2rem .35rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-bright);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    color-scheme: dark;
}
.cve-date-input:focus { outline: none; border-color: var(--purple); }
/* Severity row */
.cve-tb-sevrow {
    display: flex;
    gap: .4rem;
}
.cve-tb-sev {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--overlay-light);
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    cursor: pointer;
}
.cve-tb-sev-n { font-size: .95rem; }
.cve-tb-sev:hover { background: var(--overlay-medium); color: var(--text); }
.cve-tb-sev-n { font-weight: 700; color: var(--sev-color); }
.cve-tb-sev-on {
    background: rgba(255,255,255,.08);
    border-color: var(--sev-color);
    color: var(--text-bright);
}
.cve-kev-glow { animation: kev-pulse 2.5s ease-in-out infinite; }
@keyframes kev-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50% { box-shadow: 0 0 10px 2px rgba(239,68,68,.3); }
}

/* Toast notifications */
.toast-container { margin-bottom: 1rem; }
.toast {
    padding: .6rem 1rem;
    border-radius: var(--radius);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .5rem;
    animation: toast-in .3s ease, toast-out .5s ease 4s forwards;
}
.toast-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.toast-error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.toast-info { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
/* Assessor token URL — persistent, word-wrapped, no auto-fade */
.toast-assessor_token {
    background: rgba(59,130,246,0.08);
    color: var(--text);
    border: 1px solid rgba(59,130,246,0.4);
    word-break: break-all;
    white-space: normal;
    font-weight: 400;
    font-family: monospace;
    font-size: .78rem;
    animation: toast-in .3s ease;
    padding: .9rem 1.1rem;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }

/* Footer */
footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-dim);
    font-size: .72rem;
    border-top: 1px solid var(--border-light);
}

/* File viewer */
.file-viewer-body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.file-viewer-bar { background: var(--bg-header); border-bottom: 1px solid var(--border); padding: .5rem 1rem; flex-shrink: 0; }
.file-viewer-bar-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.file-viewer-info { font-size: .82rem; color: var(--text-bright); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.file-viewer-security { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; }
.file-viewer-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 600; white-space: nowrap; }
.file-viewer-badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.file-viewer-badge-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
.file-viewer-badge-yellow { background: var(--yellow-bg); color: var(--yellow); border: 1px solid rgba(234,179,8,.3); }
.file-viewer-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.file-viewer-frame { flex: 1; border: none; width: 100%; background: #fff; }
.file-viewer-nopreview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 1rem; }

/* DOR modal */
.dor-file-list { max-height: 350px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; margin-bottom: .75rem; }
.dor-file-item { padding: .3rem .5rem; border-radius: 4px; font-size: .78rem; }
.dor-file-item:hover { background: var(--bg-hover); }

/* DOR history table */
.dor-hash-th { width: 50%; }
.dor-hash-cell { width: 50%; }
.dor-hash-row { display: flex; align-items: center; gap: .4rem; }
.dor-hash-hidden { font-size: .68rem; color: var(--text-dim); font-family: inherit; white-space: nowrap; }
.dor-hash-value { font-size: .58rem; color: var(--text-muted); user-select: all; word-break: break-all; line-height: 1.3; }
.dor-hash-buttons { display: flex; gap: .25rem; flex-shrink: 0; }

/* Connection Explorer */
.conn-graph-wrap { width: 100%; overflow: auto; }
.conn-graph { width: 100%; min-height: 800px; display: block; }
.conn-edge { stroke: var(--text-dim); stroke-width: 4; opacity: .5; }
.conn-pill { stroke-width: 2; cursor: pointer; transition: filter .15s; }
.conn-node:hover .conn-pill { filter: brightness(1.4); }
.conn-label { fill: var(--text-bright); font-size: 28px; font-family: inherit; font-weight: 700; text-anchor: middle; pointer-events: none; }
.conn-sublabel { fill: var(--text-muted); font-size: 22px; font-family: inherit; text-anchor: middle; pointer-events: none; }
.conn-person { fill: var(--purple); stroke: var(--purple); }
.conn-system { fill: var(--blue); stroke: var(--blue); }
.conn-control { fill: var(--orange); stroke: var(--orange); }
.conn-policy { fill: var(--green); stroke: var(--green); }
.conn-task { fill: var(--yellow); stroke: var(--yellow); }
.conn-domain { fill: var(--red); stroke: var(--red); }
.conn-baseline { fill: var(--text-muted); stroke: var(--text-muted); }
.conn-missing { fill: transparent; stroke: var(--red); stroke-dasharray: 4 2; opacity: 0.85; }
.conn-detail-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); margin-top: 1rem; overflow: hidden; }
.conn-detail-header { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); }
.conn-detail-header h3 { margin: 0; font-size: .9rem; color: var(--text-bright); }
.conn-detail-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: .2rem .5rem; }
.conn-detail-close:hover { color: var(--text-bright); }
.conn-detail-body { max-height: 500px; overflow-y: auto; }
.conn-detail-body iframe { width: 100%; height: 500px; border: none; background: var(--bg-card); }
.conn-detail-loading { padding: 2rem; text-align: center; color: var(--text-muted); }
.conn-search-wrap { position: relative; flex: 1; }
.conn-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); max-height: 250px; overflow-y: auto; display: none; }
.conn-suggest.open { display: block; }
.conn-suggest-item { padding: .5rem .75rem; font-size: .8rem; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border-light); }
.conn-suggest-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.conn-suggest-item:last-child { border-bottom: none; }
.conn-legend { display: flex; gap: .75rem; flex-wrap: wrap; }
.conn-legend-item { display: flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--text-muted); }
.conn-dot { width: 18px; height: 10px; border-radius: 5px; display: inline-block; }
.conn-dot.conn-person { background: var(--purple); }
.conn-dot.conn-system { background: var(--blue); }
.conn-dot.conn-control { background: var(--orange); }
.conn-dot.conn-policy { background: var(--green); }
.conn-dot.conn-task { background: var(--yellow); }
.conn-dot.conn-domain { background: var(--red); }
.conn-dot.conn-baseline { background: var(--text-muted); }
.conn-dot.conn-missing { background: transparent; border: 2px dashed var(--red); }

/* CAB member cards */
.cab-members-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }

/* CAB entries left behind by migration 0017, which moved membership from
   personnel_roles to local_users and backfilled nothing. They grant no review
   rights, so the panel previously inner-joined them away and reported "No CAB
   members defined" to an operator who had defined three. */
.cab-legacy-note {
    background: var(--yellow-bg);
    border: 1px solid rgba(234,179,8,.3);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin-top: 1rem;
    font-size: .88rem;
}
.cab-legacy-note strong { color: var(--yellow); }
.cab-legacy-note .data-table { margin: .75rem 0; }
.cab-legacy-note .btn { margin-top: .25rem; }
.cab-card { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .75rem; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--radius); min-width: 140px; position: relative; }
.cab-card.cab-chair { border-color: var(--blue); }
.cab-name { font-weight: 600; font-size: .82rem; color: var(--text-bright); }
.cab-title { font-size: .7rem; color: var(--text-muted); }
.cab-card .btn-icon { position: absolute; top: .2rem; right: .3rem; font-size: .9rem; line-height: 1; background: none; border: none; cursor: pointer; padding: 0; }
.inline-form { display: inline; }
.btn-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.btn-green:hover { background: var(--green); color: var(--text-bright); }
.btn-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.btn-red:hover { background: var(--red-bg-hover); }
.ticker-divider { border-left: 2px solid var(--border); padding-left: .8rem; }
.form-grid { display: flex; flex-direction: column; gap: .5rem; }
.form-check { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text); cursor: pointer; }

/* Change approval flow */
.approval-trail { display: flex; flex-direction: column; gap: .2rem; }
.approval-entry { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cr-approval-form { display: flex; flex-direction: column; gap: .35rem; }
.cr-approval-form .form-input-sm { font-size: .72rem; padding: .25rem .4rem; width: 100%; }
.cr-approval-btns { display: flex; gap: .3rem; }
.mt-xs { margin-top: .25rem; }

/* Document version history */
.file-version { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.file-version-meta { font-size: .62rem; color: var(--text-dim); white-space: nowrap; }

/* Scan results */
.kpi-card-warning { border-left: 3px solid var(--orange); }
.ml-sm { margin-left: 8px; }

/* Detail page KPI utilities */
.kpi-value-sm { font-size: .9rem; }
.kpi-card-detail { border-top-color: var(--border); text-align: left; padding: .75rem 1rem; }
.kpi-card-detail-blue { border-top-color: var(--blue); text-align: left; padding: .75rem 1rem; }
.kpi-card-detail-purple { border-top-color: var(--purple); text-align: left; padding: .75rem 1rem; }
.modal-md { max-width: 550px; }
.modal-lg { max-width: 600px; }
.input-w-200 { width: 200px; }
.row-active { background: var(--blue-bg-active); }
.summary-link { cursor: pointer; font-size: .78rem; }

/* ── Navigation separators ──────────────────────────────── */
.nav-separator { border-top: 1px solid var(--border-light); margin: .4rem 0 0; list-style: none; }
.nav-group-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .55rem .75rem .2rem;
}

/* ── Chain of Custody ───────────────────────────────────── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
@media (max-width: 680px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: .25rem; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }
.custody-timeline { display: flex; flex-direction: column; gap: .75rem; }
.custody-event {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .75rem 1rem;
}
.custody-event-destruction {
    border-color: rgba(239,68,68,.4);
    background: rgba(239,68,68,.04);
}
.custody-event-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.custody-event-date { font-size: .85rem; font-weight: 600; color: var(--text-bright); }
.custody-transfer-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .35rem 0; }
.custody-arrow { color: var(--text-muted); font-size: 1rem; }
.custody-destruction-method { font-size: .85rem; color: #f87171; font-weight: 600; margin: .25rem 0; }
.custody-event-detail { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
.custody-event-notes { font-size: .82rem; color: var(--text); background: var(--bg-input); border-radius: 4px; padding: .35rem .6rem; margin-top: .35rem; white-space: pre-wrap; }

/* ── Pre-Audit Track ────────────────────────────────────── */
.pre-audit-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.pre-audit-hero-left { flex: 0 0 auto; }
.pre-audit-hero-right { flex: 1 1 320px; }
.pre-audit-readiness-pct {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-bright);
}
.pre-audit-readiness-pct.val-green { color: var(--green); }
.pre-audit-readiness-pct.val-yellow { color: var(--yellow); }
.pre-audit-readiness-pct.val-red { color: var(--red); }
.pre-audit-hero-sub { color: var(--text-muted); font-size: .88rem; margin-top: .4rem; }
.pre-audit-bar-wrap { display: flex; align-items: center; gap: .75rem; }
.pre-audit-main-bar { flex: 1; height: 18px; }
.pre-audit-step-card { margin-bottom: .75rem; }
.pre-audit-step-complete { border-left: 3px solid var(--green); }
.pre-audit-step-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.pre-audit-step-num {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    margin-top: .1rem;
}
.pre-audit-num-green { background: rgba(34,197,94,.2); color: var(--green); }
.pre-audit-num-yellow { background: rgba(234,179,8,.2); color: var(--yellow); }
.pre-audit-num-gray { background: rgba(255,255,255,.08); color: var(--text-muted); }
.pre-audit-step-body { flex: 1; min-width: 0; }
.pre-audit-step-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.pre-audit-step-title { font-size: 1rem; color: var(--text-bright); }
.pre-audit-status-pill { margin-left: .4rem; }
.pre-audit-step-detail { margin-top: .6rem; }
.pre-audit-step-detail-collapsed { display: none; }
.pre-audit-description { font-size: .85rem; line-height: 1.55; }
.pre-audit-step-bar-row { display: flex; align-items: center; gap: .75rem; }
.pre-audit-step-bar { flex: 1; height: 10px; }
.pre-audit-detail-list {
    list-style: disc;
    padding-left: 1.2rem;
    font-size: .82rem;
    line-height: 1.7;
}
.pre-audit-step-action { flex-shrink: 0; padding-top: .1rem; }
.pre-audit-action-btn { white-space: nowrap; }

/* ── Document Editor ────────────────────────────────────── */
.editor-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
}
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
}
.editor-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 .25rem;
    flex-shrink: 0;
}
.editor-doc-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-bright);
    padding: .15rem .3rem;
    border-radius: 3px;
    outline: none;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.editor-doc-title[contenteditable=true]:hover,
.editor-doc-title[contenteditable=true]:focus {
    background: var(--bg-hover);
    outline: 1px solid var(--border);
}
.editor-btn {
    padding: .25rem .5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text);
    font-size: .85rem;
}
.editor-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}
.editor-btn.active {
    background: var(--blue-bg);
    border-color: var(--blue-border);
}
.editor-back-btn {
    flex-shrink: 0;
}
.editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.editor-canvas {
    flex: 1;
    padding: 1.5rem 1.5rem 2rem 1rem;
    overflow-y: auto;
    background: var(--bg);
}
#doc-editor {
    max-width: 860px;
    margin: 0;
    min-height: 600px;
    outline: none;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}
#doc-editor h1 { font-size: 1.8rem; margin: 1.5rem 0 .5rem; color: var(--text-bright); }
#doc-editor h2 { font-size: 1.3rem; margin: 1.2rem 0 .4rem; color: var(--text-bright); border-bottom: none; }
#doc-editor h3 { font-size: 1.1rem; margin: 1rem 0 .3rem; color: var(--text-bright); }
#doc-editor p  { margin: .75rem 0; }
#doc-editor ul, #doc-editor ol { margin: .75rem 0 .75rem 1.5rem; }
#doc-editor table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
#doc-editor table td, #doc-editor table th { border: 1px solid var(--border); padding: .4rem .6rem; }
#doc-editor table th { background: var(--bg-card); font-weight: 600; }
#doc-editor[contenteditable=false] { opacity: .85; cursor: default; }
.editor-history {
    width: 260px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    overflow-y: auto;
    background: var(--bg-card);
    padding: 1rem;
}
.editor-history h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .75rem;
}
.snap-item {
    padding: .5rem;
    border-radius: 4px;
    margin-bottom: .4rem;
    border: 1px solid transparent;
}
.snap-item:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}
.snap-item .snap-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-bright);
}
.snap-item .snap-meta {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .1rem;
}
.autosave-indicator {
    font-size: .75rem;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
}
.autosave-indicator.saving { color: var(--yellow); }
.autosave-indicator.saved  { color: var(--green); }

/* Editable document preview in policy_detail */
.editable-doc-preview {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.55;
    padding: .5rem 0;
    font-style: italic;
}

/* ── Print styles ───────────────────────────────────────── */
@media print {
    .sidebar, header, footer, .toast-container, .skip-link,
    .panel-header-row .btn, .btn-help, form[action="/logout"] { display: none !important; }
    body { background: #fff; color: #000; }
    .layout { display: block; }
    main { margin: 0; padding: 0; overflow: visible; }
    .panel { backdrop-filter: none; background: #fff; color: #000; border: 1px solid #ccc; break-inside: avoid; margin-bottom: 1rem; box-shadow: none; }
    .data-table th { background: #eee; color: #000; }
    .data-table td { color: #000; border-bottom-color: #ccc; }
    .kpi-card { background: #fff; color: #000; border: 1px solid #ccc; }
    .kpi-value { color: #000; }
    .pill { border: 1px solid currentColor; }
    a { color: #000; text-decoration: none; }
    .section-title { color: #000; }
    /* Pre-Audit: expand all steps and hide interactive elements */
    .no-print { display: none !important; }
    .pre-audit-step-detail-collapsed { display: block !important; }
    .pre-audit-step-action { display: none !important; }
    .pre-audit-readiness-pct { color: #000; }
    .pre-audit-num-green,
    .pre-audit-num-yellow,
    .pre-audit-num-gray { background: #eee; color: #000; border: 1px solid #ccc; }
}

/* ── Setup Wizard stepper ───────────────────────────────── */
/* ── Setup Wizard (collector-inspired, dark theme) ─────────────────── */

/* Phase tab bar */
.wz-phase-bar {
    display:flex; align-items:center;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:.5rem .75rem;
    margin-bottom:1rem;
    gap:0;
    flex-wrap:wrap;
}
.wz-tab {
    display:flex; align-items:center; gap:.4rem;
    padding:.45rem .85rem;
    font-size:.8rem; font-weight:600;
    color:var(--text-muted);
    border-bottom:2px solid transparent;
    text-decoration:none;
    border-radius:5px;
    transition:color .15s, background .15s;
    white-space:nowrap;
}
.wz-tab:hover { color:var(--text); background:rgba(255,255,255,.04); }
.wz-tab-active { color:var(--accent); border-bottom-color:var(--accent); background:rgba(59,130,246,.08); }
.wz-tab-done { color:var(--green); }
.wz-tab-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:rgba(255,255,255,.08);
    font-size:.7rem; font-weight:700;
    flex-shrink:0;
}
.wz-tab-active .wz-tab-num { background:var(--accent); color:#fff; }
.wz-tab-done  .wz-tab-num  { background:var(--green);  color:#fff; }
.wz-tab-line  { flex:1; height:1px; background:var(--border); min-width:12px; margin:0 .25rem; }
.wz-tab-line-done { background:var(--green); opacity:.5; }

/* 3-column body */
.wz-body {
    display:grid;
    grid-template-columns: 176px 1fr 220px;
    gap:0;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    min-height:520px;
}

/* Left nav */
.wz-nav {
    border-right:1px solid var(--border);
    background:var(--bg);
    display:flex; flex-direction:column;
    padding-top:.5rem;
}
.wz-nav-phase {
    display:flex; align-items:center; gap:.5rem;
    padding:.6rem .85rem .4rem;
    margin-bottom:.25rem;
}
.wz-nav-phase-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    background:var(--accent); color:#fff;
    font-size:.72rem; font-weight:800; flex-shrink:0;
}
.wz-nav-phase-label {
    font-size:.78rem; font-weight:700; color:var(--text);
}
.wz-nav-list { list-style:none; padding:0; margin:0; }
.wz-nav-item {
    display:flex; align-items:center; gap:.55rem;
    padding:.45rem .85rem;
    font-size:.78rem; color:var(--text-muted);
    cursor:pointer;
    border-left:2px solid transparent;
    transition:color .12s, background .12s;
}
.wz-nav-item:hover { color:var(--text); background:rgba(255,255,255,.03); }
.wz-nav-active { color:var(--text); border-left-color:var(--accent); background:rgba(59,130,246,.06); font-weight:600; }
.wz-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--border); flex-shrink:0;
    transition:background .2s;
}
.wz-dot-on { background:var(--green); }

/* Main content area */
.wz-main {
    padding:1.25rem 1.5rem;
    overflow-y:auto;
    display:flex; flex-direction:column; gap:0;
}
.wz-section { margin-bottom:1.5rem; }
.wz-section:last-of-type { margin-bottom:0; }
.wz-section-head {
    font-size:.72rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-muted);
    padding:.3rem 0 .6rem;
    border-bottom:1px solid var(--border);
    margin-bottom:.85rem;
}
.wz-context {
    background:var(--bg);
    border-left:3px solid var(--accent);
    border-radius:0 5px 5px 0;
    padding:.65rem .9rem;
    font-size:.8rem; color:var(--text-muted);
    line-height:1.6; margin-bottom:.85rem;
}
.wz-context strong { color:var(--text); }
.wz-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.wz-field { display:flex; flex-direction:column; gap:.3rem; }
.wz-field label { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.wz-input { font-size:.85rem !important; }
.wz-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:1rem; margin-top:1.25rem;
    border-top:1px solid var(--border);
}

/* Right progress panel */
.wz-panel {
    border-left:1px solid var(--border);
    background:var(--bg);
    display:flex; flex-direction:column;
    overflow-y:auto;
}
.wz-panel-section {
    padding:.9rem 1rem;
    border-bottom:1px solid var(--border);
}
.wz-panel-section:last-child { border-bottom:none; }
.wz-panel-head {
    font-size:.68rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.1em;
    color:var(--text-muted);
    margin-bottom:.7rem;
    padding-bottom:.5rem;
    border-bottom:1px solid var(--border);
}

/* Progress ring */
.wz-progress-ring-wrap {
    position:relative; width:68px; margin:0 auto .75rem;
}
.wz-ring { width:68px; height:68px; transform:rotate(-90deg); }
.wz-ring-bg  { fill:none; stroke:var(--border); stroke-width:4; }
.wz-ring-fill {
    fill:none; stroke:var(--accent); stroke-width:4;
    stroke-linecap:round;
    transition:stroke-dashoffset .4s ease, stroke .3s;
}
.wz-ring-label {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.wz-ring-pct  { font-size:.9rem; font-weight:800; color:var(--text); line-height:1; }
.wz-ring-sub  { font-size:.6rem; color:var(--text-muted); }

/* Checklist */
.wz-check-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.wz-check-item {
    display:flex; align-items:flex-start; gap:.45rem;
    font-size:.75rem; color:var(--text-muted);
    line-height:1.4;
}
.wz-check-ok { color:var(--text); }
.wz-check-icon { font-size:.7rem; flex-shrink:0; margin-top:.1rem; color:var(--text-muted); }
.wz-check-ok .wz-check-icon { color:var(--green); }

/* Overall progress list */
.wz-overall-list { display:flex; flex-direction:column; gap:.3rem; }
.wz-overall-item {
    display:flex; align-items:center; gap:.5rem;
    font-size:.75rem; color:var(--text-muted);
    padding:.25rem .35rem; border-radius:4px;
}
.wz-overall-done { color:var(--text); }
.wz-overall-current { color:var(--accent); font-weight:700; background:rgba(59,130,246,.06); }
.wz-overall-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; flex-shrink:0;
    font-size:.65rem; font-weight:700;
    background:rgba(255,255,255,.06); color:var(--text-muted);
}
.wz-overall-done    .wz-overall-num { background:var(--green); color:#fff; }
.wz-overall-current .wz-overall-num { background:var(--accent); color:#fff; }
.wz-overall-name { flex:1; }
.wz-overall-tick {
    font-size:.65rem; font-weight:700;
    color:var(--green); text-transform:uppercase; letter-spacing:.05em;
}
.wz-overall-active { color:var(--accent) !important; }

/* Tip text */
.wz-tip { font-size:.77rem; color:var(--text-muted); line-height:1.55; }
.wz-prefill-bar { background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.2); border-radius:6px; padding:.55rem .9rem; margin-bottom:1rem; font-size:.78rem; }
.wz-prefill-msg  { color:var(--text-muted); }
.wz-prefill-link { color:var(--accent); text-decoration:none; font-weight:600; }
.wz-prefill-link:hover { text-decoration:underline; }

/* Policy select coloring */
.wz-policy-select option { background:var(--bg-card); }

/* Policy registry card layout (Step 4) */
.wz-policy-cards { display:flex; flex-direction:column; gap:.55rem; }
.wz-policy-card { background:var(--bg-card); border:1px solid var(--border); border-radius:7px; padding:.7rem .9rem; }
.wz-policy-card-top { display:flex; align-items:center; gap:.75rem; margin-bottom:.4rem; }
.wz-policy-title { flex:1; font-size:.82rem; font-weight:600; color:var(--text); }
.wz-policy-card-desc textarea { width:100%; resize:vertical; }

/* Section tip icon */
.wz-section-tip { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid var(--border); color:var(--text-muted); font-size:.65rem; cursor:help; margin-left:.35rem; vertical-align:middle; }


/* Responsive: collapse 3-col on small screens */
@media (max-width: 900px) {
    .wz-body { grid-template-columns: 1fr; }
    .wz-nav  { display:none; }
    .wz-panel { border-left:none; border-top:1px solid var(--border); }
}

/* Legacy stepper (kept for any remnant references) */
.setup-stepper { display:none; }
.setup-step, .setup-step-circle, .setup-step-label, .setup-step-line { display:none; }

/* ── Polaris Chat ───────────────────────────────────────── */
.polaris-panel { display: flex; flex-direction: column; gap: 0; padding: 0; }
.polaris-context { padding: .75rem 1.25rem; font-size: .78rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.polaris-history { flex: 1; min-height: 300px; max-height: 60vh; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.polaris-empty { text-align: center; padding: 2rem 1rem; color: var(--text-muted); }
.polaris-turn { display: flex; flex-direction: column; gap: .5rem; }
.polaris-q { background: rgba(59,130,246,.08); border-radius: 8px; padding: .6rem .9rem; font-size: .88rem; }
.polaris-q-label { font-weight: 700; font-size: .7rem; color: var(--accent); display: block; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .05em; }
.polaris-a { font-size: .88rem; }
.polaris-a-label { font-weight: 700; font-size: .7rem; color: var(--green); display: block; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .05em; }
.polaris-a-text { white-space: pre-wrap; line-height: 1.55; }
.polaris-citations { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.polaris-cite { font-size: .7rem; cursor: default; }
.polaris-thinking { font-size: .88rem; color: var(--text-muted); }
.polaris-dots { color: var(--text-muted); font-style: italic; }
.polaris-input-row { display: flex; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid var(--border); }
.polaris-input { flex: 1; }

/* ── Sidebar collapse ───────────────────────────────────────────────── */
/* Collapse button sits absolute top-right — shares the same row as Home */
.sidebar-collapse-btn {
    position:absolute; top:0; right:0;
    background:none; border:none; border-left:1px solid var(--border);
    color:var(--text-muted); font-size:.9rem; padding:.38rem .55rem;
    cursor:pointer; line-height:1; transition:color .2s; z-index:1;
}
.sidebar-collapse-btn:hover { color:var(--text); }
/* Collapsed: shrink to 28px — overflow:hidden removed so absolute button stays visible */
.sidebar.collapsed { width:28px; min-width:28px; padding:0; }
.sidebar.collapsed ul,
.sidebar.collapsed .nav-separator { display:none; }
.sidebar.collapsed .sidebar-collapse-btn {
    left:0; right:0; border-left:none; border-right:1px solid var(--border);
    text-align:center; padding:.5rem 0;
}

/* ── CMMC Controls workflow layout ──────────────────────────────────── */
.cc-layout { display:flex; gap:0; height:100%; min-height:0; }
.cc-nav {
    width:260px; min-width:260px; overflow-y:auto; border-right:1px solid var(--border);
    background:var(--bg-sidebar,var(--bg-panel)); padding:.5rem 0; flex-shrink:0;
}
.cc-main { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }
.cc-domain-head {
    font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted); padding:.6rem 1rem .3rem; margin-top:.25rem;
}
.cc-ctrl-item {
    display:flex; align-items:center; gap:.5rem; padding:.32rem 1rem;
    text-decoration:none; color:var(--text-muted); font-size:.8rem;
    border-left:3px solid transparent; transition:background .15s, color .15s;
    line-height:1.3;
}
.cc-ctrl-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.cc-ctrl-active { background:rgba(59,130,246,.1); color:var(--accent); border-left-color:var(--accent); }
.cc-ctrl-id { font-family:monospace; font-size:.72rem; white-space:nowrap; flex-shrink:0; }
.cc-ctrl-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-status-dot {
    width:7px; height:7px; border-radius:50%; flex-shrink:0;
    background:var(--border);
}
.cc-status-dot.implemented       { background:var(--green); }
.cc-status-dot.partially_implemented,
.cc-status-dot.planned,
.cc-status-dot.alternative       { background:var(--yellow); }
.cc-status-dot.not_implemented   { background:var(--red); }
.cc-status-dot.not_applicable    { background:var(--text-muted); }

/* control detail */
.cc-ctrl-header { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.cc-ctrl-badge  { font-family:monospace; font-size:.82rem; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.25); color:var(--accent); padding:.2rem .55rem; border-radius:4px; }
.cc-ctrl-title  { font-size:1.15rem; font-weight:700; color:var(--text-bright); }
.cc-ctrl-desc   { color:var(--text-muted); font-size:.88rem; margin-bottom:1.25rem; line-height:1.55; }
.cc-status-row  { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.cc-s-btn { padding:.32rem .85rem; border:1px solid var(--border); border-radius:4px; background:none; color:var(--text-muted); font-size:.8rem; cursor:pointer; transition:all .15s; }
.cc-s-btn:hover { border-color:var(--accent); color:var(--accent); }
.cc-s-btn.active-met       { background:var(--green);  color:#fff; border-color:var(--green); }
.cc-s-btn.active-partial   { background:var(--yellow); color:#111; border-color:var(--yellow); }
.cc-s-btn.active-planned   { background:var(--blue);   color:#fff; border-color:var(--blue); }
.cc-s-btn.active-not       { background:var(--red);    color:#fff; border-color:var(--red); }
.cc-s-btn.active-na        { background:var(--border); color:var(--text); border-color:var(--border); }
.cc-s-btn.active-alt       { background:var(--purple); color:#fff; border-color:var(--purple); }

.cc-question { margin-bottom:1rem; }
.cc-question label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:.35rem; }
.cc-question label .cc-q-source { font-weight:400; color:var(--text-muted); font-size:.75rem; margin-left:.4rem; }
.cc-question textarea { width:100%; max-width:100%; min-height:72px; resize:vertical; }
.cc-policy-link { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.18); border-radius:6px; margin-bottom:1.25rem; }
.cc-policy-title { font-size:.88rem; font-weight:600; }
.cc-no-policy { color:var(--text-muted); font-size:.85rem; font-style:italic; }
.cc-add-q-form { display:flex; gap:.5rem; margin-top:.75rem; }
.cc-progress-bar { height:4px; background:var(--border); border-radius:2px; margin:.5rem 1rem .75rem; }
.cc-progress-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .3s; }

/* ── Inline Policy Panel ────────────────────────────────────────────── */
.cc-policy-panel {
    width:420px; min-width:420px; flex-shrink:0;
    border-left:1px solid var(--border); display:flex; flex-direction:column;
    background:var(--bg-card); overflow:hidden;
    transition:width .25s, min-width .25s;
}
.cc-policy-panel.collapsed { width:0; min-width:0; border-left:none; }
.cc-pp-header {
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.55rem .75rem; border-bottom:1px solid var(--border);
    background:var(--bg-header); flex-shrink:0;
}
.cc-pp-toggle {
    background:none; border:none; color:var(--text-muted); font-size:1.1rem;
    cursor:pointer; padding:.1rem .3rem; line-height:1; flex-shrink:0;
    transition:color .15s;
}
.cc-pp-toggle:hover { color:var(--text); }
.cc-pp-title {
    font-size:.78rem; font-weight:600; color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    display:flex; align-items:center; gap:.4rem;
}
.cc-pp-save-status { font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
.cc-pp-chips {
    display:flex; flex-wrap:wrap; gap:.3rem; padding:.5rem .75rem;
    border-bottom:1px solid var(--border); flex-shrink:0;
    background:rgba(255,255,255,.02);
}
.cc-chip {
    font-size:.64rem; padding:.15rem .45rem; border-radius:3px; cursor:pointer;
    background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.25);
    color:var(--accent); line-height:1.4; transition:background .15s;
}
.cc-chip:hover { background:rgba(59,130,246,.22); }
.cc-pp-body { flex:1; overflow-y:auto; padding:.75rem; }
.cc-pp-editor {
    outline:none; min-height:300px; font-size:.85rem; line-height:1.65;
    color:var(--text); caret-color:var(--accent);
}
.cc-pp-editor:focus { outline:none; }
.cc-pp-editor [data-placeholder] { color:var(--accent); background:rgba(59,130,246,.1);
    border-radius:2px; padding:0 .15rem; font-weight:600; }
.cc-pp-empty { text-align:center; padding:2rem 1rem; color:var(--text-muted); }

/* ── Document workbench: ribbon, rich-text surface, spreadsheet grid ── */
.ribbon {
    display:flex; flex-wrap:wrap; align-items:flex-start; gap:0;
    background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
    padding:.4rem .25rem; margin:.7rem 0;
}
.ribbon-group {
    display:flex; flex-direction:column; align-items:center; gap:.32rem;
    padding:.1rem .7rem; border-right:1px solid var(--border);
}
.ribbon-group:last-child { border-right:none; }
.ribbon-row { display:flex; align-items:center; gap:.18rem; }
.ribbon-label {
    font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-muted); font-weight:500;
}
.ribbon-btn {
    display:inline-flex; align-items:center; justify-content:center;
    height:30px; min-width:30px; padding:0 .55rem; font-size:.82rem;
    cursor:pointer; background:transparent; color:var(--text);
    border:1px solid transparent; border-radius:5px; line-height:1;
    transition:background .12s, border-color .12s; white-space:nowrap;
}
.ribbon-btn:hover { background:var(--bg-hover); border-color:var(--border); }
.ribbon-btn:active { background:var(--accent); color:#fff; border-color:var(--accent); }
.ribbon-btn b, .ribbon-btn i, .ribbon-btn u, .ribbon-btn s { font-size:.92rem; font-style:normal; }
.ribbon-btn b { font-weight:700; } .ribbon-btn i { font-style:italic; }
.ribbon-btn .ic { width:15px; height:15px; display:block; fill:currentColor; }
.ribbon-sep { align-self:stretch; width:1px; background:var(--border); margin:0 .15rem; }
.ribbon-select {
    height:30px; padding:0 .5rem; font-size:.82rem; background:var(--bg);
    color:var(--text); border:1px solid var(--border); border-radius:5px; cursor:pointer;
}

.rt-area {
    min-height:420px; padding:1.1rem 1.3rem; overflow-y:auto;
    background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:4px;
}
.rt-area:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.rt-area img { max-width:100%; height:auto; }
.rt-area table { border-collapse:collapse; }
.rt-area table td, .rt-area table th { border:1px solid var(--border); padding:.3rem .5rem; }
.rt-area a { color:var(--accent); }

/* Document Workbench launcher cards */
/* Document Workbench launcher — dense list (matches the app's table style) */
.wb-list { display:flex; flex-direction:column; gap:.3rem; margin-top:.6rem; }
.wb-list form { margin:0; }
.wb-row {
    display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; cursor:pointer;
    background:var(--bg-card); color:var(--text-bright);
    border:1px solid var(--border); border-radius:var(--radius); padding:.55rem .75rem;
    transition:border-color .15s, background .15s;
}
.wb-row:hover { border-color:var(--accent); background:var(--bg-hover); }
.wb-badge {
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    min-width:2.6rem; height:1.5rem; padding:0 .4rem; border-radius:var(--radius-sm);
    background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-border);
    font-family:var(--font-mono); font-weight:700; font-size:.72rem; letter-spacing:.02em;
}
.wb-badge-support { background:var(--overlay-medium); color:var(--text-muted); border-color:var(--border); }
.wb-row-title { flex:1 1 auto; font-weight:600; font-size:.85rem; }
.wb-row-wrap { display:flex; align-items:stretch; gap:.4rem; }
.wb-row-wrap .wb-row { flex:1 1 auto; }
.wb-row-wrap form { flex:1 1 auto; }
.wb-view-link { flex:0 0 auto; display:inline-flex; align-items:center; padding:0 .9rem;
    border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card);
    color:var(--blue); font-weight:600; font-size:.8rem; text-decoration:none; }
.wb-view-link:hover { border-color:var(--accent); background:var(--bg-hover); }

.sheet-grid-wrap { overflow:auto; max-height:600px; border:1px solid var(--border); border-radius:4px; }
table.sheet-grid { border-collapse:collapse; font-size:.82rem; }
table.sheet-grid th {
    background:var(--bg); color:var(--text-muted); font-weight:600;
    border:1px solid var(--border); padding:.2rem .45rem; text-align:center;
    position:sticky; top:0; min-width:2.2rem;
}
table.sheet-grid td { border:1px solid var(--border); padding:0; }
input.sheet-cell {
    width:100%; min-width:6rem; box-sizing:border-box; border:none; outline:none;
    padding:.25rem .45rem; background:var(--bg-card); color:var(--text); font-size:.82rem;
}
input.sheet-cell:focus { background:var(--bg-hover); outline:2px solid var(--accent); outline-offset:-2px; }
table.sheet-rendered { border-collapse:collapse; }
table.sheet-rendered td { border:1px solid var(--border); padding:.3rem .55rem; color:var(--text); }

/* Setup wizard */
.wiz-steps { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.wiz-step { display:flex; align-items:center; gap:.4rem; flex:1 1 auto; min-width:120px;
    padding:.45rem .7rem; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text-muted); font-size:.85rem; }
.wiz-step.active { border-color:var(--accent); color:var(--text); background:var(--bg-hover); }
.wiz-step.done { color:var(--text); }
.wiz-step-num { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
    border-radius:50%; font-size:.78rem; font-weight:600; background:var(--bg-card); border:1px solid var(--border); }
.wiz-step.active .wiz-step-num { background:var(--accent); color:#fff; border-color:var(--accent); }
.wiz-step.done .wiz-step-num { background:var(--green); color:#fff; border-color:var(--green); }
.wiz-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.6rem 1rem; }
.wiz-rowset { padding:.6rem; border:1px dashed var(--border); border-radius:6px; margin-bottom:.6rem; align-items:end; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; }
.wiz-done-links { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.2rem; }

/* Read-only policy viewer — provenance banner */
.doc-banner { border-left: 3px solid var(--green); }
.doc-banner-head { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; justify-content:space-between; }
.doc-banner-title { margin:0; }
.doc-banner-meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.75rem 1.5rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.doc-meta-item { display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.doc-meta-label { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.doc-meta-value { font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.doc-rendered { line-height:1.6; max-width:70rem; }
.doc-rendered h1 { font-size:1.5rem; margin:1.2rem 0 .6rem; }
.doc-rendered h2 { font-size:1.2rem; margin:1.1rem 0 .5rem; }
.doc-rendered h3 { font-size:1.02rem; margin:1rem 0 .4rem; }
.doc-rendered p, .doc-rendered li { margin:.4rem 0; }
.doc-rendered ul, .doc-rendered ol { padding-left:1.4rem; }
.doc-rendered table { border-collapse:collapse; margin:.6rem 0; }
.doc-rendered th, .doc-rendered td { border:1px solid var(--border); padding:.35rem .6rem; }

/* CMMC self-attestation section (Help) */
.att-family { padding-top:.4rem; padding-bottom:.4rem; }
.att-family > details > summary {
    list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center;
    gap:.6rem .8rem; padding:.35rem 0;
}
.att-family > details > summary::-webkit-details-marker { display:none; }
.att-family > details > summary::before {
    content:"\25B8"; color:var(--text-muted); font-size:.85rem; transition:transform .15s ease;
}
.att-family > details[open] > summary::before { transform:rotate(90deg); }
.att-code {
    font-family:var(--mono, ui-monospace, Menlo, monospace); font-weight:700; font-size:.82rem;
    letter-spacing:.05em; color:#c084fc; background:rgba(168,85,247,.16);
    border:1px solid rgba(168,85,247,.3); border-radius:5px; padding:.12rem .5rem; min-width:2.4rem; text-align:center;
}
.att-name { font-weight:700; font-size:1.02rem; margin-right:.3rem; }
.att-summary { margin:.6rem 0 .9rem; max-width:80ch; }
.att-table td:nth-child(3) { font-size:.86rem; }
.att-table td:nth-child(2) { white-space:nowrap; }

/* R3: data tables scroll horizontally instead of overflowing on narrow screens.
   Desktop is unaffected. Fixes the 90 tables that never used .table-wrap. */
@media (max-width: 768px) {
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* R3: home-page classes replacing one-off inline styles (appearance-preserving). */
.kpi-status-good { border-top-color: var(--green); }
.kpi-status-warn { border-top-color: var(--yellow); }
.kpi-status-low  { border-top-color: var(--orange); }
.kpi-status-bad  { border-top-color: var(--red); }
.panel-flex-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.vuln-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; margin-top: var(--space-3); }
.vuln-filters .form-row { margin: 0; }
.vuln-filters .form-input { width: auto; }
.domain-bar-row.is-total { margin-bottom: 0; }
.domain-bar-row.is-total .domain-label { font-size: .95rem; }
.domain-bar-row.is-total .domain-bar-bg { height: 34px; }
.domain-bar-row.is-total .domain-pct { font-size: 1.15rem; font-weight: 700; }
.table-spaced { margin-top: var(--space-3); }
.accent-left-green { border-left: 3px solid var(--green); }
.accent-left-accent { border-left: 3px solid var(--accent); }
.accent-left-blue { border-left: 3px solid var(--blue); }
.accent-left-yellow { border-left: 3px solid var(--yellow); }
.w-auto-inline { width: auto; display: inline-block; }
/* spacing/size utilities (replace remaining one-off inline styles) */
.mt-4 { margin-top: .4rem; }
.mt-6 { margin-top: .6rem; }
.mt-8 { margin-top: .8rem; }
.ml-2 { margin-left: .5rem; }
.fs-72 { font-size: .72rem; }
.fs-80 { font-size: .8rem; }
.fs-82 { font-size: .82rem; }
.fs-85 { font-size: .85rem; }
.text-center { text-align: center; }
.d-block { display: block; }
.w-2rem { width: 2rem; }

/* ============================================================
   Tickets/helpdesk, control popover, horizontal form grids,
   calendar month-nav, trend tooltip, policies.  (2026-07-14)
   ============================================================ */

/* Bulletproof the JS toggles regardless of .panel display rules. */
#add-task[hidden], .control-pop[hidden], .trend-tip[hidden], .cve-scan-status[hidden] { display: none !important; }

/* --- Horizontal form grid (add task / add system) --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}
.form-grid .form-field { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.form-grid .form-field label { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.form-grid .form-input { max-width: none; width: 100%; box-sizing: border-box; margin: 0; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .form-check { flex-direction: row; align-items: center; }
.form-grid .form-check label { font-size: .82rem; color: var(--text); display: flex; align-items: center; gap: var(--space-2); }
.form-grid .form-actions { align-self: end; }
/* The submit row of an inline add form (Training, Systems, Tasks, SPRS) takes
   the whole last row and puts its button at the right edge, where a form ends. */
.form-grid .form-field.form-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
}

/* --- Clickable task title + control chip --- */
.ticket-link { color: var(--text-bright); text-decoration: none; }
.ticket-link:hover { color: var(--blue); text-decoration: underline; }
.control-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .74rem;
    padding: .1rem .4rem;
    border-radius: var(--radius-sm);
    background: rgba(59,130,246,.14);
    color: #60a5fa;
    border: 1px solid var(--blue-border);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.control-chip:hover { background: var(--blue-bg-hover); }

/* --- Control popover card (opened by tasks.js) --- */
.control-pop {
    position: absolute;
    z-index: 300;
    width: min(360px, calc(100vw - 24px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
}
.control-pop-head { font-weight: 700; color: var(--text-bright); font-size: .85rem; margin-bottom: var(--space-2); }
.control-pop-body { color: var(--text-muted); font-size: .8rem; line-height: 1.5; margin: 0 0 var(--space-3); }
.control-pop-go { font-size: .78rem; }

/* --- Calendar month navigation --- */
.cal-header-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.cal-header-row .cal-title { margin: 0; flex: 1 1 auto; min-width: 10rem; text-align: center; }
.cal-nav-btn { font-size: 1rem; line-height: 1; padding: .25rem .6rem; }

/* --- Ticket detail (helpdesk) --- */
.ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-3); }
.ticket-title { margin: 0 0 var(--space-2); }
.ticket-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.ticket-id { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; color: var(--text-muted); }
.ticket-desc { margin-top: var(--space-3); color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.ticket-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 820px) { .ticket-grid { grid-template-columns: 1fr; } }
.ticket-notes { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ticket-note { border-left: 2px solid var(--border); padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.ticket-note-meta { display: flex; gap: var(--space-3); align-items: baseline; font-size: .8rem; margin-bottom: var(--space-1); }
.ticket-note-body { color: var(--text); font-size: .85rem; line-height: 1.55; white-space: pre-wrap; }
.ticket-note-form label { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-bottom: var(--space-1); }
.ticket-note-form textarea.form-input { max-width: none; width: 100%; box-sizing: border-box; }
.ticket-props { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-5); font-size: .82rem; }
.ticket-props dt { color: var(--text-muted); font-weight: 600; }
.ticket-props dd { margin: 0; color: var(--text); }
.ticket-actions { display: flex; flex-direction: column; gap: var(--space-4); border-top: 1px solid var(--border-light); padding-top: var(--space-4); }
.ticket-action label { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-bottom: var(--space-1); }
.ticket-action-row { display: flex; gap: var(--space-2); }
.ticket-action-row .form-input { max-width: none; width: 100%; margin: 0; }
.btn-block { display: block; width: 100%; }

/* --- Policies list --- */
.policy-link { color: var(--blue); font-weight: 600; font-size: .9rem; text-decoration: none; }
.policy-link:hover { text-decoration: underline; }

/* --- Danger / delete affordance (ticket delete) --- */
.ticket-danger { margin-top: var(--space-2); }
.ticket-danger summary { cursor: pointer; color: var(--red); font-size: .8rem; font-weight: 600; list-style: revert; }
.ticket-danger > p { font-size: .78rem; margin: var(--space-2) 0; }
.ticket-sysnote { font-size: .78rem; font-style: italic; margin-top: var(--space-2); }

/* ── Interface theme switcher (top bar) ─────────────────────────────────── */
.theme-switch {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .72rem;
    padding: .3rem .5rem;
    cursor: pointer;
}
.theme-switch:hover { color: var(--text); border-color: var(--text-dim); }
.theme-switch:focus { outline: none; border-color: var(--accent); }

/* ── Global anchor colour: never fall back to the UA blue→purple on visit ──
 * :where() keeps this at (0,0,1) specificity, so any classed link/button
 * (.btn, .pill-*, .ticket-link, .policy-link, .control-chip …) overrides it
 * and keeps its own colour; only otherwise-unstyled anchors are affected. */
a:where(:link, :visited, :active) { color: var(--blue); }
.policy-link:visited, .policy-link:active { color: var(--blue); }
.control-chip:visited, .control-chip:active { color: #60a5fa; }

/* Clickable helpdesk rows (Tickets & Tasks) — the whole row opens the ticket. */
.data-table tbody tr.row-link { cursor: pointer; }

/* --- CMMC Controls: evidence-binding summary + filter chips + per-row dot --- */
.binding-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); font-size: .82rem; color: var(--text-muted); }
.binding-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ev-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .6rem; vertical-align: middle; flex: 0 0 auto; }
.ev-bound { background: var(--green); }
.ev-stale { background: var(--yellow); }
.ev-unbound { background: var(--red); }

/* --- Guided interview mode (Document Workbench) --- */
.guided-progress { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.guided-progress-bar { flex: 1 1 12rem; height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.guided-progress-fill { height: 100%; background: var(--accent); transition: width var(--transition); }
.guided-card { max-width: none; }
.guided-q { display: block; font-size: 1.05rem; font-weight: 600; color: var(--text-bright); margin-bottom: var(--space-2); }
.guided-help { font-size: .85rem; line-height: 1.5; margin-bottom: var(--space-4); }
.guided-checks { display: flex; flex-direction: column; gap: var(--space-2); }
.guided-check { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; color: var(--text); }
.guided-satisfies { font-weight: 400; font-size: .8rem; color: var(--accent); font-family: var(--font-mono); }
.guided-field-row { display: flex; gap: 1.25rem; align-items: flex-start; }
.guided-field-row .form-input { flex: 1 1 auto; max-width: none; }
.guided-example { flex: 0 0 42%; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius); padding: .6rem .75rem; line-height: 1.5; }
.guided-example-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: .35rem; font-weight: 700; }
.guided-example-body { font-size: .82rem; color: var(--text-muted); }
@media (max-width: 780px) { .guided-field-row { flex-direction: column; } .guided-example { flex-basis: auto; width: 100%; } }
.guided-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.guided-nav-spacer { flex: 1 1 auto; }

/* --- Document export buttons (policy view / SSP) --- */
.doc-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.accent-left-red { border-left: 3px solid var(--red); }

/* --- Audit-by-family: collapsible families + per-control notes/evidence --- */
.audit-family-head { cursor: pointer; font-size: 1rem; padding: .2rem 0; }
.audit-control { border-top: 1px solid var(--border-light); padding: var(--space-3) 0; }
.audit-control:first-of-type { border-top: none; }
.audit-control-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.audit-evidence { margin: var(--space-2) 0; font-size: .8rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.audit-notes { max-width: none; width: 100%; box-sizing: border-box; margin-top: var(--space-2); }
.audit-notes-ro { font-size: .82rem; margin-top: var(--space-2); }

/* --- Control assessment objectives (a,b,c sub-control breakdown) --- */
.objective-letter { font-family: var(--font-mono); color: var(--accent); font-weight: 700; margin-right: .25rem; }

/* --- Business-workflow drag-drop canvas --- */
/* Workflow inventory — clean stacked list (mirrors the policy workbench list) */
.wf-inventory { display: flex; flex-direction: column; gap: .3rem; margin-top: .75rem; max-width: 640px; }
.wf-inv-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); text-decoration: none; }
.wf-inv-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.wf-inv-item.is-current { border-color: var(--blue); background: var(--blue-bg); color: var(--text-bright); }
.wf-inv-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 1.5rem; padding: 0 .35rem; border-radius: var(--radius-sm); background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); font-family: var(--font-mono); font-weight: 700; font-size: .72rem; }
.wf-inv-name { flex: 1 1 auto; font-weight: 600; font-size: .9rem; }
.wf-inv-del { border: none; background: none; color: var(--red); font-size: .76rem; cursor: pointer; padding: 0 .2rem; }
.wf-inv-del:hover { text-decoration: underline; }
.wf-inv-new { display: flex; gap: .4rem; margin-top: .5rem; max-width: 640px; }
.wf-inv-new .form-input { flex: 1 1 auto; }

/* Workflow card sections (header / body / footer) */
.wf-head { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border-light); }
.wf-body { display: flex; flex-direction: column; gap: .45rem; padding: .5rem 0; }
.wf-foot { display: flex; flex-direction: column; gap: .3rem; padding-top: .45rem; border-top: 1px solid var(--border-light); }
.wf-frow { display: flex; flex-direction: column; gap: .05rem; }
.wf-flabel { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.wf-toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.wf-canvas { position: relative; height: 660px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow-y: scroll; overflow-x: auto; }
.wf-edges { position: absolute; top: 0; left: 0; width: 100%; height: 1500px; pointer-events: none; overflow: visible; }
.wf-edge { stroke: var(--accent); stroke-width: 2; fill: none; }
.wf-edge-yes { stroke: var(--green); }
.wf-edge-no { stroke: var(--red); }
.wf-edge-label { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.wf-block { position: absolute; z-index: 1; width: 300px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .8rem; cursor: move; box-shadow: var(--shadow); user-select: none; display: flex; flex-direction: column; gap: .32rem; }
.wf-block.wf-dragging { box-shadow: var(--shadow-lg); z-index: 5; }
/* Opaque so connector lines routed behind it don't show through the tint. */
.wf-block.wf-cui { border-color: var(--red); background-color: var(--bg-card); background-image: linear-gradient(var(--red-bg), var(--red-bg)); }
.wf-block.wf-decision { border-color: var(--yellow); border-style: dashed; }
.wf-badge { align-self: flex-start; font-size: .82rem; font-weight: 700; letter-spacing: .05em; padding: .12rem .45rem; border-radius: var(--radius-sm); background: var(--border); color: var(--text-muted); }
.wf-cui .wf-badge { background: var(--red); color: #fff; }
.wf-decision .wf-badge { background: var(--yellow); color: #1a1a1a; }
.wf-block input, .wf-block select { width: 100%; border: none; background: transparent; color: var(--text-bright); font-size: 1.02rem; }
.wf-block input:focus, .wf-block select:focus { outline: none; }
.wf-block-label { font-weight: 600; }
.wf-block-sys { color: var(--accent); font-family: var(--font-mono); font-size: .95rem; }
.wf-block-desc, .wf-block-person { color: var(--text-muted); font-size: .98rem; }
.wf-cui-toggle { font-size: .92rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.wf-cui-toggle input { width: auto; }
.wf-link, .wf-branch select { border-top: 1px solid var(--border-light); padding-top: .2rem; color: var(--text-muted); font-size: .95rem; }
.wf-branch { display: flex; gap: .3rem; align-items: center; }
.wf-branch-label { flex: 0 0 40%; font-size: .92rem; }
.wf-block-del { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--red); color: #fff; font-size: .95rem; line-height: 1; cursor: pointer; z-index: 2; }

/* --- Compliance stage: banner, stepper, move-cards (Phase 3) --- */
.stage-banner { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: .5rem 1.25rem; border-bottom: 1px solid var(--border); font-size: .85rem; }
.stage-banner.stage-self_assess { background: var(--yellow-bg); border-bottom-color: var(--yellow); }
.stage-banner.stage-audit { background: var(--red-bg); border-bottom-color: var(--red); }
.stage-banner.stage-reassess { background: var(--green-bg, rgba(22,163,74,.12)); border-bottom-color: var(--green); }
.stage-banner-badge { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
    padding: .12rem .5rem; border-radius: var(--radius-sm); }
.stage-self_assess .stage-banner-badge { background: var(--yellow); color: #1a1a1a; }
.stage-audit .stage-banner-badge { background: var(--red); color: #fff; }
.stage-reassess .stage-banner-badge { background: var(--green); color: #fff; }
.stage-banner-text { color: var(--text-muted); flex: 1 1 240px; min-width: 0; }
.stage-banner-link, .stage-banner-link:where(:link, :visited) { font-weight: 600; white-space: nowrap;
    color: var(--text-bright); text-decoration: underline; text-underline-offset: 2px; }
.stage-banner-manage { color: var(--text-muted); }

.stage-stepper { display: flex; gap: var(--space-2); list-style: none; margin: var(--space-3) 0 0; padding: 0; flex-wrap: wrap; }
.stage-step { display: flex; align-items: center; gap: .5rem; flex: 1 1 160px; padding: .6rem .8rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text-muted); }
.stage-step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; border: 1px solid var(--border); font-size: .78rem; font-weight: 700; flex: 0 0 auto; }
.stage-step-label { font-weight: 600; }
.stage-step.done { border-color: var(--green-border); }
.stage-step.done .stage-step-num { background: var(--green); color: #06210f; border-color: var(--green); }
.stage-step.current { border-color: var(--accent); background: var(--blue-bg-active); color: var(--text-bright); }
.stage-step.current .stage-step-num { background: var(--accent); color: #fff; border-color: var(--accent); }

.stage-move-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.stage-move-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); background: var(--bg); display: flex; flex-direction: column; gap: .5rem; }
.stage-move-card.is-current { border-color: var(--accent); background: var(--blue-bg-active); }
.stage-move-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stage-move-name { font-weight: 700; }
.stage-move-desc { font-size: .8rem; flex: 1 1 auto; margin: 0; }
.stage-snap-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* --- Inline form row (compact add-record forms) --- */
.form-inline { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* --- Guided tours + contextual help popovers (Phase 5) --- */
.help-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
    border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
    font-size: .72rem; font-weight: 700; cursor: pointer; padding: 0; margin-left: .4rem; vertical-align: middle; line-height: 1; }
.help-dot:hover { color: var(--text-bright); border-color: var(--accent); }
.help-popover { position: absolute; z-index: 1200; max-width: 300px; background: var(--bg-card);
    border: 1px solid var(--accent); border-radius: var(--radius); padding: .6rem .75rem; color: var(--text-bright);
    font-size: .82rem; line-height: 1.4; box-shadow: var(--shadow-lg); }

.tour-overlay { position: fixed; inset: 0; z-index: 1300; background: transparent; }
.tour-spotlight { position: absolute; z-index: 1301; border: 2px solid var(--accent); border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.62); pointer-events: none; transition: all .2s ease; }
.tour-tooltip { position: absolute; z-index: 1302; width: 340px; max-width: 92vw; background: var(--bg-card);
    border: 1px solid var(--accent); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow-lg); }
.tour-tooltip .tour-title { font-weight: 700; color: var(--text-bright); margin-bottom: .3rem; }
.tour-tooltip .tour-body { color: var(--text-muted); font-size: .85rem; line-height: 1.45; margin-bottom: .7rem; }
.tour-tooltip .tour-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tour-tooltip .tour-count { color: var(--text-muted); font-size: .78rem; }
.help-list { margin: .3rem 0 .3rem 1.2rem; padding: 0; color: var(--text-muted); }
.help-list li { margin: .3rem 0; line-height: 1.5; }

/* --- Self-Assessment nudge toast (Phase 3) --- */
.tn-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 1250; max-width: 380px;
    display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .9rem; font-size: .85rem;
    background: var(--bg-card); color: var(--text-bright); border: 1px solid var(--yellow);
    border-left-width: 4px; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.tn-toast-link { white-space: nowrap; font-weight: 600; }
.tn-toast-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem;
    line-height: 1; cursor: pointer; padding: 0 .2rem; }
.tn-toast-close:hover { color: var(--text-bright); }

/* --- Assessment objectives shown inline on the CMMC controls list --- */
.obj-inline { margin: .35rem 0 0; padding-left: 0; list-style: none; }
.obj-inline li { font-size: .8rem; color: var(--text-muted); line-height: 1.4; margin: .1rem 0; }
.subctrl-line { font-size: .82rem; line-height: 1.45; margin: .1rem 0; }

/* App-styled modal dialogs (replace browser confirm/prompt). No backdrop blur. */
.app-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.app-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; padding: 1.25rem 1.4rem; }
.app-modal-title { margin: 0 0 .5rem; color: var(--text-bright); font-size: 1.05rem; }
.app-modal-msg { margin: 0 0 1rem; color: var(--text); line-height: 1.5; }
.app-modal-input { width: 100%; margin-bottom: 1rem; }
.app-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* Administration section tabs */
.admin-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--border); margin: .2rem 0 1.1rem; }
.admin-tab { padding: .55rem 1rem; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: .88rem;
  border: 1px solid transparent; border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px; }
.admin-tab:hover { color: var(--text-bright); background: var(--bg-hover); }
.admin-tab.active { color: var(--text-bright); background: var(--bg-card); border-color: var(--border); border-bottom-color: var(--bg-card); }

/* ── Vulnerabilities: relevance funnel + pipeline board ─────────────────── */
.cve-kw-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: .4rem 0 .4rem; }
.cve-kw-wrap { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.cve-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border, var(--blue)); border-radius: 20px; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; }
.cve-chip-x { border: none; background: none; color: var(--blue); cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; }
.cve-kw-add { display: inline-flex; gap: .35rem; align-items: center; }
.cve-kw-add .form-input { width: auto; min-width: 12rem; }
.cve-funnel-filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-bottom: 1rem; }

.cve-funnel { display: flex; flex-direction: column; align-items: center; gap: 0; margin: .5rem 0 1rem; }
.cve-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: .7rem 1.2rem; }
.cve-b0 { width: 100%; } .cve-b1 { width: 86%; } .cve-b2 { width: 70%; } .cve-b3 { width: 54%; }
.cve-band-l { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.cve-band-n { font-size: 1.5rem; font-weight: 800; color: var(--text-bright); line-height: 1; }
.cve-band-hi { background: var(--blue-bg); border-color: var(--blue); }
.cve-band-hi .cve-band-l { color: var(--blue); }
.cve-arrow { color: var(--text-muted); font-size: .68rem; padding: .28rem 0; }

.cve-rel-list { display: flex; flex-direction: column; gap: .4rem; }
.cve-rel { display: flex; align-items: center; gap: .7rem; background: var(--bg-card); border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: .5rem .75rem; }
.cve-rel.critical { border-left-color: var(--red); } .cve-rel.high { border-left-color: var(--orange); }
.cve-rel.medium { border-left-color: var(--yellow); } .cve-rel.low { border-left-color: var(--green); }
.cve-rel-id { font-family: var(--font-mono); font-weight: 700; color: var(--text-bright); min-width: 8.5rem; }
.cve-rel-cvss { font-family: var(--font-mono); font-size: .78rem; color: var(--text); }
.cve-rel-desc { flex: 1 1 auto; color: var(--text-muted); font-size: .82rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.cve-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; align-items: start; }
.cve-col { background: #12151d; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-height: 90px; }
.cve-col.cve-over { border-color: var(--blue); background: var(--blue-bg); }
.cve-col-head { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
.cve-col-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dot-blue { background: var(--blue); } .dot-yellow { background: var(--yellow); } .dot-orange { background: var(--orange); } .dot-purple { background: #a855f7; } .dot-green { background: var(--green); }
.cve-col-name { flex: 1 1 auto; font-weight: 700; font-size: .78rem; color: var(--text-bright); }
.cve-col-cnt { font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 0 .5rem; }
.cve-col-cards { padding: .5rem; display: flex; flex-direction: column; gap: .45rem; min-height: 30px; }
.cve-card { background: var(--bg-card); border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: .5rem .6rem; cursor: grab; }
.cve-card.critical { border-left-color: var(--red); } .cve-card.high { border-left-color: var(--orange); }
.cve-card.medium { border-left-color: var(--yellow); } .cve-card.low { border-left-color: var(--green); }
.cve-card.cve-dragging { opacity: .5; }
.cve-card-top { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cve-card-id { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; color: var(--text-bright); }
.cve-card-desc { color: var(--text-muted); font-size: .74rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cve-card-foot { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; }
.cve-card-cvss { font-family: var(--font-mono); font-size: .68rem; color: var(--text); }
.cve-card-vendor { font-size: .68rem; color: var(--text-muted); }
.cve-advanced { margin-top: .5rem; }
.cve-advanced-summary { cursor: pointer; color: var(--text-muted); font-weight: 600; padding: .5rem 0; }
@media (max-width: 1100px) { .cve-board { grid-template-columns: repeat(2, 1fr); } }

/* Funnel bands with inline filter controls */
.cve-band-main { flex: 1 1 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-width: 0; }
.cve-band-l { min-width: 9.5rem; }
.cve-band-ctl { display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; }
.cve-check { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--text); }
.cve-band-hint { font-size: .7rem; color: var(--text-muted); }
.cve-band .cve-kw-wrap { margin-bottom: 0; }
.cve-band .cve-kw-add .form-input { min-width: 9rem; }

/* Storage / disk usage bar (Security jobs) */
.disk-bar { height: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-top: .5rem; }
.disk-fill { height: 100%; background: var(--green); transition: width var(--transition); }
.disk-fill.disk-warn { background: var(--yellow); }
.disk-fill.disk-crit { background: var(--red); }

/* ── Vulnerabilities: severity group, scan step, spinner, card detail ────── */
.cve-sev-group { display: inline-flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }

/* Scan progress strip under the toolbar. The scan runs in the background, so
   the page polls it (cve.js): a spinning mark, the step in progress and a
   ticking clock show it is alive; the strip turns green or red when it ends.
   Its display:flex outranks the browser's [hidden] rule, so the strip is in
   the [hidden] list above: without it every visit showed a spinner. */
.cve-scan-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .75rem;
  padding: .55rem .8rem; border: 1px solid var(--border); border-left: 3px solid var(--blue);
  border-radius: var(--radius); background: var(--bg-card); }
.cve-scan-status[data-state="done"] { border-left-color: var(--green); }
.cve-scan-status[data-state="failed"] { border-left-color: var(--red); }
.cve-scan-status[data-state="done"] .cve-spin, .cve-scan-status[data-state="failed"] .cve-spin { display: none; }
.cve-scan-phase { color: var(--text-bright); font-weight: 600; }
/* The clock ticks every second: fixed-width digits keep it from jittering. */
.cve-scan-elapsed { font-variant-numeric: tabular-nums; }
.cve-spin { width: 42px; height: 42px; margin: 0 auto .9rem; border-radius: 50%;
  border: 4px solid var(--overlay-medium); border-top-color: var(--blue); animation: cve-spin 0.9s linear infinite; }
.cve-spin.cve-spin-sm { width: 16px; height: 16px; margin: 0; border-width: 2px; flex: none; }
@keyframes cve-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cve-spin { animation-duration: 2.4s; } }

/* Card detail modal (expanded card) */
.cve-detail { max-width: 560px; }
.cve-dt-desc { color: var(--text); line-height: 1.5; margin: 0 0 1rem; font-size: .9rem; }
.cve-dt-grid { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.1rem; }
.cve-dt-row { display: flex; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--overlay-subtle); }
.cve-dt-k { flex: 0 0 10rem; color: var(--text-muted); font-size: .82rem; }
.cve-dt-v { flex: 1 1 auto; color: var(--text); font-size: .86rem; word-break: break-word; }
.cve-dt-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cve-dt-note { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
.cve-dt-note label { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.cve-dt-note .form-input { max-width: none; width: 100%; box-sizing: border-box; margin: 0; }
.cve-dt-note .btn { align-self: flex-end; }
/* Raw feed table: the triage controls wrap inside their cell instead of
   running the table off the right edge of the page (the cell was nowrap). */
.cve-triage { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; min-width: 12rem; max-width: 20rem; }
.cve-triage > form:first-child { display: flex; gap: .35rem; }
.cve-triage select.form-input { width: auto; margin: 0; }
.cell-break { overflow-wrap: anywhere; }


/* ── Collapsed create forms ─────────────────────────────────────────────── */
/* "New change request" and "Report incident" are occasional actions sitting
   under the lists people actually come to read, so they start closed and the
   summary reads as the button it behaves like. <details> keeps this keyboard
   accessible and working with JS off. */
.form-collapse > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--blue);
    padding: .5rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    user-select: none;
    transition: background .15s, border-color .15s;
}
.form-collapse > summary::-webkit-details-marker { display: none; }
.form-collapse > summary::marker { content: ""; }
.form-collapse > summary:hover { background: var(--bg-hover); border-color: var(--blue); }
.form-collapse > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.form-collapse .form-collapse-caret { transition: transform .15s; font-size: .7rem; }
.form-collapse[open] .form-collapse-caret { transform: rotate(180deg); }
.form-collapse[open] > summary { margin-bottom: 1rem; }


/* ── Organisation name in the header ────────────────────────────────────── */
/* Centred over the CONTENT column -- where the home page's search bar sits --
   not over the whole bar. The sidebar takes --sidebar-w on the left, so the
   column's centre is half of that to the right of the bar's centre; centring
   on the bar left the name 140px left of the search bar beneath it.
   absolute + translate rather than a flex child, so it holds its place however
   wide the title on the left or the buttons on the right grow. The header is
   already position:relative. pointer-events:none keeps it from swallowing
   clicks aimed at anything beneath. */
.header-org {
    position: absolute;
    left: calc(50% + var(--sidebar-w) / 2);
    transform: translateX(-50%);
    max-width: 32vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-bright);
    pointer-events: none;
}
/* A collapsed sidebar is 28px wide, so the column's centre moves with it. */
body:has(.sidebar.collapsed) .header-org { left: calc(50% + 14px); }
/* Below this the left title and the right buttons meet in the middle, and an
   absolutely positioned name would overlap both. */
@media (max-width: 1100px) {
    .header-org { display: none; }
}

/* ── Role assignment checkboxes (Definitions → Key Personnel) ───────────── */
.role-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .3rem .9rem;
}
.role-checkbox {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .8rem;
    padding: .2rem 0;
    cursor: pointer;
}
.role-checkbox input { margin: 0; flex-shrink: 0; }
.person-roles-row > td { padding-top: 0; border-top: none; }
/* A role someone else already holds: shown, so you can see who has it, but not
   selectable — one person per role, and taking it has to be deliberate. */
.role-checkbox.role-taken { opacity: .5; cursor: not-allowed; }
.role-checkbox.role-taken input { cursor: not-allowed; }
/* The board cards open a detail modal on click, but `cursor: grab` only ever
   advertised the drag. Say both. */
.cve-card:hover { border-color: var(--blue); background: var(--bg-hover); }
.cve-card:hover .cve-card-id { text-decoration: underline; }

/* Auto-growing textareas: JS sets the height, so the manual handle would fight
   it on every keystroke. Vertical resize stays available where a user wants a
   bigger box than the content needs. */
textarea.form-input { resize: vertical; }


/* ── Textarea resize handle ─────────────────────────────────────────────── */
/* The native corner grip is a few faint pixels and people miss it entirely.
   Draw a larger, higher-contrast one. ::-webkit-resizer covers Chrome/Edge/
   Safari; the repeating-linear-gradient corner is the fallback that also shows
   in Firefox, which has no resizer pseudo-element. */
textarea.form-input{
  background-image:repeating-linear-gradient(135deg,
      transparent 0 3px, var(--border-strong, var(--text-muted)) 3px 4px);
  background-size:14px 14px;
  background-position:right 3px bottom 3px;
  background-repeat:no-repeat;
  padding-bottom:1.15rem;
}
textarea.form-input:focus{
  background-image:repeating-linear-gradient(135deg,
      transparent 0 3px, var(--blue) 3px 4px);
}
textarea.form-input::-webkit-resizer{
  background-image:repeating-linear-gradient(135deg,
      transparent 0 3px, var(--text-muted) 3px 4px);
  background-size:16px 16px;
}

/* ── Guided intake ──────────────────────────────────────────────────────── */
.intake-stats{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin-top:.6rem;
  font-size:.82rem;color:var(--text-mid)}
.intake-stats strong{color:var(--text);font-size:1rem}
.intake-chip{display:inline-block;font-family:var(--font-mono);font-size:.68rem;
  padding:1px 6px;margin:2px 3px 2px 0;border-radius:4px;border:1px solid var(--border);
  color:var(--text-muted);text-decoration:none}
.intake-chip:hover{border-color:var(--blue);color:var(--text)}
.intake-chip.done{background:var(--green-bg);border-color:transparent;color:var(--green);font-weight:600}
.intake-qid{font-size:.72rem;color:var(--text-muted);letter-spacing:.08em}
.intake-q{font-size:1.15rem;line-height:1.4;margin:.3rem 0 1rem}
.intake-reach{background:var(--bg-hover);border-left:3px solid var(--blue);
  border-radius:0 6px 6px 0;padding:.7rem .9rem;font-size:.85rem;color:var(--text-mid)}
.intake-reach strong{color:var(--text)}
.intake-related{background:var(--green-bg);border-left:3px solid var(--green);
  border-radius:0 6px 6px 0;padding:.75rem .9rem;margin-top:1rem;font-size:.85rem;color:var(--text-mid)}
.intake-reuse{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;
  padding:.6rem .7rem;margin-top:.6rem}
.intake-reuse-head{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-bottom:.35rem;
  font-size:.72rem;color:var(--text-muted)}
.intake-reuse-body{font-size:.82rem;color:var(--text-mid);line-height:1.5;margin-bottom:.5rem}
.intake-guide{background:var(--bg-hover);border-left:3px solid var(--blue);
  border-radius:0 6px 6px 0;padding:.7rem .9rem;margin-top:1rem;font-size:.85rem;
  color:var(--text-mid);line-height:1.6}
.intake-guide.evidence{border-left-color:var(--green)}
.intake-example{border:1.5px dashed var(--border);border-radius:8px;padding:.7rem .85rem;margin-top:1rem}
.intake-example-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  flex-wrap:wrap;margin-bottom:.4rem}
.intake-example-head .lbl{font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted)}
.intake-example-text{font-size:.82rem;color:var(--text-mid);line-height:1.6;font-style:italic;
  white-space:pre-wrap}
.intake-na{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;cursor:pointer}
.intake-na input{margin-top:.25rem;flex:none}
.intake-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  flex-wrap:wrap;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--border)}

/* Guided assessment — pathway selection.
   Presented as selectable cards rather than a dropdown, as the selection
   determines which 40 or 61 questions are assigned. */
.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem;align-items:stretch}
.track-card{position:relative;display:flex;border:1.5px solid var(--border);border-radius:10px;
  padding:.85rem 1rem .95rem 2.4rem;cursor:pointer;background:var(--bg-card);
  transition:border-color var(--transition),background var(--transition)}
.track-card:hover{border-color:var(--blue)}
.track-card input{position:absolute;top:1.05rem;left:.95rem;margin:0}
.track-card:has(input:checked){border-color:var(--blue);background:var(--blue-bg)}
.track-card:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.track-card-current{border-style:dashed}
.track-body{display:flex;flex-direction:column;gap:.3rem;flex:1}
.track-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.track-head strong{font-size:1rem;color:var(--text)}
.track-blurb{font-size:.86rem;color:var(--text-mid)}
.track-detail{font-size:.8rem;color:var(--text-muted);line-height:1.55}

.track-badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.16rem .45rem;border-radius:4px;white-space:nowrap}
.track-business{background:var(--purple-bg);color:var(--purple)}
.track-it{background:var(--blue-bg);color:var(--blue)}
.track-both{background:var(--orange-bg);color:var(--orange)}

.intake-track-line{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.5rem 0 .2rem}
.intake-other-track{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;font-size:.85rem;
  padding-top:.7rem;border-top:1px solid var(--border-light)}
.intake-qid-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.intake-guide.both-note{border-left-color:var(--orange)}
/* A dot marks a question assigned to both pathways, indicating shared scope
   without introducing a second legend colour. */
.intake-chip.shared::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--orange);vertical-align:super;margin-left:.2rem}

/* Guided assessment — three stages, Data Collector first.
   Numbered to convey sequence: values recorded in Stage 1 are presented as
   selectable options in the Stage 3 questions. */
.intake-stage h3{display:flex;align-items:center;gap:.55rem;margin-top:0}
.stage-num{display:inline-flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;
  border-radius:50%;background:var(--blue);color:#fff;font-size:.8rem;font-weight:700;flex:none}
.intake-stage.stage-done .stage-num{background:var(--green)}
.found-tick{width:2rem;text-align:center;vertical-align:top;padding-top:.55rem}
.tick-done{color:var(--green);font-weight:700}
.tick-open{color:var(--text-muted)}
.intake-found-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}

/* Structured responses.

   One sentence per line, then the field beneath it at full width. The field was
   originally inline, which read well but gave a one-line box barely wide enough
   for the answers these questions actually want. The sentence still carries the
   wording; the box below is where the answer goes. */
.madlib{list-style:none;margin:0;padding:.9rem 1rem;border:1.5px dashed var(--border);
  border-radius:8px;background:var(--bg-hover);counter-reset:madlib}
.madlib-line{position:relative;padding:.75rem 0 .85rem 2rem;margin:0;
  border-bottom:1px solid var(--border-light)}
.madlib-line:last-child{border-bottom:none;padding-bottom:.2rem}
/* The number doubles as a progress cue, so an outstanding field can be located. */
.madlib-line::before{counter-increment:madlib;content:counter(madlib);position:absolute;left:0;
  top:.85rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--bg-card);
  border:1px solid var(--border);color:var(--text-muted);font-size:.68rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}
.madlib-line.line-filled::before{background:var(--green-bg);border-color:transparent;color:var(--green)}
.madlib-sentence{margin:0 0 .4rem;font-size:.95rem;line-height:1.5;color:var(--text-mid)}
/* A short rule marks where the value belongs in the sentence. */
.madlib-slot{display:inline-block;width:3.5rem;border-bottom:2px solid var(--blue);
  margin:0 .15rem;vertical-align:baseline}
.madlib-line.line-filled .madlib-slot{border-bottom-color:var(--green)}

.madlib-control{display:block}
.madlib-text,.madlib-select,.madlib-num{font:inherit;font-size:.88rem;color:var(--text);
  background:var(--bg-card);border:1px solid var(--border);border-radius:6px;
  padding:.4rem .55rem}
.madlib-text{display:block;width:100%;box-sizing:border-box;resize:vertical;line-height:1.5;
  min-height:3.6rem}
.madlib-select{display:block;width:100%;box-sizing:border-box;cursor:pointer}
.madlib-num{display:block;width:8rem;text-align:center}
.madlib-text:focus,.madlib-select:focus,.madlib-num:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue-bg)}
.madlib-filled{border-color:var(--green)}
.madlib-other{margin-top:.4rem}
.madlib-empty{font-size:.78rem;color:var(--orange);margin:.35rem 0 0}
/* Suggested answers under a free-text blank. These were <select> options until a
   respondent pointed out that a fixed list cannot carry enough context to evidence
   the objectives the answer is recorded against. They stay as a prompt. */
.madlib-hint{font-size:.78rem;color:var(--text-muted);margin:.35rem 0 0;line-height:1.5}

.madlib-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.madlib-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem;margin-top:.7rem}
.madlib-count{font-size:.8rem;color:var(--green)}
.madlib-count.madlib-open{color:var(--orange)}
@media (max-width:640px){
  .madlib{padding:.75rem .7rem}
  .madlib-line{padding-left:1.8rem}
}

/* Inline field validation (setup wizard step 1, F-14/F-19). The message sits
   under the field it is about, not in a banner at the top of the page. */
.req { color: var(--red); }
.input-error { border-color: var(--red) !important; }
.field-error { color: var(--red); font-size: .85rem; margin: .3rem 0 0; }
/* Wizard completion page: rendered from the shared Stage 1 check. */
.wiz-done { padding: 2rem 1.5rem; }
.wiz-done h2 { margin-top: 0; }
.wiz-done-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; }
.wiz-done-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.wiz-done .wiz-done-links { justify-content: flex-start; }
/* Workbench: a guided-assessment suggestion is visibly not yet an answer (F-09). */
.field-prefill { margin: .35rem 0 0; padding: .4rem .6rem; border-left: 3px solid var(--yellow);
    background: var(--yellow-bg); font-size: .85rem; }
.field-provenance { margin: .35rem 0 0; font-size: .8rem; color: var(--text-muted); }


/* ── StepFooter (templates/_step_footer.html) ────────────────────────────
   One action bar for every multi-step screen: Back left, secondary actions in
   the middle, the single primary right. Sticky to the bottom of the scrolling
   pane, so the primary is reachable at 1366x768 without scrolling (UI review
   §4). Replaces .wiz-nav, .intake-nav, .guided-nav and the bare form saves. */
.step-footer {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin: 1rem 0 0; padding: .75rem 1.25rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 -6px 16px rgba(0,0,0,.25);
}
/* Inside a panel it becomes the panel's own bottom edge. */
.panel > .step-footer { margin: 1.25rem -1.5rem -1.25rem; border-width: 1px 0 0; border-radius: 0 0 var(--radius) var(--radius); }
.step-footer-back { margin-right: auto; }
.step-footer-secondary { display: flex; gap: .5rem; flex-wrap: wrap; }
.step-footer-primary { margin-left: auto; }
.step-footer .saving-hint { font-size: .78rem; color: var(--text-muted); }
/* Back and Save look like the primary, blue with white text (owner's call,
   2026-10-19). They stay plain submits: the primary keeps the right-hand slot
   and the Enter key. */
.btn-step { background: var(--blue-dark); color: var(--text-bright); border-color: transparent; font-weight: 600; }
.btn-step:hover { background: var(--blue); }
[data-skin="atlas"] .btn-step { color: #04130d; }
/* Enter in a single-line field must mean "next", never "back": the form's
   first submit button is the one implicit submission presses, so this
   off-screen copy of the primary comes first in the DOM (UI review §1). */
.default-submit { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }
/* Emerald is light: white on it fails contrast, dark text passes. */
[data-skin="atlas"] .btn-primary { color: #04130d; }

/* SSP: every control column, and values the organisation has not recorded (F-19/F-20). */
.ssp-field { font-size: .85rem; margin: .2rem 0 .4rem; white-space: pre-line; }
.ssp-field strong { font-weight: 600; }
.ssp-missing { color: var(--text-muted); font-style: italic; }

/* --- Dashboard: score over time (app/core/trend.py draws the geometry) --- */
.trend { display: grid; gap: .6rem; }
.trend-radio { position: absolute; opacity: 0; pointer-events: none; }
.trend-tabs { display: inline-flex; justify-self: start; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.trend-tabs label { padding: .3rem .85rem; font-size: .8rem; color: var(--text-muted); cursor: pointer; }
.trend-tabs label + label { border-left: 1px solid var(--border); }
#trend-sprs:checked ~ .trend-tabs label[for="trend-sprs"],
#trend-met:checked ~ .trend-tabs label[for="trend-met"] { background: var(--blue-dark); color: var(--text-bright); }
#trend-sprs:focus-visible ~ .trend-tabs label[for="trend-sprs"],
#trend-met:focus-visible ~ .trend-tabs label[for="trend-met"] { outline: 2px solid var(--blue); outline-offset: -2px; }
.trend-pane { display: none; min-width: 0; }
#trend-sprs:checked ~ .trend-pane-sprs, #trend-met:checked ~ .trend-pane-met { display: block; }
.trend-chart-wrap { position: relative; }
.trend-chart { display: block; width: 100%; height: auto; overflow: visible; }
.trend-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.trend-axis { fill: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.trend-latest { fill: var(--text-bright); font-size: 15px; font-weight: 600; }
.trend-area { fill: var(--blue); opacity: .1; }
.trend-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-point { fill: var(--blue); }
.trend-dot { fill: transparent; cursor: pointer; }
.trend-dot:hover, .trend-dot:focus { fill: var(--blue); fill-opacity: .2; outline: none; }
.trend-hint { margin: .4rem 0 0; }
.trend-tip {
    position: absolute; z-index: 300; pointer-events: none; max-width: 320px;
    background: var(--bg-header); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-3); font-size: .76rem;
}
.trend-tip-head { font-weight: 700; color: var(--text-bright); margin-bottom: var(--space-1); }
.trend-tip-line { color: var(--text-muted); line-height: 1.5; }