/* ============================================================================
   SC2 Learn guide — unified-timeline redesign
   ============================================================================ */

:root {
    --lg-bg: #0d1117;
    --lg-surface: #161b22;
    --lg-surface-2: #11161d;
    --lg-border: #30363d;
    --lg-border-soft: #21262d;
    --lg-text: #f0f6fc;
    --lg-text-muted: #c9d1d9;
    --lg-text-faint: #8b949e;
    --lg-text-dim: #6e7681;
    --lg-accent: #7cb4e6;
    --lg-good: #3fb950;
    --lg-bad: #f85149;
    --lg-warn: #e6c47f;

    /* Event kind accents */
    --k-step: #7dd3fc;
    --k-production: #a78bfa;
    --k-position: #60a5fa;
    --k-flex: #94a3b8;
    --k-scout: #34d399;
    --k-decision: #fbbf24;
    --k-highlight: #f472b6;
}

.learn-guide-view {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
    color: var(--lg-text-muted);
}

.learn-guide-tabs {
    margin-bottom: 1rem;
}

/* Quick-jump TOC — sits below the sticky archetype tabs, scrolls the
   #page-learn overflow container to the target section id. */
/* Inline TOC chips now live inside the hero bar (see .hero-title-block
   .guide-toc-inline below). The old sticky-strip variant is unused but
   the chip button styling remains shared. */
.guide-toc-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.guide-toc-chip {
    padding: 0.22rem 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9aa4b2;
    border-radius: 999px;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.guide-toc-chip:hover {
    background: rgba(86, 194, 255, 0.08);
    border-color: rgba(86, 194, 255, 0.32);
    color: #fff;
}

.guide-toc-chip.is-active {
    background: rgba(0, 212, 255, 0.18);
    border-color: var(--primary-color, #00d4ff);
    color: var(--primary-color, #00d4ff);
}

/* Cheat Sheet toggle state — the cheat sheet section hides when the
   .guide-body-main has .cheat-hidden. Just display:none the section
   and its anchor sentinel; the rest of the layout collapses cleanly. */
.guide-body-main.cheat-hidden > #guide-sec-cheat,
.guide-body-main.cheat-hidden > .cheat-sheet {
    display: none;
}

/* SC2 Learn archetype tabs — override learn-bw.css defaults so the palette
   matches the replay topbar (cyan accent, tighter spacing, sticky strip). */
.learn-guide-view .archetype-tabs {
    position: sticky;
    top: 0;
    z-index: 9;
    margin: 0 -1.5rem 0.85rem;
    padding: 0.5rem 1.5rem 0;
    background: rgba(8, 12, 24, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    gap: 0.25rem;
}

.learn-guide-view .arch-tab {
    padding: 0.55rem 0.95rem 0.6rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    gap: 1px;
    color: #9aa4b2;
    font-family: 'Rajdhani', system-ui, sans-serif;
    letter-spacing: 0.04em;
}

.learn-guide-view .arch-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}

.learn-guide-view .arch-tab.active {
    color: var(--primary-color, #00d4ff);
    border-bottom-color: var(--primary-color, #00d4ff);
    background: rgba(0, 212, 255, 0.06);
}

.learn-guide-view .arch-tab-name {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.learn-guide-view .arch-tab-meta {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.learn-guide-view .arch-tab.is-best-wr .arch-tab-star {
    color: #fbbf24;
    margin-right: 0.15rem;
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
}
.learn-guide-view .arch-tab.is-best-wr .arch-tab-bestlabel {
    color: #fbbf24;
    font-weight: 600;
    opacity: 1;
}
.learn-guide-view .arch-tab.is-best-wr:not(.active) {
    border-bottom-color: rgba(251, 191, 36, 0.22);
}

/* "New here? Try X" onboarding hint under the archetype tabs. Dismissible,
   clicking the archetype name both dismisses and switches to that tab. */
.arch-tab-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    margin: 0 0 0.75rem;
    background: rgba(251, 191, 36, 0.07);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-left: 3px solid rgba(251, 191, 36, 0.55);
    border-radius: 4px;
    color: #fde68a;
    font-size: 0.85rem;
    line-height: 1.4;
    flex-wrap: wrap;
}
.arch-tab-hint-label {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: #fcd34d;
    margin-right: 0.15rem;
}
.arch-tab-hint-link {
    background: transparent;
    border: none;
    padding: 0 0.1rem;
    color: #fbbf24;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
    font-family: inherit;
}
.arch-tab-hint-link:hover {
    color: #fde68a;
}
.arch-tab-hint-close {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: rgba(251, 191, 36, 0.7);
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.arch-tab-hint-close:hover {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.12);
}

/* =============================================================================
   Compact Hero (§1)
   ============================================================================= */

.hero-compact {
    margin: 0 -1.5rem 1rem;
}

.hero-strip {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.98) 0%, rgba(13, 17, 23, 0.95) 100%);
    border-bottom: 1px solid var(--lg-border-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-badge {
    flex-shrink: 0;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.18), rgba(96, 165, 250, 0.12));
    border: 1px solid rgba(125, 211, 252, 0.3);
    color: var(--lg-text);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.hero-title-block {
    flex: 1;
    min-width: 0;
}

.hero-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    line-height: 1.2;
}

.hero-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lg-text);
}

.hero-title-select {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lg-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.2rem 1.6rem 0.2rem 0.4rem;
    margin-left: -0.4rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2300d4ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 10px 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    max-width: 100%;
}

.hero-title-select:hover {
    background-color: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
}

.hero-title-select:focus {
    outline: none;
    background-color: rgba(0, 212, 255, 0.1);
    border-color: var(--primary-color, #00d4ff);
}

.hero-title-select option {
    background: #0d1117;
    color: var(--lg-text);
    font-weight: 500;
}

/* Archetype rename button — only visible to admins (the ovr-admin class is
   toggled on <body> by _refreshAdminFlag in guide-view.js). */
.hero-archetype-rename {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid rgba(199, 155, 255, 0.4);
    border-radius: 4px;
    background: rgba(153, 102, 204, 0.08);
    color: #c79bff;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
body.ovr-admin .hero-archetype-rename {
    display: inline-flex;
}
.hero-archetype-rename:hover {
    background: rgba(153, 102, 204, 0.18);
    border-color: rgba(199, 155, 255, 0.7);
    color: #fff;
}

.hero-archetype-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 1rem;
    font-weight: 700;
    background: rgba(15, 19, 28, 0.98);
    border: 1px solid rgba(199, 155, 255, 0.6);
    border-radius: 6px;
    color: var(--lg-text);
    font-family: inherit;
}
.hero-archetype-rename-input:focus {
    outline: none;
    border-color: #c79bff;
}

.hero-subtitle {
    font-size: 0.82rem;
    color: var(--lg-text-faint);
    font-weight: 500;
}

.hero-summary {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--lg-text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.hero-stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0 0.25rem;
    border-left: 1px solid var(--lg-border-soft);
    padding-left: 1rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-variant-numeric: tabular-nums;
}

.hero-stat strong {
    color: var(--lg-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.hero-stat strong.win { color: var(--lg-good); }
.hero-stat strong.loss { color: var(--lg-bad); }

.hero-stat span {
    font-size: 0.68rem;
    color: var(--lg-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hero-details-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid var(--lg-border);
    border-radius: 6px;
    color: var(--lg-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.hero-details-toggle:hover {
    background: rgba(125, 180, 230, 0.08);
    border-color: var(--lg-accent);
    color: var(--lg-text);
}

.hero-toggle-chev {
    transition: transform 0.18s ease-out;
}

.hero-compact.is-expanded .hero-toggle-chev {
    transform: rotate(180deg);
}

.hero-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease-out;
    padding: 0 1.5rem;
}

.hero-compact.is-expanded .hero-details {
    max-height: 2000px;
}

.hero-details-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(200px, 1fr) minmax(200px, 1fr);
    gap: 1.5rem;
    padding: 1rem 0 0.4rem;
    border-bottom: 1px solid var(--lg-border-soft);
}

.hero-col-label {
    font-size: 0.68rem;
    color: var(--lg-text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.hero-col-label--good { color: var(--lg-good); }
.hero-col-label--bad { color: var(--lg-bad); }

.hero-opening-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lg-text);
    margin-bottom: 0.25rem;
}

.hero-opening-desc {
    font-size: 0.85rem;
    color: var(--lg-text-muted);
    line-height: 1.45;
}

.hero-opening-note {
    margin-top: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: rgba(230, 196, 127, 0.06);
    border-left: 2px solid var(--lg-warn);
    font-size: 0.82rem;
    color: var(--lg-warn);
    line-height: 1.4;
}

.hero-opening-meta {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--lg-text-faint);
}

.hero-key-timings {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-key-timing {
    display: grid;
    grid-template-columns: 44px auto 1fr;
    gap: 0.45rem;
    align-items: baseline;
    font-size: 0.84rem;
}

.hero-kt-time {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.78rem;
    color: var(--lg-accent);
    font-variant-numeric: tabular-nums;
}

.hero-kt-note {
    color: var(--lg-text-faint);
    font-size: 0.78rem;
}

.hero-kt-action {
    color: var(--lg-text);
}

.hero-matchup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.55rem;
}

.hero-matchup-chip {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border-soft);
    color: var(--lg-text-muted);
}

.hero-matchup-chip.good { border-color: rgba(63, 185, 80, 0.35); color: #7ee298; }
.hero-matchup-chip.bad { border-color: rgba(248, 81, 73, 0.35); color: #ff8078; }

/* Flex Patterns section — Terran addon swap choreography (B→F Reactor etc.)
   Phase D: renders arch.swap_profile aggregated by the guide generator in
   compute_swap_profile. One row per common pattern (share ≥15% of archetype
   games), sorted by popularity. */
.hero-swap-section {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    margin-top: 0.6rem;
}

.hero-swap-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.4rem 0.8rem;
    margin-top: 0.4rem;
}

.hero-swap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-left: 3px solid var(--race-t, #56c2ff);
    border-radius: 6px;
    background: var(--surface, #141821);
    transition: border-color 0.12s, background 0.12s;
}

.hero-swap-row:hover {
    background: var(--surface-alt, #1c212c);
    border-color: var(--border-strong, rgba(255, 255, 255, 0.14));
}

.hero-swap-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--text, #e6e9ef);
    font-family: var(--ui, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.hero-swap-bldg {
    color: var(--text, #e6e9ef);
    font-weight: 600;
}

.hero-swap-arrow {
    color: var(--race-t, #56c2ff);
    font-size: 0.95rem;
    line-height: 1;
}

.hero-swap-addon {
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(86, 194, 255, 0.12);
    color: var(--race-t, #56c2ff);
    margin-left: 0.1rem;
}

.hero-swap-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-shrink: 0;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim, #aab3c2);
    font-size: 0.76rem;
}

.hero-swap-share {
    color: var(--accent, #56c2ff);
    font-weight: 600;
    min-width: 2.3ch;
    text-align: right;
}

.hero-swap-median {
    color: var(--text, #e6e9ef);
    font-weight: 500;
}

.hero-swap-window {
    color: var(--text-muted, #6e7687);
    font-size: 0.7rem;
}

/* Flex Windows section inside hero Details — full-width, below the 3-col grid.
   Each window is a labeled bundle of actions with soft timing (items can slot
   anywhere before the window's deadline). */
.hero-flex-section {
    padding: 0.85rem 0 0.2rem;
}

.hero-flex-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem 1rem;
    margin-top: 0.35rem;
}

.hero-flex-window {
    border: 1px solid var(--lg-border-soft);
    border-radius: 8px;
    padding: 0.55rem 0.7rem 0.6rem;
    background: var(--lg-surface-2);
}

.hero-flex-window-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--lg-border-soft);
    margin-bottom: 0.4rem;
}

.hero-flex-window-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lg-text);
}

.hero-flex-window-meta {
    font-size: 0.72rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
}

.hero-flex-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.6rem;
    align-items: baseline;
    padding: 3px 0 3px 0.5rem;
    border-left: 2px solid transparent;
    font-size: 0.78rem;
    color: var(--lg-text-muted);
}

.hero-flex-row.core { border-left-color: var(--lg-good); }
.hero-flex-row.common { border-left-color: var(--k-position); }
.hero-flex-row.reactive { border-left-color: var(--lg-warn); }

.hero-flex-name {
    color: var(--lg-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-flex-range,
.hero-flex-share {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--lg-text-faint);
}

.hero-flex-empty {
    padding: 0.25rem 0 0.1rem 0.5rem;
    font-size: 0.75rem;
    color: var(--lg-text-dim);
    font-style: italic;
}

@media (max-width: 900px) {
    .hero-strip { flex-wrap: wrap; }
    .hero-stats { width: 100%; border-left: none; padding-left: 0; }
    .hero-details-inner { grid-template-columns: 1fr; gap: 1rem; }
}

/* =============================================================================
   Cheat Sheet (§9a)
   ============================================================================= */

.cheat-sheet {
    margin-bottom: 1rem;
    padding: 0.75rem 0;
}

.cheat-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--lg-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.55rem;
}

.cheat-cards {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--lg-border) transparent;
}

.cheat-cards::-webkit-scrollbar {
    height: 6px;
}
.cheat-cards::-webkit-scrollbar-thumb {
    background: var(--lg-border);
    border-radius: 3px;
}

.cheat-card {
    flex: 1 0 auto;
    min-width: 150px;
    max-width: 240px;
    padding: 0.6rem 0.75rem;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border-soft);
    border-radius: 8px;
}

.cheat-label {
    font-size: 0.68rem;
    color: var(--lg-text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
}

.cheat-time {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lg-accent);
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cheat-sub {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--lg-text-muted);
    line-height: 1.35;
}

.cheat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--lg-text);
}

.cheat-list li {
    display: flex;
    gap: 0.4rem;
}

.cheat-list strong {
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: right;
}

.cheat-army {
    color: var(--lg-text);
    font-size: 0.85rem;
}

/* =============================================================================
   Branch Selector (§modernized)
   ============================================================================= */

.branch-selector {
    padding: 0.5rem 0;
}

.branch-selector-banner {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lg-accent);
    letter-spacing: 0.02em;
    margin-bottom: 0.9rem;
    padding: 0.5rem 0.8rem;
    background: rgba(124, 180, 230, 0.06);
    border-left: 2px solid var(--lg-accent);
    border-radius: 0 4px 4px 0;
}

.branch-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.branch-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    background: linear-gradient(180deg, var(--lg-surface) 0%, #13181f 100%);
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.branch-card:hover {
    border-color: var(--lg-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.branch-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.branch-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--lg-text);
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}

.branch-card-meta-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lg-text);
    font-variant-numeric: tabular-nums;
}

.branch-card-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.branch-card-metric em {
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 400;
    color: var(--lg-text-faint);
    letter-spacing: 0.02em;
    text-transform: none;
}

.branch-card-metric.win { color: var(--lg-good); }
.branch-card-metric.loss { color: var(--lg-bad); }

.branch-card-sep {
    color: var(--lg-text-faint);
    font-weight: 400;
    user-select: none;
}

.branch-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--lg-accent);
    line-height: 1.3;
}

