/* ============================================================================
   HealthPlanAPI Customer Portal — Global Styles
   ============================================================================ */

:root {
    --portal-sidebar-width: 240px;
    --portal-radius: 8px;
    --portal-radius-lg: 14px;
    --portal-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --portal-shadow-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
    --portal-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── General ── */
html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    /*
       Reserve space for the vertical scrollbar at all times so the layout width
       stays constant when switching between long pages (scrollbar visible) and
       short pages (no scrollbar). Without this, tabs like Extracted Benefits →
       Traceability cause the content to squeeze/expand horizontally. Supported
       in Chromium/Edge/Firefox; Safari will no-op and fall back to its prior
       behavior, which is fine.
    */
    scrollbar-gutter: stable;
}

/* ── Shell layout ── */
.portal-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Content area ── */
.portal-content {
    flex: 1;
    margin-left: var(--portal-sidebar-width);
    padding: 28px 36px;
    min-height: 100vh;
    background: var(--mud-palette-background);
}

/* ============================================================================
   Sidebar — pure HTML/CSS, no MudDrawer
   ============================================================================ */
.portal-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--portal-sidebar-width);
    height: 100vh;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1100;
}

/* ── Brand ── */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, #4A73DC, #0FA97A);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(74,115,220,0.25);
    flex-shrink: 0;
}

.sidebar-logo-letter {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.sidebar-brand-text {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.sidebar-brand-accent {
    color: var(--mud-palette-primary);
}

/* ── Divider ── */
.sidebar-divider {
    height: 1px;
    background: var(--mud-palette-divider);
    margin: 0 16px;
    flex-shrink: 0;
}

/* ── Nav section ── */
.sidebar-nav {
    padding: 8px 10px;
    flex-shrink: 0;
}

.sidebar-nav-bottom {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ── Nav links ── */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    margin-bottom: 2px;
    transition: background var(--portal-transition), color var(--portal-transition);
}

.sidebar-link:hover {
    background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04));
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--mud-palette-primary);
    background: rgba(74, 115, 220, 0.1);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ── Spacer ── */
.sidebar-spacer {
    flex: 1;
}

/* ── Theme toggle (whole row clickable — uses .sidebar-link for geometry) ── */
/* The button now lives INSIDE .sidebar-nav and carries the .sidebar-link
   class, so padding/gap/radius/hover are inherited. This class only needs
   to strip default <button> chrome that .sidebar-link (designed for <a>)
   doesn't reset. */
.sidebar-theme-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    /* Browsers default <button> flex to justify-content:center —
       override to match <a class="sidebar-link"> which defaults
       to flex-start. box-sizing:border-box so width:100% includes
       padding (matches how block-level <a> tags naturally fill). */
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    /* Extra breathing room above (separate from Help link) and
       below (gap before the tenant footer's border-top). */
    margin-top: 4px;
    margin-bottom: 6px;
}

.sidebar-theme-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.sidebar-theme-label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.75;
    color: var(--mud-palette-text-secondary);
}

/* ── Tenant footer ── */
.sidebar-tenant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.sidebar-tenant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(74, 115, 220, 0.12);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-tenant-info {
    overflow: hidden;
}

