/* Motion Graphics Maker */

/* ── warnings ─────────────────────────────────────────────────────────────── */
.mg-warn {
  margin: 0 0 20px; padding: 14px 16px;
  font-size: .9rem; 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);
}
.mg-warn strong { color: var(--text); }

/* ── picker ───────────────────────────────────────────────────────────────── */
.mg-pickhead { margin-bottom: 22px; }
.mg-pickhead h2 { margin: 0 0 6px; font-size: 1.25rem; }
.mg-pickhead p { margin: 0; font-size: .9rem; color: var(--muted-2); }

/* ── browse: search + category filters ────────────────────────────────────── */
.mg-browse {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 18px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.mg-search { position: relative; display: flex; align-items: center; }
.mg-search svg {
  position: absolute; left: 13px; color: var(--muted-2); pointer-events: none;
}
.mg-search input {
  width: 100%; padding: 11px 40px 11px 40px; min-height: 44px;
  font: inherit; font-size: .92rem; color: var(--text);
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  -webkit-appearance: none; appearance: none;
}
.mg-search input::placeholder { color: var(--muted-2); }
.mg-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* The native clear affordance is inconsistent across browsers, so it is replaced. */
.mg-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mg-search-clear {
  position: absolute; right: 8px;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  font: inherit; font-size: 1.25rem; color: var(--muted-2);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.mg-search-clear:hover { color: var(--text); background: var(--card); }

.mg-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.mg-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font: inherit; font-size: .82rem; 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);
}
.mg-filter:hover { color: var(--text); border-color: var(--muted-2); }
.mg-filter small {
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 999px;
  color: var(--muted-2); background: rgba(255, 255, 255, .07);
}
.mg-filter.is-on { color: #0b0e1c; background: var(--accent-grad); border-color: transparent; }
.mg-filter.is-on small { color: #0b0e1c; background: rgba(11, 14, 28, .16); }

.mg-count {
  margin: 0 0 14px; font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; color: var(--muted-2);
}
.mg-empty {
  margin: 26px 0; padding: 26px; text-align: center;
  font-size: .92rem; color: var(--muted);
  background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius);
}
.mg-linkbtn {
  font: inherit; font-size: inherit; font-weight: 700; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
/* A hidden section must not leave its grid gap behind. */
.mg-cat[hidden], .mg-row[hidden], .mg-card[hidden] { display: none !important; }

@media (max-width: 640px) {
  .mg-filters { gap: 6px; }
  .mg-filter { padding: 8px 11px; font-size: .78rem; }
}

.mg-cat {
  margin: 30px 0 12px; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}
.mg-cat:first-child { margin-top: 0; }

.mg-row {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.mg-card {
  position: relative; display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); 
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out),
              box-shadow .16s var(--ease-out);
}
.mg-card:hover, .mg-card:focus-visible {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-lg); outline: none;
}
/* The canvas is the product shot — let it fill the card edge to edge. */
.mg-card-cv {
  display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;
  background: #0b0e1c; border-bottom: 1px solid var(--line);
}
.mg-card-meta { display: block; padding: 12px 14px 14px; }
.mg-card-meta strong { display: block; font-size: .95rem; margin-bottom: 3px; }
.mg-card-meta small { display: block; font-size: .8rem; line-height: 1.45; color: var(--muted-2); }
.mg-card-dur {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px; font-size: .72rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #fff;
  background: rgba(8, 10, 20, .62); backdrop-filter: blur(6px);
  border-radius: 999px;
}

/* ── editor shell ─────────────────────────────────────────────────────────── */
.mg-ehead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mg-backbtn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.mg-etitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-etitle strong { font-size: 1.1rem; }
.mg-etitle small { font-size: .84rem; color: var(--muted-2); }

.mg-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
@media (max-width: 900px) { .mg-layout { grid-template-columns: minmax(0, 1fr); } }

/* ── stage ────────────────────────────────────────────────────────────────── */
/* The checkerboard is a habit from image tools and would be wrong here — these always have
   an opaque background — so the stage is a plain recessed well instead. */
.mg-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mg-stage canvas {
  display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: var(--shadow-lg);
}

