/* ============================================================================
   /journal, Clearer draft: the record ruled as it arrives. Rules of the
   expression layer apply (expression.css). Driven in part by /js/ex-journal.js.
   Added 2026-10-05 at the founder's request to carry the /manufacturing style.

   WHAT MOVES AND WHY
   - Each field note's top rule draws in from the left as the note arrives, the
     monthly recaps with a heavier accent rule. The words never move, and cards
     the schedulers add are covered with no markup change.
   - Each thread carries a dated strip on one shared time axis (oldest to newest
     research note): a dot per note, a span from its first note to its last, and
     a dashed tail when the thread has gone quiet. It draws once.
   - A month rail in the left gutter on wide screens, built from the cards'
     own dates, lights the month you are reading.

   SCOPE. Rules on shared markup (the cards) are scoped
   html:not([data-variant="current"]). Never put these rules where
   /manufacturing loads them: its build log shares .log-list and .log-entry.
   ============================================================================ */

/* ---- Field notes: one rule per boundary, so the draw is not hidden */
html:not([data-variant="current"]) .ed .log-list > .log-entry:not(:last-child) { border-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes jx-draw { from { transform: scaleX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } to { transform: scaleX(1); } }
    html:not([data-variant="current"]) .ed .log-list > .log-entry { position: relative; border-top-color: transparent; }
    html:not([data-variant="current"]) .ed .log-list > .log-entry::before {
      content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
      background: var(--ed-rule); transform-origin: left center; pointer-events: none;
      animation: jx-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    html:not([data-variant="current"]) .ed .log-list > .log-entry--milestone::before { top: -2px; height: 2px; background: var(--ed-accent); animation-range: entry 0% cover 30%; }
  }
}

/* ---- Threads: the dated strip. Static final state first. */
.ed .jx-strip { position: relative; height: 14px; margin: .4rem 0 .9rem; }
.ed .jx-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ed-rule); }
.ed .jx-strip__span { position: absolute; top: calc(50% - .5px); height: 1px; left: calc(var(--x0) * 100%); width: calc((var(--x1) - var(--x0)) * 100%); background: var(--ed-accent); transform-origin: left center; }
.ed .jx-strip i { position: absolute; top: calc(50% - 3.5px); left: calc(var(--x) * 100% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--ed-accent); }
.ed .jx-strip__tail { position: absolute; top: 50%; left: calc(var(--x1) * 100%); right: 0; border-top: 1px dashed var(--mo-warning, #e6a100); transform-origin: left center; }
.ed .jx-strip.jx-armed .jx-strip__span, .ed .jx-strip.jx-armed .jx-strip__tail { transform: scaleX(0); }
.ed .jx-strip.jx-armed i { opacity: 0; transform: scale(.4); }
.ed .jx-strip.jx-armed i.is-on { opacity: 1; transform: none; transition: opacity var(--ex-quick, 240ms) var(--ex-ease), transform var(--ex-quick, 240ms) var(--ex-ease-out); }

/* ---- The month rail (built by ex-journal.js) */
.ed .jx-rail { display: none; }
html[data-variant="current"] .ed .jx-rail { display: none !important; }
@media (min-width: 88rem) {
  html:not([data-variant="current"]) .ed .jx-rail {
    display: block; position: fixed; z-index: 2; top: 50%; transform: translateY(-50%);
    left: max(16px, calc((100vw - 1144px) / 2 - 8.5rem)); width: 7.5rem; height: min(60vh, 32rem);
    opacity: 0; visibility: hidden; transition: opacity var(--ex-quick, 240ms) var(--ex-ease), visibility 0s linear var(--ex-quick, 240ms);
  }
  html:not([data-variant="current"]) .ed .jx-rail.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .ed .jx-rail ol { list-style: none; margin: 0; padding: 0 0 0 1.1rem; height: 100%; display: flex; flex-direction: column; position: relative; }
  .ed .jx-rail ol::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--ed-rule-strong); }
  .ed .jx-rail__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--ed-accent); transform-origin: top; transform: scaleY(0); z-index: 1; }
  .ed .jx-rail li { flex: var(--n) 1 0; min-height: 1.4rem; }
  .ed .jx-rail a, .ed .jx-rail .jx-rail__stop { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ed-quiet); text-decoration: none; transition: color 200ms var(--ed-ease); }
  .ed .jx-rail a span, .ed .jx-rail .jx-rail__stop span { margin-left: .4rem; color: var(--ed-quiet); }
  .ed .jx-rail a:hover, .ed .jx-rail a:focus-visible { color: var(--ed-ink); }
  .ed .jx-rail a[aria-current="true"], .ed .jx-rail a[aria-current="true"] span { color: var(--ed-accent); }
  .ed .jx-rail__track { position: relative; height: 100%; }
}