/* connections-directional.css — PHASE 2 MOCKUP (?conn=directional), not promoted.
   Loaded only when that variant renders (episode/show.blade.php), so it stays out
   of massive-dynamic.css (17 shared views) and costs no ?v= churn. Everything is
   scoped under .md-skin. Deleting this file + its <link> + the ?conn=directional
   branch backs the whole mockup out.

   It reuses the promoted connection styles wholesale (.fc-conn-index__*,
   .md-conn-title, .fr-rail*, .fc-spoiler, .fc-conn-facts) — this sheet only adds
   the two stream headers, the per-group reach chip, and the split-index rows. */

/* --- Stream header ("Callbacks" / "Setups & payoffs") --------------------- */
.md-skin .fc-dir__stream {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .7rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--md-line);
}
.md-skin .fc-dir__stream-icon {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    font-size: .8rem;
    color: #fff;
    background: var(--md-accent);
}
.md-skin .fc-dir__stream-title {
    font-family: var(--md-display);
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--md-ink);
}
.md-skin .fc-dir__stream-sub {
    font-size: .92rem;
    color: var(--md-muted);
}
/* The forward stream is the spoiler side — tint its marker so the two read as
   opposite directions even before the arrows register. */
.md-skin .fc-dir__stream--fwd .fc-dir__stream-icon {
    background: transparent;
    color: var(--md-accent);
    border: 1.5px solid var(--md-accent);
}

/* --- Split chip index (one row per stream) -------------------------------- */
.md-skin .fc-dir-index__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    padding: .35rem 0;
}
.md-skin .fc-dir-index__row + .fc-dir-index__row {
    border-top: 1px solid var(--md-line);
}
.md-skin .fc-dir-index__lbl {
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-family: var(--md-display);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--md-ink);
}
.md-skin .fc-dir-index__lbl .fc-dir-index__n {
    color: var(--md-muted);
    font-weight: 500;
}
.md-skin .fc-dir-index .fc-conn-index__list { margin: 0 }

@media (max-width: 575.98px) {
    .md-skin .fc-dir-index__lbl { min-width: 100%; }
}

/* --- Overview swap: spine on wide viewports, chip index on narrow ---------
   The arc-spine wants width — below the section's desktop measure its 1000-unit
   viewBox scales the legend text and the node spacing down to cramped/illegible,
   so on small viewports the split chip index (which taps + wraps cleanly) takes
   over instead. Both render; CSS shows exactly one. Breakpoint = lg (992px), the
   site's established desktop line (the jump bar collapses to its swipe strip and
   the navbar collapses to its hamburger at the same width). A one-line change if
   the owner wants the spine to hold on down to md. */
@media (max-width: 991.98px) { .md-skin .fc-dir-ov--spine { display: none; } }
@media (min-width: 992px)    { .md-skin .fc-dir-ov--index { display: none; } }

/* --- Mini arc-spine ------------------------------------------------------- */
.md-skin .fc-spine {
    margin: 0 0 .5rem;
    padding: .35rem .25rem 0;
}
.md-skin .fc-spine__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.md-skin .fc-spine__axis {
    stroke: var(--md-line);
    stroke-width: 1;
}

/* Arcs. Callbacks (behind you, known) read solid; setups (ahead, unknown) are
   muted; long-range arcs — the site's season-1->season-5 thesis — are brighter
   and heavier whichever way they point. */
.md-skin .fc-spine__arc {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
}
.md-skin .fc-spine__arc--back { stroke: var(--md-accent); opacity: .38; }
.md-skin .fc-spine__arc--fwd  { stroke: var(--md-muted);  opacity: .30; stroke-dasharray: 3 3; }
.md-skin .fc-spine__arc.is-far { stroke-width: 2; }
.md-skin .fc-spine__arc--back.is-far { opacity: .7; }
.md-skin .fc-spine__arc--fwd.is-far  { opacity: .55; }

/* Nodes */
.md-skin .fc-spine__hit { fill: transparent; }
.md-skin .fc-spine__node { stroke: #fff; stroke-width: 1; transition: r .12s ease; }
.md-skin .fc-spine__node--back { fill: var(--md-accent); }
.md-skin .fc-spine__node--fwd  { fill: var(--md-muted); }
.md-skin .fc-spine__nodelink:hover .fc-spine__node,
.md-skin .fc-spine__nodelink:focus-visible .fc-spine__node { r: 6; }
.md-skin .fc-spine__nodelink:focus-visible { outline: none; }
.md-skin .fc-spine__nodelink:focus-visible .fc-spine__node {
    stroke: var(--md-accent); stroke-width: 2;
}

/* Hub = this episode */
.md-skin .fc-spine__hub-halo { fill: var(--md-accent); opacity: .16; }
.md-skin .fc-spine__hub { fill: var(--md-accent); }
.md-skin .fc-spine__hub-dot { fill: #fff; }

/* Axis legend */
.md-skin .fc-spine__leg {
    font-family: var(--md-display);
    font-size: 13px;
    letter-spacing: .1em;
    fill: var(--md-muted);
}

@media (prefers-reduced-motion: reduce) {
    .md-skin .fc-spine__node { transition: none; }
}