/* Shared compact library workspace. Heights are measured from each panel's position. */
#mediaBrowser{height:var(--workspace-height,65vh);min-height:240px;overflow:hidden}
#mediaBrowser .media-sidebar{display:flex;flex-direction:column;min-height:0;overflow:hidden;gap:6px}
#mediaBrowser .media-roots,#mediaCategoryResults{flex:1;min-height:0;overflow:auto}
#mediaBrowser .media-roots[hidden],#mediaCategoryResults[hidden]{display:none}
#mediaBrowser .media-pane{min-height:0;overflow:auto;display:block;padding:10px}
#mediaBrowser .media-dropzone{display:block;min-height:0}
#mediaBrowser .media-list{display:block;overflow:visible}
#mediaBrowser .media-row{min-height:32px;font-size:14px;padding:3px 8px;gap:8px;border-radius:0}
#mediaBrowser .media-table-head{gap:8px;padding:0 8px}
#mediaBrowser .media-name-text{font-size:14px}
#mediaBrowser .media-tree-label{font-size:14px;min-height:26px;padding:3px 5px;line-height:18px}
#mediaBrowser .media-tree-row,#mediaBrowser .media-tree-toggle{min-height:26px;height:26px}
#mediaCategorySearch{font-size:14px;padding:6px 8px;min-height:32px;width:100%;margin:0}
#mediaCategoryResults button,.pw-search-results button{display:grid;gap:3px;width:100%;text-align:left;background:transparent;color:inherit;border:0;border-bottom:1px solid #dce5eb;border-radius:0;padding:7px;font-size:14px}
#mediaCategoryResults small,.pw-search-results small{overflow-wrap:anywhere;color:#637586;font-size:14px}
#mediaBrowser .media-toolbar{gap:8px;margin-bottom:6px}
#mediaBrowser .actions{gap:5px;align-items:center;flex-wrap:wrap}
#mediaBrowser .actions>button{min-height:30px;padding:5px 8px;font-size:14px}
.media-column-menu{position:relative;font-size:14px}
.media-column-menu summary,.media-filter-disclosure>summary{cursor:pointer;border:1px solid #d2dfe7;border-radius:6px;padding:6px 9px;background:#fff;color:#183e50;font-size:14px}
#mediaColumnsOptions{position:absolute;right:0;top:100%;z-index:8;min-width:170px;background:#fff;border:1px solid #ccdbe4;border-radius:8px;padding:8px;box-shadow:0 5px 20px #193b4b26;color:#193b4b}
#mediaColumnsOptions label{display:flex;gap:8px;align-items:center;padding:5px;font-size:14px}
#mediaColumnsOptions input{width:15px;height:15px;margin:0}
#mediaBrowser .media-filterbar{align-items:flex-start}
#mediaBrowser .media-filter-disclosure{margin-left:auto}
#mediaBrowser .media-filter-disclosure .media-filter-controls{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
#mediaBrowser .media-pages{margin-top:8px}
#playlistsPage .pw-layout{height:var(--workspace-height,60vh);min-height:240px;grid-template-columns:minmax(200px,28%) minmax(0,1fr);overflow:hidden;gap:12px}
#playlistsPage .pw-library,#playlistsPage .pw-day{min-height:0;padding:8px;overscroll-behavior:contain}
#playlistsPage .pw-library input[type=search]{font-size:14px;padding:6px 8px;margin:0 0 5px;min-height:32px;width:100%}
#playlistsPage .pw-folder>button{font-size:14px;padding:4px 2px;line-height:18px;min-height:26px}
#playlistsPage .pw-file{padding:4px 5px;font-size:14px;line-height:18px}
#playlistsPage .pw-children{padding-left:12px}
#playlistsPage .pw-row{font-size:14px;grid-template-columns:64px 58px minmax(0,1fr) 26px;padding:3px 7px;gap:6px}
#playlistsPage .pw-row button{font-size:14px;min-height:24px}
#playlistsPage .pw-relay summary{display:flex;align-items:center;gap:10px;padding:7px 10px;background:#edf3f6;font-size:14px;cursor:pointer}
#playlistsPage .pw-relay summary::before{content:'▸'}
#playlistsPage .pw-relay[open] summary::before{content:'▾'}
#playlistsPage .pw-relay summary span{margin-left:auto;color:#607887;font-size:14px}
#playlistsPage .pw-block header{padding:7px 10px;font-size:14px}
#playlistsPage .pw-reason{gap:4px;margin:8px 0;font-size:14px}
#playlistsPage .pw-reason textarea{min-height:42px;max-height:80px;padding:7px}
#clockCategorySearch{min-height:30px;padding:5px 8px;font-size:14px;width:min(260px,100%)}
@media(max-width:850px){#playlistsPage .pw-layout{grid-template-columns:minmax(160px,35%) minmax(0,1fr)}#playlistsPage .pw-row{grid-template-columns:52px 46px minmax(0,1fr) 24px;gap:3px;font-size:14px}#playlistsPage .pw-relay summary{flex-wrap:wrap}#mediaBrowser .media-row,#mediaBrowser .media-table-head{min-width:max-content;width:100%}}
@media(max-width:540px){#playlistsPage .pw-layout{grid-template-columns:1fr;height:auto;overflow:visible}#playlistsPage .pw-library{max-height:220px}#playlistsPage .pw-day{height:var(--workspace-height,50vh)}}
#mediaBrowser .media-row,#mediaBrowser .media-table-head{width:100%;box-sizing:border-box;grid-template-columns:var(--media-columns)}
#mediaBrowser .media-table-head button{display:block}
#mediaBrowser .media-filterbar{display:flex;flex-wrap:wrap;align-items:center;min-height:0;padding:8px;gap:8px}
#mediaBrowser .media-search-toggle{align-self:center;width:32px;min-width:32px;height:32px;min-height:32px;margin:0}
#mediaBrowser .media-search{display:none;height:auto}
#mediaBrowser .media-filterbar.search-open .media-search{display:flex;flex:1 1 180px;max-width:none;align-items:center;height:32px}
#mediaBrowser .media-search span{display:none}
#mediaBrowser .media-search input{height:32px;min-height:32px}
#mediaBrowser .media-filter-disclosure .media-filter-controls{height:auto;max-width:none;width:auto;opacity:1;pointer-events:auto;transform:none;overflow:visible}

/* Keep the growing scroll area from stretching a sparse folder tree. */
#mediaBrowser .media-roots,#mediaBrowser .media-tree,#mediaBrowser .media-tree-item,#mediaBrowser .media-tree-children{align-content:start;grid-auto-rows:max-content}
#mediaBrowser .media-tree{gap:3px}
#mediaBrowser .media-tree-item{gap:2px}
#mediaBrowser .media-tree-label{height:30px;min-height:30px;font-size:14px;padding:4px 7px;border:0;border-radius:6px}
#mediaBrowser .media-tree-row,#mediaBrowser .media-tree-toggle{height:30px;min-height:30px}
#mediaBrowser .media-tree-row.active .media-tree-label{background:transparent;box-shadow:none}
#mediaBrowser .media-tree-label.archive-kind,#mediaBrowser .media-tree-label.trash-kind{margin:0;background:transparent;box-shadow:none}
#mediaBrowser .media-pane,#mediaBrowser .media-toolbar,#mediaBrowser .media-filterbar{min-width:0}
#mediaBrowser .media-toolbar{flex-wrap:wrap}
#mediaBrowser #mediaTitle{overflow-wrap:anywhere}

/* Folder, archive and trash silhouettes shared with Indoor. */
#mediaRoots .media-tree-label{gap:6px}
#mediaRoots .media-tree-icon, .pw-library .media-tree-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--folder-label-color, #328ab5);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 4a1 1 0 0 1 1-1h5l2 2h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#mediaRoots .media-tree-icon.is-archive, .pw-library .media-tree-icon.is-archive {
  background: var(--folder-label-color, #aa8230);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 3h16v4H2zm1 5h14v9H3zm4 2v2h6v-2z' fill-rule='evenodd'/%3E%3C/svg%3E");
}
#mediaRoots .media-tree-icon.is-trash {
  background: var(--folder-label-color, #788793);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 2h6v2h4v2H3V4h4zM5 7h10l-1 11H6z'/%3E%3C/svg%3E");
}

/* Playlist outline and adjustable panes, matching Indoor folder silhouettes. */
#playlistsPage .pw-layout:not(.pw-readonly){grid-template-columns:var(--pw-library-width,240px) 12px minmax(0,1fr);gap:0}
.pw-pane-divider{position:relative;cursor:col-resize;touch-action:none;outline:none}
.pw-pane-divider::after{content:'';position:absolute;top:12px;bottom:12px;left:5px;width:2px;background:#d6e2e8;border-radius:2px}
.pw-pane-divider:hover::after,.pw-pane-divider:focus-visible::after,.pw-pane-resizing .pw-pane-divider::after{background:#328ab5;width:3px}
.pw-pane-resizing,.pw-pane-resizing *{cursor:col-resize!important;user-select:none!important}
#playlistsPage .pw-folder>button{display:flex;align-items:center;gap:6px;width:100%;min-width:0;height:30px;min-height:30px;padding:3px 7px 3px 0;border-radius:5px;font-size:14px!important;font-weight:400;line-height:20px;margin:0;white-space:nowrap}
#playlistsPage .pw-folder>button:hover{background:#edf1f3}
#playlistsPage .pw-folder>button.pw-folder-active{background:#dceaf2}
.pw-tree-toggle{flex:0 0 22px;width:22px;text-align:center;color:#62727e}
.pw-folder-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
#playlistsPage .pw-children{padding-left:14px}
#playlistsPage .pw-library{min-width:0}
@media(pointer:coarse){#playlistsPage .pw-folder>button{min-height:36px;height:36px}}
@media(max-width:540px){#playlistsPage .pw-layout:not(.pw-readonly){grid-template-columns:minmax(0,1fr);gap:12px}.pw-pane-divider{display:none}}