/* =========================================================================
   Blueprint — a Video.js v10 skin drawn like a technical drawing.
   Navy drafting sheet, cyan linework, one redline accent.
   Public properties (same as the packaged skins):
     --media-accent-color, --media-accent-text-color, --media-border-color,
     --media-border-radius, --media-font-family, --media-object-fit,
     --media-object-position
   ========================================================================= */

.bp {
  /* public tokens */
  --bp-accent: var(--media-accent-color, #ff8f3f);
  --bp-accent-ink: var(--media-accent-text-color, #1a0d00);
  --bp-line: var(--media-border-color, rgb(140 205 255 / 0.55));
  --bp-radius: var(--media-border-radius, 2px);
  --bp-font: var(--media-font-family, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);

  /* private tokens */
  --bp-ink: #eef7ff;            /* text + icons */
  --bp-ink-dim: #b9d4ec;        /* secondary text */
  --bp-cyan: #8ccdff;           /* linework */
  --bp-paper: rgb(8 28 52 / 0.9);   /* control surfaces */
  --bp-paper-solid: #0a223f;
  --bp-grid: rgb(140 205 255 / 0.09);
  --bp-ring: var(--bp-accent);
  --bp-stroke: 1.75px;
  --bp-target: 44px;            /* button size */
  --bp-gap: 6px;
  --bp-pad: 14px;
  --bp-fast: 120ms;             /* motion tokens: collapse under reduced motion */
  --bp-med: 220ms;
  --bp-ease: cubic-bezier(.2, .7, .2, 1);

  position: relative;
  display: block;
  container-type: inline-size;
  container-name: bp;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  color: var(--bp-ink);
  background: #071629;
  border-radius: var(--bp-radius);
  font-family: var(--bp-font);
  font-size: 13px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.bp > video,
.bp-poster,
.bp-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
}
.bp-poster { z-index: 1; pointer-events: none; }
.bp-poster:not([data-visible]) { display: none; }

/* ---------- icons ---------- */
.bp-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bp-stroke);
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex: none;
}
.bp-icon .bp-icon-fill { fill: currentColor; }
.bp-icon .bp-icon-knockout { stroke: var(--bp-paper-solid); }

/* ---------- controls layer ---------- */
.bp-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.bp-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition: opacity var(--bp-med) var(--bp-ease), transform var(--bp-med) var(--bp-ease);
}
.bp-content > media-tooltip-group { display: contents; }
.bp-top { grid-row: 1; }
.bp-center { grid-row: 2; }
.bp-panel { grid-row: 3; align-self: end; }

/* bottom scrim keeps the panel edge readable over bright footage */
.bp-controls::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(to top, rgb(4 14 28 / 0.75), rgb(4 14 28 / 0));
  transition: opacity var(--bp-med) var(--bp-ease);
}

/* idle: hide calmly; any keyboard focus inside brings everything back */
.bp-controls:not([data-visible]):not(:has(:focus-visible)) .bp-content,
.bp-controls:not([data-visible]):not(:has(:focus-visible))::before,
.bp-controls:not([data-visible]):not(:has(:focus-visible)) .bp-frame {
  opacity: 0;
}
.bp-controls:not([data-visible]):not(:has(:focus-visible)) .bp-content {
  transform: translateY(6px);
}
.bp-controls:not([data-visible]):not(:has(:focus-visible)) .bp-content * {
  pointer-events: none !important;
}

/* registration marks in the corners, like a drawing sheet */
.bp-frame { position: absolute; inset: 10px; transition: opacity var(--bp-med) var(--bp-ease); }
.bp-mark {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--bp-cyan);
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.6));
}
.bp-mark-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.bp-mark-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.bp-mark-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.bp-mark-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- buttons ---------- */
.bp-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: var(--bp-target);
  height: var(--bp-target);
  padding: 0;
  color: var(--bp-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bp-radius);
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  transition: background-color var(--bp-fast) linear, border-color var(--bp-fast) linear, transform var(--bp-fast) var(--bp-ease);
}
.bp-button > * { grid-area: 1 / 1; }
@media (hover: hover) and (pointer: fine) {
  .bp-button:hover { background: rgb(140 205 255 / 0.14); border-color: var(--bp-line); }
}
.bp-button:active { transform: scale(0.94); }

/* one focus ring for every focusable part: solid redline + offset */
.bp :focus-visible,
.bp-button:focus-visible {
  outline: 2px solid var(--bp-ring);
  outline-offset: 2px;
}

/* swap icon states in place */
.bp-play .bp-icon { opacity: 0; transition: opacity var(--bp-fast) linear; }
.bp-play[data-paused]:not([data-ended]) .bp-ic-play,
.bp-play:not([data-paused]):not([data-ended]) .bp-ic-pause,
.bp-play[data-ended] .bp-ic-restart { opacity: 1; }

