/* ================================================================
   BSO Validation System — Design System
   SPEC-013: UI/UX Overhaul — Professional Branding
   Zero external dependencies, self-contained CSS
   ================================================================ */

/* ----------------------------------------------------------------
   Design Tokens
   ---------------------------------------------------------------- */
:root {
    /* Brand — ABI */
    --brand-gold:            #D4A843;
    --brand-gold-dark:       #B8860B;
    --brand-gold-light:      #E8CC7A;
    --brand-navy:            #0C1B2E;
    --brand-navy-mid:        #1A2E4A;
    --brand-navy-light:      #243B5C;

    /* Brand — NTConsult */
    --brand-nt-green:        #4CAF50;
    --brand-nt-blue:         #2196F3;

    /* Surfaces */
    --surface-page:          #FAFBFC;
    --surface-card:          #FFFFFF;
    --surface-elevated:      #FFFFFF;
    --surface-inset:         #F4F5F7;
    --surface-subtle:        #F8F9FA;

    /* Ink (text hierarchy) */
    --ink-primary:           #1A1D23;
    --ink-secondary:         #5A6170;
    --ink-tertiary:          #8C919E;
    --ink-muted:             #B0B5BF;
    --ink-inverse:           #FFFFFF;
    --ink-link:              #2563EB;

    /* Edges (border hierarchy) */
    --edge-subtle:           rgba(0, 0, 0, 0.05);
    --edge-default:          rgba(0, 0, 0, 0.08);
    --edge-emphasis:         rgba(0, 0, 0, 0.14);
    --edge-focus:            rgba(37, 99, 235, 0.4);
    --edge-gold:             rgba(212, 168, 67, 0.25);

    /* Status — semantic */
    --status-pass:           #10B981;
    --status-pass-ink:       #065F46;
    --status-pass-bg:        #ECFDF5;
    --status-pass-edge:      #A7F3D0;
    --status-fail:           #DC2626;
    --status-fail-ink:       #991B1B;
    --status-fail-bg:        #FEF2F2;
    --status-fail-edge:      #FECACA;
    --status-review:         #D97706;
    --status-review-ink:     #92400E;
    --status-review-bg:      #FFFBEB;
    --status-review-edge:    #FDE68A;
    --status-error:          #6B7280;
    --status-error-ink:      #374151;
    --status-error-bg:       #F3F4F6;
    --status-error-edge:     #D1D5DB;
    --status-info:           #2563EB;
    --status-info-bg:        #EFF6FF;
    --status-info-edge:      #BFDBFE;

    /* Shadows — layered, subtle */
    --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-md:             0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:             0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl:             0 8px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.10);
    --shadow-gold:           0 0 0 3px rgba(212, 168, 67, 0.12);
    --shadow-header:         0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);

    /* Typography */
    --font-sans:             Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:             'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
    --text-label:            11px;
    --text-sm:               13px;
    --text-base:             14px;
    --text-lg:               16px;
    --text-xl:               20px;
    --text-2xl:              28px;
    --text-hero:             48px;

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

    /* Radii */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill:  100px;
    --radius-full:  9999px;

    /* Transitions */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast:   120ms;
    --duration-normal: 200ms;
    --duration-slow:   350ms;
}

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

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--ink-primary);
    background: var(--surface-page);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--ink-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------
   HEADER — Audit Dossier (SPEC-601)
   Navy solid background, 56px height, brass hairline bottom stroke.
   Tokens come from tokens.css (SPEC-401): --brand-navy, --brand-brass,
   --ink-inverse, --edge-brass.
   ---------------------------------------------------------------- */
.app-header {
    background: var(--brand-navy);
    color: var(--ink-inverse);
    padding: 0 var(--sp-6);
    display: flex;
    align-items: center;
    height: 56px;
    min-height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--edge-brass);
    gap: var(--sp-5);
}

.header-logo-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: var(--sp-2);
}

.header-logo-left img {
    max-height: 32px;
    height: auto;
    width: auto;
    display: block;
}

.header-brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    min-width: 0;
}

.header-title {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--ink-inverse);
    opacity: 0.92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitle {
    /* micro-label utility provides family/size/weight/tracking/transform.
       Override color and tertiary tone for on-navy surface. */
    color: var(--brand-brass);
    opacity: 0.95;
}

/* SPEC-605: the primary nav now lives in .app-sidebar. The header keeps
   only the brand, language selector, user block and NTConsult mark. A
   flex spacer pushes the right-side cluster to the edge. */
.header-spacer {
    flex: 1;
    min-width: 0;
}

/* ----------------------------------------------------------------
   SIDEBAR — Audit Dossier primary nav (SPEC-605)
   Fixed on the left, 240px expanded / 64px collapsed. State is
   toggled via `body.sidebar-collapsed` + the matching modifier
   class on the <aside> itself so the transition can animate
   width, margins and label visibility together.
   ---------------------------------------------------------------- */
/*
 * Fluid sidebar width (2026-04-19): 240px floor on narrow laptops, grows
 * gently to 320px on ultra-wide displays via clamp(). Keeps proportion
 * reasonable instead of a 240px rail on a 2560px screen (which looked
 * visually orphaned — "barra lateral pode ser mais fluido" feedback).
 * --fluid-sidebar is also read by .app-main and .app-footer so their
 * left margin stays in sync without a second source of truth.
 */
:root {
    --fluid-sidebar: clamp(240px, 14vw, 320px);
    --fluid-main-px: clamp(24px, 2.5vw, 56px);
}

.app-sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    width: var(--fluid-sidebar);
    background: var(--paper-leaf);
    border-right: 1px solid var(--edge-brass);
    display: flex;
    flex-direction: column;
    padding: var(--sp-4) 0 0;
    z-index: 90;
    transition: width 180ms var(--ease-out);
    overflow-x: hidden;
    overflow-y: auto;
}

.app-sidebar--collapsed {
    width: 64px;
}

.sidebar-toggle {
    align-self: flex-end;
    width: 32px;
    height: 32px;
    margin: 0 var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--edge-brass);
    border-radius: var(--radius-sm);
    color: var(--ink-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform 180ms var(--ease-out);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--paper-elevated);
    color: var(--ink-primary);
}

.sidebar-toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

.sidebar-toggle-icon {
    width: 16px;
    height: 16px;
}

.app-sidebar--collapsed .sidebar-toggle {
    align-self: center;
    margin: 0 auto var(--sp-4);
    transform: rotate(180deg);
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding-bottom: var(--sp-4);
}

.sidebar-category {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-category-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    padding: 0 var(--sp-5);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.app-sidebar--collapsed .sidebar-category-label {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-5);
    color: var(--ink-primary);
    opacity: 0.82;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out),
                border-left-color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.sidebar-item:hover {
    background: var(--paper-elevated);
    opacity: 1;
    text-decoration: none;
}

.sidebar-item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

.sidebar-item--active {
    background: var(--paper-elevated);
    border-left-color: var(--brand-brass);
    opacity: 1;
    font-weight: 600;
}

.sidebar-item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink-tertiary);
}

.sidebar-item--active .sidebar-item-icon,
.sidebar-item:hover .sidebar-item-icon {
    color: var(--brand-brass-ink);
}

.sidebar-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar--collapsed .sidebar-item {
    padding: var(--sp-2) 0;
    justify-content: center;
    gap: 0;
}

/*
 * Collapsed state: the label is invisible but MUST stay in the
 * accessibility tree so the `sidebar-item` <a> still has an accessible
 * name (axe `link-name` WCAG 2.1 AA). Using `display: none` broke
 * screen readers when the sidebar was collapsed — the 6 nav links were
 * announced as "link" with no label. Visually-hidden pattern keeps the
 * text for AT while hiding it from sighted users; the tooltip
 * (data-sidebar-tooltip) still provides the sighted affordance.
 * SPEC-605: closed the HITL "Validar contraste WCAG AA" item.
 */
.app-sidebar--collapsed .sidebar-item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tooltip surfaced on collapsed hover — CSS-only, data-sidebar-tooltip. */
.app-sidebar--collapsed .sidebar-item:hover::after {
    content: attr(data-sidebar-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-navy);
    color: var(--ink-inverse);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    box-shadow: var(--shadow-md, 0 2px 6px rgba(0, 0, 0, 0.18));
}

.sidebar-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--edge-subtle);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-tertiary);
}

.sidebar-footer-powered {
    color: var(--brand-brass-ink);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-footer-version {
    margin-top: 4px;
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.app-sidebar--collapsed .sidebar-footer {
    opacity: 0;
    visibility: hidden;
}

/* ----------------------------------------------------------------
   MAIN
   ---------------------------------------------------------------- */
.app-main {
    margin: 0 0 0 var(--fluid-sidebar);
    padding: var(--sp-8) var(--fluid-main-px);
    width: auto;
    flex: 1;
    transition: margin-left 180ms var(--ease-out), padding 180ms var(--ease-out);
}

body.sidebar-collapsed .app-main {
    margin-left: 64px;
}

/* ----------------------------------------------------------------
   FOOTER — Slim branding (nav moved to .app-sidebar per SPEC-605)
   ---------------------------------------------------------------- */
.app-footer {
    background: var(--surface-card);
    border-top: 1px solid var(--edge-default);
    padding: var(--sp-3) var(--fluid-main-px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 0 0 var(--fluid-sidebar);
    transition: margin-left 180ms var(--ease-out);
}

body.sidebar-collapsed .app-footer {
    margin-left: 64px;
}

.footer-branding {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-brand-text {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    letter-spacing: 0.04em;
}

.footer-brand-text .footer-sep {
    margin: 0 var(--sp-2);
    color: var(--ink-muted);
}

.footer-brand-powered {
    font-weight: 500;
    color: var(--brand-brass-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: var(--sp-2);
}

.app-version-stamp {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-2);
    font-size: 10px;
    line-height: 1;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    opacity: 0.45;
    pointer-events: none;
}

/* Health status link in footer (SPEC-REDESIGN-019) */
.footer-health-link {
    position: absolute;
    right: calc(var(--sp-3) + 60px);
    bottom: var(--sp-2);
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    opacity: 0.45;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.footer-health-link:hover {
    opacity: 1;
    color: var(--seal-pass);
}

/* ----------------------------------------------------------------
   VIEW TRANSITIONS
   ---------------------------------------------------------------- */
.view {
    display: none;
    opacity: 0;
    transform: translateY(0);
}

.view.active {
    display: block;
    opacity: 1;
    animation: viewFadeIn var(--duration-slow) var(--ease-out) forwards;
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------
   CARDS — Layered shadows, hover elevation
   ---------------------------------------------------------------- */
.card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--edge-subtle);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    transition: box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}

.card-header h2 {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-primary);
}

.card-header h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink-primary);
}

/* ----------------------------------------------------------------
   UPLOAD QUOTA CARD (SPEC-610) — always visible while enforcement is on.
   Replaces the legacy #quota-banner (SPEC-077) which only surfaced at
   warning/reached. Audit-Dossier tokens; neutral -> brass -> red on usage.
   ---------------------------------------------------------------- */
.upload-quota {
    background: var(--paper-leaf);
    border: 1px solid var(--edge-brass);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.upload-quota.hidden { display: none; }

.upload-quota__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.upload-quota__label {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}

/* Two-dimension layout — BSO count on the left, Storage GB on the right. */
.upload-quota__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}

.upload-quota__panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-right: var(--sp-4);
    border-right: 1px solid var(--edge-muted, rgba(0,0,0,0.06));
}
.upload-quota__panel:last-child {
    padding-right: 0;
    border-right: none;
}

.upload-quota__panel-label {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}

.upload-quota__panel-usage {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-top: 2px;
}

.upload-quota__panel-percent {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--ink-tertiary);
}

.upload-quota__panel-note {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    font-style: italic;
}

/* SPEC-B072: counted / failed / processed line. The bar above stays on the
   counted value only — this row is where the full picture lives. */
.upload-quota__split {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-variant-numeric: tabular-nums;
}

.upload-quota__split-ok {
    color: var(--status-pass-ink);
}

.upload-quota__split-failed {
    color: var(--status-fail-ink);
}

.upload-quota__split-total {
    color: var(--ink-tertiary);
}

/* Legacy single-dimension classes kept for any lingering call sites. */
.upload-quota__usage {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.upload-quota__bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--paper-inset);
    border-radius: 999px;
    overflow: hidden;
}

.upload-quota__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--brand-navy);
    opacity: 0.5;
    transition: width var(--duration-normal, 200ms) var(--ease-out, ease-out),
                background var(--duration-normal, 200ms) var(--ease-out, ease-out);
}

.upload-quota__percent {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--ink-tertiary);
}

.upload-quota__hint {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    line-height: 1.4;
    margin-top: var(--sp-1);
}

.upload-quota__exhausted {
    font-family: var(--font-sans);
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--status-fail);
    margin-top: var(--sp-1);
}

/* Per-panel tier tint — the card as a whole still tints with the worst
   dimension, but each panel also shows its own level so the auditor can
   tell which pressure is closer to the block. */
.upload-quota__panel--warn .upload-quota__bar-fill {
    background: var(--brand-brass);
    opacity: 1;
}
.upload-quota__panel--warn .upload-quota__panel-percent {
    color: var(--brand-brass-ink);
}
.upload-quota__panel--danger .upload-quota__bar-fill,
.upload-quota__panel--exhausted .upload-quota__bar-fill {
    background: var(--status-fail);
    opacity: 1;
}
.upload-quota__panel--danger .upload-quota__panel-percent,
.upload-quota__panel--exhausted .upload-quota__panel-percent {
    color: var(--status-fail);
}

/* Card-wide tier classes kept for the header/hint/exhausted copy. */
.upload-quota--warn .upload-quota__bar-fill {
    background: var(--brand-brass);
    opacity: 1;
}
.upload-quota--warn .upload-quota__percent {
    color: var(--brand-brass-ink);
}

.upload-quota--danger .upload-quota__bar-fill,
.upload-quota--exhausted .upload-quota__bar-fill {
    background: var(--status-fail);
    opacity: 1;
}
.upload-quota--danger .upload-quota__percent,
.upload-quota--exhausted .upload-quota__percent {
    color: var(--status-fail);
}

/* Narrow viewports — stack the panels vertically so neither shrinks too thin. */
@media (max-width: 640px) {
    .upload-quota__panels {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .upload-quota__panel {
        border-right: none;
        border-bottom: 1px solid var(--edge-muted, rgba(0,0,0,0.06));
        padding-right: 0;
        padding-bottom: var(--sp-2);
    }
    .upload-quota__panel:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* SPEC-610: dropzone reject state when quota is exhausted. */
.dropzone-compact--disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------
   UPLOAD BAR — Compact dropzone with explicit button
   ---------------------------------------------------------------- */
.upload-bar {
    padding: var(--sp-4) var(--sp-6);
}

.upload-bar-content {
    position: relative;
}

.dropzone-compact {
    display: flex;
    /* SPEC-B119: sem espaço, os controles descem para a linha de baixo em vez
       de esmagar o título (medido: 61 px e 4 linhas em 1920 px com arquivo). */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5);
    border: 2px dashed var(--edge-emphasis);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-6);
    transition: all var(--duration-normal) var(--ease-out);
    background: var(--surface-subtle);
}

.dropzone-compact.dragover {
    border-color: var(--brand-gold);
    background: rgba(212, 168, 67, 0.06);
    animation: dropzonePulse 1.5s ease-in-out infinite;
}

@keyframes dropzonePulse {
    0%, 100% { border-color: var(--brand-gold); box-shadow: var(--shadow-gold); }
    50% { border-color: var(--brand-gold-light); box-shadow: 0 0 0 6px rgba(212, 168, 67, 0.08); }
}

/* File staged state — file selected but not yet uploaded */
.dropzone-compact.file-staged {
    border-color: var(--status-pass);
    border-style: solid;
    background: rgba(16, 185, 129, 0.03);
}

.dropzone-compact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 168, 67, 0.1);
    border-radius: var(--radius-md);
}

.dropzone-compact-icon svg {
    width: 22px;
    height: 22px;
    color: var(--brand-gold-dark);
}

.dropzone-compact-text {
    /* SPEC-B119: base mínima — abaixo dela, quem cede são os controles. */
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dropzone-compact-title {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--ink-primary);
}

.dropzone-compact-hint {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}

.dropzone-compact-actions {
    display: flex;
    /* SPEC-B119: era `flex-shrink: 0` sem quebra — com o nome do arquivo os
       controles somavam 1313 px e vazavam do card. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    max-width: 100%;
}

.dropzone-compact-actions .file-info {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    background: var(--surface-card);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--edge-default);
    min-width: 200px;
    /* SPEC-B119: nunca mais largo que a linha dos controles. */
    max-width: min(400px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Upload button spinner */
.upload-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.upload-btn-spinner.hidden { display: none; }

/* Disabled upload buttons during upload */
.dropzone-compact-actions .btn:disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* Upload progress indicator */
.upload-progress {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-card);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
}

.upload-progress.hidden {
    display: none;
}

.upload-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--paper-inset);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--sp-2);
}

.upload-progress-fill {
    height: 100%;
    background: var(--brand-navy);
    border-radius: var(--radius-sm);
    transition: width var(--duration-slow) var(--ease-out);
}

.upload-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    font-family: var(--font-mono);
}

#upload-progress-percent {
    font-weight: 500;
    color: var(--ink-primary);
}

#upload-progress-size {
    font-family: var(--font-mono);
    color: var(--ink-tertiary);
}

/* Legacy full-size dropzone (kept for backward compat) */
.dropzone-full {
    border: 2px dashed var(--edge-emphasis);
    border-radius: var(--radius-xl);
    padding: var(--sp-12) var(--sp-8);
    text-align: center;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    background: var(--surface-subtle);
    position: relative;
}

.dropzone-full:hover {
    border-color: var(--brand-gold);
    background: rgba(212, 168, 67, 0.03);
    box-shadow: var(--shadow-gold);
}

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--ink-link);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: #1D4ED8; }

.btn-success {
    background: var(--status-pass);
    color: #fff;
}
.btn-success:hover:not(:disabled) { background: #059669; }

.btn-danger {
    background: var(--status-fail);
    color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #B91C1C; }

.btn-ghost {
    background: transparent;
    color: var(--ink-secondary);
    border-color: var(--edge-default);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--surface-subtle);
    color: var(--ink-primary);
    border-color: var(--edge-emphasis);
}

.btn-sm {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--text-label);
}

/* ----------------------------------------------------------------
   BADGES — Pills with dot
   ---------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px var(--sp-3);
    border-radius: var(--radius-pill);
    line-height: 1.4;
    /* SPEC-UI: badges quebram linha quando texto longo (ex: "COM FALHAS"
       com underscore antes — agora label limpo + word-break). */
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.badge-pass   { color: var(--status-pass-ink); background: var(--status-pass-bg); }
.badge-fail   { color: var(--status-fail-ink); background: var(--status-fail-bg); }
.badge-review { color: var(--status-review-ink); background: var(--status-review-bg); }
.badge-error  { color: var(--status-error-ink); background: var(--status-error-bg); }
/* SPEC-B062: regra pausada. Cinza como o erro (nao chama atencao de veredicto),
   mas classe propria — "desligada de proposito" != "falhou". */
.badge-na     { color: var(--status-error-ink); background: var(--status-error-bg); }
.badge-pending {
    color: var(--ink-tertiary);
    background: var(--surface-inset);
}
/* SPEC-B075 item 1.6: FAIL da IA sem decisao humana ainda (pre-finalize).
   Classe propria — nao e "Reprovado" (decisao humana confirmada) nem um
   "Pendente" generico (pode nao ter FAIL algum). Tinta de fail sobre fundo
   de pendencia: sinaliza urgencia sem prometer reprovacao definitiva. */
.badge-ai-fail-pending {
    color: var(--status-fail-ink);
    background: var(--status-review-bg);
    border: 1px solid var(--status-review-edge);
}
.badge-processing {
    color: #1D4ED8;
    background: var(--status-info-bg);
}
.badge-cancelled {
    color: var(--ink-secondary);
    background: var(--surface-inset);
    text-decoration: line-through;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 6px;
}

.badge-dot-pass       { background: var(--status-pass); }
.badge-dot-fail       { background: var(--status-fail); }
.badge-dot-review     { background: var(--status-review); }
.badge-dot-error      { background: var(--status-error); }
.badge-dot-na         { background: var(--status-error); }
.badge-dot-pending    { background: var(--ink-muted); }
.badge-dot-processing { background: var(--status-info); }

/* ----------------------------------------------------------------
   TABLES — Breathing room, subtle zebra
   ---------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--edge-default);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* Jobs table — 8 columns on /jobs (+1 when super_user sees Custo), 6 on /reports.
   SPEC-706 added Tamanho and SPEC-703 added Custo (super_user only); the
   old width grid was calibrated to 7 columns so the Ações column ended
   up with 0% in fixed layout and the Visualizar button disappeared.
   auto layout lets the button column grow to fit its content while the
   fixed percentages below keep the other columns readable. */
.jobs-table {
    /* SPEC-UI: fixed layout impede que BSO cell expanda baseado no
       conteudo (filename longo). Larguras das colunas ficam exatas. */
    table-layout: fixed;
    width: 100%;
}
/* SPEC-UI: /jobs view columns (7): BSO, Template, Pais, Tamanho,
   Validação, Criado em, Ações. Colunas Custo + Objeto removidas. */
.jobs-table:not(.reports-table) thead th:nth-child(1) { width: 23%; }
.jobs-table:not(.reports-table) thead th:nth-child(2) { width: 12%; }
.jobs-table:not(.reports-table) thead th:nth-child(3) { width: 6%; }
.jobs-table:not(.reports-table) thead th:nth-child(4) { width: 8%; }
.jobs-table:not(.reports-table) thead th:nth-child(5) { width: 17%; }
.jobs-table:not(.reports-table) thead th:nth-child(6) { width: 14%; }
.jobs-table:not(.reports-table) thead th:nth-child(7) { width: 13%; }
/* SPEC-UI: jobs-table headers must stay full-text — narrow columns
   like 'Pais' / 'Tamanho' / 'Validação BSO' were truncating to
   'PAI…' / 'TAMAN…'. Tighten padding + letter-spacing + font so the
   header label fits without ellipsis. */
.jobs-table thead th {
    padding: var(--sp-2);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    overflow: visible;
    text-overflow: clip;
}
.jobs-table__action {
    text-align: center;
    padding-right: 12px !important;
}
/* SPEC-UI: sortable column headers — clicavel, mostra seta. */
.jobs-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.jobs-table th.sortable:hover {
    background: var(--surface-hover, #f3f4f6);
}
.jobs-table th.sortable .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
    font-size: 10px;
    transition: opacity 0.15s;
}
.jobs-table th.sortable.sort-asc .sort-arrow,
.jobs-table th.sortable.sort-desc .sort-arrow {
    opacity: 1;
    color: var(--accent, #c99435);
}
/* Forcar td a respeitar a coluna — sem overflow horizontal. */
.jobs-table td {
    overflow: hidden;
    word-break: break-word;
}
/* Ações cell: garantir botao Visualizar nao quebra em letras
   verticais. Min-width + nowrap forcam render horizontal limpo. */
.jobs-table__action {
    white-space: nowrap;
    text-align: right;
    min-width: 110px;
}
.jobs-table__action .btn {
    white-space: nowrap;
}
.job-view-btn {
    min-width: 100px;
    white-space: nowrap;
    word-break: keep-all;
    writing-mode: horizontal-tb;
    display: inline-block;
    padding: 4px 12px;
}
/* SPEC-B041 (A2): object grouping in the Processos table. Parent row shows
   the latest version + an expander; child version rows are indented and
   hidden until the group opens (mirrors the rules-group collapsible). */
.job-group-toggle-cell {
    cursor: pointer;
    user-select: none;
}
.job-group-toggle-cell .job-group-arrow {
    display: inline-block;
    width: 12px;
    margin-right: 4px;
    color: var(--brand-brass);
    font-size: 10px;
    vertical-align: top;
    transition: transform 0.12s ease;
}
.job-group-object {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    vertical-align: top;
}
.job-group-count {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--surface-hover, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.job-group-row:hover {
    background: var(--surface-hover, #f3f4f6);
}
/* Child version rows: quieter than the parent, indented with a connector. */
.job-version-row {
    background: var(--surface-subtle, #fafafa);
}
.jobs-table__object--child {
    padding-left: 18px;
}
.job-version-tick {
    display: inline-block;
    margin-right: 4px;
    color: var(--text-secondary, #9ca3af);
    opacity: 0.6;
    vertical-align: top;
}
/* SPEC-B047 (C2): base-version selector in the version-compare card. */
.vc-base-select {
    padding: 3px 8px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text, inherit);
    font-size: 12px;
    max-width: 220px;
}
/* SPEC-B048 (C3): human label as a quiet subtitle under the attachment name. */
.attach-name-sub {
    margin-top: 2px;
    font-weight: 400;
}
/* SPEC-UI: BSO/Arquivo cell — protocolo legivel + filename pequeno.
   3 linhas empilhadas: protocol (release+year+version), object
   (Asset/Material/etc), filename (truncated, tooltip). */
.bso-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
}
.bso-cell__protocol {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-primary, #1a1a1a);
}
.bso-cell__version {
    font-weight: 400;
    color: var(--ink-secondary, #6b7280);
    font-size: 11px;
    margin-left: 4px;
}
.bso-cell__object {
    font-size: 12px;
    color: var(--ink-secondary, #4b5563);
}
.bso-cell__filename {
    font-size: 10px;
    color: var(--ink-tertiary, #9ca3af);
    font-family: ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
    display: block;
}
/* SPEC-B058: identificador único do documento (revisão) na linha */
.bso-cell__docref {
    font-size: 10px;
    color: var(--ink-tertiary, #9ca3af);
    font-family: ui-monospace, monospace;
}
.bso-cell__vtag {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--surface-muted, #eef2f7);
    color: var(--ink-secondary, #4b5563);
    font-size: 9px;
    font-weight: 600;
}
/* /reports view: BSO, Pais, Resultado, Confiança, Processado, Ações */
.reports-table thead th:nth-child(1) { width: 24%; }
.reports-table thead th:nth-child(2) { width: 8%; }
.reports-table thead th:nth-child(3) { width: 20%; }
.reports-table thead th:nth-child(4) { width: 12%; }
.reports-table thead th:nth-child(5) { width: 16%; }
.reports-table thead th:nth-child(6) { width: 20%; }

thead th {
    background: var(--surface-inset);
    font-weight: 600;
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--edge-emphasis);
    position: sticky;
    top: 0;
    white-space: nowrap;
    color: var(--ink-secondary);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    overflow: hidden;
    text-overflow: ellipsis;
}

tbody td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--edge-subtle);
    vertical-align: middle;
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

tbody tr {
    transition: background var(--duration-fast) var(--ease-out);
    position: relative;
}

tbody tr:hover {
    background: rgba(37, 99, 235, 0.03);
}

tbody tr:last-child td {
    border-bottom: none;
}

tr.clickable {
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
tr.clickable:hover {
    background: rgba(168, 130, 58, 0.05); /* var(--brand-brass) at 5% — gold hover */
}
tr.clickable:active {
    background: rgba(168, 130, 58, 0.10);
}

/* BSO result cell with mini progress bar */
.bso-result-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.rules-mini-bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-inset);
}

.rules-mini-pass   { background: var(--status-pass); }
.rules-mini-fail   { background: var(--status-fail); }
.rules-mini-review { background: var(--status-review); }

.rules-mini-label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    color: var(--ink-tertiary);
}

/* ----------------------------------------------------------------
   VALIDATION SEAL — Hero element on results
   ---------------------------------------------------------------- */
/* Compact seal + metrics bar — single horizontal strip */
.seal-metrics-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-5);
    background: var(--surface-primary);
}

/* Seal badge — compact pill */
.seal-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-full, 9999px);
    font-weight: 700;
    font-size: var(--text-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.seal-badge-icon {
    display: flex;
    align-items: center;
}

.seal-badge-icon svg {
    width: 18px;
    height: 18px;
}

.seal-badge.seal-pass {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}

.seal-badge.seal-fail {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.seal-badge.seal-pass-notes {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}
.seal-badge.seal-conditional {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
}

/* Separator between badge and metrics */
.seal-metrics-bar .metrics-row {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex: 1;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--edge-subtle);
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
}

.metric-item {
    text-align: center;
}

.metric-value {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
    margin-top: 2px;
}

.metric-sep {
    border-left: 1px solid var(--edge-subtle);
    padding-left: var(--sp-5);
}

.metric-pass  .metric-value { color: var(--status-pass); }
.metric-fail  .metric-value { color: var(--status-fail); }
.metric-review .metric-value { color: var(--status-review); }
.metric-error .metric-value { color: var(--status-error); }

/* SPEC-R04-014 follow-up: stacked confidence card (PASS / FAIL / NR
   averages on three lines instead of one misleading aggregate). */
.metric-confidence .metric-conf-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    line-height: 1.15;
    margin-top: 2px;
}
.metric-conf-row {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.metric-conf-row strong {
    font-weight: 600;
    font-size: 14px;
}
.metric-conf-label {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    min-width: 36px;
}
.metric-conf-pass strong { color: var(--status-pass); }
.metric-conf-fail strong { color: var(--status-fail); }
.metric-conf-nr   strong { color: var(--status-review); }

@media (max-width: 640px) {
    .seal-metrics-bar { flex-direction: column; align-items: stretch; }
    .seal-metrics-bar .metrics-row { border-left: none; border-top: 1px solid var(--edge-subtle); padding-left: 0; padding-top: var(--sp-3); justify-content: center; }
}

/* Visual evidence thumbnails in validation detail modal */
.vdetail-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
}

.vdetail-thumb-item {
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    background: var(--surface-primary);
}

/* SPEC-609: brass edge on hover so the affordance matches Audit Dossier. */
.vdetail-thumb-item:hover {
    border-color: var(--edge-brass);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* SPEC-609: focus ring for keyboard users activating the thumbnail via Enter. */
.vdetail-thumb-item:focus-visible {
    outline: none;
    border-color: var(--edge-brass);
    box-shadow: var(--shadow-focus-brass);
}

.vdetail-thumb-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    background: var(--paper-inset);
}

.vdetail-thumb-label {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--ink-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight toggle button */
.highlight-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 4px 6px;
    background: var(--surface-inset);
}

.highlight-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.highlight-toggle:hover {
    border-color: var(--edge-emphasis);
}

.highlight-toggle.active {
    background: #FFFBEB;
    border-color: #D4A843;
    color: #92400E;
}

.highlight-toggle-static {
    cursor: default;
    pointer-events: none;
    opacity: 0.72;
}

.highlight-toggle-icon {
    font-size: 0.7rem;
}

.vdetail-no-image-msg {
    font-size: 0.82rem;
    color: var(--ink-secondary);
    background: var(--surface-inset);
    border: 1px dashed var(--edge-emphasis);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
}

.vdetail-image-sources {
    margin: 0 0 var(--sp-2) 0;
    font-size: 0.76rem;
    color: var(--ink-tertiary);
}

.decision-points-wrap {
    margin-top: var(--sp-3);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.decision-points-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--edge-subtle);
}

