/* ============================================================
   The one video player of the portal.

   The same shell plays a file this server holds, a YouTube link and
   a Vimeo link, so a learner is given one set of controls wherever a
   video appears — the class recording page, the office library, the
   panels. The service's own chrome stays switched off; everything on
   screen below is ours.

   Two sizes: the page player (default) and .vplayer--card, the small
   one a library grid puts in a card.
   ============================================================ */
.vplayer{
  --vp-gold:#ddc072;
  --vp-gold-soft:#f0d78d;
  --vp-shell:#07161f;
  --vp-track:rgba(255,255,255,.24);
  --vp-text:#eef4f7;
  --vp-muted:#a9b7c0;
  position:relative;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:var(--vp-shell);
  border:1px solid rgba(221,192,114,.28);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
  color:var(--vp-text);
}
.vplayer *{box-sizing:border-box}

.vp-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:radial-gradient(circle at 55% 45%,rgba(52,82,101,.42),transparent 34%),linear-gradient(145deg,#06131a,#11242f 54%,#09171f);
  display:block;
  overflow:hidden;
}
.vp-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
  object-fit:contain;
}
video.vp-media{background:#06131a}
.vp-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
}
.vp-blank{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:22px;
  color:#8fa3b0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
}
/* The click-catcher. A service iframe would otherwise take the click and
   show its own overlay, so nothing above this line ever reaches it. */
