/* ──────────────────────────────────────────────────────────────────────────
   AI Lab — shared stylesheet
   Sibling of /ai. Inherits the dark/purple/cyan palette and adds:
     • Tier color spine (Foundation, Knowledge, Autonomy, Strategy)
     • Demo-page shell (breadcrumb, demo zone, telemetry collapsibles)
     • Form + streaming output styles for interactive demos
   Tone: business-corporate shell, deep-tech internals exposed on click.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --purple: #A100FF;
    --purple-light: #C966FF;
    --cyan: #00D4FF;
    --magenta: #FF1F8F;
    --gold: #FFB800;

    --bg-base: #0A0A0F;
    --bg-elev-1: #12121A;
    --bg-elev-2: #1A1A24;
    --bg-elev-3: #22222E;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-soft: rgba(255, 255, 255, 0.14);

    --text-strong: #FFFFFF;
    --text: rgba(255, 255, 255, 0.86);
    --text-muted: rgba(255, 255, 255, 0.58);
    --text-faint: rgba(255, 255, 255, 0.36);

    --tier-foundation: var(--cyan);
    --tier-knowledge: var(--purple);
    --tier-autonomy: var(--magenta);
    --tier-strategy: var(--gold);
    --tier-value: #4ADE80;

    --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius: 12px;
    --radius-sm: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--bg-base);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ── Top nav (lab-specific, dark, sticky) ──────────────────────────────── */
.lab-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
}
.lab-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.lab-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}
.lab-brand-mark {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: #000;
}
.lab-brand-text span {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.35rem;
}
.lab-nav-links {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
    list-style: none;
    align-items: center;
}
.lab-nav-links a {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.lab-nav-links a:hover { color: var(--text-strong); }
.lab-nav-links a.cta {
    color: var(--text-strong);
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}
.lab-nav-links a.cta:hover {
    border-color: var(--purple);
    background: rgba(161, 0, 255, 0.08);
}

/* Hamburger toggle — visible only on small screens */
.lab-nav-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 0.5rem;
    border-radius: 4px;
}
.lab-nav-toggle:hover { background: rgba(255, 255, 255, 0.04); }
.lab-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    margin: 5px 0;
    transition: all 0.25s ease;
    border-radius: 1px;
}

@media (max-width: 820px) {
    .lab-nav-inner { gap: 1rem; }
    .lab-nav-links { display: none; }
    .lab-nav-links.show {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 10, 15, 0.97);
        backdrop-filter: blur(16px);
        padding: 1rem 1.5rem 1.2rem;
        gap: 0.4rem;
        border-bottom: 1px solid var(--border-subtle);
        margin-left: 0;
    }
    .lab-nav-links.show li { width: 100%; }
    .lab-nav-links.show a {
        display: block;
        padding: 0.55rem 0.6rem;
        border-radius: 5px;
        font-size: 0.92rem;
    }
    .lab-nav-links.show a:hover {
        background: var(--bg-elev-2);
    }
    .lab-nav-links.show a.cta {
        margin-top: 0.4rem;
        text-align: center;
    }
    .lab-nav-toggle {
        display: block;
        margin-left: auto;          /* push to the right edge of the nav */
    }
    /* Drop the brand's secondary text on very narrow screens so the
       hamburger never gets squeezed against it. */
    .lab-brand-text span { display: none; }
}

/* ── Containers ────────────────────────────────────────────────────────── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Hero (lab landing) ────────────────────────────────────────────────── */
.lab-hero {
    padding: 6rem 0 4rem;
    border-bottom: 1px solid var(--border-subtle);
}
.lab-hero-eyebrow {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--purple-light);
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}
.lab-hero h1 {
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 1.08;
    color: var(--text-strong);
    letter-spacing: -0.02em;
    font-weight: 700;
    margin-bottom: 1.25rem;
    max-width: 28ch;
}
.lab-hero h1 .accent {
    background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lab-hero-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 60ch;
}

/* ── Tier ladder ───────────────────────────────────────────────────────── */
.tier-ladder {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tier-ladder-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 1rem;
}
.tier-step {
    padding: 1.1rem 1.2rem;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    border-top: 2px solid var(--tier-color, var(--cyan));
    position: relative;
}
.tier-step[data-tier="foundation"] { --tier-color: var(--tier-foundation); }
.tier-step[data-tier="knowledge"]  { --tier-color: var(--tier-knowledge); }
.tier-step[data-tier="autonomy"]   { --tier-color: var(--tier-autonomy); }
.tier-step[data-tier="strategy"]   { --tier-color: var(--tier-strategy); }
.tier-step[data-tier="value"]      { --tier-color: var(--tier-value); }
.tier-step-num {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tier-color);
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}
.tier-step-name {
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0.2rem;
}
.tier-step-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}
/* tier-ladder-inner uses auto-fit, so it scales naturally across widths */

/* ── Card grid (six flashcards) ────────────────────────────────────────── */
.card-grid-section {
    padding: 4.5rem 0 2rem;
}
.section-eyebrow {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--purple-light);
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.section-title {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    color: var(--text-strong);
    letter-spacing: -0.01em;
    font-weight: 700;
    margin-bottom: 1.6rem;
    max-width: 38ch;
}
.section-desc {
    color: var(--text-muted);
    max-width: 55ch;
    margin-bottom: 2.5rem;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }

.demo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.4rem 1.3rem;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.demo-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--tier-color, var(--cyan));
}
.demo-card[data-tier="foundation"] { --tier-color: var(--tier-foundation); }
.demo-card[data-tier="knowledge"]  { --tier-color: var(--tier-knowledge); }
.demo-card[data-tier="autonomy"]   { --tier-color: var(--tier-autonomy); }
.demo-card[data-tier="strategy"]   { --tier-color: var(--tier-strategy); }
.demo-card[data-tier="value"]      { --tier-color: var(--tier-value); }

.demo-card:hover {
    border-color: var(--border-soft);
    background: var(--bg-elev-2);
    transform: translateY(-2px);
}
.demo-card-tier {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--tier-color);
    margin-bottom: 0.9rem;
}
.demo-card h3 {
    font-size: 1.15rem;
    color: var(--text-strong);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.demo-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 1.2rem;
    flex: 1;
}
.demo-card-cta {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.demo-card-cta::after {
    content: "→";
    transition: transform 0.18s ease;
}
.demo-card:hover .demo-card-cta::after { transform: translateX(3px); }
.demo-card-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-faint);
    border: 1px solid var(--border-subtle);
}
.demo-card-status.live {
    color: var(--cyan);
    border-color: rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.06);
}

/* ── Recent additions carousel ─────────────────────────────────────────── */
.recent-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4rem;
}
.recent-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.recent-card {
    min-width: 280px;
    padding: 1.2rem;
    background: var(--bg-elev-1);
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.recent-card-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.08em;
    margin-bottom: 0.45rem;
}
.recent-card-title {
    color: var(--text-strong);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

/* ── About the Lab (footer-ish info) ───────────────────────────────────── */
.about-lab {
    padding: 3.5rem 0 5rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: 3rem;
}
.about-lab p {
    color: var(--text-muted);
    max-width: 65ch;
    margin-bottom: 1rem;
}
.stack-line {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 1rem;
}
.stack-line span {
    color: var(--text-strong);
}

/* ── Demo page shell ───────────────────────────────────────────────────── */
.demo-page {
    padding: 3rem 0 5rem;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.breadcrumb a { color: var(--text-muted); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--text-strong); }
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--tier-color, var(--cyan));
    color: var(--tier-color, var(--cyan));
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.02);
}
.tier-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tier-color, var(--cyan));
}
.demo-header {
    margin-bottom: 2.5rem;
}
.demo-header h1 {
    font-size: clamp(2rem, 3.5vw, 2.7rem);
    color: var(--text-strong);
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}
.demo-header .lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 60ch;
}

/* ── Demo zone (the interactive part of each page) ─────────────────────── */
.demo-zone {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.6rem;
    margin-bottom: 1.5rem;
}
.demo-coming-soon {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.demo-coming-soon .badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--purple-light);
    letter-spacing: 0.1em;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(161, 0, 255, 0.3);
    border-radius: 4px;
    margin-bottom: 1.2rem;
}
.demo-coming-soon h2 {
    color: var(--text-strong);
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
}

/* ── Form elements (used by Prompt Lab and others) ─────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
.field-label {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.field-hint {
    font-size: 0.78rem;
    color: var(--text-faint);
}
textarea.input,
input.input {
    width: 100%;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.95rem;
    resize: vertical;
    transition: border-color 0.15s ease;
}
textarea.input.mono { font-family: var(--mono); font-size: 0.88rem; }
textarea.input:focus,
input.input:focus {
    outline: none;
    border-color: var(--purple);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: var(--bg-elev-2);
    color: var(--text-strong);
    font-weight: 500;
    font-size: 0.92rem;
    transition: all 0.15s ease;
}
.btn:hover { background: var(--bg-elev-3); border-color: var(--purple); }
.btn.primary {
    background: linear-gradient(135deg, var(--purple) 0%, #7B00C4 100%);
    border-color: transparent;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-row {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Streaming output area ─────────────────────────────────────────────── */
.output {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    min-height: 8rem;
    color: var(--text);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
}
.output.empty { color: var(--text-faint); font-style: italic; }
.output .cursor {
    display: inline-block;
    width: 8px; height: 1em;
    background: var(--purple);
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.banner {
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
.banner.warn {
    background: rgba(255, 184, 0, 0.08);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: var(--gold);
}
.banner.error {
    background: rgba(255, 31, 143, 0.08);
    border: 1px solid rgba(255, 31, 143, 0.3);
    color: var(--magenta);
}

/* ── Collapsible drawers (telemetry / architecture / how-measured) ─────── */
.drawer {
    border-top: 1px solid var(--border-subtle);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}
.drawer details {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    margin-bottom: 0.8rem;
}
.drawer details > summary {
    padding: 0.95rem 1.2rem;
    cursor: pointer;
    list-style: none;
    color: var(--text-strong);
    font-family: var(--mono);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details > summary::after {
    content: "+";
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: transform 0.15s ease;
}
.drawer details[open] > summary::after { content: "−"; }
.drawer-body {
    padding: 0 1.2rem 1.2rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* Telemetry rows */
.tel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1.5rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.tel-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tel-key { color: var(--text-muted); }
.tel-val { color: var(--text-strong); }
.tel-details {
    margin-top: 0.8rem;
    background: var(--bg-elev-2);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
}
.tel-details > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.78rem;
    list-style: none;
}
.tel-details pre {
    margin-top: 0.5rem;
    background: var(--bg-base);
    padding: 0.7rem;
    border-radius: 4px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.5;
    max-height: 320px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.lab-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 2.5rem 0;
    margin-top: 3rem;
}
.lab-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.lab-footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.lab-footer-links a:hover { color: var(--text-strong); }


/* ──────────────────────────────────────────────────────────────────────────
   Phase B — Prompt Lab three-column comparison
   ────────────────────────────────────────────────────────────────────────── */

.column-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (max-width: 920px) {
    .column-grid { grid-template-columns: 1fr; }
}

.column {
    display: flex;
    flex-direction: column;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    border-top: 2px solid var(--persona-color, var(--cyan));
}
.column[data-persona="A"] { --persona-color: var(--cyan); }
.column[data-persona="B"] { --persona-color: var(--magenta); }
.column[data-persona="C"] { --persona-color: var(--gold); }

.column-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
}
.column-header-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.persona-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--persona-color);
    color: #000;
}
.persona-name {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 0.95rem;
}
.persona-tag {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
}

.persona-system-toggle {
    margin-top: 0.3rem;
}
.persona-system-toggle > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.2rem 0;
}
.persona-system-toggle > summary::-webkit-details-marker { display: none; }
.persona-system-toggle > summary::after {
    content: " ▾";
    color: var(--text-faint);
}
.persona-system-toggle[open] > summary::after { content: " ▴"; }
.persona-system-toggle textarea {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.5;
    min-height: 4.5rem;
}

.column-body {
    flex: 1;
    padding: 1rem;
    min-height: 14rem;
}
.column-output {
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.92rem;
    min-height: 9rem;
}
.column-output.empty { color: var(--text-faint); font-style: italic; }
.column-output.error { color: var(--magenta); }

.column-metrics {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}
.column-metrics .metric-strong { color: var(--text-strong); }
.column-metrics .badge-cache,
.column-metrics .badge-fallback {
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}
.column-metrics .badge-cache {
    color: var(--cyan);
    border: 1px solid rgba(0, 212, 255, 0.3);
}
.column-metrics .badge-fallback {
    color: var(--gold);
    border: 1px solid rgba(255, 184, 0, 0.4);
}

/* ── Eval row ──────────────────────────────────────────────────────────── */
.eval-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.eval-row .eval-hint {
    font-size: 0.82rem;
    color: var(--text-faint);
}

.eval-warn {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: rgba(255, 184, 0, 0.08);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: var(--gold);
    display: none;
}

/* ── Scoreboard ────────────────────────────────────────────────────────── */
.scoreboard {
    display: none;
    margin-top: 1.5rem;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}
.scoreboard.visible { display: block; }
.scoreboard-header {
    padding: 0.95rem 1.2rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.scoreboard-title {
    font-weight: 600;
    color: var(--text-strong);
}
.scoreboard-meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.score-table th,
.score-table td {
    padding: 0.7rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.score-table thead th {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    background: var(--bg-elev-2);
    font-weight: 500;
}
.score-table tbody tr:last-child td { border-bottom: none; }
.score-table .col-persona { color: var(--text-strong); font-weight: 500; }
.score-table .col-numeric {
    font-family: var(--mono);
    color: var(--text);
}
.score-table .col-verdict {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--gold);
    letter-spacing: 0.04em;
}
.score-table .notes-row td {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    padding-top: 0;
    background: var(--bg-elev-2);
}

.score-cell-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 100px;
}
.score-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    min-width: 60px;
}
.score-bar::after {
    content: "";
    position: absolute;
    inset: 0 calc(100% - var(--score, 0%)) 0 0;
    background: linear-gradient(90deg, var(--purple) 0%, var(--cyan) 100%);
}
.score-num {
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    min-width: 2.6em;
    text-align: right;
}

.scoreboard-footer {
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elev-2);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.scoreboard-footer strong { color: var(--text-strong); font-weight: 500; }

@media (max-width: 720px) {
    .score-table th,
    .score-table td { padding: 0.55rem 0.7rem; font-size: 0.82rem; }
    .score-cell-wrap { min-width: 70px; }
}

