/* ─────────────────────────────────────────────────────────────────────────
   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);
}

/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.mv-filters {
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  padding: 16px 18px;
  margin: 0 0 20px;
}
.mv-filters h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: 0.02em; }
.mv-filters-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.mv-filter { display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1 1 180px; }
.mv-filter label { font-size: 13px; font-weight: 600; color: var(--shell-muted); }
.mv-filter input,
.mv-filter select {
  min-height: 44px; padding: 8px 12px; font-size: 15px; color: inherit;
  background: var(--shell-surface-strong); border: 1px solid var(--shell-line-strong); border-radius: 8px;
}
.mv-filter input:focus-visible,
.mv-filter select:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 1px; }
.mv-filter-actions { display: flex; align-items: flex-end; flex: 0 0 auto; }
.mv-clear {
  min-height: 44px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--shell-button-secondary-ink); background: var(--shell-button-secondary-bg);
  border: 1px solid var(--shell-line-strong); border-radius: 8px;
}
.mv-clear:hover { filter: brightness(0.97); }
.mv-clear:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-count { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--shell-muted); }
.mv-empty {
  background: var(--shell-surface); border: 1px dashed var(--shell-line-strong);
  border-radius: var(--shell-radius); padding: 32px 18px; text-align: center; 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-date { font-size: 13px; font-weight: 600; 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; }

/* ─── Inline explanation + its design (comparison scaffold) ──────────────── */
.mv-compare-block { margin: 0 0 26px; }
.mv-explain-inline {
  border-left: 4px solid var(--shell-accent);
  padding: 2px 0 2px 14px;
  margin: 0 0 12px;
}
.mv-explain-title { margin: 0 0 2px; font-size: 17px; }
.mv-explain-video { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--shell-muted); }
.mv-explain-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--shell-muted); }

/* ─── 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 simulated 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-player-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--shell-muted); }
.mv-caption { margin: 10px 0 0; min-height: 3.2em; font-size: 16px; line-height: 1.4; }
.mv-player-controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mv-playpause {
  min-width: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--shell-accent); border-radius: 8px;
  background: var(--shell-accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.mv-playpause:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-seek { flex: 1 1 auto; min-height: 44px; }
.mv-seek:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
.mv-time { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--shell-muted); white-space: nowrap; }

/* 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; }