@pie-element/mc-populated-blank 0.3.0-next.26 → 0.3.0-next.28

package/README.md

@@ -46,6 +46,36 @@ Notes:
 - `correctChoiceId` should always map from Learnosity `valid_response.name` to canonical `distractor_n`.
 - Layout defaults are tuned from original CQT visual baselines, but they are not fixed: override through `model.layoutLimits` when host/theme requirements differ.
 
+## Layouts
+
+`layoutProfile` selects the arrangement and lands on the root as `layout-<layoutProfile>`; the variant sheet for `customType` tunes sizes on top of it (see [Bundled CQT variant CSS](#bundled-cqt-variant-css)). `choiceLayout` sets the choice direction; unset, choices are horizontal when the template is only `{{blank}}` or `interactionMode` is `audio_mc_only`, and vertical otherwise. `audio_blank_only`, `stimulus_image_blank` and `token_sequence` replace the native audio controls with the listen button; `useFeatureButtonAudio` overrides that either way.
+
+| `layoutProfile` | Arrangement | `customType` in the samples |
+| --- | --- | --- |
+| unset | block flow in DOM order | — |
+| `inline_sentence` | block flow; a two-column grid when `hasAudio` | `sr-vic`, `sel_vic` |
+| `audio_blank_only` | centred block flow around a large blank | `sel_r1-_plusggg`, `sel_r1-_gplusggg` |
+| `token_sequence` | grid: listen row, then a row of token boxes | `sel_r1-g_plusggg`, `sel_r1-gg_plusggg`, `sel_r1-_ggplusggg` |
+| `stimulus_image_blank` | grid: stimulus, blank and listen button in one row | `sel_r1-s3_plusggg` |
+
+The figures are wireframes: colour marks a region, a dashed region renders only when its content is present, and a labelled size is what renders without a `layoutLimits` override.
+
+![Default block flow: header, audio, sentence, template and choices stacked in DOM order](docs/layouts/layout-default-flow.png)
+
+![inline_sentence with audio: the template and the listen button share a grid row above the choices](docs/layouts/layout-inline-sentence-audio.png)
+
+![audio_blank_only: listen button at the end of its row, a centred 10rem blank, then a centred row of choice tiles](docs/layouts/layout-audio-blank-only.png)
+
+![token_sequence: listen button on its own row, a centred row of 150px token boxes including the blank, then choice tiles](docs/layouts/layout-token-sequence.png)
+
+![stimulus_image_blank with the sel_r1-s3 sheet: stimulus, blank and listen button in one row above centred choice tiles](docs/layouts/layout-stimulus-image-blank.png)
+
+![audio_mc_only: header, audio and horizontal choices, with no template line](docs/layouts/layout-audio-mc-only.png)
+
+![Choice rows: the inline row used by vertical choices and the tile used by horizontal choices, with their evaluate states](docs/layouts/choice-rows.png)
+
+![Below 760px: the listen button moves to the start and the choice tiles stack in a column](docs/layouts/layout-narrow.png)
+
 ## Authoring model
 
 - **`prompt`** (optional) and **`promptEnabled`**
@@ -125,7 +155,7 @@ Delivery now exposes stable `pie-*` classes so hosts can theme this element with
 
 - Root/container: `pie-element`, `pie-element-mc-populated-blank`, `pie-delivery-root`
 - Header, holding teacher instructions, the prompt and the show-correct-answer toggle ahead of the stem: `pie-header`
-- Prompt/audio/template: `pie-prompt`, `pie-audio-container`, `pie-audio-player`, `pie-audio-transcript`, `pie-template-line`, `pie-sentence-line`
+- Prompt/audio/template: `pie-prompt`, `pie-audio-container`, `pie-audio-player`, `pie-template-line`, `pie-sentence-line`
 - Blank display: `pie-blank-slot`, `pie-blank-slot-standalone`, `pie-blank-value`, `pie-blank-image`
 - Choice group: `pie-choices-fieldset`, `pie-choices-legend`, `pie-choices`
 - Choice rows/items: `pie-choice`, `pie-choice-horizontal`, `pie-choice-selected`, `pie-choice-label`, `pie-choice-image`

package/dist/browser/{McPopulatedBlank-Cyqq7Q60.js → McPopulatedBlank-yvmy2-rw.js}

@@ -2157,7 +2157,7 @@ function It(e) {
 }
 //#endregion
 //#region src/delivery/cqt-css/sel-r1-base.css?raw
-var Lt = "/* Shared base styles for all sel_r1-*_plusggg variants.\n   Applied via the data-mpb-variant=\"sel-r1-base\" style element.\n   Every selector starts at .mc-populated-blank-root carrying any r1 variant class,\n   so it cannot match outside this element. :where() keeps the attribute match out\n   of the specificity, so each per-variant file still overrides a base rule with\n   the selector shapes it already uses.\n   Source: web-ItemBankViewer/learnosity/templates/Renaissance/r1.scss */\n\n/* r1.scss: Starial font throughout.\n   font-size 14px mirrors the Learnosity host root (.lrn_widget) which sets the\n   base for all em-scaled rules in r1.scss (e.g. .rli-r1-content-element { 1.9em })\n   and any em-based author content (e.g. <span style=\"font-size:1.8em\">). Without\n   this base PIE inherits the 16px browser default and renders ~14% larger than\n   the LSY reference. See CONTOOL-2567. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) {\n  font-family: Starial, Arial, sans-serif;\n  font-size: 14px;\n}\n\n/* r1.scss: .rli-r1-audio-transcript { font-family:Roboto; font-size:16px } */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-audio-transcript {\n  font-family: Roboto, Arial, sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size: 1.9em } wraps all stem tokens.\n   Makes inline font-size spans in the template multiply on top of this base. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n  font-size: 1.9em;\n}\n\n/* r1.scss: .rli-r1-stem { display:flex; flex-direction:row; justify-content:center }\n   r1.scss: .rli-r1-content-element { margin-right:2px; margin-left:2px } — 4px total gap.\n   Apply the per-element margin to both classless tokens and the blank slot\n   (which is the cloze equivalent) so the gap stacks with whitespace text-nodes\n   between flex items the same way LSY does. Earlier this used column-gap:4px,\n   but flex column-gap accumulates with the cloze margin and the implicit\n   whitespace, producing a wider gap than LSY shows. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  justify-content: center;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line p {\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px; min-height:150px;\n   line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token\n   (blank slot and adjacent inline spans) in LSY, giving each a 150px box with a\n   2px per-side margin. Applies to the token layouts, the same set that gets the\n   feature button and the wide underline, so trailing tokens in audio_blank_only\n   (gplusggg) match the blank's height the way LSY does. Stems on other layouts are\n   prose, which the box would stack a word or two per line. */\n.mc-populated-blank-root:where(\n    [class*=\"variant-sel-r1-\"]:is(\n      .layout-audio_blank_only,\n      .layout-stimulus_image_blank,\n      .layout-token_sequence\n    )\n  )\n  .pie-template-line\n  span:not([class]) {\n  min-width: 150px;\n  max-width: 150px;\n  min-height: 150px;\n  line-height: 89px;\n  margin-left: 2px;\n  margin-right: 2px;\n}\n\n/* .pie-template-line's align-items:baseline (above) computes a shared baseline\n   across all its flex items. .pie-blank-slot has no baseline-participating child\n   of its own (.cloze-marker centers internally, align-items:center) — so it\n   contributes a *synthesized* baseline back to the row, based on its own box\n   geometry. That geometry swings wildly depending on the blank's content: an\n   empty placeholder vs. a selected choice's image (up to 150x150). Every time a\n   choice is selected the row's shared baseline is recomputed from that new\n   geometry, visibly shifting sibling tokens like a leading/trailing stem word.\n   align-self removes the blank from that shared computation entirely — its\n   siblings' position no longer depends on what's currently displayed inside it.\n   See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n  align-self: flex-end;\n}\n\n/* In token_sequence layouts the blank itself is also a content-element box (no\n   surrounding .rli-r1-cloze container at 160px). audio_blank_only / stimulus_image_blank\n   keep their own 160px min-height set on the blank slot in McPopulatedBlank.svelte to\n   mirror LSY's .rli-r1-cloze height. The 2px per-side margin matches LSY's\n   .rli-r1-content-element pattern.\n   .pie-blank-slot is box-sizing:border-box (McPopulatedBlank.svelte sets it for\n   the whole element) with a permanent 6px border-bottom (the underline) —\n   min-height:150px therefore only leaves 144px for content,\n   so an empty blank (content ~0px, clamped to the 150px floor) and a blank\n   showing a 150px choice image (150 + 6 border = 156px, exceeding the floor)\n   render at two different total heights. Since .pie-blank-slot is bottom-anchored\n   in its row (align-self:flex-end above), that 6px height difference shows up as\n   a visible shift of the blank/image every time a choice is selected or cleared.\n   min-height:156px keeps the total box height constant regardless of content, so\n   the 150px is fully available to the image/text and the border no longer\n   competes with it. See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-token_sequence\n  .pie-template-line\n  .pie-blank-slot {\n  min-width: 150px;\n  max-width: 150px;\n  min-height: 156px;\n  line-height: 89px;\n  margin-left: 2px;\n  margin-right: 2px;\n}\n\n/* audio_blank_only / stimulus_image_blank keep the 160px wide blank slot, but\n   still need the 2px per-side margin so the gap to the trailing token mirrors\n   LSY's .rli-r1-content-element rhythm. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-audio_blank_only\n  .pie-template-line\n  .pie-blank-slot,\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n  .pie-template-line\n  .pie-blank-slot {\n  margin-left: 2px;\n  margin-right: 2px;\n}\n\n/* The `.pie-template-line span:not([class])` rule above has no depth limit, so it\n   also matches the unclassed answer <span> ClozeMarker.svelte renders inside\n   .pie-blank-value once a choice is selected (e.g. author font-size overrides like\n   <span style=\"font-size:3em\">). For token_sequence that coincides with the blank\n   slot's own 150px/89px box above, so outer and inner agree. audio_blank_only /\n   stimulus_image_blank instead keep .pie-blank-slot at LSY's separate, taller\n   .rli-r1-cloze box (160px) — forcing the answer span into the stem token's\n   150px/89px box there is wrong: a plain (non-flex) span whose min-height exceeds\n   its line-height renders that line top-anchored, pinning the answer text to the\n   top of the blank with the rest of the box empty beneath it, instead of centered\n   on the underline the way LSY renders it. See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-audio_blank_only\n  .pie-blank-value\n  span:not([class]),\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n  .pie-blank-value\n  span:not([class]) {\n  min-width: 0;\n  max-width: none;\n  min-height: 0;\n  line-height: normal;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size:1.9em; line-height:89px } on distractors */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label {\n  font-size: 1.9em;\n  line-height: 89px;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px;\n   min-height:150px } wraps every image (stem token + distractor) and forces\n   the content box to 150×150. LSY's host also rewrites <img width/height>\n   to 150 server-side. PIE keeps the authored attributes (typically 108×108),\n   so without an explicit override images render ~28% smaller than LSY.\n   See CONTOOL-2570. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line img,\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label img {\n  width: 150px;\n  height: 150px;\n}\n", Rt = {
+var Lt = "/* Shared base styles for all sel_r1-*_plusggg variants.\n   Applied via the data-mpb-variant=\"sel-r1-base\" style element.\n   Every selector starts at .mc-populated-blank-root carrying any r1 variant class,\n   so it cannot match outside this element. :where() keeps the attribute match out\n   of the specificity, so each per-variant file still overrides a base rule with\n   the selector shapes it already uses.\n   Source: web-ItemBankViewer/learnosity/templates/Renaissance/r1.scss */\n\n/* r1.scss: Starial font throughout.\n   font-size 14px mirrors the Learnosity host root (.lrn_widget) which sets the\n   base for all em-scaled rules in r1.scss (e.g. .rli-r1-content-element { 1.9em })\n   and any em-based author content (e.g. <span style=\"font-size:1.8em\">). Without\n   this base PIE inherits the 16px browser default and renders ~14% larger than\n   the LSY reference. See CONTOOL-2567. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) {\n  font-family: Starial, Arial, sans-serif;\n  font-size: 14px;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size: 1.9em } wraps all stem tokens.\n   Makes inline font-size spans in the template multiply on top of this base. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n  font-size: 1.9em;\n}\n\n/* r1.scss: .rli-r1-stem { display:flex; flex-direction:row; justify-content:center }\n   r1.scss: .rli-r1-content-element { margin-right:2px; margin-left:2px } — 4px total gap.\n   Apply the per-element margin to both classless tokens and the blank slot\n   (which is the cloze equivalent) so the gap stacks with whitespace text-nodes\n   between flex items the same way LSY does. Earlier this used column-gap:4px,\n   but flex column-gap accumulates with the cloze margin and the implicit\n   whitespace, producing a wider gap than LSY shows. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  justify-content: center;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line p {\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px; min-height:150px;\n   line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token in\n   LSY, giving each a 150px box with a 2px per-side margin. Applies to the token\n   layouts, the same set that gets the feature button and the wide underline, so\n   trailing tokens in audio_blank_only (gplusggg) match the blank's height the way\n   LSY does. Stems on other layouts are prose, which the box would stack a word or\n   two per line. Spans inside the blank are the answer's own markup, not stem tokens.\n   The margin outranks token_sequence's span + span gap, so tokens sit LSY's 4px\n   apart (CONTOOL-2569). */\n.mc-populated-blank-root:where(\n    [class*=\"variant-sel-r1-\"]:is(\n      .layout-audio_blank_only,\n      .layout-stimulus_image_blank,\n      .layout-token_sequence\n    )\n  )\n  .pie-template-line\n  span:not([class]):not(.pie-blank-slot *) {\n  min-width: 150px;\n  max-width: 150px;\n  min-height: 150px;\n  line-height: 89px;\n  margin-left: 2px;\n  margin-right: 2px;\n}\n\n/* r1.scss: the content-element's wrapping flex line packs to the bottom of its box\n   (align-content:flex-end), so a token's 89px line sits on the box's bottom edge\n   whatever its font size; .rli-r1-stem { align-items:start } top-aligns the row.\n   Every item in it has a fixed height (150px tokens and images, the 160px cloze),\n   so the underline lands 4px under the tokens' bottom edge. */\n.mc-populated-blank-root:where(\n    [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n  )\n  .pie-template-line\n  span:not([class]):not(.pie-blank-slot *) {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: baseline;\n  align-content: flex-end;\n  justify-content: center;\n  margin-bottom: 8px;\n}\n\n.mc-populated-blank-root:where(\n    [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n  )\n  .pie-template-line,\n.mc-populated-blank-root:where(\n    [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n  )\n  .pie-template-line\n  p {\n  align-items: flex-start;\n}\n\n/* .pie-template-line's align-items:baseline (above) computes a shared baseline\n   across all its flex items. .pie-blank-slot has no baseline-participating child\n   of its own (.cloze-marker centers internally, align-items:center) — so it\n   contributes a *synthesized* baseline back to the row, based on its own box\n   geometry. That geometry swings wildly depending on the blank's content: an\n   empty placeholder vs. a selected choice's image (up to 150x150). Every time a\n   choice is selected the row's shared baseline is recomputed from that new\n   geometry, visibly shifting sibling tokens like a leading/trailing stem word.\n   align-self removes the blank from that shared computation entirely — its\n   siblings' position no longer depends on what's currently displayed inside it.\n   See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n  align-self: flex-end;\n}\n\n/* r1.scss's .rli-r1-cloze and question.css's .rli-s3-cloze have no inline padding, so the\n   150px content-element spans the blank. ClozeMarker.svelte's 0.5rem would narrow an\n   answer image to 134px or 144px. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n  padding-inline: 0;\n}\n\n/* r1.scss: .rli-r1-cloze { height:160px; padding-bottom:4px; border-bottom:6px solid }\n   — the blank in the token layouts is LSY's cloze box, top-aligned with the stem\n   tokens (align-self overrides the flex-end above). A fixed height rather than a\n   min-height keeps the empty and the filled blank at one geometry: the 150px image\n   or content box below fits its 150px content area exactly, and the underline\n   never moves on selection (CONTOOL-3159). .pie-blank-slot is border-box, as LSY's\n   cloze is. McPopulatedBlank.svelte gives audio_blank_only the padding and the\n   6px underline; token_sequence takes both here. The 2px per-side margin matches\n   LSY's .rli-r1-content-element rhythm (CONTOOL-2569). */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n    .layout-audio_blank_only,\n    .layout-token_sequence\n  )\n  .pie-template-line\n  .pie-blank-slot {\n  align-self: flex-start;\n  height: 160px;\n  padding-bottom: 4px;\n  margin-left: 2px;\n  margin-right: 2px;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-token_sequence\n  .pie-template-line\n  .pie-blank-slot {\n  min-width: 150px;\n  max-width: 150px;\n  line-height: 89px;\n}\n\n/* stimulus_image_blank keeps the 160px min-height blank slot McPopulatedBlank.svelte\n   sets, with the same 2px per-side margin. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n  .pie-template-line\n  .pie-blank-slot {\n  margin-left: 2px;\n  margin-right: 2px;\n}\n\n/* cloze.js: the cloze holds an .rli-r1-content-element around the answer's markup,\n   so the answer's line packs to the bottom of a 150px box the way a stem token's\n   does. The box's 8px bottom margin, centred in the cloze's 150px content area,\n   lifts it 4px, as it does in LSY. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n  .layout-audio_blank_only,\n  .layout-token_sequence\n) .pie-blank-value {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: baseline;\n  align-content: flex-end;\n  justify-content: center;\n  min-height: 150px;\n  line-height: 89px;\n  margin-bottom: 8px;\n}\n\n/* An imageUrl answer is .pie-blank-image directly in the blank, with no\n   .pie-blank-value around it; the same margin puts it where a labelHtml image sits. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n  .layout-audio_blank_only,\n  .layout-token_sequence\n) .pie-blank-image {\n  margin-bottom: 8px;\n}\n\n/* Classless answer spans in the s3 blank keep line-height:normal, which outranks\n   sel-r1-s3.css's 1.1. See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n  .pie-blank-value\n  span:not([class]) {\n  line-height: normal;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size:1.9em; line-height:89px } on distractors */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label {\n  font-size: 1.9em;\n  line-height: 89px;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px;\n   min-height:150px } wraps every image (stem token + distractor) and forces\n   the content box to 150×150. LSY's host also rewrites <img width/height>\n   to 150 server-side. PIE keeps the authored attributes (typically 108×108),\n   so without an explicit override images render ~28% smaller than LSY.\n   See CONTOOL-2570. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line img,\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label img {\n  width: 150px;\n  height: 150px;\n}\n\n/* r1.scss: .rli-r1-stem and .rli-r1-distractors are flex-direction:column and become\n   rows only in its @media (min-width:850px), so below it every stem token, the cloze\n   and each distractor stack at the left edge (.rli-r1-stem { align-items:start }).\n   Each token's 8px bottom margin spaces the stack. */\n@media not all and (min-width: 850px) {\n  .mc-populated-blank-root:where(\n      [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n    )\n    .pie-template-line,\n  .mc-populated-blank-root:where(\n      [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n    )\n    .pie-template-line\n    p {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choices.choices-horizontal {\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    --mpb-choice-width-vw: 100vw;\n  }\n}\n", Rt = {
 	"sel_r1-_plusggg": {
 		variantId: "sel-r1-plusggg",
 		variantClass: "variant-sel-r1-plusggg",
@@ -2168,25 +2168,25 @@ var Lt = "/* Shared base styles for all sel_r1-*_plusggg variants.\n   Applied v
 		variantId: "sr-vic",
 		variantClass: "variant-sr-vic",
 		sourceUrl: "https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css",
-		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css */\n/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/vic.scss */\n.mc-populated-blank-root.variant-sr-vic {\n  font-family: Starial, Arial, sans-serif;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-template-line,\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n  line-height: 123%;\n}\n\n/* vic.scss: .rli-vic-answer uses display:flex so sentence and cloze stay on\n   one line. The template HTML wraps text in <p>, which is block by default and\n   breaks to a new line. Making <p> inline keeps the sentence and blank inline. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line p {\n  display: inline;\n  margin: 0;\n}\n\n/* LSY .rli-vic-answer has no text-align rule and inherits start; PIE's\n   inline_sentence layout sets text-align:center on .template-line via a\n   Svelte-scoped selector with specificity (0,4,0), so we need to match or\n   exceed that. Pin sr-vic back to start so wrapped lines stay left-aligned.\n   Same root cause as sel-vic. See CONTOOL-2573. */\n.mc-populated-blank-root.variant-sr-vic.layout-inline_sentence .pie-template-line.template-line {\n  text-align: start;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n   The red holds AA only on LSY's white page (5.1:1), so the answer carries that\n   surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n   colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value {\n  color: #cc3333;\n  background-color: #fff;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } applied to the\n   whole distractor row (radio + label), not just the label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected {\n  background-color: #fcfcd3;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n  text-align: left;\n  justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } applied to\n   the full row element, not only the inner label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal):hover {\n  background-color: #f2f2f2;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic\n  .pie-choice:not(.pie-choice-horizontal):hover\n  .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n/* Selected state must win over hover — yellow persists when hovering a chosen row. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n  background-color: #fcfcd3;\n  color: #000;\n}\n"
+		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css */\n/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/vic.scss */\n.mc-populated-blank-root.variant-sr-vic {\n  font-family: Starial, Arial, sans-serif;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-template-line,\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n  line-height: 123%;\n}\n\n/* vic.scss: .rli-vic-answer uses display:flex so sentence and cloze stay on\n   one line. The template HTML wraps text in <p>, which is block by default and\n   breaks to a new line. Making <p> inline keeps the sentence and blank inline. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line p {\n  display: inline;\n  margin: 0;\n}\n\n/* LSY .rli-vic-answer has no text-align rule and inherits start; PIE's\n   inline_sentence layout sets text-align:center on .template-line via a\n   Svelte-scoped selector with specificity (0,4,0), so we need to match or\n   exceed that. Pin sr-vic back to start so wrapped lines stay left-aligned.\n   Same root cause as sel-vic. See CONTOOL-2573. */\n.mc-populated-blank-root.variant-sr-vic.layout-inline_sentence .pie-template-line.template-line {\n  text-align: start;\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left:6px; margin-right:6px }, with no inline\n   padding, where ClozeMarker.svelte gives the blank 0.5rem. See CONTOOL-2572. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line .pie-blank-slot {\n  margin-left: 6px;\n  margin-right: 6px;\n  padding-inline: 0;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n   The red holds AA only on LSY's white page (5.1:1), so the answer carries that\n   surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n   colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value {\n  color: #cc3333;\n  background-color: #fff;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } applied to the\n   whole distractor row (radio + label), not just the label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected {\n  background-color: #fcfcd3;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n  text-align: left;\n  justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and\n   .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and\n   from its label, centred on the label, and its margins set the row pitch: the rows and\n   the radio and label have no gap between them. */\n.mc-populated-blank-root.variant-sr-vic .pie-choices.choices-vertical {\n  --mpb-choice-group-gap: 0;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal) {\n  --mpb-choice-row-gap: 0;\n  align-items: center;\n  margin-right: 10px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice-radio-inline {\n  margin: 20px;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } applied to\n   the full row element, not only the inner label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal):hover {\n  background-color: #f2f2f2;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic\n  .pie-choice:not(.pie-choice-horizontal):hover\n  .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n/* Selected state must win over hover — yellow persists when hovering a chosen row. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n  background-color: #fcfcd3;\n  color: #000;\n}\n"
 	},
 	sel_vic: {
 		variantId: "sel-vic",
 		variantClass: "variant-sel-vic",
 		sourceUrl: "https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css",
-		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css */\n/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/sel_vic/scss/main.scss + vic.scss */\n.mc-populated-blank-root.variant-sel-vic {\n  font-family: Starial, Arial, sans-serif;\n  /* LSY chain: .lrn_widget (14px host) → .sel-vic { 1.5em } = 21px.\n     PIE collapses both LSY layers into this single variant-root selector, so\n     the resolved value is set directly. See CONTOOL-2567. */\n  font-size: 21px;\n  max-width: 800px;\n  margin-inline: auto;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {\n  font-family: Roboto, Arial, sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-template-line,\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n  line-height: 123%;\n}\n\n/* sel_vic/main.scss: template left ~75%, audio right ~25% on the same row.\n   Svelte scoping prevents the component-internal grid-area rule from reaching\n   .audio-container inside AudioPlayer, so we override it here via the global\n   .pie-audio-container class which is not subject to scope hashing. */\n.mc-populated-blank-root.variant-sel-vic .pie-audio-container {\n  grid-area: audio;\n  margin: 0;\n  justify-self: end;\n  align-self: start;\n  min-height: 128px;\n}\n\n/* vic.scss: sentence and cloze sit inline — the <p> wrapper must not break to\n   a new line before the blank slot. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line p {\n  display: inline;\n  margin: 0;\n}\n\n/* LSY .rli-vic-answer has no text-align rule and inherits start; PIE's\n   inline_sentence layout sets text-align:center on .template-line via a\n   Svelte-scoped selector with specificity (0,4,0), so we need to match or\n   exceed that. Pin sel-vic back to start so wrapped lines stay left-aligned.\n   See CONTOOL-2573. */\n.mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n  text-align: start;\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left: 6px; margin-right: 6px } gives the\n   cloze breathing room from adjacent text or punctuation. The shared blank slot\n   has no inline margin, so set it here so the cloze→trailing-punctuation gap\n   matches LSY. See CONTOOL-2572. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line .pie-blank-slot {\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n   The red holds AA only on LSY's white page (5.1:1), so the answer carries that\n   surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n   colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value {\n  color: #cc3333;\n  background-color: #fff;\n}\n\n/* sel_vic/main.scss: .sel-vic { max-width: 800px } — the fieldset/choices must\n   also be constrained so rows don't span beyond 800px. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices-fieldset {\n  max-width: 800px;\n  width: 100%;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n  text-align: left;\n  justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected {\n  background-color: #fcfcd3;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n/* Selected state must win over hover. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n  background-color: #fcfcd3;\n  color: #000;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal):hover {\n  background-color: #f2f2f2;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic\n  .pie-choice:not(.pie-choice-horizontal):hover\n  .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n@media (min-width: 620px) {\n  .mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {\n    min-width: 620px;\n    max-width: 800px;\n    transform: translateX(-55px);\n  }\n}\n"
+		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css */\n/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/sel_vic/scss/main.scss + vic.scss */\n.mc-populated-blank-root.variant-sel-vic {\n  font-family: Starial, Arial, sans-serif;\n  /* LSY chain: .lrn_widget (14px host) → .sel-vic { 1.5em } = 21px.\n     PIE collapses both LSY layers into this single variant-root selector, so\n     the resolved value is set directly. See CONTOOL-2567. */\n  font-size: 21px;\n  max-width: 800px;\n  margin-inline: auto;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-template-line,\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n  line-height: 123%;\n}\n\n/* sel_vic/main.scss: template left ~75%, audio right ~25% on the same row.\n   Svelte scoping prevents the component-internal grid-area rule from reaching\n   .audio-container inside AudioPlayer, so we override it here via the global\n   .pie-audio-container class which is not subject to scope hashing. */\n.mc-populated-blank-root.variant-sel-vic .pie-audio-container {\n  grid-area: audio;\n  margin: 0;\n  justify-self: end;\n  align-self: start;\n  min-height: 128px;\n}\n\n/* vic.scss: sentence and cloze sit inline — the <p> wrapper must not break to\n   a new line before the blank slot. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line p {\n  display: inline;\n  margin: 0;\n}\n\n/* LSY .rli-vic-answer has no text-align rule and inherits start; PIE's\n   inline_sentence layout sets text-align:center on .template-line via a\n   Svelte-scoped selector with specificity (0,4,0), so we need to match or\n   exceed that. Pin sel-vic back to start so wrapped lines stay left-aligned.\n   See CONTOOL-2573.\n   vic.scss: .rli-vic-stimulus { align-items:flex-start } also starts the\n   sentence at the content's left edge, where the same layout centres it in its\n   grid column (justify-self:center). */\n.mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n  text-align: start;\n  justify-self: start;\n}\n\n/* vic.scss: @media (min-width:850px) { .rli-vic-stimulus { margin-left:20px;\n   margin-right:20px } } — the sentence sits 20px in from the distractors. */\n@media (min-width: 850px) {\n  .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n}\n\n/* sel_vic/main.scss: .sel-vic .rli-vic-stimulus { min-height:128px }. From 850px up the\n   listen button beside the sentence gives the row that height; below it the button\n   moves above, and the sentence keeps the 128px on its own. */\n@media not all and (min-width: 850px) {\n  .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n    min-height: 128px;\n  }\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left: 6px; margin-right: 6px } gives the\n   cloze breathing room from adjacent text or punctuation. The shared blank slot\n   has no inline margin, so set it here so the cloze→trailing-punctuation gap\n   matches LSY. See CONTOOL-2572. The cloze has no inline padding either, where\n   ClozeMarker.svelte gives the blank 0.5rem. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line .pie-blank-slot {\n  margin-left: 6px;\n  margin-right: 6px;\n  padding-inline: 0;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n   The red holds AA only on LSY's white page (5.1:1), so the answer carries that\n   surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n   colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value {\n  color: #cc3333;\n  background-color: #fff;\n}\n\n/* sel_vic/main.scss: .sel-vic { max-width: 800px } — the fieldset/choices must\n   also be constrained so rows don't span beyond 800px. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices-fieldset {\n  max-width: 800px;\n  width: 100%;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n  text-align: left;\n  justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and\n   .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and\n   from its label, centred on the label, and its margins set the row pitch: the rows and\n   the radio and label have no gap between them. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices.choices-vertical {\n  --mpb-choice-group-gap: 0;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal) {\n  --mpb-choice-row-gap: 0;\n  align-items: center;\n  margin-right: 10px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice-radio-inline {\n  margin: 20px;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected {\n  background-color: #fcfcd3;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n\n/* Selected state must win over hover. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n  background-color: #fcfcd3;\n  color: #000;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal):hover {\n  background-color: #f2f2f2;\n  color: #000;\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic\n  .pie-choice:not(.pie-choice-horizontal):hover\n  .pie-choice-label-wrap {\n  background-color: transparent;\n  color: inherit;\n}\n"
 	},
 	"sel_r1-_gplusggg": {
 		variantId: "sel-r1-gplusggg",
 		variantClass: "variant-sel-r1-gplusggg",
 		sourceUrl: "https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css",
-		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-gplusggg {\n  max-width: 875px;\n  margin-inline: auto;\n  --mpb-listen-button-size: 128px;\n  --mpb-choice-width-px: 155px;\n  --mpb-choice-tile-min-height: 11.25rem;\n  --mpb-choice-content-min-height: 9.375rem;\n  --mpb-choice-group-gap: 1rem;\n  /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n  --mpb-choice-hover-bg: #f2f2f2;\n  --mpb-choice-hover-color: #000;\n  --mpb-choice-selected-bg: #fcfcd3;\n  --mpb-choice-selected-color: #000;\n}\n\n/* r1.scss: .rli-r1-content-element boxes all have fixed line-height:89px, so every\n   token in the stem row shares a stable baseline regardless of content.  In PIE,\n   the blank slot's baseline shifts when the empty placeholder (short &nbsp;) is\n   replaced by the filled value span (full text height), dragging adjacent tokens\n   down by ~9px.  Switching to align-items:center is safe here because gplusggg has\n   only one row of content (blank + \"four\"), so vertical centering and baseline\n   alignment produce the same visual result.  The :is() wrapper raises specificity\n   above the base [class*=] rule without needing !important. */\n:is(.mc-populated-blank-root.variant-sel-r1-gplusggg) .pie-template-line {\n  align-items: center;\n}\n"
+		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-gplusggg {\n  max-width: 875px;\n  margin-inline: auto;\n  --mpb-listen-button-size: 128px;\n  --mpb-choice-width-px: 155px;\n  --mpb-choice-tile-min-height: 11.25rem;\n  --mpb-choice-content-min-height: 9.375rem;\n  --mpb-choice-group-gap: 1rem;\n  /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n  --mpb-choice-hover-bg: #f2f2f2;\n  --mpb-choice-hover-color: #000;\n  --mpb-choice-selected-bg: #fcfcd3;\n  --mpb-choice-selected-color: #000;\n}\n"
 	},
 	"sel_r1-g_plusggg": {
 		variantId: "sel-r1-g-stem",
 		variantClass: "variant-sel-r1-g-stem",
 		sourceUrl: "https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css",
-		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-g-stem {\n  max-width: 875px;\n  margin-inline: auto;\n  --mpb-listen-button-size: 128px;\n  --mpb-choice-width-px: 155px;\n  --mpb-choice-tile-min-height: 11.25rem;\n  --mpb-choice-content-min-height: 9.375rem;\n  /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n  --mpb-choice-hover-bg: #f2f2f2;\n  --mpb-choice-hover-color: #000;\n  --mpb-choice-selected-bg: #fcfcd3;\n  --mpb-choice-selected-color: #000;\n  /* r1.scss: .rli-r1-cloze { border-bottom: 6px solid } */\n  --mpb-blank-underline-wide-width: 6px;\n}\n\n/* PIE-793: sel-r1-base.css's 156px blank box fits a 150x150 image answer, which image\n   choices (variant-sel-r1-g-stem-graphic) keep. Text answers drop it on every classless\n   span, so the empty and filled blank match height (CONTOOL-3159). */\n.mc-populated-blank-root.variant-sel-r1-g-stem.layout-token_sequence.choice-mode-text\n  .pie-blank-slot\n  span:not([class]) {\n  min-height: 0;\n}\n\n/* The slot shrinks to its content and anchors to the top of the row, so the answer stays\n   level with the stem token and the underline rises to meet it. Any align-self keeps the\n   slot out of the row's shared baseline (see sel-r1-base.css), so the stem token does not\n   move on selection. */\n.mc-populated-blank-root.variant-sel-r1-g-stem.layout-token_sequence.choice-mode-text\n.pie-blank-slot {\n  min-height: 0;\n  align-self: flex-start;\n}\n"
+		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-g-stem {\n  max-width: 875px;\n  margin-inline: auto;\n  --mpb-listen-button-size: 128px;\n  --mpb-choice-width-px: 155px;\n  --mpb-choice-tile-min-height: 11.25rem;\n  --mpb-choice-content-min-height: 9.375rem;\n  /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n  --mpb-choice-hover-bg: #f2f2f2;\n  --mpb-choice-hover-color: #000;\n  --mpb-choice-selected-bg: #fcfcd3;\n  --mpb-choice-selected-color: #000;\n  /* r1.scss: .rli-r1-cloze { border-bottom: 6px solid } */\n  --mpb-blank-underline-wide-width: 6px;\n}\n"
 	},
 	"sel_r1-gg_plusggg": {
 		variantId: "sel-r1-gg-plus",
@@ -2204,7 +2204,7 @@ var Lt = "/* Shared base styles for all sel_r1-*_plusggg variants.\n   Applied v
 		variantId: "sel-r1-s3",
 		variantClass: "variant-sel-r1-s3",
 		sourceUrl: "https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css",
-		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-s3 {\n  max-width: 860px;\n  margin-inline: auto;\n  --mpb-listen-button-size: 128px;\n  --mpb-choice-width-px: 155px;\n  --mpb-choice-tile-min-height: 11.25rem;\n  --mpb-choice-content-min-height: 9.375rem;\n  --mpb-choice-group-gap: 0.35rem;\n  --mpb-choice-row-gap: 0.35rem;\n  --mpb-horizontal-choice-radio-top-margin: 0.25rem;\n  --mpb-stimulus-min-column: 240px;\n  --mpb-stimulus-grid-column-gap: 1.1rem;\n  --mpb-stimulus-choices-margin-top: 0.85rem;\n  --mpb-audio-blank-template-margin-bottom: 0.9rem;\n  --mpb-blank-wide-width: 6.8rem;\n}\n\n/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or\n   cloze content-element, so they inherit 400 from the host root. The earlier\n   font-weight:500 override caused PIE to render visibly heavier than LSY for\n   the same author content. See CONTOOL-2571. */\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {\n  font-size: 1.9em;\n  line-height: 89px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {\n  line-height: 1.1;\n  white-space: nowrap;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n  grid-template-columns: minmax(220px, auto) auto auto;\n  grid-template-areas:\n    \"transcript transcript transcript\"\n    \"sentence template audio\"\n    \"choices choices choices\";\n  justify-content: center;\n  /* question.css: .rli-s3-cloze-container { justify-content:end } bottom-anchors\n     the cloze against the shared sentence/audio row instead of top-aligning it —\n     matches every item sitting on the same visual baseline. See CONTOOL-3159. */\n  align-items: end;\n}\n\n/* The component's header row, restated because these areas replace its own. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n  grid-template-areas:\n    \"header header header\"\n    \"transcript transcript transcript\"\n    \"sentence template audio\"\n    \"choices choices choices\";\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n  grid-area: template;\n  justify-self: center;\n}\n\n/* ClozeMarker.svelte's shared .cloze-marker rule vertically *centers* its content\n   (align-items:center). question.css's .rli-s3-cloze-container uses\n   justify-content:end instead, bottom-anchoring the answer text against the\n   underline. Centering leaves it floating well above both the underline and the\n   sentence image's own (bottom-anchored) baseline. The blank's own box height\n   (160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank\n   rule) is left as-is — it already matches the Learnosity reference (~161px)\n   closely; only the internal alignment was wrong. See CONTOOL-3159. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n  align-items: flex-end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {\n  justify-self: end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {\n  justify-self: start;\n  align-self: start;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n  justify-self: center;\n  width: fit-content;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {\n  max-width: 100%;\n  height: auto;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {\n  background: #e2e2e2;\n  color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,\n.mc-populated-blank-root.variant-sel-r1-s3\n  .pie-choice-horizontal.is-selected:hover\n  .pie-choice-tile {\n  background: #fcfcd3;\n  color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {\n  transform: scale(0.85);\n}\n"
+		cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-s3 {\n  max-width: 860px;\n  margin-inline: auto;\n  --mpb-listen-button-size: 128px;\n  --mpb-choice-width-px: 155px;\n  --mpb-choice-tile-min-height: 11.25rem;\n  --mpb-choice-content-min-height: 9.375rem;\n  --mpb-choice-group-gap: 0.35rem;\n  --mpb-choice-row-gap: 0.35rem;\n  --mpb-horizontal-choice-radio-top-margin: 0.25rem;\n  --mpb-stimulus-min-column: 240px;\n  --mpb-stimulus-grid-column-gap: 1.1rem;\n  --mpb-stimulus-choices-margin-top: 0.85rem;\n  --mpb-audio-blank-template-margin-bottom: 0.9rem;\n  --mpb-blank-wide-width: 6.8rem;\n}\n\n/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or\n   cloze content-element, so they inherit 400 from the host root. The earlier\n   font-weight:500 override caused PIE to render visibly heavier than LSY for\n   the same author content. See CONTOOL-2571. */\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {\n  font-size: 1.9em;\n  line-height: 89px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {\n  line-height: 1.1;\n  white-space: nowrap;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {\n  border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n  grid-template-columns: minmax(220px, auto) auto auto;\n  grid-template-areas:\n    \"sentence template audio\"\n    \"choices choices choices\";\n  justify-content: center;\n  /* question.css: .rli-s3-cloze-container { justify-content:end } bottom-anchors\n     the cloze against the shared sentence/audio row instead of top-aligning it —\n     matches every item sitting on the same visual baseline. See CONTOOL-3159. */\n  align-items: end;\n}\n\n/* The component's header row, restated because these areas replace its own. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n  grid-template-areas:\n    \"header header header\"\n    \"sentence template audio\"\n    \"choices choices choices\";\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n  grid-area: template;\n  justify-self: center;\n}\n\n/* ClozeMarker.svelte's shared .cloze-marker rule vertically *centers* its content\n   (align-items:center). question.css's .rli-s3-cloze-container uses\n   justify-content:end instead, bottom-anchoring the answer text against the\n   underline. Centering leaves it floating well above both the underline and the\n   sentence image's own (bottom-anchored) baseline. The blank's own box height\n   (160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank\n   rule) is left as-is — it already matches the Learnosity reference (~161px)\n   closely; only the internal alignment was wrong. See CONTOOL-3159. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n  align-items: flex-end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {\n  justify-self: end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {\n  justify-self: start;\n  align-self: start;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n  justify-self: center;\n  width: fit-content;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {\n  max-width: 100%;\n  height: auto;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {\n  background: #e2e2e2;\n  color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,\n.mc-populated-blank-root.variant-sel-r1-s3\n  .pie-choice-horizontal.is-selected:hover\n  .pie-choice-tile {\n  background: #fcfcd3;\n  color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {\n  transform: scale(0.85);\n}\n\n/* question.css: below 850px .rli-s3-container is a one-column grid in DOM order\n   (listen button, sentence, cloze, distractors), each at the left edge. The cloze\n   container stretches, so the underline spans the column, with the 150px\n   content-element at its start (.rli-s3-cloze { justify-content:flex-start }). */\n@media not all and (min-width: 850px) {\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas:\n      \"transcript\"\n      \"audio\"\n      \"sentence\"\n      \"template\"\n      \"choices\";\n    align-items: start;\n  }\n\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n    grid-template-areas:\n      \"header\"\n      \"transcript\"\n      \"audio\"\n      \"sentence\"\n      \"template\"\n      \"choices\";\n  }\n\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line,\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n    justify-self: start;\n  }\n\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n    justify-self: stretch;\n  }\n\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n    flex-grow: 1;\n    justify-content: flex-start;\n  }\n\n  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-value {\n    width: 150px;\n  }\n}\n"
 	}
 }, zt = (e) => String(e || "").trim().toLowerCase().replace(/v\d+\.\d+\.\d+$/i, ""), Bt = (e) => Rt[zt(e)], Vt = (e) => Bt(e)?.variantClass || "", Ht = /* @__PURE__ */ new Set([
 	"sel-r1-plusggg",
@@ -2228,7 +2228,7 @@ var Lt = "/* Shared base styles for all sel_r1-*_plusggg variants.\n   Applied v
 	Ht.has(e.variantId) && Kt(r, "sel-r1-base", Lt), Kt(r, e.variantId, e.cssText);
 }, Jt = d("<div class=\"pie-prompt svelte-6wlbb4\"></div>"), Yt = A("<svg class=\"pie-correct-answer-toggle-svg svelte-6wlbb4\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\"><circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"var(--pie-tertiary-light, #d0e2f0)\"></circle><path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"var(--pie-tertiary-light, #d0e2f0)\"></path><polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"var(--pie-tertiary, #146eb3)\"></polygon></svg>"), Xt = A("<svg class=\"pie-correct-answer-toggle-svg svelte-6wlbb4\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\"><path d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\" fill=\"#D0CAC5\" stroke=\"#E6E3E0\" stroke-width=\"0.75\"></path><path d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\" fill=\"#B3ABA4\" stroke=\"#CDC7C2\" stroke-width=\"0.5\"></path><circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\"></circle><path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"var(--pie-background-dark, #ecedf1)\"></path><polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"var(--pie-tertiary, #146eb3)\"></polygon></svg>"), Zt = d("<div class=\"pie-correct-answer-toggle-row svelte-6wlbb4\"><button type=\"button\" class=\"pie-toggle-correct-answer svelte-6wlbb4\" style=\"gap:var(--mpb-toggle-button-gap, 0.5rem);\" data-testid=\"show-correct-answer\"><span class=\"pie-correct-answer-toggle-content svelte-6wlbb4\"><span class=\"pie-correct-answer-toggle-icon-holder svelte-6wlbb4\" aria-hidden=\"true\"><!></span> <span class=\"pie-correct-answer-toggle-label svelte-6wlbb4\"> </span></span></button></div>"), Qt = d("<div class=\"pie-header svelte-6wlbb4\"><!> <!> <!></div>"), $t = d("<div class=\"sentence-line pie-sentence-line svelte-6wlbb4\"></div>"), en = d("<div class=\"template-line pie-template-line svelte-6wlbb4\"><!><!><!></div>"), tn = d("<p class=\"sr-only pie-result-feedback svelte-6wlbb4\" role=\"status\" aria-live=\"polite\"> </p>"), nn = d("<div><!> <!> <!> <!> <!> <p class=\"sr-only pie-blank-hint svelte-6wlbb4\"> </p> <fieldset class=\"pie-choices-fieldset svelte-6wlbb4\"><legend class=\"sr-only pie-choices-legend svelte-6wlbb4\"> </legend> <div style=\"gap:var(--mpb-choice-group-gap, 0.5rem);\" role=\"radiogroup\" tabindex=\"-1\"></div></fieldset></div>"), rn = {
 	hash: "svelte-6wlbb4",
-	code: ".sr-only.svelte-6wlbb4 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}\n\n  /* Layout is self-contained: PIE players ship no Tailwind, so no utility class or\n     preflight reset can be assumed. The blank slot, choice tiles and variant\n     max-widths are sized for border-box. */.mc-populated-blank-root.svelte-6wlbb4,\n  .mc-populated-blank-root.svelte-6wlbb4 *,\n  .mc-populated-blank-root.svelte-6wlbb4 *::before,\n  .mc-populated-blank-root.svelte-6wlbb4 *::after {box-sizing:border-box;}\n\n  /* An authored image on its own line (the sel_r1-s3 stimulus) would otherwise sit\n     on the text baseline and add the descender gap below it. */.mc-populated-blank-root.svelte-6wlbb4 img {vertical-align:middle;}.mc-populated-blank-root.svelte-6wlbb4 {--mpb-focus-ring: var(\n      --pie-focus-outline,\n      var(--pie-button-focus-outline, var(--pie-focus-checked-border, #1565c0))\n    );padding:1rem;}.pie-prompt.svelte-6wlbb4 {margin-bottom:1rem;}\n\n  /* IAT-authored content marks its alignment with a class; the IAT stylesheet\n     that defines it does not ship with the item. */.mc-populated-blank-root.svelte-6wlbb4 .iat-align-center {text-align:center;}\n\n  /* Flush paragraphs, as the demo app's preflight reset rendered them. */.pie-prompt.svelte-6wlbb4 p,\n  .sentence-line.svelte-6wlbb4 p {margin:0;}.sentence-line.svelte-6wlbb4 {margin-bottom:0.75rem;}.pie-toggle-correct-answer.svelte-6wlbb4 {width:100%;cursor:pointer;border:0;background:transparent;padding:0;margin-bottom:0.75rem;display:flex;justify-content:center;text-align:center;font:inherit;color:var(--pie-text, black);}.pie-correct-answer-toggle-row.svelte-6wlbb4 {width:100%;display:flex;justify-content:flex-end;}.pie-correct-answer-toggle-content.svelte-6wlbb4 {display:flex;margin:0 auto;align-items:center;}.pie-correct-answer-toggle-icon-holder.svelte-6wlbb4 {width:25px;margin-right:5px;display:inline-flex;align-items:center;justify-content:center;}.pie-correct-answer-toggle-svg.svelte-6wlbb4 {width:25px;height:25px;}.pie-correct-answer-toggle-label.svelte-6wlbb4 {width:fit-content;min-width:140px;align-self:center;vertical-align:middle;font-weight:400;user-select:none;}.pie-toggle-correct-answer.svelte-6wlbb4:hover .pie-correct-answer-toggle-label:where(.svelte-6wlbb4),\n  .pie-toggle-correct-answer.svelte-6wlbb4:focus-visible .pie-correct-answer-toggle-label:where(.svelte-6wlbb4) {text-decoration:underline;}.template-line.svelte-6wlbb4 {white-space:pre-wrap;margin-bottom:1rem;}.template-line.svelte-6wlbb4 p {margin:0;display:inline;}.pie-choices-fieldset.svelte-6wlbb4 {border:0;padding:0;margin:0;}.pie-choices.svelte-6wlbb4 {display:flex;}.choices-horizontal.svelte-6wlbb4 {flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;}.choices-vertical.svelte-6wlbb4 {flex-direction:column;}.layout-audio_blank_only.svelte-6wlbb4 .pie-audio-container,\n  .layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container {display:flex;width:min(100%, var(--mpb-audio-instructions-max-width, 875px));margin-left:auto;margin-right:auto;justify-content:flex-end;}.layout-audio_blank_only.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {text-align:center;margin:var(--mpb-audio-blank-template-margin-top, 0.8rem) 0\n      var(--mpb-audio-blank-template-margin-bottom, 1.8rem);}.layout-audio_blank_only.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {display:flex;justify-content:center;}.layout-audio_blank_only.svelte-6wlbb4 .pie-blank-slot,\n  .layout-stimulus_image_blank.svelte-6wlbb4 .pie-blank-slot {width:var(--mpb-blank-wide-width, 10rem);border-bottom-width:var(--mpb-blank-underline-wide-width, 6px);min-height:160px;padding-bottom:4px;}.layout-stimulus_image_blank.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-stimulus-min-column, 210px), 1fr) auto;grid-template-areas:'sentence audio'\n      '. template'\n      'choices choices';column-gap:var(--mpb-stimulus-grid-column-gap, 2rem);row-gap:var(--mpb-stimulus-grid-row-gap, 0.7rem);align-items:start;}\n\n  /* Each grid names only the areas it lays out, so the header gets a row of its own;\n     left to auto-placement it would land below the choices. */.layout-stimulus_image_blank.has-header.svelte-6wlbb4 {grid-template-areas:'header header'\n      'sentence audio'\n      '. template'\n      'choices choices';}.layout-stimulus_image_blank.svelte-6wlbb4 .pie-header:where(.svelte-6wlbb4),\n  .layout-token_sequence.svelte-6wlbb4 .pie-header:where(.svelte-6wlbb4),\n  .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-header:where(.svelte-6wlbb4) {grid-area:header;}.layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container {grid-area:audio;margin:0;}.layout-stimulus_image_blank.svelte-6wlbb4 .sentence-line:where(.svelte-6wlbb4) {grid-area:sentence;margin:var(--mpb-stimulus-sentence-margin-top, 0.2rem) 0 0;}.layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:0;text-align:center;justify-self:center;}.layout-stimulus_image_blank.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-stimulus-choices-margin-top, 0.9rem);}.layout-token_sequence.svelte-6wlbb4 {display:grid;grid-template-columns:1fr auto;grid-template-areas:'audio      audio'\n      'template   template'\n      'choices    choices';column-gap:var(--mpb-token-grid-column-gap, 1.5rem);row-gap:var(--mpb-token-grid-row-gap, 0.8rem);align-items:start;}.layout-token_sequence.has-header.svelte-6wlbb4 {grid-template-areas:'header   header'\n      'audio    audio'\n      'template template'\n      'choices  choices';}.layout-token_sequence.svelte-6wlbb4 .pie-audio-container {grid-area:audio;margin:0;justify-self:end;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:var(--mpb-token-template-margin-top, 0.6rem) 0 0;justify-self:center;text-align:center;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) span + span {margin-left:var(--mpb-token-inline-token-gap, 0.35rem);}.layout-token_sequence.svelte-6wlbb4 .pie-blank-slot {width:var(--mpb-blank-standalone-width, 7rem);border-bottom-width:var(--mpb-blank-underline-wide-width, 4px);margin-left:var(--mpb-token-inline-token-gap, 0.35rem);}.layout-token_sequence.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-token-choices-margin-top, 0.2rem);}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-text-min-column, 260px), 1fr) auto;grid-template-areas:'template audio'\n      'choices choices';column-gap:var(--mpb-inline-grid-column-gap, 1.5rem);row-gap:var(--mpb-inline-grid-row-gap, 0.65rem);align-items:start;}.layout-inline_sentence.has-inline-audio.has-header.svelte-6wlbb4 {grid-template-areas:'header header'\n      'template audio'\n      'choices choices';}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-audio-container {grid-area:audio;margin:0;justify-self:end;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:var(--mpb-inline-template-margin-top, 0.45rem) 0 0;text-align:center;justify-self:center;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-inline-choices-margin-top, 0.25rem);}\n\n  /* Match Learnosity responsive behavior for CQT audio-blank layouts:\n     at smaller widths, audio control shifts left and answer tiles stack. */\n  @media (max-width: 760px) {.layout-audio_blank_only.svelte-6wlbb4 .pie-audio-container,\n    .layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container,\n    .layout-token_sequence.svelte-6wlbb4 .pie-audio-container,\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-audio-container {width:100%;margin-left:0;margin-right:0;justify-content:flex-start;justify-self:start;}.layout-audio_blank_only.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-token_sequence.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-stimulus_image_blank.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4) {flex-direction:column;align-items:flex-start;justify-content:flex-start;}\n  }"
+	code: ".sr-only.svelte-6wlbb4 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}\n\n  /* Layout is self-contained: PIE players ship no Tailwind, so no utility class or\n     preflight reset can be assumed. The blank slot, choice tiles and variant\n     max-widths are sized for border-box. */.mc-populated-blank-root.svelte-6wlbb4,\n  .mc-populated-blank-root.svelte-6wlbb4 *,\n  .mc-populated-blank-root.svelte-6wlbb4 *::before,\n  .mc-populated-blank-root.svelte-6wlbb4 *::after {box-sizing:border-box;}\n\n  /* An authored image on its own line (the sel_r1-s3 stimulus) would otherwise sit\n     on the text baseline and add the descender gap below it. */.mc-populated-blank-root.svelte-6wlbb4 img {vertical-align:middle;}.mc-populated-blank-root.svelte-6wlbb4 {--mpb-focus-ring: var(\n      --pie-focus-outline,\n      var(--pie-button-focus-outline, var(--pie-focus-checked-border, #1565c0))\n    );padding:1rem;}.pie-prompt.svelte-6wlbb4 {margin-bottom:1rem;}\n\n  /* IAT-authored content marks its alignment with a class; the IAT stylesheet\n     that defines it does not ship with the item. */.mc-populated-blank-root.svelte-6wlbb4 .iat-align-center {text-align:center;}\n\n  /* Flush paragraphs, as the demo app's preflight reset rendered them. */.pie-prompt.svelte-6wlbb4 p,\n  .sentence-line.svelte-6wlbb4 p {margin:0;}.sentence-line.svelte-6wlbb4 {margin-bottom:0.75rem;}.pie-toggle-correct-answer.svelte-6wlbb4 {width:100%;cursor:pointer;border:0;background:transparent;padding:0;margin-bottom:0.75rem;display:flex;justify-content:center;text-align:center;font:inherit;color:var(--pie-text, black);}.pie-correct-answer-toggle-row.svelte-6wlbb4 {width:100%;display:flex;justify-content:flex-end;}.pie-correct-answer-toggle-content.svelte-6wlbb4 {display:flex;margin:0 auto;align-items:center;}.pie-correct-answer-toggle-icon-holder.svelte-6wlbb4 {width:25px;margin-right:5px;display:inline-flex;align-items:center;justify-content:center;}.pie-correct-answer-toggle-svg.svelte-6wlbb4 {width:25px;height:25px;}.pie-correct-answer-toggle-label.svelte-6wlbb4 {width:fit-content;min-width:140px;align-self:center;vertical-align:middle;font-weight:400;user-select:none;}.pie-toggle-correct-answer.svelte-6wlbb4:hover .pie-correct-answer-toggle-label:where(.svelte-6wlbb4),\n  .pie-toggle-correct-answer.svelte-6wlbb4:focus-visible .pie-correct-answer-toggle-label:where(.svelte-6wlbb4) {text-decoration:underline;}.template-line.svelte-6wlbb4 {white-space:pre-wrap;margin-bottom:1rem;}.template-line.svelte-6wlbb4 p {margin:0;display:inline;}.pie-choices-fieldset.svelte-6wlbb4 {border:0;padding:0;margin:0;}.pie-choices.svelte-6wlbb4 {display:flex;}.choices-horizontal.svelte-6wlbb4 {flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;}.choices-vertical.svelte-6wlbb4 {flex-direction:column;}.layout-audio_blank_only.svelte-6wlbb4 .pie-audio-container,\n  .layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container {display:flex;width:min(100%, var(--mpb-audio-instructions-max-width, 875px));margin-left:auto;margin-right:auto;justify-content:flex-end;}.layout-audio_blank_only.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),\n  .layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {text-align:center;margin:var(--mpb-audio-blank-template-margin-top, 0.8rem) 0\n      var(--mpb-audio-blank-template-margin-bottom, 1.8rem);}.layout-audio_blank_only.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {display:flex;justify-content:center;}.layout-audio_blank_only.svelte-6wlbb4 .pie-blank-slot,\n  .layout-stimulus_image_blank.svelte-6wlbb4 .pie-blank-slot {width:var(--mpb-blank-wide-width, 10rem);border-bottom-width:var(--mpb-blank-underline-wide-width, 6px);min-height:160px;padding-bottom:4px;}.layout-stimulus_image_blank.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-stimulus-min-column, 210px), 1fr) auto;grid-template-areas:'sentence audio'\n      '. template'\n      'choices choices';column-gap:var(--mpb-stimulus-grid-column-gap, 2rem);row-gap:var(--mpb-stimulus-grid-row-gap, 0.7rem);align-items:start;}\n\n  /* Each grid names only the areas it lays out, so the header gets a row of its own;\n     left to auto-placement it would land below the choices. */.layout-stimulus_image_blank.has-header.svelte-6wlbb4 {grid-template-areas:'header header'\n      'sentence audio'\n      '. template'\n      'choices choices';}.layout-stimulus_image_blank.svelte-6wlbb4 .pie-header:where(.svelte-6wlbb4),\n  .layout-token_sequence.svelte-6wlbb4 .pie-header:where(.svelte-6wlbb4),\n  .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-header:where(.svelte-6wlbb4) {grid-area:header;}.layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container {grid-area:audio;margin:0;}.layout-stimulus_image_blank.svelte-6wlbb4 .sentence-line:where(.svelte-6wlbb4) {grid-area:sentence;margin:var(--mpb-stimulus-sentence-margin-top, 0.2rem) 0 0;}.layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:0;text-align:center;justify-self:center;}.layout-stimulus_image_blank.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-stimulus-choices-margin-top, 0.9rem);}.layout-token_sequence.svelte-6wlbb4 {display:grid;grid-template-columns:1fr auto;grid-template-areas:'audio      audio'\n      'template   template'\n      'choices    choices';column-gap:var(--mpb-token-grid-column-gap, 1.5rem);row-gap:var(--mpb-token-grid-row-gap, 0.8rem);align-items:start;}.layout-token_sequence.has-header.svelte-6wlbb4 {grid-template-areas:'header   header'\n      'audio    audio'\n      'template template'\n      'choices  choices';}.layout-token_sequence.svelte-6wlbb4 .pie-audio-container {grid-area:audio;margin:0;justify-self:end;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:var(--mpb-token-template-margin-top, 0.6rem) 0 0;justify-self:center;text-align:center;}.layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) span + span {margin-left:var(--mpb-token-inline-token-gap, 0.35rem);}.layout-token_sequence.svelte-6wlbb4 .pie-blank-slot {width:var(--mpb-blank-standalone-width, 7rem);border-bottom-width:var(--mpb-blank-underline-wide-width, 4px);margin-left:var(--mpb-token-inline-token-gap, 0.35rem);}.layout-token_sequence.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-token-choices-margin-top, 0.2rem);}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 {display:grid;grid-template-columns:minmax(var(--mpb-text-min-column, 260px), 1fr) auto;grid-template-areas:'template audio'\n      'choices choices';column-gap:var(--mpb-inline-grid-column-gap, 1.5rem);row-gap:var(--mpb-inline-grid-row-gap, 0.65rem);align-items:start;}.layout-inline_sentence.has-inline-audio.has-header.svelte-6wlbb4 {grid-template-areas:'header header'\n      'template audio'\n      'choices choices';}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-audio-container {grid-area:audio;margin:0;justify-self:end;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {grid-area:template;margin:var(--mpb-inline-template-margin-top, 0.45rem) 0 0;text-align:center;justify-self:center;}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {grid-area:choices;margin-top:var(--mpb-inline-choices-margin-top, 0.25rem);}\n\n  /* The CQT sheets (r1.scss, vic.scss, sel_r1-s3_plusggg) lay these layouts out in one\n     column below 850px: the listen button sits at the left above the stem, and the\n     answer tiles stack at the left edge. */\n  @media not all and (min-width: 850px) {.layout-audio_blank_only.svelte-6wlbb4 .pie-audio-container,\n    .layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container,\n    .layout-token_sequence.svelte-6wlbb4 .pie-audio-container,\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-audio-container {width:100%;margin-left:0;margin-right:0;justify-content:flex-start;justify-self:start;}.layout-audio_blank_only.svelte-6wlbb4 fieldset:where(.svelte-6wlbb4) {justify-content:flex-start;}.layout-audio_blank_only.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-token_sequence.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-stimulus_image_blank.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4) {flex-direction:column;align-items:flex-start;justify-content:flex-start;\n      /* The vw cap fits a row of tiles across the viewport; stacked tiles keep their width. */--mpb-choice-width-vw: 100vw;}.layout-stimulus_image_blank.svelte-6wlbb4 {grid-template-columns:minmax(0, 1fr);grid-template-areas:'audio'\n        'sentence'\n        'template'\n        'choices';}.layout-stimulus_image_blank.has-header.svelte-6wlbb4 {grid-template-areas:'header'\n        'audio'\n        'sentence'\n        'template'\n        'choices';}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 {grid-template-columns:minmax(0, 1fr);grid-template-areas:'audio'\n        'template'\n        'choices';}.layout-inline_sentence.has-inline-audio.has-header.svelte-6wlbb4 {grid-template-areas:'header'\n        'audio'\n        'template'\n        'choices';}.layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),\n    .layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),\n    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {justify-self:start;text-align:start;}\n  }"
 };
 function an(s, u) {
 	c(u, !0), ee(s, rn);
@@ -2546,4 +2546,4 @@ k(an, {
 //#endregion
 export { Q as n, an as t };
 
-//# sourceMappingURL=McPopulatedBlank-Cyqq7Q60.js.map
+//# sourceMappingURL=McPopulatedBlank-yvmy2-rw.js.map