/* ── Cost reference notice ─────────────────────────────────────────────── */
.cost-note {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-left: 2px solid var(--purple);
    background: rgba(161, 0, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}
.cost-note strong { color: var(--text); font-weight: 500; }


/* ──────────────────────────────────────────────────────────────────────────
   Phase C — RAG Explorer
   Two-pane layout: corpus list (left) + answer panel (right).
   ────────────────────────────────────────────────────────────────────────── */

.rag-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    min-height: 26rem;
}
@media (max-width: 920px) {
    .rag-layout { grid-template-columns: 1fr; }
}

.corpus-pane {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 32rem;
}
.corpus-pane-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.corpus-pane-title {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 0.92rem;
}
.corpus-pane-meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.corpus-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
}
.corpus-item {
    padding: 0.55rem 0.7rem;
    border-radius: 5px;
    margin-bottom: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.12s ease;
    border-left: 2px solid transparent;
}
.corpus-item:hover { background: var(--bg-elev-3); }
.corpus-item.retrieved {
    background: rgba(161, 0, 255, 0.07);
    border-left-color: var(--purple);
}
.corpus-item-id {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
}
.corpus-item-source {
    font-family: var(--mono);
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: #000;
    background: var(--source-color, var(--purple));
    flex-shrink: 0;
}
.corpus-item-section {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.corpus-item-score {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--purple-light);
    font-weight: 500;
}

/* Source color spine, applied via inline style or class */
.src-togaf-10              { --source-color: #00D4FF; }
.src-nist-ai-rmf           { --source-color: #FFB800; }
.src-eu-ai-act             { --source-color: #FF1F8F; }
.src-archimate             { --source-color: #C966FF; }
.src-enterprise-ai-strategy{ --source-color: #4ADE80; }
.src-genai-finops          { --source-color: #60A5FA; }
.src-svt-essays            { --source-color: #A100FF; }

.answer-pane {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 18rem;
}
.answer-output {
    flex: 1;
    line-height: 1.7;
    color: var(--text);
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.answer-output.empty { color: var(--text-faint); font-style: italic; }
.answer-citation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 0.35em;
    margin: 0 0.1em;
    background: rgba(161, 0, 255, 0.18);
    border: 1px solid rgba(161, 0, 255, 0.4);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.72em;
    color: var(--purple-light);
    text-decoration: none;
    cursor: pointer;
    vertical-align: baseline;
}
.answer-citation:hover {
    background: rgba(161, 0, 255, 0.32);
}
.answer-meta {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.citations-list {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-subtle);
    display: none;
}
.citations-list.visible { display: block; }
.citations-list-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    letter-spacing: 0.06em;
}
.citation-row {
    display: grid;
    grid-template-columns: 2.4em 7em 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    line-height: 1.5;
}
.citation-row:first-of-type { border-top: none; }
.citation-num {
    font-family: var(--mono);
    color: var(--purple-light);
    font-weight: 500;
}
.citation-source {
    font-family: var(--mono);
    color: var(--text-muted);
    font-size: 0.78rem;
}
.citation-text {
    color: var(--text);
}
.citation-text em {
    color: var(--purple-light);
    font-style: normal;
    background: rgba(161, 0, 255, 0.15);
    padding: 0 0.25em;
    border-radius: 3px;
}


/* ──────────────────────────────────────────────────────────────────────────
   Phase C — Embeddings Atlas
   Canvas-based scatter plot with hover overlay.
   ────────────────────────────────────────────────────────────────────────── */

.atlas-wrap {
    position: relative;
    margin-top: 1.5rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}
.atlas-canvas {
    display: block;
    width: 100%;
    height: 520px;
    cursor: crosshair;
}
.atlas-legend {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    background: rgba(10, 10, 15, 0.78);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--text-muted);
    pointer-events: auto;
}
.atlas-legend-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.atlas-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--source-color, var(--cyan));
}
.atlas-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(10, 10, 15, 0.96);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
    max-width: 320px;
    transform: translate(-50%, -110%);
    z-index: 5;
    display: none;
}
.atlas-tooltip.visible { display: block; }
.atlas-tooltip-source {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--purple-light);
    margin-bottom: 0.2rem;
}
.atlas-tooltip-section {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}
.atlas-tooltip-score {
    font-family: var(--mono);
    color: var(--cyan);
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

.atlas-status {
    margin-top: 0.8rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.atlas-status .metric-strong { color: var(--text-strong); }

.neighbor-list {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}
.neighbor-list-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.neighbor-row {
    display: grid;
    grid-template-columns: 5em 9em 1fr;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    align-items: center;
}
.neighbor-row:first-of-type { border-top: none; }
.neighbor-rank {
    font-family: var(--mono);
    color: var(--text-strong);
    font-size: 0.78rem;
}
.neighbor-rank .score {
    color: var(--cyan);
}
.neighbor-source {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.neighbor-preview {
    color: var(--text-muted);
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ──────────────────────────────────────────────────────────────────────────
   Source modal — click any chunk to open the full source document
   in a centered overlay, with the clicked chunk highlighted in context.
   Used by RAG Explorer (corpus list + citations) and Embeddings Atlas.
   ────────────────────────────────────────────────────────────────────────── */

.source-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 14, 0.72);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: source-modal-fade 0.18s ease;
}
.source-modal-backdrop.visible { display: flex; }
@keyframes source-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.source-modal {
    width: min(740px, 100%);
    max-height: 84vh;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    border-top: 2px solid var(--source-color, var(--purple));
}

.source-modal-header {
    padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}
.source-modal-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1rem;
    letter-spacing: -0.01em;
}
.source-modal-source-tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    color: #000;
    background: var(--source-color, var(--purple));
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.source-modal-close {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.source-modal-close:hover {
    color: var(--text-strong);
    border-color: var(--purple);
    background: rgba(161, 0, 255, 0.08);
}

.source-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.3rem 1.5rem;
    color: var(--text);
    line-height: 1.75;
    font-size: 0.94rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.source-modal-body h2 {
    font-size: 1.05rem;
    color: var(--text-strong);
    margin: 1.2rem 0 0.6rem;
    letter-spacing: -0.01em;
    font-weight: 600;
}
.source-modal-body h2:first-child { margin-top: 0; }
.source-modal-body mark {
    background: rgba(161, 0, 255, 0.22);
    color: var(--text-strong);
    padding: 0.1em 0.18em;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(161, 0, 255, 0.35);
}
.source-modal-body.empty {
    color: var(--text-faint);
    font-style: italic;
    text-align: center;
    padding-top: 3rem;
}

.source-modal-footer {
    padding: 0.7rem 1.3rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elev-2);
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}
.source-modal-footer-meta { color: var(--text-faint); }
.source-modal-footer kbd {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

/* Source-color spine binding (re-using the source colors defined above) */
.source-modal[data-source="togaf-10"]              { --source-color: #00D4FF; }
.source-modal[data-source="nist-ai-rmf"]           { --source-color: #FFB800; }
.source-modal[data-source="eu-ai-act"]             { --source-color: #FF1F8F; }
.source-modal[data-source="archimate"]             { --source-color: #C966FF; }
.source-modal[data-source="enterprise-ai-strategy"]{ --source-color: #4ADE80; }
.source-modal[data-source="genai-finops"]          { --source-color: #60A5FA; }
.source-modal[data-source="svt-essays"]            { --source-color: #A100FF; }

/* Make corpus and atlas chunks visibly clickable */
.corpus-item { cursor: pointer; }
.atlas-canvas { /* cursor handled in JS based on hover */ }

@media (max-width: 600px) {
    .source-modal-header { padding: 0.85rem 1rem; }
    .source-modal-body { padding: 1rem 1.1rem; font-size: 0.9rem; }
    .source-modal-footer { font-size: 0.7rem; }
}


/* ──────────────────────────────────────────────────────────────────────────
   Phase D1 — Agent Studio
   Vertical timeline: Researcher → Analyst → Writer.
   Each agent is a card with a role-colored spine; the Researcher card shows
   nested iteration entries (plan + retrieved chunks) before its synthesis.
   ────────────────────────────────────────────────────────────────────────── */

.agent-pipeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1.5rem;
}

.agent-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    border-left: 3px solid var(--agent-color, var(--cyan));
    margin-bottom: 0;
}
.agent-card[data-role="researcher"] { --agent-color: var(--cyan); }
.agent-card[data-role="analyst"]    { --agent-color: var(--purple); }
.agent-card[data-role="writer"]     { --agent-color: var(--magenta); }

.agent-card-header {
    padding: 0.85rem 1.1rem;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.agent-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--agent-color);
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.agent-name {
    font-weight: 600;
    color: var(--text-strong);
    flex: 1;
    letter-spacing: -0.01em;
}
.agent-role-tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.agent-status {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
}
.agent-status[data-state="running"] { color: var(--agent-color); border-color: var(--agent-color); }
.agent-status[data-state="done"] { color: var(--text-muted); }

.agent-card-body {
    padding: 1rem 1.1rem;
}

/* Per-agent collapsible system prompt */
.agent-system-toggle > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
    margin-bottom: 0.5rem;
}
.agent-system-toggle > summary::-webkit-details-marker { display: none; }
.agent-system-toggle > summary::after {
    content: " ▾";
    color: var(--text-faint);
}
.agent-system-toggle[open] > summary::after { content: " ▴"; }
.agent-system-toggle pre {
    background: var(--bg-base);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin-top: 0.4rem;
    margin-bottom: 0.7rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Researcher iteration entries */
.iteration-list {
    margin-bottom: 1rem;
}
.iteration {
    border-left: 2px solid var(--border-subtle);
    padding: 0.5rem 0 0.5rem 1rem;
    margin-bottom: 0.6rem;
    position: relative;
}
.iteration::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.7rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--agent-color, var(--cyan));
}
.iteration-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.iteration-plan {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.4rem;
}
.iteration-plan-query {
    font-family: var(--mono);
    color: var(--text-strong);
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.86rem;
}
.iteration-rationale {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 0.2rem;
    font-style: italic;
}
.iteration-search {
    margin-top: 0.5rem;
}
.iteration-search > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.iteration-search > summary::-webkit-details-marker { display: none; }
.iteration-search > summary::after { content: " ▾"; color: var(--text-faint); }
.iteration-search[open] > summary::after { content: " ▴"; }
.iteration-results {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.iteration-result {
    display: grid;
    grid-template-columns: 5em 8em 1fr;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: var(--bg-elev-2);
    border-radius: 5px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.1s ease;
}
.iteration-result:hover { background: var(--bg-elev-3); }
.iteration-result-score {
    font-family: var(--mono);
    color: var(--cyan);
    font-size: 0.78rem;
}
.iteration-result-source {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iteration-result-text {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Agent's streamed output */
.agent-output {
    color: var(--text);
    line-height: 1.7;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-subtle);
    min-height: 2rem;
}
.agent-output.empty {
    color: var(--text-faint);
    font-style: italic;
    border-top: none;
    padding-top: 0;
    min-height: 0;
}
.agent-output-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

/* Per-agent footer (latency, tokens, cost) */
.agent-card-footer {
    padding: 0.55rem 1.1rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elev-2);
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.agent-card-footer .metric-strong { color: var(--text-strong); }

/* Connector arrow between agent cards */
.agent-handoff {
    align-self: center;
    width: 2px;
    height: 28px;
    background: linear-gradient(to bottom, var(--from-color, var(--cyan)) 0%, var(--to-color, var(--purple)) 100%);
    margin: -1px 0;
    position: relative;
}
.agent-handoff::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--to-color, var(--purple));
    border-bottom: 2px solid var(--to-color, var(--purple));
}
.agent-handoff[data-from="researcher"][data-to="analyst"] {
    --from-color: var(--cyan);
    --to-color: var(--purple);
}
.agent-handoff[data-from="analyst"][data-to="writer"] {
    --from-color: var(--purple);
    --to-color: var(--magenta);
}

/* Aggregate footer */
.pipeline-aggregate {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    display: none;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}
.pipeline-aggregate.visible { display: flex; }
.pipeline-aggregate-title {
    font-weight: 600;
    color: var(--text-strong);
}
.pipeline-aggregate-stats {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.84rem;
    color: var(--text-muted);
}
.pipeline-aggregate-stats .metric-strong { color: var(--text-strong); }

/* Preset buttons */
.preset-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.preset-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.12s ease;
    font-family: inherit;
    text-align: left;
}
.preset-btn:hover {
    background: var(--bg-elev-3);
    border-color: var(--purple);
    color: var(--text);
}


/* ──────────────────────────────────────────────────────────────────────────
   Phase D2 — Governance Sandbox
   Chat on the left, defense panel on the right. Five categories scored by
   a regex fast-path and an LLM guard. EU AI Act / NIST AI RMF mapping
   table lives in a drawer below.
   ────────────────────────────────────────────────────────────────────────── */

.gov-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (max-width: 920px) {
    .gov-layout { grid-template-columns: 1fr; }
}

.gov-chat {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 28rem;
}
.gov-chat-header {
    padding: 0.85rem 1.1rem;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.gov-chat-avatar {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 700;
    font-size: 0.8rem;
}
.gov-chat-title {
    flex: 1;
    color: var(--text-strong);
    font-weight: 600;
}
.gov-chat-title-org {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.4rem;
    font-size: 0.85rem;
}
.gov-chat-status {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--cyan);
    padding: 0.1rem 0.55rem;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 212, 255, 0.06);
}

.gov-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-height: 32rem;
}
.gov-msg {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 90%;
}
.gov-msg-meta {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
}
.gov-msg-bubble {
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.gov-msg-user {
    align-self: flex-end;
}
.gov-msg-user .gov-msg-bubble {
    background: rgba(161, 0, 255, 0.12);
    border: 1px solid rgba(161, 0, 255, 0.3);
    color: var(--text);
}
.gov-msg-bot .gov-msg-bubble {
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    color: var(--text);
}
.gov-msg-blocked .gov-msg-bubble {
    background: rgba(255, 31, 143, 0.08);
    border: 1px solid rgba(255, 31, 143, 0.3);
    color: var(--magenta);
    font-family: var(--mono);
    font-size: 0.85rem;
}
.gov-msg-meta-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    background: rgba(255, 31, 143, 0.15);
    border: 1px solid rgba(255, 31, 143, 0.3);
    border-radius: 3px;
    color: var(--magenta);
    font-size: 0.66rem;
}

.gov-input-wrap {
    border-top: 1px solid var(--border-subtle);
    padding: 0.7rem 1.1rem;
    background: var(--bg-elev-1);
    display: flex;
    gap: 0.55rem;
    align-items: flex-end;
}
.gov-input-wrap textarea {
    flex: 1;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.92rem;
    resize: none;
    min-height: 2.2rem;
    max-height: 8rem;
}
.gov-input-wrap textarea:focus { outline: none; border-color: var(--purple); }

.gov-attack-row {
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg-elev-1);
}
.gov-attack-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
}
.gov-attack-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.gov-attack-btn {
    background: rgba(255, 31, 143, 0.06);
    border: 1px solid rgba(255, 31, 143, 0.25);
    color: var(--magenta);
    padding: 0.35rem 0.7rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    transition: all 0.12s ease;
}
.gov-attack-btn:hover {
    background: rgba(255, 31, 143, 0.16);
    color: var(--text-strong);
}

/* Defense panel */
.gov-panel {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-self: start;
}
.gov-panel-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.gov-panel-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.7rem;
}
.gov-panel-section:first-of-type { border-top: none; padding-top: 0; }
.gov-panel-section-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}