.decision-points-list {
    list-style: none;
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    display: grid;
    gap: var(--sp-2);
}

.decision-point {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: 0.78rem;
    color: var(--ink-secondary);
    line-height: 1.45;
}

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

.decision-point-label {
    font-weight: 700;
}

.decision-point-pass .decision-point-dot {
    background: var(--status-pass);
}

.decision-point-review .decision-point-dot {
    background: #eab308;
}

.decision-point-fail .decision-point-dot {
    background: var(--status-fail);
}

/* ================================================================
   Review Cards — Rich review screen
   ================================================================ */

/* V5 unification — match Validações tab card style: bigger radius, soft
   shadow, no gold border-left (state is signalled by status pills + icon
   tint instead). */
.review-card {
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.05));
    transition: box-shadow var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.review-card:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
}

.review-card.decided,
.review-card--accepted,
.review-card.rejected,
.review-card--rejected {
    opacity: 0.92;
}

/* SPEC-615: cards open collapsed so the tab scans fast. Clicking the
   header (or the chevron) expands. The body + decided-info + action
   block are hidden while collapsed — only the summary row shows. */
.review-card--collapsed .review-card-body,
.review-card--collapsed .review-card-actions,
.review-card--collapsed .review-decided-info {
    display: none;
}
.review-card-header {
    cursor: pointer;
    user-select: none;
}
.review-card-header-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.review-card-header-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.review-card-summary-line {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-secondary);
}
.review-card--collapsed .review-card-summary-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-card-toggle {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--ink-tertiary);
    font-size: 14px;
    line-height: 1;
}
.review-card-toggle__chevron {
    display: inline-block;
    transition: transform 150ms var(--ease-out, ease-out);
}
.review-card:not(.review-card--collapsed) .review-card-toggle__chevron {
    transform: rotate(90deg);
}

/* Status pill on the right side of the summary row. */
.review-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.review-status-pill--pending {
    background: rgba(201, 148, 53, 0.12);
    color: var(--brand-brass-ink, #8a6725);
    border: 1px solid rgba(201, 148, 53, 0.3);
}
.review-status-pill--ok {
    background: rgba(46, 125, 76, 0.1);
    color: var(--status-pass, #2e7d4c);
    border: 1px solid rgba(46, 125, 76, 0.3);
}
.review-status-pill--fail {
    background: rgba(179, 58, 58, 0.08);
    color: var(--status-fail, #b33a3a);
    border: 1px solid rgba(179, 58, 58, 0.25);
}
.review-status-pill svg {
    width: 12px;
    height: 12px;
}

/* SPEC-B025: carryover badges on review cards. Two flavours — "from"
   (blue, informational) and "changed" (amber, needs attention). */
.review-carryover-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    margin-left: 6px;
}
.review-carryover-badge--from {
    background: rgba(47, 103, 173, 0.08);
    color: #2f67ad;
    border: 1px solid rgba(47, 103, 173, 0.25);
}
.review-carryover-badge--changed {
    background: rgba(190, 120, 20, 0.10);
    color: #b56a14;
    border: 1px solid rgba(190, 120, 20, 0.35);
}

/* SPEC-B026: danger GHOST variant — apenas no contexto do botao
   "Cancelar toda a revisao". Override scoped pra nao bagunçar
   .btn-danger generico (que mantem text=branco fundo=vermelho). */
.review-cancel-all-btn.btn-danger {
    color: var(--status-fail, #b33a3a);
    border-color: rgba(179, 58, 58, 0.3);
    background: transparent;
}
.review-cancel-all-btn.btn-danger:hover {
    background: rgba(179, 58, 58, 0.08);
}
.review-cancel-all-btn {
    margin-left: var(--sp-2, 8px);
}

/* V5 unification — Collapsible subsections inside the expanded body
   (SPEC-615). Match Validações tab card aesthetic: white bg, soft shadow,
   no cream tint. */
.review-collapsible {
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    margin-bottom: 10px;
    overflow: hidden;
}
.review-collapsible__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    color: var(--ink-primary);
    background: #fff;
    transition: background 150ms;
}
.review-collapsible__summary:hover { background: var(--surface-subtle, #F8F9FA); }
.review-collapsible__summary::-webkit-details-marker { display: none; }
.review-collapsible__title {
    font-weight: 600;
    flex: 1;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-primary);
}
.review-collapsible__icon {
    display: inline-flex;
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
    align-items: center; justify-content: center;
    background: var(--surface-inset, #F4F5F7);
    color: var(--ink-secondary, #5A6170);
}
.review-collapsible__icon svg { width: 13px; height: 13px; }
.review-collapsible__chevron {
    color: var(--ink-tertiary);
    font-size: 12px;
    transition: transform 150ms var(--ease-out, ease-out);
}
.review-collapsible[open] .review-collapsible__chevron {
    transform: rotate(180deg);
}
.review-collapsible__body {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    background: var(--surface-subtle, #F8F9FA);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-primary);
}

/* Review "section" blocks — small always-visible summaries between
   the summary line and the collapsibles. */
.review-section {
    margin-bottom: var(--sp-3);
}
.review-section-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-bottom: 4px;
}
.review-section-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-primary);
}
.review-section--message .review-section-body {
    background: var(--surface-subtle, #F8F9FA);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
}

.review-evidence-rows {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 4px var(--sp-3);
    font-size: 13px;
}
.review-evidence-row {
    display: contents;
}
.review-evidence-row__key {
    color: var(--ink-tertiary);
    font-weight: 500;
}
.review-evidence-row__value {
    color: var(--ink-primary);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Reviewer chip — a styled card, not a readonly input. */
.review-reviewer-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px 6px 6px;
    background: var(--surface-inset, #f8f5ec);
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.08));
    border-radius: 999px;
    align-self: flex-start;
    max-width: 100%;
}
.review-reviewer-chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-navy, #1b2942);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.review-reviewer-chip__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.review-reviewer-chip__label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}
.review-reviewer-chip__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-primary);
}

/* Replace the legacy Aceitar/Rejeitar buttons with proper primary action
   buttons, each carrying a kbd chip showing the A/R shortcut. */
.review-action-buttons {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.review-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms var(--ease-out, ease-out),
                box-shadow 120ms var(--ease-out, ease-out),
                background 120ms var(--ease-out, ease-out);
    min-width: 160px;
    justify-content: center;
    position: relative;
}
.review-action-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.review-action-btn:active { transform: translateY(0); }
.review-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.review-action-btn__icon { display: inline-flex; width: 16px; height: 16px; }
.review-action-btn__icon svg { width: 16px; height: 16px; }
.review-action-btn__label { flex: 0 0 auto; }
.review-action-btn__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    margin-left: 4px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    opacity: 0.7;
}
.review-action-btn--accept {
    background: var(--status-pass, #2e7d4c);
    color: #fff;
}
.review-action-btn--accept:hover { background: #266e42; }
.review-action-btn--reject {
    background: #fff;
    color: var(--status-fail, #b33a3a);
    border-color: var(--status-fail, #b33a3a);
}
.review-action-btn--reject:hover {
    background: var(--status-fail, #b33a3a);
    color: #fff;
}

/* Image hint next to the rule id — shows a tiny icon if visual evidence
   was used in the AI's decision. */
.review-image-hint {
    display: inline-flex;
    color: var(--brand-brass-ink, #8a6725);
    opacity: 0.8;
}
.review-image-hint svg { width: 14px; height: 14px; }

/* Decided-info row is now a flex layout, not a dense block. */
.review-decided-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-inset, #f8f5ec);
    border-radius: var(--radius-sm);
    margin: var(--sp-3) 0 0;
    font-size: 13px;
    color: var(--ink-secondary);
}
.review-decided-ts {
    color: var(--ink-tertiary);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
}
.review-decided-comment {
    flex-basis: 100%;
    font-style: italic;
    color: var(--ink-primary);
    margin-top: 2px;
}

.review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.review-card-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.review-card-rule {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.review-card-name {
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--ink-primary);
}

.review-card-group {
    font-size: 0.68rem;
    color: var(--ink-tertiary);
    background: var(--surface-inset);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.review-card-body {
    margin-bottom: var(--sp-3);
}

.review-card-description {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--ink-secondary);
    margin-bottom: var(--sp-3);
}

/* Evidence text in review */
.review-evidence-text {
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ink-secondary);
    margin-bottom: var(--sp-3);
}

.review-evidence-label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-tertiary);
    margin-bottom: var(--sp-2);
}

.review-evidence-label svg {
    width: 14px;
    height: 14px;
}

/* Formatted explanation inside review cards */
.review-explanation p {
    margin: 0 0 var(--sp-2) 0;
}
.review-explanation p:last-child { margin-bottom: 0; }
.review-explanation p.expl-label {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--edge-subtle);
}
.review-explanation ul.expl-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-1) 0 var(--sp-2) 0;
}
.review-explanation ul.expl-list li {
    position: relative;
    padding: var(--sp-1) 0 var(--sp-1) 1.2em;
    line-height: 1.55;
}
.review-explanation ul.expl-list li::before {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.7em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--status-review);
}

.review-evidence-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.review-evidence-chip {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    background: var(--surface-inset);
    border: 1px solid var(--edge-subtle);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    color: var(--ink-secondary);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Review thumbnails with overlay */
.review-card-thumbs {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
}

.review-no-image-msg {
    font-size: 0.72rem;
    color: var(--ink-tertiary);
    background: var(--surface-inset);
    border: 1px dashed var(--edge-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
}

.review-thumb {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    border: 2px solid var(--edge-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.review-thumb:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.review-thumb img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.review-thumb-overlay {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    padding: 3px 8px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-thumb-label {
    padding: 4px 8px;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    color: var(--ink-tertiary);
    background: var(--surface-inset);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight toggle button on thumbnails */
.review-thumb-toggle {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background var(--duration-fast) var(--ease-out);
    backdrop-filter: blur(4px);
}

.review-thumb-toggle:hover {
    background: rgba(0, 0, 0, 0.8);
}

.review-thumb-toggle[data-highlight="on"] {
    background: rgba(212, 168, 67, 0.7);
    border-color: rgba(212, 168, 67, 0.5);
}

.review-thumb-toggle[data-highlight="off"] {
    background: rgba(100, 100, 100, 0.6);
}

.review-decided-info {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--edge-subtle);
    margin-top: var(--sp-2);
}

.review-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--edge-subtle);
    margin-top: var(--sp-2);
}

.review-card-actions-top {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.review-card-actions-top input[type="text"] {
    flex: 1;
    min-width: 120px;
}

.review-card-actions textarea.review-comment {
    width: 100%;
    min-height: 60px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-primary);
    background: var(--surface-card);
    resize: vertical;
    line-height: 1.5;
}

.review-card-actions textarea.review-comment:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}

@media (max-width: 640px) {
    .review-card-actions-top { flex-direction: column; align-items: stretch; }
    .review-card-thumbs { flex-direction: column; }
    .review-thumb { width: 100%; }
}

/* ----------------------------------------------------------------
   SPEC-611 — Review screen QA polish
   ---------------------------------------------------------------- */

/* "X de Y regras revisadas" counter at the top of the review panel */
.review-counter {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink-tertiary);
    background: var(--paper-inset);
    border: 1px solid var(--edge-hairline);
    border-left: 3px solid var(--edge-brass);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-4);
    letter-spacing: 0.02em;
    margin: 0;
}

/* SPEC-R04-014: header row with counter on the left + Finalizar + Cancelar
   tudo on the right. Was floating loose in the panel. */
.review-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.review-header-row__left {
    flex: 1 1 auto;
    min-width: 0;
}
.review-actions-bar {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.review-actions-bar .review-finalize-btn {
    padding: var(--sp-3) var(--sp-5);
    font-weight: 600;
    min-width: 180px;
}
.review-actions-bar .review-cancel-all-btn {
    padding: var(--sp-3) var(--sp-4);
}

/* Keyboard focus ring on the card itself (reveals where A/R shortcuts apply) */
.review-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
    border-color: var(--edge-brass);
}

/* Accept / reject button focus rings — brass, consistent with rest of app */
.review-accept-btn:focus-visible,
.review-reject-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

/* Icon inside accept/reject buttons — sized via the wrapping span */
.review-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}
.review-btn-icon svg {
    width: 100%;
    height: 100%;
}

/* Loading spinner state — replaces icon with a rotating ring, keeps label visible */
.review-btn--loading .review-btn-icon svg {
    display: none;
}
.review-btn--loading .review-btn-icon::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reviewBtnSpin 0.7s linear infinite;
}
@keyframes reviewBtnSpin {
    to { transform: rotate(360deg); }
}

/* Inline error state for the name/comment inputs — auto-clears on focus
 * (replaces inline style mutation that used to persist after blur) */
.review-name.is-invalid,
.review-comment.is-invalid {
    border-color: var(--status-fail);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}
.review-name.is-invalid:focus,
.review-comment.is-invalid:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}

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

.summary-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    text-align: center;
    border: 1px solid var(--edge-subtle);
    box-shadow: var(--shadow-xs);
    transition: all var(--duration-fast) var(--ease-out);
}

.summary-card:hover {
    box-shadow: var(--shadow-sm);
}

.summary-card .count {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--sp-1);
    font-variant-numeric: tabular-nums;
}

.summary-card .label {
    font-size: var(--text-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
}

.summary-card.pass .count  { color: var(--status-pass); }
.summary-card.pass  { border-bottom: 3px solid var(--status-pass); }
.summary-card.fail .count  { color: var(--status-fail); }
.summary-card.fail  { border-bottom: 3px solid var(--status-fail); }
.summary-card.review .count { color: var(--status-review); }
.summary-card.review { border-bottom: 3px solid var(--status-review); }
.summary-card.error .count { color: var(--status-error); }
.summary-card.error  { border-bottom: 3px solid var(--status-error); }

/* ----------------------------------------------------------------
   PROGRESS — Timeline with connector lines
   ---------------------------------------------------------------- */
/* SPEC-405: sober navy fill, no gradient, no shimmer (was brass gradient) */
.progress-bar-wrap {
    background: var(--paper-inset);
    border-radius: var(--radius-sm);
    height: 6px;
    overflow: hidden;
    margin: var(--sp-4) 0 var(--sp-3);
    border: 0;
}

.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--brand-navy);
    transition: width var(--duration-slow) var(--ease-out);
    min-width: 0;
    position: relative;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    margin-bottom: var(--sp-4);
    font-family: var(--font-mono);
}

/* Step timeline */
.step-list {
    list-style: none;
    padding: 0;
    position: relative;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    font-size: var(--text-sm);
    position: relative;
}

/* Connector line */
.step-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 36px;
    bottom: -4px;
    width: 2px;
    background: var(--edge-default);
}

.step-item.step-done:not(:last-child)::before {
    background: var(--status-pass);
    opacity: 0.3;
}

.step-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: var(--text-base);
    position: relative;
    z-index: 1;
}

.step-icon.done {
    background: var(--status-pass-bg);
    color: var(--status-pass);
}
.step-icon.active {
    background: var(--status-info-bg);
    color: var(--status-info);
}
.step-icon.waiting {
    background: var(--surface-inset);
    color: var(--ink-muted);
}
.step-icon.failed {
    background: var(--status-fail-bg);
    color: var(--status-fail);
}

.step-name {
    font-weight: 600;
    min-width: 160px;
    color: var(--ink-primary);
}

.step-message {
    color: var(--ink-secondary);
    flex: 1;
}

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

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--edge-default);
    border-top-color: var(--brand-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ----------------------------------------------------------------
   COLLAPSIBLE
   ---------------------------------------------------------------- */
.collapsible {
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-subtle);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
    color: var(--ink-primary);
}

.collapsible-header:hover { background: var(--surface-inset); }

.collapsible-arrow {
    transition: transform var(--duration-fast) var(--ease-out);
    font-size: var(--text-label);
    color: var(--ink-tertiary);
}

.collapsible.open .collapsible-arrow { transform: rotate(90deg); }

.collapsible-body {
    display: none;
    padding: var(--sp-4);
    border-top: 1px solid var(--edge-subtle);
    font-size: var(--text-sm);
}

.collapsible.open .collapsible-body { display: block; }

/* ----------------------------------------------------------------
   REVIEW ITEMS
   ---------------------------------------------------------------- */
.review-item {
    border: 1px solid var(--edge-default);
    border-left: 4px solid var(--status-review);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--surface-card);
    transition: all var(--duration-fast) var(--ease-out);
}

.review-item:hover {
    box-shadow: var(--shadow-sm);
}

.review-item.decided {
    border-left-color: var(--status-pass);
    opacity: 0.75;
}

.review-item.rejected {
    border-left-color: var(--status-fail);
    opacity: 0.75;
}

.review-item-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.review-item-header .rule-id {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-sm);
}

.review-item-description {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-4);
    line-height: 1.6;
}

.review-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.review-actions input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: var(--surface-card);
    transition: all var(--duration-fast) var(--ease-out);
}

.review-actions input[type="text"]:focus {
    outline: none;
    border-color: var(--ink-link);
    box-shadow: 0 0 0 3px var(--edge-focus);
}

/* ----------------------------------------------------------------
   ALERTS
   ---------------------------------------------------------------- */
.alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    line-height: 1.5;
}

.alert-error {
    background: var(--status-fail-bg);
    color: var(--status-fail-ink);
    border: 1px solid var(--status-fail-edge);
}

.alert-warning {
    background: var(--status-review-bg);
    color: var(--status-review-ink);
    border: 1px solid var(--status-review-edge);
}

.alert-success {
    background: var(--status-pass-bg);
    color: var(--status-pass-ink);
    border: 1px solid var(--status-pass-edge);
}

.alert-info {
    background: var(--status-info-bg);
    color: #1D4ED8;
    border: 1px solid var(--status-info-edge);
}

/* ----------------------------------------------------------------
   TOAST NOTIFICATION
   ---------------------------------------------------------------- */
.toast-container {
    position: fixed;
    top: var(--sp-6);
    right: var(--sp-6);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    max-width: 420px;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: toastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.toast-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
}

.toast-error {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #fff;
}

.toast-success::before,
.toast-error::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-5.5'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.toast-error::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E");
}

/* Warning variant (SPEC-REDESIGN-009) */
.toast-warning {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    color: #fff;
}

.toast-warning::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v4M8 11v1'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Info variant (SPEC-REDESIGN-009) */
.toast-info {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    color: #fff;
}

.toast-info::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7v5M8 4v1'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Close button inside toast */
.toast-close {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: var(--radius-sm);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: background var(--duration-fast) var(--ease-out);
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.30);
}

@keyframes toastIn {
    from { transform: translateX(100%) scale(0.95); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes toastOut {
    from { transform: translateX(0) scale(1); opacity: 1; }
    to   { transform: translateX(100%) scale(0.95); opacity: 0; }
}

/* ----------------------------------------------------------------
   REPORT META
   ---------------------------------------------------------------- */
.report-meta {
    display: grid;
    /* Wider min so long labels (VALIDADO POR <email>, ANO/MES, etc) do
       not collide with the next column. column-gap stays generous;
       row-gap is larger so the wrapped values from one row never touch
       the labels of the next. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: var(--sp-6);
    row-gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--edge-subtle);
    margin-bottom: var(--sp-6);
}

.report-meta > div,
.report-meta > dl > div {
    /* Each <dt>/<dd> pair lives in its own block so wrapping never
       leaks into a sibling cell. min-width:0 lets long emails wrap. */
    min-width: 0;
}

.report-meta dt {
    font-weight: 600;
    color: var(--ink-tertiary);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-1);
}

.report-meta dd {
    font-weight: 500;
    color: var(--ink-primary);
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    /* Allow long values (emails, full filenames) to wrap inside the
       cell instead of overflowing into the neighbour. */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------
   EMPTY STATES
   ---------------------------------------------------------------- */
.empty-state,
.empty-shell {
    text-align: center;
    padding: var(--sp-12) var(--sp-8);
    color: var(--ink-tertiary);
}

.empty-state__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink-secondary);
    margin: 0 0 var(--sp-2) 0;
}

.empty-state__body {
    font-size: var(--text-sm);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

.empty-state__cta {
    display: inline-block;
    margin-top: var(--sp-4);
    color: var(--ink-link);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-4);
    opacity: 0.3;
    stroke-width: 1;
}

.empty-state p {
    font-size: var(--text-sm);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

.empty-state .cta-link {
    color: var(--ink-link);
    font-weight: 500;
    cursor: pointer;
}

/* ----------------------------------------------------------------
   FORM ELEMENTS
   ---------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--sp-4);
}

.form-group label {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
    margin-bottom: var(--sp-1);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: var(--surface-card);
    transition: all var(--duration-fast) var(--ease-out);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--ink-link);
    box-shadow: 0 0 0 3px var(--edge-focus);
}

/* ----------------------------------------------------------------
   REPORTS — Dashboard with donuts, bars, panels
   ---------------------------------------------------------------- */
.reports-dashboard {
    margin-bottom: var(--sp-6);
}

/* Hero KPI strip — split: gauges left, numbers right (2 rows × 3 cols) */
.dash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: var(--sp-4);
    background: linear-gradient(135deg, #0C1B2E 0%, #1A2E4A 100%);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-lg);
}

.dash-hero-gauges {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    min-width: 0;
}
.dash-hero-gauges .dash-kpi { flex: 1 1 0; min-width: 0; }
.dash-hero-gauges .dash-gauge-svg { max-width: 100%; height: auto; }

.dash-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(60px, auto);
    gap: var(--sp-3) var(--sp-4);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
}

.dash-kpi {
    text-align: center;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dash-kpi-gauge .dash-gauge-svg { display: block; }

/* ----- Hero v2: trust score + 5 gauges + 2 FP/FN cards ----- */
.dash-hero-v2 {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.2fr);
    grid-template-rows: auto;
    grid-template-areas:
        "trust gauges";
    gap: var(--sp-3) var(--sp-4);
}

.dash-hero-v2 .dash-hero-trust {
    grid-area: trust;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    padding: var(--sp-3);
    min-width: 0;
}

.dash-hero-v2 .dash-hero-gauges {
    grid-area: gauges;
    border-right: none;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.dash-hero-v2 .dash-hero-cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-3);
}

.dash-hero-v2 .dash-hero-stats {
    grid-area: stats;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: var(--sp-3);
}

/* Matriz de confusao IA x Humano */
.dash-cmx {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
    margin-top: var(--sp-2);
    table-layout: fixed;
}
.dash-cmx-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    font-weight: 700;
    padding: 4px 8px;
    text-align: center;
}
.dash-cmx-axis {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #9ca3af);
    font-weight: 800;
    text-align: center;
    padding: 2px;
}
.dash-cmx-axis--vert {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 22px;
}
.dash-cmx-cell {
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--radius-md);
    text-align: center;
    vertical-align: middle;
    min-height: 60px;
}
.dash-cmx-num {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.dash-cmx-hint {
    font-size: 0.65rem;
    color: var(--text-tertiary, #9ca3af);
    margin-top: 4px;
    line-height: 1.2;
}
.dash-cmx-agree {
    background: rgba(46, 125, 50, 0.10);
    color: var(--status-pass, #2e7d32);
}
.dash-cmx-disagree {
    background: rgba(192, 57, 43, 0.10);
    color: var(--status-fail, #c0392b);
}
.dash-cmx-nr {
    background: rgba(217, 119, 6, 0.10);
    color: var(--brand-gold, #d97706);
}
.dash-cmx-silent {
    background: rgba(120, 120, 120, 0.06);
    color: var(--text-secondary, #6b7280);
}
.dash-cmx-pending {
    background: rgba(120, 120, 120, 0.04);
    color: var(--text-tertiary, #9ca3af);
    font-style: italic;
}

/* --------- Dashboard v3 — paineis novos --------- */

/* Row com 3 panels (Fila + Saude + Volume) */
.dash-row-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
}

/* Pipeline Health split em 2 colunas: donut + work_state list */
.dash-pipeline-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: stretch;
    margin-top: var(--sp-2);
}
.dash-pipeline-side {
    min-width: 0;
}
.dash-pipeline-divider {
    background: rgba(0, 0, 0, 0.06);
    width: 1px;
}
.dash-workstate-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    font-weight: 700;
    display: flex;
    align-items: center;
}
.dash-workstate-sub {
    font-size: 0.72rem;
    color: var(--text-tertiary, #9ca3af);
    margin: 2px 0 var(--sp-2) 0;
}
.dash-workstate-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
}
.dash-workstate-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dash-workstate-label {
    color: var(--text-secondary, #6b7280);
}
.dash-workstate-count {
    color: var(--text-primary, #1A2E4A);
    font-variant-numeric: tabular-nums;
}

/* Fila strip dentro do panel Saude Pipeline */
.dash-fila-strip {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.dash-fila-strip-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    font-weight: 700;
    display: flex;
    align-items: center;
}
.dash-fila-strip-value {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.dash-fila-strip-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-fila-strip-sub {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
}

/* Fila de Trabalho card */
.dash-fila-value {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.dash-fila-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--brand-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-fila-unit {
    font-size: 0.95rem;
    color: var(--text-secondary, #6b7280);
}
.dash-fila-sub {
    font-size: 0.78rem;
    color: var(--text-tertiary, #9ca3af);
    margin-top: 4px;
}

/* Horizontal bar (histograma + breakdown generico) */
.dash-hbar-row {
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    gap: var(--sp-2);
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
}
.dash-hbar-label {
    color: var(--text-secondary, #6b7280);
    font-weight: 600;
}
.dash-hbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
    position: relative;
}
.dash-hbar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 200ms ease;
}
.dash-hbar-stacked { display: flex; }
.dash-hbar-seg {
    height: 100%;
    transition: width 200ms ease;
}
.dash-hbar-value {
    text-align: right;
    font-weight: 700;
    color: var(--text-primary, #1A2E4A);
    font-variant-numeric: tabular-nums;
}
.dash-hbar-sub {
    color: var(--text-tertiary, #9ca3af);
    font-weight: 400;
    font-size: 0.75rem;
}

/* Timeseries SVG */
.dash-ts-svg {
    width: 100%;
    max-height: 180px;
    display: block;
    margin: var(--sp-1) 0;
}
.dash-ts-legend {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
}
.dash-ts-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--text-secondary, #6b7280);
}
.dash-ts-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dash-ts-wrap {
    position: relative;
}
.dash-ts-hover-col {
    cursor: crosshair;
}
.dash-ts-dot {
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Panel header with period selector */
.dash-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.dash-period-selector {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.dash-period-btn {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--edge-subtle);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}
.dash-period-btn:hover {
    border-color: var(--brand-gold);
    color: var(--text-primary);
}
.dash-period-btn.dash-period-active {
    background: var(--brand-navy, #1A2E4A);
    color: #fff;
    border-color: var(--brand-navy, #1A2E4A);
}

/* SLA card */
.dash-sla-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin: var(--sp-3) 0;
}
.dash-sla-cell {
    text-align: center;
    padding: var(--sp-3);
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--radius-md);
}
.dash-sla-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-tertiary, #9ca3af);
    letter-spacing: 0.04em;
}
.dash-sla-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary, #1A2E4A);
    margin-top: 4px;
}
.dash-rev-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary, #9ca3af);
    margin: var(--sp-2) 0 var(--sp-1) 0;
    display: flex;
    align-items: center;
}
.dash-rev-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
}
.dash-rev-name { color: var(--text-secondary, #6b7280); }
.dash-rev-count { color: var(--text-primary, #1A2E4A); }

/* Activity totals strip */
.dash-activity-totals {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--edge-subtle);
    font-size: 0.72rem;
    color: var(--text-secondary, #6b7280);
}
.dash-activity-total {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dash-activity-total strong {
    font-size: 0.82rem;
    color: var(--text-primary, #1A2E4A);
}

/* Atividade Humana panel — constrained */
#dash-activity-panel {
    padding: var(--sp-4) var(--sp-5);
}
#dash-activity-panel .dash-panel-header {
    align-items: center;
    margin-bottom: var(--sp-1);
}
#dash-activity-panel .dash-panel-title {
    font-size: var(--text-sm, 0.875rem);
}
#dash-activity-panel .dash-panel-sub {
    font-size: 0.7rem;
}

.dash-empty-state {
    padding: var(--sp-3);
    text-align: center;
    color: var(--text-tertiary, #9ca3af);
    font-size: 0.85rem;
    font-style: italic;
}

/* Volume / throughput card (ao lado de Saude Pipeline) */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
.dash-stat-card {
    text-align: center;
    padding: var(--sp-3) var(--sp-2);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
}
.dash-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary, #1A2E4A);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.dash-stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.dash-stat-sub {
    font-size: 0.7rem;
    color: var(--text-tertiary, #9ca3af);
    margin-top: 2px;
}

.dash-fp-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-fp-card-title {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-fp-card-sub {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-fp-card-value {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-top: 2px;
    flex-wrap: wrap;
}

.dash-fp-pct {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--status-fail, #c0392b);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dash-fp-count {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
}

/* Info icon trigger embutido nos labels dos gauges/cards */
.metric-info-trigger {
    background: none;
    border: none;
    padding: 0 2px;
    margin-left: 4px;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: color 120ms ease;
}
.metric-info-trigger:hover { color: var(--brand-gold, #d97706); }
/* No hero (fundo escuro) inverte cor pra branco translucido. */
.dash-hero .metric-info-trigger { color: rgba(255, 255, 255, 0.55); }
.dash-hero .metric-info-trigger:hover { color: rgba(255, 255, 255, 0.95); }
.metric-info-trigger:focus-visible {
    outline: 2px solid var(--brand-gold);
    border-radius: 50%;
}

/* Modal explicando a metrica (click no info icon) */
.metric-info-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-info-modal[hidden] { display: none; }
.metric-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.metric-info-panel {
    position: relative;
    background: #15243d;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    max-width: 540px;
    width: calc(100% - 32px);
    box-shadow: var(--shadow-lg);
}
.metric-info-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.metric-info-close:hover { color: #FFFFFF; }
.metric-info-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 var(--sp-2) 0;
    color: var(--brand-gold);
}
.metric-info-intro {
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 var(--sp-3) 0;
    color: rgba(255, 255, 255, 0.85);
}
.metric-info-formula-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
}
.metric-info-formula {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.85rem;
    color: #e2e8f0;
    white-space: pre-wrap;
    margin: 0 0 var(--sp-3) 0;
}
.metric-info-notes {
    margin: 0;
    padding-left: var(--sp-4);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}
.metric-info-notes li { margin-bottom: 4px; }

.dash-kpi-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dash-kpi-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    word-break: normal;
    max-width: 100%;
}

.dash-kpi-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-kpi-pass  { color: var(--status-pass) !important; }
.dash-kpi-fail  { color: var(--status-fail) !important; }
.dash-kpi-review { color: var(--status-review) !important; }

.dash-kpi-sep {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* Dashboard layout rows */
.dash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.dash-panel {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--edge-subtle);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
}

.dash-panel-wide {
    margin-bottom: var(--sp-5);
}

.dash-section-heading {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.dash-section-heading:first-child {
    margin-top: 0;
}
.dash-section-title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
    letter-spacing: -0.01em;
}

.dash-panel:hover {
    box-shadow: var(--shadow-md);
}

.dash-panel-title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
    margin-bottom: 4px;
}

.dash-panel-sub {
    font-size: 0.75rem;
    color: var(--ink-quaternary, rgba(0, 0, 0, 0.5));
    margin-bottom: var(--sp-4);
    line-height: 1.3;
}

/* Donut charts */
.dash-donut-row {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}

.dash-donut {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.dash-donut-inner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-donut-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
}

/* Legend */
.dash-donut-legend {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.dash-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.dash-legend-item strong {
    color: var(--ink-primary);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.dash-legend-total {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    border-top: 1px solid var(--edge-subtle);
    padding-top: var(--sp-2);
    margin-top: var(--sp-1);
}

.dash-legend-total strong {
    color: var(--ink-primary);
}

/* Dots for legend */
.dash-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dash-dot-pass    { background: var(--status-pass); }
.dash-dot-fail    { background: var(--status-fail); }
.dash-dot-review  { background: var(--status-review); }
.dash-dot-error   { background: var(--status-error); }
.dash-dot-pending { background: var(--ink-muted); }

/* Horizontal stacked bar */
.dash-bar-container {
    margin-top: var(--sp-2);
}

.dash-bar {
    display: flex;
    height: 24px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--surface-inset);
    border: 1px solid var(--edge-subtle);
}

.dash-bar-seg {
    min-width: 2px;
    transition: width 0.5s var(--ease-out);
}

.dash-bar-pass   { background: var(--status-pass); }
.dash-bar-fail   { background: var(--status-fail); }
.dash-bar-review { background: var(--status-review); }
.dash-bar-error  { background: var(--status-error); }

.dash-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}

.dash-bar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.dash-bar-legend-item strong {
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
}

/* Top Failing Rules rows */
.dash-rule-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--edge-subtle);
}

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

.dash-rule-rank {
    width: 20px;
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--ink-tertiary);
    text-align: center;
    flex-shrink: 0;
}

.dash-rule-id {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    background: var(--surface-inset);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.dash-rule-name {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-rule-bar-wrap {
    width: 60px;
    flex-shrink: 0;
}

.dash-rule-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--surface-inset);
}

.dash-rule-bar-fail   { background: var(--status-fail); }
.dash-rule-bar-review { background: var(--status-review); }

.dash-rule-count {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-primary);
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.dash-rule-breakdown {
    font-size: var(--text-sm);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
    text-align: right;
}
.dash-rule-sep {
    color: var(--text-tertiary, #9ca3af);
    margin: 0 2px;
}

/* Country breakdown */
.dash-country-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--edge-subtle);
    margin-bottom: var(--sp-1);
}

.dash-country-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--edge-subtle);
}

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

.dash-country-flag {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    min-width: 36px;
}

.dash-country-bar-wrap {
    flex: 1;
    min-width: 0;
}

.dash-country-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--status-pass);
}

.dash-country-counts {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Recent Activity */
.dash-activity-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--edge-subtle);
}

.dash-activity-item:last-child { border-bottom: none; }

.dash-activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-activity-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-activity-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-activity-meta {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
}

.dash-activity-badge {
    flex-shrink: 0;
}

/* Section labels spanning the full grid */
.reports-section-label {
    grid-column: 1 / -1;
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-tertiary);
    padding: var(--sp-3) 0 var(--sp-1);
    border-bottom: 1px solid var(--edge-subtle);
    margin-bottom: var(--sp-1);
}

.reports-section-label:first-child {
    padding-top: 0;
}

/* Pipeline metric cards */
.reports-metric-card.metric-total     .reports-metric-value { color: var(--ink-primary); }
.reports-metric-card.metric-completed .reports-metric-value { color: var(--status-pass); }
.reports-metric-card.metric-completed { border-bottom: 3px solid var(--status-pass); }
.reports-metric-card.metric-failed    .reports-metric-value { color: var(--status-fail); }
.reports-metric-card.metric-failed    { border-bottom: 3px solid var(--status-fail); }
.reports-metric-card.metric-pending   .reports-metric-value { color: var(--status-review); }
.reports-metric-card.metric-pending   { border-bottom: 3px solid var(--status-review); }

/* BSO validation metric cards */
.reports-metric-card.metric-bso-pass    .reports-metric-value { color: var(--status-pass); }
.reports-metric-card.metric-bso-pass    { border-bottom: 3px solid var(--status-pass); }
.reports-metric-card.metric-bso-fail    .reports-metric-value { color: var(--status-fail); }
.reports-metric-card.metric-bso-fail    { border-bottom: 3px solid var(--status-fail); }
.reports-metric-card.metric-bso-review  .reports-metric-value { color: var(--status-review); }
.reports-metric-card.metric-bso-review  { border-bottom: 3px solid var(--status-review); }

/* Rule results metric cards */
.reports-metric-card.metric-rules-pass   .reports-metric-value { color: var(--status-pass); }
.reports-metric-card.metric-rules-pass   { border-bottom: 3px solid var(--status-pass); }
.reports-metric-card.metric-rules-fail   .reports-metric-value { color: var(--status-fail); }
.reports-metric-card.metric-rules-fail   { border-bottom: 3px solid var(--status-fail); }
.reports-metric-card.metric-rules-review .reports-metric-value { color: var(--status-review); }
.reports-metric-card.metric-rules-review { border-bottom: 3px solid var(--status-review); }
.reports-metric-card.metric-rules-error  .reports-metric-value { color: var(--status-error); }
.reports-metric-card.metric-rules-error  { border-bottom: 3px solid var(--status-error); }

/* ----------------------------------------------------------------
   FINDINGS PANEL — FAIL + NEEDS_REVIEW with justification
   ---------------------------------------------------------------- */
.findings-panel {
    margin-bottom: var(--sp-6);
}

.findings-group {
    margin-bottom: var(--sp-4);
}

.findings-group-header {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-3);
}