.sidebar-tenant-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-tenant-plan {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

/* ============================================================================
   Auth pages (split layout — no sidebar)
   ============================================================================ */
.auth-shell {
    min-height: 100vh;
    display: flex;
}

.auth-brand-panel {
    width: 45%;
    min-height: 100vh;
    background: linear-gradient(160deg, #111827 0%, #1E293B 50%, #0F172A 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}

.auth-brand-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(74,115,220,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.auth-brand-panel::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(15,169,122,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: #F7F8FA;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

/* ============================================================================
   Shared components
   ============================================================================ */

/* ── Card patterns ── */
.portal-card {
    border-radius: var(--portal-radius-lg) !important;
    box-shadow: var(--portal-shadow) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    transition: box-shadow var(--portal-transition) !important;
}

/* ── Gradient accent bar ── */
.portal-accent-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    border-radius: 3px 3px 0 0;
}

/* ── Status badges ── */
.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================================
   JSON viewer (Plan Detail → JSON tab)
   ============================================================================ */
.portal-json-viewer {
    margin: 0;
    padding: 16px 18px;
    max-height: 640px;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface, #0E1420);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre;
    tab-size: 2;
}

.portal-json-viewer code {
    font: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 1200px) {
    .portal-content {
        padding: 20px 24px;
    }
}

@media (max-width: 768px) {
    .auth-brand-panel {
        display: none;
    }
    .auth-form-panel {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────
   Glass Box: Traceability split layout + PDF viewer
   Left column: Extraction Events table (scrolls).
   Right column: sticky source-PDF viewer with a
   highlight overlay that flashes on row click.
   ───────────────────────────────────────────── */

/* Split now favors the PDF — it's the evidence, the table is reference.
   On a 1440 viewport that's ~440px table / ~820px PDF. Below 1100px we stack.

   The whole grid pins to the viewport once the user has scrolled past the
   page chrome above. Each column then scrolls *internally* — neither column
   can push the other off-screen, and the grid itself can never grow past
   the viewport height. This replaces the old `.pdf-viewer-pane { sticky }`
   pattern, which broke once the list outgrew the grid's natural height. */
.trace-split-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.8fr) minmax(560px, 1.5fr);
    gap: 24px;
    align-items: stretch;
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
}

.trace-events-col {
    min-width: 0;
    min-height: 0;          /* required for grid/flex children that own a scroll context */
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;       /* contain the inner list scroll to this column */
}

.trace-pdf-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 1100px) {
    /* On narrow viewports stack and fall back to natural page-level scroll —
       fixed-height dual-scroll pattern is noisy below a certain width. */
    .trace-split-grid {
        grid-template-columns: 1fr;
        position: static;
        height: auto;
    }
    .trace-events-col,
    .trace-pdf-col {
        overflow: visible;
    }
    .trace-list {
        overflow: visible !important;
        max-height: none !important;
    }
    .pdf-viewer-pane {
        height: auto;
        min-height: 640px;
    }
}

/* ── Compact "About this extraction" — replaces the old 600px stack of
   Glass Box header + Extraction Summary + Legend + Pipeline Stages. ── */
.trace-about {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    background: linear-gradient(135deg, rgba(74,115,220,0.03), rgba(15,169,122,0.03));
    margin-bottom: 18px;
    cursor: pointer;
    transition: background 0.15s;
}

.trace-about:hover {
    background: linear-gradient(135deg, rgba(74,115,220,0.06), rgba(15,169,122,0.06));
}

.trace-about-chevron {
    transition: transform 0.2s ease;
    opacity: 0.55;
}

.trace-about.expanded .trace-about-chevron {
    transform: rotate(180deg);
}

.trace-about-details {
    padding: 16px 18px 4px 18px;
    margin: -10px 0 18px 0;
    border: 1px solid var(--mud-palette-divider);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: rgba(0,0,0,0.01);
}

/* ── Sticky unblock ──
   position:sticky dies the moment an ancestor has overflow:hidden|auto|scroll.
   MudBlazor's MudTabs and its inner panel wrappers default to clipping their
   content, so the Traceability tab needs these unblocked for the PDF pane's
   sticky behavior to survive all the way through the ancestor chain. */
.mud-tabs .mud-tabs-panels,
.mud-tabs .mud-tab-panel,
.mud-tabs .mud-tabs-tabbar-wrapper-inner,
.mud-tabs-panels,
.mud-tab-panel {
    overflow: visible !important;
}

/* ── PDF viewer pane ──
   No longer sticky — the parent grid is pinned to the viewport and has a
   bounded height, so the pane just fills its column. Inside the pane, only
   the canvas container scrolls; toolbar + field chip stay pinned at the top. */
.pdf-viewer-pane {
    background: #0E1420;
    border: 1px solid #1F2937;
    border-radius: 10px;
    padding: 12px;
    height: 100%;
    min-height: 0;       /* allow the inner canvas to shrink and take its own scroll */
    overflow: hidden;    /* canvas container is the only scroll surface inside */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* PDF toolbar — one compact line, sits above the canvas. */
.pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.pdf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pdf-toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.08);
    margin: 0 4px;
    flex-shrink: 0;
}

.pdf-toolbar-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: #D1D5DB;
    cursor: pointer;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.12s, color 0.12s;
}

.pdf-toolbar-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.pdf-toolbar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pdf-toolbar-page-input {
    width: 36px;
    padding: 3px 4px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: #E6EAF0;
    font-size: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pdf-toolbar-page-input:focus {
    outline: none;
    border-color: #4F7CFF;
}

.pdf-toolbar-label {
    font-size: 11px;
    color: #9CA3AF;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pdf-toolbar-zoom-label {
    min-width: 38px;
    text-align: center;
    font-size: 11px;
    color: #D1D5DB;
    font-variant-numeric: tabular-nums;
}

/* Field info chip — appears above the canvas when a row is selected, mirrors
   the row's color tokens so the visual connection is instant. */
.pdf-field-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(79,124,255,0.12);
    border: 1px solid rgba(79,124,255,0.3);
    font-size: 12px;
    color: #E6EAF0;
    min-height: 32px;
}

.pdf-field-chip-dim {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
    color: #9CA3AF;
    font-style: italic;
}

.pdf-field-chip-value {
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.pdf-field-chip-meta {
    opacity: 0.65;
    font-size: 11px;
}

/* Canvas container — inner scroll-ONLY area. Outer pane is overflow:hidden
   so the toolbar + field chip stay pinned; only the PDF image scrolls. */
.pdf-viewer-canvas-container {
    position: relative;
    display: block;
    border: 1px solid #1F2937;
    border-radius: 8px;
    background: #ffffff;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.pdf-viewer-canvas-container .pdf-viewer-shell {
    position: relative;
    margin: 0 auto;
}

.pdf-viewer-canvas-container .pdf-viewer-canvas {
    display: block;
}

/* Page counter overlay — floats top-right inside the canvas container. */
.pdf-page-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: rgba(14, 20, 32, 0.82);
    color: #E6EAF0;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 4;
    letter-spacing: 0.02em;
}

.pdf-viewer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 12px;
    text-align: center;
    border: 1px dashed #1F2937;
    border-radius: 8px;
    min-height: 220px;
    flex: 1 1 auto;
}

