/* ─────────────────────────────────────────────────────────────────────────────
   Modal chrome, normalised across the four media modals.

   The site grew five modal implementations that share no code: .bo-pipe-lb and
   .cpc-lb inline in _home.html, and .bo-lb + .bp-modal duplicated verbatim in
   21 portfolio files. Each brought its own close button, and mobile-fix.css had
   been correcting them one selector at a time until they disagreed — three were
   pushed OUTSIDE the panel corner, the fourth was pulled INSIDE it.

   modal-ui.js relocates each close button out of its panel and stamps .bo-mx on
   it and .bo-modal-ui on the root; everything here hangs off those two classes,
   so nothing applies until the relocation has actually happened.

   .bo-ob (onboarding) is deliberately not included. It is a form rather than a
   media card, its body already scrolls correctly, and it is the only modal with
   role="dialog", aria-modal and a focus trap.
   ───────────────────────────────────────────────────────────────────────────── */

.bo-modal-ui {
  /* the panel is centred, the close pill sits under it, both inside the safe area */
  flex-direction: column !important;
  gap: var(--bo-mx-gap) !important;

  --bo-mx-h:   46px;
  --bo-mx-gap: 14px;
}

/* ══ THE PANEL ════════════════════════════════════════════════════════════════
   Height is taken from the root's own content box (100%), not from a second dvh
   calculation. The root is position:fixed inset:0 with safe-area padding, so its
   content box is already "the visible area minus the gutters" — subtracting dvh
   again is what pushed the old panel past the top of the screen and took the
   close button with it. */
