/* ==========================================================================
   onebrief-player.css · the Onebrief film player · v1.0 · 29 September 2026
   JasonWalker.design · assets/js/onebrief-player.js draws it; the case study and
   both website concepts load it after assets/css/onebrief-type.css.
   Full window, Command ground, the captions in their own band under the picture.
   ========================================================================== */
html.ob-lock, html.ob-lock body{ overflow:hidden; }
/* every rule is scoped to #ob-player: the portfolio shell makes type inherit outside .project-content, and the dialog sits outside it */
#ob-player *{ font-family:inherit; }
#ob-player{ font-family:var(--ob-body); width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--ob-command); color:var(--ob-mineral); overflow:hidden; }
#ob-player::backdrop{ background:rgba(8,18,24,.94); }
#ob-player .ob-player__frame{ display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; width:100%; height:100%; background:var(--ob-command); }
#ob-player .ob-player__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px clamp(12px,2.4vw,28px); border-bottom:1px solid rgba(237,241,243,.12); }
#ob-player .ob-player__title{ margin:0; color:var(--ob-mineral); max-width:none; font:900 clamp(24px,2.4vw,34px)/1 var(--ob-display); text-transform:uppercase; letter-spacing:.01em; }
#ob-player .ob-player__close{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; background:transparent; color:var(--ob-mineral); border:1px solid rgba(237,241,243,.3); cursor:pointer;
  font:400 12px/1 var(--ob-mono); letter-spacing:.12em; text-transform:uppercase; }
#ob-player .ob-player__close:hover{ border-color:var(--ob-mineral); }
#ob-player .ob-player__close span{ font:400 18px/1 var(--ob-body); }
#ob-player .ob-player__stage{ position:relative; min-height:0; overflow:hidden; background:#000; cursor:pointer; }
#ob-player .ob-player__stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#000; }
#ob-player .ob-player__stage::after{ content:''; position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%;
  background:rgba(8,18,24,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23EDF1F3'/%3E%3C/svg%3E") 56% 50%/34px no-repeat;
  opacity:0; transition:opacity .2s; pointer-events:none; }
#ob-player .ob-player__frame:not(.is-playing) .ob-player__stage::after{ opacity:1; }
#ob-player .ob-player__cc{ margin:0; max-width:none; min-height:calc(2 * 1.35em + 20px); padding:10px clamp(16px,4vw,56px); text-align:center; white-space:pre-line;
  font:500 clamp(16px,1.5vw,22px)/1.35 var(--ob-body); font-variation-settings:'wght' 500; color:var(--ob-mineral); background:var(--ob-command);
  display:flex; align-items:center; justify-content:center; }
#ob-player.cc-off .ob-player__cc{ min-height:0; padding:0; }
#ob-player .ob-player__bar{ display:flex; align-items:center; gap:clamp(6px,1vw,14px); padding:10px clamp(12px,2.4vw,28px) max(12px, env(safe-area-inset-bottom)); border-top:1px solid rgba(237,241,243,.12); }
#ob-player .ob-player__bar button{ flex:none; display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 10px; background:transparent; color:var(--ob-mineral);
  border:1px solid rgba(237,241,243,.26); cursor:pointer; font:400 12px/1 var(--ob-mono); letter-spacing:.1em; }
#ob-player .ob-player__bar button:hover{ border-color:var(--ob-mineral); }
#ob-player .ob-player__bar button[aria-pressed="true"][data-act="cc"]{ background:var(--ob-mineral); color:var(--ob-command); border-color:var(--ob-mineral); }
#ob-player .ob-player__bar svg{ width:18px; height:18px; fill:currentColor; }
#ob-player .ob-player__bar [data-act="play"] .i-pause, #ob-player .ob-player__bar [data-act="play"].is-playing .i-play{ display:none; }
#ob-player .ob-player__bar [data-act="play"].is-playing .i-pause{ display:block; }
#ob-player .ob-player__bar [data-act="mute"] .i-off, #ob-player .ob-player__bar [data-act="mute"].is-muted .i-on{ display:none; }
#ob-player .ob-player__bar [data-act="mute"].is-muted .i-off{ display:block; }
#ob-player .ob-t{ flex:none; font:400 12.5px/1 var(--ob-mono); letter-spacing:.04em; color:rgba(237,241,243,.8); font-variant-numeric:tabular-nums; min-width:4ch; text-align:center; }
#ob-player .ob-range{ -webkit-appearance:none; appearance:none; height:44px; background:transparent; cursor:pointer; margin:0; --p:0%; }
#ob-player .ob-range[data-act="seek"]{ flex:1 1 auto; min-width:60px; }
#ob-player .ob-range[data-act="vol"]{ flex:0 0 clamp(64px,8vw,110px); }
#ob-player .ob-range::-webkit-slider-runnable-track{ height:3px; background:linear-gradient(90deg, var(--ob-signal) var(--p), rgba(237,241,243,.24) var(--p)); }
#ob-player .ob-range::-moz-range-track{ height:3px; background:rgba(237,241,243,.24); }
#ob-player .ob-range::-moz-range-progress{ height:3px; background:var(--ob-signal); }
#ob-player .ob-range::-webkit-slider-thumb{ -webkit-appearance:none; width:4px; height:20px; margin-top:-8.5px; background:var(--ob-mineral); border:0; border-radius:0; }
#ob-player .ob-range::-moz-range-thumb{ width:4px; height:20px; background:var(--ob-mineral); border:0; border-radius:0; }
#ob-player .ob-range:focus-visible{ outline:2px solid var(--ob-signal); outline-offset:2px; }
#ob-player :focus-visible{ outline:2px solid var(--ob-signal); outline-offset:2px; }
#ob-player.is-full .ob-player__top{ display:none; }
@media (max-width:620px){
#ob-player .ob-range[data-act="vol"], #ob-player .ob-t[data-dur]{ display:none; }
#ob-player .ob-player__bar{ gap:6px; }
}

@media (prefers-reduced-motion:reduce){ .ob-player__stage::after{ transition:none; } }