/* =============================================================
   Intent — Enterprise Design System
   Blue + Gray  |  No purple  |  Corporate, credible, structured
   ============================================================= */

:root {
    /* ---- Typography ---- */
    --font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace;

    /* ---- Surfaces ---- */
    --bg-app:     #edf0f4;
    --bg-surface: #ffffff;
    --bg-subtle:  #f0f3f7;
    --bg-muted:   #e8ecf1;

    /* ---- Text ---- */
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;
    --text-faint:     #94a3b8;

    /* ---- Borders ---- */
    --border-default: #d1d9e2;
    --border-strong:  #94a3b8;
    --border-subtle:  #e2e8f0;

    /* ---- Navigation ---- */
    --nav-bg:   #0b1b33;
    --nav-text: #c8d6e5;

    /* ---- Interactive ---- */
    --interactive:       #2563eb;
    --interactive-hover: #1d4ed8;
    --interactive-soft:  #dbeafe;
    --interactive-muted: #eff6ff;

    /* ---- CTA (sparingly) ---- */
    --cta:       #0891b2;
    --cta-hover: #0e7490;

    /* ---- Semantic ---- */
    --danger:  #b91c1c;
    --success: #15803d;
    --warning: #b45309;

    /* ---- Radii ---- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.10);

    /* ---- Component palette ---- */
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-400: #4ade80;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;

    --amber-50:  #fffbeb;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;

    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;

    --teal-50:  #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-600: #0d9488;
    --teal-800: #115e59;

    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
}

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

body {
    font-family: var(--font-sans);
    margin: 0;
    background: var(--bg-app);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force all form elements to inherit the global font */
button, input, select, textarea {
    font-family: inherit;
}

/* =============================================================
   Tier 1: Site Header
   ============================================================= */
.site-header {
    background: var(--nav-bg);
    color: white;
    padding: 0 2rem;
    height: 48px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 110;
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
.site-logo {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: white;
    text-decoration: none;
}
.site-logo:hover { opacity: 0.9; }
.site-logo-img {
    height: 26px;
    width: auto;
    display: block;
}
/* =============================================================
   Tier 2a: Platform Bar (superadmin platform-scope pages)
   ============================================================= */
.platform-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    padding: 0 1.5rem;
}
.platform-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 40px;
}
.platform-bar-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    text-decoration: none;
}
.platform-bar-label:hover { color: var(--interactive); }
.platform-bar-nav {
    display: flex;
    gap: 0;
}
.platform-bar-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.55rem 0.85rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.platform-bar-link:hover {
    color: var(--text-primary);
}
.platform-bar-link--current {
    color: var(--interactive);
    border-bottom-color: var(--interactive);
    font-weight: 600;
}
/* User menu in site header */
.site-user {
    display: flex; align-items: center; gap: 0.6rem;
    margin-left: auto; padding-left: 1rem;
    font-size: 0.82rem; color: rgba(255,255,255,0.7);
}
.site-user-company {
    font-weight: 600; color: rgba(255,255,255,0.5);
    padding-right: 0.4rem; border-right: 1px solid rgba(255,255,255,0.15);
}
.site-user-name { font-weight: 500; color: rgba(255,255,255,0.85); }
.site-user-badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--amber-500); color: #000;
    padding: 0.1rem 0.4rem; border-radius: 3px;
}
.site-user-logout {
    color: rgba(255,255,255,0.55); text-decoration: none;
    font-size: 0.78rem; font-weight: 500;
    padding-left: 0.4rem; border-left: 1px solid rgba(255,255,255,0.15);
}
.site-user-logout:hover { color: #fff; }

/* Superadmin header breadcrumb */
.sa-company-switch-btn {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; cursor: pointer;
    color: rgba(255,255,255,0.55); font-size: 0.78rem; font-weight: 500;
    text-decoration: none;
}
.sa-company-switch-btn:hover { color: #fff; text-decoration: underline; }
.sa-context-sep {
    color: rgba(255,255,255,0.25); font-size: 0.78rem;
    margin: 0 0.1rem;
}

/* =============================================================
   Tier 2: Wizard Bar
   ============================================================= */
.wizard-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    padding: 0 2rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 48px;
    z-index: 100;
}
.wizard-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.wizard-step--home {
    border-right: 1px solid var(--border-light, #ddd);
    padding-right: 0.7rem;
    margin-right: 0.2rem;
}
.wizard-initiative-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.wizard-steps {
    display: flex;
    gap: 2px;
}
.wizard-step {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.wizard-step:hover {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.wizard-step.active {
    background: var(--interactive);
    color: white;
    font-weight: 600;
}
.wizard-step.step--confirmed {
    color: var(--text-secondary);
    font-weight: 600;
    background: transparent;
    border-color: transparent;
}
.wizard-step.step--confirmed::after {
    content: " \2713";
    color: var(--green-600);
    font-size: 0.7rem;
}
.wizard-step.step--confirmed.active {
    background: var(--interactive);
    color: white;
    border-color: transparent;
}
.wizard-step.step--confirmed.active::after {
    color: rgba(255,255,255,0.7);
}
.wizard-step.step--skipped {
    color: var(--text-faint);
}
.wizard-step.step--diverged {
    background: var(--amber-50);
    color: var(--amber-800);
    border: 1px solid var(--amber-500);
}
.wizard-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--border-default);
    margin: 0 0.35rem;
    align-self: center;
}
.wizard-step--review {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Wizard context zone */
.wiz-context {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1rem;
    border-right: 1px solid var(--border-default);
    min-width: 120px;
    flex-shrink: 0;
    line-height: 1.25;
}
.wiz-context-company {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.wiz-context-initiative {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Divergence alert */
.wiz-alert-bar {
    font-size: 0.78rem;
    padding: 0.25rem 2rem;
    border-top: 1px solid var(--border-default);
    text-align: center;
}
.wiz-alert-bar--amber {
    background: var(--amber-50);
    color: var(--amber-800);
}

/* =============================================================
   Layout & Typography
   ============================================================= */
main {
    max-width: 1400px;
    margin: 1.25rem auto;
    padding: 1.75rem 2.5rem;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

h2 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.page-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}
.page-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-subtle);
}
.page-title-row .page-title {
    margin: 0;
}

/* Toolbar row — Actions + Save below the title border */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0;
}
.page-toolbar > span {
    flex: 1;
    text-align: center;
}
button.btn-save,
button[type="submit"].btn-save {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.page-toolbar .btn-save {
    margin-left: auto;
}
button.btn-save:hover,
button[type="submit"].btn-save:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}
/* Dirty state — amber/gold save button */
button.btn-save.btn-save--dirty,
button[type="submit"].btn-save.btn-save--dirty,
button.btn-save--dirty {
    background: #d97706 !important;
    color: #fff !important;
    border-color: #b45309 !important;
}
button.btn-save.btn-save--dirty:hover,
button[type="submit"].btn-save.btn-save--dirty:hover,
button.btn-save--dirty:hover {
    background: #b45309 !important;
    border-color: #92400e !important;
}

/* Top action bar — light strip, not blocky */
.actions-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
}

/* Section heading */
.section-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.6rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}
.section-sub {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* =============================================================
   Form Fields
   ============================================================= */
.field { margin-bottom: 1rem; }

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.field .soft {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.field input[type="text"],
.field input[type="url"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.field select[multiple] { height: auto; }

.field .hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.radio-option {
    display: block;
    padding: 0.4rem 0;
    cursor: pointer;
    font-size: 0.875rem;
}
.radio-option input[type="radio"] { margin-right: 0.5rem; }

/* =============================================================
   Buttons — Hierarchy
   ============================================================= */

/* Shared button base */
/* Bottom action bar — matches top strip */
.actions {
    margin-top: 1.5rem; display: flex; gap: 0.5rem; align-items: center;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
}

/* PRIMARY — forward/proceed only */
button[type="submit"], a.button {
    background: var(--interactive);
    color: white;
    border: 1px solid var(--interactive);
    padding: 0.5rem 1.25rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
button[type="submit"]:hover, a.button:hover {
    background: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

/* SECONDARY — Save, Back, standard actions */
a.button-secondary, button.button-secondary, button[type="submit"].button-secondary {
    color: var(--text-secondary);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.5rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
a.button-secondary:hover, button.button-secondary:hover, button[type="submit"].button-secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

/* Unsaved-changes highlight — needs !important to override contextual button styles */
button.btn-unsaved,
button[type="submit"].btn-unsaved,
.ai-draft-bar button.btn-unsaved,
.actions button.btn-unsaved,
.card-actions-bar button.btn-unsaved,
.page-toolbar button.btn-unsaved {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}
button.btn-unsaved:hover,
button[type="submit"].btn-unsaved:hover,
.ai-draft-bar button.btn-unsaved:hover,
.actions button.btn-unsaved:hover,
.card-actions-bar button.btn-unsaved:hover,
.page-toolbar button.btn-unsaved:hover {
    background: #d97706 !important;
    color: #fff !important;
    border-color: #d97706 !important;
}

/* VALIDATE — green accent */
.btn-validate {
    background: var(--bg-surface);
    color: var(--green-700);
    border: 1px solid var(--green-400);
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-validate:hover { background: var(--green-50); border-color: var(--green-600); }
.btn-validate:disabled { opacity: 0.55; cursor: wait; }

/* REMOVE — destructive, restrained */
.btn-remove {
    flex-shrink: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    color: var(--text-faint);
    font-size: 0.75rem;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}
.btn-remove:hover {
    color: var(--red-600);
    border-color: var(--red-600);
}

/* ADD — dashed */
.btn-add {
    background: none;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: inherit;
    padding: 0.35rem 0.85rem;
    margin-top: 0.35rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-add:hover {
    background: var(--interactive-muted);
    color: var(--interactive);
    border-color: var(--interactive);
}

/* SAVE DRAFT — matches secondary exactly */
.btn-save-draft {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
}
.btn-save-draft:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

/* SMALL utility button */
.btn-small {
    font-size: 0.75rem;
    font-family: inherit;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-small:hover { background: var(--bg-subtle); }

/* Danger link-button */
.btn-link-danger {
    background: none;
    border: none;
    color: var(--red-600);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    text-decoration: underline;
}
.btn-link-danger:hover { color: var(--red-700); }

/* =============================================================
   Banners & Notices
   ============================================================= */
.context-banner {
    background: var(--interactive-muted);
    border-left: 3px solid var(--interactive);
    padding: 0.65rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.stub-notice {
    background: var(--amber-50);
    border: 1px solid var(--amber-500);
    border-radius: var(--radius-sm);
    padding: 1rem;
    color: var(--amber-800);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}
.stub-notice p { margin: 0 0 0.4rem 0; }
.stub-notice p:last-child { margin-bottom: 0; }

.banner-warning {
    background: var(--amber-50);
    border: 1px solid var(--amber-500);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--amber-800);
}

.banner-success {
    background: var(--green-50);
    border: 1px solid var(--green-600);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--green-800);
}

/* Validation errors */
.error-msg { color: var(--red-600); font-size: 0.78rem; margin-top: 0.25rem; }
.field.has-error input,
.field.has-error select { border-color: var(--red-600); }

/* =============================================================
   AI Draft Bar — Toolbar Buttons
   ============================================================= */
.ai-draft-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1rem 0;
    flex-wrap: wrap;
}
.ai-draft-bar button {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0.3rem 0.65rem;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.ai-draft-bar button:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}
.ai-draft-bar button:disabled { opacity: 0.55; cursor: wait; }

/* ---- Actions dropdown ---- */
.actions-dropdown {
    position: relative;
    display: inline-block;
}
.actions-dropdown-toggle {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0.35rem 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
}
.actions-dropdown-toggle:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}
.actions-dropdown-toggle::after {
    content: " \25BE";
    font-size: 0.7rem;
}
.actions-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 220px;
    margin-top: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.25rem 0;
}
.actions-dropdown.open .actions-dropdown-menu { display: block; }
.actions-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.actions-dropdown-item:hover {
    background: var(--bg-subtle);
}
.actions-dropdown-sep {
    border-top: 1px solid var(--border-subtle);
    margin: 0.25rem 0;
}
.actions-dropdown-heading {
    display: block;
    padding: 0.3rem 0.75rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

/* Flash feedback messages in ai-draft-bar */
.flash-msg {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    transition: opacity 1.5s ease;
}
.flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.flash-info    { background: #e2e8f0; color: #2d3748; border: 1px solid #cbd5e0; }
.flash-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.flash-fade    { opacity: 0; }

/* Inline AI feedback */
.ai-feedback {
    font-size: 0.82rem;
    line-height: 1.45;
    margin-top: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
}
.fb-strong {
    background: var(--green-50);
    border-left-color: var(--green-600);
    color: var(--green-800);
}
.fb-needs-work {
    background: var(--amber-50);
    border-left-color: var(--amber-500);
    color: var(--amber-800);
}
.fb-empty {
    background: var(--red-50);
    border-left-color: var(--red-600);
    color: var(--red-800);
}

#ai-draft-msg { font-size: 0.75rem; color: var(--text-faint); }

/* Toolbar status text — e.g. "50 story(ies) loaded" */
.toolbar-status {
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-left: auto;
    white-space: nowrap;
}

/* AI suggestion block */
.ai-suggestion {
    background: var(--interactive-muted);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
}
.ai-suggestion p { margin: 0 0 0.4rem; white-space: pre-wrap; color: var(--text-primary); }
.ai-suggestion button {
    font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm);
    cursor: pointer; border: 1px solid var(--interactive); background: var(--interactive);
    color: #fff; margin-right: 0.3rem; transition: background 0.15s;
    font-family: inherit;
}
.ai-suggestion button:hover { background: var(--interactive-hover); }
.ai-suggestion button.btn-dismiss {
    background: var(--bg-surface); color: var(--text-muted); border-color: var(--border-default);
}
.ai-suggestion button.btn-dismiss:hover { background: var(--bg-subtle); }

/* AI-filled indicator */
.ai-filled { color: var(--interactive) !important; }

/* Inline AI suggestion for a specific field */
.ai-field-suggestion {
    background: var(--interactive-muted);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.65rem;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    line-height: 1.45;
}
.ai-field-suggestion .afs-reason {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.2rem;
}
.ai-field-suggestion .afs-value {
    color: var(--text-primary);
    white-space: pre-wrap;
    margin-bottom: 0.3rem;
}
.ai-field-suggestion .afs-actions {
    display: flex;
    gap: 0.3rem;
}
.ai-field-suggestion .afs-accept {
    font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
    cursor: pointer; border: 1px solid var(--interactive); background: var(--interactive);
    color: #fff; font-family: inherit; transition: background 0.15s;
}
.ai-field-suggestion .afs-accept:hover { background: var(--interactive-hover); }
.ai-field-suggestion .afs-dismiss {
    font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
    cursor: pointer; background: var(--bg-surface); color: var(--text-muted);
    border: 1px solid var(--border-default); font-family: inherit; transition: background 0.15s;
}
.ai-field-suggestion .afs-dismiss:hover { background: var(--bg-subtle); }

/* =============================================================
   Initiative — Read / Edit Mode
   ============================================================= */
#initiative-form:not(.editing) input[type="text"],
#initiative-form:not(.editing) textarea,
#initiative-form:not(.editing) select,
#initiative-form:not(.editing) .init-edit-only { display: none; }
#initiative-form.editing .init-read-text { display: none; }
.init-read-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin: 0;
    padding: 0.25rem 0;
}
.init-read-text.muted { color: var(--text-muted); font-style: italic; }
.init-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.25rem 0; }
.init-chips .chip {
    background: var(--bg-subtle); color: var(--text-secondary); font-size: 0.78rem;
    padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
/* Larger labels in read mode */
#initiative-form:not(.editing) .field > label { font-size: 0.92rem; color: var(--text-primary); }
/* Hide required asterisks in read mode */
#initiative-form:not(.editing) .req-star { display: none; }

/* =============================================================
   Row-based Lists
   ============================================================= */
.row-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.row-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.row-fields {
    display: flex;
    flex: 1;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.row-fields .r-grow {
    flex: 1;
    min-width: 120px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
}
.row-fields .r-type {
    min-width: 130px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
}
.row-fields .r-full {
    flex: 1;
    width: 100%;
    min-width: 200px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
}
.row-fields .r-grow:focus,
.row-fields .r-type:focus,
.row-fields .r-full:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* =============================================================
   Validation
   ============================================================= */
.validation-summary {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
}
.validation-summary .vs-pass { color: var(--green-700); font-weight: 600; }
.validation-summary .vs-issues { color: var(--amber-600); font-weight: 600; }

.process-validation-feedback {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--amber-50);
    border-left: 3px solid var(--amber-500);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.process-validation-feedback .vf-item { margin-bottom: 0.3rem; line-height: 1.4; }
.process-validation-feedback .vf-item:last-child { margin-bottom: 0; }
.process-validation-feedback .vf-field { font-weight: 600; text-transform: capitalize; }
.process-validation-feedback .vf-error { color: var(--red-600); }
.process-validation-feedback .vf-warning { color: var(--amber-600); }

.validation-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    background: transparent; border: none; border-radius: var(--radius-sm);
    padding: 0.2rem 0.4rem; font-size: 0.65rem; font-weight: 600;
    color: var(--amber-600); margin-left: 0.4rem; vertical-align: middle;
}
.validation-badge--pass {
    color: var(--green-700);
}
.validation-badge--none {
    color: var(--text-faint);
}
.btn-approve {
    background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 0.75rem; font-family: inherit; font-weight: 500; cursor: pointer;
    padding: calc(0.3rem - 2px) 0.65rem; white-space: nowrap; vertical-align: middle; line-height: 1.4; align-self: center;
    transition: background 0.15s, border-color 0.15s;
}
.btn-approve:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn-accept-issue {
    background: none; border: 1px solid var(--green-200); border-radius: var(--radius-sm);
    color: var(--green-700); font-size: 0.68rem; font-weight: 600; cursor: pointer;
    padding: 0.05rem 0.35rem; margin-left: 0.4rem; vertical-align: middle;
}
.btn-accept-issue:hover { background: var(--green-50); border-color: var(--green-400); }
.process-validation-feedback li.issue-accepted { display: none; }

/* Card bottom actions bar (expanded view) */
.card-actions-bar {
    display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end;
    padding-top: 0.75rem; margin-top: 0.5rem; border-top: 1px solid var(--border-subtle);
}
.card-actions-bar button {
    box-sizing: border-box; line-height: 1.4; font-size: 0.75rem; font-family: inherit;
    padding: 0.25rem 0.7rem; border-radius: var(--radius-sm);
}
.card-actions-bar .card-status-select {
    width: auto;
    font-size: 0.75rem; font-family: inherit; font-weight: 500;
    padding: 0.25rem 0.5rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    background: var(--bg-surface); cursor: pointer;
}
.card-actions-bar .btn-card-save {
    background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.75rem; font-family: inherit; font-weight: normal; padding: 0.25rem 0.7rem; cursor: pointer;
    color: var(--text-secondary); transition: color 0.15s, border-color 0.15s;
}
.card-actions-bar .btn-card-save:hover { color: var(--interactive); border-color: var(--border-strong); }
.card-actions-bar .btn-card-edit {
    background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.75rem; font-family: inherit; padding: 0.25rem 0.7rem; cursor: pointer;
    color: var(--text-secondary); transition: color 0.15s, border-color 0.15s;
}
.card-actions-bar .btn-card-edit:hover { color: var(--interactive); border-color: var(--border-strong); }
.card-actions-bar .btn-card-delete {
    background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.75rem; font-family: inherit; padding: 0.25rem 0.7rem; cursor: pointer;
    color: var(--red-500); transition: color 0.15s, border-color 0.15s;
}
.card-actions-bar .btn-card-delete:hover { color: var(--red-700); border-color: var(--red-400); }
.card-actions-bar .btn-card-aifill {
    background: var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.75rem; font-family: inherit; padding: 0.25rem 0.7rem; cursor: pointer;
    color: var(--text-secondary); transition: color 0.15s, border-color 0.15s;
}
.card-actions-bar .btn-card-aifill:hover:not(:disabled) { color: var(--interactive); border-color: var(--border-strong); }
.card-actions-bar .btn-card-aifill:disabled { opacity: 0.4; cursor: not-allowed; }

/* Status read-only text in expanded view */
.proc-status-read { font-weight: 500; text-transform: capitalize; }

/* =============================================================
   Shared Card Components
   ============================================================= */

/* Display ID — compact, monospace, understated */
.display-id-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Status badge — controlled, quiet */
.status-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); white-space: nowrap; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-draft    { color: var(--text-muted); display: none; }
.status-refined  { color: var(--text-faint); display: none; }
.status-approved { color: var(--text-secondary); text-transform: none; font-size: 0.75rem; font-weight: 500; vertical-align: middle; }

/* T-shirt size badge */
.size-badge {
    font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm); white-space: nowrap;
    background: #e8f0fe; color: #1a56db; letter-spacing: 0.03em;
}
.size-select { width: 6rem; }

/* Card toggle arrow */
.card-toggle {
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; padding: 0 0.15rem; color: var(--text-faint);
    line-height: 1;
}
.card-toggle:hover { color: var(--text-secondary); }

/* Toggle all link */
.toggle-all-link {
    font-size: 0.78rem; color: var(--text-muted); cursor: pointer;
    background: none; border: none; text-decoration: none;
    padding: 0; margin-bottom: 0.4rem; display: inline-block;
}
.toggle-all-link:hover { color: var(--interactive); }

/* Expand / Collapse All group — TERTIARY level */
.toggle-all-group {
    display: flex; gap: 0.5rem; margin-bottom: 0.35rem; font-size: 0.75rem;
}
.toggle-all-group button {
    background: none; border: none; padding: 0;
    color: var(--text-muted); cursor: pointer;
    font-size: 0.75rem; font-family: inherit;
    text-decoration: none;
}
.toggle-all-group button:hover { color: var(--interactive); }
.toggle-all-group button + button::before {
    content: "|"; color: var(--text-muted); margin-right: 0.5rem;
    font-weight: 400;
}

/* Skip link — TERTIARY */
.skip-link {
    font-size: 0.78rem; color: var(--text-faint); text-decoration: none; margin-left: 0.5rem;
}
.skip-link:hover { color: var(--text-muted); text-decoration: underline; }

/* Edit button in card headers — restrained */
.persona-edit-btn {
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: 0.75rem; font-family: inherit; padding: 0.15rem 0.5rem; cursor: pointer;
    color: var(--text-muted); margin-left: -0.15rem; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.persona-edit-btn:hover { color: var(--interactive); border-color: var(--border-default); }

/* AI Fill button — subtle utility action */
.btn-ai-fill {
    background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    font-size: 0.72rem; font-family: inherit; padding: 0.15rem 0.4rem; cursor: pointer;
    color: var(--text-muted); white-space: nowrap; line-height: 1;
    margin-left: -0.2rem; margin-right: -0.2rem;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-ai-fill:hover { color: var(--interactive); border-color: var(--interactive); background: var(--interactive-muted); }
.btn-ai-fill:disabled { opacity: 0.4; cursor: wait; }

/* Hide sparkle on Approved cards — AI should not second-guess analyst-confirmed work */
.process-card:has(.status-approved) .btn-ai-fill,
.persona-card:has(.status-approved) .btn-ai-fill,
.sys-card:has(.status-approved) .btn-ai-fill,
.epic-card:has(.status-approved) .btn-ai-fill,
.story-card:has(.status-approved) .btn-ai-fill,
.nfr-card:has(.status-approved) .btn-ai-fill { display: none; }

/* Hide approve button on Approved cards — action is complete */
.process-card:has(.status-approved) .btn-approve,
.epic-card:has(.status-approved) .btn-approve,
.story-card:has(.status-approved) .btn-approve,
.nfr-card:has(.status-approved) .btn-approve,
.persona-card:has(.status-approved) .btn-approve,
.sys-card:has(.status-approved) .btn-approve { display: none; }

/* Hide AI Fill button in card-actions-bar on Approved cards */
.process-card:has(.status-approved) .btn-card-aifill,
.epic-card:has(.status-approved) .btn-card-aifill,
.story-card:has(.status-approved) .btn-card-aifill,
.nfr-card:has(.status-approved) .btn-card-aifill,
.persona-card:has(.status-approved) .btn-card-aifill,
.sys-card:has(.status-approved) .btn-card-aifill { opacity: 0.4; pointer-events: none; }

/* Drag handle */
.drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.15rem 0.3rem;
    user-select: none;
}
.drag-handle:hover { color: var(--text-muted); }

/* =============================================================
   Card Base — Shared across Personas, Epics, Stories, NFRs, Processes
   All cards share: white bg, neutral border, subtle header
   ============================================================= */

/* -- Persona Cards -- */
.stage-section {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}
.stage-section:last-of-type { border-bottom: none; }

.stage-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}
.stage-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text-muted);
}
.stage-badge--done { background: var(--green-50); color: var(--green-700); }

.section-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: -0.35rem 0 1rem 0;
    line-height: 1.5;
}

