/* Moment 12's frame (carousel.js): the row of moments in the live layer, in
   board units. Each card is the desk's 600 x 460 card on both boards; on a
   phone it is the same card, its markup, layout and moment unchanged,
   scaled down whole to the phone's 330 slot (330 / 600 = 0.55, so 330 x
   253), never cropped or shortened (Pat 2026-11-09). Slots 128 apart on a
   desk, 60 on a phone (the phone's spacing: its neighbours peek at the
   window's edges). No surface and no box: each moment floats on the
   page's ground (Pat 2026-11-09 02:24). Under each its caption, in the
   thesis's place and style at its own size (Pat 2026-11-09 05:08: "the same
   location as they are in the thesis flow"; lab.css .cap-title 813 and
   .cap-text 839 on a desk, 690 and 716 on a phone). On a desk the slot is
   centred where the thesis's circle is (lab.js DESK centred, 480); on a
   phone the caption keeps the thesis's 690 and the card sits the desk's 103
   above it (its foot at 587, its middle at 460.5). Between each two the
   landing's divider (lab.js's ways canvas: a 1 px line in the ink at 0.12,
   white at 0.15 in dark), here fading out at both ends. carousel.js places
   each card along the loop. */
.plive .carousel {
  /* The slot as laid out: the card's 600 x 460 at --carousel-k. */
  --carousel-k: 1;
  --carousel-w: calc(600px * var(--carousel-k));
  --carousel-h: calc(460px * var(--carousel-k));
  --carousel-gap: 128px;
  /* The slot's middle and the caption's title line, board units. */
  --carousel-mid: 480px;
  --carousel-cap: 813px;
  /* The caption's room: the title's 17, 9, three lines of 24. */
  --carousel-caption: calc(17px * var(--lift, 1) + 9px + 72px * var(--lift, 1));
  --carousel-top: calc(var(--carousel-mid) - var(--carousel-h) / 2);
  --carousel-line: rgb(16 16 16 / 0.12);
  /* The band a card's moment is centred in: from the header line's foot
     (lab.css .kicker, 60 + 24 on a desk, 52 + 24 on a phone) to the
     caption's top. */
  --carousel-band-top: 84px;
  --carousel-band-mid: calc((var(--carousel-band-top) + var(--carousel-cap)) / 2);
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  outline: none;
}
.plive.phone .carousel {
  --carousel-k: 0.55;
  --carousel-gap: 60px;
  /* The caption's 690 less the desk's 103 under the card, less half the
     scaled card (253 / 2). */
  --carousel-mid: calc(690px - 103px - var(--carousel-h) / 2);
  --carousel-cap: 690px;
  --carousel-band-top: 76px;
}
@media (prefers-color-scheme: dark) {
  .plive .carousel { --carousel-line: rgb(255 255 255 / 0.15); }
}
.plive .carousel[data-shown] {
  visibility: visible;
  pointer-events: auto;
  /* A vertical swipe is the page's, between moments; a sideways one moves
     the row. */
  touch-action: pan-y;
}
/* The row runs from the slot's top to the caption's foot. */
.plive .carousel-row {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--carousel-top);
  height: calc(var(--carousel-cap) - var(--carousel-top) + var(--carousel-caption));
  /* The open hand over the row, the closed one while it is dragged. */
  cursor: grab;
}
.plive .carousel[data-dragging],
.plive .carousel[data-dragging] .carousel-row { cursor: grabbing; }
.plive .carousel-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--carousel-w);
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}
/* The slot: no fill, no border, no shadow, nothing clipped at its edge
   (a card that crops fades its own cut, cards-a.css and cards-b.css). The
   card is always the desk's 600 x 460; on a phone it is scaled about its
   top left to the slot. */
.plive .carousel-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 460px;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
/* Each card's moment centred in the band between the header's line and the
   caption, and as large as that band allows (Pat 2026-11-09 14:44: "the
   cards are not vertically centred at all", "too far scaled down for no
   reason"). --cx0..--ch: the box each card's moment covers through its
   play, in the card's 600 x 460 units (measured in WebKit, every 100 ms of
   a play). Each card fills the room it has (a desk's 600 wide and 640 tall,
   a phone's 358 and 550), whichever comes first, but is never drawn past
   the app's own size: --cmax undoes a card's own stage scale (Export's 0.9,
   Format's 0.76, Focus's window at 0.44), and is 1 for the rest. The card is
   placed so that box's centre is the slot's middle across and the band's
   middle down. */