.vp-shield{
  position:absolute;
  inset:0;
  z-index:3;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.vp-center{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:104px;
  height:104px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.18s ease;
}
.vp-center:hover{background:rgba(221,192,114,.9);color:#111;transform:translate(-50%,-50%) scale(1.04)}
.vp-center svg{width:34px;height:34px;fill:currentColor;margin-left:5px}
.vplayer.is-started .vp-poster,
.vplayer.is-started .vp-blank{display:none}
.vplayer.is-playing .vp-center{opacity:0;pointer-events:none}
.vp-spinner{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  margin:-19px 0 0 -19px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:var(--vp-gold);
  animation:vp-spin .8s linear infinite;
}
.vp-spinner[hidden]{display:none}
/* a file that will not load says so, instead of leaving a still picture and a dead button */
.vp-error{position:absolute;z-index:6;inset:auto 0 0;padding:11px 14px;background:rgba(120,26,26,.92);color:#ffeaea;font-size:12px;font-weight:700;line-height:1.45}
.vp-error[hidden]{display:none}
@keyframes vp-spin{to{transform:rotate(360deg)}}

/* the tag strip the recording page draws over the picture */
.vp-mark{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;pointer-events:none}
.vp-mark span{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(12,12,12,.7);backdrop-filter:blur(12px);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.vp-mark .vp-mark-live{color:#fff}
.vp-mark .vp-mark-live i{width:7px;height:7px;border-radius:50%;background:var(--vp-gold)}
.vp-mark .vp-mark-brand{color:var(--vp-gold)}

.vp-controls{
  position:relative;
  background:linear-gradient(180deg,#0c1a22,#07151d);
  padding:12px 14px 14px;
}
.vp-progress{
  position:relative;
  height:22px;
  display:flex;
  align-items:center;
  cursor:pointer;
  touch-action:none;
}
.vp-track{width:100%;height:6px;border-radius:999px;background:var(--vp-track)}
.vp-buffer{position:absolute;left:0;width:0;height:6px;border-radius:999px;background:rgba(255,255,255,.18)}
.vp-fill{position:absolute;left:0;width:0;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--vp-gold-soft),var(--vp-gold))}
.vp-thumb{position:absolute;left:0;width:16px;height:16px;border-radius:50%;background:var(--vp-gold-soft);box-shadow:0 0 0 4px rgba(221,192,114,.16);transform:translateX(-50%);pointer-events:none}
.vp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.vp-left,.vp-right{display:flex;align-items:center;gap:8px;min-width:0}
.vp-btn{
  width:38px;
  height:38px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--vp-text);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.15s;
}
.vp-btn:hover,.vp-btn.active{background:#142832;color:var(--vp-gold)}
.vp-btn svg{width:21px;height:21px;pointer-events:none}
.vp-time{font-size:12px;color:var(--vp-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vp-volume-wrap{position:relative;display:flex;align-items:center;gap:8px}
.vp-volume-pop{display:flex;align-items:center}
.vp-volume{width:96px;accent-color:var(--vp-gold)}

/* the gear: quality and sound, on a panel that opens above the row */
.vp-menu-wrap{position:relative}
.vp-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:9;width:186px;padding:8px;border:1px solid #31495a;border-radius:12px;background:#0f2028;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.vp-menu[hidden]{display:none}
.vp-menu-group + .vp-menu-group{margin-top:8px;padding-top:8px;border-top:1px solid #22394a}
.vp-menu-group[hidden] + .vp-menu-group{margin-top:0;padding-top:0;border-top:0}
.vp-menu-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px;padding:0 4px;color:#8fa6b4;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.vp-menu-title .vp-menu-value{color:var(--vp-gold);letter-spacing:0;text-transform:none}
.vp-menu-list{display:grid;gap:2px;max-height:186px;overflow:auto}
.vp-menu-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:#e8eef2;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer}
.vp-menu-list button:hover{background:#1a313d}
.vp-menu-list button[aria-checked="true"]{color:var(--vp-gold)}
.vp-menu-list button[aria-checked="true"]::after{content:'✓';font-size:12px}
.vp-menu-audio{display:flex;align-items:center;gap:7px;padding:0 4px}
.vp-menu-audio .vp-volume{flex:1;width:auto;min-width:0}
.vp-menu-value{min-width:34px;color:#9db0bd;font-size:11px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.vplayer:fullscreen,.vplayer:-webkit-full-screen{border-radius:0;border:0;display:flex;flex-direction:column;background:#000}
.vplayer:fullscreen .vp-stage,.vplayer:-webkit-full-screen .vp-stage{flex:1;aspect-ratio:auto;min-height:0}
.vplayer:fullscreen .vp-media,.vplayer:-webkit-full-screen .vp-media{object-fit:contain}

/* the small one, for a card in a grid */
.vplayer--card{border-radius:0;border:0;box-shadow:none;background:#15181d}
.vplayer--card .vp-stage{border-radius:0}
.vplayer--card .vp-center{width:54px;height:54px}
.vplayer--card .vp-center svg{width:20px;height:20px;margin-left:3px}
.vplayer--card .vp-controls{padding:7px 9px 8px}
.vplayer--card .vp-progress{height:14px}
.vplayer--card .vp-track,.vplayer--card .vp-fill,.vplayer--card .vp-buffer{height:4px}
.vplayer--card .vp-thumb{width:11px;height:11px}
.vplayer--card .vp-row{gap:6px;margin-top:2px}
.vplayer--card .vp-left,.vplayer--card .vp-right{gap:2px}
.vplayer--card .vp-btn{width:28px;height:28px;border-radius:8px}
.vplayer--card .vp-btn svg{width:15px;height:15px}
.vplayer--card .vp-time{font-size:10px}
/* The card keeps the same sound controls as the page player — mute in the row,
   and the slider on a small panel above it, because a 280px card has no room
   for a slider beside the clock. */
.vplayer--card .vp-volume-pop{position:absolute;left:50%;bottom:calc(100% + 7px);z-index:8;
  transform:translateX(-50%) translateY(4px);padding:9px 11px;border:1px solid #31495a;border-radius:11px;
  background:#0f2028;box-shadow:0 14px 30px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.15s ease}
.vplayer--card .vp-volume-wrap:hover .vp-volume-pop,
.vplayer--card .vp-volume-wrap:focus-within .vp-volume-pop{opacity:1;visibility:visible;transform:translateX(-50%)}
.vplayer--card .vp-volume-pop .vp-volume{width:104px}
/* A card is short, so the menu is measured against the whole player instead of
   the gear, and scrolls inside it rather than being cut off by the card.

   The control strip has to give up its position for that. While it stayed
   relative it was the box the menu was measured against, so calc(100% - 52px)
   came out of a 60px strip and the panel opened two pixels tall — the quality
   list was there, drawn and scrollable, but nothing of it could be seen. */
.vplayer--card .vp-controls{position:static}
.vplayer--card .vp-menu-wrap{position:static}
.vplayer--card .vp-menu{right:8px;bottom:42px;width:158px;max-height:calc(100% - 52px);overflow:auto}
.vplayer--card .vp-menu-list{max-height:none}

/* Made big, a card stops being a card. Fullscreen hands the same player the
   whole screen, so the grid's small metrics go back to the page player's and
   the gear panel is measured against the screen instead of the card it came
   from — quality, sound and the clock are all legible at arm's length. */
.vplayer--card:fullscreen .vp-controls,
.vplayer--card:-webkit-full-screen .vp-controls{padding:12px 18px 16px}
.vplayer--card:fullscreen .vp-progress,
.vplayer--card:-webkit-full-screen .vp-progress{height:22px}
.vplayer--card:fullscreen .vp-track,.vplayer--card:fullscreen .vp-fill,.vplayer--card:fullscreen .vp-buffer,
.vplayer--card:-webkit-full-screen .vp-track,.vplayer--card:-webkit-full-screen .vp-fill,
.vplayer--card:-webkit-full-screen .vp-buffer{height:6px}
.vplayer--card:fullscreen .vp-thumb,
.vplayer--card:-webkit-full-screen .vp-thumb{width:16px;height:16px}
.vplayer--card:fullscreen .vp-row,
.vplayer--card:-webkit-full-screen .vp-row{gap:12px;margin-top:6px}
.vplayer--card:fullscreen .vp-left,.vplayer--card:fullscreen .vp-right,
.vplayer--card:-webkit-full-screen .vp-left,.vplayer--card:-webkit-full-screen .vp-right{gap:8px}
.vplayer--card:fullscreen .vp-btn,
.vplayer--card:-webkit-full-screen .vp-btn{width:38px;height:38px;border-radius:11px}
.vplayer--card:fullscreen .vp-btn svg,
.vplayer--card:-webkit-full-screen .vp-btn svg{width:21px;height:21px}
.vplayer--card:fullscreen .vp-time,
.vplayer--card:-webkit-full-screen .vp-time{font-size:12px}
.vplayer--card:fullscreen .vp-center,
.vplayer--card:-webkit-full-screen .vp-center{width:104px;height:104px}
.vplayer--card:fullscreen .vp-center svg,
.vplayer--card:-webkit-full-screen .vp-center svg{width:34px;height:34px;margin-left:5px}
.vplayer--card:fullscreen .vp-menu,
.vplayer--card:-webkit-full-screen .vp-menu{right:18px;bottom:78px;width:186px;max-height:min(58vh,calc(100% - 104px))}
/* the row is wide again, so the slider comes back beside the mute button */
.vplayer--card:fullscreen .vp-volume-pop,
.vplayer--card:-webkit-full-screen .vp-volume-pop{position:static;transform:none;padding:0;border:0;
  border-radius:0;background:none;box-shadow:none;opacity:1;visibility:visible}

@media(max-width:800px){
  /* the slider goes, the gear keeps the sound within reach */
  .vp-center{width:76px;height:76px}
  .vp-center svg{width:26px;height:26px}
  .vp-controls{padding:9px 10px 11px}
  .vp-btn{width:33px;height:33px}
  .vp-btn svg{width:18px;height:18px}
  .vp-time{font-size:11px}
  .vp-volume-pop{display:none}
}

/* ============================================================
   The popup a recording opens in.

   Dark, edge to edge on a phone, and never taller than the window —
   the video keeps its 16/9 and the page behind it stops scrolling.
   ============================================================ */
.vp-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;
  background:rgba(6,12,17,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:vp-modal-in .18s ease}
.vp-modal[hidden]{display:none!important}
.vp-modal-panel{width:min(1080px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  border:1px solid rgba(221,192,114,.3);border-radius:20px;background:#0b1319;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6);animation:vp-modal-rise .24s cubic-bezier(.2,.8,.3,1)}
@keyframes vp-modal-in{from{opacity:0}to{opacity:1}}
@keyframes vp-modal-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.vp-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 18px 12px}
.vp-modal-titles{min-width:0}
.vp-modal-eyebrow{display:block;color:var(--vp-gold,#ddc072);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.vp-modal-head h3{margin:5px 0 0;color:#f2f6f8;font-size:17px;line-height:1.3;font-weight:750}
.vp-modal-head p{margin:4px 0 0;color:#93a5b1;font-size:12px}
.vp-modal-head p[hidden]{display:none}
.vp-modal-x{width:36px;height:36px;flex:none;border:1px solid rgba(255,255,255,.16);border-radius:11px;
  background:rgba(255,255,255,.04);color:#e7eef2;font-size:21px;line-height:1;cursor:pointer;transition:.16s}
.vp-modal-x:hover{background:var(--vp-gold,#ddc072);border-color:var(--vp-gold,#ddc072);color:#111}
.vp-modal-body{padding:0 14px;min-height:0;overflow:auto}
.vp-modal-body .vplayer{border-radius:14px}
.vp-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px 14px}
.vp-modal-hint{color:#7f929f;font-size:11px}
.vp-modal-link{color:var(--vp-gold,#ddc072);font-size:12px;font-weight:800;text-decoration:none}
.vp-modal-link:hover{text-decoration:underline}
.vp-modal-link[hidden]{display:none}
@media(max-width:700px){
  .vp-modal{padding:0;place-items:stretch}
  .vp-modal-panel{width:100%;max-height:100vh;border:0;border-radius:0}
  .vp-modal-body{padding:0}
  .vp-modal-body .vplayer{border-radius:0}
  .vp-modal-hint{display:none}
}