/* =============================================================================
   Branch Header Strip (§5)
   ============================================================================= */

.branch-header-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--lg-border-soft);
}

.branch-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--lg-border-soft);
    border-radius: 6px;
    color: var(--lg-text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.branch-back-icon:hover {
    background: rgba(125, 180, 230, 0.08);
    border-color: var(--lg-accent);
    color: var(--lg-text);
}

.branch-header-main {
    flex: 1;
    min-width: 0;
}

.branch-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--lg-text-faint);
}

.breadcrumb-seg {
    background: none;
    border: none;
    padding: 0.1rem 0.2rem;
    font: inherit;
    color: var(--lg-text-faint);
    cursor: pointer;
}

.breadcrumb-seg:hover {
    color: var(--lg-text);
}

.breadcrumb-sep {
    color: var(--lg-text-dim);
}

.branch-header-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.branch-header-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lg-text);
}

.branch-header-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.82rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
}

.branch-header-stats .win { color: var(--lg-good); }
.branch-header-stats .loss { color: var(--lg-bad); }

.branch-key-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.branch-key-item {
    font-size: 0.74rem;
    padding: 0.18rem 0.48rem;
    border-radius: 4px;
    background: rgba(125, 180, 230, 0.08);
    border: 1px solid rgba(125, 180, 230, 0.22);
    color: var(--lg-accent);
}

/* =============================================================================
   Timeline controls (mode toggle, legend)
   ============================================================================= */

.timeline-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}

.mode-toggle {
    display: inline-flex;
    padding: 3px;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border-soft);
    border-radius: 7px;
}

.mode-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--lg-text-faint);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mode-toggle-btn.is-active {
    background: var(--lg-surface);
    color: var(--lg-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mode-toggle-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lg-text-dim);
}

.mode-toggle-btn.is-active .mode-toggle-dot {
    background: var(--lg-accent);
}

.timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-size: 0.74rem;
    color: var(--lg-text-faint);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.legend-item[data-kind="step"] i { color: var(--k-step); }
.legend-item[data-kind="production"] i { color: var(--k-production); }
.legend-item[data-kind="position"] i { color: var(--k-position); }
.legend-item[data-kind="flex"] i { color: var(--k-flex); }
.legend-item[data-kind="scout"] i { color: var(--k-scout); }
.legend-item[data-kind="decision"] i { color: var(--k-decision); }
.legend-item[data-kind="highlight"] i { color: var(--k-highlight); }

