/* Alphabetical Stacks cover browser. */
#stacksCoverBrowser {
    position: absolute;
    display: block;
    
    left: 0;
    top: 120px;
    width: 960px;
    height: 1440px;
    max-width: none;
    margin: 0 auto;
    padding: 90px 30px 120px;
    overflow-y: auto;
    overflow-x: hidden;
    background:url("../grcsWeb/StudioGrcs/onStage.png");
    background-size: contain;
	
}

#stacksCoverViewport {
    
    width: 900px;
    margin: 0 auto;
}

#stacksCoverGrid {
    display: grid;
    width: 900px;
    margin: 0 auto;
    grid-template-columns: repeat(4, 180px);
    grid-auto-rows: 270px;
    column-gap: 40px;
    row-gap: 20px;
    align-items: start;
    justify-content: center;
    min-height: 100%;
}

/* ONE cover system for initial load, sorting, filtering and rebuilds. */
.stacks-cover-link {
    position: relative;
    display: block;
    width: 180px;
    height: 270px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    transform-origin: center center;
    transition: transform .16s ease;
    filter: none !important;
    -webkit-filter: none !important;
}

.stacks-cover-link:hover,
.stacks-cover-link:focus-visible {
    z-index: 4;
    transform: translateY(-4px) scale(1.035);
    outline: none;
}

.stacks-cover-link .dCover {
    display: block;
    width: 180px !important;
    height: 270px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border: 0;
    border-right: solid 4px #eee;
    border-bottom: solid 4px #eee;
    box-shadow: 6px 6px 10px #222;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

#stacksAlphaNav {
    position: absolute;
    top: 164px;
    right: 24px;
    width: 42px;
    height: 1342px;
    display: grid;
    grid-template-rows: repeat(26, 1fr);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    z-index: 8;
}

#stacksAlphaNav button {
    position: relative;
}

#stacksAlphaNav button.is-active::after {
    content: "\25C0";   /* ◀ */
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    line-height: 1;
}


.stacks-alpha-button {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 37px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
	background: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

.stacks-alpha-button:hover,
.stacks-alpha-button:focus-visible {
    background: rgba(238,238,238,.13);
    outline: 1px solid rgba(238,238,238,.32);
}

.stacks-alpha-button.is-active {
    background: transparent;
    box-shadow: none;
}

.stacks-alpha-button.is-empty {
    background: transparent;
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

#stacksCoverStatus {
    grid-column: 1 / -1;
    align-self: start;
    padding-top: 24px;
    color: #f1dfbc;
    font: bold 22px/1.35 Baskerville, "Palatino Linotype", Palatino, serif;
    text-align: center;
    text-shadow: 1px 2px 3px #000;
}


/* v1.0.20 — Stairway to Heaven: pinned cloud overlays */
#stacksCoverBrowser {
    position: relative;
}



/* TEST 26 — Move the complete Studio audio browser upward as one unit.
   The global sort control keeps its original internal 170px offset; shifting
   the parent up 140px places the buttons at the same TEST 25 position while
   carrying the sorted-by layer, cover browser, grid and InfoBox with them. */
#audioDisplay {
    top: -140px;
}

/* TEST 27 — Keep the complete audio-browser assembly raised from TEST 26,
   while also retaining TEST 25's raised sort/menu position inside it. */
#audioDisplay #sortBTNs.sort-container {
    transform: translateY(30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* TEST 29 — Raise the cover-browser layer an additional 40px from TEST 28. */
#stacksCoverBrowser {
    top: -20px !important;
}

/* TEST 32 — menu population from TEST 31 retained.
   Presentation sizing is intentionally inherited from the archived Newsstand
   menu system in newsstand-base.css/newsstand.css (32px items, 200px minimum,
   content-sized long menus, centered beneath each sort button). */

/* TEST 33 — Studio sort menus: natural height for short lists, capped/scrollable
   for long lists.  Keep the archived typography without beta2.75's unbounded
   content-width/content-height behavior. */
#audioDisplay #sortBTNs .sort-wrapper > .sort-menu,
#audioDisplay #sortBTNs .sort-wrapper > .sort-menu.open {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
    height: auto !important;
    max-height: 320px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
}

#audioDisplay #sortBTNs .sort-menu-item {
    font-size: 32px !important;
    line-height: 1 !important;
    padding: 8px 10px !important;
    white-space: normal !important;
}

\n\n/* TEST 34 — deliberate Studio menu geometry.  Menu data remains dynamic;\n   only the viewport dimensions are fixed here. */\n#audioDisplay #sortBTNs .sort-menu-item {\n    white-space: nowrap !important;\n}\n#audioDisplay #sortMenuSeason {\n    width: 220px !important; min-width: 220px !important; max-width: 220px !important;\n}\n#audioDisplay #sortMenuGenre {\n    width: 260px !important; min-width: 260px !important; max-width: 260px !important;\n    max-height: 320px !important; overflow-y: auto !important;\n}\n#audioDisplay #sortMenuMagazines {\n    width: 300px !important; min-width: 300px !important; max-width: 300px !important;\n    max-height: 320px !important; overflow-y: auto !important;\n}\n#audioDisplay #sortMenuChronology {\n    width: 220px !important; min-width: 220px !important; max-width: 220px !important;\n}\n

