/* ==========================================================================
   The setup article's clips (setup-clip.js): a muted, looping video in the site's picture frame
   (a hairline with the screen's own corners, docs/website-design.md section 6), with Pause,
   Enlarge and Slower under it. The player's rules are the account page's
   (portal/src/components/SetupClip.svelte; change the behaviour in both), and so is its look
   since the 2026-10-18 port and the portal's pass of 2026-10-19: change the frame in both too.
   Without the script the video keeps the browser's own controls and none of this frame.
   ========================================================================== */

.setup-clip { margin: 0; display: grid; justify-items: center; gap: 10px; }
.setup-clip[hidden] { display: none; }
/* Before the script (or without it): the bare video at its kind's size, with its own controls. */
.setup-clip > video { display: block; max-width: 100%; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.setup-clip[data-kind="phone"] > video { width: auto; height: min(480px, 62vh); border-radius: 30px; }
.setup-clip[data-kind="browser"] > video { width: 576px; height: auto; }
.setup-clip[data-kind="scene"] > video { width: 480px; height: auto; border-radius: 16px; }

/* What the script builds: the frame with the bar under it, the screen inside the frame, and the
   controls. The frame is the hairline; each kind sets the corners its screen has. */
.sc-stage { display: grid; gap: 8px; max-width: 100%; }
.sc-frame { position: relative; max-width: 100%; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--sc-r, 12px); }
.sc-screen { position: relative; overflow: hidden; aspect-ratio: var(--sc-ar, .45); background: var(--white); }
.sc-screen video { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }

/* Where the loop is: the screen's width, 4px, a segment per instruction as long as its stretch
   of the clip, the played ones full and the one playing filling. Black on a 15% tint of it. */
.sc-bar { display: flex; gap: 4px; height: 4px; color: var(--black); }
.sc-bar[hidden] { display: none; }
.sc-seg { position: relative; flex: 1 1 0; min-width: 4px; overflow: hidden; border-radius: 2px; }
.sc-seg::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .15; }
.sc-fill { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left center; }

/* The phone: the whole screen, so the corners are the screen's own. No body, no bezel, nothing
   that looks like one maker's hardware. */
.sc-phone .sc-frame { --sc-r: 30px; }
.sc-phone .sc-screen { height: min(480px, 62vh); }

/* The browser: the clip draws its own window, tabs and address bar included; the frame is the
   window's edge. */
.sc-browser, .sc-scene { justify-items: stretch; width: 100%; }
.sc-browser .sc-stage { width: 100%; max-width: 576px; justify-self: center; }
.sc-browser .sc-frame { --sc-r: 12px; }
.sc-browser .sc-screen { width: 100%; }

/* A scene is a drawing, in the same hairline. */
.sc-scene .sc-stage { width: 100%; max-width: 480px; justify-self: center; }
.sc-scene .sc-frame { --sc-r: 16px; }
.sc-scene .sc-screen { width: 100%; }

/* The pointer's Play, over a still clip. The keyboard's is the Pause button under it. */
.sc-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .72); color: var(--white); cursor: pointer;
}
.sc-play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
.sc-play[hidden] { display: none; }

/* The controls are the site's quiet button: white, a black line, 6px corners. */
.sc-ctrls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sc-ctrls[hidden] { display: none; }
.sc-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;
}
.sc-ctl:hover { color: var(--grey); border-color: var(--grey); }
.sc-ctl svg { width: 20px; height: 20px; fill: currentColor; }
.sc-ctl svg.sc-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Slower: a word, not an icon, for readers who are not technical, in the controls' height, line
   and colours; a toggle, filled black while it is on. */
.sc-slower {
  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);
}
.sc-slower:hover { color: var(--grey); border-color: var(--grey); }
.sc-slower[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.sc-slower[aria-pressed="true"]:hover { background: var(--hover); border-color: var(--hover); color: var(--white); }

.setup-clip .sc-cap { margin: 0; max-width: 22em; color: var(--grey); font-size: 16px; line-height: 1.5; text-align: center; }

/* A clip that did not load keeps its screen, with the poster or plain, and offers nothing. */
.sc-failed .sc-screen { background: var(--white); }

/* An instruction the clip can show, as a button once the script runs; the one on screen is
   marked with a grey field over its number and words, never a colour and no edge rule (Allen,
   2026-09-30: the rule read as a misaligned highlight). The field, the hover and the focus ring
   are drawn around the button, not made of padding, so the words keep the place they had
   before the script ran. */
.sc-cue {
  position: relative; z-index: 0; display: block; width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; line-height: inherit;
  text-align: left; cursor: pointer;
}
.sc-cue::before { content: ""; position: absolute; z-index: -1; inset: -4px -9px; border-radius: 6px; }
.sc-cue:hover::before { background: rgba(0, 0, 0, .04); }
.sc-now > .sc-cue::before, .sc-cue.sc-now::before { background: rgba(0, 0, 0, .08); }
.sc-cue:focus-visible { outline: 0; }
.sc-cue:focus-visible::before { outline: 2px solid var(--black); outline-offset: 2px; }

/* A numbered list with lines the clip shows (setup-clip.js numberRows): each row draws its
   number inside it, where the list's marker stood and in the marker's own weight, so the field
   covers the number and nothing moves. */
ol.sc-list { list-style: none; padding-left: 0; }
.sc-list .sc-cue, .sc-row { display: flex; align-items: baseline; gap: 6px; }
.sc-n { flex: none; width: 1.2em; text-align: right; white-space: pre; font-variant-numeric: tabular-nums; }
.sc-t { min-width: 0; }

/* Enlarged: one dialog for the page, the clip as large as the window holds, on black. */
dialog.sc-big { margin: auto; padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
dialog.sc-big::backdrop { background: rgba(0, 0, 0, .88); }
.sc-big-inner { display: grid; justify-items: center; gap: 14px; }
.sc-big-stage { display: grid; gap: 8px; }
.sc-big .sc-bar { color: var(--white); }
.sc-big-screen { aspect-ratio: var(--sc-ar, .45); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.sc-big-screen video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* As large as the window holds with the controls (112px) and the bar under it. */
.sc-big-phone .sc-big-screen { height: min(calc(100vh - 112px - 12px), 1024px); max-width: 92vw; border-radius: 30px; }
.sc-big-browser .sc-big-screen, .sc-big-scene .sc-big-screen { width: min(92vw, 1280px, calc((100vh - 112px - 12px) * var(--sc-ar, 1.6))); border-radius: 12px; }
/* Close is outlined like the controls beside it, so a filled control here means one thing, as it
   does under the clip: Slower is on. */
.sc-close {
  min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  background: transparent; font: 700 16px/1 var(--f-sans);
}
.sc-big .sc-ctl, .sc-big .sc-slower, .sc-close { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .6); }
.sc-big .sc-ctl:hover, .sc-big .sc-slower:hover, .sc-close:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: var(--white); }
.sc-big .sc-slower[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.sc-big .sc-slower[aria-pressed="true"]:hover { background: var(--white); color: var(--black); }

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

/* The which-phone choice (setup-platform.js): one phone's blocks on show, the other's hidden.
   A part of a step is a grid (styles.css .doc .sub-step), which would outdraw [hidden]. The
   choice itself shows only with the script, under the lede, as two of the site's buttons. */
[data-platform][hidden], .doc [data-platform][hidden] { display: none; }
.platform-pick { margin-top: 32px; }
.platform-pick[hidden] { display: none; }
.platform-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.platform-buttons .btn { min-height: 44px; padding: 0 22px; font-size: 17px; }