/* Persistent controls also remain visible with macOS overlay scrollbars. */
.scroll-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'surface' 'bottom'; min-width: 0; }
.scroll-shell-table { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: 'top top' 'surface right' 'bottom bottom'; }
.scroll-surface { grid-area: surface; min-width: 0; }
.persistent-scroll-viewport { scrollbar-width: none; }
.persistent-scroll-viewport::-webkit-scrollbar { display: none; }
.visible-scrollbar { display: flex; align-items: center; gap: 6px; padding: 3px 6px; min-width: 0; background: #f3f6f5; }
.scrollbar-top { grid-area: top; border-top: 1px solid #dce7e3; }
.scrollbar-bottom { grid-area: bottom; border-bottom: 1px solid #dce7e3; }
.scrollbar-right { grid-area: right; flex-direction: column; padding: 3px 2px; }
.visible-scrollbar button { border: 0; border-radius: 3px; background: #e3ebe8; color: #214b55; font: 16px var(--mono); width: 24px; height: 24px; padding: 0; flex: 0 0 auto; cursor: pointer; }
.scrollbar-right button { width: 20px; }
.visible-scrollbar button:disabled { opacity: .3; cursor: default; }
.scrollbar-track { flex: 1; position: relative; height: 14px; min-width: 0; background: #dce5e2; border-radius: 7px; touch-action: none; cursor: pointer; }
.scrollbar-thumb { position: absolute; top: 0; left: 0; height: 100%; background: #5d7e86; border: 2px solid #dce5e2; border-radius: 7px; cursor: grab; }
.scrollbar-track:active .scrollbar-thumb { cursor: grabbing; background: #003f4c; }
.scrollbar-right .scrollbar-track { width: 14px; min-height: 0; }
.scrollbar-right .scrollbar-thumb { width: 100%; }
.scrollbar-inactive .scrollbar-thumb { background: #c0cfca; }
.visible-scrollbar :focus-visible { outline: 2px solid #00788a; outline-offset: 1px; }