/* ============================================================================
   SCREEN 2A - WORLD-CLASS DOCUMENT READER + CLAIM INSPECTOR
   Layout: exec-bar (top) + sidebar (left) + document (center) + panel (right)
   Matches Screen 5 design language exactly
   ============================================================================ */

/* ============================================================================
   PROGRESS SIDEBAR COLOR OVERRIDE — match Screen 5 neutral palette
   When Screen 2A is active, remap the blue-tinted sidebar palette to
   the same --vc-* neutral tokens that Screen 5 uses.
   ============================================================================ */
body.s2a-active .progress-sidebar {
    --ps-bg:         var(--vc-bg-surface, #161922);
    --ps-bg3:        var(--vc-bg-surface-hover, #1C1F2B);
    --ps-bg4:        #1E2128;
    --ps-bg5:        #24272F;
    --ps-border:     rgba(255,255,255,0.06);
    --ps-border-mid: rgba(255,255,255,0.10);
    --ps-accent:     var(--vc-accent, #7C6FEE);
    --ps-t1:         var(--vc-t1, #E8E5F0);
    --ps-t2:         var(--vc-t2, #B3AECB);
    --ps-t3:         var(--vc-t3, #8B849E);
}

/* Align sidebar header bottom border with exec bar bottom border */
body.s2a-active .progress-sidebar .ps-header {
    min-height: 68px;
    height: 68px;
    border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.06));
}

/* Remove the second border line from product switcher slot */
body.s2a-active .progress-sidebar .ps-product-switcher-slot {
    border-bottom: none;
}

/* ============================================================================
   ROOT CONTAINER
   ============================================================================ */
#screen2aContainer {
    display: none;
    box-sizing: border-box;
    flex-direction: column;
    overflow: hidden;
    animation: s2aFadeIn 0.3s ease-out;
    /* Fixed position like Screen 5 — fills viewport right of ProgressSidebar */
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: var(--ps-sidebar-width, 320px) !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50;
    background: var(--vc-bg-body, #0F1117);
}

#screen2aContainer.active {
    display: flex !important;
}

/* Collapsed sidebar — shift left edge */
body.ps-sidebar-collapsed #screen2aContainer {
    left: var(--ps-sidebar-collapsed, 52px) !important;
}

@keyframes s2aFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes s2aSlideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ============================================================================
   TOOLBAR — inside container, right of ProgressSidebar
   Matches Screen 5 exec bar visual style but not its full-width layout.
   ============================================================================ */
.s2a-exec-bar {
    height: 68px;  /* Match Screen 5 exec bar height */
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    background: var(--vc-bg-surface);
    border-bottom: 1px solid var(--vc-border);
    position: relative;
    z-index: 30;
}

.s2a-exec-bar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 111, 238, 0.15), transparent 40%);
    pointer-events: none;
}

/* Mid section of toolbar */
.s2a-eb-mid {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 18px;
    position: relative;
    min-width: 0;
}

/* Center group — doc name + step indicator + zoom */
/* Centered over the text area only (always accounts for the 420px right panel) */
.s2a-eb-center {
    display: flex;
    align-items: center;
    gap: 16px;
    position: absolute;
    left: calc((100% - 420px) / 2);
    transform: translateX(-50%);
    transition: left 0.25s ease;
}

/* When panel is closed, center over full width */
.s2a-panel-hidden .s2a-eb-center {
    left: 50%;
}

.s2a-eb-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vc-t1);
    padding-right: 16px;
    border-right: 1px solid var(--vc-border);
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s2a-eb-doc svg {
    color: var(--vc-t3);
    flex-shrink: 0;
}

.s2a-eb-doc span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mode switcher — mirrors Screen 5 .s5r-eb-msw */
.s2a-eb-msw {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--vc-bg-page, var(--vc-bg-body));
    border: 1px solid var(--vc-border);
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
}

.s2a-eb-mb {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--vc-t3);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--vc-font-sans);
    white-space: nowrap;
    transition: color 0.15s ease;
    line-height: 1;
}

.s2a-eb-mb:hover { color: var(--vc-t2); }

.s2a-eb-mb-on {
    background: linear-gradient(135deg, rgba(124,111,238,0.25), rgba(139,92,255,0.18));
    box-shadow: 0 2px 8px rgba(124,111,238,0.3), 0 0 0 1px rgba(124,111,238,0.25);
    color: var(--vc-t1) !important;
    font-weight: 600;
}

/* Zoom controls in exec bar */
.s2a-eb-zoom {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 12px;
}

.s2a-zoom-btn,
.s2a-eb-zoom-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-r6);
    color: var(--vc-text-tertiary);
    cursor: pointer;
    transition: all 0.12s;
}

.s2a-zoom-btn:hover,
.s2a-eb-zoom-btn:hover {
    color: var(--vc-text-primary);
    background: var(--vc-bg-hover);
}

.s2a-zoom-btn svg,
.s2a-eb-zoom-btn svg {
    width: 14px;
    height: 14px;
}

.s2a-eb-zoom-lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vc-text-tertiary);
    min-width: 40px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Verdict pills (far-right of exec bar) */
.s2a-eb-verdicts {
    position: absolute;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.s2a-eb-vp {
    display: flex;
    align-items: baseline;
    gap: 5px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--vc-r6);
    transition: background 0.15s;
}

.s2a-eb-vp:hover {
    background: var(--vc-bg-hover);
}

.s2a-eb-vdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.s2a-eb-vn {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.s2a-eb-vl {
    font-size: 12px;
    color: var(--vc-text-tertiary);
}

/* ============================================================================
   MAIN CONTENT — sidebar + document + panel (Screen 5 layout)
   ============================================================================ */
.s2a-app-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ============================================================================
   LEFT SIDEBAR — REMOVED (ProgressSidebar handles this globally)
   ============================================================================ */
.s2a-sidebar {
    display: none; /* Hidden — ProgressSidebar provides left nav */
    width: 270px;
    flex-shrink: 0;
    background: var(--vc-bg-surface);
    border-right: 1px solid var(--vc-border);
    flex-direction: column;
    overflow: hidden;
    background-image: radial-gradient(ellipse 180px 120px at 120px -20px, var(--vc-accent-dim) 0%, transparent 100%);
}

.s2a-sb-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0 10px;
    scrollbar-width: none;
}

