/* Mockup Video Maker */

/* Two columns on a desktop: the stage sticks with you while the panel scrolls, because the
   panel is long by nature (device, motion and scene are three separate decisions) and
   scrolling the preview off the top makes every slider a guess. */
.mv-shell {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}
@media (max-width: 980px) { .mv-shell { grid-template-columns: minmax(0, 1fr); } }

.mv-stage-col { position: sticky; top: 78px; }
@media (max-width: 980px) { .mv-stage-col { position: static; } }

/* ── stage ────────────────────────────────────────────────────────────────── */
/* A checkerboard, not a flat well: this tool can export a transparent PNG, and the only
   honest way to show transparency is to show what is behind it. */
.mv-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 18px; border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    var(--bg-soft);
  background-size: 22px 22px, 22px 22px, auto;
  background-position: 0 0, 11px 11px, 0 0;
  border: 1px solid var(--line);
}
.mv-stage canvas {
  display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: var(--shadow-lg);
}

.mv-transport {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mv-transport .btn { flex: 0 0 auto; }
.mv-scrub { flex: 1 1 auto; min-width: 60px; accent-color: var(--accent); }
.mv-time {
  flex: 0 0 auto; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted);
}

.mv-frames { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mv-frames-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2);
}
.mv-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.55; color: var(--muted-2); }

/* ── panel ────────────────────────────────────────────────────────────────── */
/* Each step is its own card. Content, device, motion, scene and export are five separate
   decisions, and running them together as one long list of controls is what makes a tool
   like this feel like a settings screen rather than a workflow. */
.mv-panel { display: flex; flex-direction: column; gap: 18px; }
.mv-block {
  padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mv-block h3 {
  margin: 0 0 14px; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2);
}
.mv-block h3 small {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: none; opacity: .7; margin-left: 6px;
}
.mv-group {
  margin: 14px 0 8px; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); opacity: .8;
}
.mv-group:first-child { margin-top: 0; }

.mv-field { display: flex; flex-direction: column; gap: 6px; position: relative; margin-bottom: 13px; }
.mv-field:last-child { margin-bottom: 0; }
.mv-field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.mv-input {
  width: 100%; padding: 9px 11px; min-height: 38px;
  font: inherit; font-size: .88rem; color: var(--text);
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
}
.mv-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select.mv-input { cursor: pointer; }

.mv-field.is-color { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.mv-field.is-color label { flex: 1 1 auto; }
input[type="color"].mv-input {
  flex: 0 0 auto; width: 52px; height: 34px; min-height: 34px; padding: 3px; cursor: pointer;
}

/* Ranges need their own groove drawn. Stripping the input's background is necessary or the
   field chrome boxes the slider in, but it also removes the only thing that makes the track
   visible in a dark theme — accent-color styles the thumb and the fill, never the groove. */
input[type="range"].mv-input, .mv-scrub {
  -webkit-appearance: none; appearance: none;
  padding: 0; min-height: 22px; border: 0; background: none;
  accent-color: var(--accent); cursor: pointer;
}
input[type="range"].mv-input::-webkit-slider-runnable-track,
.mv-scrub::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
input[type="range"].mv-input::-moz-range-track,
.mv-scrub::-moz-range-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
input[type="range"].mv-input::-moz-range-progress,
.mv-scrub::-moz-range-progress {
  height: 5px; border-radius: 999px; background: var(--accent);
}
input[type="range"].mv-input::-webkit-slider-thumb,
.mv-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--card-2); box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
input[type="range"].mv-input::-moz-range-thumb,
.mv-scrub::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card-2);
}
input[type="range"].mv-input:focus-visible { outline: none; }
input[type="range"].mv-input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }

.mv-range .mv-out {
  position: absolute; top: 0; right: 0;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
}

.mv-check {
  display: flex; align-items: center; gap: 9px; margin-top: 11px;
  font-size: .84rem; color: var(--muted); cursor: pointer;
}
.mv-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.mv-check span { flex: 1 1 auto; }

/* ── drop zone ────────────────────────────────────────────────────────────── */
/* Big and central, not a thin strip: this is step one and the only thing on the page that
   has to be found without being explained. */