.plive .carousel-item[data-card='export'] { --cx0: 138; --cy0: 40.5; --cw: 324; --ch: 379; --cmax: 1.111; }
.plive .carousel-item[data-card='format'] { --cx0: 142.3; --cy0: 12.6; --cw: 298; --ch: 428.7; --cmax: 1.316; }
.plive .carousel-item[data-card='highlight'] { --cx0: 0; --cy0: 96; --cw: 507; --ch: 268; }
.plive .carousel-item[data-card='marks'] { --cx0: 64; --cy0: 158; --cw: 464; --ch: 144; }
.plive .carousel-item[data-card='drag'] { --cx0: 16; --cy0: 20; --cw: 563; --ch: 420; }
.plive .carousel-item[data-card='focus'] { --cx0: 18.4; --cy0: 50.7; --cw: 563.2; --ch: 358.6; --cmax: 2.27; }
.plive .carousel-item {
  --cs: min(calc(600 / var(--cw, 600)), calc(640 / var(--ch, 460)), var(--cmax, 1));
}
.plive.phone .carousel-item {
  --cs: min(calc(358 / var(--cw, 600)), calc(550 / var(--ch, 460)), var(--cmax, 1));
}
.plive .carousel-card {
  transform-origin: 0 0;
  scale: var(--cs);
  left: calc(var(--carousel-w) / 2 - (var(--cx0, 0) + var(--cw, 600) / 2) * var(--cs) * 1px);
  top: calc(var(--carousel-band-mid) - var(--carousel-top) - (var(--cy0, 0) + var(--ch, 460) / 2) * var(--cs) * 1px);
}
/* The card's own layer (carousel.js): its moment, faded on the way back
   to its first frame. */
.plive .carousel-face {
  position: absolute;
  inset: 0;
}
/* The thesis's caption (lab.css .cap-title and .cap-text) in its place:
   the title 14/17 Regular in ink on the thesis's title line, 9 above the
   definition (on the thesis's 839 and 716), 16/24 Light in muted, centred,
   balanced, three lines at most; both lift on a smaller window as the
   thesis's do, their tops staying put. */
.plive .carousel-caption {
  position: absolute;
  left: 50%;
  top: calc(var(--carousel-cap) - var(--carousel-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: calc(400px * var(--lift, 1));
  max-width: var(--carousel-w);
  translate: -50% 0;
  text-align: center;
  pointer-events: none;
}
.plive.phone .carousel-caption { width: calc(320px * var(--lift, 1)); }
.plive .carousel-cap-title,
.plive .carousel-cap-text { margin: 0; }
.plive .carousel-cap-title {
  /* The thesis's title line is 17 tall at any lift and the definition 26
     under its top (lab.css 813 and 839): the lifted title grows down into
     the 9 and the definition keeps its line. */
  height: 17px;
  overflow: visible;
  white-space: nowrap;
  font: 400 calc(14px * var(--lift, 1)) / calc(17px * var(--lift, 1)) var(--face);
  color: var(--ink);
}
.plive .carousel-cap-text {
  font: 300 calc(16px * var(--lift, 1)) / calc(24px * var(--lift, 1)) var(--face);
  color: var(--muted);
  text-wrap: balance;
}
/* The divider, in the middle of the space after each card: a hairline (one
   window pixel) the slot tall and centred on the slot's middle (the 460,
   on a phone the scaled 253), fading to nothing at both ends, so it is gone
   before the captions (Pat 2026-11-09 12:51). */
.plive .carousel-divider {
  position: absolute;
  top: calc(var(--carousel-band-mid) - var(--carousel-top) - (var(--carousel-cap) - var(--carousel-band-top)) * 0.4);
  left: calc(100% + var(--carousel-gap) / 2);
  width: var(--carousel-hair, 1px);
  height: calc((var(--carousel-cap) - var(--carousel-band-top)) * 0.8);
  translate: -50% 0;
  background: linear-gradient(to bottom, transparent, var(--carousel-line) 30%, var(--carousel-line) 70%, transparent);
  pointer-events: none;
}
/* The keyboard's ring (Pat 2026-11-09 05:08: no ring round the whole row
   on a key after a click): only on the card a key moved to, sized to its
   slot, the app's 2 px ink, 8 out at the slot's radius plus 8. A pointer's
   focus draws none (carousel.js sets data-keys only for Tab and the
   arrows). */
.plive .carousel-item { outline: none; }
.plive .carousel[data-keys] .carousel-item:focus .carousel-card::after {
  content: '';
  position: absolute;
  /* Round the moment's box, at the ring's own size whatever the scale. */
  left: calc(var(--cx0, 0) * 1px - 8px / var(--cs));
  top: calc(var(--cy0, 0) * 1px - 8px / var(--cs));
  width: calc(var(--cw, 600) * 1px + 16px / var(--cs));
  height: calc(var(--ch, 460) * 1px + 16px / var(--cs));
  border-radius: calc(24px / var(--cs));
  outline: calc(2px / var(--cs)) solid var(--color-ink);
  pointer-events: none;
}