.pdf-viewer-error {
    padding: 16px;
    color: #EF4444;
    font-size: 12px;
}

/* ── Highlight rectangle over the rendered page ── */
.pdf-highlight {
    position: absolute;
    border: 2px solid #4F7CFF;
    background: rgba(79, 124, 255, 0.20);
    border-radius: 3px;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 2px 8px rgba(79, 124, 255, 0.45);
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center;
    transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}

.pdf-highlight.pdf-highlight-visible {
    opacity: 1;
    transform: scale(1);
}

/* Brief pulse animation to pull the eye to the newly selected region. */
.pdf-flash {
    animation: pdfFlash 1.1s ease-out;
}

@keyframes pdfFlash {
    0%   { box-shadow: 0 0 0 8px rgba(79, 124, 255, 0.60), 0 0 0 1px rgba(255,255,255,0.9); background: rgba(79, 124, 255, 0.38); }
    60%  { box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.30), 0 0 0 1px rgba(255,255,255,0.9); background: rgba(79, 124, 255, 0.26); }
    100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 2px 8px rgba(79, 124, 255, 0.45); background: rgba(79, 124, 255, 0.20); }
}

/* ── Plan Header (Plan Detail page) ──
   Compact identity strip + collapsible accumulator pairs. Replaces the
   old 8-card 2×4 grid with 4 paired cards that show both network tiers
   per concept. */
.plan-header-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--mud-palette-divider);
    padding: 5px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.plan-header-toggle:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-divider);
}

.plan-header-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.plan-header-pair-card {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-header-pair-concept {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.plan-header-pair-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.plan-header-pair-tier {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
}

.plan-header-pair-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.plan-header-pair-value-missing {
    font-weight: 500;
    opacity: 0.4;
    font-style: italic;
}

/* ── Extracted Benefits tab ── */

.benefits-filter-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.benefits-filter-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.benefits-filter-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    padding: 4px 0;
    font-family: inherit;
}

.benefits-filter-search-input::placeholder {
    color: rgba(230,234,240,0.4);
}

.benefits-filter-clear {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}

.benefits-filter-clear:hover {
    opacity: 1;
}

.benefits-filter-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    opacity: 0.78;
    flex-wrap: wrap;
}

