/* Our own video controls (2026-10-02): /calls/<slug> and the testimonials
   player. Markup templates/_player_controls.php, behaviour player.js.

   The moments embed's look. TWO round-button sizes (Lucas, 2026-10-02),
   shared with the moments embed (moments.css reads the same values, with the
   same numbers as fallbacks where this file is not loaded):
     --cp-btn-l  full screen and the moments' share button
     --cp-btn-s  volume, CC and the − / + */
:root { --cp-btn-l: 50px; --cp-btn-s: 42px; --cp-edge: 10px; }
@media (max-width: 640px) { :root { --cp-btn-l: 42px; --cp-btn-s: 34px; --cp-edge: 6px; } }

.vp-frame { position: relative; }
.vp-frame.is-custom { container-type: inline-size; }
.vp-frame.is-custom video { cursor: pointer; }
.vp-frame.is-custom video:focus { outline: none; }
.vp-frame.is-custom video:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cp[hidden] { display: none; }

/* ---- round buttons ---- */
.cp-btn, .vp-cc {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--cp-btn-s); height: var(--cp-btn-s); padding: 0; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cp-btn:focus-visible, .vp-cc:focus-visible, .cp input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-btn:disabled { opacity: .3; cursor: default; }
.cp-btn.cp-fs { width: var(--cp-btn-l); height: var(--cp-btn-l); }
.cp-glyph { width: 52%; height: 52%; fill: currentColor; display: block; pointer-events: none; }

/* CC top left (both players, native controls too), green when on like the
   moments' sound button. */
.vp-cc {
  position: absolute; top: var(--cp-edge); left: var(--cp-edge); z-index: 3;
  font: 700 .95rem/1 var(--font-body, inherit); letter-spacing: .04em;
}
.vp-cc[aria-pressed="true"] { color: var(--alt-accent); box-shadow: inset 0 0 0 2px var(--alt-accent); }
@media (max-width: 640px) { .vp-cc { font-size: .85rem; } }

/* Sound and full screen top right; the volume slider opens to the left. */
.cp-top { position: absolute; top: var(--cp-edge); right: var(--cp-edge); z-index: 3; display: flex; align-items: center; gap: 8px; }
.cp-vol { display: flex; align-items: center; gap: 8px; }
.cp-sound.is-muted { color: rgb(var(--alt-text-rgb, 221 221 221) / .75); }
.cp-sound[aria-expanded="true"] { color: var(--alt-accent, #aaddaa); }
.cp-big[hidden] { display: none; }

/* ---- the bottom: seek bar, then "Playing <depth>" left, time and − / + right ---- */
.cp-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  padding: 18px var(--cp-edge) 0;
  /* A light shade behind the seek bar only (its 40px: padding + track)... */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)) top / 100% 40px no-repeat;
  pointer-events: none;
}
.cp-bar > * { pointer-events: auto; }
/* ...and under it a band at 75% black (2026-10-02): the recordings are
   Google Meet calls, whose bottom edge is busy with names and tiles, so the
   label and time get a steady backing. It grows out of the seek bar's shade
   over the 6px gap rather than starting on a hard edge. */
.cp-row {
  position: relative; display: flex; align-items: center; gap: 8px;
  align-self: stretch; justify-content: flex-end;
  margin: 0 calc(-1 * var(--cp-edge));
  padding: 2px var(--cp-edge) var(--cp-edge);
  background: rgba(0, 0, 0, .75);
}
.cp-row::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .75));
  pointer-events: none;
}
/* The moments counter's type (.mc-count): same weight and figures. No chip
   of their own - the band is the backing. */
.cp-time, .cp-dname {
  padding: .1em .4em; border-radius: 6px;
  font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap;
}
.cp-time { color: rgb(var(--alt-text-rgb, 221 221 221) / .85); font-size: clamp(16px, 3.4cqw, 26px); }
/* "Playing <depth>" under the bar on the left (2026-10-02), larger than the
   time: the depth is what the − / + change. It may carry the end-of-cut
   sentence or the resume offer instead (app.js), so it wraps. */
