/* ========================================================================
   export-specimen.css -- real rendered export pages, scaled to fit

   Component layer of the modular CSS bundle. Consumes tokens from
   tokens.css. Paired with js/export-specimen.js and the .specimen-modal
   instance in _Layout.

     .export-specimen           -- the in-page viewer root
     .export-specimen__stage    -- fixed-ratio frame holding every render
     .export-specimen__page     -- one (candidate x preset) render
     .export-specimen__controls -- preset switcher, above the stage
     .export-specimen__preset   -- one format tab
     .export-specimen__expand         -- stage-covering button opening the dialog
     .export-specimen__expand-chip    -- the visible corner affordance
     .export-specimen__expand-icon    -- magnifier glyph
     .export-specimen__expand-label   -- "See it full size", shown on hover/focus
     .export-specimen__caption  -- the measured message and page counts

     .specimen-modal            -- fixed overlay root, shared by every viewer
     .specimen-modal__backdrop  -- click-to-dismiss scrim
     .specimen-modal__panel     -- dialog surface
     .specimen-modal__scroll    -- pan region around the full-size page
     .specimen-modal__page      -- the page at legible size
     .specimen-modal__zoom      -- zoom out / level / zoom in

   The thumbnail is deliberately too small to read. A page dense enough to
   be illegible at this size is the argument -- the reader sees the volume,
   then opens it to confirm.

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

.export-specimen {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Letter at the rendered 935x1210. Reserving the ratio means switching
   formats swaps the image inside a box that never changes size, so nothing
   below the specimen moves. */
.export-specimen__stage {
    position: relative;
    aspect-ratio: 935 / 1210;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-page);
}

/* Every render is stacked in the same box and all but one are hidden, so a
   switch is a visibility change rather than a load. */
.export-specimen__page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.export-specimen__page[aria-hidden="true"] {
    visibility: hidden;
}

/* Hidden until export-specimen.js marks the viewer ready. Nothing here works
   without JS -- the site is static, so a switch has no server to ask -- and
   controls that do nothing are worse than controls that are absent. The page
   below still shows a real render and its caption. */
.export-specimen__controls {
    display: none;
}

.export-specimen[data-specimen-ready] .export-specimen__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* A tab-bar, not a pill row: one line, no wrap, sharing the width. The names
   are the product's own preset names and the longest is "Legal - Court
   Filing", so the tabs shrink to fit rather than spilling onto a second line. */
.export-specimen__presets {
    display: flex;
    gap: 0;
    /* The tabs share the width and never spill onto a second line, so the bar
       must not be allowed to grow past its container -- min-width:0 lets the
       flex items shrink below their nowrap content width and ellipsize. */
    min-width: 0;
    max-width: 100%;
    border-bottom: 1px solid var(--color-border);
}

/* Sized to its label, not to an equal share: equal shares gave every tab the
   width of the narrowest column and ellipsized "Legal - Court Filing". */
.export-specimen__preset {
    flex: 0 1 auto;
    min-width: 0;
    padding: var(--space-2) var(--space-2);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: var(--line-height-snug);
    text-align: center;
    cursor: pointer;
}

/* Below the phone breakpoint the preset names cannot share 390px on one line
   without ellipsizing to initials, so they wrap inside their own tab instead.
   The bar stays one row of tabs; only the label inside a tab takes two lines. */