.gov-score-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    align-items: center;
}
.gov-score-name {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.gov-score-bar-wrap {
    grid-column: span 2;
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.gov-score-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan) 0%, var(--gold) 50%, var(--magenta) 100%);
    width: var(--score, 0%);
    transition: width 0.25s ease;
}
.gov-score-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-strong);
}
.gov-score-num.high { color: var(--magenta); }
.gov-score-num.med { color: var(--gold); }

.gov-detection {
    font-family: var(--mono);
    font-size: 0.74rem;
    line-height: 1.5;
    padding: 0.45rem 0.6rem;
    border-radius: 5px;
    margin-bottom: 0.3rem;
}
.gov-detection.regex {
    background: rgba(255, 184, 0, 0.06);
    border: 1px solid rgba(255, 184, 0, 0.25);
    color: var(--gold);
}
.gov-detection.llm {
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--cyan);
}
.gov-detection.empty {
    color: var(--text-faint);
    font-style: italic;
    padding: 0;
    border: none;
    background: none;
}

.gov-mapping {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    margin-top: 0.5rem;
}
.gov-mapping th, .gov-mapping td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.gov-mapping th {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.gov-mapping td.cat { color: var(--text-strong); font-weight: 500; }
.gov-mapping code {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--purple-light);
    background: rgba(161, 0, 255, 0.08);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}


/* ──────────────────────────────────────────────────────────────────────────
   Phase D2 — Architecture Designer
   Use case in, structured architecture out: summary card, six section
   cards, generated Mermaid diagram, KPI list.
   ────────────────────────────────────────────────────────────────────────── */

.arch-result {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.arch-result.visible { display: flex; }

.arch-summary {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    border-left: 3px solid var(--gold);
    line-height: 1.7;
    color: var(--text);
    font-size: 1rem;
}
.arch-summary-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.arch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
}
@media (max-width: 920px) { .arch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .arch-grid { grid-template-columns: 1fr; } }

.arch-section {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 2px solid var(--section-color, var(--purple));
}
.arch-section[data-key="model"] { --section-color: var(--cyan); }
.arch-section[data-key="data"] { --section-color: var(--purple); }
.arch-section[data-key="integration"] { --section-color: #4ADE80; }
.arch-section[data-key="infra"] { --section-color: #60A5FA; }
.arch-section[data-key="governance"] { --section-color: var(--magenta); }
.arch-section[data-key="kpis"] { --section-color: var(--gold); }

.arch-section-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--section-color, var(--purple));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.arch-section-primary {
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.95rem;
}
.arch-section-detail {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.55;
}
.arch-section-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.arch-section-list li {
    font-size: 0.84rem;
    color: var(--text-muted);
    padding: 0.18rem 0.45rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    border-left: 2px solid var(--section-color, var(--purple));
}
.arch-section-rationale {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.55;
}

.arch-tier-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.3rem;
    letter-spacing: 0.04em;
}
.arch-tier-tag[data-tier="minimal"] { background: rgba(74, 222, 128, 0.12); color: #4ADE80; }
.arch-tier-tag[data-tier="limited"] { background: rgba(0, 212, 255, 0.12); color: var(--cyan); }
.arch-tier-tag[data-tier="high"] { background: rgba(255, 184, 0, 0.14); color: var(--gold); }
.arch-tier-tag[data-tier="unacceptable"] { background: rgba(255, 31, 143, 0.14); color: var(--magenta); }

.arch-kpis {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.arch-kpi {
    background: rgba(255, 184, 0, 0.05);
    border: 1px solid rgba(255, 184, 0, 0.2);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
}
.arch-kpi-name {
    color: var(--text-strong);
    font-size: 0.86rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
}
.arch-kpi-target {
    font-family: var(--mono);
    color: var(--gold);
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
}
.arch-kpi-rationale {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.arch-diagram-wrap {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.2rem;
    overflow-x: auto;
    text-align: center;
}
.arch-diagram-wrap svg {
    max-width: 100%;
    height: auto;
}
.arch-diagram-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.7rem;
    text-align: left;
}
.arch-diagram-error {
    background: rgba(255, 31, 143, 0.08);
    border: 1px solid rgba(255, 31, 143, 0.3);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    color: var(--magenta);
    font-family: var(--mono);
    font-size: 0.8rem;
    text-align: left;
}

.arch-meta {
    padding: 0.7rem 1rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
.arch-meta .metric-strong { color: var(--text-strong); }


/* ──────────────────────────────────────────────────────────────────────────
   Cost & FinOps Estimator (pipeline graduate · Strategy tier)
   Sliders + live output + sensitivity matrix + optional LLM synthesis.
   No backend route of its own; uses /api/lab/chat only for the optional
   "Generate FinOps recommendations" button.
   ────────────────────────────────────────────────────────────────────────── */

.cost-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
@media (max-width: 920px) { .cost-layout { grid-template-columns: 1fr; } }

.cost-pane {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
}
.cost-pane-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.85rem;
}

/* Slider control */
.cost-slider {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
}
.cost-slider-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.cost-slider-label {
    font-size: 0.85rem;
    color: var(--text);
}
.cost-slider-value {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-strong);
    min-width: 6em;
    text-align: right;
}
.cost-slider input[type="range"] {
    width: 100%;
    accent-color: var(--purple);
    background: transparent;
}
.cost-slider-hint {
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* Model-mix triple-slider — three sliders that constrain to sum=100 */
.cost-mix {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.95rem;
    margin-bottom: 1rem;
}
.cost-mix-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.55rem;
}
.cost-mix-row {
    display: grid;
    grid-template-columns: 7em 1fr 4em;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}
.cost-mix-name {
    font-size: 0.84rem;
    color: var(--text);
}
.cost-mix-name[data-tier="frontier"] { color: var(--magenta); }
.cost-mix-name[data-tier="workhorse"] { color: var(--cyan); }
.cost-mix-name[data-tier="open"] { color: #4ADE80; }
.cost-mix-pct {
    font-family: var(--mono);
    font-size: 0.84rem;
    color: var(--text-strong);
    text-align: right;
}
.cost-mix-warning {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--magenta);
    margin-top: 0.3rem;
    display: none;
}
.cost-mix-warning.visible { display: block; }

/* Live output */
.cost-headline {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-family: var(--mono);
    color: var(--text-strong);
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.cost-headline-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.cost-headline-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
}
.cost-headline-sub strong { color: var(--text-strong); font-weight: 500; }

.cost-grid-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-top: 1rem;
}
.cost-stat {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
}
.cost-stat-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.cost-stat-value {
    font-family: var(--mono);
    color: var(--text-strong);
    font-size: 1.05rem;
}
.cost-stat-value.gold { color: var(--gold); }
.cost-stat-value.cyan { color: var(--cyan); }

/* Tier breakdown bars */
.cost-breakdown {
    margin-top: 1.2rem;
}
.cost-breakdown-row {
    display: grid;
    grid-template-columns: 7em 1fr 5.5em;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.cost-breakdown-name {
    font-size: 0.84rem;
    color: var(--text-muted);
}
.cost-breakdown-bar-wrap {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}
.cost-breakdown-bar {
    height: 100%;
    width: var(--w, 0%);
    transition: width 0.18s ease;
}
.cost-breakdown-bar[data-tier="frontier"] { background: var(--magenta); }
.cost-breakdown-bar[data-tier="workhorse"] { background: var(--cyan); }
.cost-breakdown-bar[data-tier="open"] { background: #4ADE80; }
.cost-breakdown-amt {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--text-strong);
    text-align: right;
}

/* Caching comparison & break-even */
.cost-callout {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--callout-color, var(--purple));
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
}
.cost-callout[data-kind="caching"] { --callout-color: var(--cyan); }
.cost-callout[data-kind="breakeven"] { --callout-color: var(--gold); }
.cost-callout-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--callout-color, var(--purple));
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.cost-callout strong {
    font-family: var(--mono);
    color: var(--text-strong);
    font-weight: 500;
}

/* Sensitivity matrix */
.cost-sensitivity {
    margin-top: 1.4rem;
}
.cost-sensitivity-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.cost-sensitivity-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.82rem;
}
.cost-sensitivity-table th,
.cost-sensitivity-table td {
    padding: 0.5rem 0.6rem;
    text-align: right;
    border-bottom: 1px solid var(--border-subtle);
}
.cost-sensitivity-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}
.cost-sensitivity-table td.label {
    color: var(--text-muted);
    text-align: left;
    font-size: 0.74rem;
}
.cost-sensitivity-table td.cell {
    color: var(--text);
    background: var(--cell-bg, transparent);
}
.cost-sensitivity-table td.cell.lo { background: rgba(74, 222, 128, 0.08); }
.cost-sensitivity-table td.cell.mid { background: rgba(255, 184, 0, 0.07); }
.cost-sensitivity-table td.cell.hi { background: rgba(255, 31, 143, 0.08); }
.cost-sensitivity-table td.cell.current {
    border: 1px solid var(--purple);
    color: var(--text-strong);
}

/* LLM-generated summary panel */
.cost-summary {
    margin-top: 1.5rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    border-left: 3px solid var(--purple);
    line-height: 1.7;
    color: var(--text);
    font-size: 0.95rem;
    white-space: pre-wrap;
    display: none;
}
.cost-summary.visible { display: block; }
.cost-summary.empty {
    color: var(--text-faint);
    font-style: italic;
    border-left-color: var(--border-soft);
}
.cost-summary-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--purple-light);
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}
.cost-summary-meta {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-subtle);
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.cost-summary-meta .metric-strong { color: var(--text-strong); }

/* Use-case label */
.cost-use-case {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
}
.cost-use-case input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-strong);
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    outline: none;
}
.cost-use-case input::placeholder { color: var(--text-faint); font-weight: 400; }
.cost-use-case-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}


/* ──────────────────────────────────────────────────────────────────────────
   Document Intelligence (pipeline graduate · Knowledge tier)
   Paste a document, one structured-output LLM call, render with inline
   color-coded entity highlights and risk underlines. Right pane shows
   doc-type, summary, grouped entities, severity-sorted risks. Hovering a
   panel item flashes the matching span in the document.
   ────────────────────────────────────────────────────────────────────────── */

.doc-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: start;
}
@media (max-width: 920px) { .doc-layout { grid-template-columns: 1fr; } }

.doc-pane {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.doc-pane-header {
    padding: 0.7rem 1rem;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.doc-pane-header .meta {
    margin-left: auto;
    color: var(--text-faint);
}

.doc-textarea {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    padding: 1rem 1.1rem;
    font-family: var(--mono);
    font-size: 0.86rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 22rem;
}
.doc-textarea:focus { outline: none; }
.doc-textarea[readonly] { color: var(--text-muted); cursor: not-allowed; }

.doc-rendered {
    padding: 1rem 1.1rem;
    font-family: var(--mono);
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 22rem;
    max-height: 36rem;
    overflow-y: auto;
}

/* Entity highlights — subtle background tint by type */
.doc-entity {
    background: var(--ent-bg, rgba(255, 255, 255, 0.06));
    border-bottom: 1px dotted var(--ent-color, var(--text-muted));
    padding: 0 0.1em;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.doc-entity-person       { --ent-color: #00D4FF; --ent-bg: rgba(0, 212, 255, 0.08); }
.doc-entity-org          { --ent-color: #A100FF; --ent-bg: rgba(161, 0, 255, 0.08); }
.doc-entity-date         { --ent-color: #FFB800; --ent-bg: rgba(255, 184, 0, 0.08); }
.doc-entity-money        { --ent-color: #4ADE80; --ent-bg: rgba(74, 222, 128, 0.08); }
.doc-entity-location     { --ent-color: #60A5FA; --ent-bg: rgba(96, 165, 250, 0.08); }
.doc-entity-obligation   { --ent-color: #FF1F8F; --ent-bg: rgba(255, 31, 143, 0.08); }
.doc-entity-other        { --ent-color: var(--text-muted); --ent-bg: rgba(255, 255, 255, 0.05); }

/* Risk highlights — heavier underline by severity */
.doc-risk {
    background: var(--risk-bg, rgba(255, 31, 143, 0.05));
    border-bottom: 2px solid var(--risk-color, var(--magenta));
    padding: 0 0.1em;
    cursor: pointer;
    transition: background 0.12s ease;
}
.doc-risk-low    { --risk-color: var(--cyan);    --risk-bg: rgba(0, 212, 255, 0.08); }
.doc-risk-medium { --risk-color: var(--gold);    --risk-bg: rgba(255, 184, 0, 0.10); }
.doc-risk-high   { --risk-color: var(--magenta); --risk-bg: rgba(255, 31, 143, 0.12); }

.doc-entity.flash, .doc-risk.flash {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 2px var(--ent-color, var(--risk-color, var(--purple)));
}

/* Right-pane analysis */
.doc-analysis {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 40rem;
    overflow-y: auto;
}
.doc-analysis-empty {
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.9rem;
    padding: 1rem 0;
}

.doc-doctype {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
}
.doc-doctype-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.doc-doctype-value {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1.05rem;
    text-transform: capitalize;
}
.doc-doctype-conf {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--cyan);
}

.doc-section-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.doc-summary-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
}
.doc-summary-list li { margin-bottom: 0.35rem; }

.doc-entity-group {
    margin-bottom: 0.7rem;
}
.doc-entity-group-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.84rem;
    color: var(--text);
}
.doc-entity-group-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ent-color, var(--purple));
}
.doc-entity-group-name {
    text-transform: capitalize;
    font-weight: 500;
}
.doc-entity-group-count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-faint);
}
.doc-entity-row {
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.18rem;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 4px;
    border-left: 2px solid var(--ent-color, var(--purple));
    font-size: 0.84rem;
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    align-items: center;
    transition: background 0.12s ease;
}
.doc-entity-row:hover { background: var(--bg-elev-3); }
.doc-entity-row .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.doc-entity-row .conf {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-faint);
}
.doc-entity-row.flash { background: rgba(255, 255, 255, 0.12); }

.doc-risk-row {
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.4rem;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 5px;
    border-left: 3px solid var(--risk-color, var(--magenta));
    cursor: pointer;
    transition: background 0.12s ease;
}
.doc-risk-row:hover { background: var(--bg-elev-3); }
.doc-risk-row.flash { background: rgba(255, 31, 143, 0.12); }
.doc-risk-row-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.doc-risk-severity {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    color: #000;
    background: var(--risk-color, var(--magenta));
    letter-spacing: 0.05em;
}
.doc-risk-category {
    font-weight: 500;
    color: var(--text-strong);
    font-size: 0.86rem;
    text-transform: capitalize;
}
.doc-risk-snippet {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    line-height: 1.55;
    border-left: 1px solid var(--border-subtle);
    padding-left: 0.55rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.doc-risk-rationale {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.55;
    font-style: italic;
}

.doc-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.doc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}
.doc-toolbar .field-hint {
    margin-left: auto;
}

.doc-meta {
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}
.doc-meta .metric-strong { color: var(--text-strong); }


/* ──────────────────────────────────────────────────────────────────────────
   Pipeline-graduates subsection (lab landing)
   Sits between the core 6 grid and the pipeline carousel. Same demo-card
   styling, but in its own grid that grows as more demos graduate.
   ────────────────────────────────────────────────────────────────────────── */
.graduates-section {
    padding: 1rem 0 3rem;
}
.graduates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 720px) { .graduates-grid { grid-template-columns: 1fr; } }


