/* Lesson videos, and the copies kept for watching offline
   (apps/videos, static/js/offline_video.js). */

.vid { display: grid; gap: 10px; }
.vid__player { width: 100%; border-radius: 14px; background: #0b1a4a; display: block; }

/* The offline strip under a video: what it can do, and what it is doing.
   It sits on dark video cards and on light pages alike, so it carries its
   own background and light text. */
.vid__bar {
  display: grid; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  color: #ffffff; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.vid__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vid__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 18px; border-radius: 12px;
  font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vid__btn:hover { transform: translateY(-1px); }
.vid__btn:focus-visible { outline: 3px solid #FFD86B; outline-offset: 2px; }
.vid__btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }

/* Save: the one to reach for, so it is the brightest thing here. */
.vid__btn--keep { color: #0b1a4a; background: linear-gradient(135deg, #FFD86B, #E9AE00); box-shadow: 0 6px 16px rgba(233, 174, 0, 0.45); }
.vid__btn--keep:hover { box-shadow: 0 10px 22px rgba(233, 174, 0, 0.55); }
.vid__btn--keep.vid__btn--saved, .vid__btn--keep.vid__btn--saved:hover { color: #ffffff; background: linear-gradient(135deg, #3D63E6, #1846E0); box-shadow: 0 6px 16px rgba(24, 70, 224, 0.25); cursor: default; }
.vid__btn--watch { color: #ffffff; background: linear-gradient(135deg, #6E8DEE, #3D63E6); box-shadow: 0 6px 16px rgba(61, 99, 230, 0.4); }
.vid__btn--remove { color: #FFD86B; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 216, 107, 0.45); }
.vid__btn--remove:hover { color: #fff; background: rgba(110, 141, 238, 0.35); }

/* What it is doing, said plainly and in a colour that shows. */
.vid__state { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: #ffffff; }
.vid__state--good { color: #D6E3FF; }
.vid__manage-devices { width: fit-content; color: #FFD86B; font-size: 0.88rem; font-weight: 700; }
.vid__manage-devices[hidden] { display: none; }
.vid__state--bad { color: #FFC72C; }
.vid__state--working::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #FFD86B;
  animation: vid-spin 0.8s linear infinite;
}
@keyframes vid-spin { to { transform: rotate(360deg); } }

/* The bar itself: tall enough to see across a room, with the number on it. */
.vid__progress {
  position: relative; height: 22px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 3px rgba(11, 26, 74, 0.3);
}
.vid__progress > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #FFD86B, #E9AE00);
  background-size: 28px 28px;
  transition: width 0.3s ease;
  animation: vid-stripes 0.9s linear infinite;
  background-image: linear-gradient(90deg, #FFD86B, #E9AE00),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
  background-blend-mode: overlay;
}
.vid__progress__figure {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 800; color: #0b1a4a; letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
@keyframes vid-stripes { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 32px 0; } }

/* On a light page (the Offline videos list) the strip turns dark-on-light. */
.vid-kept .vid__bar, .ui-body > .vid .vid__bar {
  color: var(--ink); background: rgba(11, 26, 74, 0.05); border-color: rgba(11, 26, 74, 0.1);
}
.vid-kept .vid__state, .ui-body > .vid .vid__state { color: var(--ink); }
.ui-body > .vid .vid__manage-devices { color: var(--maroon); }
.vid-kept .vid__btn--remove, .ui-body > .vid .vid__btn--remove { color: #1846E0; border-color: rgba(24, 70, 224, 0.35); background: transparent; }

/* The Offline videos page */
.vid-keptlist, .vid-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vid-kept, .vid-device {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--ui-card, #ffffff);
  box-shadow: var(--ui-shadow, 0 8px 20px rgba(11, 26, 74, 0.08));
}
.vid-kept__body, .vid-device > div { flex: 1; min-width: 200px; }
.vid-kept__title, .vid-device__name { margin: 0; font-weight: 700; color: var(--ink); }
.vid-kept__note, .vid-device__note { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-40); }
.vid-kept__player { width: 100%; border-radius: 12px; background: #0b1a4a; }
.vid-kept__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vid-kept__none { padding: 18px; border-radius: 16px; text-align: center; color: var(--ink-40); background: rgba(11, 26, 74, 0.03); }
.vid-device--off { opacity: 0.6; }
@media (max-width: 560px) {
  .vid__actions, .vid-kept__actions { width: 100%; }
  .vid__btn { flex: 1; justify-content: center; }
}

/* Replay and "Up next" on every player (static/js/media_extras.js) */
.mx-stage { position: relative; width: 100%; }
.mx-stage > video { display: block; width: 100%; }
.mx-replay {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .01em;
  color: #0B1A4A; background: linear-gradient(135deg, #FFD86B, #FFC72C);
  box-shadow: 0 6px 16px rgba(233, 174, 0, 0.3);
  transition: transform .15s, box-shadow .15s;
}
.mx-replay:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(233, 174, 0, 0.38); }
.mx-replay:focus-visible { outline: 3px solid #1846E0; outline-offset: 2px; }
.mx-replay--audio { margin: 8px 0 4px; }
.mx-replay--video {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.mx-stage.is-rewindable .mx-replay--video, .mx-stage:focus-within .mx-replay--video { opacity: 1; pointer-events: auto; transform: none; }

.mx-next {
  position: absolute; right: 14px; bottom: 64px; z-index: 4;
  display: flex; align-items: stretch; gap: 4px;
  max-width: min(320px, calc(100% - 28px));
  animation: mx-next-in .35s cubic-bezier(.2, .9, .3, 1.15);
}
.mx-next[hidden] { display: none; }
@keyframes mx-next-in { from { opacity: 0; transform: translateX(24px); } }
.mx-next__go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 18px; border-radius: 16px; text-decoration: none;
  color: #0B1A4A; background: linear-gradient(135deg, #FFD86B, #FFC72C);
  box-shadow: 0 14px 32px rgba(11, 26, 74, 0.45);
}
.mx-next__go:hover { filter: brightness(1.04); }
.mx-next__go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mx-next__text { display: flex; flex-direction: column; min-width: 0; }
.mx-next__text small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.mx-next__text strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-next__arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; background: #0B1A4A; color: #FFC72C; animation: mx-nudge 1.4s ease-in-out infinite; }
@keyframes mx-nudge { 50% { transform: translateX(4px); } }
.mx-next__close {
  flex: none; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(11, 26, 74, 0.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
@media (max-width: 560px) {
  .mx-next { right: 8px; bottom: 54px; }
  .mx-next__go { padding: 9px 10px 9px 14px; gap: 8px; }
  .mx-next__text strong { font-size: 14px; }
  .mx-next__arrow { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-next, .mx-next__arrow { animation: none; }
}

/* The offline bar shows only the buttons that fit the moment (offline_video.js
   hides the rest); a button's own display must not bring them back. */
.vid [hidden], .vid__btn[hidden] { display: none !important; }