.s2a-sb-scroll::-webkit-scrollbar {
    display: none;
}

.s2a-sb-sec {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--vc-text-tertiary);
    text-transform: uppercase;
    padding: 0 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s2a-sb-hr {
    border: none;
    border-top: 1px solid var(--vc-border);
    margin: 12px 14px;
}

/* Verdict Scorecard */
.s2a-sb-scorecard {
    margin: 0 12px 16px;
    padding: 14px;
    background: var(--vc-glass-bg);
    border: 1px solid var(--vc-glass-border);
    border-radius: var(--vc-r12);
}

.s2a-sb-score-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--vc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.s2a-sb-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    transition: opacity 0.15s;
}

.s2a-sb-score-row:hover {
    opacity: 0.85;
}

.s2a-sb-score-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.s2a-sb-score-n {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--vc-font-mono);
    min-width: 30px;
    font-variant-numeric: tabular-nums;
}

.s2a-sb-score-bar-wrap {
    flex: 1;
    height: 4px;
    background: var(--vc-bg-hover);
    border-radius: 2px;
    overflow: hidden;
}

.s2a-sb-score-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.s2a-sb-score-pct {
    font-size: 11px;
    color: var(--vc-text-tertiary);
    font-family: var(--vc-font-mono);
    min-width: 32px;
    text-align: right;
}

.s2a-sb-score-label {
    font-size: 10px;
    color: var(--vc-text-tertiary);
    margin-left: 38px;
    margin-bottom: 8px;
}

/* Progress Steps */
.s2a-sb-steps {
    padding: 0 12px;
    margin-bottom: 16px;
    position: relative;
}

.s2a-sb-steps-line {
    position: absolute;
    left: 23px;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: linear-gradient(to bottom,
        var(--vc-status-supported) 0%,
        var(--vc-status-supported) 20%,
        var(--vc-accent-primary) 20%,
        var(--vc-accent-primary) 40%,
        var(--vc-border) 40%
    );
}

.s2a-sb-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 6px;
    border-radius: var(--vc-r8);
    position: relative;
    transition: background 0.15s;
}

.s2a-sb-step.active {
    background: var(--vc-accent-dim);
}

.s2a-sb-step-node {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: all 0.2s;
}

.s2a-sb-step-node.done {
    background: #2DD4BF;
    border: 1.5px solid #2DD4BF;
}

.s2a-sb-step-node.current {
    background: var(--vc-accent-primary);
    border: 1.5px solid var(--vc-accent-primary);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.s2a-sb-step-node.future {
    background: var(--vc-bg-hover);
    border: 1.5px solid var(--vc-border);
}

.s2a-sb-step-num {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--vc-font-mono);
}

.s2a-sb-step-info {
    flex: 1;
    min-width: 0;
}

.s2a-sb-step-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.s2a-sb-step-name.done { color: #2DD4BF; }
.s2a-sb-step-name.current { color: var(--vc-text-primary); }
.s2a-sb-step-name.future { color: var(--vc-text-muted); }

.s2a-sb-step-desc {
    font-size: 10px;
    color: var(--vc-text-tertiary);
    margin-top: 1px;
}

/* Nav items */
.s2a-sb-nav {
    padding: 0 8px;
}

.s2a-sb-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--vc-r6);
    color: var(--vc-text-tertiary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
    margin-bottom: 2px;
}

.s2a-sb-nav-item:hover {
    background: var(--vc-bg-hover);
    color: var(--vc-text-primary);
}

.s2a-sb-nav-item svg {
    flex-shrink: 0;
}

/* Sidebar footer — credits + user */
.s2a-sb-footer {
    border-top: 1px solid var(--vc-border);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s2a-sb-credits {
    background: var(--vc-bg-hover);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-r12);
    overflow: hidden;
}

.s2a-sb-credits-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--vc-border);
}

.s2a-sb-credits-label {
    font-size: 11px;
    color: var(--vc-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.s2a-sb-credits-rate {
    font-size: 9px;
    background: var(--vc-accent-bg);
    color: var(--vc-accent-primary);
    padding: 2px 6px;
    border-radius: var(--vc-r4);
    font-weight: 600;
    font-family: var(--vc-font-mono);
}

.s2a-sb-credits-body {
    padding: 8px 12px;
}

.s2a-sb-credits-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--vc-accent-primary);
    font-family: var(--vc-font-mono);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 2px;
}

.s2a-sb-credits-equiv {
    font-size: 9px;
    color: var(--vc-text-tertiary);
}

.s2a-sb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: var(--vc-r8);
    cursor: pointer;
    transition: background 0.12s;
}

.s2a-sb-user:hover {
    background: var(--vc-bg-hover);
}

.s2a-sb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vc-accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.s2a-sb-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--vc-text-primary);
}

.s2a-sb-user-badge {
    font-size: 9px;
    color: #f59e0b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ============================================================================
   DOCUMENT VIEW — matches Screen 5 doc-view styling exactly
   ============================================================================ */
.s2a-content {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    background: var(--vc-bg-page, var(--vc-bg-body));
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Progress pill container at top of document area */
#screen2aProgressPill {
    margin-bottom: 16px;
}

/* Scrollable inner wrapper — mirrors .s5r-doc-scroll */
.s2a-reader-content,
#s2aReaderContent {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    min-height: 0;
}

/* Centered body — mirrors .s5r-doc-body */
.s2a-doc-body {
    max-width: 720px;
    margin: 0 auto;
}

