/* ============================================================================
   THE K→22 JOURNEY TIMELINE (ledger P3-5) — base audit §5.2, gated by C8
   ----------------------------------------------------------------------------
   ⛔ THE AGE-OUT MARKER IS AN OPEN FLOOR, NOT A WALL. _CLOCKS1316 carries it as
   bound:'min', entitlement:true — a district may serve longer, never shorter.
   So it renders as a band that runs OFF THE RIGHT EDGE of the axis with no
   terminus. A dot at the 22nd birthday would be the N.D. v. Reykdal error drawn
   instead of written, and the builder refuses to emit one.
   ========================================================================= */

.journey-plate { position: relative; }

.jr-axis { position: relative; height: 4.5rem; margin: 1.5rem 0 .5rem; }
.jr-line {
  position: absolute; left: 0; right: 0; top: 1.9rem; height: 0;
  border-top: var(--hair-strong) solid var(--current);   /* the record itself */
}
.jr-tick {
  position: absolute; top: 2.35rem; transform: translateX(-50%);
  color: var(--star-dim);
}
.jr-tick::before {
  content: ''; position: absolute; left: 50%; top: -.45rem; width: 1px; height: .35rem;
  background: color-mix(in srgb, var(--star) 35%, transparent);
}

/* The entitlement band: begins at the marker and runs off the edge. The fade to
   the right is the "no terminus" — it does not stop, it stops being drawn. */
.jr-band {
  position: absolute; top: 1.35rem; height: 1.1rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mira) 34%, transparent),
    color-mix(in srgb, var(--mira) 10%, transparent) 78%,
    transparent);
  border-left: var(--hair-strong) solid var(--mira);
}

.jr-marks { position: relative; height: 0; }
.jr-mark { position: absolute; top: -3.2rem; transform: translateX(-50%); text-align: center; }
.jr-dot {
  display: block; width: .6rem; height: .6rem; margin: 0 auto .25rem;
  background: var(--star); border-radius: 50%;
}
.jr-age { display: block; color: var(--star-dim); }

/* Kinds. Colour is semantic: --mira only on the statutory floor. */
.jr-floor    .jr-dot { background: var(--mira); width: .75rem; height: .75rem; }
.jr-branch   .jr-dot { background: transparent; border: var(--hair-strong) solid var(--star);
                       border-radius: 0; transform: rotate(45deg); }
.jr-pending  .jr-dot { background: transparent; border: var(--hair) dashed var(--star-dim); }
.jr-retired  .jr-dot { background: var(--star-dim); opacity: .45; }
.jr-retired  .jr-age { text-decoration: line-through; opacity: .6; }

/* ── ANNOTATIONS ─────────────────────────────────────────────────────────
   Beneath the axis, not crammed onto it — the audit's margin-column principle
   applied inside a plate. */
.jr-notes { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 0; }
.jr-note {
  display: grid; gap: .3rem; padding: 1rem 0;
  border-top: var(--hair) solid color-mix(in srgb, var(--star) 14%, transparent);
}
@container plate (min-width: 860px) { .jr-note { grid-template-columns: 6rem minmax(0, 1fr); gap: .3rem 1.5rem; }
                                      .jr-note > *:not(.jr-note-age) { grid-column: 2; } }
.jr-note-age { color: var(--star-dim); letter-spacing: .04em; }
.jr-note-l   { font-family: var(--f-display); font-size: var(--d5); color: var(--star); }
.jr-note-d   { color: color-mix(in srgb, var(--star) 66%, transparent); line-height: 1.55; }
.jr-note .badge { margin-top: .15rem; white-space: normal; }

/* The two annotations that must not be mistaken for settled law. */
.jr-status { color: var(--star-dim); font-style: italic; line-height: 1.5;
             border-left: var(--hair) solid color-mix(in srgb, var(--star) 25%, transparent);
             padding-left: .8rem; }
.jr-error  { color: color-mix(in srgb, var(--shoal) 85%, var(--star));
             border-left: var(--hair-strong) solid var(--shoal); padding-left: .8rem; line-height: 1.55; }
