/* ============================================================================
   Reading aids for long pages: a reading line and a section rail. Added
   2026-10-12 at the founder's request, first on /thesis, then on the model's
   phase pages, giving them the two aids readers liked elsewhere:
   - The reading line: the same 2px accent line on the masthead's lower edge
     that Journal notes carry (ex-note.css), filling as you read. CSS only,
     scroll-driven; browsers without scroll timelines and reduced motion simply
     do not get it.
   - The section rail: the same thread as /manufacturing's chapter rail
     (ex-mfg.css), in the left gutter on wide screens. ex-reading.js builds it
     from the page's own section headings, so it cannot drift from the text,
     fills it with the page and lights the section you are reading.
   Rules of the expression layer apply (expression.css). With no script the
   page is exactly as before; the rail never prints.
   ============================================================================ */

/* ---- The reading line ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes rd-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .ed .ed-masthead::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--ed-accent); transform-origin: left center; pointer-events: none;
      animation: rd-read linear both; animation-timeline: scroll(root);
    }
  }
}

/* ---- The section rail (built by ex-reading.js) ----------------------------- */
.ed .rd-rail { display: none; }
@media screen and (min-width: 96rem) {
  .ed .rd-rail {
    display: block; position: fixed; z-index: 2;
    top: 50%; transform: translateY(-50%);
    left: max(16px, calc((100vw - 1080px) / 2 - 13.5rem));
    width: 12rem;
  }
  .ed .rd-rail__track { position: relative; }
  .ed .rd-rail ol { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
  .ed .rd-rail ol::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--ed-rule-strong); }
  .ed .rd-rail__fill { position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--ed-accent); transform-origin: top; transform: scaleY(0); z-index: 1; }
  .ed .rd-rail a {
    display: block; padding: .22rem 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ed-quiet); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 200ms var(--ed-ease);
  }
  .ed .rd-rail a:hover, .ed .rd-rail a:focus-visible { color: var(--ed-ink); }
  .ed .rd-rail a[aria-current="true"] { color: var(--ed-accent); }
  .ed .rd-rail a span { display: inline-block; width: 2.1em; color: var(--ed-quiet); }
  .ed .rd-rail a[aria-current="true"] span { color: var(--ed-accent); }
}
@media print {
  .ed .rd-rail { display: none; }
}

/* ---- "Built by": the project and open tasks behind a model page ----------- */
.ed .rd-builtby {
  margin: 1.1rem 0 0; padding: .7rem 0 .7rem 1rem; max-width: var(--measure, 68ch);
  border-left: 2px solid var(--ed-accent); color: var(--ed-body); font-size: .95rem; line-height: 1.55;
}
.ed .rd-builtby span {
  display: block; margin-bottom: .2rem; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ed-accent);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-rule { from { border-left-color: transparent; } to { border-left-color: var(--ed-accent); } }
  .ed .rd-builtby { animation: rd-rule 700ms ease-out 250ms both; }
}