/* prompts.css — 31 Oct 2026, reworked 1 Nov 2026. THE PROMPTS page (src/PromptsPage.jsx): the chip rows (the Shots page's own
   .sf-seq-chip chips in .sp-reelbar), the shot cards, the clip cards (one size: a storyboard of every shot, equal frames, no empty
   cell), an opened clip (2 Nov 2026: shot sections left, model / package images / prompt right, no reference picker), and
   a shot's package opened under a card's row: the REFERENCES on the left (the Generate page's own picker) and on the right the
   Generate page's video settings (its model pills .gen-model-btn and Duration slider .gen-duration-slider), the four plan
   boxes (one block per shot in a clip) and the prompt. Its own pmt-* classes only. Colours are tokens (the separation ladder:
   a panel is --sep-panel-fill on the page, a card --sep-card-fill, a row --sep-row-fill), so every skin repaints it and none
   resizes it. FIXED SIZES (invariant 20): the chip rows, card rows, the lane, its settings row, boxes, shot blocks and prompt
   have fixed heights with clamped lines, so opening a card moves only what is BELOW its row, and a click or a keystroke inside
   a package (a lane tab, a model, the prompt switching from built to typed) changes nothing around it.
   Round 3 (2 Nov 2026): the cards' edge is their own overlay (see THE CARD'S EDGE), the clip storyboard is a square grid of
   frame-shaped cells (--pmt-ar, set by the page from the project's aspect), an opened clip hugs its rows, and the prompt box
   ends with the send row (.pmt-send, the Generate page's .gen-go-btn). */
.view-page.pmt-page { gap: 10px; }

/* ── the chip rows: the Shots page's own chips; a label on the left, the chips on one line ── */
.pmt-bars { flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pmt-barrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pmt-bar-label {
  flex: none; width: 76px;
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase;
  color: var(--sep-panel-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmt-bar.sp-reelbar { flex: 1 1 auto; min-width: 0; padding: 0 0 2px; }
.sp-filmbar.pmt-modes .sf-seq-chip { flex: 0 0 auto; min-width: 150px; }

/* ── the body: scrolls inside itself, the chip rows stay ── */
.pmt-body { flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; padding: 4px 4px 28px; scrollbar-width: thin; }
.pmt-empty { padding: 36px 12px; text-align: center; font-size: var(--fs-13); line-height: 1.5; color: var(--sep-panel-ink-muted); }
.pmt-empty--err { color: var(--danger); }

/* ── the card grids: the column count is set by the page (--pmt-cols), so the open package can sit under a row ── */
.pmt-grid { display: grid; grid-template-columns: repeat(var(--pmt-cols, 4), minmax(0, 1fr)); gap: 12px; align-items: start; min-width: 0; }
.pmt-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--r-md);
  background: var(--sep-card-fill);
  box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--card-border) 55%, transparent);
  transition: box-shadow var(--dur-0) ease;
}
.pmt-card.is-omitted { opacity: 0.5; }
.pmt-card:focus-visible { outline: none; }
/* THE CARD'S EDGE (round 3, 2 Nov 2026; Hugo: "when I am hovering a card, the top edge is disappearing"). Measured cause: the
   shared hover of views-pages.css (.view-page .interactive-card:hover) LIFTS the card 2 px (translateY(-2px)) and draws its
   edge as an OUTER 1.5 px box-shadow (!important, over this file's own ring), while the scrolling body (.pmt-body,
   overflow-y auto) had 2 px of top padding: the lifted card's top sat exactly on the body's edge and its ring was outside
   the body's clip box, so the top edge was cut (and its top corners with it). Its inset top line and the gradient ::after
   edge lie under the picture (.glass > * is z-index 1), so nothing else drew a top edge. Here the card never lifts, and
   its edge is its own overlay: ::after, INSIDE the card, above the picture (z-index 2), all four sides in every state
   (rest hairline, hover and open 2 px rings); the body keeps 4 px around the cards. */
.view-page.pmt-page .pmt-card,
.view-page.pmt-page .pmt-card:hover { transform: none !important; }
.view-page.pmt-page .pmt-card:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-ink) 18%, transparent) !important; }
.view-page.pmt-page .pmt-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 0; opacity: 1 !important;
  background: none !important; -webkit-mask: none; mask: none;
  box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--ink) 26%, transparent);
}
.view-page.pmt-page .pmt-card:hover::after { box-shadow: inset 0 0 0 var(--ring-w) color-mix(in srgb, var(--nav-active) 85%, transparent); }
.view-page.pmt-page .pmt-card.is-over::after { box-shadow: inset 0 0 0 var(--hairline-w) var(--warn); }
.view-page.pmt-page .pmt-card.is-open::after,
.view-page.pmt-page .pmt-card:focus-visible::after { box-shadow: inset 0 0 0 var(--ring-w) var(--leaf); }
.pmt-card-thumb { aspect-ratio: var(--pmt-ar, 2.3333); overflow: hidden; background: var(--sep-row-fill); }
.pmt-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px 9px; }
.pmt-card-top { display: flex; align-items: center; gap: 6px; height: 18px; min-width: 0; }
.pmt-card-code { flex: none; font-family: var(--font-display); font-size: var(--fs-13); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-card-tag {
  flex: none; padding: 1px 6px; border-radius: var(--r-xs);
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; line-height: 14px;
  color: var(--sep-panel-ink-muted);
  background: var(--sep-row-fill);
}
.pmt-card-len { margin-left: auto; flex: none; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); }
.pmt-card-title { height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-13); font-weight: var(--fw-semi); line-height: 18px; color: var(--ink); }
.pmt-card-cam { height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-11); line-height: 16px; color: var(--sep-panel-ink-muted); }

/* ── a clip card: a STORYBOARD (round 3, 2 Nov 2026). Every clip card has the same outer size (at most four a row): its
   picture area has the frame's shape (--pmt-ar, the project's aspect) and is a SQUARE grid (1x1, 2x2 for 2-4 shots, 3x3
   for 5-9, 4x4 beyond), so every cell has the frame's shape too and the frame is CONTAINED (shown whole, never cropped).
   The cells after the last shot are quiet placeholders. A shot with no current frame is its cell with its number and code. ── */
.pmt-sb {
  flex: none; display: grid; aspect-ratio: var(--pmt-ar, 2.3333); gap: 2px; min-width: 0; overflow: hidden;
  grid-template-columns: repeat(var(--sb-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--sb-rows, 1), minmax(0, 1fr));
  background: var(--sep-row-fill);
}
.pmt-sb-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--sep-card-fill); }
.pmt-sb-cell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pmt-sb-cell.is-ph { background: color-mix(in srgb, var(--shadow-ink) 45%, var(--sep-card-fill)); }
.pmt-sb-n {
  position: absolute; left: 4px; top: 4px;
  min-width: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-bold); line-height: 16px; text-align: center;
  color: var(--ink-cream);
  background: color-mix(in srgb, var(--ink-deep) 62%, transparent);
}
.pmt-sb-cell.is-empty .pmt-sb-n { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.pmt-sb-code {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-10); line-height: 14px;
  color: var(--sep-panel-ink-muted);
}

