/* ========================================================================
   page-strip.css -- filmstrip of real rendered export pages

   Component layer of the modular CSS bundle. Consumes tokens from
   tokens.css. Unlike export-preview.css these are RASTERIZED pages of an
   actual export produced by the render engine, not an HTML facsimile --
   so there is no themed ink to re-anchor: the pixels carry their own.
   The frame around them is chrome and follows the page theme normally.

     .page-strip            -- wrapper below the bundle spec list
     .page-strip__lede      -- one line introducing the strip
     .page-strip__list      -- horizontally scrollable list of pages
     .page-strip__item      -- one page plus its caption
     .page-strip__page      -- the rasterized page image
     .page-strip__caption   -- what the page is
     .page-strip__marker    -- inline emphasis for a literal on the page

   Breakpoints (inlined per project convention -- CSS custom properties
   cannot appear inside @media queries):
       md: 768px

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

.page-strip {
    margin-top: var(--space-8);
}

.page-strip__lede {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
}

/* Scrolls horizontally rather than shrinking four Letter-portrait pages to
   illegibility on a narrow viewport. */
.page-strip__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 1fr);
    gap: var(--space-4);
    margin: 0;
    padding: 0 0 var(--space-3);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

@media (min-width: 768px) {
    .page-strip__list {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: visible;
    }
}

.page-strip__item {
    min-width: 0;
}

.page-strip__page {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-page);
}

.page-strip__caption {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
    color: var(--color-muted);
}

.page-strip__marker {
    font-family: var(--font-family-mono);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
}