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

package/dist/index.iife.js

@@ -40,14 +40,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   font-size: 14px;
 }
 
-/* r1.scss: .rli-r1-audio-transcript { font-family:Roboto; font-size:16px } */
-.mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
 /* r1.scss: .rli-r1-content-element { font-size: 1.9em } wraps all stem tokens.
    Makes inline font-size spans in the template multiply on top of this base. */
 .mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-template-line {
@@ -76,12 +68,14 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
 }
 
 /* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px; min-height:150px;
-   line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token
-   (blank slot and adjacent inline spans) in LSY, giving each a 150px box with a
-   2px per-side margin. Applies to the token layouts, the same set that gets the
-   feature button and the wide underline, so trailing tokens in audio_blank_only
-   (gplusggg) match the blank's height the way LSY does. Stems on other layouts are
-   prose, which the box would stack a word or two per line. */
+   line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token in
+   LSY, giving each a 150px box with a 2px per-side margin. Applies to the token
+   layouts, the same set that gets the feature button and the wide underline, so
+   trailing tokens in audio_blank_only (gplusggg) match the blank's height the way
+   LSY does. Stems on other layouts are prose, which the box would stack a word or
+   two per line. Spans inside the blank are the answer's own markup, not stem tokens.
+   The margin outranks token_sequence's span + span gap, so tokens sit LSY's 4px
+   apart (CONTOOL-2569). */
 .mc-populated-blank-root:where(
     [class*="variant-sel-r1-"]:is(
       .layout-audio_blank_only,
@@ -90,7 +84,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
     )
   )
   .pie-template-line
