/* ==========================================================================
   Editor — view-swap shell and Phase 1 editor scaffolding
   Mobile app shell pattern: fixed bottom action bar on <768px, the same
   actions in the top bar / side rail on >=768px (one JS config drives both).
   ========================================================================== */

/* --- View transitions (landing <-> editor) ---------------------------------
   iOS-style horizontal slide, ~300ms, opaque backgrounds, overflow-x hidden
   while animating. Disabled under prefers-reduced-motion (base.css collapses
   the duration; the rule below also removes the transform). */

body.is-transitioning {
  overflow-x: hidden;
}

.view-stage.is-animating {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  transition: transform var(--duration-view) var(--ease-view);
  will-change: transform;
}

.view-stage.is-animating > .view {
  flex: 0 0 100%;
  min-width: 100%;
  background: var(--surface-page);
}

@media (prefers-reduced-motion: reduce) {
  .view-stage.is-animating {
    transition: none;
  }
}

/* --- Editor shell ------------------------------------------------------------
   Fixed app layout: the editor view never exceeds the viewport.
   - Desktop: preview + rail side by side, filmstrip fixed at the bottom,
     rail scrolls internally.
   - Mobile: preview stays visible at the top; filmstrip + settings live in
     a shared scrollable area below the preview (filmstrip is not fixed). */

body.editor-active {
  background: var(--surface-page);
  overflow: hidden;
}

.view-editor {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* Left column wrapper: transparent on mobile (children join the flex column),
   a real grid item on desktop. */
.editor-left {
  display: contents;
}

/* Top bar: back control + title on all sizes; hosts the shell actions on
   desktop only. */

.editor-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

.editor-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.editor-back:hover {
  color: var(--text-primary);
}

.editor-back:active {
  transform: scale(0.95);
}

.editor-back .icon {
  --icon-size: 18px;
}

.editor-topbar-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-topbar-actions {
  display: none; /* desktop only — mobile uses the bottom app bar */
  margin-left: auto;
  align-items: center;
  gap: var(--space-2);
}

/* Preview: canvas centred in the available space, transport controls below. */

.editor-preview {
  flex: 0 0 auto;
  /* Fixed height on mobile: the canvas letterboxes (object-fit: contain) so
     switching 16:9 <-> 9:16 never resizes the preview area. */
  height: 32dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-sunken);
  min-height: 0;
  min-width: 0;
}

.preview-stage {
  position: relative;
  flex: 1;
  display: grid;
  min-height: 0;
}

.preview-stage > * {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

/* Canvas + overlay fill the stage box; their drawing buffers share the same
   intrinsic aspect, so object-fit: contain letterboxes them identically and
   the overlay lands exactly on the video content. */
.preview-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  box-shadow: var(--shadow-md);
}

.title-overlay {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  pointer-events: none;
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

.preview-play {
  flex: none;
  min-width: 84px;
}

.preview-progress {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  touch-action: none;
}

.preview-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.preview-progress-fill {
  position: absolute;
  left: 0;
  height: 4px;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  z-index: 1;
}

.preview-time {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 76px;
  text-align: right;
}

/* Editor dark theme: applied whenever the editor is active (homepage or /maker/). */
body.editor-active {
  --surface-page: #000000;
  --surface-raised: #111111;
  --surface-sunken: #0a0a0a;
  --surface-inverse: #ffffff;
  --surface-translucent: rgba(0, 0, 0, 0.72);
  --scrim: rgba(0, 0, 0, 0.65);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.74);
  --text-tertiary: rgba(255, 255, 255, 0.52);
  --text-on-inverse: #111111;
  --text-on-inverse-secondary: rgba(17, 17, 17, 0.62);

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-inverse: rgba(17, 17, 17, 0.16);

  --brand-primary: #ffffff;
  --brand-primary-hover: #e8e8e8;
  --brand-on-primary: #111111;

  background: #000000;
  color: #ffffff;
}

/* The video canvas is the visual card on top of the dark editor. */
.preview-canvas {
  background: #000000;
  border: 1px solid var(--border-subtle);
}

/* Progress bar: yellow fill on a subtle dark track. */
.preview-progress-fill {
  background: #f7e66b;
}