/* ── a package, opened under its card's row ── */
.pmt-panel {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 14px 16px 16px;
  border-radius: var(--r-md);
  background: var(--sep-panel-fill);
  box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 45%, transparent);
}
.pmt-panel-head { display: flex; align-items: center; gap: 10px; height: 34px; min-width: 0; }
.pmt-panel-code { flex: none; font-family: var(--font-display); font-size: var(--fs-14); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-panel-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); }
.sp-filmbar.pmt-lanetabs { flex: none; width: auto; padding: 0; overflow: visible; }
.sp-filmbar.pmt-lanetabs .sf-seq-chip { flex: 0 0 auto; min-width: 150px; }

/* the lane: references LEFT, the plan and the prompt RIGHT, one fixed height */
.pmt-lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; height: 660px; min-width: 0; }
/* the Generate page's own references picker, in a box of the lane's height (it flex-fills it and scrolls its tiles inside) */
.pmt-refs { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; }
.pmt-refs > .gen-section { flex: 1 1 auto; min-height: 0; }
.pmt-refs-wait { padding: 24px 12px; text-align: center; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--sep-panel-ink-muted); }
.pmt-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; height: 100%; }

/* the settings: the Generate page's model pills and Duration slider, one row */
.pmt-settings { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; height: 62px; min-width: 0; }
.pmt-set { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; }
.pmt-set-label {
  display: flex; align-items: baseline; justify-content: space-between; height: 16px; overflow: hidden;
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-12); line-height: 16px; text-transform: uppercase;
  color: var(--sep-panel-ink-muted);
}
.pmt-set-value { font-family: var(--font-display); font-size: var(--fs-14); letter-spacing: var(--track-04); text-transform: none; color: var(--ink); }
.gen-model-row.pmt-models { flex-wrap: nowrap; gap: 5px; min-width: 0; }
.gen-model-row.pmt-models .gen-model-btn { flex: 1 1 0; min-width: 0; height: 36px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-duration-slider.pmt-dur { margin: 4px 0 0; }

/* the four boxes of a shot (camera, action, voice, other notes), two by two */
.pmt-boxes { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; min-width: 0; }
.pmt-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pmt-box-label {
  height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-12); line-height: 14px; text-transform: uppercase;
  color: var(--sep-panel-ink-muted);
}
.pmt-box-text {
  display: block; width: 100%; box-sizing: border-box; height: 88px; resize: none; overflow-y: auto;
  padding: 7px 9px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); line-height: 1.45;
  scrollbar-width: thin;
}
.pmt-box-text:focus { outline: none; border-color: var(--leaf); }
.pmt-boxes--compact .pmt-box-text { height: 58px; }

/* the prompt: fills what is left of the column */
.pmt-prompt { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.pmt-lane-head { flex: none; display: flex; align-items: center; gap: 10px; height: 28px; min-width: 0; }
.pmt-lane-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmt-lane-title.is-error { color: var(--danger); }
.pmt-lane-state { flex: none; width: 74px; text-align: right; font-size: var(--fs-11); color: var(--sep-panel-ink-muted); }
.pmt-lane-state.is-error { color: var(--danger); }
.pmt-copy { flex: none; min-width: 64px; text-align: center; }
.pmt-rebuild { flex: none; min-width: 132px; text-align: center; }
.pmt-rebuild.is-hidden { visibility: hidden; }
/* "Discard my edits" asks first, in place (no native confirm) */
.pmt-discard-ask { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pmt-discard-q { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; }
.media-expand-pill.pmt-discard-yes { color: var(--danger); box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--danger) 60%, transparent); }
/* the SEND row under the prompt box: the Generate page's own button (.gen-go-btn) running the whole row, and (8 Nov 2026) at
   its far right the Copy folder path button: the same button, a 40 px square with a folder icon only (a check / a cross for
   2 s once pressed, never a width change). The send's answer is the send button's own label for 5 s: nothing in the row moves. */
.pmt-send { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; min-width: 0; }
.gen-go-btn.pmt-send-btn { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 22px; font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-go-btn.pmt-folder-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; }
.gen-go-btn.pmt-folder-btn svg { display: block; flex: none; width: 18px; height: 18px; }
.pmt-text {
  display: block; flex: 1 1 0; width: 100%; box-sizing: border-box; min-height: 0; resize: none; overflow-y: auto;
  padding: 9px 11px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-13); line-height: 1.5;
  scrollbar-width: thin;
}
.pmt-text:focus { outline: none; border-color: var(--leaf); }

/* ── an opened clip (2 Nov 2026): no reference picker. LEFT one section per shot and the frame pills under them; RIGHT the
   model / duration / timestamps row, the package images (drag one out = the full-resolution file) and the prompt filling
   the rest. The page sets the height (the scrolling body's own), so every section and the prompt are in view at once; a
   clip with more shots than fit scrolls inside the left list only. Every row has a fixed height: typing, a camera pick,
   the timestamps switch or the cards arriving never move anything. ── */
/* Round 3 (2 Nov 2026): the panel HUGS its shot rows (no fixed height, the left list never scrolls); the right column takes
   the rows' height (contain: size: it adds no height of its own; min-height keeps the model, package images and prompt
   usable for a one-shot clip). Every row has one height for the clip (--cs-h, set by the page), the start and last frames
   side by side at the frame's shape (--pmt-ar), the text column beside them. */
.pmt-clipedit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; min-height: 480px; min-width: 0; }
/* Round 4 (2 Nov 2026, evening): THREE columns. The shot rows, the ORIGINAL trailer shot of every row (one 16:9 player per row,
   the row's own height: --ov-w), and the model / package images / prompt (--ce-right). The page measures the height the
   body has and shares it between the rows (--cs-h = a row's inner height, --cs-pic = its frames' height, --act-lines = the
   action's lines), so a 6-shot 30 s clip fills the body with no scroll and no empty space. */
