@charset "utf-8";

/* NOTE: bootstrap.min.css, tui-tree.min.css and qti/qti30.css used to be @imported
   here. They are now <link>ed ahead of this file in templates/page.html,
   page-bare.html and test-delivery.html so they load in parallel rather than in a
   serial @import waterfall. The link order in those templates must keep THIS file
   after them: the rules below rely on winning specificity ties against Bootstrap.

   The sheets linked after this one are the themes (theme-blue.css, theme-abyss.css), each
   an overlay carrying one theme. They live on their own because the portable custom
   interaction iframe loads them without loading this file - see theme-blue.css's header.
   A dark theme must restate the [data-bs-theme="dark"] rules below for its own name, as
   theme-abyss.css does. */

:root {
    --aib-ch-width: 0.9em; /* approximate width of one 'M' character, used for qti-input-width-N sizing */
}

#aib-header {
    background-color: rgba(var(--bs-body-bg-rgb), 0.8);
    border-bottom: .5em solid var(--bs-secondary-bg);
}
/* Items stretch to the row's height; centre their text on the logo and theme icon. Wide only:
 * collapsed, the separators are full-width rules that a flex row would shrink to nothing. */
@media (min-width: 992px) {
    #aib-header .navbar-nav > .nav-item { display: flex; align-items: center; }
}

div.aib-content {padding:1em;}
/* A page whose content is marked aib-wide (the Resources page) takes the whole window's width:
 * its grid's columns are the person's choice and can be many. Bootstrap's gutters stay. */
.container:has(> .aib-content > .aib-wide) { max-width: none; }
/* The Columns dialog's rows are dragged by their grip. */
.aib-columns-shown [draggable="true"] { cursor: grab; }
.aib-columns-shown [draggable="true"] .form-check-label { cursor: inherit; }
div.aib-copyright {text-align:center; font-size:87%;}

table.aib-interaction-support {width: 100%}

.tui-tree-wrap { font-size: 0.875rem; }
.tui-tree-text { font-size: 0.875rem; }