.persona-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.15rem;
    overflow: hidden;
    background: var(--bg-surface);
}
.persona-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-surface);
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    min-height: 36px;
}
.persona-id {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.persona-name-input {
    width: 180px;
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-primary);
}
.persona-name-input:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.persona-card-header select {
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-family: inherit;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.persona-card-fields {
    padding: 0.75rem 1rem 0.2rem; background: #FDFDFD;
}
.persona-card-fields .field { margin-bottom: 0; }
.persona-card-fields .field label { margin-bottom: 0; }
.persona-card-fields label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.2rem;
    text-transform: none;
    margin-top: 0.5rem;
}
.persona-card-fields textarea,
.persona-card-fields select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    color: var(--text-primary);
}
.persona-card-fields textarea:focus,
.persona-card-fields select:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Persona read/edit toggles */
.persona-name-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.persona-type-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted);
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
}
.persona-type-badge.type-external {
    background: var(--amber-50); color: var(--amber-700);
}
.persona-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
}

/* Collapsible persona cards */
.persona-card.collapsed .persona-card-fields { display: none; }
.persona-card.collapsed .persona-card-header { border-bottom: none; }
.persona-card:not(.editing) .persona-name-input,
.persona-card:not(.editing) .persona-card-header select[name="persona_type"],
.persona-card:not(.editing) .persona-card-fields textarea,
.persona-card:not(.editing) .persona-card-fields select:not(.card-status-select) { display: none; }
.persona-card.editing .persona-name-read,
.persona-card.editing .persona-type-badge,
.persona-card.editing .persona-read-text { display: none; }

/* =============================================================
   System Actor Cards
   ============================================================= */
.sys-card {
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    margin-bottom: 0.15rem; overflow: hidden; background: var(--bg-surface);
}
.sys-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-surface); padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    min-height: 36px;
}
.sys-name-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.sys-name-input {
    width: 200px; flex-shrink: 0; padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-family: inherit; font-weight: 600;
    color: var(--text-primary);
}
.sys-card-fields { padding: 0.75rem 1rem 0.2rem; background: #FDFDFD; }
.sys-card-fields .field { margin-bottom: 0; }
.sys-card-fields .field label { margin-bottom: 0; }
.sys-card-fields label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    display: block; margin-bottom: 0.2rem;
    text-transform: none; margin-top: 0.5rem;
}
.sys-card-fields textarea,
.sys-card-fields input[type="text"],
.sys-card-fields select {
    width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; resize: vertical;
    color: var(--text-primary);
}
.sys-card-fields input[type="text"] { resize: none; }
.sys-card-fields textarea:focus,
.sys-card-fields input[type="text"]:focus,
.sys-card-fields select:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.sys-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
    white-space: pre-line;
}
.sys-card.collapsed .sys-card-fields { display: none; }
.sys-card.collapsed .sys-card-header { border-bottom: none; }
.sys-card:not(.editing) .sys-name-input,
.sys-card:not(.editing) .sys-card-fields textarea,
.sys-card:not(.editing) .sys-card-fields input[type="text"],
.sys-card:not(.editing) .sys-card-fields select:not(.card-status-select) { display: none; }
.sys-card.editing .sys-name-read,
.sys-card.editing .sys-read-text { display: none; }
.sys-card .btn-remove {
    flex-shrink: 0; margin-left: 0; padding: 0.15rem 0.35rem; font-size: 0.7rem;
}

/* =============================================================
   Actor Table
   ============================================================= */
.actor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.actor-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.4rem 0.5rem;
    border-bottom: 2px solid var(--border-default);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.actor-table td {
    padding: 0.3rem 0.4rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}
.actor-table--readonly td { padding: 0.5rem 0.5rem; }
.actor-table input[type="text"],
.actor-table select {
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-primary);
}
.actor-table input[type="text"]:focus,
.actor-table select:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
/* Actor type badges — no purple */
.actor-type-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.actor-type-badge--internal { background: var(--blue-50); color: var(--blue-700); }
.actor-type-badge--external { background: var(--amber-50); color: var(--amber-700); }
.actor-type-badge--system   { background: var(--bg-muted); color: var(--text-muted); }

/* =============================================================
   Epic Cards
   ============================================================= */
/* =============================================================
   Initiative Standard Cards (post-baseline read/edit view)
   ============================================================= */
.init-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.35rem;
    overflow: hidden;
    background: var(--bg-surface);
}
.init-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-surface); padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    min-height: 38px;
}
.init-card.collapsed .init-card-fields { display: none; }
.init-card.collapsed .init-card-header { border-bottom: none; }
.init-title-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.init-card-meta {
    font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0;
}
.init-card-fields { padding: 0.75rem 1rem 0.5rem; background: #FDFDFD; }
.init-card-fields .field { margin-bottom: 0; }
.init-card-fields .field label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    display: block; margin-bottom: 0.2rem; text-transform: none; margin-top: 0.5rem;
}
.init-card-fields textarea,
.init-card-fields input[type="text"] {
    width: 100%; padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-family: inherit; color: var(--text-primary);
}
.init-card-fields textarea { resize: vertical; }
.init-card-fields textarea:focus,
.init-card-fields input[type="text"]:focus {
    outline: none; border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.init-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
    white-space: pre-wrap;
}
/* Collapsed: hide entire fields panel */
.init-card.collapsed .init-card-fields { display: none; }
.init-card.collapsed .init-card-header { border-bottom: none; }
/* Not editing (read mode): hide form inputs, show read text */
.init-card:not(.editing) .init-card-fields textarea,
.init-card:not(.editing) .init-card-fields input[type="text"],
.init-card:not(.editing) .init-scope-grid,
.init-card:not(.editing) .init-tag-list,
.init-card:not(.editing) .init-tag-add { display: none; }
/* Editing: hide read text, show inputs */
.init-card.editing .init-read-text { display: none; }
/* Edit button in card header */
.init-card-edit {
    font-size: 0.75rem; padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-secondary);
    cursor: pointer; flex-shrink: 0;
}
.init-card-edit:hover { background: var(--bg-muted); color: var(--text-primary); }

/* Scope checkbox grid */
.init-scope-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.3rem; margin-top: 0.3rem;
}
.init-scope-check {
    font-size: 0.82rem; color: var(--text-primary);
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.4rem; border-radius: var(--radius-sm);
    cursor: pointer;
}
.init-scope-check:hover { background: var(--bg-muted); }
.init-scope-check input[type="checkbox"] { margin: 0; }

/* Tag list (capabilities, actors) */
.init-tag-list {
    display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem;
}
.init-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: var(--bg-muted); border: 1px solid var(--border-default);
    border-radius: 12px; padding: 0.2rem 0.55rem;
    font-size: 0.78rem; color: var(--text-primary);
}
.init-tag-remove {
    background: none; border: none; padding: 0; margin: 0;
    font-size: 0.85rem; color: var(--text-muted); cursor: pointer;
    line-height: 1;
}
.init-tag-remove:hover { color: var(--red-600, #dc2626); }
.init-tag-add {
    display: flex; gap: 0.35rem; margin-top: 0.4rem;
}
.init-tag-add input[type="text"] {
    flex: 1; max-width: 300px; padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.82rem; font-family: inherit;
}

.epic-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.15rem;
    overflow: hidden;
    background: var(--bg-surface);
}
.epic-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-surface);
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    min-height: 36px;
}
.epic-title-input {
    flex: 1;
    min-width: 200px;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-primary);
}
.epic-title-input:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.epic-card-fields { padding: 0.75rem 1rem 0.2rem; background: #FDFDFD; }
.epic-card-fields .field { margin-bottom: 0; }
.epic-card-fields .field label { margin-bottom: 0; }
.epic-card-fields label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    display: block; margin-bottom: 0.2rem;
    text-transform: none; margin-top: 0.5rem;
}
.epic-card-fields textarea,
.epic-card-fields select,
.epic-card-fields input[type="text"] {
    width: 100%; padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-family: inherit;
    color: var(--text-primary);
}
.epic-card-fields textarea { resize: vertical; }
.epic-card-fields textarea:focus,
.epic-card-fields select:focus,
.epic-card-fields input[type="text"]:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.epic-card-fields select[multiple] { height: auto; min-height: 6rem; }
.epic-card-fields select.size-select { width: 5rem; min-height: auto; }
.epic-card-fields textarea[name="epic_notes"] { resize: vertical; }
.epic-title-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.epic-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
}
.epic-card.collapsed .epic-card-fields { display: none; }
.epic-card.collapsed .epic-card-header { border-bottom: none; }
.epic-card:not(.editing) .epic-title-input,
.epic-card:not(.editing) .epic-card-fields textarea,
.epic-card:not(.editing) .epic-card-fields select:not(.card-status-select),
.epic-card:not(.editing) .epic-card-fields input[type="text"] { display: none; }
.epic-card.editing .epic-title-read,
.epic-card.editing .epic-read-text { display: none; }

/* =============================================================
   Story Cards & Filters
   ============================================================= */
.story-filters {
    display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.filter-group {
    display: flex; align-items: center; gap: 0.35rem;
}
.filter-group label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.filter-group select {
    padding: 0.3rem 0.45rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); font-size: 0.82rem; font-family: inherit; max-width: 600px; min-width: 300px;
    color: var(--text-secondary);
}
.filter-group select:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.story-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.15rem;
    overflow: hidden;
    background: var(--bg-surface);
}
.story-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-surface); padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    min-height: 36px;
}
.story-title-input {
    flex: 1; min-width: 200px; padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.875rem; font-family: inherit; font-weight: 600;
    color: var(--text-primary);
}
.story-title-input:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.story-card-fields { padding: 0.75rem 1rem 0.2rem; background: #FDFDFD; }
.story-card-fields .field { margin-bottom: 0; }
.story-card-fields .field label { margin-bottom: 0; }
.story-card-fields label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    display: block; margin-bottom: 0.2rem;
    text-transform: none; margin-top: 0.5rem;
}
.story-card-fields textarea,
.story-card-fields select,
.story-card-fields input[type="text"] {
    width: 100%; padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-family: inherit;
    color: var(--text-primary);
}
.story-card-fields textarea { resize: vertical; }
.story-card-fields textarea:focus,
.story-card-fields select:focus,
.story-card-fields input[type="text"]:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.story-field-row { display: flex; gap: 0.75rem; }
.story-field--half { flex: 1; min-width: 0; }
.story-field--third { flex: 1; min-width: 0; }
.story-field--narrow { flex: 0 0 6rem; min-width: 0; }