/* ──────────────────────────────────────────────────────────────────────────
   AI Maturity Assessment (pipeline graduate · Strategy tier)
   12-question diagnostic across 5 dimensions, live Canvas radar chart,
   one LLM call generates a 3-phase roadmap with concrete actions.
   ────────────────────────────────────────────────────────────────────────── */

.mat-context {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
}
@media (max-width: 720px) { .mat-context { grid-template-columns: 1fr; } }
.mat-context-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.mat-context select,
.mat-context input {
    width: 100%;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.5rem 0.65rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.9rem;
}
.mat-context select:focus,
.mat-context input:focus { outline: none; border-color: var(--purple); }

.mat-questions {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.mat-question {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--dim-color, var(--purple));
}
.mat-question[data-dim="strategy"]  { --dim-color: var(--gold); }
.mat-question[data-dim="platform"]  { --dim-color: var(--cyan); }
.mat-question[data-dim="data"]      { --dim-color: var(--purple); }
.mat-question[data-dim="people"]    { --dim-color: #4ADE80; }
.mat-question[data-dim="value"]     { --dim-color: var(--magenta); }

.mat-question-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.mat-question-num {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
}
.mat-question-dim {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 0.12rem 0.5rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--dim-color, var(--purple));
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mat-question-text {
    margin-left: auto;
    font-weight: 500;
    color: var(--text-strong);
    font-size: 0.95rem;
    flex: 1;
    text-align: right;
}
@media (max-width: 720px) {
    .mat-question-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .mat-question-text { text-align: left; margin-left: 0; }
}

.mat-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mat-option {
    display: grid;
    grid-template-columns: 1.7em 1fr;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.86rem;
    color: var(--text);
    transition: all 0.12s ease;
}
.mat-option:hover {
    border-color: var(--dim-color, var(--purple));
    background: var(--bg-elev-3);
}
.mat-option.selected {
    border-color: var(--dim-color, var(--purple));
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 3px 0 0 var(--dim-color, var(--purple));
}
.mat-option-score {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--dim-color, var(--purple));
    text-align: center;
    font-weight: 500;
}
.mat-option input[type="radio"] { display: none; }

.mat-progress {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.mat-progress-bar-wrap {
    flex: 1;
    min-width: 12em;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.mat-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--purple) 0%, var(--gold) 100%);
    width: var(--p, 0%);
    transition: width 0.2s ease;
}
.mat-progress-label {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--text-strong);
}

/* ── Profile (radar + score sidebar) ─────────────────────────────── */
.mat-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: stretch;
}
@media (max-width: 920px) { .mat-profile { grid-template-columns: 1fr; } }

.mat-radar-wrap {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.mat-radar-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin: 0 auto;
}
.mat-radar-meta {
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: center;
}

.mat-scores {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.mat-scores-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.mat-score-row {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
}
.mat-score-row:last-of-type { border-bottom: none; }
.mat-score-row-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}
.mat-score-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dim-color, var(--purple));
}
.mat-score-name {
    flex: 1;
    color: var(--text-strong);
    font-weight: 500;
    font-size: 0.92rem;
}
.mat-score-num {
    font-family: var(--mono);
    color: var(--text-strong);
    font-size: 0.94rem;
}
.mat-score-num small {
    color: var(--text-muted);
    margin-left: 0.2em;
    font-size: 0.78rem;
}
.mat-score-bar-wrap {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.mat-score-bar {
    height: 100%;
    width: var(--score, 0%);
    background: var(--dim-color, var(--purple));
    transition: width 0.2s ease;
}

/* Color hooks for scores */
.mat-score-row[data-dim="strategy"]  { --dim-color: var(--gold); }
.mat-score-row[data-dim="platform"]  { --dim-color: var(--cyan); }
.mat-score-row[data-dim="data"]      { --dim-color: var(--purple); }
.mat-score-row[data-dim="people"]    { --dim-color: #4ADE80; }
.mat-score-row[data-dim="value"]     { --dim-color: var(--magenta); }

/* ── Roadmap output ──────────────────────────────────────────────── */
.mat-roadmap {
    margin-top: 1.5rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
}
.mat-roadmap.visible { display: flex; }

.mat-summary-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    border-left: 3px solid var(--gold);
    line-height: 1.7;
    color: var(--text);
}
.mat-summary-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.mat-strengths-gaps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
@media (max-width: 720px) { .mat-strengths-gaps { grid-template-columns: 1fr; } }
.mat-callout {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 0.95rem 1.05rem;
}
.mat-callout-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.mat-callout[data-kind="strengths"] {
    border-left: 3px solid #4ADE80;
}
.mat-callout[data-kind="strengths"] .mat-callout-eyebrow { color: #4ADE80; }
.mat-callout[data-kind="gaps"] {
    border-left: 3px solid var(--magenta);
}
.mat-callout[data-kind="gaps"] .mat-callout-eyebrow { color: var(--magenta); }
.mat-callout ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mat-callout li {
    color: var(--text);
    font-size: 0.88rem;
    padding-left: 0.95em;
    position: relative;
    line-height: 1.55;
}
.mat-callout li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-faint);
}

.mat-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
}
@media (max-width: 920px) { .mat-phases { grid-template-columns: 1fr; } }

.mat-phase {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.05rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-top: 2px solid var(--phase-color, var(--purple));
}
.mat-phase[data-idx="0"] { --phase-color: var(--cyan); }
.mat-phase[data-idx="1"] { --phase-color: var(--purple); }
.mat-phase[data-idx="2"] { --phase-color: var(--gold); }
.mat-phase-eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--phase-color, var(--purple));
}
.mat-phase-title {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.mat-phase-theme {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}
.mat-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.3rem;
}
.mat-action {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
}
.mat-action-title { display: block; }
.mat-action-meta {
    margin-top: 0.3rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
}
.mat-action-tag {
    padding: 0.05em 0.4em;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}
.mat-action-tag[data-effort="small"]  { color: #4ADE80; border-color: rgba(74, 222, 128, 0.25); }
.mat-action-tag[data-effort="medium"] { color: var(--gold); border-color: rgba(255, 184, 0, 0.25); }
.mat-action-tag[data-effort="large"]  { color: var(--magenta); border-color: rgba(255, 31, 143, 0.25); }


/* ──────────────────────────────────────────────────────────────────────────
   Self-Correcting Agent (pipeline graduate · Autonomy tier)
   Reuses .agent-card / .agent-handoff infrastructure from Agent Studio.
   Adds three new role colors (generate / critique / refine), a diff
   renderer for v1 → v2, view-mode tabs, and a judge verdict card.
   ────────────────────────────────────────────────────────────────────────── */

.agent-card[data-role="generate"] { --agent-color: var(--cyan); }
.agent-card[data-role="critique"] { --agent-color: var(--gold); }
.agent-card[data-role="refine"]   { --agent-color: var(--magenta); }
.agent-handoff[data-from="generate"][data-to="critique"] { --from-color: var(--cyan); --to-color: var(--gold); }
.agent-handoff[data-from="critique"][data-to="refine"]   { --from-color: var(--gold); --to-color: var(--magenta); }

/* View-mode tabs above the v1 → v2 comparison */
.scor-view-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 1.5rem 0 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}
.scor-view-tabs-label {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-right: 0.4rem;
}
.scor-view-tab {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.4rem 0.85rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    transition: all 0.12s ease;
}
.scor-view-tab:hover { background: var(--bg-elev-3); color: var(--text); }
.scor-view-tab.active {
    background: var(--bg-elev-3);
    border-color: var(--purple);
    color: var(--text-strong);
}

/* Diff view — word-level deletions and insertions */
.scor-diff {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.94rem;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}
.scor-diff del {
    background: rgba(255, 31, 143, 0.10);
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 31, 143, 0.6);
    text-decoration-thickness: 1.5px;
    padding: 0 0.15em;
    border-radius: 3px;
}
.scor-diff ins {
    background: rgba(74, 222, 128, 0.12);
    color: var(--text-strong);
    text-decoration: none;
    padding: 0 0.15em;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(74, 222, 128, 0.5);
}
.scor-diff-meta {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border-subtle);
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.scor-diff-meta .ins-count { color: #4ADE80; }
.scor-diff-meta .del-count { color: var(--magenta); }

/* Side-by-side comparison */
.scor-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 800px) { .scor-compare { grid-template-columns: 1fr; } }
.scor-compare-pane {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    border-top: 2px solid var(--pane-color, var(--purple));
}
.scor-compare-pane[data-version="v1"] { --pane-color: var(--cyan); }
.scor-compare-pane[data-version="v2"] { --pane-color: var(--magenta); }
.scor-compare-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--pane-color, var(--purple));
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.scor-compare-text {
    color: var(--text);
    line-height: 1.75;
    font-size: 0.94rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.scor-result {
    display: none;
    flex-direction: column;
    margin-top: 0;
}
.scor-result.visible { display: flex; }

/* Judge verdict card */
.scor-judge-row {
    margin-top: 1.2rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}
.scor-verdict {
    margin-top: 1rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    border-left: 3px solid var(--verdict-color, var(--purple));
    display: none;
}
.scor-verdict.visible { display: block; }
.scor-verdict[data-winner="v2"]   { --verdict-color: var(--magenta); }
.scor-verdict[data-winner="v1"]   { --verdict-color: var(--cyan); }
.scor-verdict[data-winner="tied"] { --verdict-color: var(--gold); }

.scor-verdict-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--verdict-color, var(--purple));
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.scor-verdict-headline {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.scor-verdict-rationale {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
    font-style: italic;
}
.scor-verdict-grid {
    display: grid;
    grid-template-columns: 9em repeat(4, 1fr);
    gap: 0.4rem 0.7rem;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.82rem;
}
.scor-verdict-grid .head {
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-subtle);
}
.scor-verdict-grid .row-label {
    color: var(--text-strong);
    font-weight: 500;
}
.scor-verdict-grid .row-label.v1 { color: var(--cyan); }
.scor-verdict-grid .row-label.v2 { color: var(--magenta); }
.scor-verdict-grid .cell {
    color: var(--text);
}
.scor-verdict-grid .cell.total {
    color: var(--text-strong);
    font-weight: 500;
}
.scor-verdict-grid .cell.winner-marker {
    color: var(--gold);
    font-weight: 500;
}


/* ──────────────────────────────────────────────────────────────────────────
   Knowledge Graph Builder (pipeline graduate · Knowledge tier)
   Canvas force-directed graph + sidebar with grouped entities and
   relation list. One structured-output LLM call extracts the graph
   from a corpus source.
   ────────────────────────────────────────────────────────────────────────── */

.kg-source-picker {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.kg-source-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.45rem 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    transition: all 0.12s ease;
    border-left: 3px solid var(--source-color, var(--purple));
}
.kg-source-btn:hover {
    background: var(--bg-elev-3);
    color: var(--text);
}
.kg-source-btn.active {
    background: var(--bg-elev-3);
    color: var(--text-strong);
    border-color: var(--source-color, var(--purple));
}

.kg-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: stretch;
}
@media (max-width: 980px) { .kg-layout { grid-template-columns: 1fr; } }

.kg-canvas-wrap {
    position: relative;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}
.kg-canvas {
    display: block;
    width: 100%;
    height: 540px;
    cursor: grab;
}
.kg-canvas:active { cursor: grabbing; }

.kg-canvas-toolbar {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    z-index: 4;
}
.kg-canvas-toolbar button {
    background: rgba(10, 10, 15, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    transition: all 0.12s;
}
.kg-canvas-toolbar button:hover { color: var(--text); border-color: var(--border-soft); }

.kg-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--text-faint);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.kg-legend {
    position: absolute;
    bottom: 0.7rem;
    left: 0.7rem;
    background: rgba(10, 10, 15, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text-muted);
    z-index: 3;
    display: none;
}
.kg-legend.visible { display: block; }
.kg-legend-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.kg-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--type-color, var(--purple));
}

.kg-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(10, 10, 15, 0.96);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text);
    max-width: 280px;
    transform: translate(-50%, -110%);
    z-index: 6;
    display: none;
}
.kg-tooltip.visible { display: block; }
.kg-tooltip-type {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--type-color, var(--purple));
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kg-tooltip-label { color: var(--text-strong); font-weight: 500; }
.kg-tooltip-meta {
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 0.25rem;
    font-family: var(--mono);
}

.kg-sidebar {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-height: 540px;
    overflow-y: auto;
}
.kg-sidebar-empty {
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.9rem;
    padding: 1rem 0;
}

.kg-summary {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
}

.kg-section-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.kg-entity-group {
    margin-bottom: 0.55rem;
}
.kg-entity-group-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text);
    margin-bottom: 0.25rem;
    text-transform: capitalize;
}
.kg-entity-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--type-color, var(--purple));
}
.kg-entity-group-count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
}

.kg-entity-row {
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.025);
    margin-bottom: 0.18rem;
    font-size: 0.84rem;
    color: var(--text);
    cursor: pointer;
    border-left: 2px solid var(--type-color, var(--purple));
    transition: background 0.12s ease;
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    align-items: center;
}
.kg-entity-row:hover { background: var(--bg-elev-3); }
.kg-entity-row.selected { background: rgba(255, 255, 255, 0.06); }
.kg-entity-row .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.kg-entity-row .imp {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
}

