/* Shelf style C "3D-Raum" (spec 2026-10-11 §6, polish 2026-10-12;
   component ShelfRoom, scene in js/shelfRoom.js). The component is as tall
   as the cabinet at page scale (set by the scene). The stage is a
   transparent, window-high canvas that stays in view while the component
   scrolls past; the scene draws the cabinet exactly where it is on the
   page, so there is no frame and nothing to scroll inside. */

.shelf-room {
    position: relative;
    min-height: 320px;
    /* the window-high canvas never reaches past the cabinet */
    overflow: clip;
}

.shelf-room-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    margin-bottom: -100vh;
    margin-bottom: -100dvh;
    pointer-events: none;
}

.shelf-room-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Only there for the scene to read the theme's pictures. */
.shelf-room-probe {
    display: none;
}

/* ---- Keyboard / screen-reader index: hidden until a link has focus ---- */

.shelf-room-index ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shelf-room-index-heading,
.shelf-room-index a {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.shelf-room-index a:focus-visible {
    position: fixed;
    z-index: 4;
    left: 50%;
    bottom: 24px;
    width: auto;
    max-width: calc(100% - 32px);
    height: auto;
    padding: 8px 12px;
    clip-path: none;
    border: 1px solid var(--shelf-brass-hi);
    border-radius: 8px;
    background: rgba(16, 10, 5, 0.9);
    color: #f3e6c4;
    font: 600 13px/1.3 var(--font-family-ui);
    text-decoration: none;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    outline: none;
}

.shelf-room-fallback {
    margin: 0 0 var(--space-2);
}