/* Long to Shorts: the phone-shaped preview, the moment map, trimming by the
   word, and the portrait short cards. Built on create.css's tokens (--bg,
   --panel, --raised, --ink, --muted, --subtle, --line, --lilac, --mint). */

/* ── The stage: a window onto the creator's own video, in the short's shape ── */
.shorts-stage { display: grid; place-items: center; padding: 18px 12px; min-height: 100%; }
.shorts-phone {
  position: relative; height: min(66vh, 640px); aspect-ratio: var(--shorts-ratio, 9 / 16); max-width: 100%;
  border-radius: 18px; overflow: hidden; background: #05060a;
  border: 1px solid #dbccf224; box-shadow: 0 30px 70px -30px #000000e6;
}
/* Sized and placed by ShortsStage.wirePhone from shorts-core.js cropBox(); cover until the video reports its size. */
.shorts-phone video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }
.shorts-phone[data-shape="4:5"] { height: min(58vh, 560px); }
.shorts-phone[data-shape="1:1"] { height: min(50vh, 460px); }
.shorts-phone[data-shape="16:9"] { height: auto; width: min(520px, 40vw); }
.shorts-phone.is-original video { position: static; width: 100%; height: 100%; object-fit: contain; }
.shorts-phone .shorts-top {
  position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px;
  font-size: 10px; color: #ffffffe0; pointer-events: none;
}
.shorts-phone .shorts-top span { background: #00000059; border-radius: 999px; padding: 2px 8px; backdrop-filter: blur(4px); }
/* Captions, drawn from the same cues the cutter burns in (shorts-core.js). */
.shorts-cap {
  position: absolute; left: 7.4%; right: 7.4%; bottom: 16%; text-align: center; pointer-events: none;
  font-family: "Liberation Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 1.12; color: #fff;
  /* --shorts-cap-unit is the window's captionUnit(): its short side (less on a wide frame), as the cutter sizes them. */
  font-size: calc(var(--shorts-cap-unit, 360px) * 0.0711);
  -webkit-text-stroke: calc(var(--shorts-cap-unit, 360px) * 0.0064) #000; paint-order: stroke fill;
  text-shadow: 0 calc(var(--shorts-cap-unit, 360px) * 0.0028) 0 #00000080;
}
.shorts-cap b { font-weight: 700; color: #a98cff; font-size: 1.12em; }
/* The hook title (shorts-core HOOK_LOOK): top centre on a soft band, faded in and out as the cutter's \fad does. */
.shorts-hook-title {
  position: absolute; left: 7.4%; right: 7.4%; top: 9%; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  font-family: "Liberation Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; color: #fff; line-height: 1.32;
  font-size: calc(var(--shorts-cap-unit, 360px) * 0.0747);
}
.shorts-hook-title.is-on { opacity: 1; }
.shorts-hook-title span { background: rgba(0, 0, 0, .62); padding: calc(var(--shorts-cap-unit, 360px) * 0.0111); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { .shorts-hook-title { transition: none; } }
/* Word by word: the word being said is lit, at its own size (no reflow as it moves). */
.shorts-phone[data-caption-look="words"] .shorts-cap b { font-size: 1em; }
/* Clean: sentence case on a soft dark band (the cutter's BorderStyle 3 box: 62% black, padded by the outline). */
.shorts-phone[data-caption-look="clean"] .shorts-cap {
  text-transform: none; font-size: calc(var(--shorts-cap-unit, 360px) * 0.0604); line-height: 1.32;
  -webkit-text-stroke: 0; text-shadow: none;
}
.shorts-phone[data-caption-look="clean"] .shorts-cap span {
  background: rgba(0, 0, 0, .62); padding: calc(var(--shorts-cap-unit, 360px) * 0.0083);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.shorts-phone .shorts-scrub { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 2px; background: #ffffff2e; }
.shorts-phone .shorts-scrub i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: linear-gradient(110deg, #d3baf5, #aabfea); }
.shorts-phone .shorts-drag {
  position: absolute; inset: 0; cursor: ew-resize; display: grid; place-items: center;
  background: linear-gradient(90deg, #c9b6ff1f, transparent 18%, transparent 82%, #c9b6ff1f);
}
.shorts-phone .shorts-drag.is-vertical { cursor: ns-resize; background: linear-gradient(180deg, #c9b6ff1f, transparent 18%, transparent 82%, #c9b6ff1f); }
.shorts-phone .shorts-drag span { font-size: 11px; color: #fff; background: #0000008c; border-radius: 999px; padding: 4px 10px; }
.shorts-stage-note { margin-top: 10px; font-size: 11px; color: var(--subtle); text-align: center; max-width: 360px; }

/* ── The card: listening, the moment map, the editor, export ─────────────── */
.shorts-card { display: grid; gap: 14px; }
.shorts-card .eyebrow { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--subtle); font-weight: 600; }
.shorts-progress { display: grid; gap: 4px; font-size: 11px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.shorts-progress .bar { height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.shorts-progress .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(110deg, #d3baf5, #aabfea); transition: width .4s ease; }
.shorts-progress .bar.is-heard i { background: var(--mint); }

.shorts-map { display: grid; gap: 5px; }
.shorts-map-track { position: relative; height: 44px; border-radius: 9px; background: #0c0e15; border: 1px solid var(--line); overflow: hidden; }
.shorts-map-bars { position: absolute; inset: 6px; display: flex; align-items: center; gap: 1px; }
.shorts-map-bars i { flex: 1; min-width: 0; border-radius: 1px; background: #ffffff21; }
.shorts-mark {
  position: absolute; top: 0; bottom: 0; padding: 0; border: 0; cursor: pointer; min-width: 4px;
  background: #c9b6ff33; border-left: 1px solid #c9b6ffb3; border-right: 1px solid #c9b6ffb3;
}
.shorts-mark span { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: var(--lilac); }
.shorts-mark[aria-pressed="true"] { background: #a6d5c447; border-color: var(--mint); }
.shorts-mark[aria-pressed="true"] span { color: var(--mint); }
.shorts-map-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--subtle); font-variant-numeric: tabular-nums; }

.shorts-editor { display: grid; gap: 12px; }
.shorts-field { display: grid; gap: 6px; }
.shorts-field > span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); font-weight: 600; }
.shorts-hook {
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); width: 100%;
  background: #0c0e15; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px;
}
.shorts-hook:focus { outline: none; border-color: #c9b6ff80; }
.shorts-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Trim by the word: every word is a button; the kept ones are lit, the ends have handles. */
.shorts-words {
  max-height: 168px; overflow-y: auto; background: #0c0e15; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.85; color: var(--subtle);
}
.shorts-words [data-recut-action] { cursor: pointer; padding: 2px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.shorts-words [data-recut-action]:hover { color: var(--ink); background: #ffffff14; }
.shorts-words .is-kept { color: var(--ink); background: #c9b6ff26; }
.shorts-words .is-first { border-left: 3px solid var(--lilac); padding-left: 3px; border-radius: 3px 0 0 3px; }
.shorts-words .is-last { border-right: 3px solid var(--lilac); padding-right: 3px; border-radius: 0 3px 3px 0; }
.shorts-words .shorts-gap { color: var(--subtle); letter-spacing: .2em; }
.shorts-words .shorts-piece { font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--lilac); background: #c9b6ff1f; border-radius: 4px; padding: 1px 5px; margin-right: 4px; vertical-align: .15em; }
.shorts-words .shorts-join { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.2em; margin: 0 4px; background: var(--mint); border-radius: 1px; }
.shorts-hint { font-size: 11px; color: var(--subtle); }
.shorts-select select { font: inherit; font-size: 12px; color: var(--ink); background: #0c0e15; border: 1px solid #dbccf224; border-radius: 8px; padding: 5px 9px; }

.shorts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--muted); }
.shorts-row > span:first-child { width: 58px; color: var(--subtle); }
.shorts-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid #dbccf224; border-radius: 8px; }
.shorts-seg button { font: inherit; font-size: 11.5px; color: #8c90a7; background: none; border: 0; border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.shorts-seg button[aria-pressed="true"] { background: #c9b6ff24; color: #e7defe; }

.shorts-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shorts-go {
  font: inherit; font-size: 13px; font-weight: 700; color: #262339; border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer;
  background: linear-gradient(110deg, #d3baf5, #aabfea);
}
.shorts-go[disabled] { opacity: .55; cursor: default; }
.shorts-ghost {
  font: inherit; font-size: 12.5px; color: #d6d0ea; background: none; border: 1px solid #dbccf224; border-radius: 9px; padding: 9px 13px; cursor: pointer;
}
.shorts-ghost:hover { border-color: #c9b6ff66; }
.shorts-error { font-size: 12px; color: #f2b8a2; background: #f2b8a21a; border-radius: 8px; padding: 8px 10px; }
.shorts-done { font-size: 12px; color: var(--mint); }

/* ── The strip: portrait cards, still frames (one <video> on the page) ───── */
.shorts-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.shorts-tile { flex: none; width: 112px; display: grid; gap: 5px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.shorts-tile .shorts-thumb { position: relative; aspect-ratio: var(--shorts-ratio, 9 / 16); border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0c0e15 center / cover no-repeat; opacity: .82; }
.shorts-tile .shorts-thumb em { position: absolute; left: 6px; top: 6px; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: #00000073; border-radius: 999px; padding: 1px 6px; }
.shorts-tile .shorts-thumb .shorts-state { position: absolute; left: 6px; bottom: 6px; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mint); background: #000000a6; border-radius: 999px; padding: 2px 6px; }
.shorts-tile[aria-pressed="true"] .shorts-thumb { opacity: 1; border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.shorts-tile:hover .shorts-thumb { opacity: 1; }
#filmSequence[data-shape="1:1"] .shorts-tile, #filmSequence[data-shape="4:5"] .shorts-tile { width: 128px; }
#filmSequence[data-shape="16:9"] .shorts-tile { width: 176px; }
.shorts-tile strong { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.shorts-tile small { font-size: 10px; color: var(--subtle); font-variant-numeric: tabular-nums; }

/* ── The home panel's one optional line ──────────────────────────────────── */
.shorts-lookfor {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px;
}
.shorts-lookfor input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; outline: none; }
.shorts-lookfor input::placeholder { color: var(--subtle); }
.shorts-lookfor small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }

@media (max-width: 700px) {
  .shorts-phone { height: min(58vh, 560px); }
  .shorts-phone[data-shape="1:1"] { height: auto; width: min(100%, 420px); }
  .shorts-phone[data-shape="16:9"] { height: auto; width: 100%; }
  .shorts-tile { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .shorts-progress .bar i { transition: none; } }

/* ── The workspace while a Shorts project is open (ShortsStage adds .is-shorts) ── */
.film-workspace.is-shorts .film-production-tools,
.film-workspace.is-shorts .film-playback,
.film-workspace.is-shorts #filmSceneCaption,
.film-workspace.is-shorts #filmSongMount,
.film-workspace.is-shorts #filmProductionMount,
.film-workspace.is-shorts .film-sequence-heading > span:first-child { display: none; }
.film-workspace.is-shorts .film-stage { aspect-ratio: auto; overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
.film-workspace.is-shorts .film-sequence { min-height: 0; }
.shorts-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; justify-items: stretch; padding: 6px 0 12px; min-height: 0; place-items: initial; }
.shorts-phone-wrap { display: grid; justify-items: center; align-content: start; gap: 8px; }
.shorts-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.shorts-side .shorts-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.shorts-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 20px; text-align: center; background: linear-gradient(160deg, #211f30, #142631 52%, #151a24); }
.shorts-empty strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.shorts-empty span { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1100px) { .shorts-stage { grid-template-columns: 1fr; } }

/* The film's own controls mean nothing to a Shorts project. */
.film-workspace.is-shorts #filmMaking,
.film-workspace.is-shorts #filmDirectionLabel,
.film-workspace.is-shorts #filmWritingCost,
.film-workspace.is-shorts .film-writing-limit,
.film-workspace.is-shorts .film-footer,
.film-workspace.is-shorts .film-project-format { display: none; }