/* Extra spacing above AC, epic-link row, and notes */
.story-card-fields > .field + .field { padding-top: 0.75rem; }
.story-card-fields > .story-field-row { margin-top: 0.75rem; }
.story-card-fields > .story-field-row + .field { padding-top: 0.75rem; }

.story-title-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.story-priority-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted);
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
}
.story-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
    white-space: pre-wrap;
}
.story-card.collapsed .story-card-fields { display: none; }
.story-card.collapsed .story-card-header { border-bottom: none; }
.story-card:not(.editing) .story-title-input,
.story-card:not(.editing) .story-card-fields textarea,
.story-card:not(.editing) .story-card-fields select:not(.card-status-select),
.story-card:not(.editing) .story-card-fields input[type="text"],
.story-card:not(.editing) .story-card-fields input[type="number"] { display: none; }
.story-card.editing .story-title-read,
.story-card.editing .story-priority-badge,
.story-card.editing .story-read-text { display: none; }

/* =============================================================
   NFR Cards
   ============================================================= */
.nfr-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.15rem;
    overflow: hidden;
    background: var(--bg-surface);
}
.nfr-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-surface); padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    min-height: 36px;
}
.nfr-name-input {
    flex: 1; min-width: 200px; padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.875rem; font-family: inherit; font-weight: 600;
    color: var(--text-primary);
}
.nfr-name-input:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.nfr-category-badge {
    display: inline-block;
    font-size: 0.65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem; border-radius: var(--radius-sm);
    background: var(--bg-muted); color: var(--text-muted);
    white-space: nowrap; flex-shrink: 0;
}
.nfr-card-fields { padding: 0.75rem 1rem 0.2rem; background: #FDFDFD; }
.nfr-card-fields .field { margin-bottom: 0; }
.nfr-card-fields .field label { margin-bottom: 0; }
.nfr-card-fields label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    display: block; margin-bottom: 0.2rem;
    text-transform: none; margin-top: 0.5rem;
}
.nfr-card-fields textarea,
.nfr-card-fields select,
.nfr-card-fields input[type="text"] {
    width: 100%; padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-family: inherit;
    color: var(--text-primary);
}
.nfr-card-fields textarea { resize: vertical; }
.nfr-card-fields textarea:focus,
.nfr-card-fields select:focus,
.nfr-card-fields input[type="text"]:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.nfr-field-row { display: flex; gap: 0.75rem; }
.nfr-field--third { flex: 1; min-width: 0; }

.nfr-name-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.nfr-priority-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted);
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
}
.nfr-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
}
.nfr-card.collapsed .nfr-card-fields { display: none; }
.nfr-card.collapsed .nfr-card-header { border-bottom: none; }
.nfr-card:not(.editing) .nfr-name-input,
.nfr-card:not(.editing) .nfr-card-fields textarea,
.nfr-card:not(.editing) .nfr-card-fields select:not(.card-status-select),
.nfr-card:not(.editing) .nfr-card-fields input[type="text"],
.nfr-card:not(.editing) .nfr-scope-edit { display: none; }
.nfr-card.editing .nfr-name-read,
.nfr-card.editing .nfr-priority-badge,
.nfr-card.editing .nfr-read-text,
.nfr-card.editing .nfr-scope-badge { display: none; }

/* NFR Scope UI */
.nfr-scope-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted);
    white-space: nowrap;
}
.nfr-scope-select {
    width: auto; display: inline-block; min-width: 140px;
}
.nfr-scope-picker {
    margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem;
    max-height: 140px; overflow-y: auto; padding: 0.4rem 0;
    border-top: 1px solid var(--border-light);
}
.nfr-scope-option {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; color: var(--text-secondary); cursor: pointer;
    padding: 0.15rem 0; white-space: nowrap;
}
.nfr-scope-option input[type="checkbox"] {
    width: auto; margin: 0; cursor: pointer;
}

/* NFR Coverage Table */
.nfr-coverage-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 1rem;
}
.nfr-coverage-table th {
    text-align: left; padding: 0.45rem 0.6rem; background: var(--bg-subtle);
    border-bottom: 2px solid var(--border-default); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600;
}
.nfr-coverage-table td {
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}

/* AC Suggestion */
.ac-suggestion {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); margin-bottom: 0.3rem; cursor: pointer;
    transition: background 0.15s;
}
.ac-suggestion:hover { background: var(--bg-subtle); }
.ac-suggestion input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; }
.ac-suggestion-text { font-size: 0.82rem; line-height: 1.4; }
.ac-suggestion-text .nfr-category-badge {
    font-size: 0.6rem; margin-right: 0.25rem; vertical-align: middle;
}

/* =============================================================
   Process Cards
   ============================================================= */
.process-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.15rem;
    overflow: hidden;
    padding: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-surface);
}
.process-card--future { }
.process-card.collapsed .process-card-fields { display: none; }
.process-card.collapsed .process-card-header { border-bottom: none; }

.process-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-surface); padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    min-height: 36px;
}
.process-card--future .process-card-header { }

.process-name-input {
    flex: 1; min-width: 200px; font-weight: 600; font-size: 0.875rem;
    font-family: inherit; color: var(--text-primary);
}
.process-card-fields {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.4rem 0.75rem 0.5rem;
    background: #FDFDFD;
}
.process-card-fields .field { margin-bottom: 0; }
.process-card-fields .field label { margin-bottom: 0; }
.field-label-sm {
    font-size: 0.78rem; font-weight: 600; color: var(--text-faint);
    display: block; margin-bottom: 0.15rem; margin-top: 0.5rem;
    text-transform: none; letter-spacing: 0.01em;
}

/* Process read/edit */
.proc-name-read {
    font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    color: var(--text-primary);
}
.proc-type-badge {
    display: none;
}
.process-card--future .display-id-badge {
}
.process-card--future .proc-type-badge {
    display: none;
}
.proc-read-text {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.4;
}
.proc-attrs-read {
    display: flex; flex-wrap: wrap; gap: 0.2rem 0;
    justify-content: space-between;
    font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0; margin-top: 0.5rem;
}
.proc-attrs-read strong { color: var(--text-secondary); font-weight: 600; }
.proc-attrs-edit {
    display: none;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.proc-list-fields { display: block; }
.proc-list-row { display: flex; gap: 0.75rem; margin-bottom: 0.3rem; }
.proc-list-row > .field { flex: 1; min-width: 0; }
.proc-list-row--3 > .field { flex: 1; min-width: 0; }

.process-card:not(.editing) .process-name-input,
.process-card:not(.editing) .process-card-header select,
.process-card:not(.editing) .btn-ai-fill,
.process-card:not(.editing) .process-card-fields textarea,
.process-card:not(.editing) .process-card-fields select:not(.card-status-select),
.process-card:not(.editing) .process-card-fields input[type="text"],
.process-card:not(.editing) .proc-attrs-edit,
.process-card:not(.editing) .proc-list-fields textarea { display: none; }
.process-card:not(.editing) .proc-attrs-edit { display: none; }
.process-card.editing .proc-name-read,
.process-card.editing .proc-type-badge,
.process-card.editing .proc-read-text,
.process-card.editing .proc-attrs-read,
.process-card.editing .status-badge { display: none; }
.process-card.editing .proc-attrs-edit { display: grid; }
.process-card.editing .proc-list-fields textarea { display: block; }

/* =============================================================
   View Toggle
   ============================================================= */
.view-toggle {
    display: flex; gap: 0; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); overflow: hidden; width: fit-content; margin-bottom: 1rem;
}
.view-toggle-btn {
    background: var(--bg-surface); border: none;
    padding: 0.35rem 0.85rem; font-size: 0.78rem; cursor: pointer;
    color: var(--text-muted); border-right: 1px solid var(--border-default);
    transition: background 0.15s; font-family: inherit; font-weight: 500;
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn.active { background: var(--interactive); color: white; }
.view-toggle-btn:hover:not(.active) { background: var(--bg-subtle); }

body.list-view-active main { max-width: 1400px; }

/* =============================================================
   Rank / List Table
   ============================================================= */
.rank-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1rem;
}
.rank-table .desc-cell {
    font-size: 0.78rem; color: var(--text-muted); white-space: pre-line; line-height: 1.4;
}
.rank-table th {
    text-align: left; font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    padding: 0.45rem 0.5rem; border-bottom: 2px solid var(--border-default);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rank-table td {
    padding: 0.4rem 0.5rem; vertical-align: middle; border-bottom: 1px solid var(--border-subtle);
}
.rank-table tr:hover { background: var(--bg-subtle); }
.rank-cell {
    font-weight: 700; color: var(--text-faint); text-align: center; font-size: 0.78rem;
    font-family: var(--font-mono);
}
.rank-table tr[draggable="true"] { transition: background 0.1s; }
.rank-table tr.dragging { opacity: 0.4; background: var(--interactive-muted); }
.rank-table tr.drag-over { box-shadow: 0 -2px 0 0 var(--interactive) inset; }

/* Card-view drag states */
.epic-card[draggable="true"],
.story-card[draggable="true"],
.persona-card[draggable="true"],
.sys-card[draggable="true"],
.nfr-card[draggable="true"],
.process-card[draggable="true"] { transition: opacity 0.15s, box-shadow 0.15s; }
.epic-card.dragging, .story-card.dragging, .persona-card.dragging,
.sys-card.dragging, .nfr-card.dragging, .process-card.dragging {
    opacity: 0.4; background: var(--interactive-muted);
}
.epic-card.drag-over, .story-card.drag-over, .persona-card.drag-over,
.sys-card.drag-over, .nfr-card.drag-over, .process-card.drag-over {
    box-shadow: 0 -3px 0 0 var(--interactive);
}
.inline-prio {
    font-size: 0.78rem; padding: 0.15rem 0.25rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-surface); cursor: pointer; font-family: inherit;
}

/* =============================================================
   Baseline & Summary
   ============================================================= */
.baseline-section {
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    margin-bottom: 0.6rem; background: var(--bg-surface);
}
.baseline-section summary {
    padding: 0.55rem 1rem; font-weight: 600; cursor: pointer;
    background: var(--bg-subtle); border-radius: var(--radius-sm);
    font-size: 0.875rem; color: var(--text-primary);
}
.baseline-section[open] summary {
    border-bottom: 1px solid var(--border-default); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.baseline-body { padding: 0.75rem 1rem; }
.baseline-kv { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.baseline-kv th {
    text-align: left; padding: 0.25rem 0.75rem 0.25rem 0;
    color: var(--text-muted); white-space: nowrap; vertical-align: top; width: 12rem;
    font-size: 0.82rem;
}
.baseline-kv td { padding: 0.25rem 0; color: var(--text-primary); }
.baseline-item {
    padding: 0.45rem 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem;
}
.baseline-item:last-child { border-bottom: none; }

/* Readiness bar */
.readiness-bar {
    background: var(--green-50); border: 1px solid var(--green-400);
    border-radius: var(--radius-sm); padding: 0.5rem 1rem;
    margin-bottom: 1rem; font-size: 0.85rem; color: var(--green-800);
}
/* Active baseline card */
.active-baseline-card {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-left: 3px solid var(--interactive); border-radius: var(--radius-sm);
    padding: 0.85rem 1rem; margin-bottom: 1.25rem;
}
.badge-active {
    display: inline-block; background: var(--interactive); color: white;
    font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: middle;
}
.version-table td { vertical-align: middle; }
.version-row-active { background: var(--interactive-muted) !important; }
.version-row-active:hover { background: var(--blue-50) !important; }

.btn-rename-toggle {
    background: none; border: none; color: var(--text-muted);
    font-size: 0.75rem; cursor: pointer; padding: 0; margin-left: 0.5rem;
    font-family: inherit;
}
.btn-rename-toggle:hover { color: var(--interactive); }
.rename-input {
    width: 14rem; padding: 0.2rem 0.4rem; font-size: 0.85rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-family: inherit; color: var(--text-primary);
}

/* =============================================================
   Export
   ============================================================= */
.export-panel {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-left: 3px solid var(--green-600); border-radius: var(--radius-sm);
    padding: 0.85rem 1rem; margin-top: 1rem; margin-bottom: 1rem;
}
.export-checkboxes {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}
.export-checkboxes label {
    font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; cursor: pointer;
}

/* =============================================================
   Review Page
   ============================================================= */
.review-layout {
    display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; align-items: start;
}
.review-main { min-width: 0; }
.review-sidebar { position: sticky; top: 1rem; }
.version-sidebar-box {
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-subtle); padding: 0.65rem;
    max-height: calc(100vh - 6rem); overflow-y: auto;
}
.version-item {
    padding: 0.45rem 0.6rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); margin-bottom: 0.4rem;
    background: var(--bg-surface); font-size: 0.82rem;
}
.version-item:last-of-type { margin-bottom: 0; }
.version-item--active { border-color: var(--interactive); background: var(--interactive-muted); }
.version-item-top {
    display: flex; align-items: center; justify-content: space-between; gap: 0.3rem;
}
.version-item-label { font-weight: 600; font-size: 0.82rem; word-break: break-word; color: var(--text-primary); }
.version-item-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.1rem; }
.version-item-actions {
    display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; flex-wrap: wrap;
}
.version-item-actions a { font-size: 0.75rem; }
.version-sidebar-box .export-panel { margin: 0.65rem 0 0 0; padding: 0.65rem; }
.version-sidebar-box .export-checkboxes { flex-direction: column; gap: 0.3rem; }
.version-sidebar-box .export-checkboxes label { font-size: 0.78rem; }
.version-item .rename-input { width: 100%; }

@media (max-width: 860px) {
    .review-layout { grid-template-columns: 1fr; }
    .review-sidebar { position: static; }
}

/* =============================================================
   Review & Baseline — Needs Attention
   ============================================================= */
.rb-header {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.rb-header h2 { margin: 0; font-size: 1.15rem; }
.rb-state-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    padding: 0.15rem 0.55rem; border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rb-state-badge--draft_only { background: var(--bg-muted); color: var(--text-muted); }
.rb-state-badge--baselined { background: var(--green-50); color: var(--green-700); }
.rb-state-badge--changed { background: var(--amber-50); color: var(--amber-700); }

.rb-action-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 1.25rem; padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.rb-readiness {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.82rem; margin-bottom: 1.25rem;
}
.rb-readiness--ok { background: var(--green-50); border: 1px solid var(--green-400); color: var(--green-800); }
.rb-readiness--warn { background: var(--amber-50); border: 1px solid var(--amber-500); color: var(--amber-800); }
.rb-readiness--changed {
    background: var(--bg-subtle); border: 1px solid var(--amber-200); color: var(--text-secondary);
}
.rb-readiness-icon { font-size: 1.1rem; }
.rb-readiness-detail { font-size: 0.78rem; color: inherit; opacity: 0.8; margin-left: auto; }

/* Active baseline summary strip */
.rb-baseline-strip {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; margin-bottom: 1.25rem;
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-left: 3px solid var(--interactive);
    border-radius: var(--radius-sm); font-size: 0.82rem;
    flex-wrap: wrap;
}
.rb-baseline-strip-eyebrow {
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-faint); margin-right: 0.15rem;
}
.rb-baseline-strip-name { font-weight: 600; color: var(--text-primary); }
.rb-baseline-strip-sep { color: var(--border-default); font-size: 0.7rem; }
.rb-baseline-strip-meta { color: var(--text-muted); font-size: 0.78rem; }
.rb-baseline-strip-btn {
    margin-left: auto; background: none; border: none;
    font-size: 0.78rem; font-family: inherit; font-weight: 500;
    color: var(--interactive); cursor: pointer; padding: 0;
    white-space: nowrap;
}
.rb-baseline-strip-btn:hover { text-decoration: underline; }

