/* ==========================================================================
   MOBILE ADAPTATION
   ========================================================================== */
@media (max-width: 900px) {
    #dashboard-wrapper::-webkit-scrollbar { display: none; }

    #dashboard-wrapper {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain; /* Prevent scroll chaining from footer */
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 100vw;
        height: 100vh;
        height: 100svh;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    #dashboard-wrapper > * {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh;
        height: 100svh;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        flex-shrink: 0;
        padding-top: 10rem; 
        box-sizing: border-box;
    }

    .header-columns {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        position: relative;
        padding: 0 !important;
    }

    .header-col {
        grid-column: 1;
        grid-row: 1;
        position: relative !important;
        top: 0;
        left: 0;
        width: 100vw !important;
        display: flex;
        justify-content: center;
        align-items: flex-start !important; /* Push titles to the top edge */
        transform-origin: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.1s, transform 0.1s;
    }

    .header-col.active-mobile-title {
        opacity: 1;
        pointer-events: auto;
        transform: scaleX(1);
    }

    .big-header-title {
        font-size: 2.5rem !important;
        text-align: center;
        margin: 0 auto !important;
    }

    .header-col.menu-open .dropdown-menu {
        opacity: 1;
        pointer-events: auto;
    }
    
    .header-col.menu-open .big-header-title {
        opacity: 0 !important; /* Hide title when menu is open */
        pointer-events: none;
    }

    body.spread-open #dashboard-wrapper {
        pointer-events: none;
    }

    .right-col-canvas {
        touch-action: auto !important;
        cursor: auto !important;
    }

    .mobile-gallery-box {
        scroll-snap-stop: always;
    }

    .menu-toggle {
        display: block !important;
    }
    
    .title-wrapper {
        width: 100%;
        min-height: 8rem;
    }
}

