/* Run replay + run library pages. Tokens come from main.css/onboarding.css. */

.rp-wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
}

/* The run's numbers as one plain row of label/value pairs, not tiles. */
.rp-stats,
.rd-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.75rem;
    margin: 1.5rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.rp-stat,
.rd-facts > div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.45rem;
}
.rd-facts > div { flex-direction: row; }
.rp-stat-value,
.rd-facts dd {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    margin: 0;
}
.rp-stat-label,
.rd-facts dt {
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rp-stage {
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--wash);
    padding: 1rem;
}
.rp-canvas {
    display: block;
    width: 100%;
    background: #0b1220;      /* behind the map image; reads in both themes */
    border: 1px solid var(--onb-frame, var(--navy));
}
.rp-controls {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}
.rp-play {
    font: inherit;
    font-weight: 700;
    padding: 0.45rem 1.4rem;
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--navy);
    color: #fff;
    cursor: pointer;
}
.rp-play:hover { filter: brightness(1.15); }
.rp-scrub { flex: 1 1 12rem; accent-color: var(--navy); }
.rp-clock, .rp-speed {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    min-width: 4.5rem;
    text-align: right;
}
.rp-legend {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.rp-swatch {
    width: 1.4rem; height: 0.5rem;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.25);
}
.rp-swatch-slow { background: #2563eb; }
.rp-swatch-fast { background: #c0392b; margin-left: 0.6rem; }
.rp-legend-item { margin-left: 0.6rem; }

.rp-note {
    border: 2px dashed var(--onb-frame, var(--navy));
    padding: 1rem;
    margin: 1.5rem 0;
}
.rp-note img { display: block; max-width: 100%; margin-top: 0.75rem; }

.rp-limits {
    margin: 1.5rem 0;
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--wash);
    padding: 0.9rem 1.1rem;
}
.rp-limits summary {
    cursor: pointer;
    font-weight: 700;
}
.rp-limits ul { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.rp-limits li { margin: 0.35rem 0; }
.rp-limits pre {
    overflow-x: auto;
    background: var(--code-bg, rgba(0,0,0,0.06));
    padding: 0.75rem;
}
.rp-limits code, .rp-events-sub code { font-family: var(--font-mono); }

.rp-events { margin-top: 2rem; }
.rp-events-title {
    font-size: 1.3rem;
    margin: 0 0 0.25rem;
}
.rp-events-sub { color: var(--muted); margin: 0 0 1rem; }
.rp-events-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.rp-event {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    border-left: 4px solid var(--muted);
    background: var(--wash);
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}
.rp-event-cat {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--onb-frame, var(--navy));
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}
.rp-event-t {
    font-family: var(--font-mono);
    color: var(--muted);
    min-width: 4.5rem;
    text-align: right;
}
.rp-cat-deadman { border-left-color: #d9a400; }
.rp-cat-pose_lag_high { border-left-color: #c0392b; }
.rp-cat-tf_lost { border-left-color: #c0392b; }
.rp-cat-tf_up, .rp-cat-map_content { border-left-color: #22c55e; }

/* ---- library index ---- */
.rl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.rl-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--wash);
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
}
.rl-card:hover { box-shadow: 4px 4px 0 var(--onb-frame, var(--navy)); }
.rl-card-title { font-weight: 800; font-size: 1.1rem; }
.rl-card-date { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.rl-card-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rl-chip {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    border: 1px solid var(--onb-frame, var(--navy));
    padding: 0.1rem 0.5rem;
}
.rl-card-cta { font-weight: 700; margin-top: 0.25rem; }

@media (max-width: 640px) {
    .rp-clock, .rp-speed { min-width: 0; }
}

/* ---- decision replay (static/js/run-decisions.js) ---- */
/* Canvas colours. The script reads these, so both themes come from here. */
.rd {
    --rd-dark: 0;
    --rd-bg: #f7f9fc;
    --rd-grid: rgba(12, 30, 58, 0.12);
    --rd-faint: #7a89a6;
    --rd-scan: #16233d;
    --rd-gap: rgba(29, 95, 158, 0.16);
    --rd-arc: rgba(29, 95, 158, 0.28);
    --rd-aim: #0c1e3a;
    --rd-car: #0c1e3a;
    --rd-stop: #b3261e;
    --rd-stop-soft: rgba(179, 38, 30, 0.22);
    --rd-command: #0c1e3a;
    --rd-measured: #4f8fd0;
    --rd-b-curve: #1d5f9e;
    --rd-b-accel: #7fb2e5;
    --rd-b-clearance: #6b4fa0;
    --rd-b-corner: #8a7a1c;
    --rd-b-creep: #5f6f8c;
    --rd-b-side: #2f7f73;
    --rd-b-follow: #a0a8b8;
    --rd-b-stop: #b3261e;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .rd {
        --rd-dark: 1;
        --rd-bg: #0b1626;
        --rd-grid: rgba(154, 183, 220, 0.16);
        --rd-faint: #71829f;
        --rd-scan: #dde5f2;
        --rd-gap: rgba(127, 178, 229, 0.16);
        --rd-arc: rgba(127, 178, 229, 0.3);
        --rd-aim: #f3f7fc;
        --rd-car: #7fb2e5;
        --rd-stop: #ef6b5f;
        --rd-stop-soft: rgba(239, 107, 95, 0.25);
        --rd-command: #f3f7fc;
        --rd-measured: #7fb2e5;
        --rd-b-curve: #3f7fc4;
        --rd-b-accel: #9cc5ee;
        --rd-b-clearance: #a68bd6;
        --rd-b-corner: #c9b54a;
        --rd-b-creep: #8b9ab6;
        --rd-b-side: #5cb3a5;
        --rd-b-stop: #ef6b5f;
    }
}
:root[data-theme="dark"] .rd {
    --rd-dark: 1;
    --rd-bg: #0b1626;
    --rd-grid: rgba(154, 183, 220, 0.16);
    --rd-faint: #71829f;
    --rd-scan: #dde5f2;
    --rd-gap: rgba(127, 178, 229, 0.16);
    --rd-arc: rgba(127, 178, 229, 0.3);
    --rd-aim: #f3f7fc;
    --rd-car: #7fb2e5;
    --rd-stop: #ef6b5f;
    --rd-stop-soft: rgba(239, 107, 95, 0.25);
    --rd-command: #f3f7fc;
    --rd-measured: #7fb2e5;
    --rd-b-curve: #3f7fc4;
    --rd-b-accel: #9cc5ee;
    --rd-b-clearance: #a68bd6;
    --rd-b-corner: #c9b54a;
    --rd-b-creep: #8b9ab6;
    --rd-b-side: #5cb3a5;
    --rd-b-stop: #ef6b5f;
}

.rd-stage {
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--wash);
    padding: 1rem;
}
.rd-views {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.rd-view { margin: 0; min-width: 0; }
.rd-view figcaption {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.rd-canvas, .rd-timeline {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
}
.rd-timeline { margin-top: 0.9rem; cursor: pointer; touch-action: none; }
.rd-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}
.rd-step {
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}
.rd-rate select {
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    height: 2.4rem;
    border: 2px solid var(--onb-frame, var(--navy));
    background: var(--paper);
    color: var(--ink);
    padding: 0 0.4rem;
}
.rd-step:focus-visible, .rd-rate select:focus-visible, .rp-play:focus-visible,
.rd-stop-btn:focus-visible, .rd-timeline:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
.rd-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--muted);
}
.rd-legend li { display: flex; align-items: center; gap: 0.4rem; }
.rd-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.45rem;
    vertical-align: -0.1rem;
    border: 1px solid var(--line);
}
.rd-legend .rd-swatch { margin-right: 0; }
.rd-swatch-line { height: 0.2rem; width: 1.3rem; border: 0; }