/* TEST 36 — visibly scrollable long menus; open menu tops align with the
   top edge of the Studio audio/cover browser.  JS supplies the exact top. */
#audioDisplay #sortMenuGenre,
#audioDisplay #sortMenuMagazines {
    overflow-y: scroll !important;
    scrollbar-width: auto;
    scrollbar-color: #6d5132 #d8bd87;
}
#audioDisplay #sortMenuGenre::-webkit-scrollbar,
#audioDisplay #sortMenuMagazines::-webkit-scrollbar {
    width: 14px;
    -webkit-appearance: none;
}
#audioDisplay #sortMenuGenre::-webkit-scrollbar-track,
#audioDisplay #sortMenuMagazines::-webkit-scrollbar-track {
    background: #d8bd87;
    border-left: 1px solid #8b6a42;
}
#audioDisplay #sortMenuGenre::-webkit-scrollbar-thumb,
#audioDisplay #sortMenuMagazines::-webkit-scrollbar-thumb {
    background: #6d5132;
    border: 2px solid #d8bd87;
    border-radius: 7px;
}

/* TEST 37 — Safari/macOS can suppress native overlay scrollbars even when
   overflow-y:scroll is set.  Paint a permanent scrollbar cue into the two
   long Studio menus so the available scrolling is always obvious. */
#audioDisplay #sortMenuGenre,
#audioDisplay #sortMenuMagazines {
    padding-right: 22px !important;
    background-image:
        linear-gradient(#6d5132, #6d5132),
        linear-gradient(#d8bd87, #d8bd87) !important;
    background-size: 12px 82px, 12px 100% !important;
    background-position: right 3px top 5px, right 3px top !important;
    background-repeat: no-repeat !important;
    background-attachment: local, local !important;
}


/* TEST 38 — restore the opaque parchment beneath TEST 37's permanent
   scrollbar cue.  The first two layers are the thumb/track; the final layer
   is the original PulpPaperBkg menu artwork. */
#audioDisplay #sortMenuGenre,
#audioDisplay #sortMenuMagazines {
    background-image:
        linear-gradient(#6d5132, #6d5132),
        linear-gradient(#d8bd87, #d8bd87),
        url("../grcsWeb/PulpPaperBkg.jpg") !important;
    background-size: 12px 82px, 12px 100%, auto !important;
    background-position: right 3px top 5px, right 3px top, left top !important;
    background-repeat: no-repeat, no-repeat, repeat !important;
    background-attachment: local, local, scroll !important;
    background-color: #e9d3a5 !important;
}

/* TEST 42 — authoritative Studio cover edge + shadow treatment */
#audioDisplay #stacksCoverBrowser #stacksCoverGrid .stacks-cover-link > img.dCover {
    border: 0 !important;
    border-right: solid 4px #eee !important;
    border-bottom: solid 4px #eee !important;
    box-shadow: 6px 6px 10px #222 !important;
}


/* TEST 43 — match TheStacks shadow behavior: the cover wrapper must not clip
   the image's right/bottom border and external box shadow. */
#audioDisplay #stacksCoverGrid .studio-cover {
    overflow: visible !important;
}


/* TEST 45 — one cover shadow only.  The Studio wrapper had its own pale
   shadow, which was the shadow visible in TEST 44. */
#audioDisplay #stacksCoverGrid .studio-cover {
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#audioDisplay #stacksCoverBrowser #stacksCoverGrid .studio-cover .stacks-cover-link > img.dCover {
    border: 0 !important;
    border-right: solid 4px #eee !important;
    border-bottom: solid 4px #eee !important;
    box-shadow: 6px 6px 10px #222 !important;
}


/* TEST 53 — center the four sort-button columns within the 900px sort row. */
#audioDisplay #sortBTNs.sort-container {
    justify-content: center !important;
}

/* TEST 54 — add 15px vertical space between the Sorted By line and audio browser. */
#audioDisplay #stacksCoverBrowser {
    top: -5px !important;
}

/* TEST 59 — single authoritative Studio Heavenly Clouds rule.
   Browser content is 960px plus 30px padding on each side, so span the
   complete visible browser with a 60px compensation. */
#audioDisplay #stacksCoverBrowser > .studio-heavenly-clouds {
    position: sticky !important;
    top: 0 !important;
    left: -30px !important;
    display: block !important;
    width: calc(100% + 60px) !important;
    height: 48px !important;
    margin-left: 0 !important;
    margin-top: -80px !important;
    margin-bottom: -18px !important;
    transform: translateY(-58px) !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
    pointer-events: none !important;
    border: 0 !important;
    
    ) !important;
}
#audioDisplay #stacksCoverGrid {
    position: relative !important;
    z-index: 1 !important;
}
#audioDisplay #sortBTNs {
    z-index: 30 !important;
}