/* --- Timeline visualizer (advanced, hidden by default) -------------------- */

.editor-timeline {
  flex: none;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
  min-width: 0;
}

.timeline-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.timeline-toggle:hover {
  color: var(--text-primary);
}

.timeline-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.timeline-toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-1px);
}

.timeline-toggle .icon {
  --icon-size: 16px;
}

.timeline-panel {
  padding: 0 var(--space-4) var(--space-4);
}

.timeline-track {
  position: relative;
  height: 56px;
}

.timeline-segments {
  display: flex;
  height: 100%;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  overflow: hidden;
}

.timeline-segment {
  position: relative;
  flex: none;
  min-width: 0;
  border-right: 1px solid var(--border-subtle);
}

.timeline-segment:last-of-type {
  border-right: none;
}

.timeline-segment-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  pointer-events: none;
}

.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
  pointer-events: none;
}

.timeline-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}

.timeline-handle:active {
  cursor: grabbing;
}

.timeline-handle-bar {
  width: 4px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.timeline-handle:hover .timeline-handle-bar,
.timeline-handle:focus-visible .timeline-handle-bar {
  transform: scaleY(1.15);
}

.timeline-handle.is-dragging .timeline-handle-bar {
  background: var(--brand-primary-hover);
  transform: scaleY(1.25);
}

.timeline-handle-value {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.timeline-handle:hover .timeline-handle-value,
.timeline-handle:focus-visible .timeline-handle-value,
.timeline-handle.is-dragging .timeline-handle-value {
  opacity: 1;
}

.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--brand-primary);
  z-index: 3;
  pointer-events: none;
}

.timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 36px;
  padding-top: var(--space-2);
}

.timeline-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.timeline-reset {
  flex: none;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.timeline-reset:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* Scrollable area on mobile: filmstrip + settings rail share one vertical
   scroll container; horizontal scroll is never allowed. */

.editor-scrollable {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Filmstrip: live count + horizontal thumbnail strip. Tiles are 64px so the
   whole tile clears the 44px touch-target minimum. */

.editor-filmstrip {
  flex: none;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
  min-width: 0;
}

.filmstrip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.filmstrip-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.filmstrip-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.filmstrip-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--space-2);
  padding: var(--space-1);
}

.filmstrip-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.filmstrip-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  overflow: hidden;
}

.filmstrip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filmstrip-tile.is-current .filmstrip-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #f7e66b;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

/* Processing: quiet pulse so the strip feels alive while decoding. */
.filmstrip-tile.is-processing .filmstrip-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-sunken);
  animation: filmstrip-pulse 1.4s ease-in-out infinite;
}

@keyframes filmstrip-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.7;
  }
}

.filmstrip-tile.is-error .filmstrip-thumb {
  border-color: var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.filmstrip-error {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
}

.filmstrip-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-translucent);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 1; /* touch: always visible */
  transition: opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.filmstrip-remove .icon {
  --icon-size: 14px;
}

.filmstrip-remove:active {
  transform: scale(0.9);
}

@media (hover: hover) and (pointer: fine) {
  /* desktop: reveal on hover / keyboard focus */
  .filmstrip-remove {
    opacity: 0;
  }

  .filmstrip-tile:hover .filmstrip-remove,
  .filmstrip-remove:focus-visible {
    opacity: 1;
  }
}

/* Edit button: a CTA attached directly beneath the thumbnail. */
.filmstrip-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 28px;
  margin-top: -1px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.filmstrip-edit:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
  border-color: var(--text-primary);
}

.filmstrip-edit:active {
  background: var(--surface-secondary, var(--surface-sunken));
}

.filmstrip-edit .icon {
  --icon-size: 12px;
}

/* Trailing "Add photos" tile: icon only (aria-label carries the name). */
.filmstrip-add-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.filmstrip-add-tile:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.filmstrip-add-icon {
  --icon-size: 28px;
}

/* Drag-and-drop states (desktop DnD + touch ghost drag). */
.filmstrip-tile.is-dragging,
.filmstrip-tile.is-drag-source {
  opacity: 0.35;
}

