/* ==========================================================================
   The Videos page (/videos/) and its player (demo-player.js): a silent video of
   the Finite Phone app beside its steps. The video draws the phone screen's own
   edge on the page's white (a hairline and the screen's real corners,
   marketing/demo-videos/), so it gets no border, radius or shadow here. The
   Play, the bar and the quiet buttons are the setup clips' look
   (assets/setup/setup-clip.css), copied because neither page loads the other's
   player: change the look in both. Without the script the video keeps the
   browser's own controls and the steps are a plain numbered list.
   ========================================================================== */

/* The list of videos under the lede. */
.demo-toc { margin-top: 32px; list-style: none; }
.demo-toc li + li { margin-top: 8px; }

/* A part: its heading, then the video beside its steps. The video is as wide as a laptop's
   window lets the heading, the video, its bar and its controls show at once (170px for all but
   the video), at most 500px, and never more than half the row, so the steps keep room between
   760 and 1000px. A link to the part opens at its heading. */
.demo h2 { scroll-margin-top: 16px; }
.demo-grid {
  --dp-w: min(500px, 50%, max(280px, calc((100vh - 170px) * .8)));
  display: grid;
  grid-template-columns: var(--dp-w) minmax(0, 30em);
  gap: 32px clamp(40px, 6vw, 72px);
  align-items: start;
  margin-top: 28px;
}
@supports (height: 100svh) {
  /* The window without a phone's or a tablet's browser bars, where they come and go. */
  .demo-grid { --dp-w: min(500px, 50%, max(280px, calc((100svh - 170px) * .8))); }
}
/* A video that went with its poster: the steps stand alone. */
.demo-grid:has(> .demo-video[hidden]) { grid-template-columns: minmax(0, 30em); }
.demo-video { min-width: 0; }
.demo-video[hidden] { display: none; }
.demo-video video, .dp-big-screen video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  border: 0; border-radius: 0; background: var(--white); object-fit: contain;
}
@media (max-width: 760px) {
  /* Stacked: the heading, the video at the column's width up to 420px and on its left edge, as
     the site's pictures sit, its bar and controls, then the steps. */
  .demo-grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .demo-video { width: 100%; max-width: 420px; justify-self: start; }
}

/* The words beside the video: a short paragraph on what the task does for you and what undoing
   it takes, its first line level with the video's top, as a part's words start level with its
   picture; then the steps. */
.demo-text { min-width: 0; }
.demo-about + .demo-steps { margin-top: 13px; }

/* The steps: the site's numbered list, each row 44px at least, so the script can turn a row
   into a button without moving a word. With no paragraph above it, the first row's padding sits
   above the column, so its line starts level with the video's top. */
.demo-steps { max-width: 30em; margin-top: -7px; padding-left: 1.7em; }
.demo-steps li { padding: 7px 0; }

/* The two lines after the last video, before the closing section's hairline. */
.demo:has(+ .demo-after) { padding-bottom: 48px; }
.demo-after { padding-bottom: var(--part-pad); }
.demo-after p + p { margin-top: 8px; }

/* ---- What the script builds ---- */

/* It keeps the video's shape while Enlarge has the video, so the page doesn't shorten under the
   dialog and the reader comes back to the same place. */
.dp-screen { position: relative; aspect-ratio: 4 / 5; }

/* The Play over the poster, before the first play: the whole picture is the pointer's target,
   the round mark in its middle. The keyboard's Play is the first control under the bar. */
.dp-play {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  display: grid; place-items: center; border: 0; background: transparent; cursor: pointer;
}
.dp-play[hidden] { display: none; }
.dp-play span {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .72); color: var(--white);
}
.dp-play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }

/* Where the video is: 4px, a segment per step as long as the step, the played ones full and
   the one playing filling. Black on a 15% tint of it. It spans the screen the video draws,
   whose white margin is 25.7px of the frame's 1080 on each side. */
.dp-bar { display: flex; gap: 4px; height: 4px; margin: 8px 2.38% 0; color: var(--black); }
.dp-bar[hidden] { display: none; }
.dp-seg { position: relative; flex: 1 1 0; min-width: 4px; overflow: hidden; border-radius: 2px; }
.dp-seg::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .15; }
.dp-fill { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left center; }

/* The controls are the site's quiet button: white, a black line, 6px corners. */
.dp-ctrls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.dp-ctrls[hidden] { display: none; }
.dp-ctl {
  width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center;
  border: 1px solid var(--black); border-radius: 6px; background: var(--white); color: var(--black); cursor: pointer;
}
.dp-ctl:hover { color: var(--grey); border-color: var(--grey); }
.dp-ctl svg { width: 20px; height: 20px; fill: currentColor; }
.dp-ctl svg.dp-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Slower and Close: words, in the controls' height, line and colours; Slower is a toggle,
   filled black while it is on, so a filled control means one thing. */
.dp-slower, .dp-close {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--black); border-radius: 6px; cursor: pointer;
  background: var(--white); color: var(--black); font: 700 16px/1 var(--f-sans);
}
.dp-close { padding: 0 22px; }
.dp-slower:hover, .dp-close:hover { color: var(--grey); border-color: var(--grey); }
.dp-slower[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.dp-slower[aria-pressed="true"]:hover { background: var(--hover); border-color: var(--hover); color: var(--white); }

/* A step the video shows, as a button: the number and the words where the list had them, a
   grey field on the step on screen, never a colour and no edge rule. */
.demo-steps.dp-list { list-style: none; padding-left: 0; }
.demo-steps.dp-list li { padding: 0; }
.dp-step, .dp-row {
  display: flex; align-items: baseline; width: 100%; min-height: 44px; margin: 0; padding: 7px 12px 7px 0;
  border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left;
}
.dp-step { cursor: pointer; }
.dp-step:hover { background: rgba(0, 0, 0, .04); }
.dp-step[aria-current] { background: rgba(0, 0, 0, .08); }
.dp-n { flex: none; width: 1.7em; text-align: right; white-space: pre; font-variant-numeric: tabular-nums; }
.dp-t { min-width: 0; }

/* Enlarged: one dialog for the page, the video as large as the window holds with its bar and
   controls (66px) and the padding (32px), on white: the video's own white margin would show as a
   white box on black. */
dialog.dp-big {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: var(--white); color: var(--black); overflow: hidden;
}
dialog.dp-big[open] { display: grid; place-items: center; }
dialog.dp-big::backdrop { background: var(--white); }
.dp-big-stage { width: min(calc(100vw - 32px), calc((100vh - 98px) * .8)); }
@supports (height: 100dvh) {
  .dp-big-stage { width: min(calc(100vw - 32px), calc((100dvh - 98px) * .8)); }
}
html.dp-lock { overflow: hidden; }

@media (forced-colors: active) {
  .dp-ctl, .dp-play span, .dp-slower, .dp-close { border: 1px solid ButtonText; }
  /* Forced colours drop the fill, so Slower on takes the system's own selected look. */
  .dp-slower[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .dp-step[aria-current] { outline: 2px solid Highlight; }
  /* Forced colours would paint the fill as the page (Canvas): the bar keeps its own. */
  .dp-bar { forced-color-adjust: none; color: CanvasText; }
  .dp-seg::before { opacity: .3; }
}