.jr-note-retired .jr-note-l { text-decoration: line-through; opacity: .7; }
.jr-note-pending .jr-note-l { opacity: .85; }

.jr-cycles { margin-top: 1.75rem; padding-top: 1.25rem;
             border-top: var(--hair) solid color-mix(in srgb, var(--star) 22%, transparent); }
.jr-region { color: var(--star-dim); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .75rem; }
.jr-cycle  { color: color-mix(in srgb, var(--star) 66%, transparent); margin: 0 0 .6rem; max-width: 86ch; }
.jr-cycle-l { color: var(--star); margin-right: .35rem; }

@media print {
  .journey-plate { background: #fff; color: #000; }
  .jr-note-l, .jr-note-d { color: #000; }
}

/* ══ A PLATE THAT REVEALS IN SEQUENCE ═══════════════════════════════════════
   Same mechanism as the canvas panels, applied inside a diagram: the outer
   element is scroll distance, the inner is sticky and holds still while that
   distance passes, fading in as it arrives and out as it leaves. The reader
   scrolls and the CONTENT changes in place, rather than the diagram travelling
   past the eye.

   ⛔ The head pins ABOVE the slot, so the axis stays on screen for every
   milestone. A timeline whose scale scrolls away is a timeline you cannot read
   a position off — which is the whole reason this one is drawn to scale. */
.plate-seq { position: relative; }
.plate-seq .plate-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: clamp(1rem, 2.4vh, 2rem) clamp(.8rem, 2vh, 1.6rem);
  background: linear-gradient(180deg, var(--deep) 78%, transparent);
}

.plate-seq .jr-notes { margin: 0; padding: 0; list-style: none; }
/* Scroll distance per milestone. 58svh is a deliberate compromise: enough that
   each one is read rather than glimpsed, short enough that seven of them are
   not four screens of scrolling. */
.plate-seq .jr-note { min-height: 58svh; border: 0; padding: 0; }
.plate-seq .jr-note-in {
  position: sticky;
  top: clamp(8rem, 22vh, 12rem);
  padding-block: clamp(1rem, 2vh, 1.8rem);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate-seq .jr-note-in {
      animation: hold-and-clear linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
/* ⛔ Without support, or with motion reduced, every milestone renders at full
   opacity in normal flow. Longer, but complete — the failure mode here is
   hiding by default and relying on an animation that never runs. */
@media (prefers-reduced-motion: reduce) {
  .plate-seq .jr-note-in { opacity: 1 !important; animation: none !important; position: static; }
  .plate-seq .jr-note { min-height: 0; }
}
@media (max-width: 700px) {
  /* On a phone the pinned head plus a pinned slot leaves almost no room for the
     milestone itself, so the plate falls back to an ordinary list. */
  .plate-seq .plate-head { position: static; background: none; }
  .plate-seq .jr-note { min-height: 0; }
  .plate-seq .jr-note-in { position: static; }
}

/* ⛔ THE GRID MOVES TO THE INNER, because the inner is now what holds the
   children. `.jr-note` was the grid — a 6rem age column beside the content —
   and wrapping its contents in a sticky div left the grid applying to a single
   child, so the age, the heading and the citation all collapsed onto one
   inline row. The layout has to live on whichever element is the direct parent
   of the things being laid out; adding a wrapper moves that parent. */
.plate-seq .jr-note { display: block; }
.plate-seq .jr-note-in { display: grid; gap: .3rem; }
@container plate (min-width: 860px) {
  .plate-seq .jr-note-in { grid-template-columns: 6rem minmax(0, 1fr); gap: .3rem 1.5rem; }
  .plate-seq .jr-note-in > *:not(.jr-note-age) { grid-column: 2; }
}
/* The slot has a fixed measure so entries of different lengths occupy the same
   place rather than each re-centring the reader's eye. */
.plate-seq .jr-note-in { max-width: 78ch; margin-inline: auto; }