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

:root {
    --primary:        #1a3a5c;
    --primary-light:  #2a5a8c;
    --primary-pale:   #eef3f9;
    --bg:             #f0f2f5;
    --bg-white:       #ffffff;
    --text:           #2d3748;
    --text-muted:     #718096;
    --border:         #e2e8f0;

    --conflict-bg:    #fff5f5;
    --conflict-hi:    rgba(229, 62, 62, 0.18);
    --conflict-bar:   #e53e3e;
    --conflict-text:  #c53030;
    --conflict-badge: #fed7d7;

    --gap-bg:         #fffaf0;
    --gap-hi:         rgba(237, 137, 54, 0.18);
    --gap-bar:        #ed8936;
    --gap-text:       #c05621;
    --gap-badge:      #feebc8;

    --vague-bg:       #fffff0;
    --vague-hi:       rgba(214, 158, 46, 0.2);
    --vague-bar:      #d69e2e;
    --vague-text:     #975a16;
    --vague-badge:    #fefcbf;

    --unnecessary-bg:    #ebf8ff;
    --unnecessary-hi:    rgba(49, 130, 206, 0.15);
    --unnecessary-bar:   #3182ce;
    --unnecessary-text:  #2b6cb0;
    --unnecessary-badge: #bee3f8;

    --ai-bg:    #f5f0ff;
    --ai-hi:    rgba(128, 90, 213, 0.15);
    --ai-bar:   #805ad5;
    --ai-text:  #553c9a;
    --ai-badge: #e9d8fd;

    /* Inserted (accepted-replacement) palette — matched to the same opacity
       range as the finding categories so the inserted block reads as part of
       the same colour family rather than dominating the page. Craig flagged
       0.32 as "much too strong"; aligned to 0.16 like ai/vague/conflict. */
    --inserted-hi:    rgba(56, 161, 105, 0.16);
    --inserted-bar:   #38a169;
    --inserted-text:  #276749;
    --inserted-badge: rgba(56, 161, 105, 0.22);

    /* ── T-118 C8.3 — finding-decoration box palette ───────────────────────
       ONE unified bordered-box model for every finding on the editor surface.
       Each category gets a fill (`-fill`), a border (`-edge`) and a darker
       SELECTED shade (`-sel`) used when a finding is the active one. Card and
       decoration SHARE these so they read as the same colour family — the
       `-edge` values reuse the existing per-category `*-bar` colours that the
       finding cards already use, so the two stay in sync.

       CRITICAL GAP is nudged toward red (#d9663b — a small shift from the base
       orange #ed8936, NOT bright/alarm red) so it reads as higher-severity than
       the amber `vague` category without becoming a true conflict-red. */
    --rc-find-conflict-fill: rgba(229, 62, 62, 0.14);
    --rc-find-conflict-edge: var(--conflict-bar);              /* #e53e3e */
    --rc-find-conflict-sel:  rgba(229, 62, 62, 0.30);

    --rc-find-gap-fill:      rgba(217, 102, 59, 0.15);
    --rc-find-gap-edge:      #d9663b;                          /* red-nudged */
    --rc-find-gap-sel:       rgba(217, 102, 59, 0.32);

    --rc-find-vague-fill:    rgba(214, 158, 46, 0.16);
    --rc-find-vague-edge:    var(--vague-bar);                 /* #d69e2e */
    --rc-find-vague-sel:     rgba(214, 158, 46, 0.34);

    --rc-find-unnecessary-fill: rgba(49, 130, 206, 0.12);
    --rc-find-unnecessary-edge: var(--unnecessary-bar);        /* #3182ce */
    --rc-find-unnecessary-sel:  rgba(49, 130, 206, 0.28);

    --rc-find-ai-fill:       rgba(128, 90, 213, 0.12);
    --rc-find-ai-edge:       var(--ai-bar);                    /* #805ad5 */
    --rc-find-ai-sel:        rgba(128, 90, 213, 0.28);

    --rc-find-inserted-fill: rgba(56, 161, 105, 0.12);
    --rc-find-inserted-edge: var(--inserted-bar);              /* #38a169 */
    --rc-find-inserted-sel:  rgba(56, 161, 105, 0.28);

    --rc-find-unknown-fill:  rgba(113, 128, 150, 0.12);
    --rc-find-unknown-edge:  #718096;
    --rc-find-unknown-sel:   rgba(113, 128, 150, 0.28);

    /* ── M4 P2 — Process Graph design tokens (v4.0.38) ─────────────────────
       Semantic palette per node type. Cytoscape reads these via
       getComputedStyle() in graph_view.js — keep names stable.
       Dark-mode equivalents land in the @media block at the bottom of
       this section. Memo §4.4 "visual design system" + §4.5 vector zoom. */

    /* :Action — process step (the leaf of the procedure flow) */
    --rc-graph-action-bg:        #4f6ddb;
    --rc-graph-action-border:    #2b3f8c;
    --rc-graph-action-text:      #ffffff;

    /* :Decision — branching step */
    --rc-graph-decision-bg:      #e8a330;
    --rc-graph-decision-border:  #8a5e0c;
    --rc-graph-decision-text:    #1a1a1a;

    /* :Section — explanatory chapter card (Scope/Purpose/Definitions/etc.) */
    --rc-graph-section-bg:       #eef4ff;
    --rc-graph-section-border:   #4f6ddb;
    --rc-graph-section-text:     #1a3389;

    /* :Procedure — operational flow container */
    --rc-graph-procedure-bg:     #eaf6ec;
    --rc-graph-procedure-border: #2f8a45;
    --rc-graph-procedure-text:   #1f5a2c;

    /* :Procedures — top-level operational layer (wraps every :Procedure) */
    --rc-graph-procedures-bg:    #dff0e3;
    --rc-graph-procedures-border:#2f8a45;
    --rc-graph-procedures-text:  #1f5a2c;

    /* :Context — page-1 title card (SOP identity at a glance) */
    --rc-graph-context-bg:       #fff8e8;
    --rc-graph-context-border:   #d4a23c;
    --rc-graph-context-text:     #5c3f0d;

    /* Edges — flow + branch + meta */
    --rc-graph-edge-next:        #6b7280;
    --rc-graph-edge-branch:      #e8a330;
    --rc-graph-edge-branch-text: #8a5e0c;
    --rc-graph-edge-meta:        #9aa3af;

    /* Selected node outline */
    --rc-graph-selected-border:  #0f172a;

    /* Role chip (in-card; v4.0.38 n8n pattern — no separate :Role nodes) */
    --rc-graph-chip-resp-fg:     #c7b8f0;   /* lavender, on dark Action bg */
    --rc-graph-chip-inv-fg:      #a68bd9;

    /* v4.0.47 — SOP-as-Agent-card palette (Craig 2026-06-01).
       v4.0.48 LIGHTENED — dark navy header read as too "heavy" against
       a light canvas. New recipe: light tinted header, dark text, gold
       badge stays. Card surfaces feel like document-on-paper. */
    --rc-sop-card-bg:            #ffffff;
    --rc-sop-card-border:        #cbd5e0;
    --rc-sop-card-header-bg:     #eef3f9;
    --rc-sop-card-header-fg:     #1a3a5c;
    --rc-sop-card-header-meta:   #718096;
    --rc-sop-card-badge-bg:      #d4a23c;
    --rc-sop-card-badge-fg:      #2d1f00;
    --rc-sop-card-slot-bg:       #ffffff;
    --rc-sop-card-slot-hover:    #f0f4fa;
    --rc-sop-card-slot-fg:       #2d3748;
    --rc-sop-card-slot-dot:      #4f6ddb;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

/* ── Header ── */
header {
    background: var(--primary);
    color: #fff;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 100;
    position: sticky;
    top: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
}

.logo-mark {
    font-size: 1.3rem;
    line-height: 1;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.logo-sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.25);
}

.tagline {
    font-size: 0.82rem;
    opacity: 0.7;
}

/* ── Status area (SSE log, top-right overlay) ── */
/* ── Status floating panel ── */
.status-float {
    position: fixed;
    bottom: 80px;
    left: 24px;
    width: 960px;
    min-width: 280px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    color-scheme: light dark;
    background: Canvas;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    z-index: 1000;
    resize: horizontal;
    overflow: hidden;
    transition: opacity 0.2s;
}
.status-float.status-empty,
.status-float.status-closed {
    opacity: 0;
    pointer-events: none;
}
.status-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--primary);
    color: #fff;
    border-radius: 9px 9px 0 0;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.status-float-header:active { cursor: grabbing; }
.status-float-title { font-weight: 600; font-size: 0.83rem; }
.status-float-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1; padding: 0 2px;
}
.status-float-btn:hover { color: #fff; }
.status-float-body {
    flex: 1;
    overflow-y: scroll;
    height: 220px;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    scrollbar-width: thin;
}
.status-line {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: CanvasText;
    opacity: 0.7;
}
.status-latest {
    opacity: 1;
    font-weight: 600;
    color: var(--primary);
}

/* ── Layout ── */
.app-wrap {
    display: flex;
    height: calc(100vh - 52px);
    overflow: hidden;
}

/* ── Left sidebar ── */
.sidebar {
    width: 320px;
    flex-shrink: 0;
    background: var(--bg-white);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    min-width: 260px;
    max-width: 560px;
    transition: width 0.2s, min-width 0.2s, border 0.2s;
}
.sidebar.sidebar-hidden {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    border-right: none;
}

/* Drag handle on the right edge of the sidebar */
.sidebar-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 20;
    background: transparent;
    transition: background 0.15s;
}

.sidebar-resizer:hover,
.sidebar-resizer.dragging {
    background: var(--primary-light);
    opacity: 0.5;
}

.sidebar-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar-section:last-child {
    border-bottom: none;
    margin-top: auto;
}

.section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title .optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Drop zones */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg);
    user-select: none;
}

.drop-zone:hover,
.drop-zone.over {
    border-color: var(--primary-light);
    background: var(--primary-pale);
}

.drop-zone .dz-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 6px;
}

.drop-zone p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.drop-zone .hint {
    font-size: 0.72rem;
    margin-top: 3px;
}

.drop-zone.compact {
    padding: 10px;
}

.file-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: #ebf8ff;
    border-radius: 5px;
    font-size: 0.78rem;
    color: #2b6cb0;
    margin-top: 7px;
    word-break: break-all;
}

.file-chip .chip-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ich-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.ich-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg);
    border-radius: 4px;
    font-size: 0.78rem;
}
.sop-select-cb {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--primary, #2b6cb0);
}

.ich-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
}

.remove-btn:hover {
    background: var(--border);
    color: var(--conflict-text);
}

/* eCFR part checkboxes */
.parts-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.parts-list label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.4;
    transition: background 0.15s;
}

.parts-list label:hover {
    background: var(--bg);
}

.parts-list input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.fw-no-url-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.65;
}

.fw-no-url-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 1px;
    white-space: nowrap;
}

.part-num {
    font-weight: 600;
}

.part-desc {
    color: var(--text-muted);
    font-size: 0.73rem;
}

/* Analysis trigger panel — replaced the 2×3 grid with four explicit controls */
.trigger-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle, #f8fafc);
    font-size: 0.78rem;
}
/* v3.12.36 (rework of v3.12.32) — trigger-row keeps the 2-col label/select
   layout, but the label column is narrowed from 90px → 56px so the select
   gets enough room for full option text + chevron. Pre-condition: the
   longest label ("Review") fits in 56px. The v3.12.32 ellipsis-truncation
   made the row WORSE (Craig: "you have made space by truncating the labels
   and this is worse") — this iteration removes truncation entirely and
   reclaims the space the labels never needed. */
.trigger-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 6px;
}
.trigger-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.trigger-select,
.trigger-panel input[type="range"] {
    width: 100%;
    font-size: 0.78rem;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-color, inherit);
    font-family: inherit;
}
.trigger-panel input[type="range"] { padding: 0; }
/* Right-padding reserves space for the native <select> chevron so it
   sits clear of the option text. 28px covers every browser's default
   arrow width. */
.trigger-select {
    padding-right: 28px;
}

/* Batch-history delete button — visibly red so it can't be missed.
   Lives on the Tool B "Recent batches" rows; the icon-only siblings
   (Open / Export) didn't read as actions to Craig at first review. */
