@citolab/qti-components 8.0.2 → 8.2.0

package/dist/item.css

@@ -1,5 +1,6 @@
 
 @layer qti-base, qti-components, qti-extended;
+
 @layer qti-components.reset, qti-components.global, qti-components.interactions.base,
   qti-components.interactions.brand, qti-components.interactions.states,
   qti-components.interactions.corrections, qti-components.elements, qti-components.overrides;
@@ -14,6 +15,7 @@
  * Nothing is left unlayered: unlayered CSS outranks every layer, so a single stray rule here would
  * sit above the whole theme AND above the `qti-extended` slot consumers are told to author in.
  */
+
 @layer qti-base{
 /* https://www.imsglobal.org/sites/default/files/spec/qti/v3/guide/img/qti3p0.css */
 /* ============================
@@ -1446,6 +1448,7 @@
   text-orientation: upright;
 }
 }
+
 @layer qti-base{
 
 .qti-layout-row {
@@ -1577,6 +1580,7 @@
  * block is appended after every declared layer, which would put brand paint above the state and
  * correction paint it is meant to sit under. Deleting the two names moved 7 of the 17 VRT baselines.
  */
+
 @layer qti-components.reset{
 @scope (qti-item-body, .ProseMirror) {
   :scope,
@@ -1628,6 +1632,7 @@
   }
 }
 }
+
 @layer qti-components.elements{
 
 /**
@@ -1699,6 +1704,7 @@
  * these blocks (--qti-correct reads --qti-success) is layer-independent. Nothing here renders
  * differently for being grouped this way.
  */
+
 /* ============================================================================
  * global — the foundation every layer reads.
  * ========================================================================== */
@@ -1893,6 +1899,7 @@
     }
   }
 }
+
 /* ============================================================================
  * interactions.base — interaction-local geometry. Neutral, no judgement colour.
  * ========================================================================== */
@@ -2064,6 +2071,7 @@
     --qti-drag-padding: var(--qti-spacing) 0.8em;
   }
 }
+
 /* ============================================================================
  * interactions.states — state paint. Selection, drag, and drop-target highlight.
  * ========================================================================== */
@@ -2110,6 +2118,7 @@
     --qti-drop-highlight-border-width: 2px;
   }
 }
+
 /* ============================================================================
  * interactions.corrections — answer-key and judgement paint.
  * ========================================================================== */
@@ -2134,15 +2143,18 @@
 /* QTI base — shared theme utilities and semantic mixins. Only styles >=2 interactions share.
  * They read the variables in qti-variables.css; a substrate re-colours by overriding those, not
  * by editing these. Split from qti-base.css. */
+
 /* ============================================================================
  * Shared semantic mixins. Only styles ≥2 interactions share belong here.
  * A substrate expresses its look by overriding the --qti-* variables above
  * (value first), not by editing these.
  * ========================================================================== */
+
 /*
  * Semantic PostCSS mixins. Interaction files wire these to their own parts and states; the mixins
  * own the shared visual vocabulary.
  */
+
 /*
  * A candidate correction, painted through the corrected element's own role.
  *
@@ -2159,6 +2171,7 @@
  *
  * `candidate-tint` below survives for the one corrected element with no role: qti-hottext.
  */
+
 /*
  * THE paint contract. Every visual component is, at rest, a bordered box on the theme's surface.
  * This mixin binds each PAINT property to a variable exactly once, so a state — or a theme —
@@ -2189,6 +2202,7 @@
  * rings) and a MULTI-SLOT box-shadow (so an element's resting lift, in-flight elevation and focus
  * ring compose instead of the last one winning — the documented four-rule box-shadow contention).
  */
+
 /*
  * A drag: the movable token a candidate drags into a gap, a drop target or an order slot.
  *
@@ -2206,6 +2220,7 @@
  * Under content-box the clone's padding would be added to the width the drag code measured off the
  * bank drag, and it would jump the instant it was picked up.
  */
+
 /*
  * The hole a drag leaves behind: lifted mid-drag, or spent because its copy is already placed.
  *
@@ -2216,6 +2231,7 @@
  * bank would reflow around a hole 20px narrower than the thing that left it. Measured in
  * drag-drop.invariance.spec.ts, "a spent drag keeps its footprint".
  */
+
 /*
  * The drag handle glyph.
  *
@@ -2228,6 +2244,7 @@
  * else. This one is in flow and takes real width, which is why it reserves an explicit width/height
  * rather than leaning on the glyph's intrinsic size.
  */
+
 /*
  * The radio and the checkbox: the other two things this theme draws as boxes, and so the other two
  * paint roles. A control is a bordered box on the theme's surface exactly like a chip is, and now it
@@ -2248,6 +2265,7 @@
  * not a paint slot. Centring the mark is the component's job — qti-simple-choice.styles.ts already
  * flex-centres [part='control'].
  */
+
 /*
  * The mark inside a control at rest — the box the tick or dot is drawn into. Structural.
  *
@@ -2260,10 +2278,12 @@
  * border — so it would silently shrink by the border width and change with it. Multiplying the token
  * keeps the mark proportional to the control's outer size, which is the size anyone reasons about.
  */
+
 /* A choice with its native control shown (radio/checkbox visible) is the button component with its
    border made TRANSPARENT — no visible box, but the 1px edge is still there, so it is the same box
    as the `.qti-input-control-hidden` choice (which keeps the border visible because the whole choice
    is the control). Only the border COLOUR differs between the two, never the geometry. */
+
 /*
  * The mark a checked control shows: a dot for a radio, a tick for a checkbox.
  *
@@ -2272,6 +2292,7 @@
  * `control-selected`), so the two belong together: override --checkbox-background-color and you will
  * usually want --checkbox-mark-color with it. `white` is the resting value, not a fixed one.
  */
+
 /*
  * `act`, `readonly` and `dis` used to live here. They are written out at their call sites now, for
  * two different reasons.
@@ -2293,16 +2314,20 @@
  *
  * `act-bor` was deleted outright: zero call sites anywhere in the repo.
  */
+
 /* `foc` stays a mixin, deliberately, and is the one state still painting a property directly.
  * Twenty call sites read it, and it draws a `box-shadow` — the property the contract has NOT bound
  * (see `paint` above). Routing it through --<role>-box-shadow would not fix anything: focus would
  * then fight the resting lift and the in-flight elevation over one slot, last-declared winning,
  * which is the four-rule contention already documented in qti-variables.css. The intended fix
  * recorded there is a single `outline` on `:focus-visible`, and that is its own VRT-checked step. */
+
 /* A choice — the clickable box a candidate picks. Nothing but the resting paint box; its padding is
    the interaction's (qti-choice-interaction.css), because a choice's box differs per interaction and
    a chip's does not. */
+
 /* A text field: the paint box, plus the cursor that says you can type in it. */
+
 /*
  * A drop target: the paint box with a DASHED edge, the one thing that distinguishes it from every
  * other role.
@@ -2317,9 +2342,11 @@
  * dashed edge onto any chip standing in the drop (it did — a chip in a drop went dashed). Now that
  * the chip reads --drag-border-style, the drop's value inherits past it harmlessly.
  */
+
 /* The initial `display: none` moved to `validationMessage` in qti-base — the message is a shadow
    node, and `Interaction.reportValidity` already owns showing and hiding it with an inline style.
    What is left here is paint. */
+
 /*
  * The three roles qti-inline-choice-interaction is built from. They are separate roles rather than
  * one, because they nest: the menu and the message live in the field's shadow root, so under a
@@ -2330,12 +2357,14 @@
  * `menu`    the popover the options are listed in.
  * `message` the validation box. Its warning colouring is the interaction's, not the role's.
  */
+
 /*
  * A drag in flight. The other `drag` modifier — applied with `drag`, never instead of it.
  *
  * `rotate` is paint: a transform never reflows, which is what lets a drag tilt under the cursor
  * without the bank shifting behind it.
  */
+
 /*
  * A drag darkens a little under the pointer. The one hover affordance in the theme.
  *
@@ -2363,16 +2392,15 @@
        Handed to qti-simple-choice.styles.ts, which owns the label's box; this was an
        `::part(label) { display: inline !important }`. */
     --qti-choice-label-display: inline;
+  }
 
-    & qti-simple-choice {
+    qti-choice-interaction qti-simple-choice {
       padding: var(--qti-padding-box);
       width: -moz-fit-content;
       width: fit-content;
       cursor: pointer;
     }
-
-    &.qti-input-control-hidden {
-      & qti-simple-choice {
+      qti-choice-interaction.qti-input-control-hidden qti-simple-choice {
         background-color: var(--button-background-color, var(--qti-component-background-color));
         background-image: var(--button-background-image, var(--qti-component-background-image));
         border-width: var(--button-border-width, var(--qti-component-border-width));
@@ -2384,14 +2412,11 @@
         opacity: var(--button-opacity, var(--qti-component-opacity));
         filter: var(--button-filter, var(--qti-component-filter));
         --qti-control-display: none;
-        &:focus {
+      }
+        :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-      }
-    }
-
-    &:not(.qti-input-control-hidden) {
-      & qti-simple-choice {
+      qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice {
         background-color: var(--button-background-color, var(--qti-component-background-color));
         background-image: var(--button-background-image, var(--qti-component-background-image));
         border-width: var(--button-border-width, var(--qti-component-border-width));
@@ -2406,52 +2431,46 @@
         gap: 0.5rem;
         outline: none;
         cursor: pointer;
+      }
 
-        &:focus {
+        :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
 
-        &::part(control-mark) {
+        :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice)::part(control-mark) {
           width: calc(var(--qti-control-size) * 0.625);
           height: calc(var(--qti-control-size) * 0.625);
         }
-      }
-    }
-  }
 }
+
 @layer qti-components.interactions.states {
-  qti-choice-interaction {
-    &.qti-input-control-hidden qti-simple-choice {
       /* A selected choice, repainted through the button role's slots rather than by re-declaring the
          properties — the choice is `@mixin button`, so switching a variable is all a state has to do.
          This used to be `@mixin act` followed by two direct declarations, and half of `act` was dead
          on arrival: it set `background-color: var(--qti-bg-active)` and the very next line overwrote
          it with the selected fill. Only its border-colour ever survived, which is written out here. */
-      &:state(checked) {
+      :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(checked), [data-state~='checked']) {
         --button-border-color: var(--qti-border-active);
         --button-background-color: var(--qti-selected-bg);
         --button-color: var(--qti-selected-color);
       }
 
-      &:state(readonly) {
+      :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(readonly), [data-state~='readonly']) {
         cursor: pointer;
       }
 
-      &:state(disabled) {
+      :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(disabled), [data-state~='disabled']) {
         cursor: not-allowed;
       }
-    }
-
-    &:not(.qti-input-control-hidden) qti-simple-choice {
-      &:state(readonly) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(readonly), [data-state~='readonly']) {
         cursor: pointer;
       }
 
-      &:state(disabled) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(disabled), [data-state~='disabled']) {
         cursor: not-allowed;
       }
 
-      &:state(radio)::part(control) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(radio), [data-state~='radio'])::part(control) {
         background-color: var(--radio-background-color, var(--qti-component-background-color));
         background-image: var(--radio-background-image, var(--qti-component-background-image));
         border-width: var(--radio-border-width, var(--qti-component-border-width));
@@ -2469,13 +2488,12 @@
         border-radius: var(--radio-border-radius, 100%);
       }
 
-      &:state(radio):state(checked)::part(control),
-      &:state(checkbox):state(checked)::part(control) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(radio), [data-state~='radio']):is(:state(checked), [data-state~='checked'])::part(control),:is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(checkbox), [data-state~='checkbox']):is(:state(checked), [data-state~='checked'])::part(control) {
         border-color: var(--qti-primary);
         background-color: var(--qti-primary);
       }
 
-      &:state(radio):state(checked)::part(control-mark) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(radio), [data-state~='radio']):is(:state(checked), [data-state~='checked'])::part(control-mark) {
         /* 0.5 reproduces today's 8px at the default 1rem — see mark-size for why this is a fraction. */
         width: calc(var(--qti-control-size) * 0.5);
         height: calc(var(--qti-control-size) * 0.5);
@@ -2483,7 +2501,7 @@
         border-radius: 100%;
       }
 
-      &:state(checkbox)::part(control) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(checkbox), [data-state~='checkbox'])::part(control) {
         background-color: var(--checkbox-background-color, var(--qti-component-background-color));
         background-image: var(--checkbox-background-image, var(--qti-component-background-image));
         border-width: var(--checkbox-border-width, var(--qti-component-border-width));
@@ -2498,27 +2516,18 @@
         height: var(--qti-control-size);
       }
 
-      &:state(checkbox):state(checked)::part(control-mark) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(checkbox), [data-state~='checkbox']):is(:state(checked), [data-state~='checked'])::part(control-mark) {
         background-color: var(--checkbox-mark-color, white);
         -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
                 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
       }
-    }
-  }
 }