/* Document title — mirrors .s5r-doc-view h1 */
.s2a-doc-title {
    font-size: 29px;
    font-weight: 800;
    color: var(--vc-t1);
    margin: 0 0 22px;
    letter-spacing: -0.02em;
    line-height: 1.25;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Section heading h2 — mirrors .s5r-doc-view h2 */
.s2a-doc-h2 {
    font-size: 22.5px;
    font-weight: 700;
    color: var(--vc-t1);
    margin: 36px 0 14px;
    line-height: 1.3;
}

/* Sub-heading h3 — mirrors .s5r-doc-view h3 */
.s2a-doc-h3 {
    font-size: 19.5px;
    font-weight: 700;
    color: var(--vc-t1);
    margin: 24px 0 10px;
    line-height: 1.35;
}

/* Paragraphs — mirrors .s5r-doc-view p */
.s2a-para {
    font-size: 19.5px;
    line-height: 1.75;
    color: var(--vc-t1);
    margin: 0 0 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.s2a-para:last-of-type {
    margin-bottom: 0;
}

/* Reduce gap between heading and immediately following paragraph */
.s2a-doc-h2 + .s2a-para,
.s2a-doc-h3 + .s2a-para {
    margin-top: 0;
}

/* URL lines — mirrors .s5r-doc-url-line */
.s2a-doc-url {
    font-size: 14.5px;
    color: var(--vc-t4);
    word-break: break-all;
    margin: 2px 0 10px;
    white-space: normal;
    font-family: var(--vc-font-mono);
}

.s2a-doc-url-link {
    color: var(--vc-t4);
    text-decoration: none;
    transition: color 0.12s;
}

.s2a-doc-url-link:hover {
    color: var(--vc-accent, #7C6FEE);
    text-decoration: underline;
}

/* Custom scrollbar — matches Screen 5 */
#s2aReaderContent::-webkit-scrollbar { width: 6px; }
#s2aReaderContent::-webkit-scrollbar-track { background: transparent; }
#s2aReaderContent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }
#s2aReaderContent::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ============================================================================
   CLAIM HIGHLIGHTS — uses Screen 5 .s5r-claim-hl pattern exactly
   Colored background + bottom border, stronger on hover/selected
   ============================================================================ */
/* .s2a-claim-underline kept as alias for any legacy references */
.s2a-claim-underline, .s5r-claim-hl {
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 3px;
    border-bottom: none;
    font-size: inherit;
    line-height: 1.75;
    position: relative;
    transition: background 0.15s, box-shadow 0.15s;
    display: inline;
}

/* Ready claims - green (matches s5r-claim-hl[data-verdict="supported"]) */
.s2a-underline-ready {
    background: rgba(62, 207, 142, 0.18);
    color: var(--vc-t1);
    border-bottom: 2px solid rgba(62, 207, 142, 0.50);
}
.s2a-underline-ready:hover {
    background: rgba(62, 207, 142, 0.22);
}
.s2a-underline-ready.active,
.s2a-underline-ready.selected {
    background: rgba(62, 207, 142, 0.20);
    border-bottom: 2.5px solid var(--vc-green);
    outline: 1px solid rgba(62, 207, 142, 0.28);
}

/* Needs review claims - amber (matches s5r-claim-hl[data-verdict="partial"]) */
.s2a-underline-review,
.s2a-underline-warning {
    background: rgba(240, 180, 41, 0.16);
    color: var(--vc-t1);
    border-bottom: 2px solid rgba(240, 180, 41, 0.45);
}
.s2a-underline-review:hover,
.s2a-underline-warning:hover {
    background: rgba(240, 180, 41, 0.20);
}
.s2a-underline-review.active,
.s2a-underline-review.selected,
.s2a-underline-warning.active,
.s2a-underline-warning.selected {
    background: rgba(240, 180, 41, 0.20);
    border-bottom: 2.5px solid var(--vc-amber);
    outline: 1px solid rgba(240, 180, 41, 0.28);
}

/* Missing source claims - red (matches s5r-claim-hl[data-verdict="unsupported"]) */
.s2a-underline-missing {
    background: rgba(248, 113, 113, 0.16);
    color: var(--vc-t1);
    border-bottom: 2px solid rgba(248, 113, 113, 0.45);
    position: relative;
}
.s2a-underline-missing:hover {
    background: rgba(248, 113, 113, 0.20);
}
.s2a-underline-missing.active,
.s2a-underline-missing.selected {
    background: rgba(248, 113, 113, 0.20);
    border-bottom: 2.5px solid var(--vc-red);
    outline: 1px solid rgba(248, 113, 113, 0.28);
}

/* Numbered claim pill — now uses Screen 5's .s5r-claim-pill directly; keep alias for any legacy references */
.s2a-claim-pill, .s5r-claim-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 2px;
    vertical-align: super;
    position: relative;
    top: -1px;
    line-height: 1;
    font-family: var(--vc-font-mono);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.s2a-claim-pill:hover, .s5r-claim-pill:hover {
    transform: scale(1.15);
}

/* Verdict-colored pill backgrounds */
.s2a-claim-pill[data-verdict="supported"],
.s5r-claim-pill[data-verdict="supported"]    { background: var(--vc-status-supported); }
.s2a-claim-pill[data-verdict="partial"],
.s5r-claim-pill[data-verdict="partial"]      { background: var(--vc-status-partial); }
.s2a-claim-pill[data-verdict="unsupported"],
.s5r-claim-pill[data-verdict="unsupported"]  { background: var(--vc-status-unsupported); color: #fff; }
.s2a-claim-pill[data-verdict="unverifiable"],
.s5r-claim-pill[data-verdict="unverifiable"] { background: #78909c; color: #fff; }

/* Excluded claims — grey, muted, line-through */
.s2a-claim-underline.s2a-excluded,
.s5r-claim-hl.s2a-excluded {
    text-decoration: line-through;
    opacity: 0.45;
    background: rgba(120, 130, 150, 0.08) !important;
    border-bottom-color: #78909c;
}
.s5r-claim-hl.s2a-excluded .s5r-claim-pill {
    background: #78909c !important;
    color: #fff !important;
}
/* Excluded verdict in sidebar */
.s5sb-verdict-dot.s5sb-dot-excluded { background: #78909c; }
.s5sb-verdict-count.s5sb-count-excluded { color: #78909c; }

/* Filter hidden — removes highlight/pill but keeps text visible as plain text */
.s5r-claim-hl.s2a-filter-hidden {
    background: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
    cursor: text;
    pointer-events: none;
}
.s5r-claim-hl.s2a-filter-hidden .s5r-claim-pill {
    display: none;
}

/* ============================================================================
   CLAIMS LIST VIEW — "Claims" mode card layout
   ============================================================================ */
.s2a-cl-card {
    padding: 14px 18px;
    margin-bottom: 8px;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.s2a-cl-card:hover {
    border-color: rgba(124,111,238,0.3);
    background: var(--vc-bg-surface-hover);
}
.s2a-cl-card.s2a-cl-active {
    border-color: var(--vc-accent, #7C6FEE);
    background: rgba(124,111,238,0.08);
    box-shadow: 0 0 0 1px rgba(124,111,238,0.15);
}
.s2a-cl-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.s2a-cl-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--vc-t2);
}
.s2a-cl-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.s2a-cl-badge-supported { background: var(--vc-status-supported-bg); color: var(--vc-green); border: 1px solid var(--vc-status-supported-border); }
.s2a-cl-badge-partial   { background: var(--vc-status-partial-bg);   color: var(--vc-amber); border: 1px solid var(--vc-status-partial-border); }
.s2a-cl-badge-unsupported { background: var(--vc-status-unsupported-bg); color: var(--vc-red); border: 1px solid var(--vc-status-unsupported-border); }
.s2a-cl-badge-unverifiable { background: var(--vc-status-unverifiable-bg); color: var(--vc-t3); border: 1px solid var(--vc-status-unverifiable-border); }
.s2a-cl-ref {
    font-size: 11px;
    color: var(--vc-t4);
    font-family: var(--vc-font-mono);
    margin-left: auto;
}
.s2a-cl-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vc-t2);
}

/* ============================================================================
   INHERITED CLAIMS - Phase 2
   ============================================================================ */
.s2a-underline-inherited {
    border-bottom: 2px dashed rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.03);
    position: relative;
}

.s2a-underline-inherited:hover {
    background: rgba(20, 184, 166, 0.08);
    border-bottom-color: #14b8a6;
}

.s2a-underline-inherited.active,
.s2a-underline-inherited.selected {
    background: rgba(20, 184, 166, 0.12);
    border-bottom-width: 3px;
    border-bottom-color: #14b8a6;
}

.s2a-inherited-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(20, 184, 166, 0.2);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 4px;
    color: #14b8a6;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    vertical-align: middle;
}

.s2a-inherited-badge svg {
    width: 10px;
    height: 10px;
}

.s2a-inheritance-confidence {
    font-size: 11px;
    color: var(--vc-text-muted);
    margin-left: 8px;
}

.s2a-inheritance-confidence.high { color: var(--vc-status-supported); }
.s2a-inheritance-confidence.medium { color: #14b8a6; }
.s2a-inheritance-confidence.low { color: var(--vc-status-partial); }

.s2a-inherited-from {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--vc-text-muted);
    padding: 6px 10px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 6px;
    margin-bottom: 8px;
}

.s2a-inherited-from svg {
    width: 14px;
    height: 14px;
    color: #14b8a6;
}

.s2a-inherited-from-ref {
    font-weight: 600;
    color: #14b8a6;
}

.s2a-matched-phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.s2a-matched-phrase {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--vc-bg-input);
    border: 1px solid var(--vc-border-emphasis);
    border-radius: 4px;
    color: var(--vc-text-muted);
}

/* ============================================================================
   ORPHAN CITATIONS - Phase 4
   ============================================================================ */
.s2a-underline-orphan {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: rgba(248, 113, 113, 0.7);
    text-decoration-thickness: 2px;
    position: relative;
}

.s2a-underline-orphan:hover {
    background: rgba(248, 113, 113, 0.12);
    text-decoration-color: var(--vc-status-unsupported);
}

.s2a-underline-orphan.active,
.s2a-underline-orphan.selected {
    background: rgba(248, 113, 113, 0.18);
    text-decoration-thickness: 3px;
    text-decoration-color: var(--vc-status-unsupported);
}

.s2a-orphan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(248, 113, 113, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 4px;
    color: var(--vc-status-unsupported);
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.s2a-status-orphan {
    background: rgba(248, 113, 113, 0.2);
    color: var(--vc-status-unsupported);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.s2a-orphan-ref { color: var(--vc-status-unsupported); font-weight: 500; }

.s2a-fallback-orphan {
    border-left: 3px solid rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.05);
}

.s2a-orphan-from {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--vc-text-secondary);
    padding: 8px 12px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--vc-r8);
    margin-bottom: 8px;
}

.s2a-orphan-from svg { width: 16px; height: 16px; color: var(--vc-status-unsupported); flex-shrink: 0; }
.s2a-orphan-ref-display { font-weight: 600; color: var(--vc-status-unsupported); }
.s2a-orphan-reason { color: var(--vc-text-muted); font-size: 11px; margin-left: 4px; }

/* Validation warnings banner */
.s2a-validation-warnings {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(240, 180, 41, 0.08);
    border: 1px solid rgba(240, 180, 41, 0.15);
    border-radius: var(--vc-r8);
    margin-bottom: 16px;
}

.s2a-warnings-icon { flex-shrink: 0; }
.s2a-warnings-icon svg { width: 18px; height: 18px; color: var(--vc-status-partial); }
.s2a-warnings-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--vc-text-secondary); }
.s2a-warnings-text span { display: block; }