/* =============================================================================
   Branch grid (timeline + sidebar) (§2)
   ============================================================================= */

.branch-shell {
    padding-top: 0.4rem;
}

.branch-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}

.timeline-column {
    min-width: 0;
}

.timeline-branch-selector {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lg-border-soft);
}

.branch-sidebar {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lg-border) transparent;
    padding-right: 0.25rem;
}

.branch-sidebar::-webkit-scrollbar {
    width: 6px;
}
.branch-sidebar::-webkit-scrollbar-thumb {
    background: var(--lg-border);
    border-radius: 3px;
}

@media (max-width: 1100px) {
    .branch-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .branch-sidebar {
        position: static;
        max-height: none;
    }
}

/* =============================================================================
   Sidebar panels (§9d live context)
   ============================================================================= */

.sidebar-panel {
    padding: 0.85rem;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border-soft);
    border-radius: 9px;
}

.sidebar-panel-title {
    font-size: 0.7rem;
    color: var(--lg-text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.55rem;
}

.sidebar-stats-panel {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    gap: 0.5rem;
}

.sidebar-stat-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.sidebar-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lg-text);
}

.sidebar-stat-value.win { color: var(--lg-good); }
.sidebar-stat-value.loss { color: var(--lg-bad); }

.sidebar-stat-label {
    font-size: 0.7rem;
    color: var(--lg-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-key-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.sidebar-key-chip {
    font-size: 0.76rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(125, 180, 230, 0.08);
    border: 1px solid rgba(125, 180, 230, 0.2);
    color: var(--lg-accent);
}

.sidebar-scout-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-scout-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--lg-text-muted);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.sidebar-scout-item:hover {
    background: rgba(125, 180, 230, 0.06);
    border-color: rgba(125, 180, 230, 0.2);
}

.sidebar-scout-time {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.78rem;
    color: var(--k-scout);
    font-variant-numeric: tabular-nums;
}

.sidebar-scout-title {
    font-size: 0.82rem;
    color: var(--lg-text);
    line-height: 1.3;
}

.sidebar-ref-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Reference replay card — horizontal layout with map-initials avatar,
   race-colored left strip (protoss/terran/zerg), and a win/loss tag. */
.sidebar-ref-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem 0.5rem 0.55rem;
    border: 1px solid var(--lg-border-soft);
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: var(--lg-surface-2);
    transition: border-color 0.15s, background 0.15s;
}

.sidebar-ref-item:hover {
    background: rgba(125, 211, 252, 0.04);
    border-color: rgba(125, 211, 252, 0.25);
}