.cp-dname {
  margin-right: auto; min-width: 0; white-space: normal;
  color: var(--alt-accent, #aaddaa); font-size: clamp(18px, 4.2cqw, 32px);
}
.cp-dname.is-end { color: #fff; background: color-mix(in srgb, var(--alert, #c44) 55%, rgba(0, 0, 0, .55)); }
.cp-dname .resumebtn { font-size: .7em; vertical-align: middle; }
.cp-dname:empty { display: none; }
.cp-time.is-changed .cp-tot, .cp-dname.is-changed { animation: cp-flash 1.4s ease-out; }
@keyframes cp-flash { 0%, 40% { color: #fff; background: color-mix(in srgb, var(--accent, #4455BB) 80%, transparent); } }
/* − / +: small, with a thin green ring. */
.cp-btn.cp-depth {
  box-shadow: inset 0 0 0 1.75px color-mix(in srgb, var(--alt-accent, #aaddaa) 85%, transparent);
}
.cp-depth .cp-glyph { width: 60%; height: 60%; }

/* Range inputs: a thin track filled to --p in the accent, a round thumb. */
.cp input[type="range"] {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0;
  height: 22px; background: transparent; cursor: pointer;
}
.cp-seek { display: block; width: 100%; }
.cp input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--alt-accent, #aaddaa) var(--p, 0%), rgba(255, 255, 255, .35) var(--p, 0%));
}
.cp input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--alt-accent, #aaddaa) var(--p, 0%), rgba(255, 255, 255, .35) var(--p, 0%));
}
.cp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px;
  border: none; border-radius: 50%; background: #fff;
}
.cp input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: #fff; }
.cp input.cp-volr {
  width: 216px; height: var(--cp-btn-s); padding: 0 10px;
  border-radius: var(--radius-btn, 999px); background: rgba(0, 0, 0, .55);
}
.cp-volr[hidden] { display: none; }
@media (max-width: 640px) { .cp input.cp-volr { width: 162px; } }

/* ---- the bar fades while you watch ----
   Playing and untouched for a few seconds (player.js adds .is-idle): the seek
   bar sinks over many seconds to almost nothing. Any movement, touch, key or
   a pause brings it straight back. */
.cp-seek { transition: opacity .25s ease-out; }
.vp-frame.is-idle .cp-seek { opacity: .06; transition: opacity 12s ease-in; }

/* Waiting on the network after a seek: a small ring, centre. */
.vp-frame.is-waiting:not(.is-paused)::after {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: cp-spin .8s linear infinite; pointer-events: none;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

@media (hover: hover) and (pointer: fine) {
  .cp-btn, .vp-cc { opacity: .65; transition: opacity .15s ease-in-out; }
  .vp-frame:hover .cp-btn, .vp-frame:hover .vp-cc, .cp-btn:focus-visible, .vp-cc:focus-visible,
  .vp-cc[aria-pressed="true"] { opacity: 1; }
  .vp-frame:hover .cp-btn:disabled { opacity: .3; }
}

/* Full screen is the frame, so the controls come along. */
.vp-frame.is-custom:fullscreen { display: flex; align-items: center; width: 100%; height: 100%; background: #000; }
.vp-frame.is-custom:-webkit-full-screen { display: flex; align-items: center; width: 100%; height: 100%; background: #000; }
.vp-frame.is-custom:fullscreen video { height: 100%; aspect-ratio: auto; }
.vp-frame.is-custom:-webkit-full-screen video { height: 100%; aspect-ratio: auto; }

/* ---- the two optional bars around the video (2026-10-02) ----
   .vp-note-top over it - a remark about what is playing, e.g. a testimonial's
   "From the onboarding call →" - and .vp-note-bottom under it, text on the
   right - the call's "Playing TLDR — 6 of 82 min". Both are .skipnote for
   their look, and neither pops in or out, so the video and the controls
   under the pointer never jump.
   The TOP bar is simply always there, from the first paint: empty, it keeps
   one line's height. It never grows or folds (Lucas, 2026-10-02).
   The BOTTOM bar can fold: .vp-note + .is-collapsed folds it away, and
   taking the class off grows it back. */
.vp-note-top:empty::before { content: "\00a0"; }
.vp-note {
  max-height: 8em; overflow: hidden;
  transition: max-height .8s ease, padding .8s ease, opacity .6s ease, border-width .8s ease;
}
.vp-note.is-collapsed { max-height: 0; padding-block: 0; opacity: 0; border-width: 0; }
.vp-note-bottom { text-align: right; border-bottom: 0; border-top: 1px solid rgb(var(--alt-text-rgb) / .1); }
.vp-note-bottom.is-end { border-top-color: var(--alert); }

/* The bottom bar is set aside on our own controls (Lucas, 2026-10-02): what
   it said is in the label left of the time. Its code stays. */
.stage.has-cp .vp-note-bottom { display: none; }