/* ============================================================================
   FOOTNOTE CITATIONS - Phase 5
   ============================================================================ */
.s2a-underline-footnote {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(168, 85, 247, 0.7);
    text-decoration-thickness: 2px;
    position: relative;
}

.s2a-underline-footnote:hover {
    background: rgba(168, 85, 247, 0.12);
    text-decoration-color: #a855f7;
}

.s2a-underline-footnote.active,
.s2a-underline-footnote.selected {
    background: rgba(168, 85, 247, 0.18);
    text-decoration-thickness: 3px;
    text-decoration-color: #a855f7;
}

.s2a-footnote-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 4px;
    color: #a855f7;
    margin-left: 4px;
    vertical-align: super;
    line-height: 1;
}

.s2a-status-footnote {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.s2a-footnote-ref { color: #a855f7; font-weight: 600; font-size: 14px; }

.s2a-fallback-footnote {
    border-left: 3px solid rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.05);
}

.s2a-footnote-from {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--vc-text-secondary);
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: var(--vc-r8);
    margin-bottom: 8px;
}

.s2a-footnote-marker-display { font-size: 18px; font-weight: 700; color: #a855f7; min-width: 24px; text-align: center; }
.s2a-footnote-label { font-weight: 500; color: var(--vc-text-primary); }
.s2a-footnote-resolved { color: var(--vc-status-supported); font-size: 11px; margin-left: auto; }
.s2a-footnote-unresolved { color: var(--vc-text-muted); font-size: 11px; margin-left: auto; font-style: italic; }

/* ============================================================================
   AUTHOR-YEAR CITATIONS - Phase 6
   ============================================================================ */
.s2a-underline-author-year {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: rgba(96, 165, 250, 0.7);
    text-decoration-thickness: 2px;
    position: relative;
}

.s2a-underline-author-year:hover {
    background: rgba(96, 165, 250, 0.12);
    text-decoration-color: #60a5fa;
}

.s2a-underline-author-year.active,
.s2a-underline-author-year.selected {
    background: rgba(96, 165, 250, 0.18);
    text-decoration-thickness: 3px;
    text-decoration-color: #60a5fa;
}

.s2a-underline-author-year-unmatched {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(240, 180, 41, 0.7);
    text-decoration-thickness: 2px;
    position: relative;
}

.s2a-underline-author-year-unmatched:hover {
    background: rgba(240, 180, 41, 0.12);
    text-decoration-color: var(--vc-status-partial);
}

.s2a-underline-author-year-unmatched.active,
.s2a-underline-author-year-unmatched.selected {
    background: rgba(240, 180, 41, 0.18);
    text-decoration-thickness: 3px;
    text-decoration-color: var(--vc-status-partial);
}

.s2a-author-year-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-style: italic;
    padding: 2px 8px;
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 4px;
    color: #60a5fa;
    margin-left: 6px;
    vertical-align: middle;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s2a-author-year-badge.s2a-author-year-unmatched {
    background: rgba(240, 180, 41, 0.15);
    border-color: rgba(240, 180, 41, 0.3);
    color: var(--vc-status-partial);
}

.s2a-status-author-year { background: rgba(96, 165, 250, 0.2); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); }
.s2a-status-author-year-unmatched { background: rgba(240, 180, 41, 0.2); color: var(--vc-status-partial); border: 1px solid rgba(240, 180, 41, 0.3); }
.s2a-author-year-ref { color: #60a5fa; font-style: italic; font-size: 12px; }
.s2a-author-year-ref.s2a-author-year-unmatched { color: var(--vc-status-partial); }

.s2a-fallback-author-year {
    border-left: 3px solid rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.05);
}

