/* Production bridge for the approved renewal reference.  API views continue
   to use the existing runtime IDs, while this file keeps them inside the
   renewed single-page shell. */
body.rn-app { min-height: 100vh; background: var(--bg); color: var(--txt); }
body.rn-app #page { width: 100%; }
body.rn-app .rn-main { min-height: calc(100vh - 62px); }
body.rn-app .rn-content { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 64px; }
body.rn-app .rn-proj-main .rn-content { width: 100%; max-width: 1180px; margin: 0; }
body.rn-app .rn-proj-main { min-width: 0; }
body.rn-app .rn-project-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.rn-app .rn-project-sub { margin-top: 3px; color: var(--txt-3); font-size: 11px; }
body.rn-app .rn-tool-note { margin: 0 0 16px; font-size: 12px; color: var(--txt-3); }
body.rn-app .rn-login-link { color: var(--brand-2); font-weight: 800; }
body.rn-app .rn-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.rn-app .rn-stage-card { display: flex; min-height: 150px; flex-direction: column; justify-content: space-between; text-decoration: none; }
body.rn-app .rn-stage-card .pill { align-self: flex-start; }
body.rn-app .rn-tool-picker .card { min-height: 126px; }
body.rn-app .rn-route-loading { min-height: 180px; display: grid; place-items: center; }
body.rn-app .rn-auth-form { display: grid; gap: 14px; }
body.rn-app .rn-auth-form .field { margin: 0; }
body.rn-app .rn-account-email { overflow-wrap: anywhere; }
body.rn-app .rn-project-meta { display: flex; align-items: center; gap: 10px; color: var(--txt-3); font-size: 12px; }
body.rn-app .rn-project-meta .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--txt-3); }
body.rn-app #audio-mix-root > .card:first-child { margin-top: 0; }
body.rn-app #quick-studio > .card:first-child { margin-top: 0; }
body.rn-app .app-timing-row { grid-template-columns: minmax(180px, 1fr) 118px 118px; }
body.rn-app .app-transcription-progress-card,
body.rn-app .app-transcription-source,
body.rn-app .app-timing-editor { background: var(--panel); border-color: var(--line); }
body.rn-app .app-transcription-progress-fill { background: var(--grad); }
body.rn-app .app-timing-row { background: var(--panel-2); border-color: var(--line); }
body.rn-app .app-timing-row input { background: var(--bg-2); }
body.rn-app .app-timing-row.is-active { border-color: var(--brand-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 45%, transparent); }
body.rn-app .app-timing-line { appearance: none; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
body.rn-app .app-timing-line:hover { color: var(--brand-2); }
body.rn-app .app-timing-window { display: block; margin-top: 4px; color: var(--txt-3); font-size: 11px; font-weight: 700; }
body.rn-app .app-lyric-audio-preview { margin-top: 10px; }
body.rn-app .app-lyric-audio-preview audio { display: block; width: min(100%, 560px); margin-top: 10px; }
body.rn-app .app-lyric-playback-position { margin: 7px 0 0; font-variant-numeric: tabular-nums; }
body.rn-app .app-transcription-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
body.rn-app .app-transcription-metric { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
body.rn-app .app-transcription-metric span { display: block; color: var(--txt-3); font-size: 11px; }
body.rn-app .app-transcription-metric b { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: 12px; }
body.rn-app .app-main { width: 100%; }

@media (max-width: 820px) {
  body.rn-app .rn-content { width: min(100% - 28px, 1180px); padding-top: 24px; }
  body.rn-app .rn-proj-main .rn-content { width: 100%; }
  body.rn-app .rn-stage-grid { grid-template-columns: 1fr; }
  body.rn-app .app-timing-row { grid-template-columns: 1fr 1fr; }
  body.rn-app .app-timing-line { grid-column: 1 / -1; }
  body.rn-app .app-transcription-metrics { grid-template-columns: 1fr; }
}
/* Source-to-MP4 completion workspace. */
.render-layout { display:grid; align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-bottom:24px; }
.render-layout .card { min-width:0; margin-top:0; }
.render-settings label { display:block; margin:20px 0 8px; font-weight:600; }
.render-settings select, .render-settings input, .render-preview audio { width:100%; max-width:100%; }
.render-layout p, #render-job p { overflow-wrap:anywhere; }
.render-layout .row-flex { flex-wrap:wrap; gap:8px; margin-top:24px; }
.render-preview audio { margin:16px 0; }
.render-caption-preview { min-height:180px; background:#111820; border-radius:12px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; text-align:center; margin-bottom:20px; }
.render-caption-preview strong { color:#fff; font-size:clamp(24px,2.7vw,44px); font-weight:800; text-shadow:2px 2px 0 #000,-2px -2px 0 #000; overflow-wrap:anywhere; }
.render-caption-preview span { color:#ddd; margin-top:12px; overflow-wrap:anywhere; }
@media(max-width:900px) { .render-layout { grid-template-columns:minmax(0,1fr); } }
.video-title-settings { min-width:0; border:1px solid var(--line,#343943); border-radius:12px; padding:18px; margin:24px 0; }
.video-title-settings legend { font-weight:700; padding:0 8px; }
.video-title-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.video-title-fields .field { min-width:0; }
.video-title-fields label { display:block; margin:8px 0; font-size:13px; }
.video-title-fields input { width:100%; min-width:0; }
.video-title-toggle { display:flex!important; align-items:center; gap:8px; margin:0 0 14px!important; }
.video-title-toggle input { width:auto!important; }
.video-title-preview { container-type:inline-size; position:relative; aspect-ratio:16/9; background:linear-gradient(145deg,#143b48,#15252a 55%,#4f3923); border-radius:8px; color:white; overflow:hidden; }
.video-title-center { position:absolute; top:39%; left:5%; right:5%; text-align:center; }
.video-title-center strong,.video-title-center span { display:block; overflow-wrap:anywhere; line-height:1.2; font-weight:800; text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000; }
.video-title-center strong { font-size:5.8cqw; }
.video-title-center span { font-size:4.2cqw; }
.video-title-preview small { position:absolute; left:5%; right:5%; bottom:6%; text-align:center; font-size:3.75cqw; font-weight:800; overflow-wrap:anywhere; text-shadow:2px 2px 0 #000,-2px -2px 0 #000; }
@media(max-width:650px) { .video-title-fields { grid-template-columns:1fr; } .video-title-settings { padding:12px; } }

/* Current-stage progress: observed counts and explicitly labelled time estimates. */
.quick-progress-overview { margin-top:20px; padding:24px; border:1px solid #394462; border-radius:16px; background:linear-gradient(120deg,#201b35,#142730); min-width:0; }
.quick-progress-heading { display:flex; align-items:center; gap:10px; color:#e8edff; font-weight:600; }
.quick-loading-indicator { width:18px; height:18px; flex:0 0 18px; border:2px solid #6c728a; border-radius:50%; }
.quick-loading-indicator.is-active { border-color:#8664d8; border-top-color:#56d5f0; animation:quick-progress-spin 1s linear infinite; }
.quick-progress-metrics { display:grid; grid-template-columns:1.1fr 1.3fr .8fr; gap:20px; margin:24px 0 20px; }
.quick-progress-metrics > div { min-width:0; }
.quick-progress-metrics span { display:block; margin-bottom:8px; font-size:12px; color:#b8c2d8; }
.quick-progress-metrics strong { display:block; font-size:clamp(22px,2.3vw,32px); line-height:1.3; color:#fff; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.quick-progress-metrics .quick-overview-elapsed { color:#c4cbdd; }
.quick-progress-track { height:10px; overflow:hidden; border-radius:999px; background:#0e1424; }
.quick-progress-fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9e65ff,#29cce8); transition:width .6s ease; }
.quick-progress-track.is-indeterminate .quick-progress-fill { animation:quick-progress-sweep 1.8s ease-in-out infinite alternate; }
.quick-progress-estimate-note { margin:14px 0 0; color:#b8c2d8; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.quick-progress-overview[data-tone="complete"] { border-color:#28766c; }
.quick-progress-overview[data-tone="complete"] .quick-loading-indicator { background:#38bda3; border-color:#38bda3; }
.quick-progress-overview[data-tone="failed"],.quick-progress-overview[data-tone="waiting"] { border-color:#b47b47; }
.quick-progress-overview[data-tone="failed"] .quick-loading-indicator { border-color:#f59b81; border-radius:3px; }
.quick-progress-overview[data-tone="review"] .quick-loading-indicator { border-radius:2px; border-width:0 5px; border-color:#d7ba75; }
@keyframes quick-progress-spin { to { transform:rotate(360deg); } }
@keyframes quick-progress-sweep { from { transform:translateX(-100%); } to { transform:translateX(330%); } }
@media(max-width:650px) {
  .quick-progress-overview { padding:18px; }
  .quick-progress-metrics { grid-template-columns:minmax(0,1fr); gap:18px; margin:20px 0; }
  .quick-progress-metrics strong { font-size:26px; }
  #quick-studio .row-flex { flex-wrap:wrap; gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .quick-loading-indicator.is-active,.quick-progress-track.is-indeterminate .quick-progress-fill { animation:none; }
  .quick-progress-fill { transition:none; }
}

/* Images become visible while the existing generation flow keeps running. */
#quick-studio .quick-reference-gallery { margin-top:20px; }
.quick-reference-gallery .row-flex { flex-wrap:wrap; gap:12px; }
.quick-reference-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.quick-reference-scene { min-width:0; border:1px solid var(--line,#29303d); border-radius:14px; background:var(--panel-2,#11151d); padding:12px; }
.quick-reference-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.quick-reference-scene[data-status="ready"] { border-color:#246657; }
.quick-reference-scene[data-status="failed"] { border-color:#824348; }
.quick-reference-media { aspect-ratio:16/9; background:#090d14; border-radius:9px; overflow:hidden; display:grid; place-items:center; }
.quick-reference-media img { display:block; width:100%; height:100%; object-fit:contain; }
.quick-reference-media p { text-align:center; padding:16px; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.quick-reference-lyrics { margin:12px 0 0; font-size:13px; line-height:1.65; color:var(--txt-2,#b5bece); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media(max-width:950px) { .quick-reference-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .quick-reference-grid { grid-template-columns:minmax(0,1fr); } }