.findings-group-fail {
    color: var(--status-fail-ink);
    background: var(--status-fail-bg);
}

.findings-group-review {
    color: var(--status-review-ink);
    background: var(--status-review-bg);
}

.finding-card {
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--surface-card);
    border-left: 4px solid;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.finding-card:hover {
    box-shadow: var(--shadow-sm);
}

.finding-card-fail {
    border-left-color: var(--status-fail);
}

.finding-card-review {
    border-left-color: var(--status-review);
}

.finding-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}

.finding-rule-id {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    background: var(--surface-inset);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
}

.finding-rule-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink-primary);
}

.finding-bso {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    margin-left: auto;
}

.finding-message {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ink-primary);
    line-height: 1.5;
    margin-bottom: var(--sp-2);
}

.finding-meta {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.finding-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--ink-link);
}

.finding-description {
    color: var(--ink-tertiary);
    font-style: italic;
}

.reports-table-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* ----------------------------------------------------------------
   REPORT MODAL — Fullpage overlay
   ---------------------------------------------------------------- */
.report-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s var(--ease-out);
}

.report-modal.hidden {
    display: none;
}

@keyframes modalSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.report-modal-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-8);
    background: #000000;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.report-modal-header h2 {
    flex: 1;
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    color: #FFFFFF;
}

.report-modal-header .btn {
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.2);
}

.report-modal-header .btn:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.1);
}

.report-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #FFFFFF;
    font-size: 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
    line-height: 1;
}

.report-modal-close:hover {
    background: rgba(220, 38, 38, 0.30); /* subtle red on close hover (SPEC-REDESIGN-020) */
}

.report-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--sp-8) var(--sp-8);
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
}

/* ----------------------------------------------------------------
   Report Tabs — Tab navigation inside report modal
   ---------------------------------------------------------------- */
.report-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-4) 0 0;
    border-bottom: 1px solid var(--edge-default);
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 10;
    margin-bottom: var(--sp-6);
}

.report-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.report-tab:hover {
    color: var(--ink-primary);
}

.report-tab.active {
    color: var(--brand-gold-dark);
    font-weight: 600;
    border-bottom-color: var(--brand-gold);
}

.report-tab-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.report-tab-icon svg {
    width: 16px;
    height: 16px;
}

.report-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--status-review-bg);
    color: var(--status-review-ink);
}

.report-tab.active .report-tab-badge {
    background: var(--brand-gold);
    color: #FFFFFF;
}

.report-tab-panel {
    display: none;
}

.report-tab-panel.active {
    display: block;
}

/* ----------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------- */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-secondary { color: var(--ink-secondary); }
.text-muted { color: var(--ink-tertiary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-label); }
.text-center { text-align: center; }
.mt-sm { margin-top: var(--sp-2); }
.mt-md { margin-top: var(--sp-4); }
.mt-lg { margin-top: var(--sp-6); }
.mb-sm { margin-bottom: var(--sp-2); }
.mb-md { margin-bottom: var(--sp-4); }
.mb-lg { margin-bottom: var(--sp-6); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: var(--sp-2); }
.gap-md { gap: var(--sp-4); }
.hidden { display: none !important; }

pre.data-block {
    background: var(--surface-inset);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .app-header {
        flex-wrap: wrap;
        height: auto;
        min-height: 56px;
        padding: var(--sp-4);
        gap: var(--sp-3);
    }

    .header-logo-left img { max-height: 24px; }
    .header-title { font-size: var(--text-sm); }

    .app-main { padding: var(--sp-4); }

    .summary-grid { grid-template-columns: repeat(2, 1fr); }

    .metrics-row { flex-wrap: wrap; gap: var(--sp-4); }

    .review-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .review-actions input[type="text"] { min-width: unset; }

    .report-meta { grid-template-columns: repeat(2, 1fr); }

    .report-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .report-tab { font-size: var(--text-label); padding: var(--sp-2) var(--sp-3); }

    /* seal is now compact badge — no ring overrides needed */

    .dropzone-compact {
        flex-direction: column;
        text-align: center;
        gap: var(--sp-3);
    }

    .dropzone-compact-actions {
        flex-direction: column;
        width: 100%;
    }

    .dropzone-compact-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .dash-hero {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        padding: var(--sp-3);
    }
    .dash-hero-gauges { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); padding-bottom: var(--sp-3); }
    .dash-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-kpi-value { font-size: var(--text-xl); }
    .dash-row { grid-template-columns: 1fr; }
    .dash-donut { width: 80px; height: 80px; }
    .dash-donut-inner { width: 52px; height: 52px; }
    .dash-donut-value { font-size: var(--text-base); }

    .reports-filter-bar {
        flex-direction: column;
    }
}

/* ----------------------------------------------------------------
   PRINT
   ---------------------------------------------------------------- */
@media print {
    body {
        background: #fff;
        font-size: 12px;
    }

    .app-header {
        background: var(--brand-navy) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        position: static;
        box-shadow: none;
    }

    .app-sidebar,
    .dropzone-compact,
    .report-topbar .btn,
    .review-actions,
    .toast-container,
    #view-upload,
    #view-progress,
    #view-reports,
    #view-jobs {
        display: none !important;
    }

    .app-footer {
        border-top: 1px solid #ccc;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .summary-card,
    .badge,
    .seal-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .table-wrap { overflow: visible; }

    .view.active {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ================================================================
   AI Explanation Layer — SPEC-015
   ================================================================ */

/* AI Executive Summary Card */
.ai-summary-card {
    background: var(--surface-card);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.ai-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--edge-subtle);
}

.ai-summary-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--ink-primary);
}

.ai-summary-title svg { stroke: var(--status-info); }

.ai-summary-meta {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    font-family: var(--font-mono);
}

/* AI Summary — Sections layout */
.ai-summary-sections {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Individual section block */
.ai-sec {
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    border-left: 3px solid transparent;
}

.ai-sec-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.ai-sec-icon {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.ai-sec-title {
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ai-sec-body {
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--ink-primary);
}

.ai-sec-body strong {
    color: var(--ink-primary);
    font-weight: 700;
}

.ai-sec-body em {
    font-style: italic;
    color: var(--ink-secondary);
}

.ai-sec-body code {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    background: var(--surface-inset);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--brand-gold-dark);
    border: 1px solid var(--edge-subtle);
}

.ai-sec-intro {
    margin: 0 0 var(--sp-2) 0;
}

.ai-sec-intro:last-child {
    margin-bottom: 0;
}

/* Section list */
.ai-sec-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0 0;
}

.ai-sec-list li {
    position: relative;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 1.6em;
    margin-bottom: var(--sp-1);
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
    line-height: 1.6;
    border: 1px solid var(--edge-subtle);
}

.ai-sec-list li:last-child {
    margin-bottom: 0;
}

