/* Responsive two-panel grid: stacked on ≤16-inch screens, side-by-side on larger.
   A 16-inch MacBook Pro sits at ~1440–1728 CSS px; external monitors start at 1920 px+. */
.summary-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
    align-items: start;
}

/* History page: heatmap on the left, quality-gated pairs table on the right.
   On small screens the table column is hidden by default and a button reveals it. */
.history-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.history-tables-col {
    display: none;
}

.history-tables-col.show-tables {
    display: block;
}

.history-toggle-row {
    display: block;
    margin-bottom: 12px;
}

@media (min-width: 1800px) {
    .summary-panels {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
    .history-page-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .history-tables-col {
        display: block;
    }
    .history-toggle-row {
        display: none;
    }
}

/* Timeline slider: keep mark labels small so up to 20 ticks fit */
.rc-slider-mark-text {
    font-size: 10px !important;
    color: #64748b !important;
    white-space: nowrap;
}

/* Prev / next / play buttons below the timeline slider */
.history-nav-btn {
    padding: 4px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 15px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.history-nav-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
.history-nav-btn:active {
    background: #dbeafe;
    border-color: #3b82f6;
}
.history-play-btn {
    min-width: 64px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── Outcome badges (pair dropdown + elsewhere) ────────────────────────── */
.outcome-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    margin-left: 10px;
    border: 1px solid;
    vertical-align: middle;
}
.outcome-badge--rlp { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.outcome-badge--rnt { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.outcome-badge--ro  { background: #f3e8ff; color: #6b21a8; border-color: #c084fc; }
.outcome-badge--uc  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* ── Status chips (timestamp / destination / score in trace header) ─────── */
.status-chip {
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.status-chip--neutral { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.status-chip--good    { background: #ecfdf5; color: #166534; border-color: #86efac; }
.status-chip--bad     { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.status-chip--warn    { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.status-chip__label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.status-chip__value { font-size: 12px; font-weight: 700; margin-top: 2px; line-height: 1.3; }
.status-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    align-items: stretch;
}

/* ── Perf metric cards ──────────────────────────────────────────────────── */
.perf-card {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border-left: 4px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.perf-card--good { border-left-color: #22c55e; }
.perf-card--bad  { border-left-color: #ef4444; }
.perf-card--warn { border-left-color: #f59e0b; }
.perf-card__label     { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #475569; line-height: 1.2; }
.perf-card__primary   { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.1; }
.perf-card__secondary { font-size: 11px; line-height: 1.4; color: #475569; margin-top: 3px; }
.perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    align-items: stretch;
}

/* ── Detail-grid (key/value metadata items) ─────────────────────────────── */
.detail-item {
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 6px;
    min-width: 0;
}
.detail-item__label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; line-height: 1.2; margin-bottom: 2px; }
.detail-item__value { font-size: 11px; line-height: 1.35; color: #0f172a; word-break: break-word; }
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.metadata-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    align-items: start;
}
.metadata-section__title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #334155; margin-bottom: 6px; }

/* ── Trace header subtitle ──────────────────────────────────────────────── */
.trace-header__subtitle {
    font-size: 12px;
    color: #475569;
    margin-bottom: 10px;
    min-height: 38px;
    display: flex;
    align-items: flex-start;
}

/* ── Path comparison layout ─────────────────────────────────────────────── */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.comparison-status { margin-bottom: 10px; color: #475569; font-size: 12px; }

/* ── Scoring-key match / mismatch banner ────────────────────────────────── */
.match-banner {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid;
    border-radius: 6px;
    font-weight: 600;
}
.match-banner--match    { background: #dcfce7; border-color: #86efac; color: #166534; }
.match-banner--mismatch { background: #fef9c3; border-color: #fde047; color: #854d0e; }

/* ── Info cards (How To Read / Triage Classes / Metric Cards) ───────────── */
.info-card { padding: 14px 16px; border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; }
.info-card__heading { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #475569; margin-bottom: 6px; }
.info-card__body    { font-size: 13px; line-height: 1.5; color: #0f172a; }
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}