.pmt-clipedit { grid-template-columns: minmax(0, 1fr) var(--ov-w, 300px) var(--ce-right, 640px); min-height: 620px; }
.pmt-ce-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pmt-ce-shots { position: relative; flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pmt-cs {
  position: relative; flex: none; height: calc(var(--cs-h, 124px) + 12px); box-sizing: border-box; min-width: 0;
  display: grid; align-items: center; column-gap: 6px;
  grid-template-columns: minmax(0, calc(var(--cs-pic, 124px) * var(--pmt-ar, 2.3333))) minmax(0, calc(var(--cs-pic, 124px) * var(--pmt-ar, 2.3333))) minmax(240px, 1fr);
  padding: 6px 8px; border-radius: var(--r-sm);
  background: var(--sep-row-fill);
  box-shadow: 0 0 0 var(--hairline-w) transparent;
}
/* 3 Nov 2026 — a SINGLE shot's one row (the clip editor for one shot): its start frame OVER its last frame slot, each half
   the row (--cs-pic, set by the page), so together they hug the row top and bottom; the text column beside them */
.pmt-clipedit.is-single .pmt-cs {
  grid-template-columns: minmax(0, calc(var(--cs-pic, 90px) * var(--pmt-ar, 2.3333))) minmax(240px, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px;
}
.pmt-clipedit.is-single .pmt-cs-pic { grid-column: 1; grid-row: 1; }
.pmt-clipedit.is-single .pmt-cs-last { grid-column: 1; grid-row: 2; }
.pmt-clipedit.is-single .pmt-cs-main { grid-column: 2; grid-row: 1 / span 2; }
.pmt-cs.is-focus { box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 70%, transparent); }
/* the start frame BESIDE the LAST frame slot (round 3): the same size, both always drawn, so turning a last frame on or
   off, or picking one, never moves anything */
.pmt-cs-pic { position: relative; width: 100%; aspect-ratio: var(--pmt-ar, 2.3333); max-height: var(--cs-pic, 124px); overflow: hidden; border-radius: var(--r-xs); background: var(--sep-card-fill); }
.pmt-cs-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* (3 Nov 2026) the start slot of a multi-shot clip row is its START FRAME picker too: a click opens it (the shot frame, or the
   frame he picked with "Start frame"); the ring sits over the picture, so nothing moves */
.pmt-cs-pic.is-pick { cursor: pointer; }
.pmt-cs-pic.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 70%, transparent); }
.pmt-cs-pic-tag.is-need { font-family: var(--font-body); font-weight: var(--fw-semi); color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--sep-card-fill)); }
.pmt-cs-pic-tag {
  position: absolute; left: 4px; bottom: 4px; padding: 0 5px; border-radius: var(--r-xs); line-height: 16px;
  font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--ink);
  background: color-mix(in srgb, var(--leaf) 30%, var(--sep-card-fill));
}
.pmt-cs-last {
  position: relative; display: block; width: 100%; aspect-ratio: var(--pmt-ar, 2.3333); max-height: var(--cs-pic, 124px); margin: 0; padding: 0; overflow: hidden; cursor: pointer;
  border: none; border-radius: var(--r-xs); font: inherit; color: var(--sep-panel-ink-muted);
  background: transparent; box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--card-border) 70%, transparent);
}
.pmt-cs-last:disabled { cursor: default; }
.pmt-cs-last img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-cs-last-tag {
  position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 0 5px; border-radius: var(--r-xs); line-height: 16px;
  font-size: var(--fs-10); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted);
  background: color-mix(in srgb, var(--sep-card-fill) 85%, transparent);
}
.pmt-cs-last.is-on { box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 70%, transparent); }
.pmt-cs-last.is-on .pmt-cs-last-tag { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--ink); background: color-mix(in srgb, var(--leaf) 30%, var(--sep-card-fill)); }
.pmt-cs-last.is-need { box-shadow: inset 0 0 0 var(--hairline-w) var(--warn); }
.pmt-cs-last.is-need .pmt-cs-last-tag { font-family: var(--font-body); color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--sep-card-fill)); }
.pmt-cs-lasttog {
  flex: none; height: 20px; padding: 0 8px; cursor: pointer;
  border: none; border-radius: var(--r-round); font: inherit; font-size: var(--fs-10); font-weight: var(--fw-semi); line-height: 20px;
  color: var(--sep-panel-ink-muted); background: transparent;
  box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--card-border) 70%, transparent);
}
.pmt-cs-lasttog.is-active { color: var(--ink); background: color-mix(in srgb, var(--leaf) 22%, transparent); box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 70%, transparent); }
.pmt-cs-lasttog:disabled { cursor: default; }
/* the last-frame picker: laid over the shot's own section (nothing around it moves), every frame of the shot in one strip */
.pmt-cs-pick {
  position: absolute; inset: 3px; z-index: 3; display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 0;
  padding: 5px 8px 6px; border-radius: var(--r-sm);
  background: var(--panel-raised); box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 70%, transparent), var(--shadow-card);
}
.pmt-cs-pick-head { flex: none; display: flex; align-items: center; gap: 8px; height: 24px; min-width: 0; font-size: var(--fs-12); }
.pmt-cs-pick-close { margin-left: auto; }
.pmt-cs-pick-strip { flex: 1 1 0; display: flex; gap: 6px; min-height: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pmt-cs-pick-note { align-self: center; font-size: var(--fs-12); color: var(--sep-panel-ink-muted); }
.pmt-cs-pick-item {
  flex: none; display: flex; flex-direction: column; gap: 2px; height: 100%; aspect-ratio: 2 / 1; min-height: 0; margin: 0; padding: 0; cursor: pointer;
  border: none; background: transparent; font: inherit; color: var(--ink);
}
.pmt-cs-pick-item:disabled { cursor: default; opacity: 0.45; }
.pmt-cs-pick-pic { flex: 1 1 0; min-height: 0; overflow: hidden; border-radius: var(--r-xs); background: var(--sep-card-fill); box-shadow: inset 0 0 0 var(--hairline-w) transparent; }
.pmt-cs-pick-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-cs-pick-item:not(:disabled):hover .pmt-cs-pick-pic { box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 60%, transparent); }
.pmt-cs-pick-item.is-active .pmt-cs-pick-pic { box-shadow: 0 0 0 var(--ring-w) var(--leaf); }
.pmt-cs-pick-cap { flex: none; height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-mono); font-size: var(--fs-10); line-height: 14px; color: var(--sep-panel-ink-muted); }
.pmt-cs-none {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-10); color: var(--sep-panel-ink-muted);
}
.pmt-cs-main { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; margin-left: 4px; min-width: 0; min-height: 0; }
/* Round 4 (Hugo: "I think we need bigger titles ... shot one, then the shot name, then the length — this is a bit too
   small"): the title line in the app's title type (the display face, 18 px), the shot's name and its length beside it; the
   code, the times and the last-frame switch on the line under it */
.pmt-cs-head { flex: none; display: flex; align-items: baseline; gap: 10px; height: 26px; min-width: 0; overflow: hidden; line-height: 26px; }
.pmt-cs-n { flex: none; font-family: var(--font-display); font-size: var(--fs-18); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-cs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--ink); }
.pmt-cs-len { flex: none; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-cs-meta { flex: none; display: flex; align-items: center; gap: 10px; height: 22px; min-width: 0; overflow: hidden; font-size: var(--fs-13); line-height: 20px; }
.pmt-cs-meta .pmt-cs-lasttog { margin-left: auto; }
.pmt-cs-meta .pmt-cs-lasttog + .pmt-cs-lasttog { margin-left: 0; }
.pmt-cs-code { flex: none; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--sep-panel-ink-muted); }
.pmt-cs-time { flex: none; font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); }
/* the camera: the moves picked (one pill each, × takes it away), "+ Move" adds one, then his own camera words */
.pmt-cs-ctl { flex: none; display: flex; align-items: center; gap: 6px; height: 26px; min-width: 0; overflow: hidden; }
.pmt-cam-pill {
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: 2px; height: 22px; min-width: 0; padding: 0 2px 0 9px; box-sizing: border-box;
  border-radius: var(--r-round); font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--leaf) 22%, transparent);
  box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 60%, transparent);
}
.pmt-cam-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pmt-cam-x {
  flex: none; width: 18px; height: 18px; margin: 0; padding: 0; cursor: pointer;
  border: none; border-radius: var(--r-round); font: inherit; font-size: var(--fs-12); line-height: 18px; text-align: center;
  color: var(--sep-panel-ink-muted); background: transparent;
}
.pmt-cam-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pmt-cs-img {
  flex: none; padding: 0 6px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-bold); line-height: 16px;
  color: var(--ink); background: color-mix(in srgb, var(--leaf) 22%, transparent);
}
.pmt-cs-img.is-none { font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--track-04); color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.gen-cammove-select.pmt-cs-cam { flex: 0 0 96px; width: 96px; min-width: 0; margin: 0; height: 24px; padding-top: 0; padding-bottom: 0; }
.pmt-cs-in.pmt-cs-camwords { flex: 1 1 80px; width: auto; min-width: 60px; }
/* the action: two lines at rest (Hugo: the description of each shot should be smaller); a click opens the whole text in a
   box laid OVER the row (.pmt-cs-actedit), so nothing around it moves */