.benefits-filter-stats strong {
    color: var(--mud-palette-text-primary);
    font-weight: 650;
}

.benefits-filter-divider {
    width: 1px;
    height: 16px;
    background: var(--mud-palette-divider);
}

.benefits-filter-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.benefits-method-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.benefits-empty-state {
    text-align: center;
    padding: 48px 24px;
    opacity: 0.65;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.benefits-filter-clear-cta {
    margin-top: 6px;
    background: transparent;
    border: 1px solid var(--mud-palette-divider);
    color: inherit;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.benefits-filter-clear-cta:hover {
    background: rgba(255,255,255,0.04);
}

.benefits-category {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.008);
}

.benefits-category-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    justify-content: flex-start;
}

.benefits-category-header:hover {
    background: rgba(255,255,255,0.02);
}

.benefits-category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.benefits-category-name {
    font-size: 13px;
    font-weight: 600;
}

.benefits-category-count {
    font-size: 11px;
    opacity: 0.5;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    font-weight: 600;
}

.benefits-category-spacer {
    flex: 1;
}

.benefits-category-chevron {
    opacity: 0.5;
    transition: transform 0.18s ease;
}

.benefits-category.expanded .benefits-category-chevron {
    transform: rotate(180deg);
}

.benefits-category-body {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 4px 0;
}

.benefits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.benefits-table thead th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.5;
    text-align: left;
    padding: 8px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.benefits-col-cost {
    width: 180px;
}

.benefits-col-confidence {
    width: 120px;
    text-align: right !important;
}

.benefits-table tbody tr {
    border-bottom: 1px solid rgba(31,41,55,0.35);
}

.benefits-table tbody tr:last-child {
    border-bottom: none;
}

.benefits-table tbody td {
    padding: 9px 14px;
    vertical-align: middle;
}

.benefits-cell-service {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
}

.benefits-cell-cost {
    font-variant-numeric: tabular-nums;
}

.benefits-cell-confidence {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 12px;
}

/* ── Validation tab ── */

.validation-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.validation-strip-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    background: rgba(255,255,255,0.02);
    font-size: 12px;
    cursor: help;
}

.validation-strip-pill strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.validation-strip-pill span:not(.validation-strip-dot) {
    opacity: 0.75;
}

.validation-strip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.validation-strip-spacer {
    flex: 1;
}

.validation-about-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.65;
}

.validation-about-toggle:hover,
.validation-about-toggle.expanded {
    opacity: 1;
    background: rgba(255,255,255,0.04);
}

.validation-about-panel {
    padding: 14px 18px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
    margin-bottom: 14px;
}

.validation-empty-state {
    text-align: center;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.validation-group {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.008);
}

.validation-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    justify-content: flex-start;
}

.validation-group-header:hover {
    background: rgba(255,255,255,0.02);
}

.validation-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.validation-group-label {
    font-size: 13px;
    font-weight: 600;
}

.validation-group-count {
    font-size: 11px;
    opacity: 0.55;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.validation-group-spacer {
    flex: 1;
}

.validation-group-chevron {
    opacity: 0.5;
    transition: transform 0.18s ease;
}

.validation-group.expanded .validation-group-chevron {
    transform: rotate(180deg);
}

.validation-group-body {
    border-top: 1px solid var(--mud-palette-divider);
}

.validation-finding-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid rgba(31,41,55,0.4);
}

.validation-finding-row:last-child {
    border-bottom: none;
}

.validation-finding-bar {
    width: 3px;
    flex-shrink: 0;
}

.validation-finding-content {
    flex: 1;
    padding: 10px 14px;
    min-width: 0;
}

.validation-finding-message {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.validation-finding-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.6;
    flex-wrap: wrap;
}

.validation-finding-path {
    font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
    font-size: 10.5px;
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}

.validation-finding-rule {
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    font-size: 10px;
}

.validation-finding-suggestion {
    color: #6AE3B4;
    font-weight: 500;
}

.validation-finding-jump {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.45;
    cursor: pointer;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(31,41,55,0.4);
}

.validation-finding-jump:hover {
    opacity: 1;
    background: rgba(79,124,255,0.08);
    color: var(--mud-palette-primary);
}

/* ── JSON tab ── */

.json-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
    margin-bottom: 10px;
}