/* ====== ENHANCED MOBILE SCALING ====== */
@media (max-width: 900px) {
    /* Scale root font-size for calendar */
    html {
        font-size: 90% !important;
    }

    /* 1. Give the calendar text equal padding */
    #main-header {
        padding-top: 2vw !important; /* Move header to very top */
    }
    #calendar-text {
        padding: 0 5vw !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. Titles positioning & wrapping */
    .title-anchor {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-areas: "stack";
    }
    .big-header-title {
        grid-area: stack;
        font-size: clamp(2rem, 13vw, 4rem) !important; /* Scaled so it fits within option bar */
        line-height: 1 !important; /* Prevent the container from growing */
        color: #000 !important; /* Solid black instead of grey outline */
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
        text-align: center;
        transition: opacity 0.3s ease; /* Fade title out smoothly */
    }
    .menu-toggle {
        font-size: clamp(2rem, 13vw, 4rem) !important;
        /* Removed color: #000 to restore specific colors */
        padding-left: 2vw !important; /* Brought slightly closer */
    }
    .title-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        margin: 0 auto !important;
        width: 100vw !important;
    }
    .menu-content {
        display: flex;
        justify-content: center !important;
        position: relative; /* Anchor for dropdown */
    }
    
    /* 3. Options behind titles next to each other */
    .dropdown-menu {
        grid-area: stack;
        position: static !important;
        top: auto; left: auto; transform: none;
        width: max-content !important; /* Dictates the cell width! */
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Force side-by-side */
        align-items: center;
        justify-content: center;
        gap: 3vw !important;
        margin-top: 0;
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }
    .dropdown-menu .highlight-link {
        font-size: 1.2rem !important; /* Smaller size to match desktop ratio */
        padding: 0.5rem 1rem !important;
    }
    
    /* 4. Ensure titles sit ABOVE the marquee */
    .header-columns {
        min-height: auto !important; /* Height is now naturally calculated by the Grid! */
    }
    .marquee-wrapper {
        margin-top: -1rem !important; /* Move up closer to the title */
    }

    /* 5. Project stack & Magazine scaling via Zoom */
    #project-pile, #magazine-column {
        margin-top: -5vh !important; /* Move pile exactly halfway back down */
    }
    .card-wrapper, #magazine-cover-container {
        zoom: 0.85; /* Increased scaling for Chaotic Stack and Magazine */
        max-width: 90vw !important; /* Prevent massive horizontal images from overflowing */
        box-sizing: border-box;
    }
    .paper-card, #magazine-cover-container {
        width: auto !important; /* REMOVE explicit widths that broke the image ratio! */
        max-width: 100% !important;
    }
    .card-inner-frame img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Post-it (bookmark-note) in chaotic stack only — spread-note excluded.
       36% = card-relative width (+20% from 30%), font scaled down from former inherited size. */
    body:not(.grid-mode) .bookmark-note:not(.spread-note) {
        width: 36% !important;
        min-width: 0 !important;
        font-size: 0.6rem !important;
        padding: 1rem !important;
    }

    /* Belly-band in chaotic stack: zoom 0.64 (+10% vs 0.58), move up by 40% of own height. */
    body:not(.grid-mode) .belly-band {
        zoom: 0.64 !important;
        transform: translateY(-40%) !important;
    }

    /* 6. Organized grid stacks two per row and overrides dashboard height */
    body.grid-mode {
        overflow-y: auto !important;
        height: auto !important;
    }
    body.grid-mode #archive-stage {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        overflow-y: visible !important;
    }
    body.grid-mode #dashboard-wrapper {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    body.grid-mode #project-pile {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem 1rem !important;
        padding: 0 2vw 4rem !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
        display: grid !important;
        box-sizing: border-box !important;
        margin-top: 0 !important; /* Reset negative margin from chaotic stack */
    }
    body.grid-mode.magazine-grid #project-pile {
        grid-template-columns: 1fr !important;
        gap: 6rem 1rem !important; /* larger vertical gap for tubes */
        padding-top: 4rem !important;
    }
    body.grid-mode .card-wrapper {
        zoom: 0.45 !important; /* Scale down more as requested */
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.15)) !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }
    body.grid-mode .mag-tube-wrapper {
        zoom: 0.7 !important; /* Scale rolls bigger */
        margin: 0 auto !important;
        width: 22rem !important; /* Prevent collapse to 0 from inherited card-wrapper */
        height: 22rem !important;
        filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.15)) !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }
    body.grid-mode .mag-tube-wrapper.is-active {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.1) !important;
        filter: none !important;
    }
    body.grid-mode .belly-band {
        bottom: 12% !important; /* Move belly band up slightly in grid mode */
    }
    
    /* 7. Swiping the project spread */
    .mobile-swipe-gallery {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        pointer-events: auto !important;
    }
    
    /* 8. Minus back button fix */
    .close-minus {
        z-index: 999999 !important;
        pointer-events: auto !important;
        top: 1.5rem !important;
        right: 2rem !important;
    }

    /* 7. Hide calendar and sheet fluff */
    #calendar-container {
        width: 100%;
        padding-bottom: 0 !important; /* Let it reach the bottom */
    }
    .history-pile {
        width: 80vw !important;
        height: calc(80vw * 1.4142) !important;
    }
    
    .history-sheet {
        zoom: 1 !important; /* Don't scale sheets down weirdly */
        width: 100% !important; /* Fill the pile instead of the screen */
    }
    .history-sheet-content {
        padding: 1rem 1.2rem !important;
        padding-top: 2rem !important;
        font-size: 0.6rem !important;
    }

    body.history-open #main-footer {
        display: none !important;
    }

    /* 9. Tag Bar Swipe Filtering */
    #main-footer {
        width: 100vw !important;
        padding: 2.7rem 0 5.3rem 0 !important; /* Move tag dial up by about its font size */
    }
    body.grid-mode #main-footer {
        opacity: 1 !important; 
        pointer-events: none !important;
    }
    body.grid-mode #filter-bar {
        opacity: 1 !important; 
        pointer-events: auto !important;
    }

    /* Mobile search: lower header so overlay can cover it without animation */
    body.search-open #main-header {
        z-index: 100002 !important; /* Below search overlay (100004) on mobile only */
    }



    #filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: none;
        justify-content: flex-start !important;
        align-items: center !important; /* Prevent wobbly up/down when scaling */
        width: 100vw !important;
        padding: 0 5vw !important;
        margin-top: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x !important; /* Prevent vertical drag jumpiness */
        overscroll-behavior-x: none; /* Prevent scroll chaining to dashboard-wrapper */
    }
    /* Pseudo-elements allow the first and last tags to be dialed to the center without empty visible padding */
    #filter-bar::before, #filter-bar::after {
        content: "";
        display: block;
        min-width: 45vw;
        flex-shrink: 0;
    }
    #filter-bar::-webkit-scrollbar { display: none; }
    
    .tag-filter {
        scroll-snap-align: center;
        flex-shrink: 0;
        padding: 0 0.4rem !important; /* The 0.5x inner gap (reduced 20%) */
        margin: 0 0.4rem !important;  /* The 1x outer gap (reduced 20%) */
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
        touch-action: pan-x !important;
        transform-origin: center center;
    }
    #filter-bar .tag-filter {
        font-size: 1.05rem !important;
        pointer-events: none !important;
        opacity: 1; /* Default opacity */
    }
    #filter-bar.idle-dial .mag-chapter-item:not(.active-swipe-tag) {
        opacity: 0 !important; /* Fade out non-active tags when idle */
    }
    #filter-bar .tag-filter.active-swipe-tag {
        transform: scale(1.4);
        pointer-events: auto !important;
        opacity: 1 !important; /* Always keep active tag visible */
    }
    #filter-bar.disabled-dial * {
        pointer-events: none !important;
    }
    
    /* Folded dial dots (unfold only for the active chapter) */
    #filter-bar .mag-chapter-dot {
        max-width: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        border: none !important;
        overflow: hidden;
        transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    #filter-bar .mag-chapter-dot.unfolded {
        max-width: 2rem !important; /* Enough for a dot */
        opacity: 1 !important;
        margin: 0 0.4rem !important; /* Original outer gap */
        padding: 0 0.2rem !important; /* Original inner gap */
        pointer-events: auto !important;
        visibility: visible !important;
    }
    /* Remove brackets globally, show when snapped. Place mathematically on padding edges. */
    #filter-bar .tag-filter::before, #filter-bar .tag-filter::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    #filter-bar .tag-filter.active-swipe-tag::before {
        opacity: 1 !important;
        visibility: visible !important;
        left: 0 !important; /* Snap bracket to edge of 0.5rem padding */
        content: '[' !important; /* Remove trailing spaces from original content */
    }
    #filter-bar .tag-filter.active-swipe-tag::after {
        opacity: 1 !important;
        visibility: visible !important;
        right: 0 !important; /* Snap bracket to edge of 0.5rem padding */
        content: ']' !important; /* Remove trailing spaces from original content */
    }

    /* 10. Spread Post-it */
    .spread-note {
        top: 50% !important; /* Center vertically */
        bottom: auto !important;
        transform: translateY(-50%) !important;
        z-index: 99 !important; /* Below share button */
        pointer-events: auto !important; /* Catch touches */
    }
    .spread-note .note-text-content {
        overflow-y: auto !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
        max-height: 40vh; /* Allow scrolling inside */
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
        touch-action: pan-y !important; /* Allow vertical swipe to scroll! */
    }

    /* 11. Organized Grid */
    body.grid-mode #archive-stage {
        padding-top: 24vh !important; /* Start below the mobile header and marquee */
    }
}
@media (max-width: 900px) {
    #magazine-cover-container img {
        max-width: 100% !important;
        height: auto !important; /* Allow height to shrink if width is capped */
    }
}

