/* ---- A phone's bottom sheet (src/studio/ui/phone-sheet.ts) -----------------------------------------------------
   Between the video and the player bar (the song page sets both edges before it opens one), so nothing is ever
   drawn over the player; the scrim dims that stretch only. A window grown past 640px with one open hides it. */
.ph-sheet {
  position: fixed;
  z-index: 30;
  inset: var(--ph-sheet-top, 0px) 0 var(--ph-sheet-bottom, 0px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ph-sheet[hidden] { display: none; }
@media (min-width: 641px) {
  .ph-sheet { display: none; }
}
.ph-sheet__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); }
.ph-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  padding: 8px 0 12px;
  border: 1px solid var(--st-line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--st-panel);
  outline: 0;
}
.ph-sheet__handle { flex: none; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--st-line-strong); }
.ph-sheet__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px 16px; }
.ph-sheet__title { flex: 1; min-width: 0; margin: 0; color: var(--st-text-strong); font: 600 17px/22px var(--st-font); }
.ph-sheet__body { min-height: 0; padding: 4px 16px 0; overflow-y: auto; overscroll-behavior: contain; }
/* "‹ More": back to the sheet this one came from (P353, D470), in the accent, before the title. */
.ph-sheet__back { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -8px; padding: 0 8px 0 2px; border: 0; background: none; color: var(--st-accent); font: 500 17px/22px var(--st-font); cursor: pointer; }
.ph-sheet__back .st-icon { width: 22px; height: 22px; }