.pmt-cs-act {
  flex: 1 1 0; min-height: calc(1.4em + 8px); box-sizing: border-box; overflow: hidden; cursor: text;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--act-lines, 2); line-clamp: var(--act-lines, 2);
  padding: 3px 8px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); line-height: 1.4;
}
.pmt-cs-act.is-empty { color: var(--sep-panel-ink-muted); }
/* (3 Nov 2026, later) the action and the shot's own SOUNDS side by side, one height (the action's): the sound box scrolls
   inside, so typing in it never moves the row */
.pmt-cs-actrow { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; min-height: calc(1.4em + 8px); min-width: 0; }
.pmt-cs-actrow > .pmt-cs-act { min-height: 0; }
.pmt-cs-snd {
  display: block; width: 100%; height: 100%; box-sizing: border-box; min-height: 0; min-width: 0; margin: 0; resize: none; overflow-y: auto;
  padding: 3px 8px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); line-height: 1.4;
  scrollbar-width: thin;
}
/* typing a sound opens the box OVER the row, like the action's editor (its grid cell keeps its place: nothing moves) */
.pmt-cs-snd:focus {
  position: absolute; left: 0; right: 0; top: 88px; z-index: 5; height: max(156px, calc(100% - 88px));
  padding: 6px 9px; outline: none; border-color: var(--leaf); box-shadow: var(--shadow-card);
}
/* the clip's SOUNDSCAPE box in the right column: fixed height, scrolls inside */
.pmt-ce-scape { flex: none; }
.pmt-sc-lighttext.pmt-ce-scapetext { height: 64px; }
/* 8 Nov 2026 — an emptied Soundscape box stays empty; this brings the built one back (inside the 16 px label: nothing moves) */
.pmt-scape-rebuild {
  flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit;
  color: var(--sep-panel-ink-muted); text-decoration: underline;
}
.pmt-scape-rebuild:hover { color: var(--ink); }
.pmt-cs-act:focus-visible { outline: none; border-color: var(--leaf); }
.pmt-cs-actedit {
  position: absolute; left: 0; right: 0; top: 88px; z-index: 5; height: max(156px, calc(100% - 88px)); box-sizing: border-box; resize: none; overflow-y: auto;
  padding: 6px 9px;
  border: 1px solid var(--leaf); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); line-height: 1.45;
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
}
.pmt-cs-actedit:focus { outline: none; }
.pmt-cs-row { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.pmt-cs-in {
  display: block; width: 100%; box-sizing: border-box; height: 24px; min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12);
}
.pmt-cs-act:focus, .pmt-cs-in:focus { outline: none; border-color: var(--leaf); }

.pmt-ce-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; contain: size; }
.pmt-settings.pmt-settings--clip { grid-template-columns: minmax(0, 1fr) 160px 48px; }
.pmt-set--ts .gen-swap-toggle { align-self: flex-start; }
.pmt-set--ts .gen-ts-switch { height: 36px; }
/* 3 Nov 2026 (Hugo: "I want the buttons to be in line with the top of the row and have model above and duration and stuff;
   it's like a bit offset towards the bottom"): ONE grid, the labels MODEL / DURATION / TIMES on the first line (16 px), their
   controls on the second (36 px), every control starting at the top of its line: no margin (the Generate page's slider
   carries a 6 px top margin) and no column of its own pushing anything down. */
.pmt-settings.pmt-settings--grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px 48px; grid-template-rows: 16px 36px;
  column-gap: 14px; row-gap: 6px; align-items: start; height: 58px;
}
.pmt-settings--grid .pmt-set-label { grid-row: 1; }
.pmt-settings--grid .pmt-models { grid-row: 2; grid-column: 1; align-self: start; height: 36px; margin: 0; }
.pmt-settings--grid .gen-model-row.pmt-models .gen-model-btn { height: 36px; margin: 0; }
.pmt-set-ctl--dur { grid-row: 2; grid-column: 2; display: flex; align-items: center; height: 36px; min-width: 0; }
.pmt-settings--grid .gen-duration-slider.pmt-dur { margin: 0; width: 100%; }
.gen-swap-toggle.pmt-set-ts { grid-row: 2; grid-column: 3; align-self: start; height: 36px; box-sizing: border-box; margin: 0; }
.pmt-set-ts .gen-ts-switch { height: 100%; }
/* the package images (round 4): Image 1..N in attachment order in ONE row (scrolled sideways when there are many), each
   dragged out at full resolution; its tag on the picture and, under it, what it IS (its line in "Use the attached images",
   edited in place) */
.pmt-pkg { flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pmt-pkg-head { display: flex; align-items: center; gap: 8px; height: 22px; }
/* "Put back N images": only while pictures are out; it keeps its place when hidden */
.media-expand-pill.pmt-pkg-restore { flex: none; margin-left: auto; }
.pmt-pkg-restore.is-hidden { visibility: hidden; }
.pmt-pkg-count { font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); }
.pmt-pkg-row { display: flex; gap: 6px; height: 148px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pmt-pkg-item { flex: none; display: flex; flex-direction: column; gap: 4px; width: 176px; min-width: 0; margin: 0; }
.pmt-pkg-pic { position: relative; flex: none; height: 86px; overflow: hidden; border-radius: var(--r-xs); background: var(--sep-row-fill); cursor: grab; }
.pmt-pkg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 9 Nov 2026 — a package VIDEO (depth map, original cut): its first frame as the picture (the <video> keeps pointer events so
   hovering it warms the file for the drag), and a "Show in Explorer" button on its top right */
.pmt-pkg-pic.is-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink-deep); }
.pmt-pkg-open { position: absolute; right: 3px; top: 3px; z-index: 1; display: flex; }
.pmt-pkg-open .reveal-folder-btn { width: 22px; height: 22px; }
.pmt-pkg-tok {
  position: absolute; left: 4px; bottom: 4px; padding: 0 5px; border-radius: var(--r-xs); line-height: 16px; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--ink);
  background: color-mix(in srgb, var(--leaf) 30%, var(--sep-card-fill));
}
.pmt-pkg-desc {
  flex: none; display: block; width: 100%; box-sizing: border-box; height: 20px; min-width: 0; padding: 0 6px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--sep-panel-ink-muted);
  font-family: var(--font-body); font-size: var(--fs-11);
}
.pmt-pkg-item.is-own .pmt-pkg-desc { color: var(--ink); }
/* 3 Nov 2026 — take a picture out of the package (Hugo: "I need to be able to remove some images and remove them from the
   prompt"): a small round × on the picture's top right, the cam pill's own close look on a dark disc so it reads on any picture */
