/* The scenes grid (player/scenes-grid.js): a view of its own under the top
   bar (its toolbar in the bar's tools row), over the paused player. The
   film's type (Anton names, JetBrains Mono numbers) on ink, the player
   chrome's light grey (--ui-accent) for what reacts. Cards in film order, as
   many columns as fit; a card holds its 16:9 and 9:16 stills side by side
   at one height (one per row on a phone), or the one format shown. Above
   the timeline's lanes (z-index up to 5, not an isolated stacking context),
   under popups. */
.sg { position: fixed; inset: calc(var(--tb-nav) + var(--tb-tools)) 0 0; z-index: 6; overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 64px; color: var(--paper); background: var(--ink); font-family: 'DM Sans Variable', sans-serif; scrollbar-color: #333 transparent; }
.sg[hidden], body.render .sg { display: none; }
.sg:focus { outline: none; }

/* The toolbar: what the grid shows (formats, captions), a summary, Download all. */
.sg-bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.sg-bar[hidden] { display: none; }
.sg-sum { min-width: 0; margin-left: auto; overflow: hidden; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; white-space: pre; text-overflow: ellipsis; color: #6c6c70; }
@media (max-width: 1000px) { .sg-hint { display: none; } }
.sg-all { flex: none; height: 28px; padding: 0 11px 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 11.5px; white-space: nowrap; color: #ddd; background: #1c1c1c; border: 1px solid #333; border-radius: 6px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background-color 0.12s; }
.sg-all svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sg-all small { font-size: 10px; color: #6c6c70; }
.sg-all:hover:not(:disabled) { color: #fff; border-color: #555; }
.sg-all:disabled { cursor: progress; opacity: 0.6; }
.sg-all:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* What's shown: checkboxes, lit (and ticked) when on; the captions' apart. */
.sg-show { flex: none; height: 28px; padding: 0 2px 0 10px; display: inline-flex; align-items: center; gap: 2px; background: #161616; border: 1px solid #333; border-radius: 6px; }
.sg-show-lab { margin-right: 5px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6c6c70; }
.sg-check { position: relative; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #9a9a9a; border-radius: 4px; cursor: pointer; user-select: none; transition: color 0.12s, background-color 0.12s; }
.sg-check.titles { margin-left: 5px; }
.sg-check.titles::before { content: ''; position: absolute; left: -4px; top: 4px; bottom: 4px; width: 1px; background: #333; }
.sg-check:hover { color: #fff; background: #242424; }
.sg-check:has(input:checked) { color: var(--ui-accent-strong); }
.sg-check:has(input:disabled) { cursor: default; }
.sg-check:has(input:disabled):hover { background: none; }
.sg-check:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.sg-check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sg-box { width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #555; border-radius: 3px; transition: background-color 0.12s, border-color 0.12s; }
.sg-box svg { width: 10px; height: 10px; fill: none; stroke: var(--ui-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sg-check:hover .sg-box { border-color: #888; }
.sg-check input:checked + .sg-box { background: var(--ui-accent); border-color: var(--ui-accent); }
.sg-check input:checked + .sg-box svg { opacity: 1; }
.sg-ratio { width: 15px; height: 9px; border: 1.3px solid currentColor; border-radius: 2px; opacity: 0.8; }
.sg-check.tall .sg-ratio { width: 8px; height: 13px; }
/* Captions: three lines, like a caption under a picture. */
.sg-check.titles .sg-ratio { width: 13px; height: 9px; border: 0; border-radius: 0; background: linear-gradient(currentColor 0 0) 0 0 / 100% 1.3px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 70% 1.3px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 85% 1.3px no-repeat; }

.sg-list { max-width: 2000px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 18px; }
.sg-list.pair { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 30px 22px; }
.sg-list.tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.sg-card { position: relative; min-width: 0; }
/* Captions off: just the stills, tighter. */
.sg-list.bare { gap: 16px; }
.sg-list.bare .sg-cap { display: none; }
.sg-pics { display: grid; gap: 6px; }
/* 16/9 : 9/16 of what's left after the gap: both stills one height. */
.pair .sg-pics { grid-template-columns: 256fr 81fr; }
.sg-shot { position: relative; min-width: 0; }
.sg-shot[hidden] { display: none; }
.sg-open { display: block; width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.sg-open:focus-visible { outline: none; }
.sg-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #161616; border-radius: 6px; box-shadow: 0 0 0 1px #ffffff17; transition: box-shadow 0.18s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tall .sg-pic { aspect-ratio: 9 / 16; }
.sg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sg-shot.ready img { opacity: 1; }
.sg-open:hover .sg-pic { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ui-accent-strong), 0 14px 34px #000c; }
.sg-open:hover img { transform: scale(1.035); }
.sg-open:focus-visible .sg-pic { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--ui-accent); }
/* The playhead's scene: its stills ringed, "Now" by its name. */
.sg-card.now .sg-pic { box-shadow: 0 0 0 2px var(--ui-accent); }
.sg-card.now .sg-open:focus-visible .sg-pic { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--ui-accent); }
/* Format chip and play mark, on hover / focus. */
.sg-fmt { position: absolute; left: 7px; top: 7px; padding: 4px 5px 3px; font: 500 10px / 1 'JetBrains Mono', monospace; letter-spacing: 0.04em; color: var(--paper); background: #0b0b0cb8; border-radius: 3px; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.sg-play { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; display: grid; place-items: center; color: var(--ui-ink); background: var(--ui-accent); border-radius: 50%; box-shadow: 0 6px 24px #0009; opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.18s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.tall .sg-play { width: 40px; height: 40px; }
.sg-play svg { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; }
.sg-open:hover .sg-play, .sg-open:focus-visible .sg-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sg-open:hover .sg-fmt, .sg-open:focus-visible .sg-fmt { opacity: 1; }
/* The scene's frames (frames sprite), along the bottom of the 16:9 on hover. */
.sg-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 22px 7px 7px; background: linear-gradient(#0b0b0c00, #0b0b0cd9 60%); opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.sg-strip i { flex: 1; aspect-ratio: 16 / 9; background-repeat: no-repeat; border-radius: 2px; box-shadow: 0 0 0 1px #0b0b0c; }
.stripped .sg-open:hover .sg-strip { opacity: 1; transform: none; }

/* A click on the caption opens the player's format (or the one shown). */
.sg-cap { margin-top: 10px; display: flex; align-items: baseline; gap: 9px; min-width: 0; cursor: pointer; }
.sg-tag { flex: none; font: 700 11px / 1 'JetBrains Mono', monospace; letter-spacing: 0.04em; color: var(--yellow); }
.sg-name { flex: 0 1 auto; min-width: 0; overflow: hidden; font: 400 20px / 1.05 Anton, sans-serif; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.sg-now { display: none; flex: none; align-self: center; padding: 3px 5px 2px; font: 700 9.5px / 1 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink); background: var(--ui-accent); border-radius: 3px; }
.sg-card.now .sg-now { display: block; }
.sg-tc { flex: none; margin-left: auto; font: 400 11px / 1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: #8a8a8e; }

/* Download: the full-size still, top right of each picture. */
.sg-dl { position: absolute; right: 7px; top: 7px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--paper); background: #0b0b0cb8; border: 1px solid #ffffff2e; border-radius: 6px; opacity: 0; transition: opacity 0.15s, color 0.12s, background-color 0.12s, border-color 0.12s; }
.sg-dl[hidden] { display: none; }
.sg-dl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sg-shot:hover .sg-dl, .sg-shot:focus-within .sg-dl { opacity: 1; }
.sg-dl:hover { color: var(--ui-ink); background: var(--ui-accent); border-color: var(--ui-accent); }
.sg-dl:focus-visible { opacity: 1; outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (hover: none) { .sg-dl { opacity: 1; } }

/* Opening: the cards come in, in film order. */
.sg.in .sg-card { animation: sg-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 16ms); }
@keyframes sg-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .sg.in .sg-card { animation: none; }
  .sg-pic, .sg-pic img, .sg-play, .sg-strip { transition: none; }
}

@media (max-width: 640px) {
  .sg { padding: 16px 12px 44px; }
  .sg-bar { gap: 8px; }
  .sg-sum, .sg-show-lab, .sg-all small { display: none; }
  .sg-show { padding: 0 2px; }
  .sg-check { padding: 0 6px; gap: 5px; }
  .sg-check .sg-ratio { display: none; }
  .sg-all { margin-left: auto; }
  .sg-list, .sg-list.tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .sg-list.pair { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sg-list.bare { gap: 10px; }
  .sg-cap { margin-top: 7px; gap: 6px; }
  .sg-name { font-size: 15px; }
  .pair .sg-name { font-size: 18px; }
  .sg-tc { font-size: 10px; }
  .sg-play, .tall .sg-play { width: 38px; height: 38px; }
  .sg-dl { width: 28px; height: 28px; right: 6px; top: 6px; }
}