.sidebar-ref-item.race-p { border-left-color: #f4c542; }
.sidebar-ref-item.race-t { border-left-color: #56c2ff; }
.sidebar-ref-item.race-z { border-left-color: #b78bff; }

.sidebar-ref-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(135deg, #14202e 0%, #0a1018 100%);
    border: 1px solid rgba(125, 180, 230, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lg-text-faint);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sidebar-ref-item.race-p .sidebar-ref-thumb { color: #f4c542; border-color: rgba(244, 197, 66, 0.35); }
.sidebar-ref-item.race-t .sidebar-ref-thumb { color: #56c2ff; border-color: rgba(86, 194, 255, 0.35); }
.sidebar-ref-item.race-z .sidebar-ref-thumb { color: #b78bff; border-color: rgba(183, 139, 255, 0.35); }

.sidebar-ref-body {
    min-width: 0;
}

.sidebar-ref-title {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lg-text);
}

.sidebar-ref-player {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.sidebar-ref-result {
    flex-shrink: 0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}

.sidebar-ref-result-win { color: var(--lg-good); }
.sidebar-ref-result-loss { color: var(--lg-bad); }

.sidebar-ref-map {
    font-size: 0.76rem;
    color: #b9cde0;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-ref-sub {
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: var(--lg-text-faint);
}

.sidebar-ref-actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.sidebar-ref-btn {
    padding: 0.25rem 0.55rem;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border-soft);
    border-radius: 4px;
    color: var(--lg-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.sidebar-ref-btn:hover {
    background: rgba(125, 180, 230, 0.08);
    border-color: var(--lg-accent);
    color: var(--lg-text);
}

.sidebar-ref-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.sidebar-live-context {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, var(--lg-surface) 0%, #13181f 100%);
    border-left: 2px solid var(--lg-accent);
    border-radius: 0 9px 9px 0;
}

.sidebar-ctx-left,
.sidebar-ctx-right {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.sidebar-ctx-right {
    align-self: stretch;
    justify-content: center;
}

/* Sidebar matchup picker — always the first panel so it pins to the
   upper-right of the guide view. Compact styling so it doesn't visually
   compete with the denser stats panel below. */
.sidebar-matchup-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(8, 12, 24, 0.72);
    border: 1px solid var(--lg-border-soft, rgba(255,255,255,0.08));
    border-radius: 8px;
    margin-bottom: 0.6rem;
}
.sidebar-matchup-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lg-text-faint, #8891a0);
}
.sidebar-matchup-select {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: rgba(15, 19, 28, 0.85);
    color: var(--lg-text, #e6e9ef);
    border: 1px solid var(--lg-border-soft, rgba(255,255,255,0.12));
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.sidebar-matchup-select:hover,
.sidebar-matchup-select:focus {
    border-color: var(--lg-accent, #56c2ff);
    outline: none;
}

/* Inline "You're here" chip rendered inside the active phase marker
   (OPENING / EARLY GAME / MID / LATE). Hidden until the timeline
   observer marks that marker with .tl-here-active. Uses the same
   .sidebar-live-context markup as the old sidebar panel.
   Phase markers are a 3-column grid (time | glyph | label). Pin the
   slot to column 3 so it aligns with the phase label above it and
   leaves the time/glyph columns clear for the timeline's vertical
   gutter line to pass behind it. */
.tl-here-slot {
    display: none;
    margin-top: 0.4rem;
    grid-column: 3;
}
.timeline-phase-marker.tl-here-active .tl-here-slot {
    display: block;
}
.tl-here-slot .sidebar-live-context {
    background: linear-gradient(180deg, rgba(86, 194, 255, 0.08) 0%, rgba(13, 17, 23, 0.85) 100%);
    border-left: 2px solid var(--lg-accent, #56c2ff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    /* Bleed left by (padding-left 0.85rem + border-left 2px) so inner
       text aligns with the grid-column-3 start (OPENING label and
       build-row content). Blue accent border then sits in the glyph
       gutter, visually tying the card to its phase marker. */
    margin-left: calc(-0.85rem - 2px);
}
/* Highlight the active phase label so the user spots the anchor. */
.timeline-phase-marker.tl-here-active .timeline-phase-label {
    color: var(--lg-accent, #56c2ff);
}

.sidebar-ctx-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-ctx-label {
    font-size: 0.7rem;
    color: var(--lg-text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-ctx-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lg-text);
}

.sidebar-ctx-mini-stats {
    display: flex;
    gap: 0.75rem;
}

.sidebar-ctx-mini-stats span {
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
}

.sidebar-ctx-mini-stats strong {
    font-size: 0.95rem;
    color: var(--lg-text);
    font-weight: 700;
}

.sidebar-ctx-mini-stats em {
    font-size: 0.65rem;
    font-style: normal;
    color: var(--lg-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-ctx-units {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-ctx-unit {
    display: grid;
    grid-template-columns: 70px 1fr 32px;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.78rem;
}

.sidebar-ctx-unit-name {
    color: var(--lg-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-ctx-unit-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--lg-surface-2);
    overflow: hidden;
}

.sidebar-ctx-unit-bar i {
    display: block;
    height: 100%;
    background: var(--k-production);
    border-radius: 2px;
}

.sidebar-ctx-unit-val {
    color: var(--lg-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* =============================================================================
   Timeline — the core component (§3)
   ============================================================================= */

.timeline {
    position: relative;
    padding: 0.5rem 0 2rem;
    /* One timeline token controls all row vertical rhythm. */
    --tl-row-h: 30px;
    --tl-time-col: 46px;
    /* Glyph column now hosts 22px unit/building icons (was 16px for the
       old blue-dot). Widened so the row height accommodates the chip
       cleanly without clipping. */
    --tl-glyph-col: 22px;
    --tl-gap: 0.5rem;
    /* Computed center-x of the glyph column (where the spine should sit). */
    --tl-spine-x: calc(var(--tl-time-col) + var(--tl-gap) + (var(--tl-glyph-col) / 2));
}

/* Vertical rail — now passes through the dot centers (was aligned to dot left edge). */
.timeline::before {
    content: '';
    position: absolute;
    left: var(--tl-spine-x);
    top: 0;
    bottom: 2rem;
    width: 1px;
    background: var(--lg-border-soft);
}

.timeline-empty {
    padding: 2rem;
    color: var(--lg-text-faint);
    text-align: center;
    background: var(--lg-surface-2);
    border-radius: 9px;
}

/* Minute tick — same rhythm as events so rows sit on a consistent grid. */
.timeline-tick {
    display: grid;
    grid-template-columns: var(--tl-time-col) var(--tl-glyph-col) 1fr;
    align-items: center;
    gap: var(--tl-gap);
    min-height: var(--tl-row-h);
    padding: 0;
}

.timeline-tick-time {
    text-align: right;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.72rem;
    color: var(--lg-text-dim);
    font-variant-numeric: tabular-nums;
}

.timeline-tick-line {
    grid-column: 3;
    height: 1px;
    background: linear-gradient(to right, var(--lg-border-soft) 0%, transparent 100%);
}

/* Phase marker — aligns to row grid, small vertical accent only. */
.timeline-phase-marker {
    display: grid;
    grid-template-columns: var(--tl-time-col) var(--tl-glyph-col) 1fr;
    gap: var(--tl-gap);
    align-items: center;
    min-height: var(--tl-row-h);
    padding: 0.35rem 0 0.1rem;
}

.timeline-phase-label {
    grid-column: 3;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lg-warn);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Timeline event — base shell. All event types inherit this row grid. */
.tl-event {
    display: grid;
    grid-template-columns: calc(var(--tl-time-col) + var(--tl-gap) + var(--tl-glyph-col) + var(--tl-gap)) 1fr;
    gap: 0;
    min-height: var(--tl-row-h);
    padding: 0;
    color: var(--lg-text-muted);
}

.tl-event[data-kind="step"] { --accent: var(--k-step); }
.tl-event[data-kind="production"] { --accent: var(--k-production); }
.tl-event[data-kind="position"] { --accent: var(--k-position); }
.tl-event[data-kind="flex"] { --accent: var(--k-flex); }
.tl-event[data-kind="scout"] { --accent: var(--k-scout); }
.tl-event[data-kind="decision"] { --accent: var(--k-decision); }
.tl-event[data-kind="highlight"] { --accent: var(--k-highlight); }

.tl-gutter {
    display: grid;
    grid-template-columns: var(--tl-time-col) var(--tl-glyph-col);
    gap: var(--tl-gap);
    align-items: center;
    padding-right: var(--tl-gap);
    padding-top: 0;
}

.tl-time {
    text-align: right;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.76rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--accent);
    background: var(--lg-bg);
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.tl-row {
    min-width: 0;
    padding-left: 0.2rem;
    position: relative;
}

/* === Build step rows (the spine, always expanded, full contrast) === */

.tl-step {
    padding: 0;
}

.tl-step .tl-gutter {
    padding-top: 0;
}

.tl-step-row {
    display: grid;
    /* supply | action | meta | (optional) highlight-pill | importance-dot */
    grid-template-columns: 40px 1fr auto auto;
    gap: 0.45rem 0.65rem;
    align-items: center;
    min-height: var(--tl-row-h, 30px);
    padding: 0;
}
.tl-step-has-highlight .tl-step-row {
    grid-template-columns: 40px 1fr auto auto auto;
}

/* Pink "HIGHLIGHT" pill on the step row — signals that this step has an
   absorbed highlight body underneath. Clicking toggles the body open. */
.tl-step-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(244, 114, 182, 0.4);
    background: rgba(244, 114, 182, 0.08);
    border-radius: 3px;
    color: var(--k-highlight, #f472b6);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms;
}
.tl-step-highlight-pill:hover {
    background: rgba(244, 114, 182, 0.15);
}
.tl-step-highlight-caret {
    font-size: 0.65rem;
    transition: transform 120ms;
}
.tl-step.is-expanded .tl-step-highlight-caret {
    transform: rotate(180deg);
}

/* Step with absorbed highlight body — hide body by default, reveal when
   step is expanded. .tl-event is a 2-column grid (gutter | row); the body
   is a third child that must span both columns or it ends up crammed into
   the narrow gutter column. Inset padding keeps the body aligned under the
   step's action text so it visually belongs to the step. */
.tl-step-has-highlight .tl-body {
    display: none;
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    padding-left: calc(var(--tl-time-col) + var(--tl-gap) + var(--tl-glyph-col) + var(--tl-gap) + 0.2rem);
}
.tl-step-has-highlight.is-expanded .tl-body {
    display: block;
}

/* Step icon lives in the gutter's .tl-glyph slot, replacing the old
   generic blue dot. Size must match the glyph column width so the
   timeline's vertical alignment doesn't shift between step and
   non-step events. */
.tl-glyph-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tl-glyph-col, 22px);
    height: var(--tl-glyph-col, 22px);
}
.tl-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.tl-step-icon .sc2-chip {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}
.tl-step-icon .sc2-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tl-supply {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.85rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tl-action {
    font-size: 0.95rem;
    color: var(--lg-text);
    font-weight: 500;
    line-height: 1.2;
}

.tl-meta {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.74rem;
    color: var(--lg-text-dim);
    font-variant-numeric: tabular-nums;
}

.tl-importance-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lg-text-dim);
    box-shadow: 0 0 0 2px var(--lg-bg);
}

.tl-importance-dot.core { background: var(--lg-good); }
.tl-importance-dot.standard { background: var(--lg-warn); }
.tl-importance-dot.optional { background: var(--lg-text-dim); }

/* === Non-step (contextual) events: recessive styling (§9b) === */

.tl-event:not(.tl-step) .tl-row {
    padding-left: 0;
}

.tl-event:not(.tl-step) {
    margin: 0;
}

.tl-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--tl-row-h, 30px);
    padding: 0 0.5rem 0 0;
    background: transparent;
    border: none;
    font: inherit;
    color: var(--lg-text-faint);
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}

.tl-summary:hover {
    background: rgba(125, 180, 230, 0.04);
    color: var(--lg-text-muted);
}

.tl-sum-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.tl-sum-title {
    font-size: 0.86rem;
    color: var(--lg-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.tl-sum-meta {
    font-size: 0.76rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.tl-chev {
    width: 12px;
    height: 12px;
    color: var(--lg-text-dim);
    transition: transform 0.18s ease-out;
    flex-shrink: 0;
    flex-basis: 12px;
}

/* Defensive SVG sizing — prevents SVGs from stretching to container width
   in flex layouts. Browsers sometimes ignore HTML width/height attributes
   on inline SVGs that are flex children (especially with viewBox set), so
   we enforce explicit pixel sizes via CSS. */
.learn-guide-view svg {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
}
.hero-toggle-chev,
.tl-chev {
    width: 12px !important;
    height: 12px !important;
}
.tl-glyph svg {
    width: 10px !important;
    height: 10px !important;
}
.branch-back-icon svg {
    width: 16px !important;
    height: 16px !important;
}
.branch-card-cta svg,
.fork-card-cta svg,
.hero-details-toggle svg {
    width: 12px !important;
    height: 12px !important;
}
.branch-card-cta {
    align-self: flex-start;
}

.tl-event.is-expanded .tl-chev {
    transform: rotate(90deg);
}

.tl-event:not(.tl-step) .tl-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease-out;
}

.tl-event.is-expanded .tl-body {
    max-height: 3000px;
}

/* Scout-outcomes are decision gates — always expanded, no collapse. The
   max-height transition is bypassed so the decision card renders at its
   natural height immediately (avoids a transition-from-0 flash, and
   sidesteps backgrounded-tab animation stalls where the transition never
   completes). */
.tl-event.tl-scout-outcomes .tl-body {
    max-height: none;
    transition: none;
    overflow: visible;
}

.tl-body-inner {
    padding: 0.55rem 0 0.7rem 0.5rem;
    border-left: 1px dashed rgba(125, 180, 230, 0.15);
    margin-left: -0.5rem;
    padding-left: 0.75rem;
}

.tl-subhead {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--lg-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0.7rem 0 0.35rem;
}

.tl-subhead:first-child {
    margin-top: 0;
}

.tl-para {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    color: var(--lg-text-muted);
    line-height: 1.45;
}

.tl-para-note {
    padding: 0.45rem 0.6rem;
    background: rgba(230, 196, 127, 0.06);
    border-left: 2px solid var(--lg-warn);
    border-radius: 0 4px 4px 0;
    color: var(--lg-warn);
}

/* Data bar rows (§6) */

.tl-data-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tl-data-row {
    display: grid;
    grid-template-columns: minmax(80px, 130px) 1fr 42px;
    gap: 0.65rem;
    align-items: center;
    font-size: 0.82rem;
    padding: 2px 0;
}

.tl-data-label {
    color: var(--lg-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-data-bar {
    height: 4px;
    background: var(--lg-surface-2);
    border-radius: 2px;
    overflow: hidden;
}

.tl-data-bar i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.tl-data-value {
    text-align: right;
    color: var(--lg-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.78rem;
}

/* Inline infrastructure line */

.tl-infra-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    font-size: 0.82rem;
    color: var(--lg-text-muted);
    line-height: 1.55;
}

.tl-infra-item {
    position: relative;
}

.tl-infra-item::after {
    content: '·';
    position: absolute;
    right: -0.5rem;
    color: var(--lg-text-dim);
}

.tl-infra-line .tl-infra-item:last-child::after {
    content: '';
}

/* Generic chip row + chip styling — shared by renderScoutingContext's
   Priority Targets, renderTimingCheckpoint's Target Composition and
   Required Upgrades. One chip per unit/upgrade with a compact border. */
.tl-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}
.tl-chip {
    padding: 0.1rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--lg-text, #e5e7eb);
    font-variant-numeric: tabular-nums;
}
/* Scout stats row — learned-from sample + WR-if-followed/missed */
.tl-scout-stats {
    display: flex;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: var(--lg-text-muted, #9ca3af);
    margin-top: 0.4rem;
}
/* Scout response map — "If you see X: do Y" list */
.tl-resp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tl-resp-list li {
    font-size: 0.85rem;
    color: var(--lg-text, #e5e7eb);
}
/* Decision-card choice grid — A/B continuations with win rate and sample.
   Zone styling borrows the decision amber so it matches the top-level
   decision-card conventions. */
.tl-zone-decision { --tl-zone-accent: #fbbf24; --tl-zone-bg: rgba(251, 191, 36, 0.07); }
.tl-choice-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tl-choice-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}
.tl-choice-row.tl-choice-win { border-left-color: #34d399; }
.tl-choice-row.tl-choice-loss { border-left-color: #f87171; }
.tl-choice-label {
    font-size: 0.88rem;
    color: var(--lg-text, #e5e7eb);
    font-weight: 500;
}
.tl-choice-stats {
    display: flex;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--lg-text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
}
.tl-choice-wr { font-weight: 600; }
.tl-choice-row.tl-choice-win .tl-choice-wr { color: #6ee7b7; }
.tl-choice-row.tl-choice-loss .tl-choice-wr { color: #fca5a5; }

/* Timing-checkpoint stats row — attack time + supply + hit-timing WR */
.tl-tcd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-size: 0.82rem;
    color: var(--lg-text, #e5e7eb);
    padding: 0.3rem 0.55rem;
    border-left: 3px solid #facc15;
    background: rgba(250, 204, 21, 0.06);
    border-radius: 2px;
    margin-bottom: 0.4rem;
}
.tl-tcd-stats strong {
    color: var(--lg-text-muted, #9ca3af);
    font-weight: 600;
}

/* Composition targets folded into a production window — replaces standalone
   "Target @ x:xx" highlight cards. Each row: time gutter + unit chips. */
.tl-target-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tl-target-row {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--lg-text, #e5e7eb);
}
.tl-target-time {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--lg-text-muted, #9ca3af);
    font-size: 0.8rem;
}
.tl-target-units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
}
.tl-target-unit {
    padding: 0.1rem 0.45rem;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 3px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* Position event stat row */

.tl-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.tl-pos-stat {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.45rem 0.55rem;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border-soft);
    border-radius: 6px;
}

.tl-pos-stat-value {
    font-weight: 700;
    color: var(--lg-text);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.tl-pos-stat-label {
    font-size: 0.68rem;
    color: var(--lg-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Flex event rows */

.tl-flex-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tl-flex-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border-soft);
    border-radius: 6px;
    font-size: 0.82rem;
}

.tl-flex-row.core { border-left: 2px solid var(--lg-good); }
.tl-flex-row.common { border-left: 2px solid var(--k-position); }
.tl-flex-row.reactive { border-left: 2px solid var(--lg-warn); }

.tl-flex-name {
    color: var(--lg-text);
    font-weight: 500;
}

.tl-flex-range {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.76rem;
    color: var(--lg-accent);
}

.tl-flex-share {
    color: var(--lg-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

.tl-flex-importance {
    color: var(--lg-text-faint);
    font-size: 0.72rem;
    text-transform: capitalize;
}

/* Scout method lists */

.tl-method-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tl-method-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0.5rem;
    background: var(--lg-surface-2);
    border-radius: 5px;
    font-size: 0.82rem;
}

.tl-method-list strong {
    color: var(--lg-text);
    font-weight: 500;
}

.tl-method-list span {
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
}

.tl-responses {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tl-resp {
    padding: 0.35rem 0.5rem;
    background: var(--lg-surface-2);
    border-radius: 5px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.tl-resp strong {
    color: var(--lg-text);
}

.tl-empty {
    padding: 0.5rem;
    color: var(--lg-text-faint);
    font-style: italic;
    font-size: 0.82rem;
}

/* Scout primary method chip — anchors the "scout with X" answer (P2.3). */
.tl-scout-primary {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--lg-surface-2);
    border-left: 3px solid var(--lg-accent, #4aa3ff);
    border-radius: 4px;
    font-size: 0.9rem;
}

.tl-scout-primary-label {
    color: var(--lg-text-faint);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tl-scout-primary strong {
    color: var(--lg-text);
    font-weight: 600;
}

.tl-scout-share {
    margin-left: auto;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}

/* Likely-paths list — posterior archetype probabilities (P1.4). */
.tl-likely-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tl-likely-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0.5rem;
    background: var(--lg-surface-2);
    border-radius: 5px;
    font-size: 0.82rem;
}

.tl-likely-name {
    color: var(--lg-text);
}

.tl-likely-prob {
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Ruled-out strategy chips — strikethrough so the elimination is visible. */
.tl-infra-item.tl-ruled-out {
    color: var(--lg-text-faint);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Respond-to severity badges + defense-deadline clock (P1.3). */
.tl-resp-sev {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.tl-sev-critical {
    background: rgba(220, 70, 70, 0.25);
    color: #ff8e8e;
}

.tl-sev-high {
    background: rgba(220, 150, 60, 0.22);
    color: #ffc98e;
}

.tl-sev-medium {
    background: rgba(200, 200, 80, 0.18);
    color: #e8e090;
}

.tl-sev-low {
    background: rgba(120, 170, 210, 0.18);
    color: #9fc5e8;
}

.tl-resp-by {
    margin-left: 0.5rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

/* Winners-adapt-with list (P3.1 — action + deadline per adaptation). */
.tl-adapt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tl-adapt-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0.5rem;
    background: var(--lg-surface-2);
    border-radius: 5px;
    font-size: 0.82rem;
}

.tl-adapt-detail {
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

/* Decision / Fork card (§9c) */

.tl-event.is-fork.is-expanded .tl-body {
    max-height: 5000px;
}

.fork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.fork-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.8rem;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: 8px;
}

.fork-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--lg-border-soft);
}

.fork-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--lg-text);
    line-height: 1.2;
}

.fork-card-stats {
    display: flex;
    gap: 0.7rem;
    font-size: 0.76rem;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
}

.fork-card-stats .win { color: var(--lg-good); }
.fork-card-stats .loss { color: var(--lg-bad); }

.fork-card-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fork-step {
    display: grid;
    grid-template-columns: 28px 1fr 42px;
    gap: 0.5rem;
    align-items: center;
    padding: 3px 0;
    font-size: 0.8rem;
}

.fork-step-supply {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    color: var(--lg-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.76rem;
    text-align: right;
}

.fork-step-name {
    color: var(--lg-text);
}

.fork-step-time {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    color: var(--lg-text-dim);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.fork-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: rgba(125, 180, 230, 0.08);
    border: 1px solid rgba(125, 180, 230, 0.25);
    border-radius: 6px;
    color: var(--lg-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.fork-card-cta:hover {
    background: rgba(125, 180, 230, 0.14);
    border-color: var(--lg-accent);
}

/* Choices (fallback when no branches to fork into) */

.tl-choice-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tl-choice {
    padding: 0.65rem 0.75rem;
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-border-soft);
    border-radius: 6px;
}

.tl-choice-title {
    font-weight: 700;
    color: var(--lg-text);
    margin-bottom: 0.2rem;
}

.tl-choice-desc {
    font-size: 0.85rem;
    color: var(--lg-text-muted);
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

.tl-choice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    font-size: 0.78rem;
    color: var(--lg-text-faint);
}

/* Highlight notes */

.tl-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tl-note-list li {
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--lg-text-muted);
    background: var(--lg-surface-2);
    border-radius: 5px;
    border-left: 2px solid var(--k-highlight);
}

/* Commit 1: addon-swap marker on step rows — tree_enrichment writes
   "Addon Swap:" strategy_notes per node, build_guide copies them onto
   matching structural_build / branch.steps as `swap_notes`, and this
   renders a prominent SWAP chip next to the action name.
   Made more visible so users don't miss it in dense timelines:
   - Always-visible pill with ⇄ + "SWAP" text + small count badge
   - Race-t colored border so it stands apart from other row chrome
   - Row gets a subtle left border highlight on .has-swap for scan-ability */
.tl-swap-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.55rem;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid rgba(86, 194, 255, 0.45);
    background: rgba(86, 194, 255, 0.14);
    color: var(--race-t, #56c2ff);
    font-family: var(--display, 'Rajdhani', system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tl-swap-marker::after {
    content: 'swap';
    font-size: 0.62rem;
}

.tl-swap-marker:hover {
    background: rgba(86, 194, 255, 0.28);
    border-color: var(--race-t, #56c2ff);
    color: #d4ecff;
}

/* Row-level accent so the whole line reads "context here" at a glance */
.tl-step.has-swap {
    box-shadow: inset 2px 0 0 rgba(86, 194, 255, 0.5);
}

.tl-step.has-swap .tl-action {
    color: var(--text, #e6e9ef);
}

/* Cancelled-building badges in guides (ebay_block, pylon_cancel, etc.) */
.tl-cancel-badge {
    display: inline-block;
    margin-left: 0.45em;
    padding: 0 0.4em;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.5;
    background: rgba(220, 53, 69, 0.2);
    color: #ff7a88;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

.tl-step.tl-cancel-proxy_cancel .tl-cancel-badge {
    background: rgba(240, 173, 78, 0.18);
    color: #f3b55b;
    border-color: rgba(240, 173, 78, 0.38);
}

.tl-step.tl-cancel-gas_steal .tl-cancel-badge {
    background: rgba(153, 102, 204, 0.22);
    color: #c79bff;
    border-color: rgba(153, 102, 204, 0.4);
}

.tl-step.tl-cancel-bunker_cancel .tl-cancel-badge,
.tl-step.tl-cancel-normal .tl-cancel-badge {
    background: rgba(150, 150, 150, 0.18);
    color: #bbb;
    border-color: rgba(150, 150, 150, 0.35);
}

.tl-step.tl-cancel .tl-action {
    text-decoration-line: line-through;
    text-decoration-color: rgba(255, 122, 136, 0.45);
    text-decoration-thickness: 1px;
}

/* Proxy-placement badge — red pill next to structures built at a proxy
   position in the majority of cluster games. Driven by step.is_proxy
   (aggregated in build_guide.compute_consensus_build). */
.tl-proxy-badge {
    display: inline-block;
    margin-left: 0.45em;
    padding: 0 0.45em;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.5;
    background: rgba(220, 53, 69, 0.22);
    color: #ff6a7a;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

/* Phase 3: floor badge on step rows — shows the simulator's earliest-feasible
   timing. Colored subtly so it reads as information, not alarm. */
.tl-floor-badge {
    font-size: 0.66rem;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-variant-numeric: tabular-nums;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
    color: var(--lg-text-dim);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* is-ahead-room: typical is ≥10s slower than sim — player has macro slack */
.tl-floor-badge.is-ahead-room,
.tl-step.is-ahead-room .tl-floor-badge {
    color: #93d5ff;
    border-color: rgba(86, 194, 255, 0.32);
    background: rgba(86, 194, 255, 0.06);
}

/* is-strict: sim is slower than typical — the given order is constraining.
   Displayed muted so it doesn't imply the player is wrong. */
.tl-floor-badge.is-strict,
.tl-step.is-strict .tl-floor-badge {
    color: var(--lg-text-faint);
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.05);
}

/* is-match: within ~10s — near-optimal for this order */
.tl-floor-badge.is-match,
.tl-step.is-match .tl-floor-badge {
    color: #7ee298;
    border-color: rgba(63, 185, 80, 0.28);
    background: rgba(63, 185, 80, 0.05);
}

/* =============================================================================
   Jargon glossary — dotted-underline hover tooltips on curated SC2 terms
   (archetype, FE, all-in, macro, etc.). Populated by glossary.js which wraps
   matching text nodes in <span class="gloss" data-def="..."> inside opted-in
   containers (zone lists, hero summaries, teaching strips).

   Behavior:
   - Hover/focus shows the definition in a tooltip bubble above the term.
   - Tap on touch/mobile toggles .is-open (populated by glossary.js binding).
   - Tooltips use position: absolute inside the .gloss element so they flow
     with the page; overflow-x is held by body.
   ============================================================================= */
.gloss {
    border-bottom: 1px dotted rgba(125, 211, 252, 0.55);
    cursor: help;
    position: relative;
    color: inherit;
    transition: border-color 0.15s, color 0.15s;
}
.gloss:hover,
.gloss:focus-visible {
    border-bottom-color: rgba(125, 211, 252, 0.9);
    color: #bae6fd;
    outline: none;
}
.gloss:focus-visible {
    outline: 1px solid rgba(125, 211, 252, 0.35);
    outline-offset: 2px;
    border-radius: 1px;
}
.gloss::after {
    content: attr(data-def);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    max-width: 340px;
    padding: 0.45rem 0.65rem;
    background: #0b1220;
    border: 1px solid rgba(125, 211, 252, 0.45);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    white-space: normal;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    display: none;
    pointer-events: none;
}
.gloss:hover::after,
.gloss:focus-visible::after,
.gloss.is-open::after {
    display: block;
}
/* Flip the tooltip below the term when it's near the top of the viewport so
   it doesn't get clipped by the sticky archetype tabs or hero strip. */
.gloss.is-open::after {
    pointer-events: auto;
}
/* Prevent the tooltip from pushing inline content around — position it over. */
.gloss {
    display: inline;
}

/* =============================================================================
   Zone legend — dismissible "how to read highlight cards" banner shown
   once per browser (localStorage gate). Renders above the timeline so new
   users can map colored zones to meaning before they dive in.
   ============================================================================= */
.zone-legend {
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.85rem 0.7rem;
    background: linear-gradient(180deg, rgba(13, 22, 36, 0.88) 0%, rgba(10, 16, 28, 0.75) 100%);
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-left: 3px solid rgba(125, 211, 252, 0.55);
    border-radius: 4px;
    color: #cbd5e1;
}
.zone-legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.zone-legend-title {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: #e0f2fe;
}
.zone-legend-close {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #94a3b8;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.zone-legend-close:hover {
    color: #fff;
    border-color: rgba(148, 163, 184, 0.55);
    background: rgba(148, 163, 184, 0.08);
}
.zone-legend-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0.45rem;
}
.zone-legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.55rem;
    font-size: 0.82rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.zone-legend-pill strong {
    color: #e2e8f0;
    font-weight: 600;
    margin-right: 0.15rem;
}
.zone-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.zone-legend-threat .zone-legend-swatch    { background: #f87171; }
.zone-legend-action .zone-legend-swatch    { background: #fbbf24; }
.zone-legend-production .zone-legend-swatch{ background: #a78bfa; }
.zone-legend-scout .zone-legend-swatch     { background: #34d399; }
.zone-legend-threat     { border-color: rgba(248, 113, 113, 0.28); }
.zone-legend-action     { border-color: rgba(251, 191, 36, 0.32); }
.zone-legend-production { border-color: rgba(167, 139, 250, 0.28); }
.zone-legend-scout      { border-color: rgba(52, 211, 153, 0.28); }
.zone-legend-hint {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.4;
}
.zone-legend-hint strong { color: #cbd5e1; font-weight: 600; }

/* =============================================================================
   HIGHLIGHT zoned card — Tier 2 redesign.
   The old flat <ul> is now partitioned into Threat / Action / Production /
   Scout zones so the imperative ("Build Cyclone by 3:18") visually dominates
   while supporting detail lives in its own lane. "Why?" expand-on-demand
   holds the ruled-out list and raw adaptation stats.
   ============================================================================= */

.tl-zone {
    margin: 0.5rem 0;
    padding: 0.35rem 0.6rem 0.35rem 0.7rem;
    border-left: 2px solid var(--tl-zone-accent, rgba(148, 163, 184, 0.35));
    background: var(--tl-zone-bg, rgba(148, 163, 184, 0.04));
    border-radius: 2px;
}
.tl-zone-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tl-zone-accent, #94a3b8);
    opacity: 0.85;
    margin-bottom: 0.2rem;
}
.tl-zone-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tl-zone-list li {
    padding: 0.15rem 0;
    line-height: 1.45;
}

/* Action zone — the single most load-bearing bullet. Large, accented. */
.tl-zone-action {
    --tl-zone-accent: #fbbf24;                          /* amber — matches decision */
    --tl-zone-bg: rgba(251, 191, 36, 0.08);
    border-left-width: 3px;
}
.tl-zone-action .tl-zone-list li {
    font-size: 1.02rem;
    font-weight: 500;
    color: #fde68a;
}

/* Threat zone — red tint for defensive urgency. */
.tl-zone-threat {
    --tl-zone-accent: #f87171;                          /* red 400 */
    --tl-zone-bg: rgba(248, 113, 113, 0.07);
}
.tl-zone-threat .tl-zone-list li { color: #fecaca; }

.tl-zone-production { --tl-zone-accent: var(--k-production); --tl-zone-bg: rgba(167, 139, 250, 0.06); }
.tl-zone-scout      { --tl-zone-accent: var(--k-scout);      --tl-zone-bg: rgba(52, 211, 153, 0.06); }

/* Composition / Upgrades / Look-for / Position — informational lanes that
   previously piled into the unlabelled "other" bucket. Distinct accents so
   a reader can scan the card without the content collapsing into a wall. */
.tl-zone-composition { --tl-zone-accent: #60a5fa; --tl-zone-bg: rgba(96, 165, 250, 0.07); }
.tl-zone-upgrade     { --tl-zone-accent: #c084fc; --tl-zone-bg: rgba(192, 132, 252, 0.06); }
.tl-zone-lookfor     { --tl-zone-accent: #facc15; --tl-zone-bg: rgba(250, 204, 21, 0.06); }
.tl-zone-position    { --tl-zone-accent: #38bdf8; --tl-zone-bg: rgba(56, 189, 248, 0.06); }

/* Branch-health banner — shown when WR<45% so the player doesn't
   mistake damage-control advice for winning advice. */
.tl-branch-banner {
    padding: 0.4rem 0.7rem;
    border-radius: 3px;
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.tl-branch-banner-negative {
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    color: #fecaca;
}

/* Tier 3 causal-chain strip — teaching line between Threat and Action.
   "Why: {archetype} → {implication} → pressure around {time} → counter
   with {unit} by {deadline}". Small, italic, non-dominant so it stays
   on the reader's periphery while the Action bullet remains the focus. */
.tl-chain {
    padding: 0.3rem 0.6rem;
    margin: 0.25rem 0 0.25rem 0.1rem;
    font-size: 0.82rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--lg-text-muted, #94a3b8);
    border-left: 2px dashed rgba(148, 163, 184, 0.35);
}
.tl-chain-label {
    font-style: normal;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lg-text-faint, #64748b);
    margin-right: 0.35rem;
}
.tl-chain-text { color: var(--lg-text, #cbd5e1); }

/* "Why?" expand-on-demand panel — hidden by default, click to reveal
   ruled-out archetypes and raw adaptation stats. */
.tl-why {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--lg-text-muted, #94a3b8);
}
.tl-why-summary {
    cursor: pointer;
    user-select: none;
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.tl-why-summary:hover { background: rgba(148, 163, 184, 0.06); }
.tl-why[open] .tl-why-summary { color: var(--lg-text, #e2e8f0); }
.tl-why-section { margin: 0.4rem 0; }
.tl-why-section ul { margin: 0.25rem 0; padding-left: 1.1rem; }

/* Scout-outcome selector — card grid that mirrors the
   "Pick your commitment at …" branch-selector layout. The scout
   decision is the first real divergence in the guide; using the same
   visual vocabulary as the post-opening branch-selector teaches the
   player that every divergence is a choice with the same weight.

   The hidden radio under each <label> carries the selection state;
   :has(:checked) drives the "Selected" card style. The label is
   tile-sized (not a small chip) so the grid looks and clicks like the
   branch-selector cards. */
.tl-scout-selector { padding: 0.35rem 0 0.15rem; }
.tl-scout-selector .branch-selector-grid { margin-bottom: 0.6rem; }

.tl-scout-card {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.tl-scout-card .tl-outcome-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.tl-scout-card:has(.tl-outcome-radio:checked) {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 1px var(--lg-accent), 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}
.tl-scout-card:has(.tl-outcome-radio:checked) .branch-card-cta {
    color: var(--lg-good, #86efac);
}
.tl-scout-card.is-selected .branch-card-cta svg { transform: none; }

/* No-info variant — muted amber palette so it reads as a fallback
   choice rather than a positive recommendation. */
.tl-scout-card-noinfo {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.04) 0%, #13181f 100%);
    border-color: rgba(251, 191, 36, 0.25);
}
.tl-scout-card-noinfo:hover { border-color: rgba(251, 191, 36, 0.55); }
.tl-scout-card-noinfo .branch-card-cta { color: rgba(252, 211, 77, 0.9); }
.tl-scout-card-noinfo:has(.tl-outcome-radio:checked) {
    border-color: rgba(251, 191, 36, 0.7);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.7), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.tl-scout-card-subtitle {
    font-size: 0.82rem;
    color: var(--lg-text-muted, #94a3b8);
    line-height: 1.4;
}

/* Suggested (auto-detect hook) — dashed outline + small "Suggested"
   badge inside the title row. Inert when no detection source is wired
   up, which is the current Learn-tab state. */
.tl-scout-card.is-suggested {
    border-style: dashed;
    border-color: rgba(125, 211, 252, 0.6);
}
.tl-scout-card-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, 0.95);
    background: rgba(125, 211, 252, 0.2);
    border-radius: 2px;
    vertical-align: middle;
}

/* Resolved-body panel — renders BELOW the card grid once the player has
   picked an outcome. Evidence chip + Threat pill + Action chip + why
   line + More disclosure. Keeps the cards visible so the player can
   still change their mind. */
.tl-scout-resolved {
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid var(--lg-border-soft, rgba(148, 163, 184, 0.18));
    border-radius: 8px;
}
.tl-scout-resolved > :first-child { margin-top: 0; }

/* Evidence chip inside a scout-outcome body, above the zoned content.
   Explains cause-before-consequence: "You scouted: <buildings>". */
.tl-outcome-evidence {
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    color: rgba(229, 231, 235, 0.88);
    background: rgba(96, 165, 250, 0.08);
    border-left: 2px solid rgba(96, 165, 250, 0.45);
    border-radius: 2px;
}
.tl-outcome-evidence em {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.25rem;
    color: rgba(147, 197, 253, 0.92);
}

/* "No info / scout denied" tab — muted amber palette so it reads as
   a fallback rather than a positive/recommended branch. */
.tl-outcome-tab-noinfo .tl-outcome-tab-label {
    color: rgba(252, 211, 77, 0.92);
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.05);
}
.tl-outcome-tab-noinfo:hover .tl-outcome-tab-label {
    background: rgba(251, 191, 36, 0.14);
}
.tl-outcome-tab-noinfo:has(.tl-outcome-radio:checked) .tl-outcome-tab-label {
    background: rgba(251, 191, 36, 0.22);
    color: rgba(254, 243, 199, 0.98);
    border-color: rgba(251, 191, 36, 0.55);
}
.tl-outcome-evidence-denied {
    background: rgba(251, 191, 36, 0.08);
    border-left-color: rgba(251, 191, 36, 0.5);
}
.tl-outcome-evidence-denied em {
    color: rgba(252, 211, 77, 0.95);
}

/* Scout-decision gate pulse — fired when the user resolves one scout
   and a later scout is still unresolved. Applied to the
   .branch-selector-banner inside an .is-scout-unresolved event so the
   banner draws attention without needing a separate element. */
.tl-event.is-scout-unresolved .branch-selector-banner.is-attention {
    animation: tl-prompt-pulse 1.4s ease-out 1;
}
@keyframes tl-prompt-pulse {
    0%   { background: rgba(96, 165, 250, 0.28); box-shadow: inset 2px 0 0 #60a5fa, 0 0 0 2px rgba(96, 165, 250, 0.25); }
    100% { background: rgba(124, 180, 230, 0.06); box-shadow: inset 2px 0 0 transparent, 0 0 0 2px transparent; }
}

/* Scout-inner simplified layout: one Threat pill + one Action chip + one
   italic why line. Non-primary content (production, next-scout, raw stats,
   opp WR) lives inside .tl-card-more. */
.tl-threat-pill {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    margin: 0.35rem 0;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #fecaca;
    background: rgba(248, 113, 113, 0.1);
    border-left: 3px solid #f87171;
    border-radius: 3px;
}
.tl-action-chip {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    margin: 0.35rem 0;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.35;
    color: #fde68a;
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid #fbbf24;
    border-radius: 3px;
}
.tl-scout-why {
    padding: 0.25rem 0.6rem;
    margin: 0.25rem 0 0.35rem 0.1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--lg-text-muted, #94a3b8);
    border-left: 2px dashed rgba(148, 163, 184, 0.35);
}

/* More disclosure — everything secondary. Zone color accents on child
   lists are preserved via existing .tl-zone-* rules so the guide-level
   legend stays accurate for expanded content. */
.tl-card-more {
    margin-top: 0.55rem;
    font-size: 0.84rem;
    color: var(--lg-text-muted, #94a3b8);
}
.tl-card-more-summary {
    cursor: pointer;
    user-select: none;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.tl-card-more-summary:hover { background: rgba(148, 163, 184, 0.06); }
.tl-card-more[open] .tl-card-more-summary { color: var(--lg-text, #e2e8f0); }
.tl-card-more > :not(summary) { margin-top: 0.5rem; }
.tl-more-stat {
    padding: 0.25rem 0;
    font-size: 0.82rem;
    color: var(--lg-text, #cbd5e1);
}
.tl-more-stat strong {
    color: var(--lg-text-muted, #94a3b8);
    font-weight: 600;
    margin-right: 0.3rem;
}

/* Reflow-origin step indicator: when a scout outcome is active, its
   post_scout_build steps replace archetype steps. Mark them with a
   subtle cyan left border so the player can see which rows are the
   branch-specific continuation vs. pre-scout archetype spine. */
.tl-step[data-from-reflow="1"] {
    border-left: 2px solid rgba(125, 211, 252, 0.55);
    padding-left: 0.4rem;
    margin-left: -0.4rem;
}

/* Limited-data banner: surfaced when the backend fell back to the thin
   subtree walk for a scout outcome because the per-outcome subset was
   too small for reliable consensus. Tells the user the reflowed rows
   are sparse by design, not a render bug. */
.tl-outcome-limited {
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    color: rgba(252, 211, 77, 0.92);
    background: rgba(251, 191, 36, 0.06);
    border-left: 2px solid rgba(251, 191, 36, 0.45);
    border-radius: 2px;
}
.tl-outcome-limited em {
    font-style: normal;
    font-weight: 600;
    margin-right: 0.25rem;
    color: rgba(252, 211, 77, 0.98);
}

/* Drill mode: hide contextual events */

.timeline.is-drill-mode .tl-event:not(.tl-step) {
    display: none;
}

.timeline.is-drill-mode .timeline-phase-marker {
    margin-top: 0.75rem;
}

/* Key mode: action-first.
   Instead of just hiding build steps, Key mode removes non-imperative zones
   from HIGHLIGHT cards so only Threat + Action remain — matches the
   live-coach framing (what's coming at me, what do I do). Build steps are
   still hidden as before. */
.timeline.is-key-mode .tl-event.tl-step { display: none; }
.timeline.is-key-mode .timeline-tick { opacity: 0.45; }
.timeline.is-key-mode .timeline-phase-marker { margin-top: 0.35rem; }
.timeline.is-key-mode .tl-zone-production,
.timeline.is-key-mode .tl-zone-scout,
.timeline.is-key-mode .tl-zone-other,
.timeline.is-key-mode .tl-event .tl-para,
.timeline.is-key-mode .tl-why {
    display: none;
}

/* Drill mode: adds Production back — "here's what to do, and what to be
   producing next" — but still hides scout/other/why and suppresses
   non-step timeline events. */
.timeline.is-drill-mode .tl-zone-scout,
.timeline.is-drill-mode .tl-zone-other,
.timeline.is-drill-mode .tl-why {
    display: none;
}

/* Full mode auto-opens the Why? panel so power users see ruled-out and
   raw stats without clicking. */
.timeline:not(.is-key-mode):not(.is-drill-mode) .tl-why[open] .tl-why-section {
    display: block;
}

/* Branch-switch diff flash: rows that are new since the last spine get a
   brief cyan outline so the user can see what changed. Auto-clears via
   animation-end in guide-view.js. */
.tl-event.is-diff-new {
    animation: tl-diff-flash 1.8s ease-out;
}

@keyframes tl-diff-flash {
    0%   { background: rgba(0, 212, 255, 0.22); box-shadow: inset 2px 0 0 #00d4ff; }
    100% { background: transparent; box-shadow: inset 2px 0 0 transparent; }
}

/* =============================================================================
   Legacy shims — retained for any stray markup that still renders the old
   toolbar copy blocks. New Learn header lives in .learn-header (css/learn.css).
   ============================================================================= */

.learn-guide-toolbar-copy,
.learn-guide-select-wrap,
.learn-guide-select-label,
.learn-guide-toolbar-title,
.learn-guide-toolbar-text {
    display: none;
}

.learn-guide-empty {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 170px);
    padding: 1.5rem;
}

.learn-guide-empty-card {
    max-width: 720px;
    padding: 1.65rem 1.75rem;
    border: 1px solid var(--lg-border);
    border-radius: 14px;
    background:
        radial-gradient(circle at top left, rgba(86, 194, 255, 0.12), transparent 38%),
        radial-gradient(circle at bottom right, rgba(123, 47, 247, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(13, 17, 23, 0.98));
    box-shadow: 0 16px 40px rgba(1, 4, 9, 0.32);
}

.learn-guide-empty-eyebrow {
    color: #56c2ff;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.learn-guide-empty-title {
    margin: 0.45rem 0 0.65rem;
    color: var(--lg-text);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.learn-guide-empty-text {
    margin: 0 0 1.1rem;
    color: var(--lg-text-muted);
    line-height: 1.6;
}

.learn-guide-empty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.learn-guide-empty-chip {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(86, 194, 255, 0.08);
    border: 1px solid rgba(86, 194, 255, 0.24);
    color: #b9e2ff;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#page-learn.learn-guide-mode {
    overflow-y: auto;
    overflow-x: hidden;
}

#page-learn.learn-guide-mode .learn-container {
    height: auto;
    overflow: visible;
}

#page-learn.learn-guide-mode .learn-content {
    display: block;
    overflow: visible;
}

#page-learn.learn-guide-mode #learn-viz-container {
    width: 100%;
    min-height: auto;
    height: auto;
    overflow: visible;
    background: var(--lg-bg);
    background-image: none;
    cursor: default;
}

#page-learn.learn-guide-mode #learn-viz-container:active {
    cursor: default;
}

@media (max-width: 900px) {
    .learn-guide-view {
        padding: 0.75rem 1rem 2rem;
    }
    .hero-compact {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #page-learn.learn-guide-mode .learn-controls {
        align-items: flex-start;
    }
    .learn-guide-toolbar-copy {
        max-width: none;
    }
}

/* Admin-only inline rename for archetype/decision/choice labels. */
body.ovr-admin [data-ovr-kind][data-ovr-id] {
    cursor: text;
    outline: 1px dashed transparent;
    outline-offset: 2px;
    transition: outline-color 120ms ease, background-color 120ms ease;
}
body.ovr-admin [data-ovr-kind][data-ovr-id]:hover {
    outline-color: rgba(120, 160, 255, 0.6);
    background-color: rgba(120, 160, 255, 0.08);
}
body.ovr-admin [data-ovr-kind][data-ovr-id] .ovr-edit {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}
body.ovr-admin [data-ovr-kind][data-ovr-id] input.ovr-input {
    font: inherit;
    color: inherit;
    background: #1a1d24;
    border: 1px solid #4a90e2;
    border-radius: 3px;
    padding: 1px 4px;
    width: 100%;
    min-width: 180px;
    box-sizing: border-box;
    outline: none;
}
body.ovr-admin button.ovr-reset {
    font: inherit;
    font-size: 11px;
    padding: 0 8px;
    background: #2a2f3a;
    border: 1px solid #4a5060;
    border-radius: 3px;
    color: #aab;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
body.ovr-admin button.ovr-reset:hover {
    background: #3a4050;
    color: #fff;
    border-color: #667;
}
/* Admin edit popover for scout outcome cards — input + archetype dropdown stacked. */
body.ovr-admin .ovr-edit-scout {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    width: 100%;
}
body.ovr-admin select.ovr-link-select {
    font: inherit;
    font-size: 11px;
    background: #1a1d24;
    border: 1px solid #4a5060;
    border-radius: 3px;
    color: #ddd;
    padding: 2px 4px;
    max-width: 220px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
body.ovr-admin select.ovr-link-select:focus {
    outline: none;
    border-color: #4a90e2;
}
/* Clickable archetype-link chip on scout outcome cards (all users). */
.ovr-arch-link {
    display: inline-block;
    margin: 4px 0 0 0;
    padding: 2px 8px;
    background: rgba(120, 160, 255, 0.12);
    border: 1px solid rgba(120, 160, 255, 0.35);
    border-radius: 10px;
    color: #8fb3ff;
    font-size: 11px;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-start;
}
.ovr-arch-link:hover {
    background: rgba(120, 160, 255, 0.22);
    color: #bfd4ff;
    border-color: rgba(120, 160, 255, 0.6);
}