.json-strip-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    opacity: 0.85;
}

.json-strip-stat strong {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.json-strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.85;
}

.json-strip-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.04);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.json-keys-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 12px;
}

.json-keys-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.5;
    margin-right: 4px;
}

.json-key-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
    font-size: 11px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.json-key-chip:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(79,124,255,0.08);
    color: var(--mud-palette-primary);
}

.json-key-name {
    font-weight: 500;
}

.json-key-line {
    font-size: 10px;
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
}

.json-viewer-frame {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: #0A0F18;
    overflow: auto;
    max-height: 72vh;
}

.json-viewer-code {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    counter-reset: line;
    font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: #CBD5F5;
}

.json-line {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    counter-increment: line;
    scroll-margin-top: 20px;
}

.json-line::before {
    content: counter(line);
    display: inline-block;
    width: 48px;
    padding: 0 10px 0 0;
    text-align: right;
    color: rgba(203,213,245,0.3);
    font-variant-numeric: tabular-nums;
    user-select: none;
    flex-shrink: 0;
    border-right: 1px solid rgba(31,41,55,0.5);
    margin-right: 12px;
}

.json-line:target {
    background: rgba(79,124,255,0.10);
}

.json-line:target::before {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.json-line-content {
    white-space: pre;
    flex: 1;
}

/* ── Extraction Events — list view (not a table) ──
   Every row is scanned primarily by value, secondarily by identifier.
   Uniform-state chrome (confidence bar at 100%, method badge when all
   methods match, icons, column headers) is suppressed — the page shouldn't
   assign visual weight to information that's the same on every row. */

/* ── Grouped value list ──
   Each ParentFieldName becomes its own collapsible group. Header is the
   "field" level; rows inside are individual leaf values. */
.trace-group {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.trace-group:last-child {
    border-bottom: none;
}

.trace-group-header {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(148, 163, 184, 0.05);
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    /* Browsers default <button> flex to justify-content:center — explicit
       flex-start pins the chevron + name to the left edge. Without this,
       rows that don't render a trailing "page N" span collapse to center
       while rows that do appear left-aligned, making the list look uneven. */
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 14px;
    font: inherit;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.trace-group-header:hover {
    background: rgba(148, 163, 184, 0.1);
}

.trace-group-chevron {
    color: var(--mud-palette-text-secondary);
    transition: transform 0.15s ease;
    opacity: 0.7;
    flex-shrink: 0;
}

.trace-group-header.collapsed .trace-group-chevron {
    transform: rotate(-90deg);
}

.trace-group-header.collapsed {
    border-bottom: none;
}

.trace-group-name {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.trace-group-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: rgba(148, 163, 184, 0.15);
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.trace-group-page {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}

.trace-group-body {
    display: flex;
    flex-direction: column;
}

/* Empty-string placeholder styling — makes "(empty)" read as metadata, not data. */
.trace-row-primary-empty {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    font-weight: 400 !important;
}

.trace-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    /* Own scroll surface — the list is the only thing in the left column
       that overflows, so it takes all remaining vertical space and scrolls
       independently of the page and the PDF pane next door. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

/* Thin overlay-style scrollbars for both scroll surfaces (list + PDF canvas).
   Visible on hover, dimmed otherwise — matches the Stripe/Linear aesthetic
   and keeps the chrome out of the way until you actually need to scroll. */
.trace-list::-webkit-scrollbar,
.pdf-viewer-canvas-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.trace-list::-webkit-scrollbar-track,
.pdf-viewer-canvas-container::-webkit-scrollbar-track {
    background: transparent;
}
.trace-list::-webkit-scrollbar-thumb,
.pdf-viewer-canvas-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.trace-list::-webkit-scrollbar-thumb:hover,
.pdf-viewer-canvas-container::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
    background-clip: padding-box;
}
.pdf-viewer-canvas-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.trace-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
    position: relative;
    min-height: 52px;
}

.trace-row:last-child {
    border-bottom: none;
}

.trace-row:hover:not(.trace-row-passive) {
    background: rgba(148, 163, 184, 0.04);
}

.trace-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trace-row-primary {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

.trace-row-secondary {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: -0.01em;
}

.trace-row-aside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* (Page indicator removed from the row entirely — the row tooltip
   and the PDF pane itself communicate which page is in view.) */

/* Confidence chip — only appears when confidence is below the "trustworthy
   enough to be boring" threshold. A row that shows this chip is a row that
   wants your attention. */
.trace-row-confidence-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Thin vertical stripe on the right edge of rows that used AI (purple) or
   fallback (amber). Deterministic rows stay unadorned — the stripe is a
   "look here" signal, not decoration. */
.trace-row-method-stripe {
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px 0 0 2px;
    pointer-events: none;
}

/* The primary and secondary text spans are plain readable text now.
   No click-to-copy, no cursor:copy. Users select + Ctrl+C the old way.
   user-select is enabled on the whole row so it stays copy-friendly. */
.trace-row,
.trace-row-primary,
.trace-row-secondary {
    user-select: text;
}

/* Active state — unmistakable. Same blue as the PDF chip/highlight so the
   row ↔ highlight connection reads as "same thing in two places". The row
   lifts out of the list with a ring + arrow pointing at the PDF pane. */
.trace-row.trace-row-active {
    background: linear-gradient(
        90deg,
        rgba(79, 124, 255, 0.22) 0%,
        rgba(79, 124, 255, 0.14) 60%,
        rgba(79, 124, 255, 0.18) 100%
    );
    box-shadow:
        inset 5px 0 0 #4F7CFF,
        0 0 0 1px rgba(79, 124, 255, 0.45),
        0 2px 10px -2px rgba(79, 124, 255, 0.35);
    border-bottom-color: transparent;
    z-index: 1;
}

/* Caret pointing at the PDF pane — literal "this row → that highlight".
   Sits inside the row (list clips overflow-x) and we give the row extra
   right-padding when active so it doesn't collide with method/confidence chips. */
.trace-row.trace-row-active {
    padding-right: 28px;
}
.trace-row.trace-row-active::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid #4F7CFF;
    filter: drop-shadow(0 0 4px rgba(79, 124, 255, 0.75));
    pointer-events: none;
    animation: trace-caret-pulse 1.8s ease-in-out infinite;
}
@keyframes trace-caret-pulse {
    0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
    50%      { transform: translateY(-50%) translateX(3px); opacity: 0.75; }
}

/* The active-row gradient is mostly-transparent blue (≈22% alpha at its
   strongest stop), so the page background shows through as a pale lavender.
   White text on pale lavender is unreadable — force dark text instead. */
.trace-row.trace-row-active .trace-row-primary {
    font-weight: 700;
    color: #111827;
}

.trace-row.trace-row-active .trace-row-secondary {
    opacity: 1;
    color: #4F6475;
}

/* Passive = no page number = not clickable. Quiet it down so the
   clickable rows stand out by contrast alone, no decoration needed. */
.trace-row.trace-row-passive {
    cursor: default;
    opacity: 0.55;
}

.trace-row.trace-row-passive:hover {
    background: transparent;
}

/* ── Compact toolbar for the Extraction Events header ── */
.trace-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;   /* never compress the filter bar — list scrolls, not this */
}

.trace-events-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.trace-events-title-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

.trace-events-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Borderless inline search — lighter chrome than MudTextField outlined. */
.trace-search-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    min-width: 180px;
}

