/* ============================================================
   ui-anima-runs.css — tab shell for the three recorded site
   runs (Hacker News · CNN · YouTube). Each panel holds a
   self-contained replay component that starts itself via
   IntersectionObserver when its panel becomes visible.
   ============================================================ */

.rnx-wrap { margin-top: var(--space-xl, 48px); }

.rnx-lead {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted, #6c6b61);
    margin-bottom: var(--space-sm, 14px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.rnx-lead::before {
    content: "";
    width: 9px; height: 9px;
    background: var(--accent, #d9542b);
}

/* ---- tab bar ------------------------------------------------ */
.rnx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bb-line, rgba(26, 26, 23, 0.14));
    margin-bottom: var(--space-md, 20px);
}

.rnx-tab {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-muted, #6c6b61);
    background: var(--color-bg, #f5f4ef);
    border: 1px solid var(--color-border, #e0ddd1);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}
.rnx-tab:hover { color: var(--color-text, #1a1a17); border-color: var(--color-muted, #6c6b61); }
.rnx-tab:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.rnx-tab[aria-selected="true"] {
    color: var(--color-bg, #f5f4ef);
    background: var(--color-text, #1a1a17);
    border-color: var(--color-text, #1a1a17);
}
.rnx-tab .rnx-tab-n {
    color: var(--accent, #d9542b);
    margin-right: 8px;
}
.rnx-tab[aria-selected="true"] .rnx-tab-n { color: #f0a186; }

/* ---- panels ------------------------------------------------- */
.rnx-panel[hidden] { display: none; }
.rnx-panel { animation: rnx-in .35s ease both; }
@keyframes rnx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .rnx-panel { animation: none; }
    .rnx-tab { transition: none; }
}

@media (max-width: 560px) {
    .rnx-tab { font-size: 12px; padding: 9px 13px; }
}