-  span:not([class]) {
+  span:not([class]):not(.pie-blank-slot *) {
   min-width: 150px;
   max-width: 150px;
   min-height: 150px;
@@ -99,6 +93,37 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   margin-right: 2px;
 }
 
+/* r1.scss: the content-element's wrapping flex line packs to the bottom of its box
+   (align-content:flex-end), so a token's 89px line sits on the box's bottom edge
+   whatever its font size; .rli-r1-stem { align-items:start } top-aligns the row.
+   Every item in it has a fixed height (150px tokens and images, the 160px cloze),
+   so the underline lands 4px under the tokens' bottom edge. */
+.mc-populated-blank-root:where(
+    [class*="variant-sel-r1-"]:is(.layout-audio_blank_only, .layout-token_sequence)
+  )
+  .pie-template-line
+  span:not([class]):not(.pie-blank-slot *) {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  align-content: flex-end;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.mc-populated-blank-root:where(
+    [class*="variant-sel-r1-"]:is(.layout-audio_blank_only, .layout-token_sequence)
+  )
+  .pie-template-line,
+.mc-populated-blank-root:where(
+    [class*="variant-sel-r1-"]:is(.layout-audio_blank_only, .layout-token_sequence)
+  )
+  .pie-template-line
+  p {
+  align-items: flex-start;
+}
+
 /* .pie-template-line's align-items:baseline (above) computes a shared baseline
    across all its flex items. .pie-blank-slot has no baseline-participating child
    of its own (.cloze-marker centers internally, align-items:center) — so it
@@ -114,39 +139,45 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   align-self: flex-end;
 }
 
-/* In token_sequence layouts the blank itself is also a content-element box (no
-   surrounding .rli-r1-cloze container at 160px). audio_blank_only / stimulus_image_blank
-   keep their own 160px min-height set on the blank slot in McPopulatedBlank.svelte to
-   mirror LSY's .rli-r1-cloze height. The 2px per-side margin matches LSY's
-   .rli-r1-content-element pattern.
-   .pie-blank-slot is box-sizing:border-box (McPopulatedBlank.svelte sets it for
-   the whole element) with a permanent 6px border-bottom (the underline) —
-   min-height:150px therefore only leaves 144px for content,
-   so an empty blank (content ~0px, clamped to the 150px floor) and a blank
-   showing a 150px choice image (150 + 6 border = 156px, exceeding the floor)
-   render at two different total heights. Since .pie-blank-slot is bottom-anchored
-   in its row (align-self:flex-end above), that 6px height difference shows up as
-   a visible shift of the blank/image every time a choice is selected or cleared.
-   min-height:156px keeps the total box height constant regardless of content, so
-   the 150px is fully available to the image/text and the border no longer
-   competes with it. See CONTOOL-3159. */
+/* r1.scss's .rli-r1-cloze and question.css's .rli-s3-cloze have no inline padding, so the
+   150px content-element spans the blank. ClozeMarker.svelte's 0.5rem would narrow an
+   answer image to 134px or 144px. */
+.mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-template-line .pie-blank-slot {
+  padding-inline: 0;
+}
+
+/* r1.scss: .rli-r1-cloze { height:160px; padding-bottom:4px; border-bottom:6px solid }
+   — the blank in the token layouts is LSY's cloze box, top-aligned with the stem
+   tokens (align-self overrides the flex-end above). A fixed height rather than a
+   min-height keeps the empty and the filled blank at one geometry: the 150px image
+   or content box below fits its 150px content area exactly, and the underline
+   never moves on selection (CONTOOL-3159). .pie-blank-slot is border-box, as LSY's
+   cloze is. McPopulatedBlank.svelte gives audio_blank_only the padding and the
+   6px underline; token_sequence takes both here. The 2px per-side margin matches
+   LSY's .rli-r1-content-element rhythm (CONTOOL-2569). */
+.mc-populated-blank-root:where([class*="variant-sel-r1-"]):is(
+    .layout-audio_blank_only,
+    .layout-token_sequence
+  )
+  .pie-template-line
+  .pie-blank-slot {
+  align-self: flex-start;
+  height: 160px;
+  padding-bottom: 4px;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
 .mc-populated-blank-root:where([class*="variant-sel-r1-"]).layout-token_sequence
   .pie-template-line
   .pie-blank-slot {
   min-width: 150px;
   max-width: 150px;
-  min-height: 156px;
   line-height: 89px;
-  margin-left: 2px;
-  margin-right: 2px;
 }
 
-/* audio_blank_only / stimulus_image_blank keep the 160px wide blank slot, but
-   still need the 2px per-side margin so the gap to the trailing token mirrors
-   LSY's .rli-r1-content-element rhythm. See CONTOOL-2569. */
-.mc-populated-blank-root:where([class*="variant-sel-r1-"]).layout-audio_blank_only
-  .pie-template-line
-  .pie-blank-slot,
+/* stimulus_image_blank keeps the 160px min-height blank slot McPopulatedBlank.svelte
+   sets, with the same 2px per-side margin. See CONTOOL-2569. */
 .mc-populated-blank-root:where([class*="variant-sel-r1-"]).layout-stimulus_image_blank
   .pie-template-line
   .pie-blank-slot {
@@ -154,29 +185,40 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   margin-right: 2px;
 }
 
-/* The \`.pie-template-line span:not([class])\` rule above has no depth limit, so it
-   also matches the unclassed answer <span> ClozeMarker.svelte renders inside
-   .pie-blank-value once a choice is selected (e.g. author font-size overrides like
-   <span style="font-size:3em">). For token_sequence that coincides with the blank
-   slot's own 150px/89px box above, so outer and inner agree. audio_blank_only /
-   stimulus_image_blank instead keep .pie-blank-slot at LSY's separate, taller
-   .rli-r1-cloze box (160px) — forcing the answer span into the stem token's
-   150px/89px box there is wrong: a plain (non-flex) span whose min-height exceeds
-   its line-height renders that line top-anchored, pinning the answer text to the
-   top of the blank with the rest of the box empty beneath it, instead of centered
-   on the underline the way LSY renders it. See CONTOOL-3159. */
-.mc-populated-blank-root:where([class*="variant-sel-r1-"]).layout-audio_blank_only
-  .pie-blank-value
-  span:not([class]),
+/* cloze.js: the cloze holds an .rli-r1-content-element around the answer's markup,
+   so the answer's line packs to the bottom of a 150px box the way a stem token's
+   does. The box's 8px bottom margin, centred in the cloze's 150px content area,
+   lifts it 4px, as it does in LSY. */
+.mc-populated-blank-root:where([class*="variant-sel-r1-"]):is(
+  .layout-audio_blank_only,
+  .layout-token_sequence
+) .pie-blank-value {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  align-content: flex-end;
+  justify-content: center;
+  min-height: 150px;
+  line-height: 89px;
+  margin-bottom: 8px;
+}
+
+/* An imageUrl answer is .pie-blank-image directly in the blank, with no
+   .pie-blank-value around it; the same margin puts it where a labelHtml image sits. */
+.mc-populated-blank-root:where([class*="variant-sel-r1-"]):is(
+  .layout-audio_blank_only,
+  .layout-token_sequence
+) .pie-blank-image {
+  margin-bottom: 8px;
+}
+
+/* Classless answer spans in the s3 blank keep line-height:normal, which outranks
+   sel-r1-s3.css's 1.1. See CONTOOL-3159. */
 .mc-populated-blank-root:where([class*="variant-sel-r1-"]).layout-stimulus_image_blank
   .pie-blank-value
   span:not([class]) {
-  min-width: 0;
-  max-width: none;
-  min-height: 0;
   line-height: normal;
-  margin-left: 0;
-  margin-right: 0;
 }
 
 /* r1.scss: .rli-r1-content-element { font-size:1.9em; line-height:89px } on distractors */
@@ -196,6 +238,32 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   width: 150px;
   height: 150px;
 }
+
+/* r1.scss: .rli-r1-stem and .rli-r1-distractors are flex-direction:column and become
+   rows only in its @media (min-width:850px), so below it every stem token, the cloze
+   and each distractor stack at the left edge (.rli-r1-stem { align-items:start }).
+   Each token's 8px bottom margin spaces the stack. */
+@media not all and (min-width: 850px) {
+  .mc-populated-blank-root:where(
+      [class*="variant-sel-r1-"]:is(.layout-audio_blank_only, .layout-token_sequence)
+    )
+    .pie-template-line,
+  .mc-populated-blank-root:where(
+      [class*="variant-sel-r1-"]:is(.layout-audio_blank_only, .layout-token_sequence)
+    )
+    .pie-template-line
+    p {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-choices.choices-horizontal {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    --mpb-choice-width-vw: 100vw;
+  }
+}
 `,xo={"sel_r1-_plusggg":{variantId:`sel-r1-plusggg`,variantClass:`variant-sel-r1-plusggg`,sourceUrl:`https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css`,cssText:`/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css */
 /* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
 .mc-populated-blank-root.variant-sel-r1-plusggg {
@@ -245,6 +313,14 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   text-align: start;
 }
 
+/* vic.scss: .rli-vic-cloze { margin-left:6px; margin-right:6px }, with no inline
+   padding, where ClozeMarker.svelte gives the blank 0.5rem. See CONTOOL-2572. */
+.mc-populated-blank-root.variant-sr-vic .pie-template-line .pie-blank-slot {
+  margin-left: 6px;
+  margin-right: 6px;
+  padding-inline: 0;
+}
+
 /* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }
    The red holds AA only on LSY's white page (5.1:1), so the answer carries that
    surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'
@@ -273,6 +349,24 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   justify-content: flex-start;
 }
 
+/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and
+   .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and
+   from its label, centred on the label, and its margins set the row pitch: the rows and
+   the radio and label have no gap between them. */
+.mc-populated-blank-root.variant-sr-vic .pie-choices.choices-vertical {
+  --mpb-choice-group-gap: 0;
+}
+
+.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal) {
+  --mpb-choice-row-gap: 0;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.mc-populated-blank-root.variant-sr-vic .pie-choice-radio-inline {
+  margin: 20px;
+}
+
 /* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } applied to
    the full row element, not only the inner label wrapper. */
 .mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal):hover {
@@ -305,13 +399,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   margin-inline: auto;
 }
 
-.mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
 .mc-populated-blank-root.variant-sel-vic .pie-template-line,
 .mc-populated-blank-root.variant-sel-vic .pie-blank-value,
 .mc-populated-blank-root.variant-sel-vic .pie-choice-label {
@@ -341,18 +428,42 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
    inline_sentence layout sets text-align:center on .template-line via a
    Svelte-scoped selector with specificity (0,4,0), so we need to match or
    exceed that. Pin sel-vic back to start so wrapped lines stay left-aligned.
-   See CONTOOL-2573. */
+   See CONTOOL-2573.
+   vic.scss: .rli-vic-stimulus { align-items:flex-start } also starts the
+   sentence at the content's left edge, where the same layout centres it in its
+   grid column (justify-self:center). */
 .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {
   text-align: start;
+  justify-self: start;
+}
+
+/* vic.scss: @media (min-width:850px) { .rli-vic-stimulus { margin-left:20px;
+   margin-right:20px } } — the sentence sits 20px in from the distractors. */
+@media (min-width: 850px) {
+  .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+}
+
+/* sel_vic/main.scss: .sel-vic .rli-vic-stimulus { min-height:128px }. From 850px up the
+   listen button beside the sentence gives the row that height; below it the button
+   moves above, and the sentence keeps the 128px on its own. */
+@media not all and (min-width: 850px) {
+  .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {
+    min-height: 128px;
+  }
 }
 
 /* vic.scss: .rli-vic-cloze { margin-left: 6px; margin-right: 6px } gives the
    cloze breathing room from adjacent text or punctuation. The shared blank slot
    has no inline margin, so set it here so the cloze→trailing-punctuation gap
-   matches LSY. See CONTOOL-2572. */
+   matches LSY. See CONTOOL-2572. The cloze has no inline padding either, where
+   ClozeMarker.svelte gives the blank 0.5rem. */
 .mc-populated-blank-root.variant-sel-vic .pie-template-line .pie-blank-slot {
   margin-left: 6px;
   margin-right: 6px;
+  padding-inline: 0;
 }
 
 /* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }
@@ -377,6 +488,24 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   justify-content: flex-start;
 }
 
+/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and
+   .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and
+   from its label, centred on the label, and its margins set the row pitch: the rows and
+   the radio and label have no gap between them. */
+.mc-populated-blank-root.variant-sel-vic .pie-choices.choices-vertical {
+  --mpb-choice-group-gap: 0;
+}
+
+.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal) {
+  --mpb-choice-row-gap: 0;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.mc-populated-blank-root.variant-sel-vic .pie-choice-radio-inline {
+  margin: 20px;
+}
+
 /* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } on the full row. */
 .mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected {
   background-color: #fcfcd3;
@@ -408,14 +537,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   background-color: transparent;
   color: inherit;
 }
-
-@media (min-width: 620px) {
-  .mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {
-    min-width: 620px;
-    max-width: 800px;
-    transform: translateX(-55px);
-  }
-}
 `},"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 */
 /* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
 .mc-populated-blank-root.variant-sel-r1-gplusggg {
@@ -432,18 +553,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   --mpb-choice-selected-bg: #fcfcd3;
   --mpb-choice-selected-color: #000;
 }
-
-/* r1.scss: .rli-r1-content-element boxes all have fixed line-height:89px, so every
-   token in the stem row shares a stable baseline regardless of content.  In PIE,
-   the blank slot's baseline shifts when the empty placeholder (short &nbsp;) is
-   replaced by the filled value span (full text height), dragging adjacent tokens
-   down by ~9px.  Switching to align-items:center is safe here because gplusggg has
-   only one row of content (blank + "four"), so vertical centering and baseline
-   alignment produce the same visual result.  The :is() wrapper raises specificity
-   above the base [class*=] rule without needing !important. */
-:is(.mc-populated-blank-root.variant-sel-r1-gplusggg) .pie-template-line {
-  align-items: center;
-}
 `},"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 */
 /* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
 .mc-populated-blank-root.variant-sel-r1-g-stem {
@@ -461,25 +570,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
   /* r1.scss: .rli-r1-cloze { border-bottom: 6px solid } */
   --mpb-blank-underline-wide-width: 6px;
 }
-
-/* PIE-793: sel-r1-base.css's 156px blank box fits a 150x150 image answer, which image
-   choices (variant-sel-r1-g-stem-graphic) keep. Text answers drop it on every classless
-   span, so the empty and filled blank match height (CONTOOL-3159). */
-.mc-populated-blank-root.variant-sel-r1-g-stem.layout-token_sequence.choice-mode-text
-  .pie-blank-slot
-  span:not([class]) {
-  min-height: 0;
-}
-
-/* The slot shrinks to its content and anchors to the top of the row, so the answer stays
-   level with the stem token and the underline rises to meet it. Any align-self keeps the
-   slot out of the row's shared baseline (see sel-r1-base.css), so the stem token does not
-   move on selection. */
-.mc-populated-blank-root.variant-sel-r1-g-stem.layout-token_sequence.choice-mode-text
-.pie-blank-slot {
-  min-height: 0;
-  align-self: flex-start;
-}
 `},"sel_r1-gg_plusggg":{variantId:`sel-r1-gg-plus`,variantClass:`variant-sel-r1-gg-plus`,sourceUrl:`https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css`,cssText:`/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css */
 /* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
 .mc-populated-blank-root.variant-sel-r1-gg-plus {
@@ -552,7 +642,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
 .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {
   grid-template-columns: minmax(220px, auto) auto auto;
   grid-template-areas:
-    "transcript transcript transcript"
     "sentence template audio"
     "choices choices choices";
   justify-content: center;
@@ -566,7 +655,6 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
 .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {
   grid-template-areas:
     "header header header"
-    "transcript transcript transcript"
     "sentence template audio"
     "choices choices choices";
 }
@@ -623,6 +711,51 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
 .mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {
   transform: scale(0.85);
 }
+
+/* question.css: below 850px .rli-s3-container is a one-column grid in DOM order
+   (listen button, sentence, cloze, distractors), each at the left edge. The cloze
+   container stretches, so the underline spans the column, with the 150px
+   content-element at its start (.rli-s3-cloze { justify-content:flex-start }). */
+@media not all and (min-width: 850px) {
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "transcript"
+      "audio"
+      "sentence"
+      "template"
+      "choices";
+    align-items: start;
+  }
+
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {
+    grid-template-areas:
+      "header"
+      "transcript"
+      "audio"
+      "sentence"
+      "template"
+      "choices";
+  }
+
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line,
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {
+    justify-self: start;
+  }
+
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {
+    justify-self: stretch;
+  }
+
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {
+    flex-grow: 1;
+    justify-content: flex-start;
+  }
+
+  .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-value {
+    width: 150px;
+  }
+}
 `}},So=e=>String(e||``).trim().toLowerCase().replace(/v\d+\.\d+\.\d+$/i,``),Co=e=>xo[So(e)],wo=e=>Co(e)?.variantClass||``,To=new Set([`sel-r1-plusggg`,`sel-r1-gplusggg`,`sel-r1-g-stem`,`sel-r1-gg-plus`,`sel-r1-ggplus`,`sel-r1-s3`]),Eo=/\.mc-populated-blank-root(?![\w-])/g,Do=(e=>{let t=2166136261;for(let n=0;n<e.length;n++)t^=e.charCodeAt(n),t=Math.imul(t,16777619);return(t>>>0).toString(36)})([bo,...Object.values(xo).map(e=>e.cssText)].join(`
 `)),Oo=e=>e.replace(Eo,`.mc-populated-blank-root:where([data-mpb-css="${Do}"])`),ko=(e,t,n)=>{let r=`mc-populated-blank-css-${t}-${Do}`;if(e.getElementById(r))return;let i=document.createElement(`style`);i.id=r,i.setAttribute(`data-mpb-variant`,t),i.textContent=Oo(n),(e instanceof ShadowRoot?e:e.head).appendChild(i)},Ao=(e,t)=>{if(!e?.cssText||typeof document>`u`)return;let n=t.getRootNode(),r=n instanceof ShadowRoot?n:document;To.has(e.variantId)&&ko(r,`sel-r1-base`,bo),ko(r,e.variantId,e.cssText)},jo=q(`<div class="pie-prompt svelte-6wlbb4"></div>`),Mo=vr(`<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>`),No=vr(`<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>`),Po=q(`<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>`),Fo=q(`<div class="pie-header svelte-6wlbb4"><!> <!> <!></div>`),Io=q(`<div class="sentence-line pie-sentence-line svelte-6wlbb4"></div>`),Lo=q(`<div class="template-line pie-template-line svelte-6wlbb4"><!><!><!></div>`),Ro=q(`<p class="sr-only pie-result-feedback svelte-6wlbb4" role="status" aria-live="polite"> </p>`),zo=q(`<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>`),Bo={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;}
 
@@ -668,13 +801,29 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
       'template audio'
       '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);}
 
-  /* Match Learnosity responsive behavior for CQT audio-blank layouts:
-     at smaller widths, audio control shifts left and answer tiles stack. */
-  @media (max-width: 760px) {.layout-audio_blank_only.svelte-6wlbb4 .pie-audio-container,
+  /* The CQT sheets (r1.scss, vic.scss, sel_r1-s3_plusggg) lay these layouts out in one
+     column below 850px: the listen button sits at the left above the stem, and the
+     answer tiles stack at the left edge. */
+  @media not all and (min-width: 850px) {.layout-audio_blank_only.svelte-6wlbb4 .pie-audio-container,
     .layout-stimulus_image_blank.svelte-6wlbb4 .pie-audio-container,
     .layout-token_sequence.svelte-6wlbb4 .pie-audio-container,
-    .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),
+    .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),
     .layout-token_sequence.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),
     .layout-stimulus_image_blank.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4),
-    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4) {flex-direction:column;align-items:flex-start;justify-content:flex-start;}
+    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .pie-choices:where(.svelte-6wlbb4) {flex-direction:column;align-items:flex-start;justify-content:flex-start;
+      /* 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'
+        'sentence'
+        'template'
+        'choices';}.layout-stimulus_image_blank.has-header.svelte-6wlbb4 {grid-template-areas:'header'
+        'audio'
+        'sentence'
+        'template'
+        'choices';}.layout-inline_sentence.has-inline-audio.svelte-6wlbb4 {grid-template-columns:minmax(0, 1fr);grid-template-areas:'audio'
+        'template'
+        'choices';}.layout-inline_sentence.has-inline-audio.has-header.svelte-6wlbb4 {grid-template-areas:'header'
+        'audio'
+        'template'
+        'choices';}.layout-stimulus_image_blank.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),
+    .layout-token_sequence.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4),
+    .layout-inline_sentence.has-inline-audio.svelte-6wlbb4 .template-line:where(.svelte-6wlbb4) {justify-self:start;text-align:start;}
   }`};function Vo(e,t){We(t,!0),Wr(e,Bo);let n=Z(t,`model`,7),r=Z(t,`session`,7),i=Z(t,`onSessionChange`,7),a=Z(t,`onAudioStarted`,7),o=Z(t,`onAudioEnded`,7),s=e=>Sa(e,n()?.language),c=P(``),l=P(null),u=P(null),d=P(null),f=`mc-populated-blank-${Math.random().toString(36).slice(2,10)}`,p=j(()=>(n()?.mode||n()?.env?.mode||``).toString()),m=j(()=>K(p)===`evaluate`),h=j(()=>n()?.correctness),g=j(()=>typeof n()?.responseCorrect==`boolean`?n().responseCorrect:K(h)===`correct`),_=j(()=>K(h)===`correct`),v=j(()=>K(h)===`incorrect`),y=P(!1),b=j(()=>K(m)&&!K(g)&&!!n()?.correctChoiceId),x=j(()=>n()?.layoutProfile||``),S=j(()=>eo({interactionMode:n()?.interactionMode,template:n()?.template,choiceLayout:n()?.choiceLayout,layoutProfile:K(x),hasAudio:n()?.hasAudio,useFeatureButtonAudio:n()?.useFeatureButtonAudio,prompt:n()?.prompt})),ee=j(()=>K(S).isAudioOnlyMode),te=j(()=>K(S).isBlankOnlyTemplate),C=j(()=>K(S).isHorizontalChoices),w=j(()=>K(S).hasInlineSentenceAudioLayout),ne=j(()=>K(S).useFeatureButtonAudio),re=j(()=>K(S).hasVisiblePrompt),ie=j(()=>!!n()?.teacherInstructions||K(re)||K(b)),ae=j(()=>io({layoutProfile:K(x),isBlankOnlyTemplate:K(te),configuredLimits:n()?.layoutLimits,customProfilePresets:n()?.layoutProfilePresets})),oe=j(()=>Array.isArray(n()?.choices)?n().choices:[]),se=j(()=>n()?.choiceMode||`text`),ce=j(()=>r()?.choiceId||K(c)||``),le=j(()=>`${f}-choice-group-${n()?.id||`1`}`),ue=j(()=>_o({selectedId:K(ce),isEvaluateMode:K(m),showCorrectAnswer:K(y),correctChoiceId:String(n()?.correctChoiceId||``)})),de=j(()=>K(oe).find(e=>e.id===K(ue))),fe=j(()=>String(K(de)?.labelHtml||``)),pe=j(()=>vo({isEvaluateMode:K(m),showCorrectAnswer:K(y),isCorrect:K(_),isIncorrect:K(v),selectedId:K(ce)})),me=j(()=>K(pe)===`correct`?s(`correctAnswerSelected`):K(pe)===`incorrect`?s(`incorrectAnswerSelected`):``),he=j(()=>Ya({isEvaluateMode:K(m),correctChoiceId:String(n()?.correctChoiceId||``),selectedId:String(K(ce)||``),showCorrectAnswer:K(y)})),ge=j(()=>`${f}-prompt`),_e=j(()=>`${f}-choices-legend`),ve=j(()=>`${f}-result`),ye=j(()=>`${f}-blank-hint`),be=j(()=>yo({prompt:n()?.prompt||``,legendMaxChars:K(ae).legendMaxChars,answerChoicesLabel:s(`answerChoices`)})),xe=j(()=>K(re)?K(ge):void 0),Se=j(()=>K(re)?void 0:String(n()?.choiceGroupLabel||``).trim()||K(be)),T=j(()=>K(re)?K(ge):void 0),Ce=j(()=>{let e=String(n()?.language||n()?.locale||``).trim();return e?e.replace(/_/g,`-`):void 0}),E=j(()=>Co(n()?.customType)),D=j(()=>wo(n()?.customType)),we=j(()=>{let e=n()?.template||``,t=e.indexOf(`{{blank}}`);if(t<0)return{before:e,after:``};let r=e.slice(0,t),i=e.slice(t+9);return K(x)===`inline_sentence`&&(r=`${r.replace(/\s+$/,``)} `,i=` ${i.replace(/^\s+/,``)}`),{before:r,after:i}});function Te(e){let t=e.target;if(!t.checked)return;let n=t.value;F(c,n,!0),i()?.({...r(),choiceId:n})}function Ee(){K(b)&&F(y,!K(y))}hn(()=>{(!K(m)||K(g))&&F(y,!1)});function De(e){if(n()?.disabled)return;let t=e.key;if(![`ArrowDown`,`ArrowRight`,`ArrowUp`,`ArrowLeft`].includes(t))return;e.preventDefault();let r=e.currentTarget,i=Array.from(r.querySelectorAll(`input[type="radio"]:not([disabled])`));if(i.length===0)return;let a=i.findIndex(e=>e.checked);a=t===`ArrowDown`||t===`ArrowRight`?a<0?0:(a+1)%i.length:a<0?i.length-1:(a-1+i.length)%i.length;let o=i[a];o.checked=!0,o.dispatchEvent(new Event(`change`,{bubbles:!0})),o.focus()}let Oe=j(()=>go({locale:n()?.locale,audioButtonSkin:n()?.audioButtonSkin,audioButtonSkinsByLocale:n()?.audioButtonSkinsByLocale}));hn(()=>{F(c,r()?.choiceId||``,!0)}),hn(()=>{let e=K(l);if(e)return e.addEventListener(`click`,Ee),()=>e.removeEventListener(`click`,Ee)}),hn(()=>{let e=K(u);if(!e)return;let t=e=>{e.target?.type===`radio`&&Te(e)},n=e=>De(e);return e.addEventListener(`change`,t),e.addEventListener(`keydown`,n),()=>{e.removeEventListener(`change`,t),e.removeEventListener(`keydown`,n)}}),hn(()=>{K(d)&&Ao(K(E),K(d))});var ke={get model(){return n()},set model(e){n(e),N()},get session(){return r()},set session(e){r(e),N()},get onSessionChange(){return i()},set onSessionChange(e){i(e),N()},get onAudioStarted(){return a()},set onAudioStarted(e){a(e),N()},get onAudioEnded(){return o()},set onAudioEnded(e){o(e),N()}},Ae=zo(),je=L(Ae),Me=e=>{var t=Fo(),r=L(t),i=e=>{{let t=j(()=>n()?.language);Ja(e,{get html(){return n().teacherInstructions},get language(){return K(t)}})}};Y(r,e=>{n()?.teacherInstructions&&e(i)});var a=R(r,2),o=e=>{var t=jo();Ur(t,()=>n().prompt,!0),O(t),z(()=>X(t,`id`,K(ge))),J(e,t)};Y(a,e=>{K(re)&&e(o)});var s=R(a,2),c=e=>{var t=Po(),r=L(t),i=L(r),a=L(i),o=L(a),s=e=>{J(e,Mo())},c=e=>{J(e,No())};Y(o,e=>{K(y)?e(s):e(c,-1)}),O(a);var u=nn(R(a,2),!0);O(i),O(r),ui(r,e=>F(l,e),()=>K(l)),O(t),z(e=>{X(r,`aria-pressed`,K(y)),Er(u,e)},[()=>Ca(K(y)?`hideCorrectAnswer`:`showCorrectAnswer`,n()?.language)]),J(e,t)};Y(s,e=>{K(b)&&e(c)}),O(t),J(e,t)};Y(je,e=>{K(ie)&&e(Me)});var Ne=R(je,2);{let e=j(()=>!!n()?.hasAudio),t=j(()=>n()?.audioUrl),r=j(()=>!!n()?.autoplayAudioEnabled),i=j(()=>n()?.language);Aa(Ne,{get hasAudio(){return K(e)},get audioUrl(){return K(t)},get useFeatureButtonAudio(){return K(ne)},get autoplayEnabled(){return K(r)},get featureAudioSkin(){return K(Oe)},get language(){return K(i)},get onaudiostarted(){return a()},get onaudioended(){return o()}})}var Pe=R(Ne,2),Fe=e=>{var t=Io();Ur(t,()=>n().sentenceHtml,!0),O(t),z(()=>X(t,`aria-describedby`,K(T))),J(e,t)};Y(Pe,e=>{n()?.sentenceHtml&&e(Fe)});var Ie=R(Pe,2),Le=e=>{var t=Lo(),r=L(t);Ur(r,()=>K(we).before);var i=R(r);{let e=j(()=>s(`blankLabel`)),t=j(()=>n()?.language);Ia(i,{get choiceMode(){return K(se)},get displayChoice(){return K(de)},get displayChoiceLabelHtml(){return K(fe)},get isStandalone(){return K(te)},get blankWidth(){return K(ae).blankWidth},get blankBorderWidth(){return K(ae).blankBorderWidth},get ariaLabel(){return K(e)},get language(){return K(t)}})}Ur(R(i),()=>K(we).after),O(t),z(()=>X(t,`aria-describedby`,K(T))),J(e,t)};Y(Ie,e=>{K(ee)||e(Le)});var Re=R(Ie,2),ze=e=>{var t=Ro(),n=nn(t,!0);z(()=>{X(t,`id`,K(ve)),Er(n,K(me))}),J(e,t)};Y(Re,e=>{K(me)&&e(ze)});var Be=R(Re,2),Ve=nn(Be,!0),He=R(Be,2),k=L(He),Ue=nn(k,!0),Ke=R(k,2);return Lr(Ke,21,()=>K(oe),e=>e.id,(e,t)=>{{let r=j(()=>K(ue)===K(t).id),i=j(()=>!!n()?.disabled),a=j(()=>K(he).get(K(t).id)),o=j(()=>n()?.language);Ga(e,{get choice(){return K(t)},get choiceMode(){return K(se)},get isHorizontal(){return K(C)},get isSelected(){return K(r)},get isDisabled(){return K(i)},get correctness(){return K(a)},get isEvaluateMode(){return K(m)},get instanceId(){return f},get radioGroupName(){return K(le)},get language(){return K(o)}})}}),O(Ke),ui(Ke,e=>F(u,e),()=>K(u)),O(He),O(Ae),ui(Ae,e=>F(d,e),()=>K(d)),z((e,t)=>{Xr(Ae,1,`mc-populated-blank-root pie-element pie-element-mc-populated-blank pie-delivery-root layout-${K(x)} choice-mode-${K(se)} ${K(D)} ${K(w)?`has-inline-audio`:``} ${K(ie)?`has-header`:``}`,`svelte-6wlbb4`),X(Ae,`lang`,K(Ce)),Qr(Ae,K(ae).rootStyle),X(Ae,`data-mpb-css`,Do),X(Be,`id`,K(ye)),Er(Ve,e),He.disabled=n()?.disabled,X(k,`id`,K(_e)),Er(Ue,K(be)),Xr(Ke,1,`pie-choices ${K(C)?`choices-horizontal`:`choices-vertical`}`,`svelte-6wlbb4`),X(Ke,`aria-labelledby`,K(xe)),X(Ke,`aria-label`,K(Se)),X(Ke,`aria-describedby`,t)},[()=>s(`blankPreSelectionHint`),()=>[K(ye),K(me)?K(ve):void 0].filter(Boolean).join(` `)]),J(e,Ae),Ge(ke)}vi(Vo,{model:{type:`Object`},session:{type:`Object`},options:{type:`Object`},onSessionChange:{},onAudioStarted:{},onAudioEnded:{}},[],[]);function Ho(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function Uo(e,t){if(e===t)return e;if(!Ho(e)||!Ho(t)||Object.isFrozen(e)||!Object.isExtensible(e))return t;try{for(let n of Object.keys(e))n in t||delete e[n];Object.assign(e,t)}catch{return t}return e}var Wo=class e extends CustomEvent{static{this.TYPE=`model-set`}constructor(t,n,r){super(e.TYPE,{bubbles:!0,composed:!0,detail:{complete:n,component:t,hasModel:r}}),this.component=t,this.complete=n}},Go=class e extends CustomEvent{static{this.TYPE=`session-changed`}constructor(t,n){super(e.TYPE,{bubbles:!0,composed:!0,detail:{complete:n,component:t}}),this.component=t,this.complete=n}};function Ko(e,t){let n=e.element;if(!n)throw TypeError("defineDeliveryElement: the component was not compiled with `customElement`");class r extends n{#e;#t;constructor(){super(),this.onSessionChange=e=>{this.writeSession(e),this.dispatchSessionChanged()}}set model(e){this.#e=e,super.model=e,queueMicrotask(()=>{this.dispatchEvent(new Wo(this.tagName.toLowerCase(),this.isComplete(),this.#e!==void 0))})}get model(){return this.#e}set session(e){this.#t=e,super.session=e,this.dispatchSessionChanged()}get session(){return this.#t}isComplete(){return t.isComplete(this.#e,this.#t)}writeSession(e){this.#t=Uo(this.#t,e),super.session=e}dispatchSessionChanged(){this.dispatchEvent(new Go(this.tagName.toLowerCase(),this.isComplete()))}}return r}var qo=Ko(Vo,{isComplete:(e,t)=>!!t?.choiceId});function Jo(e){return!!e?.completeAudioEnabled&&!!e?.hasAudio}return class extends qo{audioComplete=!1;constructor(){super(),this.onAudioStarted=()=>{this.#e({audioStartTime:Date.now()})},this.onAudioEnded=()=>{this.audioComplete=!0,this.#e({audioEndTime:Date.now()}),this.dispatchSessionChanged()}}set model(e){e?.audioUrl!==this.model?.audioUrl&&(this.audioComplete=!1),super.model=e}get model(){return super.model}isComplete(){return super.isComplete()&&(this.audioComplete||!Jo(this.model))}#e(e){let t=this.session||{},n=t.audioStartTime||e.audioStartTime,r=t.audioEndTime||e.audioEndTime,i={...t,...n?{audioStartTime:n}:{},...r?{audioEndTime:r}:{}};!i.waitTime&&n&&r&&(i.waitTime=r-n),this.writeSession(i)}}})();