/* In-flow section shortcuts cannot cover a heading, filter or list row. */ html[data-layout="glass-stage"] #listPane > .sec-rail { position:static; inset:auto; transform:none; display:flex !important; align-self:flex-start; flex:none; flex-direction:row; flex-wrap:nowrap; width:max-content; max-width:100%; margin:0 0 12px; z-index:auto; } html[data-layout="glass-stage"] #listPane > .sec-rail.hidden { display:none !important; } html[data-layout="glass-stage"] #listPane > .sec-rail .sec-rail-btn { flex:none; } html[data-layout="glass-stage"] #listPane > .sec-rail .sec-rail-label { z-index:1; } /* 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; } }