.kg-relations-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.kg-relation-row {
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.12s ease;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.35rem;
    align-items: center;
}
.kg-relation-row:hover { background: var(--bg-elev-3); }
.kg-relation-row .from,
.kg-relation-row .to {
    color: var(--text-strong);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kg-relation-row .from { text-align: right; }
.kg-relation-row .to { text-align: left; }
.kg-relation-row .verb {
    font-family: var(--mono);
    color: var(--text-muted);
    font-size: 0.74rem;
    padding: 0.1em 0.35em;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    white-space: nowrap;
}

.kg-meta {
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}
.kg-meta .metric-strong { color: var(--text-strong); }


/* ──────────────────────────────────────────────────────────────────────────
   Eval Harness Visualizer (pipeline graduate · Foundation tier)
   15 tests across 7 categories, seven scoring methods, parallel execution
   with concurrency cap, localStorage-backed baseline comparison.
   ────────────────────────────────────────────────────────────────────────── */

.eval-overview {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.2rem;
    align-items: start;
}
@media (max-width: 720px) { .eval-overview { grid-template-columns: 1fr; } }

.eval-overview-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-right: 1px solid var(--border-subtle);
    padding-right: 1.2rem;
}
@media (max-width: 720px) {
    .eval-overview-stats { border-right: 0; padding-right: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); }
}
.eval-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.eval-stat-num {
    font-family: var(--mono);
    font-size: 1.4rem;
    color: var(--text-strong);
}
.eval-stat-label {
    color: var(--text-muted);
    font-size: 0.86rem;
}
.eval-overview-categories {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.eval-cat-row {
    display: grid;
    grid-template-columns: 9.5em 1fr 4em;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.84rem;
}
.eval-cat-name {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--cat-color, var(--text));
    text-transform: capitalize;
    letter-spacing: 0.04em;
}
.eval-cat-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.eval-cat-bar-pass {
    height: 100%;
    background: var(--cat-color, var(--text));
    width: var(--w-pass, 0%);
    transition: width 0.25s ease;
}
.eval-cat-bar-fail {
    height: 100%;
    background: rgba(255, 31, 143, 0.45);
    width: var(--w-fail, 0%);
    transition: width 0.25s ease;
}
.eval-cat-count {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
}

/* Category color hooks */
.eval-row[data-cat="factual"],     .eval-cat-row[data-cat="factual"]     { --cat-color: var(--cyan); }
.eval-row[data-cat="safety"],      .eval-cat-row[data-cat="safety"]      { --cat-color: var(--magenta); }
.eval-row[data-cat="structured"],  .eval-cat-row[data-cat="structured"]  { --cat-color: var(--gold); }
.eval-row[data-cat="format"],      .eval-cat-row[data-cat="format"]      { --cat-color: var(--purple); }
.eval-row[data-cat="citation"],    .eval-cat-row[data-cat="citation"]    { --cat-color: #4ADE80; }
.eval-row[data-cat="reasoning"],   .eval-cat-row[data-cat="reasoning"]   { --cat-color: #60A5FA; }
.eval-row[data-cat="composition"], .eval-cat-row[data-cat="composition"] { --cat-color: var(--text-muted); }

/* Toolbar */
.eval-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.eval-toolbar .field-hint { margin-left: auto; }

/* Test rows */
.eval-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.eval-row {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--cat-color, var(--text));
    padding: 0.7rem 0.95rem;
    cursor: pointer;
    transition: background 0.12s ease;
}
.eval-row:hover { background: var(--bg-elev-3); }
.eval-row.expanded { background: var(--bg-elev-3); }
.eval-row-head {
    display: grid;
    grid-template-columns: 5em 8em 1fr 9em 7em 5em;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.86rem;
}
@media (max-width: 920px) {
    .eval-row-head { grid-template-columns: 5em 1fr 6em 4em; }
    .eval-row-head .col-cat-name,
    .eval-row-head .col-score-bar { display: none; }
}
.col-id {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
}
.col-cat-name {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--cat-color, var(--text));
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.col-prompt {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-score-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.col-score-bar > span {
    display: block;
    height: 100%;
    width: var(--score, 0%);
    background: var(--cat-color, var(--text));
    transition: width 0.25s ease;
}
.col-latency {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
}
.col-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.col-status[data-state="pending"]  { color: var(--text-faint); }
.col-status[data-state="running"]  { color: var(--cyan); }
.col-status[data-state="pass"]     { color: #4ADE80; }
.col-status[data-state="fail"]     { color: var(--magenta); }
.col-status[data-state="error"]    { color: var(--gold); }
.col-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.col-status[data-state="running"] .dot {
    animation: eval-pulse 1.1s ease-in-out infinite;
}
@keyframes eval-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.1); }
}

/* Expanded row details */
.eval-row-details {
    display: none;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text);
}
.eval-row.expanded .eval-row-details { display: block; }
.eval-row-grid {
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.6rem;
}
.eval-row-grid .label {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.eval-row-grid pre {
    background: var(--bg-base);
    border-radius: 4px;
    padding: 0.55rem 0.75rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow-y: auto;
}
.eval-scoring-detail {
    padding: 0.55rem 0.7rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--cat-color, var(--text-muted));
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text);
}
.eval-scoring-detail strong { color: var(--text-strong); font-weight: 500; }
.eval-scoring-detail .pass-text { color: #4ADE80; }
.eval-scoring-detail .fail-text { color: var(--magenta); }

/* Aggregate panel */
.eval-aggregate {
    display: none;
    margin-top: 1.5rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    border-top: 2px solid var(--cyan);
}
.eval-aggregate.visible { display: block; }
.eval-aggregate-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--cyan);
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.eval-aggregate-headline {
    font-size: 1.7rem;
    font-family: var(--mono);
    color: var(--text-strong);
    margin-bottom: 0.4rem;
}
.eval-aggregate-headline .pct { color: #4ADE80; }
.eval-aggregate-headline .pct.warn { color: var(--gold); }
.eval-aggregate-headline .pct.bad { color: var(--magenta); }
.eval-aggregate-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin: 0.9rem 0 1rem;
}
@media (max-width: 720px) { .eval-aggregate-grid { grid-template-columns: repeat(2, 1fr); } }
.eval-agg-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.55rem 0.7rem;
}
.eval-agg-stat-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.eval-agg-stat-value {
    font-family: var(--mono);
    color: var(--text-strong);
    font-size: 1rem;
    margin-top: 0.15rem;
}

/* Baseline delta indicators */
.eval-delta {
    margin-left: 0.4em;
    font-family: var(--mono);
    font-size: 0.82rem;
}
.eval-delta.up   { color: #4ADE80; }
.eval-delta.down { color: var(--magenta); }
.eval-delta.flat { color: var(--text-muted); }

.eval-baseline {
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 184, 0, 0.05);
    border: 1px solid rgba(255, 184, 0, 0.18);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}
.eval-baseline strong { color: var(--text); font-weight: 500; }


/* ──────────────────────────────────────────────────────────────────────────
   Voice of Customer Synthesizer (Value tier · CX/Product)
   Cluster 30-40 customer comments into themes with sentiment, severity,
   illustrative quotes, and recommended actions.
   ────────────────────────────────────────────────────────────────────────── */

.voc-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}
.voc-input-wrap {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.2rem;
}
.voc-input-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.voc-counter {
    color: var(--text-strong);
}
.voc-textarea {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.84rem;
    line-height: 1.5;
    padding: 0.85rem 1rem;
    resize: vertical;
    min-height: 16rem;
}
.voc-textarea:focus { outline: none; }
.voc-textarea::placeholder { color: var(--text-faint); }

