/* The listening surface stays mounted while the music library opens over it in a centred window. */
#playerStage { position: fixed; inset: 0; }
.access-loading #playerStage, .access-locked #playerStage,
.access-loading .library-backdrop, .access-locked .library-backdrop { visibility: hidden; }
.library-backdrop {
  position: fixed; inset: 0; z-index: 55; background: #0b0c0e8c;
  opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility 0s .24s;
}
.library-open .library-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
.library-lightbox, .library-open .playlist-dialog, .library-open .ctx {
  --bg: #d9dbdd; --fg: #17191c; --fg-2: #535b62; --fg-3: #697178; --fg-4: #727980;
  --line: #343a4020; --line-2: #343a4045; --hover: #343a4008; --hover-2: #343a4010;
  --accent: #17191c; --accent-soft: #343a4010;
  color: var(--fg); background: var(--bg); color-scheme: light;
}
html[data-tablet-theme="night"] :is(.library-lightbox, .library-open .playlist-dialog, .library-open .ctx) {
  --bg: #17191c; --fg: #e5e9ee; --fg-2: #b0b7bf; --fg-3: #929ba5; --fg-4: #89939d;
  --line: #cbd0d620; --line-2: #cbd0d645; --hover: #cbd0d608; --hover-2: #cbd0d610;
  --accent: #e5e9ee; --accent-soft: #cbd0d610;
  color-scheme: dark;
}
#app.library-lightbox {
  position: fixed; inset: 0; z-index: 60; margin: auto;
  width: min(1240px, calc(100vw - 96px)); height: min(920px, calc(100dvh - 96px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: 0 32px 96px #0000004d;
  opacity: 0; transform: translateY(16px) scale(.985); visibility: hidden;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s .26s;
  font: 400 15px/1.4 var(--font);
}
.library-open #app.library-lightbox { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.library-lightbox-heading {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; flex: none; align-items: center; gap: 24px;
  padding: 20px 20px 0 32px;
}
.library-lightbox-heading h2 { font: 700 28px/1 var(--font); letter-spacing: -.04em; margin: 0; }
.library-lightbox-heading .search { justify-self: end; width: min(360px, 100%); flex: none; margin: 0; }
.library-lightbox-heading .icon-btn { flex: none; }
.library-lightbox :focus-visible, .library-open .playlist-dialog :focus-visible { outline-color: var(--fg); }
.library-lightbox .icon-btn, .library-lightbox .play-circle {
  color: var(--fg); background: none; box-shadow: none; border: 0; border-radius: 0;
}
.library-lightbox .icon-btn:hover, .library-lightbox .icon-btn:active, .library-lightbox .play-circle:hover { background: var(--hover); box-shadow: none; transform: none; }
.library-lightbox .icon-btn { width: 42px; height: 42px; }
.library-lightbox .icon-btn svg { width: 20px; height: 20px; stroke-width: 1.4; }
.library-lightbox .topbar {
  position: static; display: flex; align-items: center; flex: none; height: auto; padding: 12px 32px 16px 24px; gap: 20px;
  border: 0; border-radius: 0; border-bottom: 1px solid var(--line-2); background: none;
  box-shadow: none; backdrop-filter: none;
}
.library-lightbox .nav-buttons { flex: none; display: flex; }
.library-lightbox #nav { display: flex; flex-wrap: wrap; min-width: 0; margin: 0; gap: 2px 22px; }
.library-lightbox .nav a { flex: none; height: auto; line-height: 1.1; padding: 8px 0; border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: none; box-shadow: none; font-size: 23px; font-weight: 700; letter-spacing: -.035em; }
.library-lightbox .nav a.active { border-bottom-color: var(--fg); color: var(--fg); }
.library-lightbox .nav-sep { display: none; }
.library-lightbox .search input { height: 48px; padding-left: 30px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; color: var(--fg); font-size: 18px; letter-spacing: -.02em; }
.library-lightbox .search input:focus { background: none; border-color: var(--fg); }
.library-lightbox .search-icon { left: 4px; }
.is-tablet .library-lightbox .view {
  position: relative; inset: auto; width: 100%; flex: 1; min-height: 0; max-width: none;
  padding: 40px 32px 40px; overflow: auto; overscroll-behavior: contain;
}
.library-lightbox .view-head h1 { font: 700 64px/.98 var(--font); letter-spacing: -.055em; overflow-wrap: anywhere; margin: 0 0 12px; }
.library-lightbox .view-head { margin-bottom: 40px; }
.library-lightbox .view-head .sub { font-size: 16px; font-weight: 400; }
.library-lightbox .section-head h2, .library-lightbox .upload-drop h2, .library-lightbox .playlist-empty h2 { font: 700 32px/1.05 var(--font); letter-spacing: -.04em; }
.library-lightbox .section-head { margin-bottom: 20px; }
.library-lightbox .section + .section { margin-top: 40px; }
.library-lightbox .card-title, .library-lightbox .playlist-card strong { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.library-lightbox .btn, .library-lightbox .primary, .library-lightbox .upload-tablet {
  color: var(--fg); background: transparent; border: 1px solid var(--line-2); border-radius: 0; box-shadow: none;
  min-height: 42px; font-weight: 400;
}
.library-lightbox .primary { background: var(--fg); color: var(--bg); }
.library-lightbox .btn:hover, .library-lightbox .primary:hover { box-shadow: none; transform: none; opacity: .8; }
.library-lightbox .tracklist { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.library-lightbox .tracklist .row { grid-template-columns: 28px minmax(0, 1fr) 38px 82px; gap: 8px; min-height: 66px; padding: 8px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.library-lightbox .tracklist .row + .row::before { display: none; }
.library-lightbox .row:hover, .library-lightbox .row.active { background: var(--hover); box-shadow: none; }
.library-lightbox .col-title .t { font-size: 16px; font-weight: 400; }
.library-lightbox .col-title .s { font-size: 13px; }
.library-lightbox .col-actions { gap: 0; }
.library-lightbox .col-actions .icon-btn { width: 40px; height: 42px; }
.library-lightbox .detail { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
.library-lightbox .detail-side { position: static; max-width: 160px; }
.library-lightbox .detail-cover, .library-lightbox .card-img, .library-lightbox .playlist-art { border-radius: 0; box-shadow: none; }
.library-lightbox .card-img .play { border-radius: 0; box-shadow: none; background: var(--bg); }
.library-lightbox .card:hover .card-img { transform: none; }
.library-lightbox .playlist-empty, .library-lightbox .upload-transfers { border-radius: 0; box-shadow: none; background: none; }
.library-lightbox .detail-panel { background: none; box-shadow: none; border: 0; padding: 0; }
.library-lightbox .detail-panel h1 { font: 700 44px/1 var(--font); letter-spacing: -.045em; overflow-wrap: anywhere; }
.library-lightbox .detail-meta { flex-wrap: wrap; }
.library-lightbox .playlist-entry { grid-template-columns: 26px minmax(0, 1fr) 128px; gap: 8px; }
.library-lightbox .playlist-entry .icon-btn { width: 32px; height: 44px; }
.library-lightbox .playlist-source, .library-lightbox .playlist-duration { display: none; }
.library-lightbox .upload-drop { background: none; box-shadow: none; border: 1px dashed var(--line-2); border-radius: 0; padding: 28px 16px; }
.library-open .ctx :is(button, a[download]) { border-radius: 0; }
.library-open .ctx { z-index: 90; box-shadow: none; border: 1px solid var(--line-2); border-radius: 0; }
.library-open .playlist-dialog { border-radius: 0; box-shadow: none; border: 1px solid var(--line-2); }
.library-open .playlist-dialog h2 { font: 700 32px/1.05 var(--font); letter-spacing: -.04em; }
.library-open .playlist-dialog :is(input, textarea, select, .icon-btn, .primary) { border-radius: 0; box-shadow: none; background: transparent; color: var(--fg); }
.library-open .playlist-dialog .primary { background: var(--fg); color: var(--bg); }
.library-open #loginOverlay { z-index: 120; }
@media (max-width: 900px) {
  .library-lightbox .topbar { align-items: flex-start; }
  .library-lightbox .nav a { font-size: 20px; }
  .library-lightbox #nav { gap: 0 16px; }
}
/* Phones get the whole screen; the window frame would only cost space. */
@media (max-width: 600px) {
  #app.library-lightbox { width: 100%; height: 100dvh; border: 0; box-shadow: none; transform: translateY(24px); }
  .library-lightbox-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: max(16px, env(safe-area-inset-top)) 8px 0 16px; }
  .library-lightbox-heading .search { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; width: auto; margin-right: 8px; }
  .library-lightbox .topbar { padding: 8px 16px 12px 8px; gap: 8px; }
  .library-lightbox .nav-buttons { display: none; }
  .is-tablet .library-lightbox .view { padding: 28px 16px max(28px, env(safe-area-inset-bottom)); }
  .library-lightbox .view-head h1 { font-size: 44px; }
  .library-lightbox .view-head { margin-bottom: 28px; }
  .library-lightbox .view-head .sub { font-size: 14px; }
  .library-lightbox .section-head h2, .library-lightbox .upload-drop h2 { font-size: 28px; }
  .library-lightbox .tracklist .row { grid-template-columns: 24px minmax(0, 1fr) 76px; }
  .library-lightbox .col-dur { display: none; }
  .library-lightbox .col-actions .icon-btn { width: 38px; }
  .library-lightbox .detail { grid-template-columns: 1fr; }
  .library-lightbox .detail-side { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app.library-lightbox, .library-backdrop { transition: none; }
}