/* === MOBILE FIXES (June 8) === */
@media (max-width: 900px) {
    #search-results-grid { gap: 1rem !important; }
    .search-result-card { width: 90px !important; }
    .search-result-card img { height: 120px !important; margin-bottom: 0.5rem !important; }
    .search-result-title { font-size: 0.7rem !important; }
    
    /* Hide the footer entirely while searching to prevent keyboard pushing it up over results */
    body.search-open #main-footer,
    body.loading-spread #main-footer { display: none !important; }
    
    .mobile-only-close { display: block !important; }
    
    /* Calendar space */
    #calendar-column {
        justify-content: flex-start !important;
        padding-top: 25vh !important; /* Forces the original empty space at the top */
    }
    #calendar-text {
        padding: 0 calc(5vw + 3ch) 6rem calc(5vw + 3ch) !important;
        max-height: 70vh !important; /* Extend calendar down to tag dial */
    }
    #calendar-container {
        padding-bottom: 2rem !important;
    }
    
    .cal-row {
        gap: 5vw !important; /* Use viewport-relative gap */
        width: 100% !important;
    }
    .cal-date {
        padding-left: 0 !important; /* The 3ch is now handled by the parent container symmetrically */
        flex: 0 0 30% !important; /* Give more room to details */
    }
    .cal-details {
        flex: 1 !important; /* Take up all remaining space */
        word-break: break-word !important; /* Ensure long links break */
        overflow-wrap: break-word !important;
        min-width: 0 !important; /* Allow flex item to shrink below content size if needed */
    }

    /* Magazine title scaling */
    #magazine-cover-container {
        max-width: 90vw !important;
        width: auto !important;
        box-sizing: border-box;
    }
    #magazine-cover-container img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Post-it scrolling in spread */
    .spread-note .note-text-content {
        max-height: 40vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        touch-action: pan-y !important;
    }
    /* Ensure the note itself intercepts touches */
    .spread-note {
        pointer-events: auto !important;
    }

    /* Header Layout: Title left, + right */
    .title-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100vw !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        box-sizing: border-box !important;
    }
    .menu-content {
        width: auto !important;
        padding-right: 0 !important;
    }
    .title-anchor {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Font size to hide options */
    .big-header-title {
        font-size: 14vw !important; 
        line-height: 0.6 !important;
        color: #000 !important;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }
    /* Spread options behind title */
    .dropdown-menu {
        position: absolute !important;
        top: 50% !important; left: 0 !important;
        transform: translate(0, -50%) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: max-content !important;
        justify-content: flex-start !important;
        margin-top: 0 !important;
    }
    .dropdown-menu .highlight-link {
        font-size: 1.1rem !important;
        padding: 0.5rem 0.5rem !important;
    }
    /* + icon fixed next to title */
    .menu-toggle {
        display: block !important;
        position: relative !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        font-size: 14vw !important;
        line-height: 0.6 !important;
    }

    /* Belly band (tags below pictures) smaller and lower */
    .belly-band {
        font-size: 0.6rem !important;
        bottom: 5% !important;
    }

    /* Tag bar swipeable to the end */
    #main-footer {
        width: 100vw !important;
        padding: 2rem 0 !important; /* Reduced vertical padding */
        touch-action: none !important; /* Prevent vertical jumping when touching footer */
        overscroll-behavior-y: none !important;
    }
    #filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important; /* Smoother swipe than mandatory */
        justify-content: flex-start !important;
        width: 100vw !important;
        padding: 1rem 0 !important; /* Added vertical padding so scaled tags don't clip at top/bottom */
        margin-top: 0 !important; /* Replaced margin with padding to expand clipping box */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x !important; /* Force horizontal pan only */
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: none !important;
    }
    #filter-bar::before {
        content: "" !important;
        display: block !important;
        min-width: 50vw !important; /* Push first item to center */
        flex-shrink: 0 !important;
    }
    #filter-bar::after {
        content: "" !important;
        display: block !important;
        min-width: 50vw !important; /* Push last item to center */
        flex-shrink: 0 !important;
    }
    #filter-bar::-webkit-scrollbar { display: none; }
    /* Redundant tag-filter rule removed to allow earlier font size increase to take effect */

    /* Enlarge touch targets for minus buttons */
    .close-minus {
        padding: 2rem !important;
        margin: -2rem !important;
    }

    /* Elevate unfold overlay to ensure minus and share buttons are clickable */
    #unfold-overlay, #magazine-reader-overlay {
        z-index: 100010 !important; /* Above #main-header and #main-footer (100005) */
    }

    /* Make entire mobile spread interactive (overrides #canvas-container pointer-events: none) */
    .mobile-project-layout {
        pointer-events: auto !important;
    }

    /* Fade out uncentered mobile magazine pages smoothly when idle */
    .mobile-magazine-feed.idle-dial .mag-page-row:not(.active-page) {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 1s ease !important; /* Slow fade out so it's not immediate */
    }

    /* Padding blocks to allow the first and last page to snap to absolute center */
    .mobile-magazine-feed::before,
    .mobile-magazine-feed::after {
        content: "";
        display: block;
        min-height: 50svh !important;
        flex-shrink: 0;
    }

    /* Mobile Spread Layout Fixes */
    .mobile-img-title {
        font-size: 0.8rem !important; /* Make cover drawing font smaller */
        font-weight: normal !important;
        margin-top: 0.5rem !important;
    }
    
    /* Add a frame around the images */
    .mobile-gallery-box {
        padding: 0 10vw !important; /* Forces 10vw gap on left and right */
        box-sizing: border-box !important;
    }

    .mobile-img-container {
        height: 100% !important; /* Image fills its padded container */
        width: 100% !important;
    }

    .mobile-swipe-gallery {
        padding-top: 10rem !important; /* Leave room for minus */
        padding-bottom: 10rem !important; /* Leave room for dialbar and center image */
        box-sizing: border-box !important; 
    }

    /* Fix Post-it Scrolling & Alignment */
    .mobile-postit-wrapper {
        align-items: center !important; 
        padding: 0 !important; 
        background: transparent !important; 
    }
    
    .mobile-postit-wrapper .bookmark-note {
        pointer-events: auto !important;
        margin: 0 0 1.5rem 0 !important;
        right: auto !important; /* OVERRIDE desktop right: 2% offset */
        left: auto !important;
        flex: 1 !important; /* Expand to fill remaining space */
        min-height: 0 !important; /* Crucial for scrolling inside flex */
        max-height: none !important; /* Remove legacy 33vh limit */
        height: auto !important;
        overflow-y: auto !important; /* Make the ENTIRE note scrollable */
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    .mobile-postit-wrapper .bookmark-note .note-text-content {
        max-height: none !important; /* Remove individual scroll constraint */
        overflow-y: visible !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
    }

    /* Fix Lightbox Caption Box */
    .lightbox-caption {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        font-family: monospace !important;
    }

    /* Fix Minus Buttons not working */
    .close-minus {
        padding: 2rem !important;
        margin: -2rem !important;
        z-index: 1000000 !important; /* Ensure it's on top of everything! */
        pointer-events: auto !important;
    }

    /* Mobile Collapsible Dynamic Tags */
    #filter-bar.tags-collapsed .dynamic-tag-item {
        max-width: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        display: inline-block !important;
        transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease;
    }
    #filter-bar.tags-expanded .dynamic-tag-item {
        max-width: 15rem !important;
        opacity: 1 !important;
        padding: 0 0.4rem !important;
        margin: 0 0.4rem !important;
        display: inline-block !important;
        transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease;
    }

    /* Mobile: when tags are expanded, hide the filters button itself to prevent blank selection */
    #filter-bar.tags-expanded #filter-bar-filters-btn {
        max-width: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        display: inline-block !important;
        scroll-snap-align: none !important; /* remove from snap sequence when hidden */
        transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease;
    }

    /* Mobile: filters toggle button transitions */
    #filter-bar #filter-bar-filters-btn {
        max-width: 15rem !important;
        opacity: 1 !important;
        overflow: visible !important;
        display: inline-block !important;
        transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease;
    }
}

