/* pf-player.css — extracted from Pitchflow app.css; see pf-player.js */
/* ---- the video player -----------------------------------------------------
   Somesuch's own measurements (2026-08-29): a 48px bar carrying NO background,
   48px square buttons at 0.875, a 4px scrubber, 12px time. The gradient sits
   under the controls only - a slab across the picture is the one thing a
   player built for filmmakers must not do. Deliberately NOT themed: a film
   plays on black on every surface, light mode included, because the surround
   is part of how an image reads. */
.pf-player { position: relative; display: block; background: #000; line-height: 0; }
.pf-player video { display: block; width: 100%; height: auto; cursor: pointer; }
.pf-player:fullscreen { display: flex; align-items: center; justify-content: center; }
.pf-player:fullscreen video { max-height: 100vh; width: auto; }

.pf-pl-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  opacity: 1; transition: opacity 0.2s ease;
}
.pf-pl-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  display: flex; align-items: center; gap: 0;
  opacity: 1; transition: opacity 0.2s ease;
}
/* Idle = playing, pointer away. The chrome leaves; a hairline stays, so the
   film is uninterrupted but you never lose your place. */
.pf-player.is-idle .pf-pl-bar,
.pf-player.is-idle .pf-pl-scrim { opacity: 0; pointer-events: none; }
.pf-player.is-idle .pf-pl-track { height: 2px; }

.pf-pl-btn {
  width: 48px; height: 48px; flex: 0 0 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; color: #fff;
  opacity: 0.875; cursor: pointer; line-height: 1;
}
/* Scoped through .pf-player and restated for hover/focus: the global
   `button:hover:not(:disabled)` ties this at (0,2,1) and app.css order
   decided the fight - the play button went ACCENT ORANGE under the cursor
   on any page where that global lands later (Joseph, 2026-09-01,
   screenshot). Same battle the typeahead rows already fought at line ~1550;
   a film's controls never take a fill. */
.pf-player .pf-pl-btn,
.pf-player .pf-pl-btn:hover:not(:disabled),
.pf-player .pf-pl-btn:focus,
.pf-player .pf-pl-btn:active { background: none; border: 0; border-radius: 0; }
.pf-player .pf-pl-btn:hover { opacity: 1; }
/* Clicking play kept the browser's default focus ring on the button for the
   rest of the film. Keyboard users keep a ring; mouse clicks do not. */
.pf-player .pf-pl-btn:focus { outline: none; }
.pf-player .pf-pl-btn:focus-visible { outline: 1px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.pf-pl-time {
  /* 17px per Joe's edit of the player frame (141:15), up from the 12px
     first pass - he flagged the sizes on 2026-09-01. */
  font-size: 17px; color: #fff; opacity: 0.875; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 2px;
}
.pf-pl-gap { flex: 1 1 auto; }

/* Joe's two volume icons from the Figma player (141:610 / 141:617, 2026-09-01).
   Inline SVG on currentColor: the bar's buttons are white over the picture,
   and the muted state swaps the whole icon rather than dimming bars. */
.pf-pl-svg { width: 24px; height: 24px; display: block; color: #fff; }
/* display:block above beats the hidden attribute's display:none, so BOTH
   volume states rendered at once (Joseph, 2026-09-01) - the same
   [hidden]-vs-author-display collision as .pf-ta, recreated the same day it
   was fixed there. Restated with the attribute so hidden hides. */
.pf-pl-svg[hidden] { display: none; }

/* The one-press pill on a film that starts silent. Top-centre per the Slack
   note; small, dark, and gone the moment sound is on. */
.pf-pl-unmute {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 5; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(10,10,10,0.62); color: #fff; font-family: inherit;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em;
  border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
}
.pf-pl-unmute:hover { background: rgba(10,10,10,0.85); border-color: rgba(255,255,255,0.6); }
/* Deliberately EXEMPT from the idle-hide: while the film is muted this pill
   is the only thing saying so, and a visitor who never moves the pointer
   would otherwise watch the whole reel silent without knowing. It leaves by
   being pressed, not by timing out. */

.pf-pl-track {
  position: absolute; left: 0; right: 0; bottom: 48px; height: 4px;
  background: rgba(255,255,255,0.25); cursor: pointer; touch-action: none;
  transition: height 0.2s ease;
}
.pf-player.is-idle .pf-pl-track { bottom: 0; }
.pf-pl-track:focus-visible { outline: 2px solid var(--pf-player-accent, #F2F0EB); outline-offset: 2px; }
.pf-pl-buffered, .pf-pl-played {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
}
.pf-pl-buffered { background: rgba(255,255,255,0.4); }
.pf-pl-played { background: var(--pf-player-accent, #F2F0EB); }
/* Clip boundaries. A reel is several pieces in sequence and one unbroken bar
   would say otherwise. */
.pf-pl-segs { position: absolute; inset: 0; pointer-events: none; }
.pf-pl-segs i { position: absolute; top: 0; bottom: 0; width: 2px; background: #000; opacity: 0.55; }