.bp-mute .bp-icon { opacity: 0; transition: opacity var(--bp-fast) linear; }
.bp-mute[data-volume-level="off"] .bp-ic-off,
.bp-mute[data-muted] .bp-ic-off,
.bp-mute:not([data-muted])[data-volume-level="low"] .bp-ic-low,
.bp-mute:not([data-muted])[data-volume-level="medium"] .bp-ic-high,
.bp-mute:not([data-muted])[data-volume-level="high"] .bp-ic-high { opacity: 1; }

.bp-fs .bp-ic-fs-exit,
.bp-fs[data-fullscreen] .bp-ic-fs-enter { opacity: 0; }
.bp-fs[data-fullscreen] .bp-ic-fs-exit { opacity: 1; }
.bp-pip .bp-ic-pip-exit,
.bp-pip[data-pip] .bp-ic-pip-enter { opacity: 0; }
.bp-pip[data-pip] .bp-ic-pip-exit { opacity: 1; }
.bp-captions .bp-ic-cc-on,
.bp-captions[data-active] .bp-ic-cc-off { opacity: 0; }
.bp-captions[data-active] .bp-ic-cc-on { opacity: 1; }
.bp-captions[data-active]::after {
  /* state is never colour alone: an underline mark shows "on" */
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  background: var(--bp-accent);
}

.bp-button[data-hidden],
.bp-button[data-availability="unavailable"],
.bp-button[data-availability="unsupported"] { display: none; }

/* ---------- top: title block ---------- */
.bp-top {
  display: flex;
  justify-content: flex-start;
  padding: calc(var(--bp-pad) + 10px) calc(var(--bp-pad) + 12px) 0;
}
.bp-titleblock {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  background: var(--bp-paper);
  border: 1px solid var(--bp-line);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.25);
}
.bp-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  color: var(--bp-accent-ink);
  background: var(--bp-accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.bp-title {
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bp-title[data-hidden] { display: none; }

/* ---------- centre: target play + seek ---------- */
.bp-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 6cqi, 48px);
}
.bp-center-play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bp-paper);
  border: 1px solid var(--bp-line);
}
.bp-center-play .bp-icon { width: 34px; height: 34px; }
.bp-target {
  /* construction lines through the centre: a registration target */
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--bp-cyan), var(--bp-cyan)) center / 1px 100% no-repeat,
    linear-gradient(var(--bp-cyan), var(--bp-cyan)) center / 100% 1px no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 43px, #000 44px);
          mask: radial-gradient(circle, transparent 43px, #000 44px);
  opacity: 0.85;
}
.bp-center-seek {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bp-paper);
  border-color: var(--bp-line);
}
.bp-center-seek .bp-icon { width: 34px; height: 34px; stroke-width: 1.5px; }
.bp-seek-num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transform: translateY(1px);
}
/* while playing, the centre steps back so the picture stays clear */
.bp-controls:has(.bp-center-play:not([data-paused])) .bp-center { opacity: 0; }
.bp-controls:has(.bp-center-play:not([data-paused])) .bp-center * { pointer-events: none; }
.bp-center { transition: opacity var(--bp-med) var(--bp-ease); }

/* ---------- bottom panel ---------- */
.bp-panel {
  position: relative;
  margin: 0 var(--bp-pad) var(--bp-pad);
  padding: 4px 8px 4px;
  pointer-events: auto;
  background:
    linear-gradient(var(--bp-grid) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--bp-paper);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(6px);
}

/* the timeline is a dimension line: arrowheads, ticks, extension lines */
.bp-dimension {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
}
.bp-dim-end {
  position: relative;
  width: 10px;
  height: 22px;
  flex: none;
}
.bp-dim-end::before { /* extension line */
  content: "";
  position: absolute;
  top: 2px; bottom: 2px;
  width: 1px;
  background: var(--bp-cyan);
}
.bp-dim-end::after { /* arrowhead */
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border: 4px solid transparent;
  translate: 0 -50%;
}
.bp-dim-start::before { left: 0; }
.bp-dim-start::after { left: 1px; border-left: 0; border-right: 8px solid var(--bp-cyan); }
.bp-dim-finish::before { right: 0; }
.bp-dim-finish::after { right: 1px; border-right: 0; border-left: 8px solid var(--bp-cyan); }

