/* Pin to video.
 *
 * Built on the house tokens (css/tokens.css) and the house Glow-UI grammar
 * (css/glow.css), the same way views/readalong.css is — accent through
 * `var(--glow-accent, #a78bfa)`, radii from --radius-sm/md/lg (6/10/12),
 * spacing from --space-*, state colours from --danger / --success. No hex
 * literals of its own, no new type scale.
 *
 * THE ONE LAW (Glow-UI): everything interactive glows dimly; the chosen one
 * glows brighter. State is BRIGHTNESS, never a flat grey beside a lit thing.
 *
 * BRIGHTNESS BUDGET, brightest first:
 *   1. the picture itself      — the hero, its own elevation
 *   2. Make the video, and whichever choice is picked right now
 *   3. idle choices            — dim, but lit
 *   4. cards                   — soft ambient only
 */

/* ------------------------------------------------------------ the picker */

.pv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--glow-accent, #a78bfa) 45%, transparent);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 4%, transparent);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

/* Dragging over it is the one moment this zone is the brightest thing on
   the screen — it has to look like it will catch what is being dropped. */
.pv-drop-over {
  border-color: var(--glow-accent, #a78bfa);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
}

.pv-drop-text {
  margin: 0;
  font-weight: 600;
}

.pv-file,
.pv-music-file {
  max-width: 100%;
}

/* ----------------------------------------------------------- the picture */

.pv-run {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pv-run-top {
  display: flex;
  gap: var(--space-2);
}

.pv-preview-wrap {
  display: flex;
  justify-content: center;
}

.pv-preview {
  display: block;
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 0 24px color-mix(in srgb, var(--glow-accent, #a78bfa) 20%, transparent);
}

/* ----------------------------------------------------------- the choices */

.pv-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pv-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pv-step-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pv-step-head h3 {
  margin: 0;
}

/* The live readout — "5 seconds", "Music volume — Normal". It is the answer
   to the control beside it, so it stays quieter than the question. */
.pv-step-note {
  color: var(--text-muted, #93a4b3);
  font-size: 0.9em;
}

.pv-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pv-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  cursor: pointer;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 5%, transparent);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.pv-choice:hover {
  border-color: color-mix(in srgb, var(--glow-accent, #a78bfa) 55%, transparent);
}

/* Picked = brighter, never a different colour family. */
.pv-choice-on {
  border-color: var(--glow-accent, #a78bfa);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 16%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--glow-accent, #a78bfa) 28%, transparent);
}

.pv-choice-label {
  font-weight: 600;
}

.pv-choice-hint {
  color: var(--text-muted, #93a4b3);
  font-size: 0.85em;
}

.pv-range {
  width: 100%;
  max-width: 320px;
  accent-color: var(--glow-accent, #a78bfa);
}

/* -------------------------------------------------------------- music */

.pv-music,
.pv-volume,
.pv-music-add {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pv-music-add {
  padding-top: var(--space-1);
}

/* --------------------------------------------------------- the making */

.pv-make {
  align-self: flex-start;
  padding: var(--space-2) var(--space-5);
  font-size: 1.05em;
}

.pv-working {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pv-bar {
  height: 8px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 10%, transparent);
}

.pv-bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-sm, 6px);
  background: var(--glow-accent, #a78bfa);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 45%, transparent);
  transition: width 300ms ease;
}

.pv-progress-line {
  margin: 0;
}

/* ---------------------------------------------------------- the result */

.pv-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pv-done h3 {
  margin: 0;
}

.pv-result-video {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-elevated, #0a1722);
  box-shadow: 0 0 24px color-mix(in srgb, var(--glow-accent, #a78bfa) 20%, transparent);
}

.pv-done-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ---------------------------------------------------------- it stopped */

.pv-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pv-error h3 {
  margin: 0;
  color: var(--danger, #f87171);
}

.pv-error-what {
  margin: 0;
}

.pv-error-fix {
  margin: 0;
  color: var(--text-muted, #93a4b3);
}

/* ------------------------------------------------------- say something */

.pv-say-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pv-say-hint {
  margin: 0;
}

.pv-say {
  width: 100%;
  min-height: 96px;
  padding: var(--space-2);
  resize: vertical;
  font: inherit;
  color: var(--text, #e6edf3);
  background: var(--bg-elevated, #0a1722);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 25%, transparent);
  border-radius: var(--radius-md, 10px);
}

.pv-say:focus {
  outline: none;
  border-color: var(--glow-accent, #a78bfa);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
}

.pv-count {
  align-self: flex-end;
  font-size: 0.85em;
  color: var(--text-muted, #93a4b3);
}

.pv-voice-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.pv-voice-select {
  padding: 6px 10px;
  font: inherit;
  color: var(--text, #e6edf3);
  background: var(--bg-elevated, #0a1722);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 25%, transparent);
  border-radius: var(--radius-sm, 6px);
}

.pv-say-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.pv-say-length {
  margin: 0;
}

.pv-say-audio {
  width: 100%;
  max-width: 420px;
}