/* PagedPane.css — the paged pane (QTIScripts/Classes/Presentation/PagedPane.js).
 *
 * An ENGINE sheet (StyleSheetRegistry.ENGINE_SHEET_PATHS): every host page
 * links it, every item shadow root adopts it with the other engine sheets,
 * and every PCI frame receives it through the host's engineStyles — which
 * is how the hot-text passage set's passage, paged inside its frame, is
 * styled. It holds only what a paged pane needs wherever it renders: the
 * pane's flex column, the page switch, the page region and its measuring
 * state, the image cap, and the pager. Inert without those classes, so a
 * stacked render and every third-party page are untouched.
 *
 * What only a Ments HOST page needs — fitting the panes to the host's box,
 * the item-card focus ring — stays in Scripts/css/PaginatedPresentation.css.
 *
 * Last in the engine list: the pane rules below override PaldroeStyles.css
 * rules of equal specificity (its pane overflow).
 */

/* A paginated pane is a flex column: the scrollable page region grows,
   the pager pins to the bottom.

   The second selector is NOT redundant, and must not be "tidied" away.
   A pane that sits beside a stimulus carries qti-layout-col5 / col7, and
   QtiBaseStyles.css:1668 has `.qti-layout-row [class*="qti-layout-col"]
   { display: block }` — specificity (0,2,0), which beats a bare
   `.p-qti-paginated-pane` (0,1,0) no matter which sheet loads last. With
   display:block the pane is not a flex container at all: the page
   region's `flex: 1 1 auto` means nothing, the region takes height:auto
   and grows to its content, and the PANE scrolls instead of paging.
   `.qti-layout-row div.p-qti-paginated-pane` is (0,2,1), so it wins on
   specificity rather than on source order.

   Colour comes from the engine's theme
   tokens only (QtiBaseStyles.css --foreground/--background) so AfA PnP
   re-theming keeps working. Under pagination the PAGE REGION is the
   scroll container; it fills the pane, so the pane itself never needs to
   scroll (a host page also releases the pane's viewport height —
   PaginatedPresentation.css, HOST FIT). */
.p-qti-paginated-pane,
.qti-layout-row div.p-qti-paginated-pane {
    display: flex;
    flex-direction: column;
}

/* Page visibility switch for sliced content and non-current units. A
   CLASS, not inline display, so any inline style an interaction sets at
   runtime survives page flips; it reaches shadow-root content because
   this is an engine sheet, adopted into every item root. !important so no authored or interaction display
   rule can resurrect a hidden page. */
.p-qti-page-off {
    display: none !important;
}

.p-qti-page-region {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* The measuring state: a unit still rendering is laid out at full pane
   width — real geometry for interactions that measure themselves — but
   invisible and out of the document flow, so it neither flashes nor
   grows the visible scroll area. NEVER display:none while content
   renders. */
.p-qti-page-region > .p-qti-measuring {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Auto-fit's last gap: an image (or a standalone svg) taller than one
   page cannot be broken at a block boundary, so it is the one block that
   would still scroll. Cap it to the page budget, which PagedPane
   publishes as --p-qti-page-budget on each unit it fits — a percentage
   max-height cannot do this, because every ancestor between the image
   and the fixed-height pane is auto-height. object-fit keeps the aspect
   ratio when an authored width attribute is also in play.

   Scoped to FITTED units (.p-qti-paged-unit: a stimulus section, the
   passage set's passage) deliberately: item images are never resized,
   since a graphic interaction's hotspot coordinates are tied to the size
   its image rendered at. The fallback keeps images untouched anywhere the
   budget was never published (the degrade path, and the stacked layout). */
.p-qti-paged-unit img,
.p-qti-paged-unit svg {
    max-height: var(--p-qti-page-budget, none);
    object-fit: contain;
}

/* The pager: a pill-shaped segmented control — "‹ Back" | "N / M" |
   "Next ›" — centred under the page region. The bar (.p-qti-pager) is
   what PagedPane measures for the page budget
   (_regionHeightWithPager reads root.offsetHeight), so the pill's
   clearance is the bar's PADDING, never a margin, which offsetHeight
   would not see. */
.p-qti-pager {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 10px 8px;
    color: var(--foreground);
    background: var(--background);
}

/* A single-page pane hides its pager. This rule is required: the UA's
   [hidden] { display: none } loses to any author display declaration,
   so the flex above would keep a hidden pager painted. */
.p-qti-pager[hidden] {
    display: none;
}

.p-qti-pager-pill {
    display: inline-flex;
    align-items: stretch;
}

/* Segments. Each carries its own border, so the end-of-pane state can
   restyle one segment's outline on its own; the count owns both
   dividers so no border doubles up where segments meet. 44px minimum
   target (WCAG 2.5.5). The border is the foreground TOKEN, not
   currentColor: hover swaps the text colour to the background token,
   and a currentColor border would vanish with it, so the button looked
   2px smaller while hovered. Both themes and PnP palettes keep >= 3:1
   non-text contrast either way. */
.p-qti-pager-btn,
.p-qti-pager-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    color: var(--foreground);
    background: var(--background);
    border: 2px solid var(--foreground);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.p-qti-pager-btn {
    min-width: 44px;
    gap: 6px;
    cursor: pointer;
}

.p-qti-pager-btn:first-child {
    border-right: 0;
    border-radius: 999px 0 0 999px;
}

.p-qti-pager-btn:last-child {
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.p-qti-pager-glyph {
    font-size: 24px;
}

.p-qti-pager-count {
    min-width: 72px;
    font-variant-numeric: tabular-nums;
}

/* The page count in words ("Passage page 2 of 5"), for assistive
   technology only: a live region, visually hidden but never display:none
   (which would silence it). The visible "N / M" beside it is
   aria-hidden, so it is read once. */
.p-qti-pager-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.p-qti-pager-btn:hover:not([aria-disabled="true"]),
.p-qti-pager-btn:active:not([aria-disabled="true"]) {
    color: var(--background);
    background: var(--foreground);
}

/* The ring is drawn in the foreground token, not currentColor: a
   hovered button has swapped its colours, and a currentColor ring would
   vanish into the pane background. Raised above its neighbours so the
   segments either side never cover it. */
.p-qti-pager-btn:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--foreground);
    outline-offset: 2px;
}

/* End-of-pane state: aria-disabled, not the disabled attribute (which
   would drop keyboard focus) and not hidden. Signalled by border style
   — never by colour alone — with a faint tint of the foreground as a
   second cue; text keeps the full-contrast foreground. The plain
   background line is the fallback where color-mix is unsupported. */
.p-qti-pager-btn[aria-disabled="true"] {
    border-style: dashed;
    background: var(--background);
    background: color-mix(in srgb, var(--foreground) 8%, var(--background));
    cursor: default;
}