/* ============================================================
   Standalone Vertical-Scroll Reader (reader-layout-scroll)
   ------------------------------------------------------------
   One column, fit-to-width, continuous native vertical scroll.
   Dark theme + brand vars come from reader.css (:root); this
   sheet only adds the scroll layout, the reserved-height page
   placeholders, the canvas fade-in, and the single floating
   cart button. No toolbars, no panels, no scrubber.
   ============================================================ */

html, body.scroll-reader-body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--color-bg, #1a1a1a);
    color: var(--color-text, #f0f0f0);
    -webkit-text-size-adjust: 100%;
}

/* The single scroll surface. 100dvh keeps the bottom stable under the iOS
   Safari dynamic toolbar (workspace mobile rule). Native vertical scroll is
   the primary gesture at scale 1. */
.scroll-container {
    position: relative;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: center;   /* one centered column */
    gap: 14px;
    padding: 14px 0 40px;
    box-sizing: border-box;
    background: var(--color-bg, #1a1a1a);
}

/* One reserved-height placeholder per page. The height is set inline by
   scroll_reader.js from the page aspect ratio at the current container width,
   so total scroll height is correct immediately and nothing reflows as pages
   paint. Centered, full available width up to the page's fit width. */
.scroll-slot {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Clear vertical separation between pages in the scroll. */
    margin-bottom: 28px;
    /* A subtle surface so an unrendered placeholder reads as a pending page,
       not a gap. */
    background: transparent;
}
.scroll-slot:last-child { margin-bottom: 0; }

/* The inner box actually carries BOTH the reserved height and the final
   rendered box, and holds the canvas and annotation layer — both absolutely
   positioned at 100%/100% of it. JS sets the inner's EXPLICIT width AND height
   inline (uniform column width × the page aspect); because the canvas and the
   layer are each 100%/100% of this one box, they are the SAME box by
   construction and can never diverge (no shrink-wrap / height:auto ambiguity). */
.scroll-slot-inner {
    position: relative;
    /* width + height set inline by JS (one computation in _applySlotBox). */
    max-width: 100%;
    font-size: 0;            /* kill inline-block whitespace under the canvas */
    background: var(--color-surface, #242424);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* The page canvas fills its slot-inner box exactly (absolute 100%/100%, the
   SAME box the annotation layer uses) and dissolves in on draw. Starts
   transparent; scroll_reader.js adds .rendered once real pixels are blitted.
   The canvas's intrinsic width/height attributes carry the bitmap aspect; the
   inner box is sized to that exact aspect in JS, so filling it 100%/100%
   neither letterboxes nor stretches. */
.scroll-slot .page-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* Override the SHARED reader.css .page-canvas rules, which are written for
       the spread viewer and actively break the scroll layout here:
         - `max-height: calc(100dvh - ...)` clamped the canvas SHORTER than its
           slot-inner on tall pages / wide viewports, so the canvas showed a
           margin while the annotation layer (100% of the taller inner) did not
           — the exact last-page misalignment the user reported.
         - `max-width:100%`, `width:auto`, `height:auto`, `object-fit:contain`
           all fight the "fill the inner box 100%/100%" model.
       Reset them so the canvas fills its inner box EXACTLY, matching the layer. */
    max-width: none;
    max-height: none;
    object-fit: fill;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.scroll-slot .page-canvas.rendered {
    opacity: 1;
}
/* The shared reader.css collapses an unrendered .page-canvas to 0×0 with
   !important (a spread-viewer artifact guard). In the scroll reader the canvas
   must keep its full box even before the fade so the slot never visibly jumps
   when .rendered is added; the opacity transition above does the reveal. */
.scroll-slot .page-canvas:not(.rendered) {
    width: 100% !important;
    height: 100% !important;
    visibility: visible;
}

/* Annotation overlay sits exactly over the canvas. reader.css defines
   .annotations-layer as opacity:0 and only reveals it under
   .page-layer.active — which does not exist here — so we drive the reveal off
   the slot's .rendered state instead, with a short delay AFTER the canvas has
   begun fading in (workspace rule: annotations must not be visible before the
   page content is). */
.scroll-slot .annotations-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.35s;
    z-index: 20;
}
.scroll-slot.rendered .annotations-layer {
    opacity: 1;
    pointer-events: auto;
}

/* SKU / annotation touch targets: ensure a comfortable minimum hit area on
   touch, and a clear :active feedback (workspace annotation + mobile rules). */
.scroll-slot .annotations-layer > * {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(192, 57, 43, 0.3);
    touch-action: manipulation;
}
.scroll-slot .annotations-layer > *:active {
    background: rgba(192, 57, 43, 0.3) !important;
    outline: 2px solid rgba(192, 57, 43, 0.6);
}

/* Initial single centered spinner (loading-state rule: one spinner, no
   shimmer). Hidden by JS once the first page paints. */
.scroll-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: var(--color-accent, #c0392b);
    z-index: 5;
    pointer-events: none;
}
.scroll-loading.hidden {
    display: none;
}

/* The only chrome: a floating cart button. Visible brand-red fill (no
   ghost/outline), >=44px touch target, Font Awesome icon. Fixed TOP-right so it
   stays visible while scrolling; honors the iOS safe-area inset (top). */
.scroll-cart-btn {
    position: fixed;
    right: 16px;
    top: calc(16px + env(safe-area-inset-top, 0px));
    z-index: 60;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent, #c0392b);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, transform 0.1s ease;
}
.scroll-cart-btn:hover {
    background: var(--color-accent-hover, #e74c3c);
}
.scroll-cart-btn:active {
    transform: scale(0.97);
}
.scroll-cart-btn .cart-badge {
    background: #fff;
    color: var(--color-accent, #c0392b);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    min-width: 18px;
    text-align: center;
}

/* Auction catalogs only: "Created by Digital Quire" platform credit, a minimal
   fixed BOTTOM-LEFT link (the scroll reader has no footer by design). Clearly
   visible against the dark background with a hover shift (workspace link rule);
   >=44px touch target; honors the iOS safe-area inset (bottom). */
.scroll-dq-created-by {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 55;   /* below the cart button (60), above scroll content */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: rgba(20, 22, 25, 0.85);
    border: 1px solid var(--color-surface-hover, rgba(255, 255, 255, 0.08));
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: color 0.2s ease, background 0.2s ease;
}
.scroll-dq-created-by:hover {
    color: #fff;
    background: rgba(30, 33, 38, 0.95);
    text-decoration: underline;
}
.scroll-dq-created-by:active { transform: scale(0.98); }

/* Fit-mode toggle: fixed TOP-LEFT, mirroring the cart's top-right geometry and
   safe-area inset. Top-left is free in every edition (cart top-right, DQ credit
   bottom-left) so there is no collision. Secondary action per the ui-design
   rule: a VISIBLE solid dark surface fill with a border — NOT a ghost/outline
   button — >=44px touch target, Font Awesome icon, hover shift. */
.scroll-fit-toggle {
    position: fixed;
    left: 16px;
    top: calc(16px + env(safe-area-inset-top, 0px));
    z-index: 60;   /* same band as the cart button (opposite corner) */
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-hover, #2f2f2f);
    color: var(--color-text, #f0f0f0);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, transform 0.1s ease;
}
.scroll-fit-toggle:hover {
    background: var(--color-surface, #242424);
}
.scroll-fit-toggle:active {
    transform: scale(0.97);
}

/* Mobile: slightly smaller cart button + tighter scroll padding (workspace
   mobile rule: reduce sizes on mobile, keep >=44px touch target). */
@media (max-width: 640px) {
    .scroll-container { gap: 10px; padding: 10px 0 36px; }
    .scroll-cart-btn { font-size: 13px; padding: 10px 14px; }
    .scroll-cart-btn .btn-label { display: none; }  /* icon + badge only */
    /* Keep the DQ credit visible but compact — icon + short label. */
    .scroll-dq-created-by { font-size: 12px; padding: 7px 11px; }
    .scroll-dq-created-by .dq-label { display: none; }  /* icon only on mobile */
    /* Fit toggle: icon-only + tighter padding, keeping the 44px touch target. */
    .scroll-fit-toggle { font-size: 13px; padding: 10px 14px; }
    .scroll-fit-toggle .btn-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-slot .page-canvas,
    .scroll-slot .annotations-layer { transition: none; }
}

/* NOTE: the SKU color key (.sku-legend / .sku-legend-chip) styles live in
   annotations.css so BOTH the spread reader and the scroll reader (which share
   annotations.css) render it identically. */