.filmstrip-tile.is-ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: var(--shadow-lg);
  opacity: 0.95;
}

.filmstrip-tile.is-drop-before .filmstrip-thumb,
.filmstrip-tile.is-drop-after .filmstrip-thumb,
.filmstrip-add-tile.is-drop-after {
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}

/* --- Notices (intake feedback) -------------------------------------------- */

.notice-stack {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: grid;
  gap: var(--space-2);
  width: min(92vw, 28rem);
  pointer-events: none;
}

.notice {
  pointer-events: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Settings rail: part of the mobile scrollable area by default; on desktop
   it becomes a fixed right-hand panel that scrolls internally. */

.editor-rail {
  display: block;
  flex: none;
  min-width: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
  overflow-x: hidden;
}

/* --- Mobile app shell: fixed bottom action bar --------------------------------
   position: fixed, inset-x 0, bottom 0, 64px tall, z-index 40, extends behind
   the home indicator via safe-area padding. Translucent + backdrop blur with
   a @supports fallback, hairline top border, press feedback scale(.95). */

.app-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: var(--app-bar-height);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--surface-translucent);
  border-top: 1px solid var(--border-subtle);
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .app-bar {
    background: var(--surface-translucent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* No backdrop-filter support: fall back to an opaque bar. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .app-bar {
    background: var(--surface-page);
  }
}

.app-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-1);
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.app-bar-item:active {
  transform: scale(0.95);
}

.app-bar-item[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.app-bar-item .app-bar-icon {
  --icon-size: 24px;
}

.app-bar-item[aria-current="true"] {
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}

/* Content spacer so the fixed bar never covers content. */
.app-bar-spacer {
  flex: none;
  height: calc(var(--app-bar-height) + env(safe-area-inset-bottom));
}

/* --- Desktop (>=768px): bottom bar hidden, actions in top bar + rail ---------
   The scrollable wrapper is removed from layout (display: contents) so the
   filmstrip sits below the preview and the settings rail fills the whole right
   column. The rail scrolls internally; everything stays inside the viewport. */

@media (min-width: 768px) {
  .app-bar,
  .app-bar-spacer {
    display: none;
  }

  .editor-topbar-actions {
    display: flex;
  }

  .editor-topbar-actions .btn {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    gap: var(--space-1);
  }

  .editor-topbar-actions .btn .icon {
    --icon-size: 16px;
  }

  /* Mobile-only actions (e.g. Style jumps to the rail) hidden on desktop. */
  [data-mobile-only="true"] {
    display: none;
  }

  .editor-main {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "left rail"
      "filmstrip rail";
  }

  .editor-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }

  .editor-preview {
    flex: 1;
    height: auto;
  }

  .editor-scrollable {
    display: contents;
    overflow: visible;
  }

  .editor-filmstrip {
    grid-area: filmstrip;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--border-subtle);
    border-left: none;
    border-bottom: none;
  }

  .filmstrip-track {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .editor-rail {
    grid-area: rail;
    width: 420px;
    height: 100%;
    min-height: 0;
    padding: var(--space-4);
    border-left: 1px solid var(--border-subtle);
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* rail scroll never chains to the page */
  }
}

/* --- Settings rail controls (aspect + duration live; the rest stubs) ------- */