.batch-history-delete-btn {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.batch-history-delete-btn:hover {
    background: #fecaca;
    border-color: #f87171;
}

/* "Add another analysis" affordance — appears after a successful first run */
.add-pass-row.hidden { display: none !important; }
.add-pass-btn {
    background: var(--bg);
    color: var(--primary, #1a3a5c);
    border: 1.5px solid var(--primary, #1a3a5c);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 6px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.add-pass-btn:hover    { background: var(--bg-hover, #f1f5f9); }
.add-pass-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.add-pass-reset {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.74rem;
    padding: 6px 10px;
    cursor: pointer;
    font-family: inherit;
}
.add-pass-reset:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-color); }

/* Coverage panel — one row per analysis run on this SOP */
.coverage-panel {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    font-size: 0.72rem;
}
.coverage-panel.hidden { display: none; }
.coverage-panel-header {
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coverage-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 6px;
    padding: 4px 0;
    border-top: 1px dashed var(--border);
    align-items: center;
}
.coverage-row:first-of-type { border-top: none; }
.coverage-rindex {
    font-family: monospace;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    background: var(--bg-subtle);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.66rem;
}
.coverage-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.coverage-meta-line { color: var(--text-color); }
.coverage-meta-sub  { color: var(--text-muted); font-size: 0.66rem; }
/* T-065 — per-Challenger-pass model attribution lines under the
   meta-line. Slightly muted vs the main label, monospace so the
   model ids align cleanly when several rows stack. */
.coverage-pass-line {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1.35;
    padding-left: 8px;
}
.coverage-count {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-align: right;
}

/* Legacy grid (still in CSS for any other surface that uses .ag-cell) */
.analysis-grid {
    display: grid;
    grid-template-columns: 52px 1fr 1fr 1fr;
    margin-bottom: 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.76rem;
}
.ag-corner { background: var(--bg-subtle, #f8fafc); }
.ag-col-hdr {
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
    padding: 5px 2px;
    background: var(--bg-subtle, #f8fafc);
    border-left: 1px solid var(--border);
}
.ag-row-hdr {
    font-size: 0.70rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 5px;
    background: var(--bg-subtle, #f8fafc);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    line-height: 1.25;
}
.ag-cell {
    border: none;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    font-weight: 600;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.3;
    padding: 7px 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}
.ag-cell:hover:not(.active) { background: var(--bg-hover, #f1f5f9); }
.ag-cell.active { background: var(--primary, #1a3a5c); color: #fff; }
.ag-model {
    display: block;
    font-size: 0.63rem;
    opacity: 0.55;
    margin-top: 3px;
    letter-spacing: 0.02em;
}
.ag-cell.active .ag-model { opacity: 0.75; }

/* Scope toggle */
.scope-toggle { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.scope-opt {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
    border-radius: 7px; cursor: pointer; border: 1.5px solid var(--border);
    background: var(--bg-primary); transition: border-color 0.15s, background 0.15s;
    font-size: 0.8rem; line-height: 1.3;
}
.scope-opt input[type="radio"] { display: none; }
.scope-opt.selected { border-color: var(--primary); background: #f0eeff; }
.scope-opt:hover:not(.selected) { border-color: #b0a8d0; background: #f8f7ff; }
.scope-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.scope-opt strong { display: block; color: var(--text-primary); font-size: 0.8rem; }
.scope-desc { color: var(--text-muted); font-size: 0.72rem; }

/* Analyze button */
.analyze-btn {
    width: 100%;
    padding: 11px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, opacity 0.2s;
    letter-spacing: 0.2px;
}

.analyze-btn:hover:not(:disabled) {
    background: var(--primary-light);
}

.analyze-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.analyze-btn-stop {
    background: #c53030 !important;
}

.analyze-btn-stop:hover {
    background: #9b2c2c !important;
}

/* Spinner inside the Stop Analysis button */
@keyframes _spin {
    to { transform: rotate(360deg); }
}
.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: _spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Analysis-in-progress banner */
.analysis-running-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    background: var(--primary-pale, #eef2ff);
    border-bottom: 1px solid var(--primary-light, #b3c0f0);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
}
.analysis-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--primary-light, #b3c0f0);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: _spin 0.7s linear infinite;
    flex-shrink: 0;
}
/* Animated ellipsis */
.analysis-dots::after {
    content: '';
    animation: _dots 1.4s steps(4, end) infinite;
}
@keyframes _dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* Framework reset bar */
.fw-reset-btn {
    background: none;
    border: 1px solid var(--border, #dde1e7);
    border-radius: 4px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 3px 8px;
    width: 100%;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.fw-reset-btn:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text, #1e293b);
}

/* Chat framework-select button (injected next to list items) */
.chat-fw-select-btn {
    background: none;
    border: 1px solid var(--primary, #1a3a5c);
    border-radius: 3px;
    color: var(--primary, #1a3a5c);
    cursor: pointer;
    font-size: 0.68rem;
    margin-left: 6px;
    padding: 1px 5px;
    vertical-align: middle;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.chat-fw-select-btn:hover {
    background: var(--primary, #1a3a5c);
    color: #fff;
}
.chat-fw-select-btn.fw-unselected {
    background: none;
    border-color: #2b6cb0;
    color: #2b6cb0;
}
.chat-fw-select-btn.fw-unselected:hover {
    background: #2b6cb0;
    color: #fff;
}
.chat-fw-select-btn.fw-selected {
    background: #276749;
    border-color: #276749;
    color: #fff;
}
.fw-ref-unselected { border-left: 2px solid #2b6cb0; padding-left: 4px; }
.fw-ref-selected   { border-left: 2px solid #276749; padding-left: 4px; }
td.fw-ref-unselected, td.fw-ref-selected { border-left: none; padding-left: inherit; background: rgba(39,103,73,0.06); }
.chat-fw-btn-wrap  { display: inline-flex; gap: 3px; flex-wrap: wrap; margin-left: 4px; vertical-align: middle; }
.ich-code-editable { cursor: text; border-bottom: 1px dashed transparent; }
.ich-code-editable:hover { border-bottom-color: var(--primary, #1a3a5c); }

/* Legend */
.legend {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.legend-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
}

.legend-dot.conflict  { background: var(--conflict-bar); }
.legend-dot.gap       { background: var(--gap-bar); }
.legend-dot.vague     { background: var(--vague-bar); }

.legend-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.legend-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ── Main document area ── */
.main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Placeholder */
.placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.placeholder h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.placeholder p {
    font-size: 0.87rem;
    max-width: 380px;
    line-height: 1.6;
}

/* Loading */
.loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-muted);
}

.spinner {
    width: 38px;
    height: 38px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-msg {
    font-size: 0.95rem;
    color: var(--text);
}

.loading-sub {
    font-size: 0.82rem;
}

/* Results */
.results {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.results-bar {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.results-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 120px;
}

.stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stat-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s, font-weight 0.1s;
    user-select: none;
}
.stat-pill.pill-dimmed {
    font-weight: 400;
    opacity: 0.45;
}

.stat-pill.conflict { background: var(--conflict-badge); color: var(--conflict-text); border-color: var(--conflict-bar); }
.stat-pill.gap      { background: var(--gap-badge);      color: var(--gap-text);      border-color: var(--gap-bar); }
.stat-pill.vague    { background: var(--vague-badge);    color: var(--vague-text);    border-color: var(--vague-bar); }
.stat-pill.unnecessary { background: var(--unnecessary-badge); color: var(--unnecessary-text); border-color: var(--unnecessary-bar); }
.stat-pill.ai         { background: var(--ai-badge);          color: var(--ai-text);          border-color: var(--ai-bar); }
.stat-pill.resolved   { background: #c6f6d5; color: #276749; border-color: #9ae6b4; }
.stat-pill.inserted   { background: #e9d8fd; color: #553c9a; border-color: #b794f4; }


/* Download button */
.download-btn {
    padding: 4px 11px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text);
    transition: all 0.15s;
    white-space: nowrap;
}
.results-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.download-btn:hover {
    border-color: var(--primary-light);
    background: var(--primary-pale);
}

.qe-chat-trigger-btn {
    border-color: var(--primary-light);
    color: var(--primary);
}
.qe-chat-trigger-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.working-copy-close-btn {
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: all 0.15s;
    margin-left: 6px;
    line-height: 1;
}
.working-copy-close-btn:hover {
    border-color: #c53030;
    color: #c53030;
    background: #fff5f5;
}

/* ── SOP Selector Bar (replaces file tabs for multi-SOP view) ── */
.sop-selector-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-white);
    flex-shrink: 0;
}

.sop-dropdown {
    flex: 1;
    min-width: 0;
    max-width: 420px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--bg-white);
    color: var(--text);
    cursor: pointer;
}

.sop-progress-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Quality Expert lens picker — sits next to the SOP dropdown */
.lens-picker-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
}
.lens-picker {
    flex: 0 1 240px;
    max-width: 280px;
}

/* ── Coverage badge ── */
.coverage-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    font-size: 0.70rem;
    color: var(--text-muted);
    background: var(--primary-pale);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.coverage-label { font-weight: 600; margin-right: 2px; }
.coverage-item {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 7px;
    white-space: nowrap;
}
.coverage-run-date { opacity: 0.65; font-size: 0.88em; margin-left: 3px; }
/* 2026-04-29: docx-preview is now THE primary .docx renderer (mammoth retired).
   docx-preview controls its own page geometry (sized in real units, body
   content positioned relative to a page wrapper). Neutralise the host
   container's padding, border, max-width, and font so docx-preview's layout
   isn't shrunk into a 960px box and clipped — that causes table-headers and
   body paragraphs to overlap. */
.doc-body.docx-render {
    background: #e6e6e6;
    padding: 8px 0;
    border: none;
    border-radius: 0;
    max-width: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    word-break: normal;
}
.doc-body.docx-render .docx-wrapper {
    background: transparent;
    padding: 0;
}
.doc-body.docx-render .docx-wrapper > section.docx {
    /* docx-preview uses CSS Paged Media-style sizing on each section.docx (the "page"). */
    margin: 0 auto 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background: #fff;
    /* 2026-04-29: docx-preview's own CSS sets `display: flex; flex-flow:
       column` on section.docx, which interacts badly with the negative
       margin-top docx-preview puts on the page header (header sits in the
       padding-top zone with `margin-top: calc(headerMargin - topMargin)` —
       a negative value). In flex column layout that negative margin doesn't
       reliably push subsequent siblings, so the body article ends up
       overlapping the title-block table. Force display: block — flow
       layout handles the negative-margin pattern correctly: header sits in
       the header zone, article naturally follows at header.bottom regardless
       of header content height. The flex-only `margin-bottom: auto` trick
       on the article (which pushed footer to section bottom) becomes a
       no-op; for a rendered preview that's fine — footer just ends up
       right after the body, which matches user expectation. */
    display: block !important;
}
.doc-body.docx-render section.docx > article {
    /* Drop the flex-only margin-bottom: auto trick when block layout is forced */
    margin-bottom: 0 !important;
    /* v3.7.50: removed `padding-top: 1px` (was margin-collapse defence
       based on a wrong diagnosis — the actual bug was the title-block
       table width, fixed in v3.7.47-49). */
}
/* v3.7.48: docx-preview sets `display: flex` on the header element. In
   flex layout, `width: 100%` on a child doesn't force expansion to the
   full container — flex items size by content unless explicitly
   stretched. So v3.7.47's `width: 100%` on the title-block table wasn't
   actually filling the 672px-wide header (table stayed at 591px,
   content-sized). Force header back to block layout and the standard
   width rules apply. The header naturally has only block-style children
   (paragraphs + the title-block table), so block layout is the correct
   default — flex was just the docx-preview default that didn't fit. */
.doc-body.docx-render section.docx > header {
    display: flow-root !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    /* v3.7.55: docx-preview gives the header `background: rgb(26,58,92)`
       (dark blue) — translated from page-header shading that's NOT in
       the original Word visual. Cell row 1 has gray shading; rows 2-3
       are transparent (white in original). The dark-blue header bg
       therefore shows through rows 2-3, making them appear blue with
       white text (also docx-preview-set). Original has white bg +
       black text. Force the header bg transparent and the text black
       to restore the original visual. The row-1 gray cell shading
       stays (it's per-cell, not on the header). */
    background-color: transparent !important;
}
.doc-body.docx-render section.docx > header,
.doc-body.docx-render section.docx > header * {
    color: black !important;
}
/* v3.7.47: title-block table forced to span full content width. Word's
   original render treats the page header as margin-to-margin; docx-preview
   emits `width: auto` which sizes only to the column widths total and
   leaves the right column too narrow, causing the right-side header logo
   to wrap and right-aligned dates to truncate. */
.doc-body.docx-render section.docx > header table {
    width: 100% !important;
}
/* 2026-04-29: hanging-indent for bulleted lists (Craig: "the line should
   then go to the indent level — this would line things up").
   docx-preview emits each bulleted paragraph as
     p.docx-num-X-N {
       display: list-item;
       list-style-position: inside;
       text-indent: -18pt;
       margin-left: 18pt;
     }
     p.docx-num-X-N::before { content: "<bullet>\9 "; }
   That's the classic hanging-indent pattern but it relies on
   marker_width == |text-indent|. Our marker is "<bullet><tab><space>" —
   wider than 18pt because CSS `\9` is rendered with default `tab-size: 8`.
   Result: first-line text starts ~6px to the right of the left margin;
   wrapped lines start exactly at the left margin — wrapped text appears
   LEFT of where first-line text begins. Misalignment.
   Fix: remove the negative text-indent and absolutely position the ::before
   marker just to the LEFT of the content edge. With text-indent: 0 and
   the marker out of flow, all lines (first + wrapped) align at the same
   x-position — clean hanging indent regardless of marker width or
   tab-rendering. */
.doc-body.docx-render p[class*="docx-num"] {
    text-indent: 0 !important;
    position: relative;
}
.doc-body.docx-render p[class*="docx-num"]::before {
    position: absolute !important;
    right: 100% !important;
    margin-right: 4pt !important;
    /* Keep the original content / counter-increment / font-family from
       docx-preview's generated rule — we override only positioning. */
}
/* 2026-04-29: Word stores `<w:trHeight w:val="..." w:hRule="exact"/>` on
   title-block table rows; docx-preview translates this to inline
   `height: <Npx>` on each `<tr>`. When that row gets MORE content than
   the exact height (or when a multi-line cell on one row pushes content
   into the next row's space), body paragraphs overlap the table —
   Craig's GCP SOP screenshot showed "To define the procedure..." body
   text bleeding through the dark blue title-block banner. Override the
   inline height to `auto` so rows size to content. The previous
   `ignoreHeight: true` option only affects the PAGE section's minHeight
   (per docx-preview source), not row heights — so this CSS-side override
   is what actually resolves the overlap. Trade-off: any intentionally
   tall decorative row gets compacted to its content; for SOPs this is
   the right call. */
.doc-body.docx-render tr {
    height: auto !important;
}
.doc-body.docx-render td,
.doc-body.docx-render th {
    overflow: visible;
}
/* Highlights overlaid on docx-preview output use the same .hl class hierarchy
   as the legacy renderer so existing colour rules apply unchanged. */
.doc-body.docx-render .hl { display: inline; }

/* Saved Analyses list — compact card rows replacing the old table layout. */
.saved-analyses-list { display: flex; flex-direction: column; gap: 6px; }
.saved-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.saved-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-white);
    transition: background 0.12s, border-color 0.12s;
}
.saved-row:hover { background: var(--primary-pale); border-color: var(--primary); }
.saved-row-main { flex: 1; min-width: 0; }
.saved-row-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.saved-row-meta .saved-by { font-style: italic; }
.saved-count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.74rem;
}
.saved-count.count-zero { background: #e8f5e8; color: #2a7a2a; }
.saved-count.count-low  { background: #fff5d4; color: #946000; }
.saved-count.count-mid  { background: #fde2c4; color: #b35400; }
.saved-count.count-high { background: #fde0e0; color: #b03030; }
.saved-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.saved-row-actions .opt-action-btn {
    padding: 4px 10px;
    font-size: 0.78rem;
}
.saved-row-actions .saved-export,
.saved-row-actions .saved-delete {
    padding: 4px 8px;
    min-width: 30px;
}
.saved-row-actions .saved-delete {
    color: #c53030;
    border-color: #c53030;
}
.saved-row-actions .saved-delete:hover {
    background: #c53030;
    color: #fff;
}
/* "+N new" badge inside stat pills */
.pill-new-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #2a7a2a;
    background: #e8f5e8;
    border-radius: 8px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Quality Expert Chat modal ── */
.qe-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    background: var(--bg);
}
.qe-chat-intro {
    color: var(--text-muted);
    font-size: 0.83rem;
    font-style: italic;
    text-align: center;
    padding: 24px 16px;
    line-height: 1.6;
}
.qe-chat-row          { display: flex; }
.qe-chat-row-user     { justify-content: flex-end; }
.qe-chat-row-asst     { justify-content: flex-start; }
.qe-chat-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.55;
    word-break: break-word;
}
.qe-bubble-user {
    background: var(--primary);
    color: #fff;
    border-radius: 12px 12px 3px 12px;
}
.qe-bubble-asst {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 3px;
    color: var(--text);
}
.qe-bubble-asst table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 0.82rem; }
.qe-bubble-asst th    { background: var(--primary-pale); padding: 5px 8px; text-align: left; font-weight: 600; border: 1px solid var(--border); }
.qe-bubble-asst td    { padding: 5px 8px; border: 1px solid var(--border); vertical-align: top; }
.qe-bubble-asst ul    { padding-left: 18px; margin: 4px 0; }
.qe-bubble-asst li    { margin-bottom: 3px; }
.qe-bubble-asst h1, .qe-bubble-asst h2, .qe-bubble-asst h3 { margin: 8px 0 4px; font-size: 0.9rem; }
.qe-chat-footer {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-white);
    flex-shrink: 0;
}
.qe-chat-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--bg-white);
    color: var(--text);
    line-height: 1.4;
}
.qe-chat-input:focus { outline: none; border-color: var(--primary-light, #4a3899); }
.qe-chat-send-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 1.1rem;
    cursor: pointer;
    align-self: flex-end;
    height: 36px;
    transition: background 0.15s;
}
.qe-chat-send-btn:hover    { filter: brightness(1.15); }
.qe-chat-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.qe-thinking { color: var(--text-muted); font-style: italic; }

/* ── Saved Analyses Panel ── */
.saved-analyses-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 14px;
    flex-shrink: 0;
}

.saved-analyses-panel .sa-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border-subtle, #eee);
}

.saved-analyses-panel .sa-item:last-child { border-bottom: none; }
.saved-analyses-panel .sa-item:hover { background: var(--primary-pale); }
.saved-analyses-panel .sa-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-analyses-panel .sa-meta { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.saved-analyses-panel .sa-del { color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.saved-analyses-panel .sa-del:hover { color: #c53030; background: #fff5f5; }

/* ── Checklist config table ── */
.checklist-config-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.80rem;
}
.checklist-config-table th {
    background: var(--primary-pale);
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.checklist-config-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-subtle, #eee);
    vertical-align: middle;
}
.checklist-config-table tr:hover td { background: var(--primary-pale); }
.checklist-config-table .cl-text { max-width: 280px; }
.checklist-config-table .cl-text input { width: 100%; border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; font-size: 0.78rem; }
.checklist-config-table .cl-prompt input { width: 100%; min-width: 140px; border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; font-size: 0.78rem; }
.cl-scope-badge { font-size: 0.68rem; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.cl-scope-system { background: var(--primary-pale); color: var(--primary); border: 1px solid var(--primary); }
.cl-scope-org    { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.cl-scope-user   { background: #fffaf0; color: #c05621; border: 1px solid #fbd38d; }

/* ── Domain admin panel ── */
.domain-admin-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.domain-admin-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.domain-admin-card-header { display: flex; align-items: center; gap: 10px; }
.domain-admin-card-name { font-weight: 600; font-size: 0.9rem; flex: 1; }
.domain-admin-card-desc { font-size: 0.78rem; color: var(--text-muted); }
.domain-admin-card-persona { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.domain-admin-card-persona textarea { flex: 1; min-height: 54px; font-size: 0.78rem; border: 1px solid var(--border); border-radius: 3px; padding: 4px 6px; resize: vertical; }
.domain-builtin-badge { font-size: 0.68rem; padding: 1px 6px; border-radius: 3px; background: var(--primary-pale); color: var(--primary); border: 1px solid var(--primary); font-weight: 600; }

/* ── Domain picker at login ── */
.domain-picker-pane { padding: 20px 0 8px; }
.domain-picker-pane h3 { margin: 0 0 10px; font-size: 1rem; }
.domain-picker-pane select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; margin-bottom: 12px; }

/* File tabs */
.file-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-white);
    overflow-x: auto;
    flex-shrink: 0;
}

.file-tab {
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-tab:hover {
    color: var(--text);
}

.file-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.tab-count {
    font-size: 0.7rem;
    background: var(--border);
    border-radius: 10px;
    padding: 1px 6px;
    font-weight: 600;
    color: var(--text-muted);
}

.file-tab.active .tab-count {
    background: var(--primary-pale);
    color: var(--primary);
}

/* Source file badge on finding cards */
.source-badge {
    font-size: 0.68rem;
    background: rgba(0,0,0,0.07);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text-muted);
    margin-top: 5px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Summary view (all-files tab) */
.summary-file-block {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.summary-file-header {
    background: var(--primary);
    color: #fff;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-file-stats {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.summary-findings {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
    transition: filter 0.15s;
}

.summary-row:hover { filter: brightness(0.95); }
.summary-row.conflict    { background: var(--conflict-bg); }
.summary-row.critical_gap { background: var(--gap-bg); }
.summary-row.vague       { background: var(--vague-bg); }
.summary-row.unnecessary_detail { background: var(--unnecessary-bg); }
.summary-row.ai_suggestion      { background: var(--ai-bg); }

.summary-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.summary-row-dot.conflict    { background: var(--conflict-bar); }
.summary-row-dot.critical_gap { background: var(--gap-bar); }
.summary-row-dot.vague       { background: var(--vague-bar); }
.summary-row-dot.unnecessary_detail { background: var(--unnecessary-bar); }
.summary-row-dot.ai_suggestion      { background: var(--ai-bar); }

.summary-row-body { flex: 1; min-width: 0; }
.summary-row-ref  { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ICH guideline collapsible groups */
.ich-group-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ich-group-toggle:hover {
    color: var(--primary);
    background: var(--primary-pale);
    border-radius: 3px;
}

.group-arrow {
    font-size: 0.7rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.ich-group-items {
    display: none;       /* collapsed by default */
    padding-left: 2px;
}

.ich-group-items.ich-group-open {
    display: block;
}

/* Manual upload sub-section inside ICH */
.ich-upload-row {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.ich-upload-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* Parts list grouped */
.parts-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    padding: 8px 7px 3px;
    display: block;
}

.parts-loading {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 6px 7px;
}

/* Document text viewer */
.doc-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 28px 32px;
}

.doc-body {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px 32px;
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    font-size: 0.84rem;
    line-height: 1.65;
    word-break: break-word;
    max-width: 960px;
    margin: 0 auto;
}

/* A.2r-2b — #doc-body is a STACK of per-document surfaces (one editor or legacy
   render each); exactly one is visible (inline display toggled in JS). A surface
   is a transparent pass-through so the page chrome on .doc-body (or the grey
   .doc-body.docx-render page-viewer) shows around its content. */
.rc-surface {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

/* Styled document blocks */
.doc-h1 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.3em 0 0.35em;
    color: var(--primary);
    border-bottom: 2px solid var(--border);
    padding-bottom: 3px;
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    line-height: 1.3;
}

.doc-h2 {
    font-size: 1.0rem;
    font-weight: 700;
    margin: 1.1em 0 0.3em;
    color: var(--primary);
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    line-height: 1.35;
}

.doc-h3 {
    font-size: 0.93rem;
    font-weight: 700;
    margin: 0.95em 0 0.25em;
    color: var(--text);
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    line-height: 1.4;
}

.doc-h4, .doc-h5, .doc-h6 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0.85em 0 0.2em;
    color: var(--text);
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
}

.doc-body-block {
    margin: 0.25em 0;
    line-height: 1.65;
}

.doc-list-item {
    margin: 0.2em 0 0.2em 1.6em;
    line-height: 1.7;
    position: relative;
}

.doc-list-item::before {
    content: "•";
    position: absolute;
    left: -1.1em;
    color: var(--text-muted);
}

.doc-list-num-item {
    margin: 0.2em 0 0.2em 1.6em;
    line-height: 1.7;
}

/* Indentation levels for nested list/body paragraphs */
.doc-indent-1 { margin-left: 1.6em; }
.doc-indent-2 { margin-left: 3.2em; }
.doc-indent-3 { margin-left: 4.8em; }
.doc-indent-4 { margin-left: 6.4em; }
.doc-indent-5 { margin-left: 8.0em; }

/* Nested list items: bump on top of the base margin already set */
.doc-list-item.doc-indent-1,
.doc-list-num-item.doc-indent-1 { margin-left: 3.2em; }
.doc-list-item.doc-indent-2,
.doc-list-num-item.doc-indent-2 { margin-left: 4.8em; }
.doc-list-item.doc-indent-3,
.doc-list-num-item.doc-indent-3 { margin-left: 6.4em; }
.doc-list-item.doc-indent-4,
.doc-list-num-item.doc-indent-4 { margin-left: 8.0em; }
.doc-list-item.doc-indent-5,
.doc-list-num-item.doc-indent-5 { margin-left: 9.6em; }

/* Legacy pipe-delimited table rows (old archives) */
.doc-table-row {
    margin: 0.15em 0;
    padding: 4px 8px;
    background: #f8fafc;
    border-left: 3px solid var(--border);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Proper HTML table rendering (new parser) */
.doc-table-wrap {
    overflow-x: auto;
    margin: 0.75em 0;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
    line-height: 1.45;
    table-layout: fixed;
}
.doc-table td, .doc-table th {
    overflow-wrap: break-word;
    word-break: normal;
}

.doc-table th,
.doc-table td {
    border: 1px solid var(--border);
    padding: 5px 9px;
    vertical-align: top;
    text-align: left;
}

.doc-table th {
    background: #eef2f7;
    font-weight: 700;
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    font-size: 0.79rem;
    color: var(--text);
}

.doc-table td {
    background: #fff;
}

.doc-table tr:nth-child(even) td {
    background: #f8fafc;
}

.doc-table-cell.doc-table-merged {
    color: var(--text-muted);
    font-style: italic;
}

/* Indentation levels */
.doc-indent-1 { padding-left: 1.5em; }
.doc-indent-2 { padding-left: 3em; }
.doc-indent-3 { padding-left: 4.5em; }
.doc-indent-4 { padding-left: 6em; }
.doc-indent-5 { padding-left: 7.5em; }
.doc-indent-6 { padding-left: 9em; }
.doc-indent-7 { padding-left: 10.5em; }
.doc-indent-8 { padding-left: 12em; }

/* Alignment overrides */
.doc-align-center  { text-align: center; }
.doc-align-right   { text-align: right; }
.doc-align-justify { text-align: justify; }

/* Inline images embedded in Word documents */
.doc-inline-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5em auto;
    border-radius: 2px;
}

/* Highlights */
.hl {
    border-radius: 2px;
    padding: 1px 1px 0;
    cursor: pointer;
    transition: filter 0.15s;
    position: relative;
}

.hl.conflict    { background: var(--conflict-hi); border-bottom: 2px solid var(--conflict-bar); }
.hl.critical_gap { background: var(--gap-hi);     border-bottom: 2px solid var(--gap-bar); }
.hl.vague       { background: var(--vague-hi);    border-bottom: 2px solid var(--vague-bar); }
.hl.unnecessary_detail { background: var(--unnecessary-hi); border-bottom: 2px solid var(--unnecessary-bar); }
.hl.ai_suggestion      { background: var(--ai-hi);          border-bottom: 2px solid var(--ai-bar); }
.hl.inserted           { background: rgba(56, 161, 105, 0.07); border: 1px solid rgba(56, 161, 105, 0.32); border-radius: 0; display: block; padding: 2px 4px; }
.hl.inserted table     { width: 100%; border-collapse: collapse; margin: 4px 0; }
.hl.inserted th,
.hl.inserted td        { border: 1px solid var(--inserted-bar); padding: 4px 8px; font-size: 0.85rem; }
.hl.inserted th        { background: var(--inserted-badge); font-weight: 600; }

.hl:hover { filter: brightness(0.88); }

/* Dimmed highlights — applied when a filter pill (or 'Resolved') excludes
   them. Kept readable on purpose: 0.55 is enough to de-emphasise the
   highlight tint and underline without losing the underlying text. The
   previous 0.18 made non-selected findings effectively invisible, which
   the user flagged as too aggressive when they only wanted to focus on
   one finding. */
.hl.dimmed { opacity: 0.55; }

.hl.active-hl {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Multi-paragraph finding: paragraphs wrapped in one .hl-block so the
   selection reads as a single rectangle rather than N inline strips.
   Inner .hl spans switch to transparent — the outer block owns the
   visual tint + border. */
.hl-block {
    padding: 6px 10px;
    margin: 6px 0;
    border-radius: 2px;
    border: 1px solid var(--border);
    cursor: pointer;
}
.hl-block > p,
.hl-block > li {
    margin-top: 0;
    margin-bottom: 0;
}
.hl-block > p + p { margin-top: 4px; }

.hl-block.conflict           { background: var(--conflict-hi);    border-color: var(--conflict-bar); }
.hl-block.critical_gap       { background: var(--gap-hi);         border-color: var(--gap-bar); }
.hl-block.vague              { background: var(--vague-hi);       border-color: var(--vague-bar); }
.hl-block.unnecessary_detail { background: var(--unnecessary-hi); border-color: var(--unnecessary-bar); }
.hl-block.ai_suggestion      { background: var(--ai-hi);          border-color: var(--ai-bar); }
/* v3.12.35 — missing inserted-color rule for the multi-block wrapper. The
   inline `.hl.inserted` rule (line 1859) styled single-paragraph inserted
   findings green; multi-paragraph inserted findings were falling through
   to the underlying category class because `_collapseMultiBlockHighlights`
   wasn't including `inserted` in its CATEGORY_CLASSES list. Both halves
   fixed in v3.12.35; this rule provides the visual treatment. */
.hl-block.inserted           { background: rgba(56, 161, 105, 0.07); border-color: rgba(56, 161, 105, 0.55); }

.hl-block:hover { filter: brightness(0.94); }

/* Inner spans inside the block: visually transparent. They still carry the
   click handler + data-fid + dimmed state, but no tint or bar (the outer
   block carries the visual). */
.hl.hl-in-block {
    background: transparent;
    border-bottom: none;
    padding: 0;
}
.hl.hl-in-block:hover { filter: none; }

/* ── Findings panel resize handle ── */
.findings-resizer {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 20;
}

.findings-resizer:hover,
.findings-resizer.dragging {
    background: var(--primary-light);
    opacity: 0.5;
}

/* ── Right panel — Findings ── */
.findings-panel {
    width: 308px;
    flex-shrink: 0;
    background: var(--bg-white);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.findings-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-white);
}

.findings-header h2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.close-panel {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 3px;
}

.close-panel:hover {
    background: var(--bg);
}

.findings-scroll {
    overflow-y: auto;
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.no-findings {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 24px 12px;
}

/* Finding cards */
.finding-card {
    border-radius: 7px;
    padding: 11px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s, box-shadow 0.12s;
}

.finding-card.conflict    { background: var(--conflict-bg); border-color: #fca5a5; }
.finding-card.critical_gap { background: var(--gap-bg);     border-color: #fbd38d; }
.finding-card.vague       { background: var(--vague-bg);    border-color: #faf089; }
.finding-card.unnecessary_detail { background: var(--unnecessary-bg); border-color: #90cdf4; }
.finding-card.ai_suggestion      { background: var(--ai-bg);          border-color: #b794f4; }

.finding-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.finding-card.card-active {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.card-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 7px;
    flex-wrap: nowrap;
    min-width: 0;
}

.cat-badge {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    color: #fff;
}

.cat-badge.conflict    { background: var(--conflict-bar); }
.cat-badge.critical_gap { background: var(--gap-bar); }
.cat-badge.vague       { background: var(--vague-bar); }
.cat-badge.unnecessary_detail { background: var(--unnecessary-bar); }
.cat-badge.ai_suggestion      { background: var(--ai-bar); }

.sev-badge {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.sev-high   { background: #fed7d7; color: #c53030; }
.sev-medium { background: #feebc8; color: #c05621; }
.sev-low    { background: #fefcbf; color: #975a16; }

.card-quote {
    font-size: 0.77rem;
    font-style: italic;
    color: var(--text);
    margin-bottom: 7px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 5px 7px;
    background: rgba(255,255,255,0.55);
    border-radius: 4px;
    line-height: 1.5;
}

.card-explain {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 6px;
}

.card-ref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.card-ref-row .engine-badge {
    flex: 0 0 auto;
}
.card-ref {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    gap: 4px;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}
.card-ref-clickable {
    cursor: pointer;
}
.card-ref-clickable:hover { color: var(--primary); }
/* "Worth a look" flag (v3.14.81) — the cited CFR has FDA-483 enforcement
   history. Theme-aware danger colour overrides the muted ref colour; the
   clickable child keeps its own hover. A visual cue, not a score. */
.card-ref-flagged { color: var(--danger); font-weight: 600; cursor: help; }
.reg-ref-hint {
    font-size: 0.68rem;
    color: var(--primary);
    opacity: 0.7;
    font-style: italic;
    margin-left: 2px;
}

/* Per-ref clickable chip — multi-ref findings (e.g.
   "21 CFR 312.52(b); 21 CFR 312.50") render each ref as its own chip
   so left-click (view text) and right-click (FDA citation history)
   target the specific ref the user clicked, not the concatenated
   string. */
.card-ref-chip {
    cursor: pointer;
    color: var(--primary, #2b6cb0);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    padding: 0 1px;
    border-radius: 2px;
    transition: background-color 0.12s ease;
}
.card-ref-chip:hover {
    background-color: rgba(43, 108, 176, 0.10);
    text-decoration-style: solid;
}
.card-ref-chip:active {
    background-color: rgba(43, 108, 176, 0.20);
}

/* ── Regulation text popup ── */
.reg-popup {
    position: absolute;
    z-index: 5000;
    width: 460px;
    max-width: calc(100vw - 32px);
    background: Canvas;
    color: CanvasText;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    font-size: 0.82rem;
    overflow: hidden;
}
.reg-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--primary, #2b6cb0);
    color: #fff;
}
.reg-popup-title {
    font-weight: 700;
    font-size: 0.84rem;
    flex: 1;
}
.reg-popup-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.8;
}
.reg-popup-close:hover { opacity: 1; }
.reg-popup-body {
    padding: 12px;
    max-height: 380px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.6;
    font-family: inherit;
}
.reg-popup-loading { color: var(--text-muted); font-style: italic; }
.reg-popup-error   { color: #b91c1c; }

/* FDA Form 483 citation-history popup — right-click on a finding card's
   regulation reference. Visually parallel to .reg-popup so the two
   surfaces look like a related family but distinct (different header
   colour distinguishes the two right-click vs left-click affordances). */
.fda-citations-popup {
    position: fixed;        /* W1-B (#4): viewport-anchored — pane scrolling can't strand it off-screen */
    z-index: 5000;
    width: 720px;
    max-width: calc(100vw - 32px);
    background: Canvas;
    color: CanvasText;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    font-size: 0.82rem;
    overflow: hidden;
}
.fda-citations-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: #4a5568;        /* slate — distinct from the blue reg-popup header */
    color: #fff;
}
.fda-citations-popup-title {
    font-weight: 700; font-size: 0.84rem; flex: 1;
}
.fda-citations-popup-close {
    background: none; border: none; color: #fff; cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0 2px; opacity: 0.8;
}
.fda-citations-popup-close:hover { opacity: 1; }
.fda-citations-popup-body {
    /* W1-B (#4): cap to the viewport so the popup never exceeds the screen;
       its own scroll keeps long citation tables fully reachable. */
    padding: 12px; max-height: min(420px, calc(100vh - 140px)); overflow-y: auto;
}
.fda-citations-loading { color: var(--text-muted); font-style: italic; }
.fda-citations-error   { color: #b91c1c; }
.fda-citations-ref {
    font-family: monospace; font-size: 0.78rem;
    padding: 4px 8px;
    background: #f1f5f9; border-radius: 4px 4px 0 0;
    color: #334155;
}
/* v3.9.47 — descriptive section title rendered under the ref chip
   when the backend resolved it from cached eCFR text. Visually
   continuous with .fda-citations-ref above (shared bg, no border
   between, rounded only on the bottom).
   v3.9.48 — when a section-level finding triggers a roll-up across
   subsections, the title sits between the ref chip and the
   .fda-citations-rollup banner; remove the bottom radius + bottom
   margin so the three pieces stack visually as one block. */
.fda-citations-section-title {
    padding: 4px 8px 6px;
    background: #f1f5f9; border-radius: 0;
    color: #475569; font-size: 0.85rem; font-style: italic;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 0;
}
.fda-citations-section-title:last-child {
    border-radius: 0 0 4px 4px;
    margin-bottom: 10px;
}
/* v3.9.48 — section-level findings aggregate citations across all
   matched subsections. This banner tells the reviewer which
   subsections contributed so they don't think the popup ran a
   precise per-subsection lookup. */
.fda-citations-rollup {
    padding: 5px 8px 6px; margin-bottom: 10px;
    background: #fef9c3; border-radius: 0 0 4px 4px;
    color: #713f12; font-size: 0.78rem;
    border-top: 1px solid #fde68a;
}
/* v3.9.27 short-desc-as-header was replaced in v3.9.28 by the
   per-row Description column; keeping the rule as a no-op so any
   stray .fda-citations-shortdesc element from a future render path
   doesn't surface unstyled. */
.fda-citations-shortdesc { display: none; }

/* Description column on each FDA citation row. Constrains width so
   the table doesn't blow out for unusually long descriptions; row's
   title attribute carries the long_description for hover-on-row. */
.fda-citations-desc-cell {
    color: #1e293b;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* Subtle visual cue that the row is hover-able for more detail. */
.fda-citations-tbl tbody tr[title]:hover {
    background-color: #f8fafc;
    cursor: help;
}
.fda-citations-norm {
    color: #64748b; font-style: italic;
}
.fda-citations-empty {
    padding: 12px; color: var(--text-muted);
    background: #f8fafc; border-radius: 4px;
    text-align: center;
}
.fda-citations-hint {
    margin-top: 6px; font-size: 0.75rem; opacity: 0.85;
}
.fda-citations-tbl {
    width: 100%; border-collapse: collapse; font-size: 0.78rem;
    /* Fixed layout so the Citations column never gets squeezed to
       zero by a long Description. Each column's width is set
       explicitly via the colgroup-style nth-child rules below. */
    table-layout: fixed;
}
.fda-citations-tbl th {
    text-align: left; padding: 4px 8px;
    background: #f1f5f9; color: #475569; font-weight: 600;
    border-bottom: 1px solid var(--border, #d1d5db);
}
.fda-citations-tbl th.num { text-align: right; }
.fda-citations-tbl td {
    padding: 4px 8px; border-bottom: 1px solid #f1f5f9;
}
.fda-citations-tbl td.num {
    text-align: right; font-variant-numeric: tabular-nums;
}
/* Column widths — total ~688px to match the 720px popup minus 32px
   of body padding. Description is the elastic column (rest of width). */
.fda-citations-tbl th:nth-child(1),
.fda-citations-tbl td:nth-child(1) { width: 60px; }              /* FY */
.fda-citations-tbl th:nth-child(2),
.fda-citations-tbl td:nth-child(2) { width: 110px; }             /* Program */
.fda-citations-tbl th:nth-child(4),
.fda-citations-tbl td:nth-child(4) { width: 80px; }              /* Citations */
.fda-citations-tbl tr.fda-citations-year-first td {
    border-top: 1px solid var(--border, #d1d5db);
}
.fda-citations-tbl tr.fda-citations-year-total td {
    background: #fafbfc; color: #475569;
}
.fda-citations-footer {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--border, #d1d5db);
    font-size: 0.78rem;
}
.fda-citations-footer > div { margin-bottom: 3px; }
.fda-citations-source {
    margin-top: 6px; color: var(--text-muted);
    font-size: 0.72rem; font-style: italic;
}
.fda-citations-subtotal {
    margin-top: 6px; margin-bottom: 16px;
    padding: 6px 10px;
    background: #f8fafc; border-radius: 4px;
    font-size: 0.78rem; color: #475569;
}
.fda-citations-grand-footer {
    background: #f1f5f9; padding: 10px;
    border-radius: 6px; border-top: 2px solid #4a5568;
}

.card-more-row {
    margin-top: 6px;
    text-align: right;
}

.card-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--primary-light);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card-more-btn:hover {
    color: var(--primary);
}

.card-suggestion {
    margin-top: 8px;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}

.suggestion-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #276749;
    margin-bottom: 4px;
}

.suggestion-intro {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 5px;
}

.suggestion-text {
    font-size: 0.79rem;
    line-height: 1.55;
    color: var(--text);
    background: rgba(255,255,255,0.6);
    border-radius: 4px;
    padding: 6px 8px;
    border-left: 3px solid var(--primary-light);
}

.suggestion-replacement {
    border-left-color: #276749;
    background: #f0fff4;
    color: #1a202c;
    font-family: inherit;
    white-space: pre-wrap;
}

.suggestion-original {
    border-left-color: #b7791f;
    background: #fffaf0;
    color: #1a202c;
    font-family: inherit;
    white-space: pre-wrap;
}

/* ── Expert Review formatted response ── */
.er-verdict {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.er-verdict-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.er-verdict-summary {
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
}
.er-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary);
    margin: 14px 0 6px;
}
.er-section-label:first-child { margin-top: 0; }
.er-list {
    margin: 0 0 4px 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.er-list li {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text);
}
.er-para {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 8px;
}
.er-gap { height: 8px; }
.er-hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.er-h1, .er-h2, .er-h3 {
    font-weight: 600;
    color: var(--text);
    margin: 12px 0 4px;
    line-height: 1.3;
}
.er-h1 { font-size: 1rem; }
.er-h2 { font-size: 0.93rem; }
.er-h3 { font-size: 0.88rem; }
.er-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    margin: 8px 0;
}
.er-table th, .er-table td {
    padding: 5px 10px;
    border: 1px solid var(--border);
    text-align: left;
    line-height: 1.4;
}
.er-table th {
    background: var(--surface2);
    font-weight: 600;
}

/* ── Expert Review 3-panel modal layout ── */
.er-modal-box {
    width: min(1100px, 96vw);
    max-width: none;
    height: min(85vh, 820px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.er-modal-box .modal-header {
    padding: 10px 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.er-header-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.er-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.er-reg-panel {
    padding: 12px 20px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.er-reg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.er-reg-ref {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-left: auto;
}
/* Table variant: no italic or quotation marks — table fills the space */
.er-reg-quote-table {
    font-style: normal;
    padding: 4px 0;
    overflow-x: auto;
}
.er-reg-quote-table .er-table { font-size: 0.8rem; }

.er-reg-quote {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 6px;
    padding-left: 12px;
    border-left: 3px solid var(--border);
    line-height: 1.5;
}
.er-reg-explanation {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.er-dual-panels {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    border-bottom: 1px solid var(--border);
}
.er-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.er-panel + .er-divider + .er-panel {
    border-left: none;
}
.er-panel-hdr {
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
}
.er-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 0;
}
.er-divider {
    width: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.er-discuss-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.er-discuss-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
}
.er-discuss-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* Conclusion strip in main expert review modal */
.er-debate-section {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    max-height: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.er-debate-label {
    padding: 5px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.er-view-discussion-btn {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.er-view-discussion-btn:hover { text-decoration: underline; }
.er-debate-thread {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px;
}
.er-conclusion-text {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text);
}

/* Expert Review — three-pane floating window */
.er-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;   /* transparent — clicks pass through to the app */
}
.er-fullscreen-overlay.hidden { display: none; }
.er-fullscreen-box {
    position: fixed;
    left: calc(50% - 44vw);
    top: 6vh;
    width: 88vw;
    height: 84vh;
    min-width: 640px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.28);
    resize: both;
    overflow: hidden;
    pointer-events: all;
}
/* OS-style window control buttons — default (macOS): circles on the left */
.er-win-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 6px;
    flex-shrink: 0;
    order: -1;   /* macOS: left of logo */
}
.er-win-btn {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: filter 0.12s;
    flex-shrink: 0;
    font-size: 0;   /* hide data-label text by default (mac = circles only) */
}
.er-win-btn:hover { filter: brightness(0.8); }
.er-win-close    { background: #ff5f57; }
.er-win-maximize { background: #28c840; }

/* Windows/Linux: expert-review win-controls move right, show text glyphs */
body.os-win .er-win-controls,
body.os-other .er-win-controls {
    order: 10;
    margin-right: 0;
    margin-left: 4px;
    gap: 0;
}
body.os-win .er-win-btn,
body.os-other .er-win-btn {
    width: auto;
    height: 100%;
    min-width: 36px;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    padding: 0 10px;
    border-left: 1px solid var(--border);
}
body.os-win .er-win-btn::before,
body.os-other .er-win-btn::before {
    content: attr(data-label);
    font-size: 0.85rem;
}
body.os-win .er-win-close:hover,
body.os-other .er-win-close:hover { background: #c42b1c; color: #fff; filter: none; }
body.os-win .er-win-maximize:hover,
body.os-other .er-win-maximize:hover { background: var(--surface3, #e8e8e8); filter: none; }

/* ── OS-aware controls for ALL other windows ─────────────────────────────── */
/* macOS: .modal-close becomes a red circle on the left of the header */
body.os-mac .modal-close {
    order: -1;
    width: 13px;
    height: 13px;
    min-width: 13px;
    border-radius: 50%;
    background: #ff5f57;
    color: transparent;
    font-size: 0;
    padding: 0;
    margin-right: 2px;
    flex-shrink: 0;
}
body.os-mac .modal-close:hover { background: #c4281c; }

/* macOS: floating dark-panel close buttons become red circles */
body.os-mac .chat-close,
body.os-mac .status-float-btn,
body.os-mac .bd-float-close {
    width: 13px;
    height: 13px;
    min-width: 13px;
    border-radius: 50%;
    background: #ff5f57;
    color: transparent;
    font-size: 0;
    padding: 0;
}
body.os-mac .chat-close:hover,
body.os-mac .status-float-btn:hover,
body.os-mac .bd-float-close:hover { background: #c4281c; filter: none; }
.er-fullscreen-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    cursor: move;
    user-select: none;
    border-radius: 8px 8px 0 0;
}
.er-fullscreen-header button { cursor: pointer; }
.er-fullscreen-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}
.er-fullscreen-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.er-fullscreen-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}
/* Subtle pane section label */
.er-pane-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    padding: 5px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
/* Pane 1: Initial opinions */
.er-left-pane {
    width: 28%;
    min-width: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    gap: 0;
    padding: 0 6px 4px;
    box-sizing: border-box;
}
/* Three equal-height boxes inside left pane */
.er-left-box {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
    margin-top: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
/* Reg panel (Finding box) scrolls independently */
.er-left-box .er-reg-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    flex-shrink: 1;
    border-bottom: none;
    background: var(--surface);
}
.er-left-discuss-bar {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    justify-content: center;
}
.er-left-discuss-bar .er-discuss-btn {
    width: auto;
    padding: 7px 20px;
    font-size: 0.85rem;
}
/* Pane resize handle (shared by both handles) */
.er-pane-resize-handle {
    width: 5px;
    cursor: col-resize;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
}
.er-pane-resize-handle:hover,
.er-pane-resize-handle.dragging { background: var(--primary); }
/* Pane 2: Consensus */
.er-mid-pane {
    width: 30%;
    min-width: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
}
/* Pane 3: Discussion transcript */
.er-right-pane {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 180px;
}
.er-transcript-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.er-debate-bubbles {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.er-debate-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.er-debate-placeholder-text {
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
    max-width: 220px;
    line-height: 1.6;
}

/* Audit report split buttons */
.audit-report-split {
    display: flex;
    gap: 4px;
}
.audit-sub-btn {
    font-size: 0.78rem;
    padding: 5px 9px;
}

/* Expert framework modal table */
.efm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.efm-table th {
    background: var(--surface2);
    padding: 7px 10px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
.efm-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.efm-table tr:hover td { background: var(--surface2); }
.efm-priority-high   { color: #c53030; font-weight: 600; font-size: 0.75rem; }
.efm-priority-medium { color: #c05621; font-weight: 600; font-size: 0.75rem; }
.efm-priority-low    { color: #276749; font-weight: 600; font-size: 0.75rem; }

/* Legacy stubs — keep old debate-modal-overlay hidden */
.er-debate-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
}
.er-debate-modal-overlay:not(.hidden) { display: block; }

.er-debate-modal-box {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
#er-debate-modal .modal-header,
#admin-modal .modal-header,
#expert-framework-modal .modal-header {   /* v3.12.12 — drag UI Polish */
    cursor: grab;
    user-select: none;
}
#er-debate-modal .modal-header:active,
#admin-modal .modal-header:active,
#expert-framework-modal .modal-header:active { cursor: grabbing; }

/* Admin modal — fixed position so it can be dragged */
/* v3.9.40 — widened from 1340px to 1700px so the 8-column Audit Log
   table (with the new column-aligned in-`<th>` filter row from T-091)
   fits without horizontal scroll on typical desktop viewports. The
   min(…, 96vw) cap still prevents overflow on narrow screens. */
#admin-modal:not(.hidden) { display: block; }
#admin-modal .modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1700px;
    width: min(1700px, 96vw);
}
.er-debate-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Conclusion block (top of pyramid) ─────────────────────────────── */
.er-conclusion-block {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.er-outcome-panel {
    padding: 16px 20px;
}
.er-outcome-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.er-outcome-label-consensus { color: #2d7a4f; }
.er-outcome-label-impasse   { color: #b45309; }
.er-consensus-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* Equal-width buttons in consensus action bar */
.er-consensus-actions .opt-action-btn {
    min-width: 130px;
    text-align: center;
}
.er-outcome-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}
.er-impasse-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.er-impasse-card {
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    font-size: 0.86rem;
}
.er-impasse-card-hdr {
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.er-impasse-card-qe       .er-impasse-card-hdr { background: var(--primary-pale, #eef4fb); color: var(--primary); border-bottom: 1px solid #c3d9f0; }
.er-impasse-card-inspector .er-impasse-card-hdr { background: #fff3e8; color: #c05621; border-bottom: 1px solid #f6d2b0; }
.er-impasse-card-body {
    padding: 10px 12px;
    line-height: 1.6;
    color: var(--text);
}
.er-extra-round-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}
.er-extra-round-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Replacement text section ───────────────────────────────────────── */
.er-replacement-section {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 14px 20px;
    background: var(--surface);
}
.er-replacement-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #276749;
    margin-bottom: 8px;
}
.er-replacement-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: 6px;
    padding: 10px 14px;
    word-break: break-word;
}
.er-replacement-text .repl-para {
    margin: 0 0 10px;
}
.er-replacement-text .repl-para:last-child {
    margin-bottom: 0;
}
.er-replacement-text .repl-bullet {
    padding-left: 1.2em;
    text-indent: -1.2em;
    margin: 2px 0;
}
.er-replacement-text .repl-bullet::before {
    content: "•  ";
    color: #276749;
}
.er-replacement-text .repl-numbered {
    margin: 2px 0;
}
.er-replacement-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    margin: 4px 0;
}
.er-replacement-text table th,
.er-replacement-text table td {
    border: 1px solid var(--border-color, #d1d5db);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.er-replacement-text table th {
    background: var(--surface2, #f3f4f6);
    font-weight: 600;
}
.er-agreed-actions-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    margin: 4px 0;
}
.er-agreed-actions-text table th,
.er-agreed-actions-text table td {
    border: 1px solid #e8c96a;
    padding: 4px 8px;
    vertical-align: top;
}
.er-agreed-actions-text table th {
    background: #fef3c7;
    font-weight: 600;
}
.er-gen-thinking {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}
.er-replacement-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}
.er-agreed-actions-section {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.er-agreed-actions-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #C05621;
    margin-bottom: 6px;
}
.er-agreed-actions-text {
    font-size: 0.85rem;
    background: #FFFBEB;
    border: 1px solid #F6D860;
    border-radius: 6px;
    padding: 10px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #7A4F1A;
}

/* ── Transcript section (collapsible, below replacement) ────────────── */
.er-transcript-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.er-transcript-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-pale, #eef2ff);
    border: none;
    border-top: 1px solid var(--primary-light);
    border-bottom: 1px solid var(--primary-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.er-transcript-toggle:hover { background: var(--primary-light); color: #fff; }
.er-transcript-toggle::after { content: ' — click to expand/collapse'; font-size: 0.72rem; font-weight: 400; opacity: 0.65; }
.er-transcript-collapsed .er-debate-bubbles { display: none; }

/* Bubble modal */
.er-debate-bubbles {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface2);
}
.er-bubble-row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}
.er-bubble-row-inspector { align-self: flex-start; }
.er-bubble-row-qe        { align-self: flex-end; align-items: flex-end; }
.er-bubble-speaker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.er-bubble-row-inspector .er-bubble-speaker { color: #c05621; }
.er-bubble-row-qe        .er-bubble-speaker { color: var(--primary); }
.er-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text);
}
.er-bubble-inspector {
    background: #fff3e8;
    border-bottom-left-radius: 4px;
    border: 1px solid #f6d2b0;
}
.er-bubble-qe {
    background: var(--primary-pale, #eef4fb);
    border-bottom-right-radius: 4px;
    border: 1px solid #c3d9f0;
}
.er-debate-modal-footer {
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.er-debate-waiting {
    padding: 28px 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.er-actions-bar {
    padding: 7px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
/* Equal-width Report/Regenerate header buttons */
.er-fullscreen-header-actions .opt-action-btn {
    min-width: 115px;
    text-align: center;
}
/* B-022 — the brevity <select> wears .opt-action-btn (white-on-blue control),
   which Chrome/Linux inherits into the native option list → white-on-white,
   unreadable. Force readable dark-on-white options via the base palette so the
   dropdown is legible (theme vars, not hardcoded). */
#er-brevity-select option {
    color: var(--text);
    background-color: var(--bg-white);
}
.er-report-btn { margin-left: auto; }
.er-insertion-box {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: #f0fff4;
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
}
.er-insertion-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #276749;
    margin-bottom: 6px;
}
.er-insertion-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    margin-bottom: 8px;
}
.er-insertion-actions {
    display: flex;
    gap: 8px;
}
.er-spinner {
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 3px;
    animation: er-pulse 1.2s ease-in-out infinite;
}
@keyframes er-pulse {
    0%, 100% { opacity: 0.25; }
    50%       { opacity: 1; }
}
.er-loading {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.88rem;
}
.er-stream-partial {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.er-error {
    color: #c53030;
    font-size: 0.85rem;
}

/* ── Finding action buttons (Expert / Reject / Accept) ── */
.card-expert-btn {
    margin-left: auto;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 2px 5px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.card-expert-btn:hover {
    background: var(--primary-pale);
    color: var(--primary);
}
.card-reject-btn {
    margin-left: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 2px 5px;
    background: transparent;
    color: #a0aec0;
    transition: background 0.12s, color 0.12s;
}

.card-reject-btn:hover {
    background: #fed7d7;
    color: #c53030;
}

.card-actions-btn {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px 5px;
    background: transparent;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}
.card-actions-btn:hover {
    background: var(--primary-pale, #ebf8ff);
    color: var(--primary, #2b6cb0);
}

.finding-actions-popup {
    position: absolute;
    z-index: 900;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    width: 300px;
    max-width: calc(100vw - 24px);
    font-size: 0.83rem;
}
.finding-actions-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.finding-actions-popup-header button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}
.finding-actions-popup-body {
    padding: 10px 14px;
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--text);
    max-height: 220px;
    overflow-y: auto;
}

.card-suggestion-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.card-accept-btn,
.card-edit-btn {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 3px 8px;
    transition: background 0.12s;
}

.card-accept-btn {
    background: #c6f6d5;
    color: #276749;
}

.card-accept-btn:hover {
    background: #9ae6b4;
}

.card-edit-btn {
    background: #bee3f8;
    color: #2b6cb0;
}

.card-edit-btn:hover {
    background: #90cdf4;
}

.card-revert-btn {
    display: block;
    margin-top: 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 3px 8px;
    background: #fefcbf;
    color: #744210;
    transition: background 0.12s;
}

.card-revert-btn:hover {
    background: #faf089;
}

/* ── Unnecessary Detail icon buttons (in card-top row) ── */
.card-ud-edit-btn,
.card-ud-remove-btn {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 2px 5px;
    background: transparent;
    transition: background 0.12s, color 0.12s;
}

.card-ud-edit-btn {
    color: #2b6cb0;
}
.card-ud-edit-btn:hover { background: #bee3f8; }

.card-ud-remove-btn {
    color: #9b2c2c;
}
.card-ud-remove-btn:hover { background: #fed7d7; }

/* ── Edit suggestion modal ── */
.edit-suggestion-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-suggestion-modal {
    background: var(--surface, #fff);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    width: min(520px, 92vw);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-suggestion-modal h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.edit-suggestion-modal textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.edit-suggestion-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.edit-suggestion-modal-actions button {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 14px;
    transition: background 0.12s;
}

/* Change-capture reason form (v3.14.83) — required reason per change at Save.
   Theme-aware (var-based) so it adapts to light/dark. */
.rc-reason-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 1300; display: flex; align-items: center; justify-content: center;
}
.rc-reason-modal {
    background: var(--surface, #fff); border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    width: min(640px, 94vw); max-height: 88vh; padding: 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.rc-reason-modal h3 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.rc-reason-sub { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.rc-reason-list { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.rc-reason-row {
    border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
    padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.rc-reason-kind { font-size: 0.8rem; font-weight: 600; }
.rc-reason-blk { color: var(--text-muted); font-weight: 400; font-size: 0.72rem; }
.rc-reason-diff { font-size: 0.76rem; padding: 4px 6px; border-radius: 4px; white-space: pre-wrap; }
.rc-reason-before { background: var(--surface2); color: var(--text-muted); }
.rc-reason-after  { background: var(--surface2); color: var(--text-secondary); }
/* The actual changed words (theme-aware): removed = red strike, added = green. */
.rc-diff-del { background: rgba(229,62,62,0.18); color: var(--danger); text-decoration: line-through; border-radius: 2px; padding: 0 1px; }
.rc-diff-ins { background: rgba(56,161,105,0.20); color: var(--text); font-weight: 600; border-radius: 2px; padding: 0 1px; }
.rc-reason-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-reason-chip {
    font-size: 0.7rem; padding: 2px 8px; border-radius: 10px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-secondary); cursor: pointer;
}
.rc-reason-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.rc-reason-input {
    width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
    padding: 6px; font-size: 0.82rem; font-family: inherit; resize: vertical; box-sizing: border-box;
}
.rc-reason-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rc-reason-actions button {
    border: none; border-radius: 4px; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; padding: 6px 14px;
}
.rc-reason-cancel { background: var(--surface2); color: var(--text-secondary); }
.rc-reason-save { background: var(--primary); color: #fff; }
.rc-reason-save:disabled { opacity: 0.5; cursor: not-allowed; }

.edit-modal-insert-btn {
    background: #c6f6d5;
    color: #276749;
}

.edit-modal-insert-btn:hover {
    background: #9ae6b4;
}

.edit-modal-cancel-btn {
    background: #e2e8f0;
    color: #4a5568;
}

.edit-modal-cancel-btn:hover {
    background: #cbd5e0;
}

/* ── Inserted finding style ── */
.finding-card.finding-inserted {
    border-style: dashed;
    opacity: 0.9;
}

.cat-badge.inserted-badge {
    background: #805ad5;
}

/* Finding identifier — sits on the card-top row before the category badge.
   Monospaced for compactness and so F001..F999 align nicely across cards.
   Stable per-analysis identifier; appears in audit logs and Word/Excel
   reports so reviewers can refer to a specific finding by ID. */
.finding-id-badge {
    display: inline-block;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2d3748;
    background: #edf2f7;
    border: 1px solid #cbd5e0;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: baseline;
}
.cat-badge.resolved-badge {
    background: #276749;
}

/* v3.9.0 Phase 5 — comment-only finding badge.
   Indicates the finding is editorial / advisory; Accept logs as
   "agreed" and surfaces as a Word comment on export, but does NOT
   mutate the SOP bytes. Distinct from category badges so the user
   sees at a glance that this card behaves differently. */
.cat-badge.action-comment-only {
    background: #4a5568;
    color: #fff;
}

/* v3.9.0 Phase 5 — insert action badges. Visual cue that Accept
   inserts new content adjacent to (rather than replacing) the
   highlighted text. */
.cat-badge.action-insert-after,
.cat-badge.action-insert-before {
    background: #2b6cb0;
    color: #fff;
}

/* v3.9.0 Phase 5 — conflict relationship badge.
   Surfaces the persisted conflicts_with field on the card so
   reviewers see at a glance that accepting this finding will
   overwrite content currently flagged as one or more other
   findings. Hover-title lists the affected finding IDs. */
.cat-badge.conflict-relationship {
    background: var(--conflict-badge);
    color: var(--conflict-text);
    border: 1px solid var(--conflict-bar);
}

/* v3.9.0 Phase 8 — multi-framework pill.
   When sisters were consolidated, the canonical card carries
   regulation_references as a list. Render a small "+N more"
   pill next to the primary regulation_reference so reviewers
   see every framework that flagged the passage. Title attr
   lists the full set on hover. Subtle styling — informational,
   not alarming. */
.card-multi-ref-pill {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #2d3748;
    background: #edf2f7;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    vertical-align: baseline;
    cursor: help;
}

.finding-card.finding-resolved {
    background: #f0fff4 !important;
    border-color: #9ae6b4 !important;
    border-style: dashed;
    opacity: 0.92;
}

/* T-134 Slice B — waived finding: documented no-action. Muted/greyed so it reads
   as handled-but-not-changed, distinct from the green accepted state. Theme-aware. */
.finding-card.finding-waived {
    background: var(--bg, #f7f8fa) !important;
    border-color: var(--border, #cbd5e0) !important;
    border-style: dashed;
    opacity: 0.85;
}
.waived-badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 10px;
    color: var(--text-muted, #64748b);
    background: var(--border, #e2e8f0);
    cursor: help;
}
.card-unwaive-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-muted, #64748b);
    padding: 0 4px;
}
.card-unwaive-btn:hover { color: var(--primary, #2a5a8c); }

.ref-doc-note {
    margin-top: 6px;
    font-size: 0.74rem;
    color: var(--gap-text);
    background: var(--gap-badge);
    border-radius: 4px;
    padding: 5px 8px;
    line-height: 1.4;
}

/* Utility */
.hidden { display: none !important; }

/* ── Diagnostic / warning banners ── */
.diag-banner {
    background: #fff5f5;
    border-bottom: 2px solid var(--conflict-bar);
    padding: 10px 40px 10px 16px;
    position: relative;
    flex-shrink: 0;
}

.warn-banner {
    background: var(--gap-bg);
    border-bottom: 2px solid var(--gap-bar);
    padding: 10px 40px 10px 16px;
    position: relative;
    flex-shrink: 0;
}

.diag-inner,
.warn-inner {
    font-size: 0.82rem;
    line-height: 1.5;
}

.diag-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 2px 5px;
    border-radius: 3px;
}

.diag-close:hover { background: rgba(0,0,0,0.06); }

.diag-check {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 3px 0;
}

.diag-icon { flex-shrink: 0; font-size: 0.85rem; }

.diag-text strong { font-size: 0.82rem; }
.diag-text span   { font-size: 0.78rem; color: var(--text-muted); display: block; }
.diag-hint        { font-size: 0.76rem; color: var(--conflict-text); margin-top: 1px; }

/* ── Detailed error panel ── */
.error-panel {
    background: #fff;
    border: 1px solid #fca5a5;
    border-left: 4px solid var(--conflict-bar);
    border-radius: 8px;
    padding: 20px 22px;
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

/* T-092 (v3.12.16) — banner variant: shown inside the results screen as a
   sticky strip at the top so the loaded SOP stays visible underneath while
   the user reads the error message. Continue button just dismisses the
   banner; the doc never had to disappear. */
.error-panel-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    max-width: 100%;
    margin: 0 0 12px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.error-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--conflict-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-panel-msg {
    font-size: 0.86rem;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.5;
}

.error-panel-hint {
    font-size: 0.82rem;
    background: #fff5f5;
    border-radius: 5px;
    padding: 8px 10px;
    color: var(--conflict-text);
    line-height: 1.5;
}

.error-panel-hint::before {
    content: "Fix: ";
    font-weight: 600;
}

.error-panel-retry {
    margin-top: 14px;
    padding: 7px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.82rem;
    cursor: pointer;
}

.error-panel-retry:hover { background: var(--primary-light); }


/* ── eCFR hierarchy tree ── */
.ecfr-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 3px 0;
    line-height: 1.3;
}
.ecfr-toggle-row input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
}
.ecfr-node-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
}
.ecfr-node-text:hover { color: var(--primary); }
.ecfr-part-row .ecfr-node-text { font-weight: 500; }
.ecfr-toggle-row .group-arrow   { flex-shrink: 0; cursor: pointer; font-size: 0.7rem; margin-top: 3px; }
.ecfr-node-wrap[data-depth="0"] > .ecfr-toggle-row { padding-top: 4px; }
.ecfr-node-wrap[data-depth="1"] { padding-left: 8px; }
.ecfr-node-wrap[data-depth="2"] { padding-left: 6px; }
.ecfr-node-wrap[data-depth="3"] { padding-left: 4px; }
.ecfr-subpart-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 0 3px 6px;
    font-size: 0.76rem;
    cursor: pointer;
}
.ecfr-subpart-row input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }
.ecfr-subpart-row .part-num  { font-size: 0.76rem; font-weight: 500; }
.ecfr-subpart-row .part-desc { font-size: 0.72rem; color: var(--text-muted, #666); }

/* ── Frameworks visibility manager (Options → Frameworks tab) ── */
.fwm-container {
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}
.fwm-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 0 4px;
    border-bottom: 1px solid var(--border, #ddd);
    margin-bottom: 4px;
}
.fwm-group {
    margin-bottom: 4px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    overflow: hidden;
}
.fwm-group-header,
.fwm-subgroup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-alt, #f5f5f5);
    cursor: default;
}
.fwm-group-header { background: var(--bg-alt, #ebebeb); }
.fwm-group-label {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
}
.fwm-subgroup-label {
    flex: 1;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--text-muted, #555);
}
.fwm-select-all,
.fwm-select-none {
    font-size: 0.68rem;
    padding: 1px 6px;
    border: 1px solid var(--border, #ccc);
    border-radius: 3px;
    background: var(--bg, #fff);
    cursor: pointer;
    white-space: nowrap;
}
.fwm-select-all:hover  { background: var(--primary-light, #e8f0fe); }
.fwm-select-none:hover { background: #fdecea; }
.fwm-delete-btn {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.fwm-item:hover .fwm-delete-btn { opacity: 1; }
.fwm-delete-btn:hover { background: #fdecea; color: var(--error, #c00); border-color: var(--error, #c00); }
.fwm-group-items,
.fwm-subgroup-items {
    display: none;
    padding: 2px 8px 4px 12px;
}
.fwm-group-items.fwm-open,
.fwm-subgroup-items.fwm-open {
    display: block;
}
.fwm-subgroup {
    border-top: 1px solid var(--border, #e0e0e0);
}
.fwm-subgroup-label {
    padding: 3px 0 1px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fwm-item,
.fwm-part-row,
.fwm-subpart-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 0;
    font-size: 0.78rem;
    flex-wrap: wrap;
}
.fwm-item label,
.fwm-part-row label,
.fwm-subpart-row label {
    cursor: pointer;
    flex: 1;
    line-height: 1.3;
}
.fwm-subparts-list {
    display: none;
    padding: 2px 0 2px 14px;
    width: 100%;
}
.fwm-subparts-list.fwm-open { display: block; }
.fwm-subpart-row { padding-left: 4px; }

/* ── Copyright footer ── */
.app-copyright {
    position: fixed;
    bottom: 4px;
    right: 10px;
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* ── Domain logo watermark behind main content ── */
.app-wrap {
    position: relative;
}
.app-wrap::before {
    content: '';
    position: fixed;
    top: 0;
    left: 240px;                       /* sidebar width */
    right: 0;
    bottom: 0;
    /* Watermark image is set by JS from the active domain's configured logo
       (see _watermark-url assignment in app.js after loadDomainConfig). The
       fallback is `none` so unconfigured domains render without a watermark
       — no other branding leaks through before JS runs. */
    background-image: var(--watermark-url, none);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.055;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
}
.app-wrap.has-document::before {
    opacity: 0;
}

/* ── Build stamp (header) ── */
.build-stamp {
    font-size: 0.72rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    margin-right: 4px;
}

.org-context-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    margin-right: 8px;
    white-space: nowrap;
}
.org-context-wrap select {
    font-size: 0.78rem;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    max-width: 180px;
}

/* ── Error state (old simple version, kept for fallback) ── */
.error-box {
    background: var(--conflict-bg);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 16px 20px;
    color: var(--conflict-text);
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.error-box p + p {
    margin-top: 6px;
    font-size: 0.83rem;
    color: var(--text-muted);
}

/* ── Sub-group label (second-level collapsible inside a chapter) ── */
.sub-group-label {
    padding-left: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light);
    background: none;
    border-top: none;
}
.sub-group-label:hover { background: rgba(42,90,140,0.07); }

/* ── Agency section titles ── */
.agency-title {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.agency-subtitle {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Agency placeholder (empty coming-soon state) ── */
.agency-placeholder {
    padding: 7px 10px 7px 14px;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Options button (header) ── */
.options-btn {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.85);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.options-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ── Modal overlay ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-overlay.hidden { display: none; }

/* ── ParaQualis "Sunset" brand: login screen background ──────────────────────
 * Per ~/.claude/brand_colors.md (2026-05-19). Renders the brand's
 * sky-at-sunset narrative literally: deep blue at top → warm orange/coral
 * at the horizon. Only applies to the login modal's overlay — the
 * generic .modal-overlay keeps its dim rgba(0,0,0,0.45) so confirm /
 * other in-app modals stay dark-dimmed against the app behind them.
 */
#login-modal.modal-overlay {
    background: linear-gradient(180deg,
        #276BB2 0%,
        #3274C2 12%,
        #4C8ED8 26%,
        #5294DC 40%,
        #89C0F5 55%,
        #B6DBF6 68%,
        #FECF81 82%,
        #FFBE69 92%,
        #FF8053 100%);
}

/* ── Modal box ── */
.modal-box {
    background: var(--bg-white);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    width: min(900px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-has-logo {
    flex-direction: column;
}
.modal-split-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* UI-bug fix 2026-04-29: previously 40% of the modal width — produced
   an oversized empty blue column on every branded modal (Saved Analyses,
   Existing-saved-analysis confirm, etc) when the --modal-logo-url CSS
   variable wasn't set, squeezing the body into a horizontally-scrolling
   sliver. Cap to ~140px and let the body grow into the freed space. */
.modal-logo-sidebar {
    flex: 0 0 140px;
    max-width: 18%;
    background: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 14px;
    min-height: 120px;
}
.modal-logo-sidebar::before {
    content: '';
    flex: 1;
    min-height: 60px;
    background-image: var(--modal-logo-url, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.modal-logo-sidebar img {
    display: none;
}
/* Opt-out class for very small modals that don't need a logo column at
   all — 3-button confirms can add `modal-logo-empty` to drop the
   sidebar entirely. */
.modal-logo-sidebar.modal-logo-empty {
    display: none;
}
.modal-body-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
}
.modal-title { flex: 1; }
.modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
.modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Modal tabs ── */
.modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--primary-pale);
    flex-shrink: 0;
}
.modal-tab {
    padding: 8px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.modal-tab:hover  { color: var(--primary); }
.modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Modal body ── */
.modal-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

/* ── General tab ── */
.opt-section {
    background: var(--primary-pale);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.opt-section h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}
.opt-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}
.opt-action-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--primary-light);
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.opt-action-btn:hover    { background: var(--primary-light); }
.opt-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Admin: Data Load tab ─────────────────────────────────────────────── */
.data-load-card {
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    background: #fff;
}
.data-load-card-error { border-color: #c53030; background: #fff5f5; }
.data-load-card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 10px;
}
.data-load-card-title {
    font-size: 1rem; font-weight: 700; color: #1a3a5c;
    margin-bottom: 2px;
}
.data-load-card-subtitle {
    font-size: 0.84rem; color: #6b7a8a; line-height: 1.4;
}
.data-load-card-stats { text-align: right; min-width: 90px; }
.data-load-stat-num   { font-size: 1.4rem; font-weight: 700; color: #1a3a5c; }
.data-load-stat-label { font-size: 0.72rem; color: #8a9aaa; text-transform: uppercase; letter-spacing: 0.04em; }
.data-load-creds {
    font-size: 0.82rem; padding: 6px 10px; border-radius: 4px;
    margin-bottom: 10px;
}
.data-load-creds.ok      { background: #e8f5e8; color: #1a5a1a; border-left: 3px solid #27ae60; }
.data-load-creds.missing { background: #fdf7d8; color: #856404; border-left: 3px solid #f0a000; }
.data-load-creds-hint {
    display: block; font-size: 0.76rem; opacity: 0.9; margin-top: 2px; font-style: italic;
}
.data-load-meta {
    font-size: 0.84rem; color: #4a5a6a; margin: 8px 0 12px;
}
.data-load-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.opt-action-btn-secondary {
    background: #fff !important; color: var(--primary, #2b6cb0) !important;
    border: 1px solid var(--primary, #2b6cb0) !important;
}
.opt-action-btn-secondary:hover { background: #e8edf5 !important; }
.data-load-running {
    background: #fff8e6; color: #7a5000;
    border-left: 3px solid #f0a000; padding: 8px 12px;
    border-radius: 4px; font-size: 0.84rem; margin: 8px 0;
}
.data-load-history { margin-top: 12px; }
.data-load-history summary {
    cursor: pointer; font-size: 0.82rem; color: #4a5a6a;
    padding: 4px 0;
}
.data-load-history-tbl {
    width: 100%; border-collapse: collapse; font-size: 0.78rem;
    margin-top: 8px;
}
.data-load-history-tbl th {
    text-align: left; padding: 4px 8px;
    background: #f1f5f9; color: #475569; font-weight: 600;
    border-bottom: 1px solid var(--border-color, #d1d5db);
}
.data-load-history-tbl td {
    padding: 4px 8px; border-bottom: 1px solid #f1f5f9;
}

.opt-save-btn {
    background: #276749;
    border-color: #276749;
}
.opt-save-btn:hover { background: #2f7a56; border-color: #2f7a56; }
.audit-action-btn { height: 34px; box-sizing: border-box; }

/* T-074(11) — Shared sizing for primary action buttons inside Admin Panel tabs.
   Use alongside .opt-action-btn (and .opt-save-btn for green-primary). Keeps
   side-by-side button rows visually consistent (e.g. + New Key vs Refresh on
   API Keys tab). v3.12.15 — height locked (was min-height) + padding fixed
   + line-height normalised so emoji-prefixed labels render at the same height
   as text-only ones across the row. */
.admin-panel-btn {
    height: 34px;
    min-width: 120px;
    padding: 0 14px;
    line-height: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.confirm-cancel-btn {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}
.confirm-cancel-btn:hover { background: var(--border); }
.dialog-btn {
    padding: 6px 16px;
    border-radius: 5px;
    border: 1px solid #aaa;
    background: #f0f0f0;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s;
}
.dialog-btn:hover { background: #e0e0e0; }
.dialog-btn-primary {
    background: var(--primary);
    border-color: var(--primary-light);
    color: #fff;
}
.dialog-btn-primary:hover { background: var(--primary-light); }

/* ── ICH URL tab toolbar ── */
.ich-url-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.ich-url-save-status {
    font-size: 0.8rem;
    margin-left: 6px;
}
.ich-url-save-status.save-ok   { color: #276749; }
.ich-url-save-status.save-fail { color: var(--conflict-text); }

.reg-last-checked {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    min-height: 1.2em;
}

/* ── ICH URL table ── */
.ich-url-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: calc(82vh - 200px);
}
.ich-url-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.ich-url-table thead th {
    position: sticky;
    top: 0;
    background: var(--primary-pale);
    border-bottom: 1px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
.ich-url-table tbody tr:nth-child(even) { background: #fafafa; }
.ich-url-table tbody tr:hover           { background: var(--primary-pale); }
.ich-url-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.url-code { font-weight: 600; white-space: nowrap; color: var(--primary); min-width: 80px; }
.url-cat  { white-space: nowrap; color: var(--text-muted); min-width: 100px; }
.url-title { color: var(--text); }
.url-edit-cell { min-width: 280px; }
.url-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.url-input-wrap:focus-within {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(42, 90, 140, 0.15);
}
.url-scheme {
    padding: 3px 5px;
    font-size: 0.72rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-muted);
    background: #f7f8fa;
    border-right: 1px solid var(--border);
    white-space: nowrap;
    user-select: none;
}
.url-input {
    width: 100%;
    padding: 3px 6px;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text);
    background: transparent;
}
.status-th    { width: 56px; text-align: center; }
.url-status-cell { text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; }
.url-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}
.url-badge-unknown  { background: #e2e8f0; color: #718096; }
.url-badge-checking { background: #bee3f8; color: #2b6cb0; }
.url-badge-ok       { background: #c6f6d5; color: #276749; }
.url-badge-fail     { background: #fed7d7; color: #c53030; cursor: help; }
.url-local-label {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 6px; background: #ebf8f2; border-radius: 5px;
    border: 1px solid #9ae6b4;
}
.url-local-tag {
    font-size: 0.72rem; font-weight: 700; color: #276749;
    text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.url-local-filename {
    font-size: 0.75rem; color: #2d6a4f; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.url-local-remove {
    background: none; border: none; color: #9ae6b4;
    cursor: pointer; font-size: 0.75rem; padding: 0 2px; flex-shrink: 0;
}
.url-local-remove:hover { color: #c53030; }
.url-upload-btn {
    cursor: pointer; font-size: 0.88rem; padding: 1px 3px;
    color: var(--text-muted); line-height: 1;
}
.url-upload-btn:hover { color: var(--primary); }

.ich-new-row td { background: #fffbeb !important; }
.ich-new-input { width: 100%; font-size: 0.82rem; padding: 3px 6px; border: 1px solid #d97706;
    border-radius: 4px; background: #fff; font-family: inherit; }
.ich-new-input:focus { outline: none; border-color: #b45309; box-shadow: 0 0 0 2px #fde68a; }
.ich-new-cat { cursor: pointer; }
.ich-remove-btn { background: none; border: none; color: #b91c1c; font-size: 1.1rem;
    cursor: pointer; line-height: 1; padding: 0 4px; font-weight: 700; }
.ich-remove-btn:hover { color: #7f1d1d; }

/* right-click context menu for ICH table rows */
.ich-ctx-cell { cursor: context-menu; }
.ich-ctx-menu {
    position: fixed;
    z-index: 9999;
    background: Canvas;
    color: CanvasText;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 4px 0;
    min-width: 150px;
    font-size: 0.85rem;
}
.ich-ctx-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.ich-ctx-item:hover { background: var(--hover-bg, rgba(0,0,0,0.07)); }
.ich-ctx-delete { color: #b91c1c; }
.ich-ctx-delete:hover { background: #fee2e2; }

.url-version-hint { min-height: 0; }
.url-version-suggest { display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: #b45309; margin-top: 4px; }
.url-version-accept-btn { font-size: 0.72rem; padding: 1px 7px; border-radius: 10px;
    background: #b45309; color: #fff; border: none; cursor: pointer; font-weight: 600;
    transition: background 0.15s; }
.url-version-accept-btn:hover { background: #92400e; }
.url-version-applied { display: inline-block; font-size: 0.75rem; color: #276749;
    margin-top: 4px; }

.table-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ── App menu (OS-style dropdown) ── */
.app-menu-wrap {
    position: relative;
    flex-shrink: 0;
}
.app-menu-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.app-menu-btn:hover { background: rgba(255,255,255,0.15); }
.app-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    min-width: 220px;
    z-index: 300;
    padding: 4px 0;
}
.app-menu-dropdown.hidden { display: none; }
.app-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 7px 16px;
    font-size: 0.84rem;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
}
.app-menu-item:hover { background: var(--primary-pale); color: var(--primary); }
.app-menu-parent {
    position: relative;
    padding-right: 20px;
}
.app-menu-parent:hover .app-menu-submenu {
    display: block;
}
.app-menu-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 5px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 500;
}
.app-menu-submenu .app-menu-item {
    display: block;
    width: 100%;
    text-align: left;
}
.app-menu-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.app-menu-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: default;
}
.app-menu-setting:hover { background: var(--primary-pale); }
.app-menu-setting select {
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 4px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
/* Disabled placeholder checkboxes (EMA, ISO not yet configured) */
.agency-placeholder-item {
    opacity: 0.55;
    cursor: not-allowed;
}
.agency-placeholder-item input[type="checkbox"] {
    cursor: not-allowed;
}

/* ── Org Profile tab ── */
.org-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 4px;
}
.org-field-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.org-input {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.83rem;
    background: var(--input-bg, #fff);
    color: var(--text);
    width: 100%;
}
.org-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.org-checks label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}
.org-textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    background: var(--input-bg, #fff);
    color: var(--text);
    line-height: 1.5;
}

/* ── Lined textarea (numbered lines) ── */
.lined-wrap {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    min-height: 228px;
    max-height: 400px;
    background: #fff;
}
.line-numbers {
    background: #f0f4f8;
    border-right: 1px solid var(--border);
    padding: 7px 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: right;
    min-width: 34px;
    overflow: hidden;
    user-select: none;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.line-numbers span {
    display: block;
    line-height: 1.5;
    font-size: 0.76rem;
}
.org-textarea.lined-ta {
    flex: 1;
    border: none;
    border-radius: 0;
    resize: none;
    padding: 7px 9px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    min-height: 228px;
    overflow-y: auto;
    background: #fff;
}
.cal-lined-wrap {
    min-height: 80px;
    max-height: 160px;
}
.cal-textarea.lined-ta {
    min-height: 80px;
    overflow-y: auto;
    font-family: inherit;
    font-size: 0.8rem;
}
.opt-field-hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}
.org-save-row { display: flex; align-items: center; gap: 12px; }

/* ── Calibration tab ── */
.cal-loading { padding: 16px; color: var(--text-muted); font-size: 0.85rem; }
.cal-principle {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.cal-principle-name {
    background: var(--sidebar-bg);
    padding: 7px 12px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
}
.cal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.cal-field { padding: 10px 12px; }
.cal-field:first-child { border-right: 1px solid var(--border); }
.cal-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cal-label.never  { color: #c62828; }
.cal-label.always { color: #2e7d32; }
.cal-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: inherit;
    resize: vertical;
    background: var(--input-bg, #fff);
    color: var(--text);
    line-height: 1.5;
}

/* ── SUCCESS section ── */
.success-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 2px;
}
.success-label:hover { background: var(--hover-bg); }
.success-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.success-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.3;
}
.success-run-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
}
.success-run-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.success-run-btn:not(:disabled):hover { opacity: 0.88; }

/* ── Password show/hide ── */
.pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-wrap .org-input {
    flex: 1;
    padding-right: 2.2rem;
}
.pw-toggle-btn {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-muted);
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.6;
}
.pw-toggle-btn:hover { opacity: 1; }

/* ── Auth modals ── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.auth-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: -4px;
}
.auth-error {
    color: var(--conflict-text);
    background: var(--conflict-badge);
    border: 1px solid #fed7d7;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.82rem;
}
.auth-ok {
    color: #276749;
    background: #c6f6d5;
    border: 1px solid #9ae6b4;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.82rem;
}
.auth-link-btn {
    background: none;
    border: none;
    color: var(--primary-light);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 0;
    text-align: center;
}
.auth-link-btn:hover { color: var(--primary); }
.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.admin-users-table th {
    background: var(--primary-pale);
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.admin-users-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-users-table tr:last-child td { border-bottom: none; }
.user-disabled { opacity: 0.55; }

/* ── Users table (admin users tab) ── */
.user-badge.warn   { background: #c05621; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.user-badge.sys    { background: #1a3a5c; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.user-badge.domain { background: #5b21b6; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.user-badge.org    { background: #065f46; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; }

/* ── Org list cards (Admin Panel → Organisations) ───────────────────────────
   Modernised look: white surface, breathing room, clear button hierarchy.
   The same .user-card markup is reused for users elsewhere; org-specific
   tweaks live under .org-card. */
#admin-orgs-list { display: flex; flex-direction: column; gap: 10px; }

.org-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.org-card:hover {
    box-shadow: 0 4px 12px rgba(26, 58, 92, 0.08);
    border-color: #cbd5e0;
}
.org-card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}
.org-card-main { min-width: 0; }   /* allow children to truncate cleanly */
.org-card-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.org-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
}
.org-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
}
.org-card-meta code {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    background: var(--primary-pale);
    color: var(--primary);
    padding: 1px 6px;
    border-radius: 4px;
}
.org-card-id {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.org-card-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.org-member-chip {
    background: var(--primary-pale);
    color: var(--primary);
    font-size: 0.74rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.org-member-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}
.org-member-more {
    font-size: 0.74rem;
    color: var(--text-muted);
    padding: 2px 4px;
    align-self: center;
}
.org-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    min-width: 96px;
}

/* Pill-style badges for the org row — calmer palette than the user badges */
.org-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.org-pill-domain {
    background: #e6f1fa;          /* tint of --primary */
    color: var(--primary);
    border-color: #c9dcef;
}
.org-pill-mode-open {
    background: #e6f7ed;          /* desaturated green */
    color: #1f6f43;
    border-color: #b9e4c9;
}
.org-pill-mode-code {
    background: #fff4e0;          /* desaturated amber */
    color: #8a5a00;
    border-color: #f3d9a4;
}
.org-pill-mode-invite {
    background: #ede7fb;          /* desaturated violet */
    color: #5b3a9b;
    border-color: #d6c8f0;
}

/* Secondary (outlined) and danger button variants — used in org/user cards */
.opt-action-btn.opt-action-secondary {
    background: var(--bg-white);
    color: var(--primary);
    border: 1px solid var(--primary-light);
}
.opt-action-btn.opt-action-secondary:hover {
    background: var(--primary-pale);
    color: var(--primary);
}
.opt-action-btn.opt-action-danger {
    background: var(--bg-white);
    color: var(--conflict-text);
    border: 1px solid #fbb6ae;
}
.opt-action-btn.opt-action-danger:hover {
    background: var(--conflict-text);
    color: #fff;
    border-color: var(--conflict-text);
}
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.users-table thead th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 10px 6px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.users-table thead th.user-col-cb { text-align: center; }
.user-row td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.user-row.user-disabled { opacity: 0.55; }
.user-row:hover td { background: var(--surface); }
.user-col-name  { font-weight: 600; }
.user-col-meta  { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
.user-col-cb    { text-align: center; }
.user-col-edit  { text-align: right; white-space: nowrap; }
.user-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 2px 6px;
    color: var(--text-muted);
    border-radius: 4px;
    line-height: 1;
}
.user-edit-btn:hover { color: var(--primary); background: var(--surface); }
.user-edit-row td { padding: 0; border-bottom: 2px solid var(--primary-pale, #e8e4f8); }

/* ── User inline edit form ── */
.user-edit-form {
    padding: 12px 14px;
    background: var(--surface);
}
.user-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
}
@media (max-width: 700px) {
    .user-edit-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Logo drop zone (branding tab) ── */
.logo-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg);
    max-width: 400px;
}
.logo-drop-zone:hover   { border-color: var(--primary); background: var(--surface); }
.logo-drop-active       { border-color: var(--primary) !important; background: var(--surface) !important; }

/* ── Admin: Domain Editor ── */
.domain-editor-layout {
    display: flex;
    gap: 0;
    height: 540px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.domain-list-pane {
    overflow-y: auto;
}
.domain-edit-pane {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.domain-list-item {
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background .12s;
}
.domain-list-item:hover { background: var(--bg-hover, #f0f4f8); }
.domain-list-item.active {
    background: var(--primary-ultra-light, #e8f0f8);
    border-left-color: var(--primary);
}
.domain-list-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 3px; }
.domain-list-meta { display: flex; align-items: center; gap: 6px; }
.domain-builtin-badge {
    font-size: 0.68rem; background: var(--primary); color: #fff;
    padding: 1px 5px; border-radius: 3px; font-weight: 600;
}
.domain-custom-badge {
    font-size: 0.68rem; background: #d4edda; color: #155724;
    padding: 1px 5px; border-radius: 3px; font-weight: 600;
}
/* T-079(3) — "template" indicator for zero-framework domains. Replaces
   the earlier behaviour of concatenating " Template" onto the brand
   name, which doubled up to "SUCCESS QMS Template Template" when the
   brand name itself ended in "Template". */
.domain-template-badge {
    font-size: 0.68rem; background: #fef3c7; color: #92400e;
    padding: 1px 5px; border-radius: 3px; font-weight: 600;
    border: 1px solid #fde68a;
}
.de-section-heading {
    margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-secondary);
}
.de-label { font-size: 0.82rem; font-weight: 600; margin: 8px 0 3px; color: var(--text-secondary); }
.de-persona-usage { font-size: 0.75rem; font-weight: 400; color: var(--primary); cursor: default; margin-left: 4px; opacity: 0.7; }

/* ── AI Chat — open button ── */
/* The Chat-with-AI-Inspector button moved into the .results-actions
   toolbar (v3.8.28) so it appears alongside Expert/Report/Audit/Edit
   instead of as a separate floating element below the doc body. The
   .chat-open-btn standalone styles were removed; the button now uses
   the existing .download-btn styling. */

/* ── Floating chat window ── */
.chat-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 480px;
    height: 560px;
    min-width: 320px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    color-scheme: light dark;
    background: Canvas;
    color: CanvasText;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    z-index: 900;
    resize: both;
    overflow: hidden;
}
.chat-float.hidden { display: none; }

.chat-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--primary);
    color: #fff;
    border-radius: 9px 9px 0 0;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.chat-float-header:active { cursor: grabbing; }
.chat-title { font-weight: 600; font-size: 0.88rem; color: #fff; }
.chat-header-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1; padding: 0 2px;
}
.chat-header-btn:hover { color: #fff; }
.chat-close {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1;
}
.chat-close:hover { color: #fff; }

.chat-mode-bar {
    display: flex;
    gap: 0;
    padding: 5px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.chat-mode-btn {
    flex: 1;
    padding: 4px 0;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chat-mode-btn:first-child { border-radius: 5px 0 0 5px; }
.chat-mode-btn:last-child  { border-radius: 0 5px 5px 0; border-left: none; }
.chat-mode-btn.active      { background: #1a3a5c; color: #fff; border-color: #1a3a5c; }
.chat-mode-btn:not(.active):hover { background: #e2e8f0; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-msg { display: flex; flex-direction: column; gap: 3px; max-width: 92%; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.assistant { align-self: flex-start; }
.chat-bubble {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.55;
    word-break: break-word;
}
.chat-msg.user .chat-bubble {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 3px;
    white-space: pre-wrap;
}
.chat-msg.assistant .chat-bubble {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 3px;
}
.chat-msg.streaming .chat-bubble { opacity: 0.8; white-space: pre-wrap; }
.chat-error-msg {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.chat-error-heading {
    font-weight: 700;
    color: #c53030;
    font-size: 0.85rem;
}
.chat-error-detail {
    font-size: 0.82rem;
    color: #742a2a;
}
.chat-error-action {
    font-size: 0.82rem;
    color: #744210;
    font-style: italic;
}
.chat-md { line-height: 1.55; }
.chat-md h1, .chat-md h2, .chat-md h3 { margin: 10px 0 4px; font-weight: 700; }
.chat-md h1 { font-size: 1rem; }
.chat-md h2 { font-size: 0.95rem; }
.chat-md h3 { font-size: 0.9rem; }
.chat-md code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-family: monospace; font-size: 0.85em; }

/* Markdown rendering inside assistant bubbles */
.chat-bubble p   { margin: 0 0 8px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul, .chat-bubble ol { margin: 4px 0 8px 18px; }
.chat-bubble li  { margin-bottom: 3px; }
.chat-bubble strong { font-weight: 700; }
.chat-bubble em  { font-style: italic; }

/* Markdown tables */
.chat-bubble table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin: 8px 0;
}
.chat-bubble th {
    background: var(--primary-pale);
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    border: 1px solid var(--border);
}
.chat-bubble td {
    padding: 4px 8px;
    border: 1px solid var(--border);
    vertical-align: top;
}
.chat-bubble tr:nth-child(even) td { background: var(--bg); }

/* Suggested change card */
.chat-change-card {
    margin: 8px 0 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.81rem;
    background: Canvas;
}
.chat-change-card.applied { border-color: #276749; background: #f0fff4; }
.chat-change-label {
    padding: 5px 10px;
    background: var(--gap-bg);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--gap-text);
    border-bottom: 1px solid var(--border);
}
.chat-change-card.applied .chat-change-label { background: #c6f6d5; color: #276749; }
.chat-change-original {
    padding: 6px 10px;
    background: #fff5f5;
    border-bottom: 1px solid var(--border);
    color: var(--conflict-text);
    font-family: monospace;
    font-size: 0.79rem;
    white-space: pre-wrap;
}
.chat-change-replacement {
    padding: 6px 10px;
    background: #f0fff4;
    border-bottom: 1px solid var(--border);
    color: #276749;
    font-family: monospace;
    font-size: 0.79rem;
    white-space: pre-wrap;
}
.chat-change-rationale {
    padding: 5px 10px;
    color: var(--text-muted);
    font-size: 0.77rem;
    border-bottom: 1px solid var(--border);
}
.chat-change-actions { padding: 6px 10px; display: flex; gap: 8px; }
.chat-apply-btn {
    padding: 4px 12px;
    background: #276749;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.78rem;
    cursor: pointer;
    font-weight: 600;
}
.chat-apply-btn:hover { background: #1d4e35; }
.chat-apply-btn:disabled { opacity: 0.5; cursor: default; }
.chat-applied-badge {
    padding: 4px 10px;
    background: #c6f6d5;
    color: #276749;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
}

.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.84rem;
    font-family: inherit;
    background: Canvas;
    color: CanvasText;
    line-height: 1.4;
}
.chat-input:focus { outline: none; border-color: var(--primary); }
.chat-send-btn {
    padding: 0 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    align-self: flex-end;
    height: 36px;
    flex-shrink: 0;
}
.chat-send-btn:hover { background: var(--primary-dark, #1a5276); }
.chat-send-btn:disabled { opacity: 0.4; cursor: default; }

/* Applied-change highlight in document view */
.applied-change-mark {
    background: #c6f6d5;
    border-bottom: 2px solid #276749;
    cursor: default;
    position: relative;
    /* T-074(13) — outline ensures contrast against any background; the
       light-green fill on its own disappears against shaded table cells
       (e.g. <td style="background:#f3f4f6">). Outline sits outside the
       box so doesn't affect layout; padding adds breathing room so the
       outline doesn't crash against adjacent text. */
    outline: 1px solid #276749;
    outline-offset: 1px;
    padding: 0 2px;
    border-radius: 2px;
}

/* T-074(14) — Multi-paragraph insertion renders as one continuous highlight.
   docx-preview emits Word's <w:ins> track-changes runs as <ins> elements.
   When a paragraph_plus_list / paragraph_range finding inserts N consecutive
   paragraphs, each becomes its own <p><ins>...</ins></p> block — visually
   reading as N separated green blocks with paragraph-margin gaps between
   them. Collapse the margin between adjacent insertion paragraphs so the
   reader sees one continuous block of inserted content. */
.doc-body.docx-render .docx-wrapper p:has(ins) {
    margin-top: 6px;
    margin-bottom: 6px;
}
.doc-body.docx-render .docx-wrapper p:has(ins) + p:has(ins) {
    margin-top: 0;
}

/* v3.12.35 — Promote single-finding highlights to BLOCK-LEVEL styling on
   the containing paragraph. v3.12.33 attempted this via `.applied-change-mark`
   but that class is dead CSS — nothing in the DOM ever gets it. The actual
   class wired into highlight wraps by `_wrapHighlightInDOM` is `.hl`
   (alongside per-category modifiers `.hl.vague`, `.hl.critical_gap` etc.
   and `.hl.inserted` for accepted insertions). Switching the selector to
   `.hl` makes the rule fire on every finding regardless of category.
   The category-tinted background from `.hl.vague` / `.hl.critical_gap` etc.
   is overridden by the parent's block-level background to give a unified
   appearance per Craig's "single findings should look like section 1.5"
   directive (2026-05-16). Inserted findings keep their distinctive green
   block via the existing `.hl.inserted` rule above — that styling already
   wraps the whole node so it's not double-processed here. */
.doc-body.docx-render .docx-wrapper p:has(> .hl:not(.inserted)),
.doc-body.docx-render .docx-wrapper li:has(> .hl:not(.inserted)) {
    background: rgba(245, 158, 11, 0.06);
    border-left: 3px solid rgba(245, 158, 11, 0.55);
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 6px;
    margin-bottom: 6px;
}
/* Inline .hl becomes transparent inside the block so the parent's block
   treatment shows through cleanly — no competing per-line outline +
   border-bottom. The `.hl.inserted` rule is preserved (excluded from this
   override) so inserted findings keep their distinctive block styling. */
.doc-body.docx-render .docx-wrapper p:has(> .hl:not(.inserted)) .hl:not(.inserted),
.doc-body.docx-render .docx-wrapper li:has(> .hl:not(.inserted)) .hl:not(.inserted) {
    background: transparent;
    outline: none;
    border-bottom: none;
    padding: 0;
    border-radius: 0;
}
/* Multi-paragraph findings — collapse the margin between consecutive
   finding-marked paragraphs the same way :has(ins) does for insertions
   above. */
.doc-body.docx-render .docx-wrapper p:has(> .hl:not(.inserted)) + p:has(> .hl:not(.inserted)),
.doc-body.docx-render .docx-wrapper li:has(> .hl:not(.inserted)) + li:has(> .hl:not(.inserted)) {
    margin-top: 0;
}



/* ── SOP Builder ─────────────────────────────────────────────────────────── */

.sop-builder-wrap {
    display: flex;
    height: calc(100vh - 52px);
    overflow: hidden;
}

/* ── Library panel ─────────────────────────────────────────────────────── */
.sop-lib-panel {
    width: 360px;
    min-width: 280px;
    max-width: 440px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    overflow: hidden;
    flex-shrink: 0;
}

.sop-lib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    gap: 6px;
    flex-shrink: 0;
}

.sop-lib-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    white-space: nowrap;
}

.sop-lib-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sop-lib-btn {
    padding: 4px 9px;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.sop-lib-btn:hover { background: var(--primary-pale); border-color: var(--primary); }
.sop-lib-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.sop-lib-btn-primary:hover { background: var(--primary-light); }

.sop-lib-filter {
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sop-filter-btn {
    padding: 3px 10px;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}
.sop-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.sop-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.sop-lib-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.fw-check-list {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fw-check-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    padding: 2px 0;
}
.fw-check-list label:hover { color: var(--primary); }
.fw-check-group {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 0 1px;
    margin-top: 2px;
}

.sop-lib-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.sop-lib-back {
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.sop-back-btn {
    width: 100%;
    padding: 7px 12px;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.sop-back-btn:hover { background: var(--primary-pale); border-color: var(--primary); color: var(--primary); }

/* ── SOP list item ─────────────────────────────────────────────────────── */
.sop-list-item {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 4px;
    transition: background 0.1s, border-color 0.1s;
}
.sop-list-item:hover { background: var(--bg); border-color: var(--border); }
.sop-list-item.active { background: var(--primary-pale); border-color: var(--primary); }

.sop-item-title {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sop-item-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sop-status-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.6;
}
.sop-status-draft     { background: #fef3c7; color: #92400e; }
.sop-status-published { background: #d1fae5; color: #065f46; }
.sop-status-review    { background: #dbeafe; color: #1e40af; }
.sop-status-pending   { background: #fde8d8; color: #9a3412; }

/* ── Next Step workflow dropdown ─────────────────────────────────────────── */
.sop-next-step-wrap { position: relative; display: inline-block; }
.sop-next-step-menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px;
    z-index: 500; overflow: hidden;
}
.sop-nxt-item {
    display: block; width: 100%; padding: 10px 16px; text-align: left;
    background: none; border: none; cursor: pointer; font-size: 0.88rem;
    color: #374151; transition: background 0.12s;
}
.sop-nxt-item:hover     { background: #f3f4f6; }
.sop-nxt-publish        { color: #065f46; font-weight: 600; }
.sop-nxt-publish:hover  { background: #d1fae5; }
.sop-nxt-sep            { height: 1px; background: #e5e7eb; margin: 3px 0; }

/* ── Main builder area ─────────────────────────────────────────────────── */
.sop-builder-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Split view: chat left, preview right ─────────────────────────────────── */
.sop-builder-main.sop-split-mode {
    flex-direction: row;
}
.sop-builder-main.sop-split-mode .sop-builder-chat {
    flex: 1;
    min-width: 0;
    border-right: 2px solid var(--border);
    height: 100%;
}
.sop-builder-main.sop-split-mode .sop-builder-preview {
    flex: 1;
    min-width: 0;
    height: 100%;
}

.sop-builder-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 10px;
    padding: 40px;
    text-align: center;
}
.sop-empty-icon { font-size: 3rem; }
.sop-builder-empty h2 { font-size: 1.1rem; color: var(--text); font-weight: 600; }
.sop-builder-empty p  { font-size: 0.88rem; }

/* ── Chat panel ────────────────────────────────────────────────────────── */
.sop-builder-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sop-bc-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.sop-bc-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.sop-bc-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sop-bc-version {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.sop-bc-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.sop-bc-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.sop-bc-btn:hover { background: var(--primary-pale); border-color: var(--primary); color: var(--primary); }
.sop-bc-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.sop-bc-btn-primary:hover { background: var(--primary-light); }

.sop-bc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg);
}

.sop-bc-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-white);
}

.sop-bc-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.87rem;
    font-family: inherit;
    background: Canvas;
    color: CanvasText;
    line-height: 1.4;
}
.sop-bc-input:focus { outline: none; border-color: var(--primary); }

.sop-bc-send-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 1rem;
    align-self: flex-end;
    flex-shrink: 0;
}
.sop-bc-send-btn:hover { background: var(--primary-light); }
.sop-bc-send-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Chat messages ─────────────────────────────────────────────────────── */
.sop-msg {
    display: flex;
    max-width: 85%;
}
.sop-msg-user      { align-self: flex-end; justify-content: flex-end; }
.sop-msg-assistant { align-self: flex-start; }

.sop-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.87rem;
    line-height: 1.55;
    word-break: break-word;
}
.sop-msg-user      .sop-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.sop-msg-assistant .sop-bubble { background: var(--bg-white); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sop-msg.streaming .sop-bubble { opacity: 0.7; }

.sop-typing { letter-spacing: 4px; color: var(--text-muted); }

/* ── Editor panel ──────────────────────────────────────────────────────── */
.sop-builder-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sop-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px;
    background: var(--bg);
}

/* ── Editor sections ───────────────────────────────────────────────────── */
.sop-section {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.sop-section-heading {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sop-field {
    margin-bottom: 10px;
}

.sop-field-label {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
    display: block;
}

.sop-field textarea,
.sop-field input[type="text"],
.sop-section textarea,
.sop-section input[type="text"] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 0.84rem;
    font-family: inherit;
    background: Canvas;
    color: CanvasText;
    resize: vertical;
    line-height: 1.4;
}
.sop-field textarea:focus,
.sop-field input[type="text"]:focus,
.sop-section textarea:focus,
.sop-section input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

/* ── Procedure steps ───────────────────────────────────────────────────── */
.sop-procedure-step {
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: Canvas;
}

.sop-step-ctq {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 5px 5px 0;
}

.sop-step-ctq-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #b45309;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.sop-step-ctq-rationale {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
    padding-left: 4px;
}

/* ── Editor table ──────────────────────────────────────────────────────── */
.sop-ed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.sop-ed-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
.sop-ed-table td {
    padding: 4px 4px;
    vertical-align: top;
}
.sop-ed-table input[type="text"] {
    width: 100%;
    resize: none;
}

/* ── Collaborators ─────────────────────────────────────────────────────── */
.sop-collab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.sop-collab-item:last-child { border-bottom: none; }
.sop-collab-list { margin-bottom: 8px; }

/* ── Context menu ──────────────────────────────────────────────────────── */
.sop-ctx-menu {
    position: fixed;
    z-index: 9999;
    background: Canvas;
    color: CanvasText;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 4px 0;
    min-width: 200px;
    font-size: 0.85rem;
    font-family: inherit;
}

.sop-ctx-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1.4;
}
.sop-ctx-item:hover { background: rgba(0,0,0,0.06); }

.sop-ctx-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 3px 0;
}

.sop-ctx-danger { color: #b91c1c; }
.sop-ctx-danger:hover { background: #fee2e2; color: #b91c1c; }

/* ── SOP Document Preview ────────────────────────────────────────────────── */

.sop-builder-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

.sop-doc-preview {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px;
    background: #e8e8e8;
}

.sop-doc-paper {
    max-width: 860px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 48px 56px 56px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.92rem;
    color: #1a1a1a;
    line-height: 1.6;
}

.sop-doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 2px solid #1a3a5c;
    padding-bottom: 16px;
    margin-bottom: 28px;
}

.sop-doc-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0;
    flex: 1;
    font-family: inherit;
}

.sop-doc-meta-box {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.78rem;
    border-collapse: collapse;
    min-width: 180px;
    flex-shrink: 0;
}
.sop-doc-meta-box td {
    padding: 2px 8px;
    border: 1px solid #ccc;
    background: #f5f7fa;
}
.sop-doc-meta-box td:first-child {
    font-weight: 600;
    color: #444;
    background: #eef1f5;
    white-space: nowrap;
}

.sop-doc-section {
    margin-bottom: 28px;
}

.sop-doc-section h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a3a5c;
    border-bottom: 1px solid #ccd5e0;
    padding-bottom: 4px;
    margin-bottom: 10px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.sop-doc-section p,
.sop-doc-section ul {
    margin: 0;
    padding-left: 0;
}

.sop-doc-section ul { padding-left: 20px; }

.sop-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.83rem;
}
.sop-doc-table th {
    background: #1a3a5c;
    color: #fff;
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
}
.sop-doc-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #dde3ea;
    vertical-align: top;
}
.sop-doc-table tr:nth-child(even) td { background: #f5f7fa; }

.sop-doc-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.sop-doc-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 3px solid #ccd5e0;
    background: #fafbfc;
    font-size: 0.85rem;
}

.sop-doc-step.sop-doc-ctq {
    border-left-color: #d97706;
    background: #fffbeb;
}

.sop-doc-step-num {
    font-weight: 700;
    color: #1a3a5c;
    font-size: 0.82rem;
}

.sop-doc-step-text {
    color: #222;
}

.sop-doc-ctq-badge {
    grid-column: 2;
    font-size: 0.76rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 3px;
    padding: 2px 6px;
    margin-top: 3px;
    display: inline-block;
}

/* ── SCR-001/002: Stage headings ─────────────────────────────────────────── */
.sop-stage-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary);
    margin: 18px 0 6px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--primary-pale, #eef3f9);
    font-family: 'Segoe UI', Arial, sans-serif;
}
.sop-stage-break {
    border: none;
    border-top: 2px solid #d1d5db;
    margin: 24px 0 0;
}

/* ── SCR-004/008: Procedure table ───────────────────────────────────────── */
.sop-proc-table { margin-bottom: 12px; }
.sop-proc-th-step { width: 60px;  }
.sop-proc-th-ctq  { width: 110px; text-align: center; }
.sop-proc-step-num {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.82rem;
    vertical-align: top;
    white-space: nowrap;
}
.sop-proc-step-text { vertical-align: top; }

/* SCR-008: Critical Step row — left border accent */
.sop-proc-ctq-row td {
    background: #fffbeb !important;
}
.sop-proc-ctq-row td:first-child {
    border-left: 4px solid #d97706;
}
.sop-proc-ctq-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 2px 7px;
}
.sop-proc-ctq-rationale {
    font-size: 0.76rem;
    color: #78350f;
    margin-top: 4px;
    font-style: italic;
}
.sop-proc-ctq-col  { text-align: center; vertical-align: top; padding-top: 8px; }
.sop-proc-no-ctq   { color: #9ca3af; font-size: 0.8rem; text-align: center; vertical-align: top; padding-top: 8px; }

/* SCR-003: WI validation warning badge */
.sop-warn-badge {
    color: #b45309;
    cursor: help;
    font-size: 0.85rem;
    margin-left: 4px;
}

/* SCR-006: Provisional date annotation */
.sop-provisional {
    color: #92400e;
    font-size: 0.8rem;
}

/* SCR-007: Revision history changes list */
.sop-rev-changes {
    margin: 4px 0 0;
    padding-left: 16px;
    font-size: 0.8rem;
    color: #555;
}

/* SCR-009: Related document type subheadings */
.sop-rdoc-type {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    margin: 14px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sop-doc-empty {
    text-align: center;
    padding: 60px 24px;
    color: #777;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
}


/* ── QMS Manager ─────────────────────────────────────────────────────────── */

.qms-wrap {
    display: flex;
    height: calc(100vh - 52px);
    overflow: hidden;
}

.qms-nav {
    width: 200px;
    min-width: 180px;
    flex-shrink: 0;
    background: var(--bg-white);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 12px 0 8px;
}

.qms-nav-header {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.qms-nav-btn {
    display: block;
    width: 100%;
    padding: 9px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    border-left: 3px solid transparent;
}
.qms-nav-btn:hover { background: var(--primary-pale); }
.qms-nav-btn.active { border-left-color: var(--primary); color: var(--primary); font-weight: 600; background: var(--primary-pale); }

.qms-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qms-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.qms-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-white);
}

.qms-tab-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.qms-tab-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.qms-type-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--primary-pale);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--primary);
}

/* ── QMS Document Lifecycle ── */

.qms-docs-columns {
    display: flex;
    gap: 0;
    height: 100%;
    min-height: 0;
}

.qms-docs-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    min-height: 0;
}
.qms-docs-col:last-child { border-right: none; }

.qms-docs-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--border);
    flex-shrink: 0;
}
.qms-stage-drafting  { border-bottom-color: #b45309; background: #fffbeb; color: #92400e; }
.qms-stage-reviewing { border-bottom-color: #1d4ed8; background: #eff6ff; color: #1e40af; }
.qms-stage-final     { border-bottom-color: #15803d; background: #f0fdf4; color: #166534; }

.qms-docs-col-count {
    background: rgba(0,0,0,0.1);
    color: inherit;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.75rem;
}

.qms-docs-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qms-docs-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 24px 0;
}

.qms-doc-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qms-doc-card-top { display: flex; flex-direction: column; gap: 2px; }

.qms-doc-card-title {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qms-doc-card-number {
    font-size: 0.73rem;
    color: var(--text-muted);
}

.qms-doc-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qms-doc-ver-badge {
    background: var(--primary-pale);
    color: var(--primary);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.72rem;
    font-weight: 600;
}

.qms-doc-card-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.qms-doc-btn {
    padding: 3px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
}
.qms-doc-btn:hover { background: var(--primary-pale); border-color: var(--primary); color: var(--primary); }
.qms-doc-btn-promote { border-color: #15803d; color: #15803d; }
.qms-doc-btn-promote:hover { background: #f0fdf4; }
.qms-doc-btn-delete { color: #dc2626; border-color: #fca5a5; }
.qms-doc-btn-delete:hover { background: #fef2f2; border-color: #dc2626; }

/* Dropzone */
.qms-doc-dropzone {
    border: 2px dashed var(--border);
    border-radius: 6px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: border-color 0.15s, background 0.15s;
    margin-top: 6px;
}
.qms-doc-dropzone:hover, .qms-doc-dropzone.dragover {
    border-color: var(--primary);
    background: var(--primary-pale);
    color: var(--primary);
}

/* Audit trail */
.qms-audit-event {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg);
}
.qms-audit-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.qms-audit-action { font-weight: 600; font-size: 0.85rem; }
.qms-audit-meta   { font-size: 0.75rem; color: var(--text-muted); }
.qms-audit-detail { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.qms-audit-hash   { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; font-family: monospace; }

/* Version history */
.qms-ver-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 6px;
    background: var(--bg);
}
.qms-ver-row.qms-ver-head { border-color: var(--primary); background: var(--primary-pale); }
.qms-ver-row-left  { display: flex; align-items: center; gap: 8px; }
.qms-ver-row-right { display: flex; align-items: center; gap: 8px; }
.qms-ver-num { font-weight: 700; font-size: 0.8rem; color: var(--primary); min-width: 26px; }
.qms-ver-note { font-size: 0.82rem; color: var(--text); }
.qms-ver-tc-badge {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.72rem;
    font-weight: 600;
}
.qms-ver-current-badge {
    background: var(--primary);
    color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Admin panel persona-model dropdown (T-046 / v3.12.4) ──
   Override the OS-native option styling so the open dropdown panel
   matches the closed select's font size. Without this, browsers fall
   back to a platform-default font that's visibly larger than 0.85rem
   and causes long model labels (e.g. "Google Gemini 2.5 Flash-Lite")
   to truncate inside the popup. */
.admin-persona-model-select { font-size: 0.85rem; font-family: inherit; }
.admin-persona-model-select option { font-size: 0.85rem; font-family: inherit; }

/* ── Admin panel tabs (T-060: file-tab style with two-row support + sticky) ── */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    /* v3.11.4: line softened from var(--primary) (#1a3a5c, dark navy) to
       #6b7280 (mid-grey) so the strip reads as a panel separator rather
       than a dominant rule competing with the active-tab's blue border. */
    border-bottom: 2px solid #6b7280;
    margin: 0 -24px 18px;
    /* v3.11.5: padding-bottom reverted to 0 (was 6px in v3.10.2). With 6 px
       padding-bottom, an active TOP-row tab's `margin-bottom: -8px`
       (needed to bridge to the relocated dark line) pulled it 8 px down
       INTO the bottom row's tab pills — visible row-collision in 2-row
       layouts. Reverting padding lets `margin-bottom: -2px` on the active
       tab bridge cleanly to the line for BOTH rows without overlapping
       row 2. The original v3.10.2 motivation (scrolled content visually
       touches the line) is parked in `project_later.md` 2026-05-10 for a
       proper sticky-strip design pass. */
    padding: 6px 24px 0;
    align-items: flex-end;
    /* v3.8.80: sticky so the strip stays visible when the tab body scrolls */
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    z-index: 5;
}
.admin-tab {
    flex: 0 0 auto;
    min-width: 0;
    text-align: center;
    padding: 7px 14px 8px;
    /* v3.8.85: 1.5px border in a slightly darker shade than --border so
       inactive tabs are clearly defined (Craig: "tabs need to have some
       sort of slightly harder line around them, although not as hard
       and prominent as the active tab"). Active tab uses var(--primary)
       which still wins the visual hierarchy. */
    border: 1.5px solid #b0b8c5;
    border-bottom: none;
    background: var(--bg, #f5f5f7);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    /* v3.11.3: NO negative margin on non-active tabs. The strip's dark
       border-bottom should appear IN FRONT of non-active tab pills,
       not behind. Only the active tab uses negative margin (below) to
       bridge into the panel. */
    margin-bottom: 0;
    position: relative;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.admin-tab:hover  {
    color: var(--primary);
    background: var(--primary-pale, #f0f0fb);
    border-color: var(--primary);
}
.admin-tab.active {
    color: var(--primary);
    background: var(--bg-white, #fff);
    border: 2px solid var(--primary);
    border-bottom: 2px solid var(--bg-white, #fff); /* covers the strip's border, creating the file-tab raise */
    font-weight: 700;
    z-index: 2;
    /* v3.11.5: -2px overlap (was -8px in v3.11.3 to bridge through the
       v3.10.2 padding-bottom; padding now reverted so -2px is the right
       value again). Active tab's white border-bottom lands on the strip's
       2 px dark line, "joining" to the panel below WITHOUT pulling the
       tab into the next flex-wrap row when the active tab is in row 1. */
    margin-bottom: -2px;
}
.admin-tab-danger { color: #c53030; }
.admin-tab-danger:hover { color: #9b2c2c; background: #fef2f2; }
.admin-tab-danger.active {
    color: #c53030; background: var(--surface, #fff);
    border-color: #c53030; border-bottom-color: var(--surface, #fff);
}

/* ── Audit log table ── */
/* v3.9.41 — Fixed-layout column widths so the 8-column table stays
   inside the modal regardless of content. Earlier `width: max-content`
   let event names like `data.sensitive_read` and long Target/Detail
   strings push the table wider than the container, which surfaced as
   a horizontal scroll bar after T-091 added the in-`<th>` filter row.
   Percentages adapt to whatever modal width is available; long content
   wraps on word boundaries inside its column. */
.audit-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.78rem; }
/* v3.12.18 — Event column widened from 13% → 16% to fit long event names like
   `billing.tokens.expert_review.inspector` without overflowing into Category.
   Other Details slimmed 19% → 16% to compensate. Event cell uses
   `overflow-wrap: anywhere` so dots in dotted names act as wrap points. */
.audit-table th:nth-child(1), .audit-table td:nth-child(1) { width: 11%; }   /* Time */
.audit-table th:nth-child(2), .audit-table td:nth-child(2) { width: 16%; overflow-wrap: anywhere; word-break: break-word; }   /* Event */
.audit-table th:nth-child(3), .audit-table td:nth-child(3) { width: 8%;  word-break: break-word; }   /* Category */
.audit-table th:nth-child(4), .audit-table td:nth-child(4) { width: 7%;  word-break: break-word; }   /* Severity */
.audit-table th:nth-child(5), .audit-table td:nth-child(5) { width: 11%; word-break: break-word; }   /* Actor */
.audit-table th:nth-child(6), .audit-table td:nth-child(6) { width: 24%; word-break: break-word; }   /* Target / Detail */
.audit-table th:nth-child(7), .audit-table td:nth-child(7) { width: 16%; word-break: break-word; }   /* Other Details */
.audit-table th:nth-child(8), .audit-table td:nth-child(8) { width: 7%;  word-break: break-word; }   /* Outcome */
/* T-074(17) v3.12.18 — header table sits OUTSIDE the body's scroll container
   so body rows physically cannot scroll into the header band. No sticky
   positioning, no opaque background workaround — clean structural separation.
   Per Craig: "Simply have the top of the scrolling list be below the header
   row, so it never scrolls that high." Backgrounds inherit from the
   surrounding panel so the original colour scheme reads correctly. */
.audit-table th {
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
/* Body table: bottom rule under each row, no extra column-header styling. */
.audit-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-subtle, #eee); vertical-align: top; }
.audit-table tr:hover td { background: var(--primary-pale); }
.audit-outcome-success { color: #276749; font-weight: 600; }
.audit-outcome-failure { color: #c53030; font-weight: 600; }
.audit-security-event { color: #b7620a; font-weight: 700; }
.audit-table tr.audit-security-row td { background: #fff8f0; }
.audit-table tr.audit-security-row:hover td { background: #feebd4; }

/* v3.7 audit-rebuild — severity pills */
.audit-sev-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
}
.audit-sev-info     { background: #e3f0fb; color: #1c6ec0; }
.audit-sev-warn     { background: #fff3cd; color: #946100; }
.audit-sev-security { background: #fde2d8; color: #b7400a; }
.audit-sev-critical { background: #fcd7d4; color: #a01818; font-weight: 700; }

/* Clipped audit cell with styled hover tooltip */
.audit-td-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: default;
}
.audit-td-clip:not([data-tip=''])::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
    background: #1a202c;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 420px;
    min-width: 120px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s 0.3s;
}
.audit-td-clip:not([data-tip='']):hover::after {
    opacity: 1;
}

/* T-039: row-level hover tooltip with multi-line summary, plus dblclick
   affordance hint. Uses the same dark-tooltip styling as .audit-td-clip
   so the visual is consistent. The cell-level tooltips still work — the
   row-level one appears on row hover with a longer delay so it doesn't
   fight cell tooltips when the user is hovering one specific cell. */
tr.audit-row-clickable {
    position: relative;
    cursor: default;
}
tr.audit-row-clickable[data-tip]:hover::after {
    content: attr(data-tip);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    z-index: 9998;
    background: #1a202c;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.55;
    padding: 10px 14px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 720px;
    min-width: 280px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s 0.6s;
}
tr.audit-row-clickable[data-tip]:hover::after {
    opacity: 1;
}
tr.audit-row-clickable:hover {
    background: var(--primary-pale, #f0f6ff);
}

.audit-detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle, #eee);
    font-size: 0.85rem;
}
.audit-detail-row:last-child { border-bottom: none; }
.audit-detail-label {
    color: var(--text-muted, #6b7280);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.audit-detail-value {
    word-break: break-word;
}
.audit-detail-code {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}
.modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    opacity: 0.85;
}
.modal-close:hover { opacity: 1; }

/* ── Pending users table ── */
.pending-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pending-table th { background: var(--primary-pale); padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 600; }
.pending-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-subtle, #eee); vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════════════════
   QMS Access Panel
   ════════════════════════════════════════════════════════════════════════════ */

/* Layout */
.qms-access-wrap {
    display: flex;
    height: calc(100vh - 52px);
    background: var(--bg, #f8f9fa);
    overflow: hidden;
    position: relative;
}

/* Sidebar */
.qms-access-sidebar {
    width: 200px;
    min-width: 200px;
    background: var(--primary, #1a365d);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
    overflow-y: auto;
}
.qms-access-logo {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 8px;
}
.qms-access-nav-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    padding: 6px 16px 2px;
}
.qms-access-nav {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.qms-access-nav:hover  { background: rgba(255,255,255,0.1); color: #fff; }
.qms-access-nav.active { background: rgba(255,255,255,0.18); color: #fff; font-weight: 600; }

/* Main area */
.qms-access-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Toolbar */
.qms-access-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid var(--border, #ddd);
    gap: 10px;
    flex-shrink: 0;
}
.qms-access-toolbar-left  { display: flex; gap: 8px; align-items: center; flex: 1; }
.qms-access-toolbar-right { display: flex; gap: 8px; align-items: center; }
.qma-search-input {
    padding: 6px 10px;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-size: 0.85rem;
    width: 240px;
}
.qma-select {
    padding: 6px 8px;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-size: 0.82rem;
    background: #fff;
}

/* Buttons */
.qma-btn-primary {
    padding: 6px 14px;
    background: var(--primary, #1a365d);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.qma-btn-primary:hover   { filter: brightness(1.15); }
.qma-btn-secondary {
    padding: 5px 12px;
    background: #fff;
    color: var(--primary, #1a365d);
    border: 1px solid var(--primary, #1a365d);
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
}
.qma-btn-secondary:hover { background: var(--primary-pale, #ebf4ff); }
.qma-btn-danger {
    padding: 6px 14px;
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.qma-btn-danger:hover { filter: brightness(1.1); }

/* Document list */
.qma-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}
.qma-empty {
    color: var(--text-muted, #718096);
    font-size: 0.9rem;
    padding: 40px 0;
    text-align: center;
}
.qma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.qma-table thead th {
    background: var(--primary-pale, #ebf4ff);
    padding: 8px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 0.78rem;
    border-bottom: 2px solid var(--border, #ddd);
}
.qma-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.qma-th-sortable:hover { background: var(--primary-light, #d8ecff); }
.qma-sort-arrow { font-size: 0.7rem; opacity: 0.6; }
.qma-table tbody tr { border-bottom: 1px solid var(--border-subtle, #f0f0f0); }
.qma-table tbody tr:hover td { background: var(--primary-pale, #f0f7ff); cursor: pointer; }
.qma-table td { padding: 8px 10px; vertical-align: middle; }
.qma-cell-number { font-family: monospace; font-size: 0.8rem; color: var(--text-muted, #555); white-space: nowrap; }
.qma-cell-title  { font-weight: 500; }
.qma-cell-ver    { font-family: monospace; font-size: 0.78rem; white-space: nowrap; }
.qma-cell-owner  { font-size: 0.8rem; color: var(--text-muted, #555); }
/* v4.0.22 — Edit + Metadata buttons share the same row-button style
 * (was: only .qma-row-edit had CSS, .qma-row-meta rendered as a
 * default browser button → visually mismatched per Craig 2026-05-30). */
.qma-row-edit, .qma-row-meta {
    padding: 3px 10px;
    font-size: 0.75rem;
    background: #fff;
    border: 1px solid var(--border, #ccc);
    border-radius: 3px;
    cursor: pointer;
}
.qma-row-edit:hover, .qma-row-meta:hover { background: var(--primary-pale, #ebf4ff); }
@media (prefers-color-scheme: dark) {
    .qma-row-edit, .qma-row-meta { background: var(--surface); color: var(--text-primary); }
}

/* Level badges */
.qma-level-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 0.73rem;
    font-weight: 600;
}
.qma-level-1 { background: #fef3c7; color: #92400e; }
.qma-level-2 { background: #dbeafe; color: #1e40af; }
.qma-level-3 { background: #d1fae5; color: #065f46; }
.qma-level-4 { background: #ede9fe; color: #5b21b6; }
.qma-level-5 { background: #fce7f3; color: #9d174d; }

/* Status badges */
.qma-status-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}
.qma-status-draft    { background: #f3f4f6; color: #374151; }
.qma-status-review   { background: #fef3c7; color: #92400e; }
.qma-status-live     { background: #d1fae5; color: #065f46; }
.qma-status-warn     { background: #fee2e2; color: #991b1b; }
.qma-status-inactive { background: #e5e7eb; color: #6b7280; }

/* Detail drawer */
.qma-detail-drawer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 520px;
    background: #fff;
    border-left: 2px solid var(--primary, #1a365d);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 18px rgba(0,0,0,0.1);
    z-index: 10;
}
.qma-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--primary, #1a365d);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.qma-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}
.qma-close-btn:hover { color: #fff; }
.qma-detail-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.qma-detail-tabs {
    display: flex;
    border-bottom: 2px solid var(--border, #e2e8f0);
    flex-shrink: 0;
    padding: 0 16px;
}
.qma-detail-tab {
    padding: 8px 14px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted, #718096);
    cursor: pointer;
    margin-bottom: -2px;
}
.qma-detail-tab:hover  { color: var(--primary, #1a365d); }
.qma-detail-tab.active { color: var(--primary, #1a365d); border-bottom-color: var(--primary, #1a365d); font-weight: 700; }
.qma-dtab-panel {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Form */
.qma-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}
.qma-form-group { display: flex; flex-direction: column; gap: 3px; }
.qma-form-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted, #555); }
.qma-span2 { grid-column: span 2; }
.qma-input {
    padding: 6px 8px;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-size: 0.83rem;
    font-family: inherit;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.qma-input:focus { outline: 2px solid var(--primary, #1a365d); border-color: transparent; }
.qma-ta { resize: vertical; min-height: 56px; }
.qma-req { color: #e53e3e; }
.qma-detail-actions {
    display: flex;
    gap: 8px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border, #eee);
    margin-top: 14px;
}
/* Uniform action buttons (Craig 2026-05-22): same padding + a shared min-width
   so the row reads as one consistent set regardless of label length
   (Metadata / Edit / Save / Delete), instead of each button hugging its text. */
.qma-detail-actions button {
    min-width: 104px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}
.qma-detail-error {
    color: #c53030;
    font-size: 0.82rem;
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff5f5;
    border-radius: 4px;
    border: 1px solid #fc8181;
}

/* Relationships */
.qma-rel-add {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border, #eee);
    margin-bottom: 12px;
}
.qma-rel-list, .qma-rev-list { display: flex; flex-direction: column; gap: 6px; }
.qma-rel-empty, .qma-rev-empty {
    color: var(--text-muted, #718096);
    font-size: 0.82rem;
    padding: 12px 0;
}
.qma-rel-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--primary-pale, #f0f7ff);
    border-radius: 5px;
    font-size: 0.82rem;
    gap: 8px;
}
.qma-rel-info     { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.qma-rel-direction { font-weight: 700; color: var(--primary, #1a365d); }
.qma-rel-type      { font-weight: 600; background: #dbeafe; color: #1e40af; padding: 1px 5px; border-radius: 3px; font-size: 0.74rem; }
.qma-rel-target    { color: #2d3748; }
.qma-rel-rationale { color: var(--text-muted, #718096); font-style: italic; }
.qma-rel-delete {
    background: none;
    border: none;
    color: var(--text-muted, #999);
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.qma-rel-delete:hover { color: #e53e3e; }

/* Reviews */
.qma-rev-item {
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 5px;
    border-left: 3px solid var(--primary, #1a365d);
    font-size: 0.82rem;
    margin-bottom: 6px;
}
.qma-rev-header   { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.qma-rev-trigger  { font-weight: 600; color: var(--primary, #1a365d); }
.qma-rev-status   { padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; background: #e5e7eb; color: #374151; }
.qma-rev-date     { color: var(--text-muted, #718096); margin-left: auto; font-size: 0.78rem; }
.qma-rev-notes    { color: var(--text-muted, #555); margin-bottom: 4px; }
.qma-rev-conclusion { font-size: 0.8rem; }
.qma-rev-actions  { display: flex; gap: 8px; margin-top: 6px; }

/* Tool panels */
.qma-tool-panel {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}
.qma-tool-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary, #1a365d);
    margin-bottom: 16px;
}

/* Integrity */
.qma-int-ok      { color: #276749; font-weight: 600; font-size: 0.9rem; padding: 12px; background: #f0fff4; border-radius: 5px; }
.qma-int-summary { font-size: 0.85rem; color: var(--text-muted, #555); margin-bottom: 12px; }
.qma-int-issue {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.83rem;
    margin-bottom: 6px;
}
.qma-int-error   { background: #fff5f5; border-left: 4px solid #e53e3e; }
.qma-int-warning { background: #fffbeb; border-left: 4px solid #d69e2e; }
.qma-int-badge   { font-weight: 700; font-size: 0.72rem; min-width: 52px; }
.qma-int-code    { font-family: monospace; color: var(--text-muted, #666); font-size: 0.78rem; }

/* Import drop zone */
.qma-import-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.qma-import-banner {
    padding: 8px 16px;
    background: #ebf8ff;
    border-bottom: 1px solid #bee3f8;
    font-size: 0.82rem;
    color: #2b6cb0;
}
.qma-import-banner.hidden { display: none; }
.qma-import-confidence {
    margin: 8px 16px 0;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #f6e05e;
    border-radius: 4px;
    font-size: 0.81rem;
    color: #744210;
}
.qma-import-confidence.hidden { display: none; }
.qma-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(26, 54, 93, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    pointer-events: none;
}
.qma-drop-overlay.hidden { display: none; }
.qma-drop-inner {
    text-align: center;
    color: #fff;
}
.qma-drop-icon  { font-size: 3rem; margin-bottom: 12px; }
.qma-drop-label { font-size: 1.4rem; font-weight: 700; }
.qma-drop-sub   { font-size: 0.85rem; opacity: 0.75; margin-top: 6px; }

/* Graph right-click context menu */
.qma-ctx-menu {
    position: fixed;
    background: #fff;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 9999;
    min-width: 180px;
    overflow: hidden;
}
.qma-ctx-menu.hidden { display: none; }
.qma-ctx-item {
    padding: 9px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--fg, #333);
    transition: background 0.1s;
}
.qma-ctx-item:hover { background: var(--primary-pale, #eef3f9); color: var(--primary, #1a3a5c); }

/* B-009 / T-126 — version-switcher menu uses <button> items so they're
   keyboard-focusable. Normalise button chrome to match the legacy div items. */
button.qma-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.85rem;
}
.qma-ctx-item-warn { color: var(--danger, #b91c1c); }
.qma-ctx-item-warn:hover { background: #fef2f2; color: var(--danger, #b91c1c); }
.qma-ctx-sep { height: 1px; background: var(--border, #e5e7eb); margin: 4px 0; }

/* B-009 / T-126 — Draft + working-version chips on the QMS library row. */
.qma-draft-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #fef3c7;
    color: #92400e;
    vertical-align: middle;
}
.qma-wv-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.66rem;
    font-weight: 600;
    background: var(--border, #e5e7eb);
    color: #374151;
    vertical-align: middle;
}
@media (prefers-color-scheme: dark) {
    .qma-ctx-menu { background: var(--surface, #1f2937); border-color: var(--border, #374151); }
    button.qma-ctx-item { color: var(--fg, #e5e7eb); }
    .qma-ctx-item-warn:hover { background: #3f1d1d; }
    .qma-draft-chip { background: #78350f; color: #fde68a; }
    .qma-wv-chip { background: #374151; color: #d1d5db; }
}

/* Document taxonomy popup (from graph right-click) */
.qma-doc-tax-popup {
    position: fixed;
    top: 80px;
    right: 20px;
    background: #fff;
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    z-index: 9998;
    width: 360px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}
.qma-doc-tax-popup.hidden { display: none; }
.qma-doc-tax-popup-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary, #1a3a5c);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}
.qma-doc-tax-popup-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}
.qma-doc-tax-popup-section { margin-bottom: 14px; }
.qma-doc-tax-popup-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary, #1a3a5c);
    margin-bottom: 6px;
}
.qma-doc-tax-popup-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.qma-doc-tax-popup-chip {
    background: var(--primary-pale, #eef3f9);
    border: 1px solid #b8cfe8;
    color: var(--primary, #1a3a5c);
    border-radius: 10px;
    padding: 2px 9px;
    font-size: 0.78rem;
}
.qma-doc-tax-popup-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }

/* Graph view */
.qma-graph-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px;
}
.qma-graph-panel.hidden { display: none; }
.qma-graph-controls { display: flex; gap: 8px; margin-left: auto; }
.qma-graph-body {
    flex: 1;
    display: flex;
    gap: 12px;
    overflow: hidden;
    min-height: 0;
}
#qma-graph-canvas {
    flex: 1;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: #fafafa;
    min-height: 400px;
}
.qma-graph-legend {
    width: 160px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    font-size: 0.78rem;
}
.qma-legend-section {}
.qma-legend-title {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-muted, #666);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
.qma-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--text, #333);
}
.qma-legend-node {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}
.qma-legend-edge {
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Taxonomy — chip-based UI */
.qma-tax-rebuild-btn      { font-size: 0.78rem; margin-left: auto; }
.qma-tax-section          { margin-bottom: 20px; }
.qma-tax-section-hdr      { font-size: 0.78rem; font-weight: 700; color: var(--primary, #1a365d);
                             text-transform: uppercase; letter-spacing: 0.04em;
                             margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.qma-tax-auto-badge       { font-size: 0.68rem; font-weight: 500; background: #e8f4e8;
                             color: #276749; border-radius: 3px; padding: 1px 6px;
                             text-transform: none; letter-spacing: 0; }
.qma-tax-chips-row        { display: flex; flex-wrap: wrap; gap: 6px; }
.qma-tax-empty-hint       { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.qma-tax-chip2            { display: inline-flex; align-items: center; gap: 4px;
                             background: var(--primary-pale, #eef3f9);
                             border: 1px solid #b8cfe8;
                             color: var(--primary, #1a3a5c);
                             border-radius: 14px; padding: 3px 10px 3px 12px;
                             font-size: 0.82rem; cursor: pointer;
                             transition: background 0.12s, border-color 0.12s; }
.qma-tax-chip2:hover      { background: #ddeaf8; border-color: var(--primary, #1a3a5c); }
.qma-tax-chip2.active     { background: var(--primary, #1a3a5c); color: #fff; }
.qma-tax-chip2.active .qma-tax-chip-x { color: rgba(255,255,255,0.7); }
.qma-tax-count            { background: var(--primary, #1a3a5c); color: #fff;
                             border-radius: 10px; font-size: 0.68rem;
                             padding: 0 5px; min-width: 16px; text-align: center; }
.qma-tax-chip2:hover .qma-tax-count  { background: #fff; color: var(--primary, #1a3a5c); }
.qma-tax-chip2.active .qma-tax-count { background: rgba(255,255,255,0.3); color: #fff; }
.qma-tax-chip-x           { background: none; border: none; cursor: pointer; padding: 0 1px;
                             font-size: 0.75rem; color: var(--text-muted); line-height: 1; }
.qma-tax-chip-x:hover     { color: #c53030; }
.qma-tax-add-row          { display: flex; gap: 6px; margin-top: 16px; align-items: center; }
.qma-tax-add-select       { flex: 0 0 auto; width: 140px; font-size: 0.82rem; }
.qma-tax-add-input        { flex: 1; font-size: 0.82rem; }
.qma-tax-impact-panel     { margin-top: 20px; border-top: 1px solid var(--border);
                             padding-top: 14px; }
.qma-tax-impact-hdr       { font-size: 0.88rem; font-weight: 600; margin-bottom: 10px;
                             color: var(--primary, #1a3a5c); }
.qma-tax-no-impact        { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.qma-tax-impact-doc       { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
                             border-radius: 4px; cursor: pointer; font-size: 0.84rem; }
.qma-tax-impact-doc:hover { background: var(--surface2, #f7f8fa); }
.qma-tax-impact-num       { font-weight: 600; color: var(--text-muted); min-width: 80px; }
.qma-tax-impact-title     { flex: 1; }

/* Legacy textarea styles kept for any other users */
.qma-taxonomy-grid { display: none; }
.qma-tax-label { font-size: 0.78rem; font-weight: 700; color: var(--primary, #1a365d); margin-bottom: 4px; }
.qma-tax-ta    { display: none; }

/* ── QMS visible drop pad ─────────────────────────────────────────────────── */
.qma-drop-pad {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px 0;
    padding: 10px 18px;
    border: 2px dashed var(--border, #cbd5e0);
    border-radius: 8px;
    background: var(--surface2, #f7f8fa);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.qma-drop-pad:hover,
.qma-drop-pad.over {
    border-color: var(--accent, #2b6cb0);
    background: #ebf4ff;
}
.qma-drop-pad-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}
.qma-drop-pad-text {
    font-size: 0.85rem;
    color: var(--fg, #2d3748);
    flex: 1;
}
.qma-drop-pad-hint {
    font-size: 0.72rem;
    color: var(--muted, #718096);
    white-space: nowrap;
}

/* ── QMS Library picker button (below SOP drop zone) ──────────────────────── */
.qms-lib-pick-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    background: var(--surface2, #f0f4f8);
    border: 1px dashed var(--border, #ccc);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--fg, #333);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.qms-lib-pick-btn:hover {
    background: var(--hover-bg, #e2e8f0);
    border-color: var(--accent, #2b6cb0);
    color: var(--accent, #2b6cb0);
}

/* ── QMS Library picker modal ─────────────────────────────────────────────── */
.qms-lib-picker-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
}
.qms-lib-picker-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
}
.qms-lib-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    cursor: pointer;
    transition: background 0.12s;
}
.qms-lib-picker-row:last-child { border-bottom: none; }
.qms-lib-picker-row:hover { background: var(--hover-bg, #f0f4f8); }
.qms-lib-picker-num {
    font-size: 0.78rem;
    color: var(--muted, #718096);
    min-width: 80px;
    white-space: nowrap;
}
.qms-lib-picker-info { flex: 1; min-width: 0; }
.qms-lib-picker-title {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qms-lib-picker-meta {
    font-size: 0.76rem;
    color: var(--muted, #718096);
    margin-top: 2px;
}
.qms-lib-picker-row--no-file {
    cursor: default;
    opacity: 0.5;
}
.qms-lib-picker-row--no-file:hover { background: transparent; }
.qms-lib-picker-no-file {
    font-size: 0.72rem;
    color: var(--muted, #718096);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.qms-lib-picker-empty {
    padding: 24px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted, #718096);
}

/* ── Taxonomy filter panel (sidebar) ─────────────────────────────────────── */
.qma-tax-filter-panel {
    padding: 0 4px;
}
.qma-tax-group {
    margin-bottom: 10px;
}
.qma-tax-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #718096);
    padding: 0 4px;
    margin-bottom: 4px;
}
.qma-tax-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 4px;
}
.qma-tax-chip {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--border, #ccc);
    background: var(--surface2, #f7f8fa);
    color: var(--fg, #333);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qma-tax-chip:hover {
    background: var(--hover-bg, #e2e8f0);
    border-color: var(--accent, #2b6cb0);
    color: var(--accent, #2b6cb0);
}
.qma-tax-chip.active {
    background: var(--accent, #2b6cb0);
    border-color: var(--accent, #2b6cb0);
    color: #fff;
}
.qma-tax-clear {
    font-size: 0.75rem !important;
    color: var(--danger, #c53030) !important;
    border-color: var(--danger, #c53030) !important;
}
.qma-tax-clear:hover {
    background: #fff5f5 !important;
}

/* ── QMS Chat panel ─────────────────────────────────────────────────────── */
.qma-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}
.qma-chat-intro {
    font-size: 0.85rem;
    color: var(--muted, #718096);
    text-align: center;
    padding: 24px 16px;
    line-height: 1.6;
}
.qma-chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.qma-chat-user {
    align-self: flex-end;
    background: var(--accent, #2b6cb0);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.qma-chat-assistant {
    align-self: flex-start;
    background: var(--surface2, #f0f4f8);
    color: var(--fg, #1a202c);
    border-bottom-left-radius: 3px;
}
.qma-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
}
.qma-chat-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
}
#qma-chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Document mode indicator ─────────────────────────────────────────────── */
.qma-mode-indicator {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 6px;
}
.qma-mode-read {
    background: #ebf8ff;
    color: #2b6cb0;
    border: 1px solid #bee3f8;
}
.qma-mode-edit {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #c6f6d5;
}

/* ── Templates panel ──────────────────────────────────────────────────────── */
.qma-tmpl-group         { margin-bottom: 24px; }
.qma-tmpl-group-hdr     { font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
                           letter-spacing: 0.05em; color: var(--text-muted); padding: 4px 0 8px;
                           border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.qma-tmpl-row           { background: var(--card-bg, #fff); border: 1px solid var(--border);
                           border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; }
.qma-tmpl-row-top       { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qma-tmpl-name          { font-weight: 600; font-size: 0.92rem; flex: 1; }
.qma-tmpl-actions       { display: flex; gap: 4px; }
.qma-tmpl-desc          { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.qma-tmpl-sections      { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.qma-tmpl-sec           { background: var(--primary-light, #e8f0f9); color: var(--primary, #1a3a5c);
                           border-radius: 3px; padding: 2px 7px; font-size: 0.75rem; }
.qma-tmpl-no-secs       { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.qma-tmpl-meta          { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.qma-sections-input     { font-family: monospace; font-size: 0.82rem; }
.qma-current-file       { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.qma-file-input         { font-size: 0.82rem; }
.qma-btn-icon           { background: none; border: 1px solid var(--border); border-radius: 4px;
                           padding: 3px 7px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted);
                           transition: background 0.15s; }
.qma-btn-icon:hover     { background: var(--primary-pale, #ebf4ff); color: var(--primary, #1a3a5c); }
.qma-btn-icon-danger    { color: #c53030; }
.qma-btn-icon-danger:hover { background: #fff5f5; border-color: #fc8181; }
.qma-panel-intro        { font-size: 0.84rem; color: var(--text-muted); margin: -4px 0 18px; line-height: 1.5; }

/* ── QMA Modal ──────────────────────────────────────────────────────────────── */
.qma-modal-overlay      { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
                           display: flex; align-items: center; justify-content: center; z-index: 1100; }
.qma-modal              { background: Canvas; border-radius: 8px; width: 480px; max-width: 95vw;
                           max-height: 88vh; display: flex; flex-direction: column;
                           box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.qma-modal-hdr          { display: flex; align-items: center; justify-content: space-between;
                           padding: 14px 18px; border-bottom: 1px solid var(--border);
                           background: var(--primary, #1a3a5c); color: #fff; border-radius: 8px 8px 0 0; }
.qma-modal-title        { font-weight: 600; font-size: 0.95rem; }
.qma-modal-close        { background: none; border: none; color: #fff; font-size: 1.1rem;
                           cursor: pointer; padding: 2px 6px; }
.qma-modal-body         { padding: 18px; overflow-y: auto; flex: 1;
                           display: flex; flex-direction: column; gap: 10px; }
.qma-modal-footer       { display: flex; justify-content: flex-end; gap: 8px;
                           padding: 12px 18px; border-top: 1px solid var(--border); }
.qma-label              { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.qma-hint               { font-weight: 400; color: var(--text-muted); }
.req                    { color: #c53030; }

/* ── Auto-resolve (batch debate) ─────────────────────────────────────────── */

.run-all-debates-btn {
    background: none;
    border: 1px solid var(--primary-light);
    border-radius: 4px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    padding: 3px 7px;
    white-space: nowrap;
    margin-right: 4px;
    flex-shrink: 0;
}
.run-all-debates-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* T-134 Slice B — active state for the "Hide resolved" toggle. */
.run-all-debates-btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Debate outcome badge on finding cards */
.debate-outcome-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.debate-badge-consensus { background: #d4edda; color: #155724; }
.debate-badge-impasse   { background: #fff3cd; color: #856404; }

/* Processing-error badge on finding cards */
.proc-error-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    cursor: help;
    white-space: nowrap;
}

/* Processing errors section in expert review left pane */
.er-proc-errors {
    margin: 8px 12px;
    border: 1px solid #ffc107;
    border-radius: 6px;
    background: #fffdf0;
    font-size: 0.78rem;
    overflow: hidden;
}
.er-proc-errors-hdr {
    font-weight: 700;
    padding: 5px 10px;
    background: #fff3cd;
    color: #856404;
    border-bottom: 1px solid #ffc107;
}
.er-proc-error-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    align-items: baseline;
    padding: 4px 10px;
    border-bottom: 1px solid #ffeaa0;
}
.er-proc-error-row:last-child { border-bottom: none; }
.er-proc-error-src {
    font-weight: 600;
    color: #856404;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.72rem;
}
.er-proc-error-msg { color: #5a4000; }
.er-proc-error-ts  { color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }

/* ── Popout panel (per-section expand button) ──────────────────────────────── */
.er-popout-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-muted);
    padding: 0 2px;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
    margin-left: auto;
    flex-shrink: 0;
}
.er-popout-btn:hover { opacity: 1; color: var(--primary); }
.er-popout-panel {
    position: fixed;
    top: 80px;
    right: 50px;
    width: 440px;
    max-height: 72vh;
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    z-index: 9500;
    overflow: hidden;
}
.er-popout-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}
.er-popout-title {
    font-size: 0.82rem;
    font-weight: 700;
    flex: 1;
}
.er-popout-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-muted);
    padding: 0 3px;
    transition: color 0.15s;
}
.er-popout-close:hover { color: #e53e3e; }
.er-popout-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    font-size: 0.87rem;
}

/* ── Batch debate floating progress panel ──────────────────────────────────── */
.bd-float-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bd-float-panel.hidden { display: none; }

.bd-float-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.bd-float-title   { font-weight: 600; font-size: 0.85rem; flex-shrink: 0; }
.bd-float-summary { flex: 1; font-size: 0.78rem; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-float-chevron { background: none; border: none; color: #fff; font-size: 0.9rem; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.bd-float-close   { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; padding: 0 2px; line-height: 1; opacity: 0.75; flex-shrink: 0; }
.bd-float-close:hover { opacity: 1; }

.bd-float-bar-wrap {
    height: 4px;
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.bd-float-bar {
    height: 100%;
    width: 0%;
    background: #fff;
    transition: width 0.3s;
    opacity: 0.7;
}

.bd-float-list-wrap {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.bd-float-list-wrap.bd-collapsed { max-height: 0; }

.bd-float-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
}
.bd-float-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Batch debate confirm — findings table */
.bd-findings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.bd-findings-table thead th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bd-findings-table tbody tr {
    border-bottom: 1px solid var(--border-subtle, #eee);
}
.bd-findings-table tbody tr:last-child { border-bottom: none; }
.bd-findings-table td { padding: 5px 8px; vertical-align: middle; }
.bd-row-skip td { opacity: 0.6; }
.bd-cell-ref {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bd-cell-desc {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

/* Batch progress rows */
.bd-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 0.80rem;
    line-height: 1.4;
}
.bd-row:last-child { border-bottom: none; }
.bd-row-icon    { flex-shrink: 0; width: 18px; text-align: center; font-size: 0.82rem; padding-top: 1px; }
.bd-row-quote   { flex: 1; color: var(--text); word-break: break-word; }
.bd-row-outcome { flex-shrink: 0; font-size: 0.70rem; font-weight: 600; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }

.bd-status-pending   { color: var(--text-muted); }
.bd-status-debating  { color: var(--primary); }
.bd-status-consensus { color: #155724; }
.bd-status-impasse   { color: #856404; }
.bd-status-error     { color: #c0392b; }

.bd-outcome-consensus { background: #d4edda; color: #155724; }
.bd-outcome-impasse   { background: #fff3cd; color: #856404; }

/* ── Popup / embed integration ── */

/* Return button — sits in the header, visible only in popup mode */
.popup-return-btn {
    margin-left: auto;
    margin-right: 8px;
    padding: 6px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}
.popup-return-btn:hover { background: var(--primary-dark, #1a6ab5); }
.popup-return-btn:disabled { opacity: 0.6; cursor: default; }

/* Pulse when analysis completes to draw attention */
.popup-return-btn.popup-return-ready {
    animation: popup-btn-pulse 1.2s ease-in-out 3;
}
@keyframes popup-btn-pulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 30, 110, 190), 0.35); }
}

/* Close button — dismisses the popup with optional send-results prompt */
.popup-close-btn {
    margin-left: 4px;
    margin-right: 0;
    padding: 5px 10px;
    background: transparent;
    color: var(--text-muted, #6b7a8a);
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.popup-close-btn:hover { background: #fdecea; color: #c0392b; border-color: #c0392b; }

/* Popup mode: hide everything not needed for pure document analysis */
body.popup-mode #org-context-wrap       { display: none; }  /* admin org picker */
body.popup-mode .options-btn            { display: none; }  /* settings cog */

/* Hamburger menu in popup mode: keep only View ▸ and Brevity */
body.popup-mode .app-menu-item               { display: none !important; }
body.popup-mode .app-menu-sep                { display: none !important; }
/* Restore the two kept items */
body.popup-mode .app-menu-item.popup-menu-keep              { display: block !important; }
body.popup-mode .app-menu-item.app-menu-setting.popup-menu-keep { display: flex  !important; }
/* Restore submenu items inside the kept View ▸ parent */
body.popup-mode .popup-menu-keep .app-menu-item             { display: block !important; }

/* Hide report-download buttons in popup mode — results are sent via postMessage */
body.popup-mode #download-btn       { display: none !important; }
body.popup-mode #audit-report-split { display: none !important; }
body.popup-mode #er-report-btn      { display: none !important; }

/* Hide upload sections in popup mode — file arrives via postMessage */
body.popup-mode #sop-section          { display: none !important; }
body.popup-mode #ich-section          { display: none !important; }
body.popup-mode #other-guidance-section { display: none !important; }

/* T-085 Phase 2 — Auto-saved draft rows in the Browse Saved Analyses
   dialog. Distinguished from server-side saved analyses with an amber
   accent stripe + section label so the user knows this is a transient
   client-side snapshot. */
.saved-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 8px 4px 6px;
}
.saved-row-draft {
    border-left: 3px solid #f59e0b;        /* amber-500 — distinguishable from green saves */
    background: #fffbeb;                   /* amber-50 */
}
.saved-row-draft .saved-row-name {
    color: #92400e;                        /* amber-800 */
}

/* T-074(8) — Gate work area when not authenticated. Shoulder-surfing + residual-data
   defence. Regulatory anchors: NIST SP 800-53 AC-12 (session termination), NIST SP
   800-63B §4.4 (no residual session-bound data), 21 CFR §11.10(d) (limit access to
   authorized individuals), EU GMP Annex 11 §12 (security). Pairs with doLogout()
   active zeroing of in-memory + DOM state.
   T-024 W2.4 follow-up (Craig 2026-05-08): the original three-selector rule
   missed the floating containers (chat-float, sop-builder-wrap, qms-access-wrap,
   status-float) which sit at body level alongside #app-wrap. When the work area
   was hidden but a chat panel or status pill carried residual prior-session
   content, the defence was incomplete. Switched to an exclusion rule —
   hide every direct body child EXCEPT the header (brand) and the login-modal
   (the foreground UI). Defence in depth with the original 3-selector rule
   retained below. */
body.no-auth > *:not(header):not(#login-modal) { display: none !important; }
body.no-auth aside.sidebar,
body.no-auth main#main,
body.no-auth aside.findings-panel { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   T-118 C8.2 — TipTap rich-text editor (Draft editing surface).

   Scoped local variables so the editor honours the user's OS colour-scheme
   preference WITHOUT forcing the rest of the (currently light) app into dark
   mode. Light defaults inherit the app's existing palette vars; the
   prefers-color-scheme: dark block below remaps ONLY these editor-local vars.
   No hardcoded light-only or dark-only palette. NO finding-highlight
   decorations here — that is C8.3.
   ───────────────────────────────────────────────────────────────────────── */
.rc-tiptap-wrap {
    --rc-ed-bg:       var(--bg-white, #ffffff);
    --rc-ed-text:     var(--text, #2d3748);
    --rc-ed-muted:    var(--text-muted, #718096);
    --rc-ed-border:   var(--border, #e2e8f0);
    --rc-ed-toolbar:  var(--bg, #f0f2f5);
    --rc-ed-accent:   var(--primary, #1a3a5c);
    --rc-ed-accent-pale: var(--primary-pale, #eef3f9);

    display: flex;
    flex-direction: column;
    border: 1px solid var(--rc-ed-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--rc-ed-bg);
    color: var(--rc-ed-text);
    /* Fill the analysis pane width like the document render (was capped at
       900px + centred, which made the editor narrower than the doc). */
    max-width: none;
    margin: 0;
    /* Bound the editor to the viewport so the document scrolls INSIDE the
       .rc-tiptap-editor region (below) rather than scrolling the whole page —
       this structurally keeps the toolbar pinned at the top of the editor
       instead of sticking-then-scrolling-away with the page. */
    max-height: calc(100vh - 200px);
    min-height: 360px;
}

.rc-tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--rc-ed-toolbar);
    border-bottom: 1px solid var(--rc-ed-border);
    /* B-016 (Craig 2026-05-23): when the window narrows, the toolbar wraps to
       two rows. The redundant `position: sticky; top: 0` let the now-taller
       toolbar ride UP under the non-participating "Analysed" coverage bar that
       sits above the editor, and the wrap's `overflow: hidden` then clipped its
       top row (B/I/U, colour, font, H1-H3, lists). The bounded-flex wrap
       (.rc-tiptap-wrap max-height + the editor's own overflow:auto) ALREADY pins
       the toolbar at the top of the editor, so sticky was never needed. Make it
       a normal, non-shrinking flex child so BOTH rows always render fully below
       the coverage bar. Structural fix per no-opaque-sticky-workarounds — no
       z-index / opacity layering. */
    flex-shrink: 0;
}

.rc-tiptap-toolbar-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--rc-ed-border);
}

.rc-tiptap-btn {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--rc-ed-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.rc-tiptap-btn:hover {
    background: var(--rc-ed-accent-pale);
    border-color: var(--rc-ed-border);
}

.rc-tiptap-btn.is-active {
    background: var(--rc-ed-accent);
    color: #ffffff;
    border-color: var(--rc-ed-accent);
}

/* T-131 — colour inputs, selects + the inline link input in the toolbar. */
/* Split-button colour control (Word-style): [ A▮ ][▾]. Click the swatch to
   apply the current colour; click ▾ for the palette. Theme-aware via --rc-ed-*. */
.rc-color-split {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    border: 1px solid var(--rc-ed-border);
    border-radius: 5px;
    overflow: hidden;
}
.rc-color-main {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 26px;
    padding: 0;
    border: none;
    background: var(--rc-ed-bg);
    color: var(--rc-ed-text);
    cursor: pointer;
}
.rc-color-main:hover { background: var(--rc-ed-accent-pale); }
.rc-color-glyph { font-size: 0.82rem; font-weight: 700; line-height: 1; }
.rc-color-bar { width: 16px; height: 4px; border-radius: 1px; }
.rc-color-arrow {
    width: 16px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--rc-ed-border);
    background: var(--rc-ed-bg);
    color: var(--rc-ed-muted);
    font-size: 0.7rem;
    cursor: pointer;
}
.rc-color-arrow:hover { background: var(--rc-ed-accent-pale); color: var(--rc-ed-text); }
.rc-color-palette {
    position: fixed;
    z-index: 10000;
    background: var(--rc-ed-bg, #fff);
    border: 1px solid var(--rc-ed-border, #ccc);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    padding: 8px;
}
.rc-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 18px);
    gap: 4px;
}
.rc-color-swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    cursor: pointer;
}
.rc-color-swatch:hover { outline: 2px solid var(--rc-ed-accent); outline-offset: 1px; }
.rc-color-none,
.rc-color-custom {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--rc-ed-text);
}
.rc-color-none {
    padding: 4px 6px;
    border: 1px solid var(--rc-ed-border);
    border-radius: 4px;
    background: var(--rc-ed-bg);
    cursor: pointer;
    text-align: left;
}
.rc-color-none:hover { background: var(--rc-ed-accent-pale); }
.rc-color-custom { cursor: pointer; }
.rc-color-custom input[type="color"] {
    vertical-align: middle;
    width: 28px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--rc-ed-border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}
.rc-tiptap-select {
    height: 28px;
    font-size: 0.8rem;
    color: var(--rc-ed-text);
    background: var(--rc-ed-bg);
    border: 1px solid var(--rc-ed-border);
    border-radius: 5px;
    padding: 0 4px;
    cursor: pointer;
    max-width: 130px;
}
/* T-136 — the Styles dropdown holds named-style labels (can be longer); give it
   a little more room than the font/size selects. */
.rc-style-select { max-width: 160px; font-weight: 500; }
.rc-tiptap-link-input {
    height: 28px;
    min-width: 240px;
    font-size: 0.82rem;
    padding: 0 8px;
    color: var(--rc-ed-text);
    background: var(--rc-ed-bg);
    border: 1px solid var(--rc-ed-accent);
    border-radius: 5px;
}

/* T-130 — deliberate Save-to-Draft control + unsaved-changes indicator. */
.rc-tiptap-save-btn {
    font-weight: 600;
    color: #fff;
    background: var(--rc-ed-accent);
    border-color: var(--rc-ed-accent);
}
.rc-tiptap-save-btn:hover { filter: brightness(1.12); background: var(--rc-ed-accent); }
.rc-tiptap-save-btn:disabled {
    color: var(--rc-ed-muted);
    background: transparent;
    border-color: var(--rc-ed-border);
    cursor: default;
    filter: none;
}
.rc-tiptap-dirty-dot {
    font-size: 0.72rem;
    color: #c05621;
    font-weight: 600;
    margin-left: 2px;
    align-self: center;
}

.rc-tiptap-editor {
    flex: 1 1 auto;
    overflow: auto;
    padding: 24px 32px;
    background: var(--rc-ed-bg);
}

/* The ProseMirror editable region (TipTap renders into .rc-tiptap-content). */
.rc-tiptap-editor .ProseMirror,
.rc-tiptap-content {
    outline: none;
    /* Match the source SOP's typography + use the full editor width so line
       wrapping matches the document (the old 70ch cap made it narrow and wrap
       differently). */
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rc-ed-text);
    max-width: none;
}

.rc-tiptap-content:focus { outline: none; }

.rc-tiptap-content p { margin: 0 0 0.85em; }

.rc-tiptap-content h1,
.rc-tiptap-content h2,
.rc-tiptap-content h3,
.rc-tiptap-content h4 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--rc-ed-accent);
    line-height: 1.25;
    margin: 1.2em 0 0.5em;
}
.rc-tiptap-content h1 { font-size: 1.7rem; }
.rc-tiptap-content h2 { font-size: 1.4rem; }
.rc-tiptap-content h3 { font-size: 1.18rem; }
.rc-tiptap-content h4 { font-size: 1.04rem; }

.rc-tiptap-content ul,
.rc-tiptap-content ol { margin: 0 0 0.85em; padding-left: 1.6em; }
/* Restore list markers — a global reset elsewhere sets list-style:none, so the
   editor's bullets/numbers were invisible without re-asserting them here. */
.rc-tiptap-content ul { list-style: disc outside; }
.rc-tiptap-content ol { list-style: decimal outside; }
.rc-tiptap-content li { margin: 0.2em 0; display: list-item; }
.rc-tiptap-content li > p { margin: 0; }

/* Tables */
.rc-tiptap-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.85em 0;
    /* fixed so the per-cell `colwidth` attrs (mapped from Word col_widths,
       Tier 2) drive the column proportions via ProseMirror's <colgroup>.
       Tables without col_widths fall back to equal columns. */
    table-layout: fixed;
}
.rc-tiptap-content td,
.rc-tiptap-content th {
    border: 1px solid var(--rc-ed-border);
    padding: 6px 9px;
    vertical-align: top;
    position: relative;
}
.rc-tiptap-content th {
    background: var(--rc-ed-accent-pale);
    font-weight: 600;
    text-align: left;
}
.rc-tiptap-content .selectedCell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rc-ed-accent);
    opacity: 0.12;
    pointer-events: none;
}
/* TipTap column-resize handle */
.rc-tiptap-content .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rc-ed-accent);
    opacity: 0.4;
    pointer-events: none;
}

/* ── Tier 3 — images + retain-don't-drop preserved blocks ────────────────── */
.rc-tiptap-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.6em 0;
}
.rc-tiptap-content img.ProseMirror-selectednode {
    outline: 2px solid var(--rc-ed-accent);
}
/* Preserved block: header/footer + footnotes show their retained text; opaque
   `preserved` (sectPr/sdt) shows just the label chip. The source is kept in the
   node's `raw`/`text` attrs (round-trips on save) even though it's not richly
   rendered — the losslessness guarantee. */
.rc-preserved {
    border: 1px dashed var(--rc-ed-border);
    border-left: 3px solid var(--rc-ed-muted);
    border-radius: 4px;
    background: var(--rc-ed-toolbar);
    padding: 8px 12px;
    margin: 0.7em 0;
    font-size: 0.86rem;
}
.rc-preserved-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rc-ed-muted);
    margin-bottom: 4px;
}
.rc-preserved-text {
    white-space: pre-wrap;
    color: var(--rc-ed-text);
}
.rc-preserved-preserved .rc-preserved-text { display: none; }
/* B-026 — opaque "retain-don't-drop" markers (Word bookmarks, comment ranges,
   sectPr page setup, content-control sdt, proofErr, etc.) are captured for
   lossless round-trip but carry NO reviewer-facing content, so the placeholder
   block "Preserved (bookmarkEnd)" is just noise in the editor. Suppress it
   VISUALLY only — the preservedBlock node + its raw XML stay in the document
   (getJSON serialises them), so a load→save round-trip remains lossless and a
   future "show preserved markers" toggle can simply un-hide this. Header/Footer
   + Footnotes preserved blocks carry text and use their OWN classes
   (rc-preserved-header_footer / -footnotes) — they stay visible. (Craig
   2026-05-27: "suppress is the right answer — we can't drop stuff we don't
   understand; one day we may need to show these somehow in the editor.") */
.rc-preserved-preserved { display: none; }

/* ── Tier-1 full-fidelity inline styling ──────────────────────────────────
   Links, super/sub-script, highlight + paragraph alignment captured from the
   source docx. Colour / font-size / font-family ride on inline style attrs the
   FontSize/Color/FontFamily extensions emit, so they need no rule here. */
.rc-tiptap-content a {
    color: var(--rc-ed-accent);
    text-decoration: underline;
    cursor: pointer;
}
.rc-tiptap-content a:hover { text-decoration: underline; opacity: 0.85; }
.rc-tiptap-content sup { vertical-align: super; font-size: 0.75em; line-height: 0; }
.rc-tiptap-content sub { vertical-align: sub;   font-size: 0.75em; line-height: 0; }
/* Highlight mark — colour comes from the inline background-color the Highlight
   extension renders (multicolor). This rule just guarantees readable padding
   and keeps the default chrome if a swatch ever renders without inline colour. */
.rc-tiptap-content mark {
    background-color: #fff3a3;
    color: inherit;
    padding: 0 0.05em;
    border-radius: 2px;
}
/* TextAlign writes inline text-align on the block, but assert the named classes
   too in case a paste path uses them. */
.rc-tiptap-content .has-text-align-center  { text-align: center; }
.rc-tiptap-content .has-text-align-right    { text-align: right; }
.rc-tiptap-content .has-text-align-justify  { text-align: justify; }
.rc-tiptap-content .has-text-align-left     { text-align: left; }

@media (prefers-color-scheme: dark) {
    .rc-tiptap-wrap {
        --rc-ed-bg:       #1a202c;
        --rc-ed-text:     #e2e8f0;
        --rc-ed-muted:    #a0aec0;
        --rc-ed-border:   #2d3748;
        --rc-ed-toolbar:  #161b26;
        --rc-ed-accent:   #7aa7d6;
        --rc-ed-accent-pale: #243044;
    }
    /* Headings use the accent colour; in dark mode keep them legible. */
    .rc-tiptap-content h1,
    .rc-tiptap-content h2,
    .rc-tiptap-content h3,
    .rc-tiptap-content h4 { color: var(--rc-ed-accent); }
    .rc-tiptap-btn.is-active { color: #0f1622; }
    /* Highlighted text fallback sits on a bright swatch — force dark glyphs so
       it stays readable even when the page is in dark mode. (When the source
       docx carried an explicit highlight colour it renders inline; this only
       covers the fallback swatch above.) */
    .rc-tiptap-content mark { color: #1a202c; }
    /* Links: keep the accent legible against the dark editor background. */
    .rc-tiptap-content a { color: var(--rc-ed-accent); }
}

@media (prefers-reduced-motion: reduce) {
    .rc-tiptap-btn { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   T-118 C8.3 — Finding-highlight DECORATIONS (TipTap / ProseMirror surface).

   Rendered by finding_decoration.js as inline ProseMirror decorations, NOT by
   DOM-wrapping. Class shape: `rc-finding rc-finding-<category>` (+ `is-active`
   for the SELECTED finding). This REPLACES the legacy `.hl` / `.hl-block`
   pipeline on the editor surface; the legacy rules above (`.hl*`) are kept
   intact because they still drive the legacy analyser render (the default).

   Visual contract (Craig UI-OBS #1/#2/#3/#5 + L-023):
   - ONE unified bordered-BOX per finding, every category — no left-bar /
     underline-wash variants, no `:has()` inference. A multi-paragraph finding
     is a single decoration range, so the browser paints ONE continuous box
     across the wrapped text rather than double-painting per paragraph.
   - Per-category colour shared with the finding cards (the --rc-find-* vars
     reuse the same per-category *-bar colours). CRITICAL GAP nudged toward red.
   - SELECTED state is obvious + UNIFORM across every category: the active
     finding's box uses the DARKER per-category `-sel` fill + a heavier border.
   - Honours prefers-color-scheme: dark via the editor-local var remap below.
   ───────────────────────────────────────────────────────────────────────── */
/* BIG-BOX model (Craig issue 1): `.rc-finding` now lands on BLOCK nodes via
   Decoration.node (paragraph / heading / list item / table-cell paragraph), not
   on inline spans. Each finding paints a bordered BOX around its block(s). We
   use a real per-side `border` (default unknown edge) + tinted fill, plus the
   `--rc-find-*-edge` colour variable so per-category rules only swap the colour
   and fill. The continuous-box role classes (single/first/mid/last) suppress
   the borders BETWEEN a multi-block finding's blocks so the boxes read as ONE
   continuous box (border-top only on the first, border-bottom only on the last,
   left/right on all). */
.rc-finding {
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
    /* default (unknown) fill/edge; per-category rules below override */
    --rc-box-edge: var(--rc-find-unknown-edge);
    --rc-box-width: 1px;
    background-color: var(--rc-find-unknown-fill);
    border: var(--rc-box-width) solid var(--rc-box-edge);
    /* small inner breathing room so the box hugs the text, not the glyphs */
    padding: 2px 4px;
}

/* Continuous-box roles — collapse the shared edges between stacked blocks of one
   finding so they paint as a single box. The horizontal radius is kept on the
   outer corners only. */
.rc-finding-box-single { border-radius: 4px; }
.rc-finding-box-first  { border-bottom: 0; border-radius: 4px 4px 0 0; }
.rc-finding-box-mid    { border-top: 0; border-bottom: 0; border-radius: 0; }
.rc-finding-box-last   { border-top: 0; border-radius: 0 0 4px 4px; }

/* Per-category colour (matches the finding cards via the shared --rc-find-* vars). */
.rc-finding-conflict          { --rc-box-edge: var(--rc-find-conflict-edge);    background-color: var(--rc-find-conflict-fill); }
.rc-finding-critical_gap      { --rc-box-edge: var(--rc-find-gap-edge);         background-color: var(--rc-find-gap-fill); }
.rc-finding-vague             { --rc-box-edge: var(--rc-find-vague-edge);       background-color: var(--rc-find-vague-fill); }
.rc-finding-unnecessary_detail{ --rc-box-edge: var(--rc-find-unnecessary-edge); background-color: var(--rc-find-unnecessary-fill); }
.rc-finding-ai_suggestion     { --rc-box-edge: var(--rc-find-ai-edge);          background-color: var(--rc-find-ai-fill); }
.rc-finding-inserted          { --rc-box-edge: var(--rc-find-inserted-edge);    background-color: var(--rc-find-inserted-fill); }

.rc-finding:hover { filter: brightness(0.95); }

/* SELECTED — darker fill + heavier (2px) border, applied uniformly so the active
   finding is unmistakable regardless of category. Drives the same `--rc-box-*`
   vars so the continuous-box role classes keep working when selected. */
.rc-finding.is-active                       { --rc-box-width: 2px; background-color: var(--rc-find-unknown-sel); }
.rc-finding-conflict.is-active              { background-color: var(--rc-find-conflict-sel); }
.rc-finding-critical_gap.is-active          { background-color: var(--rc-find-gap-sel); }
.rc-finding-vague.is-active                 { background-color: var(--rc-find-vague-sel); }
.rc-finding-unnecessary_detail.is-active    { background-color: var(--rc-find-unnecessary-sel); }
.rc-finding-ai_suggestion.is-active         { background-color: var(--rc-find-ai-sel); }
.rc-finding-inserted.is-active              { background-color: var(--rc-find-inserted-sel); }

@media (prefers-color-scheme: dark) {
    /* Remap the decoration palette for dark backgrounds: keep the SAME hues
       (so card↔decoration colour identity holds) but lift the fill alpha so the
       boxes read against the dark editor surface. Edges stay the saturated bar
       colours, which remain legible on dark. */
    .rc-tiptap-wrap {
        --rc-find-conflict-fill: rgba(229, 62, 62, 0.26);
        --rc-find-conflict-sel:  rgba(229, 62, 62, 0.46);
        --rc-find-gap-fill:      rgba(217, 102, 59, 0.28);
        --rc-find-gap-sel:       rgba(217, 102, 59, 0.48);
        --rc-find-vague-fill:    rgba(214, 158, 46, 0.26);
        --rc-find-vague-sel:     rgba(214, 158, 46, 0.46);
        --rc-find-unnecessary-fill: rgba(49, 130, 206, 0.26);
        --rc-find-unnecessary-sel:  rgba(49, 130, 206, 0.46);
        --rc-find-ai-fill:       rgba(128, 90, 213, 0.26);
        --rc-find-ai-sel:        rgba(128, 90, 213, 0.46);
        --rc-find-inserted-fill: rgba(56, 161, 105, 0.26);
        --rc-find-inserted-sel:  rgba(56, 161, 105, 0.46);
        --rc-find-unknown-fill:  rgba(160, 174, 192, 0.24);
        --rc-find-unknown-edge:  #a0aec0;
        --rc-find-unknown-sel:   rgba(160, 174, 192, 0.44);
    }
    .rc-finding:hover { filter: brightness(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .rc-finding { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v5.0.0 M4-V1 / M4-3 — Graph view (within-document process graph)
 * ────────────────────────────────────────────────────────────────────────── */
.graph-view-wrap {
    /* v4.0.23 — sit BELOW the app's 52px <header>, in-flow, not fixed-overlay.
     * Previous `position:fixed; inset:0` made the Graph view title overlap the
     * app menu bar (Craig 2026-05-30: "It says PRocess graph"). Mirrors the
     * .qms-access-wrap pattern (height: calc(100vh - 52px)) — header sits
     * above naturally via DOM order. */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 52px);
    background: var(--background, #fff);
}
.graph-view-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.graph-view-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.graph-view-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.graph-view-toolbar select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 280px;
    background: var(--surface);
    color: var(--text-primary);
}
.graph-view-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.graph-view-cy {
    flex: 1;
    min-width: 0;            /* v4.0.42 — allow flex shrink below content size */
    position: relative;
    overflow: hidden;        /* v4.0.42 — clip the Cytoscape canvas when the
                                 drawer widens; without this the canvas extends
                                 visibly past the pane while the drawer drags
                                 (Craig 2026-06-01 bug report) */
    background: var(--surface-alt, #f7f7fa);
    border-right: 1px solid var(--border);
}
.graph-view-detail {
    width: 380px;
    min-width: 380px;
    max-width: 820px;
    overflow-y: auto;
    background: var(--surface, var(--bg-white));
    border-left: 1px solid var(--border);
    /* v4.0.42 — Deeper outer shadow + 4px accent rail. The rail uses
       inset-shadow so it stays glued to the drawer's left edge even
       when the user drags-to-resize. */
    box-shadow: inset 4px 0 0 0 var(--rc-graph-section-border, #4f6ddb),
                -4px 0 18px -6px rgba(15, 23, 42, 0.12),
                -1px 0 2px rgba(15, 23, 42, 0.04);
    flex-shrink: 0;
}
/* v4.0.41 — drag-to-resize splitter on the LEFT edge of the drawer. */
.graph-view-resize {
    width: 8px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
    user-select: none;
    transition: background 0.15s ease;
}
.graph-view-resize:hover,
.graph-view-resize.dragging {
    background: rgba(79, 109, 219, 0.08);
}
.graph-view-resize-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 36px;
    border-radius: 2px;
    background: var(--border, #cbd5e0);
    box-shadow:
        -6px 0 0 0 var(--border, #cbd5e0),
         6px 0 0 0 var(--border, #cbd5e0);
}
.graph-view-resize:hover .graph-view-resize-grip {
    background: var(--rc-graph-section-border, #4f6ddb);
    box-shadow:
        -6px 0 0 0 var(--rc-graph-section-border, #4f6ddb),
         6px 0 0 0 var(--rc-graph-section-border, #4f6ddb);
}
/* v4.0.40 (M4 P3 Stage A.5) — drawer aesthetic per Craig 2026-06-01
   "needs to appear to be more than just a white box with text in it."
   Sectioned card layout with header bar, type chip, surface card body,
   dividers between blocks, polished typography. The 4px inset shadow
   on the parent .graph-view-detail above acts as a coloured rail tied
   to the node type accent. */
.rc-drawer-head {
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(180deg,
            var(--primary-pale, #eef3f9) 0%,
            var(--bg-white, #ffffff) 100%);
    position: relative;
}
.rc-drawer-head::after {
    /* hairline accent under the header */
    content: '';
    position: absolute;
    left: 24px; right: 24px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        var(--rc-graph-section-border, #4f6ddb) 0%,
        transparent 100%);
    opacity: 0.4;
}
.rc-drawer-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text, #2d3748);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.rc-drawer-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.rc-drawer-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--bg-white, #fff);
    color: var(--text-muted, #718096);
    border: 1px solid var(--border);
    border-radius: 12px;
    /* v4.0.42 — Tiny shadow + inset highlight so chips read as buttons
       rather than flat labels. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(15, 23, 42, 0.05);
}
.rc-drawer-chip-accent {
    color: var(--primary, #1a3a5c);
    border-color: var(--primary-light, #2a5a8c);
    background: var(--bg-white);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(26, 58, 92, 0.12);
}
.rc-drawer-body {
    padding: 20px 22px 28px;
    background: var(--bg, #f0f2f5);
}
.rc-drawer-section {
    padding: 18px 20px;
    margin-bottom: 14px;
    background: var(--bg-white, #ffffff);
    border: 1px solid var(--border);
    border-radius: 7px;
    /* v4.0.42 — Layered shadow for slight 3D depth: hairline border
       + soft drop shadow + tiny inset highlight at the top so the
       card feels lifted off the tinted body. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 2px 6px -2px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.18s ease;
}
.rc-drawer-section:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 4px 10px -2px rgba(15, 23, 42, 0.12);
}
.rc-drawer-section:last-child { margin-bottom: 0; }
.rc-drawer-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted, #718096);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.rc-drawer-section-body {
    font-size: 0.92rem;
    color: var(--text, #2d3748);
    line-height: 1.6;
    white-space: pre-wrap;
}
.rc-drawer-kv {
    display: grid;
    grid-template-columns: minmax(90px, 0.4fr) 1fr;
    gap: 8px 14px;
    font-size: 0.86rem;
}
.rc-drawer-kv dt {
    font-weight: 600;
    color: var(--text-muted, #718096);
    align-self: start;
}
.rc-drawer-kv dd {
    margin: 0;
    color: var(--text, #2d3748);
    white-space: pre-wrap;
    line-height: 1.5;
}
.rc-drawer-stage-b {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--rc-graph-section-bg, #eef4ff);
    border-left: 3px solid var(--rc-graph-section-border, #4f6ddb);
    font-size: 0.78rem;
    color: var(--text-muted, #718096);
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
.rc-drawer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.rc-drawer-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--primary-pale, #eef3f9);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-weight: 600;
    color: var(--text, #2d3748);
    white-space: nowrap;
    width: 30%;
    vertical-align: top;
}
.rc-drawer-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: pre-wrap;
    line-height: 1.55;
    vertical-align: top;
}
.rc-drawer-table tr:last-child th,
.rc-drawer-table tr:last-child td { border-bottom: 0; }
.rc-drawer-table tr:nth-child(even) td { background: var(--primary-pale, #f7fafc); }

@media (prefers-color-scheme: dark) {
    .rc-drawer-head {
        background: linear-gradient(180deg, #1f2330 0%, #181b25 100%);
    }
    .rc-drawer-body { background: #14171f; }
    .rc-drawer-section {
        background: #1c2030;
        border-color: #2d3242;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04) inset,
            0 1px 2px rgba(0, 0, 0, 0.35),
            0 2px 6px -2px rgba(0, 0, 0, 0.5);
    }
    .rc-drawer-section:hover {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04) inset,
            0 2px 4px rgba(0, 0, 0, 0.4),
            0 4px 10px -2px rgba(0, 0, 0, 0.55);
    }
    .rc-drawer-chip,
    .rc-drawer-chip-accent {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.05) inset,
            0 1px 2px rgba(0, 0, 0, 0.3);
    }
    .rc-drawer-section-title { border-bottom-color: #2d3242; }
    .rc-drawer-chip { background: #2a2f3a; color: #cbd5e1; border-color: #3d4655; }
    .rc-drawer-chip-accent { color: #93c5fd; border-color: #93c5fd; background: #1a2233; }
    .rc-drawer-table { border-color: #2d3242; }
    .rc-drawer-table th { background: #1f2330; border-color: #2d3242; }
    .rc-drawer-table td { border-color: #2d3242; }
    .rc-drawer-table tr:nth-child(even) td { background: #1f2330; }
    .rc-drawer-stage-b { background: #1f2a44; border-left-color: #6f8aff; color: #c9d2e3; }
    .graph-view-resize:hover { background: rgba(111, 138, 255, 0.12); }
}
.graph-view-status {
    padding: 6px 16px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--surface-alt, #f7f7fa);
}

@media (prefers-color-scheme: dark) {
    .graph-view-cy { background: #1a1a20; }
    .graph-view-status { background: #1a1a20; }
}

/* v4.0.18 — × Close at top-right of the document frame (standard pattern;
 * was a toolbar button next to the sop-dropdown in the first cut, moved
 * here per Craig 2026-05-30 "keep to the standard UI models").
 * Positioned absolutely inside .doc-scroll. */
.doc-scroll { position: relative; }
.doc-close-btn {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.doc-close-btn:hover { background: #fee; border-color: #c53030; color: #c53030; }
@media (prefers-color-scheme: dark) {
    .doc-close-btn:hover { background: #4a1a1a; border-color: #ff6b6b; color: #ff6b6b; }
}

/* v4.0.26 — Graph view loading overlay: spinner + progress bar */
.graph-view-cy { position: relative; }   /* establish positioning context */
.graph-view-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    background: var(--surface, #fff);
    padding: 24px 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.graph-spinner {
    font-size: 2.6rem;
    color: var(--primary, #4f6ddb);
    line-height: 1;
    animation: graph-spin 1.4s linear infinite;
    display: inline-block;   /* required for transform to work cleanly */
}
@keyframes graph-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.graph-loading-text {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.graph-progress-bar {
    width: 220px;
    height: 6px;
    background: var(--border, #ddd);
    border-radius: 3px;
    overflow: hidden;
    margin: 12px auto 0;
}
.graph-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary, #4f6ddb);
    transition: width 0.35s ease;
}
@media (prefers-color-scheme: dark) {
    .graph-view-loading { background: #1f1f24; }
}

/* ── M4 P2 — Process Graph dark-mode token overrides (v4.0.38) ─────────────
   Backgrounds darken; borders + text brighten to keep WCAG-AA contrast.
   Honours [[feedback_engineering_defaults — respect prefers-color-scheme]]. */
@media (prefers-color-scheme: dark) {
    :root {
        --rc-graph-action-bg:        #3b50a8;
        --rc-graph-action-border:    #6f8aff;
        --rc-graph-action-text:      #f1f5f9;

        --rc-graph-decision-bg:      #b8801e;
        --rc-graph-decision-border:  #ffc869;
        --rc-graph-decision-text:    #f8f2e3;

        --rc-graph-section-bg:       #1f2a44;
        --rc-graph-section-border:   #6f8aff;
        --rc-graph-section-text:     #cfd9ff;

        --rc-graph-procedure-bg:     #1c3424;
        --rc-graph-procedure-border: #5dc77c;
        --rc-graph-procedure-text:   #cdeed4;

        --rc-graph-procedures-bg:    #16291d;
        --rc-graph-procedures-border:#5dc77c;
        --rc-graph-procedures-text:  #cdeed4;

        --rc-graph-context-bg:       #2b2417;
        --rc-graph-context-border:   #d4a23c;
        --rc-graph-context-text:     #f4e3bf;

        --rc-graph-edge-next:        #9ca3af;
        --rc-graph-edge-branch:      #ffc869;
        --rc-graph-edge-branch-text: #f4e3bf;
        --rc-graph-edge-meta:        #6b7280;

        --rc-graph-selected-border:  #f1f5f9;

        --rc-graph-chip-resp-fg:     #c7b8f0;
        --rc-graph-chip-inv-fg:      #b69ef0;
    }
}

/* ── v4.0.47 — SOP-as-Agent-card (HTML overlay over Context node) ──────────
   Craig 2026-06-01: "The SOP box would look like the Agent box on the right
   of the diagram." cytoscape-node-html-label renders this DOM tree over the
   Context node; the plugin keeps it aligned with pan/zoom. Chapter slots are
   individually clickable — the .graph-view-cy delegated handler reads the
   `data-section-index` attribute and opens the chapter's drawer. */
/* v4.0.49 — force pointer-events on the entire card DOM tree. The
   cytoscape-node-html-label plugin sometimes injects pointer-events:
   none on the outer wrap; explicit overrides defeat that so slot
   clicks reach our delegated handler (Craig 2026-06-01: "Still no
   drawer when I click on the SOP or its fields"). */
.rc-sop-card-wrap,
.rc-sop-card-wrap *,
.rc-step-card-wrap,
.rc-step-card-wrap *,
.rc-card,
.rc-card * {
    pointer-events: auto !important;
}
.rc-sop-card-wrap,
.rc-step-card-wrap {
    /* the plugin parents the card with absolute positioning; let it
       sit naturally without our own positioning interfering */
}
.rc-sop-card {
    width: 260px;
    background: var(--rc-sop-card-bg, #fff);
    border: 1px solid var(--rc-sop-card-border, #cbd5e0);
    border-radius: 10px;
    overflow: hidden;
    font-family: inherit;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 8px 20px -4px rgba(15, 23, 42, 0.18);
    cursor: pointer;
}
.rc-sop-card-header {
    padding: 14px 16px;
    background: var(--rc-sop-card-header-bg, #eef3f9);
    color: var(--rc-sop-card-header-fg, #1a3a5c);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--rc-sop-card-border, #cbd5e0);
}
.rc-sop-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rc-sop-card-header-fg, #1a3a5c);
    /* clamp to 2 lines so long titles don't blow up the card height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rc-sop-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.rc-sop-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--rc-sop-card-badge-bg, #d4a23c);
    color: var(--rc-sop-card-badge-fg, #2d1f00);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 10px;
}
.rc-sop-card-version {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--rc-sop-card-header-meta, #718096);
    letter-spacing: 0.02em;
}
.rc-sop-card-slots {
    display: flex;
    flex-direction: column;
}
.rc-sop-card-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-top: 1px solid var(--rc-sop-card-border, #cbd5e0);
    background: var(--rc-sop-card-slot-bg, #f7fafc);
    color: var(--rc-sop-card-slot-fg, #2d3748);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, padding-left 0.12s ease;
    user-select: none;
}
.rc-sop-card-slot:hover {
    background: var(--rc-sop-card-slot-hover, #eef3f9);
    padding-left: 20px;
}
.rc-sop-card-slot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rc-sop-card-slot-dot, #4f6ddb);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(79, 109, 219, 0.18);
}
.rc-sop-card-slot-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    :root {
        --rc-sop-card-bg:           #1c2030;
        --rc-sop-card-border:       #2d3242;
        --rc-sop-card-header-bg:    #232838;
        --rc-sop-card-header-fg:    #e2e8f0;
        --rc-sop-card-header-meta:  #94a3b8;
        --rc-sop-card-slot-bg:      #1c2030;
        --rc-sop-card-slot-hover:   #2a3144;
        --rc-sop-card-slot-fg:      #cbd5e1;
    }
    .rc-sop-card,
    .rc-step-card {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04) inset,
            0 2px 4px rgba(0, 0, 0, 0.35),
            0 8px 20px -4px rgba(0, 0, 0, 0.55);
    }
}

/* ── v4.0.49 — Step card (per-action HTML overlay) ────────────────────────────
   Craig 2026-06-01: "The look we have for the SOP card is exactly the look
   we should be going for for each of the step in the process flows, The sub
   bullets would then be Roles, WIs, SOPs, Other docs ... The slightly 3d
   look with shadow is perfect for the process steps as well."

   Each action / decision is rendered as a card mirroring the SOP card —
   header (step# + essence) + four slot rows. Same 3D shadow pattern.
   Each slot is individually clickable; the document-level handler
   reads data-slot + data-rc-uid and opens the drawer. */
.rc-step-card {
    width: 200px;
    background: var(--rc-sop-card-bg, #fff);
    border: 1px solid var(--rc-sop-card-border, #cbd5e0);
    border-radius: 8px;
    overflow: hidden;
    font-family: inherit;
    /* Same layered shadow as the SOP card → 3D lift */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 6px 16px -4px rgba(15, 23, 42, 0.16);
    cursor: pointer;
}
.rc-step-card-header {
    padding: 10px 14px;
    background: linear-gradient(180deg, #4f6ddb 0%, #3e5cc9 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--rc-sop-card-border, #cbd5e0);
    cursor: pointer;
}
.rc-step-card-num {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rc-step-card-decision-mark {
    color: #ffd57a;
    font-size: 1.05rem;
    line-height: 1;
}
/* v4.0.60 — Decisions get a distinct orange-tinted header so they're
   visually distinguishable from regular Action steps at a glance,
   matching the orange of the BRANCH edges that flow out of them. */
.rc-step-card[data-step-kind="decision"] .rc-step-card-header {
    background: linear-gradient(180deg, #e8a330 0%, #c9881a 100%);
    color: #1a1a1a;
}
.rc-step-card[data-step-kind="decision"] .rc-step-card-num,
.rc-step-card[data-step-kind="decision"] .rc-step-card-essence {
    color: #1a1a1a;
}
.rc-step-card[data-step-kind="decision"] .rc-step-card-essence {
    color: rgba(26, 26, 26, 0.78);
}
.rc-step-card[data-step-kind="decision"] .rc-step-card-decision-mark {
    color: #5c3f0d;
}
.rc-step-card-essence {
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
    /* clamp to 2 lines so long essences don't blow up the card */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rc-step-card-slots {
    display: flex;
    flex-direction: column;
}
.rc-step-card-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-top: 1px solid var(--rc-sop-card-border, #cbd5e0);
    background: var(--rc-sop-card-slot-bg, #ffffff);
    color: var(--rc-sop-card-slot-fg, #2d3748);
    font-size: 0.76rem;
    cursor: pointer;
    transition: background 0.12s ease, padding-left 0.12s ease;
    user-select: none;
    line-height: 1.2;
}
.rc-step-card-slot:first-child {
    border-top: 0;
}
.rc-step-card-slot:hover {
    background: var(--rc-sop-card-slot-hover, #f0f4fa);
    padding-left: 18px;
}
.rc-step-card-slot--empty {
    opacity: 0.55;
}
.rc-step-card-slot-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}
.rc-step-card-slot-dot-roles  { background: #a68bd9; box-shadow: 0 0 0 2px rgba(166, 139, 217, 0.18); }
.rc-step-card-slot-dot-wis    { background: #38a169; box-shadow: 0 0 0 2px rgba( 56, 161, 105, 0.18); }
.rc-step-card-slot-dot-sops   { background: #4f6ddb; box-shadow: 0 0 0 2px rgba( 79, 109, 219, 0.18); }
.rc-step-card-slot-dot-others { background: #d4a23c; box-shadow: 0 0 0 2px rgba(212, 162,  60, 0.18); }
/* v4.0.87 — Findings slot. Default dot is muted grey (empty / no
 * findings); when findings exist, a severity modifier class overrides
 * the colour to match the existing rc-findings-badge palette so the
 * slot dot reads as a smaller in-card version of the existing severity
 * halo / SOP-card badge.
 */
.rc-step-card-slot-dot-findings              { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18); }
.rc-step-card-slot-dot-sev-critical          { background: #d92020; box-shadow: 0 0 0 2px rgba(217,  32,  32, 0.22); }
.rc-step-card-slot-dot-sev-high,
.rc-step-card-slot-dot-sev-oai               { background: #e85a1a; box-shadow: 0 0 0 2px rgba(232,  90,  26, 0.22); }
.rc-step-card-slot-dot-sev-medium,
.rc-step-card-slot-dot-sev-vai               { background: #e0b020; box-shadow: 0 0 0 2px rgba(224, 176,  32, 0.22); }
.rc-step-card-slot-dot-sev-low,
.rc-step-card-slot-dot-sev-nai               { background: #999;    box-shadow: 0 0 0 2px rgba(153, 153, 153, 0.18); }
.rc-step-card-slot-dot-sev-unknown           { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18); }
.rc-step-card-slot-label {
    flex: 1;
    font-weight: 500;
    color: var(--rc-sop-card-slot-fg, #2d3748);
}
.rc-step-card-slot-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #718096);
    background: var(--rc-sop-card-header-bg, #eef3f9);
    border-radius: 8px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}
.rc-step-card-slot--empty .rc-step-card-slot-count {
    background: transparent;
    color: var(--text-muted, #718096);
}

@media (prefers-color-scheme: dark) {
    .rc-step-card-header {
        background: linear-gradient(180deg, #3a4fa8 0%, #2c3d85 100%);
    }
    .rc-step-card-slot-count {
        background: #2a3144;
        color: #94a3b8;
    }
}

/* ── v4.0.50 — findings badge (Craig 2026-06-01: "each of these sections —
   including the SOP header — may have findings") ──────────────────────────
   Appears as a small numeric chip in the top-right corner of any card
   (.rc-sop-card or .rc-step-card) that has findings attached. Severity
   class drives colour. Mirrors the existing finding-decoration palette
   (--conflict-bar / --gap-bar etc. from styles.css :root). */
.rc-card {
    position: relative;   /* anchor for the absolute-positioned badge */
}
.rc-findings-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #999;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.02em;
    box-shadow:
        0 0 0 2px #ffffff,
        0 2px 4px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}
.rc-findings-badge-critical { background: #d92020; }      /* red */
.rc-findings-badge-high,
.rc-findings-badge-oai      { background: #e85a1a; }      /* orange */
.rc-findings-badge-medium,
.rc-findings-badge-vai      { background: #e0b020; color: #2d1a00; }   /* amber, dark text */
.rc-findings-badge-low,
.rc-findings-badge-nai      { background: #999;    }      /* grey */
.rc-findings-badge-unknown  { background: #999;    }

@media (prefers-color-scheme: dark) {
    .rc-findings-badge {
        box-shadow:
            0 0 0 2px #1c2030,
            0 2px 4px rgba(0, 0, 0, 0.5);
    }
}