/* Shared component layer — the only stylesheet that is NOT a theme.
 *
 * The six theme files (style.css = retro, clean, uncanny, terminal, blueprint,
 * atlas) each scope every rule under `body.theme-*` so nothing leaks between
 * them. That leaves nowhere to put the structure of a component that all six
 * share, so this file holds exactly that: geometry, layout and behaviour for the
 * case-study lightbox, the floating scroll control and the reading-progress bar.
 *
 * The rule for anything added here: no colours, no fonts, no theme tokens.
 * Those belong in each theme's own file — a `var(--forest)` here would resolve
 * only under `body.theme-clean` and silently fall back to `unset` everywhere else.
 * Loaded before the theme files, and every `body.theme-*` selector outranks the
 * bare class selectors below, so themes always win.
 */

/* --- Floating quick-scroll control (theme.js: initScrollNav) --- */
.cs-scroll-nav {
    position: fixed;
    bottom: 24px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
/* On phones the right edge belongs to #theme-toggle; move to the other thumb. */
@media screen and (max-width: 768px) {
    .cs-scroll-nav {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: auto;
        left: 16px;
    }
}
.cs-scroll-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* --- Reading progress (theme.js: initReadingProgress) --- */
.cs-reading-track {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 1002;
    pointer-events: none;
}
.cs-reading-bar {
    height: 100%;
    width: 0%;
    transition: width 0.08s ease-out;
}

/* --- Zoom affordance on a screenshot frame --- */
/* .shot-zoom-badge is a decorative <span> inside the frame's own <a>;
   .shot-zoom-btn is the real button used on the few frames that are not links. */
.shot-frame {
    position: relative;
}
.shot-zoom-badge,
.shot-zoom-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    box-sizing: border-box;
}
.shot-zoom-btn {
    cursor: pointer;
}

/* --- Lightbox dialog (theme.js: initLightbox) --- */
dialog.cs-lightbox {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 94vw;
    max-height: 94vh;
    width: 1100px;
    padding: 0;
    overflow: hidden;
    z-index: 2000;
}
dialog.cs-lightbox::backdrop {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
}
.cs-lightbox-card {
    display: flex;
    flex-direction: column;
    max-height: 94vh;
}
.cs-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    gap: 12px;
}
.cs-lightbox-hint {
    display: block;
    font-size: 0.75rem;
}
.cs-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Hidden whenever the shot is not a link to a live app, so :not([hidden])
   rather than a bare display — no dependence on a global [hidden] rule. */
.cs-lightbox-link:not([hidden]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.cs-lightbox-link:hover {
    text-decoration: underline;
}
.cs-lightbox-close {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Dark, theme-independent mat: these are screenshots of other apps, and a
   neutral surround keeps every theme from tinting the thing being viewed. */
.cs-lightbox-viewport {
    overflow: auto;
    padding: 16px;
    text-align: center;
    background: #0f172a;
    touch-action: pinch-zoom;
    max-height: calc(94vh - 70px);
}
.cs-lightbox-img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}
.cs-lightbox-img.is-zoomed {
    max-width: none;
    width: auto;
    cursor: zoom-out;
}
body.cs-lightbox-active {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cs-reading-bar,
    .cs-lightbox-img {
        transition: none;
    }
}