/* Panel flexibility (see panel-flex.mjs). Uses the editor's own tokens; adds no colours of its own. */

/* heading actions: two quiet icon buttons instead of one cryptic arrow */
.panel-heading .pf-actions{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}
.panel-heading .pf-btn{min-width:28px;width:28px;height:28px;min-height:28px;padding:0;display:inline-grid;place-items:center;border-radius:6px;background:transparent!important;color:inherit!important;opacity:.72;border:0!important;box-shadow:none;transition:background-color .14s ease,opacity .14s ease}
.panel-heading .pf-btn:hover,.panel-heading .pf-btn:focus-visible{background:color-mix(in srgb,currentColor 16%,transparent)!important;opacity:1}
.panel-heading .pf-btn:focus-visible{outline:2px solid var(--brand-yellow,#d5fa99);outline-offset:1px}
.panel-heading .pf-btn svg{display:block}

/* drag bars: a wide invisible grab area and the right cursor, double-click to reset */
.workspace>.panel-resizer{position:relative;cursor:col-resize;touch-action:none}
.workspace>.panel-resizer::before{content:'';position:absolute;top:0;bottom:0;left:-6px;right:-6px}
.workspace>.panel-resizer[data-pf-past=true]{background:color-mix(in srgb,var(--brand-yellow,#d5fa99) 22%,transparent)}
.workspace-resizer{position:relative;cursor:row-resize;touch-action:none}
.workspace-resizer::before{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px}

/* Focus button in the preview toolbar */
.pf-focus{display:inline-flex;align-items:center;gap:6px}
.pf-focus svg{flex-shrink:0}
.pf-focus[aria-pressed=true]{background:var(--ui-selected,#302143);color:var(--text)}

/* hide / show: the grid column follows the saved width, or shrinks to a slim tab */
@media(min-width:1001px){
 html:root[data-pf-on][data-pf-on][data-pf-on]:not([data-lyrics-focus34=true]) .workspace.pf-grid{
  --pf-l:var(--left-panel,280px);--pf-r:var(--right-panel,330px);
  grid-template-columns:var(--pf-l) 7px minmax(240px,1fr) 7px var(--pf-r)!important}
 html:root[data-pf-on][data-pf-on][data-pf-on]:not([data-lyrics-focus34=true]) .workspace.pf-grid[data-pf-left=collapsed]{--pf-l:46px}
 html:root[data-pf-on][data-pf-on][data-pf-on]:not([data-lyrics-focus34=true]) .workspace.pf-grid[data-pf-right=collapsed]{--pf-r:46px}
 .workspace.pf-grid.pf-animate:not(.resizing){transition:grid-template-columns .22s cubic-bezier(.2,.7,.2,1)}
}
body.resizing-panels .workspace.pf-grid{transition:none!important}

.pf-tab{display:none}
:root .workspace[data-pf-left=collapsed] .media-panel>:not(.pf-tab),
:root .workspace[data-pf-right=collapsed] .style-panel>:not(.pf-tab){display:none!important}
:root .workspace[data-pf-left=collapsed] .media-panel,
:root .workspace[data-pf-right=collapsed] .style-panel{padding:8px 4px!important;overflow:hidden!important;min-width:0}
:root .workspace[data-pf-left=collapsed] .media-panel>.pf-tab,
:root .workspace[data-pf-right=collapsed] .style-panel>.pf-tab{display:flex!important;flex-direction:column;align-items:center;gap:12px;width:100%;padding:10px 0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.pf-tab:hover{background:color-mix(in srgb,currentColor 12%,transparent);color:var(--text)}
.pf-tab:focus-visible{outline:2px solid var(--brand-yellow,#d5fa99);outline-offset:1px}
.pf-tab-label{writing-mode:vertical-rl;font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.workspace[data-pf-left=collapsed] .media-panel>.pf-tab{transform:none}

/* the Duo field inside the media panel must stay hidden while the panel is hidden */
:root .workspace[data-pf-left=collapsed] .media-panel>.duo-field{display:none!important}

@media(prefers-reduced-motion:reduce){.workspace.pf-grid.pf-animate{transition:none!important}}
.tool-drawer{position:relative}
.tool-drawer-heading h2{flex:1}
.pf-drawer-tab{display:none}
.tool-drawer[data-pf-collapsed=true] > :not(.pf-drawer-tab){display:none!important}
.tool-drawer[data-pf-collapsed=true] > .pf-drawer-tab{display:block;border:0;background:transparent;color:var(--text);padding:12px 5px;writing-mode:vertical-rl;cursor:pointer}
.pf-drawer-resizer{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:col-resize;touch-action:none}
.pf-drawer-resizer:hover{background:var(--line)}
:root[data-focus-workspace=true] .tool-drawer .panel-heading > .panel-focus{display:none!important}
@media(min-width:1001px){
 :root[data-focus-workspace=true][data-theme][data-drawer-collapsed=true] .app-shell > .workspace{grid-template-columns:46px minmax(240px,1fr)!important}
}
:root[data-focus-workspace=true] .studio-nav-v2:has([data-tool=duo]) button{min-height:74px!important;padding:14px!important;gap:4px 12px!important}
:root[data-focus-workspace=true] .studio-nav-v2:has([data-tool=duo]) button span{font-size:14px!important;line-height:1.4!important}