.bp-slider {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 32px;          /* tall hit area, thin visible line */
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
.bp-track {
  position: relative;
  width: 100%;
  height: 8px;
}
.bp-ticks {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--bp-cyan), var(--bp-cyan)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--bp-cyan) 0 1px, transparent 1px 10%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(140 205 255 / 0.5) 0 1px, transparent 1px 2%) 0 2px / 100% 4px no-repeat;
}
.bp-buffer,
.bp-fill {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.bp-buffer {
  width: var(--media-slider-buffer);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--bp-ink-dim) 0 4px, transparent 4px 7px);
}
.bp-fill {
  width: var(--media-slider-fill);
  height: 4px;
  background: var(--bp-accent);
  transition: height var(--bp-fast) var(--bp-ease);
}
.bp-slider[data-interactive] .bp-fill { height: 6px; }
.bp-slider[data-dragging] .bp-fill { width: var(--media-slider-pointer); }

.bp-thumb {
  position: absolute;
  left: var(--media-slider-fill);
  width: 18px;
  height: 18px;
  translate: -50% 0;
  border: 2px solid var(--bp-accent);
  border-radius: 50%;
  background:
    linear-gradient(var(--bp-accent), var(--bp-accent)) center / 2px 100% no-repeat,
    linear-gradient(var(--bp-accent), var(--bp-accent)) center / 100% 2px no-repeat,
    var(--bp-paper-solid);
  box-shadow: 0 0 0 3px rgb(8 28 52 / 0.8);
  transition: scale var(--bp-fast) var(--bp-ease);
}
.bp-slider[data-interactive] .bp-thumb { scale: 1.15; }
.bp-slider[data-dragging] .bp-thumb { left: var(--media-slider-pointer); }

/* hover callout: a leader line up to a dimension label */
.bp-preview {
  position: absolute;
  bottom: 100%;
  left: var(--media-slider-pointer);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bp-fast) linear;
}
.bp-slider[data-pointing] .bp-preview,
.bp-slider[data-dragging] .bp-preview { opacity: 1; }
.bp-preview-value {
  order: -1;
  padding: 4px 8px;
  color: var(--bp-ink);
  background: var(--bp-paper-solid);
  border: 1px solid var(--bp-cyan);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bp-leader {
  width: 1px;
  height: 14px;
  background: var(--bp-cyan);
}

/* control row */
.bp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-gap);
}
.bp-group {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* time reads like a title-block cell */
.bp-time {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  margin-left: 6px;
  border: 1px solid var(--bp-line);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bp-time > * { display: inline-flex; align-items: center; padding: 0 8px; }
.bp-time-key {
  color: var(--bp-ink-dim);
  border-right: 1px solid var(--bp-line);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.bp-time-sep { padding: 0; color: var(--bp-ink-dim); }
.bp-time-duration { color: var(--bp-ink-dim); }

/* playback rate as the drawing's scale */
.bp-rate {
  min-width: 92px;
  gap: 6px;
  grid-auto-flow: column;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bp-rate > * { grid-area: auto; }
.bp-rate-key { color: var(--bp-ink-dim); font-size: 10px; letter-spacing: 0.1em; }
.bp-rate::after { content: "1:" attr(data-rate); }

/* ---------- popups: tooltips and volume ---------- */
.bp-popup {
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--bp-ink);
  background: var(--bp-paper-solid);
  border: 1px solid var(--bp-cyan);
  border-radius: var(--bp-radius);
  font-family: var(--bp-font);
  transition: opacity var(--bp-fast) linear, translate var(--bp-fast) var(--bp-ease);
}
/* popups are native popovers: keep them out of layout until open */
.bp-popup[popover]:not(:popover-open),
.bp-popup:not([data-open]):not([data-ending-style]) { display: none; }
.bp-popup[data-starting-style],
.bp-popup[data-ending-style] { opacity: 0; translate: 0 4px; }

.bp-tooltip {
  --media-tooltip-side-offset: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}
.bp-tooltip-key {
  padding: 1px 5px;
  color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line);
  font-size: 10px;
}
.bp-tooltip-key:empty { display: none; }

.bp-volume {
  --media-popover-side-offset: 12px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px 12px;
}
.bp-volume-label { color: var(--bp-ink-dim); font-size: 9px; letter-spacing: 0.12em; }
.bp-vslider {
  position: relative;
  display: flex;
  justify-content: center;
  width: 32px;
  height: 104px;
  cursor: pointer;
  touch-action: none;
}
.bp-vtrack {
  position: relative;
  width: 8px;
  height: 100%;
  background:
    linear-gradient(var(--bp-cyan), var(--bp-cyan)) 50% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(0deg, var(--bp-cyan) 0 1px, transparent 1px 10%) 0 0 / 100% 100% no-repeat;
}
.bp-vfill {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: var(--media-slider-fill);
  translate: -50% 0;
  background: var(--bp-accent);
}
.bp-vthumb {
  position: absolute;
  bottom: var(--media-slider-fill);
  width: 16px;
  height: 16px;
  translate: 0 50%;
  border: 2px solid var(--bp-accent);
  border-radius: 50%;
  background: var(--bp-paper-solid);
}

/* ---------- buffering, indicators, error ---------- */
.bp-buffering {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--bp-cyan);
}
.bp-buffering:not([data-visible]) { display: none; }
.bp-buffering .bp-icon {
  width: 64px;
  height: 64px;
  stroke-width: 1.25px;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.7));
  animation: bp-spin 1.6s linear infinite;
}
@keyframes bp-spin { to { rotate: 1turn; } }