.s2a-author-year-from {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--vc-text-secondary);
    padding: 10px 14px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: var(--vc-r8);
    margin-bottom: 8px;
}

.s2a-author-year-from.s2a-author-year-unmatched {
    background: rgba(240, 180, 41, 0.1);
    border-color: rgba(240, 180, 41, 0.25);
}

.s2a-author-year-citation-display { font-weight: 600; font-style: italic; color: #60a5fa; font-size: 14px; }
.s2a-author-year-unmatched .s2a-author-year-citation-display { color: var(--vc-status-partial); }
.s2a-author-year-details { display: flex; align-items: center; gap: 6px; color: var(--vc-text-secondary); font-size: 12px; }
.s2a-author-name { font-weight: 500; }
.s2a-author-year-year { color: var(--vc-text-muted); }
.s2a-author-year-matched { color: var(--vc-status-supported); font-size: 11px; margin-left: auto; }
.s2a-author-year-not-matched { color: var(--vc-status-partial); font-size: 11px; margin-left: auto; }

.s2a-author-year-title {
    width: 100%;
    color: var(--vc-text-muted);
    font-size: 11px;
    font-style: normal;
    padding-top: 6px;
    border-top: 1px solid var(--vc-border-emphasis);
    margin-top: 4px;
}

/* ============================================================================
   RIGHT PANEL — Claim Inspector (Screen 5 side-panel pattern)
   ============================================================================ */
.s2a-claim-panel,
.s2a-panel {
    width: 420px;
    flex-shrink: 0;
    background: var(--vc-bg-surface);
    border-left: 1px solid var(--vc-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    animation: s2aSlideInRight 0.3s ease;
}

.s2a-claim-panel.collapsed,
.s2a-panel.collapsed {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

/* Panel header — Screen 5 nav pattern: < Claim X of Y > + close */
.s2a-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid var(--vc-border);
    flex-shrink: 0;
}

.s2a-panel-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.s2a-panel-nav-btn {
    width: 24px;
    height: 24px;
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: none;
    border-radius: 5px;
    color: var(--vc-t3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.12s, background 0.12s;
}

.s2a-panel-nav-btn:hover {
    background: var(--vc-bg-hover);
    color: var(--vc-t1);
}

.s2a-panel-counter {
    font-size: 13px;
    color: var(--vc-t3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
}

.s2a-panel-close {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: none;
    color: var(--vc-t3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

.s2a-panel-close:hover {
    color: var(--vc-t1);
    background: var(--vc-bg-hover);
}

/* Status badge in header — sits after the nav arrows and counter */
.s2a-panel-nav .s2a-panel-status {
    margin-left: 8px;
}

/* Actions row below header — Edit, Save, Exclude, Mark as Reviewed */
.s2a-panel-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

/* Legacy — keep for any old references */
.s2a-panel-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.s2a-panel-source {
    font-size: 12px;
    color: var(--vc-t3);
    padding: 3px 8px;
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-r6);
    font-family: var(--vc-font-mono);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s2a-panel-status {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.s2a-status-ready {
    background: var(--vc-status-supported-bg);
    color: var(--vc-status-supported);
    border: 1px solid var(--vc-status-supported-border);
}

.s2a-status-warning,
.s2a-status-review {
    background: var(--vc-status-partial-bg);
    color: var(--vc-status-partial);
    border: 1px solid var(--vc-status-partial-border);
}

.s2a-status-missing {
    background: var(--vc-status-unsupported-bg);
    color: var(--vc-status-unsupported);
    border: 1px solid var(--vc-status-unsupported-border);
}

.s2a-status-excluded {
    background: var(--vc-status-unverifiable-bg);
    color: var(--vc-status-unverifiable);
    border: 1px solid var(--vc-status-unverifiable-border);
}

.s2a-status-inherited {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
    border: 1px solid rgba(20, 184, 166, 0.2);
}

/* Panel body — scrollable */
.s2a-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Action toolbar — fixed at panel bottom */
.s2a-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--vc-border);
    flex-shrink: 0;
    background: var(--vc-bg-surface);
}

.s2a-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vc-t3);
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: 1px solid var(--vc-border);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
    font-family: var(--vc-font-sans);
}

.s2a-action-btn:hover {
    color: var(--vc-t1);
    background: var(--vc-bg-hover);
}

.s2a-action-btn.s2a-action-danger:hover {
    color: var(--vc-red);
    border-color: rgba(248, 113, 113, 0.3);
}

.s2a-action-btn.s2a-action-save {
    color: var(--vc-green);
    border-color: rgba(62, 207, 142, 0.3);
}

.s2a-action-btn.s2a-action-approve {
    color: var(--vc-green);
    border-color: rgba(62, 207, 142, 0.3);
}

.s2a-action-btn.s2a-action-approve:hover {
    background: rgba(62, 207, 142, 0.1);
}

/* ============================================================================
   WORLD-CLASS ACTION BUTTONS — pill-style with color coding
   ============================================================================ */
.s2a-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--vc-font-sans);
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.s2a-act-btn svg {
    flex-shrink: 0;
}

/* Edit — subtle neutral */
.s2a-act-edit {
    color: var(--vc-t2);
    background: rgba(255, 255, 255, 0.06);
}
.s2a-act-edit:hover {
    color: var(--vc-t1);
    background: rgba(255, 255, 255, 0.10);
}

/* Save — green accent */
.s2a-act-save {
    color: #1a1a2e;
    background: var(--vc-green, #3ECF8E);
}
.s2a-act-save:hover {
    background: #34b87d;
    box-shadow: 0 2px 8px rgba(62, 207, 142, 0.3);
}

/* Exclude — red-tinted */
.s2a-act-exclude {
    color: var(--vc-t3);
    background: rgba(248, 113, 113, 0.08);
}
.s2a-act-exclude:hover {
    color: var(--vc-red, #F87171);
    background: rgba(248, 113, 113, 0.15);
}

/* Mark as Reviewed — green-tinted */
.s2a-act-approve {
    color: var(--vc-green, #3ECF8E);
    background: rgba(62, 207, 142, 0.10);
}
.s2a-act-approve:hover {
    color: #fff;
    background: rgba(62, 207, 142, 0.25);
}

/* Divider between action buttons and undo */
.s2a-act-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.10);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Undo/Revert — always clickable */
.s2a-act-revert {
    color: var(--vc-t3, #9B97B0);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.s2a-act-revert:hover {
    color: var(--vc-t1);
    background: rgba(255, 255, 255, 0.10);
}
/* Dimmed when nothing to undo */
.s2a-act-revert-inactive {
    opacity: 0.45;
}
.s2a-act-revert-inactive:hover {
    opacity: 0.65;
}

/* Active state — claim has been modified, undo is available */
.s2a-act-revert-active {
    color: var(--vc-amber, #F0B429);
    background: rgba(240, 180, 41, 0.10);
    border: 1px solid rgba(240, 180, 41, 0.30);
    animation: s2a-revert-pulse 2s ease-in-out 1;
}
.s2a-act-revert-active:hover {
    color: #fff;
    background: rgba(240, 180, 41, 0.22);
    border-color: rgba(240, 180, 41, 0.50);
    box-shadow: 0 2px 10px rgba(240, 180, 41, 0.20);
}

@keyframes s2a-revert-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0.4); }
    50%  { box-shadow: 0 0 0 6px rgba(240, 180, 41, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
}

/* Top actions container (Edit/Exclude/Save) — pushed right in status row */
.s2a-panel-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Footer bar — ready count pinned at bottom of panel */
.s2a-panel-footer-bar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid var(--vc-border);
    flex-shrink: 0;
    background: var(--vc-bg-surface);
}

/* Add Claim button in exec bar */
.s2a-eb-add-claim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vc-t2);
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: 1px solid var(--vc-border);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    font-family: var(--vc-font-sans);
    white-space: nowrap;
    margin-left: 8px;
}

.s2a-eb-add-claim:hover {
    color: var(--vc-t1);
    background: var(--vc-bg-hover);
    border-color: rgba(124, 111, 238, 0.3);
}

.s2a-eb-add-claim svg {
    color: var(--vc-accent, #7C6FEE);
}

/* Section divider — matches Screen 5 .s5r-doc-hr */
.s2a-doc-hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 24px 0;
}

/* Review/missing/excluded highlight classes — no extra styling in panel, left border handles it */
.s2a-claim-highlight-review,
.s2a-claim-highlight-missing {
    /* intentionally empty — panel text box left-border indicates status */
}
.s2a-claim-highlight-excluded {
    color: #78909c;
    text-decoration: line-through;
    opacity: 0.6;
}

/* Yellow left border on panel text for review claims */
.s2a-panel-text.s2a-panel-text-review {
    border-left-color: var(--vc-amber, #F0B429);
}

/* Red left border on panel text for missing claims */
.s2a-panel-text.s2a-panel-text-missing {
    border-left-color: var(--vc-red, #F87171);
}

/* Grey left border on panel text for excluded claims */
.s2a-panel-text.s2a-panel-text-excluded {
    border-left-color: #78909c;
    opacity: 0.6;
}

.s2a-panel-ready-count {
    margin-left: auto;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Panel section labels */
.s2a-panel-sec {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--vc-text-tertiary);
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Panel label */
.s2a-panel-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--vc-text-tertiary);
    margin-bottom: 10px;
}

/* Panel card — generic card inside panel */
.s2a-panel-card {
    background: var(--vc-bg-hover);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-r12);
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* Claim text display */
.s2a-panel-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--vc-text-evidence);
    font-style: italic;
    padding: 14px 16px;
    background: var(--vc-bg-hover);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-r12);
    border-left: 3px solid var(--vc-status-supported);
}

