/* The film, its sound button, and the playable step 3. Loaded after acts.css and overrides its film
 * rules. (The opening is in light.css.) */
html.is-motion .site-header {
  position: fixed;
  right: 0;
  left: 0;
  margin-top: 0;
}

/* ── 2. Film: the full width of the window ───────────────────────────────── */
.film {
  padding-top: clamp(56px, 8vw, 112px);
}
.film .film-inner {
  padding-inline: 0;
}
.film .film-inner > :is(.eyebrow, .title, .film-bar, .film-chips) {
  margin-inline: var(--gutter);
}
/* A dark band from edge to edge; the 16:9 picture is as large as fits inside it and is never
 * cropped (its own "Demo data" label stays in view). The band is the picture's own black, so on
 * windows that are not 16:9 the bars at the sides are invisible.
 * The band docks only for a moment — about one flick of scrolling (owner, 2026-10-07: the longer
 * hold, 70svh, felt like resistance and "makes people think they have hit the bottom"). */
.film .film-dock {
  --band: min(100vh, 56.25vw);
  --band: min(100svh, 56.25vw);
  width: 100%;
  margin-top: clamp(22px, 3.2vw, 40px);
}
.is-motion .film .film-dock {
  height: calc(var(--band) + 12vh);
  height: calc(var(--band) + 12svh);
}
.film .film-stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--band);
  margin-top: 0;
  overflow: hidden;
  background: #0d0f0e;
}
.is-motion .film .film-stage {
  position: sticky;
  top: calc((100vh - var(--band)) / 2);
  top: calc((100svh - var(--band)) / 2);
}
@media (max-width: 700px) {
  .is-motion .film .film-dock {
    height: calc(var(--band) + 8vh);
    height: calc(var(--band) + 8svh);
  }
}
.is-motion .film .film-stage {
  /* arrives as a rounded card and opens out to the full width */
  border-radius: calc((1 - var(--e, 1)) * 36px);
  transform: scale(calc(0.9 + 0.1 * var(--e, 1)));
  will-change: transform;
}
.film .screen,
.is-motion .film .screen {
  position: relative;
  /* as wide as the band, unless that would make it taller than the band: the whole picture always fits */
  width: min(100%, var(--band) * 16 / 9);
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
.film .screen-video {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}

/* The sound button: on the picture, large, bottom centre. Its text says what a press will do. */
.film-mute {
  position: absolute;
  bottom: max(18px, 7%);
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 30px 0 22px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  background: rgb(
    242 239 230 /
    94%
  ); /* the film's own cream: the brightest thing on the dark picture */
  box-shadow: 0 12px 34px -12px rgb(0 0 0 / 80%);
  color: #0d0f0e;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  transition:
    background-color 0.2s,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-mute[hidden] {
  display: none;
}
.film-mute .ico {
  flex: none;
  width: 26px;
  height: 26px;
}
.film-mute:hover {
  background: #fff;
}
.film-mute:active {
  transform: translateX(-50%) scale(0.97);
}
.film-mute:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.film-mute[aria-pressed="true"] .ico-sound-off,
.film-mute[aria-pressed="false"] .ico-sound-on {
  display: none;
}
/* The browser held the sound back: the button is the brightest thing on the picture. */
.film-mute[data-state="blocked"] {
  min-height: 66px;
  padding: 0 34px 0 26px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 21px;
  animation: nudge 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes nudge {
  50% {
    box-shadow:
      0 0 0 12px rgb(73 181 254 / 0%),
      0 10px 30px -12px rgb(0 0 0 / 70%);
  }
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgb(73 181 254 / 55%),
      0 10px 30px -12px rgb(0 0 0 / 70%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .film-mute[data-state="blocked"] {
    animation: none;
  }
}
@media (max-width: 520px) {
  .film-mute {
    min-height: 46px;
    padding: 0 18px 0 14px;
    font-size: 15px;
  }
}
/* The header steps aside while the picture is under it. */
html.is-motion .site-header {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html.is-motion.over-film .site-header {
  transform: translateY(-130%);
}

/* ── Step 3, playable (js/play.js adds .is-live; without it the still picture stays) ────── */
.spec-flow .play {
  display: none;
}
.spec-flow.is-live {
  align-content: start;
  padding: 48px 16px 18px;
}
.spec-flow.is-live > :not(.sim-flag, .play) {
  display: none;
}
.spec-flow.is-live > .play,
.steps:has(:is(#c-pause, #c-revoke):checked) .spec-flow.is-live > .play {
  display: grid;
  gap: 8px;
  width: 100%;
  opacity: 1;
  text-align: left;
}
.play-app,
.play-ledger {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 46%, transparent);
}
.play-bar,
.play-meter,
.play-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 12.5px;
  line-height: 1.35;
}
.play-name {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}
.play-credit b,
.play-num b,
.play-count b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.play-num {
  font-variant-numeric: tabular-nums;
}
.play-send {
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.play-send:disabled {
  cursor: not-allowed;
  filter: saturate(0.25);
  opacity: 0.45;
}
.is-rushing .play-send {
  transform: scale(0.975);
}
/* The request on its way: app → model → receipt. */
.play-wire {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  min-height: 30px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.play-wire code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.play-arrow {
  width: 16px;
  height: 16px;
  color: var(--border-strong);
}
.play-dot {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
  opacity: 0;
}
.play-wire.is-flying .play-dot {
  animation: play-fall 0.52s cubic-bezier(0.5, 0, 0.6, 1);
}
.is-rushing .play-dot {
  animation: play-fall 0.22s linear infinite;
}
.play-wire.is-flying code,
.is-rushing .play-wire code {
  color: var(--ink);
}
@keyframes play-fall {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}
.play-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.play-fill {
  display: block;
  width: calc(var(--fill, 0) * 100%);
  min-width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-state="capped"] .play-fill {
  background: var(--warning);
}
[data-state="capped"] .play-num b {
  color: var(--warning);
}
.play-tape {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px; /* three receipts */
  margin: 0;
  padding: 0;
  list-style: none;
}
.play-none {
  align-self: center;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}
.play-none[hidden] {
  display: none;
}
.play-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 4px 10px 4px 8px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  animation: play-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.play-row .rc-tick {
  width: 15px;
  height: 15px;
}
.play-id {
  margin-left: auto;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
}
@keyframes play-in {
  from {
    opacity: 0;
    transform: translateY(-9px);
  }
}
.play-hint {
  min-height: 2.9em;
  margin: 2px 4px 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.play-hint [data-when] {
  display: none;
}
[data-state="idle"] .play-hint [data-when="idle"],
[data-state="active"] .play-hint [data-when="active"],
[data-state="paused"] .play-hint [data-when="paused"],
[data-state="revoked"] .play-hint [data-when="revoked"],
[data-state="capped"] .play-hint [data-when="capped"] {
  display: inline;
}
[data-state="paused"] .play-hint,
[data-state="revoked"] .play-hint,
[data-state="capped"] .play-hint {
  color: var(--warning);
}
@media (prefers-reduced-motion: reduce) {
  .play-row,
  .play-wire.is-flying .play-dot,
  .is-rushing .play-dot {
    animation: none;
  }
}

.play-count {
  justify-content: flex-start;
  gap: 5px;
}
.play-line {
  display: block;
}
/* The consent card's own meter (step 2): what the app has used against the monthly limit. */
.limit-used {
  flex-wrap: wrap;
}
.limit-used[hidden] {
  display: none;
}
.limit-used .limit-val {
  font-variant-numeric: tabular-nums;
}
.limit-used .play-track {
  flex: 0 0 100%;
  margin-top: 8px;
}
.limit-used[data-state="capped"] .limit-val {
  color: var(--warning);
}
.limit-used[data-state="capped"] .play-fill {
  background: var(--warning);
}