/* ═══════════════════════════════════════════════════════════
   AI Governance Platform — Design System
   "Ink & Paper" light theme (default) + dark theme toggle
   ═══════════════════════════════════════════════════════════ */

/* ── Light Theme Tokens (default — Ink & Paper) ── */
:root {
    /* Surfaces — Clean White */
    --bg-base:    #FFFFFF;
    --bg-sidebar: #F7F7F9;
    --bg-main:    #FAFAFA;
    --bg-raised:  #FFFFFF;
    --bg-overlay: #F0F0F3;
    --bg-hover:   rgba(0, 0, 0, 0.04);
    --bg-active:  rgba(0, 0, 0, 0.06);

    /* Borders — softer */
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-mid:    rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.18);

    /* Text */
    --text-primary:   #1A1A1D;
    --text-secondary: #4A4A54;
    --text-muted:     #6E6E7A;
    --text-faint:     #8A8A96;

    /* Accent — signature indigo (unchanged) */
    --accent:        #4343AF;
    --accent-hover:  #3939A0;
    --accent-muted:  #3939A0;
    --accent-dim:    #2E2E8A;
    --accent-bg:     rgba(67, 67, 175, 0.08);
    --accent-border: rgba(67, 67, 175, 0.22);

    /* Semantic — calibrated to complement the signature indigo (#4343AF).
       Bumped Sprint 1.5: previous values were too pastel against the
       saturated indigo sidebar. Today/Scheduled buckets and high-severity
       badges now read as confident alerts. */
    --red:          #DC2626;
    --red-muted:    #B91C1C;
    --red-bg:       rgba(220, 38, 38, 0.08);
    --red-border:   rgba(220, 38, 38, 0.20);

    --amber:        #EA580C;
    --amber-muted:  #C2410C;
    --amber-bg:     rgba(234, 88, 12, 0.08);
    --amber-border: rgba(234, 88, 12, 0.20);

    --green:        #1A8F32;
    --green-muted:  #157A28;
    --green-bg:     rgba(26, 143, 50, 0.08);
    --green-border: rgba(26, 143, 50, 0.18);

    --blue:         #4343AF;
    --blue-muted:   #3939A0;
    --blue-bg:      rgba(67, 67, 175, 0.07);
    --blue-border:  rgba(67, 67, 175, 0.20);

    /* Utility */
    --white: #ffffff;

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

    /* Radius */
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px;

    /* Shadows — softer for clean white surfaces */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.07);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.10);
    --shadow-focus: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--accent);

    /* Layout */
    --sidebar-w: 220px;
    --props-w: 260px;

    /* Typography */
    --fs-2xs: 0.6875rem;  /* 11px */
    --fs-xs:  0.75rem;    /* 12px */
    --fs-sm:  0.8125rem;  /* 13px */
    --fs-base: 0.875rem;  /* 14px */
    --fs-md:  0.9375rem;  /* 15px */
    --fs-lg:  1.125rem;   /* 18px */
    --fs-xl:  1.25rem;    /* 20px */
    --fs-2xl: 1.5rem;     /* 24px */
}

/* ── Dark Theme Override ── */
.dark-theme {
    --bg-base:    #111113;
    --bg-sidebar: #161618;
    --bg-main:    #1A1A1D;
    --bg-raised:  #212125;
    --bg-overlay: #2A2A2F;
    --bg-hover:   rgba(255, 255, 255, 0.035);
    --bg-active:  rgba(255, 255, 255, 0.055);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-mid:    rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.14);

    --text-primary:   #ECECEE;
    --text-secondary: #B6B6C0;
    --text-muted:     #A0A0AD;
    --text-faint:     #9191A0;

    --accent:        #7070D8;
    --accent-muted:  #6060C8;
    --accent-dim:    #5050B8;
    --accent-bg:     rgba(112, 112, 216, 0.10);
    --accent-border: rgba(112, 112, 216, 0.22);

    --red:          #E5534B;
    --red-muted:    #CC453E;
    --red-bg:       rgba(229, 83, 75, 0.12);
    --red-border:   rgba(229, 83, 75, 0.22);

    --amber:        #E8912D;
    --amber-muted:  #D07E22;
    --amber-bg:     rgba(232, 145, 45, 0.12);
    --amber-border: rgba(232, 145, 45, 0.22);

    --green:        #3FB950;
    --green-muted:  #2EA043;
    --green-bg:     rgba(63, 185, 80, 0.12);
    --green-border: rgba(63, 185, 80, 0.22);

    --blue:         #7070D8;
    --blue-muted:   #6060C8;
    --blue-bg:      rgba(112, 112, 216, 0.10);
    --blue-border:  rgba(112, 112, 216, 0.22);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.45);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT THEME ADJUSTMENTS
   Cards get subtle shadow for depth on white backgrounds
   ═══════════════════════════════════════════════════════════ */
:root:not(.dark-theme) .summary-card,
:root:not(.dark-theme) .bento-card,
:root:not(.dark-theme) .data-table-container,
:root:not(.dark-theme) .report-card {
    box-shadow: var(--shadow-sm);
}

:root:not(.dark-theme) .sidebar {
    box-shadow: none;
}

:root:not(.dark-theme) .cmd-modal,
:root:not(.dark-theme) .notif-dropdown,
:root:not(.dark-theme) .context-menu {
    box-shadow: var(--shadow-lg);
}

/* Dark skeleton shimmer uses white highlight */
.dark-theme .skeleton::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
}


/* ═══════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-base);
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    height: 100vh;
}


/* ═══════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════ */
.app-shell { display: flex; height: 100vh; }

/* ─── Sidebar ─── */
.sidebar {
    width: var(--sidebar-w);
    background: #4343AF;
    border-right: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.2s ease;
    overflow: hidden;
}

.sidebar-header { padding: var(--sp-4) var(--sp-4) var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); }
.sidebar-logo { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Bree Serif', serif; font-size: 26px; font-weight: 600; line-height: 1; flex-shrink: 0; }
.sidebar-title { font-family: 'Bree Serif', serif; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; transition: opacity 0.15s; }
.sidebar-collapse-btn { width: 24px; height: 24px; border-radius: var(--r-sm); border: none; background: none; color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; transition: all 0.15s; }
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-section { padding: var(--sp-1) var(--sp-2); }
.sidebar-section-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); padding: var(--sp-3) var(--sp-2) var(--sp-1); white-space: nowrap; overflow: hidden; transition: opacity 0.15s; }
.sidebar-item { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-2); border-radius: var(--r-md); font-size: var(--fs-sm); color: rgba(255,255,255,0.8); cursor: pointer; transition: all 0.1s; text-decoration: none; white-space: nowrap; }
.sidebar-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-item.active { background: rgba(255,255,255,0.15); color: #fff; position: relative; }
.sidebar-item i { text-align: center; font-size: 13px; opacity: 0.7; flex-shrink: 0; }
.sidebar-item.active i { opacity: 1; }
.sidebar-item span { overflow: hidden; transition: opacity 0.15s; }
.sidebar-item-count { margin-left: auto; font-size: var(--fs-2xs); color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }

/* Sidebar active left bar indicator */
.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #fff;
}

/* Sidebar red dot indicator */
.sidebar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF6B6B;
    flex-shrink: 0;
    margin-left: 4px;
}

.sidebar-spacer { flex: 1; }
.sidebar-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: var(--sp-1); transition: padding 0.2s; }
.sidebar-avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: 600; color: #fff; flex-shrink: 0; }
.sidebar-user { font-size: var(--fs-xs); color: rgba(255,255,255,0.8); flex: 1; white-space: nowrap; overflow: hidden; transition: opacity 0.15s; }
.sidebar-footer-profile { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; min-width: 0; border-radius: var(--r-sm); padding: 4px 4px; transition: background 0.15s; }
.sidebar-footer-profile:hover { background: rgba(255,255,255,0.1); }
.sidebar-footer-profile:hover .sidebar-user { color: #fff; }
.sidebar-footer-settings { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: rgba(255,255,255,0.8); font-size: var(--fs-xs); padding: 4px 4px; border-radius: var(--r-sm); transition: background 0.15s, color 0.15s; }
.sidebar-footer-settings i { width: 26px; text-align: center; font-size: 13px; flex-shrink: 0; }
.sidebar-footer-settings:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ── Sidebar Collapsed State (class on <html> to prevent flash) ── */
.sidebar-collapsed .sidebar { width: 56px; }
.sidebar-collapsed .sidebar-title,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .sidebar-item span:not(.sidebar-count):not(.sidebar-dot),
.sidebar-collapsed .sidebar-item-count,
.sidebar-collapsed .sidebar-user { display: none; }
/* Collapsed: header — logo centred, collapse btn hidden (click logo to expand) */
.sidebar-collapsed .sidebar-header { padding: var(--sp-4) 0 var(--sp-3); justify-content: center; }
.sidebar-collapsed .sidebar-collapse-btn { display: none; }
.sidebar-collapsed .sidebar-logo { cursor: pointer; }

/* Collapsed: red dot — overlay on the icon */
.sidebar-collapsed .sidebar-dot { position: absolute; top: 4px; right: 8px; margin-left: 0; }

/* Collapsed: nav items — icon only, centered */
.sidebar-collapsed .sidebar-section { padding: var(--sp-1) 6px; }
.sidebar-collapsed .sidebar-item { justify-content: center; padding: 8px 0; gap: 0; position: relative; }
.sidebar-collapsed .sidebar-item i { font-size: 15px; }
.sidebar-collapsed .sidebar-item.active::before { left: -6px; }

/* Collapsed: footer — stack vertically, centered icons */
.sidebar-collapsed .sidebar-footer { padding: var(--sp-3) 0; align-items: center; gap: var(--sp-1); }
.sidebar-collapsed .sidebar-footer-profile { padding: 0; justify-content: center; }
.sidebar-collapsed .sidebar-footer-settings { justify-content: center; padding: 4px 0; }
.sidebar-collapsed .sidebar-footer-settings span { display: none; }
.sidebar-collapsed .sidebar-footer-settings i { width: auto; }

/* Icon-only sidebar (Sprint 12, refined) — Pipedrive-style */
.sidebar-collapsed .sidebar { overflow: visible; width: 68px; }
.sidebar-collapsed .sidebar-section { padding: 8px; }
.sidebar-collapsed .sidebar-item {
    padding: 11px 0;
    margin-bottom: 4px;
    border-radius: 10px;
}
.sidebar-collapsed .sidebar-item i { font-size: 19px; }
.sidebar-collapsed .bulk-bar { left: 68px; }
.sidebar-collapsed .sidebar-footer-settings { position: relative; }

/* hover flyout labels */
.sidebar-collapsed .sidebar-item span:not(.sidebar-dot):not(.sidebar-count),
.sidebar-collapsed .sidebar-footer-settings span {
    display: block;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e1e3a;
    color: #fff;
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 200;
    transition: opacity 0.12s ease;
}
.sidebar-collapsed .sidebar-item:hover span:not(.sidebar-dot):not(.sidebar-count),
.sidebar-collapsed .sidebar-footer-settings:hover span {
    opacity: 1;
    visibility: visible;
}

/* open-items count badge — top-right of the icon */
.sidebar-count {
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #e5484d;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Sidebar account menu — single avatar -> popup */
.sidebar-footer { position: relative; }
.sidebar-account {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-account .sidebar-avatar { transition: box-shadow 0.12s; }
.sidebar-account:hover .sidebar-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
.sidebar-account-menu {
    position: absolute;
    bottom: 6px;
    left: calc(100% + 8px);
    width: 220px;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 300;
    display: none;
}
.sidebar-account-menu.open { display: block; }
.sam-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}
.sam-header .sidebar-avatar { background: var(--accent); flex-shrink: 0; }
.sam-id { display: flex; flex-direction: column; min-width: 0; }
.sam-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.sam-email { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-decoration: none;
}
.sam-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.sam-item i { width: 16px; text-align: center; color: var(--text-faint); }

/* Link-styled tabs (Registers / Reports tab bars) */
a.tab-btn { text-decoration: none; }

/* ─── Main ─── */
.main { flex: 1; background: var(--bg-main); display: flex; flex-direction: column; overflow: hidden; }

/* ─── Top Bar ─── */
.topbar { height: 60px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 var(--sp-6); flex-shrink: 0; }
.topbar-breadcrumb { font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); }
.tb-crumb { color: var(--text-muted); text-decoration: none; }
a.tb-crumb:hover { color: var(--text-secondary); }
.tb-crumb--current { color: var(--text-primary); font-weight: 500; }
.tb-sep { color: var(--text-faint); font-size: 12px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* 10d-1 — team scope switcher (topbar, left of the breadcrumb) */
.team-switcher { position: relative; margin-right: var(--sp-4); }
.team-switcher-btn {
    display: flex; align-items: center; gap: var(--sp-2);
    background: var(--bg-base); border: 1px solid var(--border-mid);
    border-radius: var(--r-md); padding: 5px 10px; cursor: pointer;
    font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary);
}
.team-switcher-btn:hover { border-color: var(--border-strong, var(--text-faint)); }
.team-switcher-btn .ic-users { color: var(--text-faint); font-size: 14px; }
.team-switcher-label { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-switcher-caret { font-size: 10px; color: var(--text-faint); transition: transform 0.15s; }
.team-switcher.open .team-switcher-caret { transform: rotate(180deg); }
.team-switcher-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    min-width: 220px; background: var(--bg-base); border: 1px solid var(--border-mid);
    border-radius: var(--r-md); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.1)); padding: 4px;
}
.team-switcher.open .team-switcher-menu { display: block; }
.team-switcher-item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 7px 10px; border-radius: var(--r-sm); text-decoration: none;
    font-size: var(--fs-sm); color: var(--text-secondary);
}
.team-switcher-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.team-switcher-item.is-active { color: var(--text-primary); font-weight: 500; }
/* Leading status dot — filled accent on the active scope, hollow otherwise. */
.team-switcher-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--border-mid); background: transparent;
}
.team-switcher-item.is-active .team-switcher-dot { background: var(--accent); border-color: var(--accent); }
.team-switcher-name { flex: 1; }
.team-switcher-tag { font-size: 10px; color: var(--text-faint); font-weight: 400; }

/* 9c — notification bell + dropdown */
.notif-bell-wrap { position: relative; }
.notif-bell { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--r-md); color: var(--text-muted); cursor: pointer; transition: border-color 0.12s, color 0.12s; }
.notif-bell:hover { border-color: var(--border-mid); color: var(--text-secondary); }
.notif-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-width: 90vw; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,0.12)); z-index: 200; overflow: hidden; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary); }
.notif-panel-allread { background: none; border: none; color: var(--accent); font: inherit; font-size: var(--fs-xs); cursor: pointer; padding: 0; }
.notif-panel-list { max-height: 380px; overflow-y: auto; }
.notif-panel-empty { padding: 28px 14px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.notif-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.notif-item:hover { background: var(--bg-overlay); }
.notif-item-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-top: 6px; flex-shrink: 0; }
.notif-item--unread { background: var(--bg-overlay); }
.notif-item--unread .notif-item-dot { background: var(--accent); }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.notif-item-text { font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-item-time { font-size: 11px; color: var(--text-faint); }
.notif-panel-foot { display: block; padding: 10px 14px; text-align: center; font-size: var(--fs-xs); color: var(--accent); text-decoration: none; border-top: 1px solid var(--border-subtle); }
.notif-panel-foot:hover { background: var(--bg-overlay); }
/* 9c — notifications full page */
.notif-empty { padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-md); }
.notif-list { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.notif-row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg-overlay); }
.notif-row--unread { background: var(--bg-overlay); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex-shrink: 0; }
.notif-row--unread .notif-dot { background: var(--accent); }
.notif-body { display: flex; flex-direction: column; gap: 3px; }
.notif-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.notif-text { font-size: var(--fs-sm); color: var(--text-secondary); }
.notif-time { font-size: var(--fs-xs); color: var(--text-faint); }

/* Search trigger */
.search-trigger {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 5px 8px; background: transparent; border: none;
    border-radius: var(--r-md); color: var(--text-muted);
    font-size: var(--fs-xs); cursor: pointer; transition: color 0.15s;
    font-family: inherit;
}
.search-trigger:hover { color: var(--text-secondary); background: var(--bg-hover); }
.search-trigger i { font-size: 12px; }

/* Command-palette pill — a visible search affordance in the topbar */
.cmd-pill { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 8px 0 10px; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--r-md); color: var(--text-muted); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; transition: border-color 0.12s, color 0.12s; }
.cmd-pill:hover { border-color: var(--border-mid); color: var(--text-secondary); }
.cmd-pill i { font-size: 12px; color: var(--text-faint); }
.cmd-pill-text { color: var(--text-muted); }
.cmd-pill-kbd { font-size: var(--fs-2xs); color: var(--text-faint); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; line-height: 1.5; }

/* Icon button */
.icon-btn { width: 30px; height: 30px; border: none; background: transparent; color: var(--text-muted); border-radius: var(--r-md); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* Theme toggle */
.theme-toggle .ic-sun { display: none; }
.dark-theme .theme-toggle .ic-moon { display: none; }
.dark-theme .theme-toggle .ic-sun { display: inline; }

/* ─── Content (scrollable) ─── */
.content { flex: 1; overflow-y: auto; display: flex; }
.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

/* Single column scrollable (for dashboard/list pages) */
.content-single { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.content-single::-webkit-scrollbar { width: 6px; }
.content-single::-webkit-scrollbar-track { background: transparent; }
.content-single::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }


/* ═══════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT: Main column + Properties sidebar
   ═══════════════════════════════════════════════════════════ */
.detail-layout { display: flex; flex: 1; overflow: hidden; }
.detail-main { flex: 1; min-width: 0; padding: var(--sp-6); overflow-y: auto; }
.detail-main::-webkit-scrollbar { width: 6px; }
.detail-main::-webkit-scrollbar-track { background: transparent; }
.detail-main::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

.detail-sidebar { width: var(--props-w); border-left: 1px solid var(--border-subtle); background: var(--bg-sidebar); padding: var(--sp-6) var(--sp-5); overflow-y: auto; flex-shrink: 0; }
.detail-sidebar::-webkit-scrollbar { width: 4px; }
.detail-sidebar::-webkit-scrollbar-track { background: transparent; }
.detail-sidebar::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════
   ENTITY HEADER
   ═══════════════════════════════════════════════════════════ */
.entity-id { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-1); }
.entity-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: var(--sp-2); }
/* Clickable variant — when the system has a description, the title doubles
   as a button that opens a description side panel. Indigo signals
   clickability without changing the typographic weight. */
button.entity-title--clickable {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-2);
    text-align: left;
    font-family: inherit;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    transition: color 0.15s;
}
button.entity-title--clickable:hover { color: var(--accent-muted); text-decoration: underline; }
button.entity-title--clickable::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--text-faint);
    -webkit-mask: url('../icons/circle-info.svg') no-repeat center / contain;
    mask: url('../icons/circle-info.svg') no-repeat center / contain;
    margin-left: 4px;
    transition: background-color 0.15s;
}
button.entity-title--clickable:hover::after { background-color: var(--accent); }
.entity-desc { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-6); max-width: 680px; }

/* ─── Detail-page header bar: title + status + actions + overflow menu ─── */
.entity-header--bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.entity-header-main { min-width: 0; }
.entity-title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.entity-header--bar .entity-title { margin-bottom: 0; }
.entity-header--bar button.entity-title--clickable { margin-bottom: 0; }
.entity-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.detail-menu { position: relative; }
.detail-menu-btn {
    width: 34px; height: 34px; flex-shrink: 0;
    border: 1px solid var(--border-mid); background: var(--bg-base);
    border-radius: var(--r-md); color: var(--text-muted); cursor: pointer;
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.detail-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.detail-menu-list {
    position: absolute; top: calc(100% + 4px); right: 0; min-width: 184px;
    background: var(--bg-raised); border: 1px solid var(--border-mid);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: var(--sp-1); display: none; z-index: 50;
}
.detail-menu.open .detail-menu-list { display: block; }
.detail-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: none; background: none; cursor: pointer;
    font-size: var(--fs-sm); color: var(--text-secondary); text-align: left;
    border-radius: var(--r-sm); text-decoration: none; font-family: inherit;
}
.detail-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.detail-menu-item i { font-size: 13px; color: var(--text-faint); }

/* ─── Configuration disclosure — compact summary rows (side panel) ─── */
.cfg-row {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%;
    padding: 9px 0; border: none; background: none; cursor: pointer;
    font-family: inherit; text-align: left;
}
.cfg-row + .cfg-row { border-top: 1px solid var(--border-subtle); }
.cfg-row--static { cursor: default; }
.cfg-row-label { font-size: var(--fs-sm); color: var(--text-muted); flex-shrink: 0; }
.cfg-row-value {
    flex: 1; font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500;
    text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfg-row-icon { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.cfg-row:hover:not(.cfg-row--static) .cfg-row-value,
.cfg-row:hover:not(.cfg-row--static) .cfg-row-icon { color: var(--accent); }

/* Related-records disclosure body — trim the last row's margin */
.linked-list .linked-row:last-child { margin-bottom: 0; }

/* ─── Governance section (main column) ─── */
.gov-section { margin-top: var(--sp-6); }
.gov-section-title {
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3);
}
.gov-row-icon { font-size: 14px; color: var(--text-muted); width: 18px; text-align: center; flex-shrink: 0; }
.linked-row-meta { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   ACTION REQUIRED — columned work surface (Today / All tasks)
   ═══════════════════════════════════════════════════════════ */
.ar-surface { display: flex; flex: 1; overflow: hidden; }

/* Col 2 — sub-nav: views + filters */
.ar-subnav { width: 232px; flex-shrink: 0; border-right: 1px solid var(--border-subtle); background: var(--bg-sidebar); overflow-y: auto; padding: var(--sp-4) var(--sp-3); }
.ar-nav-group + .ar-nav-group { margin-top: var(--sp-5); }
.ar-nav-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 0 var(--sp-2); margin-bottom: var(--sp-2); }
.ar-nav-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-2); border-radius: var(--r-md); text-decoration: none; color: var(--text-secondary); font-size: var(--fs-sm); transition: background 0.12s; }
.ar-nav-item:hover { background: var(--bg-hover); }
.ar-nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.ar-nav-item i { font-size: 14px; width: 16px; text-align: center; color: var(--text-faint); flex-shrink: 0; }
.ar-nav-item.active i { color: var(--accent); }
.ar-nav-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-nav-count { font-size: var(--fs-xs); color: var(--text-faint); }
.ar-nav-item.active .ar-nav-count { color: var(--accent); }
/* Red attention count — outstanding setup work needs the owner. */
.ar-nav-count--alert { color: #fff; background: var(--red); border-radius: 9px; padding: 0 6px; min-width: 16px; text-align: center; font-weight: 600; }
.ar-nav-item.active .ar-nav-count--alert { color: #fff; }
.ar-nav-item--soon { cursor: default; color: var(--text-faint); }
.ar-nav-item--soon:hover { background: none; }
.ar-nav-item--high .ar-nav-item-label { color: var(--red); }
.ar-nav-soon { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-overlay); color: var(--text-faint); padding: 2px 5px; border-radius: 4px; }

/* Col 3 — the list */
.ar-main { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.ar-main::-webkit-scrollbar { width: 6px; }
.ar-main::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
.ar-main-inner { max-width: 880px; }
/* Slice 8 — "Your first day" handoff card (top of the Today view) */
.first-day { position: relative; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: var(--r-xl); padding: 20px 22px; margin-bottom: var(--sp-5); }
.first-day-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-faint); cursor: pointer; border-radius: var(--r-sm); font-size: 14px; }
.first-day-x:hover { background: var(--bg-overlay); color: var(--text-secondary); }
.first-day-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.first-day-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); margin: 4px 0 6px; letter-spacing: -0.01em; }
.first-day-recap { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; max-width: 60ch; }
.first-day-steps { display: flex; flex-direction: column; gap: 8px; }
.first-day-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--r-md); color: var(--text-primary); text-decoration: none; transition: border-color 0.12s ease, background 0.12s ease; }
.first-day-step:hover { border-color: var(--accent); background: var(--bg-overlay); }
.first-day-step-icon { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--bg-overlay); color: var(--accent); font-size: 14px; }
.first-day-step-label { flex: 1; font-size: var(--fs-sm); font-weight: 500; }
.first-day-step-go { color: var(--text-faint); font-size: 12px; }
.first-day { transition: opacity 0.2s ease; }
.ar-view-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ar-view-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin: 0; }
.ar-view-sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 2px 0 0; }
.ar-view-sub strong { color: var(--text-primary); font-weight: 600; }

/* Today list */
.today-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.today-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); }
.today-list { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.today-task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-raised); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.12s, opacity 0.3s; }
.today-task:last-child { border-bottom: none; }
.today-task:hover { background: var(--bg-hover); }
.today-check { width: 18px; height: 18px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--text-muted); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 10px; transition: border-color 0.15s; }
.today-check:hover { border-color: var(--text-primary); }
.today-check i { opacity: 0; transition: opacity 0.15s; }
.today-task-body { flex: 1; min-width: 0; }
.today-task-headline { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.today-task-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); display: flex; align-items: center; gap: 6px; }
.today-task-principle { font-size: 10px; padding: 1px 6px; }
.today-task-arrow { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.today-task-doneflag { display: none; font-size: var(--fs-xs); font-weight: 600; color: var(--green); flex-shrink: 0; }

.today-task--done { opacity: 0.62; cursor: default; }
.today-task--done .today-check i { opacity: 1; }
.badge-priority { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--red-bg); color: var(--red); }
.today-task--done .today-task-headline { text-decoration: line-through; color: var(--text-muted); }
.today-task--done .today-task-arrow { display: none; }
.today-task--done .today-task-doneflag { display: inline; }

.today-finish { text-align: center; padding: 48px 20px; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); margin-bottom: var(--sp-5); }
.today-finish-mark { font-size: 40px; color: var(--green); line-height: 1; margin-bottom: var(--sp-2); }
.today-finish-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.today-finish-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }
.today-task-carried { color: var(--text-faint); }
.today-newsince { margin-top: var(--sp-5); }
.today-donetoday { margin-top: var(--sp-4); }
.today-streak { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-top: 6px; }
.today-finish-streak { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
.today-empty { text-align: center; padding: 40px 20px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); color: var(--text-muted); font-size: var(--fs-sm); }
.today-empty i { display: block; font-size: 24px; color: var(--text-faint); margin-bottom: 8px; }
.today-empty a { color: var(--accent); display: inline-block; margin-top: 8px; }
.today-defer { flex-shrink: 0; border: none; background: none; padding: 2px 6px; font-family: inherit; font-size: var(--fs-xs); color: var(--text-faint); cursor: pointer; border-radius: var(--r-sm); transition: color 0.12s, background 0.12s; }
.today-defer:hover { color: var(--text-secondary); background: var(--bg-hover); }
.today-finish-actions { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }

/* ─── Calendar ─── */
.cal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cal-nav { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.cal-nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-base); color: var(--text-secondary); text-decoration: none; font-family: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background 0.12s; }
.cal-nav-btn:hover { background: var(--bg-hover); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.cal-weekday { background: var(--bg-sidebar); padding: 6px; text-align: center; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.cal-cell { background: var(--bg-raised); min-height: 108px; padding: 6px 7px; cursor: pointer; transition: background 0.12s; }
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell--muted { background: var(--bg-base); }
.cal-cell--muted .cal-cell-date { color: var(--text-faint); }
.cal-cell-date { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.cal-cell--today .cal-cell-date { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; }
.cal-chip { font-size: 10px; padding: 2px 5px; border-radius: 4px; background: var(--bg-overlay); color: var(--text-secondary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip--done { color: var(--text-faint); text-decoration: line-through; }
.cal-more { font-size: 10px; color: var(--text-faint); padding: 0 5px; }
.cal-due { font-size: 10px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 3px; }
.cal-pick { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.cal-pick input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

/* Day panel — reviews due / scheduled / add */
.cal-sec-title { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.cal-day-item { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-primary); text-decoration: none; }
.cal-day-item span { flex: 1; min-width: 0; }
.cal-day-item i { font-size: 11px; color: var(--text-faint); }
a.cal-day-item:hover span { color: var(--accent); }
.cal-day-item--done span { text-decoration: line-through; color: var(--text-muted); }
.cal-day-rm { width: 24px; height: 24px; flex-shrink: 0; border: none; background: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; border-radius: var(--r-sm); }
.cal-day-rm:hover { background: var(--bg-hover); color: var(--red); }

/* ─── Scheduled Next ─── */
.sched-group { margin-bottom: var(--sp-5); }
.sched-group-date { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.sched-remove { width: 26px; height: 26px; flex-shrink: 0; border: none; background: none; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--r-sm); }
.sched-remove:hover { background: var(--bg-hover); color: var(--red); }

/* ─── Dashboard — status & triage blocks (interim) ─── */
.dsh-block { margin-top: var(--sp-5); }
.dsh-block-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dsh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dsh-dot--amber { background: var(--amber); }
.dsh-dot--red { background: var(--red); }
.dsh-block-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.dsh-list { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.dsh-row { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: background 0.15s; }
.dsh-row:last-child { border-bottom: none; }
.dsh-row:hover { background: var(--bg-hover); }
.dsh-row-band { width: 4px; height: 28px; border-radius: 2px; flex-shrink: 0; background: var(--accent); }
.dsh-row-band--critical { background: var(--red); }
.dsh-row-band--important { background: var(--border-mid); }
.dsh-row-band--stable { background: var(--border-mid); }
.dsh-row-body { flex: 1; min-width: 0; }
.dsh-row-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.dsh-row-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.dsh-row-arrow { font-size: 11px; color: var(--text-faint); }
.dsh-empty { padding: 24px; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }

/* ─── Dashboard briefing ─── */
/* Four governance dimensions, rendered as calm rows (not screechy tiles):
   a coloured status dot, a quantified headline, the decision-or-confirmation
   detail, and a CTA only when there's something to do.  One row per
   dimension — the single representation, so nothing is duplicated. */
.dash-lines {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
}
.dash-line {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: 12px 14px; text-decoration: none;
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    background: var(--bg-base);
}
a.dash-line { transition: border-color 0.12s; }
a.dash-line:hover { border-color: var(--border-strong); }
.dash-line-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0; margin-top: 6px; background: var(--border-mid);
}
.dash-line-dot--red   { background: var(--red); }
.dash-line-dot--amber { background: var(--amber); }
.dash-line-dot--good  { background: var(--green); }
.dash-line-dot--grey  { background: var(--border-mid); }
.dash-line-body { flex: 1; min-width: 0; }
.dash-line-label {
    display: block; font-size: var(--fs-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-faint); margin-bottom: 2px;
}
.dash-line-headline { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.dash-line-detail { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.dash-line-cta { flex-shrink: 0; align-self: center; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   PATTERNS (Phase F) — shape-and-trajectory observations across
   governance (review bunching, ownership concentration, vendor
   drift, maintenance debt) that don't reduce to discrete tasks.
   Rendered as a section on the Insights tab (was a floating panel).
   ═══════════════════════════════════════════════════════════ */
.dash-patterns {
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
    background: var(--bg-raised); padding: 0 var(--sp-6);
    margin-bottom: var(--sp-6);
}

/* Insight cards */
.pat-insight {
    padding: var(--sp-5) 0; border-bottom: 1px solid var(--border-subtle);
}
.pat-insight:last-of-type { border-bottom: none; }
.pat-insight-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.pat-insight-category {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); font-weight: 600;
}
.pat-insight-headline { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--sp-2); line-height: 1.3; color: var(--text-primary); }
.pat-insight-body { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; margin: 0 0 var(--sp-3); }
.pat-insight-action { font-size: var(--fs-sm); font-weight: 500; color: var(--accent); text-decoration: none; }
.pat-insight-action:hover { text-decoration: underline; }

/* Empty state */
.pat-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); }
.pat-empty-icon { font-size: 28px; line-height: 1; margin-bottom: var(--sp-3); color: var(--text-faint); }
.pat-empty-headline { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.pat-empty-body { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: 0 auto; max-width: 320px; }

/* Register filter banner — surfaces a deep-link filter (e.g. ?owner=N
   from the patterns panel) so the user knows why the list is narrowed
   and can clear it.  Used on the systems list when ownerFilter is set. */
.reg-filter-banner {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
    background: var(--accent-bg, rgba(67, 67, 175, 0.06));
    border: 1px solid var(--accent-border, rgba(67, 67, 175, 0.18));
    border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-secondary);
}
.reg-filter-banner strong { color: var(--text-primary); font-weight: 700; }
.reg-filter-banner-clear { color: var(--text-muted); text-decoration: none; font-size: var(--fs-xs); }
.reg-filter-banner-clear:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   CONCERNS — Phase G
   Lightweight observation reporting (FYI / Concern / Urgent),
   auto-routed to the affected entity's owner.
   ═══════════════════════════════════════════════════════════ */
.cnr-wrap { max-width: 720px; margin: 0 auto; padding: var(--sp-6) 0; }
.cnr-eyebrow { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.cnr-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.cnr-subtitle { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.55; margin: 0 0 var(--sp-6); }

.cnr-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.cnr-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.cnr-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }

/* Urgency picker — three vertical radio cards */
.cnr-urgency { display: flex; flex-direction: column; gap: var(--sp-2); }
/* The report-kind chooser sits two-up on one line (the 3-option urgency
   block below stays stacked). Each card fills its column. */
.cnr-kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.cnr-kind-grid .cnr-urg-opt { margin: 0; }
@media (max-width: 560px) { .cnr-kind-grid { grid-template-columns: 1fr; } }
.cnr-urg-opt {
    display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.cnr-urg-opt:hover { border-color: var(--border-strong); }
.cnr-urg-opt.is-selected { border-color: var(--accent); background: var(--accent-bg, rgba(67, 67, 175, 0.05)); }
.cnr-urg-opt input[type="radio"] { margin-top: 3px; accent-color: var(--accent); }
.cnr-urg-label { display: block; font-weight: 700; color: var(--text-primary); font-size: var(--fs-sm); grid-row: 1; grid-column: 2; }
.cnr-urg-hint { display: block; font-size: var(--fs-xs); color: var(--text-muted); grid-row: 2; grid-column: 2; }

.cnr-entity-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cnr-select, .cnr-input, .cnr-textarea {
    padding: 10px 14px; font-family: inherit; font-size: var(--fs-base);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.cnr-select { flex: 1; min-width: 200px; }
.cnr-input { width: 100%; box-sizing: border-box; }
.cnr-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; line-height: 1.55; }
.cnr-select:focus, .cnr-input:focus, .cnr-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }
.cnr-select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-subtle, rgba(0, 0, 0, 0.02)); }

.cnr-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle);
}

.cnr-flash {
    padding: 10px 14px; border-radius: var(--r-md);
    font-size: var(--fs-sm); margin-bottom: var(--sp-4);
    max-width: 720px; box-sizing: border-box;
}
.cnr-flash--error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.cnr-flash--success { background: rgba(35, 145, 75, 0.10); color: #2d8a4f; border: 1px solid rgba(35, 145, 75, 0.20); }

/* Cross-link between the concern and usage flows. */
.cnr-switch { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }
.cnr-switch a { color: var(--accent); text-decoration: none; font-weight: 500; }
.cnr-switch a:hover { text-decoration: underline; }

/* Usage report — quick classification chips (pill radios, wrap horizontally). */
.usg-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.usg-chip {
    display: inline-flex; align-items: center;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: var(--fs-sm); color: var(--text); cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.usg-chip:hover { border-color: var(--border-strong); }
.usg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.usg-chip.is-selected { border-color: var(--accent); background: var(--accent-bg, rgba(67, 67, 175, 0.06)); color: var(--accent); font-weight: 500; }

/* ── Supplier AI disclosure — public staged form (Track B) ──
   Reuses the New AI System wizard's .onb-* / .usg-chip / .tp-loading
   styling; only the disclosure-specific bits live here. */

/* The stages (.onb-screen) and per-tool cards (.onb-pat-card) set
   `display:flex`, which overrides the HTML5 [hidden] attribute — so without
   these explicit rules every stage and every card would show at once. */
.sd-stage[hidden] { display: none !important; }
.sd .onb-pat-card[hidden] { display: none !important; }

.disc-input {
    width: 100%; box-sizing: border-box;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    font-family: inherit; font-size: 15px;
    background: var(--bg-base); color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.disc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.10); }
.disc-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.sd-q { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.sd-q-h { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sd-q-opt { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }

/* Stage 1 — add-your-own */
.sd-custom { display: flex; flex-direction: column; gap: var(--sp-3); }
.sd-custom-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.sd-custom-row { display: flex; gap: var(--sp-2); }
.sd-custom-row .disc-input { flex: 1; }
.sd-custom-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sd-custom-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 6px 6px 12px; border-radius: 999px;
    background: rgba(67, 67, 175, 0.06); border: 1px solid var(--accent);
    color: var(--accent); font-size: 13px; font-weight: 500;
}
.sd-custom-chip button {
    border: none; background: transparent; color: var(--accent);
    cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px;
}
.sd-noai-link {
    margin-right: auto; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 13px; text-decoration: underline; padding: 0;
}
.sd-noai-link:hover { color: var(--text-secondary); }

/* Stage 3 — review summary */
.sd-summary { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.sd-summary-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: var(--sp-3); }
.sd-summary-head a { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent); text-decoration: none; }
.sd-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.sd-summary-list li { display: flex; flex-direction: column; gap: 2px; }
.sd-summary-tool { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sd-summary-uses { font-size: 13px; color: var(--text-secondary); }
.sd-summary-note { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }
.sd-summary-note a { color: var(--accent); text-decoration: none; }
.sd-who-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--sp-2); }

/* Optional evidence uploads (AI policy + supporting material) */
.sd-upload { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.sd-upload-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.sd-upload-hint { font-size: 12px; color: var(--text-muted); }
.sd-file { font-size: 13px; color: var(--text-secondary); }
.sd-file::file-selector-button { font-family: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-base); color: var(--text-primary); cursor: pointer; margin-right: 10px; transition: border-color 0.15s; }
.sd-file::file-selector-button:hover { border-color: var(--border-strong); }

/* Stage 3 attestation chips — match the wizard's solid-fill selected state
   (the .usg-chip default is a light fill; the New System wizard uses solid). */
.sd #sdDataChips .usg-chip.is-selected,
.sd #sdGovChips .usg-chip.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Mobile — small vertical screens */
@media (max-width: 560px) {
    .onb-screen-title, .sd .onb-screen-title { font-size: 22px; }
    .sd .tp-grid { grid-template-columns: 1fr 1fr; }
    .disc-who-grid { grid-template-columns: 1fr; }
    .sd .onb-footer { flex-wrap: wrap; gap: var(--sp-3); }
    .sd .onb-footer .onb-footer-cta { flex: 1 1 100%; order: 3; }
    .sd-noai-link { order: 2; margin-right: 0; }
    .sd .onb-footer-count, .sd .onb-footer-back { order: 1; }
}
@media (max-width: 400px) {
    .sd .tp-grid { grid-template-columns: 1fr; }
}

/* Reporter-facing confirmation — calm (concern) or celebratory (usage). */
.cnr-confirm { text-align: center; padding-top: var(--sp-10); }
.cnr-confirm-mark {
    width: 64px; height: 64px; border-radius: 50%;
    margin: 0 auto var(--sp-5); display: grid; place-items: center;
    background: rgba(35, 145, 75, 0.10);
}
.cnr-confirm-mark .ic { width: 32px; height: 32px; background-color: #2d8a4f; }
.cnr-confirm-mark--happy { background: var(--accent-bg, rgba(67, 67, 175, 0.10)); }
.cnr-confirm-mark--happy .ic { background-color: var(--accent); }
.cnr-confirm .cnr-subtitle { max-width: 560px; margin-left: auto; margin-right: auto; }
.cnr-confirm-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

.cnr-advisory {
    max-width: 560px; margin: var(--sp-5) auto 0; text-align: left;
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--red-bg); border: 1px solid var(--red-border);
}
.cnr-advisory-head { display: flex; align-items: center; gap: var(--sp-2); color: var(--red); font-weight: 600; }
.cnr-advisory-head .ic { width: 18px; height: 18px; background-color: var(--red); flex: none; }
.cnr-advisory-body { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text); }

/* File input — uses the standard control but with calmer styling.
   Multi-file selection summarised below the input so the user can
   confirm what's being attached. */
.cnr-label-opt { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); margin-left: 4px; }
.cnr-file {
    padding: 8px 12px; font-family: inherit; font-size: var(--fs-sm);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.cnr-file-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; font-style: italic; }
.cnr-file-list { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.cnr-file-item {
    font-size: var(--fs-xs); color: var(--text-secondary);
    padding: 4px 10px; background: var(--bg-subtle, rgba(0, 0, 0, 0.03));
    border-radius: var(--r-sm);
}

/* Attachments rendered on the detail view */
.cnr-att-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cnr-att {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 8px 12px; border: 1px solid var(--border-subtle);
    border-radius: var(--r-md); background: var(--bg-base);
    text-decoration: none; color: var(--text-primary); font-size: var(--fs-sm);
}
.cnr-att:hover { border-color: var(--accent); color: var(--accent); }
.cnr-att i { color: var(--text-muted); font-size: 14px; }
.cnr-att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnr-att-size { font-size: var(--fs-xs); color: var(--text-muted); }

/* Status transition log — chronological list of acknowledged / resolved /
   dismissed events with optional comment.  Coloured dot per action so
   users can scan the lifecycle at a glance. */
.cnr-log { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.cnr-log-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.cnr-log-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-top: 6px;
    background: var(--text-faint); flex-shrink: 0;
}
.cnr-log-dot--acknowledged { background: var(--accent); }
.cnr-log-dot--resolved { background: #2d8a4f; }
.cnr-log-dot--dismissed { background: var(--text-muted); }
.cnr-log-body { flex: 1; }
.cnr-log-text { font-size: var(--fs-sm); color: var(--text-primary); }
.cnr-log-text strong { font-weight: 700; }
.cnr-log-comment {
    font-size: var(--fs-sm); color: var(--text-secondary);
    font-style: italic; margin-top: 4px;
    padding: 6px 10px; background: var(--bg-subtle, rgba(0, 0, 0, 0.03));
    border-radius: var(--r-sm);
}
.cnr-log-time { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 4px; }

/* Take-action block on detail view — only shown when the user can transition. */
.cnr-action-hint { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-3); line-height: 1.55; }
.cnr-action-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Urgency badges (also reused in detail + list views) */
.cnr-urg-badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 9999px;
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cnr-urg-badge--fyi { background: var(--bg-subtle, rgba(0, 0, 0, 0.05)); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.cnr-urg-badge--concern { background: rgba(67, 67, 175, 0.10); color: var(--accent); border: 1px solid rgba(67, 67, 175, 0.25); }
.cnr-urg-badge--urgent { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }

/* Concerns list */
.cnr-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cnr-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-4); padding: var(--sp-4);
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    background: var(--bg-base); text-decoration: none; color: inherit;
    transition: border-color 0.12s;
}
.cnr-row:hover { border-color: var(--border-mid); }
.cnr-row-main { flex: 1; min-width: 0; }
.cnr-row-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 4px; }
.cnr-row-title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-base); }
.cnr-row-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.cnr-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cnr-row-owner { font-size: var(--fs-xs); color: var(--text-secondary); }
.cnr-status { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 9999px; }
.cnr-status--new { background: rgba(67, 67, 175, 0.10); color: var(--accent); }
.cnr-status--acknowledged { background: rgba(0, 0, 0, 0.04); color: var(--text-secondary); }
.cnr-status--resolved, .cnr-status--dismissed { background: rgba(0, 0, 0, 0.04); color: var(--text-muted); }
.cnr-status--escalated { background: rgba(217, 119, 6, 0.10); color: var(--amber); }

/* Where to act */
.dash-act { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-4); text-decoration: none; transition: background 0.12s; }
a.dash-act:hover { background: var(--bg-hover); }
.dash-act-text { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.dash-act-go { font-size: var(--fs-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dash-act-go i { font-size: 10px; }
.dash-act--calm { font-size: var(--fs-sm); color: var(--text-muted); justify-content: flex-start; }


/* ═══════════════════════════════════════════════════════════
   PAGE HEADER (for list/dashboard pages)
   ═══════════════════════════════════════════════════════════ */
.page-header { margin-bottom: var(--sp-6); }
.page-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: var(--sp-1); }
.page-subtitle { font-size: var(--fs-base); color: var(--text-muted); }
.page-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }


/* ═══════════════════════════════════════════════════════════
   SUMMARY CARDS (bento grid)
   ═══════════════════════════════════════════════════════════ */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.summary-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: inherit;
}
.summary-card:hover { border-color: var(--border-mid); }
.summary-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.summary-card-label {
    order: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0;
}
.summary-card-value {
    order: 1;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}
.summary-card-detail {
    order: 2;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-6); }
.tab-btn { padding: var(--sp-2) var(--sp-4); font-family: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s; margin-bottom: -1px; }
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { font-size: var(--fs-2xs); color: var(--text-faint); margin-left: 4px; font-variant-numeric: tabular-nums; }
.tab-btn.active .tab-count { color: var(--text-muted); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }


/* ═══════════════════════════════════════════════════════════
   PROPERTIES SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.prop-section { margin-bottom: var(--sp-6); }
.prop-section-title { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }
/* Vertical breathing room between rows — increased so each property
   reads as a distinct fact rather than a tightly-packed list. The
   "+" between consecutive rows draws a separator without padding the
   first row's top against the section title. */
.prop-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.prop-row + .prop-row { border-top: 1px solid var(--border-subtle); }
.prop-label { font-size: var(--fs-sm); color: var(--text-muted); }

/* Shared style for sidebar action buttons — "Manage" on Owners,
   "Manage" / "Link" / "Add" on AI tools, and any future per-row
   action. Replaces the per-row .owner-manage-btn and .vp-manage-btn
   variants that drifted apart visually. */
.prop-action-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.prop-action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-base); }
.prop-action-btn i { font-size: 10px; }
.prop-value { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; text-align: right; }
.prop-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Inline-edit on the rail's key facts (Phase 2) — the fact IS the editor.
   Simple fields edit in place; richer ones make the whole row open a panel. */
.prop-row--editable, .prop-row--inline {
    position: relative; cursor: pointer;
    margin: 0 -8px; padding-left: 8px; padding-right: 8px;
    border-radius: var(--r-sm); transition: background 0.12s;
}
.prop-row--editable:hover, .prop-row--inline:hover { background: var(--bg-hover); }
.prop-row--editable:focus-visible, .prop-row--inline:focus-visible {
    outline: none; box-shadow: 0 0 0 2px rgba(67, 67, 175, 0.25);
}
.prop-row--inline .prop-value { display: inline-flex; align-items: center; gap: 6px; }
.prop-value[data-ie-field] { cursor: pointer; }
.prop-edit-icon, .prop-row-edit-icon {
    font-size: 10px; color: var(--text-faint);
    opacity: 0; transition: opacity 0.12s;
}
.prop-row-edit-icon { position: absolute; top: 12px; right: 8px; }
.prop-row--editable:hover .prop-edit-icon,
.prop-row--editable:hover .prop-row-edit-icon,
.prop-row--inline:hover .prop-edit-icon { opacity: 1; }
.prop-value--editing { display: block !important; width: 100%; }
.ie-input {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: var(--fs-sm);
    padding: 3px 6px;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--bg-base); color: var(--text-primary);
    text-align: left;
}
.ie-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(67, 67, 175, 0.15); }

/* Description side-panel body — the system's purpose statement,
   accessible by clicking the entity title. Read-only; edits would
   invalidate the system's risks and controls. */
.entity-desc-panel {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* ── Health row + popover (sidebar dot replacing the old Health tab) ── */
.health-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    transition: all 0.15s;
    text-align: left;
}
.health-row:hover { border-color: var(--border-mid); background: var(--bg-hover); }
.health-row--open { border-color: var(--accent); }
.health-row--healthy { border-color: rgba(26, 143, 50, 0.2); }
.health-row--review  { border-color: rgba(234, 88, 12, 0.2); }
.health-row--attention { border-color: rgba(220, 38, 38, 0.2); }
.health-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.health-dot--healthy { background: var(--green); }
.health-dot--review { background: var(--amber); }
.health-dot--attention { background: var(--red); }
.health-label { flex: 1; font-weight: 500; }
.health-chevron { font-size: 10px; color: var(--text-faint); transition: transform 0.15s; }
.health-row--open .health-chevron { transform: rotate(180deg); }
.health-popover {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
}
.health-popover-row {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 6px 0;
    font-size: var(--fs-xs);
}
.health-popover-row + .health-popover-row { border-top: 1px solid var(--border-subtle); }
.health-popover-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.health-popover-dot--blue { background: var(--green); }
.health-popover-dot--amber { background: var(--amber); }
.health-popover-dot--red { background: var(--red); }
.health-popover-label { flex: 1; color: var(--text-secondary); }
.health-popover-status { color: var(--text-muted); font-weight: 500; }

/* ── Linked entity rows (clickable counts in sidebar) ── */
.linked-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: all 0.15s;
    margin-bottom: var(--sp-2);
    text-align: left;
}
.linked-row:hover { border-color: var(--accent); background: var(--bg-raised); transform: translateX(2px); }
.linked-row:last-child { margin-bottom: 0; }
.linked-row-count {
    font-size: var(--fs-base); font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
    text-align: center;
}
.linked-row-label { flex: 1; font-size: var(--fs-sm); color: var(--text-secondary); }
.linked-row-arrow { font-size: 10px; color: var(--text-faint); transition: transform 0.15s; }
.linked-row:hover .linked-row-arrow { color: var(--accent); transform: translateX(2px); }
.linked-row--alert .linked-row-count { color: var(--red); }
.linked-row--alert { border-color: rgba(220, 38, 38, 0.2); }

/* ── Empty-state inside slide panels ── */
.panel-empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    color: var(--text-muted);
}
.panel-empty > i { font-size: 24px; color: var(--text-faint); margin-bottom: var(--sp-2); display: block; }
.panel-empty p { margin: 0; line-height: 1.6; font-size: var(--fs-sm); }
.panel-empty p + p { margin-top: var(--sp-2); }


/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-2xs); font-weight: 500; white-space: nowrap; }
/* "New" — recently created items in the Everything list (accent-tinted). */
.badge-new { background: rgba(67, 67, 175, 0.10); color: var(--accent); font-weight: 600; }
/* Monochrome palette — colour is reserved for genuine criticality (red).
   Every other badge is neutral; the badge text carries the meaning. */
.badge-high,
.badge-red     { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.badge-medium,
.badge-low,
.badge-neutral,
.badge-green,
.badge-amber,
.badge-blue,
.badge-active,
.badge-accent  { background: rgba(0, 0, 0, 0.04); color: var(--text-muted); border: 1px solid var(--border-mid); }

/* Dark theme badge neutral needs different background */
.dark-theme .badge-neutral { background: rgba(160, 160, 173, 0.10); border-color: #6A6A76; }

/* Badge with dot variant */
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn { font-family: inherit; font-size: var(--fs-sm); font-weight: 500; padding: 6px 14px; border-radius: var(--r-md); cursor: pointer; transition: all 0.1s; display: inline-flex; align-items: center; gap: 6px; border: none; white-space: nowrap; line-height: 1.4; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-mid); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-secondary); }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-outline:hover { background: var(--accent-bg); }
.btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.btn-danger:hover { background: rgba(220, 59, 59, 0.12); }
.btn-full { width: 100%; justify-content: center; }
.btn i { font-size: 12px; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }


/* ═══════════════════════════════════════════════════════════
   TASK ROWS
   ═══════════════════════════════════════════════════════════ */
.task-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); cursor: pointer; transition: background 0.1s; border-radius: var(--r-md); margin: 0 calc(-1 * var(--sp-3)); }
.task-row:hover { background: var(--bg-hover); }
.task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.task-body { flex: 1; min-width: 0; }
.task-name { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.task-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.task-chevron { color: var(--text-faint); font-size: 11px; margin-top: 5px; opacity: 0; transition: opacity 0.1s; }
.task-row:hover .task-chevron { opacity: 1; }
.task-row:hover .task-name { color: var(--accent); }


/* ═══════════════════════════════════════════════════════════
   LINKED ITEMS
   ═══════════════════════════════════════════════════════════ */
.linked-section { margin-bottom: var(--sp-6); }
.linked-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.linked-header-icon { color: var(--text-faint); font-size: 13px; }
.linked-header-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.linked-header-count { font-size: var(--fs-2xs); color: var(--text-faint); background: var(--bg-overlay); padding: 1px 6px; border-radius: 9999px; }
.linked-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; transition: background 0.1s; }
.linked-item:hover { background: var(--bg-hover); }
.linked-item:hover .linked-name { color: var(--accent); }
.linked-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.linked-body { flex: 1; min-width: 0; }
.linked-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.linked-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.linked-right { flex-shrink: 0; }

/* Corrective-action "show how you addressed this" (incident panel) */
.ca-block { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); }
.ca-block:last-child { border-bottom: 0; margin-bottom: 0; }
.ca-record { margin: 2px 0 var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.ca-record-note { white-space: pre-wrap; color: var(--text-primary); }
.ca-record-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.ca-proof { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); margin-top: 4px; margin-right: var(--sp-3); }
.ca-address { margin: 2px 0 var(--sp-2) var(--sp-3); }
.ca-address > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 500; color: var(--accent); padding: 4px 0; list-style: none; }
.ca-address > summary::-webkit-details-marker { display: none; }
.ca-address > summary::before { content: '+ '; }
.ca-address[open] > summary::before { content: '\2013  '; }
.ca-form { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 var(--sp-2); }
.ca-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-top: 4px; }
.ca-req { color: var(--red); font-weight: 500; }
.ca-opt { color: var(--text-muted); font-weight: 400; }
.ca-file { font-size: var(--fs-xs); }
.ca-form .btn { align-self: flex-start; margin-top: 6px; }


/* ═══════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════ */
.data-table-container { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-raised); position: sticky; top: 0; z-index: 1; }
.data-table td { padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-secondary); }
.data-table tr:last-child td { border-bottom: none; }

/* Column sorting */
.data-table th.sortable { cursor: pointer; user-select: none; transition: color 0.1s; position: relative; padding-right: calc(var(--sp-4) + 14px); }
.data-table th.sortable:hover { color: var(--text-secondary); }
.data-table th.sortable::after { content: ''; display: inline-block; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: url('../icons/chevron-down.svg') no-repeat center / contain; mask: url('../icons/chevron-down.svg') no-repeat center / contain; position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); opacity: 0.3; transition: opacity 0.1s; }
.data-table th.sortable:hover::after { opacity: 0.6; }
.data-table th.sortable.sort-asc::after { content: '\f0de'; opacity: 1; color: var(--accent); }
.data-table th.sortable.sort-desc::after { content: '\f0d8'; opacity: 1; color: var(--accent); }

.data-table tbody tr { cursor: pointer; transition: background 0.1s; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:hover .table-name { color: var(--accent); }

.table-name { font-weight: 600; color: var(--text-primary); transition: color 0.1s; }
.table-id { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.table-action-btn { opacity: 0; transition: opacity 0.1s; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--r-sm); }
.data-table tbody tr:hover .table-action-btn { opacity: 1; }
.table-action-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* Bulk selection */
.bulk-check-col { width: 40px; padding-left: var(--sp-3) !important; padding-right: 0 !important; }
.bulk-check-col input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.data-table tbody tr.bulk-selected { background: var(--accent-bg); }
.data-table tbody tr.bulk-selected:hover { background: var(--accent-bg); }

/* Bulk action bar */
.bulk-bar { position: fixed; bottom: 0; left: var(--sidebar-w); right: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); background: var(--bg-raised); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 12px rgba(0,0,0,0.06); z-index: 50; transform: translateY(100%); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; pointer-events: none; }
.bulk-bar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sidebar-collapsed .bulk-bar { left: 56px; }
.bulk-bar-count { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 4px 12px; border-radius: var(--r-full); white-space: nowrap; }
.bulk-bar-actions { display: flex; gap: var(--sp-2); flex: 1; }

/* De-duplication hint */
.bulk-dedup-hint { display: flex; align-items: center; gap: var(--sp-2); background: var(--accent-bg); border: 1px solid rgba(67,67,175,0.18); border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 4px; }
.bulk-dedup-hint i { color: var(--accent); flex-shrink: 0; }
.bulk-dedup-hint .btn { white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════
   TIMELINE (Activity tab)
   ═══════════════════════════════════════════════════════════ */
.timeline-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; position: relative; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 32px; bottom: 0; width: 1px; background: var(--border-subtle); }
.timeline-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; }
.dot-blue  { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
.dot-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.dot-red   { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.dot-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.timeline-body { flex: 1; min-width: 0; }
.timeline-text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.timeline-text strong { color: var(--text-primary); font-weight: 600; }
.timeline-date { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }


/* ═══════════════════════════════════════════════════════════
   SLIDE PANEL
   ═══════════════════════════════════════════════════════════ */
.slide-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.28); z-index: 2000; display: none; }
.slide-panel-overlay.open { display: block; }
.slide-panel { position: fixed; top: 0; right: 0; width: 480px; height: 100vh; background: var(--bg-raised); border-left: 1px solid var(--border-mid); box-shadow: var(--shadow-lg); z-index: 2001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-panel.open { transform: translateX(0); }
.slide-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.slide-panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.slide-panel-close { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.slide-panel-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.slide-panel-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.slide-panel-body::-webkit-scrollbar { width: 6px; }
.slide-panel-body::-webkit-scrollbar-track { background: transparent; }
.slide-panel-body::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
.slide-panel-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* Panel detail rows */
.panel-section { margin-bottom: var(--sp-6); }
.panel-section-title { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
.panel-meta-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.panel-meta-label { color: var(--text-muted); }
.panel-meta-value { color: var(--text-primary); font-weight: 500; }

/* Panel form elements (used in IC panels & create/edit panels) */
.panel-form-group { margin-bottom: var(--sp-5); }
.panel-form-group:last-child { margin-bottom: 0; }
.panel-label { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2); }
.panel-input { width: 100%; font-family: inherit; font-size: var(--fs-sm); padding: 8px 12px; background: var(--bg-base); border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-primary); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.panel-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); line-height: 1.5; }
.panel-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.panel-input::placeholder { color: var(--text-faint); }
.panel-textarea { width: 100%; font-family: inherit; font-size: var(--fs-sm); padding: 8px 12px; background: var(--bg-base); border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-primary); outline: none; line-height: 1.5; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; }
.panel-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.panel-textarea::placeholder { color: var(--text-faint); }
.panel-select { width: 100%; font-family: inherit; font-size: var(--fs-sm); padding: 8px 12px; background: var(--bg-base); border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-primary); outline: none; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.panel-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }


/* ═══════════════════════════════════════════════════════════
   NOTIFICATION DROPDOWN
   ═══════════════════════════════════════════════════════════ */
.notif-wrap { position: relative; }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--red); color: var(--white); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; font-variant-numeric: tabular-nums; }
.notif-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-height: 480px; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 1000; display: none; flex-direction: column; overflow: hidden; }
.notif-dropdown.open { display: flex; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.notif-header-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.notif-header-action { font-family: inherit; font-size: var(--fs-xs); color: var(--accent); background: none; border: none; cursor: pointer; }
.notif-header-action:hover { text-decoration: underline; }
.notif-list { flex: 1; overflow-y: auto; }
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
.notif-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: background 0.05s; border-bottom: 1px solid var(--border-subtle); position: relative; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { border-left: 3px solid var(--accent); }
.notif-item.read { opacity: 0.6; }
.notif-item-icon { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-faint); flex-shrink: 0; margin-top: 2px; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4; }
.notif-item.unread .notif-item-text { color: var(--text-primary); font-weight: 500; }
.notif-item-time { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }
.notif-item-dismiss { position: absolute; top: var(--sp-2); right: var(--sp-3); background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 10px; opacity: 0; transition: opacity 0.1s; padding: 4px; }
.notif-item:hover .notif-item-dismiss { opacity: 1; }
.notif-item-dismiss:hover { color: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════════
   FILTER BAR & TABLE TOOLBAR
   ═══════════════════════════════════════════════════════════ */
.filter-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.filter-input { flex: 1; max-width: 280px; font-family: inherit; font-size: var(--fs-sm); padding: 7px 12px 7px 32px; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md); color: var(--text-primary); outline: none; transition: border-color 0.15s; }
.filter-input:focus { border-color: var(--accent); }
.filter-input-wrap { position: relative; flex: 1; max-width: 280px; }
.filter-input-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-faint); }
.filter-pill { font-family: inherit; font-size: var(--fs-xs); padding: 5px 12px; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-full); color: var(--text-muted); cursor: pointer; transition: all 0.1s; }
.filter-pill:hover { border-color: var(--border-mid); color: var(--text-secondary); }
.filter-pill.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }

.table-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.table-toolbar-btn { width: 32px; height: 32px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); border-radius: var(--r-md); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; transition: all 0.1s; font-family: inherit; }
.table-toolbar-btn:hover { border-color: var(--border-mid); color: var(--text-primary); background: var(--bg-hover); }
.table-toolbar-btn.has-filters { border-color: var(--accent-border); color: var(--accent); }
.filter-count { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Filter panel (inside slide-panel) */
.filter-group { margin-bottom: var(--sp-5); }
.filter-group-label { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { display: inline-flex; padding: 4px 12px; border-radius: var(--r-full); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: all 0.1s; font-family: 'Inter', sans-serif; }
.filter-chip:hover { border-color: var(--border-mid); color: var(--text-primary); }
.filter-chip.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.filter-select { width: 100%; font-family: inherit; font-size: var(--fs-sm); padding: 7px 10px; background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--r-md); color: var(--text-primary); outline: none; transition: border-color 0.15s; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
.filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.filter-select option { background: var(--bg-raised); color: var(--text-primary); }


/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════ */
.empty-state { text-align: center; padding: var(--sp-10) var(--sp-6); }
.empty-state-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-raised); display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 20px; margin-bottom: var(--sp-4); }
.empty-state-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.empty-state-text { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.5; }


/* ═══════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea { width: 100%; font-family: inherit; font-size: var(--fs-base); padding: 8px 12px; background: var(--bg-overlay); border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-primary); outline: none; transition: border-color 0.15s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.form-textarea { resize: vertical; }

/* ── Multi-select tags ── */
.ms-wrap { display:flex; flex-direction:column; gap:6px; }
.ms-tags { display:flex; flex-wrap:wrap; gap:4px; }
.ms-tags:empty { display:none; }
.ms-tag { display:inline-flex; align-items:center; gap:4px; background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-border); border-radius:var(--r-full); padding:2px 8px 2px 10px; font-size:var(--fs-xs); font-weight:500; }
.ms-tag button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; opacity:0.7; }
.ms-tag button:hover { opacity:1; }
.ms-select option:disabled { color:var(--text-faint); }


/* ═══════════════════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════════════════ */
.cmd-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 3000; display: none; align-items: flex-start; justify-content: center; padding-top: 20vh; }
.cmd-overlay.open { display: flex; }
.cmd-modal { width: 560px; max-height: 440px; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: cmdEnter 0.15s ease-out; }
@keyframes cmdEnter { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.cmd-input-wrap { display: flex; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); gap: var(--sp-3); }
.cmd-input-wrap > i { color: var(--text-faint); font-size: 15px; flex-shrink: 0; }
.cmd-input { flex: 1; background: none; border: none; outline: none; font-family: inherit; font-size: var(--fs-base); color: var(--text-primary); min-width: 0; }
.cmd-input::placeholder { color: var(--text-faint); }
.cmd-close { background: none; border: none; cursor: pointer; color: var(--text-faint); width: 28px; height: 28px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; transition: all 0.15s; font-size: 13px; flex-shrink: 0; padding: 0; }
.cmd-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.cmd-results { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-3); }
.cmd-group { margin-bottom: var(--sp-2); }
.cmd-group:last-child { margin-bottom: 0; }
.cmd-group-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.cmd-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: background 0.05s; border-radius: var(--r-md); text-decoration: none; color: inherit; }
.cmd-item:hover, .cmd-item.selected { background: var(--bg-hover); }
.cmd-item i { width: 16px; text-align: center; color: var(--text-faint); font-size: 13px; }
.cmd-item-text, .cmd-item-label { font-size: var(--fs-sm); color: var(--text-primary); }
.cmd-item-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; }
.cmd-item-badge { font-size: 10px; font-weight: 600; color: var(--white); padding: 1px 7px; border-radius: var(--r-full); margin-left: auto; line-height: 1.5; }
.cmd-item-badge + .cmd-item-meta { margin-left: var(--sp-2); }
.cmd-empty { padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.cmd-empty > i { font-size: 20px; color: var(--text-faint); margin-bottom: var(--sp-1); }
.cmd-empty-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.cmd-empty-sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* AI-drafted suggestions — small inline badge + section heading.
   Used when the lexical retriever has thin coverage and Claude drafts
   additional risks/controls for the specific AI use case. The visual
   distinction tells the user "this came from AI, not the curated library". */
.suggestion-draft-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(67, 67, 175, 0.08);
    padding: 2px 7px;
    border-radius: var(--r-full);
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.suggestion-draft-badge i { font-size: 9px; }

.suggestion-section-heading {
    padding: var(--sp-3) var(--sp-5) var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-subtle);
}
.suggestion-section-heading--draft {
    color: var(--accent);
    background: rgba(67, 67, 175, 0.04);
}
.suggestion-section-heading--draft i { margin-right: 4px; }
.suggestion-section-sub {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    margin-left: var(--sp-1);
    font-size: 10px;
}

/* ─── Action Plan (.ap-*) — control setup plan ─────────────────────────
   Used in views/ai-system/_action_plan.php and the wizard.
   Structure:
     .ap-container
       .ap-progress           ← X of Y controls in place + bar
       .ap-upnext             ← the next few controls to set up
         .ap-list .ap-control-row
       .ctrl-disclosure       ← collapsed "Full setup plan" + "Done"
         .ap-group .ap-list .ap-control-row
       .ap-empty-state        ← shown when everything is in place
*/
.ap-container { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Completion progress card — replaces the Sprint 1 narrative.
   Honest, scannable, no AI prose. */
.ap-progress {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
}
.ap-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.ap-progress-stats {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.ap-progress-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.ap-progress-of {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 500;
}
.ap-progress-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-left: 4px;
}
.ap-progress-meta {
    font-size: var(--fs-xs);
    color: var(--text-faint);
}
.ap-progress-bar {
    height: 6px;
    background: var(--bg-base);
    border-radius: 999px;
    overflow: hidden;
}
.ap-progress-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 999px;
    transition: width 0.4s ease-out;
}

/* Priority pill — flagged on rows linked to high-severity risks.
   Severity is communicated VISIBLY here, not by overriding the bucket. */
.ap-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    padding: 2px 7px;
    border-radius: var(--r-full);
    line-height: 1.3;
}
.ap-priority-pill i { font-size: 9px; }

/* Skipped-at-launch pill — persistent badge on rows that were Priority
   when the user activated the system via the bypass path. Stays until
   the user catches up by completing the control. Amber, distinct from
   the red Priority pill. */
.ap-skipped-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--amber);
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    padding: 2px 7px;
    border-radius: var(--r-full);
    line-height: 1.3;
}
.ap-skipped-pill i { font-size: 9px; }

/* Subtle visual cue on the row itself — left border in amber. Reinforces
   "this is the deferred work" without dominating the row. */
.ap-control-row--skipped {
    border-left: 3px solid var(--amber);
    padding-left: calc(var(--sp-5) - 3px);
}

/* Buckets — one section per today/scheduled/ongoing */
/* Action plan — "Up next" lead list + collapsed grouped full plan */
.ap-section-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.ap-section-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; margin-bottom: var(--sp-3); }
.ap-list { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.ap-group + .ap-group { margin-top: var(--sp-5); }
.ap-group-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.ap-group-count { color: var(--text-faint); margin-left: 5px; }
.ap-disclosure-body { padding-top: var(--sp-4); }

/* AI System detail — dossier sections in the main column */
.sys-section { margin-bottom: var(--sp-6); }
.sys-section:last-child { margin-bottom: 0; }
.sys-section-title { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.sys-overview { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-secondary); margin: 0; }
.linked-row--static { cursor: default; }
.linked-row--static:hover { background: none; }

/* AI System detail — lifecycle status banner */
.sys-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
}
.sys-banner .ic { flex: none; font-size: 15px; }
.sys-banner--planning {
    background: rgba(67, 67, 175, 0.05);
    border-color: rgba(67, 67, 175, 0.22);
    color: var(--accent);
}
.sys-banner--retired {
    background: var(--bg-overlay);
    color: var(--text-secondary);
}
/* Retired systems read as a greyscaled, historical record */
.detail-layout--retired { filter: grayscale(1); opacity: 0.92; }

/* ── AI System detail — tabbed registry overview (Phase 2D) ──────────────
   Pill tabs on top, a persistent identity header + lifecycle banner,
   then borderless labelled rows. Cards only where they earn it. */
.sysv { max-width: 940px; margin: 0 auto; }

/* ── D1 — detail page contract (plan_detail_pages.md) ─────────────────
   Verdict line, needs-attention strip, capped row lists, properties
   rail. Shared by control / risk / system detail pages. */

/* Verdict — one sentence under the title */
.sysv-verdict { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.sysv-verdict p { margin: 0; font-size: var(--fs-md); }
.sysv-verdict-detail { color: var(--text-muted); }
.sysv-verdict-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sysv-verdict-dot--green { background: var(--green); }
.sysv-verdict-dot--amber { background: var(--amber); }
.sysv-verdict-dot--red { background: var(--red); }
.sysv-verdict-dot--grey { background: var(--text-faint); }
/* The single next-action button under the verdict (Stream 3c). Ink-black —
   the one deliberately "loud" element on the page; accent stays for signal. */
.sysv-verdict-action { margin: var(--sp-3) 0 0 17px; }
.dp-next-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--text-primary); color: var(--bg-base);
    font-size: var(--fs-sm); font-weight: 600; line-height: 1;
    padding: 9px 16px; border: none; border-radius: var(--r-md);
    cursor: pointer; text-decoration: none; transition: opacity 0.12s;
}
.dp-next-action:hover { opacity: 0.85; color: var(--bg-base); }
/* "What's linked" chip row (Stream 3c-2) — counts at a glance; click opens the
   full slide panel. Replaces the five fat related-record sub-tabs. */
.dp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-raised); border: 1px solid var(--border-subtle);
    border-radius: var(--r-md); padding: 9px 15px;
    font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary);
    cursor: pointer; transition: border-color 0.12s;
}
.dp-chip:hover { border-color: var(--border-strong); }
.dp-chip span { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.dp-chip--empty { color: var(--text-faint); }
.dp-chip--empty span { color: var(--text-faint); }
/* Rail "More details" — native disclosure, reference facts one toggle down. */
.dp-more { margin-top: var(--sp-4); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); }
.dp-more > summary {
    font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer;
    list-style: none; display: flex; align-items: center; gap: 6px;
}
.dp-more > summary::-webkit-details-marker { display: none; }
.dp-more > summary::after { content: '\25BE'; font-size: 10px; color: var(--text-faint); }
.dp-more[open] > summary::after { content: '\25B4'; }
.dp-more > summary:hover { color: var(--text-primary); }
.dp-more .sysv-prop:first-of-type { margin-top: var(--sp-3); }

/* ── Detail-page visual polish (Stream 3c-5) ────────────────────────── */
/* Verdict hero — the bordered card that leads the page. */
.dp-hero {
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
    background: var(--bg-base); padding: var(--sp-5) var(--sp-6); margin: var(--sp-2) 0 0;
}
.dp-hero-line { display: flex; align-items: center; gap: var(--sp-3); }
.dp-hero-dot { width: 11px; height: 11px; }
.dp-hero-headline { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
.dp-hero-detail { margin: 6px 0 0 23px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.dp-hero-action { margin: var(--sp-4) 0 0 23px; }

/* Needs-attention — one bordered card per item, status dot + remedy CTA. */
.dp-attn-h { margin-top: var(--sp-5); }
.dp-attn { display: flex; flex-direction: column; gap: 6px; }
.dp-attn-item {
    display: flex; align-items: center; gap: var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    background: var(--bg-base); padding: 11px 14px; font-size: var(--fs-sm);
}
.dp-attn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dp-attn-dot--red { background: var(--red); }
.dp-attn-dot--amber { background: var(--amber); }
.dp-attn-dot--blue { background: var(--accent); }
.dp-attn-text { flex: 1; min-width: 0; }
.dp-attn-act {
    flex-shrink: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
    text-decoration: none; white-space: nowrap; background: none; border: none;
    cursor: pointer; font-family: inherit;
}
.dp-attn-act:hover { text-decoration: underline; }
.dp-attn-more { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); text-decoration: none; padding: 2px; }

/* Chip icons + rail group header. */
.dp-chip i { color: var(--text-faint); font-size: 12px; }
.dp-rail-h {
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 var(--sp-3);
}

/* Needs attention — only renders when something is wrong */
.sysv-attn {
    margin: var(--sp-4) 0 0;
    border: 1px solid var(--amber-border, #f3d9b6); border-left: 3px solid var(--amber);
    background: var(--amber-bg); border-radius: var(--r-md); overflow: hidden;
}
.sysv-attn-row {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px 14px; font-size: var(--fs-sm);
}
.sysv-attn-row + .sysv-attn-row { border-top: 1px solid rgba(180, 83, 9, 0.12); }
.sysv-attn-text { min-width: 0; }
.sysv-attn-act {
    margin-left: auto; flex-shrink: 0;
    font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
    border: 1px solid var(--border-mid); background: var(--bg-base);
    border-radius: var(--r-sm); padding: 3px 10px; cursor: pointer;
    font-family: inherit; text-decoration: none; white-space: nowrap;
}
.sysv-attn-act:hover { border-color: var(--accent); }
.sysv-attn-more { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }

/* Section heads on the record */
.sysv-sec { margin-top: var(--sp-6); }
.sysv-sec-h {
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin: 0 0 var(--sp-3);
}

/* Observer network (Phase 3) — compact "what to watch for" link → side panel. */
.sysv-watch-link {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-4); padding: 0; background: none; border: 0; cursor: pointer;
    font-size: var(--fs-sm); color: var(--accent); font-weight: 500;
}
.sysv-watch-link:hover { text-decoration: underline; }
.sysv-watch-link-n {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--accent-bg, rgba(67, 67, 175, 0.10));
    color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
}
/* Watch-for side panel — grouped by theme; plain bullets, no surveillance icon. */
.panel-lead { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); }
.panel-watch-group { margin-bottom: var(--sp-5); }
.panel-watch-theme {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--accent); margin-bottom: var(--sp-2);
}
.panel-watch-list { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.panel-watch-list li { font-size: var(--fs-sm); color: var(--text); }

/* Capped row lists — "View all N ›" footer opens the side panel */
.sysv-rowlist { border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--bg-base); }
.sysv-rowlist .ctrl-portfolio-row { border: none; border-radius: 0; }
.sysv-rowlist .ctrl-portfolio-row + .ctrl-portfolio-row { border-top: 1px solid var(--border-subtle); }
.sysv-row-more {
    display: flex; align-items: center; justify-content: center; width: 100%;
    padding: 9px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
    background: var(--bg-subtle, #fcfcfd); border: none; border-top: 1px solid var(--border-subtle);
    cursor: pointer; font-family: inherit;
}
.sysv-row-more:hover { background: var(--bg-hover, #f6f6f8); }

/* Compact current-review row */
.sysv-review-row {
    display: flex; align-items: center; gap: var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    padding: 10px 14px; font-size: var(--fs-sm); background: var(--bg-base);
}
.sysv-review-row .sysv-action { margin-left: auto; white-space: nowrap; }

/* Properties rail — lives inside the existing .detail-sidebar column */
.sysv-prop { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.sysv-prop-v--prose { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.55; }
.sysv-prop:last-child { border-bottom: none; }
.sysv-prop-k {
    font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
}
.sysv-prop-v { font-size: var(--fs-sm); font-weight: 500; margin-top: 2px; color: var(--text-primary); }
.sysv-prop-v small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
/* Editable rail value — the value itself is the link (Stream 3c-8). */
.sysv-prop-link { color: var(--text-primary); font-weight: 500; text-decoration: none; border-bottom: 1px dashed var(--border-mid); cursor: pointer; }
.sysv-prop-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Labelled Actions menu (extends .detail-menu) */
.detail-menu-btn--label {
    width: auto; border-radius: var(--r-md);
    padding: 5px 12px; font-size: var(--fs-sm); font-weight: 500;
}

/* Panel search (long-list pattern) + status group heads */
.dp-panel-search {
    display: block; width: calc(100% - var(--sp-8)); margin: 0 var(--sp-4) var(--sp-3); box-sizing: border-box;
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    padding: 7px 10px; font-family: inherit; font-size: var(--fs-sm);
    color: var(--text-primary); background: var(--bg-base);
}
.dp-panel-search:focus { outline: none; border-color: var(--accent); }
.dp-panel-group-h {
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-faint);
    margin: var(--sp-3) var(--sp-4) var(--sp-1);
}

/* Pill tabs */
.sysv-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.sysv-tab {
    padding: 0 0 10px; margin-bottom: -1px;
    border: none; border-bottom: 2px solid transparent; background: none;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
    color: var(--text-muted); cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.sysv-tab:hover { color: var(--text-secondary); }
.sysv-tab.is-active { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--text-primary); }

/* Identity header */
.sysv-id { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.sysv-eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sysv-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.25; margin: 4px 0 0; }

/* Lifecycle banner — persistent across tabs */
.sysv-banner { border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); }
.sysv-banner--planning { background: var(--accent-bg); border: 1px solid rgba(67, 67, 175, 0.30); }
.sysv-banner--retired { background: var(--bg-overlay); border: 1px solid var(--border-subtle); }
.sysv-banner--report { background: var(--accent-bg); border: 1px solid rgba(67, 67, 175, 0.30); }
.sysv-banner--classify { background: var(--amber-bg); border: 1px solid var(--amber-border); }
.sysv-banner-text { margin: 0; font-size: var(--fs-sm); color: var(--text-primary); }
.sysv-banner--planning .sysv-banner-text { color: var(--accent-muted); font-weight: 500; }
.sysv-banner-actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.sysv-banner-btn {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: var(--r-md);
    border: 1px solid var(--accent); background: var(--bg-base);
    font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
    text-decoration: none; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.sysv-banner-btn:hover { background: var(--accent); color: #fff; }
.sysv-banner-link {
    background: none; border: none; padding: 0; font-family: inherit;
    font-size: var(--fs-sm); color: var(--accent); cursor: pointer;
}
.sysv-banner-link:hover { text-decoration: underline; }

/* Tab panes */
.sysv-tabpane[hidden] { display: none; }

/* Labelled rows — left key, value(s) on the right */
.sysv-row { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; align-items: baseline; }
/* On the Overview, property rows are visually a list — a subtle divider
   keeps them legible at a glance without adding ceremony. */
.sysv-tabpane[data-pane="overview"] .sysv-row + .sysv-row {
    border-top: 1px solid var(--border-subtle);
}
/* Section heads break the list — the row directly after a head should
   not have a top border (the head's bottom margin is enough of a gap). */
.sysv-tabpane[data-pane="overview"] .sysv-section-head + .sysv-row {
    border-top: 0;
}
.sysv-row-key { flex: none; width: 120px; font-size: var(--fs-sm); color: var(--text-muted); }
.sysv-row-key::after { content: ':'; }
.sysv-row-val { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.sysv-row-val--multi { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6); }
.sysv-fact { font-weight: 600; color: var(--text-primary); }
.sysv-fact-link { color: var(--accent); text-decoration: none; }
.sysv-fact-link:hover { text-decoration: underline; }
.sysv-prose { margin: 0; font-weight: 400; line-height: 1.7; color: var(--text-secondary); }
.sysv-muted { color: var(--text-faint); font-weight: 400; }

/* Editable fact (Risk) — click to edit in place */
.sysv-fact--edit { cursor: pointer; border-radius: var(--r-sm); padding: 1px 5px; margin: -1px -5px; transition: background 0.12s; }
.sysv-fact--edit:hover { background: var(--bg-hover); }
.sysv-editing { background: var(--bg-active); }
.ie-input {
    width: 132px; box-sizing: border-box; font-family: inherit; font-size: var(--fs-sm);
    padding: 3px 6px; border: 1px solid var(--accent); border-radius: var(--r-sm);
    background: var(--bg-base); color: var(--text-primary);
}
.ie-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(67, 67, 175, 0.15); }

/* Owner row */
.sysv-owner { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sysv-owner--act { cursor: pointer; border-radius: var(--r-sm); padding: 2px 6px; margin: -2px -6px; transition: background 0.12s; }
.sysv-owner--act:hover { background: var(--bg-hover); }
.sysv-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Accent action links */
.sysv-action, .sysv-add {
    background: none; border: none; padding: 0; font-family: inherit;
    font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
    cursor: pointer; text-decoration: none;
}
.sysv-action:hover, .sysv-add:hover { text-decoration: underline; }
.sysv-add { display: inline-block; margin-top: var(--sp-4); }

/* Built on — per-model block */
.sysv-model { padding-bottom: var(--sp-2); }
.sysv-model + .sysv-model { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); margin-top: var(--sp-3); }

/* D4 — the Related Records card grid (.sysv-cards / .sysv-card*) and the
   Status line (.sysv-status*) were removed with the detail-page contract:
   related records are capped row lists, status is the verdict line. */

/* Section heads inside Overview — break the page into description, status,
   related records, properties.  Tighter than h-tags, calmer than full
   borders.  Matches the wireframe's uppercase eyebrow style.  Generous
   top margin makes the section boundary readable; the eyebrow needs air
   so it doesn't collide with the preceding content. */
.sysv-section-head {
    font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    font-weight: 600; margin: var(--sp-10) 0 var(--sp-4) 0;
}
.sysv-section-head:first-child { margin-top: 0; }

/* Lead row — sits below the tab strip; one row of breathing room only. */
.sysv-row--lead { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

/* Property-row helpers — subtle separator dot + grouping cue. */
.sysv-fact-sep { color: var(--text-faint); margin: 0 4px; }
.sysv-fact-sub { color: var(--text-faint); font-size: var(--fs-xs); }

/* Right-align the trailing action link inside a multi-fact row so the
   editable affordance ("Manage →", "Adjust →", "Update answers →") sits
   against the right edge of the value column.  Before this, the action
   crowded the facts; now there's clear separation.  Uses margin-left:auto
   so it works regardless of how many facts precede it. */
.sysv-row-val--multi .sysv-action {
    margin-left: auto;
}

/* Identity-header title row — title + risk badge inline so risk is visible
   above the fold.  The badge wraps below the title on narrow screens. */
.sysv-title-row {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: var(--sp-3);
}
.sysv-risk-badge { flex: none; font-size: var(--fs-xs); padding: 3px 10px; }
/* Risk badge tinted by level — subtle, washed-out (Stream 3c-7). */
.sysv-risk-badge.badge-medium { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.sysv-risk-badge.badge-low { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }

/* A fact that opens a deliberate-change panel (Risk level) */
.sysv-fact--btn {
    background: none; border: none; font: inherit; font-weight: 600;
    color: var(--text-primary); cursor: pointer;
    padding: 1px 5px; margin: -1px -5px; border-radius: var(--r-sm);
    transition: background 0.12s;
}
.sysv-fact--btn:hover { background: var(--bg-hover); }

/* Slide-panel warning callout + acknowledgement checkbox */
.panel-warn {
    background: #fff8f0; border: 1px solid #f0d9b8;
    border-radius: var(--r-md); padding: 10px 12px;
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary);
}
.panel-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; line-height: 1.5; }
.panel-check input { margin-top: 2px; flex-shrink: 0; }

/* ── Interview-led onboarding — the interview screens (Phase 3) ──────────
   One question per screen, a calm centred column, minimal chrome. */
.iv { min-height: 100%; background: var(--bg-main); }
.iv-screen { max-width: 640px; margin: 0 auto; padding: 64px 24px 96px; }
.iv-progressbar { height: 3px; border-radius: 2px; background: var(--border-subtle); margin-bottom: var(--sp-6); overflow: hidden; }
.iv-progressbar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }
.iv-eyebrow { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--sp-2); }
.iv-prompt { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--text-primary); margin: 0 0 var(--sp-3); }
.iv-help { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.6; margin: 0 0 var(--sp-5); }
.iv-note { font-size: var(--fs-xs); color: var(--text-faint); margin: var(--sp-3) 0 0; }
.iv-textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    font-family: inherit; font-size: var(--fs-base); line-height: 1.6;
    padding: 12px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.iv-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.12); }
.iv-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.iv-opt {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; text-align: left; font-family: inherit; font-size: var(--fs-base);
    padding: 13px 15px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary); cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.iv-opt:hover { border-color: var(--border-strong); }
.iv-opt.is-selected { border-color: var(--accent); background: var(--accent-bg); }
.iv-opt-mark {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--border-strong); transition: border-color 0.12s, border-width 0.12s;
}
.iv-opt.is-selected .iv-opt-mark { border-color: var(--accent); border-width: 5px; }
.iv-opt--quiet { color: var(--text-muted); }
.iv-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-6); }
.iv-btn {
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
    padding: 9px 18px; border-radius: var(--r-md); cursor: pointer;
    border: 1px solid var(--border-mid); background: var(--bg-base); color: var(--text-secondary);
    text-decoration: none; display: inline-flex; align-items: center;
    transition: border-color 0.12s, background 0.12s;
}
.iv-btn:hover { border-color: var(--border-strong); }
.iv-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.iv-btn--primary:hover { background: var(--accent-muted); border-color: var(--accent-muted); }
.iv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.iv-btn--sm { padding: 6px 12px; font-size: var(--fs-xs); }

/* Interview — summary & attestation */
.iv-field-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin: 0 0 var(--sp-2); }
.iv-input {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-base);
    padding: 11px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary); margin-bottom: var(--sp-5);
}
.iv-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.12); }
.iv-claims { border-top: 1px solid var(--border-subtle); }
.iv-claim {
    display: flex; align-items: flex-start; gap: var(--sp-4);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle);
}
.iv-claim-main { flex: 1; min-width: 0; }
.iv-claim-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 3px; }
.iv-claim-text { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.55; }
.iv-claim-edit {
    flex-shrink: 0; background: none; border: none; padding: 0; font-family: inherit;
    font-size: var(--fs-sm); font-weight: 600; color: var(--accent); cursor: pointer;
}
.iv-claim-edit:hover { text-decoration: underline; }
.iv-claim--editing { display: block; background: var(--bg-overlay); border-radius: var(--r-md); padding: var(--sp-4); border-bottom: none; }
.iv-edit-q { margin-bottom: var(--sp-4); }
.iv-edit-q-prompt { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.iv-claim-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.iv-open { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--bg-overlay); border-radius: var(--r-md); }
.iv-open-title { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.iv-open-row { font-size: var(--fs-sm); color: var(--text-secondary); padding: 3px 0; }
.iv-attest {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-4); border: 1px solid var(--border-mid); border-radius: var(--r-md);
    font-size: var(--fs-base); line-height: 1.6; color: var(--text-secondary); cursor: pointer;
}
.iv-attest input { margin-top: 3px; flex-shrink: 0; }

/* Interview — planned/in-use toggle */
.iv-toggle { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-overlay); border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.iv-toggle-btn {
    padding: 6px 14px; border: none; background: none; font-family: inherit;
    font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
    cursor: pointer; border-radius: var(--r-sm);
}
.iv-toggle-btn.is-on { background: var(--bg-base); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

/* Interview — analysis loading */
.iv-loading { text-align: center; padding-top: var(--sp-8); }
.iv-loading-spinner {
    width: 32px; height: 32px; margin: 0 auto var(--sp-5);
    border: 3px solid var(--border-subtle); border-top-color: var(--accent);
    border-radius: 50%; animation: iv-spin 0.8s linear infinite;
}
@keyframes iv-spin { to { transform: rotate(360deg); } }
.iv-loading-steps { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.iv-loading-step { font-size: var(--fs-sm); color: var(--text-faint); opacity: 0.35; transition: opacity 0.3s, color 0.3s; }
.iv-loading-step.is-on { opacity: 1; color: var(--text-secondary); }

/* Interview — the reveal & confirm canvas */
.iv-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.iv-pill { font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); background: var(--bg-overlay); border-radius: var(--r-full); padding: 4px 11px; }
.iv-canvas-desc { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--sp-6); }
.iv-canvas-sec { margin-bottom: var(--sp-6); }
.iv-canvas-sec-head { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.iv-canvas-count { background: var(--bg-overlay); border-radius: var(--r-full); padding: 1px 7px; margin-left: 4px; color: var(--text-muted); }
.iv-items { display: flex; flex-direction: column; gap: var(--sp-2); }
.iv-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 11px 14px; border: 1px solid var(--border-subtle);
    border-radius: var(--r-md); background: var(--bg-base);
}
.iv-item-name { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); }
.iv-item-sev { font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); flex-shrink: 0; }
.iv-item-sev--high { background: var(--red-bg); color: var(--red); }
.iv-item-sev--medium { background: rgba(67, 67, 175, 0.08); color: var(--accent); }
.iv-item-sev--low { background: var(--bg-overlay); color: var(--text-muted); }
.iv-item-remove { border: none; background: none; font-size: 16px; line-height: 1; color: var(--text-faint); cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.iv-item-remove:hover { color: var(--text-primary); }
.iv-item.is-removed { opacity: 0.5; }
.iv-item.is-removed .iv-item-name { text-decoration: line-through; }
.iv-muted { font-size: var(--fs-sm); color: var(--text-faint); }

/* Interview — Step 1 opening form */
.iv-hero { text-align: center; }
.iv-hero-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); margin: var(--sp-2) 0 var(--sp-3); }
.iv-hero-sub { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.6; margin: 0 auto var(--sp-5); max-width: 460px; }
.iv-bar { border: 1px solid var(--border-mid); border-radius: var(--r-lg); background: var(--bg-base); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); overflow: hidden; text-align: left; }
.iv-bar-input { width: 100%; box-sizing: border-box; border: none; resize: none; font-family: inherit; font-size: var(--fs-base); line-height: 1.6; padding: var(--sp-4); background: none; color: var(--text-primary); }
.iv-bar-input:focus { outline: none; }
.iv-bar-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border-subtle); }
.iv-bar-tools { display: flex; gap: 2px; }
.iv-tool { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font-family: inherit; font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; padding: 5px 8px; border-radius: var(--r-sm); }
.iv-tool:hover { background: var(--bg-hover); color: var(--text-secondary); }
.iv-nudge { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-4); }
.iv-nudge-egs { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.iv-faq { margin-top: var(--sp-8); }
.iv-faq-title { font-size: var(--fs-lg); font-weight: 700; text-align: center; color: var(--text-primary); margin: 0 0 var(--sp-4); }
.iv-faq-item { border-bottom: 1px solid var(--border-subtle); }
.iv-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: none; border: none; font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); text-align: left; padding: var(--sp-4) 0; cursor: pointer; }
.iv-faq-q i { font-size: 11px; color: var(--text-faint); transition: transform 0.15s; }
.iv-faq-item.is-open .iv-faq-q i { transform: rotate(180deg); }
.iv-faq-a { display: none; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; padding-bottom: var(--sp-4); }
.iv-faq-item.is-open .iv-faq-a { display: block; }

/* Interview — Step 2 chip questions */
.iv-eyebrow--badge { display: inline-block; background: var(--accent-bg); padding: 4px 12px; border-radius: var(--r-full); }
.iv-qgroups { display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.iv-qlabel { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); }
.iv-qhint { font-weight: 400; font-size: var(--fs-xs); color: var(--text-faint); }
.iv-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.iv-chip {
    font-family: inherit; font-size: var(--fs-sm); padding: 7px 14px;
    border-radius: var(--r-full); border: 1px solid var(--border-mid);
    background: var(--bg-base); color: var(--text-secondary); cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.iv-chip:hover { border-color: var(--border-strong); }
.iv-chip.is-on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.iv-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-faint); font-size: var(--fs-xs); margin: var(--sp-5) 0; }
.iv-or::before, .iv-or::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.iv-delegate-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); cursor: pointer; padding: 0; }
.iv-delegate { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.iv-delegate[hidden] { display: none; }
.iv-delegate .iv-btn { margin-top: var(--sp-3); }

/* Interview — Step 3 confirm card */
.iv-confirm-card { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); }
.iv-confirm-card .iv-field-label { margin-top: var(--sp-4); }
.iv-confirm-card .iv-field-label:first-child { margin-top: 0; }
.iv-confirm-card .iv-input { margin-bottom: 0; }
.iv-confirm-card .iv-textarea { margin-bottom: 0; }
.iv-cpills { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.iv-cpill { display: flex; flex-direction: column; gap: 3px; }
.iv-cpill-k { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 600; }
.iv-cpill-v { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }

/* Interview — Step 5 ownership */
.iv-own-icon { width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.iv-prompt--c { text-align: center; }
.iv-help--c { text-align: center; margin-left: auto; margin-right: auto; max-width: 420px; }
.iv-own-cards { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-4); }
.iv-own-card {
    display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
    font-family: inherit; padding: var(--sp-4); border: 1px solid var(--border-mid);
    border-radius: var(--r-md); background: var(--bg-base); cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.iv-own-card:hover { border-color: var(--border-strong); }
.iv-own-card.is-on { border-color: var(--accent); background: var(--accent-bg); }
.iv-own-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex-shrink: 0; transition: border-color 0.12s, border-width 0.12s; }
.iv-own-card.is-on .iv-own-radio { border-color: var(--accent); border-width: 6px; }
.iv-own-card-body { display: flex; flex-direction: column; gap: 2px; }
.iv-own-card-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.iv-own-card-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.iv-own-people { margin-bottom: var(--sp-3); }
.iv-own-note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg-overlay); border-radius: var(--r-md); padding: 10px 12px; }

/* Interview — Step 6 governance summary document */
.iv-doc { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-6); }
.iv-doc-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.iv-doc-brand { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.iv-doc-date { font-size: var(--fs-xs); color: var(--text-faint); }
.iv-doc-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); margin: var(--sp-4) 0 2px; }
.iv-doc-sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-4); }
.iv-doc-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); background: var(--bg-overlay); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-5); }
.iv-doc-stat { flex: 1; min-width: 90px; text-align: center; }
.iv-doc-stat-v { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.iv-doc-stat-l { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-top: 2px; }
.iv-doc-sec { margin-bottom: var(--sp-5); }
.iv-doc-sec h3 { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 var(--sp-2); }
.iv-doc-sec p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.iv-doc-list { margin: 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--text-secondary); }
.iv-doc-list li { padding: 3px 0; }

/* Detail pages (Phase 4) — a titled content block, and a static card */
.sysv-block-title { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 var(--sp-3); }
/* Activity timeline within its tab */
.sysv-feed-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border-subtle); }
.sysv-feed-item:first-child { border-top: none; padding-top: 0; }
.sysv-feed-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 12px;
}
.sysv-feed-body { flex: 1; min-width: 0; }
.sysv-feed-text { font-size: var(--fs-sm); }
.sysv-feed-text strong { font-weight: 600; }
.sysv-feed-just { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-top: 3px; }
.sysv-feed-date { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 3px; }

/* Action Required — Projects view */
.proj-list { display: flex; flex-direction: column; }
.proj-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: background 0.12s; }
.proj-row:last-child { border-bottom: none; }
.proj-row:hover { background: var(--bg-hover); }
.proj-row:hover .proj-row-name { color: var(--accent); }
.proj-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.proj-row-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.proj-row-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.proj-row-count { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.proj-row-arrow { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
/* Today — single "continue setup" drip nudge. Rendered as a task row so it
   reads consistently with the rest of Today; the circle holds a bolt instead
   of a check because a project is opened, not one-click completed. */
.today-setup-list { margin-top: var(--sp-4); }
.today-task--setup { cursor: pointer; }
.today-check--setup { background: var(--accent-subtle, #ECECF8); border-color: transparent; color: var(--accent); cursor: default; }
.today-check--setup i { opacity: 1; }
.today-task--setup:hover .today-check--setup { background: var(--accent-subtle, #ECECF8); color: var(--accent); }

/* Per-control rows */
.ap-control-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.1s;
}
.ap-control-row:last-child { border-bottom: none; }
.ap-control-row:hover { background: var(--bg-hover); }
.ap-control-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-control-name {
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--text-primary);
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap;
}
.ap-control-name a { color: inherit; text-decoration: none; }
.ap-control-name a:hover { color: var(--accent); }
/* Control name as ceremony-panel opener — visually identical to a link
   so the user reads it as clickable text, but it's a button so clicking
   opens the per-system ceremony rather than navigating away. The full
   org-wide control detail page is accessible via a link inside the
   panel header for the rarer case where the user wants to leave the
   system context. */
.ap-control-name-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
.ap-control-name-btn:hover { color: var(--accent); text-decoration: underline; }
/* "Open full control details" link inside the ceremony panel header.
   Subdued — most users don't need it. */
.ap-panel-detail-link {
    margin-left: 8px;
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.ap-panel-detail-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Control detail page redesign (.ctrl-*)
   System-centric chrome; portfolio table is the operational surface.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   AI Control Status Digest — slot-based summary at the top of the
   control detail page. Skeleton is hardcoded; AI fills bounded text
   slots. The deterministic structure means cost stays low and the
   render shape is always predictable. Disclaimer baked in.
   ═══════════════════════════════════════════════════════════════ */
.ctrl-digest {
    margin: var(--sp-3) 0 var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    overflow: hidden;
    max-width: 760px;
}
.ctrl-digest-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
}
.ctrl-digest-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ctrl-digest-tag i { font-size: 10px; }
.ctrl-digest-stale {
    background: rgba(234, 88, 12, 0.1);
    color: var(--amber);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ctrl-digest-meta { color: var(--text-faint); font-size: 11px; margin-left: auto; }
.ctrl-digest-refresh {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 3px 7px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    transition: border-color 0.12s, color 0.12s;
}
.ctrl-digest-refresh:hover { border-color: var(--accent); color: var(--accent); }
.ctrl-digest-refresh--spinning i { animation: ctrl-digest-spin 0.8s linear infinite; }
@keyframes ctrl-digest-spin { to { transform: rotate(360deg); } }

.ctrl-digest-body { padding: var(--sp-4); }

.ctrl-digest-lead {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text-primary);
    font-weight: 500;
}
.ctrl-digest-points {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}
.ctrl-digest-points li { margin-bottom: 4px; }
.ctrl-digest-points li:last-child { margin-bottom: 0; }

.ctrl-digest-insight {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--accent-bg);
    border: 1px solid rgba(67, 67, 175, 0.15);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-primary);
}
.ctrl-digest-insight i { color: var(--accent); margin-top: 2px; }

.ctrl-digest-attention { margin-top: var(--sp-3); }
.ctrl-digest-attention-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.ctrl-attention-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
    text-decoration: none;
    color: inherit;
    margin-bottom: 6px;
    transition: border-color 0.12s, background 0.12s;
}
.ctrl-attention-row:last-child { margin-bottom: 0; }
.ctrl-attention-row:hover { border-color: var(--accent); background: var(--bg-raised); }
.ctrl-attention-ref {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 70px;
}
.ctrl-attention-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctrl-attention-sys {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctrl-attention-reason {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.ctrl-attention-arrow { color: var(--text-faint); font-size: 10px; }
.ctrl-attention-row:hover .ctrl-attention-arrow { color: var(--accent); }

.ctrl-digest-currency {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    color: var(--text-faint);
}
.ctrl-digest-currency i { font-size: 10px; }

/* ──────────────────────────────────────────
   Risk Calibration
   ────────────────────────────────────────── */
.cal-current {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
}
.cal-current-body { flex: 1; min-width: 0; }
.cal-current-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.cal-current-counts { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

.cal-current-badge,
.cal-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.cal-tier--lean { background: var(--bg-overlay); color: var(--text-secondary); }
.cal-tier--balanced { background: var(--accent-bg); color: var(--accent); }
.cal-tier--rigorous { background: var(--accent); color: #fff; }

/* Panel: tier options */
.cal-panel-intro {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--sp-4);
}
.cal-tier-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cal-tier-opt {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.cal-tier-opt:hover { border-color: var(--accent); }
.cal-tier-opt.selected { border-color: var(--accent); background: var(--accent-bg); }
.cal-tier-radio {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
}
.cal-tier-opt.selected .cal-tier-radio { border-color: var(--accent); }
.cal-tier-opt.selected .cal-tier-radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--accent);
}
.cal-tier-opt-body { flex: 1; min-width: 0; }
.cal-tier-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.cal-tier-opt-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.cal-tier-opt-count { font-size: var(--fs-xs); color: var(--text-faint); flex-shrink: 0; }
.cal-tier-opt-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; margin-top: 3px; }

/* Panel: live control preview */
.cal-preview {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.cal-preview-loading { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; padding: var(--sp-3); }
.cal-preview-head {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.cal-preview-list { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.cal-preview-item { font-size: var(--fs-xs); display: flex; align-items: center; gap: 7px; }
.cal-preview-item i { font-size: 9px; width: 10px; flex-shrink: 0; }
.cal-preview-item--on { color: var(--text-secondary); }
.cal-preview-item--on i { color: var(--green, #2e8b57); }
.cal-preview-item--off { color: var(--text-faint); text-decoration: line-through; }

/* Panel: justification block (loosening) */
.cal-justify {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--amber, #d99a2b);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--bg-overlay);
}
.cal-justify-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.cal-justify-title i { color: var(--amber, #d99a2b); margin-right: 5px; }
.cal-justify-note { font-size: 11px; color: var(--text-faint); margin-top: var(--sp-2); line-height: 1.4; }

/* Per-system calibration panel — classification + inheritance */
.cal-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: var(--sp-4) 0 var(--sp-2);
}
.cal-cls { display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-cls-opt,
.cal-inherit {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
}
.cal-cls-opt input,
.cal-inherit input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.cal-inherit { margin-bottom: var(--sp-3); padding: var(--sp-2) 0; }
.cal-floor-live { font-size: var(--fs-xs); color: var(--amber, #d99a2b); margin-top: var(--sp-2); line-height: 1.4; }
.cal-floor-live i { margin-right: 4px; }
.cal-floor-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--sp-2);
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.4;
}
.cal-floor-note i { color: var(--amber, #d99a2b); margin-top: 2px; }
.cal-tier-opt.disabled { opacity: 0.5; cursor: not-allowed; }
.cal-tier-opt.disabled:hover { border-color: var(--border-subtle); }
.cal-tier-opt-floor { display: block; font-size: 10px; color: var(--amber, #d99a2b); margin-top: 2px; }

/* ──────────────────────────────────────────
   Governance assessment (interview)
   ────────────────────────────────────────── */
.iv-questions { display: flex; flex-direction: column; gap: var(--sp-2); }
.iv-q {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
.iv-q-row { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.iv-q-row input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.iv-q-text { display: flex; flex-direction: column; gap: 2px; }
.iv-q-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.iv-q-help { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.iv-q-gated { display: none; font-size: 11px; color: var(--text-faint); margin-top: 6px; padding-left: 29px; }
.iv-q--disabled { opacity: 0.55; }
.iv-q--disabled .iv-q-row { cursor: not-allowed; }
.iv-q--disabled .iv-q-gated { display: block; }

/* ──────────────────────────────────────────
   Reachable Surface Review
   ────────────────────────────────────────── */
.sr-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3); }
.sr-cat { margin-bottom: var(--sp-4); }
.sr-cat-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.sr-empty { font-size: var(--fs-xs); color: var(--text-faint); padding: 4px 0 var(--sp-2); }
.sr-finding {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.sr-finding--overdue { border-color: var(--red, #c0392b); }
.sr-finding-desc { font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.45; }
.sr-finding-controls { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.sr-dec { flex: 1; }
.sr-date { flex: 1; }
.sr-rat { margin-top: 6px; }
.sr-done-label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); color: var(--text-secondary);
    margin-top: 6px; cursor: pointer;
}
.sr-done-label input { accent-color: var(--accent); }
.sr-finding .btn-sm { margin-top: 8px; }
.sr-finding-meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.sr-by { font-size: var(--fs-xs); color: var(--text-muted); }
.sr-resolved-tag { font-size: 11px; color: var(--green, #2e8b57); font-weight: 600; }
.sr-finding-rat { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.sr-add-form { margin-top: var(--sp-2); }
.sr-add-form .btn-sm { margin-top: 6px; }
.sr-complete {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}
.sr-hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.sr-notes {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    background: var(--bg-overlay);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-top: var(--sp-2);
    line-height: 1.5;
}

/* Retirement ceremony */
.ret-reason {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    background: var(--bg-overlay);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    line-height: 1.5;
}
.ret-task {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.ret-task-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.ret-task-guide { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; margin-top: 3px; }
.ret-task .ret-note { margin-top: 6px; }
.ret-task .btn-sm { margin-top: 8px; }
.ret-snap {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-2);
}

/* Vendor due diligence */
.vp-dd { margin-top: var(--sp-1); }
.vp-dd-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.vp-dd-hint { font-size: 11px; color: var(--text-faint); margin: 6px 0 var(--sp-3); line-height: 1.4; }
.vp-dd-q { margin-bottom: var(--sp-3); }
.vp-dd-q-text { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 4px; line-height: 1.4; }
.vp-back {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: var(--sp-3);
    color: var(--accent);
    font-size: var(--fs-xs);
    cursor: pointer;
}

.ctrl-digest-disclaimer {
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-base);
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.ctrl-digest-disclaimer i { color: var(--text-faint); margin-right: 4px; }

/* Disclosures — collapse the library content + portfolio so the digest
   is the page hero. <details> is native; we just style it to match. */
.ctrl-disclosure {
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
}
.ctrl-disclosure[open] { background: var(--bg-raised); }
.ctrl-disclosure-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-primary);
}
.ctrl-disclosure-summary::-webkit-details-marker { display: none; }
.ctrl-disclosure-summary::marker { content: ''; }
.ctrl-disclosure-chev { font-size: 10px; color: var(--text-faint); transition: transform 0.15s; }
.ctrl-disclosure[open] .ctrl-disclosure-chev { transform: rotate(90deg); }
.ctrl-disclosure-hint {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 400;
}
.ctrl-disclosure[open] .ctrl-disclosure-summary {
    border-bottom: 1px solid var(--border-subtle);
}
.ctrl-disclosure[open] > :not(summary) {
    padding: var(--sp-4);
}

/* Text-heavy section wrapper — constrains line length so prose stays
   scannable on wide screens. Doesn't apply to the portfolio table
   which benefits from going full-width. The 720px max matches the
   AI system page main column where action plan items are dense; here
   it serves the narrative paragraphs. */
.ctrl-prose {
    max-width: 720px;
    margin-bottom: var(--sp-5);
}
.ctrl-prose:last-child { margin-bottom: 0; }
.ctrl-section-meta { margin-bottom: var(--sp-2); }

/* Narrative — markdown-rendered HTML inside .ctrl-narrative.
   Inherits typography from .ap-panel-narrative h2/h3/p so it reads
   like the panel does, but without the framed card background since
   the page wraps it differently. */
.ctrl-narrative {
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--text-secondary);
}
.ctrl-narrative h2 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--sp-2);
    text-transform: none;
    letter-spacing: 0;
}
.ctrl-narrative h2 + p { margin-top: 0; }
.ctrl-narrative h3, .ctrl-narrative h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--sp-4) 0 var(--sp-2);
}
.ctrl-narrative p { margin: 0 0 var(--sp-3); }
.ctrl-narrative p:last-child { margin-bottom: 0; }
.ctrl-narrative h2:not(:first-child) { margin-top: var(--sp-5); }

/* Expected evidence callout — sits at the end of the narrative section,
   not as its own labelled section. Subtle left border + label tag so
   it's distinct from the narrative paragraphs without competing with
   the main content. */
.ctrl-expected-evidence {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-base);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}
.ctrl-expected-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Read-only setup task list — adopts the panel's .ap-panel-tasks /
   .ap-task-row pattern but with a numbered badge instead of a checkbox
   (these are canonical task definitions, not per-system state). */
.ctrl-task-list { margin: 0; }
.ctrl-task-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ctrl-task-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-base);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
}
.ctrl-task-evidence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--accent-bg);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-weight: 600;
    margin-left: 4px;
}
.ctrl-task-evidence i { font-size: 9px; }

.ctrl-template-list { margin: 0; }

/* Override panel-context margins when these classes are reused on the
   control page. The panel pattern has a 4-side gutter (margin var(--sp-4));
   on the page the .ctrl-prose wrapper handles spacing, so children
   should be flush with the wrapper edges. */
.ctrl-prose .ap-panel-section-title {
    margin: 0 0 var(--sp-2);
    padding: 0;
}
.ctrl-prose .ap-panel-tasks,
.ctrl-prose .ap-panel-templates {
    margin: 0;
}

/* Section titles between the library card, portfolio, and review cycle */
.ctrl-section-title {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ctrl-section-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-base);
    padding: 2px 7px;
    border-radius: var(--r-sm);
    text-transform: none;
    letter-spacing: 0;
}

/* Portfolio table — the operational surface */
.ctrl-portfolio {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.ctrl-portfolio-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
}
.ctrl-portfolio-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}
.ctrl-portfolio-stat strong { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; }
.ctrl-portfolio-stat--done strong { color: var(--green); }
.ctrl-portfolio-stat--progress strong { color: var(--accent); }
.ctrl-portfolio-stat--overdue strong { color: var(--red); }
.ctrl-portfolio-stat--pending strong { color: var(--text-secondary); }

.ctrl-portfolio-rows {
    display: flex;
    flex-direction: column;
}
.ctrl-portfolio-row {
    display: grid;
    grid-template-columns: 80px 1fr 160px 180px 24px;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}
.ctrl-portfolio-row:last-child { border-bottom: none; }
.ctrl-portfolio-row:hover { background: var(--bg-hover); }
.ctrl-portfolio-row--from { border-left: 3px solid var(--accent); padding-left: calc(var(--sp-4) - 3px); }
.ctrl-portfolio-id {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ctrl-portfolio-name {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.ctrl-portfolio-owner {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctrl-portfolio-status { text-align: right; }
.ctrl-portfolio-arrow { color: var(--text-faint); font-size: 10px; text-align: right; }
.ctrl-portfolio-row:hover .ctrl-portfolio-arrow { color: var(--accent); }

/* Status pills */
.ctrl-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-md);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
}
.ctrl-pill i { font-size: 10px; }
.ctrl-pill--done {
    background: rgba(26, 143, 50, 0.08);
    color: var(--green);
    border-color: rgba(26, 143, 50, 0.2);
}
.ctrl-pill--progress {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: rgba(67, 67, 175, 0.2);
}
.ctrl-pill--pending {
    background: var(--bg-base);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}
.ctrl-pill--overdue {
    background: rgba(220, 38, 38, 0.08);
    color: var(--red);
    border-color: rgba(220, 38, 38, 0.2);
}

/* "From" badge — shown on the originating-system row when the user
   navigated here from that system. Gives them an extra anchor besides
   the breadcrumb. */
.ctrl-from-badge {
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--r-sm);
}

/* Empty state for sections that have nothing yet */
.ctrl-empty {
    padding: var(--sp-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    background: var(--bg-base);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--r-md);
}

/* Mobile: collapse the grid into a stacked card */
@media (max-width: 720px) {
    .ctrl-portfolio-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .ctrl-portfolio-status, .ctrl-portfolio-arrow { text-align: left; }
}
.ap-reason {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
}

/* Done section — completed controls. Muted, with a green tick. */
.ap-control-row--done .ap-control-name {
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: var(--border-mid);
}
.ap-control-row--done .ap-control-name a { color: var(--text-muted); }
.ap-control-row--done .ap-control-name a:hover { color: var(--green); text-decoration-color: var(--green); }
.ap-control-tick {
    color: var(--green);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Inline status toggle on each row — "Mark in place" on open rows,
   "Undo" on Done rows. Subdued by default; only the hover state carries
   weight, so the buttons don't compete with the control names. The
   button is always rendered (no hover-only reveal) so touch users and
   anyone scanning the plan can find the action without guessing. */
.ap-control-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px; /* nudge to align with the first line of the name */
}
.ap-row-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 4px var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ap-row-btn i { font-size: 11px; }
.ap-row-btn:hover {
    background: var(--bg-base);
    border-color: var(--border-mid);
    color: var(--text-primary);
}
.ap-row-btn--complete:hover {
    border-color: var(--green);
    color: var(--green);
}
.ap-row-btn--undo:hover {
    border-color: var(--amber);
    color: var(--amber);
}
.ap-row-btn--busy { opacity: 0.5; cursor: wait; }

/* Done row — completion note display.
   When a control is marked in place, the user's note becomes part of
   the row so the Done section reads as a record of what was done, not
   just a list of names. Muted, italic-feel — looks like a quote. */
.ap-done-note {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-base);
    border-left: 2px solid var(--border-mid);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.ap-done-note-meta {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-bottom: 3px;
}
.ap-done-note-text {
    color: var(--text-secondary);
}

/* Completion-ceremony slide panel — opened by "Mark in place" / "Undo".
   Light-touch styling that fits inside the existing .panel-* shell. */
.ap-panel-systemtag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
    padding: var(--sp-3) var(--sp-4) 0;
}
.ap-panel-instruction {
    background: var(--bg-base);
    border-radius: var(--r-md);
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-3);
}
.ap-panel-instruction .ap-panel-meta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ap-panel-instruction p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-primary);
}
.ap-panel-help {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}
.ap-panel-blurb {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}
.ap-panel-evidence-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.55;
    background: var(--bg-base);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--r-md);
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-3);
}
.ap-panel-evidence-hint i {
    color: var(--text-faint);
    margin-right: 4px;
}
.ap-panel-evidence-hint strong { color: var(--text-secondary); font-weight: 600; }
.ap-required { color: var(--red); margin-left: 2px; }

/* ═══════════════════════════════════════════════════════════════
   Per-control setup ceremony panel (Phase 4)
   ═══════════════════════════════════════════════════════════════ */

/* Top-of-panel banners — tag and "marked in place" notification */
.ap-panel-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-bg);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ap-panel-ai-badge i { font-size: 10px; }
.ap-panel-banner {
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.ap-panel-banner--done {
    background: rgba(26, 143, 50, 0.06);
    color: var(--text-primary);
    border: 1px solid rgba(26, 143, 50, 0.2);
}
.ap-panel-banner--done i { color: var(--green); margin-right: 4px; }

/* Library narrative (markdown-rendered HTML) */
.ap-panel-narrative {
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-4);
    background: var(--bg-base);
    border-radius: var(--r-lg);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}
.ap-panel-narrative-head {
    margin-bottom: var(--sp-2);
}
.ap-panel-narrative h2 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--sp-3) 0 var(--sp-2);
    text-transform: none;
    letter-spacing: 0;
}
.ap-panel-narrative h2:first-child { margin-top: 0; }
.ap-panel-narrative h3, .ap-panel-narrative h4 {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--sp-3) 0 var(--sp-1);
}
.ap-panel-narrative p { margin: 0 0 var(--sp-2); }
.ap-panel-narrative p:last-child { margin-bottom: 0; }
.ap-panel-narrative code {
    background: var(--bg-raised);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
}

/* Section titles inside the panel — replaces the panel-section-title
   pattern but with a counter slot on the right for the task gate. */
.ap-panel-section-title {
    margin: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ap-task-progress {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--text-faint);
}

/* Task list */
.ap-panel-tasks {
    margin: 0 var(--sp-4);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    overflow: hidden;
}
.ap-task-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}
.ap-task-row:last-child { border-bottom: none; }
.ap-task-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    flex: 1;
    cursor: pointer;
    min-width: 0;
}
.ap-task-check input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.ap-task-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-task-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}
.ap-task-optional {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
}
.ap-task-guidance {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}
.ap-task-na {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ap-task-na:hover { border-color: var(--accent); color: var(--accent); }
.ap-task-na-active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

/* Templates */
.ap-panel-templates {
    margin: 0 var(--sp-4);
}
.ap-tmpl-row {
    padding: var(--sp-2) 0;
    border-bottom: 1px dashed var(--border-subtle);
    font-size: var(--fs-sm);
}
.ap-tmpl-row:last-child { border-bottom: none; }
.ap-tmpl-row a { color: var(--accent); text-decoration: none; }
.ap-tmpl-row a:hover { text-decoration: underline; }
.ap-tmpl-name { color: var(--text-primary); font-weight: 500; }
.ap-tmpl-format { color: var(--text-faint); font-size: var(--fs-xs); }
.ap-tmpl-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* Completion / undo block */
.ap-panel-completion {
    margin: 0 var(--sp-4) var(--sp-4);
}
.ap-panel-gate-note {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: var(--r-md);
}
.ap-gate-ok {
    color: var(--green);
}
.ap-gate-block {
    color: var(--amber);
}
.ap-gate-ok i, .ap-gate-block i { margin-right: 4px; }

/* Permissions block — shown when the user can't mark in place */
.ap-panel-perm-note {
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-3);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.55;
}
.ap-panel-perm-note i { color: var(--text-faint); margin-right: 6px; }

/* Reused: ap-panel-instruction was already styled; reuse for the
   fallback instruction block (when there's no library narrative). */


/* ═══════════════════════════════════════════════════════════════
   Vendor / Model picker (.vp-*) — wizard CONFIRMATION step
   Phase 2 of Vendor / Model Tracking sprint
   ═══════════════════════════════════════════════════════════════ */
.vp-section {
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
}
.vp-header {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.vp-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.vp-subtitle {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}
.vp-internal {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: var(--sp-3);
}
.vp-internal input { accent-color: var(--accent); width: 14px; height: 14px; }
.vp-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.vp-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    position: relative;
}
.vp-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}
.vp-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}
.vp-primary-pill {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--accent-bg);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-weight: 600;
}
.vp-remove {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 13px;
}
.vp-remove:hover { color: var(--red); }
.vp-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.vp-row:last-child { margin-bottom: 0; }
.vp-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-align: right;
}
.vp-input-wrap {
    position: relative;
}
.vp-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-family: inherit;
    background: var(--bg-base);
    color: var(--text-primary);
}
.vp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
select.vp-input { appearance: auto; }
.vp-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.vp-suggestion {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-subtle);
}
.vp-suggestion:last-child { border-bottom: none; }
.vp-suggestion:hover { background: var(--bg-hover); }
.vp-suggestion-name { color: var(--text-primary); font-weight: 500; }
.vp-custom-mark {
    font-size: 9px;
    background: var(--bg-base);
    color: var(--text-muted);
    padding: 1px 5px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vp-data-loc {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-faint);
}
.vp-suggestion--add { padding: 6px 10px; background: var(--bg-base); }
.vp-suggestion--add a { color: var(--accent); text-decoration: none; font-size: var(--fs-xs); display: flex; align-items: center; gap: 4px; }
.vp-suggestion--add a:hover { text-decoration: underline; }
.vp-suggestion--empty { color: var(--text-muted); font-size: var(--fs-xs); cursor: default; }
.vp-suggestion--empty a { color: var(--accent); }
.vp-add-btn {
    margin-top: var(--sp-3);
    background: transparent;
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-md);
    padding: 8px var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    cursor: pointer;
    width: 100%;
    transition: border-color 0.12s, color 0.12s;
}
.vp-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.vp-validation-message {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--red);
}

/* ── Sidebar AI tools pills (system view) ─────────────────────────── */
.prop-row--tools {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}
.prop-value--tools {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    text-align: left;
    align-items: flex-start;
}
/* Pills sit on their own row, wrap as needed. The Manage button sits
   on a separate line below — matching the Owners block's pattern of
   "content stack, action below". Avoids the cramped feeling of a
   button squeezed against pills. */
.prop-value--tools .vp-pill { align-self: flex-start; }
.prop-value--tools .vp-pill + .vp-pill { margin-left: 0; }
.prop-value--tools-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.vp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    line-height: 1.3;
    max-width: 100%;
}
.vp-pill--primary { border-color: var(--accent-muted); }
.vp-pill--legacy { border-style: dashed; color: var(--text-muted); font-style: italic; }
.vp-pill-vendor, .vp-pill-model {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}
.vp-pill-vendor:hover, .vp-pill-model:hover { text-decoration: underline; }
.vp-pill-vendor--unlinked { color: var(--text-muted); cursor: default; }
.vp-pill-vendor--unlinked:hover { text-decoration: none; }
.vp-pill-sep { color: var(--text-faint); }
.vp-pill-role {
    background: var(--bg-raised);
    color: var(--text-muted);
    padding: 1px 5px;
    border-radius: var(--r-sm);
    font-size: 10px;
    margin-left: 2px;
}
.vp-pill-platform {
    color: var(--text-faint);
    font-size: 10px;
    margin-left: 2px;
}
.vp-pill-deprecated {
    background: var(--amber-bg, rgba(234,88,12,0.1));
    color: var(--amber);
    padding: 1px 5px;
    border-radius: var(--r-sm);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 2px;
}
.vp-empty-hint { color: var(--text-faint); font-size: var(--fs-xs); font-style: italic; }
/* AI-tools manage button — same shape as the shared .prop-action-btn
   so it visually matches the Owners "Manage" button. Aliased rather
   than removed so the existing markup keeps working without churn. */
.vp-manage-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.vp-manage-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-base); }
.vp-manage-btn i { font-size: 10px; }

/* ── Vendor / Model slide-panel content ──────────────────────────── */
.vp-panel-meta {
    background: var(--bg-base);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: var(--sp-3) var(--sp-4);
}
.vp-panel-meta div { margin-bottom: 2px; }
.vp-panel-meta strong { color: var(--text-primary); font-weight: 600; }
.vp-panel-meta a { color: var(--accent); }
.vp-panel-tag {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-raised);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-weight: 600;
    margin-bottom: 6px;
}
.vp-panel-tag--primary { background: var(--accent-bg); color: var(--accent); }
.vp-panel-notes {
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-3);
    background: var(--bg-base);
    border-left: 2px solid var(--border-mid);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--text-secondary);
}
.vp-panel-section-title {
    margin: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
}
.vp-panel-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--sp-4);
}
.vp-panel-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
}
.vp-panel-list li:last-child { border-bottom: none; }
.vp-panel-list a { color: var(--text-primary); text-decoration: none; }
.vp-panel-list a:hover { color: var(--accent); }
.vp-panel-list strong { font-weight: 600; color: var(--text-muted); margin-right: 6px; font-size: var(--fs-xs); }
.vp-panel-owner { color: var(--text-faint); font-size: var(--fs-xs); margin-left: 6px; }
.vp-panel-role {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    margin-left: 6px;
    background: var(--bg-base);
    padding: 1px 6px;
    border-radius: var(--r-sm);
}
.vp-panel-empty {
    padding: 0 var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-style: italic;
}
.vp-panel-banner {
    margin: var(--sp-3) var(--sp-4);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.vp-panel-banner--warn {
    background: var(--amber-bg, rgba(234,88,12,0.08));
    color: var(--amber);
    border: 1px solid var(--amber);
}
.vp-panel-banner i { margin-right: 4px; }
.vp-panel-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
}
.vp-panel-link:hover { text-decoration: underline; }
.vp-panel-platform { color: var(--text-faint); font-size: var(--fs-xs); }
.vp-panel-dep {
    color: var(--amber);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
}
.vp-panel-systag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
    padding: var(--sp-3) var(--sp-4) 0;
}
.vp-panel-blurb {
    padding: var(--sp-2) var(--sp-4);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
/* Action row immediately below the deprecation banner — gives the
   "Migrate N systems to <successor>" button a contained spot above
   the metadata strip. */
.vp-panel-actions {
    margin: 0 var(--sp-4) var(--sp-3);
    display: flex;
    gap: var(--sp-2);
}

/* View toggle (Action plan / By stage) */
.ap-view-toggle {
    display: inline-flex;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 2px;
    margin-bottom: var(--sp-4);
}
.ap-view-toggle-btn {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px var(--sp-3);
    border-radius: 4px;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.ap-view-toggle-btn:hover { color: var(--text-primary); }
.ap-view-toggle-btn--active {
    background: var(--bg-raised);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Empty hint when no bucketing has been generated yet */
.ap-empty-hint {
    background: var(--bg-base);
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
}
.ap-empty-hint > i { margin-right: 6px; color: var(--text-faint); }

/* All-done empty state */
.ap-empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    background: rgba(26, 143, 50, 0.04);
    border: 1px solid rgba(26, 143, 50, 0.2);
    border-radius: var(--r-lg);
}
.ap-empty-state > i { font-size: 28px; color: var(--green); margin-bottom: var(--sp-2); display: block; }
.ap-empty-title { font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.ap-empty-sub { font-size: var(--fs-sm); color: var(--text-muted); }

/* Wizard teaser — small banner shown in Step 2 indicating the bucketed
   plan will be generated on save. */
.ap-wizard-teaser {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    background: linear-gradient(180deg, rgba(67, 67, 175, 0.04) 0%, var(--bg-raised) 100%);
    border: 1px solid rgba(67, 67, 175, 0.18);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
}
.ap-wizard-teaser-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    background: var(--accent-bg);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.ap-wizard-teaser-body { flex: 1; }
.ap-wizard-teaser-title {
    font-size: var(--fs-sm); font-weight: 700;
    color: var(--text-primary);
}
.ap-wizard-teaser-sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
}
.kbd-sm { font-size: 10px; padding: 1px 5px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-base); color: var(--text-muted); font-family: inherit; }


/* ═══════════════════════════════════════════════════════════
   INLINE BUTTON CONFIRMATION
   ═══════════════════════════════════════════════════════════ */
.btn-confirmed { background: var(--green) !important; border-color: var(--green) !important; color: var(--white) !important; pointer-events: none; transition: all 0.2s; }


/* ═══════════════════════════════════════════════════════════
   CHECKBOX CARD
   ═══════════════════════════════════════════════════════════ */
.check-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); cursor: pointer; transition: all 0.15s; user-select: none; }
.check-card:hover { border-color: var(--border-mid); }
.check-card.selected { border-color: var(--accent-border); background: var(--accent-bg); }
.check-card-check { width: 18px; height: 18px; border-radius: var(--r-sm); border: 2px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; flex-shrink: 0; transition: all 0.15s; }
.check-card.selected .check-card-check { background: var(--accent); border-color: var(--accent); color: var(--white); }
.check-card-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }


/* ═══════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════ */
.text-link { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; font-weight: 500; }
.text-link:hover { color: var(--accent); }

.section-divider { height: 1px; background: var(--border-subtle); margin: var(--sp-5) 0; }

.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--bg-overlay); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Urgency labels */
.urgency-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--sp-3) 0 var(--sp-2); }
.urgency-overdue { color: var(--red); }
.urgency-soon { color: var(--amber); }
.urgency-normal { color: var(--text-faint); }


/* ═══════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════ */
.tooltip-wrap { position: relative; cursor: help; }
.tooltip-wrap .tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 6px 10px; background: var(--bg-overlay); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 5000; }
.tooltip-wrap .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--border-mid); }
.tooltip-wrap:hover .tooltip { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   LOADING SKELETONS
   ═══════════════════════════════════════════════════════════ */
.skeleton { background: var(--bg-overlay); border-radius: var(--r-md); position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%); animation: skeletonShimmer 1.5s infinite; }
@keyframes skeletonShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-text { height: 14px; margin-bottom: var(--sp-2); }
.skeleton-text-sm { height: 11px; width: 60%; margin-bottom: var(--sp-2); }
.skeleton-heading { height: 20px; width: 45%; margin-bottom: var(--sp-3); }
.skeleton-card { height: 88px; border: 1px solid var(--border-subtle); }
.skeleton-row { height: 44px; margin-bottom: 1px; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; }


/* ═══════════════════════════════════════════════════════════
   CONTEXT MENU
   ═══════════════════════════════════════════════════════════ */
.context-menu { position: absolute; min-width: 180px; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-1) 0; z-index: 4000; display: none; }
.context-menu.open { display: block; }
.context-menu-item { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; transition: background 0.05s; }
.context-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.context-menu-item i { width: 16px; text-align: center; font-size: 12px; color: var(--text-faint); }
.context-menu-item:hover i { color: var(--text-muted); }
.context-menu-item.danger { color: var(--red); }
.context-menu-item.danger i { color: var(--red); }
.context-menu-divider { height: 1px; background: var(--border-subtle); margin: var(--sp-1) 0; }


/* ═══════════════════════════════════════════════════════════
   KEYBOARD SHORTCUT HINTS
   ═══════════════════════════════════════════════════════════ */
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: inherit; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-faint); background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 4px; line-height: 1; }


/* ═══════════════════════════════════════════════════════════
   TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════ */
.toggle-switch { width: 36px; height: 20px; border-radius: 10px; background: var(--bg-overlay); cursor: pointer; position: relative; flex-shrink: 0; transition: background 0.2s; }
.toggle-switch.on { background: var(--accent); }
.toggle-switch-knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.toggle-switch.on .toggle-switch-knob { transform: translateX(16px); }
.toggle-switch:focus-visible { box-shadow: var(--shadow-focus); outline: none; }


/* ═══════════════════════════════════════════════════════════
   FOCUS RINGS (keyboard accessibility)
   ═══════════════════════════════════════════════════════════ */
.sidebar-item:focus-visible,
.search-trigger:focus-visible,
.icon-btn:focus-visible,
.tab-btn:focus-visible,
.filter-pill:focus-visible,
.slide-panel-close:focus-visible,
.cmd-item:focus-visible,
.summary-card:focus-visible,
.linked-item:focus-visible,
.task-row:focus-visible,
.data-table tbody tr:focus-visible,
.check-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.filter-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}


/* ═══════════════════════════════════════════════════════════
   DASHBOARD — Page-specific styles
   ═══════════════════════════════════════════════════════════ */

/* Greeting */
/* ── Dashboard — Bento Grid ── */
.bento-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; gap: var(--sp-4); }
.bento-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-6); }

.bento-hero { grid-column: 1 / 3; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
.bento-hero-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: var(--sp-1); }
.bento-hero-sub { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.bento-hero-attention { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); padding: 6px 14px; background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 500; color: var(--red); cursor: pointer; text-decoration: none; transition: background 0.15s; }
.bento-hero-attention:hover { background: rgba(220, 59, 59, 0.12); }

.bento-health { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: var(--sp-5); }
.bento-health-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-2); }
.bento-health-row { display: flex; align-items: center; gap: var(--sp-3); }
.bento-health-bar { flex: 1; height: 6px; background: var(--bg-overlay); border-radius: 3px; overflow: hidden; }
.bento-health-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.bento-health-pct { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); }
.bento-health-detail { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: var(--sp-1); }
.bento-health-link { text-decoration: none; color: inherit; display: block; padding: var(--sp-2) var(--sp-3); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)); border-radius: var(--r-md); transition: background 0.15s; }
.bento-health-link:hover { background: var(--bg-hover); }

/* Governance Signals card (replaces health bars) */
.bento-signals { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: var(--sp-1); }
.bento-signal-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); margin: 0 calc(-1 * var(--sp-3)); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; transition: background 0.15s; }
.bento-signal-item:hover { background: var(--bg-hover); }
.bento-signal-item i { font-size: 13px; margin-top: 2px; flex-shrink: 0; width: 16px; text-align: center; }
.bento-signal-item strong { color: var(--text-primary); font-weight: 600; }
.bento-signal-viewall { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); font-weight: 500; color: var(--accent); }
.bento-signal-viewall:hover { color: var(--accent-muted); }
.bento-signal-viewall i { font-size: 10px; }

.bento-stats { grid-column: 1 / 3; grid-row: 2; display: flex; gap: 0; align-items: center; }
.bento-stat { flex: 1; text-align: center; padding: var(--sp-2) var(--sp-3); border-right: 1px solid var(--border-subtle); text-decoration: none; color: inherit; border-radius: var(--r-sm); transition: background 0.15s; margin: calc(-1 * var(--sp-2)) 0; }
.bento-stat:last-child { border-right: none; }
.bento-stat:hover { background: var(--bg-hover); }
.bento-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.bento-stat-label { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.bento-stat-detail { font-size: var(--fs-2xs); margin-top: var(--sp-1); }

.bento-actions { grid-column: 1; grid-row: 3; }
.bento-section-title { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-3); }
.bento-action { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; transition: color 0.1s; }
.bento-action:last-child { border-bottom: none; }
.bento-action:hover { color: var(--accent); }
.bento-action i { font-size: 11px; color: var(--text-faint); width: 16px; text-align: center; }
.bento-action .ic-arrow-right { margin-left: auto; font-size: 10px; opacity: 0; transition: opacity 0.1s; }
.bento-action:hover .ic-arrow-right { opacity: 1; color: var(--accent); }

.bento-activity { grid-column: 2; grid-row: 3; }
.bento-links { grid-column: 3; grid-row: 3; }
.bento-link { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; transition: color 0.1s; }
.bento-link:last-child { border-bottom: none; }
.bento-link:hover { color: var(--accent); }
.bento-link i { font-size: 11px; color: var(--text-faint); width: 16px; text-align: center; }
.bento-link .ic-arrow-right { margin-left: auto; font-size: 10px; opacity: 0; transition: opacity 0.1s; }
.bento-link:hover .ic-arrow-right { opacity: 1; color: var(--accent); }
.bento-activity-item { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); text-decoration: none; color: inherit; border-radius: var(--r-sm); transition: background 0.15s; }
.bento-activity-item:last-child { border-bottom: none; }
.bento-activity-item:hover { background: var(--bg-hover); }
.bento-activity-item:hover .bento-activity-text { color: var(--accent); }
.bento-activity-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.bento-activity-text { color: var(--text-secondary); line-height: 1.5; transition: color 0.1s; }
.bento-activity-text strong { color: var(--text-primary); font-weight: 600; }
.bento-activity-time { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 2px; }


/* ═══════════════════════════════════════════════════════════
   ACTION REQUIRED — Page-specific styles
   ═══════════════════════════════════════════════════════════ */
.task-group { margin-bottom: var(--sp-6); }
.task-group-header { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; margin-bottom: var(--sp-1); }
.task-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task-group-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.task-group-count { font-size: var(--fs-2xs); color: var(--text-faint); margin-left: 4px; }

.completed-toggle { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; padding: var(--sp-2) 0; color: var(--text-faint); font-size: var(--fs-sm); }
.completed-toggle:hover { color: var(--text-secondary); }
.completed-toggle-icon { font-size: 10px; transition: transform 0.15s; }
.completed-toggle-icon.expanded { transform: rotate(90deg); }
.completed-list { display: none; }
.completed-list.open { display: block; }
.completed-task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); opacity: 0.5; }
.completed-check { color: var(--green); font-size: 12px; }
.completed-task-name { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: line-through; }


/* Signal items */
.ar-signal { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); cursor: pointer; transition: background 0.1s; }
.ar-signal:hover { background: var(--bg-hover); }
.ar-signal-icon { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.ar-signal-body { flex: 1; min-width: 0; }
.ar-signal-name { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.ar-signal:hover .ar-signal-name { color: var(--accent); }
.ar-signal-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.ar-signal-desc strong { color: var(--text-primary); font-weight: 600; }
.ar-signal-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }
.ar-signal-badge { padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ar-signal-badge-coverage { background: var(--accent-bg); color: var(--accent); }
.ar-signal-badge-execution { background: var(--amber-bg); color: var(--amber); }
.ar-signal-badge-reviews { background: var(--amber-bg); color: var(--amber); }
.ar-signal-badge-risk { background: var(--red-bg); color: var(--red); }

/* Filter sidebar items */
.ar-filter-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 0; cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); transition: color 0.1s; }
.ar-filter-item:hover { color: var(--text-primary); }
.ar-filter-cb { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin: 0; }
.ar-filter-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ar-filter-text { flex: 1; }
.ar-filter-count { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 500; }


/* ═══════════════════════════════════════════════════════════
   REPORTS — Page-specific styles
   ═══════════════════════════════════════════════════════════ */
.report-section { margin-bottom: var(--sp-8); }
.report-section-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.report-section-icon { width: 24px; height: 24px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.report-section-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.report-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.report-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); transition: border-color 0.15s, box-shadow 0.15s; }
.report-card:hover { border-color: var(--border-mid); }
.report-card-header { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.report-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.report-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }
.report-card-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.report-card-body { margin-bottom: var(--sp-4); }
.report-card-footer { display: flex; align-items: center; justify-content: space-between; }
.report-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.report-tag { font-size: var(--fs-2xs); color: var(--text-faint); background: var(--bg-overlay); padding: 2px 8px; border-radius: var(--r-full); }

/* Tags (entity tagging) */
.table-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.table-tags:empty { display: none; }
.table-tag { font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: var(--r-full); background: var(--bg-overlay); color: var(--text-faint); border: 1px solid var(--border-subtle); }
.btn-generate { font-size: var(--fs-xs); }


/* (Health circles removed — replaced by bento-health bars) */


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Prompt Bar (Vercel/Linear-style)
   ═══════════════════════════════════════════════════════════ */

/* Hero section — clean white with subtle accent */
.da-input-view::before, .da-input-view::after { content: none; }
/* Readiness banner (rd-*) — pre-activation gate on AI system view */
.rd-banner {
    border-radius: var(--r-xl);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border-subtle);
    background: var(--bg-raised);
}
.rd-banner--planning {
    border-color: rgba(67, 67, 175, 0.25);
    background: linear-gradient(180deg, rgba(67, 67, 175, 0.04) 0%, var(--bg-raised) 100%);
}
.rd-banner--existing {
    border-color: var(--border-subtle);
    background: var(--bg-raised);
}
.rd-banner-head {
    display: flex; align-items: center; gap: var(--sp-3);
}
.rd-banner-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.rd-banner--planning .rd-banner-icon { background: var(--accent-bg); color: var(--accent); }
.rd-banner--existing .rd-banner-icon { background: var(--bg-base); color: var(--text-muted); }
.rd-banner-text { flex: 1; min-width: 0; }
.rd-banner-title {
    font-size: var(--fs-base); font-weight: 700; color: var(--text-primary);
}
.rd-banner-sub {
    font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; line-height: 1.5;
}
.rd-banner-actions { flex-shrink: 0; }
.rd-list {
    list-style: none; padding: 0; margin: var(--sp-4) 0 0;
    display: flex; flex-direction: column;
    gap: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-4);
}
.rd-list--inline { border-top: none; padding-top: 0; margin: var(--sp-3) 0; }
/* Controls list rows — these are the primary action surface when readiness
   isn't green. More substantial than the Activate button until done. */
.rd-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    transition: all 0.15s;
}
.rd-item:has(a:hover) {
    border-color: var(--accent);
    box-shadow: 0 1px 4px rgba(67, 67, 175, 0.08);
    transform: translateY(-1px);
}
.rd-item-icon {
    color: var(--accent);
    font-size: 14px; flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-bg);
    border-radius: var(--r-sm);
}
.rd-item-label {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-item-label::after {
    content: '→';
    margin-left: var(--sp-2);
    color: var(--text-faint);
    transition: color 0.15s, transform 0.15s;
    display: inline-block;
}
.rd-item-label:hover { color: var(--accent); }
.rd-item-label:hover::after { color: var(--accent); transform: translateX(2px); }

/* Activation modal */
.rd-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
    z-index: 3000;
    align-items: flex-start; justify-content: center;
    padding-top: 12vh;
}
.rd-modal {
    width: 540px; max-width: calc(100vw - 32px); max-height: 80vh; overflow: auto;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}
.rd-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}
.rd-modal-title { font-size: var(--fs-base); font-weight: 700; margin: 0; }
.rd-modal-close {
    background: none; border: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--r-md);
    color: var(--text-faint);
    display: flex; align-items: center; justify-content: center;
}
.rd-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.rd-modal-body { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; }
.rd-modal-body p { margin: 0 0 var(--sp-3); }
.rd-modal-label {
    display: block; font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-2);
}
.rd-modal-textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    font-size: var(--fs-sm); font-family: inherit;
    background: var(--bg-base); color: var(--text-primary);
    resize: vertical;
}
.rd-modal-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,67,175,0.08); }
.rd-modal-foot {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-main);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Wizard mode-select (planning vs already in use) — first step */
.wiz-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    text-align: left;
}
@media (max-width: 720px) { .wiz-mode-grid { grid-template-columns: 1fr; } }
.wiz-mode-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: var(--sp-6) var(--sp-5);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    color: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.wiz-mode-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(67, 67, 175, 0.08);
}
.wiz-mode-card-active {
    border-color: var(--accent);
    background: var(--accent-bg);
    box-shadow: 0 0 0 2px var(--accent);
}
.wiz-mode-icon {
    width: 40px; height: 40px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.wiz-mode-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
}
.wiz-mode-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.pb-hero {
    background: #fff;
    padding: 80px 24px 48px;
    text-align: center;
}
.pb-center { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }

.pb-eyebrow {
    font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--sp-3);
}
.pb-heading {
    font-size: 2.25rem; font-weight: 700; color: var(--text-primary);
    text-align: center; letter-spacing: -0.025em; margin: 0 0 var(--sp-3); line-height: 1.2;
}
.pb-subheading {
    font-size: var(--fs-md); color: var(--text-muted); text-align: center;
    margin: 0 auto var(--sp-8); max-width: 480px; line-height: 1.6;
}

.pb-bar { background: var(--bg-raised); border: 3px solid rgba(67, 67, 175, 0.35); border-radius: var(--r-xl); box-shadow: 0 0 24px 6px rgba(67, 67, 175, 0.12), 0 0 48px 12px rgba(67, 67, 175, 0.06); overflow: hidden; transition: box-shadow 0.3s, border-color 0.3s; }
.pb-bar:focus-within { border-color: rgba(67, 67, 175, 0.5); box-shadow: 0 0 32px 8px rgba(67, 67, 175, 0.18), 0 0 56px 16px rgba(67, 67, 175, 0.08); }
.pb-bar-main { display: flex; align-items: flex-start; padding: var(--sp-5) var(--sp-5); gap: var(--sp-3); }
.pb-bar-icon { color: var(--accent); font-size: 16px; margin-top: 3px; flex-shrink: 0; }
.pb-bar-textarea { flex: 1; border: none; font-size: 15px; font-family: inherit; color: var(--text-primary); background: transparent; outline: none; resize: none; min-height: 24px; line-height: 1.6; }
.pb-bar-textarea::placeholder { color: var(--text-faint); }
/* Typewriter cursor */
.pb-bar-textarea.pb-typing { caret-color: transparent; }
.pb-bar-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border-subtle); background: var(--bg-main); }
.pb-bar-tools { display: flex; gap: 2px; }
.pb-tool { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: var(--fs-xs); color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; border-radius: var(--r-sm); transition: all 0.1s; }
.pb-tool:hover { background: var(--bg-hover); color: var(--text-primary); }
.pb-tool i { font-size: 12px; }
.pb-submit { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: var(--accent); color: var(--white); border: none; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s; }
.pb-submit:hover { background: var(--accent-muted); }

.pb-suggestions { margin-top: var(--sp-8); text-align: left; }
.pb-sug-title { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-3); }
.pb-sug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.pb-sug { padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; }
.pb-sug:hover { border-color: var(--accent-border); background: var(--accent-bg); border-left-color: var(--accent); }
.pb-sug-text { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; margin-bottom: 3px; }
.pb-sug-meta { font-size: var(--fs-2xs); color: var(--text-faint); }

/* Prompt bar additions */
.pb-subtext { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.pb-sug-icon { width: 28px; height: 28px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.pb-sug-icon.blue  { background: var(--blue-bg); color: var(--blue); }
.pb-sug-icon.purple { background: rgba(155,106,235,0.10); color: #9B6AEB; }
.pb-sug-icon.amber  { background: var(--amber-bg); color: var(--amber); }
.pb-sug-icon.green  { background: var(--green-bg); color: var(--green); }

/* Prompt bar validation */
@keyframes pbShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}
.pb-bar-shake { animation: pbShake 0.5s ease-out; border-color: var(--red-border) !important; box-shadow: 0 0 0 3px var(--red-bg) !important; }
.pb-input-hint { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; margin-top: 0; }
.pb-input-hint-visible { max-height: 220px; opacity: 1; margin-top: var(--sp-3); }
.pb-input-hint-msg { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); }
.pb-input-hint-msg i { color: var(--text-faint); font-size: 13px; }
.pb-input-hint-short .pb-input-hint-msg i { color: var(--amber); }
.pb-input-hint-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.pb-hint-chip { padding: 6px 14px; font-size: var(--fs-xs); font-family: inherit; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-full); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.pb-hint-chip:hover { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — How It Works Carousel
   ═══════════════════════════════════════════════════════════ */
.pb-how-section { background: var(--bg-main); padding: 72px 24px; border-top: 1px solid var(--border-subtle); }
.pb-how-inner { max-width: 800px; margin: 0 auto; }

.pb-section-heading {
    font-size: 1.5rem; font-weight: 700; color: var(--text-primary);
    text-align: center; letter-spacing: -0.02em; margin: 0 0 var(--sp-2);
}
.pb-section-sub {
    font-size: var(--fs-md); color: var(--text-muted); text-align: center;
    margin: 0 0 48px;
}

.pb-how-carousel { position: relative; display: flex; align-items: center; gap: var(--sp-4); }
.pb-how-viewport { flex: 1; overflow: hidden; }
.pb-how-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pb-how-card {
    flex: 0 0 100%; background: #fff;
    border: 1px solid var(--accent-border); border-radius: var(--r-xl);
    padding: 40px 48px; text-align: center;
    box-shadow: 0 4px 20px rgba(67,67,175,0.08);
}
.pb-how-number {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: var(--fs-sm); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto var(--sp-4);
}
.pb-how-icon { font-size: 32px; color: var(--accent); margin-bottom: var(--sp-4); }
.pb-how-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 var(--sp-3); }
.pb-how-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; margin: 0; max-width: 420px; margin-left: auto; margin-right: auto; }

/* Arrow buttons */
.pb-how-arrow {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: #fff; border: 1px solid var(--border-mid);
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.pb-how-arrow:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

.pb-how-carousel { flex-wrap: wrap; }
.pb-how-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; width: 100%; }
.pb-how-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-mid); border: none; cursor: pointer;
    transition: all 0.2s; padding: 0;
}
.pb-how-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

@media (max-width: 680px) {
    .pb-how-card { padding: 32px 24px; }
    .pb-how-arrow { width: 32px; height: 32px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — FAQ Accordion
   ═══════════════════════════════════════════════════════════ */
.pb-faq-section { background: #fff; padding: 48px 24px 64px; }
.pb-faq-inner { max-width: 640px; margin: 0 auto; }

.pb-faq-list { margin-top: 40px; }
.pb-faq-item { border-bottom: 1px solid var(--border-subtle); }
.pb-faq-item:first-child { border-top: 1px solid var(--border-subtle); }

.pb-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 500;
    color: var(--text-primary); text-align: left; gap: var(--sp-4);
}
.pb-faq-q:hover { color: var(--accent); }
.pb-faq-q i {
    font-size: 12px; color: var(--text-faint); flex-shrink: 0;
    transition: transform 0.25s;
}
.pb-faq-item.open .pb-faq-q i { transform: rotate(180deg); }

.pb-faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
    padding: 0;
}
.pb-faq-item.open .pb-faq-a { max-height: 300px; padding: 0 0 20px; }
.pb-faq-a p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — AI Disclaimer
   ═══════════════════════════════════════════════════════════ */
.pb-disclaimer-section { padding: 0 24px 48px; background: #fff; }
.pb-disclaimer {
    max-width: 640px; margin: 0 auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 16px 20px; border-radius: var(--r-lg);
    background: var(--bg-main); border: 1px solid var(--border-subtle);
    font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.6;
}
.pb-disclaimer i { margin-top: 2px; flex-shrink: 0; color: var(--text-faint); }
.pb-disclaimer p { margin: 0; }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Governance Stack Confirmation View
   ═══════════════════════════════════════════════════════════ */

/* View toggle */
.da-input-view { display: block; position: relative; }
.da-confirm-view { display: none; }
.da-confirm-view.da-active { display: block; }
.da-input-view.da-hidden { display: none; }

/* Back button */
.da-back-btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--sp-5); font-family: inherit; transition: color 0.15s; }
.da-back-btn:hover { color: var(--text-primary); }
.da-back-btn i { font-size: 10px; }

/* Smart defaults banner */
.da-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-lg); margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--accent); }
.da-banner i { font-size: 14px; flex-shrink: 0; }

/* Section card */
.da-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.da-card-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.da-card-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.da-card-icon.blue   { background: var(--blue-bg); color: var(--blue); }
.da-card-icon.amber  { background: var(--amber-bg); color: var(--amber); }
.da-card-icon.green  { background: var(--green-bg); color: var(--green); }
.da-card-icon.purple { background: rgba(155,106,235,0.10); color: #9B6AEB; }
.da-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); flex: 1; }
.da-card-badge { font-size: var(--fs-2xs); color: var(--text-faint); background: var(--bg-hover); padding: 2px 8px; border-radius: var(--r-full); }

/* Editable title */
.da-editable-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); border: 1px dashed var(--border-mid); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); outline: none; display: block; width: 100%; background: transparent; font-family: inherit; }
.da-editable-title:focus { border-color: var(--accent); border-style: solid; }

/* Description */
.da-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-4); }

/* Field rows */
.da-field-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.da-field-label { font-size: var(--fs-xs); color: var(--text-faint); width: 100px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.da-field-value { font-size: var(--fs-sm); color: var(--text-primary); flex: 1; }

/* Owner assign */
.da-owner-assign { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-3) 4px 4px; border: 1px solid var(--border-mid); border-radius: var(--r-full); cursor: pointer; transition: border-color 0.15s; font-size: var(--fs-sm); color: var(--text-secondary); background: transparent; font-family: inherit; }
.da-owner-assign:hover { border-color: var(--accent); }
.da-owner-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.da-owner-avatar.filled { background: var(--accent-bg); color: var(--accent); }
.da-owner-name { white-space: nowrap; }
.da-owner-assign i.ic-chevron-down { font-size: 8px; color: var(--text-faint); margin-left: var(--sp-1); }

/* Vendor row */
.da-vendor-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.da-vendor-logo { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; color: var(--text-muted); }
.da-vendor-info { flex: 1; min-width: 0; }
.da-vendor-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.da-vendor-model { font-size: var(--fs-xs); color: var(--text-muted); }
.da-vendor-confirm { font-size: var(--fs-xs); font-weight: 500; color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); padding: 4px 12px; border-radius: var(--r-full); cursor: pointer; transition: background 0.15s; font-family: inherit; }
.da-vendor-confirm:hover { background: rgba(24, 135, 46, 0.14); }
.da-vendor-add { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--text-faint); cursor: pointer; margin-top: var(--sp-3); border: none; background: none; padding: 0; font-family: inherit; transition: color 0.15s; }
.da-vendor-add:hover { color: var(--accent); }

/* Risk group */
.da-risk-group { margin-bottom: var(--sp-3); }
.da-risk-group:last-child { margin-bottom: 0; }
.da-risk-group-header { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; cursor: pointer; user-select: none; }
.da-risk-group-header i.ic-chevron-down { font-size: 9px; color: var(--text-faint); transition: transform 0.2s; }
.da-risk-group.collapsed .da-risk-group-header i.ic-chevron-down { transform: rotate(-90deg); }
.da-risk-group-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }
.da-risk-group-count { font-size: var(--fs-2xs); color: var(--text-faint); background: var(--bg-hover); padding: 1px 7px; border-radius: var(--r-full); }
.da-risk-group-body { padding-left: var(--sp-1); }
.da-risk-group.collapsed .da-risk-group-body { display: none; }

/* Risk item */
.da-risk-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-top: var(--sp-2); transition: border-color 0.15s; }
.da-risk-item:hover { border-color: var(--border-mid); }
.da-risk-check { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.da-risk-content { flex: 1; min-width: 0; }
.da-risk-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.da-risk-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--sp-2); }
.da-risk-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.da-risk-actions { display: flex; gap: var(--sp-1); margin-left: auto; flex-shrink: 0; }
.da-risk-actions button { font-size: var(--fs-2xs); padding: 3px 8px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all 0.15s; display: flex; align-items: center; gap: 4px; }
.da-risk-actions button:hover { border-color: var(--border-mid); color: var(--text-primary); background: var(--bg-hover); }
.da-risk-actions button.remove:hover { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }

/* Controls / Safeguards */
.da-controls-list { margin-top: var(--sp-2); }
.da-control-item { padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-2); }
.da-control-item:last-child { margin-bottom: 0; }
.da-control-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.da-control-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); flex: 1; }
.da-control-link { font-size: var(--fs-2xs); color: var(--text-faint); }
.da-control-link i { margin-right: 3px; }
.da-control-fields { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.da-control-field { display: flex; align-items: center; gap: var(--sp-2); }
.da-control-field-label { font-size: var(--fs-2xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }

/* Confirmation footer */
.da-confirm-footer { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); text-align: center; }
.da-confirm-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-base); font-weight: 600; color: var(--white); background: var(--accent); border: none; border-radius: var(--r-lg); cursor: pointer; font-family: inherit; transition: background 0.15s, box-shadow 0.15s; box-shadow: var(--shadow-sm); }
.da-confirm-btn:hover { background: var(--accent-muted); box-shadow: var(--shadow-md); }
.da-confirm-btn i { font-size: 13px; }
.da-confirm-subtext { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }

/* AI-suggested badge (inline) */
.da-ai-badge { font-size: var(--fs-2xs); color: var(--accent); background: var(--accent-bg); padding: 1px 6px; border-radius: var(--r-full); border: 1px solid var(--accent-border); font-weight: 500; white-space: nowrap; }

/* Light theme card shadow */
:root:not(.dark-theme) .da-card { box-shadow: var(--shadow-sm); }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Wizard Navigation
   ═══════════════════════════════════════════════════════════ */

.da-wiz-nav { display: flex; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-8); overflow-x: auto; }
.da-wiz-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--sp-3) var(--sp-2); cursor: pointer; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; min-width: 90px; gap: 4px; user-select: none; }
.da-wiz-nav-item:hover { color: var(--accent); }
.da-wiz-nav-item.active { border-bottom-color: var(--accent); color: var(--accent); }
.da-wiz-nav-item.completed { cursor: pointer; }
.da-wiz-nav-item.disabled { opacity: 0.35; pointer-events: none; }
.da-wiz-nav-number { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-2xs); flex-shrink: 0; transition: all 0.2s; color: var(--text-muted); }
.da-wiz-nav-item.active .da-wiz-nav-number { background: var(--accent); border-color: var(--accent); color: #fff; }
.da-wiz-nav-item.completed .da-wiz-nav-number { background: var(--green); border-color: var(--green); color: #fff; }
.da-wiz-nav-label { font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }

/* ── Wizard Form Grid ── */
.da-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.da-field-grid.single { grid-template-columns: 1fr; }
.da-field-group { display: flex; flex-direction: column; gap: 4px; }
.da-field-group label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.da-field-group input[type="text"],
.da-field-group input[type="date"],
.da-field-group select,
.da-field-group textarea {
    width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    font-size: var(--fs-sm); font-family: inherit; background: var(--bg-main); color: var(--text-primary); transition: border-color 0.15s;
}
.da-field-group input:focus, .da-field-group select:focus, .da-field-group textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
.da-field-group textarea { min-height: 80px; resize: vertical; }
.da-field-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236E6E7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: var(--sp-8); }
.da-field-hint { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 2px; }

/* ── Label Tooltip ── */
.da-label-with-tip { display: inline-flex; align-items: center; gap: 5px; }
.da-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-hover); color: var(--text-faint); font-size: 8px; cursor: help; flex-shrink: 0; transition: all 0.15s; }
.da-tip:hover { background: var(--accent-bg); color: var(--accent); }
.da-tip-body { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 260px; padding: var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: var(--fs-xs); font-weight: 400; color: var(--text-secondary); line-height: 1.55; text-transform: none; letter-spacing: 0; white-space: normal; z-index: 200; }
.da-tip-body::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border-mid); }
.da-tip-body::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg-raised); z-index: 1; }
.da-tip:hover .da-tip-body { display: block; }
.da-tip-body strong { color: var(--text-primary); font-weight: 600; }

/* ── Multi-Owner Pills ── */
.da-owners-multi { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.da-owner-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 3px 10px 3px 3px; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-full); font-size: var(--fs-xs); }
.da-owner-pill .da-owner-avatar { width: 20px; height: 20px; font-size: 9px; }
.da-owner-pill-name { font-weight: 500; color: var(--text-primary); }
.da-owner-pill-role { font-size: var(--fs-2xs); color: var(--text-faint); margin-left: 2px; }
.da-owner-pill-remove { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-faint); background: none; border: none; font-size: 10px; padding: 0; transition: all 0.15s; }
.da-owner-pill-remove:hover { background: var(--red-bg); color: var(--red); }
.da-owner-add-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 3px 10px; border: 1px dashed var(--border-mid); border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; background: none; transition: all 0.15s; font-family: inherit; }
.da-owner-add-pill:hover { border-color: var(--accent); color: var(--accent); }

/* ── Expanded Vendor Card ── */
.da-vendor-detail { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-3); }
.da-vendor-detail-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.da-vendor-detail-header .da-vendor-name { font-weight: 600; font-size: var(--fs-md); }
.da-vendor-detail-header .da-vendor-model { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Expanded Risk Item ── */
.da-risk-item-expanded { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-3); }
.da-risk-item-expanded .da-risk-title { margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.da-risk-item-expanded .da-risk-title strong { font-size: var(--fs-md); font-weight: 600; }
.da-risk-item-expanded .da-risk-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }

/* ── Expanded Control Item ── */
.da-control-item-expanded { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-3); }
.da-control-item-expanded .da-control-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-2); }
.da-control-item-expanded .da-control-link { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.da-control-item-expanded .da-control-link i { margin-right: 4px; font-size: 10px; }

/* ── Checkbox Group (Data Shared) ── */
.da-check-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.da-check-group label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--text-primary); }
.da-check-group input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ── Review Summary (Step 5) ── */
.da-review-section { margin-bottom: var(--sp-6); }
.da-review-section-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-3); }
.da-review-section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.da-review-section-edit { background: none; border: none; color: var(--accent); font-size: var(--fs-xs); cursor: pointer; font-family: inherit; font-weight: 500; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); transition: background 0.15s; }
.da-review-section-edit:hover { background: var(--accent-bg); }
.da-review-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--fs-sm); }
.da-review-label { color: var(--text-muted); }
.da-review-value { color: var(--text-primary); font-weight: 500; text-align: right; }
.da-review-items { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.da-review-item-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-full); font-size: var(--fs-xs); }

/* ── Wizard Footer ── */
.da-wiz-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); margin-top: var(--sp-8); }
.da-wiz-footer-right { display: flex; gap: var(--sp-3); }

/* ── Wizard section headings ── */
.da-wiz-section-title { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-4); margin-top: var(--sp-6); }
.da-wiz-section-title:first-child { margin-top: 0; }

/* ── Other (specify) ── */
.da-other-specify { margin-top: var(--sp-1); }

/* ── PII Toggle ── */
.da-pii-toggle { display: inline-flex; border: 1px solid var(--border-mid); border-radius: var(--r-md); overflow: hidden; }
.da-pii-toggle-btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 500; font-family: inherit; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; min-width: 64px; text-align: center; }
.da-pii-toggle-btn.selected { background: var(--accent); color: #fff; }
.da-pii-toggle-btn:not(.selected):hover { background: var(--bg-hover); }
.da-pii-types { animation: fadeSlideIn 0.2s ease; }
.da-pii-types.hidden { display: none; }

/* ── Risk Level Segmented Buttons ── */
.da-risk-level-group { display: flex; border: 1px solid var(--border-mid); border-radius: var(--r-md); overflow: hidden; }
.da-risk-level-btn { flex: 1; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 500; font-family: inherit; border: none; border-right: 1px solid var(--border-mid); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; text-align: center; }
.da-risk-level-btn:last-child { border-right: none; }
.da-risk-level-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.da-risk-level-btn.selected.level-low { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.da-risk-level-btn.selected.level-medium { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.da-risk-level-btn.selected.level-high { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.da-risk-level-btn.selected.level-critical { background: rgba(139,0,0,0.10); color: #8B0000; border-color: rgba(139,0,0,0.25); }
.dark-theme .da-risk-level-btn.selected.level-critical { background: rgba(200,50,50,0.15); color: #E06060; border-color: rgba(200,50,50,0.30); }

/* ── Owner Picker Dropdown ── */
.da-owner-dropdown { position: fixed; z-index: 200; min-width: 260px; max-width: 320px; max-height: 360px; overflow-y: auto; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2) 0; display: none; animation: fadeSlideIn 0.15s ease; }
.da-owner-dropdown.open { display: block; }
.da-owner-option { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: background 0.1s; }
.da-owner-option:hover { background: var(--bg-hover); }
.da-owner-option .da-owner-avatar { width: 28px; height: 28px; font-size: 10px; }
.da-owner-option-info { display: flex; flex-direction: column; gap: 1px; }
.da-owner-option-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.da-owner-option-role { font-size: var(--fs-2xs); color: var(--text-faint); }
.da-owner-dropdown-divider { height: 1px; background: var(--border-subtle); margin: var(--sp-2) 0; }
.da-owner-dropdown-invite { padding: var(--sp-2) var(--sp-3); }
.da-owner-invite-trigger { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; transition: color 0.15s; }
.da-owner-invite-trigger:hover { color: var(--accent-muted); }
.da-owner-invite-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.da-owner-invite-row input { flex: 1; padding: var(--sp-2); font-size: var(--fs-sm); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-family: inherit; background: var(--bg-main); color: var(--text-primary); }
.da-owner-invite-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.da-owner-invite-send { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 500; background: var(--accent); color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; font-family: inherit; white-space: nowrap; }
.da-owner-invite-send:hover { background: var(--accent-muted); }

/* ── Risk Removal Confirmation ── */
.da-risk-confirm-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-md); margin-top: var(--sp-3); animation: fadeSlideIn 0.2s ease; font-size: var(--fs-sm); color: var(--text-primary); }
.da-risk-confirm-bar span { flex: 1; }
.da-risk-confirm-bar .da-risk-confirm-yes { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); font-weight: 500; background: var(--red); color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; font-family: inherit; white-space: nowrap; }
.da-risk-confirm-bar .da-risk-confirm-yes:hover { opacity: 0.85; }
.da-risk-confirm-bar .da-risk-confirm-cancel { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); font-weight: 500; background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); border-radius: var(--r-md); cursor: pointer; font-family: inherit; white-space: nowrap; }
.da-risk-confirm-bar .da-risk-confirm-cancel:hover { background: var(--bg-hover); }
.da-risk-item-expanded.removing { opacity: 0; max-height: 0; overflow: hidden; padding: 0; margin: 0; border: none; transition: all 0.3s ease; }

/* ── Removed Risks Tray ── */
.da-removed-tray { padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.da-removed-tray-header { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-3); display: flex; align-items: center; }
.da-removed-tray-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.da-removed-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--text-secondary); }
.da-removed-pill button { font-size: var(--fs-2xs); color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 500; padding: 0; margin-left: var(--sp-1); }
.da-removed-pill button:hover { text-decoration: underline; }

/* ── Success Bounce Animation ── */
.da-success-icon { animation: successBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes successBounce { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — The Reveal (Intelligence Canvas)
   ═══════════════════════════════════════════════════════════ */

/* Loading state */
.da-reveal-loading { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.da-reveal-loading-inner { text-align: center; }
.da-reveal-loading-icon { font-size: 48px; color: var(--accent); margin-bottom: var(--sp-5); animation: revealPulse 1.5s ease-in-out infinite; }
@keyframes revealPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
.da-reveal-loading-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-6); }
.da-reveal-loading-steps { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; max-width: 280px; margin: 0 auto; }
.da-reveal-loading-step { font-size: var(--fs-sm); color: var(--text-faint); display: flex; align-items: center; gap: var(--sp-2); opacity: 0; transform: translateY(6px); transition: all 0.35s ease; }
.da-reveal-loading-step i { width: 18px; text-align: center; font-size: 12px; }
.da-reveal-loading-step.active { opacity: 1; transform: translateY(0); color: var(--text-secondary); }

/* Canvas fade-in */
.da-reveal-fade-in { animation: revealFadeIn 0.4s ease both; }
@keyframes revealFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* System summary header */
.da-reveal-header { margin-bottom: var(--sp-8); }
.da-reveal-header-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.da-reveal-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); outline: none; border-bottom: 2px solid transparent; transition: border-color 0.15s; margin: 0; line-height: 1.3; }
.da-reveal-title:focus { border-bottom-color: var(--accent); }
.da-reveal-ai-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 500; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0; }
.da-reveal-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--sp-4); }
.da-reveal-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.da-reveal-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border-subtle); padding: 4px 12px; border-radius: var(--r-full); }
.da-reveal-pill i { font-size: 11px; color: var(--text-faint); }
.da-reveal-pill-risk { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }

/* Section headers */
.da-reveal-section { margin-bottom: var(--sp-8); }
.da-reveal-section-header { margin-bottom: var(--sp-4); }
.da-reveal-section-header h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); }
.da-reveal-section-header h2 i { font-size: 16px; color: var(--text-muted); }
.da-reveal-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); background: var(--bg-hover); border-radius: var(--r-full); padding: 0 6px; }
.da-reveal-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 0; }

/* Help tooltips */
.da-reveal-help { position: relative; cursor: help; margin-left: 2px; }
.da-reveal-help i { font-size: 13px; color: var(--text-faint); transition: color 0.15s; }
.da-reveal-help:hover i, .da-reveal-help:focus i { color: var(--accent); }
.da-reveal-help-tip { display: none; position: absolute; right: -8px; top: calc(100% + 8px); width: 280px; padding: 10px 14px; font-size: var(--fs-xs); font-weight: 400; line-height: 1.5; color: var(--text-secondary); background: var(--bg-main); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-md); z-index: 20; white-space: normal; }
.da-reveal-help-tip::before { content: ''; position: absolute; right: 14px; top: -5px; transform: rotate(45deg); width: 8px; height: 8px; background: var(--bg-main); border-top: 1px solid var(--border-default); border-left: 1px solid var(--border-default); }
.da-reveal-help:hover .da-reveal-help-tip, .da-reveal-help:focus .da-reveal-help-tip { display: block; }

/* Row items */
.da-reveal-list { display: flex; flex-direction: column; gap: 1px; }
.da-reveal-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md); transition: all 0.2s ease; cursor: pointer; flex-wrap: wrap; }
.da-reveal-row:hover { border-color: var(--border-mid); }
.da-reveal-row.expanded { background: var(--bg-subtle); border-color: var(--border-mid); }

/* Expandable description */
.da-reveal-chevron { flex-shrink: 0; color: var(--text-faint); font-size: 11px; transition: transform 0.2s ease; margin-left: auto; }
.da-reveal-row.expanded .da-reveal-chevron { transform: rotate(180deg); }
.da-reveal-row-desc { display: none; width: 100%; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; padding: var(--sp-2) 0 0 calc(10px + var(--sp-3)); }
.da-reveal-row.expanded .da-reveal-row-desc { display: block; }

/* Baseline controls row — visually distinct from regular controls */
.da-reveal-row-baseline { border-style: dashed; background: transparent; }

/* Category column on list pages */
.table-category { font-size: var(--fs-xs); color: var(--text-secondary); }
.da-reveal-row-removing { opacity: 0; transform: scaleY(0.8); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
.da-reveal-row-dimmed { opacity: 0.4; pointer-events: none; }
.da-reveal-row-flagged { border-left: 3px solid var(--amber); }

/* Dots and icons */
.da-reveal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.da-reveal-dot-high { background: var(--red); }
.da-reveal-dot-medium { background: var(--amber); }
.da-reveal-dot-low { background: var(--green); }
.da-reveal-dot-ctrl { background: var(--accent); }
.da-reveal-ctrl-icon { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

/* Row name (contenteditable) */
.da-reveal-row-name { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); outline: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; overflow: hidden; text-overflow: ellipsis; }
.da-reveal-row-name:focus { border-bottom-color: var(--accent); }

/* Linked risk label */
.da-reveal-linked { font-size: var(--fs-2xs); color: var(--text-faint); white-space: nowrap; }

/* Action buttons */
.da-reveal-row-actions { display: flex; gap: 2px; flex-shrink: 0; }
.da-reveal-action { width: 28px; height: 28px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: transparent; color: var(--text-faint); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.da-reveal-action:hover { border-color: var(--border-mid); color: var(--text-secondary); background: var(--bg-hover); }
.da-reveal-action.active[title="Accept"] { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.da-reveal-action.active[title="Flag for review"] { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
.da-reveal-action.active[title="Remove"] { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }

/* Removed tray */
.da-reveal-removed-tray { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-top: var(--sp-3); background: var(--bg-overlay); border-radius: var(--r-md); }
.da-reveal-removed-label { font-size: var(--fs-xs); color: var(--text-faint); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.da-reveal-removed-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.da-reveal-removed-pill { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border-subtle); padding: 3px 10px; border-radius: var(--r-full); }
.da-reveal-removed-pill button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 11px; padding: 0; margin-left: 2px; }
.da-reveal-removed-pill button:hover { color: var(--accent-hover); }

/* Baseline controls footnote */
.da-reveal-baseline-note { font-size: var(--fs-xs); color: var(--text-faint); margin: var(--sp-4) 0 0; padding: 0; }
.da-reveal-baseline-note i { margin-right: 5px; font-size: 11px; color: var(--text-muted); }

/* Edit-later reassurance */
.da-reveal-edit-later { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--bg-overlay); border-radius: var(--r-md); }
.da-reveal-edit-later i { margin-right: 5px; font-size: 11px; color: var(--text-muted); }

/* CTA footer */
.da-reveal-footer { text-align: center; padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); }
.da-reveal-footer .btn-lg { padding: 14px 32px; font-size: var(--fs-md); }
.da-reveal-footer-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-3); }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Clarification State
   ═══════════════════════════════════════════════════════════ */

.da-clarify { display: flex; align-items: center; justify-content: center; min-height: 60vh; animation: revealFadeIn 0.4s ease both; }
.da-clarify-inner { max-width: 560px; width: 100%; text-align: center; padding: var(--sp-6) var(--sp-4); }
.da-clarify-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 9999px; background: rgba(67,67,175,0.08); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; margin-bottom: var(--sp-3); }
.da-clarify-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); letter-spacing: -0.02em; }
.da-clarify-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-6); }
.da-clarify-questions { text-align: left; margin-bottom: var(--sp-6); }
.da-clarify-question { margin-bottom: var(--sp-5); }
.da-clarify-question-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); }
.da-clarify-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.da-clarify-chip { padding: 7px 16px; border-radius: 9999px; border: 1px solid var(--border-subtle); background: var(--bg-raised); color: var(--text-secondary); font-size: var(--fs-xs); cursor: pointer; transition: all 0.15s; font-family: inherit; }
.da-clarify-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.da-clarify-chip-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.da-clarify-chip-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.da-clarify-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.da-clarify-footer .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Confirmation Preview
   ═══════════════════════════════════════════════════════════ */

.da-confirm-preview { animation: revealFadeIn 0.4s ease both; }
.da-confirm-preview-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 9999px; background: rgba(67,67,175,0.08); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; margin-bottom: var(--sp-3); }
.da-confirm-preview-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); letter-spacing: -0.02em; }
.da-confirm-preview-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-6); }
.da-confirm-preview-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.da-confirm-preview-field { margin-bottom: var(--sp-4); }
.da-confirm-preview-field:last-child { margin-bottom: 0; }
.da-confirm-preview-field label { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-1); }
.da-confirm-preview-value { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); outline: none; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid transparent; transition: all 0.15s; line-height: 1.5; }
.da-confirm-preview-value:hover { border-color: var(--border-subtle); }
.da-confirm-preview-value:focus { border-color: var(--accent); background: var(--bg-main); box-shadow: 0 0 0 3px rgba(67,67,175,0.08); }
.da-confirm-preview-desc { font-weight: 400; font-size: var(--fs-sm); color: var(--text-secondary); }
.da-confirm-preview-pills-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.da-confirm-preview-pill-group { display: flex; flex-direction: column; gap: 4px; }
.da-confirm-preview-pill-group label { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.da-confirm-preview-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 9999px; background: var(--bg-hover); border: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-secondary); }
.da-confirm-preview-pill i { font-size: 11px; color: var(--text-faint); }
.da-confirm-preview-footer { text-align: center; }
.da-confirm-preview-footer .btn-lg { padding: 14px 32px; font-size: var(--fs-md); }
.da-confirm-preview-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Error State
   ═══════════════════════════════════════════════════════════ */

.da-error { display: flex; align-items: center; justify-content: center; min-height: 60vh; animation: revealFadeIn 0.4s ease both; }
.da-error-inner { max-width: 480px; width: 100%; text-align: center; padding: var(--sp-6) var(--sp-4); }
.da-error-icon { font-size: 40px; color: var(--text-muted); margin-bottom: var(--sp-4); }
.da-error-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.da-error-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-5); }
.da-error-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--sp-5); }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Ownership Moment (Soft Modal)
   ═══════════════════════════════════════════════════════════ */

.da-owner-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.da-owner-overlay-visible { opacity: 1; }
.da-owner-modal { background: var(--bg-main); border-radius: var(--r-xl); padding: var(--sp-8); max-width: 480px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.15); text-align: center; animation: revealFadeIn 0.3s ease both; }
.da-owner-modal-icon { font-size: 40px; color: var(--accent); margin-bottom: var(--sp-4); }
.da-owner-modal-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); line-height: 1.3; }
.da-owner-modal-desc { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--sp-6); }

/* Radio options */
.da-owner-options { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); text-align: left; }
.da-owner-option { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); cursor: pointer; transition: all 0.15s; }
.da-owner-option:hover { border-color: var(--border-mid); }
.da-owner-option.selected { border-color: var(--accent); background: var(--accent-bg); }
.da-owner-option input[type="radio"] { display: none; }
.da-owner-option-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-mid); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.da-owner-option.selected .da-owner-option-radio { border-color: var(--accent); }
.da-owner-option.selected .da-owner-option-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.da-owner-option-content { display: flex; flex-direction: column; gap: 2px; }
.da-owner-option-content strong { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.da-owner-option-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* Owner picker */
.da-owner-picker { margin-bottom: var(--sp-4); text-align: left; }

/* Shared responsibility toggle */
.da-owner-shared-toggle { background: none; border: none; color: var(--text-faint); font-size: var(--fs-xs); cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); padding: 0; margin-bottom: var(--sp-3); font-family: inherit; font-weight: 500; transition: color 0.15s; }
.da-owner-shared-toggle:hover { color: var(--text-secondary); }
.da-owner-shared-chevron { font-size: 10px; transition: transform 0.2s; }
.da-owner-shared { text-align: left; margin-bottom: var(--sp-4); }
.da-owner-shared-desc { font-size: var(--fs-xs); color: var(--text-faint); margin: 0 0 var(--sp-3); }

/* Invite form */
.da-owner-invite { margin-bottom: var(--sp-4); }
.da-owner-invite-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.da-owner-invite-field label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.da-owner-invite-field input { width: 100%; padding: 9px 12px; font-size: var(--fs-sm); font-family: inherit; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-main); color: var(--text-primary); transition: border-color 0.15s; box-sizing: border-box; }
.da-owner-invite-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.da-owner-invite-field input::placeholder { color: var(--text-faint); }
.da-owner-invite-note { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-3); }
.da-owner-invite-note i { margin-right: 4px; color: var(--accent); font-size: 11px; }

/* Notice bar */
.da-owner-notice { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-faint); background: var(--bg-overlay); padding: var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-5); text-align: left; }
.da-owner-notice i { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* Confirm button */
.da-owner-confirm-btn { width: 100%; }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Instant Credible Output
   ═══════════════════════════════════════════════════════════ */

.da-output-view { }

/* Document card */
.da-output-doc { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: 0 4px 24px rgba(0,0,0,0.06); margin-bottom: var(--sp-6); }
.da-output-doc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.da-output-doc-brand { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.da-output-doc-brand i { font-size: 16px; }
.da-output-doc-date { font-size: var(--fs-xs); color: var(--text-faint); }
.da-output-doc-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-1); }
.da-output-doc-subtitle { font-size: var(--fs-md); color: var(--text-secondary); margin: 0 0 var(--sp-6); }

/* Stats strip */
.da-output-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding: var(--sp-5); background: var(--bg-overlay); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.da-output-stat { text-align: center; }
.da-output-stat-value { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.da-output-stat-label { font-size: var(--fs-2xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }

/* Sections */
.da-output-section { margin-bottom: var(--sp-6); }
.da-output-section h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); }
.da-output-section p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* Risk and control lists */
.da-output-risk-list, .da-output-control-list { padding-left: var(--sp-5); margin: 0; }
.da-output-risk-list li, .da-output-control-list li { font-size: var(--fs-sm); color: var(--text-primary); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); line-height: 1.5; }
.da-output-risk-list li:last-child, .da-output-control-list li:last-child { border-bottom: none; }

/* Governance rhythm */
.da-output-rhythm { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.da-output-rhythm-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); padding: var(--sp-3); background: var(--bg-overlay); border-radius: var(--r-md); }
.da-output-rhythm-item i { color: var(--accent); font-size: 14px; }

/* Action bar */
.da-output-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-8); }

/* Next step */
.da-output-next { text-align: center; padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); }
.da-output-next-link { font-size: var(--fs-md); font-weight: 600; color: var(--accent); text-decoration: none; transition: color 0.15s; }
.da-output-next-link:hover { color: var(--accent-hover); }
.da-output-next-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }


/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Full-Page Modal Overlay
   ═══════════════════════════════════════════════════════════ */

.da-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0; transition: opacity 0.25s ease;
}
.da-modal-overlay.open { opacity: 1; }
.da-modal-close {
    position: fixed; top: 16px; right: 16px; z-index: 10001;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-raised, #fff); border: 1px solid var(--border-mid, rgba(0,0,0,0.12));
    color: var(--text-secondary, #555); font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.15s;
}
.da-modal-close:hover { background: var(--bg-active, #eee); color: var(--text-primary, #111); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.da-modal-frame {
    position: fixed; inset: 0; z-index: 10000;
    width: 100%; height: 100%; border: none;
    background: var(--bg-main, #FAFAFA);
}

/* ═══════════════════════════════════════════════════════════
   DO ANYTHING — Standalone Page (no sidebar/topbar)
   ═══════════════════════════════════════════════════════════ */

.da-page-shell {
    height: 100vh;
    background: var(--bg-main);
    overflow-y: auto;
}
.da-page-logo {
    position: fixed; top: 16px; left: 20px; z-index: 100;
    display: flex; align-items: center; gap: var(--sp-2);
    color: var(--text-primary);
}
.da-page-logo-icon {
    width: 28px; height: 28px; border-radius: var(--r-md);
    background: var(--accent); border: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; flex-shrink: 0;
}
.da-page-logo-text {
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}

.da-page-close {
    position: fixed; top: 16px; right: 16px; z-index: 100;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-hover); border: 1px solid var(--border-subtle);
    color: var(--text-muted); font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.da-page-close:hover { background: rgba(255,255,255,0.22); }

/* Hide close button when inside iframe (parent overlay provides its own) */
.da-in-iframe .da-page-close { display: none; }


/* ═══════════════════════════════════════════════════════════
   REVIEW CYCLES — Control detail
   ═══════════════════════════════════════════════════════════ */

/* Review cycle container */
.review-cycle { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-3); transition: border-color 0.15s; }
.review-cycle:hover { border-color: var(--border-mid); }
.review-cycle.current { border-color: var(--accent-border); }

/* Cycle header — clickable to expand/collapse */
.review-cycle-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: background 0.1s; }
.review-cycle-header:hover { background: var(--bg-hover); }
.review-cycle-chevron { font-size: 10px; color: var(--text-faint); transition: transform 0.15s; width: 14px; text-align: center; flex-shrink: 0; }
.review-cycle.expanded .review-cycle-chevron { transform: rotate(90deg); }
.review-cycle-info { flex: 1; min-width: 0; }
.review-cycle-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.review-cycle-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.review-cycle-status { flex-shrink: 0; }

/* Cycle body — hidden by default, shown when expanded */
.review-cycle-body { display: none; padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--border-subtle); }
.review-cycle.expanded .review-cycle-body { display: block; padding-top: var(--sp-4); }

/* Progress bar inside cycle */
.review-progress { margin-bottom: var(--sp-4); }
.review-progress-bar { height: 6px; background: var(--bg-overlay); border-radius: var(--r-full); overflow: hidden; }
.review-progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width 0.3s; }
.review-progress-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }

/* Checklist items inside a review cycle */
.review-checklist { display: flex; flex-direction: column; gap: var(--sp-1); }
.review-checklist-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); transition: background 0.1s; }
.review-checklist-item:hover { background: var(--bg-hover); }
.review-checklist-item.overdue { background: var(--red-bg); border-radius: var(--r-md); }

/* Check icon */
.review-check { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.review-check i { font-size: 15px; color: var(--text-faint); }
.review-checklist-item.completed .review-check i { color: var(--green); }
.review-checklist-item.overdue .review-check i { color: var(--red); }

/* Item text */
.review-checklist-body { flex: 1; min-width: 0; }
.review-checklist-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.review-checklist-item.completed .review-checklist-title { color: var(--text-muted); }
.review-checklist-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: var(--sp-2); }

/* Evidence section inside review cycle */
.review-evidence { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.review-evidence-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.review-evidence-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.review-evidence-add-btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 8px; border: none; border-radius: var(--r-md); background: transparent; font-family: inherit; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.review-evidence-add-btn:hover { color: var(--accent); background: var(--accent-bg); }
.review-evidence-add-btn i { font-size: 10px; }
.review-evidence-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1); font-size: var(--fs-sm); color: var(--text-secondary); border-radius: var(--r-md); cursor: pointer; transition: background 0.1s; }
.review-evidence-item:hover { background: var(--bg-hover); }
.review-evidence-item i { color: var(--text-faint); font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
.review-evidence-item span { flex: 1; }
.review-evidence-link { font-size: 10px !important; opacity: 0; transition: opacity 0.15s; }
.review-evidence-item:hover .review-evidence-link { opacity: 1; }
.review-evidence-upload { margin-top: var(--sp-2); }

/* Small inline avatar for checklist assignees */
.owner-avatar-sm { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-overlay); font-size: 8px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }

/* Clickable checklist items */
.review-checklist-item { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   REVIEW PANEL — Slide panel interior for review steps
   ═══════════════════════════════════════════════════════════ */

/* Step label */
.review-panel-step-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }

/* Title */
.review-panel-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: var(--sp-4); }

/* Guidance block */
.review-panel-guidance { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 0 var(--r-md) var(--r-md) 0; margin-bottom: var(--sp-6); }

/* Completion read-only state */
.review-panel-completed-banner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; color: var(--green); margin-bottom: var(--sp-6); }
.review-panel-completed-banner i { font-size: 14px; }

/* Form fields */
.review-panel-field { margin-bottom: var(--sp-5); }
.review-panel-field-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.review-panel-textarea { width: 100%; min-height: 100px; padding: var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary); background: var(--bg-base); line-height: 1.6; resize: vertical; transition: border-color 0.15s; }
.review-panel-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.review-panel-textarea::placeholder { color: var(--text-faint); }
.review-panel-textarea[readonly] { background: var(--bg-hover); border-color: var(--border-subtle); cursor: default; }

/* Evidence section */
.review-panel-evidence { margin-bottom: var(--sp-5); }
.review-panel-evidence-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.review-panel-evidence-file { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg-hover); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-secondary); }
.review-panel-evidence-file i { color: var(--text-faint); font-size: 14px; width: 16px; text-align: center; }
.review-panel-evidence-file span { flex: 1; }
.review-panel-evidence-file .remove-btn { color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 2px; border-radius: var(--r-sm); transition: color 0.1s; }
.review-panel-evidence-file .remove-btn:hover { color: var(--red); }
.review-panel-upload-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--border-mid); border-radius: var(--r-md); background: transparent; font-family: inherit; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.review-panel-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* Edit mode banner */
.review-panel-editing-banner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; color: var(--amber); margin-bottom: var(--sp-6); }
.review-panel-editing-banner i { font-size: 14px; }

/* Edit confirmation view */
.review-edit-confirm { display: flex; flex-direction: column; gap: var(--sp-5); }
.review-edit-confirm-section { }
.review-edit-confirm-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.review-edit-diff { padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.6; }
.review-edit-diff-original { background: var(--bg-hover); border: 1px solid var(--border-subtle); color: var(--text-muted); text-decoration: line-through; margin-bottom: var(--sp-2); }
.review-edit-diff-new { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--text-primary); }
.review-edit-notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.review-edit-notice i { color: var(--text-faint); margin-top: 2px; flex-shrink: 0; }

/* Outcome selection (1-click) */
.review-panel-outcome { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.review-panel-outcome-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-md); background: transparent; font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.review-panel-outcome-btn:hover { border-color: var(--text-faint); background: var(--bg-hover); }
.review-panel-outcome-btn i { font-size: 13px; }
.review-panel-outcome-btn.selected.passed { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.review-panel-outcome-btn.selected.failed { border-color: var(--red); background: rgba(220,50,50,0.06); color: var(--red); }
.review-panel-outcome-btn.selected.needs-action { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }
.dark-theme .review-panel-outcome-btn.selected.failed { background: rgba(220,80,80,0.12); }

/* Needs Action — additional fields (hidden by default) */
.needs-action-fields { display: none; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); animation: fadeSlideIn 0.2s ease; }
.needs-action-fields.visible { display: block; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Urgency toggle buttons */
.review-panel-urgency { display: flex; gap: var(--sp-2); }
.review-panel-urgency-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--border-mid); border-radius: var(--r-md); background: transparent; font-family: inherit; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.review-panel-urgency-btn:hover { border-color: var(--text-faint); background: var(--bg-hover); }
.review-panel-urgency-btn.selected.urgency-high { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.review-panel-urgency-btn.selected.urgency-medium { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }
.review-panel-urgency-btn.selected.urgency-low { border-color: var(--green); background: var(--green-bg); color: var(--green); }

/* Date input styling */
.review-panel-date { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary); background: var(--bg-base); transition: border-color 0.15s; }
.review-panel-date:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.dark-theme .review-panel-date { color-scheme: dark; }

/* Action-pending state for checklist items (amber, not green) */
.review-checklist-item.action-pending .review-check i { color: var(--amber); }
.review-checklist-item.action-pending .review-checklist-title { color: var(--text-secondary); }

/* Review record (completed view) */
.review-panel-record { margin-bottom: var(--sp-5); }
.review-panel-record-row { display: flex; align-items: baseline; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.review-panel-record-label { width: 100px; flex-shrink: 0; color: var(--text-faint); font-size: var(--fs-xs); }
.review-panel-record-value { color: var(--text-primary); }
.review-outcome-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 500; }
.review-outcome-badge.passed { color: var(--green); }
.review-outcome-badge.failed { color: var(--red); }
.review-outcome-badge.needs-action { color: var(--amber); }

/* Notes display (read-only) */
.review-panel-notes-display { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; padding: var(--sp-3); background: var(--bg-hover); border-radius: var(--r-md); }

/* Evidence hint */
.review-panel-evidence-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-1); font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   Suggested Evidence (.se-*)
   ═══════════════════════════════════════════════════════════ */
.se-block { margin: var(--sp-3) 0; padding: var(--sp-3); background: rgba(67,67,175,0.04); border: 1px solid rgba(67,67,175,0.12); border-radius: var(--r-md); }
.se-block--inline { margin-top: var(--sp-3); margin-bottom: 0; }
.se-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; }
.se-header i { font-size: 13px; }
.se-header-progress { margin-left: auto; font-weight: 500; color: var(--text-faint); }
.se-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Slot — each suggested evidence item */
.se-slot { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); transition: border-color 0.15s; }
.se-slot-top { display: flex; align-items: center; gap: var(--sp-2); }
.se-slot-icon { color: var(--accent); font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.se-slot-label { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.se-slot-actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.se-slot-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); font-family: inherit; font-size: 11px; color: var(--text-secondary); cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.se-slot-btn:hover { border-color: var(--accent); color: var(--accent); }
.se-slot-btn i { font-size: 10px; }
.se-slot-btn--dismiss { border-color: transparent; color: var(--text-faint); }
.se-slot-btn--dismiss:hover { border-color: transparent; color: var(--red); }

/* Fulfilled state */
.se-slot--fulfilled { border-color: var(--green); background: rgba(34,139,34,0.03); }
.se-slot--fulfilled .se-slot-icon { color: var(--green); }
.se-slot-linked { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-secondary); }
.se-slot-linked i { color: var(--green); font-size: 11px; }
.se-slot-linked-doc { color: var(--accent); cursor: pointer; }
.se-slot-linked-doc:hover { text-decoration: underline; }

/* Dismissed state */
.se-slot--dismissed { border-color: var(--border); background: var(--bg); opacity: 0.6; }
.se-slot--dismissed .se-slot-icon { color: var(--text-faint); }
.se-slot-dismiss-reason { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; }

/* All done */
.se-all-done { font-size: var(--fs-xs); color: var(--green); display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }

/* Additional evidence section */
.se-additional { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.se-additional-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.se-additional-header i { font-size: 12px; }
.se-additional-actions { display: flex; gap: var(--sp-2); }
.se-additional-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.se-additional-item i { font-size: 12px; color: var(--green); }

/* Dismiss panel form */
.se-dismiss-options { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.se-dismiss-option { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); color: var(--text-primary); transition: border-color 0.12s; }
.se-dismiss-option:hover { border-color: var(--accent); }
.se-dismiss-option.selected { border-color: var(--accent); background: rgba(67,67,175,0.04); }
.se-dismiss-option input[type="radio"] { accent-color: var(--accent); margin: 0; }
.se-dismiss-context { width: 100%; margin-top: var(--sp-2); }
.se-dismiss-audit-note { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: rgba(67,67,175,0.04); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-faint); }
.se-dismiss-audit-note i { color: var(--accent); font-size: 12px; }
.se-dismiss-inline { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-hover); }
.slide-panel .se-block { margin: 0; }
.slide-panel .se-header { padding: var(--sp-2) 0; }
.slide-panel .se-slot { padding: var(--sp-2) var(--sp-3); }

/* Footer button styles */
.review-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.review-panel-footer--left { justify-content: flex-start; }

/* Wizard progress segments */
.review-panel-progress { display: flex; gap: 3px; margin-bottom: var(--sp-5); }
.review-panel-progress-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--bg-overlay); transition: background 0.3s; }
.review-panel-progress-seg.completed { background: var(--accent); }
.review-panel-progress-seg.current { background: var(--accent); opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   EVIDENCE DETAIL PANEL
   ═══════════════════════════════════════════════════════════ */

/* File preview card */
.ev-file-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.ev-file-card--sm { padding: var(--sp-3); margin-bottom: 0; border-radius: var(--r-md); }
.ev-file-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--red-bg); color: var(--red); font-size: 18px; flex-shrink: 0; }
.ev-file-info { flex: 1; min-width: 0; }
.ev-file-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-file-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* Properties grid */
.ev-props { display: flex; flex-direction: column; }
.ev-prop-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.ev-prop-row:last-child { border-bottom: none; }
.ev-prop-label { color: var(--text-muted); }
.ev-prop-value { color: var(--text-primary); font-weight: 500; text-align: right; }

/* Linked items (compact) */
.ev-linked-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--text-secondary); }

/* Version history */
.ev-version-item { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; }
.ev-version-item + .ev-version-item { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); }
.ev-version-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ev-version-body { flex: 1; min-width: 0; }
.ev-version-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); display: flex; align-items: center; }
.ev-version-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.ev-version-note { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--sp-1); line-height: 1.5; }

/* Panel footer variant */
.ev-panel-footer { justify-content: flex-start; }

/* Replace version options */
.ev-replace-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.ev-replace-option { display: block; width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-mid); border-radius: var(--r-md); background: transparent; text-align: left; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.ev-replace-option:hover { border-color: var(--text-faint); background: var(--bg-hover); }
.ev-replace-option.selected { border-color: var(--accent); background: var(--accent-bg); }
.ev-replace-option-header { font-size: var(--fs-sm); color: var(--text-primary); margin-bottom: 2px; }
.ev-replace-option-header i { font-size: 12px; color: var(--text-muted); margin-right: var(--sp-1); }
.ev-replace-option.selected .ev-replace-option-header i { color: var(--accent); }
.ev-replace-option-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

/* Attach evidence row */
.ev-attach-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; transition: background 0.12s; }
.ev-attach-row:hover { background: var(--bg-hover); }
.ev-file-selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

/* Upload button file-selected state */
.review-panel-upload-btn.ev-file-selected { border-style: solid; border-color: var(--green-border); background: var(--green-bg); color: var(--green); }

/* Evidence pill selector */
.ev-pill-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--border-mid); background: transparent; cursor: pointer; transition: all 0.15s; font-family: inherit; color: var(--text-muted); }
.ev-pill:hover { border-color: var(--text-faint); background: var(--bg-hover); }
.ev-pill i { font-size: 10px; }
.ev-pill--accent.selected { background: rgba(67,67,175,0.10); color: #4343AF; border-color: #4343AF; }
.ev-pill--blue.selected   { background: rgba(37,99,235,0.10); color: #2563EB; border-color: #2563EB; }
.ev-pill--amber.selected  { background: rgba(217,119,6,0.10); color: #D97706; border-color: #D97706; }
.ev-pill--green.selected  { background: rgba(22,163,74,0.10); color: #16A34A; border-color: #16A34A; }
.ev-pill--red.selected    { background: rgba(220,38,38,0.10); color: #DC2626; border-color: #DC2626; }
.ev-pill--gray.selected   { background: var(--bg-overlay); color: var(--text-secondary); border-color: var(--text-faint); }

/* Evidence link section (collapsible) */
.ev-link-section { border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin-bottom: var(--sp-2); overflow: hidden; }
.ev-link-header { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: background 0.12s; }
.ev-link-header:hover { background: var(--bg-hover); }
.ev-link-header i.ev-link-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
.ev-link-header-label { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.ev-link-count { font-size: var(--fs-2xs); font-weight: 600; padding: 1px 7px; border-radius: var(--r-full); background: var(--accent-bg); color: var(--accent); }
.ev-link-chevron { font-size: 10px; color: var(--text-faint); transition: transform 0.2s; }
.ev-link-header.open .ev-link-chevron { transform: rotate(90deg); }
.ev-link-body { display: none; padding: 0 var(--sp-4) var(--sp-3); border-top: 1px solid var(--border-subtle); }
.ev-link-body.open { display: block; }
.ev-link-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.ev-link-row label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; flex: 1; }

/* Archive warning */
.ev-archive-warning { padding: var(--sp-3) var(--sp-4); background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--red); margin-bottom: var(--sp-4); display: flex; align-items: flex-start; gap: var(--sp-2); }
.ev-archive-warning i { margin-top: 2px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   RISK VECTOR BADGES
   ═══════════════════════════════════════════════════════════ */
.badge-vector { font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-full); font-weight: 500; white-space: nowrap; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-subtle); }

/* ═══════════════════════════════════════════════════════════
   LINKED SECTION — Vector Sub-group Headers
   ═══════════════════════════════════════════════════════════ */
.linked-subgroup { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: var(--sp-2) 0 var(--sp-1); margin-top: var(--sp-2); }
.linked-subgroup:first-child { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════
   OWNER FIELD — Properties sidebar
   ═══════════════════════════════════════════════════════════ */
.owner-field { display: flex; align-items: center; gap: var(--sp-2); }
.owner-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-2xs); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.owner-name { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.owner-role { font-size: var(--fs-xs); color: var(--text-muted); }
.owner-secondary { margin-top: var(--sp-2); }
.owner-secondary-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.owner-secondary-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.owner-secondary-item { display: flex; align-items: center; gap: var(--sp-2); }
.owner-secondary-item .owner-avatar { width: 20px; height: 20px; font-size: 9px; background: var(--bg-subtle); color: var(--text-muted); }
.owner-secondary-item .owner-name { font-size: var(--fs-xs); font-weight: 400; color: var(--text-secondary); }
.owner-add-btn { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--accent); cursor: pointer; margin-top: var(--sp-2); background: none; border: none; padding: 0; font-family: inherit; }
.owner-add-btn:hover { text-decoration: underline; }

/* ── Owners block (Phase 1: primary + secondary stack + Manage button) ── */
.prop-row--owners { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.prop-value--owners { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; text-align: left; }
.owner-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--r-sm);
    vertical-align: middle;
}
.owner-secondary-stack {
    display: flex;
    align-items: center;
    margin-left: 32px; /* indent under primary avatar */
}
.owner-secondary-stack .owner-avatar--sm {
    width: 20px; height: 20px; font-size: 9px;
    margin-left: -4px; /* overlap effect */
    border: 2px solid var(--bg-raised);
}
.owner-avatar--secondary { background: var(--bg-base); color: var(--text-muted); }
/* Legacy class — kept as alias for the shared .prop-action-btn so existing
   markup doesn't need to be retouched. New surfaces should use
   .prop-action-btn directly. */
.owner-manage-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.owner-manage-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-base); }
.owner-manage-btn i { font-size: 10px; }

/* ── Owner picker slide panel (Phase 1) ── */
.own-systemtag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}
.own-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-faint);
    margin-bottom: var(--sp-2);
}
.own-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--bg-base);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}
.own-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.own-row:last-child { border-bottom: none; }
.own-row-body { flex: 1; min-width: 0; }
.own-row-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.own-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.own-row--empty { color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; padding: var(--sp-2) 0; }
.own-empty { color: var(--text-muted); font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.own-remove-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    font-size: 14px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.own-remove-btn:hover { background: var(--bg-base); color: var(--red); border-color: var(--red); }

.own-picker-results {
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
}
.own-picker-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.1s;
}
.own-picker-row:last-child { border-bottom: none; }
.own-picker-row:hover { background: var(--bg-hover); }
.own-picker-name { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.own-picker-email { font-size: 11px; color: var(--text-muted); }
.own-picker-add { font-size: 11px; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
.own-picker-empty { padding: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.own-picker-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.own-readonly-hint {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3);
    background: var(--bg-base);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.55;
}
.own-readonly-hint i { margin-right: 4px; color: var(--text-faint); }
.own-error {
    margin: var(--sp-3) var(--sp-4);
    padding: 8px 10px;
    background: var(--bg-base);
    border-left: 3px solid var(--red);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-xs);
    color: var(--red);
}


/* ═══════════════════════════════════════════════════════════
   REVIEW SCHEDULE — Properties sidebar
   ═══════════════════════════════════════════════════════════ */
.review-schedule { font-size: var(--fs-sm); color: var(--text-secondary); }
.review-schedule-cadence { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }


/* ═══════════════════════════════════════════════════════════
   AI-SUGGESTED BADGE
   ═══════════════════════════════════════════════════════════ */
.badge-ai-suggested { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 500; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); padding: 1px 8px; border-radius: var(--r-full); white-space: nowrap; }
.badge-ai-suggested i { font-size: 9px; }


/* ═══════════════════════════════════════════════════════════
   SMART DEFAULTS BANNER
   ═══════════════════════════════════════════════════════════ */
.smart-defaults-banner { display: flex; align-items: center; gap: var(--sp-3); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--accent); }
.smart-defaults-banner i { font-size: 14px; flex-shrink: 0; }
.smart-defaults-banner-text { flex: 1; }
.smart-defaults-banner-dismiss { background: none; border: none; color: var(--accent); opacity: 0.6; cursor: pointer; padding: 4px; border-radius: var(--r-sm); font-size: 12px; }
.smart-defaults-banner-dismiss:hover { opacity: 1; background: rgba(67, 67, 175, 0.1); }


/* ═══════════════════════════════════════════════════════════
   TEAM SWITCHER — Topbar
   ═══════════════════════════════════════════════════════════ */
.team-switcher { position: relative; }
.team-switcher-btn { display: flex; align-items: center; gap: var(--sp-2); background: none; border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 5px var(--sp-3); font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, background 0.1s; }
.team-switcher-btn:hover { border-color: var(--border-mid); background: var(--bg-hover); }
.team-switcher-btn i:first-child { font-size: 12px; color: var(--text-faint); }
.team-switcher-btn i:last-child { font-size: 9px; color: var(--text-faint); }
.team-switcher-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 180px; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-1) 0; z-index: 2000; }
.team-switcher-dropdown.open { display: block; }
.team-switcher-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; transition: background 0.05s; }
.team-switcher-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.team-switcher-item.active { color: var(--accent); font-weight: 500; }
.team-switcher-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-mid); }
.team-switcher-item.active .team-switcher-dot { background: var(--accent); }


/* ═══════════════════════════════════════════════════════════
   TOPBAR CTA BUTTON (Do Anything)
   ═══════════════════════════════════════════════════════════ */
.topbar-cta { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--accent); color: var(--white); border: 1px solid var(--accent); border-radius: var(--r-md); padding: 6px var(--sp-4); font-family: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; white-space: nowrap; }
.topbar-cta:hover { background: var(--accent-muted); border-color: var(--accent-muted); color: var(--white); }
.topbar-cta i { font-size: 11px; }


/* ═══════════════════════════════════════════════════════════
   SETTINGS — Page-specific styles
   ═══════════════════════════════════════════════════════════ */

/* Settings sections */
.settings-section { margin-bottom: var(--sp-8); }
.settings-section-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-1); }
.settings-section-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); line-height: 1.5; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

/* User avatar & cell */
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: 600; flex-shrink: 0; }
.user-cell { display: flex; align-items: center; gap: var(--sp-3); }
.user-cell-name { font-weight: 500; color: var(--text-primary); }

/* Team usage bar */
.team-usage-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.team-usage-info { display: flex; align-items: center; gap: var(--sp-4); }
.team-usage-stat { display: flex; align-items: baseline; gap: var(--sp-2); }
.team-usage-label { font-size: var(--fs-sm); color: var(--text-muted); }
.team-usage-value { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.team-usage-actions { display: flex; gap: var(--sp-2); }

/* Team accordion */
.team-accordion { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; background: var(--bg-raised); }
.team-accordion-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; transition: background 0.15s; }
.team-accordion-header:hover { background: var(--bg-hover); }
.team-accordion-toggle { flex-shrink: 0; width: 16px; display: flex; align-items: center; justify-content: center; }
.team-accordion-icon { font-size: 10px; color: var(--text-muted); transition: transform 0.2s ease; }
.team-accordion.open .team-accordion-icon { transform: rotate(90deg); }
.team-accordion-name { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); flex: 1; }
.team-accordion-stats { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.team-accordion-body { display: none; border-top: 1px solid var(--border-subtle); }
.team-accordion.open .team-accordion-body { display: block; }

/* Billing progress bar (reused for usage bar) */
.billing-progress-bar { height: 4px; background: var(--bg-overlay); border-radius: 2px; overflow: hidden; }
.billing-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; }

/* Integration cards */
.integration-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.integration-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.integration-card-header { display: flex; align-items: center; gap: var(--sp-3); }
.integration-card-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.integration-card-name { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); }
.integration-card-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.integration-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* Notification toggles */
.notification-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); }
.notification-row:last-child { border-bottom: none; }
.notification-label { font-size: var(--fs-sm); color: var(--text-primary); }
.notification-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.notification-toggle { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }


/* ═══════════════════════════════════════════════════════════
   AUDIT TRAIL
   ═══════════════════════════════════════════════════════════ */
.gap-alert { background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-3); }
.gap-alert-icon { color: var(--amber); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.gap-alert-body { flex: 1; }
.gap-alert-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.gap-alert-desc { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.gap-alert .btn { flex-shrink: 0; align-self: center; }

.badge-check { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border); }
.badge-change { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge-decision { background: rgba(155, 106, 235, 0.12); color: #9B6AEB; border: 1px solid rgba(155, 106, 235, 0.3); }
.dark-theme .badge-decision { background: rgba(155, 106, 235, 0.15); color: #B88AFF; border: 1px solid rgba(155, 106, 235, 0.35); }
.badge-document { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge-system { background: rgba(142, 142, 160, 0.08); color: var(--text-muted); border: 1px solid var(--border-mid); }

/* ═══════════════════════════════════════════════════════════
   PROFILE — Page-specific styles
   ═══════════════════════════════════════════════════════════ */

/* Profile header */
.profile-header { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-bg); border: 2px solid var(--accent-border); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); font-weight: 700; flex-shrink: 0; }
.profile-header-info { flex: 1; min-width: 0; }
.profile-name { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.profile-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }


/* ═══════════════════════════════════════════════════════════
   DECLARATION / PUBLIC PAGE
   ═══════════════════════════════════════════════════════════ */
.public-page { min-height: 100vh; background: var(--bg-main); display: flex; flex-direction: column; align-items: center; padding: var(--sp-8) var(--sp-4); }
.public-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.public-header-logo { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 16px; }
.public-header-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.public-container { width: 100%; max-width: 640px; }

/* Wizard */
.wizard-progress { display: flex; gap: 4px; margin-bottom: var(--sp-10); }
.wizard-progress-segment { flex: 1; height: 3px; border-radius: 2px; background: var(--bg-overlay); transition: background 0.3s ease; }
.wizard-progress-segment.completed { background: var(--accent); }
.wizard-progress-segment.current { background: var(--accent); opacity: 0.6; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: wizardFadeIn 0.25s ease-out; }
@keyframes wizardFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wizard-step-label { font-size: var(--fs-2xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: var(--sp-3); }
.wizard-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: var(--sp-2); }
.wizard-subtitle { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--sp-8); }
.wizard-actions { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); margin-top: var(--sp-8); }
.wizard-actions-right { margin-left: auto; }

/* Check card grid */
.check-card-grid { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.check-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.check-card:hover { border-color: var(--border-mid); }
.check-card.selected { border-color: var(--accent); background: var(--accent-bg); }
.check-card-check { width: 20px; height: 20px; border-radius: var(--r-sm); border: 2px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; transition: all 0.15s; flex-shrink: 0; }
.check-card.selected .check-card-check { background: var(--accent); border-color: var(--accent); color: white; }
.check-card-label { font-size: var(--fs-sm); color: var(--text-primary); }
.check-card-icon { width: 16px; text-align: center; font-size: 12px; color: var(--text-faint); flex-shrink: 0; }

/* Check-card colour variants (amber) */
.check-card--amber.selected { border-color: var(--amber); background: rgba(217, 158, 46, 0.08); }
.check-card--amber.selected .check-card-check { background: var(--amber); border-color: var(--amber); }
.check-card--amber.selected .check-card-icon { color: var(--amber); }

/* Check-card colour variants (red) */
.check-card--red.selected { border-color: var(--red); background: rgba(200, 60, 60, 0.08); }
.check-card--red.selected .check-card-check { background: var(--red); border-color: var(--red); }
.check-card--red.selected .check-card-icon { color: var(--red); }

/* Check-card colour variants (accent — default, but explicit for icon) */
.check-card.selected .check-card-icon { color: var(--accent); }

/* Declaration sections */
.decl-section-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-3); margin-top: var(--sp-6); }
.decl-section-label:first-child { margin-top: 0; }

/* Review summary */
.review-section { margin-bottom: var(--sp-6); }
.review-section-title { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
.review-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.review-label { color: var(--text-muted); }
.review-value { color: var(--text-primary); font-weight: 500; text-align: right; max-width: 360px; }

/* Confirmation */
.confirm-checkbox { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-top: var(--sp-6); cursor: pointer; }
.confirm-checkbox input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); }
.confirm-checkbox-label { font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.5; }

.decl-complete { text-align: center; padding: var(--sp-8) 0; }
.decl-complete-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--green-bg); border: 1px solid var(--green-border); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: var(--green); margin-bottom: var(--sp-6); }


/* ═══════════════════════════════════════════════════════════
   DOCUMENTATION
   ═══════════════════════════════════════════════════════════ */

/* Intro text */
.doc-intro { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-6); }
.doc-intro p { margin-bottom: var(--sp-3); }
.doc-intro p:last-child { margin-bottom: 0; }
.doc-intro strong { color: var(--text-primary); font-weight: 600; }

/* Signal groups */
.doc-group { margin-bottom: var(--sp-8); }
.doc-group-header { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-5); }
.doc-group-number { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-bg); color: var(--accent); font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-group-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.doc-group-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* Individual signals */
.doc-signal { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; }
.doc-signal-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.doc-signal-number { width: 24px; height: 24px; border-radius: 50%; background: var(--text-primary); color: var(--bg-base); font-size: var(--fs-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-signal-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }
.doc-signal-body { padding: 0 var(--sp-4) var(--sp-4); }
.doc-signal-body p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-3); }
.doc-signal-body p:last-child { margin-bottom: 0; }
.doc-signal-body strong { color: var(--text-primary); font-weight: 600; }

/* Signal example/alert box */
.doc-signal-example { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; color: var(--amber); margin-bottom: var(--sp-3); }
.doc-signal-example i { font-size: 14px; flex-shrink: 0; }

/* Why it matters box */
.doc-signal-why { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-top: var(--sp-3); }
.doc-signal-why strong { color: var(--accent); }

/* Lists */
.doc-list { padding-left: var(--sp-5); margin: var(--sp-2) 0 var(--sp-3); }
.doc-list li { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; padding: 2px 0; }

/* Principle cards (do/don't) */
.doc-principle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.doc-principle-dont, .doc-principle-do { padding: var(--sp-4); border-radius: var(--r-lg); }
.doc-principle-dont { background: var(--red-bg); border: 1px solid var(--red-border); }
.doc-principle-do { background: var(--green-bg); border: 1px solid var(--green-border); }
.doc-principle-label { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.doc-principle-dont .doc-principle-label { color: var(--red); }
.doc-principle-do .doc-principle-label { color: var(--green); }
.doc-principle-dont .doc-list li { color: var(--text-primary); }
.doc-principle-example { display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-principle-example .doc-signal-example { margin-bottom: 0; font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }
.doc-callout { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; padding: var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.doc-callout strong { color: var(--text-primary); }

/* Concept cards */
.doc-concept { display: flex; gap: var(--sp-4); padding: var(--sp-4); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-3); }
.doc-concept-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.doc-concept-body { flex: 1; }
.doc-concept-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-1); }
.doc-concept-body p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Entity flow diagram */
.doc-diagram { padding: var(--sp-5); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-top: var(--sp-6); }
.doc-diagram-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-4); text-align: center; }
.doc-diagram-flow { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.doc-diagram-node { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-base); font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.doc-diagram-node i { color: var(--text-muted); }
.doc-diagram-node-risk { border-color: var(--red-border); background: var(--red-bg); }
.doc-diagram-node-risk i { color: var(--red); }
.doc-diagram-node-control { border-color: var(--accent-border); background: var(--accent-bg); }
.doc-diagram-node-control i { color: var(--accent); }
.doc-diagram-node-evidence { border-color: var(--border-mid); }
.doc-diagram-arrow { color: var(--text-faint); font-size: 12px; }

/* Workflow sections */
.doc-workflow { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.doc-workflow-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.doc-workflow-title i { color: var(--accent); font-size: 14px; }
.doc-steps { padding-left: var(--sp-5); margin: 0; }
.doc-steps li { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; padding: 3px 0; }
.doc-steps li strong { color: var(--text-primary); font-weight: 600; }

/* Documentation sidebar nav */
.doc-nav { display: flex; flex-direction: column; gap: 1px; }
.doc-nav-item { display: block; padding: 5px var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); border-radius: var(--r-sm); transition: color 0.1s, background 0.1s; }
.doc-nav-item:hover { color: var(--text-primary); background: var(--bg-hover); }
.doc-nav-group { font-weight: 600; color: var(--text-secondary); margin-top: var(--sp-2); }
.doc-nav-group:first-child { margin-top: 0; }

/* ── Incident Detail ── */
.inc-action-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); }
.inc-action-row:last-child { border-bottom: none; }
.inc-action-status { flex-shrink: 0; }
.inc-action-body { flex: 1; min-width: 0; }
.inc-action-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.inc-action-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.inc-suggest-item { padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); transition: border-color 0.15s; }
.inc-suggest-item:hover { border-color: var(--border-mid); }

/* Signal badge */
.badge-signal { background: var(--accent-bg); color: var(--accent); }

/* ── Panel Toggle Buttons ── */
.panel-toggle-group { display: flex; border: 1px solid var(--border-mid); border-radius: var(--r-md); overflow: hidden; }
.panel-toggle-btn { flex: 1; padding: 7px 0; font-size: var(--fs-xs); font-weight: 500; font-family: inherit; border: none; border-right: 1px solid var(--border-mid); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; text-align: center; }
.panel-toggle-btn:last-child { border-right: none; }
.panel-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.panel-toggle-btn.selected.t-red { background: var(--red-bg); color: var(--red); }
.panel-toggle-btn.selected.t-amber { background: var(--amber-bg); color: var(--amber); }
.panel-toggle-btn.selected.t-green { background: var(--green-bg); color: var(--green); }
.panel-toggle-btn.selected.t-blue { background: var(--blue-bg); color: var(--blue); }
.panel-toggle-btn.selected.t-accent { background: var(--accent-bg); color: var(--accent); }
.panel-toggle-btn.selected.t-muted { background: var(--bg-hover); color: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════════
   IC (Individual Contributor) PAGES
   ═══════════════════════════════════════════════════════════ */

/* Greeting */
.ic-greeting { margin-bottom: var(--sp-6); }
.ic-greeting-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.ic-greeting-sub { font-size: var(--fs-base); color: var(--text-muted); margin-top: var(--sp-1); }

/* Metric cards (3-col grid) */
.ic-metric-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-8); }
.ic-metric-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); transition: border-color 0.15s; }
.ic-metric-card:hover { border-color: var(--border-mid); }
.ic-metric-card-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: var(--sp-1); }
.ic-metric-card-label { font-size: var(--fs-xs); color: var(--text-muted); }

/* Section headers */
.ic-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.ic-section-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }

/* IC task rows */
.ic-task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); cursor: pointer; transition: background 0.1s; border-radius: var(--r-md); margin: 0 calc(-1 * var(--sp-3)); }
.ic-task:hover { background: var(--bg-hover); }
.ic-task:hover .ic-task-name { color: var(--accent); }
.ic-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ic-task-body { flex: 1; min-width: 0; }
.ic-task-name { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); line-height: 1.4; transition: color 0.1s; }
.ic-task-entity { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.ic-task-due { font-size: var(--fs-xs); color: var(--text-faint); flex-shrink: 0; text-align: right; min-width: 80px; }
.ic-task-due.overdue { color: var(--red); font-weight: 500; }
.ic-task-due.soon { color: var(--amber); }
.ic-task-chevron { color: var(--text-faint); font-size: 11px; opacity: 0; transition: opacity 0.1s; flex-shrink: 0; }
.ic-task:hover .ic-task-chevron { opacity: 1; }

/* IC completed items */
.ic-completed-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); margin: 0 calc(-1 * var(--sp-3)); border-radius: var(--r-md); }
.ic-completed-check { width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; flex-shrink: 0; opacity: 0.6; }
.ic-completed-name { font-size: var(--fs-sm); color: var(--text-faint); flex: 1; }
.ic-completed-date { font-size: var(--fs-xs); color: var(--text-faint); }

/* IC quick actions */
.ic-quick-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.ic-quick-actions .btn { padding: 10px 20px; }

/* IC sidebar view-only label */
.sidebar-view-label { font-size: var(--fs-2xs); color: var(--text-faint); margin-left: auto; }

/* ── Toast Notifications ── */
/* Reusable confirm modal */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: none; align-items: center; justify-content: center; padding: var(--sp-4);
}
.confirm-overlay.open { display: flex; }
.confirm-modal {
    background: var(--bg-base); border: 1px solid var(--border-mid);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.18));
    width: 100%; max-width: 420px; padding: var(--sp-5);
}
.confirm-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-2); }
.confirm-message { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; }
.confirm-input-wrap { margin-top: var(--sp-4); }
.confirm-input-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.confirm-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-sm); padding: 8px 10px; border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-base); color: var(--text-primary); resize: vertical; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }

.toast-container {
    position: fixed; bottom: var(--sp-5); right: var(--sp-5);
    display: flex; flex-direction: column-reverse; gap: var(--sp-2);
    z-index: 9999; pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
    background: var(--bg-raised); border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500;
    pointer-events: auto; min-width: 280px; max-width: 420px;
    transform: translateX(120%); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.toast.visible { transform: translateX(0); opacity: 1; }
.toast.removing { transform: translateX(120%); opacity: 0; }
.toast-icon { font-size: 14px; flex-shrink: 0; }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 2px; font-size: 12px; flex-shrink: 0; transition: color 0.15s;
}
.toast-close:hover { color: var(--text-primary); }
.toast.toast-success { border-left: 3px solid var(--green); }
.toast.toast-success .toast-icon { color: var(--green); }
.toast.toast-error { border-left: 3px solid var(--red); }
.toast.toast-error .toast-icon { color: var(--red); }
.toast.toast-warning { border-left: 3px solid var(--amber); }
.toast.toast-warning .toast-icon { color: var(--amber); }
.toast.toast-info { border-left: 3px solid var(--accent); }
.toast.toast-info .toast-icon { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD V4 (dash-*)
   Stacked sections with accordion, right rail, blocking
   ═══════════════════════════════════════════════════════════ */

/* Layout */
.dash-layout { display: flex; gap: 0; min-height: calc(100vh - 48px); }
.dash-main { flex: 1; padding: var(--sp-6) var(--sp-8); min-width: 0; overflow-y: auto; }
.dash-rail { width: 280px; flex-shrink: 0; border-left: 1px solid var(--border-subtle); background: var(--bg-sidebar); padding: var(--sp-6); overflow-y: auto; }
@media (max-width: 900px) { .dash-layout { flex-direction: column; } .dash-rail { width: 100%; border-left: none; border-top: 1px solid var(--border-subtle); } }

/* Hero */
.dash-hero { margin-bottom: var(--sp-6); }
.dash-hero-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: var(--sp-1); }
.dash-hero-sub { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.dash-hero-sub strong { color: var(--text-primary); font-weight: 600; }

/* Filter chips */
.dash-filters { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.dash-chip { padding: 5px 14px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--border-subtle); background: var(--bg-raised); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; }
.dash-chip:hover { border-color: var(--accent); color: var(--accent); }
.dash-chip--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Dots */
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-dot--red { background: #D44040; }
.dash-dot--amber { background: #D97706; }
.dash-dot--blue { background: #4343AF; }

/* Sections */
.dash-section { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); margin-bottom: var(--sp-4); overflow: hidden; }
.dash-section-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; transition: background 0.15s; user-select: none; }
.dash-section-header:hover { background: var(--bg-hover); }
.dash-section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.dash-section-count { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); margin-left: auto; }
.dash-section-chevron { font-size: 11px; color: var(--text-faint); transition: transform 0.2s; margin-left: var(--sp-2); }
.dash-section.collapsed .dash-section-chevron { transform: rotate(-90deg); }
.dash-section.collapsed .dash-section-items { display: none; }

/* Items */
.dash-section-items { border-top: 1px solid var(--border-subtle); }
.dash-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); cursor: pointer; transition: background 0.15s; }
.dash-item:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
.dash-item:hover { background: var(--bg-hover); }
.dash-item-body { flex: 1; min-width: 0; }
.dash-item-action { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; margin-bottom: 2px; }
.dash-item-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-faint); flex-wrap: wrap; }
.dash-item-arrow { font-size: 10px; color: var(--text-faint); opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.dash-item:hover .dash-item-arrow { opacity: 1; }
.dash-viewall { display: block; text-align: center; padding: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); text-decoration: none; border-top: 1px solid var(--border-subtle); transition: background 0.15s; }
.dash-viewall:hover { background: var(--bg-hover); }

/* Review items lighter weight */
.dash-section[data-state="review"] .dash-item-action { font-weight: 500; color: var(--text-secondary); }
/* Stable items muted */
.dash-section[data-state="stable"] .dash-item-action { font-weight: 400; color: var(--text-muted); }

/* Principle chips */
.dash-principle-chip { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); color: var(--text-muted); background: var(--bg-raised); }

/* Person links */
.dash-person-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.dash-person-link:hover { text-decoration: underline; }

/* Blocking section */
.dash-blocking { margin-top: var(--sp-6); padding: var(--sp-5); background: rgba(196, 112, 75, 0.04); border: 1px solid rgba(196, 112, 75, 0.15); border-radius: var(--r-xl); }
.dash-blocking-header { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: #C4704B; margin-bottom: var(--sp-4); }
.dash-blocking-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); font-size: var(--fs-sm); cursor: pointer; border-radius: var(--r-md); transition: background 0.15s; margin: 0 calc(-1 * var(--sp-3)); }
.dash-blocking-item:hover { background: rgba(196, 112, 75, 0.06); }
.dash-blocking-item:not(:last-child) { border-bottom: 1px solid rgba(196, 112, 75, 0.1); }
.dash-blocking-arrow { font-size: 10px; color: var(--text-faint); opacity: 0; transition: opacity 0.15s; margin-left: auto; flex-shrink: 0; }
.dash-blocking-item:hover .dash-blocking-arrow { opacity: 1; }
.dash-blocking-action { font-weight: 600; color: var(--text-primary); }
.dash-blocking-person { color: var(--text-muted); font-size: var(--fs-xs); }
.dash-blocking-viewall { display: block; text-align: center; margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); text-decoration: none; }
.dash-blocking-viewall:hover { text-decoration: underline; }

/* Right Rail */
.dash-rail > * + * { margin-top: var(--sp-5); }

/* Summary link */
.dash-summary-link { display: flex; align-items: center; gap: var(--sp-2); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.dash-summary-link:hover { background: rgba(67,67,175,0.12); }

/* Rail section */
.dash-rail-section { }
.dash-rail-title { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }

/* Health rows */
.dash-health-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0; }
.dash-health-name { font-size: var(--fs-xs); color: var(--text-secondary); }
.dash-trend { font-size: 11px; font-weight: 600; }
.dash-trend--up { color: var(--accent); }
.dash-trend--down { color: #D44040; }
.dash-trend--flat { color: var(--text-faint); }

/* Portfolio rows */
.dash-portfolio-row { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; }
.dash-portfolio-count { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); min-width: 24px; }
.dash-portfolio-label { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.dash-portfolio-flag { font-size: var(--fs-2xs); color: var(--accent); text-decoration: none; cursor: pointer; font-weight: 500; }
.dash-portfolio-flag:hover { color: var(--accent-muted); }

/* Quick links */
.dash-qlink { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-xs); color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s; }
.dash-qlink:hover { color: var(--accent); }
.dash-qlink i { font-size: 11px; color: var(--text-faint); width: 16px; text-align: center; }
.dash-qlink--concern { color: #D44040; }
.dash-qlink--concern:hover { color: #B33535; }
.dash-qlink--concern i { color: #D44040; }

/* Governance Summary panel */
.gs-panel-date { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: 6px; }
.gs-paragraph { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.65; margin: 0 0 var(--sp-3) 0; }
.gs-paragraph:last-of-type { margin-bottom: var(--sp-4); }
.gs-paragraph strong { color: var(--text-primary); font-weight: 600; }
.gs-paragraph em { color: var(--text-muted); }
.gs-insight { background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.gs-insight-label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 6px; }
.gs-insight-label i { font-size: 13px; }
.gs-insight-text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; }
.gs-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gs-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-md); font-family: 'Inter', sans-serif; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border-mid); cursor: pointer; transition: all 0.15s; }
.gs-action-btn:hover { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-strong); }
.gs-action-btn i { font-size: var(--fs-2xs); }
.gs-disclaimer { margin-top: var(--sp-4); padding: var(--sp-3); font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; }
.gs-disclaimer i { margin-top: 1px; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════
   ACTION REQUIRED — Panel & Card Styles (ar-panel-*, ar-override-*)
   ═══════════════════════════════════════════════════════════ */
.ar-panel-entity { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-base); color: var(--text-primary); padding: var(--sp-3); background: var(--bg-overlay); border-radius: var(--r-md); border: 1px solid var(--border-subtle); }
.ar-panel-guidance { font-size: var(--fs-sm); color: var(--text-secondary); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-md); padding: var(--sp-3); }
.ar-panel-alert { font-size: var(--fs-sm); color: var(--red); background: var(--red-bg, #FEF2F2); border: 1px solid var(--red-border, #FECACA); border-radius: var(--r-md); padding: var(--sp-3); }
.ar-panel-alert i { margin-right: 6px; }
.ar-panel-info { font-size: var(--fs-sm); color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-md); padding: var(--sp-3); }

/* Guided "add controls for a risk" panel */
.gcp-group { margin: var(--sp-4) 0; }
.gcp-group-h { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-transform: none; margin-bottom: var(--sp-2); }
.gcp-row { display: flex; align-items: flex-start; gap: 10px; padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin-bottom: var(--sp-2); cursor: pointer; }
.gcp-row:hover { border-color: var(--border-mid); }
.gcp-row input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.gcp-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcp-row-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.gcp-row-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.gcp-row--add { align-items: center; justify-content: space-between; cursor: default; }
.gcp-row--add .gcp-add-btn { flex-shrink: 0; margin-left: var(--sp-3); }
.gcp-row--added { border-color: var(--green-border, #BBF7D0); background: var(--green-bg, #F0FDF4); }
.gcp-other { margin: var(--sp-4) 0; }
.gcp-other .gcp-row { margin-top: var(--sp-2); }
.gcp-novel { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: var(--sp-3); padding: var(--sp-3); background: none; border: 1px dashed var(--border-mid); border-radius: var(--r-md); color: var(--accent); font-family: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.gcp-novel:hover { background: var(--accent-bg); border-color: var(--accent-border); }
.ar-panel-info i { margin-right: 6px; }
.ar-panel-upload { border: 2px dashed var(--border-mid); border-radius: var(--r-lg); padding: var(--sp-5); text-align: center; color: var(--text-faint); font-size: var(--fs-sm); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ar-panel-upload:hover { border-color: var(--accent); background: var(--accent-bg); }

.ar-override-banner { background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.ar-override-text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--sp-3); }
.ar-override-actions { display: flex; gap: var(--sp-2); }
.ar-override-locked { opacity: 0.4; pointer-events: none; user-select: none; transition: opacity 0.3s; }

/* Clickable summary cards (action-required page) */
.summary-card-clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.summary-card-clickable:hover { border-color: var(--accent); }
.summary-card-clickable.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }


/* ═══════════════════════════════════════════════════════════
   LIST PAGES — Table Pills (use-cases, risks, etc.)
   ═══════════════════════════════════════════════════════════ */
.table-risk-pills, .table-control-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.table-risk-pill {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif;
    padding: 2px 8px; border-radius: var(--r-full);
    background: var(--amber-bg); color: var(--amber);
    white-space: nowrap; line-height: 1.5;
}
.table-control-pill {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif;
    padding: 2px 8px; border-radius: var(--r-full);
    background: var(--green-bg); color: var(--green);
    white-space: nowrap; line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   DETAIL PAGES — Governance Health Scorecard (gh-*)
   ═══════════════════════════════════════════════════════════ */
.gh-scorecard { margin-top: var(--sp-2); margin-bottom: var(--sp-6); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.gh-header { padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); }
.gh-header-left { display: flex; align-items: center; gap: var(--sp-3); }

/* ── Governance Health — 4 summary cards at the top of the tab ─────────
   Big bold values, small uppercase labels above them. */
.gh-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);
}
@media (max-width: 1100px) { .gh-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gh-summary-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.15s;
}
.gh-summary-card:hover { border-color: var(--border-mid); }
.gh-summary-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--sp-2);
}
.gh-summary-card-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.gh-summary-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.gh-summary-card-value--date { font-size: 22px; }
.gh-summary-card-secondary {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
}
.gh-summary-card-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-full);
    vertical-align: middle;
}
.gh-summary-card-badge--attention { background: rgba(212, 64, 64, 0.08); color: var(--red); }
.gh-summary-card-badge--review    { background: rgba(217, 119, 6, 0.08); color: var(--amber); }
.gh-summary-card-badge--healthy   { background: rgba(26, 143, 50, 0.08); color: var(--green); }
.gh-header-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.gh-pct { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); background: var(--bg-subtle); padding: 2px 8px; border-radius: var(--r-sm); font-family: 'Inter', monospace; }
.gh-health-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); }
.gh-health-badge--ok { background: rgba(67,67,175,0.08); color: var(--accent); }
.gh-health-badge--attention { background: rgba(212,64,64,0.08); color: var(--red); }
.gh-health-badge--review { background: rgba(217,119,6,0.08); color: var(--amber); }
.gh-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.15s; text-decoration: none; color: inherit; }
.gh-row:last-child { border-bottom: none; }
.gh-row:hover { background: var(--bg-hover); }
.gh-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gh-dot--red { background: var(--red); }
.gh-dot--amber { background: var(--amber); }
.gh-dot--blue { background: var(--accent); }
.gh-row-label { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.gh-row-status { font-size: var(--fs-xs); color: var(--text-muted); }
.gh-row-arrow { font-size: 10px; color: var(--text-faint); opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.gh-row:hover .gh-row-arrow { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   CONTROL DETAIL — Review Workflow (rv-*, rl-*, review-status-*)
   ═══════════════════════════════════════════════════════════ */

/* Entity header: inline metadata */
.entity-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px;
}
.entity-meta-row .badge { font-size: 11px; }
.entity-meta-sep { color: var(--border-mid); }
.entity-owner-inline { display: inline-flex; align-items: center; gap: 6px; }
.entity-owner-inline .owner-avatar-sm { width: 20px; height: 20px; font-size: 9px; background: var(--accent-bg); color: var(--accent); }

/* Review status section */
.review-status {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 24px; background: var(--bg-raised); border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg); margin-bottom: var(--sp-6);
}
.review-status-icon {
    width: 44px; height: 44px; border-radius: var(--r-lg); display: flex;
    align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.review-status-icon.in-progress { background: var(--amber-bg); color: var(--amber); }
.review-status-icon.completed { background: var(--green-bg); color: var(--green); }
.review-status-info { flex: 1; }
.review-status-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.review-status-detail { font-size: var(--fs-xs); color: var(--text-muted); }
.review-status-detail .overdue { color: var(--red); font-weight: 500; }
.review-status-counts { display: flex; gap: 20px; text-align: center; margin-right: 8px; }
.review-count-num { font-size: 18px; font-weight: 700; line-height: 1.2; }
.review-count-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Review accordion sections */
.rv-section { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; }
.rv-section-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); cursor: pointer; transition: background 0.15s; }
.rv-section-header:hover { background: var(--bg-hover); }
.rv-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rv-dot--red { background: var(--red); }
.rv-dot--amber { background: var(--amber); }
.rv-dot--blue { background: var(--accent); }
.rv-section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); flex: 1; }
.rv-section-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.rv-section-chevron { font-size: 11px; color: var(--text-faint); transition: transform 0.2s; }
.rv-section.collapsed .rv-section-items { display: none; }
.rv-section.collapsed .rv-section-chevron { transform: rotate(-90deg); }
.rv-section-items { border-top: 1px solid var(--border-subtle); }
.rv-section-cta { margin-left: var(--sp-2); }

/* Review list items */
.rl-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
    cursor: pointer; transition: background 0.15s;
}
.rl-item:last-child { border-bottom: none; }
.rl-item:hover { background: var(--bg-hover); }
.rl-item.active { background: var(--accent-bg); }
/* R3 — display-only rows.  The accordion is a progress display;
   execution happens on the full-page review surface. */
.rl-item--static { cursor: default; }
.rl-item--static:hover { background: none; }

.rl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rl-dot--red { background: var(--red); }
.rl-dot--amber { background: var(--amber); }
.rl-dot--blue { background: var(--accent); }

.rl-info { flex: 1; min-width: 0; }
.rl-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.rl-item.done .rl-title { color: var(--text-muted); }
.rl-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.rl-meta .overdue-tag { color: var(--red); font-weight: 500; }

.rl-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.rl-chevron { color: var(--text-faint); font-size: 11px; opacity: 0; transition: opacity 0.15s; }
.rl-item:hover .rl-chevron { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   PAGE HEADERS & COMMON COMPONENTS
   ═══════════════════════════════════════════════════════════ */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-6); }
.page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }

/* Button classes defined at lines 417-428 — no duplicates */

.flash { padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: var(--sp-4); }
.flash-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.flash-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* Content padding for non-dashboard pages */
.content-padded { padding: var(--sp-6) var(--sp-8); }

/* Ensure main takes full height */
.app-shell { display: flex; min-height: 100vh; }
.app-shell > .main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; background: var(--bg-main); }
.app-shell > .sidebar { flex-shrink: 0; }

/* Dashboard layout should fill available space */
.dash-layout { flex: 1; }

/* Detail page layout fixes */
.detail-layout { min-height: calc(100vh - 48px); }
.detail-main { padding: var(--sp-6) var(--sp-8); }
.detail-sidebar { padding: var(--sp-6); }

/* Summary cards grid */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }

/* Table toolbar */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.table-toolbar-left { display: flex; align-items: center; gap: var(--sp-2); }
.table-toolbar-right { display: flex; align-items: center; gap: var(--sp-2); }
.table-toolbar-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; transition: all 0.15s; font-size: 13px; }
.table-toolbar-btn:hover { border-color: var(--border-mid); color: var(--text-primary); }

/* Page header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-6); }
.page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0; }
.page-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 4px 0 0; }

/* Summary card description text */
.summary-card-desc {
    order: 2;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}

/* Active summary card highlight */
.summary-card--active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Panel form styling */
.panel-form-group { margin-bottom: var(--sp-4); }
.panel-label { display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.panel-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: var(--fs-sm); font-family: inherit; background: var(--bg-base); color: var(--text-primary); transition: border-color 0.15s; }
.panel-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,67,175,0.08); }
.panel-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: var(--fs-sm); font-family: inherit; background: var(--bg-base); color: var(--text-primary); resize: vertical; transition: border-color 0.15s; }
.panel-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,67,175,0.08); }
.panel-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: var(--fs-sm); font-family: inherit; background: var(--bg-base); color: var(--text-primary); cursor: pointer; }
.panel-select:focus { outline: none; border-color: var(--accent); }

/* Form error styling */
.form-error { font-size: var(--fs-xs); color: var(--red); margin-top: 4px; }

/* Linked header styling */
.linked-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.linked-header-icon { font-size: 14px; color: var(--text-faint); }
.linked-header-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.linked-header-count { font-size: var(--fs-xs); color: var(--text-faint); background: var(--bg-overlay); padding: 1px 8px; border-radius: var(--r-full); }
.linked-right { flex-shrink: 0; display: flex; align-items: center; }

/* Risk/control pills in tables */
.table-risk-pills, .table-control-pills, .table-system-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.table-risk-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); background: rgba(212, 64, 64, 0.08); color: #D44040; border: 1px solid rgba(212, 64, 64, 0.15); cursor: default; position: relative; }
.table-risk-pill:hover { background: rgba(212, 64, 64, 0.14); }
.table-control-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); background: rgba(67, 67, 175, 0.08); color: var(--accent); border: 1px solid rgba(67, 67, 175, 0.15); cursor: default; position: relative; }
.table-control-pill:hover { background: rgba(67, 67, 175, 0.14); }
.table-system-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); background: rgba(16, 185, 129, 0.08); color: #059669; border: 1px solid rgba(16, 185, 129, 0.15); cursor: default; position: relative; }
.table-system-pill:hover { background: rgba(16, 185, 129, 0.14); }

/* Button styles that may be missing */
.btn-full { width: 100%; justify-content: center; }

/* Note: Slide panel CSS is defined at line 528 (prototype styles).
   Toast CSS is defined at line 2433 (prototype styles).
   No duplicates needed here. */
.toast-info { background: var(--accent); color: #fff; }

/* Flash messages — inline, light, dismissible */
.flash { display: flex; align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--sp-4); cursor: pointer; transition: opacity 0.2s; }
.flash:hover { opacity: 0.85; }
.flash-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.flash-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }


/* ═══════════════════════════════════════════════════════════
   Work Stream / Governance Plan — Wizard Steps (.ws-*)
   ═══════════════════════════════════════════════════════════ */

/* Layout */
.ws-canvas { max-width: 720px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 100px; }
.ws-step { display: none; }
.ws-step.active { display: block; }

/* Tooltips */
.ws-tip { position: relative; display: inline; border-bottom: 1px dotted var(--text-faint); cursor: help; }
.ws-tip:hover { border-bottom-color: var(--accent); color: var(--accent); }
.ws-tip-text { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px; padding: var(--sp-3) var(--sp-4); background: var(--text-primary); color: var(--bg-raised); font-size: var(--fs-2xs); font-weight: 400; line-height: 1.5; border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 1000; pointer-events: none; text-transform: none; letter-spacing: normal; }
.ws-tip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text-primary); }
.ws-tip:hover .ws-tip-text { display: block; }

/* Progress */
.ws-progress { display: flex; gap: 4px; margin-bottom: var(--sp-6); }
.ws-progress-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--bg-overlay); transition: background 0.3s; }
.ws-progress-seg.done { background: var(--accent); }
.ws-progress-seg.current { background: var(--accent); opacity: 0.5; }

/* Step 1: Briefing */
.ws-b-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin: 0 0 var(--sp-2); }
.ws-b-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; margin: 0 0 var(--sp-5); }
.ws-b-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.ws-b-intro { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--sp-5); }
.ws-b-intro strong { color: var(--text-primary); }

/* Stats container */
.ws-b-stats { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-4); }
.ws-b-stat { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--border-subtle); }
.ws-b-stat:last-child { border-bottom: none; }
.ws-b-stat:hover { background: var(--bg-hover); }
.ws-b-stat-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); flex-shrink: 0; }
.ws-b-stat.risks .ws-b-stat-icon { background: var(--red-bg); color: var(--red); }
.ws-b-stat.controls .ws-b-stat-icon { background: var(--accent-bg); color: var(--accent); }
.ws-b-stat-label { flex: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.ws-b-stat-num { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.ws-b-stat.risks .ws-b-stat-num { color: var(--red); }
.ws-b-stat.controls .ws-b-stat-num { color: var(--accent); }
.ws-b-stat-chevron { font-size: 10px; color: var(--text-faint); flex-shrink: 0; transition: transform 0.2s; }
.ws-b-stat.open .ws-b-stat-chevron { transform: rotate(180deg); }

/* Expandable lists */
.ws-b-list { display: none; border-top: 1px solid var(--border-subtle); }
.ws-b-list.visible { display: block; }
.ws-b-list-body { padding: var(--sp-2) var(--sp-5); }

/* List items */
.ws-b-item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
.ws-b-item:last-child { border-bottom: none; }
.ws-b-item-header { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; padding: var(--sp-1) 0; }
.ws-b-item-header:hover .ws-b-item-name { color: var(--accent); }
.ws-b-item-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ws-b-item-name { flex: 1; font-size: var(--fs-sm); color: var(--text-secondary); transition: color 0.15s; }
.ws-b-item-chevron { font-size: 9px; color: var(--text-faint); transition: transform 0.2s; }
.ws-b-item.expanded .ws-b-item-chevron { transform: rotate(90deg); }
.ws-b-item-detail { display: none; padding: var(--sp-1) 0 var(--sp-2) 18px; }
.ws-b-item.expanded .ws-b-item-detail { display: block; }
.ws-b-item-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

/* Approach section */
.ws-b-approach { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.ws-b-approach p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; margin: 0 0 var(--sp-4); }
.ws-b-approach strong { color: var(--text-secondary); }
.ws-b-phases { display: flex; gap: var(--sp-2); }
.ws-b-phase { flex: 1; padding: var(--sp-3); border-radius: var(--r-lg); border: 1px solid var(--border-subtle); }
.ws-b-phase-num { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 2px; }
.ws-b-phase-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.ws-b-phase-meta { font-size: 10px; color: var(--text-faint); }

/* Reuse banner */
.ws-reuse-banner { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--r-xl); padding: var(--sp-5); margin-bottom: var(--sp-5); display: none; }
.ws-reuse-banner.visible { display: block; }
.ws-reuse-header { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 700; color: var(--green); margin-bottom: var(--sp-3); }
.ws-reuse-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.ws-reuse-col-title { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.ws-reuse-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 4px; }
.ws-reuse-effort { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--green-border); font-size: var(--fs-sm); color: var(--text-secondary); }
.ws-reuse-effort-new { font-weight: 700; color: var(--green); font-size: var(--fs-base); }
.ws-reuse-effort-label { font-size: var(--fs-2xs); color: var(--text-faint); }
.ws-reuse-note { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--green); margin-bottom: var(--sp-5); display: none; }
.ws-reuse-note.visible { display: flex; align-items: flex-start; gap: var(--sp-2); }
.ws-reuse-note i { margin-top: 3px; }

/* Step 2: Governance Plan header */
.ws-gp-header { margin-bottom: var(--sp-5); }
.ws-gp-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin: 0 0 var(--sp-2); }
.ws-gp-meta { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.ws-gp-meta strong { color: var(--text-secondary); }

/* Owner section */
.ws-gp-owner { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); }
.ws-gp-owner-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; }
.ws-gp-owner-info { flex: 1; }
.ws-gp-owner-label { font-size: var(--fs-2xs); color: var(--text-faint); }
.ws-gp-owner-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.ws-gp-owner-change { font-size: var(--fs-2xs); color: var(--accent); cursor: pointer; font-weight: 500; border: none; background: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); transition: background 0.15s; flex-shrink: 0; }
.ws-gp-owner-change:hover { background: var(--accent-bg); }
.ws-gp-owner-select { display: none; padding: 0 var(--sp-5) var(--sp-4); margin-top: calc(var(--sp-2) * -1); }
.ws-gp-owner-select.visible { display: block; }
.ws-owner-option { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); transition: background 0.15s; }
.ws-owner-option:hover { background: var(--bg-hover); }
.ws-owner-option.selected { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.ws-owner-option-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-overlay); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }

/* Governance Health preview */
.ws-gh { margin-bottom: var(--sp-5); }
.ws-gh-intro { font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-3); }
.ws-gh-card { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.ws-gh-header { padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); }
.ws-gh-header-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.ws-gh-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.ws-gh-row:last-child { border-bottom: none; }
.ws-gh-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ws-gh-dot--blue { background: var(--accent); }
.ws-gh-dot--amber { background: var(--amber); }
.ws-gh-row-label { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.ws-gh-row-status { font-size: var(--fs-xs); color: var(--text-muted); }

/* Phase accordion */
.ws-gp-plan { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-5); }
.ws-gp-phase { border-bottom: 1px solid var(--border-subtle); }
.ws-gp-phase:last-child { border-bottom: none; }
.ws-gp-phase-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); cursor: pointer; user-select: none; transition: background 0.15s; }
.ws-gp-phase-header:hover { background: var(--bg-hover); }
.ws-gp-phase-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ws-gp-phase-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); flex: 1; }
.ws-gp-phase-count { font-size: var(--fs-2xs); color: var(--text-faint); }
.ws-gp-phase-chevron { font-size: 11px; color: var(--text-faint); transition: transform 0.2s; }
.ws-gp-phase.collapsed .ws-gp-phase-chevron { transform: rotate(-90deg); }
.ws-gp-phase-body { padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.ws-gp-phase.collapsed .ws-gp-phase-body { display: none; }

/* Risk card */
.ws-gp-risk { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-2); overflow: hidden; transition: border-color 0.15s; }
.ws-gp-risk:last-child { margin-bottom: 0; }
.ws-gp-risk:hover { border-color: var(--border-mid); }
.ws-gp-risk-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.ws-gp-risk-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: var(--r-sm); flex-shrink: 0; }
.ws-gp-risk-label.high { color: var(--red); background: var(--red-bg); }
.ws-gp-risk-label.med { color: var(--amber); background: var(--amber-bg); }
.ws-gp-risk-label.low { color: var(--accent); background: var(--accent-bg); }
.ws-gp-risk-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); flex: 1; transition: color 0.15s; }
.ws-gp-risk-header:hover .ws-gp-risk-name { color: var(--accent); }
.ws-gp-risk-count { font-size: var(--fs-2xs); color: var(--text-faint); flex-shrink: 0; }
.ws-gp-risk-chevron { font-size: 10px; color: var(--text-faint); transition: transform 0.2s; flex-shrink: 0; }
.ws-gp-risk.expanded .ws-gp-risk-chevron { transform: rotate(90deg); }

/* Risk detail */
.ws-gp-risk-detail { display: none; padding: 0 var(--sp-4) var(--sp-4); }
.ws-gp-risk.expanded .ws-gp-risk-detail { display: block; }
.ws-gp-risk-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.ws-gp-mitigated { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }

/* Control item */
.ws-gp-ctrl { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; }
.ws-gp-ctrl:not(:last-child) { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); }
.ws-gp-ctrl-icon { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
.ws-gp-ctrl-body { flex: 1; min-width: 0; }
.ws-gp-ctrl-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.ws-gp-ctrl-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--sp-2); }
.ws-gp-ctrl-tags { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.ws-gp-tag { font-size: 10px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 3px; }
.ws-gp-tag i { font-size: 9px; }
.ws-gp-ctrl-owner { flex-shrink: 0; }
.ws-gp-ctrl-owner select { font-size: 10px; font-weight: 500; color: var(--accent); background: var(--accent-bg); border: 1px solid transparent; padding: 2px 8px; border-radius: var(--r-full); cursor: pointer; appearance: none; padding-right: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='%234343AF'%3E%3Cpath d='M0 0l4 5 4-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }

/* Control reference link */
.ws-gp-ctrl-ref { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; cursor: pointer; transition: color 0.15s; }
.ws-gp-ctrl-ref:hover { color: var(--accent); }
.ws-gp-ctrl-ref i { font-size: 9px; }

/* Highlight animation */
@keyframes wsHighlight { 0% { background: var(--accent-bg); } 100% { background: transparent; } }
.ws-gp-ctrl.highlight { animation: wsHighlight 1.5s ease; }
.ws-gp-risk.highlight > .ws-gp-risk-header { animation: wsHighlight 1.5s ease; }

/* Aside & actions */
.ws-gp-aside { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.6; margin: var(--sp-6) 0 var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); }
.ws-gp-aside i { margin-right: var(--sp-2); }
.ws-gp-actions { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* Bottom nav */
.ws-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-raised); border-top: 1px solid var(--border-subtle); padding: var(--sp-4) var(--sp-5); z-index: 100; }
.ws-nav-inner { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.ws-nav-back { font-size: var(--fs-sm); color: var(--text-muted); background: none; border: none; cursor: pointer; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); transition: background 0.15s; }
.ws-nav-back:hover { background: var(--bg-hover); color: var(--text-primary); }
.ws-nav-back i { margin-right: var(--sp-2); font-size: 11px; }


/* ═══════════════════════════════════════════════════════════
   Governance Health Scorecard (.gh-*) & Governance Plan (.gp-*)
   Used on AI System detail page (view.php)
   ═══════════════════════════════════════════════════════════ */

/* Scorecard */
.gh-scorecard { margin-top: var(--sp-5); margin-bottom: var(--sp-6); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.gh-header { padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); }
.gh-header-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.gh-pct { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); background: var(--bg-overlay); padding: 2px 8px; border-radius: var(--r-sm); }
.gh-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.15s; text-decoration: none; color: inherit; }
.gh-row:last-child { border-bottom: none; }
.gh-row:hover { background: var(--bg-hover); }
.gh-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gh-dot--red { background: var(--red); }
.gh-dot--amber { background: var(--amber); }
.gh-dot--blue { background: var(--accent); }
.gh-row-label { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.gh-row-status { font-size: var(--fs-xs); color: var(--text-muted); }
.gh-row-arrow { font-size: 10px; color: var(--text-faint); opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.gh-row:hover .gh-row-arrow { opacity: 1; }

/* Governance Plan */
.gp-plan { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-6); }
.gp-phase { border-bottom: 1px solid var(--border-subtle); }
.gp-phase:last-child { border-bottom: none; }
.gp-phase-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); cursor: pointer; user-select: none; transition: background 0.15s; }
.gp-phase-header:hover { background: var(--bg-hover); }
.gp-phase-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gp-phase-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.gp-phase-name span { font-weight: 400; color: var(--text-muted); }
.gp-phase-spacer { flex: 1; }
.gp-phase-progress { width: 80px; height: 4px; background: var(--bg-overlay); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.gp-phase-progress-fill { height: 100%; border-radius: 2px; }
.gp-phase-count { font-size: var(--fs-2xs); color: var(--text-faint); min-width: 32px; text-align: right; }
.gp-phase-chevron { font-size: 11px; color: var(--text-faint); transition: transform 0.2s; }
.gp-phase.collapsed .gp-phase-chevron { transform: rotate(-90deg); }
.gp-phase-body { padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.gp-phase.collapsed .gp-phase-body { display: none; }

/* Risk card */
.gp-risk { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-2); overflow: hidden; transition: border-color 0.15s; }
.gp-risk:last-child { margin-bottom: 0; }
.gp-risk:hover { border-color: var(--border-mid); }
.gp-risk-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.gp-risk-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: var(--r-sm); flex-shrink: 0; }
.gp-risk-label.high { color: var(--red); background: var(--red-bg); }
.gp-risk-label.med { color: var(--amber); background: var(--amber-bg); }
.gp-risk-label.low { color: var(--accent); background: var(--accent-bg); }
.gp-risk-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); flex: 1; transition: color 0.15s; }
.gp-risk-header:hover .gp-risk-name { color: var(--accent); }
.gp-risk-chevron { font-size: 10px; color: var(--text-faint); transition: transform 0.2s; flex-shrink: 0; }
.gp-risk.expanded .gp-risk-chevron { transform: rotate(90deg); }
.gp-risk-detail { display: none; padding: 0 var(--sp-4) var(--sp-4); }
.gp-risk.expanded .gp-risk-detail { display: block; }
.gp-risk-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.gp-mitigated { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-2); }

/* Control item */
.gp-ctrl { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; }
.gp-ctrl:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
.gp-ctrl-icon { width: 24px; height: 24px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
.gp-ctrl-icon.pending { background: var(--bg-overlay); color: var(--text-faint); }
.gp-ctrl-icon.in-progress { background: var(--amber-bg); color: var(--amber); }
.gp-ctrl-icon.complete { background: var(--green-bg); color: var(--green); }
.gp-ctrl-icon.overdue { background: var(--red-bg); color: var(--red); }
.gp-ctrl-body { flex: 1; min-width: 0; }
.gp-ctrl-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.gp-ctrl-name.muted { color: var(--text-muted); }
.gp-ctrl-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--sp-2); }
.gp-ctrl-tags { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gp-tag { font-size: 10px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 3px; }
.gp-tag i { font-size: 9px; }
.gp-ctrl-ref { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; cursor: pointer; transition: color 0.15s; }
.gp-ctrl-ref:hover { color: var(--accent); }
.gp-ctrl-ref i { font-size: 9px; }
@keyframes gpHighlight { 0% { background: var(--accent-bg); } 100% { background: transparent; } }
.gp-ctrl.highlight { animation: gpHighlight 1.5s ease; }
.gp-risk.highlight > .gp-risk-header { animation: gpHighlight 1.5s ease; }

/* ═══════════════════════════════════════════════════════════
   REGISTERS — shared list-page components (.reg-*)
   One anatomy for Risks / Controls / Incidents / Evidence /
   AI Systems: header · attention line · toolbar · table · empty.
   ═══════════════════════════════════════════════════════════ */
.reg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.reg-head .page-title { margin: 0; }
.reg-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.reg-import-banner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    background: var(--amber-bg); border: 1px solid var(--amber-border);
    border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
    font-size: var(--fs-sm); color: var(--text-primary);
}
.reg-import-banner .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .reg-import-banner { flex-direction: column; align-items: flex-start; }
}

/* ── Register import (CSV) — upload / column-map / done ─────────────────── */
.imp-page { max-width: 640px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.imp-page--wide { max-width: 880px; }
.imp-back {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; margin-bottom: var(--sp-4);
}
.imp-back:hover { color: var(--text-primary); }
.imp-card {
    background: var(--bg-raised); border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm);
}
.imp-card--done { text-align: center; }
.imp-eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent); margin-bottom: var(--sp-3);
}
.imp-title { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); color: var(--text-primary); }
.imp-lead { margin: 0 0 var(--sp-5); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.55; }
.imp-subhead { margin: var(--sp-6) 0 var(--sp-1); font-size: var(--fs-md); color: var(--text-primary); }
.imp-hint { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
.imp-foot { margin: var(--sp-5) 0 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

.imp-flash { border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.imp-flash--error { background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red); }
.imp-flash--note { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--text-primary); }

/* upload drop zone */
.imp-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
    border: 2px dashed var(--border-mid); border-radius: var(--r-lg);
    padding: var(--sp-8) var(--sp-5); cursor: pointer; text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.imp-drop:hover, .imp-drop--over { border-color: var(--accent); background: var(--accent-bg); }
.imp-drop-icon { font-size: 28px; color: var(--accent); margin-bottom: var(--sp-1); }
.imp-drop-main { font-weight: 600; color: var(--text-primary); }
.imp-drop-sub { font-size: var(--fs-sm); color: var(--text-muted); }

.imp-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.imp-card--done .imp-actions { justify-content: center; }

/* column-map */
.imp-map { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.imp-map-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.imp-map-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: var(--sp-2); }
.imp-req { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }
.imp-select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border-mid);
    border-radius: var(--r-md); background: var(--bg-base); color: var(--text-primary); font-size: var(--fs-sm);
}
.imp-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.imp-preview-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.imp-preview { margin: 0; font-size: var(--fs-xs); white-space: nowrap; }
.imp-preview th, .imp-preview td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* done */
.imp-done-check { font-size: 44px; color: var(--accent); margin-bottom: var(--sp-3); }
.imp-summary { list-style: none; margin: var(--sp-5) auto 0; padding: 0; max-width: 360px; text-align: left; }
.imp-summary li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.imp-summary li:last-child { border-bottom: none; }
.imp-summary .imp-ok { color: var(--accent); }

@media (max-width: 640px) {
    .imp-card { padding: var(--sp-5); }
    .imp-map { grid-template-columns: 1fr; }
    .imp-actions { flex-direction: column; align-items: stretch; }
    .imp-actions .btn { width: 100%; text-align: center; }
}
/* "Owned by you" banner on a Member's register. */
.reg-mine-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-secondary); }
.reg-mine-banner a { font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.reg-mine-banner a:hover { color: var(--accent-hover); }

/* Attention line — quietly points at what needs work; mirrors .dash-act */
.reg-attention { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-4); text-decoration: none; transition: background 0.12s; }
a.reg-attention:hover { background: var(--bg-hover); }
.reg-attention--alert { border-color: var(--red-border); background: var(--red-bg); }
a.reg-attention--alert:hover { background: var(--red-bg); border-color: var(--red); }
.reg-attention-text { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--sp-2); }
.reg-attention--alert .reg-attention-text { color: var(--red-muted); }
.reg-attention-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.reg-attention-go { font-size: var(--fs-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.reg-attention-go i { font-size: 10px; }
.reg-attention--calm .reg-attention-text { font-weight: 500; color: var(--text-muted); }

/* Toolbar — filter chips + instant search */
.reg-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.reg-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.reg-chip { padding: 5px 12px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--border-subtle); background: var(--bg-raised); color: var(--text-secondary); cursor: pointer; transition: all 0.12s; text-decoration: none; white-space: nowrap; }
.reg-chip:hover { border-color: var(--border-mid); color: var(--text-primary); }
.reg-chip.active { background: var(--text-primary); color: var(--bg-raised); border-color: var(--text-primary); }
.reg-chip-count { opacity: 0.55; margin-left: 5px; }
.reg-chip--alert .reg-chip-count { color: var(--red); opacity: 1; }
.reg-chip.active .reg-chip-count { color: inherit; opacity: 0.65; }
.reg-search { position: relative; margin-left: auto; }
.reg-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-faint); pointer-events: none; }
.reg-search input { width: 220px; padding: 6px 10px 6px 30px; font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md); transition: border-color 0.12s, width 0.15s; }
.reg-search input:focus { outline: none; border-color: var(--accent); width: 260px; }
.reg-search input::placeholder { color: var(--text-faint); }

/* Table refinements — monochrome link pills, urgency flag */
.reg-table tbody tr.reg-row--hidden { display: none; }
.reg-table .table-risk-pill,
.reg-table .table-control-pill,
.reg-table .table-system-pill { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); font-weight: 500; }
.reg-table .table-risk-pill:hover,
.reg-table .table-control-pill:hover,
.reg-table .table-system-pill:hover { background: var(--bg-hover); }
.reg-flag { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: var(--sp-2); vertical-align: middle; flex-shrink: 0; }
.reg-muted { color: var(--text-faint); }
.reg-noresults { padding: 40px; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }
.reg-noresults a { color: var(--accent); text-decoration: none; }

/* Crafted empty state */
.reg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--bg-raised); }
.reg-empty-icon { width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 18px; margin-bottom: var(--sp-3); }
.reg-empty-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-1); }
.reg-empty-text { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); max-width: 360px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   REPORTS PAGE (.rep-*)
   ═══════════════════════════════════════════════════════════ */
.rep-proof { padding: var(--sp-4) var(--sp-5); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.rep-proof-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.rep-proof-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; max-width: 600px; }
.rep-proof-list { margin-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.rep-proof-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.rep-proof-row:last-child { border-bottom: none; }
.rep-proof-row-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.rep-proof-row:hover .rep-proof-row-name { color: var(--accent); }
.rep-proof-row-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.rep-proof-row-go { margin-left: auto; color: var(--text-faint); font-size: 11px; }
.rep-proof-empty { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-faint); }

.rep-section-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }

.rep-list { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-6); background: var(--bg-raised); }
.rep-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: background 0.12s; }
.rep-item:last-child { border-bottom: none; }
.rep-item:hover { background: var(--bg-hover); }
.rep-item-icon { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 15px; flex-shrink: 0; }
.rep-item-body { flex: 1; min-width: 0; }
.rep-item-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.rep-item:hover .rep-item-name { color: var(--accent); }
.rep-item-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.rep-item-go { color: var(--text-faint); font-size: 12px; flex-shrink: 0; }
.rep-item:hover .rep-item-go { color: var(--accent); }

.rep-exports { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.rep-export { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all 0.12s; }
.rep-export:hover { border-color: var(--border-mid); color: var(--text-primary); background: var(--bg-hover); }
.rep-export i { font-size: 11px; color: var(--text-faint); }

/* Settings — notification preference rows */
.set-notif-list { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4); }
.set-notif-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.12s; }
.set-notif-row:last-child { border-bottom: none; }
.set-notif-row:hover { background: var(--bg-hover); }
.set-notif-row input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.set-notif-name { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.set-notif-desc { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   AUDIT TRAIL (.aud-*)
   ═══════════════════════════════════════════════════════════ */
.aud-count { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.aud-daterange { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; flex-wrap: wrap; }
.aud-daterange label { font-size: var(--fs-xs); color: var(--text-muted); }
.aud-date { font-size: var(--fs-xs); padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); font-family: inherit; color: var(--text-primary); background: var(--bg-raised); }
.aud-list { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-raised); }
.aud-row { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); transition: background 0.12s; }
.aud-row:last-child { border-bottom: none; }
.aud-row:hover { background: var(--bg-hover); }
.aud-row .owner-avatar { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }
.aud-body { flex: 1; min-width: 0; }
.aud-line { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.aud-line strong { color: var(--text-primary); font-weight: 600; }
.aud-entity { color: var(--accent); text-decoration: none; font-weight: 500; }
.aud-entity:hover { text-decoration: underline; }
.aud-change { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.aud-change del { color: var(--text-faint); }
.aud-note { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-top: 2px; }
.aud-time { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; flex-shrink: 0; }
.aud-time i { font-size: 10px; margin-right: 4px; }
.aud-pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ═══════════════════════════════════════════════════════════
   WIZARD — v2 "New AI System" (Phase C)

   Sits inside the .wiz-shell layout (topbar + content area).
   .wzv-* classes scope the per-step view content so they don't
   collide with the legacy .iv-* interview styles or the wider
   detail-page .sysv-* set.
   ═══════════════════════════════════════════════════════════ */
.wzv { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }

.wzv-progress { display: flex; gap: 4px; margin-bottom: var(--sp-6); }
.wzv-progress-step { flex: 1; height: 3px; background: var(--border-subtle); border-radius: 2px; transition: background 0.3s ease; }
.wzv-progress-step--done,
.wzv-progress-step--current { background: var(--accent); }

.wzv-eyebrow { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.wzv-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.wzv-subtitle { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.55; margin: 0 0 var(--sp-6); }

/* Step 1 — free-text entry */
.wzv-field { margin-bottom: var(--sp-6); }
.wzv-textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    font-family: inherit; font-size: var(--fs-base); line-height: 1.6;
    padding: 14px 16px; min-height: 140px;
    border: 1px solid var(--border-mid); border-radius: var(--r-md) var(--r-md) 0 0;
    border-bottom: none;
    background: var(--bg-base); color: var(--text-primary);
}
.wzv-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }
.wzv-input-tools {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; font-size: var(--fs-xs); color: var(--text-muted);
    border: 1px solid var(--border-mid); border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--bg-subtle, var(--bg-base));
}
.wzv-input-affordances { display: flex; gap: var(--sp-4); }
.wzv-affordance { display: inline-flex; align-items: center; gap: 4px; cursor: default; opacity: 0.7; }
.wzv-affordance:hover { opacity: 1; }
.wzv-input-count { color: var(--text-faint); }

/* Step 2 — expansion */
.wzv-expansion { margin-bottom: var(--sp-6); }
.wzv-expansion-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: var(--sp-4) 0 var(--sp-2); font-weight: 600; }
.wzv-expansion-label:first-child { margin-top: 0; }
.wzv-expansion-original {
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary);
    padding: 12px 14px; background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
    border: 1px dashed var(--border-subtle); border-radius: var(--r-md);
    margin-bottom: var(--sp-2);
}
.wzv-loading {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 24px; color: var(--text-muted); font-size: var(--fs-sm);
    border: 1px dashed var(--border-subtle); border-radius: var(--r-md);
}
.wzv-loading i { color: var(--accent); font-size: 18px; }
.wzv-expansion-edit-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.wzv-name-input {
    font-family: inherit; font-size: var(--fs-base); font-weight: 600;
    padding: 10px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.wzv-name-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }
.wzv-expansion-edit {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px;
    font-family: inherit; font-size: var(--fs-sm); line-height: 1.55;
    padding: 12px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.wzv-expansion-edit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }
.wzv-expansion-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-4); padding-top: var(--sp-3); margin-top: var(--sp-2);
    border-top: 1px dashed var(--border-subtle); font-size: var(--fs-xs);
}
.wzv-expansion-meta-label { display: block; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; }
.wzv-expansion-meta-value { font-weight: 600; color: var(--text-primary); }
.wzv-expansion-note { font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; }
.wzv-fallback {
    padding: 12px 14px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55;
    background: var(--amber-bg, #fff8f0); border: 1px solid var(--amber-border, #f0d9b8);
    border-radius: var(--r-md); display: flex; align-items: flex-start; gap: var(--sp-2);
}
.wzv-fallback i { color: var(--amber, #c89a4f); flex-shrink: 0; margin-top: 2px; }

/* Step 2 clarify state — focused factual questions the AI asks before
   summarising.  Kept calm and single-column; user types short answers. */
.wzv-clarify { margin-bottom: var(--sp-4); }
.wzv-clarify-intro { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--sp-5); line-height: 1.55; }
.wzv-clarify-q { margin-bottom: var(--sp-5); }
.wzv-clarify-label {
    display: block; font-size: var(--fs-base); font-weight: 600;
    color: var(--text-primary); margin-bottom: 4px;
}
.wzv-clarify-hint { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-bottom: var(--sp-2); }
.wzv-clarify-input {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-base);
    padding: 10px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.wzv-clarify-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }

/* Placeholder — for steps not yet built */
.wzv-placeholder {
    padding: var(--sp-6); border: 1px dashed var(--border-subtle);
    border-radius: var(--r-md); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6;
}
.wzv-placeholder-icon { font-size: 24px; color: var(--text-muted); margin-bottom: var(--sp-3); }
.wzv-placeholder ul { padding-left: 20px; margin: var(--sp-2) 0 0; }
.wzv-placeholder li { margin-bottom: 4px; }

/* Step 3 — questions on one page, chip-based selection.
   Generous vertical spacing between questions; no per-question divider
   line — the footer's top border serves as the only horizontal rule on
   the page.  (The old border-bottom on each question collided with
   :last-of-type's tag-not-class selector and produced two stacked lines
   below the final question.) */
.wzv-q { margin-bottom: var(--sp-8); }
.wzv-q:last-child { margin-bottom: 0; }
.wzv-q-label { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.wzv-q-hint { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-bottom: var(--sp-4); }
.wzv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wzv-other-input-wrap { margin-top: var(--sp-3); }
.wzv-other-input {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-sm);
    padding: 9px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
}
.wzv-other-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }
.wzv-chip {
    border: 1px solid var(--border-mid); background: var(--bg-base);
    color: var(--text-primary); padding: 8px 14px;
    font-size: var(--fs-sm); font-family: inherit;
    border-radius: var(--r-md); cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.wzv-chip:hover { border-color: var(--border-strong); }
.wzv-chip.is-selected {
    border-color: var(--accent); background: var(--accent); color: #fff;
}
.wzv-chip.is-selected:hover { background: var(--accent-hover, var(--accent)); }

/* (U3 — .wzv-severity* removed; combined step 4 uses .wzv-setup-*.) */

/* ── Step 4 "We matched this to" transparency block ───────────────────
   Names the library category the use case mapped to + why, before the
   risk/control counts — dispels the "black box" feeling and reinforces
   the deterministic story.  The one indigo-accented focal element on
   the page (subtle glow, per the visual language). */
.wzv-matched {
    border: 1px solid rgba(67,67,175,0.22);
    border-radius: var(--r-lg);
    background: rgba(67,67,175,0.04);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
    box-shadow: 0 0 40px rgba(67,67,175,0.07);
}
.wzv-matched-head {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent); margin-bottom: var(--sp-3);
}
.wzv-matched-head .ic { font-size: 14px; }
.wzv-matched-chips {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.wzv-matched-chip {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: var(--fs-sm); font-weight: 600;
}
.wzv-matched-why-label {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-2);
}
.wzv-matched-why {
    margin: 0 0 var(--sp-4); padding-left: 20px;
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary);
}
.wzv-matched-why li { margin-bottom: 4px; }
.wzv-matched-foot {
    border-top: 1px solid rgba(67,67,175,0.15); padding-top: var(--sp-3);
    font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary);
}

/* ── Step 4 combined setup card (U1) ──────────────────────────────────
   Risk + setup on one page.  No badges, no expandable control list,
   just the risk level + reasoning bullets + counts.  Lives in the
   same .wzv-* family so the page chrome stays consistent. */
.wzv-setup {
    border: 1px solid var(--border-mid); border-radius: var(--r-lg);
    background: var(--bg-base);
    padding: var(--sp-6) var(--sp-8);
    margin-bottom: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-6);
}
.wzv-setup-risk-level {
    font-size: 32px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
    color: var(--text-primary); margin: 0 0 var(--sp-3);
    text-transform: uppercase;
}
.wzv-setup-risk--high .wzv-setup-risk-level { color: var(--red); }
.wzv-setup-risk-why {
    margin: 0; padding-left: 20px;
    font-size: var(--fs-sm); line-height: 1.55;
    color: var(--text-secondary);
}
.wzv-setup-risk-why li { margin-bottom: 4px; }
.wzv-setup-summary {
    border-top: 1px solid var(--border-subtle); padding-top: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.wzv-setup-line {
    font-size: var(--fs-md);
    color: var(--text-primary);
}
.wzv-setup-n {
    font-weight: 700; font-variant-numeric: tabular-nums;
    margin-right: var(--sp-2);
}
.wzv-setup-breakdown {
    margin: 0 0 0 var(--sp-5); padding: 0; list-style: none;
    font-size: var(--fs-sm); color: var(--text-secondary);
}
.wzv-setup-breakdown li { margin-bottom: 4px; }

/* (U3 — .wzv-preview* removed; step 5 preview page no longer exists.) */

/* Step 6 — ownership picker */
.wzv-own-card {
    border: 1px solid var(--border-mid); border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-3);
    background: var(--bg-base);
}
.wzv-own-opt {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}
.wzv-own-opt:last-of-type { border-bottom: none; }
.wzv-own-opt input[type="radio"] { margin-top: 4px; accent-color: var(--accent); }
.wzv-own-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wzv-own-name { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); }
.wzv-own-detail { font-size: var(--fs-xs); color: var(--text-muted); }
.wzv-own-select {
    margin-top: var(--sp-2); padding: 8px 12px; font-family: inherit; font-size: var(--fs-sm);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary); max-width: 360px;
}
.wzv-own-select:disabled { opacity: 0.5; cursor: not-allowed; }
.wzv-own-input {
    margin-top: var(--sp-2); padding: 8px 12px; font-family: inherit; font-size: var(--fs-sm);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary); max-width: 360px; width: 100%;
    box-sizing: border-box;
}
.wzv-own-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08); }
.wzv-own-input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-subtle, rgba(0, 0, 0, 0.02)); }
.wzv-own-empty { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; padding: var(--sp-3) 0; }
.wzv-own-note {
    display: flex; gap: var(--sp-2); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
    background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
}
.wzv-own-note i { color: var(--text-faint); margin-top: 1px; flex-shrink: 0; }

/* 10b-3 — team placement picker (multi-team tenants only). */
.wzv-team-block { margin-bottom: var(--sp-4); }
.wzv-team-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.wzv-team-hint { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.tp-team-block { margin-top: var(--sp-2); text-align: left; }

/* Step 7 — Done state.  Centred hero with stats + next-steps list. */
.wzv-done-hero {
    text-align: center; padding: var(--sp-6) var(--sp-5) var(--sp-4);
    border: 1px solid var(--border-mid); border-radius: var(--r-lg);
    background: var(--bg-base); margin-bottom: var(--sp-6);
}
.wzv-done-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(35, 145, 75, 0.10); color: #2d8a4f;
    font-size: 22px; margin-bottom: var(--sp-4);
}
.wzv-done-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 var(--sp-2); line-height: 1.3; color: var(--text-primary);
}
.wzv-done-sub {
    font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55;
    margin: 0 auto var(--sp-5); max-width: 520px;
}
.wzv-done-stats {
    display: flex; justify-content: center; align-items: flex-start;
    gap: var(--sp-8);
    padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle);
}
/* Each stat is a flex column with the number on a fixed-height baseline,
   so labels (Risks / Controls / Review) land on the same horizontal line
   regardless of number length.  Word values like "Semi-annual" are
   slightly smaller (24px) than numeric values (30px) so longer words
   don't blow out the row, but both occupy the same baseline. */
.wzv-done-stat {
    display: flex; flex-direction: column; align-items: center;
    min-width: 90px;
}
.wzv-done-stat-num {
    font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--text-primary);
    min-height: 36px; display: flex; align-items: center;
}
/* Auto-shrink long word values (Semi-annual) so they still align without
   wrapping.  All-digit values keep the full 30px treatment. */
.wzv-done-stat-num:has(> :only-child),
.wzv-done-stat-num:not(:empty) {
    /* Layout fallback if :has isn't available; the explicit class
       below handles the text-vs-number distinction. */
}
.wzv-done-stat:nth-child(3) .wzv-done-stat-num {
    font-size: 24px;
}
.wzv-done-stat-label {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-top: 6px; font-weight: 600;
}
.wzv-done-next {
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
    padding: var(--sp-5); margin-bottom: var(--sp-4);
    background: var(--bg-base);
}
.wzv-done-next h4 {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
    margin: 0 0 var(--sp-3);
}
.wzv-done-next ul { margin: 0; padding-left: 20px; }
.wzv-done-next li {
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}
.wzv-done-next li:last-child { margin-bottom: 0; }
.wzv-footer--done { border-top: none; padding-top: 0; }

/* ═══════════════════════════════════════════════════════════
   TOOL PICKER — v2 "New AI System" deterministic entry (Phase D)

   Single page.  Search at top, sectioned grid below, pattern panel
   slides up from the bottom when a tile is selected.  Scoped with .tp-*
   so it doesn't collide with the .wzv-* wizard styles (which it visits
   only via the "Something else" escape link).
   ═══════════════════════════════════════════════════════════ */
.tp { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; }
.tp-eyebrow { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.tp-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.tp-subtitle { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.55; margin: 0 0 var(--sp-6); }

/* Search bar */
.tp-search {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 10px 14px; margin-bottom: var(--sp-6);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base);
}
.tp-search i { color: var(--text-muted); font-size: 14px; }
.tp-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: var(--fs-base); color: var(--text-primary);
}

/* Sectioned grid */
.tp-section { margin-bottom: var(--sp-6); }
.tp-section-h {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600; margin: 0 0 var(--sp-3);
}
.tp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.tp-tile {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 12px 14px; font-family: inherit; font-size: var(--fs-sm);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary); cursor: pointer;
    text-align: left; transition: border-color 0.12s, background 0.12s;
}
/* When CSS sets `display:` explicitly, the browser's default [hidden]
   style (display: none) is overridden.  Restore it for the elements
   that JS toggles via `el.hidden = true`. */
.tp-tile[hidden] { display: none; }
.tp-tile:hover { border-color: var(--border-strong); }
.tp-tile.is-selected { border-color: var(--accent); background: var(--accent-bg); }
.tp-tile-logo {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--bg-subtle, rgba(0, 0, 0, 0.04));
    color: var(--text-secondary); display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
    text-transform: uppercase;
}
.tp-tile-logo--sm { width: 22px; height: 22px; font-size: 11px; }
.tp-tile.is-selected .tp-tile-logo { background: var(--accent); color: #fff; }
.tp-tile-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stage 1 — combined entry hero.  Centered typography + the glowing
   prompt bar, mirroring the prototype (do-anything.html .pb-*).  The
   same page serves both paths: describe in your own words (→ free-text
   wizard at step 2) or pick a tool from the grid below. */
.tp-hero { text-align: center; padding: var(--sp-8) 0 var(--sp-4); }
.tp-hero .tp-eyebrow { color: var(--accent); letter-spacing: 0.08em; margin-bottom: var(--sp-3); }
.tp-hero .tp-title { font-size: 2.25rem; letter-spacing: -0.025em; margin: 0 0 var(--sp-3); }
.tp-hero .tp-subtitle { max-width: 480px; margin: 0 auto var(--sp-8); font-size: var(--fs-md); }

.tp-pb {
    max-width: 640px; margin: 0 auto; text-align: left;
    background: var(--bg-base);
    border: 3px solid rgba(67, 67, 175, 0.35); border-radius: var(--r-xl);
    box-shadow: 0 0 24px 6px rgba(67, 67, 175, 0.12), 0 0 48px 12px rgba(67, 67, 175, 0.06);
    overflow: hidden; transition: box-shadow 0.3s, border-color 0.3s;
}
.tp-pb:focus-within {
    border-color: rgba(67, 67, 175, 0.5);
    box-shadow: 0 0 32px 8px rgba(67, 67, 175, 0.18), 0 0 56px 16px rgba(67, 67, 175, 0.08);
}
.tp-pb-main { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.tp-pb-textarea {
    width: 100%; box-sizing: border-box; border: none; outline: none; resize: none;
    font-family: inherit; font-size: var(--fs-md); line-height: 1.6;
    min-height: 96px; background: transparent; color: var(--text-primary);
}
/* Typewriter — hide the caret while the example text animates */
.tp-pb-textarea.tp-typing { caret-color: transparent; }
.tp-pb-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border-subtle);
    background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
}
.tp-pb-tools { display: flex; gap: var(--sp-4); }
.tp-pb-tool {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); color: var(--text-muted); cursor: default; opacity: 0.7;
}
.tp-pb-tool:hover { opacity: 1; }
.tp-pb-tool i { font-size: 12px; }

/* "Or select from the following tools" separator between the two paths */
.tp-or {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: var(--sp-10) 0 var(--sp-6);
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap;
}
.tp-or::before, .tp-or::after {
    content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}

/* Stage 2 — pattern selection.  Replaces the tool grid full-page so the
   user has one focused task at a time (no split-screen with the grid). */
.tp-stage[hidden] { display: none; }

.tp-back {
    background: none; border: none; padding: 4px 0;
    color: var(--text-muted); font-family: inherit; font-size: var(--fs-sm);
    cursor: pointer; margin-bottom: var(--sp-4);
}
.tp-back:hover { color: var(--accent); }

.tp-stage2-head {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    margin-bottom: var(--sp-5);
}
.tp-stage2-head .tp-title { margin-bottom: 4px; }
.tp-stage2-head .tp-subtitle { margin: 0; }
.tp-tile-logo--lg { width: 44px; height: 44px; font-size: 20px; border-radius: 10px; flex-shrink: 0; }

.tp-patterns {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: var(--sp-6);
}
.tp-patterns[hidden] { display: none; }
.tp-pattern-chip { /* extends .wzv-chip — same styling */ }

.tp-stage2-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding-top: var(--sp-5); margin-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}
.tp-stage2-summary { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── Stage 3 — Risk & governance card (.tp-setup-*) — U2 ─────────────
   Visual parity with the wizard's .wzv-setup-* but supports both the
   single-system layout (one big risk level + bullets) and the multi-
   system list shape (per-pattern row + tier on the right). */
.tp-setup {
    border: 1px solid var(--border-mid); border-radius: var(--r-lg);
    background: var(--bg-base);
    padding: var(--sp-6) var(--sp-8);
    margin-bottom: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-6);
}
.tp-setup-loading,
.tp-setup-error {
    font-size: var(--fs-sm); color: var(--text-muted); font-style: italic;
}
.tp-setup-error { color: var(--red); font-style: normal; }

/* U4 — confirm-or-edit assumptions, rendered above the risk verdict.
   Single pattern: three inline chip groups.  Multi-pattern: one
   collapsed row per pattern, accordion-style (one open at a time). */
.tp-assume { display: flex; flex-direction: column; gap: var(--sp-4); }
.tp-assume-note { font-size: var(--fs-sm); color: var(--text-muted); }
.tp-assume-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.tp-assume-label {
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-faint);
}
.tp-assume-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-assume-chip { text-align: left; }

.tp-assume-row { border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.tp-assume-row.is-open { border-color: var(--border-mid); }
.tp-assume-row-head {
    display: flex; align-items: center; gap: var(--sp-3); width: 100%;
    padding: 10px 14px; background: none; border: none; cursor: pointer;
    font-family: inherit; text-align: left;
}
.tp-assume-row-name {
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary);
    white-space: nowrap; flex-shrink: 0;
}
.tp-assume-row-sum {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: var(--fs-xs); color: var(--text-muted);
}
.tp-assume-row-toggle {
    flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
}
.tp-assume-row-body {
    display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-2) 14px var(--sp-4);
    border-top: 1px solid var(--border-subtle); margin-top: 2px; padding-top: var(--sp-4);
}
/* `display: flex` above overrides the browser's [hidden] default —
   restore it so collapsed rows actually collapse. */
.tp-assume-row-body[hidden] { display: none; }
.tp-setup-risk-level {
    font-size: 32px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
    color: var(--text-primary); margin: 0 0 var(--sp-3);
    text-transform: uppercase;
}
.tp-setup-risk--high .tp-setup-risk-level { color: var(--red); }
.tp-setup-risk-why {
    margin: 0; padding-left: 20px;
    font-size: var(--fs-sm); line-height: 1.55;
    color: var(--text-secondary);
}
.tp-setup-risk-why li { margin-bottom: 4px; }
.tp-setup-list { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.tp-setup-list-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-md);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}
.tp-setup-list-row:last-child { border-bottom: none; padding-bottom: 0; }
.tp-setup-list-name { color: var(--text-primary); font-weight: 500; }
.tp-setup-list-tier {
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.tp-setup-list-tier--high { color: var(--red); }
.tp-setup-summary {
    border-top: 1px solid var(--border-subtle); padding-top: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.tp-setup-line { font-size: var(--fs-md); color: var(--text-primary); }
.tp-setup-n { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.tp-setup-breakdown {
    margin: 0 0 0 var(--sp-5); padding: 0; list-style: none;
    font-size: var(--fs-sm); color: var(--text-secondary);
}
.tp-setup-breakdown li { margin-bottom: 4px; }

/* ── Stage 5 — Done (.tp-done-*) — U2 ───────────────────────────────
   Mirrors the wizard's done page (.wzv-done-*) — same hero check,
   same stat row pattern, same "what happens next" + footer.  Tuned
   for both single-system and multi-system payloads. */
.tp-stage--done { max-width: 720px; margin: 0 auto; }

.tp-done-hero {
    text-align: center;
    padding: var(--sp-6) 0 var(--sp-5);
    margin-bottom: var(--sp-5);
}
.tp-done-check {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: var(--sp-4);
}
.tp-done-eyebrow {
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}
.tp-done-title {
    font-size: 28px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}
.tp-done-sub {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm); color: var(--text-secondary);
}

.tp-done-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    background: var(--bg-base);
    margin-bottom: var(--sp-5);
}
.tp-done-stat { text-align: center; }
.tp-done-stat-num {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tp-done-stat-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: 4px;
}

.tp-done-table {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.tp-done-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
}
.tp-done-row:last-child { border-bottom: none; }
.tp-done-row-ref {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--text-muted);
}
.tp-done-row-name { color: var(--text-primary); font-weight: 500; }
.tp-done-row-tier {
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.tp-done-row-tier--high { color: var(--red); }
.tp-done-row-controls {
    font-size: var(--fs-xs); color: var(--text-muted);
    white-space: nowrap;
}

/* U4 — done-page drill-down: each system's risks + controls are
   inspectable in place, with detail-page links and the owner stated. */
.tp-done-inspect {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-5); margin-bottom: var(--sp-5);
}
.tp-done-toggle {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
    color: var(--accent);
}
.tp-done-open { font-size: var(--fs-xs); color: var(--text-muted); }
.tp-done-open:hover { color: var(--text-primary); }
.tp-done-row { cursor: pointer; }
.tp-done-row-name a { color: inherit; text-decoration: none; }
.tp-done-row-name a:hover { color: var(--accent); }
.tp-done-detail {
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4);
    background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
    text-align: left;
}
.tp-done-detail-owner { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3); }
.tp-done-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.tp-done-detail-col h5 {
    margin: 0 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
}
.tp-done-detail-col ul { margin: 0; padding: 0; list-style: none; }
.tp-done-detail-col li { font-size: var(--fs-xs); line-height: 1.7; }
.tp-done-detail-col a { color: var(--text-secondary); text-decoration: none; }
.tp-done-detail-col a:hover { color: var(--accent); text-decoration: underline; }

.tp-done-reused {
    font-size: var(--fs-sm); color: var(--text-muted);
    margin: 0 0 var(--sp-4);
    text-align: center;
    font-style: italic;
}

.tp-done-next {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.tp-done-next h4 {
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 var(--sp-3);
}
.tp-done-next ul {
    margin: 0; padding-left: 20px;
    font-size: var(--fs-sm); line-height: 1.55;
    color: var(--text-secondary);
}
.tp-done-next li { margin-bottom: 6px; }

.tp-done-foot {
    display: flex; justify-content: flex-end; gap: var(--sp-3);
}

/* Full-page loading takeover — shown after the user clicks
   "Set up governance" so the provisioning wait reads as a
   genuine intermediate step, not as the previous page being
   frozen.  Honours [hidden] explicitly so the inline element
   can hide on first load (CSS display flex would otherwise
   override the HTML attribute). */
.tp-loading[hidden] { display: none !important; }
.tp-loading {
    position: fixed; inset: 0;
    background: var(--bg-base);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-5);
    z-index: 1000;
    padding: var(--sp-6);
}
.tp-loading-spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--border-mid);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: tp-spin 0.9s linear infinite;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-loading-h {
    font-size: 22px; font-weight: 600;
    color: var(--text-primary);
    text-align: center; margin: 0;
}
.tp-loading-sub {
    font-size: 14px; color: var(--text-secondary);
    text-align: center; margin: 0;
    min-height: 22px; /* avoid layout jump as label rotates */
}
.tp-loading-hint {
    font-size: 12px; color: var(--text-muted);
    text-align: center; margin: var(--sp-3) 0 0; max-width: 360px;
}

/* Stage 3 — per-use-case ownership.  Visually the same as wizard step 6
   (.wzv-own-*) but tailored to one card per use case so multi-pattern
   selections can assign owners independently. */
.tp-own-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.tp-own-card {
    border: 1px solid var(--border-mid); border-radius: var(--r-lg);
    background: var(--bg-base); padding: var(--sp-4) var(--sp-5);
}
.tp-own-card-head {
    padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}
.tp-own-card-name { font-weight: 700; color: var(--text-primary); font-size: var(--fs-base); }

.tp-own-opt {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}
.tp-own-opt:last-child { border-bottom: none; }
.tp-own-opt input[type="radio"] { margin-top: 4px; accent-color: var(--accent); flex-shrink: 0; }
.tp-own-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-own-name { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); }
.tp-own-detail { font-size: var(--fs-xs); color: var(--text-muted); }
.tp-own-opt.is-selected .tp-own-name { color: var(--accent); }

.tp-owner-select, .tp-owner-input {
    margin-top: var(--sp-2); padding: 8px 12px;
    font-family: inherit; font-size: var(--fs-sm);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    background: var(--bg-base); color: var(--text-primary);
    max-width: 380px; width: 100%; box-sizing: border-box;
}
.tp-owner-select:focus, .tp-owner-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.08);
}
.tp-owner-select:disabled, .tp-owner-input:disabled {
    opacity: 0.5; cursor: not-allowed;
    background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
}

.tp-panel-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}
.tp-panel-summary { font-size: var(--fs-sm); color: var(--text-muted); }

/* Footer nav */
.wzv-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--sp-8); padding-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}
.wzv-footer .btn-outline {
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border-mid);
}
.wzv-footer .btn-outline:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ──────────────────────────────────────────────────────────────────────
   Onboarding chrome (Phase E) — .onb-*
   The first-tenant 6-screen flow.  Slim topbar (brand + 6-step
   progress bar, no nav), centred content column, calm white canvas.
   Per-screen styles for tools / patterns / appetite etc. land in
   each increment alongside the screen view.
   ────────────────────────────────────────────────────────────────────── */
/* Onboarding overrides body { overflow: hidden; height: 100vh; } from
   the app shell — that rule keeps the sidebar+main layout fixed, but
   onboarding is a single-column scroll-naturally page. */
body.onb-body {
    background: var(--bg-base);
    min-height: 100vh;
    height: auto;
    overflow: visible;
    overflow-x: hidden;
}
.onb-shell { min-height: 100vh; display: flex; flex-direction: column; }

.onb-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-base);
}
.onb-logo { display: flex; align-items: center; gap: var(--sp-2); }
.onb-logo-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bree Serif', serif; font-size: 18px; line-height: 1;
}
.onb-logo-text { font-family: 'Bree Serif', serif; font-size: 16px; color: var(--text-primary); }

.onb-progress {
    display: flex; align-items: center; gap: var(--sp-4);
}
.onb-progress-step {
    display: flex; align-items: center; gap: var(--sp-2);
    color: var(--text-muted);
    font-size: 13px; font-weight: 500;
}
.onb-progress-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-mid);
    transition: background 0.2s;
}
.onb-progress-step.is-done .onb-progress-dot { background: var(--text-secondary); }
.onb-progress-step.is-current .onb-progress-dot { background: var(--accent); }
.onb-progress-step.is-current { color: var(--text-primary); }
.onb-progress-step.is-done { color: var(--text-secondary); }

.onb-content {
    flex: 1;
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-6) var(--sp-12);
}

.onb-flash {
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: 14px;
}
.onb-flash--error {
    background: #FEF2F2; color: #991B1B;
    border: 1px solid #FECACA;
}

.onb-screen {
    display: flex; flex-direction: column; gap: var(--sp-8);
}
.onb-screen-head { text-align: left; }
.onb-step-label {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}
.onb-screen-title {
    font-size: 28px; font-weight: 600; line-height: 1.2;
    color: var(--text-primary); margin: 0 0 var(--sp-2);
}
.onb-screen-sub {
    font-size: 15px; color: var(--text-secondary); margin: 0;
    max-width: 640px;
}
.onb-screen-body { display: flex; flex-direction: column; gap: var(--sp-6); }

.onb-placeholder {
    padding: var(--sp-10) var(--sp-5);
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-md);
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Responsive — collapse progress labels on narrow screens */
@media (max-width: 720px) {
    .onb-progress-label { display: none; }
    .onb-progress { gap: var(--sp-3); }
    .onb-content { padding: var(--sp-6) var(--sp-4) var(--sp-10); }
    .onb-screen-title { font-size: 22px; }
}

/* ── Screen 1 — Tool picker (.onb-tools-*) ────────────────────────── */
.onb-tools-search {
    position: relative;
    display: flex; align-items: center;
}
.onb-tools-search > .ic {
    position: absolute; left: var(--sp-4);
    color: var(--text-muted); font-size: 14px;
    pointer-events: none;
}
.onb-tools-search-input {
    flex: 1;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 20px);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    font-size: 15px;
    background: var(--bg-base);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.onb-tools-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.10);
}

.onb-tools-sections { display: flex; flex-direction: column; gap: var(--sp-8); }
.onb-tools-section { display: flex; flex-direction: column; gap: var(--sp-4); }
/* HTML5 [hidden] is `display: none` at the user-agent level, but
   element rules like `.onb-tools-section { display: flex }` outrank
   it — the search filter would set .hidden = true but the tiles would
   stay on screen.  Restore explicitly. */
.onb-tools-section[hidden],
.onb-tool-tile[hidden] { display: none !important; }
.onb-tools-section-h {
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0;
}
.onb-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
}

.onb-tool-tile {
    position: relative;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    background: var(--bg-base);
    color: var(--text-primary);
    font-size: 14px; font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 56px;
}
.onb-tool-tile:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}
.onb-tool-tile.is-selected {
    border-color: var(--accent);
    background: rgba(67, 67, 175, 0.06);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.onb-tool-tile-logo {
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.onb-tool-tile.is-selected .onb-tool-tile-logo {
    background: var(--accent);
    color: #fff;
}
.onb-tool-tile-label { flex: 1; line-height: 1.3; }
.onb-tool-tile-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.onb-tool-tile.is-selected .onb-tool-tile-check { opacity: 1; }

.onb-tools-empty {
    padding: var(--sp-6);
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.onb-tools-empty a { color: var(--accent); text-decoration: underline; }

.onb-tools-escape {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-2);
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    align-self: flex-start;
    transition: color 0.15s, border-color 0.15s;
}
.onb-tools-escape:hover { color: var(--accent); border-bottom-color: var(--accent); }
.onb-tools-escape .ic { font-size: 12px; }

/* ── Shared onboarding footer (Continue + count) ─────────────────── */
.onb-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    gap: var(--sp-4);
}
.onb-footer-count {
    font-size: 14px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.onb-footer-cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.onb-footer-back {
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s;
}
.onb-footer-back:hover { color: var(--text-primary); }

/* ── Screen 2 — Pattern picker (.onb-pat-*) ──────────────────────── */
.onb-pat-cards { display: flex; flex-direction: column; gap: var(--sp-4); }

.onb-pat-card {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-4);
}
.onb-pat-card-head {
    display: flex; align-items: center; gap: var(--sp-3);
}
.onb-pat-card-logo {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 600;
    flex-shrink: 0;
}
.onb-pat-card-meta { flex: 1; }
.onb-pat-card-title {
    font-size: 17px; font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.onb-pat-card-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.onb-pat-chips {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.onb-pat-chip {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--bg-base);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.onb-pat-chip:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.onb-pat-chip.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.onb-pat-card-escape {
    align-self: flex-start;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.15s, border-color 0.15s;
}
.onb-pat-card-escape:hover { color: var(--accent); border-bottom-color: var(--accent); }

.onb-pat-empty {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}
.onb-pat-empty a { color: var(--accent); text-decoration: underline; }

/* ── Screen 3 — Risk appetite cards (.onb-app-*) ─────────────────── */
.onb-app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

.onb-app-card {
    position: relative;
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    /* Override the global button reset so left-alignment sticks. */
    font: inherit;
    color: inherit;
}
.onb-app-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}
.onb-app-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.18);
}
.onb-app-card.is-current {
    border-color: var(--accent);
    background: rgba(67, 67, 175, 0.04);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 1px 3px rgba(0,0,0,0.04);
}

.onb-app-card-top {
    display: flex; align-items: center; gap: var(--sp-2);
}
.onb-app-card-h {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}
.onb-app-card-rec {
    font-size: 11px; font-weight: 600;
    color: var(--accent);
    background: rgba(67, 67, 175, 0.10);
    padding: 2px var(--sp-2);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.onb-app-card-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.onb-app-card.is-current .onb-app-card-check { opacity: 1; }
.onb-app-card.is-current .onb-app-card-rec { display: none; }

.onb-app-card-pitch {
    font-size: 15px; font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}
.onb-app-card-practical {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
    flex: 1; /* pushes the meta rows to the bottom of every card */
}

.onb-app-card-bestfor {
    display: flex; flex-direction: column; gap: 2px;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border-subtle);
}
.onb-app-card-bestfor-l {
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.onb-app-card-bestfor-t {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.onb-app-card-stats {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 12px;
    color: var(--text-muted);
}
.onb-app-card-stats strong {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.onb-app-card-stat-sep { color: var(--text-muted); }
.onb-app-card.is-current .onb-app-card-stats strong { color: var(--accent); }

.onb-app-floor {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-muted);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: var(--sp-2);
}
.onb-app-floor .ic { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

@media (max-width: 920px) {
    .onb-app-grid { grid-template-columns: 1fr; }
}

/* ── Screen 4 — Stack reveal (.onb-stk-*) ────────────────────────── */
.onb-stk-summary {
    background: linear-gradient(180deg, #F6F6FB 0%, #FAFAFE 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-4);
}
.onb-stk-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
.onb-stk-summary-stat {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    padding-right: var(--sp-4);
}
.onb-stk-summary-stat:last-child { border-right: none; padding-right: 0; }
.onb-stk-summary-n {
    font-size: 32px; font-weight: 600;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.onb-stk-summary-l {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: var(--sp-2);
}
.onb-stk-summary-prose {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.onb-stk-cards { display: flex; flex-direction: column; gap: var(--sp-3); }

.onb-stk-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.onb-stk-card.is-open {
    border-color: var(--border-mid);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.onb-stk-card-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    border: none;
    background: none;
    cursor: pointer;
    gap: var(--sp-4);
    text-align: left;
}
.onb-stk-card-head:hover { background: var(--bg-hover); }
.onb-stk-card-head-main { flex: 1; min-width: 0; }
.onb-stk-card-title {
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--sp-2);
}
.onb-stk-card-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.onb-stk-meta-pill {
    padding: 2px var(--sp-2);
    background: var(--bg-muted);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
}
.onb-stk-meta-pill--risk-low { background: #EEF7EF; color: #2D6A31; }
.onb-stk-meta-pill--risk-medium { background: #FFF6E5; color: #8A5A0A; }
.onb-stk-meta-pill--risk-high { background: #FDECEC; color: #9A2A28; }

.onb-stk-card-counts {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.onb-stk-card-chev {
    color: var(--text-muted);
    transition: transform 0.15s;
}
.onb-stk-card.is-open .onb-stk-card-chev { transform: rotate(180deg); }

.onb-stk-card-body {
    display: none;
    padding: 0 var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    gap: var(--sp-4);
}
.onb-stk-card.is-open .onb-stk-card-body {
    display: flex; flex-direction: column;
    padding-top: var(--sp-4);
}
.onb-stk-card-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.onb-stk-card-section-h {
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.onb-stk-card-section-p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.onb-stk-card-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.onb-stk-card-list li {
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-muted);
    border-radius: var(--r-sm);
    font-size: 13px;
    display: flex; flex-direction: column; gap: 2px;
}
.onb-stk-card-list-n {
    font-weight: 500;
    color: var(--text-primary);
}
.onb-stk-card-list-d {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}
.onb-stk-card-list-more {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    background: transparent !important;
    padding: var(--sp-1) 0 !important;
}
.onb-stk-card-layers {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--sp-1);
}
.onb-stk-card-layers li {
    position: relative;
    padding-left: var(--sp-4);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.onb-stk-card-layers li::before {
    content: '';
    position: absolute;
    left: 4px; top: 9px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

@media (max-width: 720px) {
    .onb-stk-summary-stats { grid-template-columns: 1fr; gap: var(--sp-3); }
    .onb-stk-summary-stat { border-right: none; border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--sp-3); padding-right: 0; }
    .onb-stk-summary-stat:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ── Screen 5 — Team invite (.onb-tm-*) ──────────────────────────── */
.onb-tm-tabs {
    display: flex; gap: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}
.onb-tm-tab {
    background: none; border: none;
    padding: var(--sp-3) 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.onb-tm-tab:hover { color: var(--text-secondary); }
.onb-tm-tab.is-active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.onb-tm-panel { padding-top: var(--sp-5); }

.onb-tm-csv-drop {
    border: 2px dashed var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.onb-tm-csv-drop:hover, .onb-tm-csv-drop.is-dragover {
    border-color: var(--accent);
    background: rgba(67, 67, 175, 0.04);
}
.onb-tm-csv-drop .ic {
    font-size: 28px;
    color: var(--text-muted);
}
.onb-tm-csv-drop-h {
    font-size: 15px; font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}
.onb-tm-csv-drop-link {
    color: var(--accent);
    text-decoration: underline;
}
.onb-tm-csv-drop-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.onb-tm-csv-status {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-muted);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-secondary);
}

.onb-tm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.onb-tm-table th {
    text-align: left;
    padding: 0 0 var(--sp-3) 0;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-subtle);
}
.onb-tm-th-sub {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
}
.onb-tm-table td {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
    vertical-align: top;
}
.onb-tm-table td:first-child { padding-left: 0; }
.onb-tm-table td:last-child { padding-right: 0; width: 36px; }
.onb-tm-input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--bg-base);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.onb-tm-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.10);
}
.onb-tm-rowrm {
    width: 32px; height: 32px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.onb-tm-rowrm:hover { color: var(--text-primary); background: var(--bg-hover); }

.onb-tm-addrow {
    margin-top: var(--sp-4);
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: none; border: none;
    color: var(--accent);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.onb-tm-addrow:hover { text-decoration: underline; }

.onb-tm-summary {
    margin-top: var(--sp-4);
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Screen 6 — Ownership matrix (.onb-own-*) ────────────────────── */
.onb-own-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.onb-own-row {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
    align-items: center;
}
.onb-own-row-main { min-width: 0; }
.onb-own-row-title {
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--sp-2);
    overflow: hidden; text-overflow: ellipsis;
}
.onb-own-row-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.onb-own-pill {
    padding: 2px var(--sp-2);
    background: var(--bg-muted);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
}
.onb-own-pill--risk-low { background: #EEF7EF; color: #2D6A31; }
.onb-own-pill--risk-medium { background: #FFF6E5; color: #8A5A0A; }
.onb-own-pill--risk-high { background: #FDECEC; color: #9A2A28; }

.onb-own-row-picker { display: flex; flex-direction: column; gap: var(--sp-1); }
.onb-own-row-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.onb-own-row-select {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--bg-base);
    color: var(--text-primary);
    width: 100%;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.onb-own-row-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.10);
}
.onb-own-row-hint {
    font-size: 12px;
    color: var(--accent);
    margin-top: 2px;
}

@media (max-width: 720px) {
    .onb-own-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ── "Note an event" form (M4; D4 — lives in a slide panel now, the
   inline <details> disclosure styles are gone) ──────────────────── */
.sysv-trigger-form {
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.sysv-trigger-options {
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.sysv-trigger-option {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.sysv-trigger-option:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}
.sysv-trigger-option input[type="radio"] {
    margin: 2px 0 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.sysv-trigger-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(67, 67, 175, 0.04);
}
.sysv-trigger-option-body { flex: 1; }
.sysv-trigger-option-h {
    font-size: 14px; font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}
.sysv-trigger-option-s {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.sysv-trigger-notes {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 13px;
    background: var(--bg-base);
    color: var(--text-primary);
    resize: vertical;
    min-height: 56px;
}
.sysv-trigger-notes:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67, 67, 175, 0.10);
}
.sysv-trigger-foot {
    display: flex; justify-content: flex-end;
}

/* ── AI System detail — per-system appetite picker (Sprint J) ────── */
/* Same disclosure pattern as the trigger panel; 3 horizontal cards   */
/* with radio behaviour, current selection accent-ringed.             */
/* D4 — the appetite form lives in a slide panel now; the inline
   <details> disclosure styles (.sysv-app, summary, icon) are gone. */
.sysv-app-form {
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.sysv-app-intro {
    margin: 0; font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.sysv-app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
.sysv-app-card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    background: var(--bg-base);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sysv-app-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}
.sysv-app-card.is-current,
.sysv-app-card:has(input:checked) {
    border-color: var(--accent);
    background: rgba(67, 67, 175, 0.04);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
/* The radio is the actual input; hide it visually but keep it in
   the form so keyboard nav and submission work. */
.sysv-app-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sysv-app-card-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.sysv-app-card-h {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
}
.sysv-app-card-pitch {
    margin: 0;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
}
.sysv-app-card-practical {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.sysv-app-card-check {
    position: absolute;
    top: var(--sp-3); right: var(--sp-3);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.15s;
}
.sysv-app-card.is-current .sysv-app-card-check,
.sysv-app-card:has(input:checked) .sysv-app-card-check { opacity: 1; }

.sysv-app-foot {
    display: flex; justify-content: flex-end;
}

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

/* ── Hygiene — duplicate cleanup (.hyg-*) ───────────────────────── */
.hyg-group {
    margin-top: var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
    overflow: hidden;
}
.hyg-group-head {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-muted);
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-subtle);
}
.hyg-row {
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
}
.hyg-row:last-child { border-bottom: none; }
.hyg-row--keeper { background: rgba(67, 67, 175, 0.04); }
.hyg-row--candidate { cursor: pointer; }
.hyg-row--candidate:hover { background: var(--bg-hover); }
.hyg-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px; height: 16px;
}
.hyg-row-tag {
    display: inline-block;
    padding: 2px var(--sp-2);
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.hyg-row-name {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
}
.hyg-row-name:hover { color: var(--accent); }
.hyg-row-link {
    margin-left: var(--sp-2);
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: underline;
}
.hyg-row-meta {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

/* Filter pills shared across hygiene tools. */
.hyg-pill {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--bg-base);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.hyg-pill:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.hyg-pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.hyg-pill-n {
    font-size: 11px;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px var(--sp-2);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.hyg-pill.is-active .hyg-pill-n {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Review (.rv-*) — Phase N inc 1 full-page review surface ─────── */
.rv-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-6);
}

.rv-header {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}
.rv-header-eyebrow {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.rv-back { color: var(--text-muted); text-decoration: none; }
.rv-back:hover { color: var(--text-primary); }
.rv-header-main {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.rv-title { font-size: 24px; font-weight: 600; color: var(--text-primary); margin: 0; }
.rv-header-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rv-pill {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rv-pill--in-progress { background: rgba(67, 67, 175, 0.1); color: var(--accent); }
.rv-pill--done { background: #2D6A31; color: #fff; }
.rv-pill--ghost { background: var(--bg-muted); color: var(--text-secondary); }

.rv-progress { display: flex; align-items: center; gap: var(--sp-3); }
.rv-progress-bar {
    flex: 1; height: 6px;
    background: var(--bg-muted);
    border-radius: 999px; overflow: hidden;
}
.rv-progress-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.rv-progress-label {
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

.rv-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-6);
    align-items: start;
}
@media (max-width: 960px) { .rv-body { grid-template-columns: 1fr; } }
.rv-main { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Source email card (Phase H proof retention) */
.rv-source {
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent, #4343AF);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}
.rv-source-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.rv-source-head .ic { color: var(--accent, #4343AF); }
.rv-source-title { font-weight: 600; font-size: 14px; }
.rv-source-sub { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.rv-source-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 var(--sp-3); }
.rv-source-grid > div { display: flex; gap: 8px; font-size: 13px; }
.rv-source-grid dt { color: var(--text-muted); min-width: 72px; margin: 0; }
.rv-source-grid dd { margin: 0; color: var(--text-strong, #1a1a2e); word-break: break-word; }
.rv-source-read { margin-bottom: var(--sp-3); }
.rv-source-read summary { cursor: pointer; font-size: 13px; color: var(--accent, #4343AF); }
.rv-source-pre {
    white-space: pre-wrap; word-break: break-word;
    background: var(--bg-base); border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm); padding: var(--sp-3); margin-top: 8px;
    font-size: 12.5px; line-height: 1.5; max-height: 320px; overflow: auto;
}
.rv-source-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-source-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-base); border: 1px solid var(--border-strong, #d1d5db);
    border-radius: var(--r-sm); padding: 6px 12px; font-size: 13px; font-weight: 500;
    color: var(--text-strong, #1a1a2e); cursor: pointer; text-decoration: none;
}
.rv-source-btn:hover { border-color: var(--accent, #4343AF); color: var(--accent, #4343AF); }
.rv-source-btn:disabled { opacity: .6; cursor: default; }
.rv-source-saved { font-size: 12.5px; color: var(--green, #1a8f32); display: none; }

/* Evidence detail — document card */
.ev-file {
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--bg-overlay); border: 1px solid var(--border-subtle);
    border-radius: var(--r-md); padding: var(--sp-4);
}
.ev-await-note {
    display: flex; align-items: center; gap: 8px; margin: var(--sp-3) 0;
    padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary);
    background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
}
.ev-await-note i { color: var(--text-muted); }
.ev-file-icon {
    width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-bg, #ECECF9); color: var(--accent, #4343AF); font-size: 16px;
}
.ev-file-body { flex: 1; min-width: 0; }
.ev-file-name { font-size: 14px; font-weight: 600; color: var(--text-strong, #1a1a2e); word-break: break-word; }
.ev-file-meta { font-size: 12.5px; color: var(--text-muted); }

.rv-item {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
}
.rv-item-head {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--sp-3);
    align-items: start;
    margin-bottom: var(--sp-4);
}
.rv-item-num {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.rv-item-dot { width: 10px; height: 10px; border-radius: 50%; transition: background 0.2s; }
.rv-item-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 var(--sp-1) 0; }
.rv-item-guidance { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.55; }
.rv-item-state-label { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }

.rv-item-controls {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle);
}
.rv-item-controls--readonly { color: var(--text-secondary); }

.rv-outcome {
    border: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
}
.rv-outcome legend {
    grid-column: 1 / -1;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: var(--sp-1);
}
.rv-outcome-opt {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    cursor: pointer; font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.rv-outcome-opt:hover { border-color: var(--border-strong); }
.rv-outcome-opt input[type="radio"] { accent-color: var(--accent); }
.rv-outcome-opt:has(input:checked) { border-width: 2px; padding: calc(var(--sp-2) - 1px) calc(var(--sp-3) - 1px); }
.rv-outcome-opt--passed:has(input:checked) { border-color: #2D6A31; background: rgba(45, 106, 49, 0.04); color: #2D6A31; }
.rv-outcome-opt--needsinfo:has(input:checked) { border-color: #D97706; background: rgba(217, 119, 6, 0.04); color: #D97706; }
.rv-outcome-opt--failed:has(input:checked) { border-color: #9A2A28; background: rgba(154, 42, 40, 0.04); color: #9A2A28; }
.rv-outcome-opt:has(input:checked) span { font-weight: 600; }

.rv-notes-label {
    display: flex; flex-direction: column; gap: var(--sp-1);
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rv-notes {
    width: 100%; box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-family: inherit; font-size: 14px;
    color: var(--text-primary);
    text-transform: none; letter-spacing: 0;
    background: var(--bg-base); resize: vertical;
}
.rv-notes:focus { outline: none; border-color: var(--accent); }

.rv-item-foot { display: flex; justify-content: flex-end; min-height: 18px; }

/* ── Evidence attachment per review item — N3 polish ────────────── */
.rv-evidence {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding-top: var(--sp-2);
}
.rv-evidence-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rv-evidence-body {
    display: flex; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap;
}
.rv-evidence-attach {
    position: relative; cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 12px;
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-sm);
    font-size: 13px; color: var(--text-secondary);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rv-evidence-attach:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(67, 67, 175, 0.04);
}
.rv-evidence-attach input[type="file"] {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer;
}
.rv-evidence-hint {
    font-size: 11px; color: var(--text-muted); font-style: italic;
}
.rv-evidence-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 12px;
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    max-width: 100%;
}
.rv-evidence-chip:hover { border-color: var(--border-strong); }
.rv-evidence-chip i { color: var(--accent); font-size: 14px; }
.rv-evidence-name {
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 260px;
}
.rv-evidence-size {
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.rv-evidence-remove {
    background: none; border: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 16px; line-height: 1;
    color: var(--text-muted); cursor: pointer;
}
.rv-evidence-remove:hover { background: var(--bg-muted); color: var(--red); }

.rv-readonly-evidence { margin-top: var(--sp-2); }

/* ── N6 — Register snapshots tab + live tables + print styles ──── */
.regsnap-capture {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
    margin-bottom: var(--sp-6);
    overflow: hidden;
}
.regsnap-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}
.regsnap-row-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.regsnap-row-count {
    font-size: 12px; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.regsnap-row-actions { display: flex; gap: var(--sp-2); align-items: center; }
.regsnap-all {
    padding: var(--sp-3) var(--sp-4);
    display: flex; justify-content: flex-end;
    background: var(--bg-muted);
}
.regsnap-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.regsnap-table th {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-mid);
    font-weight: 600; color: var(--text-secondary);
}
.regsnap-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}
.regsnap-table a { color: var(--accent); text-decoration: none; font-weight: 500; }
.regsnap-checksum { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.reg-live-pill, .reg-snapshot-pill {
    display: inline-block; padding: 2px var(--sp-2);
    border-radius: 999px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.reg-live-pill { background: rgba(45, 106, 49, 0.1); color: #2D6A31; }
.reg-snapshot-pill { background: var(--bg-muted); color: var(--text-secondary); }

.reg-snapshot-banner {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: 13px; color: var(--text-secondary);
}
.reg-checksum-ok { color: #2D6A31; font-weight: 600; }
.reg-checksum-bad { color: var(--red); font-weight: 700; }

.reg-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.reg-toolbar-left { font-size: 13px; color: var(--text-muted); }
.reg-toolbar-right { display: flex; gap: var(--sp-2); align-items: center; }

.reg-table-wrap { overflow-x: auto; }
.reg-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.reg-table th {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-mid);
    font-weight: 600; color: var(--text-secondary);
    white-space: nowrap;
    position: sticky; top: 0;
}
.reg-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: top;
}
.reg-table tbody tr:hover { background: var(--bg-muted); }

/* Print header is hidden on screen, shown in print. */
.reg-print-header { display: none; }

@media print {
    /* Hide app chrome + interactive controls; show only the table. */
    .reg-noprint, .sidebar, .topbar, nav, .btn { display: none !important; }
    .reg-print-header {
        display: block;
        font-size: 12px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #000;
    }
    .reg-table { font-size: 10px; }
    .reg-table th { position: static; background: #eee; }
    .reg-table tbody tr:hover { background: none; }
    .detail-layout, .detail-main { padding: 0 !important; margin: 0 !important; }
}

/* ── N5 — Inbound email timeline (vendor reviews) ──────────────── */
.rv-timeline {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.rv-timeline-h {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: var(--sp-2);
}
.rv-timeline-empty {
    font-size: 13px; color: var(--text-muted); font-style: italic;
}
.rv-timeline-list { list-style: none; margin: 0; padding: 0; }
.rv-timeline-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.rv-timeline-row:last-child { border-bottom: none; }
.rv-timeline-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rv-timeline-subject {
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-timeline-subject:hover { color: var(--accent); text-decoration: underline; }
.rv-timeline-attach {
    background: none; border: none; cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--text-muted);
}
.rv-timeline-attach:hover { background: var(--bg-base); color: var(--accent); }

/* Right-rail vendor activity */
.rv-vendor-meta { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rv-vendor-meta li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.rv-vendor-meta li:last-child { border-bottom: none; }
.rv-vendor-meta-k { color: var(--text-muted); }
.rv-vendor-meta-v { color: var(--text-primary); }
.rv-vendor-meta-v[href] { color: var(--accent); text-decoration: none; }
.rv-vendor-meta-v[href]:hover { text-decoration: underline; }

.rv-side-timeline { list-style: none; margin: 0; padding: 0; }
.rv-side-timeline-row {
    display: grid; grid-template-columns: 46px 1fr;
    gap: var(--sp-2);
    padding: 4px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
}
.rv-side-timeline-row:last-child { border-bottom: none; }
.rv-side-timeline-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rv-side-timeline-subject {
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-side-timeline-subject:hover { color: var(--accent); }

/* ── N4.1 — Answer-aware confirm_* item rendering ─────────────────
   Shows the current value, Yes/No question, and a hidden edit area
   that reveals on No.  Chip grid for choice kinds mirrors the
   wizard step 3 visual language. */
.rv-confirm {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.rv-confirm-label {
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}
.rv-confirm-current {
    font-size: 14px; color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: var(--sp-3);
    white-space: pre-wrap;
}
.rv-confirm-current em { color: var(--text-muted); font-style: italic; }
.rv-confirm-current-chips {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.rv-confirm-empty { color: var(--text-muted); font-style: italic; font-size: 13px; }
.rv-confirm-chip {
    display: inline-block;
    padding: 6px 12px;
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rv-confirm-chip:hover { border-color: var(--border-strong); }
.rv-confirm-chip.is-selected,
.rv-confirm-chip--picked {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.rv-confirm-chip--picked { cursor: default; }
.rv-confirm-question {
    font-size: 14px; font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.rv-confirm-choice {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.rv-confirm-btn {
    padding: 6px 14px;
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rv-confirm-btn:hover { border-color: var(--accent); color: var(--accent); }
.rv-confirm-yes:hover  { color: #2D6A31; border-color: #2D6A31; }
.rv-confirm-no:hover   { color: var(--accent); border-color: var(--accent); }
.rv-confirm-flag:hover { color: #D97706; border-color: #D97706; }
/* Chosen answer stays highlighted (not just on hover). */
.rv-confirm-btn.is-selected { font-weight: 600; }
.rv-confirm-yes.is-selected  { background: #E6F4EA; color: #2D6A31; border-color: #2D6A31; }
.rv-confirm-no.is-selected   { background: var(--accent-subtle, #ECECF8); color: var(--accent); border-color: var(--accent); }
.rv-confirm-flag.is-selected { background: #FEF3E2; color: #D97706; border-color: #D97706; }
.rv-confirm-edit {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}
.rv-confirm-text {
    width: 100%; box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-family: inherit; font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-base);
    resize: vertical;
    margin-bottom: var(--sp-2);
}
.rv-confirm-text:focus { outline: none; border-color: var(--accent); }
.rv-confirm-chip-grid {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

/* ── AI system unresolved-trigger rows — N4 entry point ─────────── */
/* D4 — .sysv-trigger-pending* removed: unresolved triggers surface in
   the needs-attention strip now. */
.rv-save-status { font-size: 12px; color: var(--text-muted); font-style: italic; }
.rv-save-status--ok { color: #2D6A31; font-style: normal; }
.rv-save-status--pending { color: var(--text-muted); }
.rv-save-status--error { color: #9A2A28; }

.rv-readonly-outcome { display: flex; gap: var(--sp-3); align-items: baseline; font-size: 13px; }
.rv-readonly-label {
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-size: 11px;
}
.rv-readonly-value { color: var(--text-primary); }
.rv-readonly-notes {
    margin-top: var(--sp-2);
    padding: var(--sp-3); background: var(--bg-muted);
    border-radius: var(--r-sm); font-size: 13px;
    color: var(--text-secondary); line-height: 1.55;
}

.rv-signoff {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.rv-signoff-label {
    display: flex; flex-direction: column; gap: var(--sp-2);
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.rv-signoff-label textarea {
    width: 100%; box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-family: inherit; font-size: 14px;
    color: var(--text-primary); background: var(--bg-base); resize: vertical;
}
.rv-signoff-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-3); }
.rv-signoff-hint { font-size: 12px; color: var(--text-muted); font-style: italic; }
.btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

.rv-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.rv-side-block {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}
.rv-side-h {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 var(--sp-3) 0;
}
.rv-side-prose { margin: 0 0 var(--sp-2) 0; font-size: 14px; }
.rv-side-prose a { color: var(--text-primary); font-weight: 500; }
.rv-side-muted { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.rv-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rv-side-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; gap: var(--sp-2); }
.rv-side-row a { color: var(--text-primary); text-decoration: none; }
.rv-side-row a:hover { color: var(--accent); }
.rv-side-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── Guided setup wizard (.su-*) ─────────────────────────────────────── */
.su-wizard { max-width: 1040px; margin: 0 auto; }
.su-header { margin-bottom: var(--sp-6); }
.su-back { display: inline-block; font-size: var(--fs-xs); color: var(--text-muted); text-decoration: none; margin-bottom: var(--sp-3); }
.su-back:hover { color: var(--accent); }
.su-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.su-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--sp-4); line-height: 1.55; }
.su-progress { display: flex; align-items: center; gap: var(--sp-3); }
.su-progress-bar { flex: 1; height: 6px; background: var(--border-subtle); border-radius: 3px; overflow: hidden; }
.su-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.su-progress-label { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

.su-empty { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-6); border: 1px dashed var(--border-mid); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-sm); }

.su-body { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 860px) { .su-body { grid-template-columns: 1fr; } }

.su-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--sp-4); }
.su-rail-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: none; background: none; border-radius: var(--r-sm); cursor: pointer; text-align: left; width: 100%; transition: background 0.12s; }
.su-rail-item:hover { background: var(--bg-hover); }
.su-rail-item--active { background: var(--accent-subtle, #ECECF8); }
.su-rail-dot { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-mid); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.su-rail-item--active .su-rail-dot { border-color: var(--accent); color: var(--accent); }
.su-rail-item--done .su-rail-dot { background: var(--green); border-color: var(--green); color: #fff; }
/* Awaiting an assigned owner — amber, distinct from not-started and done. */
.su-rail-item--assigned .su-rail-dot { background: var(--amber, #d97706); border-color: var(--amber, #d97706); color: #fff; font-size: 11px; }
.su-rail-item--assigned .su-rail-name { color: var(--text-secondary); }
/* "This control is owned by X" note above the setup owner dropdown. */
.su-owner-current { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--green, #1A8F32); margin: 4px 0 8px; }
.su-rail-name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-rail-item--active .su-rail-name { font-weight: 600; }
.su-rail-item--done .su-rail-name { color: var(--text-muted); }
.su-rail-flag { color: var(--red); font-size: 11px; flex-shrink: 0; }

.su-pane { min-height: 320px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--sp-6); background: var(--bg-card, #fff); }
.su-loading, .su-error { color: var(--text-muted); font-size: var(--fs-sm); padding: var(--sp-6) 0; text-align: center; }
.su-error { color: var(--red); }

.su-step-head { margin-bottom: var(--sp-4); }
.su-step-eyebrow { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: var(--sp-1); }
.su-step-eyebrow a { color: var(--text-muted); text-decoration: none; }
.su-step-eyebrow a:hover { color: var(--accent); }
.su-step-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); margin: 0; }

.su-what { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-5); }
.su-what p { margin: 0 0 var(--sp-2); }
.su-what h2, .su-what h3, .su-what h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin: var(--sp-3) 0 var(--sp-1); }
.su-what ul, .su-what ol { margin: 0 0 var(--sp-2) var(--sp-4); }

.su-field { margin-bottom: var(--sp-5); }
.su-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.su-optional, .su-hint { font-weight: 400; color: var(--text-faint); font-size: var(--fs-xs); }
.su-gate { float: right; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }

.su-pills { display: flex; flex-direction: column; gap: var(--sp-2); }
.su-task { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.su-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-mid); border-radius: 999px; background: none; cursor: pointer; font-size: var(--fs-sm); color: var(--text-primary); transition: all 0.12s; }
.su-pill:hover { border-color: var(--accent); }
.su-pill .ic { font-size: 11px; color: var(--text-faint); }
.su-pill--done { background: var(--accent); border-color: var(--accent); color: #fff; }
.su-pill--done .ic { color: #fff; }
.su-pill--na { background: var(--bg-hover); color: var(--text-muted); text-decoration: line-through; }
.su-pill-opt { font-size: var(--fs-2xs); color: var(--text-faint); }
.su-pill--done .su-pill-opt { color: rgba(255,255,255,0.8); }
.su-na { border: none; background: none; font-size: var(--fs-2xs); color: var(--text-faint); cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); }
.su-na:hover, .su-na--active { color: var(--text-secondary); background: var(--bg-hover); }
.su-task-guide { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-muted); padding-left: var(--sp-3); }
.su-tasks-empty { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); }

.su-evidence { margin-bottom: var(--sp-5); }
.su-evidence p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
/* Phase 4a — "Generate this document" card on a generatable control step. */
.su-generate { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent-subtle, #ECECF8); text-decoration: none; transition: background .12s; }
.su-generate:hover { background: #E2E2F4; }
.su-generate-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent); color: #fff; flex: none; }
.su-generate-body { display: flex; flex-direction: column; flex: 1; }
.su-generate-title { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-dim, #2E2E8A); }
.su-generate-sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 1px; }
.su-generate-go { color: var(--accent); font-size: 13px; }
/* 4c — organisation-level document already exists; cover this system in one click. */
.su-covered { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-overlay, #f6f6fb); }
.su-covered-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--success, #1a7f4b); color: #fff; flex: none; }
.su-covered-title { font-weight: 600; font-size: var(--fs-md); margin-bottom: 2px; }
.su-covered-sub { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.su-covered-actions { display: flex; align-items: center; gap: var(--sp-3); }
.su-covered-link { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.su-covered-link:hover { color: var(--accent-hover); }
/* Phase 4b — acknowledgement roster (evidence page) + share panel. */
.ack-summary { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--sp-3); }
.ack-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.ack-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); }
.ack-name { font-size: var(--fs-sm); }
.ack-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; }
.ack-badge--ok { color: var(--success, #1a7f4b); }
.ack-badge--wait { color: var(--text-muted); }
.share-recipients { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 360px; overflow-y: auto; }
.share-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); cursor: pointer; }
.share-row:hover { background: var(--bg-overlay, #f6f6fb); }
.share-name { flex: 1; font-size: var(--fs-sm); }
.share-tag { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.share-tag--ok { color: var(--success, #1a7f4b); }
.panel-help { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--sp-3); line-height: 1.5; }
.share-invite { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.share-invite .panel-label { margin-bottom: var(--sp-1); }
.share-invite-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); line-height: 1.5; }
/* Stacked radio rows (material/minor choice in document panels). */
.docgen-radio { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); margin-top: var(--sp-2); cursor: pointer; }
.docgen-radio input { margin-top: 3px; flex: none; }
.docgen-radio span { color: var(--text-secondary); }
.docgen-radio strong { color: var(--text-primary); font-weight: 600; }
.su-tmpls { display: flex; flex-direction: column; gap: var(--sp-2); }
.su-tmpl { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.su-tmpl-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.su-tmpl-link .ic { font-size: 13px; }
.su-tmpl-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.su-textarea, .su-select, .su-input { width: 100%; font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary); border: 1px solid var(--border-mid); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); background: #fff; }
.su-textarea:focus, .su-select:focus, .su-input:focus { outline: none; border-color: var(--accent); }
.su-select { height: 38px; }
/* Inline "invite someone new" row under the owner dropdown. */
.su-invite { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.su-invite .su-input { flex: 1; min-width: 200px; }
.su-invite .btn { flex-shrink: 0; }
.su-invite-hint { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-muted); }

.su-perm { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg-hover); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); margin-bottom: var(--sp-4); }
.su-gatemsg { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--amber, #B45309); margin-bottom: var(--sp-3); }

.su-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.su-footer-right { display: flex; align-items: center; gap: var(--sp-2); }

.su-done-banner { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--green); margin-bottom: var(--sp-2); }
.su-done-note { font-size: var(--fs-sm); color: var(--text-secondary); font-style: italic; margin-bottom: var(--sp-2); }
.su-done-owner { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--sp-2); }

.su-finish { text-align: center; padding: var(--sp-8) var(--sp-4); }
.su-finish-mark { font-size: 36px; color: var(--green); margin-bottom: var(--sp-3); }
.su-finish-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-1); }
.su-finish-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.su-finish-actions { display: flex; gap: var(--sp-2); justify-content: center; }