/*! WAPI Connect, "Kuwait Time": motion module "guide" styles (M19). Plan: .router/MOTION.md §4.7. Behaviour: motion/guide.js.
    Only the progress line along the steps (docs), the timeline (changelog) and the first state of the contact actions.
    Every rule needs html.w-motion (set pre-paint only without reduced motion) and sits inside
    (prefers-reduced-motion: no-preference). Existing tokens only, no new colour. */
@media (prefers-reduced-motion: no-preference) {
  /* the line along the steps: a quiet track under the whole list, the ink line (guide.js, scaleY) on top of it.
     Geometry comes from guide.js (--w-lx, --w-ly, --w-lh): the centres of the first and last number badge. */
  html.w-motion .w-has-line, html.w-motion .w-timeline { position: relative; }
  html.w-motion .w-has-line::before, html.w-motion .w-timeline::before,
  html.w-motion .w-has-line > .w-line, html.w-motion .w-timeline > .w-line {
    content: ""; position: absolute; inline-size: 2px; pointer-events: none;
    inset-block-start: var(--w-ly, 0); block-size: var(--w-lh, 0);
    inset-inline-start: var(--w-lx, 0);
  }
  html.w-motion .w-has-line::before, html.w-motion .w-timeline::before { background: var(--w-stone); }
  html.w-motion .w-has-line > .w-line, html.w-motion .w-timeline > .w-line { background: var(--w-ink); transform-origin: 50% 0; }
  /* the badges sit above the line */
  html.w-motion .w-has-line > li { z-index: 1; }
  html.w-motion .w-has-line > li::before { z-index: 1; }

  /* changelog: the line runs in the gutter beside the text column; a square marks each version that has been passed */
  html.w-motion .w-timeline::before, html.w-motion .w-timeline > .w-line {
    inset-inline-start: calc(var(--w-gut) * -0.5 + var(--w-lx, 0px));
  }
  html.w-motion .w-timeline > h2 { position: relative; }
  html.w-motion .w-timeline > h2::before {
    content: ""; position: absolute; inline-size: 8px; block-size: 8px; background: var(--w-stone);
    inset-inline-start: calc(var(--w-gut) * -0.5 - 3px); inset-block-start: 0.6em; margin-block-start: -4px; z-index: 1;
    transition: background-color var(--w-t-ui) var(--w-ease-out);
  }
  html.w-motion .w-timeline > h2.is-passed::before { background: var(--w-ink); }

  /* the version headings are flex rows in c-pages.css: the word boxes of the rise would become flex items and the heading
     would be shorter while it runs (a jump when the words are put back). Block while it runs: the same box as the plain text. */
  html.w-motion.w-motion body.wapi-p-changelog .w-prose > h2.w-rise { display: block; }

  /* contact: the two actions start hidden; guide.js takes them over (data-w-g) and brings them up (no script, no motion: nothing here applies) */
  html.w-motion body.wapi-p-contact .w-page-head .w-actions > .w-btn:not([data-w-g]) { opacity: 0; }
}
@media print {
  .w-line { display: none !important; }
  html.w-motion body.wapi-p-contact .w-page-head .w-actions > .w-btn { opacity: 1 !important; }
}