/* Member Videos — the shelf, the storefronts, the studio.
   Candlelit glass like the rest of the house; this sheet only
   dresses the new doors. */

.mv-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.mv-head h1 { margin: 0 0 6px; }
.mv-head-links { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-purses { margin: 10px 0 4px; }

.mv-rail { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.mv-chip {
  border: 1px solid rgba(216, 178, 90, .35); background: rgba(60, 14, 26, .3);
  color: inherit; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: .9rem;
}
.mv-chip.on { background: rgba(216, 178, 90, .85); color: #241408; font-weight: 700; }
.mv-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mv-tools .input { flex: 1; min-width: 200px; }

.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.mv-card {
  border: 1px solid rgba(216, 178, 90, .25); border-radius: 16px; overflow: hidden;
  background: rgba(20, 10, 14, .55); display: flex; flex-direction: column;
}
/* Build .24 — the whole card face is a door (wireCardClicks in
   videos.js): it wears the tap the way the house's doors do. */
.mv-card[data-mv-card], .mv-store-row[data-mv-row] { cursor: pointer; }
.mv-card[data-mv-card]:hover { border-color: rgba(216, 178, 90, .55); }
.mv-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0610; }
.mv-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-poster-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; background: linear-gradient(150deg, rgba(88, 18, 32, .5), rgba(12, 6, 10, .8));
}
.mv-limited { position: absolute; left: 8px; bottom: 8px; }
.mv-owned { position: absolute; right: 8px; top: 8px; }
.mv-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mv-card-title { font-weight: 700; font-size: 1.05rem; color: inherit; text-decoration: none; }
.mv-card-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mv-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.mv-price { color: var(--gold, #d8b25a); }
.mv-keeps { color: #b9c6ff; font-size: .92rem; line-height: 1.5; margin: 2px 0; }
.mv-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-state { white-space: nowrap; }

.mv-player { width: 100%; max-height: 62vh; background: #000; border-radius: 12px; display: block; }
.mv-poster-big { aspect-ratio: 16 / 9; border-radius: 12px; }
.mv-buybox, .mv-ownbox {
  border: 1px solid rgba(216, 178, 90, .3); border-radius: 14px; padding: 16px; margin-top: 16px;
  background: rgba(60, 14, 26, .25);
}
.mv-buyprice { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 1.15rem; margin-bottom: 6px; }
.mv-report { margin-top: 26px; border-top: 1px solid rgba(216, 178, 90, .18); padding-top: 16px; }

.mv-suggest { margin-top: 22px; }
.mv-fitted { text-align: center; padding: 28px 22px; }

.mv-attest { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; margin: 14px 0; cursor: pointer; }
.mv-progress { margin: 12px 0; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; position: relative; }
.mv-progress-bar { height: 10px; width: 0; background: linear-gradient(90deg, #8a2b3a, var(--gold, #d8b25a)); transition: width .2s ease; }
.mv-progress-note { padding: 4px 10px; }

.mv-doorcard { display: block; text-decoration: none; color: inherit; margin: 16px 0 4px; }
.mv-doorcard h2 { margin: 0 0 6px; }
.mv-doorcard p { margin: 0; }

.mv-mine-row {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(216, 178, 90, .15);
}
.mv-mine-row:last-child { border-bottom: none; }
.mv-mine-main { flex: 1; min-width: 240px; }
/* Build .20 fix item: the row's face is a door to the film's page. */
.mv-mine-row { cursor: pointer; }
.mv-mine-row .mv-card-title { text-decoration: underline; text-decoration-color: rgba(216, 178, 90, .45); text-underline-offset: 3px; }
.mv-mine-row .mv-mine-actions, .mv-mine-row [data-mv-pricehost], .mv-mine-row .mv-progress { cursor: default; }
.mv-earned { color: var(--gold, #d8b25a); }
.mv-mine-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.mv-filebtn { cursor: pointer; }

.mv-profile-card { margin-top: 14px; }
.mv-store-row {
  display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(216, 178, 90, .15);
}
.mv-store-row:last-of-type { border-bottom: none; }
.mv-store-media { flex: 0 0 128px; }
.mv-store-poster { width: 128px; height: 72px; object-fit: cover; border-radius: 8px; display: block; background: #0b0610; }
.mv-store-poster.mv-poster-empty { display: flex; font-size: 1.4rem; }
.mv-store-main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.mv-store-preview { margin-top: 8px; }

@media (max-width: 560px) {
  .mv-store-row { flex-direction: column; }
  .mv-store-media { flex: none; }
  .mv-store-poster { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* Your Sales as fitted cards, and the library's in-card player
 * (build 2026.11.02.10): the old sales table ran off a phone's
 * right edge; these cards wrap at any width, and the player takes
 * the card media's own 16/9 frame. */
.mv-sales { display: flex; flex-direction: column; gap: 8px; }
.mv-sale {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 10px 12px; border: 1px solid rgba(216, 178, 90, .18);
  border-radius: 10px; background: rgba(255, 255, 255, .02);
}
.mv-sale-title { font-weight: 600; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.mv-sale-when, .mv-sale-state { opacity: .72; white-space: nowrap; }
.mv-sale-paid, .mv-sale-kept { white-space: nowrap; }
.mv-sale-kept { color: var(--gold, #d8b25a); }
.mv-player-card {
  aspect-ratio: 16 / 9; max-height: none; border-radius: 0;
  object-fit: contain; width: 100%;
}

/* THE VIDEO STORE — the Library (build 2026.11.03.2): the marquee,
 * the rails, the in-place preview, and Free read in gold. */
.mv-marquee { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.mv-marquee-media { flex: 1 1 320px; min-width: 240px; }
.mv-marquee-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.mv-marquee-body h2 { margin: 0; font-size: 1.5rem; }
.mv-marquee-body h2 a { color: inherit; text-decoration: none; }
.mv-railsec { margin: 0 0 22px; }
.mv-railhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.mv-railhead h2 { margin: 0; font-size: 1.15rem; }
.mv-railrow {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px);
  gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity;
}
.mv-railrow .mv-card { scroll-snap-align: start; }
.mv-previewbox { position: relative; }
.mv-previewbox video.mv-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-preview-btn { position: absolute; left: 10px; bottom: 10px; z-index: 2; }
.mv-free { color: var(--gold, #d8b25a); }
.mv-pricepick .mv-attest { display: flex; gap: 8px; align-items: center; }
.mv-priceedit { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(216, 178, 90, .18); }