.ai-sec-list li::before {
    content: '';
    position: absolute;
    left: 0.6em;
    top: 0.9em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Section accents */
.ai-sec-status {
    background: #EEF2FF;
    border-left-color: #6366F1;
}
.ai-sec-status .ai-sec-icon { color: #6366F1; }
.ai-sec-status .ai-sec-title { color: #4338CA; }
.ai-sec-status .ai-sec-list li { background: #F5F3FF; border-color: #E0E7FF; }

.ai-sec-fail {
    background: var(--status-fail-bg);
    border-left-color: var(--status-fail);
}
.ai-sec-fail .ai-sec-icon { color: var(--status-fail); }
.ai-sec-fail .ai-sec-title { color: var(--status-fail-ink); }
.ai-sec-fail .ai-sec-list li { background: #FFF5F5; border-color: var(--status-fail-edge); }
.ai-sec-fail .ai-sec-list li::before { background: var(--status-fail); }

.ai-sec-review {
    background: var(--status-review-bg);
    border-left-color: var(--status-review);
}
.ai-sec-review .ai-sec-icon { color: var(--status-review); }
.ai-sec-review .ai-sec-title { color: var(--status-review-ink); }
.ai-sec-review .ai-sec-list li { background: #FFFDF5; border-color: var(--status-review-edge); }
.ai-sec-review .ai-sec-list li::before { background: var(--status-review); }

.ai-sec-action {
    background: var(--status-pass-bg);
    border-left-color: var(--status-pass);
}
.ai-sec-action .ai-sec-icon { color: var(--status-pass); }
.ai-sec-action .ai-sec-title { color: var(--status-pass-ink); }
.ai-sec-action .ai-sec-list li { background: #F0FDF9; border-color: var(--status-pass-edge); }
.ai-sec-action .ai-sec-list li::before { background: var(--status-pass); }

.ai-sec-default {
    background: var(--surface-inset);
    border-left-color: var(--edge-emphasis);
}
.ai-sec-default .ai-sec-title { color: var(--ink-secondary); }
.ai-sec-default .ai-sec-list li::before { background: var(--brand-gold); }

/* Responsive */
@media (max-width: 640px) {
    .ai-sec { padding: var(--sp-3); }
    .ai-summary-card { padding: var(--sp-4); }
}

/* AI / Rules badges */
.badge-ai {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #3b82f6;
    color: #fff;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.badge-ai-sm {
    font-size: 0.6rem;
    padding: 0.05rem 0.35rem;
}

/* SPEC-701/702 — NT commercial model badges. Used in place of the
   generic "AI" badge wherever a specific model produced something.
   Brass ink on paper so the auditor reads "NT Judge" / "NT Sentinel"
   clearly without the sections screaming blue. */
.nt-model-badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    margin-left: auto;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-brass-ink, #8a6725);
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.35);
    white-space: nowrap;
    vertical-align: middle;
}
.vdetail-section-badge-slot {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.vdetail-section-badge-slot .nt-model-badge { margin-left: 0; }

/* SPEC-702 — attribution chip ("Decidido por NT Judge • …"). A single
   readable line above the validation detail showing which models
   conversed to reach the verdict. Gives the engine a personality the
   auditor can talk about in committee. */
.nt-attr-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-3);
    background: var(--surface-inset, #f8f5ec);
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--ink-secondary);
    line-height: 1.45;
}
.nt-attr-chip__role {
    color: var(--ink-primary);
    font-weight: 600;
}
.nt-attr-chip__sep {
    color: var(--ink-tertiary);
    opacity: 0.6;
    user-select: none;
}
.nt-attr-chip__story em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink-primary);
}
.nt-attr-chip__conf {
    font-family: var(--font-mono);
    color: var(--ink-primary);
    font-weight: 500;
}

/* Confidence badges */
.conf-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

.conf-high { background: #f0fdf4; color: #16a34a; }
.conf-med  { background: #fefce8; color: #a16207; }
.conf-low  { background: #fef2f2; color: #dc2626; }

/* Expandable validation rows */
.expand-toggle { cursor: pointer; }
.expand-toggle:hover { background: var(--surface-inset); }

.expand-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.7rem;
    color: var(--ink-muted);
    width: 16px;
    text-align: center;
}

.expand-arrow.open { transform: rotate(90deg); }

.expand-row td { padding: 0 !important; border-bottom: none; }

.expand-content {
    display: none;
    padding: var(--sp-8) var(--sp-16) var(--sp-12) 2.4rem;
    background: var(--surface-inset);
    border-bottom: 1px solid var(--edge-default);
}

.expand-content.open { display: block; }

.expand-label {
    font-weight: 600;
    color: var(--ink-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
    margin-top: 0.4rem;
}

.expand-label:first-child { margin-top: 0; }

.expand-text {
    color: var(--ink-primary);
    line-height: 1.5;
    font-size: 0.82rem;
    white-space: pre-line;
}

/* AI Stats footer */
.ai-stats-footer {
    display: flex;
    gap: var(--sp-16);
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--ink-muted);
    padding: var(--sp-8) 0;
    border-top: 1px solid var(--edge-default);
    margin-top: var(--sp-8);
}

.ai-stats-footer strong {
    color: var(--ink-secondary);
}

/* Print adjustments for AI components */
@media print {
    .ai-summary-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    .expand-content { display: block !important; }
    .badge-ai, .conf-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ================================================================
   Inline Job Processing Row — Elegant Loading
   ================================================================ */

/* Processing row highlight */
.job-row-processing {
    background: linear-gradient(90deg, var(--surface-card) 0%, #EEF2FF 50%, var(--surface-card) 100%);
    background-size: 200% 100%;
    animation: jobRowShimmer 3s ease infinite;
}

@keyframes jobRowShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.job-row-processing td {
    border-bottom-color: #C7D2FE !important;
}

/* Failed row */
.job-row-failed {
    animation: none !important;
    background: #FFF1F2 !important;
}

.job-row-failed td {
    border-bottom-color: #FECDD3 !important;
}

/* Spinner inside the name cell */
.job-processing-name {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.job-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #C7D2FE;
    border-top-color: #4F46E5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Shimmer placeholder for loading cells */
.shimmer-text {
    color: var(--ink-muted);
    opacity: 0.4;
}

/* Processing status cell */
.job-processing-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.badge-dot-processing {
    background: #4F46E5;
    animation: processingPulse 1.5s ease-in-out infinite;
}

@keyframes processingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Mini progress bar inside the status cell */
.job-progress-bar-mini {
    width: 100%;
    height: 3px;
    background: #E0E7FF;
    border-radius: 2px;
    overflow: hidden;
}

.job-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-navy-mid));
    border-radius: 2px;
    transition: width 0.5s ease;
    position: relative;
}

.job-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progressGlow 2s ease infinite;
}

@keyframes progressGlow {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Step label */
.job-step-label {
    color: var(--brand-navy-mid);
    font-size: 0.72rem;
    font-weight: 500;
}

/* Elapsed time cell */
.job-elapsed-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Dual timer layout (upload + processing) */
.job-timers {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.job-timer-row {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.job-timer-label {
    font-size: 0.68rem;
    color: var(--ink-muted);
    min-width: 52px;
}
.job-timer-value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.job-timer-value.timer-upload  { color: var(--ink-secondary); }
.job-timer-value.timer-process { color: var(--brand-navy); }

/* ETA label next to progress bar */
.job-progress-meta-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-eta {
    color: var(--brand-brass-ink);
    font-size: 0.68rem;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(168, 130, 58, 0.08);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
}

/* Upload time estimate near button */
.upload-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.time-estimate {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-tertiary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.job-clock-icon {
    width: 14px;
    height: 14px;
    stroke: var(--ink-muted);
    flex-shrink: 0;
    animation: clockTick 2s ease-in-out infinite;
}

@keyframes clockTick {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.job-elapsed {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4338CA;
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   Validation Detail Modal — Eye icon + Rich Justification Panel
   ================================================================ */

/* Actions cell — fixed-width, centered flex wrapper */
.vactions-cell {
    width: 62px;
    text-align: center;
    white-space: nowrap;
}

.vactions-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Eye icon button in the validations table */
.vdetail-eye-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    vertical-align: middle;
    padding: 0;
    flex-shrink: 0;
}

.vdetail-eye-btn svg {
    width: 14px;
    height: 14px;
}

.visual-decision-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    vertical-align: middle;
    border: 1px solid rgba(37, 99, 235, 0.22);
    flex-shrink: 0;
}

.visual-decision-hidden {
    visibility: hidden;
}

.visual-decision-indicator svg {
    width: 12px;
    height: 12px;
}

.vdetail-eye-fail {
    background: var(--status-fail-bg);
    color: var(--status-fail);
    border-color: rgba(220, 38, 38, 0.25);
}

.vdetail-eye-fail:hover {
    background: var(--status-fail);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
    transform: scale(1.15);
}

.vdetail-eye-review {
    background: var(--status-review-bg);
    color: var(--status-review);
    border-color: rgba(217, 119, 6, 0.25);
}

.vdetail-eye-review:hover {
    background: var(--status-review);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
    transform: scale(1.15);
}

/* Readonly reviewer name field */
.review-name[readonly] {
    background: var(--surface-inset);
    color: var(--ink-secondary);
    cursor: default;
    border-color: var(--edge-subtle);
}

.vdetail-eye-pass {
    background: var(--status-pass-bg, #f0fdf4);
    color: var(--status-pass);
    border-color: rgba(16, 185, 129, 0.25);
}

.vdetail-eye-pass:hover {
    background: var(--status-pass);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    transform: scale(1.15);
}

/* SPEC-609: NA / NOT_APPLICABLE / ERROR rows render with a neutral eye so
   they are not visually conflated with PASS. Uses ink-tertiary tone. */
.vdetail-eye-na {
    background: var(--surface-inset);
    color: var(--ink-tertiary);
    border-color: var(--edge-hairline);
}

.vdetail-eye-na:hover {
    background: var(--ink-tertiary);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(98, 104, 111, 0.2);
    transform: scale(1.15);
}

/* SPEC-609: visible brass focus ring for keyboard users (Tab/Shift+Tab). */
.vdetail-eye-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

/* Overlay */
.vdetail-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.0);
    display: flex;
    justify-content: flex-end;
    transition: background 0.3s ease;
}

.vdetail-overlay.vdetail-visible {
    background: rgba(0, 0, 0, 0.45);
}

/* Side panel — default "drawer" mode. SPEC-901 widened the drawer from
   560 to 720 so the narrative fields (Expected / Failure / Checked /
   Open Questions / Action) have room to breathe. Users who want more
   can hit the fullscreen toggle in the topbar. */
.vdetail-panel {
    width: 720px;
    max-width: 95vw;
    height: 100vh;
    background: var(--surface-card);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out), width 0.3s var(--ease-out);
}

.vdetail-visible .vdetail-panel {
    transform: translateX(0);
}

/* Fullscreen mode — auditor wants to read the rich narrative without any
   distraction behind. Takes the whole viewport with a max width so long
   prose lines remain readable. */
.vdetail-overlay--fullscreen { justify-content: center; }
.vdetail-overlay--fullscreen .vdetail-panel {
    width: 100vw;
    max-width: 100vw;
}
.vdetail-overlay--fullscreen .vdetail-body {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.vdetail-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.vdetail-fullscreen-btn,
.vdetail-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms var(--ease-out, ease-out), border-color 150ms var(--ease-out, ease-out);
}
.vdetail-fullscreen-btn:hover,
.vdetail-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}
.vdetail-close-btn {
    font-size: 20px;
    line-height: 1;
}

/* SPEC-901 narrative sections — first-class reading surfaces, NOT bullet
   previews. Each card has a gentle tinted border reflecting its role so
   the auditor can skim: blue = expected, red = failure, amber = review,
   neutral = what was checked / reasoning, green = recommended action. */
.vdetail-narrative {
    border-left-width: 4px;
    border-left-style: solid;
}
.vdetail-narrative--expected { border-left-color: var(--brand-navy, #1b2942); }
.vdetail-narrative--failure.vdetail-accent-fail { border-left-color: var(--status-fail, #b33a3a); }
.vdetail-narrative--failure.vdetail-accent-review { border-left-color: var(--status-review, #c99435); }
.vdetail-narrative--checked { border-left-color: var(--edge-brass, #d4a843); }
.vdetail-narrative--reasoning { border-left-color: var(--ink-secondary, #5b6473); }
.vdetail-narrative--open { border-left-color: var(--status-review, #c99435); }
.vdetail-narrative--action { border-left-color: var(--status-pass, #2e7d4c); }
.vdetail-narrative--balance { border-left-color: var(--status-review, #c99435); }
.vdetail-narrative--approval { border-left-color: var(--status-pass, #2e7d4c); }

/* SPEC-625: persisted Concordo/Discordo read-only block. Replaces the
   action buttons when the auditor already voted, so re-opening the
   detail shows the decision instead of asking again. */
.vdetail-feedback-section--persisted {
    border-left: 4px solid var(--ink-tertiary, #7a8597);
    background: var(--surface-inset, #f8f5ec);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
}
.vdetail-feedback-section--persisted[data-feedback-state="agree"] {
    border-left-color: var(--status-pass, #2e7d4c);
}
.vdetail-feedback-section--persisted[data-feedback-state="disagree"] {
    border-left-color: var(--status-fail, #b33a3a);
}
.vdetail-feedback-persisted-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-primary);
    margin-bottom: var(--sp-2);
}
.vdetail-feedback-persisted-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}
.vdetail-feedback-persisted-icon svg { width: 16px; height: 16px; }
.vdetail-feedback-section--persisted[data-feedback-state="agree"]
.vdetail-feedback-persisted-icon { color: var(--status-pass, #2e7d4c); }
.vdetail-feedback-section--persisted[data-feedback-state="disagree"]
.vdetail-feedback-persisted-icon { color: var(--status-fail, #b33a3a); }

.vdetail-feedback-persisted-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--sp-3);
    row-gap: 4px;
    margin: 0;
    font-size: 13px;
}
.vdetail-feedback-persisted-meta dt {
    font-weight: 500;
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    align-self: baseline;
    padding-top: 2px;
}
.vdetail-feedback-persisted-meta dd {
    margin: 0;
    color: var(--ink-primary);
}
.vdetail-feedback-persisted-state {
    flex: 1;
}
.vdetail-narrative--not-applicable { border-left-color: var(--ink-tertiary, #7a8597); }

/* SPEC-616 balance — two-pane side-by-side layout for the arguments
   that favour approval vs rejection. The panes keep equal height and
   stack under 720px so the drawer width never cramps them. */
.vdetail-balance-intro {
    margin: 0 0 var(--sp-3);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-secondary);
}
.vdetail-balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.vdetail-balance-pane {
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #fff);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vdetail-balance-pane-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--edge-subtle, rgba(0,0,0,0.06));
}
.vdetail-balance-pane-body {
    padding: var(--sp-3) var(--sp-4);
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
}
.vdetail-balance-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}
.vdetail-balance-icon svg { width: 16px; height: 16px; }
.vdetail-balance-pane--approve .vdetail-balance-pane-header {
    background: rgba(46, 125, 76, 0.08);
    color: var(--status-pass, #2e7d4c);
    border-bottom-color: rgba(46, 125, 76, 0.2);
}
.vdetail-balance-pane--approve { border-color: rgba(46, 125, 76, 0.25); }
.vdetail-balance-icon--approve { color: var(--status-pass, #2e7d4c); }
.vdetail-balance-pane--reject .vdetail-balance-pane-header {
    background: rgba(179, 58, 58, 0.06);
    color: var(--status-fail, #b33a3a);
    border-bottom-color: rgba(179, 58, 58, 0.2);
}
.vdetail-balance-pane--reject { border-color: rgba(179, 58, 58, 0.25); }
.vdetail-balance-icon--reject { color: var(--status-fail, #b33a3a); }

.vdetail-balance-empty {
    color: var(--ink-tertiary);
    font-style: italic;
    margin: 0;
}

.vdetail-balance-verdict {
    border-top: 1px dashed var(--edge-subtle, rgba(0,0,0,0.12));
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
}
.vdetail-balance-verdict-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-bottom: var(--sp-2);
}

/* Stack the balance on narrow viewports and on the default drawer when
   the panes would otherwise shrink past readability. */
@media (max-width: 840px) {
    .vdetail-balance-grid {
        grid-template-columns: 1fr;
    }
}

.vdetail-narrative-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-primary);
}
.vdetail-narrative-text p {
    margin: 0 0 var(--sp-3);
}
.vdetail-narrative-text p:last-child { margin-bottom: 0; }
.vdetail-narrative-text ol,
.vdetail-narrative-text ul {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-5);
}
.vdetail-narrative-text ol { list-style: decimal; }
.vdetail-narrative-text ul { list-style: none; padding-left: var(--sp-4); }
.vdetail-narrative-text ul > li {
    position: relative;
    padding-left: var(--sp-3);
    margin-bottom: 4px;
}
.vdetail-narrative-text ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--edge-brass, #d4a843);
}
.vdetail-narrative-text ol > li {
    margin-bottom: 6px;
    padding-left: 4px;
}

/* Top bar */
.vdetail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    background: var(--brand-navy);
    color: #fff;
    flex-shrink: 0;
}

.vdetail-topbar-title {
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
}

.vdetail-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
    line-height: 1;
}

.vdetail-close-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Body */
.vdetail-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-6);
}

/* Hero header */
.vdetail-hero {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-5);
    border-left: 5px solid;
}

.vdetail-accent-fail .vdetail-hero,
.vdetail-hero.vdetail-accent-fail {
    background: linear-gradient(135deg, #FEF2F2 0%, #FECACA33 100%);
    border-left-color: var(--status-fail);
}

.vdetail-accent-review .vdetail-hero,
.vdetail-hero.vdetail-accent-review {
    background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A33 100%);
    border-left-color: var(--status-review);
}

.vdetail-hero-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.vdetail-accent-fail .vdetail-hero-icon {
    background: var(--status-fail-bg);
    color: var(--status-fail);
}

.vdetail-accent-review .vdetail-hero-icon {
    background: var(--status-review-bg);
    color: var(--status-review);
}

.vdetail-accent-pass .vdetail-hero,
.vdetail-hero.vdetail-accent-pass {
    background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D033 100%);
    border-left-color: var(--status-pass);
}

.vdetail-accent-pass .vdetail-hero-icon {
    background: var(--status-pass-bg, #f0fdf4);
    color: var(--status-pass);
}

.vdetail-hero-icon svg {
    width: 28px;
    height: 28px;
}

.vdetail-hero-info {
    flex: 1;
    min-width: 0;
}

.vdetail-hero-rule {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: var(--text-xl);
    color: var(--ink-primary);
    letter-spacing: -0.02em;
}

.vdetail-hero-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    margin-top: 2px;
}

.vdetail-hero-group {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.vdetail-hero-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Sections */
.vdetail-section {
    background: var(--surface-subtle);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-4);
    overflow: hidden;
}

.vdetail-section-highlight {
    border-width: 1px 1px 1px 4px;
}

.vdetail-section-highlight.vdetail-accent-fail {
    border-left-color: var(--status-fail);
    background: var(--status-fail-bg);
}

.vdetail-section-highlight.vdetail-accent-review {
    border-left-color: var(--status-review);
    background: var(--status-review-bg);
}

.vdetail-section-highlight.vdetail-accent-pass {
    border-left-color: var(--status-pass);
    background: var(--status-pass-bg, #f0fdf4);
}

.vdetail-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid var(--edge-subtle);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.vdetail-section-header svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.vdetail-section-body {
    padding: var(--sp-4);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--ink-primary);
    white-space: pre-line;
}

.vdetail-message-text {
    font-weight: 600;
    font-size: var(--text-base);
}

.vdetail-explanation-text {
    color: var(--ink-primary);
    line-height: 1.75;
}

.vdetail-reasoning-text {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    line-height: 1.7;
    font-style: italic;
}

.pre-analysis-box {
    background: #f8fafc;
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
}

.pre-analysis-row {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.pre-analysis-msg {
    margin-top: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--ink-primary);
    font-family: var(--font-mono);
    line-height: 1.6;
}

.pre-analysis-compare {
    margin-top: var(--sp-3);
}

.pre-analysis-agree {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}

.pre-analysis-disagree {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #854d0e;
    background: #fef9c3;
    border: 1px solid #fde047;
}

/* Action box */
.vdetail-action-box {
    background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-4);
}

.vdetail-action-box strong {
    display: block;
    font-size: var(--text-sm);
    color: #92400E;
    margin-bottom: var(--sp-2);
}

.vdetail-action-box p {
    font-size: var(--text-sm);
    color: #78350F;
    line-height: 1.6;
    margin: 0;
}

/* Validation Criteria section (Expected / Found / Discrepancy) */
.vdetail-criteria-section {
    border-width: 1px 1px 1px 4px;
}

.vdetail-criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.vdetail-criteria-item {
    background: var(--surface-card);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
}

.vdetail-criteria-discrepancy {
    grid-column: 1 / -1;
}

.vdetail-criteria-alert {
    background: #FEF2F2;
    border-color: #FECACA;
}

.vdetail-criteria-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}

.vdetail-criteria-expected .vdetail-criteria-label { color: #2563EB; }
.vdetail-criteria-found .vdetail-criteria-label { color: #7C3AED; }
.vdetail-criteria-alert .vdetail-criteria-label { color: #DC2626; }

.vdetail-criteria-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.6;
    word-break: break-word;
}

/* Human feedback section (thumbs up/down) */
.vdetail-feedback-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-3);
    margin-top: var(--sp-3);
    border-top: 1px solid var(--edge-default);
}

.vdetail-feedback-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.vdetail-feedback-buttons {
    display: flex;
    gap: var(--sp-3);
}

.vdetail-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--edge-default);
    background: var(--surface-card);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.15s ease;
}

.vdetail-feedback-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.vdetail-feedback-agree:hover:not(:disabled) {
    background: #F0FDF4;
    border-color: #86EFAC;
    color: #166534;
}

.vdetail-feedback-disagree:hover:not(:disabled) {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

.vdetail-feedback-btn:disabled {
    cursor: not-allowed;
}

.vdetail-feedback-saved {
    font-size: var(--text-sm);
    color: #166534;
    font-weight: 500;
}

.vdetail-feedback-error {
    font-size: var(--text-sm);
    color: #991B1B;
    font-weight: 500;
}

/* Disagree justification form */
.vdetail-disagree-form {
    width: 100%;
    max-width: 480px;
    animation: vdetail-fade-in 0.2s ease;
}

@keyframes vdetail-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vdetail-disagree-header {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: var(--sp-2);
}

.vdetail-disagree-select {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
    background: var(--surface-card);
    color: var(--ink-primary);
    cursor: pointer;
    margin-bottom: var(--sp-2);
    transition: border-color 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.vdetail-disagree-select:focus {
    outline: none;
    border-color: var(--ink-link);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.vdetail-disagree-select-error {
    border-color: var(--status-fail) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.vdetail-disagree-textarea {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.15s ease;
}

.vdetail-disagree-textarea:focus {
    outline: none;
    border-color: var(--ink-link);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.vdetail-disagree-textarea-error {
    border-color: var(--status-fail) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.vdetail-disagree-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.vdetail-feedback-cancel {
    color: var(--ink-secondary) !important;
    border-color: transparent !important;
}

.vdetail-feedback-cancel:hover:not(:disabled) {
    background: var(--surface-subtle) !important;
    color: var(--ink-primary) !important;
}

.vdetail-feedback-submit-disagree {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

.vdetail-feedback-submit-disagree:hover:not(:disabled) {
    background: #FEE2E2 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Evidence grid */
.vdetail-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.vdetail-evidence-item {
    background: var(--surface-card);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    overflow: hidden;
}

.vdetail-evidence-full {
    grid-column: 1 / -1;
}

.vdetail-evidence-label {
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-tertiary);
    margin-bottom: var(--sp-1);
}

.vdetail-evidence-value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ink-primary);
    font-family: var(--font-mono);
    word-break: break-all;
}

.vdetail-evidence-empty {
    font-style: italic;
    color: var(--ink-muted);
    font-weight: 400;
    font-family: var(--font-sans);
}

/* Evidence mini-table */
.vdetail-evidence-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

.vdetail-evidence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-label);
}

.vdetail-evidence-table th {
    background: var(--surface-inset);
    padding: var(--sp-1) var(--sp-2);
    text-align: left;
    font-weight: 700;
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-tertiary);
    border-bottom: 1px solid var(--edge-default);
    white-space: nowrap;
}

.vdetail-evidence-table td {
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--edge-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    color: var(--ink-primary);
}

.vdetail-evidence-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

/* Evidence list */
.vdetail-evidence-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vdetail-evidence-list li {
    padding: var(--sp-1) 0;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    font-family: var(--font-mono);
    border-bottom: 1px solid var(--edge-subtle);
}

.vdetail-evidence-list li:last-child {
    border-bottom: none;
}

.vdetail-evidence-list li::before {
    content: '\2022';
    color: var(--ink-muted);
    margin-right: var(--sp-2);
}

.vdetail-evidence-overflow {
    font-style: italic;
    color: var(--ink-muted);
    font-size: var(--text-label);
    padding: var(--sp-2) 0;
}

/* Evidence nested key-value */
.vdetail-evidence-nested {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vdetail-evidence-kv {
    font-size: var(--text-sm);
    color: var(--ink-primary);
    padding: 2px 0;
}

.vdetail-evidence-kv-key {
    font-weight: 600;
    color: var(--ink-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    text-transform: capitalize;
}

/* Responsive */
@media (max-width: 768px) {
    .vdetail-panel {
        width: 100vw;
        max-width: 100vw;
    }
    .vdetail-evidence-grid {
        grid-template-columns: 1fr;
    }
    .vdetail-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .vdetail-hero-status {
        flex-direction: row;
        align-items: center;
    }
}

/* Print: show detail inline */
@media print {
    .vdetail-overlay { display: none !important; }
}

/* ----------------------------------------------------------------
   LOGIN SCREEN — Audit Dossier split binder (SPEC-402)
   ---------------------------------------------------------------- */
.login-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: 48fr 52fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "binder panel"
        "attest panel";
    background: var(--paper-canvas);
    overflow: hidden;
    animation: login-fade-in var(--duration-normal) var(--ease-out);
}

.login-screen.hidden {
    display: none;
}

@keyframes login-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Binder cover (head, left top) -------------------------------------- */
.login-binder {
    grid-area: binder;
    position: relative;
    background: var(--paper-canvas);
    border-right: 1px solid var(--edge-subtle);
    padding: var(--sp-12) var(--sp-12) var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Brand mark: ABI logo on paper canvas */
.login-brand-mark {
    height: 56px;
    width: auto;
    display: block;
    user-select: none;
}


.login-display {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-display);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink-primary);
    margin: var(--sp-8) 0 0 0;
    max-width: 360px;
}

.login-kicker-rule {
    width: 24px;
    height: 1px;
    background: var(--edge-default);
    margin: var(--sp-5) 0 var(--sp-3) 0;
}

.login-kicker {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-brass-ink);
    margin: 0;
}

.login-attestation {
    grid-area: attest;
    padding: var(--sp-6) var(--sp-12) var(--sp-12);
    border-right: 1px solid var(--edge-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-tertiary);
}

.login-attestation p {
    margin: 0;
    max-width: 420px;
}

.login-attestation p + p {
    margin-top: var(--sp-1);
}

.login-cosign {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.login-cosign-mark {
    height: 48px;
    width: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.login-cosign-text {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-brass-ink);
}

/* --- Form panel (right) ------------------------------------------------- */
.login-panel {
    grid-area: panel;
    background: var(--paper-leaf);
    padding: var(--sp-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.login-form-wrap {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}

.login-overline {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-brass-ink);
    margin-bottom: var(--sp-3);
}

.login-overline::before {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: var(--brand-brass);
}

.login-form-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--ink-primary);
    margin: 0 0 var(--sp-8) 0;
    letter-spacing: -0.005em;
}

.login-footnote {
    margin: var(--sp-6) 0 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--edge-hairline);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-tertiary);
}

.login-footnote a {
    color: var(--ink-link);
    text-decoration: none;
    border-bottom: 1px solid var(--edge-default);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.login-footnote a:hover {
    border-bottom-color: var(--ink-link);
}

/* Microsoft SSO button — navy primary with 4-color icon inline */
.btn-microsoft-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 14px 20px;
    background: var(--brand-navy);
    color: var(--ink-inverse);
    border: 1px solid var(--brand-navy-mid);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn-microsoft-login.hidden { display: none; }

.btn-microsoft-login:hover {
    background: var(--brand-navy-mid);
    box-shadow: var(--shadow-focus-ink);
}

.btn-microsoft-login:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

.btn-microsoft-login-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Divider: line — label — line */
.login-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-6) 0;
    color: var(--ink-tertiary);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-divider.hidden { display: none; }

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--edge-subtle);
}

.login-divider span {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Local form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    width: 100%;
}

.login-form.hidden { display: none; }

.login-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.login-field > span {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}

.login-field input {
    background: var(--paper-inset);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 16px; /* 16px avoids iOS Safari auto-zoom on focus */
    font-weight: 400;
    color: var(--ink-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.login-field input::placeholder {
    color: var(--ink-muted);
}

.login-field input:focus {
    outline: none;
    border-color: var(--edge-emphasis);
    box-shadow: var(--shadow-focus-brass);
}

.login-field input[aria-invalid="true"] {
    border-color: var(--seal-exception);
}

/* Error message — oxblood inset */
.login-error {
    background: var(--seal-exception-bg);
    border-left: 3px solid var(--seal-exception);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    color: var(--seal-exception-ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.45;
    margin-top: var(--sp-2);
}

.login-error::before {
    content: "— ";
}

.login-error[hidden] { display: none; }

/* Submit button — same navy treatment as SSO */
.btn-local-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--sp-3);
    padding: 14px 20px;
    background: var(--brand-navy);
    color: var(--ink-inverse);
    border: 1px solid var(--brand-navy-mid);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn-local-login:hover:not(:disabled) {
    background: var(--brand-navy-mid);
    box-shadow: var(--shadow-focus-ink);
}

.btn-local-login:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

.btn-local-login:active:not(:disabled) {
    background: var(--brand-navy-light);
}

.btn-local-login:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Shake animation when error appears (submit guard) */
@keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

.login-form.shake {
    animation: login-shake var(--duration-normal) var(--ease-out);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1023px) {
    .login-screen {
        grid-template-columns: 40fr 60fr;
    }
    .login-binder {
        padding: var(--sp-8) var(--sp-8) var(--sp-4);
    }
    .login-attestation {
        padding: var(--sp-4) var(--sp-8) var(--sp-8);
    }
    .login-panel {
        padding: var(--sp-8);
    }
    .login-display {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .login-screen {
        /* Release the fixed inset:0 constraint so content can grow vertically
           past the viewport — body-level scroll handles overflow on mobile. */
        position: absolute;
        inset: 0 0 auto 0;
        min-height: 100vh;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "binder"
            "panel"
            "attest";
        overflow-y: visible;
    }
    .login-binder {
        padding: var(--sp-6);
        border-right: none;
        border-bottom: 1px solid var(--edge-subtle);
    }
    .login-display {
        font-size: 28px;
        margin-top: var(--sp-5);
        max-width: none;
    }
    .login-kicker-rule {
        margin: var(--sp-4) 0 var(--sp-2) 0;
    }
    .login-panel {
        padding: var(--sp-6);
        align-items: stretch;
        justify-content: flex-start;
    }
    .login-form-wrap {
        max-width: none;
        margin: 0 auto;
    }
    .login-attestation {
        padding: var(--sp-5) var(--sp-6);
        border-right: none;
        border-top: 1px solid var(--edge-hairline);
        background: var(--paper-canvas);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-screen {
        animation: none;
    }
    .login-form.shake {
        animation: none;
    }
}

/* ----------------------------------------------------------------
   HEADER — User info (SPEC-601 Audit Dossier variant)
   Avatar brass-on-navy, name ink-inverse, logout icon hairline.
   ---------------------------------------------------------------- */
.header-user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    margin: 0 var(--sp-2);
}

.header-user.hidden {
    display: none;
}

.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-brass);
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    border: 1px solid var(--edge-brass);
}

.header-user-name {
    color: var(--ink-inverse);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-logout {
    color: var(--ink-inverse);
    opacity: 0.72;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: opacity var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.header-user-logout:hover {
    opacity: 1;
    background: rgba(244, 234, 219, 0.08);
}

@media (max-width: 768px) {
    .header-user-name {
        display: none;
    }
}

/* ----------------------------------------------------------------
   Visual Cross-Validation Badges (SPEC-022)
   ---------------------------------------------------------------- */

.badge-visual-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--semantic-pass-bg, #dcfce7);
    color: var(--semantic-pass, #166534);
    border: 1px solid var(--semantic-pass, #16a34a);
}

.badge-visual-discrepancy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #eab308;
}

/* ----------------------------------------------------------------
   Dynamic Visual Cross-Validation Badges (SPEC-023)
   ---------------------------------------------------------------- */

.badge-dynamic-visual {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.badge-dynamic-visual-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.badge-dynamic-visual-discrepancy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

/* ── Visual confirmation cards ── */

.vc-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
}

.vc-card {
    border-radius: var(--radius-lg, 10px);
    padding: var(--sp-3, 12px);
    border: 1px solid var(--edge-subtle, #e5e7eb);
    background: var(--surface-inset, #f9fafb);
}

.vc-card--pass {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}

.vc-card--warn {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(217, 119, 6, 0.04);
}

.vc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 8px);
    margin-bottom: var(--sp-2, 8px);
}

.vc-card-status {
    font-weight: 600;
    font-size: var(--text-sm, 13px);
}

.vc-card--pass .vc-card-status { color: var(--status-pass, #059669); }
.vc-card--warn .vc-card-status { color: var(--status-review, #d97706); }

.vc-card-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ink-tertiary, #9ca3af);
}

.vc-card-source svg {
    width: 12px;
    height: 12px;
}

.vc-card-obs {
    font-size: var(--text-sm, 13px);
    color: var(--ink-secondary, #6b7280);
    line-height: 1.5;
    margin: 0 0 var(--sp-2, 8px);
}

.vc-card-findings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--sp-2, 8px);
}

.vc-finding {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-inset, #f3f4f6);
    border: 1px solid var(--edge-subtle, #e5e7eb);
    color: var(--ink-secondary, #6b7280);
}

.vc-finding--pass {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #059669;
}

.vc-finding--fail {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.vc-card-discs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vc-disc {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-md, 6px);
    border-left: 3px solid;
}

.vc-disc strong {
    margin-right: 4px;
}

.vc-disc-detail {
    color: var(--ink-secondary, #6b7280);
}

.vc-disc--high {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.05);
}

.vc-disc--med {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.05);
}

.vc-disc--low {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.05);
}

/* Circular VC badge on thumbnails */
.review-thumb-vc-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.review-thumb-vc-confirmed {
    background: #16a34a;
    color: #fff;
}

.review-thumb-vc-discrepancy {
    background: #eab308;
    color: #fff;
}

.review-thumb-vc-fail {
    background: #dc2626;
    color: #fff;
}

/* ----------------------------------------------------------------
   Dashboard Gauges (SVG ring)
   ---------------------------------------------------------------- */
.dash-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dash-gauge-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}
.dash-gauge svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

/* ----------------------------------------------------------------
   Reports Filter Bar
   ---------------------------------------------------------------- */
.reports-filter-bar {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    align-items: center;
}
.reports-search-input {
    flex: 1;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: var(--surface-card);
    color: var(--ink-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.reports-search-input:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.reports-search-input::placeholder {
    color: var(--ink-muted);
}
.reports-filter-select,
.reports-filter-mode {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: var(--surface-card);
    color: var(--ink-primary);
    cursor: pointer;
    min-width: 140px;
}
.reports-filter-select:focus,
.reports-filter-mode:focus {
    outline: none;
    border-color: var(--brand-gold);
}

/* ----------------------------------------------------------------
   Pipeline Mode Comparison Card (SPEC-062) — classic vs agentic
   ---------------------------------------------------------------- */
.pm-compare-card { margin-top: var(--sp-5); }
.pm-compare-card .dash-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
}
.pm-card-hint {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-muted);
}
.pm-empty {
    padding: var(--sp-4);
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--text-sm);
}
.pm-compare-grid {
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    gap: var(--sp-4);
    align-items: stretch;
    padding: var(--sp-3) 0;
}
.pm-compare-col { display: flex; flex-direction: column; justify-content: center; }
.pm-col-classic, .pm-col-agentic { text-align: center; }
.pm-col-head {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pm-col-classic .pm-col-head { color: var(--status-pass); }
.pm-col-agentic .pm-col-head { color: var(--brand-gold); }
.pm-col-jobs {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: 4px;
}
.pm-col-metric { display: flex; flex-direction: column; gap: var(--sp-3); }
.pm-metric-row {
    display: grid;
    grid-template-columns: 160px 1fr 90px;
    gap: var(--sp-3);
    align-items: center;
}
.pm-metric-label {
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    font-weight: 600;
}
.pm-metric-bars { display: flex; flex-direction: column; gap: 3px; }
.pm-bar {
    position: relative;
    height: 18px;
    background: var(--surface-inset);
    border-radius: 3px;
    overflow: hidden;
}
.pm-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s var(--ease-out);
}
.pm-bar-classic .pm-bar-fill { background: var(--status-pass); }
.pm-bar-agentic .pm-bar-fill { background: var(--brand-gold); }
.pm-bar-value {
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 18px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--ink-primary);
    font-weight: 600;
}
.pm-metric-delta {
    text-align: right;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 600;
}
.pm-delta-good { color: var(--status-pass); }
.pm-delta-bad { color: var(--status-fail); }
.pm-delta-flat { color: var(--ink-muted); }
.pm-delta-none { color: var(--ink-muted); }
.pm-metric-roi {
    grid-template-columns: 160px 1fr 90px;
    border-top: 1px solid var(--edge-default);
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
}
.pm-metric-roi .pm-metric-value {
    grid-column: 2 / span 2;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-gold);
}
.pm-steps-section {
    border-top: 1px solid var(--edge-default);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
}
.pm-steps-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: var(--sp-3);
}
.pm-steps-header,
.pm-step-row {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    gap: var(--sp-3);
    align-items: center;
    padding: 4px 0;
}
.pm-steps-header { font-size: var(--text-xs); color: var(--ink-muted); }
.pm-legend-classic { color: var(--status-pass); font-weight: 600; }
.pm-legend-agentic { color: var(--brand-gold); font-weight: 600; }
.pm-step-name { font-size: var(--text-xs); color: var(--ink-secondary); }
.pm-step-bar {
    position: relative;
    height: 14px;
    background: var(--surface-inset);
    border-radius: 3px;
    overflow: hidden;
}
.pm-step-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s var(--ease-out);
}
.pm-step-bar-classic .pm-step-bar-fill { background: var(--status-pass); opacity: 0.85; }
.pm-step-bar-agentic .pm-step-bar-fill { background: var(--brand-gold); opacity: 0.85; }
.pm-step-bar-value {
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 14px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--ink-primary);
    font-weight: 600;
}

/* ----------------------------------------------------------------
   Pipeline Mode Badge (in reports table)
   ---------------------------------------------------------------- */
.pipeline-mode-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-sans);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.pipeline-mode-classic {
    color: var(--status-pass);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.pipeline-mode-agentic {
    color: var(--brand-gold);
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.30);
}

@media (max-width: 720px) {
    .pm-compare-grid {
        grid-template-columns: 1fr;
    }
    .pm-metric-row,
    .pm-steps-header,
    .pm-step-row {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
   Extraction Health card (SPEC-064)
   ---------------------------------------------------------------- */
.ex-health-card { margin-top: var(--sp-5); }
.ex-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}
.ex-summary-cell {
    background: var(--surface-inset);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
}
.ex-summary-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ex-summary-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin-top: 2px;
}
.ex-summary-hint {
    font-size: 0.75rem;
    color: var(--ink-tertiary);
    margin-top: 2px;
}
.ex-section-title {
    margin-top: var(--sp-4);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ex-steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.ex-step-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 3fr auto;
    gap: var(--sp-3);
    align-items: center;
    font-size: 0.85rem;
}
.ex-step-name {
    font-weight: 500;
    color: var(--ink-primary);
}
.ex-step-bar {
    height: 6px;
    background: var(--surface-inset);
    border-radius: 3px;
    overflow: hidden;
}
.ex-step-bar-fill {
    height: 100%;
    background: var(--status-fail);
    border-radius: 3px;
    transition: width 0.3s var(--ease-out);
}
.ex-step-meta {
    font-size: 0.75rem;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}
.ex-errors-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.ex-error-item {
    display: flex;
    gap: var(--sp-2);
    font-size: 0.8rem;
    color: var(--ink-secondary);
}
.ex-error-count {
    min-width: 32px;
    font-weight: 600;
    color: var(--status-fail);
    font-variant-numeric: tabular-nums;
}
.ex-error-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .ex-summary-grid { grid-template-columns: 1fr; }
    .ex-step-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   Inline Confidence Bar (table rows)
   ---------------------------------------------------------------- */
.inline-conf-bar {
    display: flex;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-inset);
    width: 60px;
    margin-top: 2px;
}
.inline-conf-fill {
    border-radius: 2px;
    transition: width 0.3s var(--ease-out);
}
.inline-conf-high { background: var(--status-pass); }
.inline-conf-med  { background: var(--status-review); }
.inline-conf-low  { background: var(--status-fail); }

/* ----------------------------------------------------------------
   Template Badge (pill in table rows)
   ---------------------------------------------------------------- */
.template-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--ink-tertiary);
    background: var(--surface-inset);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

/* Rules progress bar inside Resultado BSO column */
.reports-rules-bar {
    display: flex;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-inset);
    width: 100%;
    margin-top: 4px;
}
.reports-rules-seg {
    height: 100%;
    min-width: 0;
}
.reports-rules-pass   { background: var(--status-pass); }
.reports-rules-fail   { background: var(--status-fail); }
.reports-rules-review { background: var(--status-review); }

/* ================================================================
   Loading Skeletons — Shimmer placeholders
   ================================================================ */

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

.skeleton {
    background: linear-gradient(90deg, var(--surface-inset) 25%, rgba(0,0,0,0.04) 50%, var(--surface-inset) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-line {
    height: 14px;
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-sm);
}

.skeleton-line-short { width: 40%; }
.skeleton-line-medium { width: 65%; }
.skeleton-line-full { width: 100%; }

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-card {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* SPEC-REDESIGN-011: additional skeleton atoms */
.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--edge-hairline);
}

.skeleton-row .skeleton {
    height: 14px;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 12px;
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-sm);
}

/* ================================================================
   Focus Rings & Accessibility
   ================================================================ */

/* Focus rings for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

.btn:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.2);
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip-to-main link (SPEC-REDESIGN-017) */
.skip-to-main {
    position: absolute;
    top: -999px;
    left: var(--sp-4);
    z-index: 99999;
    background: var(--brand-navy);
    color: var(--ink-inverse);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--duration-fast) var(--ease-out);
}

.skip-to-main:focus {
    top: var(--sp-2);
    outline: 2px solid var(--brand-brass);
    outline-offset: 2px;
}

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

/* ================================================================
   Micro-interactions — Badge pulse for processing status
   ================================================================ */

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.badge-processing .badge-dot-processing {
    animation: badgePulse 1.5s ease-in-out infinite;
}

/* ================================================================
   Evidence Pairs Tab & Cross-Validation (SPEC-035)
   ================================================================ */

/* Evidence pair card — side-by-side claim ↔ evidence */
.evidence-pair-card {
    display: flex;
    gap: var(--sp-4);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    background: var(--surface-card);
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.evidence-pair-card:hover {
    box-shadow: var(--shadow-md);
}

.evidence-pair-card .ep-side {
    flex: 1;
    min-width: 0;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.5;
}

.evidence-pair-card .ep-side-claim {
    background: rgba(37, 99, 235, 0.04);
    border-left: 3px solid var(--ink-link);
}

.evidence-pair-card .ep-side-evidence {
    background: rgba(16, 185, 129, 0.04);
    border-left: 3px solid var(--status-pass);
}

.evidence-pair-card .ep-side-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-tertiary);
    margin-bottom: var(--sp-1);
}

.evidence-pair-card .ep-assertions {
    margin-top: var(--sp-1);
    font-size: 0.78rem;
    color: var(--ink-secondary);
}

.evidence-pair-card .ep-matched {
    margin-top: var(--sp-1);
    font-size: 0.78rem;
    color: var(--ink-secondary);
}

.evidence-pair-card .ep-unmatched {
    margin-top: var(--sp-1);
    font-size: 0.78rem;
    color: var(--status-fail);
}

/* Alignment bar — colored progress */
.alignment-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.alignment-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-inset);
    overflow: hidden;
}

.alignment-bar .alignment-fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--duration-normal) var(--ease-out);
}

.alignment-fill-high { background: var(--status-pass); }
.alignment-fill-med { background: var(--status-review); }
.alignment-fill-low { background: var(--status-fail); }
.alignment-fill-zero { background: var(--ink-muted); }

.alignment-bar-pct {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono, "SF Mono", monospace);
    min-width: 36px;
    text-align: right;
}

/* Source reference badge */
.source-ref-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    border: 1px solid var(--edge-subtle);
    font-size: 0.72rem;
    font-family: var(--font-mono, "SF Mono", monospace);
    color: var(--ink-secondary);
    white-space: nowrap;
}

.source-ref-badge .source-ref-icon {
    font-size: 0.8rem;
}

/* Consensus badges */
.consensus-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.consensus-unanimous {
    background: var(--status-pass-bg);
    color: var(--status-pass-ink);
    border: 1px solid var(--status-pass-edge);
}

.consensus-majority {
    background: var(--status-review-bg, #fefce8);
    color: var(--status-review-ink, #854d0e);
    border: 1px solid var(--status-review-edge, #fde68a);
}

.consensus-disputed {
    background: var(--status-fail-bg);
    color: var(--status-fail-ink);
    border: 1px solid var(--status-fail-edge);
}

/* Grounding section — collapsible in detail modal */
.grounding-section {
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    margin-top: var(--sp-2);
    overflow: hidden;
}

.grounding-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface-inset);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    user-select: none;
}

.grounding-section-header .grounding-arrow {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform var(--duration-fast) var(--ease-out);
}

.grounding-section.open .grounding-arrow {
    transform: rotate(90deg);
}

.grounding-section-body {
    display: none;
    padding: var(--sp-4);
}

.grounding-section.open .grounding-section-body {
    display: block;
}

.grounding-ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

/* Evidence phase group header */
.evidence-phase-group {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 2px solid var(--edge-emphasis);
}

.evidence-phase-group:first-child {
    margin-top: 0;
}

.evidence-phase-group h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

/* Grounding KPI row in summary */
.grounding-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-inset);
    border-radius: var(--radius-md);
}

.grounding-kpi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    min-width: 60px;
}

.grounding-kpi-item .kpi-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-mono, "SF Mono", monospace);
}

.grounding-kpi-item .kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    position: relative;
}