.rd-h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 0 0 0.6rem;
    color: var(--heading);
}
.rd-why {
    margin-top: 1.5rem;
    border-left: 4px solid var(--blue);
    padding: 0.25rem 0 0.25rem 1.25rem;
}
.rd-why p { max-width: 50rem; margin: 0 0 0.75rem; line-height: 1.6; }
.rd-why-tick {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--muted);
}
.rd-section { margin-top: 2.5rem; }
.rd-section > p { max-width: 50rem; line-height: 1.6; }

.rd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1.25rem;
    font-size: 0.92rem;
}
.rd-table th, .rd-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.45rem 0.75rem 0.45rem 0;
    border-bottom: 1px solid var(--line);
}
.rd-table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.rd-table tbody th { font-weight: 600; white-space: nowrap; }
.rd-num { font-family: var(--font-mono); white-space: nowrap; }
.rd-caption {
    caption-side: top;
    text-align: left;
    color: var(--muted);
    font-size: 0.88rem;
    padding-bottom: 0.25rem;
}
#rd-why-numbers td { font-family: var(--font-mono); font-size: 0.88rem; }
#rd-why-numbers tr.is-binding th, #rd-why-numbers tr.is-binding td { color: var(--heading); font-weight: 700; }
.rd-binding-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    padding: 0 0.35rem;
    margin-left: 0.6rem;
}

.rd-bar {
    display: flex;
    height: 1.1rem;
    margin: 0.75rem 0 0.5rem;
    border: 1px solid var(--line);
}
.rd-bar-seg { display: block; height: 100%; }

.rd-stops {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.rd-stop-btn {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: var(--wash);
    border: 0;
    border-left: 4px solid var(--rd-b-stop);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
}
.rd-stop-btn:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.rd-stop-btn[aria-current="true"] { background: var(--paper); box-shadow: inset 0 0 0 2px var(--rd-b-stop); }
.rd-stop-time {
    font-family: var(--font-mono);
    color: var(--muted);
    min-width: 4.5rem;
}

@media (max-width: 800px) {
    .rd-views { grid-template-columns: 1fr; }
    .rd-scrub, .rd .rp-scrub { flex-basis: 100%; order: 10; }
    .rd-table tbody th { white-space: normal; }
}
.rl-card-kind {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.rd .tbl-scroll { max-width: 100%; overflow-x: auto; }