@media (min-width: 40em) {
    .export-specimen__preset {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Selected reads as the tab in front of the sheet -- an underline anchored to
   the bar -- rather than a pressed pill. */
.export-specimen__preset[aria-selected="true"] {
    border-bottom-color: var(--color-cta);
    color: var(--color-ink);
    font-weight: 600;
}

.export-specimen__preset:focus-visible,
.specimen-modal__preset:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

.specimen-modal__preset {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
}

.specimen-modal__preset[aria-selected="true"] {
    border-color: var(--color-cta);
    background: var(--color-cta);
    color: var(--color-accent-on-fill);
}

/* Gated on [data-specimen-ready] for the same reason as the controls row: without
   JS there is no dialog to open. */
.export-specimen__expand {
    display: none;
}

.export-specimen[data-specimen-ready] .export-specimen__expand {
    position: absolute;
    inset: 0;
    /* materialize() appends the deferred candidates' pages AFTER this button, so
       source order would paint them over it and swallow every click. */
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: var(--space-3);
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

/* Dark on light, not light on light. The chip sits on a rendered page that is
   almost entirely white, so a translucent white pill read as a watermark. */
.export-specimen__expand-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-full);
    background: rgba(31, 32, 36, 0.88);
    color: #fff;
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(31, 32, 36, 0.28);
}

/* hero.css's `.hero__media img, .hero__media svg { width: 100%; height: 100% }`
   is written for the hero's own figure, but it also matches this glyph on `/` and
   outspecifies a single class (0,1,1 beats 0,1,0), which rendered it at 300px.
   Matching that specificity keeps the fix here rather than loosening a rule the
   hero depends on. */
.export-specimen .export-specimen__expand-icon {
    display: block;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

/* The label is the tooltip. It costs width the chip does not need when the icon
   alone is unambiguous, so a pointer reveals it and a touch screen keeps the
   icon-only chip that AC6 sizes. aria-label carries the name either way. */
.export-specimen__expand-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Focus is not a pointer capability, so this reveal stays outside the
   (hover: hover) query -- a keyboard on a touch screen still gets the name. */
.export-specimen__expand:focus-visible .export-specimen__expand-chip {
    padding-right: var(--space-3);
    background: rgba(31, 32, 36, 0.96);
}

.export-specimen__expand:focus-visible .export-specimen__expand-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
}

@media (hover: hover) {
    .export-specimen__expand:hover .export-specimen__expand-chip {
        padding-right: var(--space-3);
        background: rgba(31, 32, 36, 0.96);
    }

    .export-specimen__expand:hover .export-specimen__expand-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}

.export-specimen__expand:focus-visible {
    outline: none;
}

.export-specimen__expand:focus-visible .export-specimen__expand-chip {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.export-specimen__caption {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.export-specimen__caption[aria-hidden="true"] {
    display: none;
}

/* ── Full-size dialog ─────────────────────────────────────────────────── */

/* A page wider than the screen (the comparison grid on /pricing and /compare)
   makes a phone shrink-to-fit, and a fixed overlay is then laid out against the
   wider layout viewport -- so the dialog rendered past the right edge of the
   screen and its controls could not be tapped. Capping at 100svw keeps the
   dialog inside what the reader can actually reach. */
.specimen-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100svw;
    max-height: 100svh;
    padding: var(--space-5);
}

/* display:flex above beats the UA rule for [hidden], so restate it. */
.specimen-modal[hidden] {
    display: none;
}

.specimen-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-ink);
    opacity: 0.5;
}

.specimen-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 900px;
    max-height: 92vh;
    padding: var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-parchment);
    color: var(--color-ink);
    box-shadow: var(--shadow-lg);
}

.specimen-modal__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.specimen-modal__title {
    margin: 0;
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
}

.specimen-modal__close {
    padding: 0 var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-ink);
    font-size: var(--font-size-2xl);
    line-height: 1;
    cursor: pointer;
}

.specimen-modal__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* The page is drawn at a zoom multiple of this box's width and this box pans,
   rather than the page shrinking to fit. Fitting a Letter sheet into a phone
   reproduces the thumbnail nobody could read, which is the opposite of what
   expanding is for.

   touch-action keeps one-finger drags as panning -- so a pan cannot travel to
   the backdrop and dismiss the dialog -- while leaving two-finger pinches to
   export-specimen.js. */
/* min-height:0 so this shrinks inside the column flex rather than being sized
   by the zoomed page it contains -- without it the panel grows and the zoom
   row leaves the screen. */
.specimen-modal__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* Reserve the scrollbar space permanently. The zoomed width is a percentage
       of this box, so a bar that appears on one preset and not another would
       resize the page under the reader on every switch. */
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* width is set inline by the zoom engine; 100% is the un-zoomed fallback that
   also applies when JS has not run. max-width:none stops a global img rule
   from clamping the zoomed page back to the box. */
.specimen-modal__page {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.specimen-modal__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.specimen-modal__zoom-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink);
    font-size: var(--font-size-lg);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.specimen-modal__zoom-button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.specimen-modal__zoom-level {
    min-width: 4ch;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.specimen-modal__caption {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

/* On a phone a centred dialog wastes the width the page needs to stay
   legible, so take the whole screen. */
@media (max-width: 39.99em) {
    .specimen-modal {
        padding: 0;
    }

    /* svh, not 100%: a page wide enough to be shrunk-to-fit has a layout
       viewport taller than the screen, and a panel sized to it pushes the zoom
       controls below what the reader can see or tap. */
    .specimen-modal__panel {
        max-width: none;
        max-height: 100svh;
        height: 100svh;
        border: none;
        border-radius: 0;
    }
}