/* chezmaurice.eu — a sequence told in steps, with a screen for each (tour.js).

   On a wide screen the steps scroll on the left and the screen on the right
   stays, changing as each step comes into view. On a phone, without the
   script, or for whoever asked for less motion, each screen simply sits under
   its own step. Colours come from chrome.css's tokens (light and dark).

   The markup, for any page that loads this file and /tour.js:

     <div class="seq">
       <ol class="seq-steps">
         <li>
           <p class="seq-n">1</p>
           <h3>The step, in a few words.</h3>
           <p>What happens, in a sentence or two.</p>
           <img class="seq-inline" src="shots/….webp" width="660" height="925" alt="…">
         </li>
         …one <li> per step…
       </ol>
       <div class="seq-stage" aria-hidden="true">
         <img src="shots/….webp" width="660" height="925" alt="">   one per step, same order
         …
       </div>
     </div>

   Screens are 660 × 925 (a phone screen cropped to its content, as
   shots/etape-*.webp). The inline copy carries the alt text; the stage's copy
   is decoration, hidden from screen readers. Until a screenshot exists, a
   placeholder takes its place, in both spots:

     <div class="seq-inline seq-ph"><span>Settings → My data</span></div>
     <div class="seq-ph"><span>Settings → My data</span></div>

   The older .tour of home.css is left as it was; tour.js drives both. */

.seq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.seq-steps { list-style: none; margin: 0; padding: 0; }
.seq-steps > li { display: flex; flex-direction: column; gap: 12px; min-height: 70vh; justify-content: center; max-width: 440px; }
.seq-n { margin: 0; font-family: var(--serif); font-size: 32px; color: var(--accent); }
.seq-steps h3 { margin: 0; font-size: 19px; font-weight: 600; }
.seq-steps > li > p:not(.seq-n) { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.seq.is-live .seq-steps > li { opacity: .3; transition: opacity .35s ease; }
.seq.is-live .seq-steps > li.is-active { opacity: 1; }

.seq-stage { position: sticky; top: 18vh; height: 64vh; display: grid; place-items: center; }
.seq-stage > * { grid-area: 1 / 1; width: min(100%, 340px, calc(64vh * 660 / 925)); opacity: 0; transition: opacity .45s ease; }
.seq-stage > .is-active { opacity: 1; }
.seq-stage img, .seq-inline {
  display: block; height: auto; border-radius: 30px;
  border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35);
}
/* With the script on a wide screen, the stage shows the screens: the inline copies step aside. */
.seq.is-live .seq-inline { display: none; }

/* A screen still to come: a phone-shaped frame with its caption. */
.seq-ph {
  aspect-ratio: 660 / 925; display: grid; place-items: center; padding: 24px; text-align: center;
  border-radius: 30px; border: 1.5px dashed var(--line); background: var(--well);
  font-size: 14px; line-height: 1.45; color: var(--muted);
}
.seq-ph span::before { content: "Screen to come"; display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Without the script (no .is-live): each screen under its step, no stage. */
.seq:not(.is-live) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.seq:not(.is-live) .seq-stage { display: none; }
.seq:not(.is-live) .seq-steps > li { min-height: 0; padding: 24px 0 40px; }
.seq:not(.is-live) .seq-inline { width: min(100%, 360px); margin-top: 8px; border-radius: 20px; }

@media (prefers-reduced-motion: reduce) {
  .seq.is-live .seq-steps > li, .seq-stage > * { transition: none; }
}
@media (max-width: 900px) {
  .seq, .seq.is-live { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .seq-stage, .seq.is-live .seq-stage { display: none; }
  .seq-steps > li, .seq.is-live .seq-steps > li { min-height: 0; opacity: 1; max-width: none; padding: 24px 0 40px; }
  .seq-inline, .seq.is-live .seq-inline { display: block; width: min(100%, 360px); margin-top: 8px; border-radius: 20px; }
  .seq-inline.seq-ph, .seq.is-live .seq-inline.seq-ph { display: grid; }
}

/* A text in place of a screen: the head of Maurice's licence (/hosting). */
.seq-licence { place-items: start; text-align: left; border-style: solid; background: var(--card); color: var(--ink-2); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.6; padding: 28px 24px; }
.seq-licence span::before { content: none; }
.seq-licence b { display: block; margin-bottom: 14px; font-size: 11px; letter-spacing: .1em; color: var(--muted); }