.pmt-pkg-x {
  position: absolute; right: 3px; top: 3px; z-index: 1; width: 18px; height: 18px; margin: 0; padding: 0; cursor: pointer;
  border: none; border-radius: var(--r-round); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: 18px; text-align: center;
  color: var(--ink-cream); background: color-mix(in srgb, var(--ink-deep) 62%, transparent);
}
/* (3 Nov 2026) the Contact sheet / Hero switch of a card's picture: its own row under the picture, the page's two-way toggle
   at full width; an empty row of the same height under a card with one kind, so the row never moves */
.pmt-pkg-kinds { flex: none; box-sizing: border-box; height: 24px; }
.gen-swap-toggle.pmt-pkg-kinds { display: flex; align-self: stretch; }
.pmt-pkg-kinds .gen-swap-seg { flex: 1 1 0; min-width: 0; height: 100%; padding-top: 0; padding-bottom: 0; white-space: nowrap; font-size: var(--fs-11); }
.pmt-pkg-x:hover, .pmt-pkg-x:focus-visible { outline: none; color: var(--ink-cream); background: color-mix(in srgb, var(--danger) 80%, var(--ink-deep)); }
.pmt-pkg-desc:focus { outline: none; border-color: var(--leaf); color: var(--ink); }
/* 3 Nov 2026 — THE CLIP'S REFERENCES (Start frames | + depth storyboard | Location frame(s) + depth storyboard): one line of
   one height; the 1 frame / 2 frames choice keeps its place when hidden, the storyboard's state ends the line (one line,
   cut short) — switching moves nothing */
.pmt-refmode { flex: none; display: flex; align-items: center; gap: 10px; height: 28px; min-width: 0; }
.pmt-set-label.pmt-refmode-label { flex: none; align-items: center; }
.gen-cammove-select.pmt-refmode-pick { flex: 0 1 270px; width: 270px; min-width: 0; margin: 0; height: 28px; padding-top: 0; padding-bottom: 0; }
.gen-swap-toggle.pmt-refmode-loc { flex: none; display: flex; align-self: center; height: 28px; box-sizing: border-box; margin: 0; }
.pmt-refmode-loc .gen-swap-seg { height: 100%; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.pmt-refmode-loc.is-hidden { visibility: hidden; }
.pmt-refmode-state {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted);
}
.pmt-refmode-state.is-bad { color: var(--danger); }
/* the depth storyboard's card before its picture is made: where it stands, in place of the picture */
.pmt-pkg-pic.is-wait { cursor: default; }
.pmt-pkg-sbwait {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px 22px;
  box-sizing: border-box; text-align: center; font-size: var(--fs-11); font-weight: var(--fw-semi); line-height: 1.3; color: var(--sep-panel-ink-muted);
}
.pmt-pkg-sbwait-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmt-pkg-sbwait.is-bad { color: var(--danger); }
.media-expand-pill.pmt-pkg-sbretry { flex: none; margin: 0; }

/* the ORIGINAL trailer shot of every row (round 4): one player per row, the row's height, 16:9, muted, on a loop; a click
   plays / pauses, the bar scrubs */
.pmt-ce-orig { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pmt-ov {
  position: relative; flex: none; width: 100%; height: calc(var(--cs-h, 124px) + 12px); overflow: hidden;
  border-radius: var(--r-sm); background: var(--sep-row-fill);
}
.pmt-ov-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; background: var(--sep-card-fill); }
.pmt-ov.is-still .pmt-ov-media { cursor: default; }
.pmt-ov-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-11); color: var(--sep-panel-ink-muted); }
.pmt-ov-tag {
  position: absolute; left: 6px; top: 6px; padding: 0 6px; border-radius: var(--r-xs); line-height: 18px; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--ink-cream);
  background: color-mix(in srgb, var(--shadow-ink) 72%, transparent);
}
.pmt-ov-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; box-sizing: border-box;
  background: color-mix(in srgb, var(--shadow-ink) 72%, transparent);
}
.pmt-ov-btn {
  flex: none; height: 20px; min-width: 24px; margin: 0; padding: 0 6px; cursor: pointer; white-space: nowrap;
  border: none; border-radius: var(--r-round); font: inherit; font-size: var(--fs-10); font-weight: var(--fw-bold); line-height: 20px;
  color: var(--ink-cream); background: color-mix(in srgb, var(--ink-cream) 14%, transparent);
}
.pmt-ov-sound.is-on { color: var(--ink); background: color-mix(in srgb, var(--leaf) 70%, var(--ink-cream)); }
.pmt-ov-scrub { flex: 1 1 auto; min-width: 40px; height: 14px; margin: 0; accent-color: var(--leaf); cursor: pointer; }
.pmt-ov-time { flex: none; font-family: var(--font-mono); font-size: var(--fs-10); color: var(--ink-cream); }

/* ── the multi-shot plan ── */
.pmt-plan { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pmt-plan-sum { height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); line-height: 18px; color: var(--sep-panel-ink-muted); }