.bo-modal-ui > .bo-lb__box,
.bo-modal-ui > .cpc-lb__box,
.bo-modal-ui > .bo-pipe-lb__box,
.bo-modal-ui > .bp-modal__card {
  max-height: calc(100% - var(--bo-mx-h) - var(--bo-mx-gap)) !important;
  /* min() with 100% as well as vw: 94vw is 366.6px inside a 366px content box at
     390px, which is a hair of horizontal overflow on its own. */
  max-width: 100% !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bo-modal-ui > .bo-lb__box { height: auto !important; }

/* The close button is no longer a child of the scroller, so the box has nothing
   overhanging it and no reason to scroll sideways. Hold it to that. */
.bo-modal-ui > .bo-lb__box,
.bo-modal-ui > .cpc-lb__box,
.bo-modal-ui > .bo-pipe-lb__box,
.bo-modal-ui > .bp-modal__card { overflow-x: hidden !important; }

/* The pipeline panel stacks a clip over a long text card. The card is what
   scrolls; _home.html:986 sets overflow:visible for phones but mobile-fix.css:19
   clamps the height unconditionally and wins on order, so it was cropped rather
   than scrollable. */
.bo-modal-ui .bo-pipe-lb__card {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* the thumbnail rail keeps its own swipe from chaining into the panel */
.bo-modal-ui .bo-pipe-lb__strip { overscroll-behavior-x: contain; }

/* the placeholder card had neither a height limit nor a scroller */
.bo-modal-ui > .bp-modal__card { overflow-y: auto !important; }

/* ══ THE CLOSE PILL ═══════════════════════════════════════════════════════════ */
.bo-mx {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto !important;
  height: var(--bo-mx-h, 46px) !important;
  padding: 0 22px 0 18px !important;
  border-radius: 999px !important;
  /* The site's own close red, the one the four __x discs already used. A
     translucent grey pill was legible but easy to skip past: this no longer sits
     in the top-right corner where the eye goes looking for a close, so it has to
     announce itself by colour instead of by position. The white ring keeps it
     readable against a pale video as well as the dimmed backdrop. */
  background: #e5342b !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  color: #fff !important;
  font: inherit;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1 !important;
  letter-spacing: -.01em;
  cursor: pointer;
  opacity: 1 !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 2px 10px rgba(229, 52, 43, .45);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
/* the buttons ship a bare "×" as their text; name the action next to it */
.bo-mx::after {
  content: "Close";
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}
.bo-mx:hover,
.bo-mx:focus-visible {
  background: #ff4a3d !important;
  border-color: #fff !important;
  transform: translateY(-1px);
}
/* white, not the accent: green on red reads as a defect rather than as focus */
.bo-mx:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bo-mx:active { transform: translateY(0); }

/* ══ THE VIDEO CONTROL BAR ════════════════════════════════════════════════════
   Native controls only ever appeared inside the three lightboxes; all 71 card
   videos already had none. They also collided with .bo-lb__loupe, which sits in
   the same bottom-right corner as the native full-screen button.

   Play/pause, a scrubbable bar, and expand. No time readout and no volume — the
   clips are short and silent. The bar is an <input type="range"> so that keyboard
   and assistive tech get real seeking without any extra code. */
.bov { position: relative; display: block; width: 100%; min-width: 0; }
.bo-lb__stage.bov-host { position: relative; }

.bov__ui {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 34px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 7, .55) 42%, rgba(6, 8, 7, .88));
  border-radius: 0 0 12px 12px;
  opacity: 1;
  transition: opacity .22s ease;
  pointer-events: auto;
}
/* on a pointer device the bar steps out of the way while the clip plays */
@media (hover: hover) {
  .bov.is-playing .bov__ui:not(:hover):not(:focus-within) { opacity: 0; }
}

.bov__b {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(10, 13, 12, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.bov__b:hover { background: rgba(12, 15, 14, .82); border-color: rgba(255, 255, 255, .5); }
.bov__b:active { transform: scale(.94); }
.bov__b:focus-visible { outline: 2px solid rgb(var(--jkd-accent-rgb, 0, 255, 133)); outline-offset: 2px; }
.bov__b svg { width: 13px; height: 13px; display: block; fill: currentColor; stroke: none; }
.bov__b--fs svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* one button, two glyphs — whichever the state does not want is hidden */
.bov__b .bov__pause,
.bov.is-playing .bov__b .bov__play { display: none; }
.bov.is-playing .bov__b .bov__pause { display: block; }

/* the scrubber. -webkit-slider-thumb and -moz-range-thumb cannot be combined in
   one rule: an unrecognised selector drops the whole block in the other engine. */
.bov__sk {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --bov-pct: 0%;
}
.bov__sk::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgb(var(--jkd-accent-rgb, 0, 255, 133)) var(--bov-pct),
    rgba(255, 255, 255, .26) var(--bov-pct));
}
.bov__sk::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .26); }
.bov__sk::-moz-range-progress { height: 4px; border-radius: 2px; background: rgb(var(--jkd-accent-rgb, 0, 255, 133)); }
.bov__sk::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 13px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.bov__sk::-moz-range-thumb {
  width: 13px; height: 13px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.bov__sk:focus-visible { outline: 2px solid rgb(var(--jkd-accent-rgb, 0, 255, 133)); outline-offset: 3px; }

/* ══ THE LOUPE IS A POINTER AFFORDANCE ════════════════════════════════════════
   .bo-lb__loupe is the site's own canvas magnifier, hover-revealed on desktop
   and pinned visible under 768px because touch has no hover. Magnification needs
   a cursor to aim it, so on touch it is not a feature, only an icon sitting on
   top of the video in the corner the controls want. */
@media (hover: none) {
  .bo-lb__loupe { display: none !important; }
}

/* ══ NARROW ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .bo-modal-ui { --bo-mx-h: 44px; --bo-mx-gap: 12px; }
  .bo-mx { font-size: 14px !important; padding: 0 20px 0 16px !important; }
  .bov__ui { gap: 9px; padding: 30px 10px 9px; }
  .bov__b { width: 32px; height: 32px; }
  .bov__b svg { width: 12px; height: 12px; }
}