/* ============================================
   MEDIA VIEWER — thumbnail strip + full-screen photo/video carousel shared by
   Eligibility Review and the Project page "Project files" card (js/media-viewer.js).
   Strip surfaces use the design-system tokens (light/dark aware); the lightbox
   itself is intentionally dark in both themes, like any photo viewer.
   ============================================ */

/* ---- thumbnail strip ---- */
.mv-strip{
  display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 12px;
}
.mv-tile{
  position:relative; width:64px; height:64px; flex-shrink:0; padding:0;
  border:1px solid var(--hairline,#e2e2e8); border-radius:9px; overflow:hidden;
  background:var(--surface-2,#fafafc); cursor:zoom-in;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.mv-tile:hover{
  border-color:var(--gold,#c5a55a); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(20,22,28,.14);
}
.mv-tile:focus-visible{ outline:2px solid var(--gold,#c5a55a); outline-offset:1px; }
.mv-thumb{ width:100%; height:100%; object-fit:cover; display:block; }

/* video tile — dark chip with a play glyph (no poster frame available) */
.mv-tile-vid{ background:#2b3040; cursor:pointer; }
.mv-play{
  position:absolute; top:calc(50% - 6px); left:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--gold-soft,#d6bc78);
}
.mv-tile-tag{
  position:absolute; left:0; right:0; bottom:4px; text-align:center;
  font:600 9px/1 var(--font-sans,Inter,sans-serif); letter-spacing:.12em;
  text-transform:uppercase; color:#b9b6ac;
}

/* HEIC being converted to JPEG in the browser (non-Safari) — brief state
   while libheif works; the thumb swaps in when done. */
.mv-tile-converting .mv-thumb{ opacity:0; }
.mv-tile-converting::after{
  content:"HEIC…"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:4px;
  font:600 9px/1.3 var(--font-sans,Inter,sans-serif); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint,#a5a29a);
  animation:mvPulse 1.1s ease-in-out infinite;
}
@keyframes mvPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* image that genuinely failed to load/convert — still clickable; the
   carousel slide offers Download / "Open original". */
.mv-tile-broken .mv-thumb{ display:none; }
.mv-tile-broken::after{
  content:"No preview"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:4px;
  font:600 9px/1.3 var(--font-sans,Inter,sans-serif); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint,#a5a29a); animation:none;
}

/* actions row above the strip on the Project page files card */
.mv-cardbar{ display:flex; align-items:center; gap:18px; padding:0 0 10px; }
.mv-cardbar .mv-action{ margin-left:0; }
.mv-action{
  background:none; border:none; padding:0; cursor:pointer;
  font:600 12px var(--font-sans,Inter,sans-serif); color:var(--gold-dark,#b8943e);
}
.mv-action:hover{ opacity:.7; }
.mv-action:disabled{ opacity:.55; cursor:default; }

/* ---- carousel lightbox ---- */
body.mv-lock{ overflow:hidden; }

.mv-overlay{
  position:fixed; inset:0; z-index:12000; display:flex; flex-direction:column;
  background:rgba(15,17,23,.94); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:mvFade .16s ease-out;
}
@keyframes mvFade{ from{ opacity:0; } to{ opacity:1; } }

.mv-top{
  display:flex; align-items:center; gap:14px; padding:14px 20px; min-height:0;
}
.mv-title{
  font:600 13.5px var(--font-sans,Inter,sans-serif); color:#e8e6df;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mv-count{
  margin-left:10px; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  color:var(--gold-soft,#d6bc78);
}
.mv-top-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mv-btn{
  font:600 11.5px var(--font-sans,Inter,sans-serif); letter-spacing:.03em;
  color:#e8e6df; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:7px 13px; cursor:pointer; transition:all .15s;
}
.mv-btn:hover{ border-color:var(--gold,#c5a55a); color:var(--gold-soft,#d6bc78); }
.mv-btn:disabled{ opacity:.55; cursor:default; }
.mv-close{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07); color:#e8e6df; font-size:20px; line-height:1;
  cursor:pointer; transition:all .15s; margin-left:4px;
}
.mv-close:hover{ border-color:var(--gold,#c5a55a); color:var(--gold-soft,#d6bc78); }

.mv-body{
  position:relative; flex:1; min-height:0; display:flex;
  align-items:center; justify-content:center; padding:0 78px;
}
.mv-stage{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:0;
}
.mv-media{
  max-width:100%; max-height:calc(100vh - 148px); object-fit:contain;
  border-radius:8px; box-shadow:0 22px 70px rgba(0,0,0,.55);
  background:#0e1015;
}
video.mv-media{ width:auto; min-width:min(640px,86vw); }

.mv-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(20,22,28,.6);
  color:#e8e6df; font-size:26px; line-height:1; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center; padding:0 0 3px;
}
.mv-nav:hover{ border-color:var(--gold,#c5a55a); color:var(--gold-soft,#d6bc78); background:rgba(20,22,28,.85); }
.mv-prev{ left:16px; }
.mv-next{ right:16px; }

.mv-caption{
  text-align:center; font:500 12.5px var(--font-sans,Inter,sans-serif);
  color:#b9b6ac; padding:12px 20px 18px; min-height:18px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.mv-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18); border-top-color:var(--gold,#c5a55a);
  animation:mvSpin .8s linear infinite;
}
@keyframes mvSpin{ to{ transform:rotate(360deg); } }

.mv-fallback{
  max-width:420px; text-align:center; padding:34px 30px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.mv-fallback-name{
  font:600 14px var(--font-sans,Inter,sans-serif); color:#e8e6df;
  word-break:break-all;
}
.mv-fallback-msg{ font-size:12.5px; color:#b9b6ac; margin-bottom:6px; }
.mv-fallback-btns{ display:flex; gap:8px; }

/* ---- phones ---- */
@media (max-width:640px){
  .mv-top{ padding:12px 14px; gap:10px; }
  .mv-btn{ padding:6px 10px; }
  .mv-body{ padding:0 10px; }
  .mv-media{ max-height:calc(100vh - 170px); border-radius:6px; }
  .mv-nav{ width:38px; height:38px; font-size:22px; }
  .mv-prev{ left:8px; }
  .mv-next{ right:8px; }
  .mv-caption{ white-space:normal; }
}