/* Section shortcuts float, centred above the mini player and bottom nav
   (bottom comes from --rail-bottom, measured by SectionRail.placeRail()). */
html[data-layout="glass-stage"] .sec-rail,
html[data-layout="glass-stage"] body:has(#miniBar:not(.hidden)) .sec-rail {
  position:fixed; top:auto; right:auto; left:50%; transform:translateX(-50%);
  flex-direction:row; flex-wrap:nowrap; width:max-content; max-width:calc(100% - 24px); z-index:60;
}
html[data-layout="glass-stage"] .sec-rail-label { left:50%; transform:translateX(-50%); }

/* Keep the progress strip inside the same rounded card as the controls. */
html[data-layout="glass-stage"] .mini-bar {
  bottom:calc(var(--glass-nav-height, 66px + env(safe-area-inset-bottom)) + 8px);
  border-radius:18px; overflow:hidden; border:1px solid var(--glass-line);
  background:var(--glass); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
}
html[data-layout="glass-stage"] .mini-bar-inner {
  border:0; border-radius:0; background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-layout="glass-stage"] .mini-progress { margin:0; height:3px; overflow:hidden; }
html[data-layout="glass-stage"] .player-pane {
  padding-bottom:var(--glass-bottom-clearance, 32px);
  scroll-padding-bottom:var(--glass-bottom-clearance, 32px);
}
html[data-layout="glass-stage"] #listPane {
  padding-bottom:var(--glass-bottom-clearance, 32px) !important;
  scroll-padding-bottom:var(--glass-bottom-clearance, 32px);
}
@media (max-width:860px) {
  /* Portrait uses one shared scroller: reserve chrome once, at its tail. */
  html[data-layout="glass-stage"] .body {
    padding-bottom:var(--glass-bottom-clearance, calc(82px + env(safe-area-inset-bottom)));
    scroll-padding-bottom:var(--glass-bottom-clearance, calc(82px + env(safe-area-inset-bottom)));
  }
  html[data-layout="glass-stage"] .player-pane { padding-bottom:14px; }
  html[data-layout="glass-stage"] #listPane { padding-bottom:16px !important; }
}

/* Keep the notes toolbar one row, even when the player is a narrow desktop pane. */
html[data-layout="glass-stage"] #notesPanel { container-type:inline-size; container-name:glass-notes; min-width:0; }
html[data-layout="glass-stage"] .notes-tabs { flex-wrap:nowrap; min-width:0; align-items:center; }
html[data-layout="glass-stage"] .notes-tab { flex:0 1 auto; min-width:44px; min-height:44px; white-space:nowrap; letter-spacing:.04em; }
html[data-layout="glass-stage"] .glass-tab-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-layout="glass-stage"] .notes-status { flex:1 1 0; min-width:0; margin-left:0; font-size:11px; }
html[data-layout="glass-stage"] .notes-count { flex:none; margin-left:0; }
html[data-layout="glass-stage"] .notes-fold { flex:none; width:44px; height:44px; margin-left:auto; }
@container glass-notes (max-width:560px) {
  html[data-layout="glass-stage"] .notes-tabs { gap:4px; padding:6px; }
  html[data-layout="glass-stage"] .notes-tab { padding:8px; letter-spacing:0; font-size:11px; }
}
@container glass-notes (max-width:440px) {
  html[data-layout="glass-stage"] .notes-tab[data-tab="markers"] .glass-tab-label { display:none; }
}
@container glass-notes (max-width:340px) {
  html[data-layout="glass-stage"] .notes-tab .glass-tab-label { display:none; }
}