[data-bs-theme="dark"] .tui-tree-wrap {
    background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .tui-tree-text {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-text,
[data-bs-theme="dark"] .tui-tree-root > .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-text {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tui-tree-toggle-btn {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tui-tree-content-wrapper:hover,
[data-bs-theme="dark"] .tui-tree-hover > .tui-tree-content-wrapper {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .tui-tree-selected > .tui-tree-content-wrapper {
    background-color: rgba(75, 150, 230, 0.2);
}

/* TUI Grid's "No data" / loading layer: applyTheme has no setting for it, and its own CSS paints it
   white with #ccc text whatever the theme */
.tui-grid-container .tui-grid-layer-state {
    background-color: var(--bs-body-bg);
}
.tui-grid-container .tui-grid-layer-state p {
    color: var(--bs-secondary-color);
}

/* The grid's scrollbars are the browser's own; applyTheme colours only the space around them */
.tui-grid-container .tui-grid-body-area,
.tui-grid-container .tui-grid-summary-area {
    scrollbar-color: color-mix(in srgb, var(--bs-body-color) 35%, transparent) var(--bs-tertiary-bg);
}

/* TUI Grid dark theme — applyTheme does not cover the resize handle or filter UI */
[data-bs-theme="dark"] .tui-grid-height-resize-handle {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .tui-grid-filter-container {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .tui-grid-filter-dropdown {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .tui-grid-filter-dropdown select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tui-grid-filter-container .tui-grid-filter-input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .tui-grid-filter-input::placeholder {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .tui-grid-filter-comparator span {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tui-grid-filter-list-container .tui-grid-filter-list {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .tui-grid-filter-list-container .tui-grid-filter-list-item {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tui-grid-filter-list .tui-grid-filter-list-item-checked {
    background-color: var(--bs-primary-bg-subtle);
}

.aib-interaction-detail {background-color: var(--bs-secondary-bg) !important;}
/*table.aib-interaction-support tbody tr:nth-child(odd) {
    background-color: var(--bs-dark-bg-subtle);
}*/

#aib-navbar-collapse .dropdown-menu .active .bi {
  display:block !important
}

.hiddenRow {
    padding: 0 !important;
}

.text-error { color: var(--bs-danger); font-size: 0.8em; }

/*============================================================================*/
/*============================================================================*/
/* A rubric block the candidate is not going to see. item-23.10.xsl drops those under delivery,
   so this can only ever match on a preview or authoring page and needs no mode flag to stay off
   a candidate's. The marker names the audience rather than merely tinting the block, because
   who a block is addressed to is the only thing separating two rubric blocks that read the
   same; a candidate-facing one is left as ordinary content, which is what QTI means by it.
   `all` is QTI v1's spelling, still carried by migrated 2.x content, and the attribute
   selectors are case-insensitive because the item's own casing of it varies. */
.aib-rubric[data-aib-view]:not([data-aib-view~="candidate" i]):not([data-aib-view~="all" i]) {
    padding: .5rem .75rem;
    border-inline-start: .25rem solid var(--bs-warning-border-subtle);
    background-color: var(--bs-warning-bg-subtle);
}
.aib-rubric[data-aib-view]:not([data-aib-view~="candidate" i]):not([data-aib-view~="all" i])::before {
    content: attr(data-aib-view);
    display: block;
    margin-block-end: .25rem;
    font-size: .75em;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Author CSS this renderer declined to apply, named so the omission is visible rather than
   silent. item-23.10.xsl emits the notice under preview alone - never delivery, where the
   candidate must not be shown the engine discussing itself, and never authoring, where a block
   the author did not write is one they cannot select, move or delete. So, like the rubric marker
   above, it needs no mode flag here to stay off the pages it does not belong on. */
.aib-stylesheet-notice {
    margin-block: .5rem;
    padding: .375rem .625rem;
    border-inline-start: .25rem solid var(--bs-info-border-subtle);
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-secondary-color);
    font-size: .8125em;
}

/* A shared stimulus (qti-assessment-stimulus-ref). item-23.10.xsl draws one either where an
   element of the item body places it (data-stimulus-idref) or, unplaced, in .aib-stimuli
   beside, above or below the body as the tenant chose. Beside the body it is a reading pane:
   it scrolls on its own so the question stays in view while the passage is long. */
.aib-stimulus + .aib-stimulus {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}
.aib-stimuli {
    margin-bottom: 1rem;
}
/* A stimulus is written once and shown in columns of whatever width each item gives it, so its
   media cannot keep the width its attributes ask for: a 720-pixel figure ran out of a half-width
   column and under the question beside it. height: auto keeps the aspect ratio the width and
   height attributes give. */
.aib-stimulus :is(img, svg, video, object),
[data-aib-stimulus] :is(img, svg, video, object) {
    max-width: 100%;
    height: auto;
}
/* The same holds for an item's own media: width and height give its aspect ratio (and a
   hotspot's coordinate space), not a size the page must grow to fit. A 640-pixel hotspot image
   made the whole page scroll sideways on a phone. Shrinks, never grows. The hotspot overlay is
   sized by its container and is left alone. */
[data-aib-context="qti-item-body"] :is(img, video, object, canvas, svg:not(.aib-hotspot-overlay)) {
    max-width: 100%;
    height: auto;
}
.aib-stimulus-layout > .qti-layout-col6:first-child .aib-stimuli {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    padding-inline-end: .75rem;
    border-inline-end: 1px solid var(--bs-border-color);
}
/* Once the row stacks its columns (qti/layout.css), the stimulus is above the question and
   scrolls with the page. */
@container (max-width: 36rem) {
    .aib-stimulus-layout > .qti-layout-col6:first-child .aib-stimuli {
        max-height: none;
        border-inline-end: 0;
        padding-inline-end: 0;
    }
}

/* A stimulus that could not be shown - unknown identifier, or not found. Preview and the
   authoring canvas only, for the reason the stylesheet notice above gives. */
.aib-stimulus-notice {
    margin-block: .5rem;
    padding: .375rem .625rem;
    border-inline-start: .25rem solid var(--bs-warning-border-subtle);
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-secondary-color);
    font-size: .8125em;
}

/* An element item-23.10.xsl has no template for. Delivery refuses the item instead, so this
   too is preview and the authoring canvas only. A span, because it can stand where either
   phrasing or flow content does; drawn as a box so it reads as missing content, not text. */
.aib-unsupported {
    display: inline-block;
    margin-block: .25rem;
    padding: .375rem .625rem;
    border: 1px dashed var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-size: .8125em;
}

/* Template blocks and inlines on the authoring canvas, where every branch is drawn: outlined,
   and labelled with the value that shows or hides them. Elsewhere the item arrives instantiated,
   and they are plain content. */
[data-aib-template-rule] {
    outline: 1px dashed var(--bs-info-border-subtle);
    outline-offset: 2px;
}
div[data-aib-template-rule]::before {
    content: attr(data-aib-template-rule);
    display: block;
    color: var(--bs-info-text-emphasis);
    font-size: .75em;
}
span[data-aib-template-rule] {
    background-color: var(--bs-info-bg-subtle);
}

/* Feedback. On the authoring canvas every element is drawn, labelled like a template block.
   Elsewhere a block or modal feedback is a panel the candidate can tell from the question, and
   hidden feedback is hidden (the attribute, set by the stylesheet or feedback.js). */
[data-aib-feedback-rule] {
    outline: 1px dashed var(--bs-success-border-subtle);
    outline-offset: 2px;
}
div[data-aib-feedback-rule]::before {
    content: attr(data-aib-feedback-rule);
    display: block;
    color: var(--bs-success-text-emphasis);
    font-size: .75em;
}
span[data-aib-feedback-rule] {
    background-color: var(--bs-success-bg-subtle);
}
[data-aib-feedback][hidden] {
    display: none !important;
}
div.aib-feedback:not([data-aib-feedback-rule]) {
    margin-block: .5rem;
    padding: .5rem .75rem;
    border-inline-start: .25rem solid var(--bs-success-border-subtle);
    background-color: var(--bs-tertiary-bg);
}
.aib-modal-feedback:not(:has(> [data-aib-feedback]:not([hidden]))) {
    display: none;
}
.aib-modal-feedback {
    margin-block-start: 1rem;
}
/* The item page's Show Answer and Show Feedback: the row takes no room when neither is offered. */
.aib-preview-options:not(:has(> :not([hidden]))) {
    display: none !important;
}

/* A printed variable on the authoring canvas: its identifier in braces, since nothing is drawn. */
.aib-printed-placeholder {
    padding: 0 .25em;
    border-radius: .25rem;
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    font-family: var(--bs-font-monospace);
    font-size: .875em;
}

[data-aib-interaction="qti-choice-interaction"]:not(.qti-labels-none) {
    counter-reset: choices;
    --label-suffix: '';
}
[data-aib-interaction="qti-choice-interaction"]:not(.qti-labels-none).qti-labels-suffix-period {
    --label-suffix: '.';
}
[data-aib-interaction="qti-choice-interaction"]:not(.qti-labels-none).qti-labels-suffix-parenthesis {
    --label-suffix: ')';
}
/* Three tracks: control | marker | body. The marker is the row's own ::before, which as a
   grid item needs explicit placement — auto-placement would put it in track 1, ahead of the
   input. Item margins rather than column-gap do the spacing, so .qti-labels-none (no ::before,
   so track 2 collapses to zero) does not leave a stray gap behind. Whichever of the two sits
   last before the body carries --choice-body-gap, so the body is inset the same either way. */
[data-aib-context="qti-simple-choice"] {
    --choice-control-gap: .5em;
    --choice-body-gap: .75em;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    position: relative;
    margin-block-end: 2em;
    cursor: pointer;
}
[data-aib-context="qti-simple-choice"] > input {
    grid-row: 1;
    grid-column: 1;
    margin-top: .35em;
    margin-right: var(--choice-control-gap);
    cursor: pointer;
}
/* No marker to separate the body from, so the input takes on the body gap itself. */
[data-aib-interaction="qti-choice-interaction"]:is(.qti-labels-none, .qti-list-style-type-none) [data-aib-context="qti-simple-choice"] > input {
    margin-right: var(--choice-body-gap);
}
[data-aib-context="qti-simple-choice"] > span {
    grid-row: 1;
    grid-column: 3;
}
/* Horizontal: all choices on one row, text wraps within each choice */
[data-aib-interaction="qti-choice-interaction"].qti-orientation-horizontal .aib-choices {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: 2.5em;
}
[data-aib-interaction="qti-choice-interaction"].qti-orientation-horizontal .aib-choices > [data-aib-context="qti-simple-choice"] {
    flex: 1 1 0;
    min-width: 0;
}

/* Stacking (horizontal/default): at most N columns, row-major order, and fewer where a column
   would be narrower than --aib-stacking-min. A plain repeat(N, 1fr) never gave one up: each
   track's floor is its widest content, so three 160-pixel picture cards scrolled a phone's
   page sideways. Each track's minimum is the larger of the floor and an Nth share of the row
   (less a pixel, so rounding cannot drop a column at full width); auto-fill then fits N where
   the share wins and fewer where the floor does, min(100%) keeping one column inside the row.
   The floor is 6rem for text and 10rem for a choice holding media: one floor for both put
   choice-partial's six two-digit numbers in one column on a phone. The gap shrinks with the
   row, so a phone does not spend 80 pixels of 340 between three columns. */
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-1 { --aib-stacking: 1; }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-2 { --aib-stacking: 2; }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-3 { --aib-stacking: 3; }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-4 { --aib-stacking: 4; }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-5 { --aib-stacking: 5; }
[data-aib-interaction="qti-choice-interaction"]:is(.qti-choices-stacking-1, .qti-choices-stacking-2, .qti-choices-stacking-3, .qti-choices-stacking-4, .qti-choices-stacking-5) .aib-choices {
    --aib-stacking-gap: min(2.5em, 5%);
    --aib-stacking-min: 6rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--aib-stacking-min), (100% - (var(--aib-stacking) - 1) * var(--aib-stacking-gap)) / var(--aib-stacking) - 1px)), 1fr));
    align-items: start;
    column-gap: var(--aib-stacking-gap);
}
[data-aib-interaction="qti-choice-interaction"] .aib-choices:has(> [data-aib-context="qti-simple-choice"] :is(img, video, svg, object, canvas)) {
    --aib-stacking-min: 10rem;
}

/* Stacking + vertical: CSS multi-column gives natural column-major (top-to-bottom per column) flow.
   More-specific selectors override the grid rules above. column-width drops columns the same
   way: the count used is the smaller of column-count and what fits at that width. */
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-1.qti-orientation-vertical .aib-choices { display: block; column-count: 1; column-width: var(--aib-stacking-min); column-gap: var(--aib-stacking-gap); }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-2.qti-orientation-vertical .aib-choices { display: block; column-count: 2; column-width: var(--aib-stacking-min); column-gap: var(--aib-stacking-gap); }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-3.qti-orientation-vertical .aib-choices { display: block; column-count: 3; column-width: var(--aib-stacking-min); column-gap: var(--aib-stacking-gap); }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-4.qti-orientation-vertical .aib-choices { display: block; column-count: 4; column-width: var(--aib-stacking-min); column-gap: var(--aib-stacking-gap); }
[data-aib-interaction="qti-choice-interaction"].qti-choices-stacking-5.qti-orientation-vertical .aib-choices { display: block; column-count: 5; column-width: var(--aib-stacking-min); column-gap: var(--aib-stacking-gap); }
[data-aib-interaction="qti-choice-interaction"].qti-orientation-vertical .aib-choices > [data-aib-context="qti-simple-choice"] { break-inside: avoid; }

/* qti-input-control-hidden: choices are fully clickable tiles with no visible radio/checkbox.
   The input is clipped rather than display:none'd so it keeps its place in the tab order and
   in the accessibility tree — display:none would make these choices keyboard-dead. */
[data-aib-interaction="qti-choice-interaction"].qti-input-control-hidden [data-aib-context="qti-simple-choice"] {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    padding: 0.5em 0.75em;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
[data-aib-interaction="qti-choice-interaction"].qti-input-control-hidden [data-aib-context="qti-simple-choice"] > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* The clipped input cannot show its own focus ring, so the row wears it. */
[data-aib-interaction="qti-choice-interaction"].qti-input-control-hidden [data-aib-context="qti-simple-choice"]:has(> input:focus-visible) {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
[data-aib-interaction="qti-choice-interaction"].qti-input-control-hidden [data-aib-context="qti-simple-choice"]:hover {
    border-color: var(--bs-primary);
    background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}
[data-aib-interaction="qti-choice-interaction"].qti-input-control-hidden [data-aib-context="qti-simple-choice"][data-aib-choice-selected] {
    border-color: var(--bs-primary);
    background-color: color-mix(in srgb, var(--bs-primary) 15%, transparent);
}

[data-aib-interaction="qti-choice-interaction"]:not(.qti-labels-none, .qti-list-style-type-none) [data-aib-context="qti-simple-choice"]:before {
    counter-increment: choices;
    content: counter(choices, var(--aib-labels, var(--qti-list-style-type, upper-alpha))) var(--label-suffix);
    grid-row: 1;
    grid-column: 2;
    margin-right: var(--choice-body-gap);
}

/* A label's counter style: a qti-labels-* class, else a qti-list-style-type-* class (list.css
   sets --qti-list-style-type), else upper-alpha. Both properties inherit, to reach the choices,
   so the interaction first resets them: a list or anything else around it must not restyle its
   labels. The reset is in :where() so that any class on the interaction itself beats it,
   whichever stylesheet loads first. Beyond QTI's own qti-labels-decimal / -lower-alpha /
   -upper-alpha / -cjk-ideographic, qti-labels-* takes every name list.css does. counter()
   ignores a style's prefix and suffix, so --label-suffix alone decides what follows the label. */
:where([data-aib-interaction="qti-choice-interaction"]) {
    --aib-labels: initial;
    --qti-list-style-type: initial;
}
[data-aib-interaction="qti-choice-interaction"].qti-labels-adlam { --aib-labels: adlam; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-afar { --aib-labels: afar; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-agaw { --aib-labels: agaw; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ancient-tamil { --aib-labels: ancient-tamil; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-arabic-abjad { --aib-labels: arabic-abjad; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-arabic-indic { --aib-labels: arabic-indic; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ari { --aib-labels: ari; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-armenian { --aib-labels: armenian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-balinese { --aib-labels: balinese; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-bamum { --aib-labels: bamum; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-bangla { --aib-labels: bangla; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-bengali { --aib-labels: bengali; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-binary { --aib-labels: binary; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-blin { --aib-labels: blin; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-bodo { --aib-labels: bodo; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cambodian { --aib-labels: cambodian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circle { --aib-labels: circle; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-decimal { --aib-labels: circled-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-ideograph { --aib-labels: circled-ideograph; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-katakana { --aib-labels: circled-katakana; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-korean-consonant { --aib-labels: circled-korean-consonant; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-korean-syllable { --aib-labels: circled-korean-syllable; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-lower-latin { --aib-labels: circled-lower-latin; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-circled-upper-latin { --aib-labels: circled-upper-latin; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cjk-decimal { --aib-labels: cjk-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cjk-earthly-branch { --aib-labels: cjk-earthly-branch; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cjk-heavenly-stem { --aib-labels: cjk-heavenly-stem; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cjk-ideographic { --aib-labels: cjk-ideographic; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cjk-stem-branch { --aib-labels: cjk-stem-branch; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-cjk-tally-mark { --aib-labels: cjk-tally-mark; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-decimal { --aib-labels: decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-decimal-leading-zero { --aib-labels: decimal-leading-zero; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-devanagari { --aib-labels: devanagari; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-disc { --aib-labels: disc; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-disclosure-closed { --aib-labels: disclosure-closed; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-disclosure-open { --aib-labels: disclosure-open; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-dizi { --aib-labels: dizi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-dogri { --aib-labels: dogri; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-dotted-decimal { --aib-labels: dotted-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-double-circled-decimal { --aib-labels: double-circled-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ethiopic-halehame { --aib-labels: ethiopic-halehame; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ethiopic-halehame-am { --aib-labels: ethiopic-halehame-am; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ethiopic-halehame-ti-er { --aib-labels: ethiopic-halehame-ti-er; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ethiopic-halehame-ti-et { --aib-labels: ethiopic-halehame-ti-et; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ethiopic-numeric { --aib-labels: ethiopic-numeric; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-filled-circled-decimal { --aib-labels: filled-circled-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-fullwidth-decimal { --aib-labels: fullwidth-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-fullwidth-lower-alpha { --aib-labels: fullwidth-lower-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-fullwidth-lower-roman { --aib-labels: fullwidth-lower-roman; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-fullwidth-upper-alpha { --aib-labels: fullwidth-upper-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-fullwidth-upper-roman { --aib-labels: fullwidth-upper-roman; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-gedeo { --aib-labels: gedeo; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-georgian { --aib-labels: georgian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-greek-lower-ancient { --aib-labels: greek-lower-ancient; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-greek-lower-modern { --aib-labels: greek-lower-modern; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-greek-upper-ancient { --aib-labels: greek-upper-ancient; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-greek-upper-modern { --aib-labels: greek-upper-modern; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-gujarati { --aib-labels: gujarati; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-gujarati-alpha { --aib-labels: gujarati-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-gumuz { --aib-labels: gumuz; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-gurmukhi { --aib-labels: gurmukhi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hadiyya { --aib-labels: hadiyya; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hangul { --aib-labels: hangul; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hangul-consonant { --aib-labels: hangul-consonant; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hanifi-rohingya { --aib-labels: hanifi-rohingya; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-harari { --aib-labels: harari; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hebrew { --aib-labels: hebrew; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hindi { --aib-labels: hindi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hiragana { --aib-labels: hiragana; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-hiragana-iroha { --aib-labels: hiragana-iroha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-japanese-formal { --aib-labels: japanese-formal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-japanese-informal { --aib-labels: japanese-informal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-javanese { --aib-labels: javanese; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kaffa { --aib-labels: kaffa; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kannada { --aib-labels: kannada; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kannada-alpha { --aib-labels: kannada-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kashmiri { --aib-labels: kashmiri; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-katakana { --aib-labels: katakana; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-katakana-iroha { --aib-labels: katakana-iroha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kayah-li { --aib-labels: kayah-li; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kebena { --aib-labels: kebena; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kembata { --aib-labels: kembata; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-khmer { --aib-labels: khmer; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-khmer-consonant { --aib-labels: khmer-consonant; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-konkani { --aib-labels: konkani; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-konso { --aib-labels: konso; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-korean-consonant { --aib-labels: korean-consonant; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-korean-hangul-formal { --aib-labels: korean-hangul-formal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-korean-hanja-formal { --aib-labels: korean-hanja-formal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-korean-hanja-informal { --aib-labels: korean-hanja-informal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-korean-syllable { --aib-labels: korean-syllable; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-kunama { --aib-labels: kunama; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lanna-hora { --aib-labels: lanna-hora; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lanna-tham { --aib-labels: lanna-tham; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lao { --aib-labels: lao; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lepcha { --aib-labels: lepcha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-limbu { --aib-labels: limbu; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-alpha { --aib-labels: lower-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-alpha-symbolic { --aib-labels: lower-alpha-symbolic; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-armenian { --aib-labels: lower-armenian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-belorussian { --aib-labels: lower-belorussian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-bulgarian { --aib-labels: lower-bulgarian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-greek { --aib-labels: lower-greek; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-hexadecimal { --aib-labels: lower-hexadecimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-latin { --aib-labels: lower-latin; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-macedonian { --aib-labels: lower-macedonian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-oromo-qubee { --aib-labels: lower-oromo-qubee; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-roman { --aib-labels: lower-roman; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-russian { --aib-labels: lower-russian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-russian-full { --aib-labels: lower-russian-full; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-serbian { --aib-labels: lower-serbian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-ukrainian { --aib-labels: lower-ukrainian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-lower-ukrainian-full { --aib-labels: lower-ukrainian-full; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-maghrebi-abjad { --aib-labels: maghrebi-abjad; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-maithili { --aib-labels: maithili; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-malayalam { --aib-labels: malayalam; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-malayalam-alpha { --aib-labels: malayalam-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-manipuri { --aib-labels: manipuri; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-marathi { --aib-labels: marathi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-meen { --aib-labels: meen; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-meetei { --aib-labels: meetei; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-mongolian { --aib-labels: mongolian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-mro { --aib-labels: mro; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-myanmar { --aib-labels: myanmar; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-nag-mundari { --aib-labels: nag-mundari; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-new-base-60 { --aib-labels: new-base-60; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-newa { --aib-labels: newa; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-nko-cardinal { --aib-labels: nko-cardinal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-octal { --aib-labels: octal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-odia { --aib-labels: odia; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-ol-chiki { --aib-labels: ol-chiki; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-oriya { --aib-labels: oriya; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-oromo { --aib-labels: oromo; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-parenthesized-decimal { --aib-labels: parenthesized-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-parenthesized-hangul-consonant { --aib-labels: parenthesized-hangul-consonant; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-parenthesized-hangul-syllable { --aib-labels: parenthesized-hangul-syllable; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-parenthesized-ideograph { --aib-labels: parenthesized-ideograph; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-parenthesized-lower-latin { --aib-labels: parenthesized-lower-latin; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-persian { --aib-labels: persian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-persian-abjad { --aib-labels: persian-abjad; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-persian-alphabetic { --aib-labels: persian-alphabetic; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-punjabi { --aib-labels: punjabi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-saho { --aib-labels: saho; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-sanskrit { --aib-labels: sanskrit; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-santali { --aib-labels: santali; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-shan { --aib-labels: shan; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-sidama { --aib-labels: sidama; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-silti { --aib-labels: silti; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-simp-chinese-formal { --aib-labels: simp-chinese-formal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-simp-chinese-informal { --aib-labels: simp-chinese-informal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-simple-lower-roman { --aib-labels: simple-lower-roman; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-simple-upper-roman { --aib-labels: simple-upper-roman; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-sindhi { --aib-labels: sindhi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-square { --aib-labels: square; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-sundanese { --aib-labels: sundanese; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-super-decimal { --aib-labels: super-decimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-tai-lue { --aib-labels: tai-lue; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-tally-mark { --aib-labels: tally-mark; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-tamil { --aib-labels: tamil; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-telugu { --aib-labels: telugu; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-telugu-alpha { --aib-labels: telugu-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-thai { --aib-labels: thai; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-thai-alpha { --aib-labels: thai-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-tibetan { --aib-labels: tibetan; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-tigre { --aib-labels: tigre; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-trad-chinese-formal { --aib-labels: trad-chinese-formal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-trad-chinese-informal { --aib-labels: trad-chinese-informal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-alpha { --aib-labels: upper-alpha; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-alpha-symbolic { --aib-labels: upper-alpha-symbolic; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-armenian { --aib-labels: upper-armenian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-belorussian { --aib-labels: upper-belorussian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-bulgarian { --aib-labels: upper-bulgarian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-hexadecimal { --aib-labels: upper-hexadecimal; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-latin { --aib-labels: upper-latin; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-macedonian { --aib-labels: upper-macedonian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-oromo-qubee { --aib-labels: upper-oromo-qubee; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-roman { --aib-labels: upper-roman; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-russian { --aib-labels: upper-russian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-russian-full { --aib-labels: upper-russian-full; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-serbian { --aib-labels: upper-serbian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-ukrainian { --aib-labels: upper-ukrainian; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-upper-ukrainian-full { --aib-labels: upper-ukrainian-full; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-urdu { --aib-labels: urdu; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-urdu-abjad { --aib-labels: urdu-abjad; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-urdu-alphabetic { --aib-labels: urdu-alphabetic; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-warang-citi { --aib-labels: warang-citi; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-wolaita { --aib-labels: wolaita; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-yemsa { --aib-labels: yemsa; }
[data-aib-interaction="qti-choice-interaction"].qti-labels-zhuyin { --aib-labels: zhuyin; }
/*============================================================================*/
/*============================================================================*/

/*============================================================================*/
/* qti-inline-choice-interaction                                              */
/*============================================================================*/
.aib-inline-select {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.aib-inline-select-trigger {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5ch;
    padding: 0 0.4em;
    cursor: pointer;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    font: inherit;
    color: inherit;
}
.aib-inline-select-value {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}
.aib-inline-select-trigger::after {
    content: '\25BE'; /* ▾ */
    font-size: 0.75em;
    flex-shrink: 0;
}
.aib-inline-select-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 100%;
    width: max-content;
    padding: 0.25em 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--bs-box-shadow);
}
.aib-inline-select-option {
    display: block;
    padding: 0.2em 0.6em;
    cursor: pointer;
}
.aib-inline-select-option:hover,
.aib-inline-select-option[data-aib-selected] {
    background: var(--bs-primary-bg-subtle);
}

/*
 * qti-input-width shared vocabulary: N = number of 'M' characters to accommodate.
 * Uses calc(N * var(--aib-ch-width) + 2em) where --aib-ch-width ≈ M-width and 2em covers chrome
 * (padding + dropdown arrow / input border). Remove min-width so small values render correctly.
 */
.aib-inline-select.qti-input-width-1  { width: calc( 1 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-2  { width: calc( 2 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-3  { width: calc( 3 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-4  { width: calc( 4 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-6  { width: calc( 6 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-10 { width: calc(10 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-15 { width: calc(15 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-20 { width: calc(20 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-25 { width: calc(25 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-30 { width: calc(30 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-35 { width: calc(35 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-40 { width: calc(40 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-45 { width: calc(45 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-50 { width: calc(50 * var(--aib-ch-width) + 2em); }
.aib-inline-select.qti-input-width-72 { width: calc(72 * var(--aib-ch-width) + 2em); }

[data-aib-interaction="qti-text-entry-interaction"] { display: inline-block; position: relative; }

/* The XSLT puts .form-control on the text-entry input for cross-UA border/padding/focus.
   Two of its declarations have to be walked back for an inline fill-in-the-blank:
     - display:block / width:100% would break the input out of the running text, so
       restore inline-block + auto and let `size` / qti-input-width-N drive the width;
     - padding:.375rem .75rem (1.5rem horizontal) would overflow the "+ 1em" allowance the
       qti-input-width-N calcs below budget for padding + border, shrinking the usable
       field by about half a character. .25em keeps those calcs correct as written.
   This rule ties with the qti-input-width-N rules on specificity (0,2,1), so it must stay
   ABOVE them for their widths to win on source order. */
[data-aib-interaction="qti-text-entry-interaction"] input.form-control {
    display: inline-block;
    width: auto;
    padding-right: 0.25em;
    padding-left: 0.25em;
}

/* interaction validation toasts — fixed upper-right, always visible */
#aib-validation-toasts { position: fixed; top: calc(var(--aib-header-height, 0px) + 1rem); right: 1rem; z-index: 1050; display: flex; flex-direction: column; gap: 0.5rem; max-width: 20rem; pointer-events: none; }
.aib-validation-toast { pointer-events: auto; display: flex; align-items: baseline; gap: 0.5em; padding: 0.25em 0.5em; border: 2px solid var(--bs-danger); border-radius: var(--bs-border-radius-sm); background: var(--bs-danger-bg-subtle); filter: drop-shadow(10px 10px 4px var(--bs-danger-border-subtle));; transition: opacity 1s; }
.aib-validation-toast.aib-fading { opacity: 0; }
.aib-validation-toast-close { flex-shrink: 0; margin-left: auto; background: none; border: none; cursor: pointer; padding: 0; font-size: 1.1em; line-height: 1; color: inherit; }


[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-1  input { width: calc( 1 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-2  input { width: calc( 2 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-3  input { width: calc( 3 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-4  input { width: calc( 4 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-6  input { width: calc( 6 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-10 input { width: calc(10 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-15 input { width: calc(15 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-20 input { width: calc(20 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-25 input { width: calc(25 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-30 input { width: calc(30 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-35 input { width: calc(35 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-40 input { width: calc(40 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-45 input { width: calc(45 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-50 input { width: calc(50 * var(--aib-ch-width) + 1em); }
[data-aib-interaction="qti-text-entry-interaction"].qti-input-width-72 input { width: calc(72 * var(--aib-ch-width) + 1em); }

/*============================================================================*/
/* qti-hotspot-interaction                                                    */
/*============================================================================*/
/* The image scales down to the item's width, and the overlay with it: its viewBox is the
   img's width and height attributes, so the regions stay over what they mark at any size. The
   container keeps inline-block so it is exactly the image's size; max-width lets it shrink. */
.aib-hotspot-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.aib-hotspot-container img {
    display: block;
    max-width: 100%;
    height: auto;
}
.aib-hotspot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* default / qti-selections-light: light (yellow) selections, for dark background images */
/* non-scaling-stroke: a scaled-down image would otherwise thin the outline with it. */
[data-aib-context="qti-hotspot-choice"] {
    vector-effect: non-scaling-stroke;
    fill: transparent;
    stroke: rgba(255, 220, 0, 0.6);
    stroke-width: 2;
    cursor: pointer;
}
[data-aib-context="qti-hotspot-choice"]:hover {
    fill: rgba(255, 220, 0, 0.2);
    stroke: rgba(255, 220, 0, 0.9);
    stroke-width: 3;
}
[data-aib-context="qti-hotspot-choice"][data-aib-selected] {
    fill: rgba(255, 220, 0, 0.35);
    stroke: rgba(255, 220, 0, 1);
    stroke-width: 3;
}

/* qti-selections-dark: dark (navy) selections, for light background images */
.qti-selections-dark [data-aib-context="qti-hotspot-choice"] {
    stroke: rgba(0, 0, 128, 0.5);
    stroke-width: 2;
}
.qti-selections-dark [data-aib-context="qti-hotspot-choice"]:hover {
    fill: rgba(0, 0, 128, 0.15);
    stroke: rgba(0, 0, 128, 0.8);
    stroke-width: 3;
}
.qti-selections-dark [data-aib-context="qti-hotspot-choice"][data-aib-selected] {
    fill: rgba(0, 0, 128, 0.3);
    stroke: rgba(0, 0, 128, 1);
    stroke-width: 3;
}

/*============================================================================*/
/* qti-graphic-gap-match-interaction                                          */
/*============================================================================*/
/* The bank and chips are the gap match's; the image and overlay the hotspot's. Each hotspot's
   placed chips are drawn in its anchor, centred on the shape, and a gap image is scaled with
   the background (--aib-ggm-scale, set by graphic-gap-match.js). */
[data-aib-context="qti-associable-hotspot"] {
    vector-effect: non-scaling-stroke;
    fill: transparent;
    stroke: rgba(0, 0, 128, 0.5);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}
[data-aib-armed] [data-aib-context="qti-associable-hotspot"][tabindex] { cursor: pointer; fill: rgba(0, 0, 128, 0.08); }
[data-aib-context="qti-associable-hotspot"][data-aib-drag-over],
[data-aib-armed] [data-aib-context="qti-associable-hotspot"][tabindex]:hover,
[data-aib-context="qti-associable-hotspot"]:focus-visible {
    fill: rgba(0, 0, 128, 0.18);
    stroke: rgba(0, 0, 128, 1);
    stroke-width: 3;
    outline: none;
}
[data-aib-context="qti-associable-hotspot"][data-aib-used] { stroke-dasharray: none; }
/* max-content: an anchor near the right edge would otherwise be only as wide as the space
   left to that edge, and squeeze what it holds. */
.aib-ggm-anchor {
    position: absolute;
    width: max-content;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25em;
}
.aib-ggm-anchor:empty { display: none; }
.aib-ggm-anchor > [data-aib-match-role="placed"] {
    cursor: pointer;
    box-shadow: var(--bs-box-shadow-sm);
}
.aib-ggm-anchor > [data-aib-context="qti-gap-img"] { padding: 0; line-height: 0; }
.aib-ggm-anchor > [data-aib-context="qti-gap-img"] img[width] {
    width: calc(var(--aib-ggm-width) * var(--aib-ggm-scale, 1) * 1px);
    height: auto;
    max-width: none;
}
[data-aib-interaction="qti-graphic-gap-match-interaction"] .aib-gap-text-bank > [data-aib-match-role="source"][aria-pressed="true"] {
    outline: 2px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}
[data-aib-context="qti-gap-img"] img { display: block; }

/* qti-unselected-hidden shared vocabulary */
.qti-unselected-hidden [data-aib-context="qti-hotspot-choice"]:not([data-aib-selected]) {
    fill: transparent;
    stroke: transparent;
}
.qti-unselected-hidden [data-aib-context="qti-hottext"]:not([data-aib-selected]) {
    text-decoration: none;
    cursor: default;
}

/*============================================================================*/
/* qti-hottext-interaction                                                    */
/*============================================================================*/
[data-aib-context="qti-hottext"] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 0.2em;
    border-radius: var(--bs-border-radius-sm);
    padding: 0.05em 0.1em;
}
[data-aib-context="qti-hottext"]:hover {
    background-color: var(--bs-primary-bg-subtle);
}
[data-aib-context="qti-hottext"][data-aib-selected] {
    background-color: var(--bs-primary-bg-subtle);
    outline: 2px solid var(--bs-primary);
    text-decoration: none;
}

/*============================================================================*/
/*============================================================================*/
/* QTI Shared Vocubulary has hard-coded colors.  AIB leveraging Bootrap theme... */
.qti-bordered {
    border: 1px solid var(--bs-border-color);
}

.qti-well {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
}

/*============================================================================*/
/* qti-extended-text-interaction                                              */
[data-aib-interaction="qti-extended-text-interaction"] textarea { display: block; width: 100%; height: calc(3 * 1.5em + 1em); }
/*============================================================================*/
/* qti-gap-match-interaction                                                  */
/*============================================================================*/
.aib-gap-text-bank {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.5em;
    padding: 0.5em;
    margin-bottom: 0.75em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: 2.5em;
}
[data-aib-context="qti-gap-text"],
[data-aib-context="qti-gap-img"] {
    display: inline-block;
    padding: 0.2em 0.6em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-secondary-bg);
    cursor: grab;
    user-select: none;
}
[data-aib-context="qti-gap-text"][data-aib-dragging],
[data-aib-context="qti-gap-img"][data-aib-dragging] {
    opacity: 0.4;
}
/* A chip placed match-max times leaves the bank until one of its copies is removed */
.aib-gap-text-bank > [data-aib-at-max] { display: none; }
[data-aib-context="qti-gap"] {
    display: inline-block;
    width: 6em;
    vertical-align: middle;
    border-bottom: 2px solid var(--bs-body-color);
    margin: 0 0.2em;
    overflow: hidden;
    text-align: center;
}
[data-aib-context="qti-gap"]:not(:has([data-aib-context="qti-gap-text"], [data-aib-context="qti-gap-img"]))::before {
    content: '\00a0';
}
[data-aib-context="qti-gap"][data-aib-drag-over] {
    background: var(--bs-primary-bg-subtle);
    border-bottom-color: var(--bs-primary);
}
[data-aib-context="qti-gap"] [data-aib-context="qti-gap-text"],
[data-aib-context="qti-gap"] [data-aib-context="qti-gap-img"] {
    display: inline;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: break-word;
    border: none;
    background: none;
    padding: 0;
}

/* qti-input-width-* shared vocabulary on qti-gap: drop zone width           */
[data-aib-context="qti-gap"].qti-input-width-1  { width: calc( 1 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-2  { width: calc( 2 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-3  { width: calc( 3 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-4  { width: calc( 4 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-6  { width: calc( 6 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-10 { width: calc(10 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-15 { width: calc(15 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-20 { width: calc(20 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-25 { width: calc(25 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-30 { width: calc(30 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-35 { width: calc(35 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-40 { width: calc(40 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-45 { width: calc(45 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-50 { width: calc(50 * var(--aib-ch-width) + 1em); }
[data-aib-context="qti-gap"].qti-input-width-72 { width: calc(72 * var(--aib-ch-width) + 1em); }

/* qti-choices-* shared vocabulary: bank position relative to passage        */
[data-aib-context="qti-gap-match-interaction"].qti-choices-bottom {
    display: flex;
    flex-direction: column;
}
[data-aib-context="qti-gap-match-interaction"].qti-choices-bottom > * { order: 1; }
[data-aib-context="qti-gap-match-interaction"].qti-choices-bottom > [data-aib-context="qti-prompt"] { order: 0; }
[data-aib-context="qti-gap-match-interaction"].qti-choices-bottom > .aib-gap-text-bank { order: 2; }
[data-aib-context="qti-gap-match-interaction"].qti-choices-bottom > [data-aib-interaction-validation-message] { order: 3; }

[data-aib-context="qti-gap-match-interaction"].qti-choices-left,
[data-aib-context="qti-gap-match-interaction"].qti-choices-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    align-items: start;
}
/* Prompt and validation span both columns */
[data-aib-context="qti-gap-match-interaction"].qti-choices-left > [data-aib-context="qti-prompt"],
[data-aib-context="qti-gap-match-interaction"].qti-choices-right > [data-aib-context="qti-prompt"],
[data-aib-context="qti-gap-match-interaction"].qti-choices-left > [data-aib-interaction-validation-message],
[data-aib-context="qti-gap-match-interaction"].qti-choices-right > [data-aib-interaction-validation-message] {
    grid-column: 1 / -1;
}
/* Bank left: column 1; passage auto-placed into column 2 */
[data-aib-context="qti-gap-match-interaction"].qti-choices-left > .aib-gap-text-bank {
    grid-column: 1;
}
/* Bank right: column 2; passage auto-placed into column 1 */
[data-aib-context="qti-gap-match-interaction"].qti-choices-right > .aib-gap-text-bank {
    grid-column: 2;
}

/*============================================================================*/
/* qti-match-interaction                                                      */
/*============================================================================*/
/* Drag rendering: the first set as chips in .aib-match-sources, the second   */
/* as drop targets in .aib-match-targets.                                     */
.aib-match-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.5em;
    padding: 0.5em;
    margin-bottom: 0.75em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: 2.5em;
}
.aib-match-sources > [data-aib-match-role="source"],
[data-aib-match-role="placed"] {
    display: inline-block;
    padding: 0.2em 0.6em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-secondary-bg);
    cursor: grab;
    user-select: none;
}
.aib-match-sources > [data-aib-match-role="source"] > p:only-child,
[data-aib-match-role="placed"] > p:only-child,
.aib-match-target-label > p:only-child { margin: 0; }
.aib-match-sources > [data-aib-match-role="source"][data-aib-used] { border-color: var(--bs-primary-border-subtle); }
.aib-match-sources > [data-aib-match-role="source"][aria-pressed="true"] {
    outline: 2px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}
/* A source placed match-max times leaves the bank until one of its chips is removed */
.aib-match-sources > [data-aib-match-role="source"][data-aib-at-max] { display: none; }
.aib-match-sources > [data-aib-match-role="source"][data-aib-dragging],
[data-aib-match-role="placed"][data-aib-dragging] { opacity: 0.4; }
[data-aib-match-role="placed"] { cursor: pointer; }

.aib-match-targets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 0.5em;
    margin-bottom: 0.75em;
}
.aib-match-targets > [data-aib-match-role="target"] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.aib-match-target-label {
    padding: 0.4em 0.6em;
    border-bottom: 1px dashed var(--bs-border-color);
    font-weight: 500;
}
.aib-match-drop {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    padding: 0.4em;
    min-height: 2.4em;
    flex: 1;
}
.aib-match-targets > [data-aib-match-role="target"][data-aib-drag-over] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}
[data-aib-armed] .aib-match-targets > [data-aib-match-role="target"][tabindex]:not([data-aib-full]) { cursor: pointer; border-style: dashed; border-color: var(--bs-primary); }

/* qti-choices-* shared vocabulary: where the first set sits relative to the second. */
[data-aib-context="qti-match-interaction"].qti-choices-bottom { display: flex; flex-direction: column; }
[data-aib-context="qti-match-interaction"].qti-choices-bottom > * { order: 1; }
[data-aib-context="qti-match-interaction"].qti-choices-bottom > [data-aib-context="qti-prompt"] { order: 0; }
[data-aib-context="qti-match-interaction"].qti-choices-bottom > .aib-match-sources { order: 2; }
[data-aib-context="qti-match-interaction"].qti-choices-bottom > [data-aib-interaction-validation-message] { order: 3; }

[data-aib-context="qti-match-interaction"].qti-choices-left,
[data-aib-context="qti-match-interaction"].qti-choices-right {
    display: grid;
    grid-template-columns: minmax(10em, 1fr) 2fr;
    column-gap: 1em;
    align-items: start;
}
[data-aib-context="qti-match-interaction"].qti-choices-right { grid-template-columns: 2fr minmax(10em, 1fr); }
[data-aib-context="qti-match-interaction"].qti-choices-left > [data-aib-context="qti-prompt"],
[data-aib-context="qti-match-interaction"].qti-choices-right > [data-aib-context="qti-prompt"],
[data-aib-context="qti-match-interaction"].qti-choices-left > [data-aib-interaction-validation-message],
[data-aib-context="qti-match-interaction"].qti-choices-right > [data-aib-interaction-validation-message] {
    grid-column: 1 / -1;
}
[data-aib-context="qti-match-interaction"].qti-choices-left > .aib-match-sources,
[data-aib-context="qti-match-interaction"].qti-choices-right > .aib-match-sources { flex-direction: column; align-items: stretch; }
[data-aib-context="qti-match-interaction"].qti-choices-left > .aib-match-sources { grid-column: 1; grid-row: 2; }
[data-aib-context="qti-match-interaction"].qti-choices-left > .aib-match-targets { grid-column: 2; grid-row: 2; }
[data-aib-context="qti-match-interaction"].qti-choices-right > .aib-match-sources { grid-column: 2; grid-row: 2; }
[data-aib-context="qti-match-interaction"].qti-choices-right > .aib-match-targets { grid-column: 1; grid-row: 2; }
[data-aib-context="qti-match-interaction"].qti-choices-left > .aib-match-targets,
[data-aib-context="qti-match-interaction"].qti-choices-right > .aib-match-targets { grid-template-columns: 1fr; }

/* qti-match-tabular: the first set as rows, the second as columns.           */
.aib-match-table {
    border-collapse: collapse;
    margin-bottom: 0.75em;
}
.aib-match-table th,
.aib-match-table td {
    border: 1px solid var(--bs-border-color);
    padding: 0.4em 0.75em;
    vertical-align: middle;
}
.aib-match-table thead th { text-align: center; background: var(--bs-secondary-bg); }
.aib-match-table tbody th { text-align: start; font-weight: 500; }
.aib-match-table td { text-align: center; }
.aib-match-table th > p:only-child { margin: 0; }
.aib-match-table input[type="checkbox"] { width: 1.15em; height: 1.15em; cursor: pointer; }
.aib-match-table input[type="checkbox"]:disabled { cursor: not-allowed; }

/*============================================================================*/
/* qti-associate-interaction                                                  */
/*============================================================================*/
/* One bank of chips, each dropped on another (or picked up and put down on   */
/* another) to pair them; associate.js lists the pairs below the bank.        */
.aib-associate-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.5em;
    margin-bottom: 0.75em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.aib-associate-choices > [data-aib-match-role="choice"],
.aib-associate-member {
    display: inline-block;
    padding: 0.2em 0.6em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-secondary-bg);
    user-select: none;
}
.aib-associate-choices > [data-aib-match-role="choice"] { cursor: grab; }
.aib-associate-choices > [data-aib-match-role="choice"] > p:only-child,
.aib-associate-member > p:only-child { margin: 0; }
.aib-associate-choices > [data-aib-match-role="choice"][data-aib-used] { border-color: var(--bs-primary-border-subtle); }
.aib-associate-choices > [data-aib-match-role="choice"][aria-pressed="true"] {
    outline: 2px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}
[data-aib-armed] .aib-associate-choices > [data-aib-match-role="choice"]:not([aria-pressed="true"]):not([aria-disabled]) {
    cursor: pointer;
    border-style: dashed;
    border-color: var(--bs-primary);
}
.aib-associate-choices > [data-aib-match-role="choice"][data-aib-drag-over] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}
.aib-associate-choices > [data-aib-match-role="choice"][aria-disabled] { opacity: 0.5; cursor: not-allowed; }
.aib-associate-choices > [data-aib-match-role="choice"][data-aib-dragging] { opacity: 0.4; }
.aib-associate-pairs {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.aib-associate-pairs:empty { display: none; }
.aib-associate-pair {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}
.aib-associate-joiner { color: var(--bs-secondary-color); }

/*============================================================================*/
/* qti-order-interaction                                                      */
/*============================================================================*/
/* The choices (.aib-order-choices) and a numbered list of order targets      */
/* (.aib-order-target), one slot per position, which order.js fills. In the   */
/* list layout every choice starts in a slot and the container stays empty.   */
.aib-order-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.5em;
    margin-bottom: 0.75em;
    min-height: 3em;
    width: var(--aib-order-choices-width, auto);
    max-width: 100%;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
[data-aib-order-layout="list"] > .aib-order-choices:empty { display: none; }
.aib-order-choices[data-aib-drag-over] { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }
.aib-order-target {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5em;
    padding: 0;
    margin: 0 0 0.75em;
    counter-reset: aib-order;
}
.aib-order-slot {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    min-width: 9em;
    padding: 0.4em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}
/* A filled slot is as tall as its choice. An empty one keeps the height a choice would give
   it: a row of text and buttons when vertical, the two stacked when horizontal. */
.aib-order-slot[data-aib-empty] { min-height: 3.1em; }
[data-aib-orientation="horizontal"] > .aib-order-target > .aib-order-slot[data-aib-empty] { min-height: 5em; }
.aib-order-slot[data-aib-drag-over] { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }
.aib-order-choice {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0; /* over the choice interaction's spacing, which every qti-simple-choice gets */
    padding: 0.3em 0.5em;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-primary-text-emphasis);
    cursor: grab;
    user-select: none;
}
.aib-order-choices > .aib-order-choice { cursor: pointer; }
.aib-order-choice[data-aib-dragging] { opacity: 0.4; }
.aib-order-content { flex: 1; }
.aib-order-content > p:only-child { margin: 0; }
.aib-order-controls { display: flex; gap: 0.25em; flex-shrink: 0; }
.aib-order-controls > .btn { padding: 0.1em 0.4em; }
.aib-order-controls > .btn[hidden] { display: none; }

/* Order target labels (shared vocabulary 1.2.9.1-2): none unless a class asks for them, since
   qti-labels-none is the vocabulary's default, and no suffix unless one asks for that. Reset
   in :where() so a class on the interaction wins whichever stylesheet loads first, and nothing
   around it leaks in. The ol still gives each target its position for assistive technology. */
:where([data-aib-interaction="qti-order-interaction"]) {
    --aib-order-labels: decimal;
    --aib-order-suffix: "";
}
[data-aib-interaction="qti-order-interaction"].qti-labels-decimal { --aib-order-labels: decimal; }
[data-aib-interaction="qti-order-interaction"].qti-labels-lower-alpha { --aib-order-labels: lower-alpha; }
[data-aib-interaction="qti-order-interaction"].qti-labels-upper-alpha { --aib-order-labels: upper-alpha; }
[data-aib-interaction="qti-order-interaction"].qti-labels-suffix-period { --aib-order-suffix: "."; }
[data-aib-interaction="qti-order-interaction"].qti-labels-suffix-parenthesis { --aib-order-suffix: ")"; }
[data-aib-interaction="qti-order-interaction"]:is(.qti-labels-decimal, .qti-labels-lower-alpha, .qti-labels-upper-alpha):not(.qti-labels-none) .aib-order-slot::before {
    counter-increment: aib-order;
    content: counter(aib-order, var(--aib-order-labels)) var(--aib-order-suffix);
    text-align: center;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* Orientation: horizontal (the default) runs both lists across; vertical stacks them. */
[data-aib-orientation="vertical"] > .aib-order-choices,
[data-aib-orientation="vertical"] > .aib-order-target { flex-direction: column; align-items: stretch; }
[data-aib-orientation="vertical"] > .aib-order-target > .aib-order-slot { min-width: 0; }
[data-aib-orientation="horizontal"] > .aib-order-target > .aib-order-slot > .aib-order-choice { flex-direction: column; align-items: stretch; text-align: center; }
[data-aib-orientation="horizontal"] .aib-order-slot .aib-order-controls { justify-content: center; }

/* Moves are announced here; it is not seen. */
.aib-order-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* qti-choices-* shared vocabulary (1.2.9.3): where the choices container sits relative to the
   order targets. Top is the document order. */
[data-aib-context="qti-order-interaction"].qti-choices-bottom { display: flex; flex-direction: column; }
[data-aib-context="qti-order-interaction"].qti-choices-bottom > * { order: 1; }
[data-aib-context="qti-order-interaction"].qti-choices-bottom > [data-aib-context="qti-prompt"] { order: 0; }
[data-aib-context="qti-order-interaction"].qti-choices-bottom > .aib-order-choices { order: 2; }
[data-aib-context="qti-order-interaction"].qti-choices-bottom > [data-aib-interaction-validation-message] { order: 3; }
[data-aib-context="qti-order-interaction"].qti-choices-left,
[data-aib-context="qti-order-interaction"].qti-choices-right {
    display: grid;
    grid-template-columns: var(--aib-order-choices-width, minmax(0, 1fr)) minmax(0, 1fr);
    column-gap: 1em;
    align-items: start;
}
[data-aib-context="qti-order-interaction"].qti-choices-right {
    grid-template-columns: minmax(0, 1fr) var(--aib-order-choices-width, minmax(0, 1fr));
}
[data-aib-context="qti-order-interaction"].qti-choices-left > *,
[data-aib-context="qti-order-interaction"].qti-choices-right > * { grid-column: 1 / -1; }
[data-aib-context="qti-order-interaction"].qti-choices-left > .aib-order-choices { grid-column: 1; grid-row: 2; width: auto; }
[data-aib-context="qti-order-interaction"].qti-choices-left > .aib-order-target { grid-column: 2; grid-row: 2; }
[data-aib-context="qti-order-interaction"].qti-choices-right > .aib-order-choices { grid-column: 2; grid-row: 2; width: auto; }
[data-aib-context="qti-order-interaction"].qti-choices-right > .aib-order-target { grid-column: 1; grid-row: 2; }

/* qti-height-lines-* shared vocabulary: N = number of lines to display.     */
[data-aib-interaction="qti-extended-text-interaction"].qti-height-lines-3 textarea  { height: calc(3 * 1.5em + 1em); }
[data-aib-interaction="qti-extended-text-interaction"].qti-height-lines-6 textarea  { height: calc(6 * 1.5em + 1em); }
[data-aib-interaction="qti-extended-text-interaction"].qti-height-lines-15 textarea { height: calc(15 * 1.5em + 1em); }



/* Underline toolbar button: restore text color suppressed by dark theme */
.toastui-editor-dark .toastui-editor-toolbar-icons[aria-label="U"] {
    color: rgba(255, 255, 255, 0.8);
}

.aib-char-counter {
    font-size: 0.85em;
    color: var(--bs-secondary-color);
    text-align: right;
    margin-top: 0.25em;
}
.aib-char-counter.aib-char-counter-over {
    color: var(--bs-danger-text-emphasis);
    font-weight: bold;
}


/* Portable custom interaction (PCI 1.0). The interaction runs in its own iframe, which has no
   intrinsic height - the bridge measures its content and the host sets the height, so the frame
   starts small rather than at the browser's 150px default and grows into its content. */
.aib-pci-frame {
    display: block;
    width: 100%;
    height: 0;
    border: 0;
    overflow: hidden;
}
.aib-pci-frame.aib-pci-frame-failed {
    display: none;
}
[data-aib-interaction-validation-message].aib-pci-error {
    color: var(--bs-danger-text-emphasis);
}

/* Tom Select's Bootstrap 5 sheet writes light-theme colours as literals (text #343a40, chips
   #efefef, the "Add …" row at half that), so in a dark theme typed text all but vanished. Every
   box takes a form control's colours instead; a theme restyling .form-control restates these. */
.ts-control,
.ts-control input,
.ts-dropdown {
    color: var(--bs-body-color);
}
.ts-control {
    background-color: var(--bs-body-bg);
}
.ts-dropdown .create,
.ts-dropdown .optgroup-header {
    color: var(--bs-secondary-color);
}
.ts-wrapper.multi .ts-control > div {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.ts-wrapper.multi .ts-control > div.active {
    background: var(--bs-primary);
    color: #fff;
}

/* The tenant picker's box (tenant-picker.js): wide enough for a tenant's name, and its list
   wider again, since it also shows each tenant's id. */
.ts-wrapper.aib-tenant-picker {
    min-width: 16rem;
}
.ts-wrapper.aib-tenant-picker .ts-dropdown {
    min-width: 22rem;
}

/* The properties panel's class box (class-field.js). A class that does not fit is kept and
   marked, never removed; its list is wider than the panel, since each class carries its
   description. */
.aut-class-field .ts-control .item.aut-class-warn,
.aut-class-field .ts-control .aut-class-warn {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border-color: var(--bs-warning-border-subtle);
}
.aut-class-dropdown {
    min-width: 22rem;
}
.aut-class-dropdown .ts-dropdown-content {
    max-height: 22rem;
}
.aut-class-option .aut-class-name {
    font-family: var(--bs-font-monospace);
    color: var(--bs-body-color);
}
.aut-class-option.active .aut-class-name {
    color: inherit;
}
.aut-class-option .aut-class-desc {
    font-size: .8em;
    color: var(--bs-secondary-color);
}
.aut-class-option .badge {
    font-weight: normal;
}
.aut-class-notes {
    color: var(--bs-warning-text-emphasis);
}

/* The Tenant Admin Classes tab (class-standards-admin.js): a state select wide enough for its
   longest word beside the arrow. */
#classStandards select[data-class] {
    min-width: 8.5rem;
}

/* The Data attributes section (data-field.js): a name or value that does not fit is kept and
   marked, never removed. */
.aut-data-attributes .aut-data-warn,
.aut-data-attributes .aut-data-note {
    color: var(--bs-warning-text-emphasis);
}

/* TUI Pagination, under every TUI Grid, in the theme's colours. Its own stylesheet hard-codes
   #333 numbers on white and draws the arrows from a PNG sprite, so in dark mode the page
   numbers vanish and the arrows stay light. The pages link that stylesheet after this one,
   so every rule here starts with body to outrank its equal selectors. The arrows and the
   ellipsis are Bootstrap Icons glyphs, which take the text colour. */
body .tui-pagination .tui-page-btn {
    color: var(--bs-link-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
body .tui-pagination .tui-page-btn:hover {
    color: var(--bs-link-hover-color);
    background-color: var(--bs-tertiary-bg);
}
body .tui-pagination .tui-is-selected,
body .tui-pagination .tui-is-selected:hover,
body .tui-pagination strong {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
body .tui-pagination .tui-first-child,
body .tui-pagination .tui-prev-is-ellip {
    border-left-color: var(--bs-border-color);
}
body .tui-pagination .tui-last-child,
body .tui-pagination .tui-next-is-ellip {
    border-right-color: var(--bs-border-color);
}
body .tui-pagination .tui-first-child.tui-is-selected { border-left-color: var(--bs-primary); }
body .tui-pagination .tui-last-child.tui-is-selected { border-right-color: var(--bs-primary); }
body .tui-pagination .tui-is-disabled,
body .tui-pagination .tui-is-disabled:hover {
    color: var(--bs-tertiary-color);
    background-color: var(--bs-body-bg);
}
body .tui-pagination .tui-ico-first,
body .tui-pagination .tui-ico-prev,
body .tui-pagination .tui-ico-next,
body .tui-pagination .tui-ico-last,
body .tui-pagination .tui-ico-ellip {
    width: auto;
    height: auto;
    margin-top: 0;
    vertical-align: middle;
    background: none;
    font-size: 0;     /* each holds its name as text ("first", "prev"), which stays hidden */
    line-height: 1;
}
body .tui-pagination [class^="tui-ico-"]::before {
    font-size: 14px;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
body .tui-pagination .tui-ico-first::before { content: "\f27f"; }
body .tui-pagination .tui-ico-prev::before { content: "\f284"; }
body .tui-pagination .tui-ico-next::before { content: "\f285"; }
body .tui-pagination .tui-ico-last::before { content: "\f280"; }
body .tui-pagination .tui-ico-ellip::before { content: "\f5d4"; }
body .tui-pagination .tui-prev-is-ellip,
body .tui-pagination .tui-next-is-ellip { line-height: 26px; }

/* Home page Quick Links (app:quick-links): the pin shows strongest on hover or when pinned,
   and the More links chevron turns when the list is open. */
.aib-pin { opacity: .45; }
.aib-pin[aria-pressed="true"], .aib-pin:hover, .aib-pin:focus-visible { opacity: 1; }
.aib-more-chevron { transition: transform .2s; }
[data-aib-more] > button:not(.collapsed) .aib-more-chevron { transform: rotate(180deg); }

/* Show Answer on the item page (show-answer.js): a note after each interaction, and the correct
   choices outlined. A hotspot is an SVG shape, which takes a stroke rather than an outline. */
.aib-correct-answer {
    display: block;
    margin: .5rem 0;
    padding: .25rem .5rem;
    border-left: 3px solid var(--bs-success);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    font-size: .875rem;
}
span.aib-correct-answer {
    display: inline;
    margin: 0 .25rem;
    border-radius: var(--bs-border-radius-sm);
}
.aib-correct-choice:not(svg *) {
    outline: 2px solid var(--bs-success);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius-sm);
}
svg .aib-correct-choice,
.qti-selections-dark svg .aib-correct-choice {
    stroke: var(--bs-success);
    stroke-width: 3;
}

/* Help icons (app:help-link, help.js): a small link into the learning library, beside a
   heading or a control. Muted until hovered, so a screen with several stays quiet. */
.aib-help-link {
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    color: var(--bs-secondary-color);
    font-size: .9rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}
.aib-help-link:hover, .aib-help-link:focus-visible { color: var(--bs-link-hover-color); }
h1 .aib-help-link, h2 .aib-help-link, h3 .aib-help-link { font-size: 1rem; }

/* The learning library (learn/, built by tools/learn.mjs): a sidebar and an article kept to a
   readable measure. */
.aib-learn-article { max-width: 52rem; }
.aib-learn-article h2 { margin-top: 2rem; font-size: 1.5rem; }
.aib-learn-article h3 { margin-top: 1.5rem; font-size: 1.2rem; }
.aib-learn-article h2, .aib-learn-article h3 { scroll-margin-top: 5rem; }
.aib-learn-article :target { animation: aib-learn-target 2s ease-out; }
@keyframes aib-learn-target { from { background: var(--bs-warning-bg-subtle); } to { background: transparent; } }
.aib-learn-article kbd { font-size: .8em; }
.aib-learn-article img { max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.aib-learn-table { width: auto; }
.aib-learn-callout p:last-child { margin-bottom: 0; }
.aib-learn-related { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.aib-learn-related h2 { margin-top: 0; font-size: 1.1rem; }
.aib-learn-nav { font-size: .9rem; }
.aib-learn-nav-heading {
    margin: 1rem 0 .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.aib-learn-nav .nav-link { padding: .2rem .5rem; border-radius: var(--bs-border-radius-sm); }
.aib-learn-nav .nav-link.active { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); font-weight: 600; }
@media (min-width: 992px) {
    .aib-learn-nav > :first-child { margin-top: 0; }
    .aib-learn-nav { position: sticky; top: 5rem; align-self: flex-start; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
/* A sample item on a learning library page (app:learn-sample). The item keeps its own sizes:
   a hotspot's or graphic gap match's overlay is measured against its image's width and height,
   so the article's image rule must not rescale or border it. */
.aib-learn-sample { margin: 1rem 0 1.5rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.aib-learn-sample-caption { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; padding: .5rem .75rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.aib-learn-sample-item { padding: 1rem; overflow-x: auto; }
.aib-learn-article .aib-learn-sample-item img { max-width: none; border: 0; border-radius: 0; }

/* The landing page: index.html signed out. Built from Bootstrap's theme variables only, so each of
   the five themes colours it, and stacked at phone width. */
.aib-landing { padding-bottom: 2rem; }
.aib-landing-hero {
    margin: 1.5rem 0 1rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--bs-border-radius-xl);
    background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-tertiary-bg));
    border: 1px solid var(--bs-primary-border-subtle);
}
.aib-landing-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; color: var(--bs-primary-text-emphasis); margin-bottom: .5rem; }
.aib-landing-title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 700; line-height: 1.15; color: var(--bs-emphasis-color); }
.aib-landing-kinds {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
}
.aib-landing-kinds li {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem; font-size: .9rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
.aib-landing-kinds .bi { color: var(--bs-primary); font-size: 1.1rem; }
.aib-landing-section { margin-top: 3rem; }
.aib-landing-heading { font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem; }
.aib-landing-intro { color: var(--bs-secondary-color); max-width: 46rem; margin-bottom: 1.25rem; }
.aib-landing-feature { transition: border-color .15s, box-shadow .15s; }
.aib-landing-feature:hover, .aib-landing-feature:focus-within { border-color: var(--bs-primary-border-subtle); box-shadow: var(--bs-box-shadow-sm); }
.aib-landing-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; font-size: 1.25rem;
    border-radius: 50%; color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle);
}
.aib-landing-steps { padding-left: 0; }
.aib-landing-step { padding: 1.25rem; border-radius: var(--bs-border-radius-lg); background: var(--bs-tertiary-bg); }
.aib-landing-step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-bottom: .5rem; font-weight: 700;
    border-radius: 50%; color: var(--bs-body-bg); background: var(--bs-primary);
}
.aib-landing-aside { padding: 1.25rem 1.5rem; border-left: .25rem solid var(--bs-primary); background: var(--bs-tertiary-bg); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
.aib-landing-link-card { text-decoration: none; color: inherit; transition: border-color .15s; }
.aib-landing-link-card:hover, .aib-landing-link-card:focus { border-color: var(--bs-primary); color: inherit; }
.aib-landing-link-card h3 { color: var(--bs-link-color); }
.aib-landing-cta { margin-top: 3rem; padding: 2rem 1rem; text-align: center; border-top: 1px solid var(--bs-border-color); }
.aib-landing .aib-learn-sample { margin-top: 0; }
.aib-landing-mcp { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--bs-border-radius-xl); background: var(--bs-tertiary-bg); }
.aib-landing-checks { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.aib-landing-checks li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }
.aib-landing-checks li::before { content: "\f272"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: var(--bs-success); }
.aib-landing-chat { padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); box-shadow: var(--bs-box-shadow-sm); }
.aib-landing-chat-ask, .aib-landing-chat-answer { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem; border-radius: var(--bs-border-radius); }
.aib-landing-chat-ask { background: var(--bs-secondary-bg); }
.aib-landing-chat-answer { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.aib-landing-chat-ask .bi, .aib-landing-chat-answer .bi { font-size: 1.2rem; line-height: 1.4; }
.aib-landing-chat-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; padding-left: 2.4rem; }
.aib-landing-chat-steps span { font-family: var(--bs-font-monospace); font-size: .78rem; padding: .2rem .5rem; border-radius: 1rem; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
@media (max-width: 575.98px) {
    .aib-landing-kinds { grid-template-columns: minmax(0, 1fr); }
    .aib-landing-hero .btn-lg { width: 100%; }
}