/* Supersei — real product media (recordings of the app with sample data).
   Loops sit in a ProductFrame; they play only while on screen, carry a visible
   pause control, and stay on their poster under reduced motion. */

.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.pm-grid > .pm--wide { grid-column: 1 / -1; }
.pm { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; min-width: 0; }
/* long app URLs in the frame bar must not widen the grid on phones */
.pm__frame .ss-frame__url { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm__frame { position: relative; }
.pm__media { display: block; width: 100%; height: auto; background: var(--surface-sunk); }
.pm__title { margin: 0; color: var(--text-primary); }
.pm__text { margin: 0; color: var(--text-secondary); max-width: 60ch; }
.pm__toggle { position: absolute; inset-inline-end: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-band); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--band) 78%, transparent); color: var(--on-band); font: 500 13px/1 var(--font-sans); cursor: pointer; opacity: .85; transition: opacity var(--dur-fast); }
.pm__toggle:hover, .pm__toggle:focus-visible { opacity: 1; }
.pm__toggle:focus-visible { outline-color: var(--focus-band); }
.pm__toggle svg { width: 14px; height: 14px; }
.pm__note { margin: var(--space-4) 0 0; color: var(--text-tertiary); }
.pm-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.pm-chapter { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-secondary); font: 500 13px/1 var(--font-sans); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); }
.pm-chapter b { font: 500 11px/1 var(--font-mono); color: var(--brand-text); }
.pm-chapter:hover, .pm-chapter.is-active { border-color: var(--brand); background: var(--brand-tint); color: var(--text-primary); }
.pm-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
@media (max-width: 1020px) { .pm-films { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .pm-grid { grid-template-columns: minmax(0, 1fr); } }