/* Autolyrical UI polish, loaded last. Uses the existing purple/yellow theme tokens; adds no new palette, layout or logo.
   1. The tool rail was clipped by `.workspace{overflow:hidden}` (web-fixes.css), hiding Media/Lyrics/Text & style/Video/Autocuts.
   2. Text below 12px raised to readable sizes (review: main text at least 12px).
   3. Tiny preview stages (1280x720 laptops) no longer clip the empty-state copy.
   4. Pressed/hover/focus states and card motion on transform + opacity + colour only. */

/* 1 · Tool rail visible again. Clip vertically (panels still scroll inside), never sideways. */
@media (min-width:1001px){
 :root[data-theme=autolyrical-v2] .workspace,
 :root[data-theme=autolyrical-v2][data-tool-v2] .workspace{overflow-x:visible!important;overflow-y:clip!important}
}

/* 2 · Readable small text */
:root[data-theme=autolyrical-v2] .save-state{font-size:12px}
:root[data-theme=autolyrical-v2] .topbar :is(summary,button,select,.ux-save34){font-size:12px}
:root[data-theme=autolyrical-v2] .preview-toolbar :is(button,span){font-size:12px}
:root[data-theme=autolyrical-v2] #ratioButtons button{font-size:12px;min-width:34px}
:root[data-theme=autolyrical-v2] .timecode{font-size:12px;font-variant-numeric:tabular-nums}
:root[data-theme=autolyrical-v2] .timeline-panel :is(.ghost-button,summary,label,strong,#lyricsCount,.base-track-name){font-size:12px}
:root[data-theme=autolyrical-v2] .timeline-panel .range-strip15>span{font-size:12px}
:root[data-theme=autolyrical-v2] .track-label{font-size:11px}
:root[data-theme=autolyrical-v2] .empty-mini{font-size:12px;line-height:1.45}
:root[data-theme=autolyrical-v2] kbd{font-size:11px}

/* 3 · Empty preview copy adapts to the stage it lives in */
#stage{container-type:inline-size}
@container (max-width:230px){
 .empty-stage{padding:10px;gap:6px}
 .empty-stage .ux-start34 p,.empty-stage .ux-open34{display:none}
 .empty-stage .ux-start34 strong{display:block;font-size:13px;line-height:1.25;text-wrap:balance}
 .empty-stage .empty-brand{width:56px;height:26px;margin-bottom:2px}
 :root[data-theme=autolyrical-v2] .empty-stage #emptyImportBtn{padding:7px 10px!important;min-height:0!important;font-size:12px!important;line-height:1.2;width:auto!important;max-width:100%;box-sizing:border-box;white-space:normal!important;text-wrap:balance}
}

/* 4 · Interaction feedback */
:root[data-theme=autolyrical-v2] :is(.ghost-button,.export-button,.primary-wide,.icon-button){transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease}
:root[data-theme=autolyrical-v2] :is(.ghost-button,.export-button,.primary-wide,.icon-button):active:not(:disabled){transform:translateY(1px)}
:root[data-theme=autolyrical-v2] :is(.ghost-button,.export-button,.primary-wide,.icon-button,summary,.template-card,.timeline-segment,.asset-card):focus-visible{outline:2px solid var(--brand-yellow);outline-offset:2px}
:root[data-theme=autolyrical-v2] .template-card{transition:border-color .16s ease,transform .16s ease,background-color .16s ease}
:root[data-theme=autolyrical-v2] .template-card:hover{transform:translateY(-2px)}
:root[data-theme=autolyrical-v2] .template-card:active{transform:translateY(0)}
:root[data-theme=autolyrical-v2] .template-card:focus-within{border-color:var(--accent)}
:root[data-theme=autolyrical-v2] .timeline-segment{transition:filter .14s ease,box-shadow .14s ease}
:root[data-theme=autolyrical-v2] .timeline-segment:hover{filter:brightness(1.1)}
@media (prefers-reduced-motion:reduce){
 :root[data-theme=autolyrical-v2] :is(.ghost-button,.export-button,.primary-wide,.icon-button,.template-card,.timeline-segment){transition:none}
 :root[data-theme=autolyrical-v2] :is(.template-card:hover,.ghost-button:active,.export-button:active,.primary-wide:active){transform:none}
}

/* 5 · Tool rail fits short laptop screens: compact buttons that never shrink, scroll as a last resort */
@media (min-width:1001px){
 :root[data-theme=autolyrical-v2] .studio-nav-v2{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
 :root[data-theme=autolyrical-v2] .studio-nav-v2 button{flex:0 0 auto}
}
@media (min-width:1001px) and (max-height:820px){
 :root[data-theme=autolyrical-v2] .studio-nav-v2{gap:2px}
 :root[data-theme=autolyrical-v2] .studio-nav-v2 button{min-height:56px!important;padding:6px 2px!important;gap:4px!important}
 :root[data-theme=autolyrical-v2] .studio-nav-v2 svg{width:20px;height:20px}
}