.rb-attention {
    border: 1px solid var(--amber-200); border-radius: var(--radius-sm);
    background: var(--amber-50); margin-bottom: 1.25rem;
}
.rb-attention-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1rem; font-size: 0.88rem; font-weight: 600;
    color: var(--amber-800); cursor: pointer; list-style: none;
}
.rb-attention-header::-webkit-details-marker { display: none; }
.rb-attention-header .count-badge,
.rb-attention-header-static .count-badge {
    display: inline-block; background: var(--amber-200); color: var(--amber-800);
    font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm); min-width: 1.2rem; text-align: center;
}
.rb-attention-body { padding: 0 1rem 0.65rem; }
.rb-attention-item {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.3rem 0; border-bottom: 1px solid var(--amber-100);
    font-size: 0.82rem; color: var(--text-secondary);
}
.rb-attention-item:last-child { border-bottom: none; }
.rb-attention-section {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    color: var(--amber-700); min-width: 5rem; flex-shrink: 0;
}
.rb-attention-link {
    color: var(--interactive); font-size: 0.78rem; text-decoration: none;
    margin-left: auto; flex-shrink: 0;
}
.rb-attention-link:hover { text-decoration: underline; }
.rb-attention-group { border-bottom: 1px solid var(--amber-100); }
.rb-attention-group:last-child { border-bottom: none; }
.rb-attention-group-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0; font-size: 0.82rem; color: var(--text-secondary);
    cursor: pointer; list-style: none;
}
.rb-attention-group-row::-webkit-details-marker { display: none; }
.rb-attention-group-row::before {
    content: "\25B6"; font-size: 0.6rem; color: var(--text-faint);
    transition: transform 0.15s; flex-shrink: 0;
}
details.rb-attention-group[open] > .rb-attention-group-row::before {
    transform: rotate(90deg);
}
div.rb-attention-group-row { cursor: default; }
div.rb-attention-group-row::before { content: none; }
.rb-attention-group-label { font-weight: 500; }
.rb-attention-group-detail { font-size: 0.78rem; color: var(--text-muted); }
.rb-attention-group-items {
    padding: 0.15rem 0 0.4rem 1.1rem;
}
.rb-attention-detail-item {
    font-size: 0.78rem; color: var(--text-muted); padding: 0.15rem 0;
    line-height: 1.4;
}
.rb-attention-detail-link {
    display: block; font-size: 0.78rem; color: var(--text-muted); padding: 0.15rem 0.3rem;
    margin: 0 -0.3rem; line-height: 1.4; text-decoration: none;
    border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s;
}
.rb-attention-detail-link:hover { color: var(--interactive); background: rgba(0,0,0,0.03); }
/* Attention preview text on collapsed summary line */
.rb-attention-preview {
    font-size: 0.75rem; font-weight: 400; color: var(--text-muted);
    margin-left: 0.5rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
details.rb-attention[open] .rb-attention-preview { display: none; }
/* Inline compact attention (few issues) */
.rb-attention--inline { border-radius: var(--radius-sm); }
.rb-attention-header-static {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1rem 0.25rem; font-size: 0.88rem; font-weight: 600;
    color: var(--amber-800);
}
.rb-attention-inline-item {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.25rem 1rem; font-size: 0.82rem; color: var(--text-secondary);
}
.rb-attention-inline-item:last-child { padding-bottom: 0.55rem; }
.rb-attention-inline-link {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.3rem 1rem; font-size: 0.82rem; color: var(--text-secondary);
    text-decoration: none; border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.rb-attention-inline-link:last-child { padding-bottom: 0.55rem; }
.rb-attention-inline-link:hover { background: rgba(0,0,0,0.03); }
.rb-attention-inline-link .rb-att-text { flex: 1; }
.rb-attention-inline-link .rb-att-action {
    font-size: 0.75rem; color: var(--interactive); font-weight: 500;
    flex-shrink: 0; opacity: 0.7; transition: opacity 0.15s;
}
.rb-attention-inline-link:hover .rb-att-action { opacity: 1; }

/* Version history drawer/modal */
.rb-drawer-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; z-index: 99998;
    background: rgba(0, 0, 0, 0.35);
}
.rb-drawer-overlay.visible { display: block; }
.rb-drawer {
    position: fixed; top: 0; right: 0;
    width: 360px; max-width: 90vw; height: 100vh;
    background: var(--bg-surface); border-left: 1px solid var(--border-default);
    z-index: 99999; overflow-y: auto; padding: 1.25rem;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%); transition: transform 0.25s ease;
}
.rb-drawer-overlay.visible .rb-drawer { transform: translateX(0); }
.rb-drawer h3 {
    margin: 0 0 1rem; font-size: 1rem;
    display: flex; align-items: center; justify-content: space-between;
}
.rb-drawer-close {
    background: none; border: none; font-size: 1.2rem;
    cursor: pointer; color: var(--text-muted); padding: 0.2rem;
}
.rb-drawer-close:hover { color: var(--text-primary); }
.rb-drawer-subtitle { font-size: 0.78rem; color: var(--text-muted); margin: -0.5rem 0 0.75rem; }

/* Version cards inside drawer */
.vi {
    padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle);
}
.vi:last-of-type { border-bottom: none; }
.vi--active {
    padding: 0.6rem 0.65rem; margin: 0 -0.65rem;
    border-radius: var(--radius-sm); border-bottom: none;
    background: var(--interactive-muted); border-left: 3px solid var(--interactive);
}
.vi--active + .vi { border-top: none; }
.vi-header { margin-bottom: 0.25rem; }
.vi-label-row { display: flex; align-items: center; gap: 0.4rem; }
.vi-label { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); word-break: break-word; }
.vi-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.05rem; }
.vi-actions {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem;
}
.vi-action-primary { font-weight: 600; }
.vi-secondary {
    display: flex; align-items: center; gap: 0;
    margin-left: auto;
}
.vi-secondary .vi-link + .vi-link::before {
    content: "\00b7"; color: var(--border-default); margin: 0 0.1rem;
    pointer-events: none;
}
.vi-link {
    background: none; border: none; padding: 0.1rem 0.25rem;
    font-size: 0.72rem; font-family: inherit; cursor: pointer;
    color: var(--text-muted); text-decoration: none;
    transition: color 0.15s;
}
.vi-link:hover { color: var(--interactive); }

/* Export modal */
.export-modal-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; z-index: 100000;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.export-modal-overlay.visible { display: flex !important; }
.export-modal {
    background: var(--bg-surface); border-radius: var(--radius-sm);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    width: 90%; max-width: 480px;
    animation: ai-card-pop 0.2s ease-out;
}
.export-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--border-default);
}
.export-modal-header h3 {
    margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
}
.export-modal-field {
    padding: 0.85rem 1.5rem 0;
}
.export-modal-label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.03em; margin-bottom: 0.4rem;
}
.export-modal-select {
    width: 100%; padding: 0.45rem 0.6rem; font-size: 0.88rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary);
    font-family: inherit;
}
.export-modal-note {
    display: block; font-size: 0.82rem; color: var(--text-muted);
    padding: 0.5rem 0 0;
}
.export-modal-hint {
    margin: 0.5rem 1.5rem 0; padding: 0.55rem 0.75rem;
    font-size: 0.8rem; color: var(--amber-800);
    background: var(--amber-50); border-radius: var(--radius-sm);
    border-left: 3px solid var(--amber-500);
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.export-save-version-btn {
    background: var(--interactive); color: #fff;
    border: none; border-radius: var(--radius-sm);
    padding: 0.3rem 0.7rem; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; margin-left: auto;
}
.export-save-version-btn:hover { opacity: 0.9; }
.export-save-version-btn:disabled { opacity: 0.5; cursor: wait; }
.export-modal-helper {
    margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--text-muted);
    line-height: 1.4;
}
/* Format selector (radio pill group) */
.export-format-group {
    display: flex; gap: 0; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); overflow: hidden;
    margin-top: 0.25rem;
}
.export-format-option {
    flex: 1; cursor: pointer;
}
.export-format-option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.export-format-pill {
    display: block; text-align: center;
    font-size: 0.82rem; font-weight: 500;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary); background: var(--bg-surface);
    border-right: 1px solid var(--border-default);
    transition: background 0.15s, color 0.15s;
}
.export-format-option:last-child .export-format-pill { border-right: none; }
.export-format-option:hover .export-format-pill { background: var(--bg-subtle); }
.export-format-option input[type="radio"]:checked + .export-format-pill {
    background: var(--interactive); color: #fff; font-weight: 600;
}

.export-modal-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.1rem 1.5rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-subtle); border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
}
.export-modal-check {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.85rem; color: var(--text-primary);
    cursor: pointer; padding: 0.35rem 0.25rem;
    border-radius: 3px; transition: background 0.1s;
}
.export-modal-check:hover { background: var(--bg-muted); }
.export-modal-check input[type="checkbox"] { margin: 0; accent-color: var(--interactive); }
.export-modal-actions {
    display: flex; justify-content: flex-end; gap: 0.65rem;
    padding: 1.15rem 1.5rem; border-top: 1px solid var(--border-default);
    margin-top: 0.85rem;
}
#export-download-btn {
    background: var(--interactive); color: #fff;
    border: 1px solid var(--interactive);
    padding: 0.5rem 1.25rem; border-radius: var(--radius-sm);
    font-weight: 600; cursor: pointer;
}
#export-download-btn:hover { background: var(--interactive-hover); border-color: var(--interactive-hover); }
#export-download-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.export-modal-success {
    padding: 1.15rem 1.5rem; border-top: 1px solid var(--border-default);
    margin-top: 0.85rem; text-align: center;
    font-size: 0.9rem; font-weight: 600; color: var(--green-700);
    animation: ai-card-pop 0.25s ease-out;
}
.export-success-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green-100); color: var(--green-700);
    font-size: 0.8rem; font-weight: 700;
    margin-right: 0.45rem; vertical-align: middle;
}

/* =============================================================
   Traceability Matrix
   ============================================================= */
.trace-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.65rem; margin-bottom: 1.25rem;
}
.trace-stat {
    text-align: center; padding: 0.65rem 0.4rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.trace-stat-num {
    display: block; font-size: 1.3rem; font-weight: 700; color: var(--text-primary);
}
.trace-stat-label {
    display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem;
    text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500;
}
.gap-heading {
    font-size: 0.85rem; color: var(--amber-800);
    margin: 1rem 0 0.4rem 0; padding-bottom: 0.2rem; border-bottom: 1px solid var(--amber-500);
}
.gap-heading:first-child { margin-top: 0; }

.trace-summary-grid .display-id-badge,
.trace-epic-summary .display-id-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 600;
    color: var(--text-muted); background: var(--bg-subtle);
    padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); white-space: nowrap;
    font-family: var(--font-mono);
}
.trace-summary-grid .nfr-category-badge,
.trace-epic-summary .nfr-category-badge {
    display: inline-block; font-size: 0.65rem; font-weight: 600;
    color: var(--text-muted); background: var(--bg-muted);
    padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); margin-right: 0.2rem;
}

.trace-epic-details {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 0.4rem;
}
.trace-epic-summary {
    padding: 0.4rem 0.7rem; font-size: 0.85rem; cursor: pointer; background: var(--bg-subtle);
    border-radius: var(--radius-sm);
}
.trace-epic-details[open] .trace-epic-summary {
    border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.trace-epic-body { padding: 0.45rem 0.7rem; }

.trace-story-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0; border-bottom: 1px solid var(--border-subtle);
    font-size: 0.82rem; flex-wrap: wrap;
}
.trace-story-row:last-child { border-bottom: none; }
.trace-story-title { flex: 1; min-width: 150px; color: var(--text-secondary); }

/* Priority badges */
.prio-badge, .trace-prio-badge {
    display: inline-block; font-size: 0.65rem; font-weight: 600;
    padding: 0.1rem 0.4rem; border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0;
}
.prio-must,   .trace-prio-must   { background: var(--red-50); color: var(--red-700); }
.prio-should, .trace-prio-should { background: var(--amber-50); color: var(--amber-700); }
.prio-could,  .trace-prio-could  { background: var(--green-50); color: var(--green-700); }
.trace-prio-none { background: var(--bg-muted); color: var(--text-faint); }

.trace-ac-indicator { font-size: 0.72rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.trace-ac-ok      { color: var(--green-600); }
.trace-ac-missing { color: var(--red-600); }

/* =============================================================
   Dashboard / Home Page
   ============================================================= */
.dashboard-wrap {
    max-width: 860px; margin: 1.5rem auto; padding: 0 1rem;
}
.dashboard-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
}
.dashboard-header h1 { margin: 0; font-size: 1.4rem; color: var(--text-primary); font-weight: 700; }
.dashboard-header .brand { font-size: 0.82rem; color: var(--text-muted); }

.company-card {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-left: 3px solid var(--interactive); border-radius: var(--radius-sm);
    padding: 0.85rem 1rem; margin-bottom: 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
}
.company-card-info { font-size: 0.875rem; }
.company-card-info strong { font-size: 0.95rem; color: var(--text-primary); }
.company-card-info .meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.15rem; }

.create-initiative-form { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.create-initiative-form input[type="text"] {
    flex: 1; padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.875rem; font-family: inherit; color: var(--text-primary);
}
.create-initiative-form input[type="text"]:focus {
    outline: none; border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.initiative-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.initiative-card {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); padding: 0.85rem 1rem;
    transition: border-color 0.15s;
}
.initiative-card:hover { border-color: var(--border-strong); }
.initiative-card--active { border-left: 3px solid var(--interactive); }
.initiative-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.25rem;
}
.initiative-card-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.initiative-card-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.initiative-card-stats {
    display: flex; gap: 0.85rem; font-size: 0.78rem; color: var(--text-muted);
    margin-bottom: 0.35rem; flex-wrap: wrap;
}
.initiative-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.initiative-card-actions form { display: inline; }
.initiative-progress {
    display: inline-block; font-size: 0.7rem; font-weight: 600;
    color: var(--interactive); background: var(--interactive-muted);
    padding: 0.1rem 0.45rem; border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.initiative-rename-form { display: flex; gap: 0.35rem; align-items: center; margin-top: 0.3rem; }
.initiative-rename-form input[type="text"] {
    padding: 0.25rem 0.5rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; width: 14rem;
    color: var(--text-primary);
}

/* Dashboard aliases */
.dashboard-company-card {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-left: 3px solid var(--interactive); border-radius: var(--radius-sm);
    padding: 0.85rem 1rem; margin-bottom: 1.25rem;
}
.dashboard-create-form { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.dashboard-create-input {
    flex: 1; padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: 0.875rem; font-family: inherit; color: var(--text-primary);
}
.dashboard-create-input:focus {
    outline: none; border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.dashboard-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.dashboard-card {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); padding: 0.85rem 1rem; transition: border-color 0.15s;
}
.dashboard-card:hover { border-color: var(--border-strong); }
.dashboard-card--active { border-left: 3px solid var(--interactive); }
.dashboard-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.2rem;
}
.dashboard-card-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.dashboard-card-subtitle { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.2rem; }
.dashboard-card-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.dashboard-card-date { font-size: 0.75rem; color: var(--text-faint); margin-bottom: 0.35rem; }
.dashboard-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* =============================================================
   Reusable Admin Page Pattern (adm-)
   ============================================================= */

/* Page header — title left, primary action right */
.adm-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.adm-page-header-info { min-width: 0; }
.adm-page-title {
    margin: 0 0 0.2rem; font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
}
.adm-page-desc {
    margin: 0; font-size: 0.85rem; color: var(--text-muted);
}
.adm-page-action {}

/* Inline stats row — lightweight, no box */
.adm-stats {
    display: flex; gap: 1.75rem; margin-bottom: 1rem;
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-subtle);
}
.adm-stat { display: flex; align-items: baseline; gap: 0.3rem; }
.adm-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--interactive); font-variant-numeric: tabular-nums; }
.adm-stat-label { font-size: 0.8rem; color: var(--text-muted); }

/* Toolbar — search + filters above list */
.adm-toolbar {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.adm-search {
    flex: 1; max-width: 320px;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem; font-family: inherit;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary);
    transition: border-color 0.15s;
}
.adm-search:focus { outline: none; border-color: var(--interactive); }
.adm-search::placeholder { color: var(--text-faint); }

/* List — clean bordered table-like rows */
.adm-list {
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    overflow: hidden;
}
.adm-list-header {
    display: grid; grid-template-columns: 2fr 1fr 0.6fr 0.6fr auto;
    gap: 0.75rem; align-items: center;
    padding: 0.45rem 0.85rem;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border-default);
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted);
}
.adm-list-row {
    display: grid; grid-template-columns: 2fr 1fr 0.6fr 0.6fr auto;
    gap: 0.75rem; align-items: center;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.85rem; color: var(--text-primary);
    transition: background 0.1s;
}
.adm-list-row:last-child { border-bottom: none; }
.adm-list-row:hover { background: var(--bg-subtle); }

/* List cell helpers */
.adm-cell-primary { font-weight: 600; color: var(--text-primary); min-width: 0; }
.adm-cell-primary span { display: block; }
.adm-cell-meta { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }
.adm-cell-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 500;
    padding: 0.08rem 0.4rem; border-radius: var(--radius-sm);
    background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100);
}
.adm-cell-chip {
    display: inline-block; font-size: 0.68rem; font-weight: 500;
    padding: 0.06rem 0.35rem; border-radius: var(--radius-sm);
    background: var(--bg-subtle); color: var(--text-secondary);
}
.adm-cell-num {
    font-variant-numeric: tabular-nums; text-align: right;
    font-size: 0.82rem; color: var(--text-secondary);
}
.adm-cell-actions {
    display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end;
}