.bp-indicators {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.bp-indicator {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--bp-ink);
  background: var(--bp-paper);
  border: 1px solid var(--bp-cyan);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--bp-fast) linear, scale var(--bp-fast) var(--bp-ease);
}
.bp-indicator:not([data-open]) { opacity: 0; }
.bp-indicator[data-starting-style],
.bp-indicator[data-ending-style] { opacity: 0; scale: 0.96; }
.bp-seek-indicator[data-direction="backward"] .bp-seek-chevron { rotate: 180deg; }
.bp-indicator-gauge {
  position: relative;
  width: 80px;
  height: 6px;
  border: 1px solid var(--bp-cyan);
}
.bp-indicator-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--media-volume-fill, 0%);
  background: var(--bp-accent);
}

.bp-dialog-backdrop { position: absolute; inset: 0; z-index: 4; background: rgb(4 14 28 / 0.75); }
.bp-dialog {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  translate: -50% -50%;
  display: grid;
  gap: 10px;
  justify-items: start;
  width: min(420px, calc(100% - 32px));
  padding: 16px;
  color: var(--bp-ink);
  background: var(--bp-paper-solid);
  border: 1px solid var(--bp-cyan);
  font-family: var(--bp-font);
}
.bp-dialog:not([data-open]),
media-error-dialog:not([data-open]) .bp-dialog-backdrop { display: none; }
.bp-dialog-title { font-weight: 700; letter-spacing: 0.04em; }
.bp-dialog-description { color: var(--bp-ink-dim); font-size: 12px; line-height: 1.5; }
.bp-dialog-close { padding: 0 14px; border-color: var(--bp-line); justify-self: end; }

/* ---------- captions sit above the panel ---------- */
.bp video::cue {
  color: #fff;
  background: rgb(4 14 28 / 0.85);
  font-family: var(--bp-font);
  font-size: 0.95em;
}

/* ---------- responsive (container queries) ---------- */
@container bp (max-width: 640px) {
  .bp { --bp-pad: 10px; --bp-target: 40px; }
  .bp-rate { min-width: 64px; }
  .bp-rate-key { display: none; }
  .bp-time-key { display: none; }
  .bp-center-play { width: 72px; height: 72px; }
  .bp-target { -webkit-mask: radial-gradient(circle, transparent 37px, #000 38px); mask: radial-gradient(circle, transparent 37px, #000 38px); }
  .bp-frame { inset: 6px; }
  .bp-top { padding: calc(var(--bp-pad) + 6px) calc(var(--bp-pad) + 8px) 0; }
}
@container bp (max-width: 480px) {
  .bp { --bp-target: 40px; --bp-gap: 2px; }
  .bp-pip { display: none; }
  .bp-time-sep, .bp-time-duration { display: none; }
  .bp-center-seek { width: 48px; height: 48px; }
  .bp-tag { display: none; }
  .bp-mark { width: 12px; height: 12px; }
  .bp-dim-end { width: 8px; }
}
@container bp (max-width: 360px) {
  .bp-rate { display: none; }
  .bp-top { display: none; }
  .bp-center-seek { display: none; }
  .bp-panel { margin: 0 6px 6px; padding: 2px 4px; }
}
@container bp (min-width: 900px) {
  .bp { font-size: 14px; --bp-pad: 18px; }
  .bp-center-play { width: 96px; height: 96px; }
  .bp-target { -webkit-mask: radial-gradient(circle, transparent 49px, #000 50px); mask: radial-gradient(circle, transparent 49px, #000 50px); }
}

/* fullscreen: use the whole screen, keep the picture letterboxed */
.bp:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .bp { --bp-fast: 0ms; --bp-med: 0ms; }
  .bp-buffering .bp-icon { animation-duration: 6s; }
  .bp-controls:not([data-visible]) .bp-content { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bp { --bp-paper: #0a223f; }
  .bp-panel { backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .bp { --bp-line: #cfe9ff; --bp-ink-dim: #e1efff; --bp-paper: #061a31; }
}
@media (forced-colors: active) {
  .bp-icon { stroke: ButtonText; }
  .bp-fill, .bp-vfill, .bp-indicator-fill { background: Highlight; }
  .bp-thumb, .bp-vthumb { border-color: Highlight; }
  .bp-panel, .bp-titleblock, .bp-popup, .bp-time { border-color: CanvasText; }
}