+
 @layer qti-components.interactions.corrections {
-  qti-choice-interaction {
-    & qti-simple-choice {
-      &:state(correct-response),
-      &[data-correct-response='true'] {
-        &::after {
+        :is(:is(qti-choice-interaction qti-simple-choice):is(:state(correct-response), [data-state~='correct-response']),[data-correct-response='true']:is(qti-choice-interaction qti-simple-choice))::after {
           content: '\02714';
           color: var(--qti-correct);
         }
-      }
-    }
-
-    &.qti-input-control-hidden qti-simple-choice {
       /*
        * Paint only. This used to set `border: 3px` over a 1px base and add `padding-right: 30px`,
        * so revealing the answer key grew every correct choice and reflowed the list around it.
@@ -2527,12 +2536,12 @@
        * costs no layout. The 30px that kept the label clear of the tick is reserved in the base
        * rule for this variant, whether or not a tick ever appears.
        */
-      &:state(correct-response),
-      &[data-correct-response='true'] {
+      :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(correct-response), [data-state~='correct-response']),[data-correct-response='true']:is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice) {
         border-color: var(--qti-correct) !important;
         box-shadow: inset 0 0 0 2px var(--qti-correct);
+      }
 
-        &::after {
+        :is(:is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(correct-response), [data-state~='correct-response']),[data-correct-response='true']:is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice))::after {
           content: '\02714';
           color: var(--qti-correct);
           position: absolute;
@@ -2541,94 +2550,75 @@
           font-size: 1.2em;
           font-weight: bold;
         }
-      }
 
       /* Candidate judgement follows checked/correct-response paint so it can
          recolour the same stable box without changing its geometry. */
-      &:state(candidate-correct) {
+      :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(candidate-correct), [data-state~='candidate-correct']) {
         --button-background-color: var(--qti-correct-light);
         --button-color: var(--qti-correct);
         --button-border-color: var(--qti-correct);
         --button-box-shadow: none;
       }
 
-      &:state(candidate-incorrect) {
+      :is(qti-choice-interaction.qti-input-control-hidden qti-simple-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         --button-background-color: var(--qti-incorrect-light);
         --button-color: var(--qti-incorrect);
         --button-border-color: var(--qti-incorrect);
         --button-box-shadow: none;
       }
-    }
-
-    &:not(.qti-input-control-hidden) qti-simple-choice {
-      &:state(candidate-correct) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(candidate-correct), [data-state~='candidate-correct']) {
         background-color: transparent;
+      }
 
-        &:state(radio):state(checked)::part(control),
-        &:state(checkbox):state(checked)::part(control) {
+        :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(candidate-correct), [data-state~='candidate-correct']):is(:state(radio), [data-state~='radio']):is(:state(checked), [data-state~='checked'])::part(control),:is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(candidate-correct), [data-state~='candidate-correct']):is(:state(checkbox), [data-state~='checkbox']):is(:state(checked), [data-state~='checked'])::part(control) {
           border-color: var(--qti-correct);
           background-color: var(--qti-correct);
         }
-      }
 
-      &:state(candidate-incorrect) {
+      :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         background-color: transparent;
+      }
 
-        &:state(radio):state(checked)::part(control),
-        &:state(checkbox):state(checked)::part(control) {
+        :is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']):is(:state(radio), [data-state~='radio']):is(:state(checked), [data-state~='checked'])::part(control),:is(qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']):is(:state(checkbox), [data-state~='checkbox']):is(:state(checked), [data-state~='checked'])::part(control) {
           border-color: var(--qti-incorrect);
           background-color: var(--qti-incorrect);
         }
