/* ============================================================================
   Journal notes, Clearer draft: a reading line and marked corrections.
   Loaded by Base.astro on English /journal/<note> pages only, inside a Clearer
   Variant block, so no note file changes. Rules: expression.css.
   - A 2px accent line on the masthead's lower edge fills as you read: it says
     where you are in the note.
   - A dated correction ("[Correction, YYYY-MM-DD: ...]") gets a warning rule in
     its left gutter, drawn once when it comes into view (ex-note.js sets the
     class). The correction text itself is untouched.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes jn-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    html:not([data-variant="current"]) .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: jn-read linear both; animation-timeline: scroll(root);
    }
  }
}

html:not([data-variant="current"]) .ed .jn-corrected { position: relative; }
html:not([data-variant="current"]) .ed .jn-corrected::before {
  content: ""; position: absolute; left: -.75rem; top: .3em; bottom: .3em; width: 2px;
  background: var(--mo-warning, #e6a100); transform-origin: top; transform: scaleY(0);
}
html:not([data-variant="current"]) .ed .jn-corrected.is-in::before { transform: none; transition: transform var(--ex-long, 1100ms) var(--ex-ease-out); }
@media (prefers-reduced-motion: reduce) {
  html:not([data-variant="current"]) .ed .jn-corrected::before { transform: none; }
}