/* TEST 60 — mask the source artwork's hard top-edge line while leaving the
   Heavenly Clouds gradient and browser geometry unchanged. */
#audioDisplay #stacksCoverBrowser::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #eee;
    border: 0;
    box-shadow: none;
    z-index: 21;
    pointer-events: none;
}


/* TEST 62 — authoritative Studio drop-down geometry.
   The four menus are direct children of #audioDisplay, not children of #sortBTNs. */
#audioDisplay > #sortMenuSeason,
#audioDisplay > #sortMenuGenre,
#audioDisplay > #sortMenuMagazines,
#audioDisplay > #sortMenuChronology {
    box-sizing: border-box !important;
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
}


/* TEST 64 — authoritative width on the actual runtime menu structure. */
#audioDisplay #sortBTNs .sort-wrapper > .sort-menu,
#audioDisplay #sortBTNs .sort-wrapper > .sort-menu.open {
    box-sizing: border-box !important;
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
}


/* TEST 65 — roomier menu rows and 20px taller menu viewport. */
#audioDisplay #sortBTNs .sort-menu-item {
    padding: 12px 10px !important;
}
#audioDisplay #sortBTNs .sort-wrapper > .sort-menu,
#audioDisplay #sortBTNs .sort-wrapper > .sort-menu.open {
    max-height: 340px !important;
}


/* TEST 66 — remove the old simulated Safari scrollbar cue.
   Keep the genuine native scrollbar and restore a plain parchment background. */
#audioDisplay #sortMenuGenre,
#audioDisplay #sortMenuMagazines {
    padding-right: 10px !important;
    overflow-y: scroll !important;
    background-image: url("../grcsWeb/PulpPaperBkg.jpg") !important;
    background-size: auto !important;
    background-position: left top !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
    background-color: #e9d3a5 !important;
}


/* TEST 68 — new Studio InfoBox dimensions. */
#audioDisplay #newsstandInfoBox {
    width: 800px !important;
    height: 780px !important;
    box-sizing: border-box !important;
}


/* TEST 70 — center the 800x780 InfoBox on the Studio cover browser itself,
   not on the desktop/mobile viewport.  Browser is 960x1600 at left:0/top:-5. */
#audioDisplay #newsstandInfoBox {
    position: absolute !important;
    width: 800px !important;
    height: 780px !important;
    left: 80px !important;
    top: 405px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 5000 !important;
}


/* TEST 71 — the InfoBox is reparented into #stacksCoverBrowser at runtime.
   Its 50/50 position is therefore the actual center of the gray browser
   on desktop and mobile alike. */
#audioDisplay #stacksCoverBrowser > #newsstandInfoBox {
    position: absolute !important;
    width: 800px !important;
    height: 780px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
    z-index: 5000 !important;
}


/* TEST 72 — cover clicks only show the existing InfoBox.
   Cancel TEST 70/71 experimental browser-centering geometry. */
#audioDisplay #newsstandInfoBox,
#audioDisplay #stacksCoverBrowser > #newsstandInfoBox {
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: initial !important;
}
#audioDisplay #newsstandInfoBox.visible {
    display: block !important;
}


/* TEST 80 — TEST 77 painted IMPRINT scrollbar removed. */


/* TEST 82 — persistent Studio menu scrollbar, independent of Safari's
   auto-hiding overlay scrollbar. */
#audioDisplay #sortMenuGenre,
#audioDisplay #sortMenuMagazines {
    scrollbar-width: none !important;
}
#audioDisplay #sortMenuGenre::-webkit-scrollbar,
#audioDisplay #sortMenuMagazines::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}
.studio-menu-scroll-track {
    position: absolute;
    top: 5px;
    right: 3px;
    bottom: 5px;
    width: 12px;
    background: #d8bd87;
    border-left: 1px solid #8b6a42;
    z-index: 7005;
    pointer-events: none;
}
.studio-menu-scroll-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    min-height: 24px;
    background: #6d5132;
    border: 2px solid #d8bd87;
    border-radius: 7px;
    box-sizing: border-box;
}


/* TEST 84 — remove the light rule at the top edge of the scrolling cover browser. */
#audioDisplay #stacksCoverBrowser {
    border-top: 0 !important;
    outline-top: 0 !important;
    box-shadow: none !important;
}


/* TEST 85 — 86 TEST 60's artificial #eee scrolling top rule. */
#audioDisplay #stacksCoverBrowser::before {
    content: none !important;
    display: none !important;
}


/* TEST 111 — menu coordinates are intentionally NOT set in CSS.
   Edit each menu's inline position:absolute; left:...; top:... in Studio.html. */