.trace-search-input:focus-within {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-primary);
}

.trace-search-input input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    flex: 1;
    min-width: 0;
}

.trace-search-input input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

/* Ghost-button method dropdown — sits tighter than MudSelect outlined. */
.trace-method-select {
    position: relative;
    display: inline-block;
}

.trace-method-select select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid transparent;
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 28px 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-family: inherit;
}

.trace-method-select select:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.trace-method-select::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
}

/* ── Glass Box Guarantee strip — metric separators ── */
.glass-box-metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
    position: relative;
}

.glass-box-metric + .glass-box-metric::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: var(--mud-palette-divider);
    opacity: 0.8;
}

.trace-list-footer {
    font-size: 11px;
    opacity: 0.55;
    text-align: right;
    flex-shrink: 0;   /* stays pinned below the scrolling list */
    padding-top: 4px;
}

/* ============================================================================
   Spec 002 — Portal Version History & Plan Family Surfaces
   Used by:
     - Versions tab + Family tab on PlanDetail.razor (FR-001, FR-004, FR-023)
     - Upload override post-ingestion confirmation on Upload.razor (FR-009, FR-010)
   Constitution P-V: validation-color hex values mirror PortalValidationColors.
   ============================================================================ */

/* Skeleton rows — render structural placeholders during fetch (FR-023, SC-016).
   Same min-height as .trace-row so swap-in causes zero layout shift. */
