/* ─────────────────────────────────────────────────────────────────────────
   My Videos — design prototype styles.
   Both versions are expandable sections (accordion / disclosure):
     • collapsed  = video name + date only
     • expanded   = the outputs inline (no pop-up), each with a player/reader
                    and its own download button
   V1 expands into stacked output groups; V2 expands into tabs.
   Prototype only. Colours come from the app-shell tokens, so light + dark
   themes both work automatically.
   ───────────────────────────────────────────────────────────────────────── */

.mv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.mv-note {
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-left: 4px solid var(--shell-accent);
  border-radius: var(--shell-radius);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--shell-muted);
}

/* ─── Accordion list ─────────────────────────────────────────────────────── */
.mv-list { list-style: none; margin: 0; padding: 0; }
.mv-item {
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  margin: 0 0 12px;
  overflow: hidden;
}
.mv-acc-heading { margin: 0; font-size: inherit; }
.mv-acc-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mv-acc-trigger:hover { background: var(--shell-hover); }
.mv-acc-trigger:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: -3px; }
.mv-acc-ico {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--shell-muted);
  transition: transform 0.15s ease;
}
.mv-acc-trigger[aria-expanded="true"] .mv-acc-ico { transform: rotate(90deg); }
.mv-acc-textwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-acc-name { font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mv-acc-description { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--shell-muted); }
.mv-video-details {
  margin: 0;
  padding: 0 18px 16px 47px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--shell-muted);
}

.mv-acc-panel { padding: 4px 18px 18px; border-top: 1px solid var(--shell-line); }
.mv-acc-panel[hidden] { display: none; }

/* ─── Output group (V1 stacked) ──────────────────────────────────────────── */
.mv-output {
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--shell-line);
}
.mv-output:last-child { border-bottom: 0; }
.mv-output-title { margin: 0 0 10px; font-size: 15px; letter-spacing: 0.01em; }

/* ─── Nested output sub-accordion (V1-nested) ────────────────────────────── */
.mv-subacc {
  border: 1px solid var(--shell-line);
  border-radius: 10px;
  margin: 0 0 10px;
  overflow: hidden;
  background: var(--shell-surface-deeper);
}
.mv-subacc:last-child { margin-bottom: 4px; }
.mv-subacc-heading { margin: 0; font-size: inherit; }
.mv-subacc-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 12px 14px;
  background: transparent; border: 0; color: inherit; font-family: inherit;
  text-align: left; cursor: pointer;
}
.mv-subacc-trigger:hover { background: var(--shell-hover); }
.mv-subacc-trigger:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: -3px; }
.mv-subacc-title { font-size: 15px; font-weight: 700; }
.mv-subacc-panel { padding: 4px 14px 14px; border-top: 1px solid var(--shell-line); }
.mv-subacc-panel[hidden] { display: none; }

/* ─── Design comparison scaffold ────────────────────────────────────────── */
.mv-compare-block { margin: 0 0 26px; }

/* ─── Tabs (V2) ──────────────────────────────────────────────────────────── */
.mv-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  border-bottom: 1px solid var(--shell-line);
}
.mv-tab {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--shell-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.mv-tab:hover { background: var(--shell-hover); }
.mv-tab[aria-selected="true"] {
  background: var(--shell-surface-deeper);
  border-color: var(--shell-line);
  color: inherit;
}
.mv-tab:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-tabpanel { padding: 16px 0 4px; }
.mv-tabpanel[hidden] { display: none; }
.mv-tabpanel:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }

/* ─── Inline sample media player ────────────────────────────────────────── */
.mv-player-stage {
  background: var(--shell-surface-deeper);
  border: 1px solid var(--shell-line);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 12px;
}
.mv-native-media {
  display: block;
  width: 100%;
  max-width: 760px;
  margin-top: 10px;
}
video.mv-native-media {
  width: min(100%, 400px);
  max-height: 400px;
  margin-right: auto;
  margin-left: auto;
  object-fit: contain;
  background: #000;
}
.mv-native-media:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-speed-control { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.mv-speed-control label { font-size: 14px; font-weight: 600; }
.mv-speed {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--shell-line-strong);
  border-radius: 8px;
  background: var(--shell-surface-strong);
  color: inherit;
  font: inherit;
}
.mv-speed:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }

/* Inline text reader */
.mv-reader {
  background: var(--shell-surface-deeper);
  border: 1px solid var(--shell-line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 12px;
  max-height: 42vh;
  overflow: auto;
  font-size: 16px;
  line-height: 1.6;
}
.mv-reader:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-reader p { margin: 0 0 12px; }
.mv-reader p:last-child { margin-bottom: 0; }

/* ─── Buttons (download etc.) ────────────────────────────────────────────── */
.mv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--shell-line-strong); border-radius: 8px;
  background: var(--shell-surface-strong); color: var(--shell-accent);
  font-size: 15px; font-weight: 600; font-family: inherit; line-height: 1.2; cursor: pointer;
}
.mv-btn:hover { background: var(--shell-hover); }
.mv-btn:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-btn .mv-ico { font-size: 16px; }

/* ─── Toast / live announcement ──────────────────────────────────────────── */
.mv-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--shell-button-secondary-bg); color: var(--shell-button-secondary-ink);
  border: 1px solid var(--shell-line-strong); border-radius: 10px;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25); z-index: 1100; max-width: 90vw;
}
.mv-toast[hidden] { display: none; }