/*
 * Today / Timeline rail UX styles (U8 / Phase C).
 *
 * Uses the existing terminal palette tokens.  Status colors mirror the
 * D3 tree's status pills so the same color = same meaning across views.
 *
 * REF: docs/plans/2026-04-25-001-feat-reasoning-tree-temporal-progression-plan.md U8
 */

/* ========== Mode toggle in the panel header ========== */

.rt-mode-toggle {
    display: inline-flex;
    gap: 0;
    align-items: center;
    border: 1px solid var(--term-border, #2A2520);
    border-radius: 6px;
    overflow: hidden;
    background: var(--term-bg-elev, #1A1714);
    margin-left: 0.75rem;
}

.rt-mode-btn {
    background: transparent;
    border: none;
    padding: 4px 12px;
    font-family: var(--term-font-mono, ui-monospace, "Menlo", monospace);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--term-text-secondary, #8C857A);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.rt-mode-btn:hover {
    color: var(--term-text-primary, #C9C2B5);
}

.rt-mode-btn.active {
    background: var(--term-accent-cyan, #22D3EE);
    color: var(--term-bg, #14110E);
    font-weight: 600;
}

.rt-mode-btn:focus-visible {
    outline: 2px solid var(--term-accent-cyan, #22D3EE);
    outline-offset: 1px;
}

/* ========== Timeline outer container ========== */

.rt-timeline-container {
    padding: 12px 14px;
    overflow: auto;
    max-height: calc(100vh - 200px);
}

.rt-timeline-loading,
.rt-timeline-empty {
    padding: 24px;
    text-align: center;
    color: var(--term-text-secondary, #8C857A);
    font-family: var(--term-font-mono, ui-monospace, "Menlo", monospace);
    font-size: 13px;
}

.rt-timeline-banner {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--term-accent-amber, #F59E0B);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 8px;
}

.rt-timeline-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--term-font-mono, ui-monospace, "Menlo", monospace);
    font-size: 11px;
    color: var(--term-text-secondary, #8C857A);
    padding: 6px 0 12px 0;
    border-bottom: 1px solid var(--term-border, #2A2520);
    margin-bottom: 12px;
}

.rt-timeline-meta strong {
    color: var(--term-accent-cyan, #22D3EE);
    font-weight: 600;
}

/* ========== Per-lineage row ========== */

.rt-lineage {
    border: 1px solid var(--term-border, #2A2520);
    border-radius: 6px;
    margin-bottom: 10px;
    background: var(--term-bg-elev, #1A1714);
    overflow: hidden;
}

.rt-lineage-header {
    padding: 8px 12px;
    background: rgba(34, 211, 238, 0.04);
    border-bottom: 1px solid var(--term-border, #2A2520);
}

.rt-lineage-label {
    font-family: var(--term-font-sans, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--term-text-primary, #C9C2B5);
    line-height: 1.35;
}

.rt-lineage-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--term-font-mono, ui-monospace, "Menlo", monospace);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--term-text-tertiary, #6B655B);
}

.rt-lineage-meta .rt-lineage-summary {
    margin-left: auto;
    color: var(--term-accent-cyan, #22D3EE);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.rt-lineage-slots {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ========== Per-slot pill ========== */

.rt-slot {
    border: 1px solid var(--term-border, #2A2520);
    border-radius: 4px;
    background: var(--term-bg, #14110E);
}

.rt-slot[open] {
    border-color: var(--term-accent-cyan, #22D3EE);
}

.rt-slot-summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--term-font-mono, ui-monospace, "Menlo", monospace);
    font-size: 12px;
    color: var(--term-text-primary, #C9C2B5);
}

.rt-slot-summary::-webkit-details-marker {
    display: none;
}

.rt-slot-label {
    font-weight: 600;
    color: var(--term-text-primary, #C9C2B5);
    min-width: 90px;
}

.rt-slot-status {
    text-transform: lowercase;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

.rt-slot-active .rt-slot-status {
    background: rgba(34, 211, 238, 0.15);
    color: var(--term-accent-cyan, #22D3EE);
}

.rt-slot-confirmed .rt-slot-status {
    background: rgba(74, 222, 128, 0.15);
    color: var(--term-accent-green, #4ADE80);
}

.rt-slot-pruned .rt-slot-status {
    background: rgba(120, 113, 108, 0.18);
    color: var(--term-text-tertiary, #6B655B);
    text-decoration: line-through;
}

.rt-slot-superseded .rt-slot-status {
    background: rgba(167, 139, 250, 0.15);
    color: #A78BFA;
}

.rt-slot-deferred .rt-slot-status {
    background: rgba(245, 158, 11, 0.15);
    color: var(--term-accent-amber, #F59E0B);
}

.rt-slot-notetype {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--term-text-tertiary, #6B655B);
    letter-spacing: 0.05em;
}

.rt-status-arrow {
    color: var(--term-accent-amber, #F59E0B);
    font-weight: bold;
}

/* ========== Slot detail panel (expanded) ========== */

.rt-slot-detail {
    padding: 8px 12px 10px 12px;
    border-top: 1px solid var(--term-border, #2A2520);
    background: var(--term-bg-elev, #1A1714);
    font-family: var(--term-font-sans, system-ui, sans-serif);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--term-text-secondary, #8C857A);
}

.rt-slot-rationale {
    color: var(--term-text-primary, #C9C2B5);
    margin-bottom: 6px;
}

.rt-slot-key-finding {
    color: var(--term-text-secondary, #8C857A);
    margin-bottom: 6px;
}

.rt-ev-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rt-ev-item {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-family: var(--term-font-mono, ui-monospace, "Menlo", monospace);
    font-size: 11.5px;
    color: var(--term-text-secondary, #8C857A);
}

.rt-ev-src {
    background: var(--term-bg, #14110E);
    border: 1px solid var(--term-border, #2A2520);
    color: var(--term-accent-cyan, #22D3EE);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.rt-ev-for,
.rt-ev-against {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rt-ev-for {
    color: var(--term-accent-green, #4ADE80);
    background: rgba(74, 222, 128, 0.10);
}

.rt-ev-against {
    color: #F87171;
    background: rgba(248, 113, 113, 0.10);
}

.rt-ev-when {
    color: var(--term-accent-amber, #F59E0B);
    font-size: 10.5px;
    white-space: nowrap;
}

.rt-ev-summary {
    color: var(--term-text-secondary, #8C857A);
}

.rt-ev-footnote {
    margin-left: auto;
    font-size: 10px;
    color: var(--term-text-tertiary, #6B655B);
    font-style: italic;
}

/* ========== Reduced motion ========== */

@media (prefers-reduced-motion: reduce) {
    .rt-mode-btn,
    .rt-slot,
    .rt-slot-summary {
        transition: none !important;
    }
}