/*
 * Today / Timeline rail UX styles (U8 / Phase C).
 *
 * Status colors mirror the tree's status vocabulary so the same color =
 * same meaning across views.
 *
 * REF: docs/plans/2026-04-25-001-feat-reasoning-tree-temporal-progression-plan.md U8
 *
 * FIX (2026-08-19): this file referenced a legacy --term-* family
 * (--term-border, --term-bg-elev, --term-text-secondary, --term-accent-cyan,
 * ...) that is defined NOWHERE in the app — every fallback hex always won,
 * and the accent fallback (#22D3EE) visibly mismatched the theme accent.
 * All color now routes through the shared --rt-* block (defined in
 * reasoning-tree.css on both timeline hosts: .reasoning-tree-panel and
 * #rtArgumentView), with DR hex fallbacks for standalone safety. Status tints
 * use color-mix so they track the token hue instead of a frozen literal
 * (this also retires the foreign Tailwind purple #A78BFA superseded pill).
 */

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

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

.rt-mode-btn {
    background: transparent;
    border: none;
    padding: 4px 12px;
    font-family: var(--rt-font-mono, 'Fira Code', 'SF Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rt-ink-secondary, #8B7355);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.rt-mode-btn:hover {
    color: var(--rt-ink, #FFF7EE);
}

.rt-mode-btn.active {
    background: var(--rt-accent, #E69A4C);
    color: var(--rt-bg, #160E08);
    font-weight: 600;
}

.rt-mode-btn:focus-visible {
    outline: 2px solid var(--rt-accent, #E69A4C);
    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(--rt-ink-secondary, #8B7355);
    font-family: var(--rt-font-mono, 'Fira Code', 'SF Mono', monospace);
    font-size: 13px;
}

.rt-timeline-banner {
    background: color-mix(in srgb, var(--rt-deferred, #BFA162) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rt-deferred, #BFA162) 35%, transparent);
    color: var(--rt-deferred, #BFA162);
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 12px;
    margin-bottom: 8px;
}

.rt-timeline-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--rt-font-mono, 'Fira Code', 'SF Mono', monospace);
    font-size: 11px;
    color: var(--rt-ink-secondary, #8B7355);
    padding: 6px 0 12px 0;
    border-bottom: 1px solid var(--rt-border, #3C2A21);
    margin-bottom: 12px;
}

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

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

.rt-lineage {
    border: 1px solid var(--rt-border, #3C2A21);
    border-radius: 2px;
    margin-bottom: 10px;
    background: var(--rt-bg-elevated, #2A1C13);
    overflow: hidden;
}

.rt-lineage-header {
    padding: 8px 12px;
    background: color-mix(in srgb, var(--rt-accent, #E69A4C) 5%, transparent);
    border-bottom: 1px solid var(--rt-border, #3C2A21);
}

.rt-lineage-label {
    font-family: var(--rt-font-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--rt-ink, #FFF7EE);
    line-height: 1.35;
}

.rt-lineage-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--rt-font-mono, 'Fira Code', 'SF Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rt-ink-muted, #6E8068);
}

.rt-lineage-meta .rt-lineage-summary {
    margin-left: auto;
    color: var(--rt-accent, #E69A4C);
    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(--rt-border, #3C2A21);
    border-radius: 2px;
    background: var(--rt-bg, #160E08);
}

.rt-slot[open] {
    border-color: var(--rt-accent, #E69A4C);
}

.rt-slot-summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rt-font-mono, 'Fira Code', 'SF Mono', monospace);
    font-size: 12px;
    color: var(--rt-ink, #FFF7EE);
}

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

.rt-slot-label {
    font-weight: 600;
    color: var(--rt-ink, #FFF7EE);
    min-width: 90px;
}

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

.rt-slot-active .rt-slot-status {
    background: color-mix(in srgb, var(--rt-accent, #E69A4C) 15%, transparent);
    color: var(--rt-accent, #E69A4C);
}

.rt-slot-confirmed .rt-slot-status {
    background: color-mix(in srgb, var(--rt-confirmed, #DAA520) 15%, transparent);
    color: var(--rt-confirmed, #DAA520);
}

.rt-slot-pruned .rt-slot-status {
    background: color-mix(in srgb, var(--rt-ink-muted, #6E8068) 18%, transparent);
    color: var(--rt-ink-muted, #6E8068);
    text-decoration: line-through;
}

.rt-slot-superseded .rt-slot-status {
    background: color-mix(in srgb, var(--rt-superseded, #DAA520) 15%, transparent);
    color: var(--rt-superseded, #DAA520);
}

.rt-slot-deferred .rt-slot-status {
    background: color-mix(in srgb, var(--rt-deferred, #BFA162) 15%, transparent);
    color: var(--rt-deferred, #BFA162);
}

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

.rt-status-arrow {
    color: var(--rt-gold, #DAA520);
    font-weight: bold;
}

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

.rt-slot-detail {
    padding: 8px 12px 10px 12px;
    border-top: 1px solid var(--rt-border, #3C2A21);
    background: var(--rt-bg-elevated, #2A1C13);
    font-family: var(--rt-font-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--rt-ink-secondary, #8B7355);
}

.rt-slot-rationale {
    color: var(--rt-ink, #FFF7EE);
    margin-bottom: 6px;
}

.rt-slot-key-finding {
    color: var(--rt-ink-secondary, #8B7355);
    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(--rt-font-mono, 'Fira Code', 'SF Mono', monospace);
    font-size: 11.5px;
    color: var(--rt-ink-secondary, #8B7355);
}

.rt-ev-src {
    background: var(--rt-bg, #160E08);
    border: 1px solid var(--rt-border, #3C2A21);
    color: var(--rt-accent, #E69A4C);
    padding: 1px 6px;
    border-radius: 2px;
    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: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rt-ev-for {
    color: var(--rt-confirmed, #DAA520);
    background: color-mix(in srgb, var(--rt-confirmed, #DAA520) 12%, transparent);
}

.rt-ev-against {
    color: var(--rt-refuting, #C75B39);
    background: color-mix(in srgb, var(--rt-refuting, #C75B39) 12%, transparent);
}

.rt-ev-when {
    color: var(--rt-gold, #DAA520);
    font-size: 10.5px;
    white-space: nowrap;
}

.rt-ev-summary {
    color: var(--rt-ink-secondary, #8B7355);
}

.rt-ev-footnote {
    margin-left: auto;
    font-size: 10px;
    color: var(--rt-ink-muted, #6E8068);
    font-style: italic;
}

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

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