.mv-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px; margin-bottom: 14px;
  font-size: .86rem; color: var(--muted); text-align: center;
  background: rgba(255, 255, 255, .014);
  border: 2px dashed var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.mv-drop:hover, .mv-drop:focus-visible, .mv-drop.over {
  border-color: var(--accent); background: rgba(108, 139, 255, .07); outline: none;
}
.mv-drop small { font-size: .74rem; color: var(--muted-2); line-height: 1.5; }
.mv-drop-icon {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px;
  font-size: 1rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 10px;
}
.mv-drop.has-media {
  flex-direction: row; align-items: center; text-align: left;
  padding: 12px; border-style: solid; color: var(--text); gap: 12px;
}
.mv-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  background: #0b0e1c; display: grid; place-items: center;
}
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mv-thumb.is-video { color: var(--accent); font-size: 1.1rem; }
.mv-thumb-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv-thumb-meta strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-thumb-meta small { font-size: .74rem; color: var(--muted-2); }
.mv-thumb-swap {
  flex: 0 0 auto; padding: 6px 10px; min-height: 32px;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--muted);
  background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.mv-thumb-swap:hover { color: var(--text); border-color: var(--accent); }

/* ── device chips ─────────────────────────────────────────────────────────── */
/* Each chip draws its own device. The whole choice being made here is about silhouette, and
   a list of words does not show a silhouette. */
.mv-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.mv-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 7px; font: inherit;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.mv-chip span {
  font-size: .68rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25;
}
.mv-chip-cv { width: 48px; height: 48px; display: block; }
.mv-chip:hover { border-color: var(--muted-2); }
.mv-chip.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--card-2)); }
.mv-chip.is-on span { color: var(--text); }

/* ── pills ────────────────────────────────────────────────────────────────── */
.mv-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.mv-pill {
  padding: 7px 12px; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--muted); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out),
              background .15s var(--ease-out);
}
.mv-pill:hover { color: var(--text); border-color: var(--muted-2); }
.mv-pill.is-on { color: #0b0e1c; background: var(--accent-grad); border-color: transparent; }

/* ── background swatches ──────────────────────────────────────────────────── */
.mv-swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 7px; margin-bottom: 13px;
}
.mv-swatch {
  height: 38px; padding: 0; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: transform .12s var(--ease-out), border-color .15s var(--ease-out);
}
.mv-swatch:hover { transform: translateY(-2px); }
.mv-swatch.is-on { border-color: var(--text); }
.mv-swatch:focus-visible { outline: none; border-color: var(--accent); }

.mv-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.mv-bgmode {
  flex: 1 1 auto; padding: 8px 10px; font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--muted); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.mv-bgmode:hover { color: var(--text); border-color: var(--muted-2); }
.mv-bgmode.is-on { color: #0b0e1c; background: var(--accent-grad); border-color: transparent; }

.mv-colors { display: flex; gap: 12px; }
.mv-colors .mv-field { flex: 1 1 0; margin-bottom: 13px; }

/* ── progress & status ────────────────────────────────────────────────────── */
.mv-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mv-progress-track {
  flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.mv-progress-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--accent-grad); transition: width .12s linear;
}
.mv-progress span { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--muted); }

.mv-status {
  margin: 16px 0 0; padding: 11px 14px;
  font-size: .86rem; line-height: 1.55; color: var(--muted);
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mv-status.is-ok { color: #7ee2a8; border-color: color-mix(in srgb, #5cd98a 38%, transparent); }
.mv-status.is-error { color: #ff9eb0; border-color: color-mix(in srgb, #ff6b8a 38%, transparent); }
.mv-status.is-busy { color: var(--text); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

.mv-warn {
  margin: 16px 0 0; padding: 13px 15px;
  font-size: .86rem; line-height: 1.6; color: var(--muted);
  background: color-mix(in srgb, #ffce5c 10%, var(--card-2));
  border: 1px solid color-mix(in srgb, #ffce5c 34%, transparent);
  border-radius: var(--radius-sm);
}

.mv-block .btn + .btn, .mv-block .mv-field + .btn, .mv-block .mv-progress + .btn { margin-top: 10px; }
.btn-block { width: 100%; justify-content: center; }

@media (pointer: coarse) {
  .mv-pill, .mv-bgmode, .mv-thumb-swap { min-height: 44px; }
}
@media (max-width: 640px) {
  .mv-stage { padding: 10px; }
  .mv-stage canvas { max-height: 46vh; }
  .mv-chips { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mv-swatch, .mv-chip, .mv-pill { transition: none; }
}