/* Explicit rows keep hiding the workflow from moving the workspace into an
   auto-sized row. Review occupies the workspace without scrolling the header. */
.studio-shell > .studio-header { grid-row: 1; position: sticky; top: 0; z-index: 50; }
.studio-shell > .studio-journey { grid-row: 2; }
.studio-shell > .studio-workspace { grid-row: 3; }
.studio-shell > .zone-timeline { grid-row: 4; min-height: 0; }
@media (min-width: 821px) {
  .studio-shell { --timeline: clamp(270px, 30dvh, 310px); }
  .studio-shell > .zone-timeline { display: flex; flex-direction: column; }
}
.zone-timeline .timeline-toolbar { height: auto; min-height: 48px; flex: 0 0 auto; gap: 8px; }
.zone-timeline .timeline-scroll { flex: 1 1 0; min-height: 0; height: auto; overflow: auto; }
.timeline-review-notes { position: sticky; left: 0; width: 100%; min-height: 0; max-height: none; overflow: visible; padding: 0 8px; }
.studio-shell.timeline-collapsed .timeline-review-notes,
.studio-shell.timeline-collapsed .timeline-reading-tools,
.studio-shell.timeline-collapsed .timeline-plan-status { display: none; }
.studio-shell.timeline-collapsed .timeline-toolbar { min-height: 30px; }
.studio-shell.plan-expanded { grid-template-rows: var(--header) 0 minmax(0, 1fr); }
.studio-shell.plan-expanded > .studio-journey { display: none; }
.studio-shell.plan-expanded > .studio-workspace { display: none; }
.studio-shell.plan-expanded > .zone-timeline { grid-row: 3; display: flex; flex-direction: column; min-height: 0; }
.timeline-content { position: relative; min-width: 0; }
.timeline-ruler { position: relative; margin-left: 0; }
.timeline-scroll { min-width: 0; }
.studio-shell.plan-expanded .timeline-scroll { flex: 1; min-width: 0; min-height: 0; height: auto; overflow: auto; }
.studio-shell.plan-expanded .timeline-content { width: var(--review-width, 100%); min-width: 100%; }
.studio-shell.plan-expanded .timeline-toolbar { flex: 0 0 auto; height: auto; min-height: 48px; }
.studio-shell.plan-expanded .timeline-track { height: 48px; }
.studio-shell.plan-expanded .timeline-track:has(.lane-lyrics) { height: var(--review-lyrics-height, 100px); }
.studio-shell.plan-expanded .lane-lyrics .clip { height: auto; min-height: 88px; white-space: pre-wrap; overflow: visible; font-size: 14px; line-height: 1.6; }
.studio-shell.plan-expanded .track-label { position: sticky; left: 0; z-index: 5; background: #0d1425; }
.studio-shell.plan-expanded .timeline-plan { margin: 0 0 12px 92px; }
.studio-shell.plan-expanded .timeline-plan-heading { display: none; }
.studio-shell.plan-expanded .timeline-plan-grid { display: block; position: relative; width: 100%; height: 340px; padding: 0; overflow: visible; }
.studio-shell.plan-expanded .timeline-plan-grid::before,
.studio-shell.plan-expanded .timeline-plan-card::before { display: none; }
.studio-shell.plan-expanded .timeline-plan-card { position: absolute; top: 0; min-width: 0; height: auto; min-height: 330px; padding: 0 8px 16px; border: 0; border-left: 1px solid #536585; border-radius: 0; overflow: visible; cursor: pointer; }
.studio-shell.plan-expanded .timeline-plan-card:hover { transform: none; }
.studio-shell.plan-expanded .timeline-plan-image { height: 220px; aspect-ratio: auto; }
.studio-shell.plan-expanded .timeline-plan-image img { height: 100%; object-fit: contain; }
.studio-shell.plan-expanded .timeline-plan-copy p,
.studio-shell.plan-expanded .timeline-plan-copy strong { display: block; white-space: pre-wrap; overflow: visible; -webkit-line-clamp: unset; font-size: 14px; line-height: 1.6; max-height: none; }
.timeline-plan-copy p b { display: block; color: #aec8ef; font-size: 11px; margin-bottom: 5px; }
.timeline-reading-tools,.timeline-full-lyrics { display: none; }
.plan-expanded .timeline-reading-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0; font-size: 12px; }
.timeline-reading-tools label { display: flex; align-items: center; gap: 8px; }
.timeline-reading-tools input { width: 120px; }
.plan-expanded .timeline-full-lyrics { display: block; flex: 0 0 auto; margin-bottom: 8px; border: 1px solid #344760; border-radius: 6px; padding: 8px 12px; }
.timeline-full-lyrics summary { cursor: pointer; font-size: 13px; }
.timeline-full-lyrics pre { max-height: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.7 system-ui; margin: 10px 0; }
.timeline-full-lyrics[open] { display: block; }
.timeline-lyric-coverage { flex: 0 0 auto; margin: 4px 0 8px; padding: 8px 12px; border: 1px solid #344760; border-radius: 8px; background: #0d1425; color: #c8d7ee; font-size: 12px; line-height: 1.5; }
.timeline-lyric-coverage p { margin: 0; }
.timeline-lyric-coverage a { color: #c6b6ff; text-decoration: underline; }
.timeline-lyric-coverage summary { cursor: pointer; margin-top: 4px; }
.lyric-review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lyric-review-summary strong { color: #ecf0ff; }
.lyric-review-summary > span { color: #9db2d3; }
.lyric-review-summary .button { margin-left: auto; min-height: 32px; padding: 5px 12px; }
.timeline-lyric-coverage[data-kept="true"] .lyric-review-summary strong { color: #8ee2cc; }
.timeline-lyric-coverage > details[open] { margin-top: 8px; }
.timeline-lyric-coverage > details[open] > p { margin: 8px 0; }
@media (max-width: 820px) {
  .lyric-review-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; }
  .lyric-review-summary > span { grid-column: 1; font-size: 11px; }
  .lyric-review-summary > .button { grid-column: 2; grid-row: 1 / span 2; max-width: 130px; white-space: normal; }
}
.lyric-review-editor { margin: 8px 0 12px; padding: 10px; border: 1px solid #445371; border-radius: 8px; background: #101829; color: #dce8ff; white-space: normal; }
.lyric-review-editor form { display: grid; gap: 10px; padding-top: 10px; }
.lyric-review-editor label { display: grid; gap: 5px; min-width: 0; }
.lyric-review-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.lyric-review-editor input,.lyric-review-editor textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid #445371; border-radius: 6px; color: #eaf1ff; background: #0b1220; font: inherit; }
.lyric-review-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.lyric-review-result { color: #d4c5ff; overflow-wrap: anywhere; }
.timeline-lyric-coverage ol { max-height: none; overflow: visible; margin: 6px 0; padding-left: 30px; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-lyric-jump { margin: 4px 0 8px 10px; padding: 5px 9px; min-height: 32px; white-space: normal; }
.visual-repair-instruction { overflow-wrap: anywhere; white-space: pre-wrap; }
.clip-lyrics-uncertain { border: 1px dashed #ab98df; background: #423362; color: #f2eaff; }
.timeline-toolbar { cursor: pointer; }
.zone-monitor { overflow-y: auto; overscroll-behavior: contain; }
.monitor-frame { flex-shrink: 0; }
/* The old monitor was sized to the 47-thumbnail filmstrip's intrinsic width
   and centered outside its viewport. Constrain the canvas, not the filmstrip. */
.monitor-frame:has(#scene-workbench) #monitor-empty { width: 100%; max-width: 100%; min-width: 0; margin: 0; inset: auto; transform: none; }
.workflow-canvas,.workflow-canvas > * { min-width: 0; max-width: 100%; }
.workflow-canvas { width: 100%; }
.scene-filmstrip { width: 100%; min-width: 0; }
/* Each main panel owns its vertical scroll. Cards and descriptions grow to
   their content; only scene navigation keeps a horizontal strip. */
.studio-workspace > .zone { scrollbar-width: thin; scrollbar-color: #596b92 #0b1220; }
.zone-monitor .monitor-frame:has(#scene-workbench) { flex: 0 0 auto; height: auto; min-height: 0; max-height: none; overflow: visible; }
.monitor-frame:has(#scene-workbench) #monitor-empty { min-height: 0; overflow: visible; }
.workflow-canvas.has-scene-plan { min-height: 0; }
.studio-shell #scene-workbench .scene-inspector { height: auto; min-height: 0; max-height: none; overflow: visible; }
.studio-shell .scene-review { max-height: none; overflow: visible; }
.studio-shell .scene-filmstrip { overflow-x: auto; overflow-y: hidden; }
.studio-shell textarea,.timeline-scene-editor textarea { max-height: none; overflow: hidden; resize: none; }
.studio-shell :is(.zone-left,.zone-right,.zone-monitor) > * { flex-shrink: 0; }
.studio-shell :is(.zone-left,.zone-right,.zone-monitor) :is(p,dd,blockquote) { overflow-wrap: anywhere; }
.studio-shell :is(.zone-left,.zone-right,.zone-monitor) pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; max-height: none; }
.studio-shell :is(.zone-left,.zone-right,.zone-monitor),.timeline-scroll,.timeline-editor-content { scrollbar-width: thin; scrollbar-color: #596b92 #0b1220; }
.studio-shell ::-webkit-scrollbar,.timeline-scene-editor ::-webkit-scrollbar { width: 8px; height: 8px; }
.studio-shell ::-webkit-scrollbar-track,.timeline-scene-editor ::-webkit-scrollbar-track { background: #0b1220; }
.studio-shell ::-webkit-scrollbar-thumb,.timeline-scene-editor ::-webkit-scrollbar-thumb { border: 2px solid #0b1220; border-radius: 8px; background: #596b92; }
.monitor-controls { display: grid; grid-template-columns: minmax(180px,1fr) auto; align-items: start; flex-shrink: 0; min-width: 0; }
.monitor-controls audio { width: 100%; max-width: none; min-width: 0; }
.monitor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: start; min-width: 0; }
.monitor-actions > button { min-height: 40px; max-width: 100%; }
#video-wallet-help { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; border: 1px solid #65528c; border-radius: 10px; background: #16182d; min-width: 0; }
#video-wallet-help p,#video-wallet-help small { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#video-wallet-help small { color: #acbcd7; font-size: 12px; }
#video-wallet-help .button { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; white-space: normal; min-height: 42px; text-decoration: none; }
@media(max-width:1100px) {
  .monitor-controls { grid-template-columns: minmax(0,1fr); }
  .monitor-actions { justify-content: flex-start; }
}
@media(max-width:550px) { #video-wallet-help { grid-template-columns: minmax(0,1fr); } }
.timeline-review-actions { display: none; }
.plan-expanded .timeline-review-actions { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; font-size: 12px; color: #acbcd7; }
.timeline-review-actions button { flex-shrink: 0; }
/* Keep notifications above, not on top of, the approval action. */
.studio-shell.plan-expanded ~ #studio-toast { bottom: 80px; max-width: calc(100vw - 32px); pointer-events: none; }
@media(max-width:820px) { .studio-shell.plan-expanded ~ #studio-toast { bottom: 182px; } }
.timeline-image-zoom { position: absolute; bottom: 6px; left: 6px; border: 1px solid #536585; border-radius: 5px; padding: 5px 7px; background: #0d1425; color: #eaf1ff; font-size: 11px; }
.timeline-scene-edit { margin: 8px 0; min-height: 36px; }
.timeline-scene-editor { width: min(680px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 24px)); overflow: hidden; padding: 0; border: 1px solid #6d6594; border-radius: 14px; color: #eaf1ff; background: #101829; box-shadow: 0 24px 90px #000a; }
.timeline-scene-editor::backdrop { background: #030812c9; }
.timeline-scene-editor form { display: flex; flex-direction: column; max-height: inherit; }
.timeline-editor-heading,.timeline-editor-actions { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; }
.timeline-editor-heading { border-bottom: 1px solid #344760; }
.timeline-editor-heading h2 { font: 600 18px/1.4 system-ui; margin: 0; }
.timeline-editor-content { overflow: auto; min-height: 0; padding: 0 20px; font: 14px/1.6 system-ui; }
.timeline-editor-content h3 { font-size: 13px; color: #aac4ec; margin-bottom: 4px; }
.timeline-editor-content p { white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-editor-content label { display: block; margin-top: 20px; }
.timeline-editor-content textarea { display: block; width: 100%; margin-top: 8px; min-height: 130px; resize: none; border: 1px solid #5f7393; border-radius: 8px; padding: 12px; background: #090f1d; color: #eaf1ff; font: inherit; }
.timeline-editor-note { color: #a5b7d4; font-size: 12px; }
#timeline-scene-error { color: #ffd58d; }
.timeline-editor-actions { justify-content: flex-end; border-top: 1px solid #344760; flex-wrap: wrap; }
.timeline-editor-actions button { max-width: 100%; white-space: normal; }
.timeline-scene-editor :focus-visible,.timeline-scene-edit:focus-visible { outline: 2px solid #80e4f0; outline-offset: 2px; }
@media (max-width: 820px) {
  .studio-shell > .studio-header { height: auto; min-height: 96px; padding-block: 6px; grid-template-rows: auto auto; gap: 6px; }
  .studio-header .transport { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .studio-header .transport .field-compact { display: none; }
  .studio-shell.plan-expanded { display: grid; height: 100dvh; min-height: 0; padding-bottom: 64px; grid-template-rows: auto 0 minmax(0, 1fr); }
  .studio-shell.plan-expanded > .zone-timeline { height: auto; }
  .plan-expanded .timeline-tools { flex-wrap: wrap; }
  .plan-expanded .timeline-toolbar { flex-wrap: wrap; }
  .plan-expanded .timeline-review-actions > span { display: none; }
  .plan-expanded .timeline-review-actions { flex-wrap: wrap; }
  .plan-expanded .timeline-review-actions button { width: 100%; }
}
#historical-scene-images { margin-block: 1rem; padding: .8rem; border: 1px solid #596077; border-radius: .6rem; }
#historical-scene-images summary { cursor: pointer; font-weight: 600; }
.historical-image-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: .75rem; }
.historical-image-grid figure { margin: 0; }
.historical-image-grid img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; }
.historical-image-grid figcaption { font-size: .8rem; }