/* Orientation chrome (BL-038): the breadcrumb trail and the tier rail.
 *
 * Both render INSIDE main.container as ordinary flow children, so no existing
 * page layout is restructured — `main` keeps the same children it always had,
 * plus two optional siblings above them. The rail earns a real left sidebar
 * only where there is empty gutter to put it in (the container caps at
 * 1080px), and stays a compact card above the content everywhere else.
 */

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.breadcrumb {
  margin: 0 0 var(--space, 1rem);
  font-size: 0.82rem;
  color: var(--muted);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--border);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}

.breadcrumb-current {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26rem;
}

/* ── Tier rail ───────────────────────────────────────────────────────────── */

.tier-rail {
  margin: 0 0 var(--space-lg, 1.5rem);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  font-size: 0.82rem;
}

.tier-rail-heading {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tier-rail-body {
  /* The "This programme" index must NOT scroll (BL visual-fix #1): no inner
     max-height/overflow means a long roster grows the rail instead of trapping
     entries behind a scrollbar, and every title wraps (see .tier-rail-title)
     rather than being clipped. */
  padding: 0.35rem 0;
}

.tier-rail-group {
  border: 0;
  margin: 0;
  padding: 0;
}

.tier-rail-group + .tier-rail-group {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.tier-rail-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tier-rail-group.is-current .tier-rail-label {
  color: var(--fg);
}

.tier-rail-name {
  /* The programme/tier name is the variable-length half of this row — it must
     give way to the "N of M" counter, not push it past the box's border. A
     flex item's default automatic minimum width is its min-content size
     (the widest unbreakable word), which at the 14rem gutter rail (or a
     narrow phone viewport) can exceed the space left after the counter,
     forcing the counter outside the padding box and onto the border. Letting
     this span shrink past that (min-width: 0) and wrap anywhere keeps the
     whole row inside the box at any width; the short counter never shrinks. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tier-rail-count {
  flex: 0 0 auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-mono, monospace);
}

.tier-rail-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
}

.tier-rail-link {
  display: flex;
  /* flex-start (not baseline): the ordinal stays pinned to the FIRST line of a
     title that now wraps over several lines (BL visual-fix #1). */
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.18rem 0.75rem;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.tier-rail-link:hover,
.tier-rail-link:focus-visible {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tier-rail-n {
  flex: 0 0 auto;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  opacity: 0.75;
}

.tier-rail-title {
  flex: 1 1 auto;
  min-width: 0;
  /* Wrap long entries onto multiple lines instead of truncating with an
     ellipsis (BL visual-fix #1) — the index shows the whole title. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.tier-rail-item.is-done .tier-rail-link {
  color: var(--ok);
}

.tier-rail-item.is-current .tier-rail-link {
  color: var(--fg);
  font-weight: 600;
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* A real sidebar once the viewport is wide enough that the 1080px container
   leaves a gutter to hold it — pulled out of flow so `main`'s own children keep
   the width and the layout they have on every other page.

   Positioned against main.container, NOT the viewport. `main.container` carries
   the page-in animation (`portal.css` `lynx-page-in`), whose keyframes set a
   `transform`; a transformed element is the containing block for any
   `position: fixed` descendant, so a viewport-anchored rail (the old
   `left: calc(50vw …)`) was thrown out over the content for the 360ms the
   animation ran — the TOC-overlaps-body bug. Making main.container an explicit
   positioning context and parking the rail in the LEFT GUTTER with a negative
   offset puts it physically outside the content column: it cannot overlap the
   body, with or without the transform, at any width at or above the breakpoint.
   Scoped with :has() so only the phase view (the one page with a rail) is
   made position:relative. */
@media (min-width: 1600px) {
  main.container:has(.tier-rail) {
    position: relative;
  }

  .tier-rail {
    position: absolute;
    top: 0.5rem;
    left: calc(-14rem - 1rem);
    width: 14rem;
    margin: 0;
    /* No max-height/overflow: the pinned index must never grow its own
       scrollbar (BL visual-fix #1). A long roster extends down the gutter and
       titles wrap; the page itself is the only scroll surface. */
    display: flex;
    flex-direction: column;
    z-index: 5;
  }

  .tier-rail-body {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tier-rail-link {
    transition: background-color 120ms ease-out, color 120ms ease-out;
  }
}