-      }
-    }
-  }
-
-  .full-correct-response qti-choice-interaction {
-    qti-simple-choice {
-      &:state(radio):state(checked)::part(control),
-      &:state(checkbox):state(checked)::part(control) {
+      :is(:is(.full-correct-response qti-choice-interaction) qti-simple-choice):is(:state(radio), [data-state~='radio']):is(:state(checked), [data-state~='checked'])::part(control),:is(:is(.full-correct-response qti-choice-interaction) qti-simple-choice):is(:state(checkbox), [data-state~='checkbox']):is(:state(checked), [data-state~='checked'])::part(control) {
         background-color: var(--qti-answer-bg);
         color: var(--qti-answer-fg);
         border-color: var(--qti-answer-border);
       }
 
-      &:state(radio):state(checked)::part(control-mark),
-      &:state(checkbox):state(checked)::part(control-mark) {
+      :is(:is(.full-correct-response qti-choice-interaction) qti-simple-choice):is(:state(radio), [data-state~='radio']):is(:state(checked), [data-state~='checked'])::part(control-mark),:is(:is(.full-correct-response qti-choice-interaction) qti-simple-choice):is(:state(checkbox), [data-state~='checkbox']):is(:state(checked), [data-state~='checked'])::part(control-mark) {
         background-color: var(--qti-answer-fg);
       }
-    }
 
-    &.qti-input-control-hidden qti-simple-choice:state(checked) {
+    .qti-input-control-hidden:is(.full-correct-response qti-choice-interaction) qti-simple-choice:is(:state(checked), [data-state~='checked']) {
       background-color: var(--qti-answer-bg);
       color: var(--qti-answer-fg);
       border-color: var(--qti-answer-border);
     }
-  }
 }
+
 @layer qti-components.interactions.base {
-  qti-graphic-gap-match-interaction {
-    &.qti-selections-light {
-      &:state(dragzone-active)::part(drags) {
+      qti-graphic-gap-match-interaction.qti-selections-light:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
         background-color: var(--qti-selections-light-bg);
         border-color: var(--qti-selections-light-border);
       }
-      &:state(dragzone-enabled)::part(drags) {
+      qti-graphic-gap-match-interaction.qti-selections-light:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
         background-color: var(--qti-selections-light-bg);
       }
-    }
-    &.qti-selections-dark {
-      &:state(dragzone-active)::part(drags) {
+      qti-graphic-gap-match-interaction.qti-selections-dark:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
         background-color: var(--qti-selections-dark-bg);
         border-color: var(--qti-selections-dark-border);
       }
-      &:state(dragzone-enabled)::part(drags) {
+      qti-graphic-gap-match-interaction.qti-selections-dark:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
         background-color: var(--qti-selections-dark-bg);
       }
-    }
-    &:state(dragzone-active)::part(drags) {
+    qti-graphic-gap-match-interaction:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
-    &:state(dragzone-enabled)::part(drags) {
+    qti-graphic-gap-match-interaction:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
     /*
@@ -2643,17 +2633,14 @@
     /* A chip here is a tile filling its hotspot, so it centres its content — see
        qti-gap-img.styles.ts and qti-gap-text.styles.ts. gap-match's chips hug their text instead,
        which is why the justification is a variable rather than the element's default. */
-    & qti-gap-img,
-    & qti-gap-text {
+    qti-graphic-gap-match-interaction qti-gap-img,qti-graphic-gap-match-interaction qti-gap-text {
       --qti-drag-justify-content: center;
       cursor: grab;
     }
     /* The placed chip, in the hotspot's shadow. Plain too, to match the bank. Focus ring only. */
-    & qti-associable-hotspot::part(drag) {
-      &:focus {
+      :is(qti-graphic-gap-match-interaction qti-associable-hotspot::part(drag)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
     /*
      * The hotspot centres its chip in qti-associable-hotspot.styles.ts.
      *
@@ -2667,7 +2654,7 @@
      * Adding a rule would be a redundant restatement of this line. Left as a note rather than code
      * because the absence is the kind of thing that reads as an oversight.
      */
-    & qti-associable-hotspot {
+    qti-graphic-gap-match-interaction qti-associable-hotspot {
       border: 2px solid transparent;
       /* No .qti-selections-* branches in here. They used to sit inside both of these blocks as
          *descendant* selectors — and the class is on the interaction, an ancestor of this hotspot,
@@ -2675,19 +2662,20 @@
          see the :state(filled) rules below.
          A drop target lighting up mid-drag is not a "selection" anyway — Appendix B calls this
          Selections theming, and the selection is the chip once it has landed. */
-      &[enabled] {
+    }
+      [enabled]:is(qti-graphic-gap-match-interaction qti-associable-hotspot) {
         background-color: var(--qti-bg-active);
       }
-      &[active] {
+      [active]:is(qti-graphic-gap-match-interaction qti-associable-hotspot) {
         background-color: var(--qti-bg-active);
       }
-      &[disabled] {
+      [disabled]:is(qti-graphic-gap-match-interaction qti-associable-hotspot) {
         cursor: not-allowed;
-        &:not(:empty) {
+      }
+        [disabled]:is(qti-graphic-gap-match-interaction qti-associable-hotspot):not(:empty) {
           cursor: default !important;
         }
-      }
-      &:not(:empty) {
+      :is(qti-graphic-gap-match-interaction qti-associable-hotspot):not(:empty) {
         border-color: var(--qti-border) !important;
       }
       /*
@@ -2709,30 +2697,29 @@
 
       /* `flex: 1` left with the rest of the drop's layout; dropRegion in qti-base gives a hosted
          chip `flex: 0 0 auto`, which is the invariance rule this was quietly fighting. */
-      &:not(:empty) > * {
+      :is(qti-graphic-gap-match-interaction qti-associable-hotspot):not(:empty) > * {
         transform: rotate(0);
         box-shadow: 0 0 0 1px #e5e7eb;
       }
-    }
     /* `:not(:empty)` tested light-DOM children. The hotspot renders its chips into its own shadow
        root now, so it is always "empty" to a selector — `:state(filled)` is the occupancy hook. */
-    &.qti-selections-light qti-associable-hotspot:state(filled) {
+    qti-graphic-gap-match-interaction.qti-selections-light qti-associable-hotspot:is(:state(filled), [data-state~='filled']) {
       background-color: var(--qti-selections-light-bg) !important;
       border-color: var(--qti-selections-light-border) !important;
     }
-    &.qti-selections-dark qti-associable-hotspot:state(filled) {
+    qti-graphic-gap-match-interaction.qti-selections-dark qti-associable-hotspot:is(:state(filled), [data-state~='filled']) {
       background-color: var(--qti-selections-dark-bg) !important;
       border-color: var(--qti-selections-dark-border) !important;
     }
-    & img {
+    qti-graphic-gap-match-interaction img {
       margin: 0;
       padding: 0;
     }
-  }
 }
+
 @layer qti-components.interactions.states {
-  qti-graphic-gap-match-interaction qti-gap-img:state(placeholder),
-  qti-graphic-gap-match-interaction qti-gap-text:state(placeholder) {
+  qti-graphic-gap-match-interaction qti-gap-img:is(:state(placeholder), [data-state~='placeholder']),
+  qti-graphic-gap-match-interaction qti-gap-text:is(:state(placeholder), [data-state~='placeholder']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -2743,8 +2730,8 @@
     pointer-events: none;
   }
 
-  qti-graphic-gap-match-interaction qti-gap-img:state(dragging),
-  qti-graphic-gap-match-interaction qti-gap-text:state(dragging) {
+  qti-graphic-gap-match-interaction qti-gap-img:is(:state(dragging), [data-state~='dragging']),
+  qti-graphic-gap-match-interaction qti-gap-text:is(:state(dragging), [data-state~='dragging']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -2758,29 +2745,30 @@
     pointer-events: none;
   }
 
-  qti-graphic-gap-match-interaction qti-gap-img:state(return-anchor),
-  qti-graphic-gap-match-interaction qti-gap-text:state(return-anchor) {
+  qti-graphic-gap-match-interaction qti-gap-img:is(:state(return-anchor), [data-state~='return-anchor']),
+  qti-graphic-gap-match-interaction qti-gap-text:is(:state(return-anchor), [data-state~='return-anchor']) {
     border-color: var(--qti-drop-highlight-border-color);
     box-shadow: inset 0 0 0 var(--qti-drop-highlight-border-width, 2px)
       color-mix(in srgb, var(--qti-drop-highlight-border-color) 55%, transparent);
   }
 
-  qti-graphic-gap-match-interaction qti-gap-img:state(placeholder) > *,
-  qti-graphic-gap-match-interaction qti-gap-text:state(placeholder) > *,
-  qti-graphic-gap-match-interaction qti-gap-img:state(dragging) > *,
-  qti-graphic-gap-match-interaction qti-gap-text:state(dragging) > * {
+  qti-graphic-gap-match-interaction qti-gap-img:is(:state(placeholder), [data-state~='placeholder']) > *,
+  qti-graphic-gap-match-interaction qti-gap-text:is(:state(placeholder), [data-state~='placeholder']) > *,
+  qti-graphic-gap-match-interaction qti-gap-img:is(:state(dragging), [data-state~='dragging']) > *,
+  qti-graphic-gap-match-interaction qti-gap-text:is(:state(dragging), [data-state~='dragging']) > * {
     visibility: hidden;
   }
 
-  qti-graphic-gap-match-interaction qti-associable-hotspot:state(hover),
-  qti-graphic-gap-match-interaction qti-associable-hotspot:state(active) {
+  qti-graphic-gap-match-interaction qti-associable-hotspot:is(:state(hover), [data-state~='hover']),
+  qti-graphic-gap-match-interaction qti-associable-hotspot:is(:state(active), [data-state~='active']) {
     background-color: var(--qti-drop-highlight-bg);
   }
 
-  qti-graphic-gap-match-interaction qti-associable-hotspot:state(enabled) {
+  qti-graphic-gap-match-interaction qti-associable-hotspot:is(:state(enabled), [data-state~='enabled']) {
     background-color: var(--qti-drop-highlight-enabled-bg);
   }
 }
+
 @layer qti-components.interactions.corrections {
   /*
    * The one place this interaction joins the shared chip vocabulary: its chips take no card, but they
@@ -2795,22 +2783,23 @@
    * Moved here from qti-corrections.css, whose unscoped `:state(drag)` rule covered these chips
    * along with everyone else's.
    */
-  qti-graphic-gap-match-interaction :state(drag):state(candidate-correct),
-  qti-graphic-gap-match-interaction qti-associable-hotspot::part(drag):state(candidate-correct) {
+  qti-graphic-gap-match-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-graphic-gap-match-interaction qti-associable-hotspot::part(drag):is(:state(candidate-correct), [data-state~='candidate-correct']) {
     background-color: var(--qti-correct-light);
     color: var(--qti-correct);
     border-color: var(--qti-correct);
     box-shadow: none;
   }
 
-  qti-graphic-gap-match-interaction :state(drag):state(candidate-incorrect),
-  qti-graphic-gap-match-interaction qti-associable-hotspot::part(drag):state(candidate-incorrect) {
+  qti-graphic-gap-match-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  qti-graphic-gap-match-interaction qti-associable-hotspot::part(drag):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
     background-color: var(--qti-incorrect-light);
     color: var(--qti-incorrect);
     border-color: var(--qti-incorrect);
     box-shadow: none;
   }
 }
+
 @layer qti-components.interactions.base {
   qti-text-entry-interaction {
     background-color: var(--text-background-color, var(--qti-component-background-color));
@@ -2824,8 +2813,9 @@
     opacity: var(--text-opacity, var(--qti-component-opacity));
     filter: var(--text-filter, var(--qti-component-filter));
     cursor: text;
+  }
 
-    &::part(input) {
+    qti-text-entry-interaction::part(input) {
       color: var(--qti-fg);
       font-family: inherit;
       font-size: 1rem;
@@ -2836,31 +2826,29 @@
       border: none;
       background-color: transparent;
     }
-  }
 }
+
 @layer qti-components.interactions.corrections {
-  qti-text-entry-interaction {
-    &:state(candidate-partially-correct) {
+    qti-text-entry-interaction:is(:state(candidate-partially-correct), [data-state~='candidate-partially-correct']) {
       --text-background-color: var(--qti-partially-correct-light);
       --text-color: var(--qti-partially-correct);
       --text-border-color: var(--qti-partially-correct);
       --text-box-shadow: none;
     }
 
-    &:state(candidate-correct) {
+    qti-text-entry-interaction:is(:state(candidate-correct), [data-state~='candidate-correct']) {
       --text-background-color: var(--qti-correct-light);
       --text-color: var(--qti-correct);
       --text-border-color: var(--qti-correct);
       --text-box-shadow: none;
     }
 
-    &:state(candidate-incorrect) {
+    qti-text-entry-interaction:is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
       --text-background-color: var(--qti-incorrect-light);
       --text-color: var(--qti-incorrect);
       --text-border-color: var(--qti-incorrect);
       --text-box-shadow: none;
     }
-  }
 
   /* The answer key, moved here from the shared qti-corrections.css: it names this interaction, so
      this file owns it. */
@@ -2868,21 +2856,21 @@
     background-color: var(--qti-answer-bg);
     color: var(--qti-answer-fg);
     border-color: var(--qti-answer-border);
+  }
 
-    &::part(input) {
+    :is(.full-correct-response qti-text-entry-interaction)::part(input) {
       color: var(--qti-answer-fg);
     }
 
-    &::part(answer) {
+    :is(.full-correct-response qti-text-entry-interaction)::part(answer) {
       content: '';
       background-color: var(--qti-answer-fg);
       mask: var(--qti-check-mask) no-repeat center / contain;
       -webkit-mask: var(--qti-check-mask) no-repeat center / contain;
     }
-  }
 }
+
 @layer qti-components.interactions.base {
-  qti-extended-text-interaction {
     /*
      * One block, and the ORDER inside it matters.
      *
@@ -2896,7 +2884,7 @@
      * slot is unset, so it falls through to --qti-component-color, which is `inherit` — the same
      * colour the textarea already had.
      */
-    &::part(textarea) {
+    qti-extended-text-interaction::part(textarea) {
       color: var(--qti-fg);
       font-family: inherit;
       font-size: 1rem;
@@ -2954,14 +2942,14 @@
      * that makes the preserved indentation legible. Typography only — the box does not move, so
      * the layout-invariance contract holds.
      */
-    &[format='preformatted']::part(textarea) {
+    qti-extended-text-interaction[format='preformatted']::part(textarea) {
       font-family: monospace;
       -moz-tab-size: 2;
         -o-tab-size: 2;
            tab-size: 2;
     }
-  }
 }
+
 /*
  * Corrections for the one interaction that cannot judge itself.
  *
@@ -2981,8 +2969,7 @@
  * positioned by the component and painted by ::part(correction-*) in qti-corrections.css.
  */
 @layer qti-components.interactions.corrections {
-  qti-extended-text-interaction {
-    &:state(candidate-correct)::part(textarea) {
+    qti-extended-text-interaction:is(:state(candidate-correct), [data-state~='candidate-correct'])::part(textarea) {
       --text-background-color: var(--qti-correct-light);
       --text-color: var(--qti-correct);
       --text-border-color: var(--qti-correct);
@@ -2995,20 +2982,19 @@
        verbatim from the dead class-based rules, where it had never rendered and so was never seen to
        be wrong. With --qti-fg now correctly resolving to `inherit`, it would have been more visibly
        wrong still. */
-    &:state(candidate-partially-correct)::part(textarea) {
+    qti-extended-text-interaction:is(:state(candidate-partially-correct), [data-state~='candidate-partially-correct'])::part(textarea) {
       --text-background-color: var(--qti-partially-correct-light);
       --text-color: var(--qti-partially-correct);
       --text-border-color: var(--qti-partially-correct);
       --text-box-shadow: none;
     }
 
-    &:state(candidate-incorrect)::part(textarea) {
+    qti-extended-text-interaction:is(:state(candidate-incorrect), [data-state~='candidate-incorrect'])::part(textarea) {
       --text-background-color: var(--qti-incorrect-light);
       --text-color: var(--qti-incorrect);
       --text-border-color: var(--qti-incorrect);
       --text-box-shadow: none;
     }
-  }
 }
 /* This interaction's chip vocabulary — the bank chip, the placed chip, and the floating clone. One
    such block per drag-drop interaction, opt-in; graphic-gap-match deliberately declares none. See
@@ -3026,7 +3012,7 @@
    sat on document.body it was in a different tree from the adopted stylesheet, and nothing — no
    part, no attribute — could style it. */
 @layer qti-components.global {
-  qti-gap-match-interaction :state(drag),
+  qti-gap-match-interaction :is(:state(drag), [data-state~='drag']),
   [data-drag-clone][data-drag-interaction='qti-gap-match-interaction'] {
     /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
@@ -3077,7 +3063,7 @@
     filter: var(--drag-filter, var(--qti-component-filter));
   }
 
-  qti-gap-match-interaction :state(drag)::part(control)::before,
+  qti-gap-match-interaction :is(:state(drag), [data-state~='drag'])::part(control)::before,
   qti-gap-match-interaction::part(drag-control)::before,
   qti-gap-match-interaction ::part(drag-control)::before,
   [data-drag-clone][data-drag-interaction='qti-gap-match-interaction']::part(control)::before {
@@ -3092,21 +3078,21 @@
     -webkit-mask: var(--qti-grip-mask) no-repeat center / contain;
   }
 }
+
 @layer qti-components.interactions.base {
-  qti-gap-match-interaction {
     /* No qti-selections-light / -dark here. Appendix B.1 of the QTI 3 implementation guide defines
        that class pair for qti-hotspot-interaction and qti-graphic-gap-match-interaction only, and no
        item in this repo ever set it on a gap-match interaction. What was here overrode the neutral
        drag-bank highlight below with --qti-light-* and --qti-dark-* colours that nothing could reach. */
-    &:state(dragzone-active)::part(drags) {
+    qti-gap-match-interaction:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
-    &:state(dragzone-enabled)::part(drags) {
+    qti-gap-match-interaction:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
     /* Editor fake-drag projected into a filled <qti-gap>'s shadow. Same `drag`
        styling so the editor preview matches runtime when a gap is filled. */
-    & qti-gap::part(drag) {
+    qti-gap-match-interaction qti-gap::part(drag) {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -3154,20 +3140,20 @@
       color: var(--drag-color, var(--qti-component-color));
       opacity: var(--drag-opacity, var(--qti-component-opacity));
       filter: var(--drag-filter, var(--qti-component-filter));
-      &:hover {
+    }
         @media (hover: hover) {
+      :is(qti-gap-match-interaction qti-gap::part(drag)):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
       }
-      &:focus {
+  }
+      :is(qti-gap-match-interaction qti-gap::part(drag)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
-    & qti-gap-text {
+    qti-gap-match-interaction qti-gap-text {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -3215,25 +3201,25 @@
       color: var(--drag-color, var(--qti-component-color));
       opacity: var(--drag-opacity, var(--qti-component-opacity));
       filter: var(--drag-filter, var(--qti-component-filter));
-      &[dragging] {
+    }
+      [dragging]:is(qti-gap-match-interaction qti-gap-text) {
         pointer-events: none;
         rotate: -2deg;
         --drag-box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
       }
-      &:hover {
         @media (hover: hover) {
+      :is(qti-gap-match-interaction qti-gap-text):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
       }
-      &:focus {
+  }
+      :is(qti-gap-match-interaction qti-gap-text):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
-    & qti-gap {
+    qti-gap-match-interaction qti-gap {
       background-color: var(--drop-background-color, var(--qti-component-background-color));
       background-image: var(--drop-background-image, var(--qti-component-background-image));
       border-width: var(--drop-border-width, var(--qti-component-border-width));
@@ -3261,22 +3247,23 @@
        * every word on the line the instant a chip landed — the exact reflow qti-gap.styles.ts and
        * drag-drop.invariance.spec.ts exist to prevent.
        */
-      &:state(filled):is(:not([match-max]), [match-max='1']) {
+    }
+      :is(qti-gap-match-interaction qti-gap):is(:state(filled), [data-state~='filled']):is(:not([match-max]),[match-max='1']) {
         --drop-border-color: transparent;
       }
 
-      &[disabled] {
+      [disabled]:is(qti-gap-match-interaction qti-gap) {
         cursor: not-allowed;
         /* `:not(:empty)` tested light-DOM children; the gap renders its chips into its own shadow
            root now, so it is always "empty" to a selector. `:state(filled)` is the occupancy hook. */
-        &:state(filled) {
+      }
+        [disabled]:is(qti-gap-match-interaction qti-gap):is(:state(filled), [data-state~='filled']) {
           cursor: default !important;
         }
-      }
-      &[enabled] {
+      [enabled]:is(qti-gap-match-interaction qti-gap) {
         background-color: var(--qti-bg-active);
       }
-      &[active] {
+      [active]:is(qti-gap-match-interaction qti-gap) {
         background-color: var(--qti-bg-active);
       }
       /* The gap's own box — inline-flex, centred, baseline-aligned — is in qti-gap.styles.ts. */
@@ -3305,17 +3292,15 @@
        */
       /* `flex: 0 0 auto` is dropRegion's, in qti-base — a drop hosts a chip, it never sizes one.
          The rotate reset and the outline are paint. */
-      &::part(drag) {
+      :is(qti-gap-match-interaction qti-gap)::part(drag) {
         transform: rotate(0);
         /* Through the drag slot so a correction (which sets --drag-box-shadow) composes over it
            instead of this leaking onto a corrected chip. */
         --drag-box-shadow: 0 0 0 1px #e5e7eb;
       }
-    }
-  }
 
   /* The source and placed chip share one visual component. */
-  qti-gap-match-interaction qti-gap-text:state(drag),
+  qti-gap-match-interaction qti-gap-text:is(:state(drag), [data-state~='drag']),
   qti-gap-match-interaction qti-gap::part(drag) {
     /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
@@ -3366,6 +3351,7 @@
     filter: var(--drag-filter, var(--qti-component-filter));
   }
 }
+
 @layer qti-components.interactions.states {
   /* One chip vocabulary across the bank and placed drags for gap-match only. */
   qti-gap::part(drag) {
@@ -3418,7 +3404,7 @@
     filter: var(--drag-filter, var(--qti-component-filter));
   }
 
-  qti-gap-match-interaction qti-gap-text:state(placeholder) {
+  qti-gap-match-interaction qti-gap-text:is(:state(placeholder), [data-state~='placeholder']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -3429,7 +3415,7 @@
     pointer-events: none;
   }
 
-  qti-gap-match-interaction qti-gap-text:state(dragging) {
+  qti-gap-match-interaction qti-gap-text:is(:state(dragging), [data-state~='dragging']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -3443,21 +3429,22 @@
     pointer-events: none;
   }
 
-  qti-gap-match-interaction qti-gap-text:state(return-anchor) {
+  qti-gap-match-interaction qti-gap-text:is(:state(return-anchor), [data-state~='return-anchor']) {
     border-color: var(--qti-drop-highlight-border-color);
     box-shadow: inset 0 0 0 var(--qti-drop-highlight-border-width, 2px)
       color-mix(in srgb, var(--qti-drop-highlight-border-color) 55%, transparent);
   }
 
-  qti-gap-match-interaction qti-gap:state(hover),
-  qti-gap-match-interaction qti-gap:state(active) {
+  qti-gap-match-interaction qti-gap:is(:state(hover), [data-state~='hover']),
+  qti-gap-match-interaction qti-gap:is(:state(active), [data-state~='active']) {
     background-color: var(--qti-drop-highlight-bg);
   }
 
-  qti-gap-match-interaction qti-gap:state(enabled) {
+  qti-gap-match-interaction qti-gap:is(:state(enabled), [data-state~='enabled']) {
     background-color: var(--qti-drop-highlight-enabled-bg);
   }
 }
+
 @layer qti-components.interactions.corrections {
   /* A corrected chip — in the bank, and where it landed. Moved here from the shared
      qti-corrections.css, which claimed `:state(drag)` for EVERY interaction in one unscoped rule:
@@ -3470,16 +3457,16 @@
      DIRECTLY, which outranks the paint binding that reads --drag-background-color, so the solid fill
      they asked for never rendered — a corrected gap-text has always been the pale tint. Left in place
      they would have come alive the moment the shared rule left, and turned solid. */
-  qti-gap-match-interaction :state(drag):state(candidate-correct),
-  qti-gap::part(drag):state(candidate-correct) {
+  qti-gap-match-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-gap::part(drag):is(:state(candidate-correct), [data-state~='candidate-correct']) {
     --drag-background-color: var(--qti-correct-light);
     --drag-color: var(--qti-correct);
     --drag-border-color: var(--qti-correct);
     --drag-box-shadow: none;
   }
 
-  qti-gap-match-interaction :state(drag):state(candidate-incorrect),
-  qti-gap::part(drag):state(candidate-incorrect) {
+  qti-gap-match-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  qti-gap::part(drag):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
     --drag-background-color: var(--qti-incorrect-light);
     --drag-color: var(--qti-incorrect);
     --drag-border-color: var(--qti-incorrect);
@@ -3489,6 +3476,7 @@
   /* The bank is hidden by the interaction itself, on :host([answer-key]) — see
      qti-gap-match-interaction.styles.ts. */
 }
+
 /*
  * A hotspot is indicated by a RING, not a fill — matching QTI 3's own figures (Impl-Guide Fig
  * 54/55) and its shared-vocab wording ("selection lines and fills", the line being the ring).
@@ -3560,17 +3548,18 @@
     outline-offset: 2px;
   }
 }
+
 @layer qti-components.interactions.states {
   /*
    * Selected: a bold, saturated ring — the Fig-54 weight jump. Same var, so poly and box shapes
    * move together; poly additionally swaps to the bold outline mask.
    */
-  qti-hotspot-interaction qti-hotspot-choice:state(checked) {
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(checked), [data-state~='checked']) {
     --hs-ring: var(--qti-hotspot-ring-color, var(--qti-selected-bg));
     --hs-width: calc(var(--qti-hotspot-ring-width, 2px) * 2);
   }
 
-  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:state(checked) {
+  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:is(:state(checked), [data-state~='checked']) {
     mask-image: var(--qti-shape-outline-bold);
     -webkit-mask-image: var(--qti-shape-outline-bold);
   }
@@ -3604,35 +3593,36 @@
    * In `states` so it outranks the base ring and the `:hover` strengthen: hover must NOT reveal, or
    * sweeping the pointer hands back the answer regions one at a time.
    */
-  qti-hotspot-interaction.qti-unselected-hidden qti-hotspot-choice:not(:state(checked)):not(:focus-visible) {
+  qti-hotspot-interaction.qti-unselected-hidden qti-hotspot-choice:not(:is(:state(checked), [data-state~='checked'])):not(:focus-visible) {
     --hs-ring: transparent;
     --hs-halo: transparent;
   }
 
-  qti-hotspot-interaction qti-hotspot-choice:state(disabled),
-  qti-hotspot-interaction qti-hotspot-choice:state(readonly) {
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(disabled), [data-state~='disabled']),
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(readonly), [data-state~='readonly']) {
     cursor: not-allowed;
     pointer-events: none;
   }
 }
+
 @layer qti-components.interactions.corrections {
   /*
    * Correction and answer-key views recolour the same ring — one var, so circle and poly stay in
    * step. Answer-key first, so a candidate's own judgement wins when both are present.
    */
-  qti-hotspot-interaction qti-hotspot-choice:state(correct-response) {
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(correct-response), [data-state~='correct-response']) {
     --qti-hotspot-ring-color: var(--qti-answer-border);
   }
 
-  qti-hotspot-interaction qti-hotspot-choice:state(candidate-correct) {
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(candidate-correct), [data-state~='candidate-correct']) {
     --qti-hotspot-ring-color: var(--qti-correct);
   }
 
-  qti-hotspot-interaction qti-hotspot-choice:state(candidate-incorrect) {
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
     --qti-hotspot-ring-color: var(--qti-incorrect);
   }
 
-  .full-correct-response qti-hotspot-interaction qti-hotspot-choice:state(checked) {
+  .full-correct-response qti-hotspot-interaction qti-hotspot-choice:is(:state(checked), [data-state~='checked']) {
     --qti-hotspot-ring-color: var(--qti-answer-border);
   }
 
@@ -3642,22 +3632,23 @@
    * candidate-* hotspot is usually also :state(checked) and would be bold anyway; correct-response
    * on an unselected region is the case this covers.)
    */
-  qti-hotspot-interaction qti-hotspot-choice:state(correct-response),
-  qti-hotspot-interaction qti-hotspot-choice:state(candidate-correct),
-  qti-hotspot-interaction qti-hotspot-choice:state(candidate-incorrect),
-  .full-correct-response qti-hotspot-interaction qti-hotspot-choice:state(checked) {
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(correct-response), [data-state~='correct-response']),
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-hotspot-interaction qti-hotspot-choice:is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  .full-correct-response qti-hotspot-interaction qti-hotspot-choice:is(:state(checked), [data-state~='checked']) {
     --hs-ring: var(--qti-hotspot-ring-color);
     --hs-width: calc(var(--qti-hotspot-ring-width, 2px) * 2);
   }
 
-  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:state(correct-response),
-  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:state(candidate-correct),
-  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:state(candidate-incorrect),
-  .full-correct-response qti-hotspot-interaction qti-hotspot-choice[shape='poly']:state(checked) {
+  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:is(:state(correct-response), [data-state~='correct-response']),
+  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-hotspot-interaction qti-hotspot-choice[shape='poly']:is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  .full-correct-response qti-hotspot-interaction qti-hotspot-choice[shape='poly']:is(:state(checked), [data-state~='checked']) {
     mask-image: var(--qti-shape-outline-bold);
     -webkit-mask-image: var(--qti-shape-outline-bold);
   }
 }
+
 @layer qti-components.interactions.base {
   qti-hottext-interaction {
     --qti-hottext-selected-padding: var(--qti-padding-inline);
@@ -3678,118 +3669,91 @@
      * target's active border: pay the space once, up front, so the state has only to repaint. Every
      * hottext is now the size a selected one used to be, which is also a larger target to click.
      */
-    qti-hottext {
+  }
+    qti-hottext-interaction qti-hottext {
       padding: var(--qti-hottext-selected-padding);
     }
-
-    &.qti-input-control-hidden {
-      qti-hottext {
+      qti-hottext-interaction.qti-input-control-hidden qti-hottext {
         border: var(--qti-border);
         border-radius: var(--qti-border-radius);
 
         background: var(--qti-bg);
+      }
 
 
-        &:focus {
+        :is(qti-hottext-interaction.qti-input-control-hidden qti-hottext):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-      }
-    }
-
-    &.qti-unselected-hidden {
-      qti-hottext {
+      qti-hottext-interaction.qti-unselected-hidden qti-hottext {
         border: 0;
         border-radius: var(--qti-border-radius);
         background-color: transparent;
         outline: none;
         cursor: pointer;
+      }
 
 
-        &:focus {
+        :is(qti-hottext-interaction.qti-unselected-hidden qti-hottext):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-      }
-    }
-
-    &:not(.qti-input-control-hidden, .qti-unselected-hidden) {
-      qti-hottext {
+      qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext {
         border: var(--qti-border);
         border-radius: var(--qti-border-radius);
+      }
 
 
-        &:focus {
+        :is(qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-      }
-    }
-  }
 }
+
 @layer qti-components.interactions.states {
-  qti-hottext-interaction {
-    &.qti-input-control-hidden qti-hottext {
-      &:state(checked) {
+      :is(qti-hottext-interaction.qti-input-control-hidden qti-hottext):is(:state(checked), [data-state~='checked']) {
         border-color: var(--qti-border-active);
         background-color: var(--qti-selected-bg);
         color: var(--qti-selected-color);
       }
 
-      &:state(readonly) {
+      :is(qti-hottext-interaction.qti-input-control-hidden qti-hottext):is(:state(readonly), [data-state~='readonly']) {
         cursor: pointer;
       }
 
-      &:state(disabled) {
+      :is(qti-hottext-interaction.qti-input-control-hidden qti-hottext):is(:state(disabled), [data-state~='disabled']) {
         cursor: not-allowed;
       }
-    }
-
-    &.qti-unselected-hidden qti-hottext,
-    &:not(.qti-input-control-hidden, .qti-unselected-hidden) qti-hottext {
-      &:state(checked) {
+      :is(qti-hottext-interaction.qti-unselected-hidden qti-hottext,qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext):is(:state(checked), [data-state~='checked']) {
         background-color: var(--qti-selected-bg);
         color: var(--qti-selected-color);
       }
 
-      &:state(readonly) {
+      :is(qti-hottext-interaction.qti-unselected-hidden qti-hottext,qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext):is(:state(readonly), [data-state~='readonly']) {
         cursor: pointer;
       }
 
-      &:state(disabled) {
+      :is(qti-hottext-interaction.qti-unselected-hidden qti-hottext,qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext):is(:state(disabled), [data-state~='disabled']) {
         cursor: not-allowed;
       }
-    }
-  }
 }
+
 @layer qti-components.interactions.corrections {
-  qti-hottext-interaction {
-    qti-hottext {
-      &:state(correct-response),
-      &[data-correct-response='true'] {
-        &::after {
+        :is(:is(qti-hottext-interaction qti-hottext):is(:state(correct-response), [data-state~='correct-response']),[data-correct-response='true']:is(qti-hottext-interaction qti-hottext))::after {
           content: '\02714';
           color: var(--qti-correct);
         }
-      }
-    }
-
-    &.qti-input-control-hidden qti-hottext {
-      &:state(candidate-correct) {
+      :is(qti-hottext-interaction.qti-input-control-hidden qti-hottext):is(:state(candidate-correct), [data-state~='candidate-correct']) {
         background-color: var(--qti-correct-light);
         color: var(--qti-correct);
         border-color: var(--qti-correct);
         box-shadow: none;
       }
 
-      &:state(candidate-incorrect) {
+      :is(qti-hottext-interaction.qti-input-control-hidden qti-hottext):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         background-color: var(--qti-incorrect-light);
         color: var(--qti-incorrect);
         border-color: var(--qti-incorrect);
         box-shadow: none;
       }
-    }
-
-    &.qti-unselected-hidden qti-hottext,
-    &:not(.qti-input-control-hidden, .qti-unselected-hidden) qti-hottext {
-      &:state(candidate-correct) {
+      :is(qti-hottext-interaction.qti-unselected-hidden qti-hottext,qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext):is(:state(candidate-correct), [data-state~='candidate-correct']) {
         background-color: var(--qti-correct-light);
         color: var(--qti-correct);
         border-color: var(--qti-correct);
@@ -3797,21 +3761,19 @@
         box-shadow: inset 0 0 0 var(--qti-border-thickness) var(--qti-correct);
       }
 
-      &:state(candidate-incorrect) {
+      :is(qti-hottext-interaction.qti-unselected-hidden qti-hottext,qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         background-color: var(--qti-incorrect-light);
         color: var(--qti-incorrect);
         border-color: var(--qti-incorrect);
         box-shadow: none;
         box-shadow: inset 0 0 0 var(--qti-border-thickness) var(--qti-incorrect);
       }
-    }
-  }
 
-  .full-correct-response qti-hottext-interaction.qti-input-control-hidden qti-hottext:state(checked),
-  .full-correct-response qti-hottext-interaction.qti-unselected-hidden qti-hottext:state(checked),
+  .full-correct-response qti-hottext-interaction.qti-input-control-hidden qti-hottext:is(:state(checked), [data-state~='checked']),
+  .full-correct-response qti-hottext-interaction.qti-unselected-hidden qti-hottext:is(:state(checked), [data-state~='checked']),
   .full-correct-response
     qti-hottext-interaction:not(.qti-input-control-hidden, .qti-unselected-hidden)
-    qti-hottext:state(checked) {
+    qti-hottext:is(:state(checked), [data-state~='checked']) {
     background-color: var(--qti-answer-bg);
     color: var(--qti-answer-fg);
     border-color: var(--qti-answer-border);
@@ -3822,7 +3784,8 @@
     padding-inline-end: var(--qti-gap);
 
     /* The icon must not become the inline-flex container's first baseline item. */
-    &::before {
+  }
+    :is(.full-correct-response qti-hottext-interaction.qti-input-control-hidden qti-hottext:is(:state(checked), [data-state~='checked']),.full-correct-response qti-hottext-interaction.qti-unselected-hidden qti-hottext:is(:state(checked), [data-state~='checked']),.full-correct-response qti-hottext-interaction:not(.qti-input-control-hidden,.qti-unselected-hidden) qti-hottext:is(:state(checked), [data-state~='checked']))::before {
       content: '';
       background-color: var(--qti-answer-fg);
       mask: var(--qti-check-mask) no-repeat center / contain;
@@ -3836,8 +3799,8 @@
       width: 1em;
       height: 1em;
     }
-  }
 }
+
 @layer qti-components.interactions.base {
   qti-inline-choice-interaction {
     /* ── Host: the closed combobox, painted through the paint contract so a brand can restyle the
@@ -3858,7 +3821,8 @@
     --field-color: var(--qti-fg);
 
     /* ── Trigger: transparent inside the field border ───────────────────────── */
-    &::part(trigger) {
+  }
+    qti-inline-choice-interaction::part(trigger) {
       padding: var(--qti-padding-box);
       background: transparent;
       border: none;
@@ -3868,27 +3832,25 @@
       font-size: inherit;
     }
 
-    &::part(trigger):focus-visible {
+    qti-inline-choice-interaction::part(trigger):focus-visible {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       outline: none;
     }
 
-    &:state(disabled)::part(trigger),
-    &[disabled]::part(trigger) {
+    qti-inline-choice-interaction:is(:state(disabled), [data-state~='disabled'])::part(trigger),qti-inline-choice-interaction[disabled]::part(trigger) {
       cursor: not-allowed;
     }
 
-    &:state(readonly)::part(trigger),
-    &[readonly]::part(trigger) {
+    qti-inline-choice-interaction:is(:state(readonly), [data-state~='readonly'])::part(trigger),qti-inline-choice-interaction[readonly]::part(trigger) {
       cursor: pointer;
     }
 
     /* ── Chevron icon: color only; transform/mask/size live in shadow DOM ────── */
-    &::part(dropdown-icon) {
+    qti-inline-choice-interaction::part(dropdown-icon) {
       color: inherit;
     }
 
-    &::part(dropdown-icon-open) {
+    qti-inline-choice-interaction::part(dropdown-icon-open) {
       color: inherit;
     }
 
@@ -3906,7 +3868,7 @@
      * above it. Two spacing tokens for one box is the whole bug — the vocabulary says pick one and
      * spend it whole (see the CONTRACT note on --qti-padding-box / -inline / --qti-gap).
      */
-    &::part(menu) {
+    qti-inline-choice-interaction::part(menu) {
       background-color: var(--menu-background-color, var(--qti-component-background-color));
       background-image: var(--menu-background-image, var(--qti-component-background-image));
       border-width: var(--menu-border-width, var(--qti-component-border-width));
@@ -3940,18 +3902,18 @@
      * position-try fallback applied", so fixing that needs a signal from script, and it is not worth
      * one for the rarer case.
      */
-    &:state(open) {
+    qti-inline-choice-interaction:is(:state(open), [data-state~='open']) {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &::part(menu):popover-open {
+    qti-inline-choice-interaction::part(menu):popover-open {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
     /* ── Option rows ─────────────────────────────────────────────────────────── */
-    &::part(option) {
+    qti-inline-choice-interaction::part(option) {
       padding: var(--qti-padding-box);
       border: 0;
       /* Square, because a row now spans the full width of the menu. The menu's own radius still
@@ -3962,19 +3924,19 @@
       cursor: pointer;
     }
 
-    &::part(option):focus-visible {
+    qti-inline-choice-interaction::part(option):focus-visible {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       outline: none;
     }
 
-    &::part(option-selected) {
+    qti-inline-choice-interaction::part(option-selected) {
       background-color: var(--qti-bg-active);
     }
 
     /* ── Slotted qti-inline-choice elements (light DOM) ──────────────────────── */
     /* The option row's own box — flex, centred, single-line, clipped — is in
        qti-inline-choice.styles.ts. */
-    & qti-inline-choice {
+    qti-inline-choice-interaction qti-inline-choice {
       width: 100%;
       box-sizing: border-box;
       padding: var(--qti-padding-box);
@@ -3990,19 +3952,19 @@
       text-overflow: ellipsis;
     }
 
-    & qti-inline-choice:focus-visible {
+    qti-inline-choice-interaction qti-inline-choice:focus-visible {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       outline: none;
     }
 
-    & qti-inline-choice:state(checked) {
+    qti-inline-choice-interaction qti-inline-choice:is(:state(checked), [data-state~='checked']) {
       background-color: var(--qti-bg-active);
     }
 
     /* ── Validation message: a warning box, painted through the contract. Its non-neutral bits
        (fg text, amber-tinted fill, amber border) are --message-* overrides; width/style/radius
        come from the defaults. ── */
-    &::part(message) {
+    qti-inline-choice-interaction::part(message) {
       background-color: var(--message-background-color, var(--qti-component-background-color));
       background-image: var(--message-background-image, var(--qti-component-background-image));
       border-width: var(--message-border-width, var(--qti-component-border-width));
@@ -4018,8 +3980,8 @@
       --message-border-color: var(--qti-warning);
       padding: var(--qti-padding-box);
     }
-  }
 }
+
 @layer qti-components.interactions.corrections {
   /* The answer key, moved here from the shared qti-corrections.css: it names this interaction, so
      this file owns it. */
@@ -4027,36 +3989,34 @@
     background-color: var(--qti-answer-bg);
     color: var(--qti-answer-fg);
     border-color: var(--qti-answer-border);
+  }
 
-    &::part(value) {
+    :is(.full-correct-response qti-inline-choice-interaction)::part(value) {
       color: var(--qti-answer-fg);
     }
-  }
-
-  qti-inline-choice-interaction {
-    &:state(candidate-correct) {
+    qti-inline-choice-interaction:is(:state(candidate-correct), [data-state~='candidate-correct']) {
       --field-background-color: var(--qti-correct-light);
       --field-color: var(--qti-correct);
       --field-border-color: var(--qti-correct);
       --field-box-shadow: none;
+    }
 
-      &::part(trigger) {
+      qti-inline-choice-interaction:is(:state(candidate-correct), [data-state~='candidate-correct'])::part(trigger) {
         background: transparent;
       }
-    }
 
-    &:state(candidate-incorrect) {
+    qti-inline-choice-interaction:is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
       --field-background-color: var(--qti-incorrect-light);
       --field-color: var(--qti-incorrect);
       --field-border-color: var(--qti-incorrect);
       --field-box-shadow: none;
+    }
 
-      &::part(trigger) {
+      qti-inline-choice-interaction:is(:state(candidate-incorrect), [data-state~='candidate-incorrect'])::part(trigger) {
         background: transparent;
       }
-    }
-  }
 }
+
 /* This interaction's chip vocabulary — the bank chip, the placed chip, and the floating clone. One
    such block per drag-drop interaction, opt-in; graphic-gap-match deliberately declares none. See
    qti-states.css. Kept in the `global` layer, where these rules used to live, so cascade position is
@@ -4073,7 +4033,7 @@
    sat on document.body it was in a different tree from the adopted stylesheet, and nothing — no
    part, no attribute — could style it. */
 @layer qti-components.global {
-  qti-match-interaction :state(drag),
+  qti-match-interaction :is(:state(drag), [data-state~='drag']),
   [data-drag-clone][data-drag-interaction='qti-match-interaction'] {
     /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
@@ -4124,7 +4084,7 @@
     filter: var(--drag-filter, var(--qti-component-filter));
   }
 
-  qti-match-interaction :state(drag)::part(control)::before,
+  qti-match-interaction :is(:state(drag), [data-state~='drag'])::part(control)::before,
   qti-match-interaction::part(drag-control)::before,
   qti-match-interaction ::part(drag-control)::before,
   [data-drag-clone][data-drag-interaction='qti-match-interaction']::part(control)::before {
@@ -4139,6 +4099,7 @@
     -webkit-mask: var(--qti-grip-mask) no-repeat center / contain;
   }
 }
+
 @layer qti-components.interactions.base {
   /* Editor fake-drag projected into the target choice's `drop` shadow.
      Reuses the same `drag` styling so the editor preview matches what students
@@ -4191,19 +4152,19 @@
     color: var(--drag-color, var(--qti-component-color));
     opacity: var(--drag-opacity, var(--qti-component-opacity));
     filter: var(--drag-filter, var(--qti-component-filter));
-    &:hover {
+  }
       @media (hover: hover) {
+    :is(qti-simple-associable-choice::part(drag)):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
     }
-    &:focus {
+  }
+    :is(qti-simple-associable-choice::part(drag)):focus {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
     }
-  }
 
   qti-match-interaction:not(.qti-match-tabular) {
     /*
@@ -4225,9 +4186,11 @@
 
     /* The bank and the target grid are laid out in qti-match-interaction.styles.ts. Only the gaps
        are still set here — gap is spacing. */
-    & qti-simple-match-set:first-of-type {
+  }
+    qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
       gap: var(--qti-gap);
-      & qti-simple-associable-choice {
+    }
+      :is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type) qti-simple-associable-choice {
         /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -4275,44 +4238,41 @@
         color: var(--drag-color, var(--qti-component-color));
         opacity: var(--drag-opacity, var(--qti-component-opacity));
         filter: var(--drag-filter, var(--qti-component-filter));
-        &[dragging] {
+      }
+        [dragging]:is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type) qti-simple-associable-choice) {
           pointer-events: none;
           rotate: -2deg;
           --drag-box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
         }
-        &:hover {
           @media (hover: hover) {
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type) qti-simple-associable-choice):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
         }
-        &:focus {
+  }
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type) qti-simple-associable-choice):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-      }
-    }
-    & qti-simple-match-set:last-of-type {
+    qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type {
       gap: var(--qti-gap);
-      & > qti-simple-associable-choice {
-        & img {
+    }
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice) img {
           max-width: 100%;
           height: auto;
         }
-        &[disabled] {
-          &::part(drop) {
+          [disabled]:is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice)::part(drop) {
             cursor: not-allowed;
           }
-        }
         /*
          * No `[active]` highlight. Lifting a chip used to draw a solid `--qti-border-active` border
          * around every drop container at once, which says "any of these" — the least useful thing to
          * say. What the candidate wants to see is the hole the chip left, and that is painted on the
          * chip's own `:state(dragging)` / `:state(placeholder)`.
          */
-        &::part(drop) {
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice)::part(drop) {
           background-color: var(--drop-background-color, var(--qti-component-background-color));
           background-image: var(--drop-background-image, var(--qti-component-background-image));
           border-width: var(--drop-border-width, var(--qti-component-border-width));
@@ -4330,20 +4290,22 @@
              used to LEAK: `dragging` sets --component-box-shadow, one shared namespace, so it
              inherited onto every chip nested in the drop. That half is now structural — `dragging`
              sets --drag-box-shadow, which a drop does not read.) */
-          &:focus {
+        }
+          :is(:is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice)::part(drop)):focus {
             box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
           }
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice)::part(drop) {
           margin-top: var(--qti-gap);
           gap: var(--qti-gap);
         }
-        & > *:not(qti-simple-associable-choice) {
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice) > *:not(qti-simple-associable-choice) {
           pointer-events: none;
         }
         /* A chip nested in a drop target renders no drop region of its own. That is the component's
            own rule — qti-simple-associable-choice.styles.ts hides [part~='drop'] for both
            :host(:state(drag)) and :host([part~='drag']), which covers the placed clone this
            selector could not reach. */
-        & > qti-simple-associable-choice {
+        :is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice) > qti-simple-associable-choice {
           /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -4391,26 +4353,23 @@
           color: var(--drag-color, var(--qti-component-color));
           opacity: var(--drag-opacity, var(--qti-component-opacity));
           filter: var(--drag-filter, var(--qti-component-filter));
-          &:hover {
+        }
             @media (hover: hover) {
+          :is(:is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice) > qti-simple-associable-choice):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
           }
-          &:focus {
+  }
+          :is(:is(:is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type) > qti-simple-associable-choice) > qti-simple-associable-choice):focus {
             box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
           }
-        }
-      }
-    }
-  }
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(drag),
+    qti-simple-associable-choice:is(:state(drag), [data-state~='drag']),
   qti-match-interaction:not(.qti-match-tabular) qti-simple-associable-choice::part(drag) {
     /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
@@ -4460,35 +4419,32 @@
     opacity: var(--drag-opacity, var(--qti-component-opacity));
     filter: var(--drag-filter, var(--qti-component-filter));
   }
-
-  qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type > qti-simple-associable-choice {
     /* The label's `align-content` and the drop's `flex-grow` are the target card's own box, and live
        in qti-simple-associable-choice.styles.ts under :host(:state(droppable)). `box-sizing` went with
        them: border-box is already the reset, and content-box is what dropRegion sets. */
-    &::part(label) {
+    :is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type > qti-simple-associable-choice)::part(label) {
       border: var(--qti-border);
       border-top-left-radius: var(--qti-border-radius);
       border-top-right-radius: var(--qti-border-radius);
       padding: 0.5rem;
     }
 
-    &::part(drop) {
+    :is(qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type > qti-simple-associable-choice)::part(drop) {
       margin-top: 0;
       border-top: none;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       background: none;
     }
-
-  }
 }
+
 @layer qti-components.interactions.states {
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(dragging),
+    qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging']),
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(placeholder) {
+    qti-simple-associable-choice:is(:state(placeholder), [data-state~='placeholder']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -4501,42 +4457,42 @@
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(dragging)
+    qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging'])
     > *,
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(placeholder)
+    qti-simple-associable-choice:is(:state(placeholder), [data-state~='placeholder'])
     > * {
     visibility: hidden;
   }
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(dragging)::part(label),
+    qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging'])::part(label),
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(placeholder)::part(label) {
+    qti-simple-associable-choice:is(:state(placeholder), [data-state~='placeholder'])::part(label) {
     visibility: hidden;
   }
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:last-of-type
-    > qti-simple-associable-choice:state(hover)::part(drop),
+    > qti-simple-associable-choice:is(:state(hover), [data-state~='hover'])::part(drop),
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:last-of-type
-    > qti-simple-associable-choice:state(active)::part(drop) {
+    > qti-simple-associable-choice:is(:state(active), [data-state~='active'])::part(drop) {
     background-color: var(--qti-drop-highlight-bg);
   }
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:last-of-type
-    > qti-simple-associable-choice:state(enabled)::part(drop) {
+    > qti-simple-associable-choice:is(:state(enabled), [data-state~='enabled'])::part(drop) {
     background-color: var(--qti-drop-highlight-enabled-bg);
   }
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(dragging) {
+    qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging']) {
     border-color: var(--qti-drop-highlight-border-color);
     box-shadow: inset 0 0 0 var(--qti-drop-highlight-border-width, 2px)
       color-mix(in srgb, var(--qti-drop-highlight-border-color) 55%, transparent);
@@ -4544,12 +4500,13 @@
 
   qti-match-interaction:not(.qti-match-tabular)
     qti-simple-match-set:first-of-type
-    qti-simple-associable-choice:state(return-anchor) {
+    qti-simple-associable-choice:is(:state(return-anchor), [data-state~='return-anchor']) {
     border-color: var(--qti-drop-highlight-border-color);
     box-shadow: inset 0 0 0 var(--qti-drop-highlight-border-width, 2px)
       color-mix(in srgb, var(--qti-drop-highlight-border-color) 55%, transparent);
   }
 }
+
 @layer qti-components.interactions.corrections {
   /* A corrected chip — in the bank, and where it landed. Moved here from the shared
      qti-corrections.css, which claimed `:state(drag)` for EVERY interaction in one unscoped rule:
@@ -4561,16 +4518,16 @@
      same reason as gap-match's: the shared rule's DIRECT `background-color` outranked the binding
      that reads them, so their solid fill never rendered. They out-specify this block, so leaving them
      would have flipped a corrected placed chip from the pale tint to solid. */
-  qti-match-interaction:not(.qti-match-tabular) :state(drag):state(candidate-correct),
-  qti-match-interaction:not(.qti-match-tabular) qti-simple-associable-choice::part(drag):state(candidate-correct) {
+  qti-match-interaction:not(.qti-match-tabular) :is(:state(drag), [data-state~='drag']):is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-match-interaction:not(.qti-match-tabular) qti-simple-associable-choice::part(drag):is(:state(candidate-correct), [data-state~='candidate-correct']) {
     --drag-background-color: var(--qti-correct-light);
     --drag-color: var(--qti-correct);
     --drag-border-color: var(--qti-correct);
     --drag-box-shadow: none;
   }
 
-  qti-match-interaction:not(.qti-match-tabular) :state(drag):state(candidate-incorrect),
-  qti-match-interaction:not(.qti-match-tabular) qti-simple-associable-choice::part(drag):state(candidate-incorrect) {
+  qti-match-interaction:not(.qti-match-tabular) :is(:state(drag), [data-state~='drag']):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  qti-match-interaction:not(.qti-match-tabular) qti-simple-associable-choice::part(drag):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
     --drag-background-color: var(--qti-incorrect-light);
     --drag-color: var(--qti-incorrect);
     --drag-border-color: var(--qti-incorrect);
@@ -4580,19 +4537,19 @@
   /* The bank is hidden by the interaction itself, on :host([answer-key]) — see
      qti-match-interaction.styles.ts. */
 }
+
 @layer qti-components.interactions.base {
-  qti-match-interaction.qti-match-tabular {
-    &::part(corner) {
+    qti-match-interaction.qti-match-tabular::part(corner) {
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       background-color: var(--qti-bg-active);
     }
 
-    &::part(input-cell) {
+    qti-match-interaction.qti-match-tabular::part(input-cell) {
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       padding: var(--qti-padding-box);
       transition: background-color 0.1s ease;
     }
-    &::part(input-cell):hover {
+    qti-match-interaction.qti-match-tabular::part(input-cell):hover {
       background-color: var(--qti-bg-active);
     }
 
@@ -4603,7 +4560,7 @@
        ElementInternals and cannot carry `:state()` — and `::part(x):state(y)` needs the state on
        the part's own element. They therefore carry variant *part tokens*, which deliberately
        reuse the state vocabulary: radio | checkbox, checked, correct | incorrect. */
-    &::part(control radio) {
+    qti-match-interaction.qti-match-tabular::part(control radio) {
       background-color: var(--radio-background-color, var(--qti-component-background-color));
       background-image: var(--radio-background-image, var(--qti-component-background-image));
       border-width: var(--radio-border-width, var(--qti-component-border-width));
@@ -4620,7 +4577,7 @@
      edge, so a brand can square a radio off without having to out-specify this rule. */
       border-radius: var(--radio-border-radius, 100%);
     }
-    &::part(control checkbox) {
+    qti-match-interaction.qti-match-tabular::part(control checkbox) {
       background-color: var(--checkbox-background-color, var(--qti-component-background-color));
       background-image: var(--checkbox-background-image, var(--qti-component-background-image));
       border-width: var(--checkbox-border-width, var(--qti-component-border-width));
@@ -4634,7 +4591,7 @@
       width: var(--qti-control-size);
       height: var(--qti-control-size);
     }
-    &::part(control-mark) {
+    qti-match-interaction.qti-match-tabular::part(control-mark) {
       width: calc(var(--qti-control-size) * 0.625);
       height: calc(var(--qti-control-size) * 0.625);
     }
@@ -4642,19 +4599,18 @@
        outer box and the inner indicator independently. Scope the base inner-fill rules to
        `control-mark` so the classic dot-in-ring look stays intact; themes wanting the inverted
        look (outer filled, e.g. Kennisnet) add their own `::part(control checked)` rules. */
-    &::part(control-mark radio checked) {
+    qti-match-interaction.qti-match-tabular::part(control-mark radio checked) {
       /* 0.5 reproduces today's 8px at the default 1rem — see mark-size for why this is a fraction. */
       width: calc(var(--qti-control-size) * 0.5);
       height: calc(var(--qti-control-size) * 0.5);
       background-color: var(--radio-mark-color, white);
       border-radius: 100%;
     }
-    &::part(control-mark checkbox checked) {
+    qti-match-interaction.qti-match-tabular::part(control-mark checkbox checked) {
       background-color: var(--checkbox-mark-color, white);
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
               mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
     }
-  }
 
   /* Header cells — the two slotted <qti-simple-match-set>s have display:contents
      so their child choices act as row/column header cells. Written as a fully-
@@ -4684,79 +4640,71 @@
   qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice {
     text-align: center;
   }
-
-  qti-match-interaction.qti-match-tabular {
     /* The 1px gap is the grid's own background showing through, which is what draws the cell rules.
        Clipping it to the rounded corners is layout and lives in qti-match-interaction-tabular.styles.ts. */
-    &::part(grid) {
+    qti-match-interaction.qti-match-tabular::part(grid) {
       gap: 1px;
       background-color: var(--qti-border-color);
       border: var(--qti-border-thickness) solid var(--qti-border-color);
       border-radius: var(--qti-border-radius);
     }
 
-    &::part(corner),
-    &::part(input-cell) {
+    qti-match-interaction.qti-match-tabular::part(corner),qti-match-interaction.qti-match-tabular::part(input-cell) {
       border: none;
       background-color: white;
     }
 
-    &::part(control checked) {
+    qti-match-interaction.qti-match-tabular::part(control checked) {
       border-color: var(--qti-primary);
       background-color: var(--qti-primary);
     }
 
-    &::part(control-mark radio checked) {
+    qti-match-interaction.qti-match-tabular::part(control-mark radio checked) {
       background-color: white;
       width: calc(var(--qti-control-size) * 0.5);
       height: calc(var(--qti-control-size) * 0.5);
     }
 
-    &::part(control-mark checkbox checked) {
+    qti-match-interaction.qti-match-tabular::part(control-mark checkbox checked) {
       background-color: white;
     }
-  }
 
   qti-match-interaction.qti-match-tabular qti-simple-match-set qti-simple-associable-choice {
     border: none;
     background-color: white;
   }
 }
+
 @layer qti-components.interactions.corrections {
-  qti-match-interaction.qti-match-tabular {
     /* Correct / incorrect overlays — border on the outer box, and a matching fill on the inner
        indicator when checked. */
-    &::part(control correct) {
+    qti-match-interaction.qti-match-tabular::part(control correct) {
       border-color: var(--qti-correct);
     }
-    &::part(control incorrect) {
+    qti-match-interaction.qti-match-tabular::part(control incorrect) {
       border-color: var(--qti-incorrect);
     }
 
-    &::part(control checked correct) {
+    qti-match-interaction.qti-match-tabular::part(control checked correct) {
       border-color: var(--qti-correct);
       background-color: var(--qti-correct);
     }
 
-    &::part(control checked incorrect) {
+    qti-match-interaction.qti-match-tabular::part(control checked incorrect) {
       border-color: var(--qti-incorrect);
       background-color: var(--qti-incorrect);
     }
-  }
-
-  .full-correct-response qti-match-interaction.qti-match-tabular {
-    &::part(control checked) {
+    :is(.full-correct-response qti-match-interaction.qti-match-tabular)::part(control checked) {
       background-color: var(--qti-answer-bg);
       color: var(--qti-answer-fg);
       border-color: var(--qti-answer-border);
     }
 
-    &::part(control-mark radio checked),
-    &::part(control-mark checkbox checked) {
+    :is(.full-correct-response qti-match-interaction.qti-match-tabular)::part(control-mark radio checked),:is(.full-correct-response qti-match-interaction.qti-match-tabular)::part(control-mark checkbox checked) {
       background-color: var(--qti-answer-fg);
     }
-  }
 }
+
 /* This interaction's chip vocabulary — the bank chip, the placed chip, and the floating clone. One
    such block per drag-drop interaction, opt-in; graphic-gap-match deliberately declares none. See
    qti-states.css. Kept in the `global` layer, where these rules used to live, so cascade position is
@@ -4773,7 +4721,7 @@
    sat on document.body it was in a different tree from the adopted stylesheet, and nothing — no
    part, no attribute — could style it. */
 @layer qti-components.global {
-  qti-order-interaction :state(drag),
+  qti-order-interaction :is(:state(drag), [data-state~='drag']),
   [data-drag-clone][data-drag-interaction='qti-order-interaction'] {
     /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
@@ -4824,7 +4772,7 @@
     filter: var(--drag-filter, var(--qti-component-filter));
   }
 
-  qti-order-interaction :state(drag)::part(control)::before,
+  qti-order-interaction :is(:state(drag), [data-state~='drag'])::part(control)::before,
   qti-order-interaction::part(drag-control)::before,
   qti-order-interaction ::part(drag-control)::before,
   [data-drag-clone][data-drag-interaction='qti-order-interaction']::part(control)::before {
@@ -4839,19 +4787,15 @@
     -webkit-mask: var(--qti-grip-mask) no-repeat center / contain;
   }
 }
+
 @layer qti-components.interactions.base {
-  qti-order-interaction {
-    &:state(dragzone-active)::part(drags) {
+    qti-order-interaction:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
-    &:state(dragzone-enabled)::part(drags) {
+    qti-order-interaction:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
-    &::part(drag),
-    & qti-simple-choice,
-    /* Editor fake-drag projected into the interaction's drop-target shadow.
-       Same `drag` styling so editor previews match runtime visuals. */
-    &::part(drag) {
+    qti-order-interaction::part(drag),qti-order-interaction qti-simple-choice,qti-order-interaction::part(drag) {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -4899,30 +4843,30 @@
       color: var(--drag-color, var(--qti-component-color));
       opacity: var(--drag-opacity, var(--qti-component-opacity));
       filter: var(--drag-filter, var(--qti-component-filter));
-      &[dragging] {
+    }
+      [dragging]:is(qti-order-interaction::part(drag),qti-order-interaction qti-simple-choice,qti-order-interaction::part(drag)) {
         pointer-events: none;
         rotate: -2deg;
         --drag-box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
       }
-      &:hover {
         @media (hover: hover) {
+      :is(qti-order-interaction::part(drag),qti-order-interaction qti-simple-choice,qti-order-interaction::part(drag)):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
       }
-      &:focus {
+  }
+      :is(qti-order-interaction::part(drag),qti-order-interaction qti-simple-choice,qti-order-interaction::part(drag)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
     /* Editor fake-drag projected into the interaction's drop-target shadow.
        Same `drag` styling so editor previews match runtime visuals.
        Kept as its own block (separate from the runtime-drag selector list
        above) because a CSS comment between commas inside a nested selector
        list is silently dropped by Chrome's nesting parser. */
-    &::part(drag) {
+    qti-order-interaction::part(drag) {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -4970,21 +4914,21 @@
       color: var(--drag-color, var(--qti-component-color));
       opacity: var(--drag-opacity, var(--qti-component-opacity));
       filter: var(--drag-filter, var(--qti-component-filter));
-      &:hover {
+    }
         @media (hover: hover) {
+      :is(qti-order-interaction::part(drag)):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
       }
-      &:focus {
+  }
+      :is(qti-order-interaction::part(drag)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
     /* The drag's box — flex, centred, clipped — is in qti-order-interaction.styles.ts. */
-    &::part(drag) {
+    qti-order-interaction::part(drag) {
       /*
        * No `width: 100%`. It stretched a placed chip to its slot, which is why order was the one
        * entry in CHIP_BOX_KNOWN_BAD ("the placed chip stretches to fill its drop slot") — a 55px
@@ -5003,28 +4947,28 @@
      * The drop's flags are part tokens rather than attributes: an attribute selector cannot follow
      * `::part()`, and a <div> cannot carry a custom state (attachInternals throws). See setDropFlag.
      */
-    &::part(active) {
+    qti-order-interaction::part(active) {
       background-color: var(--qti-bg-active);
     }
 
-    &::part(enabled) {
+    qti-order-interaction::part(enabled) {
       background-color: var(--qti-bg-active);
     }
 
     /* A filled drop hides its dashed outline and drop-here glyph. Hides — the border keeps its
        width, or the column shifts 2px the instant a chip lands. */
-    &::part(filled) {
+    qti-order-interaction::part(filled) {
       --qti-drop-border: var(--qti-border-thickness, 1px) solid transparent;
       --qti-drop-bg-img: none;
     }
 
-    &::part(drops) {
+    qti-order-interaction::part(drops) {
       gap: var(--qti-gap);
     }
-    &::part(drags) {
+    qti-order-interaction::part(drags) {
       gap: var(--qti-gap);
     }
-    &::part(drop) {
+    qti-order-interaction::part(drop) {
       background-color: var(--drop-background-color, var(--qti-component-background-color));
       background-image: var(--drop-background-image, var(--qti-component-background-image));
       border-width: var(--drop-border-width, var(--qti-component-border-width));
@@ -5036,20 +4980,17 @@
       opacity: var(--drop-opacity, var(--qti-component-opacity));
       filter: var(--drop-filter, var(--qti-component-filter));
       border-style: var(--drop-border-style, dashed);
-      &[enabled] {
+    }
+      [enabled]:is(qti-order-interaction::part(drop)) {
         background-color: var(--qti-bg-active);
       }
-      &:focus {
+      :is(qti-order-interaction::part(drop)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
-    &::part(active) {
+    qti-order-interaction::part(active) {
       background-color: var(--qti-bg-active);
     }
-  }
-
-  qti-order-interaction {
-    &::part(drops) {
+    qti-order-interaction::part(drops) {
       margin: 0;
       border-radius: var(--qti-border-radius);
     }
@@ -5059,18 +5000,18 @@
        overhang the row by the border (42px row, 44px drop), which the drop's padding then doubled.
        It also defeated `:has(qti-simple-choice) [part~='drop'] { align-self: flex-start }` in
        qti-order-interaction.styles.ts. */
-    &::part(drop) {
+    qti-order-interaction::part(drop) {
       border: var(--qti-drop-border, var(--qti-border-thickness) dashed var(--qti-border-color));
       border-radius: var(--qti-border-radius);
       background-color: transparent;
       background-image: var(--qti-drop-bg-img, revert-layer);
     }
 
-    &::part(active) {
+    qti-order-interaction::part(active) {
       background-color: var(--qti-bg-active);
     }
 
-    &::part(enabled) {
+    qti-order-interaction::part(enabled) {
       background-color: var(--qti-bg-active);
     }
 
@@ -5081,7 +5022,7 @@
        overlay (apps/e2e/src/stories/kennisnet/kennisnet.css), not here. In the base theme a placed
        chip is just the neutral chip (@mixin drag), and its corrections route through --drag-*
        like every other chip. */
-    & qti-simple-choice {
+    qti-order-interaction qti-simple-choice {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -5131,7 +5072,7 @@
       filter: var(--drag-filter, var(--qti-component-filter));
     }
 
-    &::part(container) {
+    qti-order-interaction::part(container) {
       gap: 2rem;
     }
 
@@ -5148,16 +5089,13 @@
      *     the bank above the drops" — that is what the qti-choices-top/bottom/left/right classes
      *     already do, and wiring orientation to them is a behaviour change, not a move.
      */
-    &[orientation='vertical'] {
-      & qti-simple-choice,
-      &::part(drag) {
+      qti-order-interaction[orientation='vertical'] qti-simple-choice,qti-order-interaction[orientation='vertical']::part(drag) {
         width: auto;
       }
-    }
-  }
 }
+
 @layer qti-components.interactions.states {
-  qti-order-interaction qti-simple-choice:state(placeholder) {
+  qti-order-interaction qti-simple-choice:is(:state(placeholder), [data-state~='placeholder']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -5168,7 +5106,7 @@
     pointer-events: none;
   }
 
-  qti-order-interaction qti-simple-choice:state(dragging) {
+  qti-order-interaction qti-simple-choice:is(:state(dragging), [data-state~='dragging']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -5182,7 +5120,7 @@
     pointer-events: none;
   }
 
-  qti-order-interaction qti-simple-choice:state(return-anchor) {
+  qti-order-interaction qti-simple-choice:is(:state(return-anchor), [data-state~='return-anchor']) {
     border-color: var(--qti-drop-highlight-border-color);
     box-shadow: inset 0 0 0 var(--qti-drop-highlight-border-width, 2px)
       color-mix(in srgb, var(--qti-drop-highlight-border-color) 55%, transparent);
@@ -5197,6 +5135,7 @@
     background-color: var(--qti-drop-highlight-enabled-bg);
   }
 }
+
 @layer qti-components.interactions.corrections {
   /*
    * Judgement paint, via the shared mixin — every other drag-drop interaction already uses it.
@@ -5220,16 +5159,16 @@
      `[data-drag-clone]:state(candidate-*)` went with it and is deliberately NOT reproduced — a clone
      carries no custom states at all, because cloneNode does not copy ElementInternals (measured), so
      that selector never matched anything. */
-  qti-order-interaction :state(drag):state(candidate-correct),
-  qti-order-interaction::part(drag):state(candidate-correct) {
+  qti-order-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-order-interaction::part(drag):is(:state(candidate-correct), [data-state~='candidate-correct']) {
     --drag-background-color: var(--qti-correct-light);
     --drag-color: var(--qti-correct);
     --drag-border-color: var(--qti-correct);
     --drag-box-shadow: none;
   }
 
-  qti-order-interaction :state(drag):state(candidate-incorrect),
-  qti-order-interaction::part(drag):state(candidate-incorrect) {
+  qti-order-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  qti-order-interaction::part(drag):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
     --drag-background-color: var(--qti-incorrect-light);
     --drag-color: var(--qti-incorrect);
     --drag-border-color: var(--qti-incorrect);
@@ -5239,6 +5178,7 @@
   /* The bank is hidden by the interaction itself, on :host([answer-key]) — see
      qti-order-interaction.styles.ts. */
 }
+
 /* This interaction's chip vocabulary — the bank chip, the placed chip, and the floating clone. One
    such block per drag-drop interaction, opt-in; graphic-gap-match deliberately declares none. See
    qti-states.css. Kept in the `global` layer, where these rules used to live, so cascade position is
@@ -5260,7 +5200,7 @@
    and text colour from the removed rule and nothing else. Deleting that rule without this block
    turned the associate bank chips transparent, square and un-grabbable — measured, not guessed. */
 @layer qti-components.global {
-  qti-associate-interaction :state(drag),
+  qti-associate-interaction :is(:state(drag), [data-state~='drag']),
   [data-drag-clone][data-drag-interaction='qti-associate-interaction'] {
     /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
@@ -5311,7 +5251,7 @@
     filter: var(--drag-filter, var(--qti-component-filter));
   }
 
-  qti-associate-interaction :state(drag)::part(control)::before,
+  qti-associate-interaction :is(:state(drag), [data-state~='drag'])::part(control)::before,
   qti-associate-interaction::part(drag-control)::before,
   qti-associate-interaction ::part(drag-control)::before,
   [data-drag-clone][data-drag-interaction='qti-associate-interaction']::part(control)::before {
@@ -5326,8 +5266,8 @@
     -webkit-mask: var(--qti-grip-mask) no-repeat center / contain;
   }
 }
+
 @layer qti-components.interactions.base {
-  qti-associate-interaction {
     /*
      * NO `--drag-border-color: transparent` here, and that absence is the rule.
      *
@@ -5343,20 +5283,17 @@
      * Associate was the only interaction doing this; match, order and gap-match all let the bank
      * chip take --qti-component-border-color, and now so does this one.
      */
-    & qti-simple-associable-choice {
+    qti-associate-interaction qti-simple-associable-choice {
       padding: var(--qti-drag-padding);
     }
 
-    &:state(dragzone-active) slot[name='qti-simple-associable-choice'] {
+    qti-associate-interaction:is(:state(dragzone-active), [data-state~='dragzone-active']) slot[name='qti-simple-associable-choice'] {
       background-color: var(--qti-bg-active);
     }
-    &:state(dragzone-enabled) slot[name='qti-simple-associable-choice'] {
+    qti-associate-interaction:is(:state(dragzone-enabled), [data-state~='dragzone-enabled']) slot[name='qti-simple-associable-choice'] {
       background-color: var(--qti-bg-active);
     }
-    & qti-simple-associable-choice::part(drag),
-    /* A placed chip lives in a shadow root; `::part(drag)` is the only way in. This used to be
-       `::part(qti-simple-associable-choice)`, a part named after the tag. */
-    &::part(drag) {
+    qti-associate-interaction qti-simple-associable-choice::part(drag),qti-associate-interaction::part(drag) {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -5404,29 +5341,29 @@
       color: var(--drag-color, var(--qti-component-color));
       opacity: var(--drag-opacity, var(--qti-component-opacity));
       filter: var(--drag-filter, var(--qti-component-filter));
-      &:hover {
+    }
         @media (hover: hover) {
+      :is(qti-associate-interaction qti-simple-associable-choice::part(drag),qti-associate-interaction::part(drag)):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
       }
-      &:focus {
+  }
+      :is(qti-associate-interaction qti-simple-associable-choice::part(drag),qti-associate-interaction::part(drag)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-      &[dragging] {
+      [dragging]:is(qti-associate-interaction qti-simple-associable-choice::part(drag),qti-associate-interaction::part(drag)) {
         pointer-events: none;
         rotate: -2deg;
         --drag-box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
       }
-    }
     /* Editor fake-drag projected into the interaction's drop-target shadow.
        Kept as a separate block (not merged into the comma list above)
        because a CSS comment between commas in a nested selector list is
        silently dropped by Chrome's nesting parser. */
-    &::part(drag) {
+    qti-associate-interaction::part(drag) {
       /* Structural — the load-bearing box, never state-switched (layout-invariance contract).
      box-sizing is deliberate: the clone is appended to document.body outside reset.css's
      @scope, so it inherits no border-box from anywhere else and this sets it. */
@@ -5474,29 +5411,29 @@
       color: var(--drag-color, var(--qti-component-color));
       opacity: var(--drag-opacity, var(--qti-component-opacity));
       filter: var(--drag-filter, var(--qti-component-filter));
-      &:hover {
+    }
         @media (hover: hover) {
+      :is(qti-associate-interaction::part(drag)):hover {
     background-color: color-mix(
       in srgb,
       var(--drag-background-color, var(--qti-component-background-color)) 92%,
       black
     );
-  }
       }
-      &:focus {
+  }
+      :is(qti-associate-interaction::part(drag)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
     /* `display: grid` lives in qti-associate-interaction.styles.ts, which already declares it on
        [part~='drop'] alongside the drop's min-height/min-width. */
     /* A filled drop hides its dashed edge — see the note in qti-gap-match-interaction.css. Every
        associate drop holds exactly one chip (the div never carries match-max), so no capacity guard
        is needed here. Colour only: the width stays, or the row shifts when a chip lands. */
-    &::part(filled) {
+    qti-associate-interaction::part(filled) {
       --drop-border-color: transparent;
     }
 
-    &::part(drop) {
+    qti-associate-interaction::part(drop) {
       background-color: var(--drop-background-color, var(--qti-component-background-color));
       background-image: var(--drop-background-image, var(--qti-component-background-image));
       border-width: var(--drop-border-width, var(--qti-component-border-width));
@@ -5509,7 +5446,7 @@
       filter: var(--drop-filter, var(--qti-component-filter));
       border-style: var(--drop-border-style, dashed);
     }
-    &::part(drop):focus {
+    qti-associate-interaction::part(drop):focus {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
     }
 
@@ -5524,15 +5461,15 @@
     * Deleted here: `&::part(drop)[dragging] { @mixin act }`. An attribute selector after ::part()
      * never matches; that rule has never applied.
      */
-    &::part(active) {
+    qti-associate-interaction::part(active) {
       background-color: var(--qti-bg-active);
     }
 
-    &::part(enabled) {
+    qti-associate-interaction::part(enabled) {
       background-color: var(--qti-bg-active);
     }
-  }
 }
+
 @layer qti-components.interactions.states {
   qti-simple-associable-choice::part(drag),
   qti-associate-interaction::part(drag) {
@@ -5594,7 +5531,7 @@
     background-color: var(--qti-drop-highlight-enabled-bg);
   }
 
-  qti-associate-interaction qti-simple-associable-choice:state(placeholder) {
+  qti-associate-interaction qti-simple-associable-choice:is(:state(placeholder), [data-state~='placeholder']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -5606,7 +5543,7 @@
     pointer-events: none;
   }
 
-  qti-associate-interaction qti-simple-associable-choice:state(dragging) {
+  qti-associate-interaction qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging']) {
     /* The hole a spent/lifted chip leaves. Like the chip (see `drag`), it sets NO fill / border /
      shadow of its own — those inherit from the resting chip (neutral by default, the brand's fill
      when an overlay is on), so a brand can restyle the hole via a `:state(placeholder)` overlay
@@ -5620,22 +5557,23 @@
     pointer-events: none;
   }
 
-  qti-associate-interaction qti-simple-associable-choice:state(placeholder) > *,
-  qti-associate-interaction qti-simple-associable-choice:state(dragging) > * {
+  qti-associate-interaction qti-simple-associable-choice:is(:state(placeholder), [data-state~='placeholder']) > *,
+  qti-associate-interaction qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging']) > * {
     visibility: hidden;
   }
 
-  qti-associate-interaction qti-simple-associable-choice:state(placeholder)::part(label),
-  qti-associate-interaction qti-simple-associable-choice:state(dragging)::part(label) {
+  qti-associate-interaction qti-simple-associable-choice:is(:state(placeholder), [data-state~='placeholder'])::part(label),
+  qti-associate-interaction qti-simple-associable-choice:is(:state(dragging), [data-state~='dragging'])::part(label) {
     visibility: hidden;
   }
 
-  qti-associate-interaction qti-simple-associable-choice:state(return-anchor) {
+  qti-associate-interaction qti-simple-associable-choice:is(:state(return-anchor), [data-state~='return-anchor']) {
     border-color: var(--qti-drop-highlight-border-color);
     box-shadow: inset 0 0 0 var(--qti-drop-highlight-border-width, 2px)
       color-mix(in srgb, var(--qti-drop-highlight-border-color) 55%, transparent);
   }
 }
+
 @layer qti-components.interactions.corrections {
   /* A corrected chip — in the bank, and where it landed. Moved here from the shared
      qti-corrections.css, which claimed `:state(drag)` for EVERY interaction in one unscoped rule:
@@ -5643,18 +5581,18 @@
      `[data-drag-clone]:state(candidate-*)` went with it and is deliberately NOT reproduced — a clone
      carries no custom states at all, because cloneNode does not copy ElementInternals (measured), so
      that selector never matched anything. */
-  qti-associate-interaction :state(drag):state(candidate-correct),
-  qti-simple-associable-choice::part(drag):state(candidate-correct),
-  qti-associate-interaction::part(drag):state(candidate-correct) {
+  qti-associate-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-simple-associable-choice::part(drag):is(:state(candidate-correct), [data-state~='candidate-correct']),
+  qti-associate-interaction::part(drag):is(:state(candidate-correct), [data-state~='candidate-correct']) {
     --drag-background-color: var(--qti-correct-light);
     --drag-color: var(--qti-correct);
     --drag-border-color: var(--qti-correct);
     --drag-box-shadow: none;
   }
 
-  qti-associate-interaction :state(drag):state(candidate-incorrect),
-  qti-simple-associable-choice::part(drag):state(candidate-incorrect),
-  qti-associate-interaction::part(drag):state(candidate-incorrect) {
+  qti-associate-interaction :is(:state(drag), [data-state~='drag']):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  qti-simple-associable-choice::part(drag):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),
+  qti-associate-interaction::part(drag):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
     --drag-background-color: var(--qti-incorrect-light);
     --drag-color: var(--qti-incorrect);
     --drag-border-color: var(--qti-incorrect);
@@ -5664,6 +5602,7 @@
   /* The bank is hidden by the interaction itself, on :host([answer-key]) — see
      qti-associate-interaction.styles.ts. */
 }
+
 @layer qti-components.interactions.base {
   qti-graphic-order-interaction {
     --qti-graphic-order-pin-size: calc(var(--qti-select-point-marker-size, 1.5rem) * 1.2);
@@ -5671,8 +5610,9 @@
     --qti-graphic-order-pin-fill: var(--qti-background, #fff);
     --qti-graphic-order-pin-number-size: calc(var(--qti-graphic-order-pin-size) * 0.5);
     --qti-graphic-order-pin-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M192 500C145 434 106 386 77 344C49 305 32 272 32 224C32 135.6 103.6 64 192 64s160 71.6 160 160c0 48-17 81-45 120c-29 42-68 90-115 156z' fill='white' stroke='currentColor' stroke-width='28' stroke-linejoin='round'/%3E%3C/svg%3E");
+  }
 
-    & qti-hotspot-choice {
+    qti-graphic-order-interaction qti-hotspot-choice {
       width: 100%;
       height: 100%;
       background-color: color-mix(in srgb, var(--qti-border-color) 18%, transparent);
@@ -5681,63 +5621,58 @@
       transition:
         background-color var(--qti-motion-duration-fast, 0.15s) ease,
         border-color var(--qti-motion-duration-fast, 0.15s) ease;
+    }
 
-      &[shape='circle'] {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice) {
         min-width: calc(var(--qti-graphic-order-pin-size) * 0.6);
         min-height: calc(var(--qti-graphic-order-pin-size) * 0.6);
       }
 
-      &[shape='poly'] {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice) {
         background-color: color-mix(in srgb, var(--qti-border-color) 18%, transparent);
         box-shadow: none;
       }
 
-      &[shape='circle']:hover,
-      &[shape='rect']:hover,
-      &[shape='ellipse']:hover {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice):hover,[shape='rect']:is(qti-graphic-order-interaction qti-hotspot-choice):hover,[shape='ellipse']:is(qti-graphic-order-interaction qti-hotspot-choice):hover {
         background-color: color-mix(in srgb, var(--qti-border-active) 12%, transparent);
       }
 
-      &[shape='poly']:hover {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice):hover {
         background-color: color-mix(in srgb, var(--qti-border-active) 20%, transparent);
         box-shadow: none;
       }
 
-      &[shape='circle']:focus-visible,
-      &[shape='rect']:focus-visible,
-      &[shape='ellipse']:focus-visible {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice):focus-visible,[shape='rect']:is(qti-graphic-order-interaction qti-hotspot-choice):focus-visible,[shape='ellipse']:is(qti-graphic-order-interaction qti-hotspot-choice):focus-visible {
         outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
         outline-offset: 2px;
       }
 
-      &[shape='poly']:focus-visible {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice):focus-visible {
         outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
         outline-offset: 2px;
       }
 
-      &[aria-ordervalue] {
+      [aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice) {
         border: 0 !important;
         box-shadow: none;
         background-color: color-mix(in srgb, var(--qti-selected-bg) 35%, transparent);
       }
 
-      &[aria-ordervalue]:hover,
-      &[aria-ordervalue]:focus-visible {
+      [aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):hover,[aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):focus-visible {
         border-color: transparent !important;
       }
-      &[aria-ordercorrectvalue][aria-ordervalue]:not([shape='circle'])::after {
+      [aria-ordercorrectvalue][aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):not([shape='circle'])::after {
         content: 'C=' attr(aria-ordercorrectvalue) '  R=' attr(aria-ordervalue) !important;
         color: var(--qti-correct);
       }
-      &[aria-ordercorrectvalue]:not([aria-ordervalue]):not([shape='circle'])::after {
+      [aria-ordercorrectvalue]:is(qti-graphic-order-interaction qti-hotspot-choice):not([aria-ordervalue]):not([shape='circle'])::after {
         content: 'C=' attr(aria-ordercorrectvalue) !important;
         color: var(--qti-correct);
       }
-    }
 
     /* The pin's face. Where it sits — absolute, anchored to its hotspot, above the image — is
        placement, and lives in qti-graphic-order-interaction.styles.ts as ::slotted(). */
-    & .cito-graphic-order-marker {
+    qti-graphic-order-interaction .cito-graphic-order-marker {
       width: var(--qti-graphic-order-pin-size);
       height: var(--qti-graphic-order-pin-size);
       padding-top: calc(var(--qti-graphic-order-pin-size) * 0.2);
@@ -5750,47 +5685,41 @@
       pointer-events: none;
     }
 
-    & .cito-graphic-order-marker--poly {
+    qti-graphic-order-interaction .cito-graphic-order-marker--poly {
       width: calc(var(--qti-select-point-marker-size, 1.5rem) * 0.72);
       height: calc(var(--qti-select-point-marker-size, 1.5rem) * 0.72);
       font-size: calc(var(--qti-select-point-marker-size, 1.5rem) * 0.45);
       padding-top: calc(var(--qti-select-point-marker-size, 1.5rem) * 0.14);
     }
-  }
 }
+
 @layer qti-components.interactions.states {
-  qti-graphic-order-interaction {
-    & qti-hotspot-choice {
-      &:state(readonly) {
+      :is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(readonly), [data-state~='readonly']) {
         cursor: pointer;
       }
 
-      &:state(disabled) {
+      :is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(disabled), [data-state~='disabled']) {
         cursor: not-allowed;
       }
 
-      &[shape='circle']:state(checked),
-      &[shape='rect']:state(checked),
-      &[shape='ellipse']:state(checked) {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(checked), [data-state~='checked']),[shape='rect']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(checked), [data-state~='checked']),[shape='ellipse']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(checked), [data-state~='checked']) {
         background-color: color-mix(in srgb, var(--qti-selected-bg) 35%, transparent);
       }
 
-      &[shape='poly']:state(checked) {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(checked), [data-state~='checked']) {
         background-color: color-mix(in srgb, var(--qti-selected-bg) 40%, transparent);
         box-shadow: none;
       }
 
-      &[aria-ordervalue]:state(checked),
-      &[aria-ordervalue] {
+      [aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(checked), [data-state~='checked']),[aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice) {
         border-color: transparent !important;
       }
-    }
 
     /* No qti-selections-light / -dark here. Appendix B.1 of the QTI 3 implementation guide defines
        that class pair for qti-hotspot-interaction and qti-graphic-gap-match-interaction only, and no
        item in this repo ever set it on a graphic-order interaction. What was here overrode the neutral
        drag-bank highlight below with --qti-light-* and --qti-dark-* colours that nothing could reach. */
-    &:state(dragzone-active)::part(drags) {
+    qti-graphic-order-interaction:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
       /* Direct properties, not slots: ::part(drags) is a bare slot container with no paint role of
          its own (the other interactions paint it with `@mixin dropping`, also direct), so there is
          no --<role>-* to switch. Inlined from `@mixin act`. */
@@ -5798,85 +5727,70 @@
       background-color: var(--qti-bg-active);
     }
 
-    &:state(dragzone-enabled)::part(drags) {
+    qti-graphic-order-interaction:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
-  }
 }
+
 @layer qti-components.interactions.corrections {
-  qti-graphic-order-interaction {
-    & qti-hotspot-choice {
-      &[shape='circle']:state(correct-response),
-      &[shape='rect']:state(correct-response),
-      &[shape='ellipse']:state(correct-response) {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(correct-response), [data-state~='correct-response']),[shape='rect']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(correct-response), [data-state~='correct-response']),[shape='ellipse']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(correct-response), [data-state~='correct-response']) {
         background-color: color-mix(in srgb, var(--qti-answer-bg) 75%, transparent);
       }
 
-      &[shape='poly']:state(correct-response) {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(correct-response), [data-state~='correct-response']) {
         background-color: color-mix(in srgb, var(--qti-answer-bg) 80%, transparent);
         box-shadow: none;
       }
 
-      &[shape='circle']:state(candidate-correct),
-      &[shape='rect']:state(candidate-correct),
-      &[shape='ellipse']:state(candidate-correct) {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-correct), [data-state~='candidate-correct']),[shape='rect']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-correct), [data-state~='candidate-correct']),[shape='ellipse']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-correct), [data-state~='candidate-correct']) {
         background-color: color-mix(in srgb, var(--qti-correct) 35%, transparent);
       }
 
-      &[shape='poly']:state(candidate-correct) {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-correct), [data-state~='candidate-correct']) {
         background-color: color-mix(in srgb, var(--qti-correct) 40%, transparent);
         box-shadow: none;
       }
 
-      &[shape='circle']:state(candidate-incorrect),
-      &[shape='rect']:state(candidate-incorrect),
-      &[shape='ellipse']:state(candidate-incorrect) {
+      [shape='circle']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),[shape='rect']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']),[shape='ellipse']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         background-color: color-mix(in srgb, var(--qti-incorrect) 35%, transparent);
       }
 
-      &[shape='poly']:state(candidate-incorrect) {
+      [shape='poly']:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         background-color: color-mix(in srgb, var(--qti-incorrect) 40%, transparent);
         box-shadow: none;
       }
 
-      &[aria-ordervalue]:state(correct-response),
-      &[aria-ordervalue]:state(candidate-correct),
-      &[aria-ordervalue]:state(candidate-incorrect) {
+      [aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(correct-response), [data-state~='correct-response']),[aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-correct), [data-state~='candidate-correct']),[aria-ordervalue]:is(qti-graphic-order-interaction qti-hotspot-choice):is(:state(candidate-incorrect), [data-state~='candidate-incorrect']) {
         border-color: transparent !important;
       }
-    }
-  }
 }
+
 @layer qti-components.interactions.base {
-  qti-graphic-associate-interaction {
     /*
      * qti-associable-hotspot does not use ActiveElementMixin, so it carries no
      * checked/disabled/readonly custom states. Selection and correction are drawn as
      * ::part(line) / ::part(point) instead. Give it a `part="drag"` and the
      * ActiveElementMixin states before adding state-dependent rules here.
      */
-    & qti-associable-hotspot {
       /* `[shape='square']` used to be in this selector. It is not a QTI shape — the spec has
          circle, default, ellipse, poly and rect — positionShapes has no branch for it, and no item
          in the repo sets it. */
-      &[shape='circle'] {
+      [shape='circle']:is(qti-graphic-associate-interaction qti-associable-hotspot) {
         background-color: transparent;
-        &:focus {
+      }
+        [shape='circle']:is(qti-graphic-associate-interaction qti-associable-hotspot):focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-      }
-    }
-  }
 }
+
 @layer qti-components.interactions.states {
-  qti-graphic-associate-interaction {
 
 
     /* No qti-selections-light / -dark here. Appendix B.1 of the QTI 3 implementation guide defines
        that class pair for qti-hotspot-interaction and qti-graphic-gap-match-interaction only, and no
        item in this repo ever set it on a graphic-associate interaction. What was here overrode the neutral
        drag-bank highlight below with --qti-light-* and --qti-dark-* colours that nothing could reach. */
-    &:state(dragzone-active)::part(drags) {
+    qti-graphic-associate-interaction:is(:state(dragzone-active), [data-state~='dragzone-active'])::part(drags) {
       /* Direct properties, not slots: ::part(drags) is a bare slot container with no paint role of
          its own (the other interactions paint it with `@mixin dropping`, also direct), so there is
          no --<role>-* to switch. Inlined from `@mixin act`. */
@@ -5884,17 +5798,18 @@
       background-color: var(--qti-bg-active);
     }
 
-    &:state(dragzone-enabled)::part(drags) {
+    qti-graphic-associate-interaction:is(:state(dragzone-enabled), [data-state~='dragzone-enabled'])::part(drags) {
       background-color: var(--qti-bg-active);
     }
-  }
 }
+
 @layer qti-components.interactions.base{
 qti-slider-interaction {
   --qti-tick-color: rgb(229 231 235 / 100%);
   --qti-tick-width: 1px;
 }
 }
+
 @layer qti-components.interactions.base {
   qti-select-point-interaction {
     /*
@@ -5911,37 +5826,34 @@ qti-slider-interaction {
      * itself (`[part~='correct']`), which is deeper than this host declaration.
      */
     --qti-select-point-marker-color: var(--qti-primary);
-
-    &::part(point) {
-      &:focus {
+  }
+      :is(qti-select-point-interaction::part(point)):focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-    }
-  }
 }
+
 @layer qti-components.interactions.corrections {
-  qti-select-point-interaction {
     /* Same knob as the resting colour above — these set `color` before, which stopped reaching the
        marker once it was no longer painted with `currentColor`. */
-    &::part(correct) {
+    qti-select-point-interaction::part(correct) {
       --qti-select-point-marker-color: var(--qti-correct);
     }
 
-    &::part(incorrect) {
+    qti-select-point-interaction::part(incorrect) {
       --qti-select-point-marker-color: var(--qti-incorrect);
     }
-  }
 }
+
 @layer qti-components.interactions.base{
-qti-position-object-stage {
-  & qti-position-object-interaction {
+  qti-position-object-stage qti-position-object-interaction {
     /* no styles necessary, only layout styles, defined in the component */
   }
 }
-}
+
 @layer qti-components.interactions.base{
 /* `display: block` lives in qti-prompt.styles.ts, which already declares it on :host. */
 }
+
 @layer qti-components.interactions.corrections{
 /*
  * What is LEFT here is what the base class owns.
@@ -5998,14 +5910,14 @@ qti-position-object-stage {
 /* A cloned interaction presents the answer key rather than a candidate judgement. What is left
    here is the part no interaction owns: any chip, anywhere. The text-entry and inline-choice
    halves moved into their own files — those name one interaction each, so they belong to it. */
-.full-correct-response :state(drag),
+.full-correct-response :is(:state(drag), [data-state~='drag']),
 .full-correct-response ::part(drag) {
   background-color: var(--qti-answer-bg);
   color: var(--qti-answer-fg);
   border-color: var(--qti-answer-border);
 }
 
-.full-correct-response :state(drag)::part(control)::before,
+.full-correct-response :is(:state(drag), [data-state~='drag'])::part(control)::before,
 .full-correct-response ::part(drag-control)::before {
   content: '';
   background-color: var(--qti-answer-fg);
@@ -6013,6 +5925,7 @@ qti-position-object-stage {
   -webkit-mask: var(--qti-check-mask) no-repeat center / contain;
 }
 }
+
 @layer qti-components.elements{
 /* `display: block` is declared by the element itself, in qti-rubric-block.ts. */
 qti-rubric-block {
@@ -6023,14 +5936,17 @@ qti-rubric-block {
   margin-top: var(--qti-gap);
 }
 }
+
 @layer qti-components.elements{
 qti-feedback-inline::part(feedback) {
 }
 }
+
 @layer qti-components.elements{
 qti-feedback-block::part(feedback) {
 }
 }
+
 @layer qti-components.elements{
 /*
  * Neither selector below matches anything this repo renders — `qti-modal-feedback-custom` is not a
@@ -6049,6 +5965,7 @@ qti-feedback-block::part(feedback) {
   margin-top: var(--qti-gap);
 }
 }
+
 @layer qti-components.global{
 /*
  * Cross-interaction custom states.
@@ -6098,13 +6015,15 @@ qti-feedback-block::part(feedback) {
  * paint. If the double indication ever reads as too much, the fix is here or in the mixin, not
  * a display value.
  */
-:state(show-correct-response) {
+:is(:state(show-correct-response), [data-state~='show-correct-response']) {
   outline: var(--qti-border-thickness) dashed var(--qti-correct);
   outline-offset: 0.25rem;
 }
 }
+
 /* Item-shell structure (what is shown, what is hidden). Kept out of styles/qti-theme/ because it is
    structure rather than paint — that directory is where the no-layout-in-theme lint rule applies. */
+
 @layer qti-components.global{
 
 /**