/* ============================================================================
   /predictions, Clearer draft: the register read as a record in chapters.
   Rules of the expression layer apply (expression.css). Driven in part by
   /js/ex-record.js. Added 2026-10-05 at the founder's request to carry the
   /manufacturing style here.

   WHAT MOVES AND WHY
   - Each horizon is a chapter: an outline numeral from a CSS counter (nothing
     hand-typed, nothing to drift when a group is added) and a hairline drawn
     across the top of each group as it enters.
   - The ledger is ruled row by row: each claim row's top rule draws in from the
     left as the row arrives. The words never move.
   - A score lands like ink, once: only a badge whose status is not open (set by
     ex-record.js, never by markup, because the badge string is pinned).
   - The record is sealed: the "Recorded" tag lands once on load.
   - A rail through the horizons on wide screens, built by ex-record.js from the
     groups themselves.

   SCOPE. Every rule that touches shared markup is scoped
   html:not([data-variant="current"]), so the Current view on the review build
   still matches live and production gets it once promoted. Scroll-driven parts
   sit behind @supports and no-preference, so Firefox and reduced motion get the
   page as written. Never animate a .pred-row itself: a scoped rule there would
   outrank .pred-row:target and kill the deep-link flash.
   ============================================================================ */

@media screen {
  /* ---- 1. Horizons as chapters: numerals and the group rule (static part) */
  html:not([data-variant="current"]) .ed .mfg-sections { counter-reset: rx; }
  html:not([data-variant="current"]) .ed :is(.mfg-sections .pred-group, .mfg-sections .mfg-section) { counter-increment: rx; }
  html:not([data-variant="current"]) .ed :is(.pred-horizon, .mfg-sections .mfg-section > .section-header > .kicker) { display: flex; align-items: baseline; gap: .75rem; }
  html:not([data-variant="current"]) .ed :is(.pred-horizon, .mfg-sections .mfg-section > .section-header > .kicker)::before {
    content: counter(rx, decimal-leading-zero);
    content: counter(rx, decimal-leading-zero) / "";
    font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1; letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: 1px var(--ed-rule-strong);
  }
  html:not([data-variant="current"]) .ed .pred-group + .pred-group { position: relative; padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
  html:not([data-variant="current"]) .ed .pred-group + .pred-group::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: var(--ed-rule); transform-origin: left center; pointer-events: none;
  }

  /* ---- 4. A score lands like ink (the class is set by ex-record.js) */
  html:not([data-variant="current"]) .ed .pred-row .badge.rx-stamp { transition: opacity var(--ex-quick, 240ms) var(--ex-ease), transform var(--ex-base, 520ms) var(--ex-ease-out); }
  html:not([data-variant="current"]) .ed .pred-row .badge.rx-stamp:not(.is-in) { opacity: 0; transform: scale(1.35) rotate(-4deg); }
  html:not([data-variant="current"]) .ed .pred-row .badge.rx-stamp.rx-now { transition: none; }

  /* ---- 2. The rail through the horizons (built by ex-record.js) */
}
.ed .rx-rail { display: none; }

@media screen and (min-width: 96rem) {
  html:not([data-variant="current"]) .ed .rx-rail {
    display: block; position: fixed; z-index: 2; top: 50%; transform: translateY(-50%);
    left: max(16px, calc((100vw - 1080px) / 2 - 12.5rem)); width: 11rem;
  }
  .ed .rx-rail ol { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
  .ed .rx-rail ol::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--ed-rule-strong); }
  .ed .rx-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 .rx-rail__track { position: relative; }
  .ed .rx-rail a, .ed .rx-rail span.rx-rail__stop { display: block; padding: .32rem 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ed-quiet); text-decoration: none; transition: color 200ms var(--ed-ease); }
  .ed .rx-rail a:hover, .ed .rx-rail a:focus-visible { color: var(--ed-ink); }
  .ed .rx-rail .rx-rail__num { display: inline-block; width: 2.1em; }
  .ed .rx-rail a[aria-current="true"], .ed .rx-rail a[aria-current="true"] .rx-rail__num { color: var(--ed-accent); }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* ---- 5. The record is sealed: the "Recorded" tag lands once, CSS only,
     because it sits above the fold. ex-land is defined in expression.css. */
  html:not([data-variant="current"]) .ed .project-header .project-title-row > .tag:first-of-type { animation: ex-land var(--ex-base, 520ms) var(--ex-ease-out) 260ms both; }

  @supports (animation-timeline: view()) {
    @keyframes rx-num-in { from { opacity: 0; translate: 0 .3em; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } to { opacity: 1; translate: 0 0; } }
    @keyframes rx-draw { from { transform: scaleX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } to { transform: scaleX(1); } }

    /* 1, motion: numerals announce themselves, group rules draw. */
    html:not([data-variant="current"]) .ed :is(.pred-horizon, .mfg-sections .mfg-section > .section-header > .kicker)::before { animation: rx-num-in linear both; animation-timeline: view(); animation-range: entry 10% cover 28%; }
    html:not([data-variant="current"]) .ed .pred-group + .pred-group::after { animation: rx-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }

    /* 3. The ledger is ruled row by row. overflow:clip is required: hidden
       makes the table a scroll container and freezes the row timelines. */
    html:not([data-variant="current"]) .ed .pred-table { overflow: clip; }
    html:not([data-variant="current"]) .ed .pred-row:not(:first-child) { position: relative; border-top-color: transparent; }
    html:not([data-variant="current"]) .ed .pred-row:not(:first-child)::before {
      content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
      background: var(--ed-rule); transform-origin: left center; pointer-events: none;
      animation: rx-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 22%;
    }
  }
}