/* timeline-fit.css — `fit_viewport: true` on a timeline block
   (spec docs/superpowers/specs/2026-09-30-timeline-cards-design.md §7d; markup and the
   measured --tl-fit-chrome: panels/blocks/timeline-fit.js; rules checked by
   tests/unit/frontend/timeline-fit-style.test.js). Without the flag none of these
   classes is drawn and the block renders exactly as before.

     .timeline-container
       .timeline-fit-frame        does not scroll: draws the scroll container's focus ring
         .timeline-fit            scroll container: the axis + the rows
           .timeline-fit-inner    direction back to ltr
             .timeline-fit-head   sticky, opaque: the axis line, its labels and dots
               .timeline-axis
             .timeline-body       guides + Dots tracks / Cards
       .timeline-legend, .timeline-undated-footer, .lab-tl-zoom   outside: always visible

   Height: the window minus --tl-fit-chrome (the app's pinned top bar + everything of the
   block outside the scroll container + a bottom gap), written on the block's mount by
   timeline-fit.js after every draw; the fallback approximates it until then. Never below
   240px, so a few rows stay visible in a short window. No min-height: a short timeline
   keeps its own height. svh (small viewport: a mobile URL bar shown) where supported.

   Left scroll bar: direction rtl on the container, ltr again inside. scrollbar-gutter
   stable: the rows' width does not change when the bar appears (the Cards layout re-packs
   on a width change). overflow-y auto forces horizontal clipping, so the container bleeds
   into the .timeline-container gutter (negative margins = its horizontal padding, the same
   padding inside): the axis arrowhead, end labels, Today and cards / arrows at the canvas
   edge are clipped at the block card's edge, as before, not earlier. The scroll bar takes
   its width from the left of that gutter's content box. */

/* No box of its own (no margin, padding or border): the scroll container's height is its
   height, and its content box is the .timeline-container's, which the scroll container
   bleeds out of by --tl-fit-bleed on each side. Holds the bleed for the ring below. */
.timeline-fit-frame {
  --tl-fit-bleed: var(--space-12);   /* = .timeline-container horizontal padding (timeline.css) */
  position: relative;
}
.timeline-fit {
  --tl-fit-above: 30px;              /* sticky room above the axis line: labels (top -22px) */
  --tl-fit-below: 4px;               /* sticky room below the line: the 9px dots (3px below) + 1 */
  max-height: max(240px, calc(100vh - var(--tl-fit-chrome, 340px)));
  max-height: max(240px, calc(100svh - var(--tl-fit-chrome, 340px)));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  direction: rtl;
  margin: 0 calc(-1 * var(--tl-fit-bleed));
  padding: 0 var(--tl-fit-bleed);
  scroll-padding-top: calc(var(--tl-fit-above) + 3px + var(--tl-fit-below));
  isolation: isolate;                /* the z-index ladder below stays inside the block */
}
/* Keyboard focus (the container is a tabindex="0" region, timeline-fit.js fitWrap). An
   outline on the container itself is painted under its own pinned head (z-index 6): the
   top edge was hidden. The ring is drawn by the frame instead, over exactly the container's
   box (inset: the bleed back out), above everything in it (the container isolates its
   ladder; 7 > the head's 6), and inside that box — the container reaches the .block-card
   edge, whose overflow: hidden would clip an outer ring. The container's own outline (the
   browser's default focus ring included) is switched off. */
.timeline-fit:focus-visible {
  outline: none;
}
.timeline-fit-frame:has(> .timeline-fit:focus-visible)::after {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--tl-fit-bleed));
  border: 2px solid var(--color-primary);
  pointer-events: none;
  z-index: 7;
}
.timeline-fit-inner {
  direction: ltr;
}

/* The axis, pinned. Spans the container's full width (its padding too), so rows scrolling
   under it are hidden edge to edge; z-index above the dots and cards (2), the arrows (3)
   and a hovered / focused card (4) — timeline.css, timeline-cards.css. */
.timeline-fit-head {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 calc(-1 * var(--tl-fit-bleed));
  padding: var(--tl-fit-above) var(--tl-fit-bleed) var(--tl-fit-below);
  background: var(--white);          /* = .block-card (panels.css): opaque, both themes */
}
/* The axis's 60px margins (timeline-axis.css) move: the top one shrinks to the sticky
   --tl-fit-above, the bottom one goes to the body below as non-sticky space, so at
   scrollTop 0 the first row sits 60px under the line as before and the guides
   (.timeline-guides top -60px) still start at the line. */
.timeline-fit-head > .timeline-axis {
  margin-top: 0;
  margin-bottom: 0;
}
.timeline-fit-inner > .timeline-body {
  margin-top: calc(60px - var(--tl-fit-below));
}
/* A Dots track's today line runs 50px past its row (timeline.css); under the last row
   that would only add empty scroll space. */
.timeline-fit .timeline-track:last-child .timeline-today-line {
  bottom: 0;
}