@media (max-width: 1100px) {
  .pmt-lane { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pmt-clipedit { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pmt-ce-orig { display: none; }
  .pmt-ce-right { contain: none; }
  .pmt-ce-right .pmt-prompt { flex: none; }
  .pmt-refs { height: 520px; }
  .pmt-right { height: auto; }
  .pmt-prompt { flex: none; }
  .pmt-text { flex: none; height: 280px; }
}
@media (max-width: 760px) {
  .pmt-bar-label { display: none; }
  .pmt-panel { padding: 10px 10px 12px; }
  .pmt-panel-head { flex-wrap: wrap; height: auto; }
  .pmt-boxes { grid-template-columns: minmax(0, 1fr); }
  .pmt-settings { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pmt-cs { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pmt-cs-pic, .pmt-cs-last { display: none; }
  .pmt-clipedit.is-single .pmt-cs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .pmt-clipedit.is-single .pmt-cs-main { grid-column: 1; grid-row: auto; }
  .pmt-settings.pmt-settings--clip { grid-template-columns: minmax(0, 1fr); }
  .pmt-settings.pmt-settings--grid { grid-template-columns: minmax(0, 1fr) 110px 48px; height: 58px; }
  .pmt-refs { height: 480px; }
}

/* 3 Nov 2026 — a single shot's Midjourney lane: its prompt alone (the reference picker is gone), the clip editor's height */
.pmt-lane.pmt-lane--still { grid-template-columns: minmax(0, 1fr); height: 620px; }
.pmt-lane--still .pmt-prompt { height: 100%; }

/* 3 Nov 2026 — THE CAMERA SCOUT (Hugo: "a place for the camera scout prompt, for each film and each sequence and each
   location"). Its card = the clip card's storyboard, then the sequence title and the location on fixed lines (every scout
   card the same size). Opened: the clip editor's layout in TWO columns (no original-shot column), one fixed height so typing
   a framing or taking an image out never moves anything; the light on top of the left column, then one row per framing
   (start frame + its words), the rows scrolling inside the left column. */
.pmt-scout-loc.is-none { font-style: italic; }
.gen-cammove-select.pmt-scout-pick { flex: 0 0 240px; width: 240px; min-width: 0; margin: 0; height: 28px; padding-top: 0; padding-bottom: 0; }
/* (3 Nov 2026, later) the scout's reverse-angle pick, always shown (no layout shift) */
.pmt-scout-rev { flex: none; display: flex; align-items: center; gap: 10px; height: 28px; min-width: 0; }
.pmt-scout-rev-label { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); white-space: nowrap; }
.pmt-clipedit.pmt-scoutedit { grid-template-columns: minmax(0, 1fr) minmax(640px, 38%); height: 780px; min-height: 0; }
.pmt-sc-left { min-height: 0; }
.pmt-sc-light { flex: none; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pmt-sc-lighttext {
  display: block; width: 100%; box-sizing: border-box; height: 48px; resize: none; overflow-y: auto;
  padding: 5px 9px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); line-height: 1.4;
  scrollbar-width: thin;
}
.pmt-sc-rows { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.pmt-sc-row {
  flex: none; display: grid; grid-template-columns: calc(84px * var(--pmt-ar, 2.3333)) minmax(0, 1fr); column-gap: 10px; align-items: stretch;
  height: 96px; box-sizing: border-box; min-width: 0; padding: 6px 8px; border-radius: var(--r-sm);
  background: var(--sep-row-fill);
}
.pmt-sc-extra { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 8px 10px; font-size: var(--fs-13); color: var(--ink-taupe); }
.pmt-sc-extra-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: italic; }
.pmt-sc-row.is-own { box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--leaf) 55%, transparent); }
.pmt-sc-pic { position: relative; height: 84px; overflow: hidden; border-radius: var(--r-xs); background: var(--sep-card-fill); }
.pmt-sc-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-sc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; }
.pmt-sc-head { flex: none; display: flex; align-items: baseline; gap: 10px; height: 20px; min-width: 0; overflow: hidden; line-height: 20px; }
.pmt-sc-n { flex: none; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-sc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); }
.pmt-sc-framing {
  flex: 1 1 0; display: block; width: 100%; box-sizing: border-box; min-height: 0; resize: none; overflow-y: auto;
  padding: 4px 8px;
  border: 1px solid var(--input-border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); line-height: 1.4;
  scrollbar-width: thin;
}
.pmt-sc-lighttext.pmt-sc-roomtext { height: 132px; }
.pmt-sc-row.is-out { opacity: 0.45; }
.media-expand-pill.pmt-sc-outbtn { flex: none; min-width: 76px; height: 20px; margin: 0 0 0 auto; padding-top: 0; padding-bottom: 0; line-height: 18px; align-self: flex-start; }
.pmt-sc-framing:focus, .pmt-sc-lighttext:focus { outline: none; border-color: var(--leaf); }
/* 3 Nov 2026 — the scout's VIDEOS (PmtScoutVideos): one fixed-height block under the prompt, the drop zone on the left and
   the scout's videos on the right, scrolling inside; nothing in it changes height when a video lands or a line changes */
.pmt-scv { flex: none; display: flex; flex-direction: column; gap: 4px; height: 128px; min-width: 0; }
.pmt-scv-head { flex: none; display: flex; align-items: baseline; gap: 10px; height: 16px; min-width: 0; overflow: hidden; }
.pmt-scv-err { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); }
.pmt-scv-err.is-bad { color: var(--danger); }
.pmt-scv-list { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.pmt-scv-empty { padding: 6px 2px; font-size: var(--fs-12); font-style: italic; color: var(--sep-panel-ink-muted); }
.pmt-scv-row { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; box-sizing: border-box; min-width: 0; padding: 0 8px; border-radius: var(--r-sm); background: var(--sep-row-fill); }
.pmt-scv-v { flex: none; min-width: 42px; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-scv-open { flex: none; }
.pmt-scv-open.is-ph { display: inline-block; width: 24px; }
.pmt-scv-line { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); color: var(--sep-panel-ink-muted); }
.pmt-scv-line.is-ok { color: var(--ok); }
.pmt-scv-line.is-bad { color: var(--danger); }
.media-expand-pill.pmt-scv-go { flex: none; min-width: 168px; height: 22px; padding-top: 0; padding-bottom: 0; line-height: 20px; text-align: center; }
.media-expand-pill.pmt-scv-pick { flex: none; width: 92px; height: 22px; padding-top: 0; padding-bottom: 0; line-height: 20px; text-align: center; }
/* 8 Nov 2026 — a multi-shot clip's VIDEOS (PmtClipTakes): the scout block's rows, each with a fixed-height strip of its cuts
   under it (a still, "Cut 1 · 0–5 s", the shot it goes to); the strip scrolls sideways, the block keeps its height whether
   it is empty, reading the cuts or full (invariant 20) */
/* (later, 8 Nov) Hugo: "why is it all cropped? ... a row at the very bottom of the card, underneath the rest, and something
   clearer": the block is a full-width row of the card (every grid column), its height its content; each take a header line
   and a grid of big cut tiles (the still on top at 16:9, the times, the shot it goes to). The cut area keeps one tile's
   height while it reads the cuts, so nothing moves when they arrive */
.pmt-scv.pmt-clv { grid-column: 1 / -1; height: auto; gap: 10px; padding-top: 4px; }
.pmt-clv .pmt-scv-head { height: 20px; }
.pmt-clv .pmt-scv-list { flex: none; gap: 14px; overflow: visible; }
/* the right column is size-contained (it takes the shot rows' height, at least the editor's 620 px): a card with the takes
   block is taller by the block and its gap (176 + 10), so the prompt keeps the room it had before (a 2-shot clip's rows are
   under 620 px; without this the prompt box was squeezed to nothing and its send row ran over the block) */
.pmt-clipedit.has-clv { grid-template-rows: minmax(620px, auto) auto; min-height: 0; }
@media (max-width: 1100px) { .pmt-clipedit.has-clv { grid-template-rows: none; } }   /* one column there: nothing is size-contained */
.pmt-clv-item { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pmt-clv .pmt-scv-row { height: 40px; padding: 0 12px; gap: 12px; }
.pmt-scv-v.pmt-clv-name { max-width: 420px; font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-bold); letter-spacing: normal; }
.pmt-clv .pmt-scv-line { font-size: var(--fs-13, var(--fs-12)); }
.pmt-clv .media-expand-pill.pmt-scv-go { height: 30px; min-width: 190px; line-height: 28px; font-size: var(--fs-12); }
.pmt-clv-cuts { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; min-height: 230px; min-width: 0; }
.pmt-clv-wait { grid-column: 1 / -1; align-self: center; justify-self: start; padding: 0 8px; font-size: var(--fs-13, var(--fs-12)); font-style: italic; color: var(--sep-panel-ink-muted); }
.pmt-clv-cut { display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 8px; border-radius: var(--r-sm); background: var(--sep-row-fill); }
.pmt-clv-cut.is-off { opacity: 0.6; }
.pmt-clv-cut.is-in { box-shadow: inset 0 0 0 2px var(--ok); }
.pmt-clv-pic { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xs); background: var(--input-bg); }
.pmt-clv-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-clv-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pmt-clv-n { display: flex; align-items: baseline; gap: 10px; min-width: 0; height: 18px; overflow: hidden; white-space: nowrap; font-size: var(--fs-12); color: var(--sep-panel-ink-muted); }
.pmt-clv-k { flex: none; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-clv-t { flex: none; font-family: var(--font-mono); }
.pmt-clv-in { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-semi); color: var(--ok); }
.pmt-clv-sel { width: 100%; min-width: 0; height: 30px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--input-border); border-radius: var(--r-xs); background: var(--input-bg); color: var(--ink); font-size: var(--fs-12); }
/* 3 Nov 2026 — the PICK window (PmtScoutPick): a fixed-size window, the tiles scroll inside a fixed-height grid, the status
   line keeps its row; switching the Send, unticking a cut or saving never changes a height (invariant 20) */
