/* Page UI only: the shelf is in normal flow above the unchanged stage. */
.tape-shelf{position:relative;margin-top:20px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.shelf-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:10px}.shelf-heading h2{margin:0;font:12px monospace;font-weight:400}.shelf-heading span{font:11px monospace;color:var(--accent)}.shelf-help{margin:0;color:var(--muted);font-size:11px}.tape-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.tape-card{border:1px solid #777166;padding:9px 11px;max-width:100%;width:250px;background:#171717;color:var(--paper);cursor:grab}.tape-card:active{cursor:grabbing}.tape-card.is-dragging{opacity:.5}.tape-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.tape-card:hover,.tape-card[aria-expanded=true]{border-color:var(--accent)}.tape-heading{display:flex;align-items:center;gap:10px;min-width:0}.tape-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.tape-version{font:10px monospace;color:var(--accent);white-space:nowrap}.tape-icon{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:2px;width:28px;height:19px;flex:none;font:11px/1 monospace;letter-spacing:2px;color:var(--muted);padding-left:2px}.tape-icon:after{content:'';position:absolute;bottom:1px;left:7px;right:7px;height:3px;border:1px solid currentColor}.tape-popup{position:fixed;z-index:6;width:360px;max-width:100%;overflow:auto;overscroll-behavior:contain;background:#181817;color:var(--paper);border:1px solid #888276;padding:16px;box-shadow:0 8px 24px #0009}.tape-popup[hidden]{display:none}.tape-popup.is-inline{position:relative;width:min(360px,100%);max-height:360px;margin-top:10px}.tape-popup h3{font-size:14px;font-weight:500;margin:0 0 10px}.tape-description{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 12px}.tape-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:11px;margin:0 0 14px}.tape-details dt{color:var(--muted)}.tape-details dd{margin:0;overflow-wrap:anywhere}.tape-actions{display:flex;flex-wrap:wrap;gap:7px}.tape-actions button{background:transparent;border:1px solid #888276;color:var(--paper);font-size:12px;padding:7px 10px;cursor:pointer}.tape-actions button:hover{background:var(--paper);color:#101010}.tape-actions button:disabled{opacity:.45;cursor:default}.tape-links{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;margin-top:12px}.popup-hint{font-size:10px;color:var(--muted);margin:12px 0 0}.stage.is-drop-ready{outline:2px dashed var(--accent);outline-offset:4px}.tape-progress{font-size:12px;color:var(--muted);margin-top:10px}.tape-progress p{margin:0 0 6px}.tape-progress progress{width:100%;height:6px;accent-color:var(--accent)}.library-guide code{font-family:monospace}.library-guide li{margin-bottom:10px}
@media(max-width:700px){.shelf-heading{gap:6px 10px}.shelf-help{flex-basis:100%}.tape-card{width:calc((100% - 8px)/2);min-width:0;padding:9px 8px}.tape-heading{gap:6px}.tape-name{font-size:11px}.tape-version{font-size:9px}.tape-icon{width:24px;height:17px;font-size:10px}.tape-popup{padding:14px}.tape-details{gap:4px 8px}}
@media(max-width:360px){.tape-card{width:100%;max-width:250px}}

/* One row regardless of the number of recordings. All panels stay outside the stage. */
.tape-carousel{display:flex;align-items:center;gap:8px;min-width:0}
.tape-list{position:relative;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#777166 transparent;padding:2px 0 5px;touch-action:pan-x pan-y}
.tape-card{display:flex;align-items:center;gap:6px;flex:0 0 min(240px,100%);width:240px;min-width:0;max-width:100%;padding:9px 8px;scroll-snap-align:start}
.tape-grab{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:grab}
.tape-grab:active{cursor:grabbing}.tape-grab:focus-visible,.tape-select:focus-visible,.carousel-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tape-select{flex:none;max-width:106px;padding:3px 5px;border:1px solid #777166;background:#171717;color:var(--accent);font:10px monospace;cursor:pointer;white-space:nowrap}
.tape-select:hover,.tape-select[aria-expanded=true]{border-color:var(--accent)}
.tape-card[data-details-open=true]{border-color:var(--accent)}
.carousel-arrow{flex:none;width:28px;height:32px;padding:0;border:1px solid #777166;background:none;color:var(--paper);font:18px monospace;cursor:pointer}
.carousel-arrow:disabled{opacity:.3;cursor:default}.carousel-arrow:not(:disabled):hover{border-color:var(--accent)}
.tape-picker{position:fixed;z-index:7;overflow:auto;overscroll-behavior:contain;background:#181817;border:1px solid #888276;padding:5px;box-shadow:0 8px 24px #0009;max-width:calc(100% - 24px)}
.tape-picker[hidden]{display:none}.tape-picker.is-inline{position:relative;width:220px;max-height:240px;margin-top:10px}
.tape-option{padding:8px 10px;font:11px monospace;color:var(--paper);cursor:pointer}.tape-option:hover,.tape-option.is-active{background:#35322b}.tape-option[aria-selected=true]{color:var(--accent)}
@media(max-width:700px){.tape-card{flex-basis:min(220px,100%);width:220px;padding:9px 6px}.tape-grab{gap:6px}.tape-carousel{gap:6px}.carousel-arrow{width:25px}.shelf-help{font-size:10px}}