/* Keep each theme's original columns until the user moves the divider. */
.playlist-resizer{display:none}
@media (min-width:851px){
  /* Controls and the playlist heading must adapt to the resized columns. */
  html[data-theme] .shell{min-height:max(600px,var(--playlist-required-height,0px))}
  html[data-theme] .controlrow,html[data-theme] .side-head{flex-wrap:wrap}
  html:is([data-theme="bleu"],[data-theme="cinema"]) .layout{grid-template-columns:minmax(0,1fr) var(--playlist-track,minmax(260px,29%))}
  html[data-theme="olivier"] .layout{grid-template-columns:var(--playlist-track,minmax(250px,23%)) minmax(0,1fr)}
  html[data-theme="ivoire"] .layout{grid-template-columns:195px minmax(0,1fr) var(--playlist-track,minmax(230px,22%))}
  html[data-theme="mosaique"] .layout{grid-template-columns:minmax(0,1fr) var(--playlist-track,minmax(300px,25%))}
  html[data-theme="graphite"] .layout{grid-template-columns:95px minmax(0,1fr) var(--playlist-track,minmax(260px,24%))}
  html[data-theme="clair"] .layout{grid-template-columns:var(--playlist-track,minmax(240px,22%)) minmax(0,1fr)}
  html[data-theme="prune"] .layout{grid-template-columns:115px minmax(0,1fr) var(--playlist-track,minmax(270px,24%))}
  html[data-theme="broadcast"] .layout{grid-template-columns:var(--playlist-track,minmax(220px,17%)) minmax(0,1fr) minmax(190px,17%)}
  html[data-theme="boreal"] .layout{grid-template-columns:minmax(0,1fr) var(--playlist-track,minmax(270px,26%))}

  .playlist-resizer{
    grid-area:side;position:relative;z-index:5;display:block;align-self:stretch;justify-self:start;
    width:16px;min-width:16px;height:auto;margin:0 0 0 -8px;padding:0;border:0;border-radius:0;
    background:transparent;color:var(--accent);cursor:col-resize;touch-action:none;
  }
  .layout[data-playlist-position="left"] .playlist-resizer{justify-self:end;margin:0 -8px 0 0}
  .playlist-resizer::before,.playlist-resizer::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-radius:5px;pointer-events:none}
  .playlist-resizer::before{top:8%;bottom:8%;width:2px;background:var(--line);opacity:.9}
  .playlist-resizer::after{top:50%;width:5px;height:38px;margin-top:-19px;background:var(--accent);opacity:.78}
  .playlist-resizer:hover::before,.playlist-resizer:focus-visible::before{background:var(--accent);opacity:1}
  .playlist-resizer:hover::after,.playlist-resizer:focus-visible::after{opacity:1}
  .playlist-resizer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  html.resizing-playlist,html.resizing-playlist *{cursor:col-resize!important;user-select:none!important}
}
@media (min-width:851px) and (max-height:720px){
  html[data-theme] .shell:has(#compatPanel[open]){min-height:max(720px,var(--playlist-required-height,0px))}
}
@media (min-width:851px) and (max-width:1150px){
  html:is([data-theme="bleu"],[data-theme="cinema"]) .layout{grid-template-columns:minmax(0,1fr) var(--playlist-track,minmax(240px,28%))}
  html[data-theme="ivoire"] .layout{grid-template-columns:150px minmax(0,1fr) var(--playlist-track,minmax(210px,25%))}
}
@media (min-width:851px) and (max-width:1100px){
  html[data-theme="graphite"] .layout{grid-template-columns:80px minmax(0,1fr) var(--playlist-track,minmax(230px,26%))}
  html[data-theme="prune"] .layout{grid-template-columns:80px minmax(0,1fr) var(--playlist-track,minmax(230px,26%))}
  html[data-theme="broadcast"] .layout{grid-template-columns:var(--playlist-track,minmax(190px,22%)) minmax(0,1fr) 180px}
}
@media (min-width:851px) and (max-width:1050px){
  html[data-theme="mosaique"] .layout{grid-template-columns:minmax(0,1fr) var(--playlist-track,minmax(250px,28%))}
}