.s2a-panel-edit-input {
    width: 100%;
    min-height: 160px;
    padding: 14px 16px;
    background: var(--vc-bg-hover);
    border: 1px solid var(--vc-accent-border);
    border-radius: var(--vc-r12);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--vc-text-primary);
    resize: vertical;
}

.s2a-panel-edit-input:focus {
    outline: none;
    border-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

/* Guidance panel */
.s2a-guidance-panel {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--vc-bg-hover);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-r12);
    border-left: 3px solid var(--vc-accent-primary);
}

.s2a-guidance-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vc-text-secondary);
}

.s2a-panel-hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--vc-text-disabled);
    font-style: italic;
}

/* Action buttons */
.s2a-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--vc-r8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.s2a-btn-edit {
    border-color: var(--vc-border-hover);
    background: transparent;
    color: var(--vc-text-secondary);
}

.s2a-btn-edit:hover {
    background: var(--vc-bg-hover);
    color: var(--vc-text-primary);
    border-color: var(--vc-border-emphasis);
}

.s2a-btn-add-claim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--vc-r8);
    font-size: 13px;
    font-weight: 600;
    color: white;
    background: var(--vc-accent-gradient);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--vc-accent-shadow);
}

.s2a-btn-add-claim:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.s2a-btn-add-claim svg {
    width: 14px;
    height: 14px;
}