/* Desktop Collapsible Dynamic Tags — instant swap, no animation */
@media (min-width: 901px) {
    /* Dynamic tags hidden by default */
    #filter-bar .dynamic-tag-item {
        display: none !important;
    }

    /* Hover expanded: hide static buttons, show dynamic tags */
    #filter-bar.hover-expanded #filter-bar-search-btn,
    #filter-bar.hover-expanded #filter-bar-all-btn,
    #filter-bar.hover-expanded .filters-toggle-btn {
        display: none !important;
    }
    #filter-bar.hover-expanded .dynamic-tag-item {
        display: inline-block !important;
    }
}

/* ============================================================
   Mobile Magazine Dial
   ============================================================ */
@media (max-width: 900px) {
    /* Show the footer/filter-bar while magazine is open on mobile */
    body.magazine-open #main-footer,
    body.magazine-open #filter-bar {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100015 !important; /* Above #magazine-reader-overlay */
    }

    /* Chapter items: collapsed by default */
    #filter-bar.mag-chapters-collapsed .mag-chapter-item {
        max-width: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        display: inline-block !important;
        scroll-snap-align: none !important;
        transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease, padding 0.35s ease;
    }
    /* Chapter bridge button: hidden when chapters expanded */
    #filter-bar.mag-chapters-expanded .mag-chapters-toggle {
        max-width: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        display: inline-block !important;
        scroll-snap-align: none !important;
        transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease, padding 0.35s ease;
    }
    /* Chapter items: expanded */
    #filter-bar.mag-chapters-expanded .mag-chapter-item {
        max-width: 20rem !important;
        opacity: 1 !important;
        padding: 0 0.4rem !important;
        margin: 0 0.4rem !important;
        display: inline-block !important;
        scroll-snap-align: center !important;
        transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease, padding 0.35s ease;
    }
}

