/* 09 However you film. The shared swipe row: six phones in a row on a laptop (a grid from 1000px), a strip on a phone
   with the next card peeking and dots under it. The card that plays (.is-on, set by js/09-formats.js) is lit; on a
   laptop it is also 1.3x wider than the others (its grid column grows, the rest give way – nothing overlaps, hover
   moves nothing). A yellow line along its bottom edge fills as it plays, so it is clear when the row moves on. */
.fm-hd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: end; }
.fm-hd .lead { margin: 0; }
/* Phone: a card about 280px wide (the burned-in captions read at about three quarters of their size on a full-screen
   phone), narrower on a short phone so the headline, the first card, its label and the dots share the first screen
   (RU: 318, not 314 – the three-line lead left the dots 2px past the fold at 375×667, as on the English page). */
.fm-row { --swipe-w: min(80%, calc((100svh - 318px) * 9 / 16)); --swipe-w-md: 38%; --swipe-cols: 6; --swipe-gap: 12px; margin-top: var(--s7); }
.fm-k { cursor: pointer; }
.fm-k figure { margin: 0; border-radius: var(--r-short); }
/* The keyboard ring (each figure is a button, js/09-formats.js): cream on the night band, where the shared green one
   is too dark to see; it sits outside the yellow ring of the card that plays */
.fm-k figure:focus-visible { outline: 3px solid var(--night-ink); outline-offset: 5px; }
.fm-k .demo { aspect-ratio: 9 / 16; border-radius: var(--r-short); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .3s ease, opacity .3s ease; }
.fm-row.is-live .fm-k:not(.is-on) .demo { opacity: .55; }
.fm-row.is-live .fm-k.is-on .demo { box-shadow: 0 0 0 3px var(--yellow); opacity: 1; }
/* How long until the next one: a line along the bottom edge of the card that is playing */
.fm-p { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px; background: rgba(255, 255, 255, .2); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.fm-p::before { content: ""; display: block; height: 100%; background: var(--yellow); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .26s linear; }
.fm-row.is-live .fm-k.is-on.is-playing .fm-p { opacity: 1; }
.fm-k figcaption { display: flex; align-items: center; gap: 8px; margin-top: var(--s2); font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--night-2); transition: color .3s; }
.fm-k figcaption .ico { width: 18px; height: 18px; flex: none; color: var(--night-muted); transition: color .3s; }
.fm-row.is-live .fm-k.is-on figcaption { color: #fff; }
.fm-row.is-live .fm-k.is-on figcaption .ico { color: var(--yellow); }

/* Laptop: the playing card's column is 1.3x the others (--fm-cols from the js). The row keeps the height of the big
   card at all times (cards and labels sit on one baseline), so nothing below moves while a column grows. */
@media (min-width: 1000px) {
  .fm-row { container-type: inline-size; }
  .fm .fm-row .swipe-track { --g: var(--s3); gap: var(--g); align-items: end; grid-template-columns: var(--fm-cols, repeat(6, minmax(0, 1fr))); min-height: calc((100cqw - 5 * var(--g)) * 1.3 / 6.3 * 16 / 9 + var(--s2) + 21px); transition: grid-template-columns .7s var(--ease); }
}
@media (max-width: 999px) {
  .fm-hd { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .fm-row { margin-top: var(--s5); }
  .fm-row .swipe-nav { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .fm-p { display: none; } .fm .fm-row .swipe-track { transition: none; } }