/* Sentiment distribution bar (above theme grid) */
.voc-distribution {
    display: none;
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    border-left: 3px solid var(--tier-value);
}
.voc-distribution.visible { display: block; }
.voc-distribution-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}
.voc-distribution-summary {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}
.voc-bar-stacked {
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.06);
}
.voc-bar-segment {
    height: 100%;
    transition: flex-basis 0.25s ease;
}
.voc-bar-segment[data-sent="positive"] { background: #4ADE80; }
.voc-bar-segment[data-sent="mixed"]    { background: var(--gold); }
.voc-bar-segment[data-sent="negative"] { background: var(--magenta); }
.voc-bar-legend {
    margin-top: 0.55rem;
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.voc-bar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.voc-bar-legend-dot {
    width: 9px; height: 9px; border-radius: 50%;
}
.voc-bar-legend-dot[data-sent="positive"] { background: #4ADE80; }
.voc-bar-legend-dot[data-sent="mixed"]    { background: var(--gold); }
.voc-bar-legend-dot[data-sent="negative"] { background: var(--magenta); }

/* Sort / filter controls */
.voc-controls {
    display: none;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.voc-controls.visible { display: flex; }
.voc-controls-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-right: 0.3rem;
}
.voc-control-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.4rem 0.75rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    transition: all 0.12s;
}
.voc-control-btn:hover { background: var(--bg-elev-3); color: var(--text); }
.voc-control-btn.active {
    background: var(--bg-elev-3);
    border-color: var(--tier-value);
    color: var(--text-strong);
}

/* Theme grid */
.voc-themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.voc-theme {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    border-left: 3px solid var(--sent-color, var(--tier-value));
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: opacity 0.18s ease;
}
.voc-theme[data-sent="positive"] { --sent-color: #4ADE80; }
.voc-theme[data-sent="mixed"]    { --sent-color: var(--gold); }
.voc-theme[data-sent="negative"] { --sent-color: var(--magenta); }
.voc-theme.dimmed { opacity: 0.32; }

.voc-theme-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.voc-sentiment-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--sent-color, var(--tier-value));
    flex-shrink: 0;
}
.voc-theme-name {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1rem;
    flex: 1;
    line-height: 1.3;
}
.voc-severity {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.voc-severity[data-sev="low"]    { color: var(--cyan); }
.voc-severity[data-sev="medium"] { color: var(--gold); }
.voc-severity[data-sev="high"]   { color: var(--magenta); }

.voc-theme-desc {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.voc-theme-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.voc-theme-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.voc-theme-bar-fill {
    height: 100%;
    background: var(--sent-color, var(--tier-value));
    width: var(--w, 0%);
    transition: width 0.25s ease;
}
.voc-theme-bar-label {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-strong);
}

.voc-quotes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.voc-quote {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.55;
    font-style: italic;
    padding: 0.4rem 0.6rem;
    border-left: 2px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 0 5px 5px 0;
}
.voc-quote::before { content: "\201C"; color: var(--text-faint); }
.voc-quote::after { content: "\201D"; color: var(--text-faint); }

.voc-action {
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 5px;
    border-left: 2px solid var(--sent-color, var(--tier-value));
}
.voc-action-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--sent-color, var(--tier-value));
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.voc-action-text {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
}

.voc-meta {
    margin-top: 1.2rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}
.voc-meta .metric-strong { color: var(--text-strong); }

/* ============================================================
   Meeting Intelligence — VALUE · 14 · SALES
   Reuses .voc-presets, .voc-input-wrap, .voc-input-header,
   .voc-counter, .voc-textarea, .voc-meta for the input panel.
   ============================================================ */

/* Overview card (top of results) */
.mi-overview {
    display: none;
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    border-left: 3px solid var(--tier-value);
}
.mi-overview.visible { display: block; }
.mi-overview-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}
.mi-overview-summary {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.7rem;
}
.mi-overview-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mi-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.mi-chip strong { color: var(--text-strong); font-weight: 500; }
.mi-chip[data-sentiment="positive"] { border-color: #4ADE80; color: #4ADE80; }
.mi-chip[data-sentiment="neutral"]  { border-color: var(--cyan); color: var(--cyan); }
.mi-chip[data-sentiment="tense"]    { border-color: var(--magenta); color: var(--magenta); }

/* Two-column grid for structured output */
.mi-grid {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.mi-grid.visible { display: grid; }
@media (max-width: 820px) {
    .mi-grid.visible { grid-template-columns: 1fr; }
}

.mi-section {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.mi-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.mi-section-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mi-section-count {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.mi-empty {
    color: var(--text-faint);
    font-size: 0.84rem;
    font-style: italic;
}

/* Attendee chips */
.mi-attendees {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.mi-attendee {
    display: inline-flex;
    flex-direction: column;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    line-height: 1.3;
}
.mi-attendee-name {
    font-size: 0.85rem;
    color: var(--text-strong);
    font-weight: 500;
}
.mi-attendee-role {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* Decision list */
.mi-decision {
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: rgba(74, 222, 128, 0.06);
    border-left: 2px solid var(--tier-value);
}
.mi-decision-text {
    color: var(--text-strong);
    font-size: 0.88rem;
    line-height: 1.5;
}
.mi-decision-context {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 0.25rem;
    line-height: 1.45;
}

/* Action item card */
.mi-action {
    padding: 0.65rem 0.8rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--cyan);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mi-action-task {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
}
.mi-action-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.1rem;
}
.mi-action-owner {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 0.72rem;
}
.mi-action-due {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.mi-action-priority {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.mi-action-priority[data-priority="low"]    { color: var(--cyan); }
.mi-action-priority[data-priority="medium"] { color: var(--gold); }
.mi-action-priority[data-priority="high"]   { color: var(--magenta); }

/* Open question */
.mi-question {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--gold);
}
.mi-question-text {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
}
.mi-question-source {
    margin-top: 0.2rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* Risk row */
.mi-risk {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--magenta);
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.mi-risk[data-severity="low"]    { border-left-color: var(--cyan); }
.mi-risk[data-severity="medium"] { border-left-color: var(--gold); }
.mi-risk[data-severity="high"]   { border-left-color: var(--magenta); }
.mi-risk-text {
    flex: 1;
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
}
.mi-risk-severity {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.mi-risk[data-severity="low"]    .mi-risk-severity { color: var(--cyan); }
.mi-risk[data-severity="medium"] .mi-risk-severity { color: var(--gold); }
.mi-risk[data-severity="high"]   .mi-risk-severity { color: var(--magenta); }

/* Topic with time-spent bar */
.mi-topic {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--purple-light);
}
.mi-topic-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.mi-topic-name {
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 500;
}
.mi-topic-time {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.mi-topic-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.mi-topic-bar-fill {
    height: 100%;
    background: var(--purple-light);
    width: var(--w, 0%);
}
.mi-topic-points {
    margin: 0;
    padding-left: 1.05rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}
.mi-topic-points li { margin-bottom: 0.15rem; }

/* Deal signal callout (only when present) */
.mi-deal-signal {
    display: none;
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid var(--tier-value);
    border-radius: var(--radius);
}
.mi-deal-signal.visible { display: block; }
.mi-deal-signal-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.mi-deal-signal-text {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ============================================================
   Earnings Call Analyst — VALUE · 15 · FINANCE/IR
   Reuses .voc-* input panel and .mi-overview/.mi-chip patterns.
   ============================================================ */

/* Number cards grid (top row of results) */
.eca-numbers {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.eca-numbers.visible { display: grid; }
.eca-number-card {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--tier-value);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.eca-number-value {
    font-family: var(--mono);
    font-size: 1.4rem;
    color: var(--text-strong);
    font-weight: 600;
    line-height: 1.15;
}
.eca-number-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.eca-number-comparison {
    font-family: var(--mono);
    font-size: 0.72rem;
    margin-top: 0.2rem;
    letter-spacing: 0.03em;
}
.eca-number-comparison[data-delta="up"]   { color: #4ADE80; }
.eca-number-comparison[data-delta="down"] { color: var(--magenta); }
.eca-number-comparison[data-delta="flat"] { color: var(--text-muted); }
.eca-number-period {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
}

/* Two-column rows (drivers/headwinds, allocation/priorities) */
.eca-row {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.eca-row.visible { display: grid; }
@media (max-width: 820px) {
    .eca-row.visible { grid-template-columns: 1fr; }
}

.eca-section {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.eca-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.eca-section-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.eca-section-count {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.eca-empty {
    color: var(--text-faint);
    font-size: 0.84rem;
    font-style: italic;
}

/* Growth driver */
.eca-driver {
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: rgba(74, 222, 128, 0.06);
    border-left: 2px solid #4ADE80;
}
.eca-driver-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.eca-driver-name {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 500;
}
.eca-magnitude {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.eca-magnitude[data-mag="primary"]   { color: #4ADE80; }
.eca-magnitude[data-mag="secondary"] { color: var(--cyan); }
.eca-magnitude[data-mag="minor"]     { color: var(--text-muted); }
.eca-driver-desc {
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}
.eca-driver-attribution {
    margin-top: 0.25rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Headwind */
.eca-headwind {
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--magenta);
}
.eca-headwind[data-sev="low"]    { border-left-color: var(--cyan); }
.eca-headwind[data-sev="medium"] { border-left-color: var(--gold); }
.eca-headwind[data-sev="high"]   { border-left-color: var(--magenta); }
.eca-headwind-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.eca-headwind-name {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 500;
}
.eca-severity {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.eca-severity[data-sev="low"]    { color: var(--cyan); }
.eca-severity[data-sev="medium"] { color: var(--gold); }
.eca-severity[data-sev="high"]   { color: var(--magenta); }
.eca-headwind-desc {
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}
.eca-headwind-outlook {
    margin-top: 0.25rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Capital allocation row */
.eca-allocation {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.eca-allocation-cat {
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    background: rgba(0, 217, 255, 0.06);
    align-self: flex-start;
}
.eca-allocation-body { flex: 1; }
.eca-allocation-signal {
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
}
.eca-allocation-amount {
    margin-top: 0.2rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-strong);
}

/* Strategic priority */
.eca-priority {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid var(--purple-light);
}
.eca-priority-name {
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
}
.eca-priority-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Q&A highlights (full-width section) */
.eca-qa-section {
    display: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.6rem;
}
.eca-qa-section.visible { display: flex; }
.eca-qa {
    padding: 0.7rem 0.85rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gold);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.eca-qa-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.eca-qa-analyst {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.eca-qa-directness {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.eca-qa-directness[data-d="direct"]    { color: #4ADE80; }
.eca-qa-directness[data-d="hedged"]    { color: var(--gold); }
.eca-qa-directness[data-d="deflected"] { color: var(--magenta); }
.eca-qa-question {
    color: var(--text-strong);
    font-size: 0.88rem;
    line-height: 1.5;
}
.eca-qa-question::before {
    content: "Q ";
    font-family: var(--mono);
    color: var(--text-faint);
    font-weight: 700;
    margin-right: 0.2rem;
}
.eca-qa-answer {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}
.eca-qa-answer::before {
    content: "A ";
    font-family: var(--mono);
    color: var(--text-faint);
    font-weight: 700;
    margin-right: 0.2rem;
}

/* Forward guidance callout */
.eca-guidance {
    display: none;
    margin-top: 0;
    padding: 0.85rem 1.1rem;
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid var(--tier-value);
    border-radius: var(--radius);
}
.eca-guidance.visible { display: block; }
.eca-guidance-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.eca-guidance-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.4rem;
    align-items: baseline;
}
.eca-guidance-metric {
    color: var(--text-strong);
    font-size: 0.95rem;
    font-weight: 500;
}
.eca-guidance-value {
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--text-strong);
}
.eca-guidance-period {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.eca-guidance-vs {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.eca-guidance-vs[data-vs="above"]         { color: #4ADE80; }
.eca-guidance-vs[data-vs="inline"]        { color: var(--cyan); }
.eca-guidance-vs[data-vs="below"]         { color: var(--magenta); }
.eca-guidance-vs[data-vs="not_addressed"] { color: var(--text-muted); }

/* ============================================================
   Regulatory Change Impact — VALUE · 16 · RISK/COMPLIANCE
   Two-input panel + impact matrix + severity-sorted action list
   ============================================================ */

/* Two-textarea input panel */
.rci-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}
@media (max-width: 820px) {
    .rci-inputs { grid-template-columns: 1fr; }
}
.rci-input-col {
    display: flex;
    flex-direction: column;
}
.rci-input-col .voc-input-wrap {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.rci-input-col .voc-textarea {
    min-height: 13rem;
    flex: 1;
}

/* Urgency / effort callout (above matrix) */
.rci-callout {
    display: none;
    padding: 0.85rem 1.1rem;
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid var(--tier-value);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: baseline;
}
.rci-callout.visible { display: flex; }
.rci-callout-item {
    display: flex;
    flex-direction: column;
}
.rci-callout-item-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.rci-callout-item-value {
    color: var(--text-strong);
    font-size: 0.92rem;
    line-height: 1.4;
}
.rci-urgency {
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    display: inline-block;
}
.rci-urgency[data-u="immediate"]  { color: var(--magenta); }
.rci-urgency[data-u="quarter"]    { color: var(--gold); }
.rci-urgency[data-u="year"]       { color: var(--cyan); }
.rci-urgency[data-u="long-term"]  { color: var(--text-muted); }

/* Severity legend */
.rci-legend {
    display: none;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.7rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    align-items: center;
}
.rci-legend.visible { display: flex; }
.rci-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.rci-legend-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    border: 1px solid;
}
.rci-legend-dot[data-sev="high"]            { background: rgba(255, 0, 200, 0.2); border-color: var(--magenta); }
.rci-legend-dot[data-sev="medium"]          { background: rgba(255, 200, 0, 0.18); border-color: var(--gold); }
.rci-legend-dot[data-sev="low"]             { background: rgba(0, 217, 255, 0.15); border-color: var(--cyan); }
.rci-legend-dot[data-sev="not_applicable"]  { background: var(--bg-elev-2); border-color: var(--border-subtle); }

/* Impact matrix */
.rci-matrix-wrap {
    display: none;
    overflow-x: auto;
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
}
.rci-matrix-wrap.visible { display: block; }
.rci-matrix {
    display: grid;
    gap: 4px;
    min-width: 650px;
}
.rci-matrix-corner {
    padding: 0.55rem 0.7rem;
    background: transparent;
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.rci-matrix-col-head, .rci-matrix-row-head {
    padding: 0.6rem 0.7rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-strong);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    line-height: 1.35;
}
.rci-matrix-col-head { text-align: center; }
.rci-matrix-col-head-article {
    color: var(--text-muted);
    font-size: 0.66rem;
    margin-bottom: 0.2rem;
    display: block;
}
.rci-matrix-row-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rci-matrix-row-head-cat {
    color: var(--text-muted);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}
.rci-matrix-cell {
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    display: flex;
    align-items: flex-start;
    min-height: 86px;
    font-size: 0.78rem;
    line-height: 1.4;
}
.rci-matrix-cell:hover { transform: translateY(-1px); }
.rci-matrix-cell[data-sev="high"]   { background: rgba(255, 0, 200, 0.13); border-color: var(--magenta); color: var(--text-strong); }
.rci-matrix-cell[data-sev="medium"] { background: rgba(255, 200, 0, 0.10); border-color: var(--gold); color: var(--text); }
.rci-matrix-cell[data-sev="low"]    { background: rgba(0, 217, 255, 0.08); border-color: var(--cyan); color: var(--text); }
.rci-matrix-cell[data-sev="not_applicable"] {
    background: var(--bg-elev-2);
    border-color: var(--border-subtle);
    color: var(--text-faint);
    cursor: default;
    font-style: italic;
}
.rci-matrix-cell-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Action list */
.rci-actions-section {
    display: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.6rem;
}
.rci-actions-section.visible { display: flex; }
.rci-action-card {
    padding: 0.7rem 0.85rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gold);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: outline 0.18s ease, background 0.18s ease;
}
.rci-action-card[data-sev="high"]   { border-left-color: var(--magenta); }
.rci-action-card[data-sev="medium"] { border-left-color: var(--gold); }
.rci-action-card[data-sev="low"]    { border-left-color: var(--cyan); }
.rci-action-card.highlighted {
    outline: 2px solid var(--tier-value);
    outline-offset: 1px;
}
.rci-action-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.rci-action-pill {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
}
.rci-action-pill[data-kind="process"]     { color: var(--purple-light); border-color: var(--purple-light); }
.rci-action-pill[data-kind="requirement"] { color: var(--cyan); border-color: var(--cyan); }
.rci-action-severity {
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.rci-action-severity[data-sev="high"]   { color: var(--magenta); }
.rci-action-severity[data-sev="medium"] { color: var(--gold); }
.rci-action-severity[data-sev="low"]    { color: var(--cyan); }
.rci-action-gap {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
}
.rci-action-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    margin-right: 0.4rem;
}
.rci-action-required {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
    padding: 0.45rem 0.6rem;
    background: rgba(74, 222, 128, 0.06);
    border-left: 2px solid var(--tier-value);
    border-radius: 0 4px 4px 0;
}
.rci-action-required-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--tier-value);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.2rem;
}
.rci-action-owner {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* ============================================================
   RFP / Vendor Comparison Matrix — VALUE · 17 · PROCUREMENT
   Reuses .rci-inputs, .voc-input-wrap. Adds a SCORED matrix
   (1-5 cell color gradient), per-vendor totals cards, and a
   recommendation callout at the top.
   ============================================================ */

/* Recommendation callout (top of results, after overview) */
.rfp-recommendation {
    display: none;
    padding: 1rem 1.2rem;
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid var(--tier-value);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.7rem;
}
.rfp-recommendation.visible { display: flex; }
.rfp-rec-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.rfp-rec-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--tier-value);
    letter-spacing: 0.06em;
}
.rfp-rec-vendor {
    color: var(--text-strong);
    font-size: 1.15rem;
    font-weight: 600;
}
.rfp-rec-confidence {
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.rfp-rec-confidence[data-c="high"]   { color: #4ADE80; }
.rfp-rec-confidence[data-c="medium"] { color: var(--gold); }
.rfp-rec-confidence[data-c="low"]    { color: var(--magenta); }
.rfp-rec-rationale {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
}
.rfp-rec-caveats {
    background: rgba(255, 200, 0, 0.04);
    border-left: 2px solid var(--gold);
    padding: 0.55rem 0.7rem;
    border-radius: 0 4px 4px 0;
}
.rfp-rec-caveats-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.rfp-rec-caveats-list {
    margin: 0;
    padding-left: 1.05rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text);
}
.rfp-rec-caveats-list li { margin-bottom: 0.15rem; }

/* Vendor totals row */
.rfp-totals {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.rfp-totals.visible { display: grid; }
.rfp-total-card {
    padding: 1rem 1.1rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    border-top: 3px solid var(--cyan);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.rfp-total-card.winner {
    border-top-color: var(--tier-value);
    background: rgba(74, 222, 128, 0.04);
}
.rfp-total-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.rfp-total-vendor {
    color: var(--text-strong);
    font-size: 1.05rem;
    font-weight: 600;
}
.rfp-total-rank {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.rfp-total-score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.rfp-total-score-big {
    font-family: var(--mono);
    font-size: 1.6rem;
    color: var(--text-strong);
    font-weight: 600;
    line-height: 1;
}
.rfp-total-score-max {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.rfp-total-pct {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-strong);
    margin-left: auto;
}
.rfp-total-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.rfp-total-bar-fill {
    height: 100%;
    background: var(--cyan);
    width: var(--w, 0%);
    transition: width 0.3s;
}
.rfp-total-card.winner .rfp-total-bar-fill { background: var(--tier-value); }
.rfp-total-list {
    margin: 0.1rem 0 0;
    padding-left: 1.05rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text);
}
.rfp-total-list li { margin-bottom: 0.15rem; }
.rfp-total-list-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
    display: block;
}
.rfp-total-list-label[data-kind="strengths"] { color: #4ADE80; }
.rfp-total-list-label[data-kind="concerns"]  { color: var(--magenta); }

/* Scored matrix */
.rfp-matrix-wrap {
    display: none;
    overflow-x: auto;
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
}
.rfp-matrix-wrap.visible { display: block; }
.rfp-matrix {
    display: grid;
    gap: 4px;
    min-width: 720px;
}
.rfp-matrix-corner {
    padding: 0.55rem 0.7rem;
    background: transparent;
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
.rfp-matrix-vendor-head {
    padding: 0.7rem 0.85rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    text-align: center;
}
.rfp-matrix-vendor-head.winner { border-color: var(--tier-value); }
.rfp-matrix-vendor-name {
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}
.rfp-matrix-vendor-tagline {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    letter-spacing: 0.03em;
}
.rfp-matrix-req-head {
    padding: 0.6rem 0.7rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}
.rfp-matrix-req-name {
    color: var(--text-strong);
    font-size: 0.85rem;
    line-height: 1.4;
}
.rfp-matrix-req-meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.rfp-matrix-req-weight {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    background: rgba(0, 217, 255, 0.06);
}
.rfp-matrix-req-cat {
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--text-faint);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.rfp-matrix-req-cat[data-cat="must-have"] { color: var(--magenta); }

.rfp-matrix-cell {
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 110px;
    transition: transform 0.12s ease;
    cursor: default;
}
.rfp-matrix-cell:hover { transform: translateY(-1px); }
.rfp-matrix-cell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.rfp-matrix-cell-score {
    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.rfp-matrix-cell-max {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}
.rfp-matrix-cell-rationale {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Score color gradient: 5 = strong green, 1 = magenta */
.rfp-matrix-cell[data-score="5"] {
    background: rgba(74, 222, 128, 0.16);
    border-color: #4ADE80;
}
.rfp-matrix-cell[data-score="5"] .rfp-matrix-cell-score { color: #4ADE80; }
.rfp-matrix-cell[data-score="4"] {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.55);
}
.rfp-matrix-cell[data-score="4"] .rfp-matrix-cell-score { color: #4ADE80; }
.rfp-matrix-cell[data-score="3"] {
    background: rgba(0, 217, 255, 0.08);
    border-color: var(--cyan);
}
.rfp-matrix-cell[data-score="3"] .rfp-matrix-cell-score { color: var(--cyan); }
.rfp-matrix-cell[data-score="2"] {
    background: rgba(255, 200, 0, 0.10);
    border-color: var(--gold);
}
.rfp-matrix-cell[data-score="2"] .rfp-matrix-cell-score { color: var(--gold); }
.rfp-matrix-cell[data-score="1"] {
    background: rgba(255, 0, 200, 0.13);
    border-color: var(--magenta);
}
.rfp-matrix-cell[data-score="1"] .rfp-matrix-cell-score { color: var(--magenta); }

/* ============================================================
   Strategic Option Weigher — VALUE · 18 · EXECUTIVE (capstone)
   First demo where the model DERIVES its own criteria framework.
   Reuses .voc-input-wrap, .mi-overview, .rfp-recommendation/totals/
   matrix patterns. Adds .sow-* for criteria, sensitivity, bounds.
   ============================================================ */

/* Lower/upper outcome bounds inside the recommendation callout */
.sow-rec-bounds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.2rem;
}
@media (max-width: 600px) {
    .sow-rec-bounds { grid-template-columns: 1fr; }
}
.sow-rec-bound {
    padding: 0.55rem 0.7rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid;
}
.sow-rec-bound[data-bound="lower"] { border-left-color: var(--gold); }
.sow-rec-bound[data-bound="upper"] { border-left-color: #4ADE80; }
.sow-rec-bound-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    display: block;
}
.sow-rec-bound[data-bound="lower"] .sow-rec-bound-label { color: var(--gold); }
.sow-rec-bound[data-bound="upper"] .sow-rec-bound-label { color: #4ADE80; }
.sow-rec-bound-text {
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Decisive-factor callout */
.sow-rec-decisive {
    padding: 0.6rem 0.85rem;
    border-radius: 5px;
    background: rgba(0, 217, 255, 0.06);
    border-left: 2px solid var(--cyan);
}
.sow-rec-decisive-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--cyan);
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    display: block;
}
.sow-rec-decisive-text {
    color: var(--text-strong);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Per-option narrative inside .rfp-total-card (added to existing styles) */
.sow-total-narrative {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 0.2rem;
}

/* Criteria framework section (the model-designed lens) */
.sow-criteria {
    display: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.5rem;
}
.sow-criteria.visible { display: flex; }
.sow-criteria-intro {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 0.2rem;
}
.sow-criterion {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--purple-light);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sow-criterion-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sow-criterion-name {
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 500;
}
.sow-criterion-weight {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    background: rgba(0, 217, 255, 0.06);
}
.sow-criterion-desc {
    color: var(--text);
    font-size: 0.83rem;
    line-height: 1.5;
}
.sow-criterion-rationale {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.sow-criterion-rationale::before {
    content: "weight rationale: ";
    color: var(--text-faint);
}

/* Sensitivity analysis section */
.sow-sensitivity {
    display: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.5rem;
}
.sow-sensitivity.visible { display: flex; }
.sow-sensitivity-intro {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 0.2rem;
}
.sow-sense-row {
    padding: 0.65rem 0.8rem;
    border-radius: 6px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gold);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sow-sense-row[data-crit="high"]   { border-left-color: var(--magenta); }
.sow-sense-row[data-crit="medium"] { border-left-color: var(--gold); }
.sow-sense-row[data-crit="low"]    { border-left-color: var(--cyan); }
.sow-sense-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sow-sense-assumption {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
}
.sow-sense-criticality {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.sow-sense-criticality[data-crit="high"]   { color: var(--magenta); }
.sow-sense-criticality[data-crit="medium"] { color: var(--gold); }
.sow-sense-criticality[data-crit="low"]    { color: var(--cyan); }
.sow-sense-text {
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}
.sow-sense-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    margin-right: 0.4rem;
}

/* ============================================================
   Sprint Simulator — VALUE · 19 · ENGINEERING
   Multi-stage Agile SDLC simulator: Backlog → Ready → In Dev →
   Testing → Done with per-stage AI calls.
   ============================================================ */

/* Sprint banner */
.sprint-meta {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr) auto;
    gap: 1rem;
    align-items: center;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--tier-value);
    border-radius: var(--radius);
    padding: 0.95rem 1.1rem;
    margin-bottom: 1.2rem;
}
@media (max-width: 720px) {
    .sprint-meta {
        grid-template-columns: 1fr 1fr;
    }
    .sprint-meta-close { grid-column: 1 / -1; }
}
.sprint-meta-name {
    color: var(--text-strong);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.sprint-meta-name-sub {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.sprint-meta-stat {
    display: flex; flex-direction: column;
}
.sprint-meta-stat-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sprint-meta-stat-value {
    font-family: var(--mono);
    font-size: 1.1rem;
    color: var(--text-strong);
    font-weight: 600;
    line-height: 1.1;
    margin-top: 0.15rem;
}
.sprint-meta-stat-value .delta {
    font-size: 0.78rem;
    color: var(--tier-value);
    margin-left: 0.3rem;
    font-weight: 500;
}

/* Add-story input */
.sprint-add {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}
.sprint-add-label {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.sprint-add textarea {
    background: var(--bg-base);
    color: var(--text-strong);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-base, 'Inter', sans-serif);
    font-size: 0.94rem;
    line-height: 1.55;
    min-height: 4.5rem;
    resize: vertical;
}
.sprint-add textarea:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.12);
}
.sprint-add-row {
    display: flex; gap: 0.6rem; align-items: center;
    flex-wrap: wrap;
}
.sprint-add-row .field-hint { margin-left: auto; }

/* Kanban board */
.sprint-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 1100px) {
    .sprint-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .sprint-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sprint-column {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    min-height: 200px;
}
.sprint-column-head {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sprint-column[data-state="backlog"] .sprint-column-head { color: var(--text-muted); }
.sprint-column[data-state="ready"]   .sprint-column-head { color: var(--cyan); }
.sprint-column[data-state="in_dev"]  .sprint-column-head { color: var(--purple-light); }
.sprint-column[data-state="testing"] .sprint-column-head { color: var(--gold); }
.sprint-column[data-state="done"]    .sprint-column-head { color: var(--tier-value); }
.sprint-column-count {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-elev-3);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
}
.sprint-column-body {
    padding: 0.5rem;
    display: flex; flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.sprint-column-empty {
    color: var(--text-faint);
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.7rem;
    text-align: center;
}

/* Story card (Kanban tile) */
.story-card {
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    display: flex; flex-direction: column;
    gap: 0.4rem;
    position: relative;
}
.story-card:hover {
    border-color: var(--cyan);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.story-card[data-state="ready"]   { border-left: 3px solid var(--cyan); }
.story-card[data-state="in_dev"]  { border-left: 3px solid var(--purple-light); }
.story-card[data-state="testing"] { border-left: 3px solid var(--gold); }
.story-card[data-state="done"]    { border-left: 3px solid var(--tier-value); }

.story-card-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.4rem;
}
.story-card-id {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.story-card-points {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--cyan);
    background: rgba(0, 217, 255, 0.10);
    border: 1px solid rgba(0, 217, 255, 0.3);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-weight: 600;
}
.story-card-points[data-points="?"] {
    color: var(--text-faint);
    background: var(--bg-elev-2);
    border-color: var(--border-subtle);
}
.story-card-title {
    color: var(--text-strong);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.4;
    word-wrap: break-word;
}
.story-card-meta {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.story-card-cta {
    margin-top: 0.2rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    background: var(--bg-base);
    color: var(--cyan);
    border: 1px solid var(--cyan);
    transition: background 0.15s, color 0.15s;
}
.story-card-cta:hover { background: var(--cyan); color: var(--bg-base); }
.story-card-cta.spinning {
    pointer-events: none;
    opacity: 0.7;
}

/* Story detail modal overlay */
.story-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 200;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}
.story-detail-overlay.visible { display: flex; }
.story-detail-panel {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.story-detail-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}
.story-detail-head h2 {
    font-size: 1.2rem;
    color: var(--text-strong);
    margin-bottom: 0.4rem;
    line-height: 1.35;
}
.story-detail-meta {
    display: flex; gap: 0.45rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.story-detail-meta-pill {
    padding: 0.13rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
}
.story-detail-meta-pill[data-state="backlog"] { color: var(--text-muted); }
.story-detail-meta-pill[data-state="ready"]   { color: var(--cyan); border-color: var(--cyan); }
.story-detail-meta-pill[data-state="in_dev"]  { color: var(--purple-light); border-color: var(--purple-light); }
.story-detail-meta-pill[data-state="testing"] { color: var(--gold); border-color: var(--gold); }
.story-detail-meta-pill[data-state="done"]    { color: var(--tier-value); border-color: var(--tier-value); }
.story-detail-close {
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.74rem;
    cursor: pointer;
    flex-shrink: 0;
}
.story-detail-close:hover { color: var(--text-strong); border-color: var(--cyan); }

.story-detail-stages {
    display: flex; flex-direction: column;
    gap: 0.85rem;
}

/* Stage block */
.stage-block {
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 0.95rem 1.1rem;
}
.stage-block.pending { opacity: 0.6; }
.stage-block-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.stage-block-title {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.stage-block[data-stage="refine"]  .stage-block-title { color: var(--cyan); }
.stage-block[data-stage="develop"] .stage-block-title { color: var(--purple-light); }
.stage-block[data-stage="test"]    .stage-block-title { color: var(--gold); }
.stage-block[data-stage="deploy"]  .stage-block-title { color: var(--tier-value); }
.stage-block-status {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.stage-block-status.done { color: var(--tier-value); }
.stage-block-status.pending { color: var(--text-faint); }

.stage-action-btn {
    background: var(--bg-base);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.stage-action-btn:hover:not(:disabled) {
    background: var(--cyan);
    color: var(--bg-base);
}
.stage-block[data-stage="develop"] .stage-action-btn { border-color: var(--purple-light); color: var(--purple-light); }
.stage-block[data-stage="develop"] .stage-action-btn:hover:not(:disabled) { background: var(--purple-light); color: var(--bg-base); }
.stage-block[data-stage="test"] .stage-action-btn { border-color: var(--gold); color: var(--gold); }
.stage-block[data-stage="test"] .stage-action-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg-base); }
.stage-block[data-stage="deploy"] .stage-action-btn { border-color: var(--tier-value); color: var(--tier-value); }
.stage-block[data-stage="deploy"] .stage-action-btn:hover:not(:disabled) { background: var(--tier-value); color: var(--bg-base); }
.stage-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-base) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
}

.stage-output {
    margin-top: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border-subtle);
    display: flex; flex-direction: column;
    gap: 0.6rem;
}
.stage-output-row {
    display: flex; flex-direction: column;
    gap: 0.25rem;
}
.stage-output-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.stage-output-value {
    color: var(--text-strong);
    font-size: 0.88rem;
    line-height: 1.55;
}
.stage-output-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-strong);
    font-size: 0.86rem;
    line-height: 1.55;
}
.stage-output-list li { margin-bottom: 0.2rem; }
.stage-output-list li::marker { color: var(--text-faint); }

.stage-pseudocode {
    margin-top: 0.3rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-strong);
    overflow-x: auto;
    white-space: pre;
}

/* Test rows */
.test-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.test-summary-stat {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid var(--gold);
}
.test-summary-stat[data-tone="passed"]   { border-left-color: var(--tier-value); }
.test-summary-stat[data-tone="failed"]   { border-left-color: var(--magenta); }
.test-summary-stat[data-tone="coverage"] { border-left-color: var(--cyan); }
.test-summary-stat-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}
.test-summary-stat-value {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong);
}

.test-row {
    padding: 0.55rem 0.75rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    border-left: 3px solid var(--text-faint);
    display: flex; flex-direction: column;
    gap: 0.25rem;
}
.test-row[data-result="passed"] { border-left-color: var(--tier-value); }
.test-row[data-result="failed"] { border-left-color: var(--magenta); background: rgba(255, 0, 200, 0.04); }
.test-row-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.5rem; flex-wrap: wrap;
}
.test-row-name {
    color: var(--text-strong);
    font-size: 0.85rem;
    font-weight: 500;
}
.test-row-meta {
    display: flex; gap: 0.45rem; flex-shrink: 0;
}
.test-row-type {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
}
.test-row-result {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.08rem 0.45rem;
    border-radius: 3px;
    font-weight: 700;
}
.test-row-result[data-result="passed"] { color: var(--tier-value); border: 1px solid var(--tier-value); }
.test-row-result[data-result="failed"] { color: var(--magenta); border: 1px solid var(--magenta); }
.test-row-actual {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    font-style: italic;
}

/* Deployment log */
.deployment-log {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.7rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--text-strong);
    max-height: 220px;
    overflow-y: auto;
}
.deployment-log-line { color: var(--text-secondary); }
.deployment-log-line.success { color: var(--tier-value); }
.deployment-log-line.warn    { color: var(--gold); }
.deployment-log-line.info    { color: var(--cyan); }
.deployment-log-line .ts {
    color: var(--text-faint);
    margin-right: 0.5rem;
}
.deployment-log-cursor::after {
    content: "_";
    animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Sprint actions row (close sprint button) */
.sprint-actions {
    display: flex; justify-content: space-between; gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.sprint-actions .btn { font-family: var(--mono); font-size: 0.84rem; }

/* Retro card */
.sprint-retro {
    background: linear-gradient(135deg, var(--bg-elev-2), rgba(74, 222, 128, 0.06));
    border: 1px solid var(--tier-value);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
    box-shadow: 0 12px 32px rgba(74, 222, 128, 0.10);
    margin-bottom: 1.2rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
}
.sprint-retro.visible { display: flex; }
.sprint-retro h3 {
    color: var(--tier-value);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.retro-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.45rem;
}
.retro-stat {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid var(--tier-value);
}
.retro-stat-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.18rem;
}
.retro-stat-value {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
}
.retro-section {
    display: flex; flex-direction: column;
    gap: 0.4rem;
}
.retro-section-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.retro-section-label[data-tone="positive"] { color: var(--tier-value); }
.retro-section-label[data-tone="improve"]  { color: var(--gold); }
.retro-section-label[data-tone="action"]   { color: var(--cyan); }
.retro-action-row {
    padding: 0.5rem 0.7rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    border-left: 3px solid var(--cyan);
    display: flex; flex-direction: column; gap: 0.2rem;
}
.retro-action-row[data-priority="high"]   { border-left-color: var(--magenta); }
.retro-action-row[data-priority="medium"] { border-left-color: var(--gold); }
.retro-action-row[data-priority="low"]    { border-left-color: var(--cyan); }
.retro-action-text {
    color: var(--text-strong);
    font-size: 0.88rem;
    line-height: 1.5;
}
.retro-action-meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Fix iteration sub-card (nested under Stage 2 · Development) */
.fix-iteration {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(204, 102, 255, 0.05);
    border: 1px solid rgba(204, 102, 255, 0.25);
    border-left: 3px solid var(--purple-light);
    border-radius: 6px;
    display: flex; flex-direction: column;
    gap: 0.55rem;
}
.fix-iteration-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.5rem; flex-wrap: wrap;
}
.fix-iteration-label {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--purple-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.fix-iteration-time {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}
.fix-iteration-summary {
    color: var(--text-strong);
    font-size: 0.92rem;
    line-height: 1.6;
}
.fix-root-cause {
    padding: 0.55rem 0.75rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--magenta);
    border-radius: 5px;
}
.fix-root-cause-test {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--magenta);
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.fix-root-cause-bug {
    color: var(--text-strong);
    font-size: 0.86rem;
    line-height: 1.55;
    margin-bottom: 0.2rem;
}
.fix-root-cause-bug::before {
    content: "Root cause: ";
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.fix-root-cause-fix {
    color: var(--tier-value);
    font-size: 0.86rem;
    line-height: 1.55;
}
.fix-root-cause-fix::before {
    content: "Fix: ";
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.fix-code-change {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    font-size: 0.84rem;
}
.fix-code-change-type {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid var(--cyan);
    align-self: start;
}
.fix-code-change-type[data-type="modify"]   { color: var(--gold); border-color: var(--gold); background: rgba(255, 200, 0, 0.06); }
.fix-code-change-type[data-type="add"]      { color: var(--tier-value); border-color: var(--tier-value); background: rgba(74, 222, 128, 0.06); }
.fix-code-change-type[data-type="remove"]   { color: var(--magenta); border-color: var(--magenta); background: rgba(255, 0, 200, 0.06); }
.fix-code-change-type[data-type="refactor"] { color: var(--purple-light); border-color: var(--purple-light); background: rgba(204, 102, 255, 0.06); }
.fix-code-change-body {
    color: var(--text);
    line-height: 1.5;
    min-width: 0;
}
.fix-code-change-loc {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-strong);
    margin-bottom: 0.15rem;
}

/* ============================================================
   Fraud Detection — VALUE · 20 · BANKING / AML
   Transaction screening / pattern detection demo with realistic
   AML risk taxonomy.
   ============================================================ */

/* Executive summary card */
.fraud-summary {
    display: none;
    flex-direction: column;
    gap: 0.85rem;
    background: linear-gradient(135deg, var(--bg-elev-2), rgba(255, 0, 200, 0.04));
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--magenta);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.2rem;
}
.fraud-summary.visible { display: flex; }
.fraud-summary-eyebrow {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--magenta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fraud-summary-headline {
    color: var(--text-strong);
    font-size: 0.98rem;
    line-height: 1.65;
}
.fraud-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
}
.fraud-summary-stat {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--cyan);
}
.fraud-summary-stat[data-tone="critical"] { border-left-color: var(--magenta); }
.fraud-summary-stat[data-tone="amount"]   { border-left-color: var(--gold); }
.fraud-summary-stat[data-tone="positive"] { border-left-color: var(--tier-value); }
.fraud-summary-stat-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.fraud-summary-stat-value {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
}
.fraud-summary-stat-value.priority-critical { color: var(--magenta); }
.fraud-summary-stat-value.priority-high     { color: var(--red); }
.fraud-summary-stat-value.priority-medium   { color: var(--gold); }
.fraud-summary-stat-value.priority-low      { color: var(--tier-value); }

.fraud-summary-concerns {
    padding: 0.65rem 0.85rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--magenta);
    border-radius: 5px;
}
.fraud-summary-concerns-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--magenta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    display: block;
}
.fraud-summary-concerns ul,
.fraud-summary-actions ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-strong);
    font-size: 0.88rem;
    line-height: 1.6;
}

.fraud-summary-actions {
    padding: 0.65rem 0.85rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gold);
    border-radius: 5px;
}
.fraud-summary-actions-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    display: block;
}

/* Risk distribution bar */
.fraud-distribution {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.fraud-distribution.visible { display: flex; }
.fraud-distribution-label {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex; justify-content: space-between;
}
.fraud-distribution-bar {
    height: 14px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}
.fraud-distribution-segment {
    height: 100%;
    transition: width 0.4s ease;
    cursor: default;
}
.fraud-distribution-segment[data-level="low"]      { background: var(--cyan); }
.fraud-distribution-segment[data-level="medium"]   { background: var(--gold); }
.fraud-distribution-segment[data-level="high"]     { background: var(--red); }
.fraud-distribution-segment[data-level="critical"] { background: var(--magenta); }
.fraud-distribution-legend {
    display: flex; gap: 0.85rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.fraud-distribution-legend-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.fraud-distribution-legend-dot {
    width: 10px; height: 10px; border-radius: 2px;
}
.fraud-distribution-legend-dot[data-level="low"]      { background: var(--cyan); }
.fraud-distribution-legend-dot[data-level="medium"]   { background: var(--gold); }
.fraud-distribution-legend-dot[data-level="high"]     { background: var(--red); }
.fraud-distribution-legend-dot[data-level="critical"] { background: var(--magenta); }

/* Generic section header */
.fraud-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 0.7rem;
    gap: 0.5rem; flex-wrap: wrap;
}
.fraud-section-title {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--magenta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fraud-section-count {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.fraud-section {
    display: none;
    flex-direction: column;
    margin-bottom: 1.2rem;
}
.fraud-section.visible { display: flex; }

/* Detected pattern card */
.fraud-pattern {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 0.95rem 1.1rem;
    border-left: 3px solid var(--magenta);
    display: flex; flex-direction: column;
    gap: 0.55rem;
}
.fraud-pattern + .fraud-pattern { margin-top: 0.65rem; }
.fraud-pattern[data-severity="critical"] { border-left-color: var(--magenta); background: linear-gradient(135deg, var(--bg-elev-2), rgba(255, 0, 200, 0.04)); }
.fraud-pattern[data-severity="high"]     { border-left-color: var(--red); }
.fraud-pattern[data-severity="medium"]   { border-left-color: var(--gold); }
.fraud-pattern[data-severity="low"]      { border-left-color: var(--cyan); }

.fraud-pattern-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.6rem; flex-wrap: wrap;
}
.fraud-pattern-name {
    color: var(--text-strong);
    font-size: 1.0rem;
    font-weight: 600;
    line-height: 1.35;
}
.fraud-pattern-pills {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
}
.fraud-pattern-pill {
    padding: 0.1rem 0.55rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.fraud-pattern-pill[data-kind="severity"] { font-weight: 700; }
.fraud-pattern-pill[data-severity="critical"] { color: var(--magenta); background: rgba(255, 0, 200, 0.06); }
.fraud-pattern-pill[data-severity="high"]     { color: var(--red); background: rgba(255, 80, 80, 0.06); }
.fraud-pattern-pill[data-severity="medium"]   { color: var(--gold); background: rgba(255, 200, 0, 0.06); }
.fraud-pattern-pill[data-severity="low"]      { color: var(--cyan); background: rgba(0, 217, 255, 0.06); }
.fraud-pattern-pill[data-kind="type"] { color: var(--purple-light); }
.fraud-pattern-pill[data-fp="low"]    { color: var(--tier-value); }
.fraud-pattern-pill[data-fp="medium"] { color: var(--gold); }
.fraud-pattern-pill[data-fp="high"]   { color: var(--text-muted); }

.fraud-pattern-desc {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
}
.fraud-pattern-meta {
    display: flex; gap: 0.85rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    background: var(--bg-base);
    border-radius: 5px;
    border: 1px solid var(--border-subtle);
}
.fraud-pattern-meta strong { color: var(--text-strong); font-weight: 600; }
.fraud-pattern-tx-list {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
}
.fraud-pattern-tx-id {
    font-family: var(--mono);
    font-size: 0.7rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    color: var(--magenta);
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    letter-spacing: 0.04em;
}

/* Flagged transaction card */
.fraud-tx {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--cyan);
    display: flex; flex-direction: column;
    gap: 0.55rem;
}
.fraud-tx + .fraud-tx { margin-top: 0.5rem; }
.fraud-tx[data-risk="critical"] { border-left-color: var(--magenta); background: linear-gradient(135deg, var(--bg-elev-2), rgba(255, 0, 200, 0.03)); }
.fraud-tx[data-risk="high"]     { border-left-color: var(--red); }
.fraud-tx[data-risk="medium"]   { border-left-color: var(--gold); }
.fraud-tx[data-risk="low"]      { border-left-color: var(--cyan); }

.fraud-tx-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.6rem; flex-wrap: wrap;
}
.fraud-tx-id {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.04em;
}
.fraud-tx-amount {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--text-strong);
    font-weight: 600;
}
.fraud-tx-amount-usd {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
}
.fraud-tx-risk-score {
    font-family: var(--mono);
    font-size: 0.94rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    border: 1px solid currentColor;
}
.fraud-tx[data-risk="critical"] .fraud-tx-risk-score { color: var(--magenta); background: rgba(255, 0, 200, 0.08); }
.fraud-tx[data-risk="high"]     .fraud-tx-risk-score { color: var(--red); background: rgba(255, 80, 80, 0.08); }
.fraud-tx[data-risk="medium"]   .fraud-tx-risk-score { color: var(--gold); background: rgba(255, 200, 0, 0.08); }
.fraud-tx[data-risk="low"]      .fraud-tx-risk-score { color: var(--cyan); background: rgba(0, 217, 255, 0.08); }

.fraud-tx-meta {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.fraud-tx-meta strong { color: var(--text-strong); }
.fraud-tx-flags {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
}
.fraud-tx-flag {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--magenta);
    background: rgba(255, 0, 200, 0.06);
    border: 1px solid var(--magenta);
}
.fraud-tx-rationale {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.55;
}
.fraud-tx-action {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid currentColor;
    align-self: flex-start;
}
.fraud-tx-action[data-action="approve"]            { color: var(--tier-value); background: rgba(74, 222, 128, 0.06); }
.fraud-tx-action[data-action="hold_for_review"]    { color: var(--gold); background: rgba(255, 200, 0, 0.06); }
.fraud-tx-action[data-action="escalate_to_AML"]    { color: var(--red); background: rgba(255, 80, 80, 0.06); }
.fraud-tx-action[data-action="block_and_SAR"]      { color: var(--magenta); background: rgba(255, 0, 200, 0.08); }

/* Entity risk table */
.fraud-entity {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--cyan);
    display: flex; flex-direction: column;
    gap: 0.4rem;
}
.fraud-entity + .fraud-entity { margin-top: 0.45rem; }
.fraud-entity[data-risk="critical"] { border-left-color: var(--magenta); }
.fraud-entity[data-risk="high"]     { border-left-color: var(--red); }
.fraud-entity[data-risk="medium"]   { border-left-color: var(--gold); }
.fraud-entity[data-risk="low"]      { border-left-color: var(--cyan); }
.fraud-entity-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.5rem; flex-wrap: wrap;
}
.fraud-entity-name {
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.92rem;
}
.fraud-entity-role {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fraud-entity-stats {
    display: flex; gap: 0.85rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.fraud-entity-stats strong { color: var(--text-strong); font-weight: 600; }
.fraud-entity-indicators {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
}
.fraud-entity-indicator {
    padding: 0.08rem 0.5rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
}

/* Geographic concentration row */
.fraud-geo {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--cyan);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}
.fraud-geo + .fraud-geo { margin-top: 0.4rem; }
.fraud-geo[data-risk="sanctioned"]            { border-left-color: var(--magenta); background: linear-gradient(135deg, var(--bg-elev-2), rgba(255, 0, 200, 0.04)); }
.fraud-geo[data-risk="high_risk"]             { border-left-color: var(--red); }
.fraud-geo[data-risk="enhanced_due_diligence"]{ border-left-color: var(--gold); }
.fraud-geo[data-risk="low_risk"]              { border-left-color: var(--tier-value); }
@media (max-width: 600px) {
    .fraud-geo { grid-template-columns: minmax(0, 1fr); }
}
.fraud-geo-name {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 600;
}
.fraud-geo-fatf {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    text-transform: uppercase;
}
.fraud-geo-stats {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.fraud-geo-stats strong { color: var(--text-strong); font-weight: 600; }
.fraud-geo-classification {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 3px;
    border: 1px solid currentColor;
}
.fraud-geo[data-risk="sanctioned"]              .fraud-geo-classification { color: var(--magenta); }
.fraud-geo[data-risk="high_risk"]               .fraud-geo-classification { color: var(--red); }
.fraud-geo[data-risk="enhanced_due_diligence"]  .fraud-geo-classification { color: var(--gold); }
.fraud-geo[data-risk="low_risk"]                .fraud-geo-classification { color: var(--tier-value); }

/* Regulatory recommendation row */
.fraud-rec {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--cyan);
    display: flex; flex-direction: column;
    gap: 0.3rem;
}
.fraud-rec + .fraud-rec { margin-top: 0.4rem; }
.fraud-rec[data-priority="high"]   { border-left-color: var(--magenta); }
.fraud-rec[data-priority="medium"] { border-left-color: var(--gold); }
.fraud-rec[data-priority="low"]    { border-left-color: var(--cyan); }
.fraud-rec-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.6rem; flex-wrap: wrap;
}
.fraud-rec-action {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}
.fraud-rec-priority {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.08rem 0.5rem;
    border-radius: 3px;
    border: 1px solid currentColor;
    font-weight: 700;
}
.fraud-rec[data-priority="high"]   .fraud-rec-priority { color: var(--magenta); }
.fraud-rec[data-priority="medium"] .fraud-rec-priority { color: var(--gold); }
.fraud-rec[data-priority="low"]    .fraud-rec-priority { color: var(--cyan); }
.fraud-rec-meta {
    display: flex; gap: 0.85rem; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.fraud-rec-meta strong { color: var(--text-strong); }
.fraud-rec-meta .reg {
    color: var(--purple-light);
    background: rgba(204, 102, 255, 0.06);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    border: 1px solid rgba(204, 102, 255, 0.3);
}

/* Format hint chip in input area */
.fraud-format-hint {
    margin-top: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    line-height: 1.55;
}
.fraud-format-hint strong { color: var(--text-strong); font-weight: 600; }