/* Row overflow menu */
.adm-overflow { position: relative; display: inline-block; }
.adm-overflow-toggle {
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 0.15rem 0.35rem; cursor: pointer; font-size: 1rem;
    color: var(--text-muted); line-height: 1; transition: background 0.1s;
}
.adm-overflow-toggle:hover { background: var(--bg-subtle); border-color: var(--border-default); }
.adm-overflow-menu {
    display: none; position: absolute; right: 0; top: 100%;
    z-index: 200; min-width: 160px; margin-top: 2px;
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    padding: 0.25rem 0;
}
.adm-overflow.open .adm-overflow-menu { display: block; }
.adm-overflow-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none;
    padding: 0.4rem 0.75rem; font-size: 0.8rem; font-family: inherit;
    color: var(--text-primary); cursor: pointer; white-space: nowrap;
}
.adm-overflow-item:hover { background: var(--bg-subtle); }
.adm-overflow-item--danger { color: var(--red-600); }
.adm-overflow-item--danger:hover { background: var(--red-50, #fef2f2); }
.adm-overflow-sep { border-top: 1px solid var(--border-subtle); margin: 0.2rem 0; }

/* Empty state */
.adm-empty {
    padding: 2rem 1rem; text-align: center;
    color: var(--text-muted); font-size: 0.88rem;
}

/* Create modal */
.adm-modal-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; z-index: 100000;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.adm-modal-overlay.visible { display: flex !important; }
.adm-modal {
    background: #fff; border-radius: 6px;
    padding: 1.75rem 2rem 1.5rem;
    max-width: 440px; width: 90%;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    animation: ai-card-pop 0.2s ease-out;
}
.adm-modal-title {
    margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary);
}
.adm-modal-field {
    margin-bottom: 1rem;
}
.adm-modal-field label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 0.3rem;
}
.adm-modal-field input {
    width: 100%; padding: 0.5rem 0.75rem;
    font-size: 0.88rem; font-family: inherit;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary);
}
.adm-modal-field input:focus { outline: none; border-color: var(--interactive); }
.adm-modal-actions {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding-top: 0.75rem; border-top: 1px solid var(--border-subtle);
}

/* =============================================================
   Company Workspace Landing
   ============================================================= */

/* Setup prompt — shown when company profile is missing */
.ws-setup-prompt {
    background: var(--amber-50); border: 1px solid var(--amber-100);
    border-radius: var(--radius-sm); padding: 0.75rem 1rem;
    margin-bottom: 1.25rem; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
}
.ws-setup-prompt p { margin: 0; font-size: 0.85rem; color: var(--amber-800); }
.ws-setup-prompt--info {
    background: var(--bg-subtle); border-color: var(--border-default);
}
.ws-setup-prompt--info p { color: var(--text-muted); }

/* Summary strip — lightweight stats row */
.ws-summary-strip {
    display: flex; gap: 1.5rem; padding: 0.65rem 1rem;
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); margin-bottom: 1.25rem;
}
.ws-summary-stat { display: flex; align-items: baseline; gap: 0.35rem; }
.ws-summary-value {
    font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
}
.ws-summary-label {
    font-size: 0.78rem; color: var(--text-muted); font-weight: 500;
}

/* Empty state — no initiatives yet */
.ws-empty-state {
    text-align: center; padding: 2.5rem 1rem;
    background: var(--bg-subtle); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); margin-top: 0.5rem;
}
.ws-empty-title {
    font-size: 1rem; font-weight: 600; color: var(--text-secondary);
    margin: 0 0 0.35rem;
}
.ws-empty-desc {
    font-size: 0.85rem; color: var(--text-muted); margin: 0;
    max-width: 420px; margin-left: auto; margin-right: auto;
}

/* =============================================================
   Workspace Home — Redesigned Company Landing
   ============================================================= */

/* Utility */
.wsh-hidden { display: none !important; }
.wsh-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0 0 1.5rem;
}

/* ---- Header ---- */
.wsh-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.wsh-header-info { min-width: 0; }
.wsh-company-name {
    margin: 0 0 0.2rem;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.wsh-company-meta {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.wsh-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-top: 0.2rem;
}

/* ---- Buttons ---- */
.wsh-btn-new {
    background: var(--interactive);
    color: #fff;
    border: 1px solid var(--interactive);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.wsh-btn-new:hover { background: var(--interactive-hover); }

.wsh-btn-resume {
    background: var(--bg-surface);
    color: var(--interactive);
    border: 1px solid var(--interactive);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.wsh-btn-resume:hover { background: var(--interactive-muted); }

.wsh-btn-secondary {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.wsh-btn-secondary:hover { background: var(--bg-subtle); border-color: var(--border-strong); color: var(--text-primary); }

.wsh-btn-ghost {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
}
.wsh-btn-ghost:hover { color: var(--text-secondary); }

.wsh-btn-inline-new {
    background: none;
    border: none;
    color: var(--interactive);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    white-space: nowrap;
}
.wsh-btn-inline-new:hover { text-decoration: underline; }

.wsh-btn-open {
    background: var(--interactive);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.32rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.wsh-btn-open:hover { background: var(--interactive-hover); }

.wsh-btn-open-primary {
    background: var(--interactive);
    color: #fff;
    border: 1px solid var(--interactive);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
}
.wsh-btn-open-primary:hover { background: var(--interactive-hover); }

/* ---- Stat Tiles ---- */
.wsh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin-bottom: 2rem;
}
.wsh-stat-tile {
    background: var(--bg-subtle);
    border: none;
    border-bottom: 3px solid var(--interactive);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem 0.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.wsh-stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.wsh-stat-label {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--text-muted);
    margin-top: 0.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* ---- Two-column body ---- */
.wsh-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1.75rem;
    align-items: start;
}

/* ---- Main column ---- */
.wsh-main { min-width: 0; }

.wsh-section { margin-bottom: 1.75rem; }
.wsh-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.wsh-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wsh-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--interactive);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ---- New initiative panel ---- */
.wsh-new-init {
    margin-bottom: 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
}
.wsh-new-init-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wsh-new-init-input {
    flex: 1;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
}
.wsh-new-init-input:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ---- Featured Card (Continue Working) ---- */
.wsh-featured-card {
    background: var(--bg-subtle);
    border: none;
    border-left: 3px solid var(--interactive);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.wsh-featured-top {
    margin-bottom: 0.1rem;
}
.wsh-featured-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.wsh-featured-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}
.wsh-featured-detail {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}
.wsh-featured-progress {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.wsh-featured-meta {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.wsh-featured-meta span { white-space: nowrap; }
.wsh-featured-meta span:not(:first-child)::before {
    content: "\00b7";
    margin: 0 0.35rem;
    color: var(--text-faint);
}
.wsh-featured-footer {
    margin-top: 0.85rem;
}
.wsh-featured-cta-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.wsh-featured-date {
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* ---- Progress Bar ---- */
.wsh-progress-bar {
    flex: 1;
    height: 7px;
    background: var(--bg-muted);
    border-radius: 4px;
    overflow: hidden;
    max-width: 240px;
}
.wsh-progress-bar--sm { max-width: 100px; height: 5px; }
.wsh-progress-fill {
    height: 100%;
    background: var(--interactive);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.wsh-progress-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---- Badge ---- */
.wsh-badge-active {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--green-700);
    background: var(--green-50);
    border: 1px solid var(--green-200);
    padding: 0.08rem 0.4rem;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.wsh-badge-sm { font-size: 0.6rem; padding: 0.04rem 0.3rem; margin-left: 0.3rem; vertical-align: middle; }

/* ---- Initiative Grid ---- */
.wsh-init-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* ---- Initiative Card ---- */
.wsh-init-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}
.wsh-init-card:hover {
    box-shadow: var(--shadow-sm);
}
.wsh-init-card--active { border-left: 3px solid var(--interactive); }

.wsh-init-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.15rem;
}
.wsh-init-card-name {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.wsh-init-card-subtitle {
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Combined detail row: step pill + progress bar + metadata */
.wsh-init-card-detail {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.wsh-step-pill {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--interactive);
    background: var(--interactive-muted);
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.wsh-init-card-meta-text {
    font-size: 0.73rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.wsh-init-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border-subtle);
}
.wsh-init-card-date {
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.01em;
}

/* ---- Rename form ---- */
.wsh-rename-form {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.3rem 0 0.4rem;
}
.wsh-rename-input {
    flex: 1;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-primary);
}

/* ---- Overflow Menu ---- */
.wsh-overflow-menu {
    position: relative;
    flex-shrink: 0;
}
.wsh-overflow-toggle {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.05rem 0.25rem;
    line-height: 1;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.15s;
}
.wsh-init-card:hover .wsh-overflow-toggle,
.wsh-overflow-menu.open .wsh-overflow-toggle { opacity: 1; }
.wsh-overflow-toggle:hover {
    color: var(--text-secondary);
    background: var(--bg-subtle);
}
.wsh-overflow-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    min-width: 130px;
    margin-top: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.2rem 0;
}
.wsh-overflow-menu.open .wsh-overflow-dropdown { display: block; }
.wsh-overflow-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.wsh-overflow-item:hover { background: var(--bg-subtle); }
.wsh-overflow-item--danger { color: var(--danger); }
.wsh-overflow-item--danger:hover { background: var(--red-50); }
.wsh-overflow-sep { border-top: 1px solid var(--border-subtle); margin: 0.15rem 0; }

/* ---- Sidebar ---- */
.wsh-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.wsh-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
}
.wsh-widget--attention {
    background: var(--amber-50);
    border-color: var(--amber-100);
}
.wsh-widget--attention .wsh-widget-title {
    color: var(--amber-700);
}
.wsh-widget--links {
    background: none;
    border: none;
    padding: 0.25rem 0.85rem 0;
}
.wsh-widget-title {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 650;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wsh-widget-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    color: var(--interactive);
    text-decoration: none;
    font-weight: 500;
}
.wsh-widget-link:hover { text-decoration: underline; }

/* ---- Company Snapshot ---- */
.wsh-snapshot-list { margin: 0; padding: 0; }
.wsh-snapshot-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.18rem 0;
    font-size: 0.76rem;
}
.wsh-snapshot-row dt {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 3.5rem;
}
.wsh-snapshot-row dd {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

/* ---- Attention ---- */
.wsh-attention-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.wsh-attention-item {
    padding: 0.4rem 0.55rem 0.4rem 0.7rem;
    font-size: 0.76rem;
    line-height: 1.45;
    position: relative;
    background: rgba(255,255,255,0.55);
    border-radius: var(--radius-sm);
}
.wsh-attention-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2.5px;
    border-radius: 2px;
}
.wsh-attention-item--warning { color: var(--amber-800); }
.wsh-attention-item--warning::before { background: var(--amber-600); }
.wsh-attention-item--info { color: var(--text-secondary); }
.wsh-attention-item--info::before { background: var(--interactive); }
.wsh-attention-text {
    margin: 0;
}
.wsh-attention-action {
    display: block;
    margin-top: 0.25rem;
}
.wsh-attention-open,
.wsh-attention-open[type="submit"] {
    background: none;
    border: none;
    padding: 0;
    display: inline;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--amber-700);
    cursor: pointer;
    white-space: nowrap;
    line-height: inherit;
    letter-spacing: normal;
}
.wsh-attention-item--info .wsh-attention-open { color: var(--interactive); }
.wsh-attention-open:hover,
.wsh-attention-open[type="submit"]:hover {
    text-decoration: underline;
    background: none;
    border: none;
}

/* ---- Quick Links ---- */
.wsh-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wsh-quick-links li { padding: 0.2rem 0; }
.wsh-quick-links a {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
}
.wsh-quick-links a:hover { color: var(--interactive); text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 1099px) {
    .wsh-body {
        grid-template-columns: 1fr;
    }
    .wsh-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .wsh-widget { flex: 1; min-width: 200px; }
    .wsh-widget--links { min-width: 160px; }
}
@media (max-width: 767px) {
    .wsh-header { flex-direction: column; gap: 0.75rem; }
    .wsh-company-name { font-size: 1.3rem; }
    .wsh-stats { grid-template-columns: repeat(2, 1fr); }
    .wsh-init-grid { grid-template-columns: 1fr; }
    .wsh-sidebar { flex-direction: column; }
    .wsh-widget { min-width: 0; }
    .wsh-widget--links { min-width: 0; }
}


/* =============================================================
   Admin Tables & User Management
   ============================================================= */
.admin-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); font-size: 0.88rem;
}
.admin-table thead th {
    text-align: left; padding: 0.6rem 0.85rem;
    background: var(--bg-subtle); border-bottom: 2px solid var(--border-default);
    font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-table tbody td {
    padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--bg-subtle); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table .num-col { text-align: center; font-variant-numeric: tabular-nums; }
.admin-table .num-col.zero { color: var(--text-faint); }

/* Admin status badges (industry profiles) */
.admin-status-badge {
    font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.45rem;
    border-radius: var(--radius-sm); white-space: nowrap;
}
.admin-status--customized { background: var(--blue-50); color: var(--blue-700); }
.admin-status--full { background: var(--green-50); color: var(--green-700); }
.admin-status--skeleton { background: var(--bg-muted); color: var(--text-muted); }

/* Role badges */
.role-badge {
    font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.45rem;
    border-radius: var(--radius-sm); white-space: nowrap;
}
.role-badge--superadmin { background: var(--amber-100); color: var(--amber-800); }
.role-badge--company_admin { background: var(--blue-50); color: var(--blue-700); }
.role-badge--company_user { background: var(--bg-muted); color: var(--text-muted); }

/* User management */
.user-actions { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.user-role-select {
    font-size: 0.78rem; padding: 0.2rem 0.3rem; border: 1px solid var(--border-default);
    border-radius: 3px; background: var(--bg-surface); cursor: pointer;
}
.user-add-panel {
    background: var(--bg-surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); overflow: hidden;
}
.user-add-toggle {
    display: block; padding: 0.65rem 1rem; cursor: pointer;
    font-weight: 600; font-size: 0.88rem; color: var(--interactive);
    list-style: none;
}
.user-add-toggle::-webkit-details-marker { display: none; }
.user-add-toggle::marker { content: ""; }
.user-add-form {
    padding: 0 1rem 1rem;
}
.user-add-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
}
.user-add-grid label {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: 0.2rem; text-transform: uppercase;
    letter-spacing: 0.03em;
}
.user-add-grid input, .user-add-grid select {
    width: 100%; padding: 0.4rem 0.6rem; font-size: 0.88rem;
    border: 1px solid var(--border-default); border-radius: 4px;
    font-family: inherit;
}

/* User groups — platform users page */
.ug-card {
    margin-top: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ug-card--platform {
    border-color: var(--interactive-soft);
    background: linear-gradient(180deg, var(--blue-50) 0%, var(--bg-surface) 60px);
}
.ug-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem 0.55rem;
}
.ug-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ug-card-desc {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.ug-card-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    background: var(--bg-muted);
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
}
.ug-empty {
    font-size: 0.85rem;
    color: var(--text-faint);
    font-style: italic;
    padding: 0.5rem 1.1rem 1rem;
    margin: 0;
}

/* Platform admin list (card rows, not a table) */
.ug-admin-list {
    padding: 0 0.65rem 0.65rem;
}
.ug-admin-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-radius: var(--radius-sm);
}
.ug-admin-row:hover {
    background: var(--bg-subtle);
}
.ug-admin-row--inactive {
    opacity: 0.55;
}
.ug-admin-info {
    flex: 1;
    min-width: 0;
}
.ug-admin-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ug-admin-email {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ug-admin-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.ug-admin-joined {
    font-size: 0.75rem;
    color: var(--text-faint);
}
.ug-you-label {
    font-size: 0.78rem;
    color: var(--text-faint);
    font-style: italic;
}

/* Company user tables */
.ug-table-wrap {
    overflow-x: auto;
}
.ug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.ug-table thead th {
    text-align: left;
    padding: 0.5rem 0.85rem;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ug-table tbody td {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.ug-table tbody tr:last-child td {
    border-bottom: none;
}
.ug-table tbody tr:hover {
    background: var(--bg-subtle);
}
.ug-row--inactive {
    opacity: 0.55;
}
.ug-email-cell {
    color: var(--text-muted);
    font-size: 0.82rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ug-status {
    font-size: 0.75rem;
    font-weight: 500;
}
.ug-status--active { color: var(--green-600); }
.ug-status--invited { color: var(--amber-600); }
.ug-status--inactive { color: var(--red-600); }
.ug-row--invited {
    background: var(--amber-50);
}
.ug-admin-row--invited {
    background: var(--amber-50);
}

/* Admin edit header (shared) */
.admin-edit-header {
    padding-bottom: 0.5rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-default);
}

/* =============================================================
   Company Context Bar
   ============================================================= */
.company-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    padding: 0 1.5rem;
}
.company-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 40px;
}
.company-bar-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.company-bar-nav {
    display: flex;
    gap: 0;
}
.company-bar-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.55rem 0.85rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.company-bar-link:hover {
    color: var(--text-primary);
}
.company-bar-link--current {
    color: var(--interactive);
    border-bottom-color: var(--interactive);
    font-weight: 600;
}

/* ---- Company bar breadcrumb ---- */
.company-bar-context {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.company-bar-back {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--interactive);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.company-bar-back:hover {
    text-decoration: underline;
}
.company-bar-sep {
    color: var(--text-faint);
    font-size: 0.82rem;
}

/* =============================================================
   Page Headers
   ============================================================= */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}
.page-header-back {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--interactive);
    text-decoration: none;
}
.page-header-back:hover {
    text-decoration: underline;
}
.page-header-sep {
    color: var(--text-faint);
    font-size: 0.82rem;
}
.page-header-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}
.page-header-desc {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =============================================================
   Admin Hub
   ============================================================= */
.admin-hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.admin-hub-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-hub-card:hover {
    border-color: var(--interactive);
    box-shadow: var(--shadow-md);
}
.admin-hub-card-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.admin-hub-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.2rem;
}
.admin-hub-card-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* =============================================================
   Misc
   ============================================================= */
.req-star { color: var(--red-600); }

/* =============================================================
   Coverage Advisory Panels
   ============================================================= */