/* KPI info icon + tooltip */
.kpi-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    color: var(--ink-tertiary);
    opacity: 0.5;
    transition: opacity 0.15s ease;
    vertical-align: middle;
    outline: none;
}

.kpi-info-icon:hover,
.kpi-info-icon:focus {
    opacity: 1;
    color: var(--ink-link);
}

/* Hidden source for tooltip text — actual tooltip is rendered via JS as fixed */
.kpi-info-icon .kpi-tooltip-text {
    display: none;
}

/* Floating tooltip (appended to body by JS) */
.kpi-floating-tooltip {
    position: fixed;
    background: var(--ink-primary, #1a1a2e);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    text-align: center;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.kpi-floating-tooltip.visible {
    opacity: 1;
}

.kpi-floating-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink-primary, #1a1a2e);
}

.grounding-kpi-item .kpi-value-pass { color: var(--status-pass); }
.grounding-kpi-item .kpi-value-review { color: var(--status-review-ink, #854d0e); }
.grounding-kpi-item .kpi-value-fail { color: var(--status-fail); }
.grounding-kpi-item .kpi-value-info { color: var(--ink-link); }

/* Cross-validation detail — model votes */
.cross-validation-votes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}

.cross-validation-vote {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    font-size: 0.8rem;
}

.cross-validation-vote .vote-model {
    font-weight: 600;
    min-width: 80px;
}

.cross-validation-vote .vote-status {
    font-weight: 600;
}

.cross-validation-vote .vote-conf {
    margin-left: auto;
    font-family: var(--font-mono, "SF Mono", monospace);
    font-size: 0.78rem;
}

/* Vote dots — 3 colored circles per rule (SPEC-043) */
.vote-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.vote-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: help;
}
.vote-dot-pass { background: var(--status-pass); }
.vote-dot-fail { background: var(--status-fail); }
.vote-dot-review { background: var(--status-review, #EAB308); }

/* SPEC-047: Language selector */
.lang-selector {
    display: flex;
    align-items: center;
    margin-right: var(--sp-2);
}
.lang-selector select {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}
.lang-selector select option {
    background: var(--brand-navy);
    color: white;
}

/* SPEC-046: Extraction failure warning banner */
.vdetail-extraction-warning {
    background: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-4);
    margin: var(--sp-2) 0;
    font-size: 0.85rem;
    color: #856404;
    line-height: 1.4;
}

/* ==========================================================================
   Admin console (SPEC-078) — user management + runtime config + /me
   ========================================================================== */

.admin-table-wrap { overflow-x: auto; }

/* SPEC-623: quota snapshot at the top of /admin/config */
.admin-quota-snapshot { margin-bottom: var(--sp-4); }
.admin-quota-snapshot code { font-size: 0.85em; }
.admin-quota-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}
.admin-quota-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-md);
    background: var(--surface-inset, #f8f5ec);
}
.admin-quota-panel__label {
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}
.admin-quota-panel__value {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
}
.admin-quota-panel__meta {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
}
.admin-quota-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin: 2px 0;
}
.admin-quota-bar__fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--brand-navy, #1b2942);
    opacity: 0.6;
    transition: width 180ms var(--ease-out, ease-out);
}
.admin-quota-panel--warn .admin-quota-bar__fill {
    background: var(--brand-brass, #d4a843);
    opacity: 1;
}
.admin-quota-panel--warn .admin-quota-panel__meta {
    color: var(--brand-brass-ink, #8a6725);
}
.admin-quota-panel--danger .admin-quota-bar__fill,
.admin-quota-panel--exhausted .admin-quota-bar__fill {
    background: var(--status-fail, #b33a3a);
    opacity: 1;
}
.admin-quota-panel--danger .admin-quota-panel__meta,
.admin-quota-panel--exhausted .admin-quota-panel__meta {
    color: var(--status-fail, #b33a3a);
    font-weight: 600;
}
@media (max-width: 720px) {
    .admin-quota-grid { grid-template-columns: 1fr; }
}

/* SPEC-623: action cell in the runtime config table — keep Salvar and
   Restaurar default on the same row with a visible gap, even on narrow
   viewports. Previously they wrapped because the cell was a plain <td>. */
td.admin-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    white-space: nowrap;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.admin-table th, .admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e4e7eb;
    text-align: left;
    vertical-align: top;
}
.admin-table th {
    background: #f7f9fc;
    font-weight: 600;
    color: #374151;
}
.admin-table tr:hover td { background: #fafbfd; }
.admin-table input[type="number"] {
    width: 120px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font: inherit;
}

.admin-form .field,
.admin-modal-body .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.admin-form .field span,
.admin-modal-body .field span {
    font-size: 0.85rem;
    color: #4b5563;
    font-weight: 500;
}
.admin-form input, .admin-form select,
.admin-modal-body input, .admin-modal-body select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font: inherit;
    background: #fff;
}
.admin-form input:focus, .admin-form select:focus,
.admin-modal-body input:focus, .admin-modal-body select:focus {
    outline: 2px solid #2563eb;
    outline-offset: -1px;
}

.admin-kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 6px 16px;
    margin: 12px 0;
}
.admin-kv dt { font-weight: 600; color: #4b5563; }
.admin-kv dd { margin: 0; }

.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
}
.admin-modal.hidden { display: none; }
.admin-modal-card {
    background: #fff;
    border-radius: 8px;
    width: min(460px, 92vw);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e4e7eb;
}
.admin-modal-header h3 { margin: 0; font-size: 1.05rem; }
.admin-modal-close {
    background: none;
    border: 0;
    font-size: 1.4rem;
    cursor: pointer;
    color: #6b7280;
}
.admin-modal-body { padding: 16px 18px; }
.admin-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-muted { background: #eef2f7; color: #475569; }

/* SPEC-R04-014 D9: Validacoes table layout — REGRA col removed,
   Status splits into IA + Humano stacked badges. */
.validations-table {
    table-layout: fixed;
    width: 100%;
}
.validations-table th.vrow-arrow,
.validations-table td.vrow-arrow {
    width: 24px;
    text-align: center;
}
.validations-table th.vrow-status-ai,
.validations-table td.vrow-status-ai,
.validations-table th.vrow-status-human,
.validations-table td.vrow-status-human {
    width: 130px;
}
.validations-table th.vrow-status-ai,
.validations-table th.vrow-status-human {
    text-align: left;
}
.validations-table th.vrow-conf,
.validations-table td.vrow-conf {
    width: 80px;
}
.validations-table th.vrow-actions,
.validations-table td.vactions-cell {
    width: 56px;
}
.validations-table td.vrow-name {
    font-weight: 500;
    word-break: break-word;
}

.vstatus-split {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vstatus-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vstatus-actor {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted, #6b7280);
    min-width: 48px;
}
.vstatus-empty {
    color: var(--ink-muted, #9ca3af);
    font-size: 12px;
}

/* SPEC-UI R04-014: compact pill for narrow table cells. Forces single
   line + smaller font so labels like 'Desconhecido' / 'Não contabilizado'
   fit beside neighbouring badges instead of wrapping. */
.badge-compact,
.template-badge-pill {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}

.text-success { color: #047857; }

/* ================================================================
   ERROR PAGES — Audit Dossier (SPEC-406)
   Standalone pages (static/404.html) — not SPA, so body-level reset.
   ================================================================ */
.error-page {
    margin: 0;
    min-height: 100vh;
    background: var(--paper-canvas);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    animation: error-fade-in var(--duration-normal) var(--ease-out);
}

@keyframes error-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.error-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 520px;
    padding: var(--sp-12);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.error-mark {
    height: 48px;
    width: auto;
    opacity: 0.85;
    display: block;
    margin-bottom: var(--sp-10);
    user-select: none;
}

.error-code {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-brass-ink);
    margin: 0;
}

.error-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-2xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink-primary);
    margin: var(--sp-4) 0 0 0;
}

.error-message {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--ink-secondary);
    margin: var(--sp-4) 0 var(--sp-8) 0;
    max-width: 440px;
}

.error-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: var(--brand-navy);
    color: var(--ink-inverse);
    border: 1px solid var(--brand-navy-mid);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.error-back:hover {
    background: var(--brand-navy-mid);
    box-shadow: var(--shadow-focus-ink);
}

.error-back:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brass);
}

.error-attestation {
    flex: 0 0 auto;
    border-top: 1px solid var(--edge-hairline);
    padding: var(--sp-5) var(--sp-12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-6);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-tertiary);
}

.error-attestation-lines {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.error-attestation p {
    margin: 0;
    max-width: 720px;
}

.error-cosign {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.error-cosign-mark {
    height: 40px;
    width: auto;
    display: block;
}

.error-cosign-text {
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-brass-ink);
}

@media (max-width: 767px) {
    .error-stage {
        padding: var(--sp-6);
    }
    .error-mark {
        margin-bottom: var(--sp-6);
    }
    .error-code {
        font-size: 72px;
    }
    .error-title {
        font-size: var(--text-xl);
    }
    .error-attestation {
        padding: var(--sp-4) var(--sp-6);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
    }
    .error-cosign-mark {
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-page {
        animation: none;
    }
}

/* ================================================================
   MODAL — Audit Dossier (SPEC-403)
   Three variants: decision, announcement, secret. Shared chrome:
   micro-label + close, serif title, hairline divider, body, footer.
   ================================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 27, 46, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9600;
    padding: var(--sp-6);
    animation: modal-backdrop-in var(--duration-normal) var(--ease-out);
}

.modal-card {
    position: relative;
    background: var(--paper-modal);
    border: 1px solid var(--edge-emphasis);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-8) var(--sp-8) 0;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - var(--sp-12));
    display: flex;
    flex-direction: column;
    animation: modal-card-in var(--duration-normal) var(--ease-out);
}

.modal-card--secret {
    max-width: 520px;
    padding-left: calc(var(--sp-8) + 3px);
}

.modal-card--secret::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-brass);
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

/* Destructive variant — red accent stripe (SPEC-REDESIGN-008) */
.modal-card--destructive {
    padding-left: calc(var(--sp-8) + 3px);
}

.modal-card--destructive::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--seal-exception);
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.modal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 18px;
}

.modal-micro-slot {
    display: inline-block;
    min-height: 1em;
}

.modal-micro-label {
    display: inline-block;
}

.modal-close {
    background: transparent;
    border: 0;
    color: var(--ink-tertiary);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.modal-close:hover { color: var(--ink-primary); background: var(--paper-inset); }
.modal-close:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus-brass);
    color: var(--ink-primary);
}

.modal-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--ink-primary);
    letter-spacing: -0.005em;
    margin: var(--sp-3) 0 0;
    line-height: 1.25;
}

.modal-divider {
    border: 0;
    border-top: 1px solid var(--edge-hairline);
    margin: var(--sp-4) 0 0;
}

.modal-body {
    padding: var(--sp-5) 0 var(--sp-6);
    overflow-y: auto;
    flex: 1 1 auto;
}

.modal-body-text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: 1.55;
}

.modal-body-text + .modal-body-text { margin-top: var(--sp-3); }

.modal-body .value-chip,
.modal-body code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--paper-inset);
    color: var(--ink-primary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
    margin: 0 calc(-1 * var(--sp-8));
    padding-left: var(--sp-8);
    padding-right: var(--sp-8);
    border-top: 1px solid var(--edge-hairline);
    background: transparent;
}

.modal-card--secret .modal-footer {
    justify-content: space-between;
    margin-left: calc(-1 * (var(--sp-8) + 3px));
    padding-left: calc(var(--sp-8) + 3px);
}

/* Destructive primary button — used inside the modal footer */
.btn-destructive {
    background: var(--seal-exception);
    color: var(--ink-inverse);
    border-color: var(--seal-exception);
}
.btn-destructive:hover:not(:disabled) {
    background: var(--seal-exception-ink);
    border-color: var(--seal-exception-ink);
}
.btn-destructive:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus-brass);
}

/* Inline value chip — used in modal body for highlighting keys/ids */
.value-chip {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--paper-inset);
    color: var(--ink-primary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--edge-hairline);
}

/* ---------------- Secret variant ---------------- */

.modal-secret-box {
    background: var(--paper-inset);
    border: 1px solid var(--edge-hairline);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.modal-secret-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-secret-label {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

.modal-secret-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--ink-primary);
    word-break: break-all;
}

.modal-secret-field {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
}

.modal-secret-input {
    flex: 1 1 auto;
    border: 1px solid var(--edge-default);
    background: var(--paper-leaf);
    color: var(--ink-primary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    min-width: 0;
}
.modal-secret-input:focus {
    outline: 0;
    border-color: var(--edge-emphasis);
    box-shadow: var(--shadow-focus-brass);
}

.modal-secret-toggle,
.modal-secret-copy {
    background: transparent;
    border: 1px solid var(--edge-default);
    color: var(--ink-secondary);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.modal-secret-toggle:hover,
.modal-secret-copy:hover {
    color: var(--ink-primary);
    border-color: var(--edge-emphasis);
    background: var(--paper-leaf);
}
.modal-secret-toggle:focus-visible,
.modal-secret-copy:focus-visible {
    outline: 0;
    border-color: var(--edge-emphasis);
    box-shadow: var(--shadow-focus-brass);
}

.modal-secret-footnote {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    line-height: 1.5;
}

.modal-secret-ack {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    margin-right: auto;
}

.modal-secret-ack input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-brass);
    cursor: pointer;
}

/* ---------------- Motion ---------------- */

@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modal-card-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-card {
        animation: none !important;
    }
    .modal-close,
    .modal-secret-toggle,
    .modal-secret-copy,
    .btn-destructive {
        transition: none !important;
    }
}

/* ==========================================================================
   Ledger Select (SPEC-404) — custom listbox replacing native <select>
   The native element remains in DOM (source of truth, form submit, validation).
   ========================================================================== */

.ledger-select {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    min-width: 140px;
    max-width: 100%;
    font-family: var(--font-sans);
}

/* Full-width contexts: form fields, feedback modal, search filter row when it wants all width. */
.admin-form .ledger-select,
.admin-modal-body .ledger-select,
.vdetail-disagree-form .ledger-select,
.login-form .ledger-select {
    width: 100%;
}

/* Header language selector — intrinsic size, no min-width. */
.lang-selector .ledger-select {
    min-width: 0;
}
.lang-selector .ledger-select__trigger {
    padding: 4px 24px 4px 8px;
    font-size: var(--text-sm);
}

/* Visually hidden native select — still focusable so selectEl.focus() works,
   but excluded from pointer events and tab order (tabindex=-1 in JS). */
.ledger-select > select[data-ledger-enhanced="true"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---- Trigger (default / ledger row) ---- */
.ledger-select__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 28px 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom-color: var(--edge-default);
    border-radius: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: var(--text-base);
    color: var(--ink-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}
.ledger-select__trigger:hover {
    border-bottom-color: var(--edge-emphasis);
}
.ledger-select__trigger:focus-visible {
    outline: none;
    border: 1px solid var(--edge-emphasis);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus-brass);
}
.ledger-select--open .ledger-select__trigger {
    outline: none;
    border: 1px solid var(--edge-emphasis);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus-brass);
}
.ledger-select__trigger:disabled,
.ledger-select--disabled .ledger-select__trigger {
    cursor: not-allowed;
    color: var(--ink-muted);
    opacity: 0.7;
}
.ledger-select__label {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ledger-select__trigger--placeholder .ledger-select__label {
    color: var(--ink-tertiary);
}
.ledger-select__chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    display: inline-flex;
    transform: translateY(-50%);
    color: var(--ink-tertiary);
    pointer-events: none;
    transition: transform var(--duration-fast) var(--ease-out);
}
.ledger-select--open .ledger-select__chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* ---- Boxed variant (inline form field) ---- */
.ledger-select--boxed .ledger-select__trigger {
    background: var(--paper-inset);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
}
.ledger-select--boxed .ledger-select__trigger:hover {
    border-color: var(--edge-emphasis);
}
.ledger-select--boxed.ledger-select--open .ledger-select__trigger {
    border-color: var(--edge-emphasis);
    background: var(--paper-elevated);
}

/* ---- On-dark variant (navy header) ---- */
.ledger-select--on-dark .ledger-select__trigger {
    background: transparent;
    color: var(--ink-inverse);
    border: 1px solid transparent;
    border-bottom-color: rgba(244, 234, 219, 0.24);
}
.ledger-select--on-dark .ledger-select__trigger:hover {
    border-bottom-color: rgba(244, 234, 219, 0.55);
}
.ledger-select--on-dark .ledger-select__chevron {
    color: rgba(244, 234, 219, 0.65);
}
.ledger-select--on-dark .ledger-select__trigger:focus-visible,
.ledger-select--on-dark.ledger-select--open .ledger-select__trigger {
    border: 1px solid rgba(244, 234, 219, 0.4);
    border-radius: var(--radius-sm);
    background: rgba(244, 234, 219, 0.08);
    box-shadow: 0 0 0 3px rgba(168, 130, 58, 0.28);
}

/* ---- Popover (always on paper, mounted to <body>) ---- */
.ledger-select__popover {
    position: fixed;
    z-index: 10050;
    box-sizing: border-box;
    min-width: 140px;
    max-height: 280px;
    overflow-y: auto;
    padding: var(--sp-1);
    background: var(--paper-elevated);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    opacity: 0;
    transform: translateY(-4px);
    animation: ledger-select-in var(--duration-fast) var(--ease-out) forwards;
}
.ledger-select__popover--up {
    transform: translateY(4px);
    animation-name: ledger-select-in-up;
}
@keyframes ledger-select-in {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ledger-select-in-up {
    to { opacity: 1; transform: translateY(0); }
}
.ledger-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ledger-select__option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--ink-primary);
    cursor: pointer;
    user-select: none;
}
.ledger-select__option--focused,
.ledger-select__option:hover {
    background: var(--paper-inset);
    border-left-color: var(--brand-brass);
}
.ledger-select__option--selected {
    font-weight: 500;
}
.ledger-select__option--selected .ledger-select__tick {
    color: var(--brand-brass);
}
.ledger-select__option--disabled {
    color: var(--ink-muted);
    cursor: not-allowed;
}
.ledger-select__option--disabled:hover {
    background: transparent;
    border-left-color: transparent;
}
.ledger-select__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    color: transparent;
}

/* ---- Error state mirroring (vdetail disagree form) ---- */
.ledger-select:has(> select.vdetail-disagree-select-error) .ledger-select__trigger {
    border: 1px solid var(--seal-exception);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px rgba(140, 58, 46, 0.18);
}

/* ---- Neutralize legacy select-specific CSS that would bleed through ---- */
.ledger-select > select.vdetail-disagree-select,
.ledger-select > select.rules-select,
.ledger-select > select.reports-filter-select,
.ledger-select > select.reports-filter-mode {
    background-image: none !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .ledger-select__popover {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ledger-select__trigger,
    .ledger-select__chevron {
        transition: none !important;
    }
}

/* ==================================================================
 * SPEC-405 — Card Patterns (Evidence Spine + Expected/Found)
 * ------------------------------------------------------------------
 * Quatro patterns canonicos:
 *   .v-card        — Pattern 1: Validation card com evidence spine (signature)
 *   .ef-block      — Pattern 2: Expected/Found sub-component
 *   .list-card     — Pattern 3: Jobs/Reports list row
 *   .progress-card — Pattern 4: Upload/Pipeline progress
 *   .seal-chip     — Mini status pill pra distribution em list-cards
 *
 * Todos usam SOMENTE tokens de SPEC-401. Nenhum hex hardcoded.
 * ================================================================== */

/* Stack container for v-card / list-card sequences */
.v-card-list,
.list-card-stack {
    display: flex;
    flex-direction: column;
    gap: 0; /* v-card uses margin-top; this container just gives a flex box */
}

/* ============== EF-BLOCK (Expected / Found sub-component) ======== */
.ef-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--edge-hairline);
    border: 1px solid var(--edge-hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ef-block__cell {
    background: var(--paper-inset);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ef-block__cell--discrepancy {
    grid-column: 1 / -1;
    border-top: 1px solid var(--edge-hairline);
}

.ef-block__value {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--ink-primary);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.ef-block__value--mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* Status tints — aplicados no cell Found e no cell Discrepancy */
.ef-block--fail .ef-block__cell--found,
.ef-block--fail .ef-block__cell--discrepancy {
    background: var(--seal-exception-bg);
}

.ef-block--review .ef-block__cell--found,
.ef-block--review .ef-block__cell--discrepancy {
    background: var(--seal-review-bg);
}

/* Pass nao tinge — mantem paper-inset neutro */

/* ============== V-CARD (Validation — Signature Pattern) ========== */
.v-card {
    position: relative;
    display: grid;
    grid-template-columns: 3px var(--spine-width) 1fr;
    background: var(--paper-leaf);
    border: 1px solid var(--edge-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.v-card + .v-card {
    margin-top: var(--sp-3);
}

.v-card__accent {
    background: var(--seal-error);
    align-self: stretch;
}

.v-card--pass   .v-card__accent { background: var(--seal-pass); }
.v-card--fail   .v-card__accent { background: var(--seal-exception); }
.v-card--review .v-card__accent { background: var(--seal-review); }

.v-card__spine {
    background: var(--spine-bg);
    border-right: 1px solid var(--spine-edge);
    padding: var(--sp-3) var(--sp-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 120px;
}

.v-card__coord {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--spine-font);
    font-size: var(--spine-size);
    color: var(--spine-ink);
    line-height: 1.4;
    text-align: center;
}

.v-card__coord > span {
    min-height: 12px;
    letter-spacing: 0.02em;
}

.v-card__coord-sep {
    width: 14px;
    height: 1px;
    background: var(--spine-edge);
    margin: var(--sp-1) 0;
}

.v-card__seal {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--seal-error);
}

.v-card__seal svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.v-card--pass   .v-card__seal { color: var(--seal-pass); }
.v-card--fail   .v-card__seal { color: var(--seal-exception); }
.v-card--review .v-card__seal { color: var(--seal-review); }

.v-card__body {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

.v-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.v-card__title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink-primary);
    letter-spacing: -0.005em;
    margin: 0;
    line-height: 1.3;
}

.v-card__group {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}

.v-card__meta {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.v-card__meta time,
.v-card__meta .v-card__cost,
.v-card__meta .v-card__pipeline {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}

.v-card__meta-sep {
    color: var(--ink-muted);
}

/* Hover (clickable) */
.v-card--clickable { cursor: pointer; }
.v-card--clickable:hover {
    border-color: var(--edge-default);
    box-shadow: inset 0 0 0 1px var(--edge-default);
}
.v-card--clickable:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ink);
    border-color: var(--edge-emphasis);
}

/* Responsive: below 480px, colapsar spine em faixa horizontal em cima */
@media (max-width: 480px) {
    .v-card {
        grid-template-columns: 3px 1fr;
    }
    .v-card__spine {
        grid-column: 2;
        grid-row: 1;
        flex-direction: row;
        min-height: 0;
        padding: var(--sp-2) var(--sp-3);
        border-right: none;
        border-bottom: 1px solid var(--spine-edge);
        justify-content: flex-start;
        gap: var(--sp-3);
    }
    .v-card__coord {
        flex-direction: row;
        gap: var(--sp-2);
    }
    .v-card__coord-sep { display: none; }
    .v-card__body {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ============== LIST-CARD (Jobs / Reports) ======================= */
.list-card {
    position: relative;
    display: grid;
    grid-template-columns: 3px 24px 1fr auto;
    align-items: stretch;
    background: var(--paper-leaf);
    border: 1px solid var(--edge-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out);
    text-decoration: none;
    color: inherit;
}

.list-card + .list-card {
    margin-top: var(--sp-2);
}

.list-card__accent {
    background: var(--seal-error);
}

.list-card--pass   .list-card__accent { background: var(--seal-pass); }
.list-card--fail   .list-card__accent { background: var(--seal-exception); }
.list-card--review .list-card__accent { background: var(--seal-review); }
.list-card--neutral .list-card__accent { background: var(--edge-subtle); }

.list-card__spine {
    background: var(--spine-bg);
    border-right: 1px solid var(--spine-edge);
    padding: var(--sp-3) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
}

.list-card__seal {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    color: var(--seal-error);
}

.list-card__seal svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.list-card--pass   .list-card__seal { color: var(--seal-pass); }
.list-card--fail   .list-card__seal { color: var(--seal-exception); }
.list-card--review .list-card__seal { color: var(--seal-review); }

.list-card__body {
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.list-card__title {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ink-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.list-card__subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.list-card__subtitle time {
    font-family: var(--font-mono);
}

.list-card__distribution {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

.list-card__trail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-4);
    color: var(--ink-muted);
    transition: color var(--duration-fast) var(--ease-out);
}

.list-card__trail svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.list-card--clickable { cursor: pointer; }
.list-card--clickable:hover {
    border-color: var(--edge-default);
}
.list-card--clickable:hover .list-card__trail {
    color: var(--ink-secondary);
}
.list-card--clickable:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ink);
}

/* Variant: sem status spine (rules/admin) */
.list-card--plain {
    grid-template-columns: 3px 1fr auto;
}
.list-card--plain .list-card__spine { display: none; }

/* Seal chips (distribution row) */
.seal-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid;
}

.seal-chip svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

.seal-chip--pass {
    background: var(--seal-pass-bg);
    color: var(--seal-pass-ink);
    border-color: var(--seal-pass-edge);
}
.seal-chip--fail {
    background: var(--seal-exception-bg);
    color: var(--seal-exception-ink);
    border-color: var(--seal-exception-edge);
}
.seal-chip--review {
    background: var(--seal-review-bg);
    color: var(--seal-review-ink);
    border-color: var(--seal-review-edge);
}

/* ============== PROGRESS-CARD (Upload / Pipeline) ================ */
.progress-card {
    background: var(--paper-leaf);
    border: 1px solid var(--edge-subtle);
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.progress-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.progress-card__label {
    color: var(--brand-brass-ink);
}

.progress-card__label--processing {
    animation: progressCardPulse 2s var(--ease-out) infinite;
}

@keyframes progressCardPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.progress-card__title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink-primary);
    margin: 0;
    letter-spacing: -0.005em;
}

.progress-card__divider {
    height: 1px;
    background: var(--edge-hairline);
    border: 0;
    margin: 0;
}

.progress-card__bar {
    width: 100%;
    height: 6px;
    background: var(--paper-inset);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-card__bar-fill {
    height: 100%;
    background: var(--brand-navy);
    width: 0%;
    transition: width var(--duration-slow) var(--ease-out);
}

.progress-card__status {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.progress-card__pct {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-primary);
    font-weight: 500;
    min-width: 42px;
    text-align: right;
}

.progress-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
}

.progress-card__meta-row {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.progress-card__meta-row .mono,
.progress-card__meta-row time {
    font-family: var(--font-mono);
    color: var(--ink-secondary);
}

/* Reduced motion: barra salta sem transition; pulse desabilitado */
@media (prefers-reduced-motion: reduce) {
    .progress-card__bar-fill {
        transition: none !important;
    }
    .progress-card__label--processing {
        animation: none !important;
    }
    .v-card,
    .list-card {
        transition: none !important;
    }
}

/* ================================================================
   SPEC-604 Meu Perfil — Audit Dossier redesign
   Two-column layout: sticky identity card + stacked sections.
   ================================================================ */
.profile-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: flex-start;
}

.profile-columns {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

.profile-identity-card {
    position: sticky;
    top: var(--sp-5);
    background: var(--paper-leaf);
    border: 1px solid var(--edge-brass);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--paper-leaf);
    color: var(--brand-navy);
    border: 2px solid var(--brand-brass);
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 1px;
    user-select: none;
}

.profile-identity-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
}

.profile-identity-name {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.profile-identity-email {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    margin: 0;
    word-break: break-all;
}

.profile-role-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--brand-brass);
    color: var(--ink-inverse);
    border-radius: var(--radius-pill);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-identity-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--edge-subtle);
    width: 100%;
}

.profile-identity-meta dt {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-identity-meta dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-primary);
}

.profile-last-login-empty {
    color: var(--ink-tertiary);
    font-style: italic;
}

.profile-section {
    background: var(--paper-elevated);
    border: 1px solid var(--edge-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: var(--sp-5) var(--sp-6);
}

.profile-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--edge-subtle);
}

.profile-section-header h3 {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
    letter-spacing: -0.005em;
}

.profile-section-icon {
    width: 20px;
    height: 20px;
    color: var(--brand-brass-ink);
    flex-shrink: 0;
}

.profile-section-hint {
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    margin: 0 0 var(--sp-3) 0;
}

.profile-kv {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: var(--sp-2);
    column-gap: var(--sp-4);
    margin: 0;
}

.profile-kv dt {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    font-weight: 500;
}

.profile-kv dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-primary);
    word-break: break-word;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-field-label {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    font-weight: 500;
}

.profile-field-hint {
    font-size: var(--text-label);
    color: var(--ink-tertiary);
    margin-top: 2px;
}

.profile-field input,
.profile-select {
    padding: 8px 10px;
    background: var(--paper-inset);
    border: 1px solid var(--edge-default);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--ink-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.profile-field input:focus,
.profile-select:focus {
    outline: none;
    border-color: var(--brand-brass);
    box-shadow: var(--shadow-focus-brass);
}

/* Password visibility toggle (SPEC-REDESIGN-006) */
.pw-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pw-field-wrap input {
    flex: 1;
    padding-right: 36px;
}

.pw-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink-tertiary);
    display: flex;
    align-items: center;
    transition: color var(--duration-fast) var(--ease-out);
}

.pw-toggle:hover {
    color: var(--brand-brass-ink);
}

.pw-toggle svg {
    width: 16px;
    height: 16px;
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.profile-alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-3);
    border: 1px solid transparent;
}

.profile-alert.hidden {
    display: none;
}

.profile-alert-warning {
    background: rgba(168, 130, 58, 0.12);
    color: var(--brand-brass-ink);
    border-color: var(--edge-brass);
}

.profile-alert-error {
    background: rgba(176, 40, 40, 0.08);
    color: #8a2525;
    border-color: rgba(176, 40, 40, 0.25);
}

.profile-alert-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: var(--text-base);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    border-radius: var(--radius-md);
}

.profile-alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------
   Activity log view (SPEC-614)
   -------------------------------------------------------------- */

.activity-view {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.activity-header h2 {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-display);
    color: var(--ink-primary);
}

.activity-subtitle {
    color: var(--ink-secondary);
    margin: 0;
    font-size: var(--text-sm);
}

.activity-filters {
    background: var(--paper-leaf);
    border: 1px solid var(--edge-hairline);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}

