/* ============================================
   RESULTS — Lab Cards, Gauges, Analysis
   ============================================ */

/* Lab Card — Compact Design */
.lab-card {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
}

.lab-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.lab-card-optimal { border-color: var(--color-optimal-border); }
.lab-card-optimal::before { background: linear-gradient(90deg, var(--color-optimal), #22c55e); }

.lab-card-suboptimal { border-color: var(--color-suboptimal-border); }
.lab-card-suboptimal::before { background: linear-gradient(90deg, var(--color-suboptimal), #f59e0b); }

.lab-card-critical { border-color: var(--color-critical-border); }
.lab-card-critical::before { background: linear-gradient(90deg, var(--color-critical), #ef4444); }

.lab-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Card Top: Name + Status Pill */
.lab-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3px;
    margin-bottom: 2px;
}

.lab-card-name {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    min-width: 0;
}

.lab-card-pill {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 1px 4px;
    border-radius: 10px;
    font-size: 0.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.lab-card-pill.optimal {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(22, 163, 74, 0.2));
    color: #3D7A52;
}

.lab-card-pill.suboptimal {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.12), rgba(212, 168, 67, 0.22));
    color: #A07B1E;
}

.lab-card-pill.critical {
    background: linear-gradient(135deg, rgba(192, 84, 79, 0.12), rgba(192, 84, 79, 0.2));
    color: #9B3A36;
}

.lab-card-pill-icon {
    font-weight: 800;
    font-size: 0.4rem;
}

/* Gauge Container */
.lab-card-gauge {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0 -4px;
}

.gauge-svg {
    width: 90px;
    height: 50px;
}

.gauge-minmax {
    font-family: var(--font-body);
    font-size: 9px;
    fill: var(--color-text-muted);
    font-weight: 500;
}

.gauge-dot {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
    transition: r var(--transition-fast);
}

.lab-card:hover .gauge-dot {
    r: 10;
}

/* Value Row */
.lab-card-value-row {
    text-align: center;
    margin-top: -2px;
    margin-bottom: 2px;
}

.lab-card-value {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.lab-card-value.optimal { color: var(--color-optimal); }
.lab-card-value.suboptimal { color: var(--color-suboptimal); }
.lab-card-value.critical { color: var(--color-critical); }

.lab-card-unit {
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: 2px;
}

/* Range Info */
.lab-card-range {
    text-align: center;
    font-size: 0.55rem;
    color: var(--color-text-muted);
    padding: 3px 0 1px;
    border-top: 1px solid var(--color-border);
    margin-top: 3px;
}

.lab-card-range-label {
    font-weight: 600;
    color: var(--color-text-light);
}

/* ─────────────────────────────────────────────────────────────────────
   Lab grid = vertical table of Hessels-style rows
   ─────────────────────────────────────────────────────────────────── */
.lab-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden; /* clean clip — nothing spills outside the card */
}

/* ─── Hessels lab row (replaces card layout) ─── */
.lab-row {
    display: grid;
    grid-template-columns:
        28px      /* system tag (BL) */
        minmax(110px, 1.3fr) /* name */
        70px      /* value */
        80px      /* unit */
        20px      /* warning flag */
        minmax(200px, 3fr)  /* bar + ticks */
        90px;    /* lab reference range */
    align-items: center;
    column-gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}
.lab-row:last-child { border-bottom: none; }
.lab-row:hover { background: #fafbfc; }

.lab-row-tag {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.lab-row-name {
    font-weight: 600;
    color: #1e293b;
}
.lab-row-value {
    font-weight: 700;
    color: #1e293b;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lab-row-unit {
    color: #64748b;
    font-size: 0.85rem;
}
.lab-row-flag {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-block;
}
.lab-row-flag-suboptimal { color: #d97706; }
.lab-row-flag-critical { color: #dc2626; }
.lab-row-flag-empty { display: block; }

/* The bar itself — smooth gradient + dot marker */
.lab-row-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lab-row-bar {
    position: relative;
    height: 16px;
    border-radius: 3px;
    overflow: visible;
}
.lab-row-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #1e293b;
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    z-index: 2;
}
.lab-row-dot.lab-row-dot-optimal     { background: #1e293b; }
.lab-row-dot.lab-row-dot-suboptimal  { background: #1e293b; }
.lab-row-dot.lab-row-dot-critical    { background: #1e293b; }

/* Tick numbers under the bar — anchored to boundary positions */
.lab-row-ticks {
    position: relative;
    height: 14px;
}
.lab-row-tick {
    position: absolute;
    top: 2px;
    font-size: 0.62rem;
    color: #64748b;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Optimal-boundary ticks: bold green */
.lab-row-tick-opt {
    color: #15803d;
    font-weight: 700;
}
/* LOW boundary: text anchored to its right edge, number sits to the LEFT of
   the boundary position so the right-most digit aligns with the green-start. */
.lab-row-tick-low {
    transform: translateX(-100%);
    padding-right: 4px;
}
/* HIGH boundary: text anchored to its left edge, number sits to the RIGHT of
   the boundary position so the left-most digit aligns with the green-end. */
.lab-row-tick-high {
    transform: translateX(0);
    padding-left: 4px;
}
/* Merged label (when range is too tight to show separately): centered */
.lab-row-tick-merged {
    transform: translateX(-50%);
}

/* Right-side reference column — two compact lines: Lab-ref + Optimaal */
.lab-row-ref {
    font-size: 0.78rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.3;
}
.lab-row-ref-lab {
    color: #64748b;
}
.lab-row-ref-lab::before {
    content: 'ref ';
    color: #94a3b8;
    font-size: 0.7rem;
    margin-right: 2px;
}
.lab-row-ref-opt {
    color: #15803d;
    font-weight: 600;
}
.lab-row-ref-opt::before {
    content: 'opt ';
    color: #86efac;
    font-size: 0.7rem;
    margin-right: 2px;
}

/* Status-colored left border accent — green for optimal too (visual consistency) */
.lab-row.lab-row-optimal    { border-left: 3px solid #16a34a; padding-left: 15px; }
.lab-row.lab-row-suboptimal { border-left: 3px solid #d97706; padding-left: 15px; }
.lab-row.lab-row-critical   { border-left: 3px solid #dc2626; padding-left: 15px; }

/* Make sure tick labels never get cropped/overlap badly when range boundaries
   are tightly packed. The JS merges adjacent ticks (within 10%) into a single
   "X / Y" label, so visually we just need extra vertical space and overflow. */
.lab-row-ticks {
    overflow: visible;
}
.lab-row-bar-cell {
    min-width: 0; /* grid item: allow shrink/grow without overflow */
}
/* Ensure the rightmost tick stays inside the column even with translate */
.lab-row-tick:last-child {
    max-width: 80px;
    overflow: visible;
    text-align: right;
}

/* Below 1100px — stack: top row has labels, bottom row has bar + ref so the
   bar gets full width to display the gradient + ticks without crowding. */
@media (max-width: 1100px) {
    .lab-row {
        grid-template-columns: 28px 1fr 80px 80px 20px;
        grid-template-rows: auto auto;
        row-gap: 8px;
        column-gap: 10px;
    }
    .lab-row-bar-cell {
        grid-column: 1 / -1;
    }
    .lab-row-ref {
        grid-column: 1 / -1;
        text-align: left;
        display: flex;
        gap: 14px;
        font-size: 0.78rem;
    }
}

/* Gauge Widget (standalone) */
.gauge-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
}

.gauge-label {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-top: var(--space-sm);
    text-align: center;
}

.gauge-value {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Analysis Section */
.analysis-section {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-xl);
}

.analysis-header {
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.analysis-header h2 {
    color: var(--color-white);
    font-size: 1.25rem;
}

/* Badge inside analysis header — translucent on dark bg */
.analysis-complete-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.analysis-body {
    padding: var(--space-xl);
}

.analysis-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-lg);
    padding: 0 var(--space-xl);
    background: var(--color-bg-alt);
}

.analysis-tab {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-body);
}

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

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

/* Language toggle below analysis tabs */
.analysis-lang-toggle {
    display: flex;
    gap: 0;
    padding: 0 var(--space-xl);
    padding-top: var(--space-md);
}

.analysis-lang-toggle .tab {
    padding: 6px var(--space-lg);
    font-size: 0.8125rem;
}

/* Analysis Content — Rich Markdown Rendering
   Zero-gap base: all spacing controlled by .ai-* classes. */
.analysis-content {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.analysis-content p {
    margin: 0 0 var(--space-xs);
}

.analysis-content p:last-child {
    margin-bottom: 0;
}

.analysis-content h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin: var(--space-sm) 0 var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid rgba(30, 41, 59, 0.15);
    color: var(--color-primary);
    line-height: 1.35;
}

.analysis-content h2:first-child {
    margin-top: 0;
}

.analysis-content h3 {
    font-family: var(--font-heading);
    font-size: 1.025rem;
    font-weight: 600;
    margin: var(--space-sm) 0 var(--space-xs);
    color: var(--color-text);
    line-height: 1.35;
}

.analysis-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: var(--space-xs) 0 2px;
    color: var(--color-text);
    line-height: 1.35;
}

.analysis-content h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: var(--space-xs) 0 2px;
    color: var(--color-text-light);
}

.analysis-content ul,
.analysis-content ol {
    padding-left: 20px;
    margin: 0 0 var(--space-xs);
}

.analysis-content ol {
    list-style-type: decimal;
}

.analysis-content li {
    margin-bottom: 1px;
    padding-left: 2px;
    line-height: 1.5;
}

.analysis-content li::marker {
    color: var(--color-primary);
}

.analysis-content strong {
    font-weight: 600;
    color: var(--color-text);
}

.analysis-content em {
    font-style: italic;
}

.analysis-content code {
    background: var(--color-bg-subtle, #f1f5f9);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.875em;
}

.analysis-content hr {
    border: none;
    border-top: 1px solid var(--color-border, #e2e8f0);
    margin: 6px 0;
}

/* ── Override: when .fmt is present, disable old analysis-content styles ──
   The .analysis-content rules above compete with .fmt rules on the same
   elements. Using .analysis-content .fmt gives higher specificity so the
   new formatter styles win cleanly. ── */
.analysis-content .fmt h1,
.analysis-content .fmt h2,
.analysis-content .fmt h3,
.analysis-content .fmt h4,
.analysis-content .fmt h5 {
    font-family: inherit;
    margin: 0;
    /* DO NOT reset padding here — .fmt h3 needs padding-left for its accent bar.
       The higher specificity (0-2-1) of this rule was overriding .fmt h3's
       padding-left: 10px (0-1-1), hiding the h3 accent bar behind the text. */
    border-bottom: none;
    color: inherit;
}
.analysis-content .fmt p {
    margin: 0 0 1px;
}
.analysis-content .fmt p:last-child {
    margin-bottom: 0;
}
.analysis-content .fmt ul,
.analysis-content .fmt ol {
    padding-left: 2px;
    margin: 0 0 1px;
}
.analysis-content .fmt li {
    margin-bottom: 0;
    padding-left: 14px;
    line-height: 1.4;
}
.analysis-content .fmt li::marker {
    color: transparent;
}
.analysis-content .fmt hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border) 10%, var(--color-border) 90%, transparent);
    margin: 2px 0;
}

/* AI Progress Indicator */
.ai-progress {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xl);
    justify-content: center;
    align-items: center;
}

.ai-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    opacity: 0.4;
    transition: opacity var(--transition-normal);
}

.ai-step.active {
    opacity: 1;
}

.ai-step.complete {
    opacity: 1;
}

.ai-step .ai-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border);
    transition: all var(--transition-normal);
}

.ai-step.active .ai-icon {
    border-color: var(--color-primary);
    background: rgba(30, 41, 59, 0.08);
}

.ai-step.complete .ai-icon {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.ai-step.failed {
    opacity: 1;
}

.ai-step.failed .ai-icon {
    background: var(--color-critical-bg);
    border-color: var(--color-critical);
    color: var(--color-critical);
}

.ai-step .ai-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ai-step-connector {
    width: 40px;
    height: 2px;
    background: var(--color-border);
    margin-bottom: var(--space-lg);
}

.ai-step-connector.complete {
    background: var(--color-primary);
}

/* AI status text — below progress indicators */
#ai-status-text,
.ai-status-text {
    text-align: center;
    padding: var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Labs content wrapper */
.labs-content {
    padding: 0;
}

.labs-content .section {
    margin-top: var(--space-xl);
}

.labs-content .section-title {
    margin-bottom: var(--space-md);
}

/* Lab system section — grouped lab cards by system */
.lab-system-section {
    margin-bottom: var(--space-xl);
}

.lab-system-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 1.125rem;
}

/* ───────────────────────────────────────────────────────────────────────
   Range Bar v4 — Hessels print-stijl: dunne lijn + kleine driehoek + tekst
   ─────────────────────────────────────────────────────────────────────── */
.range-bar-v3 {
    margin: 0.5rem 0 0;
    padding: 14px 0 0; /* room for small triangle marker above */
}

/* ── Triangle marker above bar (no bubble, just a small pointer) ── */
.range-bar-v3 .rb-marker-row {
    position: relative;
    height: 0;
}
.range-bar-v3 .rb-value-bubble {
    /* No bubble in v4 — value lives in the lab-card header. Hide if rendered. */
    display: none;
}
.range-bar-v3 .rb-value-arrow {
    position: absolute;
    top: -10px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid #1e293b;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.range-bar-v3 .rb-value-arrow.rb-optimal     { border-top-color: #16a34a; }
.range-bar-v3 .rb-value-arrow.rb-suboptimal  { border-top-color: #d97706; }
.range-bar-v3 .rb-value-arrow.rb-critical    { border-top-color: #dc2626; }

/* ── The 5-zone bar — thin clinical strip like Hessels printout ── */
.range-bar-v3 .rb-bar {
    position: relative;
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.range-bar-v3 .rb-zone {
    position: absolute;
    top: 0;
    height: 100%;
}
.range-bar-v3 .rb-zone.rb-red    { background: #f87171; }
.range-bar-v3 .rb-zone.rb-amber  { background: #fbbf24; }
.range-bar-v3 .rb-zone.rb-green  { background: #34d399; }

/* ── Tick scale: hide — we use text labels below instead ── */
.range-bar-v3 .rb-scale { display: none; }

/* ── Hessels-stijl tekst onder de balk: Lab-ref + Optimaal als zinnen ── */
.range-bar-v3 .rb-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: #475569;
    flex-wrap: wrap;
    align-items: center;
}
.range-bar-v3 .rb-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.range-bar-v3 .rb-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}
.range-bar-v3 .rb-legend-swatch.rb-green { background: #34d399; }
.range-bar-v3 .rb-legend-swatch.rb-amber { background: #fbbf24; }
.range-bar-v3 .rb-legend-swatch.rb-red   { background: #f87171; }

/* ── Lab card — Hessels printout look: clean, compact, table-like ── */
.lab-card-hessels {
    padding: 1rem 1.25rem;
    border-radius: 10px;
}
.lab-card-hessels .lab-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
    gap: 12px;
}
.lab-card-hessels .lab-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}
.lab-card-hessels .lab-card-pill {
    font-size: 0.7rem;
    padding: 2px 10px;
    white-space: nowrap;
}
.lab-card-hessels .lab-card-value-row {
    margin: 0.2rem 0 0.3rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.lab-card-hessels .lab-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
.lab-card-hessels .lab-card-unit {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.lab-card-hessels .lab-card-rangebar-wrap {
    margin-top: 0.45rem;
}

/* ─── Collapsible Lab Values Panel ───────────────────────── */
.lab-values-panel {
    margin-top: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lab-values-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-alt);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.lab-values-toggle:hover {
    background: var(--color-border);
}

.lab-values-toggle-icon {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    width: 16px;
    text-align: center;
}

.lab-values-toggle-label {
    flex: 1;
    text-align: left;
}

.lab-values-body {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.lab-values-body.hidden {
    display: none;
}

@media (max-width: 768px) {
    .lab-grid {
        grid-template-columns: 1fr;
    }

    .ai-progress {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .lab-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── Compact Analysis Layout ─────────────────────────── */
.analysis-compact .analysis-header {
    padding: var(--space-sm) var(--space-md) !important;
    margin-bottom: var(--space-sm) !important;
}

.analysis-compact .stats-row {
    gap: var(--space-xs) !important;
    margin-bottom: var(--space-sm) !important;
}

.analysis-compact .stat-card {
    padding: var(--space-sm) !important;
}

.analysis-compact .stat-card .stat-value {
    font-size: 1.5rem !important;
}

.analysis-compact .stat-card .stat-label {
    font-size: 0.75rem !important;
}

/* Lab values panel — toggle always visible, body collapsed in compact mode */
.analysis-compact .lab-values-panel {
    margin-bottom: var(--space-xs) !important;
}

.analysis-compact .lab-values-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 !important;
    border-top: none !important;
}

.analysis-compact .lab-values-body.expanded {
    max-height: 4000px;
    overflow: visible;
    padding: var(--space-lg) !important;
    border-top: 1px solid var(--color-border) !important;
}

/* ─── Compact Intake Analysis Layout ──────────────────── */
.intake-analysis-compact .analysis-header {
    padding: var(--space-sm) var(--space-md) !important;
    margin-bottom: var(--space-xs) !important;
}

.intake-analysis-compact .intake-summary-panel {
    max-height: 120px;
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-sm) !important;
    transition: max-height 0.3s ease;
}

.intake-analysis-compact .intake-summary-panel.expanded {
    max-height: none;
}

.intake-summary-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: var(--space-sm);
    transition: all var(--transition-fast);
}

.intake-summary-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════════════
   FMT — AI Response Formatting (marked.js post-processor output)
   Zero-gap design: all spacing is explicit, never from default margins.
   Classes are applied by js/utils/formatResponse.js
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hard reset: zero ALL margins inside .fmt ─────────────────── */
.fmt p, .fmt h2, .fmt h3, .fmt h4, .fmt h5,
.fmt ul, .fmt ol, .fmt li, .fmt hr, .fmt blockquote {
    margin: 0;
    padding: 0;
}

/* ── Base typography ─────────────────────────────────────────── */
.fmt {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-light);
    max-width: 85%;  /* 85% of parent container */
}

.fmt strong { font-weight: 600; color: var(--color-text); }
.fmt em     { font-style: italic; }
.fmt code   { background: var(--color-bg-subtle, #f1f5f9); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; }

/* ── Pre/code blocks — AI should not produce these, but handle gracefully ── */
.fmt pre {
    font-family: inherit;
    font-size: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: none;
    margin: 0;
    padding: 0;
}
.fmt pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
}

/* ── Paragraphs — minimal gap ────────────────────────────────── */
.fmt p                 { margin-bottom: 3px; }
.fmt p:last-child      { margin-bottom: 0; }

/* ── HR ──────────────────────────────────────────────────────── */
.fmt hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border) 10%, var(--color-border) 90%, transparent);
    margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION CARDS — h2-delimited content blocks
   ═══════════════════════════════════════════════════════════════ */
.fmt-section {
    margin-top: 5px;
    padding: 7px 14px 5px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
.fmt-section:first-child { margin-top: 0; }

/* System-specific accent colors */
.fmt-section--fuel      { border-left-color: #d97706; }
.fmt-section--thyroid   { border-left-color: #7c3aed; }
.fmt-section--liver     { border-left-color: #0891b2; }
.fmt-section--redox     { border-left-color: #dc2626; }
.fmt-section--minerals  { border-left-color: #2563eb; }
.fmt-section--pattern   { border-left-color: #0d9488; background: rgba(13, 148, 136, 0.04); }
.fmt-section--priority  { border-left-color: #059669; background: rgba(5, 150, 105, 0.03); }
.fmt-section--cascade   { border-left-color: #6366f1; background: rgba(99, 102, 241, 0.02); }
.fmt-section--overview  { border-left-color: #475569; }

/* ── Section heading (any level used as top heading) ─────────── */
.fmt-section > h1,
.fmt-section > h2,
.fmt-section > h3 {
    font-size: 1.075rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    padding-bottom: 3px;
    padding-left: 0;
    border-bottom: 1px solid var(--color-border-light);
}
/* No accent bar on section headings — only on sub-headings */
.fmt-section > h1::before,
.fmt-section > h2::before,
.fmt-section > h3::before {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   INDENT WRAPPERS — Hierarchical indentation
   ═══════════════════════════════════════════════════════════════ */

/* Content under h2 → indented */
.fmt-body {
    padding-left: 12px;
    padding-top: 2px;
}

/* Content under h3 → further indented */
.fmt-sub-body {
    padding-left: 12px;
    padding-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   HEADINGS — h3, h4
   ═══════════════════════════════════════════════════════════════ */

.fmt h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 1px;
    position: relative;
}
.fmt h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* Inherit section accent for h3/h4 bar */
.fmt-section--fuel h3::before, .fmt-section--fuel h4::before         { background: #d97706; }
.fmt-section--thyroid h3::before, .fmt-section--thyroid h4::before   { background: #7c3aed; }
.fmt-section--liver h3::before, .fmt-section--liver h4::before       { background: #0891b2; }
.fmt-section--redox h3::before, .fmt-section--redox h4::before       { background: #dc2626; }
.fmt-section--minerals h3::before, .fmt-section--minerals h4::before { background: #2563eb; }
.fmt-section--priority h3::before, .fmt-section--priority h4::before { background: #059669; }
.fmt-section--pattern h3::before, .fmt-section--pattern h4::before   { background: #0d9488; }
.fmt-section--cascade h3::before, .fmt-section--cascade h4::before   { background: #6366f1; }
.fmt-section--overview h3::before, .fmt-section--overview h4::before { background: #334155; }

.fmt h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-light);
    padding-top: 2px;
    line-height: 1.3;
}

/* Stand-alone headings (not inside section card) */
.fmt > h1,
.fmt > h2,
.fmt > h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.25;
    padding-bottom: 2px;
    margin-top: 4px;
    border-bottom: 2px solid rgba(30, 41, 59, 0.12);
}
.fmt > h1:first-child,
.fmt > h2:first-child,
.fmt > h3:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   LISTS — Compact, custom markers
   ═══════════════════════════════════════════════════════════════ */

/* Unordered */
.fmt ul {
    list-style: none;
    padding-left: 2px;
    margin-bottom: 1px;
}
.fmt ul > li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 0;
    line-height: 1.4;
}
.fmt ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--color-accent);
}

/* Inherit section accent for bullet dots */
.fmt-section--fuel ul > li::before     { background: #d97706; }
.fmt-section--thyroid ul > li::before  { background: #7c3aed; }
.fmt-section--liver ul > li::before    { background: #0891b2; }
.fmt-section--redox ul > li::before    { background: #dc2626; }
.fmt-section--minerals ul > li::before { background: #2563eb; }
.fmt-section--priority ul > li::before { background: #059669; }
.fmt-section--pattern ul > li::before  { background: #0d9488; }
.fmt-section--cascade ul > li::before  { background: #6366f1; }
.fmt-section--overview ul > li::before { background: #334155; }

/* Ordered — aligned with ul: number at same left as bullet dot, text at same indent */
.fmt ol {
    padding-left: 2px;
    counter-reset: fmt-counter;
    list-style: none;
    margin-bottom: 1px;
}
.fmt ol > li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 0;
    line-height: 1.4;
    counter-increment: fmt-counter;
}
.fmt ol > li::before {
    content: counter(fmt-counter) '.';
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: 0.875em;
    color: var(--color-accent);
}

/* Inherit section accent for ordered list numbers */
.fmt-section--fuel ol > li::before     { color: #d97706; }
.fmt-section--thyroid ol > li::before  { color: #7c3aed; }
.fmt-section--liver ol > li::before    { color: #0891b2; }
.fmt-section--redox ol > li::before    { color: #dc2626; }
.fmt-section--minerals ol > li::before { color: #2563eb; }
.fmt-section--priority ol > li::before { color: #059669; }
.fmt-section--pattern ol > li::before  { color: #0d9488; }
.fmt-section--cascade ol > li::before  { color: #6366f1; }
.fmt-section--overview ol > li::before { color: #334155; }

/* Nested lists — tight */
.fmt li > ul, .fmt li > ol { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   TITLED LIST ITEMS — Bold heading + body below
   ═══════════════════════════════════════════════════════════════ */
.fmt-titled-item {
    margin-bottom: 2px !important;
}
.fmt-item-title {
    display: block;
    font-weight: 700;
    font-size: 0.925em;
    color: var(--color-text);
    line-height: 1.35;
    margin-bottom: 1px;
}
.fmt-item-body {
    padding-left: 2px;
    color: var(--color-text-light);
}

/* ═══════════════════════════════════════════════════════════════
   KEY-VALUE LABELS — Bold label: value
   ═══════════════════════════════════════════════════════════════ */
.fmt-kv-label {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.925em;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES — Colored keyword pills
   ═══════════════════════════════════════════════════════════════ */
.fmt-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-full, 999px);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: baseline;
    line-height: 1.5;
}
.fmt-badge--optimal {
    background: var(--color-optimal-bg);
    color: var(--color-optimal);
    border: 1px solid var(--color-optimal-border);
}
.fmt-badge--attention {
    background: var(--color-suboptimal-bg);
    color: var(--color-suboptimal);
    border: 1px solid var(--color-suboptimal-border);
}
.fmt-badge--critical {
    background: var(--color-critical-bg);
    color: var(--color-critical);
    border: 1px solid var(--color-critical-border);
}

/* ── Print — preserve fmt colors + tight spacing ─────────────── */
@media print {
    .fmt {
        max-width: 100%;
        font-size: 9.5pt;
        line-height: 1.5;
    }

    .fmt-section {
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #e2e8f0;
        border-left-width: 4px;
        border-left-style: solid;
        /* Keep theme border-left-color from .fmt-section--* classes */
        margin-top: 4px;
        padding: 5px 10px 4px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .fmt-section:first-child { margin-top: 0; }

    /* Preserve theme accent colors in print */
    .fmt-section--fuel      { border-left-color: #d97706 !important; }
    .fmt-section--thyroid   { border-left-color: #7c3aed !important; }
    .fmt-section--liver     { border-left-color: #0891b2 !important; }
    .fmt-section--redox     { border-left-color: #dc2626 !important; }
    .fmt-section--minerals  { border-left-color: #2563eb !important; }
    .fmt-section--pattern   { border-left-color: #0d9488 !important; background: rgba(13,148,136,0.04) !important; }
    .fmt-section--priority  { border-left-color: #059669 !important; background: rgba(5,150,105,0.03) !important; }
    .fmt-section--cascade   { border-left-color: #6366f1 !important; background: rgba(99,102,241,0.02) !important; }
    .fmt-section--overview  { border-left-color: #475569 !important; }

    /* Section heading — tight */
    .fmt-section > h1,
    .fmt-section > h2,
    .fmt-section > h3 {
        font-size: 10.5pt;
        padding-bottom: 2px;
    }

    /* Sub-headings */
    .fmt h3 { font-size: 9.5pt; padding-top: 2px; }
    .fmt h4 { font-size: 9pt; padding-top: 1px; }

    /* Indent wrappers — tighter */
    .fmt-body { padding-left: 8px; padding-top: 1px; }
    .fmt-sub-body { padding-left: 8px; padding-top: 1px; }

    /* Paragraphs — compact */
    .fmt p { margin-bottom: 2px; }

    /* Lists — compact */
    .fmt ul, .fmt ol { margin-bottom: 1px; }
    .fmt ul > li, .fmt ol > li { margin-bottom: 0; line-height: 1.45; }

    /* Preserve bullet/number accent colors */
    .fmt-section--fuel ul > li::before     { background: #d97706 !important; }
    .fmt-section--thyroid ul > li::before  { background: #7c3aed !important; }
    .fmt-section--liver ul > li::before    { background: #0891b2 !important; }
    .fmt-section--redox ul > li::before    { background: #dc2626 !important; }
    .fmt-section--minerals ul > li::before { background: #2563eb !important; }
    .fmt-section--priority ul > li::before { background: #059669 !important; }
    .fmt-section--pattern ul > li::before  { background: #0d9488 !important; }
    .fmt-section--cascade ul > li::before  { background: #6366f1 !important; }
    .fmt-section--overview ul > li::before { background: #334155 !important; }

    .fmt-section--fuel ol > li::before     { color: #d97706 !important; }
    .fmt-section--thyroid ol > li::before  { color: #7c3aed !important; }
    .fmt-section--liver ol > li::before    { color: #0891b2 !important; }
    .fmt-section--redox ol > li::before    { color: #dc2626 !important; }
    .fmt-section--minerals ol > li::before { color: #2563eb !important; }
    .fmt-section--priority ol > li::before { color: #059669 !important; }
    .fmt-section--pattern ol > li::before  { color: #0d9488 !important; }
    .fmt-section--cascade ol > li::before  { color: #6366f1 !important; }
    .fmt-section--overview ol > li::before { color: #334155 !important; }

    /* h3 accent bars in print */
    .fmt-section--fuel h3::before         { background: #d97706 !important; }
    .fmt-section--thyroid h3::before      { background: #7c3aed !important; }
    .fmt-section--liver h3::before        { background: #0891b2 !important; }
    .fmt-section--redox h3::before        { background: #dc2626 !important; }
    .fmt-section--minerals h3::before     { background: #2563eb !important; }
    .fmt-section--priority h3::before     { background: #059669 !important; }
    .fmt-section--pattern h3::before      { background: #0d9488 !important; }
    .fmt-section--cascade h3::before      { background: #6366f1 !important; }
    .fmt-section--overview h3::before     { background: #334155 !important; }

    /* Badges — keep colors */
    .fmt-badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .fmt-badge--optimal {
        background: rgba(22, 163, 74, 0.08) !important;
        color: #16a34a !important;
        border: 1px solid rgba(22, 163, 74, 0.2) !important;
    }
    .fmt-badge--attention {
        background: rgba(217, 119, 6, 0.08) !important;
        color: #d97706 !important;
        border: 1px solid rgba(217, 119, 6, 0.2) !important;
    }
    .fmt-badge--critical {
        background: rgba(220, 38, 38, 0.08) !important;
        color: #dc2626 !important;
        border: 1px solid rgba(220, 38, 38, 0.2) !important;
    }

    /* HR — minimal */
    .fmt hr { margin: 3px 0; }

    /* Titled items — tight */
    .fmt-titled-item { margin-bottom: 1px !important; }
    .fmt-item-title { margin-bottom: 0; }
}