.s2a-btn-reject {
    border: 1px solid rgba(248, 113, 113, 0.25);
    background: var(--vc-status-unsupported-bg);
    color: var(--vc-status-unsupported);
}

.s2a-btn-reject:hover {
    background: rgba(248, 113, 113, 0.12);
}

.s2a-btn-save {
    border-color: var(--vc-border-hover);
    background: transparent;
    color: var(--vc-status-supported);
    display: none;
}

.s2a-btn-save.visible {
    display: inline-flex;
}

.s2a-btn-accept {
    background: var(--vc-status-supported-bg);
    color: var(--vc-status-supported);
    border: 1px solid var(--vc-status-supported-border);
}

.s2a-btn-accept:hover {
    background: rgba(62, 207, 142, 0.12);
}

.s2a-btn-prev,
.s2a-btn-next {
    background: var(--vc-bg-input);
    color: var(--vc-text-secondary);
    border-color: var(--vc-border-emphasis);
}

.s2a-btn-prev:hover,
.s2a-btn-next:hover {
    background: var(--vc-bg-hover);
    color: var(--vc-text-primary);
}

/* Panel footer */
.s2a-panel-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--vc-border);
    flex-shrink: 0;
}

/* ============================================================================
   MISSING CLAIMS SECTION
   ============================================================================ */
.s2a-missing-section {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px dashed var(--vc-border-emphasis);
}

.s2a-missing-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--vc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--vc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.s2a-missing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s2a-missing-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--vc-bg-input);
    border-radius: var(--vc-r8);
    cursor: pointer;
    transition: all 0.15s;
}

.s2a-missing-item:hover {
    background: var(--vc-border-default);
}

.s2a-missing-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vc-border-emphasis);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--vc-text-secondary);
}

.s2a-missing-text {
    font-size: 14px;
    color: var(--vc-text-secondary);
    line-height: 1.5;
}

/* Multi-claim indicator */
.s2a-multi-claim {
    cursor: help;
    position: relative;
}

.s2a-claim-count {
    display: inline-block;
    background: linear-gradient(135deg, var(--vc-status-supported) 0%, #059669 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 2px;
    vertical-align: super;
    line-height: 1;
    box-shadow: var(--vc-shadow-sm);
}

.s2a-multi-claim.active .s2a-claim-count,
.s2a-multi-claim.selected .s2a-claim-count {
    background: var(--vc-accent-gradient);
    animation: s2aPulse 1.5s ease-in-out infinite;
}

@keyframes s2aPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* ============================================================================
   BOTTOM FOOTER — navigation (Screen 5 pattern)
   ============================================================================ */
.s2a-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    min-height: 60px;
    border-top: 1px solid var(--vc-border);
    background: var(--vc-bg-surface);
    flex-shrink: 0;
}

/* Back button */
.s2a-footer .vc-btn-back,
#s2aBackBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vc-text-secondary);
    padding: 10px 18px;
    border-radius: var(--vc-r8);
    border: 1px solid var(--vc-border-hover);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.s2a-footer .vc-btn-back:hover,
#s2aBackBtn:hover {
    background: var(--vc-bg-hover);
    color: var(--vc-text-primary);
}