.activity-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
}

.activity-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-xs);
    color: var(--ink-secondary);
}

.activity-field--small {
    max-width: 160px;
}

.activity-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--ink-primary);
    padding-top: 1.2em;
}
.activity-field--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-brass, #d4a843);
}

.activity-field input,
.activity-field select {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--edge-hairline);
    border-radius: var(--radius-sm);
    background: var(--paper-inset);
    font-size: var(--text-sm);
    color: var(--ink-primary);
}

.activity-filter-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.activity-results {
    background: var(--paper-leaf);
    border: 1px solid var(--edge-hairline);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
}

.activity-table-wrapper {
    overflow-x: auto;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.activity-table th,
.activity-table td {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--edge-hairline);
    vertical-align: top;
    white-space: nowrap;
}

.activity-table th {
    background: var(--paper-canvas);
    font-weight: 600;
    color: var(--ink-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.activity-col-target,
.activity-col-meta {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Super-user rows stand out so the auditor can scan them quickly. */
.activity-row--super td {
    background: color-mix(in srgb, var(--brand-brass) 6%, transparent);
}
.activity-row--super td:first-child {
    box-shadow: inset 3px 0 0 0 var(--brand-brass);
}
.activity-super-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--brand-brass);
    color: var(--paper-canvas);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.status-badge--ok {
    color: var(--status-pass-ink);
    background: var(--status-pass-bg);
}

.status-badge--warn {
    color: var(--brand-brass-ink);
    background: rgba(168, 130, 58, 0.14);
}

.status-badge--error {
    color: var(--status-error-ink);
    background: var(--status-error-bg);
}

.status-badge--neutral {
    color: var(--ink-tertiary);
    background: var(--paper-inset);
}

.activity-pagination {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    justify-content: flex-end;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--edge-hairline);
}

.activity-page-indicator {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
}

/* SPEC-712 — Review pending badge (sidebar counter) */
.review-pending-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--status-review-bg);
    color: var(--status-review-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

.review-pending-badge.hidden {
    display: none;
}

/* SPEC-712 — Filter chip above the review pending table */
.review-pending-filter {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--edge-hairline);
}

/* SPEC-B003 — Filter chips on the unified Processos view. */
.jobs-filter-bar {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--edge-hairline);
    flex-wrap: wrap;
}

.jobs-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--edge-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.jobs-filter-chip:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.jobs-filter-chip.is-active {
    background: var(--brand-bg-soft, var(--surface-hover));
    color: var(--text-primary);
    border-color: var(--brand-border, var(--edge-strong, var(--edge-hairline)));
    font-weight: 500;
}

.jobs-filter-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--status-review-bg, var(--surface-hover));
    color: var(--status-review-ink, var(--text-primary));
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.jobs-filter-chip-count.hidden {
    display: none;
}

/* SPEC-B008: processing chip badge uses the processing status palette so
   the number reads as "active work" instead of "pending review". */