.portal-skeleton-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    min-height: 52px;
    background: var(--mud-palette-surface);
}

.portal-skeleton-row:last-child {
    border-bottom: none;
}

.portal-skeleton-pulse {
    display: inline-block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--mud-palette-lines-default) 0%,
        rgba(148, 163, 184, 0.18) 50%,
        var(--mud-palette-lines-default) 100%);
    background-size: 200% 100%;
    animation: portal-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes portal-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Truncation notice (FR-003 versions, FR-006 family).
   PortalValidationColors warning hex (light: #D97706, dark: #F59E0B) at low alpha. */
.portal-truncation-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 0;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(217, 119, 6, 0.25);
    background: rgba(217, 119, 6, 0.08);
    color: var(--mud-palette-text-primary);
    font-size: 13px;
}

.mud-theme-dark .portal-truncation-notice {
    border-color: rgba(245, 158, 11, 0.30);
    background: rgba(245, 158, 11, 0.10);
}

/* Latest-version row marker (FR-001).
   PortalValidationColors valid hex (light: #059669, dark: #22C55E) at low alpha. */
.portal-version-row-latest {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mud-theme-dark .portal-version-row-latest {
    background: rgba(34, 197, 94, 0.14);
    color: #22C55E;
}

/* Family-row "Current" marker — neutral surface tone, NOT a validation color
   (FR-004: "Current" is a navigation anchor, not a validation state). */
.portal-family-row-current {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface-muted, rgba(148, 163, 184, 0.12));
    color: var(--mud-palette-text-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Disagreement / insufficient-inputs warning banner on Upload confirmation
   (FR-009, FR-010). Same color treatment as truncation notice. */
.portal-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px 0;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(217, 119, 6, 0.30);
    background: rgba(217, 119, 6, 0.10);
    color: var(--mud-palette-text-primary);
    font-size: 13px;
    line-height: 1.5;
}

.portal-warning-banner-icon {
    flex: 0 0 auto;
    color: #D97706;
    margin-top: 1px;
}

.portal-warning-banner-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-warning-banner-list li + li {
    margin-top: 6px;
}

.mud-theme-dark .portal-warning-banner {
    border-color: rgba(245, 158, 11, 0.30);
    background: rgba(245, 158, 11, 0.10);
}

.mud-theme-dark .portal-warning-banner-icon {
    color: #F59E0B;
}

/* Indicator on Traceability tab when viewing a non-latest version (FR-002). */
.portal-historical-version-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface-muted, rgba(148, 163, 184, 0.06));
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

/* "Source document unavailable for this version" state (FR-013).
   Visible "absence of provenance" — Glass Box. */
.portal-source-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    text-align: center;
    font-size: 13px;
}


/* ── Spec 004 US2 — supersession conflict dialog + newer-version banner ──────
   Structural only. The theme-correct border/background colors are applied inline
   by the components from PortalValidationColors.GetInvalid/GetWarning/GetReview
   (isDark), per the constitution P-V "no inline hex" rule (the color values come
   from the sanctioned helper, not hardcoded here). */
.conflict-banner-active,
.conflict-banner-pending,
.newer-version-banner {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.conflict-banner-active,
.conflict-banner-pending {
  border-left: 4px solid transparent; /* color set inline */
}

.conflict-banner-active .conflict-banner-label,
.conflict-banner-pending .conflict-banner-label {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.conflict-segment-meta {
  font-size: 0.82rem;
  color: var(--mud-palette-text-secondary);
}

.conflict-gap-warning {
  font-style: italic;
  font-size: 0.84rem;
  margin-top: 8px;
}

/* Spec 004 US3 — newer-version banner (PlanDetail). Structure only; the border/background
   review-tint colors are applied inline from PortalValidationColors.GetReview(isDark). */
.newer-version-banner {
  border: 1px solid transparent; /* color set inline */
}