/* ==========================================================================
   trail.css — the scroll-linked trail map beside a writeup. Needs trail.js,
   which builds the markup; nothing here is required to read the post.

   Wide screens: a fixed rail left of the 780px reading column. The rail is
   240px; it only fits once half the viewport clears 390 + 12 + 240 = 642px,
   so the breakpoint is 1300px. Below that, a chip at the bottom of the screen
   names the current stop instead.
   ========================================================================== */

.trail-rail { display: none; }

.trail-chip {
  position: fixed;
  left: .75rem;
  bottom: .75rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100vw - 1.5rem);
  padding: .5rem .9rem .5rem .7rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--ink-raised);
  background: color-mix(in srgb, var(--ink-raised) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.trail-chip.is-on { opacity: 1; transform: none; }
.trail-chip__bar {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--hair-soft);
  overflow: hidden;
}
.trail-chip__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--brass);
}
.trail-chip__time { color: var(--brass); white-space: nowrap; }
.trail-chip__time:empty { display: none; }
.trail-chip__label {
  color: var(--bone);
  font-family: var(--font-head);
  letter-spacing: .1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1300px) {
  .trail-chip { display: none; }
  .trail-rail {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: max(.75rem, calc(50% - 642px));
    z-index: 3;
    width: 240px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5rem, #000 calc(100% - 4rem), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 5rem, #000 calc(100% - 4rem), transparent 100%);
  }
  .trail-rail__inner {
    will-change: transform;
    transition: transform .35s var(--ease);
  }
}

.trail-svg { display: block; overflow: visible; }

.trail-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail-path--ahead { stroke: var(--hair); stroke-width: 2; stroke-dasharray: 3 7; }
.trail-path--walked { stroke: var(--brass); stroke-width: 2.5; transition: stroke-dashoffset .35s var(--ease); }

.trail-blaze { fill: var(--bone); opacity: .5; }

.trail-side { fill: none; stroke: var(--turquoise); stroke-width: 1.6; stroke-dasharray: 3 4; }

.trail-dot {
  fill: var(--ink);
  stroke: var(--hair-strong);
  stroke-width: 1.6;
  transition: stroke .3s var(--ease), fill .3s var(--ease);
}
.trail-stop--side .trail-dot { stroke: var(--turquoise); }
.trail-stop.is-past .trail-dot { fill: var(--brass); stroke: var(--brass); }
.trail-stop.is-here .trail-dot { fill: var(--ink); stroke: var(--bone); stroke-width: 2.2; }

.trail-label {
  font-family: var(--font-head);
  font-size: 12.5px;
  letter-spacing: .04em;
  fill: var(--text-faint);
  transition: fill .3s var(--ease);
}
.trail-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--brass);
  opacity: .65;
  transition: opacity .3s var(--ease);
}
.trail-stop.is-past .trail-label { fill: var(--text-dim); }
.trail-stop.is-here .trail-label { fill: var(--bone); }
.trail-stop.is-here .trail-time { opacity: 1; }

.trail-marker { transition: transform .35s var(--ease); }
.trail-marker__halo { fill: var(--brass); opacity: .18; }
.trail-marker__dot { fill: var(--brass); stroke: var(--ink); stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .trail-rail__inner, .trail-marker, .trail-path--walked, .trail-chip, .trail-dot, .trail-label, .trail-time {
    transition: none;
  }
}