/* ============================================================
   Mobile Project Spread — Thumbnail Strip
   ============================================================ */
@media (max-width: 900px) {
    /* Show footer + filter-bar while the spread is open (thumbnail strip) */
    body.spread-open #main-footer {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100015 !important; /* Above #unfold-overlay (100010) */
    }
    body.spread-open #filter-bar {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Restore highlight-link style inside filter-bar during spread
       (the global spread-open rule makes them transparent) */
    body.spread-open #filter-bar .spread-thumb-item {
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Active thumbnail: bracket via ::before / ::after (reuses existing active-swipe-tag logic) */
    body.spread-open #filter-bar .spread-thumb-item.active-swipe-tag {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Disable the scale transform the tag dial applies to active items — thumbnails don't scale */
    body.spread-open #filter-bar .spread-thumb-item.active-swipe-tag {
        transform: none !important;
    }
}

/* -------------------------------------------------------------
   Desktop Lightbox Thumb Strip
------------------------------------------------------------- */
.lightbox-thumb-strip {
    /* Always ensure it is above the lightbox background */
    z-index: 1000005;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2rem;
    pointer-events: auto !important;
}
.lightbox-thumb-strip::-webkit-scrollbar {
    display: none;
}

/* Bracket pseudo-elements for the active slide in the lightbox thumb strip */
.lightbox-thumb-strip .spread-thumb-item::before,
.lightbox-thumb-strip .spread-thumb-item::after {
    opacity: 0 !important;
    visibility: hidden !important;
}
.lightbox-thumb-strip .spread-thumb-item.active-swipe-tag::before {
    opacity: 1 !important;
    visibility: visible !important;
    left: 0 !important;
}
.lightbox-thumb-strip .spread-thumb-item.active-swipe-tag::after {
    opacity: 1 !important;
    visibility: visible !important;
    right: 0 !important;
}

.lightbox-thumb-strip .spread-thumb-item {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.lightbox-thumb-strip .spread-thumb-item.active-swipe-tag {
    transform: none !important;
}