/* (later) Hugo: "frames are too small. i cant see much, either have them bigger overall with a much larger modal or have the
   hover action allowed": the window takes 96vw x 92vh (a fixed size: nothing below moves), the stills are at least 340 px
   wide (as many columns as fit), and each one shows its full-size still on hover */
.confirm-delete-modal.pmt-pick-modal { position: relative; width: calc(96vw - 112px); max-width: calc(96vw - 112px); height: 92vh; max-height: 92vh; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; }
/* (3 Nov 2026) the previous / next scout video: two round arrows on the dimmed backdrop, one each side of the window (which
   gives them 56 px a side), vertically centred; dimmed, never hidden, at the first / last video */
.modal-nav-btn.pmt-pick-step { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--r-round); padding: 0; }
.modal-nav-btn.pmt-pick-step.is-prev { left: calc(2vw + 4px); right: auto; }
.modal-nav-btn.pmt-pick-step.is-next { right: calc(2vw + 4px); left: auto; }
.pmt-pick-pos { margin-left: 12px; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink-muted); letter-spacing: 0; }
.pmt-pick-head { flex: none; display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
.pmt-pick-headtext { flex: 1 1 auto; min-width: 0; }
.confirm-delete-eyebrow.pmt-pick-eyebrow { color: var(--ink-muted); }
.confirm-delete-title.pmt-pick-title { margin-bottom: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pmt-pick-fromwrap { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.pmt-pick-from { flex: none; display: flex; align-items: center; gap: 8px; }
.pmt-pick-guess { display: block; height: 16px; line-height: 16px; max-width: 560px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--warn); }
.pmt-pick-fromlabel { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink-muted); }
.gen-cammove-select.pmt-pick-send { width: min(480px, 40vw); margin: 0; }
.pmt-pick-count { flex: none; height: 18px; margin: 10px 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); color: var(--ink-muted); }
.pmt-pick-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  /* (3 Nov 2026, later) Hugo: "make the model five columns instead of 6, so everything's a bit bigger" */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 12px;
  padding: 2px;
}
.pmt-pick-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; box-sizing: border-box;
  border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--sep-row-fill);
  transition: opacity var(--dur-1) ease;
}
.pmt-pick-tile.is-skip { opacity: 0.45; }
.pmt-pick-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xs); background: var(--sep-card-fill); cursor: zoom-in; }
.pmt-pick-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.pmt-pick-meta { display: flex; align-items: center; gap: 8px; height: 20px; min-width: 0; cursor: pointer; }
.pmt-pick-meta input { flex: none; margin: 0; accent-color: var(--leaf); }
.pmt-pick-n { flex: none; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); color: var(--ink); }
.pmt-pick-time { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-size: var(--fs-12); color: var(--ink-muted); }
/* (3 Nov 2026, later) the cut's shot = ONE button: the shot's ORIGINAL trailer still (small, 16:9) + its code + short title, or
   Skip / Extra; always 44 px tall (no prompt, no framing text: Hugo "This is a waste of space") */
.media-expand-pill.pmt-pick-shotbtn {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: 22px 18px; column-gap: 8px; align-items: center;
  width: 100%; height: 48px; margin: 0; padding: 3px 8px 3px 3px; box-sizing: border-box; text-align: left; cursor: pointer;
}
.pmt-pick-shotbtn-pic { grid-row: 1 / -1; position: relative; width: 78px; height: 40px; overflow: hidden; border-radius: var(--r-xs); background: var(--sep-card-fill); }
.pmt-pick-shotbtn-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-pick-shotbtn-code { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); line-height: 22px; color: var(--ink); }
.pmt-pick-shotbtn-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-11); line-height: 18px; color: var(--ink-muted); }
/* (3 Nov 2026, later) the SHOT DROP-DOWN under a cut's shot button: exactly as wide as the cut tile, laid over the window
   (absolute, placed by PmtScoutPick), 3 originals a row with the code under each, about 3 rows shown, the rest scroll; the
   current one outlined, then Extra and Skip */