.rail-heading {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.rail-section {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.rail-section:first-child {
  padding-top: 0;
  border-top: none;
}

.rail-section-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.rail-control {
  display: grid;
  gap: var(--space-2);
}

.rail-control-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.rail-coming {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
}

.rail-control select,
.rail-control input[type="text"],
.rail-control textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-sizing: border-box;
}

.rail-control textarea {
  resize: vertical;
  line-height: var(--leading-body);
  font-family: inherit;
  font-size: var(--text-sm);
}

.rail-control select[disabled],
.rail-control input[disabled],
.rail-control textarea[disabled] {
  color: var(--text-tertiary);
  background: var(--surface-sunken);
}

/* Title text-style cycle button: "Aa" swatch rendered in the preset font. */
.title-style-cycle {
  width: 100%;
}

.title-style-swatch {
  font-size: var(--text-lg);
  line-height: 1;
  min-width: 1.4em;
  text-align: center;
}

.rail-note {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Segmented control (aspect ratio). */
.segmented {
  display: flex;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.segmented-option {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.segmented-option:active {
  transform: scale(0.97);
}

.segmented-option.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.segmented-option .icon {
  --icon-size: 18px;
}

/* Range slider (seconds per photo). */
.rail-control input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--brand-primary);
  background: transparent;
  cursor: pointer;
}

.rail-duration-value {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Colour grade: preset swatch grid + custom colour section. */
.rail-control-wide {
  grid-column: 1 / -1;
}

.grade-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.grade-swatch {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  min-height: 44px;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.grade-swatch:active {
  transform: scale(0.97);
}

.grade-swatch.is-active {
  border-color: var(--brand-primary);
}

.grade-swatch-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken); /* neutral grey empty state */
}

.grade-swatch-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.grade-swatch.is-active .grade-swatch-label {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.grade-custom {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.grade-hues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.grade-hue {
  width: 44px;
  height: 44px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.grade-hue::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--hue, var(--surface-sunken));
}

.grade-hue:active {
  transform: scale(0.95);
}

.grade-hue.is-active {
  border-color: var(--brand-primary);
}

.grade-color-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.grade-color-label input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  cursor: pointer;
}

/* Music section. */
.music-add {
  width: 100%;
}

.music-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.music-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.music-duration {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.music-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.music-remove .icon {
  --icon-size: 16px;
}

.music-remove:hover {
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.music-remove:active {
  transform: scale(0.95);
}

.music-beat-sync {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.music-beat-sync input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.music-beat-sync input[type="checkbox"][disabled] {
  cursor: not-allowed;
}

.music-beat-sync:has(input[disabled]) {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* Timing mode + beat density radio groups. */

.timing-modes {
  display: grid;
  gap: var(--space-1);
}

.timing-mode {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.timing-mode input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.timing-mode input[type="radio"][disabled] {
  cursor: not-allowed;
}

.timing-mode:has(input[disabled]) {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

#beat-density-control {
  margin-left: calc(20px + var(--space-3));
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-subtle);
}

/* Beat data inspector link + modal rows. */

.beat-info-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.beat-info-link .icon {
  --icon-size: 14px;
}

.beat-info-link:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-primary);
}

.beat-info-body {
  width: 100%;
  gap: var(--space-2);
}

.beat-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.beat-info-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.beat-info-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.beat-info-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* --- Export modal ---------------------------------------------------------- */

.rail-download {
  width: 100%;
}

.export-modal {
  width: min(100%, 24rem);
  text-align: center;
}

.export-modal .modal-body {
  padding: var(--space-6);
  margin-top: var(--space-5);
  gap: var(--space-4);
  justify-items: center;
}

.export-modal .modal-title {
  font-size: var(--text-xl);
}

.export-progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  overflow: hidden;
}

.export-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  transition: width var(--duration-base) var(--ease-standard);
}

.export-pct {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.export-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.export-message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.export-again {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.confirm-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Mobile rail controls: single column so nothing forces horizontal width;
   the parent scrollable area already clips overflow-x. */
@media (max-width: 767px) {
  .rail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .rail-control,
  .rail-control-wide {
    min-width: 0;
  }

  .grade-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grade-hues {
    flex-wrap: wrap;
  }
}

/* --- Modal (reusable dialog) ------------------------------------------------- */

.modal-panel {
  width: min(92vw, 28rem);
  max-height: 90vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  margin: auto;
  overflow-y: auto;
}

.modal-panel::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.modal-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
}

.modal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* --- Image options dialog ---------------------------------------------------- */

.image-options-dialog .modal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.image-options-thumb {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.image-options-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.image-options-caption {
  width: 100%;
  min-height: 80px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  resize: vertical;
  box-sizing: border-box;
}

.image-options-caption::placeholder {
  color: var(--text-tertiary);
}

.image-options-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.image-options-delete {
  color: var(--text-error, #c0392b);
}

@media (max-width: 767px) {
  .image-options-dialog {
    width: min(92vw, 26rem);
    max-height: 85vh;
    margin: auto;
    border-radius: var(--radius-lg);
  }
}