/*
 * playbook/kit/install-walkthrough/embed/embed.css - the sheet a walkthrough
 * sits in (embed.js). Linked after the app's own stylesheet; single classes,
 * so a rule of the app's with two classes still wins.
 *
 * The app's knobs, set on the sheet's box or above it:
 *   --walk-sheet-max   the box's tallest       (default: the window less 32 px)
 *   --walk-lit         a lit line's background (default: a pale teal)
 *   --walk-lit-ink     a lit line's text       (default: as it was)
 */

/*
 * The frame takes the room the rest leaves. The box is a column at most the
 * window tall; its other children keep their size, and the frame alone
 * shrinks, from 440 px to 200. The iframe is placed absolutely, so the slot's
 * height is the column's to decide, never the frame's content's.
 */
.walk-sheet { display: flex; flex-direction: column; max-height: var(--walk-sheet-max, calc(100dvh - 32px)); }
.walk-sheet > * { flex-shrink: 0; }
.walk-sheet > .walk-slot { flex: 0 1 440px; min-height: 200px; }
.walk-slot { position: relative; margin-block: 14px 0; }
.walk-slot iframe {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  display: block; height: 100%; aspect-ratio: 540 / 1192; width: auto;
  border: 0; border-radius: 22px; background: #000;
  box-shadow: 0 0 0 5px #111, 0 10px 28px rgba(0, 0, 0, .28);
}

/* Lit is a colour, never a weight: a bold line is wider and can wrap onto another row. */
.walk-line { padding: 4px 10px; border-radius: 10px; transition: background-color .25s, color .25s; }
.walk-line.walk-on { background: var(--walk-lit, rgba(14, 107, 102, .16)); color: var(--walk-lit-ink, inherit); }
@media (prefers-reduced-motion: reduce) { .walk-line { transition: none; } }