/* ------------------------------------------------------------------
   Video maker — the editor
   ------------------------------------------------------------------
   Declared in the registry entry's `styles`, so it loads on this page
   and nowhere else.

   Built entirely from the existing design tokens. No new palette, no
   new radii, no new spacing scale: an editor with its own visual
   language would stop looking like the same product as the studio it
   sits beside.

   The layout is deliberately quiet. The canvas is the only element
   allowed to draw attention; the panels around it are borders and
   background tints so the frame reads as the subject.
   ------------------------------------------------------------------ */

.ved {
  /* The editor is wide, and the canvas is the reason. */
  max-width: 100%;
}

/* ---- Top bar ---- */
.ved__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}

.ved__name {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.ved__meta {
  margin: .2rem 0 0;
  font-size: .78rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.ved__barActions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ved__saved {
  font-size: .76rem;
  color: var(--ink-4);
}

/* ---- Three columns ----
   188px of scenes, the canvas taking everything left over, 264px of
   properties. The canvas is `minmax(0, 1fr)` rather than `1fr` so it can
   actually shrink: with plain `1fr` a wide child refuses to go below its
   content width and the whole grid overflows sideways. */
.ved__grid {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) 264px;
  gap: 1rem;
  align-items: start;
}

.ved__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  padding: .7rem;
  min-width: 0;
}

.ved__panelTitle {
  margin: 0 0 .55rem;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---- Scene list ---- */
.ved__scenes {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 560px;
  overflow-y: auto;
}

.ved__scene {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ved__scene:hover {
  border-color: var(--border-strong);
}

/* The selected scene has to be obvious at a glance — the canvas alone
   does not say which of five scenes is on screen. */
.ved__scene--on {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.ved__scene--on .ved__sceneNum {
  color: var(--brand-strong);
  font-weight: 650;
}

.ved__thumb {
  width: 42px;
  height: 75px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--bg-muted);
  display: block;
}

.ved__sceneMeta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.ved__sceneNum {
  font-size: .78rem;
  color: var(--ink-2);
}

.ved__sceneDur {
  font-size: .72rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ---- Canvas ---- */
.ved__stage {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}

.ved__stageInner {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.ved__canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  border-radius: var(--radius-sm);
  display: block;
  box-shadow: 0 2px 14px rgba(2, 6, 23, .22);
}

/* ---- Transport ---- */
.ved__transport {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .78rem;
  color: var(--ink-3);
}

.ved__btn {
  font: inherit;
  font-size: .78rem;
  padding: .3rem .6rem;
  min-width: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.ved__btn:hover {
  border-color: var(--brand-border);
  color: var(--brand-strong);
}

.ved__btn--primary {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-strong);
  font-weight: 600;
}

.ved__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ved__time {
  margin-left: .35rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.ved__framecount,
.ved__scenename {
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ---- Export ----
   Sits with the transport rather than in a modal: what it exports is the
   frame directly above it, and separating the two would invite the
   question of whether they are the same thing. */
.ved__export {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
}

.ved__exportBtn {
  flex: 0 0 auto;
}

.ved__exportNote {
  margin: 0;
  font-size: .74rem;
  color: var(--ink-4);
  max-width: 46ch;
}

/* ---- Export job ----
   Stage and count are text, not decoration: the brief allows no invented
   percentage, so when nothing has been measured the bar moves but the
   number stays blank. */
.ved__job {
  margin-top: .7rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.ved__jobHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .45rem;
}

.ved__jobStage {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
}

.ved__jobCount {
  font-size: .74rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.ved__jobBar {
  display: flex;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}

.ved__jobFill {
  display: block;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  transition: width .25s ease;
}

.ved__jobFill[data-indeterminate] {
  width: 30%;
  animation: ved-export-slide 1.2s ease-in-out infinite alternate;
}

@keyframes ved-export-slide {
  from { margin-left: 0; }
  to   { margin-left: 70%; }
}

.ved__jobMsg {
  margin: .5rem 0 0;
  font-size: .76rem;
  color: var(--ink-3);
}

.ved__jobMsg--ok {
  color: var(--ink-2);
}

.ved__jobMsg--err {
  color: var(--err);
}

.ved__jobActions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

/* The one animation in this file, and it carries no information that is
   lost when it stops — the stage text says everything the bar does. */
@media (prefers-reduced-motion: reduce) {
  .ved__jobFill {
    transition: none;
  }

  .ved__jobFill[data-indeterminate] {
    animation: none;
    margin-left: 35%;
  }
}

/* ---- Properties ---- */
.ved__props {
  max-height: 560px;
  overflow-y: auto;
}

.ved__section + .ved__section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.ved__sectionTitle {
  margin: 0 0 .2rem;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.ved__help {
  margin: 0 0 .55rem;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-4);
}

.ved__row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: .55rem;
}

.ved__label {
  font-size: .76rem;
  color: var(--ink-2);
}

.ved__input,
.ved__file {
  font: inherit;
  font-size: .78rem;
  width: 100%;
  min-width: 0;
  padding: .35rem .45rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

.ved__input:focus-visible,
.ved__file:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Timeline ----
   Blocks are sized by their frame count, so the bar is a true picture of
   the timeline rather than an evenly divided strip. */
.ved__timelineWrap {
  margin-top: 1rem;
}

.ved__timeline {
  position: relative;
  display: flex;
  gap: 2px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  cursor: pointer;
  overflow: hidden;
}

.ved__block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .3rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: .68rem;
  color: var(--ink-4);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ved__block:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.ved__block:last-child {
  border-right: 0;
}

.ved__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand);
  pointer-events: none;
  transform: translateX(-1px);
}

.ved__hint {
  margin: .5rem 0 0;
  font-size: .74rem;
  color: var(--ink-4);
  max-width: 70ch;
}

.ved__error {
  margin: 0 0 .75rem;
  padding: .6rem .7rem;
  border: 1px solid var(--err);
  border-radius: var(--radius-sm);
  background: var(--err-bg);
  color: var(--err);
  font-size: .8rem;
}

/* ---- Narrower screens ----
   Properties drop beneath the canvas before the grid is allowed to
   squeeze three columns into an unreadable width. */
@media (max-width: 1080px) {
  .ved__grid {
    grid-template-columns: 176px minmax(0, 1fr);
  }

  .ved__panel--props {
    grid-column: 1 / -1;
  }

  .ved__props {
    max-height: none;
  }
}

/* ---- Mobile ----
   Single column with the canvas first, because the frame is the reason
   the page exists. The scene list becomes a horizontal strip so it does
   not push the canvas off the screen — and the page never scrolls
   sideways. */
@media (max-width: 760px) {
  .ved__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ved__panel--scenes {
    order: 2;
  }

  .ved__stage {
    order: 1;
  }

  .ved__panel--props {
    order: 3;
  }

  .ved__scenes {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    padding-bottom: .3rem;
  }

  .ved__scene {
    flex: 0 0 auto;
    width: 96px;
    flex-direction: column;
    align-items: flex-start;
  }

  .ved__thumb {
    width: 100%;
    height: 84px;
  }

  .ved__stageInner {
    min-height: 0;
    padding: .5rem;
  }

  .ved__canvas {
    max-height: 62vh;
  }

  .ved__meta {
    font-size: .74rem;
  }
}