.coverage-panel {
    margin: 0.75rem 0 1rem;
    border: 1px solid #dde1e6;
    border-radius: 6px;
    background: #fafbfc;
}
.coverage-panel-summary {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.coverage-panel-summary:hover { background: #f2f4f7; }
.coverage-rerun { margin-left: auto; }
.btn-coverage-rerun {
    background: none;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-family: inherit;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-coverage-rerun:hover { background: #e8ebef; color: #333; }
.coverage-findings { padding: 0.5rem 1rem 0.75rem; }

/* --- Finding cards --- */
.coverage-finding {
    border-left: 3px solid #d4a843;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
}
.coverage-partial {
    border-left-color: #bbb;
}
.coverage-partial > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #555;
    padding: 0.3rem 0;
}
.coverage-finding-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.coverage-icon { font-size: 0.7rem; color: #b8860b; }
.coverage-partial .coverage-icon { color: #888; }
.coverage-meta {
    font-size: 0.75rem;
    color: #999;
    margin-left: auto;
    font-weight: normal;
}
.btn-dismiss-finding {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: #999;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    text-decoration: underline;
}
.btn-dismiss-finding:hover { color: #555; }
.coverage-finding-body { margin-top: 0.3rem; color: #555; line-height: 1.5; }
.coverage-finding-body p { margin: 0.25rem 0; }
.coverage-suggestion {
    color: #2a6496;
    font-style: italic;
}

/* --- Baseline summary bar --- */
.coverage-summary-bar {
    margin: 0.75rem 0 1rem;
    border: 1px solid #dde1e6;
    border-radius: 6px;
    background: #fafbfc;
    padding: 0.6rem 1rem;
}
.coverage-summary-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.coverage-summary-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}
.coverage-not-run { color: #888; font-weight: normal; }
.coverage-summary-sections {
    display: flex;
    gap: 1rem;
    flex: 1;
}
.coverage-section-link {
    font-size: 0.85rem;
    color: #2a6496;
    text-decoration: none;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.coverage-section-link:hover { background: #e8ebef; }
.text-warning { color: #b8860b; }
.coverage-badge {
    display: inline-block;
    background: #d4a843;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 8px;
    font-weight: 600;
    vertical-align: middle;
}
.coverage-baseline-detail {
    margin-top: 0.5rem;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}
.coverage-baseline-detail > summary {
    font-size: 0.82rem;
    color: #666;
    cursor: pointer;
}
.coverage-baseline-section {
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #444;
}
.coverage-section-go {
    font-size: 0.8rem;
    color: #2a6496;
    margin-left: 0.5rem;
}

/* =============================================================
   Industry Profile List (compact admin list)
   ============================================================= */
.ipl-list {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}
.ipl-row, .ipl-row-header {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.1s;
    flex-wrap: wrap;
}
.ipl-row:last-child { border-bottom: none; }
.ipl-row:hover, .ipl-row-header:hover { background: var(--bg-subtle); }

.ipl-row-card {
    border-bottom: 1px solid var(--border-subtle);
}
.ipl-row-card:last-child { border-bottom: none; }
.ipl-row-card .ipl-row-header { border-bottom: none; }

.ipl-pattern-counts {
    display: flex; gap: 0.3rem; align-items: center; flex-shrink: 0;
}

.ipl-gen-section {
    padding: 0 1rem 0.8rem 1rem;
}

.ipl-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 180px;
    flex-shrink: 1;
}
.ipl-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipl-name:hover { color: var(--interactive); }

/* Completeness bar */
.ipl-bar {
    width: 48px;
    height: 5px;
    background: var(--bg-muted);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.ipl-bar-fill {
    height: 100%;
    background: var(--interactive);
    border-radius: 3px;
    transition: width 0.3s;
}
.ipl-bar-fill--full {
    background: var(--green-500, #22c55e);
}

/* Inline counts */
.ipl-counts {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ipl-c-sep {
    color: var(--border-default);
    margin: 0 0.15rem;
}
.ipl-c-zero {
    color: var(--text-faint);
}

/* Actions */
.ipl-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.ipl-edit-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--interactive);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--interactive);
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}
.ipl-edit-btn:hover {
    background: var(--blue-50, #eff6ff);
}

/* More actions dropdown */
.ip-more-menu {
    position: relative;
    margin-left: auto;
}
.ip-more-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}
.ip-more-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.ip-more-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 150px;
    z-index: 20;
    padding: 0.25rem 0;
}
.ip-more-menu.open .ip-more-dropdown { display: block; }
.ip-more-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    text-decoration: none;
}
.ip-more-item:hover { background: var(--bg-subtle); }
.ip-more-item--danger { color: var(--red-600, #dc2626); }
.ip-more-item--danger:hover { background: var(--red-50, #fef2f2); }

/* =============================================================
   Knowledge Editor Layout (edit page)
   ============================================================= */
.ke-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-default);
}
.ke-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ke-back {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--interactive);
    text-decoration: none;
}
.ke-back:hover { text-decoration: underline; }
.ke-title {
    margin: 0;
    font-size: 1.25rem;
}
.ke-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ke-suggest-msg {
    font-size: 0.82rem;
    min-height: 1.2em;
    margin-bottom: 0.5rem;
}
.ke-suggest-msg:empty { display: none; }
.ke-suggest-msg--success { color: var(--green-700, #15803d); }
.ke-suggest-msg--error { color: var(--red-600, #dc2626); }

/* Two-column layout */
.ke-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    max-width: 1400px;
}

/* Sticky sidebar */
.ke-sidebar {
    width: 190px;
    flex-shrink: 0;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
}
.ke-sidebar-inner {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.ke-nav-group-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.85rem 0.25rem;
}
.ke-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.ke-nav-item:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}
.ke-nav-item.active {
    background: var(--blue-50, #eff6ff);
    color: var(--interactive);
    border-left-color: var(--interactive);
    font-weight: 600;
}
.ke-nav-count {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-muted);
    color: var(--text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 9px;
    min-width: 1.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ke-nav-item.active .ke-nav-count {
    background: var(--interactive);
    color: #fff;
}
/* ke-nav-count--badge removed — all sidebar counts now use the same style */
.ke-nav-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0.4rem 0.85rem;
}
.ke-nav-manage {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-top: 1px solid var(--border-subtle);
}
.ke-nav-manage:hover {
    color: var(--primary);
}

/* Content area */
.ke-content {
    flex: 1;
    min-width: 0;
}

/* Sections: only active is visible */
.ke-section { display: none; }
.ke-section.active { display: block; }

.ke-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.ke-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.ke-section-count {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.ke-section-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ke-toggle-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--interactive);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.ke-toggle-link:hover { text-decoration: underline; }
.ke-section-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

/* Sub-industry management list */
.ke-subindustry-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ke-subindustry-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ke-subindustry-input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--bg);
    max-width: 400px;
}
.ke-subindustry-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* Cards */
.ke-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ke-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0;
    margin: 0;
}
.ke-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}
.ke-card-header:hover { background: var(--bg-subtle); }
.ke-card-toggle {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
}
.ke-card-toggle:hover { color: var(--text-secondary); }
.ke-card-name {
    flex: 1;
    min-width: 200px;
    font-weight: 600;
    font-size: 0.88rem;
}
.ke-card-meta {
    width: auto;
    max-width: 180px;
    font-size: 0.82rem;
}
.ke-card-body {
    padding: 0.75rem 1rem 0.75rem 1.75rem;
    border-top: 1px solid var(--border-subtle);
}
.ke-card.collapsed .ke-card-body { display: none; }
.ke-field {
    margin-bottom: 0.75rem;
}
.ke-field:last-child { margin-bottom: 0; }
.ke-field-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.ke-field-row:last-child { margin-bottom: 0; }
.ke-field-row .ke-field { margin-bottom: 0; }
.ke-field-row > .ke-field { flex: 1; min-width: 0; }
@media (max-width: 700px) {
    .ke-field-row { flex-direction: column; gap: 0.5rem; }
}

/* Integration row editor */
.integ-rows { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.35rem; }
.integ-row {
    display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap;
    padding: 0.3rem 0.4rem; background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); font-size: 0.78rem;
}
.integ-row input.integ-target { flex: 1.5; min-width: 120px; }
.integ-row input.integ-field { flex: 1.2; min-width: 100px; }
.integ-row select.integ-field { flex: 0.8; min-width: 90px; }
.integ-field {
    padding: 0.2rem 0.35rem; border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); font-size: 0.75rem; font-family: inherit;
    background: var(--bg-surface); color: var(--text-secondary);
}
.integ-remove {
    background: none; border: none; color: var(--red-500); cursor: pointer;
    font-size: 1rem; padding: 0 0.25rem; line-height: 1;
}
.integ-remove:hover { color: var(--red-700); }
.integ-add-btn { margin-top: 0.25rem; }
.integ-read-summary {
    font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;
}

.ke-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}
/* Form elements inside ke-card-body — match wizard screen styling */
.ke-card-body textarea,
.ke-card-body input[type="text"] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    resize: vertical;
    box-sizing: border-box;
}
.ke-card-body select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    box-sizing: border-box;
}
.ke-card-body textarea:focus,
.ke-card-body input[type="text"]:focus,
.ke-card-body select:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Read-only name in card header */
.ke-name-read {
    font-weight: 600;
    font-size: 0.88rem;
    flex: 1;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ke-card.editing .ke-name-read { display: none; }
.ke-card:not(.editing) .ke-card-name { display: none; }

/* Read-only meta badge in card header */
.ke-meta-read {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
}
.ke-card.editing .ke-meta-read { display: none; }
.ke-card:not(.editing) .ke-card-meta { display: none; }

/* Edit button on card header */
.ke-edit-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--interactive);
    padding: 0.15rem 0.55rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ke-edit-btn:hover {
    background: var(--blue-50, #eff6ff);
    border-color: var(--interactive);
}

.ke-cancel-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    padding: 0.15rem 0.55rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ke-cancel-btn:hover {
    background: var(--red-50, #fef2f2);
    border-color: var(--red-400, #f87171);
    color: var(--red-600, #dc2626);
}
/* Hide Cancel when card is in read mode */
.ke-card:not(.editing) .ke-cancel-btn { display: none; }

/* Read-only text paragraphs — matches .proc-read-text */
.ke-read-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}
.ke-read-text:empty::before {
    content: '\2014';
    color: var(--text-faint);
}
.ke-card.editing .ke-read-text { display: none; }

/* Hide form elements in read mode, show in edit mode */
.ke-card:not(.editing) .ke-card-body textarea,
.ke-card:not(.editing) .ke-card-body input[type="text"],
.ke-card:not(.editing) .ke-card-body select { display: none; }
.ke-card:not(.editing) .soft { display: none; }
.ke-card:not(.editing) .integ-rows,
.ke-card:not(.editing) .integ-add-btn { display: none; }
.ke-card.editing .integ-read-summary { display: none; }
.ke-card:not(.editing) .ctrl-rows,
.ke-card:not(.editing) .ctrl-add-btn { display: none; }
.ke-card.editing .ctrl-read-summary { display: none; }
.ke-card:not(.editing) .vs-stages-list,
.ke-card:not(.editing) .vs-add-stage-btn { display: none; }
.ke-card.editing .vs-stages-read { display: none; }
.ke-card:not(.editing) .vs-stage-row .btn-remove { display: none; }
.ke-card:not(.editing) input[type="number"] { display: none; }

/* Document upload suggestions panel */
.ke-doc-suggestions {
    background: var(--blue-50, #eff6ff);
    border: 1px solid var(--blue-200, #bfdbfe);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.ke-doc-sug-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.ke-doc-sug-section {
    margin-bottom: 0.65rem;
}
.ke-doc-sug-section:last-child { margin-bottom: 0; }
.ke-doc-sug-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

/* Sub-industry cards */
.ke-sub-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.65rem;
}
.ke-sub-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    user-select: none;
}
.ke-sub-card-header:hover { background: var(--bg-subtle); }
.ke-sub-card-name { flex: 1; font-size: 0.92rem; }
.ke-sub-card-body {
    padding: 0.5rem 0.85rem 0.85rem;
    border-top: 1px solid var(--border-subtle);
}
.ke-sub-card.collapsed .ke-sub-card-body { display: none; }

/* Sub-industry type groups */
.sl-type-group + .sl-type-group {
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.6rem;
    margin-top: 0.6rem;
}
.sl-type-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.sl-type-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.sl-item {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.82rem;
}
.sl-item:last-child { border-bottom: none; }

/* AI Suggest button (section-level) */
.ke-ai-suggest-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--interactive);
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ke-ai-suggest-btn:hover {
    background: var(--blue-50, #eff6ff);
    border-color: var(--interactive);
}
.ke-ai-fill-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--interactive);
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    margin-left: 0.25rem;
    transition: background 0.15s, border-color 0.15s;
}
.ke-ai-fill-btn:hover {
    background: var(--blue-50, #eff6ff);
    border-color: var(--interactive);
}
.ke-ai-fill-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.ke-card:not(.editing) .ke-ai-fill-btn { display: none; }

/* Save button (L3 card level + edit actions) */
.ke-save-btn {
    background: var(--interactive, #2563eb);
    border: 1px solid var(--interactive, #2563eb);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    padding: 0.15rem 0.6rem;
    cursor: pointer;
    margin-left: 0.25rem;
    transition: background 0.15s;
}
.ke-save-btn:hover { background: var(--interactive-hover, #1d4ed8); }
.ke-save-btn--ok {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

/* Suggestion panel */
.ke-suggestions-panel {
    display: none;
    background: var(--blue-50, #eff6ff);
    border: 1px solid var(--blue-200, #bfdbfe);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.ke-sug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.ke-sug-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ke-sug-accept-all {
    background: var(--interactive);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    margin-left: auto;
}
.ke-sug-accept-all:hover { opacity: 0.85; }
.ke-sug-dismiss {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}
.ke-sug-dismiss:hover { color: var(--text-secondary); }
.ke-sug-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ke-sug-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    transition: opacity 0.25s, transform 0.25s;
}
.ke-sug-item--accepted {
    opacity: 0;
    transform: translateX(20px);
}
.ke-sug-item--ignored {
    opacity: 0;
    transform: translateX(-20px);
}
.ke-sug-item-info {
    flex: 1;
    min-width: 0;
}
.ke-sug-item-name {
    font-size: 0.88rem;
}
.ke-sug-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.35rem;
}
.ke-sug-item-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.35;
}
.ke-sug-item-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    align-items: flex-start;
}
.ke-sug-add {
    background: var(--interactive);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
}
.ke-sug-add:hover { opacity: 0.9; }
.ke-sug-ignore {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}
.ke-sug-ignore:hover {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.ke-sug-loading {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.5rem 0;
}
.ke-sug-error {
    font-size: 0.85rem;
    color: var(--red-600, #dc2626);
    padding: 0.25rem 0;
}
.ke-sug-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

/* =============================================================
   Requirement Coverage Analysis
   ============================================================= */

.rc-summary {
    padding: 0.85rem 1.1rem;
    background: #fff8e6;
    border: 1px solid #f0dfa0;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #5a4a00;
    margin-bottom: 1.25rem;
}
.rc-summary--clean {
    background: #e8f5e9;
    border-color: #b7dcbf;
    color: #2d6a4f;
}
.rc-summary-note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: #8a7730;
}
.rc-summary--clean .rc-summary-note { color: #4a8a5a; }

.rc-section {
    margin-bottom: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    overflow: hidden;
}
.rc-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.rc-rule-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--text-muted);
    flex-shrink: 0;
}
.rc-rule-icon--process { background: #2563eb; }
.rc-rule-icon--persona { background: #7c3aed; }
.rc-rule-icon--system  { background: #0891b2; }
.rc-rule-icon--intent  { background: #d97706; }
.rc-rule-icon--nfr     { background: #059669; }
.rc-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
}

.rc-findings {
    padding: 0.35rem 0;
}
.rc-finding {
    padding: 0.45rem 1rem 0.45rem 1.1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.rc-finding:last-child { border-bottom: none; }
.rc-finding-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rc-severity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e6a817;
}
.rc-finding--gap .rc-severity-dot { background: #c0392b; }
.rc-finding--weak .rc-severity-dot { background: #e6a817; }
.rc-finding-message {
    font-size: 0.84rem;
    color: var(--text-secondary);
}
.rc-finding-detail {
    margin-top: 0.2rem;
    margin-left: 1.05rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.rc-finding-actions {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.rc-action-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--interactive, #2563eb);
    text-decoration: none;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
}
.rc-action-link:hover {
    background: var(--bg-subtle);
    text-decoration: none;
}
.rc-dismiss-btn {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    font-family: inherit;
}
.rc-dismiss-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.rc-reset-btn {
    font-size: 0.78rem;
    color: var(--interactive, #2563eb);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
}
.rc-reset-btn:hover {
    color: var(--text-primary);
}

/* =============================================================
   AI Context Used Modal
   ============================================================= */
.ctx-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ctx-fade-in 0.15s ease;
}
@keyframes ctx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ctx-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: min(520px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    font-size: 0.85rem;
}
.ctx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.ctx-modal-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #222);
}
.ctx-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-secondary, #555);
    line-height: 1;
    padding: 0 0.25rem;
}
.ctx-modal-close:hover {
    color: var(--text-primary, #222);
}
.ctx-modal-pills {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem 0;
}
.ctx-pill {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
}
.ctx-pill-active {
    background: #d4edda;
    color: #155724;
}
.ctx-pill-inactive {
    background: #f0f0f0;
    color: #888;
}
.ctx-modal-body {
    padding: 0.6rem 1rem 0.75rem;
}
.ctx-row {
    margin-bottom: 0.3rem;
}
.ctx-layers-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.82rem;
}
.ctx-layers-table th {
    text-align: left;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary, #555);
    font-weight: 600;
}
.ctx-layers-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.ctx-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
}
.ctx-active {
    background: #d4edda;
    color: #155724;
}
.ctx-inactive {
    background: #f0f0f0;
    color: #888;
}
.ctx-modal-footer {
    padding: 0.5rem 1rem 0.75rem;
    text-align: right;
    border-top: 1px solid #f0f0f0;
}

/* -- Results summary (shown above context in modal) -- */
.results-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}
.results-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #d4edda;
    color: #155724;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.results-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary, #222);
}
.results-details {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
}
.results-details li {
    font-size: 0.8rem;
    color: var(--text-secondary, #555);
    padding-left: 0.8rem;
    position: relative;
}
.results-details li::before {
    content: '·';
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* -- Collapsible context details -- */
.ctx-details-toggle {
    border-top: 1px solid #eee;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}
.ctx-details-summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #888);
    user-select: none;
    list-style: none;
    padding: 0.3rem 0;
}
.ctx-details-summary::-webkit-details-marker { display: none; }
.ctx-details-summary::before {
    content: '▸ ';
    font-size: 0.7rem;
}
details[open] > .ctx-details-summary::before {
    content: '▾ ';
}
.ctx-meta-item {
    font-size: 0.75rem;
    color: #999;
}
.ctx-meta-item + .ctx-meta-item::before {
    content: ' · ';
}

/* =============================================================
   Pattern Generator & Review
   ============================================================= */
.pat-gen-form .form-group {
    margin-bottom: 1rem;
}
.pat-gen-form .form-select,
.pat-gen-form .form-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
}
.pat-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin-top: 0.25rem;
}
.pat-check-label {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

/* Review layout */
.pat-review-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.pat-batch-list {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 4rem;
}
.pat-batch-item {
    display: block;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.4rem;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.82rem;
}
.pat-batch-item:hover { border-color: var(--blue-accent, #4a90d9); }
.pat-batch-active { border-color: var(--blue-accent, #4a90d9); background: #f0f6ff; }
.pat-batch-title { font-weight: 600; }
.pat-batch-meta { font-size: 0.75rem; color: #888; margin-top: 0.15rem; }
.pat-count-pending { color: #856404; margin-left: 0.3rem; }
.pat-count-approved { color: #155724; margin-left: 0.3rem; }
.pat-batch-detail { flex: 1; min-width: 0; }
.pat-batch-header { margin-bottom: 1rem; }
.pat-batch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* Pattern cards */
.pat-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.6rem;
    background: #fff;
    transition: border-color 0.2s, opacity 0.2s;
}
.pat-status-approved { border-left: 4px solid #28a745; }
.pat-status-rejected { border-left: 4px solid #dc3545; opacity: 0.55; }
.pat-status-pending { border-left: 4px solid #ffc107; }
.pat-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    flex-wrap: wrap;
}
.pat-card-header:hover { background: #fafafa; }
.pat-card-cat {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #e9ecef;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    color: #495057;
}
.pat-card-name { flex: 1; font-size: 0.9rem; }
.pat-card-status-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
}
.pat-status-approved .pat-card-status-badge { background: #d4edda; color: #155724; }
.pat-status-rejected .pat-card-status-badge { background: #f8d7da; color: #721c24; }
.pat-status-pending .pat-card-status-badge { background: #fff3cd; color: #856404; }
.pat-card-actions {
    display: flex;
    gap: 0.3rem;
}
.pat-btn-approve, .pat-btn-reject, .pat-btn-pending {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.pat-btn-approve:hover { background: #d4edda; border-color: #28a745; }
.pat-btn-reject:hover { background: #f8d7da; border-color: #dc3545; }
.pat-btn-pending:hover { background: #fff3cd; border-color: #ffc107; }
.pat-card-body {
    padding: 0 0.75rem 0.6rem;
    font-size: 0.82rem;
}
.pat-card-desc { margin-bottom: 0.4rem; color: #444; }
.pat-card-section { margin-bottom: 0.3rem; }
.pat-card-section ul, .pat-card-section ol { margin: 0.2rem 0 0.2rem 1.2rem; padding: 0; }
.pat-card-section li { margin-bottom: 0.1rem; }
.pat-steps { margin: 0.2rem 0 0.2rem 1.2rem; padding: 0; }
.pat-steps li { margin-bottom: 0.15rem; }

/* --- Pattern Generator: stepped wizard --- */
.pat-gen-layout { max-width: 720px; }
.pat-gen-step {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 1.2rem 1.4rem; margin-bottom: 1rem;
}
.pat-gen-step-title {
    margin: 0 0 0.6rem; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.pat-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--blue-accent, #4a90d9); color: #fff;
    font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.pat-step-hint { font-weight: 400; font-size: 0.82rem; color: #888; }
.pat-cat-chip {
    background: #f5f7fa; border: 1px solid #dce3ed; border-radius: 6px;
    padding: 0.3rem 0.6rem; font-size: 0.82rem;
}
.pat-cat-count { font-size: 0.75rem; color: #888; margin-left: 0.2rem; }

/* --- Pattern Generator: progress bar --- */
.pat-progress-bar {
    height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden;
}
.pat-progress-fill {
    height: 100%; width: 0; background: var(--blue-accent, #4a90d9);
    border-radius: 4px; transition: width 0.4s ease;
}

/* --- Pattern Review: summary & filter --- */
.pat-summary-bar { display: flex; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
.pat-summary-pill {
    font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.6rem;
    border-radius: 10px;
}
.pat-pill-pending { background: #fff3cd; color: #856404; }
.pat-pill-approved { background: #d4edda; color: #155724; }
.pat-pill-rejected { background: #f8d7da; color: #721c24; }

.pat-filter-bar {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    margin: 0.8rem 0; padding: 0.4rem 0; border-bottom: 1px solid #eee;
}
.pat-filter-btn {
    background: #f5f7fa; border: 1px solid #dce3ed; border-radius: 4px;
    padding: 0.2rem 0.6rem; font-size: 0.78rem; cursor: pointer;
    color: #555; transition: all 0.15s;
}
.pat-filter-btn:hover { border-color: var(--blue-accent, #4a90d9); color: #333; }
.pat-filter-active {
    background: var(--blue-accent, #4a90d9); color: #fff;
    border-color: var(--blue-accent, #4a90d9);
}

/* --- Pattern Review: card extras --- */
.pat-card-toggle {
    font-size: 0.7rem; color: #999; flex-shrink: 0; width: 1rem; text-align: center;
    transition: transform 0.15s;
}
.pat-card-meta {
    font-size: 0.75rem; color: #999; margin-top: 0.5rem;
    padding-top: 0.4rem; border-top: 1px solid #eee;
}

/* --- Industry Pattern Cards (Pattern Library page) --- */
.ind-card {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    margin-bottom: 0.5rem; transition: border-color 0.15s;
}
.ind-card:hover { border-color: #ccc; }
.ind-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1rem; cursor: pointer; min-height: 2.6rem;
}
.ind-card-header:hover { background: #fafafa; border-radius: 8px; }
.ind-card-title { font-size: 0.95rem; white-space: nowrap; }
.ind-card-counts {
    display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;
    margin-left: 0.5rem; flex: 1;
}
.ind-count-pill {
    font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem;
    border-radius: 8px; background: #e8f0fe; color: #1a56db;
    white-space: nowrap;
}
.ind-count-empty { background: #f5f5f5; color: #999; font-weight: 400; }
.ind-count-pending { background: #fff3cd; color: #856404; }
.ind-card-actions {
    display: flex; gap: 0.3rem; align-items: center; flex-shrink: 0;
}
.ind-card.collapsed .ind-card-body { display: none; }
.ind-card-body {
    padding: 0.6rem 1rem 0.8rem 2.8rem;
    border-top: 1px solid #f0f0f0; font-size: 0.85rem;
}
.ind-detail-row { margin-bottom: 0.35rem; color: #555; }
.ind-detail-row strong { color: #333; margin-right: 0.3rem; }
.ind-domain-chip {
    display: inline-block; font-size: 0.75rem; background: #f0f6ff;
    border: 1px solid #d0dfef; border-radius: 4px;
    padding: 0.05rem 0.4rem; margin: 0.1rem 0.2rem;
}
.ind-gen-divider {
    border-top: 1px solid #e0e0e0; margin: 0.7rem 0;
}
.ind-gen-group {
    margin-bottom: 0.6rem;
}
.ind-gen-group > strong {
    display: block; font-size: 0.82rem; margin-bottom: 0.25rem;
}
.ind-gen-group > small {
    display: block; margin-bottom: 0.3rem;
}

/* =============================================================
   Process Hierarchy Tree
   ============================================================= */
.hier-tree { margin-top: 0.5rem; }
.hier-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1.4;
    position: relative;
}
.hier-row:hover { background: var(--bg-hover, #f5f7fa); }
.hier-arrow {
    display: inline-block;
    width: 0.9rem;
    font-size: 0.7rem;
    color: #999;
    flex-shrink: 0;
    text-align: center;
    transition: transform 0.15s;
}
.hier-bullet {
    display: inline-block;
    width: 0.9rem;
    flex-shrink: 0;
}
.hier-bullet::before {
    content: "\2022";
    color: #bbb;
    font-size: 0.9rem;
}

/* Read-mode names (L1-L3) */
.hier-read-name { cursor: pointer; user-select: none; }
.hier-read-name-l1 { font-weight: 600; }
.hier-read-name-l2 { font-weight: 500; }
.hier-read-name-l3 { font-weight: 500; color: #445; }
.hier-row.hier-editing .hier-read-name,
.hier-row.hier-editing .hier-read-badge { display: none !important; }
.hier-row:not(.hier-editing) .hier-edit { display: none !important; }
.hier-row.hier-editing .hier-edit { display: inline-block !important; }
.hier-btn-edit, .hier-btn-save {
    background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
    font-size: 0.7rem; font-family: inherit; font-weight: 500; letter-spacing: 0.01em;
    padding: 0.15rem 0.45rem; transition: background 0.15s;
    flex-shrink: 0; line-height: 1.4;
}
.hier-btn-edit { color: var(--accent, #2563eb); }
.hier-btn-edit:hover { background: var(--blue-50, #eff6ff); border-color: var(--accent, #2563eb); }
.hier-row.hier-editing .hier-btn-edit { color: var(--accent, #2563eb); }
.hier-row.hier-editing .hier-btn-edit:hover { background: var(--blue-50, #eff6ff); border-color: var(--accent, #2563eb); }
.hier-btn-save { color: var(--accent, #2563eb); }
.hier-btn-save:hover { background: var(--blue-50, #eff6ff); border-color: var(--accent, #2563eb); }

.hier-children { display: none; }

/* L1: Value Stream */
.hier-row-l1 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-heading, #1a2b4a);
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #e8ecf0;
}
.hier-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent, #2563eb);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    flex-shrink: 0;
}

/* L2: Stage */
.hier-l2 { margin-left: 2.4rem; }
.hier-row-l2 {
    font-size: 0.88rem;
    font-weight: 500;
    color: #334;
}
.hier-num {
    font-weight: 600;
    color: #888;
    min-width: 1.4rem;
    flex-shrink: 0;
}
.hier-desc {
    color: #888;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28rem;
}

/* L3: Process */
.hier-l3 { margin-left: 2.75rem; }
.hier-row-l3 {
    font-size: 0.84rem;
    font-weight: 500;
    color: #445;
}
.hier-row-l3 .hier-read-name-l3 { flex: 1; }

/* L3 process detail panel (promoted from L4) */
.hier-l3 > .hier-row-l3 > .hier-read-name-l3 { cursor: pointer; color: var(--link, #2563eb); }
.hier-l3 > .hier-row-l3 > .hier-read-name-l3:hover { text-decoration: underline; }
.hier-tag {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #e8f0fe;
    color: #1a56db;
    flex-shrink: 0;
}
.hier-tag-dim {
    background: #f0f0f0;
    color: #777;
}

/* L4 detail panel */
.hier-l3-detail {
    margin: 0.3rem 0 0.5rem 1.3rem;
    padding: 0.6rem 0.8rem;
    background: #fafbfc;
    border: 1px solid #e8ecf0;
    border-radius: 6px;
    font-size: 0.8rem;
}
.hier-l3-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.hier-l3-field label {
    font-weight: 600;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-bottom: 0.15rem;
}
.hier-l3-field p {
    margin: 0;
    color: #444;
    line-height: 1.45;
}
.hier-l3-steps {
    margin: 0;
    padding-left: 1.2rem;
    color: #444;
}
.hier-l3-steps li { margin-bottom: 0.15rem; }
.hier-l3-field ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #444;
}

/* ── Drag handle ── */
.hier-drag-handle {
    cursor: grab;
    color: #bbb;
    font-size: 0.9rem;
    padding: 0 0.3rem;
    user-select: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.hier-row:hover .hier-drag-handle { opacity: 1; }
.hier-drag-handle:active { cursor: grabbing; }

/* ── Drag-and-drop visual feedback ── */
.hier-dragging { opacity: 0.35; }
.hier-drag-over-above { border-top: 2px solid var(--interactive, #2563eb) !important; }
.hier-drag-over-below { border-bottom: 2px solid var(--interactive, #2563eb) !important; }
.hier-drag-over-into > .hier-row {
    background: var(--interactive-muted, #eff6ff);
    outline: 2px dashed var(--interactive, #2563eb);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Counts */
.hier-count {
    font-size: 0.72rem;
    color: #999;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Editable hierarchy inputs ── */
.hier-edit {
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.15rem 0.3rem;
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
}
.hier-edit:hover { border-color: #ddd; background: #fff; }
.hier-edit:focus { border-color: var(--accent, #2563eb); background: #fff; outline: none; }
.hier-edit-badge {
    width: 3.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    color: var(--accent, #2563eb);
}
.hier-edit-name-l1 { font-size: 0.95rem; font-weight: 600; flex: 1; min-width: 8rem; }
.hier-edit-name-l2 { font-size: 0.88rem; font-weight: 500; flex: 0 0 12rem; }
.hier-edit-name-l3 { font-size: 0.84rem; font-weight: 500; flex: 1; min-width: 10rem; }
.hier-edit-num { width: 2.8rem; text-align: center; font-size: 0.82rem; }
.hier-edit-desc { font-size: 0.78rem; color: #666; flex: 1; min-width: 10rem; }

/* Action buttons */
.hier-btn-remove {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #999;
    cursor: pointer;
    font-size: 0.7rem;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.15rem 0.45rem;
    flex-shrink: 0;
    line-height: 1.4;
    transition: background 0.15s;
}
.hier-btn-remove:hover { color: #e53e3e; background: #fef2f2; border-color: #e53e3e; }
.hier-btn-ai {
    background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
    font-size: 0.7rem; font-family: inherit; font-weight: 500; letter-spacing: 0.01em;
    padding: 0.15rem 0.45rem; transition: background 0.15s;
    flex-shrink: 0; line-height: 1.4; color: var(--accent, #2563eb);
}
.hier-btn-ai:hover { background: var(--blue-50, #eff6ff); border-color: var(--accent, #2563eb); }
.hier-btn-move {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.3rem;
    flex-shrink: 0;
    visibility: hidden;
}
.hier-row:hover .hier-btn-move { visibility: visible; color: var(--interactive, #2563eb); }
.hier-btn-move:hover { color: var(--interactive-hover, #1d4ed8); }

.hier-move-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-default, #d1d9e2);
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 280px;
    max-width: 420px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
}
.hier-move-title {
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #334155);
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hier-move-list {
    overflow-y: auto;
    flex: 1;
}
.hier-move-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.hier-move-option:hover {
    background: var(--interactive-muted, #eff6ff);
    color: var(--interactive, #2563eb);
}
.hier-move-option:last-child { border-bottom: none; }
.hier-move-cancel {
    border: none;
    background: var(--bg-subtle, #f0f3f7);
    color: var(--text-muted, #64748b);
    padding: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
}
.hier-move-cancel:hover { background: var(--bg-muted, #e8ecf1); }

.hier-btn-add {
    background: none;
    border: 1px solid #ddd;
    color: #666;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
    visibility: hidden;
}
.hier-row:hover .hier-btn-add { visibility: visible; }
.hier-btn-add:hover { background: #e8f0fe; color: var(--accent, #2563eb); border-color: var(--accent, #2563eb); }
.hier-add-row { padding: 0.3rem 0 0.15rem 0.4rem; }
.hier-add-row-l2 { margin-left: 4.625rem; }
.hier-add-row-l3 { margin-left: 6.225rem; }
.hier-btn-add-inline {
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 3px;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s, background 0.15s;
}
.hier-btn-add-inline:hover {
    color: var(--interactive, #2563eb);
    background: var(--interactive-muted, #eff6ff);
    border-color: var(--interactive, #2563eb);
}

/* L4 action bar */
.hier-l3-actions {
    display: flex; gap: 0.4rem; padding: 0.4rem 0.5rem 0.2rem;
    border-bottom: 1px solid #f0f0f0;
}
.hier-l3-actions .ke-edit-btn,
.hier-l3-actions .ke-ai-fill-btn,
.hier-l3-actions .ke-save-btn { font-size: 0.72rem; padding: 0.15rem 0.6rem; }

/* L4 read view */
.hier-l3-read { padding: 0.4rem 0.5rem; cursor: text; user-select: text; }
.hier-l3-read-title { font-weight: 600; font-size: 0.88rem; color: #1a1a1a; margin-bottom: 0.3rem; }
.hier-l3-detail { cursor: default; user-select: text; }
.hier-l3-read-field {
    display: flex; gap: 0.5rem; padding: 0.25rem 0;
    font-size: 0.82rem; line-height: 1.4;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}
.hier-l3-read-field:last-child { border-bottom: none; }
.hier-l3-read-label {
    flex: 0 0 10rem; font-weight: 600; color: var(--text-secondary, #334155);
    font-size: 0.78rem; letter-spacing: normal;
    padding-top: 0.05rem;
}
.hier-l3-read-value { flex: 1; color: #333; }
.hier-l3-empty {
    color: #999; font-style: italic; font-size: 0.82rem;
    padding: 0.5rem 0; margin: 0;
}
.hier-l3-read-list {
    margin: 0; padding: 0 0 0 1.1rem;
    list-style: disc;
}
.hier-l3-read-list li {
    padding: 0.05rem 0;
    line-height: 1.35;
}

/* L4 edit actions (Done button at bottom) */
.hier-l3-edit-actions {
    display: flex; gap: 0.4rem; padding: 0.4rem 0.5rem;
    border-top: 1px solid #f0f0f0;
}
.hier-l3-edit-actions .ke-edit-btn,
.hier-l3-edit-actions .ke-ai-fill-btn,
.hier-l3-edit-actions .ke-done-btn,
.hier-l3-edit-actions .ke-save-btn { font-size: 0.72rem; padding: 0.15rem 0.6rem; }
.ke-done-btn {
    background: #f3f4f6; color: #374151; border: 1px solid #d1d5db;
    border-radius: var(--radius-sm); font-family: inherit; cursor: pointer;
}
.ke-done-btn:hover { background: #e5e7eb; }
.ke-save-btn.ke-save-btn--dirty {
    background: #d97706 !important; border-color: #b45309 !important;
}
.ke-save-btn.ke-save-btn--dirty:hover {
    background: #b45309 !important; border-color: #92400e !important;
}

/* L4 edit form */
.hier-l3-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    padding: 0.5rem;
}
.hier-l3-edit-field { display: flex; flex-direction: column; }
.hier-l3-edit-field:first-child,
.hier-l3-edit-field:nth-child(2) { grid-column: 1 / -1; }
.hier-l3-edit-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #334155);
    letter-spacing: normal;
    margin-bottom: 0.15rem;
}
.hier-l3-edit-field input,
.hier-l3-edit-field textarea,
.hier-l3-edit-field select {
    font-family: inherit;
    font-size: 0.82rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
}
.hier-l3-edit-field textarea { resize: vertical; min-height: 2.5rem; }
.hier-l3-edit-field input:focus,
.hier-l3-edit-field textarea:focus,
.hier-l3-edit-field select:focus { border-color: var(--accent, #2563eb); outline: none; }

/* ================================================================
   Initiative Wizard — Accordion Panels
   ================================================================ */
.wiz-accordion { max-width: 900px; }

.wiz-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.wiz-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.wiz-panel-header:hover { background: var(--bg-subtle); }

.wiz-panel-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}
.wiz-panel--done .wiz-panel-num {
    background: var(--success);
    color: #fff;
}

.wiz-panel-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.wiz-panel-check {
    display: none;
    color: var(--success);
    font-size: 1rem;
}
.wiz-panel--done .wiz-panel-check { display: inline; }

.wiz-panel-arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.2s;
}
.wiz-panel--open .wiz-panel-arrow { transform: rotate(180deg); }

.wiz-panel-body {
    display: none;
    padding: 0.25rem 1rem 1rem;
    border-top: 1px solid var(--border-subtle);
}
.wiz-panel--open .wiz-panel-body { display: block; }

.wiz-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.wiz-btn-next {
    background: var(--interactive);
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.wiz-btn-next:hover { background: var(--interactive-hover); }

.wiz-btn-validate {
    font-size: 0.85rem;
}

/* ---- Validation feedback ---- */
.wiz-panel-feedback { margin-top: 0.75rem; }
.wiz-panel-feedback:empty { display: none; }

.wiz-fb-strong,
.wiz-fb-warn,
.wiz-fb-empty,
.wiz-fb-error {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
.wiz-fb-strong { background: #f0fdf4; border-left: 3px solid var(--success); color: #14532d; }
.wiz-fb-warn   { background: #fffbeb; border-left: 3px solid var(--warning); color: #78350f; }
.wiz-fb-empty  { background: #fef2f2; border-left: 3px solid var(--danger);  color: #7f1d1d; }
.wiz-fb-error  { background: #fef2f2; border-left: 3px solid var(--danger);  color: #7f1d1d; }

.wiz-fb-suggestion {
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: var(--interactive-muted);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.wiz-fb-suggestion em { color: var(--interactive); font-size: 0.78rem; }
.wiz-fb-suggestion-text {
    display: block;
    margin-top: 0.25rem;
    padding: 0.4rem 0.5rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-style: normal;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ================================================================
   Scope Tree (Step 4)
   ================================================================ */
.scope-tree { max-height: 500px; overflow-y: auto; padding-right: 0.5rem; }

.scope-toggle {
    display: inline-block;
    width: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.scope-l1 {
    margin-bottom: 0.35rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.scope-l1-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}
.scope-l1-header:hover { background: var(--bg-subtle); }
.scope-l1-count { color: var(--text-muted); font-size: 0.78rem; font-weight: normal; margin-left: auto; }

.scope-l1-body { padding: 0.25rem 0.5rem 0.5rem 1.75rem; }

.scope-l2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font-weight: normal;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.scope-l2:hover { background: var(--bg-subtle); }
.scope-l2-count { color: var(--text-faint); font-size: 0.78rem; }

.scope-summary {
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

/* ================================================================
   Editable List (Steps 5 & 6)
   ================================================================ */
.editable-list {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.25rem;
}
.editable-list-hint {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.editable-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--blue-200, #bfdbfe);
    transition: background 0.1s;
}
.editable-row:hover { background: var(--bg-subtle); }
.editable-row .editable-name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.editable-row .editable-name-input {
    flex: 1;
    font-size: 0.88rem;
    font-family: inherit;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--interactive);
    border-radius: var(--radius-sm);
    outline: none;
    min-width: 0;
}
.editable-row .edit-btn,
.editable-row .remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}
.editable-row:hover .edit-btn,
.editable-row:hover .remove-btn { opacity: 1; }
.editable-row .edit-btn:hover { color: var(--interactive); }
.editable-row .remove-btn:hover { color: var(--danger); }
.editable-row--editing .edit-btn,
.editable-row--editing .remove-btn { opacity: 1; }

.editable-add-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.25rem;
}
.editable-add-row input {
    flex: 1;
    font-size: 0.86rem;
    font-family: inherit;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.editable-add-row input:focus {
    border-color: var(--interactive);
    outline: none;
}
.editable-add-row button {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--interactive);
    background: var(--interactive);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.editable-add-row button:hover { background: var(--interactive-hover); }

/* ================================================================
   Step 4 — Impact Area cards (L1 value streams)
   ================================================================ */
.impact-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.65rem;
}
.impact-area-card {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.9rem 0.85rem;
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    background: var(--bg-surface);
}
.impact-area-card:hover {
    border-color: var(--blue-200, #bfdbfe);
    background: var(--blue-50, #eff6ff);
}
.impact-area-card--selected {
    border-color: var(--interactive);
    background: var(--blue-50, #eff6ff);
    box-shadow: 0 0 0 1px var(--interactive);
}
/* Top row: checkbox + title side by side */
.impact-area-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.impact-area-top input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}
.impact-area-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
/* Description block below title row */
.impact-area-desc {
    display: block;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    padding-left: 1.5rem; /* align with text after checkbox */
    line-height: 1.45;
}

/* ================================================================
   Step 5 — Use-case / capability suggestion cards (L2 stages)
   ================================================================ */
.uc-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 480px;
    overflow-y: auto;
    padding: 0.15rem;
}
.uc-card {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    background: var(--bg-surface);
}
.uc-card:hover { background: var(--bg-subtle); }
.uc-card--checked {
    border-left-color: var(--interactive);
    background: var(--blue-50, #eff6ff);
}
.uc-card input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.uc-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.uc-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.uc-card-l1 {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--interactive);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.uc-card-reason {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Actor group headers (Step 6) */
.actor-group {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.actor-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 0.88rem;
}
.actor-group-header:hover {
    background: var(--bg-subtle-hover, #f1f5f9);
}
.actor-group-toggle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 1rem;
    text-align: center;
}
.actor-group-name {
    flex: 1;
}
.actor-group-count {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-secondary);
}
.actor-group--collapsed .actor-group-header {
    border-bottom: none;
}
.actor-group-body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.actor-group-body .uc-card {
    margin: 0;
}

/* shared helper */
.button-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--interactive);
    font-size: 0.88rem;
    font-family: inherit;
    padding: 0;
}
.button-link:hover { text-decoration: underline; }

.scope-reanalyze-btn {
    font-size: 0.82rem;
    color: var(--interactive);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.scope-reanalyze-btn:hover { text-decoration: underline; }

/* ================================================================
   Generate Baseline Section
   ================================================================ */
.wiz-generate-section {
    margin-top: 1.5rem;
    max-width: 900px;
}
.wiz-generate-card {
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
}
.wiz-generate-card h3 { margin: 0 0 0.5rem; }
.wiz-generate-card p { margin: 0 0 1rem; font-size: 0.9rem; }

/* Disabled state — steps incomplete */
.wiz-generate-card--disabled {
    background: #f5f5f5;
    border-color: #ddd;
}
.wiz-generate-card--disabled h3 { color: #999; }
.wiz-generate-card--disabled p { color: #aaa; }

/* Ready state — all steps complete */
.wiz-generate-card--ready {
    background: var(--interactive-muted);
    border-color: var(--interactive);
}
.wiz-generate-card--ready h3 { color: var(--interactive); }
.wiz-generate-card--ready p { color: var(--text-secondary); }

.wiz-btn-generate {
    display: inline-block;
    background: var(--interactive);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.wiz-btn-generate:hover { background: var(--interactive-hover); }
.wiz-btn-generate:disabled { opacity: 0.5; cursor: not-allowed; }

/* ================================================================
   Pipeline Progress Modal
   ================================================================ */
.pipeline-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pipeline-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.pipeline-modal h3 { margin: 0 0 0.25rem; }
.pipeline-subtitle { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.5rem; }
.pipeline-timer {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
}

.pipeline-steps { display: flex; flex-direction: column; gap: 0.5rem; }

.pipeline-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.pipeline-icon {
    font-size: 0.7rem;
    color: var(--text-faint);
    width: 1rem;
    text-align: center;
}
.pipeline-label { font-weight: 600; min-width: 80px; }
.pipeline-detail { color: var(--text-muted); font-size: 0.82rem; }

.pipeline-pending .pipeline-icon { color: var(--text-faint); }
.pipeline-running {
    background: var(--interactive-muted);
}
.pipeline-running .pipeline-icon {
    color: var(--interactive);
    animation: spin 1s linear infinite;
    display: inline-block;
}
.pipeline-running .pipeline-icon::before { content: '⟳'; font-size: 1rem; }
.pipeline-running .pipeline-icon { font-size: 0; width: 1rem; }
.pipeline-running .pipeline-detail { color: var(--interactive); font-style: italic; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pipeline-done .pipeline-icon { color: var(--success); }
.pipeline-done .pipeline-icon::after { content: '\2713'; }
.pipeline-done .pipeline-icon { font-size: 0; }
.pipeline-done .pipeline-icon::after { font-size: 1rem; }
.pipeline-error .pipeline-icon { color: var(--danger); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.pipeline-error {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fef2f2;
    border-left: 3px solid var(--danger);
    color: #7f1d1d;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}
.pipeline-done {
    margin-top: 1rem;
    text-align: center;
}
.pipeline-done p {
    color: var(--success);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ---- Save button dirty state ---- */
.button-save-dirty {
    background: var(--amber-500, #f59e0b);
    color: #fff;
    font-weight: 700;
    border: none;
}

/* ---- Unsaved-changes leave-page modal ---- */
.unsaved-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100001;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.unsaved-modal-overlay.visible {
    display: flex !important;
}
.unsaved-modal {
    background: #fff;
    border-radius: 6px;
    padding: 1.75rem 2rem 1.25rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    animation: ai-card-pop 0.2s ease-out;
}
.unsaved-modal h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.unsaved-modal p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.unsaved-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}
.btn-leave {
    padding: 0.5rem 1.15rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: none;
    color: var(--red-600, #dc2626);
    border: none;
    margin-right: auto;
    line-height: 1.4;
    transition: background 0.15s;
}
.btn-leave:hover {
    background: var(--red-50, #fef2f2);
}
.btn-stay {
    padding: 0.5rem 1.15rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.btn-stay:hover {
    background: var(--bg-muted);
    border-color: var(--border-strong);
}
.btn-save-continue {
    padding: 0.5rem 1.15rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: var(--interactive);
    color: #fff;
    border: 1px solid var(--interactive);
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.btn-save-continue:hover {
    background: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

/* =============================================================
   Dashboard – Enterprise color system (Initiative Summary)
   ============================================================= */
:root {
    /* Dashboard accent palette */
    --dash-navy:   #0E1B3D;
    --dash-blue:   #4F5FE8;
    --dash-indigo: #6C4DE6;
    --dash-purple: #8A35E8;
    --dash-sky:    #66A8FF;
    --dash-teal:   #4BB8D8;
    --dash-green:  #20B26B;
    --dash-amber:  #F0A12B;
    --dash-neutral:#AEB7C6;

    /* Light tints for card backgrounds */
    --dash-blue-tint:   #EEF1FD;
    --dash-indigo-tint: #F0EDFD;
    --dash-purple-tint: #F3EDFB;
    --dash-sky-tint:    #EDF5FF;
    --dash-teal-tint:   #ECF8FC;
    --dash-green-tint:  #EDFAF3;
    --dash-amber-tint:  #FDF6EB;
}

/* ---- Dashboard stat cards (KPI row) ---- */
.dash-stat-card {
    padding: 0.85rem 0.75rem;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.dash-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.dash-stat-card--accent-blue   { background: var(--dash-blue-tint);  border-left: 3px solid var(--dash-blue); }
.dash-stat-card--accent-indigo { background: #EDEAFD; border-left: 3px solid var(--dash-indigo); }
.dash-stat-card--accent-purple { background: #F1EAFC; border-left: 3px solid var(--dash-purple); }
.dash-stat-card--accent-sky    { background: var(--dash-sky-tint);   border-left: 3px solid var(--dash-sky); }
.dash-stat-card--accent-teal   { background: var(--dash-teal-tint);  border-left: 3px solid var(--dash-teal); }
.dash-stat-card--accent-green  { background: var(--dash-green-tint); border-left: 3px solid var(--dash-green); }
.dash-stat-card--accent-amber  { background: var(--dash-amber-tint); border-left: 3px solid var(--dash-amber); }

.dash-stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dash-navy);
    line-height: 1.1;
}
.dash-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dash-stat-detail {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.dash-stat-status {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* ---- Dashboard chart cards ---- */
.dash-chart-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 8px;
    border-top: 2px solid var(--dash-blue);
    transition: box-shadow 0.18s;
}
.dash-chart-card:hover {
    box-shadow: var(--shadow-sm);
}
.dash-legend-link:hover { text-decoration: underline !important; }
.dash-chart-card--indigo { border-top-color: var(--dash-indigo); }
.dash-chart-card--purple { border-top-color: var(--dash-purple); }
.dash-chart-card--teal   { border-top-color: var(--dash-teal); }
.dash-chart-card--green  { border-top-color: var(--dash-green); }
.dash-chart-card--slate  { border-top-color: #7C8DA6; }
.dash-chart-card h4 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--dash-navy);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---- Semantic badges / chips ---- */
.dash-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.4;
}
.dash-badge--must    { background: #E8ECFD; color: var(--dash-blue); }
.dash-badge--should  { background: var(--dash-amber-tint); color: #B8860B; }
.dash-badge--could   { background: #ECEEF2; color: #6B7280; }
.dash-badge--draft   { background: #EEF0F4; color: #5A6878; }
.dash-badge--approved{ background: var(--dash-green-tint); color: #167A48; }
.dash-badge--current { background: var(--dash-sky-tint); color: #2F74C0; }
.dash-badge--future  { background: var(--dash-teal-tint); color: #2E8A9E; }
.dash-badge--internal{ background: #F0F0F5; color: #555; }
.dash-badge--external{ background: var(--dash-amber-tint); color: #8B6914; }

/* ---- Coverage bars (dashboard) ---- */
.dash-coverage-bar-fill--high   { background: var(--dash-green); }
.dash-coverage-bar-fill--medium { background: var(--dash-amber); }
.dash-coverage-bar-fill--low    { background: #EF4444; }

/* ---- Initiative header card (dashboard) ---- */
.dash-initiative-header {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.5rem;
    background: #F8F9FC;
    border: 1px solid #e2e6ef;
    border-radius: 8px;
    border-left: 3px solid var(--dash-navy);
}
.dash-initiative-header h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    color: var(--dash-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.dash-initiative-header p {
    margin: 0.15rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.dash-initiative-header p strong {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ---- Requirements Coverage card (dashboard) ---- */
.dash-coverage-card {
    padding: 1.25rem 1.5rem;
    text-align: left;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 8px;
    border-top: 2px solid #3B4A6B;
}

/* ---- Priority bar (dashboard) ---- */
.dash-prio-must   { background: var(--dash-blue); }
.dash-prio-should { background: var(--dash-amber); }
.dash-prio-could  { background: var(--dash-neutral); }