.jobs-filter-chip-count-processing {
    background: var(--status-processing-bg, #EEF2FF);
    color: var(--status-processing-ink, #3730A3);
}

/* ============================================================
   SPEC-R04-013 — Structured NEEDS_REVIEW analyst aid
   Renders pro/contra/recommendation/what-human-needs in the
   validation detail modal. Replaces free-text NR justification.
   ============================================================ */

.vdetail-nr-structure {
    border-left: 3px solid var(--status-review, #c99435);
    background: var(--status-review-bg, #fffaeb);
}

.vdetail-nr-structure .vdetail-section-header {
    background: var(--status-review-bg, #fffaeb);
}

.nr-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    margin-bottom: 12px;
}

.nr-meta-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2px;
    font-weight: 600;
}

.nr-reason-value {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.nr-rec {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.nr-rec--pass {
    background: var(--status-pass-bg, #ecfdf5);
    border-color: var(--status-pass, #15803d);
}
.nr-rec--fail {
    background: var(--status-fail-bg, #fef2f2);
    border-color: var(--status-fail, #b33a3a);
}
.nr-rec--neutral {
    background: var(--status-review-bg, #fffaeb);
    border-color: var(--status-review, #c99435);
}
.nr-rec-value {
    font-size: 13px;
    font-weight: 600;
}

.nr-args {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0 14px 14px;
}

.nr-args-col {
    background: var(--surface, #fff);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--border-subtle, #e5e7eb);
}

.nr-args-title {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nr-args-title--pass {
    color: var(--status-pass, #15803d);
}
.nr-args-title--fail {
    color: var(--status-fail, #b33a3a);
}

.nr-args-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}
.nr-args-list li {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.nr-args-list--pass li::marker {
    color: var(--status-pass, #15803d);
}
.nr-args-list--fail li::marker {
    color: var(--status-fail, #b33a3a);
}

.nr-args-empty {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

.nr-action {
    margin: 0 14px 14px;
    padding: 12px 14px;
    background: var(--surface-hover, #f9fafb);
    border-left: 4px solid var(--status-review, #c99435);
    border-radius: 4px;
}

.nr-action-title {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--status-review, #c99435);
}

.nr-action-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
}

@media (max-width: 720px) {
    .nr-meta, .nr-args {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   SPEC-R04-014 — Approval controls + banner
   ------------------------------------------------------------------ */

.approval-controls-shell {
    margin: var(--sp-4) 0;
}

.approval-controls-shell[data-loading] {
    min-height: 56px;
}

.approval-controls {
    padding: var(--sp-4);
    background: var(--surface-subtle);
    border: 1px solid var(--edge-default);
    border-radius: 6px;
}

.approval-controls h4 {
    margin: 0 0 var(--sp-2) 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-primary);
}

.approval-blocked-note {
    margin: 0 0 var(--sp-3) 0;
    font-size: 13px;
    color: var(--status-review, #c99435);
}

.approval-buttons {
    display: flex;
    gap: var(--sp-3);
}

.approval-buttons .btn-success,
.approval-buttons .btn-danger {
    color: #fff;
    min-width: 160px;
}

.approval-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 6px;
    border-left: 4px solid;
    background: var(--surface-subtle);
}

.approval-banner-approved {
    background: var(--status-pass-bg);
    border-left-color: var(--status-pass);
    color: var(--status-pass-ink);
}

.approval-banner-rejected {
    background: var(--status-fail-bg);
    border-left-color: var(--status-fail);
    color: var(--status-fail-ink);
}

.approval-banner-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.approval-banner-main strong {
    font-size: 14px;
    letter-spacing: 0.05em;
}

.approval-banner-meta {
    font-size: 12px;
    opacity: 0.85;
}

.approval-banner-comment {
    flex: 2;
    font-size: 13px;
    font-style: italic;
    padding-left: var(--sp-3);
    border-left: 1px solid currentColor;
}

/* SPEC-R04-014 follow-up: phase tables in Dados tab — Tipo / Status
   columns are filled by the BSO preparer in the docx, not the AI.
   Header carries an asterisk + tooltip; foot note repeats it. */
.bso-source-mark {
    color: var(--accent-primary, #b8860b);
    font-weight: 600;
    margin-left: 2px;
}
.phase-source-note {
    font-size: 11px;
    color: var(--ink-tertiary);
    margin-top: var(--sp-2);
    font-style: italic;
}

/* SPEC-R04-015: Workspace */
.workspace-table { width: 100%; }
.workspace-table th,
.workspace-table td { padding: var(--sp-2) var(--sp-3); vertical-align: top; }
.workspace-row { cursor: pointer; }
.workspace-row:hover { background: var(--surface-hover, rgba(0,0,0,0.03)); }
.workspace-row--mine { box-shadow: inset 4px 0 0 var(--accent-primary, #b8860b); }
.workspace-bso strong { display: block; }
.workspace-bso__meta {
    font-size: 11px;
    color: var(--ink-tertiary);
}
.workspace-owner__name { font-weight: 600; }
.workspace-owner__email { font-size: 11px; color: var(--ink-tertiary); }
.workspace-footer { padding: var(--sp-2) 0; color: var(--ink-tertiary); font-size: 12px; }
.workspace-filter-group {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    margin-right: var(--sp-3);
}
.workspace-filter-label {
    font-size: 11px;
    color: var(--ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Work-state pill colors — design tokens (SPEC-REDESIGN-023) */
.work-state { font-size: 11px; }
.work-state--unassigned { color: var(--ink-muted); background: rgba(0,0,0,0.06); }
.work-state--checked_in { color: var(--brand-brass-ink); background: rgba(168,130,58,0.10); }
.work-state--in_progress { color: var(--seal-info-ink); background: var(--seal-info-bg); }
.work-state--blocked { color: var(--seal-exception-ink); background: var(--seal-exception-bg); }
.work-state--returned { color: var(--seal-review-ink); background: var(--seal-review-bg); }
.work-state--done { color: var(--seal-pass-ink); background: var(--seal-pass-bg); }

/* Read-only banner */
.readonly-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--status-review-bg, #fff7e6);
    color: var(--status-review-ink, #92400e);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--sp-3);
}
.readonly-banner__text { flex: 1; }
.readonly-banner__icon { font-size: 18px; }

/* Audit trail tab */
.audit-events-table th,
.audit-events-table td { padding: var(--sp-2) var(--sp-3); font-size: 12px; }
.audit-durations,
.audit-ownership { padding-left: var(--sp-4); }

/* Workspace filter bar redesign */
.workspace-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 16px);
    flex-wrap: wrap;
    padding: var(--sp-3, 12px) 0 var(--sp-2, 8px);
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    margin-bottom: var(--sp-3, 12px);
}
.workspace-filter-selects {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    flex-wrap: wrap;
}
.workspace-select-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    font-size: 13px;
}
.workspace-select-label {
    color: var(--ink-tertiary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.workspace-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-raised, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 6px;
    padding: 5px 28px 5px 10px;
    font-size: 13px;
    color: var(--ink-primary);
    cursor: pointer;
    min-width: 130px;
    transition: border-color 0.15s;
}
.workspace-select:hover { border-color: var(--accent-primary, #b8860b); }
.workspace-select:focus {
    outline: none;
    border-color: var(--accent-primary, #b8860b);
    box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
}

.workspace-search {
    margin-left: auto;
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    width: 220px;
    background: var(--surface-raised, #fff);
    color: var(--ink-primary);
}
.workspace-search:focus {
    outline: none;
    border-color: var(--accent-primary, #b8860b);
    box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
}

/* Workspace table v2 — compact, no-wrap badges */
.workspace-table {
    table-layout: auto;
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}
.workspace-table thead tr {
    border-bottom: 2px solid var(--border-subtle, rgba(0,0,0,0.10));
}
.workspace-table th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-tertiary);
    padding: 8px 10px 6px;
    white-space: nowrap;
}
.workspace-table td {
    padding: 10px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.workspace-row:hover td { background: var(--surface-hover, rgba(0,0,0,0.02)); }
.workspace-row--mine td:first-child {
    border-left: 3px solid var(--accent-primary, #b8860b);
}

/* Column widths (table-layout: fixed, ver SPEC-B123 abaixo) */
.ws-col-bso     { width: 19%; }
.ws-col-owner   { width: 13%; }
.ws-col-state   { width: 13%; }
.ws-col-dur     { width: 10%; }
.ws-col-ai      { width: 8%; }
.ws-col-human   { width: 13%; }
.ws-col-counts  { width: 12%; }
.ws-col-actions { width: 12%; text-align: right; }
/* SPEC-B123: com a coluna Tempo a tabela deixou de caber (a coluna BSO ja vinha
   espremida em ~50px pela coluna Humano e pelas acoes). Layout fixo, com as
   larguras acima valendo de fato (os <th> carregam as mesmas classes); o selo
   longo da decisao humana e o estado quebram entre palavras, e as acoes quebram
   de linha em vez de empurrar a tabela para fora do card. */
.workspace-table { table-layout: fixed; }
.workspace-table td { overflow-wrap: anywhere; }
.workspace-table .ws-col-human .badge,
.workspace-table .ws-col-state .work-state {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
}
.workspace-table .ws-actions { flex-wrap: wrap; }

/* BSO cell — wraps freely, no ellipsis */
.workspace-bso__title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-primary);
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.workspace-bso__meta {
    font-size: 10px;
    color: var(--ink-tertiary);
    margin-top: 2px;
    word-break: break-all;
}

/* Owner cell — wraps freely, no ellipsis */
.workspace-owner__name {
    font-size: 12px;
    font-weight: 500;
    word-break: break-word;
    line-height: 1.4;
}
.workspace-owner__email {
    font-size: 10px;
    color: var(--ink-tertiary);
    word-break: break-all;
    margin-top: 1px;
}

/* All badges in workspace: nowrap, compact */
.workspace-table .badge,
/* Workspace work-state chips with design tokens (SPEC-REDESIGN-023) */
.workspace-table .work-state {
    white-space: nowrap;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
}

/* Work-state pill variants — design tokens (SPEC-REDESIGN-023) */
.work-state--unassigned  { color: var(--ink-muted); background: rgba(0,0,0,0.07); }
.work-state--checked_in  { color: var(--brand-brass-ink); background: rgba(168,130,58,0.10); }
.work-state--in_progress { color: var(--seal-info-ink); background: var(--seal-info-bg); }
.work-state--blocked     { color: var(--seal-exception-ink); background: var(--seal-exception-bg); }
.work-state--returned    { color: var(--seal-review-ink); background: var(--seal-review-bg); }
.work-state--done        { color: var(--seal-pass-ink); background: var(--seal-pass-bg); }

/* Action buttons: compact, nowrap */
.ws-col-actions .btn {
    font-size: 11px;
    padding: 4px 10px;
    white-space: nowrap;
    border-radius: 5px;
}

/* Counts cell */
.ws-col-counts {
    font-size: 11px;
    color: var(--ink-secondary);
    white-space: nowrap;
}

/* Counts cell — coloured sub-parts, stacked */
.ws-col-counts { font-size: 11px; line-height: 1.6; white-space: normal; }
.ws-count-review { color: var(--status-review-ink, #92400e); }
.ws-count-fail   { color: var(--status-fail-ink, #b91c1c); }

/* Workspace icon action buttons */
.ws-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }
.ws-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--border-default, #d1d5db);
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer; padding: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ws-icon-btn:hover {
    background: var(--surface-hover, rgba(0,0,0,0.06));
    color: var(--accent-primary, #b8860b);
    border-color: var(--accent-primary, #b8860b);
}
/* Audit icon slightly muted */
.ws-icon-btn:last-child { opacity: 0.65; }
.ws-icon-btn:last-child:hover { opacity: 1; }

/* Transfer button in owner cell */
.ws-transfer-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px; font-size: 10px; color: var(--ink-muted);
    background: none; border: none; cursor: pointer; padding: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.workspace-row:hover .ws-transfer-btn { opacity: 1; }
.ws-transfer-btn:hover { color: var(--accent-primary, #b8860b); }

/* Sortable headers */
.ws-th-sort { cursor: pointer; user-select: none; }
.ws-th-sort:hover { color: var(--ink-primary); }
.ws-th-active { color: var(--accent-primary, #b8860b); }
.ws-th-sort:focus-visible { outline: 2px solid var(--accent-primary, #b8860b); outline-offset: -2px; }
.ws-col-dur { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Workspace action modal */
.ws-modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.ws-modal-overlay.hidden { display: none; }
.ws-modal-box {
    background: var(--surface-raised, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: min(760px, 95vw);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ws-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}
.ws-modal-title {
    font-size: 15px; font-weight: 700; color: var(--ink-primary);
}
.ws-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--ink-muted); padding: 2px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
}
.ws-modal-close:hover { color: var(--ink-primary); background: var(--surface-hover); }
.ws-modal-body {
    padding: 16px 20px; display: flex; flex-direction: column; gap: 14px;
    max-height: 75vh; overflow-y: auto;
}
.ws-modal-info {
    background: var(--surface-hover, rgba(0,0,0,0.04));
    border-radius: 6px; padding: 10px 14px;
    font-size: 13px; color: var(--ink-secondary);
}
.ws-modal-warn { margin: 0; color: var(--status-review-ink, #92400e); font-weight: 500; }
.ws-modal-field { display: flex; flex-direction: column; gap: 5px; }
.ws-modal-label { font-size: 12px; font-weight: 600; color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.ws-modal-input {
    width: 100%; border: 1px solid var(--border-default, #d1d5db);
    border-radius: 7px; padding: 9px 12px; font-size: 13px;
    color: var(--ink-primary); background: var(--surface-raised, #fff);
    resize: vertical; transition: border-color 0.15s;
    font-family: inherit; box-sizing: border-box;
}
.ws-modal-input:focus {
    outline: none; border-color: var(--accent-primary, #b8860b);
    box-shadow: 0 0 0 3px rgba(184,134,11,0.12);
}
.ws-modal-footer {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

/* Rule edit modal — discrete score line + tall criteria + footer footnote */
.rules-edit-score-line {
    display: flex; align-items: center; gap: 8px;
    padding: 0 2px; margin-top: -2px; margin-bottom: -4px;
    font-size: 11px; color: var(--ink-tertiary);
    line-height: 1.3;
}
.rules-edit-score-line .rules-edit-score-label { flex-shrink: 0; }
.rules-edit-score-line .rules-clarity-score { font-size: 11px; padding: 1px 6px; }
.rules-edit-score-line .rules-edit-score-fb {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rules-edit-modal-body { min-height: 60vh; }
.rules-edit-modal-body .ws-modal-field--criteria {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.rules-edit-modal-body .ws-modal-field--criteria textarea {
    flex: 1 1 auto; min-height: 240px;
}
.rules-edit-footnote {
    margin-right: auto; align-self: center;
    font-size: 11px; color: var(--ink-tertiary); font-style: italic;
    line-height: 1.4; max-width: 55%;
}

/* MD hint at the foot of the criteria field */
.rules-edit-modal-body .rules-edit-md-hint {
    align-self: flex-end;
    font-size: 11px; color: var(--ink-tertiary);
    font-style: italic;
    margin-top: 2px;
}

/* Markdown preview rendered inside the rule edit modal — scoped so it
   never bleeds into the rules table or other ws-modal callers. */
.rules-edit-modal-body .rules-edit-criteria-preview {
    flex: 1 1 auto; min-height: 240px;
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 7px; padding: 12px 14px;
    background: var(--surface-card, #fff);
    color: var(--ink-primary);
    font-size: 13px; line-height: 1.55;
    overflow-y: auto;
}
.rules-edit-modal-body .rules-edit-criteria-preview h1,
.rules-edit-modal-body .rules-edit-criteria-preview h2,
.rules-edit-modal-body .rules-edit-criteria-preview h3,
.rules-edit-modal-body .rules-edit-criteria-preview h4,
.rules-edit-modal-body .rules-edit-criteria-preview h5,
.rules-edit-modal-body .rules-edit-criteria-preview h6 {
    margin: 14px 0 6px; font-weight: 700; line-height: 1.3;
    color: var(--ink-primary);
}
.rules-edit-modal-body .rules-edit-criteria-preview h1 { font-size: 18px; }
.rules-edit-modal-body .rules-edit-criteria-preview h2 { font-size: 16px; }
.rules-edit-modal-body .rules-edit-criteria-preview h3 { font-size: 14px; }
.rules-edit-modal-body .rules-edit-criteria-preview h4,
.rules-edit-modal-body .rules-edit-criteria-preview h5,
.rules-edit-modal-body .rules-edit-criteria-preview h6 { font-size: 13px; }
.rules-edit-modal-body .rules-edit-criteria-preview strong { font-weight: 700; }
.rules-edit-modal-body .rules-edit-criteria-preview em { font-style: italic; }
.rules-edit-modal-body .rules-edit-criteria-preview ul.refine-md-list,
.rules-edit-modal-body .rules-edit-criteria-preview ol {
    margin: 6px 0 6px 22px; padding: 0;
}
.rules-edit-modal-body .rules-edit-criteria-preview ul.refine-md-list { list-style: disc; }
.rules-edit-modal-body .rules-edit-criteria-preview li { margin: 2px 0; }
.rules-edit-modal-body .rules-edit-criteria-preview a {
    color: var(--ink-link, #2563eb); text-decoration: underline;
}
.rules-edit-modal-body .rules-edit-criteria-preview blockquote {
    margin: 8px 0; padding: 4px 12px;
    border-left: 3px solid var(--border-default, #d1d5db);
    color: var(--ink-secondary); font-style: italic;
}
.rules-edit-modal-body .rules-edit-criteria-preview hr {
    border: none; border-top: 1px solid var(--edge-subtle, rgba(0,0,0,0.08));
    margin: 12px 0;
}
.rules-edit-modal-body .rules-edit-criteria-preview .refine-md-inline-code {
    background: var(--surface-hover, rgba(0,0,0,0.05));
    padding: 1px 5px; border-radius: 3px;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
}
.rules-edit-modal-body .rules-edit-criteria-preview pre.refine-code-block {
    background: var(--surface-inset, rgba(0,0,0,0.04));
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.08));
    border-radius: 6px; padding: 10px 12px;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
    line-height: 1.45; overflow-x: auto; white-space: pre;
    margin: 8px 0;
}

/* Audit trail redesign */
.audit-trail { display: flex; flex-direction: column; gap: 24px; }
.audit-section { }
.audit-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-tertiary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
}

/* Timeline */
.audit-timeline {
    display: flex; flex-direction: column;
    position: relative; padding-left: 24px;
}
.audit-timeline::before {
    content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
    width: 2px; background: var(--edge-subtle);
}
.audit-tl-step {
    display: flex; align-items: flex-start; gap: 12px;
    position: relative; padding-bottom: 18px;
}
.audit-tl-step:last-child { padding-bottom: 0; }
.audit-tl-dot {
    position: absolute; left: -20px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--edge-default);
    border: 2px solid var(--paper-leaf);
    box-shadow: 0 0 0 2px var(--edge-default);
    flex-shrink: 0;
}
.audit-tl-step--active .audit-tl-dot {
    background: var(--brand-brass);
    box-shadow: 0 0 0 2px var(--brand-brass);
}
.audit-tl-content { flex: 1; min-width: 0; }
.audit-tl-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.audit-tl-now { font-size: 9px; padding: 1px 5px; }
.audit-tl-dates {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 11px; color: var(--ink-secondary);
}
.audit-tl-dates strong { font-weight: 600; color: var(--ink-primary); }
.audit-tl-dur {
    font-size: 11px; font-weight: 600;
    color: var(--brand-brass-ink);
    background: rgba(168,130,58,0.08);
    border-radius: var(--radius-sm); padding: 1px 6px;
}
.audit-tl-reason {
    margin-top: 4px; font-size: 11px;
    color: var(--ink-tertiary); font-style: italic;
}

/* Owners */
.audit-owners { display: flex; flex-direction: column; gap: 8px; }
.audit-owner-row {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px;
}
.audit-owner-dates {
    font-size: 11px; color: var(--ink-tertiary);
}

/* Events table */
.audit-ev-ts    { font-size: 11px; white-space: nowrap; color: var(--ink-tertiary); width: 130px; }
.audit-ev-actor { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-ev-type  { font-size: 11px; white-space: nowrap; }
.audit-ev-detail { font-size: 11px; }
.audit-reason   { font-style: italic; color: var(--ink-tertiary); margin-top: 2px; }
.audit-empty    { color: var(--ink-muted); font-size: 12px; font-style: italic; }

/* Custom instant tooltip (no browser 1s delay) */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 5px); left: 50%;
    transform: translateX(-50%);
    background: rgba(20,20,20,0.88); color: #fff;
    font-size: 11px; white-space: nowrap;
    padding: 4px 8px; border-radius: 5px;
    pointer-events: none; opacity: 0;
    transition: opacity 0.1s;
    z-index: 9999;
}
[data-tooltip]:hover::after { opacity: 1; }

/* SPEC-B124: tooltip com quebra de linha (padrao e nowrap) + legenda da coluna Humano */
.ws-tip[data-tooltip]::after {
    white-space: normal; width: max-content; max-width: 260px;
    text-align: left; line-height: 1.35;
    text-transform: none; font-weight: 400; letter-spacing: normal;
}
/* tooltip tambem por foco de teclado (badge tem tabindex=0) */
.ws-tip[data-tooltip]:focus-visible::after { opacity: 1; }
/* thead th global e sticky + overflow:hidden — o popover da legenda precisa escapar */
.workspace-table thead th.ws-col-human { overflow: visible; z-index: 20; }
/* td global tem overflow:hidden — cortaria o tooltip dos badges */
.workspace-table td.ws-col-human { overflow: visible; }
.ws-legend-trigger { margin-left: 4px; }
.ws-legend-trigger[aria-expanded="true"] { color: var(--brand-gold, #d97706); }
.ws-legend {
    position: absolute; top: 100%; left: 0; z-index: 9999;
    width: 320px; padding: 10px 12px; text-align: left; font-weight: 400;
    white-space: normal; text-transform: none; letter-spacing: normal; cursor: default;
    /* mesmas cores do modal de metrica do painel (.metric-info-panel) */
    background: #15243d; color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-lg, 0 6px 20px rgba(0,0,0,0.3));
}
.ws-legend[hidden] { display: none; }
.ws-legend__title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--brand-gold); }
.ws-legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-legend__row { display: grid; gap: 3px; font-size: 12px; line-height: 1.35; }
.ws-legend__row .badge { justify-self: start; }

/* ws-count-ok green */
.ws-count-ok { color: var(--status-pass-ink, #166534); }

/* Duration under state badge */
/* Fix: tooltip overflow clipping in workspace table */
.workspace-table,
.workspace-table tbody,
.workspace-table tr,
.ws-col-actions { overflow: visible; }

/* Last column: align tooltip right to avoid edge clip */
.ws-col-actions [data-tooltip]::after {
    left: auto;
    right: 0;
    transform: none;
}

.audit-muted { color: var(--ink-tertiary); font-size: 10px; }

/* Feedback outcome badges */
.vd-outcome { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; white-space: nowrap; }
.vd-outcome--pass { color: var(--status-pass-ink, #166534); background: var(--status-pass-bg, rgba(22,101,52,0.1)); }
.vd-outcome--fail { color: var(--status-fail-ink, #b91c1c); background: var(--status-fail-bg, rgba(185,28,28,0.1)); }
.vdetail-field-label { font-size: 12px; font-weight: 600; color: var(--ink-secondary); margin-bottom: 4px; }

/* Phase-row verdicts (new Validações view) */
.prv-root { display: flex; flex-direction: column; gap: 20px; }
.prv-summary {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 14px; background: var(--surface-hover); border-radius: 8px;
    font-size: 12px;
}
.prv-summary-item { display: flex; align-items: center; gap: 5px; }
.prv-summary-total { margin-left: auto; color: var(--ink-tertiary); font-size: 11px; }
.prv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.prv-dot--pass   { background: var(--status-pass, #22c55e); }
.prv-dot--fail   { background: var(--status-fail, #ef4444); }
.prv-dot--review { background: var(--status-review, #f59e0b); }
/* SPEC-B062: regras desligadas na barra de resumo das validacoes. */
.prv-dot--na { background: var(--status-error, #6B7280); }

/* Phase block */
.prv-phase { border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.prv-phase-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: var(--surface-hover);
    font-weight: 700; font-size: 13px;
}
.prv-phase-counts { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; }

/* Row */
.prv-row { border-top: 1px solid var(--border-subtle); }
.prv-row--pass .prv-row-header   { border-left: 3px solid var(--status-pass, #22c55e); }
.prv-row--fail .prv-row-header   { border-left: 3px solid var(--status-fail, #ef4444); }
.prv-row--review .prv-row-header { border-left: 3px solid var(--status-review, #f59e0b); }
.prv-row-header {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    cursor: pointer; font-size: 12px;
}
.prv-row-header:hover { background: var(--surface-hover); }
.prv-row-num { font-weight: 700; color: var(--ink-muted); min-width: 20px; }
.prv-row-artifact { flex: 1; color: var(--ink-secondary); font-size: 11px; }
.prv-row-owner { color: var(--ink-tertiary); font-size: 11px; }
.prv-row-toggle { color: var(--ink-muted); font-size: 10px; }
.prv-row-eye {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-default, #d1d5db);
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.prv-row-eye:hover {
    background: var(--surface-hover, rgba(0,0,0,0.06));
    color: var(--accent-primary, #b8860b);
    border-color: var(--accent-primary, #b8860b);
}
.prv-row-eye svg { width: 14px; height: 14px; }
.prv-row-eye + .prv-row-toggle { margin-left: 6px; }

/* Evidence card grid inside the lateral drawer */
.prv-evidence-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.prv-evidence-card {
    display: grid;
    grid-template-columns: 40px 1fr 18px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--edge-subtle);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--ink-primary);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    min-width: 0;
}
.prv-evidence-card:hover {
    border-color: var(--brand-primary, #1d4ed8);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.prv-evidence-card--static { cursor: default; }
.prv-evidence-card--static:hover { transform: none; box-shadow: none; border-color: var(--edge-subtle); }
.prv-evidence-card-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--surface-inset);
}
.prv-evidence-card-icon svg { width: 22px; height: 22px; }
.prv-evidence-card--image .prv-evidence-card-icon { background: rgba(168, 85, 247, 0.10); color: #7e22ce; }
.prv-evidence-card--pdf   .prv-evidence-card-icon { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.prv-evidence-card--sheet .prv-evidence-card-icon { background: rgba(22, 163, 74, 0.10); color: #15803d; }
.prv-evidence-card--doc   .prv-evidence-card-icon { background: rgba(29, 78, 216, 0.10); color: #1d4ed8; }
.prv-evidence-card--mail  .prv-evidence-card-icon { background: rgba(234, 88, 12, 0.10); color: #c2410c; }
.prv-evidence-card--generic .prv-evidence-card-icon { background: var(--surface-inset); color: var(--ink-tertiary); }
.prv-evidence-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prv-evidence-card-name {
    font-size: 12px; font-weight: 600; color: var(--ink-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prv-evidence-card-meta {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-tertiary);
}
.prv-evidence-card-locator {
    font-size: 11px; color: var(--ink-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prv-evidence-card-action { width: 18px; height: 18px; color: var(--ink-tertiary); display: flex; align-items: center; justify-content: center; }
.prv-evidence-card-action svg { width: 14px; height: 14px; }
.prv-evidence-card:hover .prv-evidence-card-action { color: var(--brand-primary, #1d4ed8); }
.prv-detail-evidence { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.prv-conf {
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 99px;
    white-space: nowrap;
}
.prv-conf--high { color: var(--status-pass-ink, #166534); background: var(--status-pass-bg); }
.prv-conf--mid  { color: var(--status-review-ink, #92400e); background: var(--status-review-bg); }
.prv-conf--low  { color: var(--status-fail-ink, #b91c1c); background: var(--status-fail-bg); }

/* Row body */
.prv-row-body { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.prv-field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-tertiary); margin-bottom: 4px; }
.prv-field-value { font-size: 12px; color: var(--ink-primary); line-height: 1.5; white-space: pre-wrap; }
.prv-criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prv-criteria-cell { background: var(--surface-hover); border-radius: 6px; padding: 10px 12px; }

/* Justification */
.prv-justification .prv-field-value { font-style: italic; }

/* SPEC-TOOLS-003 (causa 2): trecho verbatim do anexo (prova inline) */
.prv-excerpt { margin-top: 8px; }

/* SPEC-B082: o trecho vira o caminho mais curto ate a evidencia.
   Botao, nao div com onclick — teclado e leitor de tela precisam alcancar. */
.prv-excerpt-source {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    border-radius: 5px;
}
.prv-excerpt-source:hover .prv-excerpt-quote,
.prv-excerpt-source:focus-visible .prv-excerpt-quote {
    background: var(--surface-active, rgba(37, 99, 235, 0.08));
    border-left-color: var(--accent-strong, #1d4ed8);
}
.prv-excerpt-source:hover .prv-excerpt-label {
    color: var(--accent, #2563eb);
}
.prv-excerpt-source:focus-visible {
    outline: 2px solid var(--accent, #2563eb); outline-offset: 2px;
}
.prv-excerpt-label {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 3px;
}
.prv-excerpt-quote {
    margin: 0; padding: 8px 12px; font-size: 12px; line-height: 1.5;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--ink-primary); background: var(--surface-hover, rgba(0,0,0,0.04));
    border-left: 3px solid var(--accent, #2563eb); border-radius: 4px;
    white-space: pre-wrap; word-break: break-word;
}

/* SPEC-TOOLS-003 (causa 3): badge de rebaixamento automático separado da prosa */
.prv-audit-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.prv-audit-flag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-style: normal; font-weight: 600;
    color: #8a5a00; background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px; padding: 2px 8px; line-height: 1.4;
}

/* Evidence refs */
.prv-evidence-list { display: flex; flex-wrap: wrap; gap: 6px; }
.prv-evidence-ref { background: rgba(29,78,216,0.07); color: #1d4ed8; border-radius: 4px; padding: 2px 8px; font-size: 11px; }
.prv-evidence-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--edge-subtle);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--ink-primary);
    font-size: 11px; font-weight: 500;
    text-decoration: none;
    max-width: 240px;
    transition: border-color 0.15s, background 0.15s;
}
a.prv-evidence-chip:hover {
    border-color: var(--brand-primary, #1d4ed8);
    background: rgba(29, 78, 216, 0.04);
    text-decoration: none;
}
.prv-evidence-chip-icon {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.prv-evidence-chip-icon svg { width: 12px; height: 12px; }
.prv-evidence-chip--image .prv-evidence-chip-icon { background: rgba(168, 85, 247, 0.12); color: #7e22ce; }
.prv-evidence-chip--pdf   .prv-evidence-chip-icon { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.prv-evidence-chip--sheet .prv-evidence-chip-icon { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.prv-evidence-chip--doc   .prv-evidence-chip-icon { background: rgba(29, 78, 216, 0.12); color: #1d4ed8; }
.prv-evidence-chip--mail  .prv-evidence-chip-icon { background: rgba(234, 88, 12, 0.12); color: #c2410c; }
.prv-evidence-chip--generic .prv-evidence-chip-icon { background: var(--surface-inset); color: var(--ink-tertiary); }
.prv-evidence-chip-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
}
.prv-evidence-chip-ext {
    width: 12px; height: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-tertiary);
    margin-left: 2px;
    flex-shrink: 0;
}
.prv-evidence-chip-ext svg { width: 10px; height: 10px; }
a.prv-evidence-chip:hover .prv-evidence-chip-ext { color: var(--brand-primary, #1d4ed8); }

/* Applied rules chips */
.prv-rules-list { display: flex; flex-wrap: wrap; gap: 6px; }
.prv-rule-chip {
    background: rgba(0,0,0,0.05); border-radius: 4px; padding: 2px 8px;
    font-size: 10px; font-weight: 600; color: var(--ink-secondary);
    cursor: default;
}

/* NR structure */
.prv-nr { background: var(--status-review-bg, rgba(245,158,11,0.08)); border-radius: 8px; padding: 12px 14px; }
.prv-nr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.prv-nr-col ul { margin: 4px 0 0 16px; padding: 0; font-size: 11px; }
.prv-nr-col--pass .prv-nr-col-label { color: var(--status-pass-ink, #166534); }
.prv-nr-col--fail .prv-nr-col-label { color: var(--status-fail-ink, #b91c1c); }
.prv-nr-col-label { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.prv-nr-rec { margin-top: 8px; font-size: 12px; }
.prv-nr-human { margin-top: 6px; font-size: 11px; color: var(--ink-secondary); padding: 8px; background: rgba(0,0,0,0.04); border-radius: 5px; }

/* Feedback per row */
.prv-feedback { padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.prv-feedback-hint { font-size: 11px; color: var(--ink-tertiary); margin-bottom: 8px; }
.prv-feedback-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.prv-fb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 6px 14px;
    border-radius: 6px; cursor: pointer; border: 1.5px solid transparent;
    transition: all 0.15s;
}
.prv-fb-btn--agree   { border-color: var(--status-pass, #22c55e); color: var(--status-pass-ink, #166534); background: var(--status-pass-bg); }
.prv-fb-btn--agree:hover { background: var(--status-pass, #22c55e); color: #fff; }
.prv-fb-btn--disagree { border-color: var(--status-fail, #ef4444); color: var(--status-fail-ink, #b91c1c); background: var(--status-fail-bg); }
.prv-fb-btn--disagree:hover { background: var(--status-fail, #ef4444); color: #fff; }
.prv-fb-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.prv-fb-form-title { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.prv-fb-required { color: var(--status-fail-ink, #b91c1c); }
.prv-fb-optional { color: var(--ink-tertiary); font-weight: 500; }
.prv-fb-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.prv-fb-textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--edge-default); border-radius: 6px;
    padding: 8px 10px; font-family: var(--font-sans); font-size: 12px;
    resize: vertical; min-height: 60px;
}
.prv-fb-textarea:focus { outline: none; border-color: var(--ink-link); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.prv-fb-textarea--error { border-color: var(--status-fail, #ef4444); background: rgba(239,68,68,0.04); }
.prv-fb-error {
    font-size: 12px;
    color: var(--status-fail-ink, #b91c1c);
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 4px;
}
.prv-fb-action {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 6px 14px;
    border-radius: 6px; cursor: pointer; border: 1.5px solid transparent;
    transition: all 0.15s;
}
.prv-fb-action--cancel  { border-color: var(--edge-default); color: var(--ink-secondary); background: transparent; }
.prv-fb-action--cancel:hover { background: var(--surface-hover); }
.prv-fb-action--confirm { border-color: var(--ink-link); color: #fff; background: var(--ink-link); }
.prv-fb-action--confirm:hover { filter: brightness(1.05); }
.prv-fb-action--confirm:disabled { opacity: 0.5; cursor: wait; }
.prv-fb-btn-icon { display: inline-flex; align-items: center; }
.prv-fb-btn-icon svg { width: 14px; height: 14px; }

/* Decided state — replaces buttons after a verdict is registered */
.prv-fb-decided {
    background: var(--surface-inset);
    border: 1px solid var(--edge-subtle);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.prv-fb-decided-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.prv-fb-decided-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prv-fb-stance {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 3px 8px; border-radius: 4px;
}
.prv-fb-stance svg { width: 12px; height: 12px; }
.prv-fb-stance--agree    { background: var(--status-pass-bg); color: var(--status-pass-ink, #166534); }
.prv-fb-stance--disagree { background: var(--status-fail-bg); color: var(--status-fail-ink, #b91c1c); }
.prv-fb-arrow { color: var(--ink-tertiary); font-size: 14px; }
.prv-fb-decided-label { font-size: 11px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.prv-verdict-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.prv-verdict-badge--pass   { background: var(--status-pass-bg); color: var(--status-pass-ink, #166534); }
.prv-verdict-badge--fail   { background: var(--status-fail-bg); color: var(--status-fail-ink, #b91c1c); }
.prv-verdict-badge--review { background: var(--status-review-bg); color: var(--status-review-ink, #92400e); }
.prv-fb-decided-meta {
    display: inline-flex; gap: 10px; align-items: center;
    font-size: 11px; color: var(--ink-tertiary); margin-left: auto;
}
.prv-fb-edit-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 4px;
    border: 1px solid var(--edge-default); background: transparent;
    color: var(--ink-secondary); cursor: pointer;
    transition: all 0.15s;
}
.prv-fb-edit-btn:hover { border-color: var(--ink-link); color: var(--ink-link); background: var(--surface-hover); }
.prv-fb-edit-btn svg { width: 12px; height: 12px; }

/* Lock state — when job is finalised, hide every mutation control so
   the detail view is read-only. Reopen via the top banner is the only
   path back to editing. */
.report-locked .prv-feedback-buttons,
.report-locked .prv-fb-form,
.report-locked .prv-fb-edit-btn,
.report-locked .prv-fb-revert-btn,
.report-locked .prv-fb-decided-actions,
.report-locked .vdetail-feedback-buttons,
.report-locked .review-finalize-btn,
.report-locked .review-cancel-decision-btn { display: none !important; }

.report-lock-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin: 0 0 12px 0;
    border-radius: 6px;
    font-size: 13px;
}
.report-lock-banner__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
}
.report-lock-banner__icon svg { width: 16px; height: 16px; }
.report-lock-banner__icon--success { background: var(--status-pass, #16a34a); }
.report-lock-banner__icon--warn    { background: var(--status-review, #b8860b); }
.report-lock-banner .btn { margin-left: auto; }
.prv-fb-decided-actions { display: inline-flex; gap: 6px; align-items: center; }
.prv-fb-revert-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 4px;
    border: 1px solid var(--edge-default); background: transparent;
    color: var(--status-fail-ink, #b91c1c); cursor: pointer;
    transition: all 0.15s;
}
.prv-fb-revert-btn:hover {
    border-color: var(--status-fail, #ef4444);
    background: var(--status-fail-bg, rgba(239,68,68,0.06));
}
.prv-fb-reason-wrap { display: flex; flex-direction: column; gap: 4px; }
.prv-fb-reason-label { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.prv-fb-reason {
    font-size: 12px; padding: 6px 8px;
    border: 1px solid var(--edge-default); border-radius: 4px;
    background: var(--surface-card); color: var(--ink-primary);
    cursor: pointer;
}
.prv-fb-reason:focus { outline: none; border-color: var(--ink-link); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.prv-fb-reason--error { border-color: var(--status-fail, #ef4444); background: rgba(239,68,68,0.04); }
.prv-fb-reason-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; padding: 3px 8px; border-radius: 99px;
    background: var(--surface-inset); border: 1px solid var(--edge-subtle);
    color: var(--ink-secondary); margin-top: 4px;
    align-self: flex-start;
}
.prv-fb-reason-tag-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 9px; color: var(--ink-tertiary); }
.prv-fb-reason-tag-value { font-weight: 500; color: var(--ink-primary); }
.prv-fb-justification {
    background: var(--surface-card); border: 1px solid var(--edge-subtle);
    border-radius: 4px; padding: 8px 10px;
}
.prv-fb-just-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-tertiary); margin-bottom: 4px; }
.prv-fb-just-text { font-size: 12px; color: var(--ink-primary); white-space: pre-wrap; line-height: 1.45; }

/* Rules CRUD buttons */
.rules-row--inactive { opacity: 0.55; }
.rules-row--inactive .rules-cell { color: var(--ink-muted); }
.rules-btn-toggle { font-size: 11px; padding: 3px 10px; white-space: nowrap; }
.rules-btn-activate   { border: 1px solid var(--status-pass, #22c55e); color: var(--status-pass-ink, #166534); background: var(--status-pass-bg); }
.rules-btn-activate:hover { background: var(--status-pass, #22c55e); color: #fff; }
.rules-btn-deactivate { border: 1px solid var(--status-fail, #ef4444); color: var(--status-fail-ink, #b91c1c); background: var(--status-fail-bg); }
.rules-btn-deactivate:hover { background: var(--status-fail, #ef4444); color: #fff; }
.rules-btn-edit { font-size: 13px; padding: 2px 8px; }

/* Rules: seed badge (replaces lock) + actions column width */
.rules-builtin-badge {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px;
    background: rgba(184,134,11,0.12); color: var(--accent-primary, #b8860b);
    border: 1px solid var(--accent-primary, #b8860b);
    margin-right: 4px; vertical-align: middle;
}
.rules-cell.rules-actions { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }

/* Rules version column */
.rules-cell.rules-version { font-size: 12px; }
.rules-version-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
    background: var(--surface-hover, rgba(0,0,0,0.04));
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}

/* Rules clarity score column */
.rules-cell.rules-clarity { font-size: 12px; }
.rules-clarity-score {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
}
.rules-clarity--high { color: var(--status-pass-ink, #166534); background: var(--status-pass-bg); }
.rules-clarity--mid  { color: var(--status-review-ink, #92400e); background: var(--status-review-bg); }
.rules-clarity--low  { color: var(--status-fail-ink, #b91c1c); background: var(--status-fail-bg); }
.rules-clarity-none  { color: var(--ink-muted); font-size: 13px; }

/* SPEC-910 — per-rule verdict statistics: 4 right-aligned columns
   (%PASS / %FAIL / %NEEDS_REVIEW / N). Global across all BSOs. */
.rules-vcol {
    text-align: right; font-size: 11px; font-weight: 700;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rules-vcol--none { color: var(--ink-muted); font-weight: 400; }
.rules-vstat--pass { color: var(--status-pass-ink, #166534); }
.rules-vstat--fail { color: var(--status-fail-ink, #b91c1c); }
.rules-vstat--nr   { color: var(--status-review-ink, #92400e); }
.rules-vcol-n      { color: var(--ink-tertiary); font-weight: 400; }
/* header cells inherit the uppercase label styling from .rules-table-header */
.rules-vbreakdown {
    margin-top: 6px; border-collapse: collapse; font-size: 12px;
    min-width: 280px;
}
.rules-vbreakdown td {
    padding: 3px 12px 3px 0; border-bottom: 1px solid var(--edge-subtle);
}

/* AI validation result block inside modal */
.rules-ai-result { margin-top: 10px; }
.rules-ai-score { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rules-ai-status { font-size: 12px; font-weight: 600; }
.rules-ai-feedback { font-size: 12px; color: var(--ink-secondary); margin: 4px 0 0; }
.rules-ai-suggestions { font-size: 11px; color: var(--ink-secondary); padding-left: 16px; margin: 4px 0; }
.rules-ai-suggestion-block { margin-top: 10px; }
.rules-ai-suggestion-text {
    font-size: 11px; white-space: pre-wrap; background: var(--surface-hover);
    border-radius: 6px; padding: 8px 10px; margin: 6px 0; max-height: 120px; overflow-y: auto;
    font-family: var(--font-mono, monospace);
}
.rules-ai-error { font-size: 12px; color: var(--status-fail-ink); }

/* Rules toggle icon buttons */
.rules-btn-deactivate { color: var(--status-fail-ink, #b91c1c) !important; }
.rules-btn-deactivate:hover { background: var(--status-fail-bg) !important; border-color: var(--status-fail-ink, #b91c1c) !important; }
.rules-btn-activate { color: var(--status-pass-ink, #166534) !important; }
.rules-btn-activate:hover { background: var(--status-pass-bg) !important; border-color: var(--status-pass-ink, #166534) !important; }

/* Rules action buttons: tooltips appear below (avoid grid clipping) */
.rules-cell.rules-actions { overflow: visible; position: relative; z-index: 10; }
.rules-row { overflow: visible; }
.rules-group-body { overflow: visible; }
.rules-cell.rules-actions [data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 5px);
    z-index: 9999;
}
/* Tooltip arrow for bottom position */
.rules-cell.rules-actions [data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: rgba(20,20,20,0.88);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}
.rules-cell.rules-actions [data-tooltip]:hover::before { opacity: 1; }

/* ================================================================
   Criteria Refinement Chat (SPEC-R04-016)
   ================================================================ */
.refine-chat-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.refine-chat-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-tertiary); margin-bottom: 4px; }
.refine-chat-messages { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-inset); border-radius: 8px; border: 1px solid var(--edge-subtle); }
.refine-msg { max-width: 94%; padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.55; }
.refine-msg--user { align-self: flex-end; background: var(--accent-primary, #b8860b); color: #fff; border-radius: 10px 10px 2px 10px; }
.refine-msg--ai { align-self: flex-start; background: var(--surface-card); border: 1px solid var(--edge-subtle); color: var(--ink-primary); border-radius: 10px 10px 10px 2px; }
.refine-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-tertiary); margin: 6px 0 2px; }
.refine-criteria-box { background: var(--surface-hover); border-radius: 4px; padding: 6px 8px; font-family: var(--font-mono, monospace); font-size: 11px; margin: 2px 0 6px; white-space: pre-wrap; border: 1px solid var(--edge-subtle); word-break: break-word; }
.refine-score-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin: 4px 0 2px; }
.refine-critique { font-style: italic; color: var(--ink-secondary); font-size: 11px; margin: 4px 0; line-height: 1.5; }
.refine-questions { list-style: none; padding: 0; margin: 6px 0 2px; display: flex; flex-direction: column; gap: 3px; }
.refine-questions li { font-size: 11px; color: var(--ink-link, #2563eb); cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.refine-questions li:hover { background: var(--surface-hover); text-decoration: underline; }
.refine-chat-input-row { display: flex; gap: 6px; align-items: flex-end; }
.refine-chat-input { flex: 1; font-family: inherit; font-size: 12px; border: 1px solid var(--border-default, #d1d5db); border-radius: 7px; padding: 7px 10px; resize: none; background: var(--surface-raised, #fff); color: var(--ink-primary); transition: border-color 0.15s; }
.refine-chat-input:focus { outline: none; border-color: var(--accent-primary, #b8860b); box-shadow: 0 0 0 3px rgba(184,134,11,0.1); }
.refine-chat-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.refine-chat-counter { font-size: 11px; color: var(--ink-tertiary); margin-left: auto; }

/* Refinement Chat Modal (SPEC-R04-016 rev2) */
.refine-chat-modal {
    background: var(--surface-raised, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    width: min(760px, 95vw);
    max-height: 88vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.refine-chat-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    flex-shrink: 0;
}
.refine-chat-modal-title {
    font-size: 15px; font-weight: 700; color: var(--ink-primary);
}
.refine-chat-modal-body {
    flex: 1; overflow: hidden; display: flex; flex-direction: column;
}
.refine-chat-messages {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 20px;
    min-height: 200px; max-height: 52vh;
}
.refine-chat-modal-footer {
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    padding: 12px 20px 16px;
    display: flex; flex-direction: column; gap: 10px;
    flex-shrink: 0;
}
.refine-chat-footer-actions {
    display: flex; align-items: center; gap: 10px;
}
.refine-chat-counter { font-size: 11px; color: var(--ink-tertiary); margin-left: auto; }

/* "Use this version" button row (above input) */
.refine-chat-apply-row {
    display: flex; justify-content: flex-end; gap: 8px;
}
.refine-chat-apply-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--status-pass, #22c55e); border-color: var(--status-pass, #22c55e);
}
.refine-chat-apply-btn:hover { filter: brightness(0.95); }

/* Thinking animation while NT Drafter is reasoning */
.refine-thinking-row {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--ink-secondary);
    padding: 2px 0;
}
.refine-thinking-label {
    font-style: italic;
    color: var(--ink-secondary);
}
.refine-thinking-dots {
    display: inline-flex; gap: 4px;
}
.refine-thinking-dots span {
    width: 7px; height: 7px;
    background: var(--accent-primary, #b8860b);
    border-radius: 50%;
    display: inline-block;
    animation: refine-thinking-bounce 1.2s ease-in-out infinite both;
}
.refine-thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.refine-thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
.refine-thinking-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes refine-thinking-bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40%           { transform: scale(1.0); opacity: 1; }
}

/* Avatars: chat-style row (avatar + bubble) */
.refine-msg-wrap {
    display: flex; align-items: flex-start; gap: 8px;
    max-width: 100%;
}
.refine-msg-wrap--user { flex-direction: row-reverse; }
.refine-msg-avatar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
}
.refine-msg-avatar--ai {
    background: linear-gradient(135deg, #b8860b, #d4a843);
}
.refine-msg-avatar--user {
    background: var(--ink-secondary, #6b7280);
}
.refine-msg { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.refine-msg--user {
    align-self: flex-end;
    background: var(--accent-primary, #b8860b); color: #fff;
    border-radius: 12px 12px 2px 12px;
}
.refine-msg--ai {
    align-self: flex-start;
    background: var(--surface-hover, rgba(0,0,0,0.04));
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    color: var(--ink-primary);
    border-radius: 12px 12px 12px 2px;
    max-width: 95%;
}
.refine-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-tertiary);
    margin: 8px 0 3px;
}
.refine-criteria-box {
    background: var(--surface-inset, rgba(0,0,0,0.06));
    border: 1px solid var(--edge-subtle);
    border-radius: 6px; padding: 8px 10px;
    font-family: var(--font-mono, monospace); font-size: 12px;
    white-space: pre-wrap; word-break: break-word;
    margin: 2px 0 8px; line-height: 1.5;
}
.refine-code-block {
    background: var(--surface-inset); border-radius: 5px;
    padding: 6px 8px; font-size: 11px;
    font-family: var(--font-mono, monospace);
    white-space: pre-wrap; word-break: break-word;
    margin: 4px 0;
}
.refine-score-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.refine-critique { font-size: 12px; color: var(--ink-secondary); line-height: 1.6; margin: 4px 0 8px; }
.refine-md-list { padding-left: 18px; margin: 4px 0; }
.refine-md-list li { font-size: 12px; line-height: 1.6; }
.refine-questions { list-style: none; padding: 0; margin: 4px 0 2px; display: flex; flex-direction: column; gap: 4px; }
.refine-questions li {
    font-size: 12px; color: var(--ink-link, #2563eb);
    cursor: pointer; padding: 3px 6px; border-radius: 5px;
    transition: background 0.1s;
}
.refine-questions li:hover { background: var(--surface-hover); text-decoration: underline; }
.refine-thinking { font-size: 18px; letter-spacing: 4px; color: var(--ink-tertiary); }
.refine-chat-input {
    flex: 1; font-family: inherit; font-size: 13px;
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 8px; padding: 9px 12px; resize: none;
    background: var(--surface-raised, #fff); color: var(--ink-primary);
    transition: border-color 0.15s;
}
.refine-chat-input:focus { outline: none; border-color: var(--accent-primary, #b8860b); box-shadow: 0 0 0 3px rgba(184,134,11,0.1); }

/* ------------------------------------------------------------------
   Rules detail — collapsible criteria with rendered markdown
   (SPEC-GS-002 follow-up: critério em <details> + render MD bonito)
   ------------------------------------------------------------------ */
.rules-criteria-details {
    margin-top: 4px;
    border: 1px solid var(--edge-subtle, #e5e5e5);
    border-radius: 6px;
    background: var(--surface-elevated, #fafaf8);
    overflow: hidden;
}
.rules-criteria-details > summary {
    cursor: pointer;
    padding: 10px 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: background-color 0.12s;
}
.rules-criteria-details > summary::-webkit-details-marker { display: none; }
.rules-criteria-details > summary::before {
    content: '\25B6';
    font-size: 10px;
    color: var(--ink-tertiary, #888);
    transition: transform 0.15s;
}
.rules-criteria-details[open] > summary::before { transform: rotate(90deg); }
.rules-criteria-details > summary:hover { background: var(--surface-hover, rgba(0,0,0,0.03)); }
.rules-criteria-summary strong {
    color: var(--ink-primary);
    font-weight: 600;
}
.rules-criteria-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-tertiary, #888);
    font-style: italic;
}
.rules-criteria-details[open] .rules-criteria-hint { display: none; }
.rules-criteria-body {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--edge-subtle, #e5e5e5);
    background: var(--surface-base, #fff);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-secondary, #444);
    max-height: 540px;
    overflow-y: auto;
}
.rules-criteria-body h3 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; color: var(--ink-primary); }
.rules-criteria-body h4 { font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--ink-primary); }
.rules-criteria-body h5,
.rules-criteria-body h6 { font-size: 12px; font-weight: 600; margin: 10px 0 4px; color: var(--ink-primary); }
.rules-criteria-body p { margin: 6px 0; }
.rules-criteria-body ul { margin: 6px 0 6px 20px; padding: 0; }
.rules-criteria-body li { margin: 3px 0; }
.rules-criteria-body code {
    background: var(--surface-inset, #f0efe9);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}
.rules-criteria-code {
    background: var(--surface-inset, #f0efe9);
    padding: 10px 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    margin: 8px 0;
}
.rules-criteria-code code { background: transparent; padding: 0; }

/* =========================================================================
   V5 — Collapsible validation cards (replaces validations-table + nr-* +
   vdetail-feedback-* visual treatment). Trust & Authority style.
   Banner (badge + eyebrow + reason + IA pill + Você pill + chevron) is
   always visible; body (pros/cons, action bar, embedded feedback) renders
   only when .v5-shell has .expanded.
   ========================================================================= */
.v5-list { display: flex; flex-direction: column; gap: 12px; }

.v5-filter-hint {
    background: linear-gradient(180deg, #fff 0%, var(--surface-subtle, #F8F9FA) 100%);
    border: 1px solid var(--edge-default, rgba(0,0,0,0.08));
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-primary, #1A1D23);
}
.v5-filter-hint .v5-fh-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--status-review-bg, #FFFBEB);
    color: var(--status-review, #D97706);
    display: flex; align-items: center; justify-content: center;
}
.v5-filter-hint strong { color: var(--brand-navy, #0C1B2E); }
.v5-filter-hint .v5-fh-count {
    margin-left: auto; padding: 3px 10px; border-radius: 99px;
    background: var(--brand-navy, #0C1B2E); color: #fff;
    font-size: 11px; font-weight: 700;
}

.v5-shell {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.05));
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    overflow: hidden;
    transition: box-shadow 200ms;
}
.v5-shell:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
}
.v5-shell.expanded {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

/* Banner — always visible, clickable */
.v5-banner {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    background: #fff;
}
.v5-shell.expanded .v5-banner { border-bottom: 1px solid var(--edge-subtle, rgba(0,0,0,0.05)); }
.v5-banner:hover { background: var(--surface-subtle, #F8F9FA); }

.v5-badge {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-gold-light, #E8CC7A) 0%, var(--brand-gold, #D4A843) 100%);
    box-shadow: 0 2px 6px rgba(212, 168, 67, 0.3);
}
.v5-badge svg { width: 16px; height: 16px; }
.v5-badge.v5-badge--pass {
    background: linear-gradient(135deg, var(--status-pass-edge, #A7F3D0) 0%, var(--status-pass, #10B981) 100%);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.v5-badge.v5-badge--fail {
    background: linear-gradient(135deg, var(--status-fail-edge, #FECACA) 0%, var(--status-fail, #DC2626) 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.v5-badge.v5-badge--na {
    background: linear-gradient(135deg, #D1D5DB 0%, #6B7280 100%);
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.25);
}

.v5-meta-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v5-eyebrow {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
}
.v5-eyebrow .v5-rule-id { color: var(--brand-navy, #0C1B2E); font-weight: 700; }
.v5-eyebrow .v5-sep { color: var(--ink-muted, #B0B5BF); }
/* SPEC-B062: "Regra desligada" no eyebrow do card. Cursor de ajuda porque o
   motivo (ator, data, justificativa) vive no tooltip. */
.v5-paused-label {
    color: var(--status-error-ink, #374151);
    font-weight: 600;
    cursor: help;
}
.v5-reason {
    font-size: 14px; font-weight: 600; color: var(--ink-primary, #1A1D23);
    line-height: 1.35; letter-spacing: -0.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v5-shell.expanded .v5-reason { white-space: normal; overflow: visible; }

/* Pills (IA + Human decision) */
.v5-pill {
    display: inline-flex; align-items: center; flex-shrink: 0;
    border-radius: 999px; background: #fff;
    border: 1px solid var(--edge-default, rgba(0,0,0,0.08));
    overflow: hidden;
}
.v5-pill .v5-pill-label {
    padding: 5px 4px 5px 12px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
}
.v5-pill .v5-pill-value {
    padding: 5px 12px 5px 4px;
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    border-left: 1px solid var(--edge-default, rgba(0,0,0,0.08));
}
.v5-pill .v5-pill-value svg { width: 13px; height: 13px; stroke-width: 2.75; }

.v5-pill.v5-pill--pass { border-color: var(--status-pass-edge, #A7F3D0); }
.v5-pill.v5-pill--pass .v5-pill-value {
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass-ink, #065F46);
    border-left-color: var(--status-pass-edge, #A7F3D0);
}
.v5-pill.v5-pill--fail { border-color: var(--status-fail-edge, #FECACA); }
.v5-pill.v5-pill--fail .v5-pill-value {
    background: var(--status-fail-bg, #FEF2F2);
    color: var(--status-fail-ink, #991B1B);
    border-left-color: var(--status-fail-edge, #FECACA);
}
.v5-pill.v5-pill--review { border-color: var(--status-review-edge, #FDE68A); }
.v5-pill.v5-pill--review .v5-pill-value {
    background: var(--status-review-bg, #FFFBEB);
    color: var(--status-review-ink, #92400E);
    border-left-color: var(--status-review-edge, #FDE68A);
}
.v5-pill.v5-pill--pending { border-color: #D1D5DB; }
.v5-pill.v5-pill--pending .v5-pill-value {
    background: #F3F4F6; color: #374151;
    border-left-color: #D1D5DB;
    position: relative;
}
.v5-pill.v5-pill--pending .v5-pulse {
    width: 6px; height: 6px; border-radius: 99px;
    background: var(--status-review, #D97706);
    animation: v5pulse 1.6s ease-in-out infinite;
}
@keyframes v5pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}
.v5-pill.v5-pill--na { border-color: #D1D5DB; }
.v5-pill.v5-pill--na .v5-pill-value {
    background: #F3F4F6; color: #6B7280;
    border-left-color: #D1D5DB;
}

.v5-chevron {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--surface-inset, #F4F5F7);
    color: var(--ink-secondary, #5A6170);
    display: flex; align-items: center; justify-content: center;
    transition: transform 200ms, background 150ms, color 150ms;
}
.v5-shell.expanded .v5-chevron {
    transform: rotate(180deg);
    background: var(--brand-navy, #0C1B2E);
    color: #fff;
}
.v5-chevron svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* Body — only when expanded */
.v5-body-wrap { display: none; }
.v5-shell.expanded .v5-body-wrap { display: block; }

.v5-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--surface-subtle, #F8F9FA);
}
.v5-body--single { grid-template-columns: 1fr; }
.v5-pane {
    padding: 20px 24px;
    background: var(--surface-subtle, #F8F9FA);
}
.v5-pane + .v5-pane { border-left: 1px solid var(--edge-subtle, rgba(0,0,0,0.05)); }

.v5-pane-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.v5-pane-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-primary, #1A1D23);
}
.v5-pane-icon {
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.v5-pane-icon.v5-pane-icon--pass {
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass, #10B981);
}
.v5-pane-icon.v5-pane-icon--fail {
    background: var(--status-fail-bg, #FEF2F2);
    color: var(--status-fail, #DC2626);
}
.v5-pane-icon.v5-pane-icon--neutral {
    background: var(--surface-inset, #F4F5F7);
    color: var(--ink-secondary, #5A6170);
}
.v5-pane-icon svg { width: 12px; height: 12px; stroke-width: 2.75; }

.v5-pane-count {
    font-size: 11px; font-weight: 500;
    color: var(--ink-tertiary, #8C919E);
    font-variant-numeric: tabular-nums;
}

.v5-arg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v5-arg-list li {
    background: #fff; border-radius: 10px;
    padding: 12px 14px 12px 18px;
    font-size: 13px; line-height: 1.55;
    color: var(--ink-primary, #1A1D23);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    position: relative;
}
.v5-arg-list li::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; border-radius: 0 2px 2px 0;
}
.v5-arg-list.v5-arg-list--pass li::before { background: var(--status-pass, #10B981); }
.v5-arg-list.v5-arg-list--fail li::before { background: var(--status-fail, #DC2626); }
.v5-arg-list.v5-arg-list--neutral li::before { background: var(--ink-muted, #B0B5BF); }
.v5-arg-list.v5-arg-list--empty {
    margin: 0; padding: 12px 14px;
    font-size: 12px; color: var(--ink-tertiary, #8C919E); font-style: italic;
    background: #fff; border-radius: 10px;
    border: 1px dashed var(--edge-default, rgba(0,0,0,0.08));
}

.v5-action-bar {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: center;
    padding: 14px 24px; background: #fff;
    border-top: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
}
.v5-action-icon {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: var(--surface-inset, #F4F5F7);
    color: var(--ink-secondary, #5A6170);
    display: flex; align-items: center; justify-content: center;
}
.v5-action-icon svg { width: 16px; height: 16px; }
.v5-action-content { min-width: 0; }
.v5-action-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
    margin-bottom: 2px;
}
.v5-action-text {
    font-size: 13px; line-height: 1.5;
    color: var(--ink-primary, #1A1D23);
}
.v5-action-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    background: var(--brand-navy, #0C1B2E); color: #fff;
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 0;
    transition: background 200ms;
    white-space: nowrap;
}
.v5-action-cta:hover:not(:disabled) { background: var(--brand-navy-mid, #1A2E4A); }
.v5-action-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.v5-action-cta svg { width: 13px; height: 13px; stroke-width: 2.5; }

/* Feedback embutido no card */
.v5-feedback {
    padding: 18px 24px 20px;
    background: #fff;
    border-top: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
}
.v5-fb-head { margin-bottom: 12px; }
.v5-fb-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
    margin-bottom: 4px;
}
.v5-fb-question {
    font-size: 14px; font-weight: 600;
    color: var(--ink-primary, #1A1D23);
}
/* SPEC-B100: sem veredito da IA, o bloco de decisao vira uma linha. Discreta
   de proposito — o porque ja esta na justificativa logo acima. */
.v5-feedback--sem-decisao {
    padding: 10px 12px;
}
.v5-fb-sem-decisao {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-secondary);
    font-style: italic;
}
.v5-fb-buttons {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.v5-fb-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--edge-default, rgba(0,0,0,0.08));
    border-radius: 12px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--ink-primary, #1A1D23);
    cursor: pointer;
    transition: all 200ms;
    text-align: left;
}
.v5-fb-btn:hover:not(:disabled) {
    border-color: var(--edge-emphasis, rgba(0,0,0,0.14));
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.v5-fb-btn:disabled, .v5-fb-btn[disabled] {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.v5-fb-btn.v5-fb-btn--selected.v5-fb-btn--agree {
    border-color: var(--status-pass-edge, #A7F3D0);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.v5-fb-btn.v5-fb-btn--selected.v5-fb-btn--disagree {
    border-color: var(--status-fail-edge, #FECACA);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}
.v5-fb-btn-icon {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.v5-fb-btn--agree .v5-fb-btn-icon {
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass, #10B981);
}
.v5-fb-btn--disagree .v5-fb-btn-icon {
    background: var(--status-fail-bg, #FEF2F2);
    color: var(--status-fail, #DC2626);
}
.v5-fb-btn-icon svg { width: 16px; height: 16px; stroke-width: 2.25; }
.v5-fb-btn-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.v5-fb-btn-action {
    font-size: 13px; font-weight: 600;
    color: var(--ink-primary, #1A1D23);
}
.v5-fb-btn-result {
    font-size: 11px; color: var(--ink-secondary, #5A6170);
}
.v5-fb-btn-result strong { font-weight: 600; }
.v5-fb-btn-result--pass strong { color: var(--status-pass-ink, #065F46); }
.v5-fb-btn-result--fail strong { color: var(--status-fail-ink, #991B1B); }

/* Form expanded inside feedback */
.v5-fb-form {
    margin-top: 14px;
    padding: 16px;
    background: var(--surface-subtle, #F8F9FA);
    border-radius: 12px;
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
}
.v5-fb-form-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
}
.v5-fb-form-head-icon {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.v5-fb-form-head-icon.v5-fb-form-head-icon--pass {
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass, #10B981);
}
.v5-fb-form-head-icon.v5-fb-form-head-icon--fail {
    background: var(--status-fail-bg, #FEF2F2);
    color: var(--status-fail, #DC2626);
}
.v5-fb-form-head-icon svg { width: 13px; height: 13px; stroke-width: 2.75; }
.v5-fb-form-head-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.v5-fb-form-head-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
}
.v5-fb-form-head-result {
    font-size: 12px; font-weight: 600;
    color: var(--ink-primary, #1A1D23);
    display: inline-flex; align-items: center; gap: 6px;
}
.v5-fb-form-head-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 600;
}
.v5-fb-form-head-chip--pass {
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass-ink, #065F46);
}
.v5-fb-form-head-chip--fail {
    background: var(--status-fail-bg, #FEF2F2);
    color: var(--status-fail-ink, #991B1B);
}
.v5-fb-form-head-chip svg { width: 12px; height: 12px; stroke-width: 2.75; }

.v5-fb-field-label {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
}
.v5-fb-required { color: var(--status-fail-ink, #991B1B); }
.v5-fb-optional {
    color: var(--ink-tertiary, #8C919E);
    text-transform: none; letter-spacing: 0; font-weight: 500;
}
.v5-fb-textarea {
    width: 100%; min-height: 80px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--edge-default, rgba(0,0,0,0.08));
    border-radius: 10px;
    font-family: inherit; font-size: 13px; line-height: 1.55;
    color: var(--ink-primary, #1A1D23);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 150ms, box-shadow 150ms;
}
.v5-fb-textarea:focus {
    outline: none;
    border-color: var(--brand-navy, #0C1B2E);
    box-shadow: 0 0 0 3px rgba(12, 27, 46, 0.08);
}
.v5-fb-textarea::placeholder { color: var(--ink-tertiary, #8C919E); }
.v5-fb-textarea.v5-fb-textarea--error {
    border-color: var(--status-fail, #DC2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.v5-fb-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 12px;
}
.v5-fb-action-btn {
    padding: 9px 16px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 150ms;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.v5-fb-action-btn.v5-fb-action-btn--cancel {
    background: #fff;
    border-color: var(--edge-default, rgba(0,0,0,0.08));
    color: var(--ink-secondary, #5A6170);
}
.v5-fb-action-btn.v5-fb-action-btn--cancel:hover {
    background: var(--surface-inset, #F4F5F7);
    border-color: var(--edge-emphasis, rgba(0,0,0,0.14));
}
.v5-fb-action-btn.v5-fb-action-btn--confirm {
    background: var(--brand-navy, #0C1B2E);
    color: #fff;
}
.v5-fb-action-btn.v5-fb-action-btn--confirm:hover { background: var(--brand-navy-mid, #1A2E4A); }
.v5-fb-action-btn.v5-fb-action-btn--confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.v5-fb-action-btn svg { width: 13px; height: 13px; stroke-width: 2.5; }
.v5-fb-hint {
    font-size: 11px; line-height: 1.5;
    color: var(--ink-tertiary, #8C919E);
    margin-top: 8px;
}

/* Persisted feedback note (after submit) */
.v5-feedback-persisted {
    padding: 14px 24px;
    background: var(--surface-subtle, #F8F9FA);
    border-top: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    display: flex; gap: 12px; align-items: flex-start;
}
.v5-feedback-persisted-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.v5-feedback-persisted-icon.v5-feedback-persisted-icon--pass {
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass, #10B981);
}
.v5-feedback-persisted-icon.v5-feedback-persisted-icon--fail {
    background: var(--status-fail-bg, #FEF2F2);
    color: var(--status-fail, #DC2626);
}
.v5-feedback-persisted-body { flex: 1; min-width: 0; }
.v5-feedback-persisted-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-tertiary, #8C919E);
    margin-bottom: 2px;
}
.v5-feedback-persisted-text {
    font-size: 13px; line-height: 1.5;
    color: var(--ink-primary, #1A1D23);
}
.v5-feedback-persisted-text strong { font-weight: 600; }
.v5-feedback-persisted-edit {
    background: transparent; border: 1px solid var(--edge-default, rgba(0,0,0,0.08));
    color: var(--ink-secondary, #5A6170);
    padding: 5px 11px; border-radius: 6px;
    font-family: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 150ms;
    flex-shrink: 0;
}
.v5-feedback-persisted-edit:hover {
    border-color: var(--edge-emphasis, rgba(0,0,0,0.14));
    background: #fff;
}
.v5-feedback-persisted-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-self: flex-start;
}
.v5-feedback-persisted-revert {
    background: transparent;
    border: 1px solid var(--edge-default, rgba(0,0,0,0.08));
    color: var(--status-fail, #c0392b);
    padding: 5px 11px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms;
}
.v5-feedback-persisted-revert:hover {
    border-color: var(--status-fail, #c0392b);
    background: rgba(192, 57, 43, 0.06);
}

/* SPEC-BOGS2-007: evidence_refs chips inside v5 card body */
.v5-evrefs {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--edge-subtle, rgba(0,0,0,0.06));
    border-radius: 8px;
}
.v5-evrefs-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-secondary, #6b6b6b);
    margin-bottom: 6px;
}
.v5-evrefs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.v5-evref-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--edge-default, rgba(0,0,0,0.1));
    background: #f9f9f9;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink-primary, #1f1f1f);
    cursor: pointer;
    transition: all 120ms;
}
.v5-evref-chip:hover {
    border-color: var(--brand-primary, #c8a04e);
    background: #fffbf2;
}
/* SPEC-B096 D11: celula do proprio .docx — nao ha arquivo para abrir, entao o
   chip perde a afordancia de clique (cursor, hover) em vez de mentir. */
.v5-evref-chip--intradoc {
    cursor: default;
    align-items: baseline;
    flex-wrap: wrap;
}
/* SPEC-B096 D12: o dado da celula citada, ao lado do "Tabela N · linha M".
   Truncado com ellipsis — o valor inteiro fica no title. */
.v5-evref-cells {
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--edge-default, rgba(0,0,0,0.12));
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-secondary, #5a5a5a);
    font-family: var(--font-mono, monospace);
}
.v5-evref-chip--intradoc:hover {
    border-color: var(--edge-default, rgba(0,0,0,0.1));
    background: #f9f9f9;
}
.prv-evidence-chip--intradoc,
.prv-evidence-card--intradoc {
    cursor: default;
}
.v5-evref-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    color: var(--brand-primary, #c8a04e);
}
.v5-evref-name {
    font-family: var(--font-mono, monospace);
    font-weight: 500;
    word-break: break-all;
}
.v5-evref-loc {
    margin-left: 5px;
    padding: 1px 6px;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--ink-secondary, #6b6b6b);
}
.attachment-row-flash {
    animation: bso-attachment-flash 2.5s ease-out;
}
@keyframes bso-attachment-flash {
    0%, 20% { background-color: rgba(200, 160, 78, 0.35); }
    100% { background-color: transparent; }
}
.attach-name-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--ink-link, #1a5f8a);
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}
.attach-name-link:hover { color: var(--ink-primary, #1a1a1a); }
.attach-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.attach-dl-btn svg {
    width: 12px;
    height: 12px;
}
.attach-dl-cell { width: 1%; }

.v5-trust-strip {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 24px;
    background: var(--surface-page, #FAFBFC);
    border-top: 1px solid var(--edge-subtle, rgba(0,0,0,0.05));
    font-size: 11px; color: var(--ink-tertiary, #8C919E);
}
.v5-trust-strip .v5-trust-dot {
    width: 6px; height: 6px; border-radius: 99px;
    background: var(--status-pass, #10B981);
}
.v5-trust-strip strong {
    color: var(--ink-secondary, #5A6170);
    font-weight: 600;
}

/* Embedded V5 shell (inside modal or sections — no own banner) */
.v5-shell.v5-shell--embedded {
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-top: 12px;
}
.v5-shell--embedded .v5-body-wrap { display: block; }

/* Aux controls in banner: visual indicator + eye-icon (opens detail modal) */
.v5-aux-controls {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.v5-image-indicator {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--status-pass-bg, #ECFDF5);
    color: var(--status-pass, #10B981);
}
.v5-image-indicator svg { width: 14px; height: 14px; }
.v5-eye-btn {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--surface-inset, #F4F5F7);
    color: var(--ink-secondary, #5A6170);
    border: 1px solid transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms, color 150ms, border-color 150ms;
    padding: 0;
}
.v5-eye-btn:hover {
    background: #fff;
    color: var(--brand-navy, #0C1B2E);
    border-color: var(--edge-emphasis, rgba(0,0,0,0.14));
}
.v5-eye-btn svg { width: 14px; height: 14px; }

.v5-grid-2-col { grid-template-columns: auto 1fr auto auto auto auto; }

/* Update banner grid: badge | meta | ai-pill | human-pill | aux-controls | chevron */
.v5-banner {
    grid-template-columns: auto 1fr auto auto auto auto;
}

/* Empty state inside list */
.v5-empty {
    background: #fff;
    border: 1px dashed var(--edge-default, rgba(0,0,0,0.08));
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    color: var(--ink-secondary, #5A6170);
    font-size: 13px;
}
.v5-empty svg { width: 32px; height: 32px; color: var(--ink-muted, #B0B5BF); margin-bottom: 12px; }

/* ============================================================
   SPEC-REDESIGN-001: Admin Users — Trust & Authority refresh
   Pure visual layer; preserves IDs, data-attrs, action handlers.
   ============================================================ */
.users-shell { display: flex; flex-direction: column; gap: 16px; }
.users-title-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.users-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.users-subtitle { margin: 0; font-size: 13px; color: var(--ink-secondary, #6b6b6b); }
.users-subtitle strong { color: var(--ink-primary, #171717); font-weight: 600; }
.users-cta {
    background: var(--brand-gold, #c8a04e); color: #fff; border: none;
    padding: 9px 16px; border-radius: 8px; font-size: 13px;
    font-weight: 600; font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(200,160,78,0.3);
    transition: all 180ms;
}
.users-cta:hover {
    background: #a17f3a; transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(200,160,78,0.35);
}
.users-cta:focus-visible {
    outline: 2px solid var(--brand-gold, #c8a04e);
    outline-offset: 2px;
}
.users-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: #fff; border: 1px solid rgba(0,0,0,0.04);
    border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    flex-wrap: wrap;
}
.users-search {
    display: flex; align-items: center; gap: 8px;
    background: #faf9f7; border-radius: 8px; padding: 6px 12px; flex: 1; min-width: 200px;
}
.users-search svg { color: var(--ink-tertiary, #94a3b8); flex-shrink: 0; }
.users-search input {
    background: transparent; border: none; outline: none; flex: 1;
    font-size: 13px; font-family: inherit; color: var(--ink-primary, #171717);
}
.users-search input::placeholder { color: var(--ink-tertiary, #94a3b8); }
.users-search kbd {
    font-family: 'SFMono-Regular', ui-monospace, monospace; font-size: 10px;
    background: #fff; padding: 1px 5px; border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.08); color: var(--ink-tertiary, #94a3b8);
}
.users-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.users-filter-chip {
    font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08); background: transparent;
    color: var(--ink-secondary, #6b6b6b); cursor: pointer; transition: all 150ms;
    display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
}
.users-filter-chip:hover { border-color: rgba(0,0,0,0.14); color: var(--ink-primary, #171717); }
.users-filter-chip.is-active {
    background: var(--ink-primary, #171717); color: #fff;
    border-color: var(--ink-primary, #171717);
}
.users-filter-chip .count {
    background: rgba(0,0,0,0.06); padding: 0 5px; border-radius: 3px;
    font-size: 10px; font-weight: 600;
}
.users-filter-chip.is-active .count { background: rgba(255,255,255,0.18); color: #fff; }

.users-card {
    background: #fff; border: 1px solid rgba(0,0,0,0.04); border-radius: 12px;
    overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
}
.users-table thead th {
    text-align: left; padding: 12px 18px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-secondary, #6b6b6b);
    background: linear-gradient(180deg, #fafaf8, #fcfcfa);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.users-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 150ms, box-shadow 150ms;
}
.users-table tbody tr:hover {
    background: #fafaf2;
    box-shadow: inset 3px 0 0 0 var(--brand-gold, #c8a04e);
}
.users-table tbody tr:last-child { border-bottom: none; }
.users-table td { padding: 14px 18px; vertical-align: middle; }
.users-empty { padding: 32px 18px; text-align: center; }

/* User cell */
.user-cell { display: flex; align-items: center; gap: 12px; }
.user-name { font-weight: 500; line-height: 1.2; color: var(--ink-primary, #171717); }
.user-email {
    font-size: 12px; color: var(--ink-secondary, #6b6b6b); margin-top: 2px;
    font-family: 'SFMono-Regular', ui-monospace, monospace; word-break: break-all;
}
.user-last-seen { font-size: 12px; color: var(--ink-tertiary, #94a3b8); }

/* Avatar shared atom (also used by Activity Log) */
.avatar {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: #fff;
    text-transform: uppercase; flex-shrink: 0; letter-spacing: -0.01em;
    background: linear-gradient(135deg, #c8a04e, #a17f3a);
}
.avatar--admin {
    background: linear-gradient(135deg, #171717, #404040);
    border: 1px solid var(--brand-gold, #c8a04e);
}
.avatar--super {
    background: linear-gradient(135deg, #c8a04e, #d4af37);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(200,160,78,0.5);
}
.avatar--reviewer { background: linear-gradient(135deg, #6b6b6b, #94a3b8); }

/* Pills shared atom */
.pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 3px 9px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.pill--neutral { background: rgba(0,0,0,0.05); color: var(--ink-secondary, #6b6b6b); }
.pill--gold { background: rgba(200,160,78,0.15); color: #a17f3a; }
.pill--ink { background: rgba(23,23,23,0.08); color: var(--ink-primary, #171717); }
.pill--pass { background: rgba(22,163,74,0.12); color: #16a34a; }
.pill--fail { background: rgba(192,57,43,0.10); color: #c0392b; }
.pill--warn { background: rgba(217,119,6,0.10); color: #d97706; }
.pill--info { background: rgba(37,99,235,0.10); color: #2563eb; }

/* Status dot shared atom */
.status-cell { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot--active { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.status-dot--inactive { background: var(--ink-tertiary, #94a3b8); }
.status-dot--warn { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
.admin-users-pending { margin-left: 6px; font-size: 9px; padding: 2px 6px; }

/* Actions cell */
.actions-cell { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.action-btn {
    padding: 6px 11px; border: 1px solid transparent; background: transparent;
    color: var(--ink-secondary, #6b6b6b); border-radius: 6px; font-size: 12px;
    font-weight: 500; font-family: inherit; cursor: pointer; transition: all 150ms;
}
.action-btn:hover {
    background: #faf9f7; color: var(--ink-primary, #171717);
    border-color: rgba(0,0,0,0.08);
}
.action-btn--danger:hover {
    color: #c0392b; border-color: rgba(192,57,43,0.3); background: rgba(192,57,43,0.04);
}
.row-locked {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ink-tertiary, #94a3b8); font-size: 12px;
    font-style: italic; justify-content: flex-end;
}
.row-locked svg { color: var(--ink-tertiary, #94a3b8); }

/* ============================================================
   SPEC-REDESIGN-002: Admin Config — config items table refresh
   ============================================================ */
.cfg-shell { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.cfg-shell-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 4px 2px;
}
.cfg-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cfg-subtitle { margin: 0; font-size: 12px; color: var(--ink-secondary, #6b6b6b); }
.cfg-subtitle strong { color: var(--ink-primary, #171717); font-weight: 600; }

.cfg-table thead th {
    text-align: left; padding: 12px 16px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-secondary, #6b6b6b);
    background: linear-gradient(180deg, #fafaf8, #fcfcfa);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.cfg-row {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 150ms;
    position: relative;
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row:hover { background: #fafaf2; }
.cfg-row--override::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--brand-gold, #c8a04e);
}
.cfg-row td { padding: 12px 16px; vertical-align: middle; }
.cfg-key-cell { min-width: 200px; }
.cfg-key-label { font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--ink-primary, #171717); }
.cfg-key-id { font-size: 11px; color: var(--ink-tertiary, #94a3b8); margin-top: 2px; }
.cfg-source-cell { width: 90px; }
.cfg-value-cell { width: 140px; }
.cfg-meta-cell {
    font-size: 12px; color: var(--ink-secondary, #6b6b6b);
    line-height: 1.4; max-width: 280px;
}
.cfg-meta-cell strong { color: var(--ink-primary, #171717); font-weight: 600; }
.cfg-actions-cell { white-space: nowrap; text-align: right; }
.cfg-actions-cell .action-btn { display: inline-flex; }
.cfg-save-btn {
    background: var(--brand-gold, #c8a04e); color: #fff;
    border-color: var(--brand-gold, #c8a04e);
}
.cfg-save-btn:hover {
    background: #a17f3a; color: #fff; border-color: #a17f3a;
}

.cfg-input {
    width: 100%; padding: 7px 10px; font-size: 13px;
    font-family: 'SFMono-Regular', ui-monospace, monospace;
    border: 1px solid rgba(0,0,0,0.08); border-radius: 6px;
    background: #fff; color: var(--ink-primary, #171717);
}
.cfg-input:focus {
    outline: none; border-color: var(--brand-gold, #c8a04e);
    box-shadow: 0 0 0 3px rgba(200,160,78,0.15);
}
.cfg-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
}
.cfg-toggle input { width: 16px; height: 16px; accent-color: var(--brand-gold, #c8a04e); cursor: pointer; }
.cfg-toggle-label { font-size: 12px; font-weight: 500; color: var(--ink-primary, #171717); }

/* ============================================================
   SPEC-REDESIGN-003: Activity Log — row visual refresh
   ============================================================ */
.activity-actor-cell { display: flex; align-items: center; gap: 10px; }
.activity-actor-avatar { width: 32px; height: 32px; font-size: 11px; border-radius: 8px; }
.activity-actor-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity-actor-email {
    font-size: 12px; font-weight: 500;
    color: var(--ink-primary, #171717);
    word-break: break-word;
}
.activity-actor-role {
    font-size: 10px; color: var(--ink-tertiary, #94a3b8);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.activity-event-pill { font-size: 10px; }
.activity-target-chip {
    background: rgba(0,0,0,0.04); padding: 2px 6px; border-radius: 4px;
    font-size: 11px; color: var(--ink-secondary, #6b6b6b);
    word-break: break-all;
}
.activity-method {
    font-size: 10px; font-weight: 700; color: var(--ink-tertiary, #94a3b8);
    background: rgba(0,0,0,0.03); padding: 2px 6px; border-radius: 3px;
}
.activity-table tbody tr {
    transition: background 150ms, box-shadow 150ms;
}
.activity-table tbody tr:hover {
    background: #fafaf2;
    box-shadow: inset 3px 0 0 0 var(--brand-gold, #c8a04e);
}
.activity-table tbody tr.activity-row--super {
    background: rgba(200,160,78,0.04);
}
.activity-table tbody tr.activity-row--super:hover { background: rgba(200,160,78,0.08); }

/* ============================================================
   SPEC-REDESIGN-004: Rules Admin — CSS-only polish
   No JS changes. Builds on existing .rules-row layout.
   ============================================================ */
.rules-row {
    transition: background 150ms, box-shadow 150ms;
}
.rules-row:hover {
    background: #fafaf2;
    box-shadow: inset 3px 0 0 0 var(--brand-gold, #c8a04e);
}
.rules-row.expanded {
    background: rgba(200,160,78,0.05);
}
.rules-row--inactive {
    opacity: 0.55;
    filter: grayscale(0.4);
}
.rules-row--inactive:hover { opacity: 0.85; filter: grayscale(0); }

.rules-builtin-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-gold, #c8a04e), #a17f3a);
    color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    padding: 2px 6px; border-radius: 4px; margin-right: 6px;
    box-shadow: 0 1px 2px rgba(200,160,78,0.3);
}

.ws-icon-btn.rules-btn-edit:hover {
    color: var(--brand-gold, #c8a04e);
}
.ws-icon-btn.rules-btn-toggle.rules-btn-deactivate:hover {
    color: #c0392b;
}
.ws-icon-btn.rules-btn-toggle.rules-btn-activate:hover {
    color: #16a34a;
}
.rules-btn-detail-pill {
    transition: all 150ms;
}
.rules-btn-detail-pill:hover {
    background: rgba(200,160,78,0.1);
    border-color: var(--brand-gold, #c8a04e);
    color: var(--brand-gold, #c8a04e);
}

/* ============================================================
   SPEC-REDESIGN-005: Upload — dropzone polish + Trust strip
   ============================================================ */
.dropzone-compact {
    border: 2px dashed rgba(200,160,78,0.35);
    border-radius: 14px;
    background: linear-gradient(180deg, #fcfbf8, #faf9f5);
    transition: all 200ms;
    padding: 20px 22px;
}
.dropzone-compact:hover,
.dropzone-compact.drag-over,
.dropzone-compact.is-dragover {
    border-color: var(--brand-gold, #c8a04e);
    background: linear-gradient(180deg, #fff9ec, #fdf6e3);
}
.dropzone-compact-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-gold, #c8a04e), #a17f3a);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(200,160,78,0.25);
}
.dropzone-compact-icon svg { width: 22px; height: 22px; color: #fff; stroke: #fff; }
.dropzone-compact-title {
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink-primary, #171717);
}
.dropzone-compact-hint {
    color: var(--ink-secondary, #6b6b6b); font-size: 12px;
}

.upload-info-strip {
    margin-top: 14px; padding: 12px 16px;
    background: #fff; border: 1px solid rgba(0,0,0,0.04); border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.upload-info-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.upload-info-trust {
    margin: 0; font-size: 11px; color: var(--ink-tertiary, #94a3b8);
    display: inline-flex; align-items: center; gap: 6px;
}
.upload-info-trust svg { color: var(--brand-gold, #c8a04e); flex-shrink: 0; }

/* SPEC-B056: julgamento incremental — banner + badge de verdict reaproveitado */
.b056-incremental-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-size: 13px;
    background: rgba(47, 103, 173, 0.07);
    color: #2f67ad;
    border: 1px solid rgba(47, 103, 173, 0.22);
}
.b056-banner-src { color: var(--ink-tertiary, #94a3b8); font-size: 12px; }
.b056-banner-src code { font-size: 11px; }
.b056-carried-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    margin-left: 6px;
    background: rgba(47, 103, 173, 0.08);
    color: #2f67ad;
    border: 1px solid rgba(47, 103, 173, 0.25);
}

/* SPEC-B117 — texto de conteudo exibido em traducao automatica.
   O sublinhado pontilhado sinaliza "isto nao e o texto original"; o clique
   alterna para o original (a trilha de auditoria guarda o pt-BR). */
.i18n-machine {
    border-bottom: 1px dotted currentColor;
    cursor: pointer;
}
.i18n-machine[data-i18n-estado="original"] {
    border-bottom-style: solid;
}
/* Dentro de elemento clicavel o clique e do elemento, nao da marca. */
.i18n-machine.i18n-machine--inerte {
    cursor: inherit;
}

/* Selo no cabecalho (perto do seletor de idioma), no fluxo normal: o aviso
   antigo era fixo no rodape e cobria o conteudo. */
.i18n-machine-badge {
    display: inline-flex;
    align-items: center;
    margin-right: var(--sp-2);
    padding: 3px 8px;
    border: 1px dotted rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--text-xs, 0.75rem);
    white-space: nowrap;
    cursor: help;
}

/* SPEC-B122: BSO inativo (somente leitura, fora dos numeros do dashboard) */
tr[data-inactive="1"] { opacity: 0.72; }
.inactive-chip { cursor: help; }
.inactive-reason { margin-top: 2px; }
.inactive-banner { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; }
.inactivation-counter { margin-top: 4px; }
.dash-stat-card--inactive:hover { border-color: rgba(0, 0, 0, 0.2); }
/* SPEC-B122: a coluna de acoes e estreita (td com overflow oculto) — o botao
   Inativar/Reativar empilha sob "Visualizar" em vez de sair da area visivel. */
.jobs-table__action .job-inactivate-btn,
.jobs-table__action .job-reactivate-btn {
    display: block;
    margin: 6px 0 0 auto;
}