/* V4 guided workflow. Everything that changes the look is scoped to :root[data-ui-mode=guided],
   so the classic editor is untouched. Uses the editor's own theme tokens: no new palette, logo or layout. */

/* ---- view switch (visible in both views) ---- */
.wf4-mode{display:inline-flex;gap:2px;padding:2px;margin-right:10px;border:1px solid var(--line);border-radius:999px;background:var(--ui-well,#17121f)}
.wf4-mode button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.wf4-mode button:hover{color:var(--text)}
.wf4-mode button[aria-pressed=true]{background:var(--ui-selected,#453050);color:var(--text)}
.wf4-mode button:focus-visible{outline:2px solid var(--brand-yellow);outline-offset:2px}

/* ---- everything below exists only in guided view ---- */
.wf4-bar,.wf4-card,.wf4-more{display:none}
:root[data-ui-mode=guided]{--v4-display:'Instrument Serif',Georgia,'Times New Roman',serif;--v4-ui:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif}
:root[data-ui-mode=guided]{--ui-font:var(--v4-ui)!important}
:root[data-ui-mode=guided] :is(body,button,input,select,textarea){font-family:var(--v4-ui)}

/* ---- slim step bar ---- */
:root[data-ui-mode=guided] .wf4-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"steps nav" "text actions";align-items:center;gap:0 24px;flex:0 0 auto;padding:0 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.wf4-steps{grid-area:steps;display:flex;gap:30px;margin:0;padding:0;list-style:none}
.wf4-step{appearance:none;display:inline-flex;align-items:baseline;gap:8px;padding:14px 0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:color .16s ease,border-color .16s ease}
.wf4-step:hover:not(:disabled){color:var(--text)}
.wf4-step:disabled{opacity:.4;cursor:not-allowed}
.wf4-step:focus-visible{outline:2px solid var(--brand-yellow);outline-offset:2px;border-radius:4px}
.wf4-num{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.wf4-step[aria-current=step]{color:var(--text);border-bottom-color:var(--accent)}
.wf4-step[aria-current=step] .wf4-num{color:var(--accent)}
.wf4-step.is-done:not([aria-current=step]) .wf4-num{font-size:0;display:inline-block;width:10px;height:6px;margin-right:2px;border-left:2px solid var(--brand-yellow);border-bottom:2px solid var(--brand-yellow);align-self:center;transform:rotate(-45deg) translateY(-3px)}
.wf4-nav{grid-area:nav;display:flex;align-items:center;gap:6px}
.wf4-quiet{appearance:none;border:0;background:transparent;color:var(--muted);font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:color .16s ease,background-color .16s ease}
.wf4-quiet:hover:not(:disabled){color:var(--text);background:var(--ui-hover,#352740)}
.wf4-quiet:disabled{opacity:.4;cursor:not-allowed}
.wf4-quiet.is-ready:not(:disabled){color:var(--brand-yellow)}
.wf4-quiet:focus-visible{outline:2px solid var(--brand-yellow);outline-offset:2px}
.wf4-bar [hidden]{display:none!important}

/* Second row (steps 3 to 5): the step's one sentence and its action. */
.wf4-text{grid-area:text;min-width:0;padding:2px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf4-title{display:inline;margin-right:12px;font-family:var(--v4-display)!important;letter-spacing:0;word-spacing:.12em;font-size:28px;font-weight:400;line-height:1;color:var(--text)}
.wf4-hint{font-size:13px;color:var(--muted)}
.wf4-actions{grid-area:actions;display:flex;align-items:center;gap:8px;padding:2px 0 12px}
:root[data-ui-mode=guided][data-wf4-card=on] :is(.wf4-text,.wf4-actions){display:none}

/* ---- buttons: one primary, one quiet secondary ---- */
.wf4-primary{appearance:none;min-height:38px;padding:0 18px;border:0;border-radius:10px;background:var(--brand-yellow);color:#13180d;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .16s ease,transform .16s ease,opacity .16s ease}
.wf4-primary:hover:not(:disabled){background:#e4ff95}
.wf4-primary:active:not(:disabled){transform:translateY(1px)}
.wf4-primary:disabled{opacity:.45;cursor:not-allowed}
.wf4-secondary{appearance:none;min-height:38px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);font-size:14px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}
.wf4-secondary:hover:not(:disabled){background:var(--ui-hover,#352740);border-color:var(--accent)}
.wf4-secondary:disabled{opacity:.45;cursor:not-allowed}
.wf4-primary:focus-visible,.wf4-secondary:focus-visible{outline:2px solid var(--brand-yellow);outline-offset:2px}

/* ---- the step card lives inside the preview box (steps 1 and 2) ---- */
:root[data-ui-mode=guided][data-wf4-card=on] #emptyStage{display:none!important}
:root[data-ui-mode=guided][data-wf4-card=on] .wf4-card{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(10px,8cqw,26px);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.wf4-card-title{font-family:var(--v4-display)!important;letter-spacing:0;word-spacing:.12em;font-size:clamp(20px,13cqw,38px);font-weight:400;line-height:1.05;color:var(--text);text-wrap:balance}
.wf4-card-hint{margin:0 0 4px;font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.wf4-card .wf4-primary,.wf4-card .wf4-secondary{width:100%;padding:0 10px;min-height:36px;font-size:13px}
@container (max-width:170px){.wf4-card-hint{display:none}.wf4-card-title{font-size:19px}}

/* ---- lyrics, less is more: no engine, language or server details ---- */
:root[data-ui-mode=guided] :is(.manual-option:has(#localEngine),.manual-option:has(#lyricLanguage),#setupParakeetBtn,.status-grid,.language-chip:has(#languageChip),#aiDialog .eyebrow){display:none!important}
:root[data-ui-mode=guided] .helper:has(#languageValue){display:none}
:root[data-ui-mode=guided] #transcribeBtn{background:var(--brand-yellow)!important;color:#13180d!important;border:0!important;box-shadow:none!important;font-weight:600}
:root[data-ui-mode=guided]:not([data-wf4-more=on]) :is(.ux-reading34,.tools22){display:none}
:root[data-ui-mode=guided][data-tool-v2=lyrics] .wf4-more{display:inline-flex;margin:0 auto 0 14px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
:root[data-ui-mode=guided][data-tool-v2=lyrics] .wf4-more:hover{color:var(--text);background:var(--ui-hover,#352740)}
:root[data-ui-mode=guided] .wf4-more:focus-visible{outline:2px solid var(--brand-yellow);outline-offset:2px}

/* ---- premium type: serif for headings, sentence-case labels ---- */
:root[data-ui-mode=guided] .panel-heading h2{font-family:var(--v4-display)!important;font-size:34px!important;font-weight:400!important;line-height:1!important;letter-spacing:0!important;word-spacing:.12em!important}
:root[data-ui-mode=guided] .timeline-head strong{font-family:var(--v4-display)!important;font-size:26px!important;font-weight:400!important;letter-spacing:0!important;word-spacing:.12em!important}
:root[data-ui-mode=guided] :is(.track-label,.lyrics-editor-head span,.eyebrow,.collection-label,.template-drag-label){text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}

@media (max-width:760px){
 :root[data-ui-mode=guided] .wf4-bar{grid-template-columns:1fr;grid-template-areas:"steps" "nav" "text" "actions";padding:0 14px}
 .wf4-steps{gap:16px;overflow-x:auto}
 .wf4-label{display:none}
 .wf4-step[aria-current=step] .wf4-label{display:inline}
 .wf4-text{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
 .wf4-mode button,.wf4-step,.wf4-primary,.wf4-secondary,.wf4-quiet{transition:none}
}

/* The real "Create lyrics automatically" button always stays visible in the Lyrics panel (the card in the preview is a shortcut to it). */

/* ---- identity layer: colour plates, as in the earlier design ---- */
:root[data-ui-mode=guided]{--v4-display:var(--v4-ui);--v4-lilac:#b79ae0;--v4-lime:#dcf08f;--v4-ink:#1b1424}
:root[data-ui-mode=guided][data-theme] :is(.media-panel,.style-panel) .panel-heading{background:var(--v4-lilac)!important;color:var(--v4-ink)!important;border:0!important;border-radius:12px;padding:12px 16px!important;box-shadow:none!important}
:root[data-ui-mode=guided][data-theme] .style-panel .panel-heading{background:var(--v4-lime)!important}
:root[data-ui-mode=guided] .panel-heading::before{content:none!important}
:root[data-ui-mode=guided] .panel-heading :is(h2,button,svg){color:inherit!important}
:root[data-ui-mode=guided] .panel-heading h2{font-size:26px!important;font-weight:600!important;letter-spacing:-.01em!important;word-spacing:0!important}
:root[data-ui-mode=guided][data-theme] .timeline-head{background:var(--v4-lilac)!important;color:var(--v4-ink)!important;border:0!important;border-radius:12px;box-shadow:none!important}
:root[data-ui-mode=guided] .timeline-head :is(strong,#lyricsCount){color:inherit!important}
:root[data-ui-mode=guided] .timeline-head strong{font-size:24px!important;font-weight:600!important;letter-spacing:-.01em!important;word-spacing:0!important}
:root[data-ui-mode=guided][data-theme] .media-drop-v2{background:var(--v4-lime)!important;border:0!important;color:var(--v4-ink)!important}
:root[data-ui-mode=guided] .media-drop-v2 :is(strong,small,span){color:var(--v4-ink)!important}
/* step bar: the current step is a lilac tape label */
:root[data-ui-mode=guided] .wf4-steps{gap:6px}
.wf4-step{margin:8px 0;padding:7px 14px;border:0;border-bottom:0;border-radius:8px}
.wf4-step[aria-current=step]{background:var(--v4-lilac);color:var(--v4-ink);font-weight:600;border-bottom-color:transparent}
.wf4-step[aria-current=step] .wf4-num{color:var(--v4-ink)}
.wf4-step:hover:not(:disabled):not([aria-current=step]){background:var(--ui-hover,#352740)}
.wf4-title{font-weight:600;font-size:18px;word-spacing:0}
.wf4-card-title{font-weight:600;font-size:clamp(18px,10cqw,28px);word-spacing:0;letter-spacing:-.01em}
.wf4-text{padding-top:0}
:root[data-ui-mode=guided] .panel-heading button{color:var(--v4-ink)!important;opacity:.75;background:transparent!important;border:0!important}
:root[data-ui-mode=guided] .panel-heading button:hover{opacity:1}

/* ================= V4 impress pass ================= */
/* 5 · progress: lime fills the step bar as steps are done; finished steps are lime tape labels */
:root[data-ui-mode=guided] .wf4-bar{position:relative}
.wf4-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;pointer-events:none}
.wf4-progress span{display:block;height:100%;background:var(--v4-lime);transform-origin:left;transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wf4-step.is-done:not([aria-current=step]){background:color-mix(in srgb,var(--v4-lime) 14%,transparent);color:var(--text)}
.wf4-step.is-done:not([aria-current=step]) .wf4-num{border-left-color:var(--v4-lime);border-bottom-color:var(--v4-lime)}
:root[data-ui-mode=guided][data-theme][data-tool-v2=media][data-wf4-media=done] .media-panel .panel-heading,
:root[data-ui-mode=guided][data-theme][data-tool-v2=lyrics][data-wf4-lyrics=done] .media-panel .panel-heading{background:var(--v4-lime)!important}

/* 4 · tape motif: film perforations along the top and bottom edge of every plate */
:root[data-ui-mode=guided][data-theme] :is(.media-panel,.style-panel) .panel-heading,
:root[data-ui-mode=guided][data-theme] .timeline-head{position:relative;overflow:hidden}
:root[data-ui-mode=guided][data-theme] :is(.media-panel,.style-panel) .panel-heading::before,
:root[data-ui-mode=guided][data-theme] :is(.media-panel,.style-panel) .panel-heading::after,
:root[data-ui-mode=guided][data-theme] .timeline-head::before,:root[data-ui-mode=guided][data-theme] .timeline-head::after{content:''!important;position:absolute;left:10px;right:10px;width:auto!important;height:3px;top:auto;border-radius:2px;background:repeating-linear-gradient(90deg,var(--v4-ink) 0 7px,transparent 7px 15px);opacity:.16;pointer-events:none}
:root[data-ui-mode=guided][data-theme] :is(.media-panel,.style-panel) .panel-heading::before,:root[data-ui-mode=guided][data-theme] .timeline-head::before{top:5px;bottom:auto}
:root[data-ui-mode=guided][data-theme] :is(.media-panel,.style-panel) .panel-heading::after,:root[data-ui-mode=guided][data-theme] .timeline-head::after{bottom:5px;top:auto}

.wf4-card-title{font-size:clamp(20px,10cqw,40px)}
:root[data-ui-mode=guided][data-wf4-card=on] .wf4-card > *{animation:wf4-rise .45s cubic-bezier(.2,.7,.2,1) both}
:root[data-ui-mode=guided][data-wf4-card=on] .wf4-card > :nth-child(2){animation-delay:.05s}
:root[data-ui-mode=guided][data-wf4-card=on] .wf4-card > :nth-child(3){animation-delay:.1s}
:root[data-ui-mode=guided][data-wf4-card=on] .wf4-card > :nth-child(4){animation-delay:.15s}
@keyframes wf4-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .wf4-progress span{transition:none}
 :root[data-ui-mode=guided][data-wf4-card=on] .wf4-card > *{animation:none}
}

/* ---- narrow windows (guided view): one column, nothing sits off-screen ---- */
@media (max-width:1000px){
 :root[data-ui-mode=guided],:root[data-ui-mode=guided] body{overflow-x:clip;min-width:0!important}
 :root[data-ui-mode=guided] .topbar{flex-wrap:wrap;height:auto!important;min-height:0;padding:10px 14px;gap:8px 12px}
 :root[data-ui-mode=guided] .topbar :is(.top-actions,.actions){flex-wrap:wrap;margin-left:0;gap:8px;max-width:100%}
 :root[data-ui-mode=guided][data-theme] .workspace{display:flex!important;flex-direction:column;flex:1 1 0!important;height:auto!important;min-height:120px!important;overflow-y:auto!important;overflow-x:clip!important;margin:12px 14px 0!important;gap:12px}
 :root[data-ui-mode=guided] .workspace > :is(.media-panel,.style-panel,.preview-column){width:100%!important;max-width:100%;min-width:0;max-height:none!important;height:auto!important;flex:0 0 auto}
 :root[data-ui-mode=guided] .workspace > .preview-column{order:-1}
 :root[data-ui-mode=guided] .workspace > .style-panel{order:2}
 :root[data-ui-mode=guided] .workspace > :is(.media-panel,.style-panel){overflow:visible!important}
 :root[data-ui-mode=guided] .stage-wrap{min-height:min(70vh,520px)}
 :root[data-ui-mode=guided][data-theme] .timeline-panel{flex:0 0 clamp(190px,34dvh,300px)!important;max-height:none!important;overflow:auto!important;margin:8px 14px 12px!important}
 :root[data-ui-mode=guided],:root[data-ui-mode=guided] body{height:100dvh;overflow:hidden}
 :root[data-ui-mode=guided] .app-shell{display:flex!important;flex-direction:column;height:100dvh!important;min-height:0!important;overflow:hidden!important}
 :root[data-ui-mode=guided] .workspace > :is(.resizer,.panel-resizer,[class*=resize]){display:none}
}

.wf4-build{margin-right:10px;font-size:11px;color:var(--muted);opacity:.75;white-space:nowrap}
.wf4-create-modes{display:flex;gap:12px;grid-column:1/-1;margin-bottom:10px;max-width:100%}
.wf4-create-modes[hidden]{display:none}
.wf4-create-mode{display:grid;gap:6px;flex:1;text-align:left;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}
.wf4-create-mode strong{font-size:15px}
.wf4-create-mode span{font-size:12px;line-height:1.5;color:var(--muted)}
.wf4-create-mode[aria-pressed=true]{border-color:var(--brand-yellow);box-shadow:inset 0 0 0 1px var(--brand-yellow)}
:root[data-ui-mode=guided] .stage-wrap{position:relative}
:root[data-ui-mode=guided][data-wf4-card=on] .stage-wrap > .wf4-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;justify-content:stretch;padding:18px;overflow:auto}
.wf4-card-title,.wf4-card-hint{grid-column:1/-1}
.wf4-create-mode{padding:10px}

/* ---- resizable boxes (guided view) ----
   web-fixes.css pinned the workspace height, so the drag bar above the timeline did nothing, and the side panels stopped at 460px.
   The editor's own drag bars now work: the bar above the timeline sets the workspace height, the timeline takes the rest (never less than 200px). */
@media (min-width:1001px){
 :root[data-ui-mode=guided][data-theme=autolyrical-v2] .app-shell{display:flex!important;flex-direction:column;height:100dvh!important;overflow:hidden!important}
 :root[data-ui-mode=guided][data-theme=autolyrical-v2][data-tool-v2] .workspace{flex:0 1 var(--workspace-height,340px)!important;height:var(--workspace-height,340px)!important;min-height:220px!important;max-height:none!important;grid-template-columns:clamp(280px,var(--left-panel,28vw),650px) 7px minmax(280px,1fr) 7px clamp(310px,var(--right-panel,29vw),650px)!important}
 :root[data-ui-mode=guided][data-theme=autolyrical-v2] .timeline-panel:not(.timeline-collapsed){flex:1 1 200px!important;min-height:200px!important;max-height:none!important}
}
/* drag bars you can actually see and grab */
:root[data-ui-mode=guided] :is(.panel-resizer,.workspace-resizer){position:relative;border-radius:6px;transition:background-color .16s ease}
:root[data-ui-mode=guided] :is(.panel-resizer,.workspace-resizer)::after{content:'';position:absolute;inset:0;margin:auto;border-radius:3px;background:var(--v4-lilac);opacity:.35;transition:opacity .16s ease}
:root[data-ui-mode=guided] .panel-resizer::after{width:3px;height:44px}
:root[data-ui-mode=guided] .workspace-resizer::after{width:56px;height:3px}
:root[data-ui-mode=guided] :is(.panel-resizer,.workspace-resizer):is(:hover,:focus-visible){background:color-mix(in srgb,var(--v4-lilac) 18%,transparent)}
:root[data-ui-mode=guided] :is(.panel-resizer,.workspace-resizer):is(:hover,:focus-visible)::after{opacity:1}
:root[data-ui-mode=guided] :is(.panel-resizer,.workspace-resizer):focus-visible{outline:2px solid var(--brand-yellow);outline-offset:1px}