/* © 2026 Malte Therkildsen / RAMTT. All rights reserved.
   trail.css · the reading progress and the contents (trail.js), ported from
   Zibaldone's Trail.css to the design system's tokens. The sizes are the ones
   Zibaldone measured. A row is 24.72 px open and 16 px at rest. The dot is
   6 px, and the ticks are 14, 9 and 5 px. The label starts 22 px in, and each
   level adds 12 px. trail.test.mjs reads these sizes back from this file. */

.trail {
  --trail-row-open: 24.72px;
  --trail-row-rest: 16px;
  --trail-dot: 6px;
  --trail-tick-1: 14px;
  --trail-tick-2: 9px;
  --trail-tick-3: 5px;
  --trail-label-left: 22px;
  --trail-indent: 12px;
  --trail-width-rest: 44px;
  --trail-head-h: 28px;
  --trail-spine-overhang: 2px;
  --trail-ink: var(--accent);
  --e: 0;
  --n: 1;
  --tickon: 1;
  --label-max: 196px;
  --rc: var(--trail-row-rest);
  --re: var(--trail-row-open);
  --tw: 240px;
  --rh: calc(var(--rc) + (var(--re) - var(--rc)) * var(--e));
  position: relative;
  width: calc(var(--trail-width-rest) + (var(--tw) - var(--trail-width-rest)) * var(--e));
  padding: 12px 16px 16px 12px;
  /* --mid is set by trail.js: the distance from the rail's sticky top to the middle of the window */
  transform: translateY(calc(var(--mid, 0px) - 50%));
}
.trail[hidden], .trail[data-fits="false"] { display: none; }

/* the rail of a document page holds the trail at the start of the gutter; the rail keeps its sticky top */
[data-r="page"][data-template="document"] [data-part="column"] > [data-part="rail"]:has(> .trail) {
  justify-self: start;
  z-index: 3;
  width: auto;
  max-width: none;
  overflow: visible;
  box-shadow: none;
  background: none;
}

.trail-card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-contain);
  background: var(--raised);
  box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-raised, .08)), var(--e3);
  opacity: var(--e);
  transform: scale(calc(0.97 + 0.03 * var(--e)));
  transform-origin: left center;
  pointer-events: none;
}
.trail-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: calc(var(--e) * var(--trail-head-h));
  overflow: hidden;
  opacity: max(0, calc(var(--e) * 2 - 1));
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-550);
  color: var(--ink-3);
  white-space: nowrap;
}
.trail-body { position: relative; }
.trail-spine {
  position: absolute;
  left: 0;
  top: calc(var(--trail-spine-overhang) * -1);
  width: 1px;
  height: calc((var(--n) - 1) * var(--rh) + var(--rh) / 2 + var(--trail-spine-overhang));
  background: var(--line-2);
  pointer-events: none;
}
.trail-list { list-style: none; margin: 0; padding: 0; }
/* the track is the row: a line of 20 px in a row of 10 px must not grow the track, or the tick drops 5 px */
.trail-row { --near: 0; display: grid; grid-template-rows: minmax(0, 1fr); align-items: center; height: var(--rh); }
.trail-tick {
  grid-area: 1 / 1;
  width: var(--trail-tick-1);
  height: 1px;
  background: color-mix(in srgb, var(--trail-ink) calc(var(--near) * var(--tickon) * 55%), var(--line-2));
  transform: scaleX(calc(1 + var(--near) * var(--tickon) * 0.3));
  transform-origin: left center;
  pointer-events: none;
}
.trail-row[data-level="2"] .trail-tick { width: var(--trail-tick-2); }
.trail-row[data-level="3"] .trail-tick { width: var(--trail-tick-3); }
.trail-link {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding-left: calc(var(--trail-label-left) + var(--indent, 0px));
  border-radius: var(--r-row);
  outline-offset: -2px;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  text-decoration: none;
  color: color-mix(in oklab, var(--ink) calc(40% + var(--near) * 48%), transparent);
  opacity: max(0, calc(var(--e) * 1.8 - 0.8));
  pointer-events: none;
  cursor: default;
}
.trail[data-open="true"] .trail-link { pointer-events: auto; }
.trail-link[aria-current="location"] { color: var(--ink); }
@media (hover: hover) { .trail-link:hover { color: var(--ink); } }
.trail-row[data-level="2"] .trail-link { --indent: var(--trail-indent); }
.trail-row[data-level="3"] .trail-link { --indent: calc(var(--trail-indent) * 2); }
.trail-label {
  display: block;
  flex: none;
  max-width: var(--label-max);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.trail-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--trail-dot);
  height: var(--trail-dot);
  border-radius: 50%;
  background: var(--trail-ink);
  pointer-events: none;
  will-change: transform;
}
@media (forced-colors: active) {
  .trail-dot { background: CanvasText; }
  .trail-tick, .trail-spine { background: GrayText; }
}