/* PaginatedPresentation.css — what the paginated presentation layout
 * (Scripts/Exams/Presentation/PaginatedLayout.js) needs from a Ments HOST
 * page: the panes fit the host's box, and the item-card focus ring.
 *
 * The paged pane itself — the pane's flex column, the page switch, the page
 * region, the image cap, the pager — is the engine sheet
 * QTIScripts/css/PagedPane.css, because a PCI frame pages too (the hot-text
 * passage set's passage) and a frame receives engine sheets only. Nothing
 * here reaches a frame or an item shadow root.
 *
 * Lives here, not in the engine, because the host fit is a Ments
 * delivery/authoring concern. Loaded by every page that hosts
 * MT.PresentationManager: default.html (authoring + Preview), Exams.html
 * (delivery), DemoItemView.html (demo, and the page Hub.html iframes).
 */

/* HOST FIT. The engine sizes a pane to the viewport (calc(100vh - 40px),
   PaldroeStyles.css): right for the delivery page it was written on, and
   taller than the box every other host has once its own chrome sits above
   the item — the pager then lands below the fold and the page scrolls.
   Under pagination the pane takes the HOST'S box instead: PresentationManager
   marks the presentation div .p-qti-paginated-host while this layout is
   active, the div becomes a flex column, the split row (or the bare item
   pane) grows to fill it, and the panes stretch to the row. height:auto
   here releases the engine's viewport height ((0,2,1) beats its (0,1,1)).
   The host's one duty is a definite height on the presentation div: the
   exam body, the scoring display and the Preview display all have one.
   A host whose div has no height chain degrades to content height — the
   pane then scrolls instead of paging. */
.p-qti-paginated-host {
    display: flex;
    flex-direction: column;
}

.p-qti-paginated-host > .p-qti-paginated,
.p-qti-paginated-host > .p-qti-paginated-pane {
    flex: 1 1 auto;
    min-height: 0;
}

/* Scoped to the host: inside a PCI frame the passage set's paged passage
   pane keeps the engine's frame-filling height (and its narrow-window
   reflow), and its page region scrolls only a page that cannot fit. */
.p-qti-paginated-host div.p-qti-item-container.p-qti-paginated-pane,
.p-qti-paginated-host div.p-qti-stimulus.p-qti-paginated-pane {
    height: auto;
    overflow: hidden;
}

/* The inset focus-ring fix for item cards (see the
   .p-qti-item-container > [role="article"]:focus-visible rule in
   PaldroeStyles.css) anchors on a direct-child relationship that
   pagination interposes on: hosts now sit inside .p-qti-page-region,
   itself overflow:auto — the same clipped-outset-ring bug. Restate the
   inset ring for that shape. */
.p-qti-page-region > [role="article"]:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: -3px;
    box-shadow: none;
}