/* Playground Demo — player.css
   The card's video player (static/js/player.js): the landing page's
   player, landing.css §modals, in a card. The controls are the page's
   own, in a bar under the picture — play, a scrubber, the time, sound and
   full screen — so nothing dims the cut, and one small disc sits in the
   middle while the cut is paused. The bar is cut to the room it has (a
   container query on the player): a card gets the compact bar and the
   time played, a block in the Scenes box the length too, the whole
   screen the page's own bar, and a narrow square in that box keeps the
   buttons and drops the times. Class prefix: dm-player-. */

.dm-player { position:relative; container-type:inline-size; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); overflow:hidden; }
/* The well is the cut's own shape (cards.js sizes it from the picture),
   so the cut fills it edge to edge; the corners are the player's. */
.dm-player .pg-prod-media { border-radius:0; background:#000; box-shadow:none; }
.dm-player-well { cursor:var(--cur-pointer); }
.dm-player-well video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.dm-player-badge { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:rgba(17,19,24,.72); color:#fff; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity var(--t); }
.dm-player-badge svg { width:18px; height:18px; margin-left:2px; }
.dm-player-well.is-paused .dm-player-badge { opacity:1; }

.dm-player-bar { display:flex; align-items:center; gap:6px; padding:6px 8px; border-top:1px solid var(--border); background:var(--surface);
  user-select:none; -webkit-user-select:none; }
.dm-player-btn { flex:none; width:28px; height:28px; padding:0; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); cursor:var(--cur-pointer);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.dm-player-btn:hover { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-tint-2); }
.dm-player-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.dm-player-btn svg { width:15px; height:15px; display:block; }
.dm-player-btn.is-primary { color:#fff; background:var(--brand); border-color:var(--brand); }
.dm-player-btn.is-primary:hover { color:#fff; background:var(--brand-hover); border-color:var(--brand-hover); }
.dm-player-btn .dm-ico-pause, .dm-player-btn .dm-ico-muted, .dm-player-btn .dm-ico-exit { display:none; }
.dm-player.is-playing .dm-ico-play, .dm-player.is-muted .dm-ico-sound, .dm-player.is-full .dm-ico-enter { display:none; }
.dm-player.is-playing .dm-ico-pause, .dm-player.is-muted .dm-ico-muted, .dm-player.is-full .dm-ico-exit { display:block; }
.dm-player-time { flex:none; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); text-align:center; font-variant-numeric:tabular-nums; }
.dm-player-dur { display:none; }
.dm-player-seek { flex:1; min-width:24px; height:20px; margin:0; -webkit-appearance:none; appearance:none; background:transparent;
  cursor:var(--cur-pointer); --dm-p:0%; }
.dm-player-seek::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(90deg, var(--brand) var(--dm-p), var(--surface-4) var(--dm-p)); }
.dm-player-seek::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:var(--sh-2); }
.dm-player-seek::-moz-range-track { height:4px; border-radius:2px; background:var(--surface-4); }
.dm-player-seek::-moz-range-progress { height:4px; border-radius:2px; background:var(--brand); }
.dm-player-seek::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:var(--sh-2); }
.dm-player-seek:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }

/* The length beside the scrubber where it fits: a block in the Scenes box. */
@container (min-width: 260px) {
  .dm-player-dur { display:block; }
}
/* The page's own bar where there is room for it: the whole screen, a wide block. */
@container (min-width: 360px) {
  .dm-player-bar { gap:10px; padding:8px 12px; }
  .dm-player-btn { width:32px; height:32px; }
  .dm-player-btn svg { width:16px; height:16px; }
  .dm-player-time { min-width:38px; font-size:12px; }
  .dm-player-seek { min-width:60px; }
  .dm-player-badge { width:56px; height:56px; margin:-28px 0 0 -28px; }
  .dm-player-badge svg { width:22px; height:22px; margin-left:3px; }
}
/* A narrow square (a portrait block in the Scenes box on a phone) keeps the buttons and drops the times. */
@container (max-width: 199px) {
  .dm-player-bar { gap:5px; padding:5px 6px; }
  .dm-player-btn { width:26px; height:26px; }
  .dm-player-time { display:none; }
}

/* Full screen is the player itself, so the bar stays and only the picture grows. */
.dm-player.is-full { display:flex; flex-direction:column; width:100%; height:100%; border:0; border-radius:0; background:#000; }
.dm-player.is-full .dm-player-well { flex:1; min-height:0; aspect-ratio:auto !important; }