.mg-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);
}
.mg-tbtn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 7px 12px; min-height: 36px;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--text); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.mg-tbtn:hover { border-color: var(--accent); background: var(--card); }
.mg-tbtn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.mg-tbtn svg { display: block; }
.mg-scrub { flex: 1 1 auto; min-width: 60px; accent-color: var(--accent); }
.mg-time {
  flex: 0 0 auto; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted);
}

.mg-frames { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mg-glabel {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2);
}
.mg-ratios { display: flex; gap: 7px; flex-wrap: wrap; }
.mg-ratio {
  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: all .15s var(--ease-out);
}
.mg-ratio:hover { color: var(--text); border-color: var(--muted-2); }
.mg-ratio.is-on {
  color: #0b0e1c; background: var(--accent-grad); border-color: transparent;
}
.mg-ratnote { font-size: .78rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* ── panel ────────────────────────────────────────────────────────────────── */
/* Each block is its own card rather than sections divided by margin — customising and
   exporting are different jobs and should not read as one continuous list of controls. */
.mg-panel { display: flex; flex-direction: column; gap: 18px; }
.mg-block {
  padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mg-block h3 {
  margin: 0 0 14px; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2);
}
.mg-fields { display: flex; flex-direction: column; gap: 13px; margin-bottom: 14px; }
.mg-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.mg-field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.mg-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;
}
.mg-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
textarea.mg-input { resize: vertical; line-height: 1.5; min-height: 70px; }
select.mg-input { cursor: pointer; }

/* Colour inputs read as a swatch, not a form control. */
.mg-field.is-color { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.mg-field.is-color label { flex: 1 1 auto; }
input[type="color"].mg-input {
  flex: 0 0 auto; width: 52px; height: 34px; min-height: 34px; padding: 3px; cursor: pointer;
}
/* Ranges need their own track drawn. Stripping the input's background (needed, or the field
   chrome boxes the slider in) also removes the only thing making the track visible in a dark
   theme — accent-color styles the thumb and the filled portion, never the groove. */
input[type="range"].mg-input {
  -webkit-appearance: none; appearance: none;
  padding: 0; min-height: 22px; border: 0; background: none;
  accent-color: var(--accent); cursor: pointer;
}
input[type="range"].mg-input::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
input[type="range"].mg-input::-moz-range-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
input[type="range"].mg-input::-moz-range-progress {
  height: 5px; border-radius: 999px; background: var(--accent);
}
input[type="range"].mg-input::-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"].mg-input::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card-2);
}
input[type="range"].mg-input:focus-visible { outline: none; }
input[type="range"].mg-input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.mg-field-range .mg-out {
  position: absolute; top: 0; right: 0;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
}
.mg-field-range { padding-top: 1px; }

.mg-drop {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  font-size: .82rem; color: var(--muted-2); text-align: left;
  background: rgba(255, 255, 255, .012);
  border: 2px dashed var(--line); border-radius: 10px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.mg-drop:hover, .mg-drop:focus-visible, .mg-drop.over {
  border-color: var(--accent); background: rgba(108, 139, 255, .06); outline: none;
}
.mg-drop img {
  width: 42px; height: 42px; object-fit: cover; border-radius: 7px; flex: 0 0 auto;
  background: #0b0e1c;
}
.mg-drop.has-img { border-style: solid; color: var(--text); }
.mg-drop span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.mg-full { width: 100%; }
.mg-block .btn + .btn, .mg-block .mg-field + .btn { margin-top: 10px; }
.mg-note { margin: 12px 0 0; font-size: .78rem; line-height: 1.55; color: var(--muted-2); }

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

/* ── status ───────────────────────────────────────────────────────────────── */
.mg-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);
}
.mg-status.is-ok { color: #7ee2a8; border-color: color-mix(in srgb, #5cd98a 38%, transparent); }
.mg-status.is-error { color: #ff9eb0; border-color: color-mix(in srgb, #ff6b8a 38%, transparent); }
.mg-status.is-busy { color: var(--text); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

@media (pointer: coarse) {
  .mg-tbtn, .mg-ratio { min-height: 44px; }
  .mg-input { min-height: 44px; }
  input[type="color"].mg-input { height: 40px; min-height: 40px; }
}
@media (max-width: 640px) {
  .mg-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .mg-stage { padding: 10px; }
  .mg-stage canvas { max-height: 52vh; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-card { transition: none; }
  .mg-card:hover, .mg-card:focus-visible { transform: none; }
}