/* Continue button */
.s2a-footer .vc-btn-continue,
#s2aContinueBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    padding: 11px 28px;
    border-radius: var(--vc-r12);
    border: none;
    background: linear-gradient(135deg, #0D9373, #0a7a60);
    box-shadow: 0 4px 16px rgba(13, 147, 115, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.s2a-footer .vc-btn-continue:hover,
#s2aContinueBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(13, 147, 115, 0.4);
}

/* Legacy navigation section (still used) */
.vc-navigation-section {
    display: none;
}

/* Claim context display */
.s2a-context-text {
    color: var(--vc-text-disabled);
    font-style: italic;
}

.s2a-claim-highlight {
    color: var(--vc-text-primary);
}

/* Info message (banner) */
.s2a-info-container {
    margin-bottom: 16px;
}

.s2a-info-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(129, 140, 248, 0.06);
    border: 1px solid rgba(129, 140, 248, 0.12);
    border-radius: var(--vc-r12);
    font-size: 14px;
    line-height: 1.5;
    color: var(--vc-text-secondary);
    transition: all 0.3s ease;
}

.s2a-info-message svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--vc-accent-primary);
}

.s2a-highlight-green {
    color: var(--vc-status-supported);
    font-weight: 600;
}

.s2a-highlight-orange {
    color: var(--vc-status-partial);
    font-weight: 600;
}

/* Filter state classes */
.s2a-legend-stat {
    display: flex;
    align-items: baseline;
    gap: 5px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--vc-r6);
    transition: background 0.15s;
}

.s2a-legend-stat:hover {
    background: var(--vc-bg-hover);
}

.s2a-legend-stat.s2a-filter-active {
    background: var(--vc-border-emphasis);
    box-shadow: 0 0 0 2px var(--vc-border-emphasis);
}

.s2a-legend-stat.s2a-legend-ready.s2a-filter-active {
    background: rgba(62, 207, 142, 0.12);
    box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.25);
}

.s2a-legend-stat.s2a-legend-review.s2a-filter-active {
    background: rgba(240, 180, 41, 0.12);
    box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.25);
}

.s2a-legend-stat.s2a-legend-missing.s2a-filter-active {
    background: rgba(248, 113, 113, 0.12);
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}

.s2a-legend-icon { font-size: 14px; margin-right: 2px; }
.s2a-legend-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s2a-legend-label { font-size: 12px; color: var(--vc-text-tertiary); }

/* Loading state */
.s2a-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--vc-text-disabled);
    font-size: 14px;
}

/* Accessibility */
.s2a-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1200px) {
    .s2a-sidebar { width: 220px; }
    .s2a-eb-brand { width: 220px; }
}

@media (max-width: 900px) {
    .s2a-sidebar { display: none; }
    .s2a-eb-brand { display: none; }
    .s2a-claim-panel,
    .s2a-panel {
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 40;
    }
}

@media (max-width: 768px) {
    .s2a-content { padding: 20px; }
    .s2a-eb-center { position: static; transform: none; }
    .s2a-eb-verdicts { display: none; }
    .s2a-eb-zoom { display: none; }
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */
[data-theme="light"] .s2a-exec-bar {
    background: var(--vc-bg-surface);
}

[data-theme="light"] .s2a-sidebar {
    background: var(--vc-bg-surface);
}

[data-theme="light"] .s2a-content {
    background: var(--vc-bg-body);
}

[data-theme="light"] .s2a-claim-panel,
[data-theme="light"] .s2a-panel {
    background: var(--vc-bg-surface);
}

[data-theme="light"] .s2a-panel-text {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--vc-border-default);
}

[data-theme="light"] .s2a-panel-edit-input {
    background: var(--vc-bg-input);
    color: var(--vc-text-primary);
}

[data-theme="light"] .s2a-panel-card {
    background: var(--vc-bg-surface);
}

/* ============================================================================
   ADD CLAIM — Source Reference Input
   ============================================================================ */
.s2a-source-ref-block {
    margin-bottom: 10px;
}

.s2a-source-ref-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}

.s2a-source-ref-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--vc-bg-hover);
    border: 1px solid var(--vc-accent-border);
    border-radius: var(--vc-r8);
    font-size: 13px;
    color: var(--vc-text-primary);
    box-sizing: border-box;
}

.s2a-source-ref-input:focus {
    outline: none;
    border-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.s2a-source-ref-warning {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--vc-red, #F87171);
}

/* ============================================================================
   SIDEBAR — Verdict Stats Section
   ============================================================================ */
.s2a-verdict-divider {
    border: none;
    border-top: 1px solid var(--ps-border, rgba(255,255,255,0.06));
    margin: 8px 12px;
}

.s2a-sidebar-verdicts {
    padding: 0 12px;
    margin-top: 4px;
}

.s2a-sidebar-verdicts .s5sb-sec {
    padding: 0 2px;
}

.s2a-sidebar-verdicts .s5sb-verdict-row {
    cursor: pointer;
}

.s2a-sidebar-verdicts .s5sb-verdict-row:hover {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

/* ============================================================================
   CITED / DISCOVERED BADGES
   Indigo = citations (CITED), Teal = discovery (DISCOVERED)
   ============================================================================ */

.s2a-badge-cited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(129, 140, 248, 0.12);
    color: #818CF8;
    border: 1px solid rgba(129, 140, 248, 0.25);
}

.s2a-badge-discovered {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(45, 212, 191, 0.10);
    color: #2DD4BF;
    border: 1px solid rgba(45, 212, 191, 0.20);
}

/* Inline "D" badge for DISCOVERED claims in annotated document view */
.s2a-badge-discovered-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    background: rgba(45, 212, 191, 0.15);
    color: #2DD4BF;
    border: 1px solid rgba(45, 212, 191, 0.25);
    margin-left: 2px;
    vertical-align: super;
    line-height: 1;
}

/* Override button in right panel */
.s2a-override-citation-status:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* Light mode — darker teal for progress steps */
[data-theme="light"] .s2a-sb-step-node.done {
    background: #0F766E;
    border-color: #0F766E;
}
[data-theme="light"] .s2a-sb-step-name.done {
    color: #0F766E;
}