.pmt-pick-drop {
  position: absolute; z-index: 3; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 6px; padding: 6px;
  border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--panel-raised); box-shadow: var(--shadow-card);
}
.media-expand-pill.pmt-pick-shotbtn.is-open { border-color: var(--leaf); }
.pmt-pick-drop .pmt-pick-shot { gap: 2px; padding: 2px; border-radius: var(--r-xs); }
.pmt-pick-drop .pmt-pick-shot-code { height: 16px; line-height: 16px; font-size: var(--fs-12); text-align: center; }
.pmt-pick-drop .pmt-pick-shot-word { font-size: var(--fs-12); }
.pmt-pick-shot {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 6px; box-sizing: border-box; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); border-radius: var(--r-sm); border: 1px solid var(--card-border); background: var(--sep-row-fill);
}
.pmt-pick-shot:hover { border-color: var(--leaf); }
.pmt-pick-shot.is-on { border-color: var(--leaf); box-shadow: 0 0 0 var(--ring-w) var(--leaf); }
.pmt-pick-shot-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xs); background: var(--sep-card-fill); cursor: zoom-in; }
.pmt-pick-shot.is-word .pmt-pick-shot-pic { cursor: pointer; }
.pmt-pick-shot-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pmt-pick-shot-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); color: var(--ink-muted); }
.pmt-pick-shot-code { display: block; height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--track-005); }
.pmt-pick-shot-title { display: block; height: 16px; line-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); color: var(--ink-muted); }
.confirm-delete-actions.pmt-pick-actions { flex: none; align-items: center; min-height: 36px; margin-top: 14px; }
.pmt-pick-status { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-12); color: var(--ink-muted); }
.pmt-pick-status.is-ok { color: var(--ok); }
.pmt-pick-status.is-bad { color: var(--danger); }
.admin-suspend-btn.pmt-pick-btn { flex: none; min-width: 96px; height: 34px; }
.confirm-delete-btn.pmt-pick-put { flex: none; min-width: 200px; height: 34px; padding-top: 0; padding-bottom: 0; border-color: var(--cta-bg); background: var(--cta-bg); color: var(--cta-ink); }
@media (max-width: 1100px) {
  .pmt-clipedit.pmt-scoutedit { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pmt-sc-rows { flex: none; height: 520px; }
}
@media (max-width: 760px) {
  .pmt-sc-row { grid-template-columns: minmax(0, 1fr); height: 96px; }
  .pmt-sc-pic { display: none; }
}
/* 7 Nov 2026 — every project but AGE OF EMPIRES II: no Original column (two columns: the rows, the right side) */
.pmt-clipedit.no-orig { grid-template-columns: minmax(0, 1fr) var(--ce-right, 640px); }
/* 7 Nov 2026 — the shot's camera move, at the front of its action box (it opens the shot's line in the prompt) */
.pmt-cs-actcam { font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); }
/* 7 Nov 2026 — the VERSIONS of a clip: one tab each in the panel head (V1 · its name), then + Version. One line, fixed height. */
.pmt-panel--clip .pmt-panel-title { flex: 0 1 auto; }
.pmt-vers { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pmt-ver { flex: none; display: inline-flex; align-items: baseline; gap: 6px; height: 26px; max-width: 280px; padding: 0 10px; box-sizing: border-box; cursor: pointer;
  border: none; border-radius: var(--r-round); font: inherit; font-size: var(--fs-12); line-height: 26px; color: var(--ink);
  background: var(--sep-row-fill); box-shadow: inset 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--ink) 14%, transparent); }
.pmt-ver:hover { background: color-mix(in srgb, var(--leaf) 14%, var(--sep-row-fill)); }
.pmt-ver.is-active { background: color-mix(in srgb, var(--leaf) 26%, var(--sep-row-fill)); box-shadow: inset 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--leaf) 70%, transparent); }
.pmt-ver-n { font-weight: var(--fw-bold); }
.pmt-ver-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pmt-ver-add { color: var(--sep-panel-ink-muted); }

/* 9 Nov 2026 — THE TOPVIEW RUNS LOG (PmtTopView, PmtTvRunsBtn, PmtTvRuns in src/PromptsPage.jsx). The button sits in the
   send row beside "Copy prompt & mark sent": a fixed width, its label is the run's state (ellipsis), so nothing moves. */
.media-expand-pill.pmt-tv-btn { flex: 0 0 280px; height: 40px; margin-top: 0; box-sizing: border-box; padding: 0 14px; font-family: inherit; font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-expand-pill.pmt-tv-btn:disabled { opacity: 0.5; cursor: default; }
.pmt-tv-btn.is-queued, .pmt-tv-btn.is-launching { box-shadow: inset 0 0 0 var(--hairline-w, 1px) var(--warn); }
.pmt-tv-btn.is-launched, .pmt-tv-btn.is-ok { box-shadow: inset 0 0 0 var(--hairline-w, 1px) var(--ok); }
.pmt-tv-btn.is-failed, .pmt-tv-btn.is-bad { box-shadow: inset 0 0 0 var(--hairline-w, 1px) var(--danger); }
.sf-seq-chip.pmt-tv-open { margin-left: auto; }
.confirm-delete-modal.pmt-tv-modal { width: min(1100px, 94vw); max-width: min(1100px, 94vw); max-height: 86vh; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
.pmt-tv-sum { flex: none; margin: 4px 0 12px; font-size: var(--fs-12); color: var(--ink-taupe); }
.pmt-tv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.pmt-tv-empty { padding: 24px 0; text-align: center; font-size: var(--fs-13); color: var(--ink-taupe); }
.pmt-tv-row { flex: none; border-radius: var(--r-md, 10px); background: var(--panel-raised); box-shadow: inset 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--ink) 12%, transparent); padding: 10px 12px; }
.pmt-tv-line { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.pmt-tv-chip { flex: 0 0 88px; text-align: center; box-sizing: border-box; padding: 3px 0; border-radius: 999px; font-size: var(--fs-11); font-weight: var(--fw-bold); }
.pmt-tv-chip.is-queued, .pmt-tv-chip.is-launching { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pmt-tv-chip.is-launched { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.pmt-tv-chip.is-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.pmt-tv-chip.is-cancelled { color: var(--ink-taupe); background: color-mix(in srgb, var(--ink-taupe) 14%, transparent); }
.pmt-tv-chip.is-unconfirmed { color: var(--warn); background: color-mix(in srgb, var(--warn) 22%, transparent); box-shadow: inset 0 0 0 var(--hairline-w, 1px) var(--warn); }
.pmt-tv-btn.is-unconfirmed { box-shadow: inset 0 0 0 var(--hairline-w, 1px) var(--warn); }
.pmt-tv-row.is-unconfirmed .pmt-tv-note { color: var(--warn); }
.pmt-tv-label { flex: 0 1 auto; min-width: 0; font-size: var(--fs-13); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmt-tv-meta { flex: 1 1 auto; min-width: 0; font-size: var(--fs-12); color: var(--ink-taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmt-tv-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.pmt-tv-acts .media-expand-pill, .pmt-tv-acts .confirm-delete-btn { margin-top: 0; height: 30px; font-family: inherit; white-space: nowrap; }
.pmt-tv-note { margin: 6px 0 0 100px; font-size: var(--fs-12); color: var(--danger); }
.pmt-tv-row.is-launched .pmt-tv-note, .pmt-tv-row.is-cancelled .pmt-tv-note { color: var(--ink-taupe); }
.pmt-tv-row.is-queued .pmt-tv-note, .pmt-tv-row.is-launching .pmt-tv-note { color: var(--warn); }
.pmt-tv-detail { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.pmt-tv-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.pmt-tv-pic { margin: 0; width: 120px; display: flex; flex-direction: column; gap: 4px; }
.pmt-tv-pic img, .pmt-tv-vid { width: 120px; height: 120px; object-fit: contain; border-radius: var(--r-sm, 6px); background: var(--input-bg); }
.pmt-tv-vid { display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); color: var(--ink-taupe); }
.pmt-tv-pic figcaption { font-size: var(--fs-11); color: var(--ink-taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmt-tv-prompt { margin: 0; max-height: 320px; overflow: auto; padding: 10px 12px; border-radius: var(--r-sm, 6px); background: var(--input-bg); box-shadow: inset 0 0 0 var(--hairline-w, 1px) var(--input-border); font-family: var(--font-mono, monospace); font-size: var(--fs-12); white-space: pre-wrap; word-break: break-word; }
.pmt-tv-err { flex: 1 1 auto; min-height: 1em; font-size: var(--fs-12); color: var(--danger); }