@qti-components/theme 2.0.0 → 2.0.1

package/dist/item.css

@@ -1,7 +1,20 @@
-@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
+
+@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;
+  qti-components.interactions.brand, qti-components.interactions.states,
+  qti-components.interactions.corrections, qti-components.elements, qti-components.overrides;
+/*
+ * Layer order, weakest first.
+ *
+ *   qti-base        the QTI 3.0 shared class vocabulary and its layout overrides
+ *   qti-components  everything this theme paints (sublayers declared in styles/qti-theme/index.css)
+ *   qti-extended    reserved for the consumer — empty here, and it beats everything above
+ *
+ * Every stylesheet below is assigned a layer, at its import wherever the file belongs to just one.
+ * 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 */
 /* ============================
    QTI 3 shared css
@@ -18,51 +31,66 @@
    11. Layout
    12. Other QTI 3 presentation utilities
    ============================ */
+
 /* ==========
   Display css
   =========== */
+
 .qti-display-inline {
   display: inline;
 }
+
 .qti-display-inline-block {
   display: inline-block;
 }
+
 .qti-display-block {
   display: block;
 }
+
 .qti-display-flex {
   display: flex;
 }
+
 .qti-display-inline-flex {
   display: inline-flex;
 }
+
 .qti-display-grid {
   display: grid;
 }
+
 .qti-display-inline-grid {
   display: inline-grid;
 }
+
 .qti-display-table {
   display: table;
 }
+
 .qti-display-table-cell {
   display: table-cell;
 }
+
 .qti-display-table-row {
   display: table-row;
 }
+
 .qti-display-list-item {
   display: list-item;
 }
+
 .qti-display-inherit {
   display: inherit;
 }
+
 /* 
    * hidden to screen readers and sighted
    */
 .qti-hidden {
   display: none;
 }
+
 /*
   * visible to screen readers, hidden to sighted
    */
@@ -75,48 +103,62 @@
   border: 0;
   margin: -1px;
 }
+
 /* =============================
      Special flex styles
      ============================= */
+
 .qti-flex-direction-column {
   flex-direction: column;
 }
+
 .qti-flex-direction-row {
   flex-direction: row;
 }
+
 .qti-flex-grow-1 {
   flex-grow: 1;
 }
+
 .qti-flex-grow-0 {
   flex-grow: 0;
 }
+
 /* =========
     Margin css
     ========== */
+
 /**
    * For margin Top and Bottom and Left and Right
    */
 .qti-margin-0 {
   margin: 0 !important;
 }
+
 .qti-margin-1 {
   margin: 0.25rem !important;
 }
+
 .qti-margin-2 {
   margin: 0.5rem !important;
 }
+
 .qti-margin-3 {
   margin: 1rem !important;
 }
+
 .qti-margin-4 {
   margin: 1.5rem !important;
 }
+
 .qti-margin-5 {
   margin: 3rem !important;
 }
+
 .qti-margin-auto {
   margin: auto !important;
 }
+
 /*
    For margin Left and Right
    */
@@ -124,30 +166,37 @@
   margin-right: 0 !important;
   margin-left: 0 !important;
 }
+
 .qti-margin-x-1 {
   margin-right: 0.25rem !important;
   margin-left: 0.25rem !important;
 }
+
 .qti-margin-x-2 {
   margin-right: 0.5rem !important;
   margin-left: 0.5rem !important;
 }
+
 .qti-margin-x-3 {
   margin-right: 1rem !important;
   margin-left: 1rem !important;
 }
+
 .qti-margin-x-4 {
   margin-right: 1.5rem !important;
   margin-left: 1.5rem !important;
 }
+
 .qti-margin-x-5 {
   margin-right: 3rem !important;
   margin-left: 3rem !important;
 }
+
 .qti-margin-x-auto {
   margin-right: auto !important;
   margin-left: auto !important;
 }
+
 /*
    For margin Top and Bottom
    */
@@ -155,150 +204,192 @@
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
+
 .qti-margin-y-1 {
   margin-top: 0.25rem !important;
   margin-bottom: 0.25rem !important;
 }
+
 .qti-margin-y-2 {
   margin-top: 0.5rem !important;
   margin-bottom: 0.5rem !important;
 }
+
 .qti-margin-y-3 {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
 }
+
 .qti-margin-y-4 {
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important;
 }
+
 .qti-margin-y-5 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important;
 }
+
 .qti-margin-y-auto {
   margin-top: auto !important;
   margin-bottom: auto !important;
 }
+
 /*
    For margin Top
    */
 .qti-margin-t-0 {
   margin-top: 0 !important;
 }
+
 .qti-margin-t-1 {
   margin-top: 0.25rem !important;
 }
+
 .qti-margin-t-2 {
   margin-top: 0.5rem !important;
 }
+
 .qti-margin-t-3 {
   margin-top: 1rem !important;
 }
+
 .qti-margin-t-4 {
   margin-top: 1.5rem !important;
 }
+
 .qti-margin-t-5 {
   margin-top: 3rem !important;
 }
+
 .qti-margin-t-auto {
   margin-top: auto !important;
 }
+
 /* 
   For margin Bottom
    */
 .qti-margin-b-0 {
   margin-bottom: 0 !important;
 }
+
 .qti-margin-b-1 {
   margin-bottom: 0.25rem !important;
 }
+
 .qti-margin-b-2 {
   margin-bottom: 0.5rem !important;
 }
+
 .qti-margin-b-3 {
   margin-bottom: 1rem !important;
 }
+
 .qti-margin-b-4 {
   margin-bottom: 1.5rem !important;
 }
+
 .qti-margin-b-5 {
   margin-bottom: 3rem !important;
 }
+
 .qti-margin-b-auto {
   margin-bottom: auto !important;
 }
+
 /*
    For margin Start LTR
    */
 .qti-margin-s-0 {
   margin-left: 0 !important;
 }
+
 .qti-margin-s-1 {
   margin-left: 0.25rem !important;
 }
+
 .qti-margin-s-2 {
   margin-left: 0.5rem !important;
 }
+
 .qti-margin-s-3 {
   margin-left: 1rem !important;
 }
+
 .qti-margin-s-4 {
   margin-left: 1.5rem !important;
 }
+
 .qti-margin-s-5 {
   margin-left: 3rem !important;
 }
+
 .qti-margin-s-auto {
   margin-left: auto !important;
 }
+
 /* 
   For margin End LTR
    */
 .qti-margin-e-0 {
   margin-right: 0 !important;
 }
+
 .qti-margin-e-1 {
   margin-right: 0.25rem !important;
 }
+
 .qti-margin-e-2 {
   margin-right: 0.5rem !important;
 }
+
 .qti-margin-e-3 {
   margin-right: 1rem !important;
 }
+
 .qti-margin-e-4 {
   margin-right: 1.5rem !important;
 }
+
 .qti-margin-e-5 {
   margin-right: 3rem !important;
 }
+
 .qti-margin-e-auto {
   margin-right: auto !important;
 }
+
 /* =========
     Padding css
     ========== */
+
 /*
   For padding Top and Bottom and Left and Right
    */
 .qti-padding-0 {
   padding: 0 !important;
 }
+
 .qti-padding-1 {
   padding: 0.25rem !important;
 }
+
 .qti-padding-2 {
   padding: 0.5rem !important;
 }
+
 .qti-padding-3 {
   padding: 1rem !important;
 }
+
 .qti-padding-4 {
   padding: 1.5rem !important;
 }
+
 .qti-padding-5 {
   padding: 3rem !important;
 }
+
 /*
    For padding Left and Right
    */
@@ -306,26 +397,32 @@
   padding-right: 0 !important;
   padding-left: 0 !important;
 }
+
 .qti-padding-x-1 {
   padding-right: 0.25rem !important;
   padding-left: 0.25rem !important;
 }
+
 .qti-padding-x-2 {
   padding-right: 0.5rem !important;
   padding-left: 0.5rem !important;
 }
+
 .qti-padding-x-3 {
   padding-right: 1rem !important;
   padding-left: 1rem !important;
 }
+
 .qti-padding-x-4 {
   padding-right: 1.5rem !important;
   padding-left: 1.5rem !important;
 }
+
 .qti-padding-x-5 {
   padding-right: 3rem !important;
   padding-left: 3rem !important;
 }
+
 /*
     For padding Top and Bottom
    */
@@ -333,727 +430,962 @@
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
+
 .qti-padding-y-1 {
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
 }
+
 .qti-padding-y-2 {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
+
 .qti-padding-y-3 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
 }
+
 .qti-padding-y-4 {
   padding-top: 1.5rem !important;
   padding-bottom: 1.5rem !important;
 }
+
 .qti-padding-y-5 {
   padding-top: 3rem !important;
   padding-bottom: 3rem !important;
 }
+
 /*
    For padding Top
    */
 .qti-padding-t-0 {
   padding-top: 0 !important;
 }
+
 .qti-padding-t-1 {
   padding-top: 0.25rem !important;
 }
+
 .qti-padding-t-2 {
   padding-top: 0.5rem !important;
 }
+
 .qti-padding-t-3 {
   padding-top: 1rem !important;
 }
+
 .qti-padding-t-4 {
   padding-top: 1.5rem !important;
 }
+
 .qti-padding-t-5 {
   padding-top: 3rem !important;
 }
+
 /*
    For padding Bottom
    */
 .qti-padding-b-0 {
   padding-bottom: 0 !important;
 }
+
 .qti-padding-b-1 {
   padding-bottom: 0.25rem !important;
 }
+
 .qti-padding-b-2 {
   padding-bottom: 0.5rem !important;
 }
+
 .qti-padding-b-3 {
   padding-bottom: 1rem !important;
 }
+
 .qti-padding-b-4 {
   padding-bottom: 1.5rem !important;
 }
+
 .qti-padding-b-5 {
   padding-bottom: 3rem !important;
 }
+
 /*
     For padding Start LTR
    */
 .qti-padding-s-0 {
   padding-left: 0 !important;
 }
+
 .qti-padding-s-1 {
   padding-left: 0.25rem !important;
 }
+
 .qti-padding-s-2 {
   padding-left: 0.5rem !important;
 }
+
 .qti-padding-s-3 {
   padding-left: 1rem !important;
 }
+
 .qti-padding-s-4 {
   padding-left: 1.5rem !important;
 }
+
 .qti-padding-s-5 {
   padding-left: 3rem !important;
 }
+
 /*
    For padding End LTR
    */
 .qti-padding-e-0 {
   padding-right: 0 !important;
 }
+
 .qti-padding-e-1 {
   padding-right: 0.25rem !important;
 }
+
 .qti-padding-e-2 {
   padding-right: 0.5rem !important;
 }
+
 .qti-padding-e-3 {
   padding-right: 1rem !important;
 }
+
 .qti-padding-e-4 {
   padding-right: 1.5rem !important;
 }
+
 .qti-padding-e-5 {
   padding-right: 3rem !important;
 }
+
 /* ====================
      Horizontal alignment
      ==================== */
+
 .qti-align-left {
   text-align: left;
 }
+
 .qti-align-center {
   text-align: center;
 }
+
 .qti-align-right {
   text-align: right;
 }
+
 /* ==================
      Vertical alignment
      ================== */
+
 .qti-valign-top {
   vertical-align: top;
 }
+
 .qti-valign-middle {
   vertical-align: middle;
 }
+
 .qti-valign-baseline {
   vertical-align: baseline;
 }
+
 .qti-valign-bottom {
   vertical-align: bottom;
 }
+
 /* =============
      Height styles
      ============= */
+
 .qti-height-0 {
   height: 0;
 }
+
 .qti-height-px {
   height: 1px;
 }
+
 .qti-height-0p5 {
   height: 0.125rem;
 }
+
 .qti-height-1 {
   height: 0.25rem;
 }
+
 .qti-height-1p5 {
   height: 0.375rem;
 }
+
 .qti-height-2 {
   height: 0.5rem;
 }
+
 .qti-height-2p5 {
   height: 0.625rem;
 }
+
 .qti-height-3 {
   height: 0.75rem;
 }
+
 .qti-height-3p5 {
   height: 0.875rem;
 }
+
 .qti-height-4 {
   height: 1rem;
 }
+
 .qti-height-5 {
   height: 1.25rem;
 }
+
 .qti-height-6 {
   height: 1.5rem;
 }
+
 .qti-height-7 {
   height: 1.75rem;
 }
+
 .qti-height-8 {
   height: 2rem;
 }
+
 .qti-height-9 {
   height: 2.25rem;
 }
+
 .qti-height-10 {
   height: 2.5rem;
 }
+
 .qti-height-11 {
   height: 2.75rem;
 }
+
 .qti-height-12 {
   height: 3rem;
 }
+
 .qti-height-14 {
   height: 3.5rem;
 }
+
 .qti-height-16 {
   height: 4rem;
 }
+
 .qti-height-20 {
   height: 5rem;
 }
+
 .qti-height-24 {
   height: 6rem;
 }
+
 .qti-height-28 {
   height: 7rem;
 }
+
 .qti-height-32 {
   height: 8rem;
 }
+
 .qti-height-36 {
   height: 9rem;
 }
+
 .qti-height-40 {
   height: 10rem;
 }
+
 .qti-height-44 {
   height: 11rem;
 }
+
 .qti-height-48 {
   height: 12rem;
 }
+
 .qti-height-52 {
   height: 13rem;
 }
+
 .qti-height-56 {
   height: 14rem;
 }
+
 .qti-height-60 {
   height: 15rem;
 }
+
 .qti-height-64 {
   height: 16rem;
 }
+
 .qti-height-72 {
   height: 18rem;
 }
+
 .qti-height-80 {
   height: 20rem;
 }
+
 .qti-height-96 {
   height: 24rem;
 }
+
 .qti-height-1-2 {
   height: 50%;
 }
+
 .qti-height-1-3 {
   height: 33.3333%;
 }
+
 .qti-height-2-3 {
   height: 66.6667%;
 }
+
 .qti-height-1-4 {
   height: 25%;
 }
+
 .qti-height-2-4 {
   height: 50%;
 }
+
 .qti-height-3-4 {
   height: 75%;
 }
+
 .qti-height-1-5 {
   height: 20%;
 }
+
 .qti-height-2-5 {
   height: 40%;
 }
+
 .qti-height-3-5 {
   height: 60%;
 }
+
 .qti-height-4-5 {
   height: 80%;
 }
+
 .qti-height-1-6 {
   height: 16.6667%;
 }
+
 .qti-height-2-6 {
   height: 33.3333%;
 }
+
 .qti-height-3-6 {
   height: 50%;
 }
+
 .qti-height-4-6 {
   height: 66.6667%;
 }
+
 .qti-height-5-6 {
   height: 83.3333%;
 }
+
 .qti-height-auto {
   height: auto;
 }
+
 .qti-height-full {
   height: 100%;
 }
+
 /* ============
      Width styles
      ============ */
+
 .qti-width-0 {
   width: 0;
 }
+
 .qti-width-px {
   width: 1px;
 }
+
 .qti-width-0p5 {
   width: 0.125rem;
 }
+
 .qti-width-1 {
   width: 0.25rem;
 }
+
 .qti-width-1p5 {
   width: 0.375rem;
 }
+
 .qti-width-2 {
   width: 0.5rem;
 }
+
 .qti-width-2p5 {
   width: 0.625rem;
 }
+
 .qti-width-3 {
   width: 0.75rem;
 }
+
 .qti-width-3p5 {
   width: 0.875rem;
 }
+
 .qti-width-4 {
   width: 1rem;
 }
+
 .qti-width-5 {
   width: 1.25rem;
 }
+
 .qti-width-6 {
   width: 1.5rem;
 }
+
 .qti-width-7 {
   width: 1.75rem;
 }
+
 .qti-width-8 {
   width: 2rem;
 }
+
 .qti-width-9 {
   width: 2.25rem;
 }
+
 .qti-width-10 {
   width: 2.5rem;
 }
+
 .qti-width-11 {
   width: 2.75rem;
 }
+
 .qti-width-12 {
   width: 3rem;
 }
+
 .qti-width-14 {
   width: 3.5rem;
 }
+
 .qti-width-16 {
   width: 4rem;
 }
+
 .qti-width-20 {
   width: 5rem;
 }
+
 .qti-width-24 {
   width: 6rem;
 }
+
 .qti-width-28 {
   width: 7rem;
 }
+
 .qti-width-32 {
   width: 8rem;
 }
+
 .qti-width-36 {
   width: 9rem;
 }
+
 .qti-width-40 {
   width: 10rem;
 }
+
 .qti-width-44 {
   width: 11rem;
 }
+
 .qti-width-48 {
   width: 12rem;
 }
+
 .qti-width-52 {
   width: 13rem;
 }
+
 .qti-width-56 {
   width: 14rem;
 }
+
 .qti-width-60 {
   width: 15rem;
 }
+
 .qti-width-64 {
   width: 16rem;
 }
+
 .qti-width-72 {
   width: 18rem;
 }
+
 .qti-width-80 {
   width: 20rem;
 }
+
 .qti-width-96 {
   width: 24rem;
 }
+
 .qti-width-auto {
   width: auto;
 }
+
 .qti-width-1-2 {
   width: 50%;
 }
+
 .qti-width-1-3 {
   width: 33.3333%;
 }
+
 .qti-width-2-3 {
   width: 66.6667%;
 }
+
 .qti-width-1-4 {
   width: 25%;
 }
+
 .qti-width-2-4 {
   width: 50%;
 }
+
 .qti-width-3-4 {
   width: 75%;
 }
+
 .qti-width-1-5 {
   width: 20%;
 }
+
 .qti-width-2-5 {
   width: 40%;
 }
+
 .qti-width-3-5 {
   width: 60%;
 }
+
 .qti-width-4-5 {
   width: 80%;
 }
+
 .qti-width-1-6 {
   width: 16.6667%;
 }
+
 .qti-width-2-6 {
   width: 33.3333%;
 }
+
 .qti-width-3-6 {
   width: 50%;
 }
+
 .qti-width-4-6 {
   width: 66.6667%;
 }
+
 .qti-width-5-6 {
   width: 83.3333%;
 }
+
 .qti-width-1-12 {
   width: 8.3333%;
 }
+
 .qti-width-2-12 {
   width: 16.6667%;
 }
+
 .qti-width-3-12 {
   width: 25%;
 }
+
 .qti-width-4-12 {
   width: 33.3333%;
 }
+
 .qti-width-5-12 {
   width: 41.6667%;
 }
+
 .qti-width-6-12 {
   width: 50%;
 }
+
 .qti-width-7-12 {
   width: 58.3333%;
 }
+
 .qti-width-8-12 {
   width: 66.6667%;
 }
+
 .qti-width-9-12 {
   width: 75%;
 }
+
 .qti-width-10-12 {
   width: 83.3333%;
 }
+
 .qti-width-11-12 {
   width: 91.6667%;
 }
+
 .qti-width-full,
 .qti-fullwidth {
   width: 100%;
 }
+
 /* ==================
      Text Indent styles
      ================== */
+
 .qti-text-indent-0 {
   text-indent: 0;
 }
+
 .qti-text-indent-px {
   text-indent: 1px;
 }
+
 .qti-text-indent-0p5 {
   text-indent: 0.125rem;
 }
+
 .qti-text-indent-1 {
   text-indent: 0.25rem;
 }
+
 .qti-text-indent-1p5 {
   text-indent: 0.375rem;
 }
+
 .qti-text-indent-2 {
   text-indent: 0.5rem;
 }
+
 .qti-text-indent-2p5 {
   text-indent: 0.625rem;
 }
+
 .qti-text-indent-3 {
   text-indent: 0.75rem;
 }
+
 .qti-text-indent-3p5 {
   text-indent: 0.875rem;
 }
+
 .qti-text-indent-4 {
   text-indent: 1rem;
 }
+
 .qti-text-indent-5 {
   text-indent: 1.25rem;
 }
+
 .qti-text-indent-6 {
   text-indent: 1.5rem;
 }
+
 .qti-text-indent-7 {
   text-indent: 1.75rem;
 }
+
 .qti-text-indent-8 {
   text-indent: 2rem;
 }
+
 .qti-text-indent-12 {
   text-indent: 3rem;
 }
+
 .qti-text-indent-16 {
   text-indent: 4rem;
 }
+
 .qti-text-indent-20 {
   text-indent: 5rem;
 }
+
 .qti-text-indent-24 {
   text-indent: 6rem;
 }
+
 .qti-text-indent-28 {
   text-indent: 7rem;
 }
+
 .qti-text-indent-32 {
   text-indent: 8rem;
 }
+
 /* =================
      List Style styles
      ================= */
+
 .qti-list-style-type-none {
   list-style-type: none;
 }
+
 .qti-list-style-type-disc {
   list-style-type: disc;
 }
+
 .qti-list-style-type-circle {
   list-style-type: circle;
 }
+
 .qti-list-style-type-square {
   list-style-type: square;
 }
+
 .qti-list-style-type-decimal {
   list-style-type: decimal;
 }
+
 .qti-list-style-type-decimal-leading-zero {
   list-style-type: decimal-leading-zero;
 }
+
 .qti-list-style-type-lower-alpha {
   list-style-type: lower-alpha;
 }
+
 .qti-list-style-type-upper-alpha {
   list-style-type: upper-alpha;
 }
+
 .qti-list-style-type-lower-roman {
   list-style-type: lower-roman;
 }
+
 .qti-list-style-type-upper-roman {
   list-style-type: upper-roman;
 }
+
 .qti-list-style-type-lower-latin {
   list-style-type: lower-latin;
 }
+
 .qti-list-style-type-upper-latin {
   list-style-type: upper-latin;
 }
+
 .qti-list-style-type-lower-greek {
   list-style-type: lower-greek;
 }
+
 .qti-list-style-type-arabic-indic {
   list-style-type: arabic-indic;
 }
+
 .qti-list-style-type-armenian {
   list-style-type: armenian;
 }
+
 .qti-list-style-type-lower-armenian {
   list-style-type: lower-armenian;
 }
+
 .qti-list-style-type-upper-armenian {
   list-style-type: upper-armenian;
 }
+
 .qti-list-style-type-bengali {
   list-style-type: bengali;
 }
+
 .qti-list-style-type-cambodian {
   list-style-type: cambodian;
 }
+
 .qti-list-style-type-simp-chinese-formal {
   list-style-type: simp-chinese-formal;
 }
+
 .qti-list-style-type-simp-chinese-informal {
   list-style-type: simp-chinese-informal;
 }
+
 .qti-list-style-type-trad-chinese-formal {
   list-style-type: trad-chinese-formal;
 }
+
 .qti-list-style-type-trad-chinese-informal {
   list-style-type: trad-chinese-informal;
 }
+
 .qti-list-style-type-cjk-ideographic {
   list-style-type: cjk-ideographic;
 }
+
 .qti-list-style-type-cjk-heavenly-stem {
   list-style-type: cjk-heavenly-stem;
 }
+
 .qti-list-style-type-cjk-earthly-branch {
   list-style-type: cjk-earthly-branch;
 }
+
 .qti-list-style-type-devanagari {
   list-style-type: devanagari;
 }
+
 .qti-list-style-type-ethiopic-halehame-ti-er {
   list-style-type: ethiopic-halehame-ti-er;
 }
+
 .qti-list-style-type-ethiopic-halehame-ti-et {
   list-style-type: ethiopic-halehame-ti-et;
 }
+
 .qti-list-style-type-ethiopic-halehame-am {
   list-style-type: ethiopic-halehame-am;
 }
+
 .qti-list-style-type-ethiopic-halehame {
   list-style-type: ethiopic-halehame;
 }
+
 .qti-list-style-type-georgian {
   list-style-type: georgian;
 }
+
 .qti-list-style-type-gujarati {
   list-style-type: gujarati;
 }
+
 .qti-list-style-type-gurmukhi {
   list-style-type: gurmukhi;
 }
+
 .qti-list-style-type-hangul {
   list-style-type: hangul;
 }
+
 .qti-list-style-type-hangul-consonant {
   list-style-type: hangul-consonant;
 }
+
 .qti-list-style-type-hebrew {
   list-style-type: hebrew;
 }
+
 .qti-list-style-type-hiragana {
   list-style-type: hiragana;
 }
+
 .qti-list-style-type-hiragana-iroha {
   list-style-type: hiragana-iroha;
 }
+
 .qti-list-style-type-khmer {
   list-style-type: khmer;
 }
+
 .qti-list-style-type-korean-hangul-formal {
   list-style-type: korean-hangul-formal;
 }
+
 .qti-list-style-type-korean-hanja-formal {
   list-style-type: korean-hanja-formal;
 }
+
 .qti-list-style-type-korean-hanja-informal {
   list-style-type: korean-hanja-informal;
 }
+
 .qti-list-style-type-lao {
   list-style-type: lao;
 }
+
 .qti-list-style-type-malayalam {
   list-style-type: malayalam;
 }
+
 .qti-list-style-type-mongolian {
   list-style-type: mongolian;
 }
+
 .qti-list-style-type-myanmar {
   list-style-type: myanmar;
 }
+
 .qti-list-style-type-oriya {
   list-style-type: oriya;
 }
+
 .qti-list-style-type-persian {
   list-style-type: persian;
 }
+
 .qti-list-style-type-thai {
   list-style-type: thai;
 }
+
 .qti-list-style-type-tibetan {
   list-style-type: tibetan;
 }
+
 .qti-list-style-type-telugu {
   list-style-type: telugu;
 }
+
 .qti-list-style-type-urdu {
   list-style-type: urdu;
 }
+
 /* =========================
      Other QTI 3 Presentation Utilities
      ========================= */
+
 .qti-bordered {
   border: 1px solid var(--table-border-color);
 }
+
 .qti-underline {
   text-decoration: underline;
   text-decoration-color: var(--foreground);
 }
+
 .qti-italic {
   font-style: italic;
 }
+
 .qti-well {
   min-height: 20px;
   padding: 19px;
@@ -1063,33 +1395,40 @@
   border-radius: 4px;
   box-shadow: var(--well-box-shadow);
 }
+
 /* Set writing-mode to vertical-rl 
      Typical for CJK vertical text */
 .qti-writing-mode-vertical-rl {
   writing-mode: vertical-rl;
 }
+
 /* Set writing-mode to vertical-lr
      Typical for Mongolian vertical text  */
 .qti-writing-mode-vertical-lr {
   writing-mode: vertical-lr;
 }
+
 /* Set writing-mode to horizontal-tb 
      Browser default */
 .qti-writing-mode-horizontal-tb {
   writing-mode: horizontal-tb;
 }
+
 /* Float an element left */
 .qti-float-left {
   float: left;
 }
+
 /* Float an element right */
 .qti-float-right {
   float: right;
 }
+
 /* Remove a float */
 .qti-float-none {
   float: none;
 }
+
 /* Clearfix Hack to apply to a container of 
    floated content that overflows the container. */
 .qti-float-clearfix::after {
@@ -1097,6 +1436,7 @@
   clear: both;
   display: table;
 }
+
 .qti-float-clear-left
   .qti-float-clear-right
   .qti-float-clear-both
@@ -1105,121 +1445,138 @@
   .qti-text-orientation-upright {
   text-orientation: upright;
 }
-@layer qti-base {
-  .qti-layout-row {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    gap: 2.1276595745%;
-  }
+}
+@layer qti-base{
 
-  .qti-layout-row [class*='qti-layout-col']:not(:empty) {
-    box-sizing: border-box;
-  }
+.qti-layout-row {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 2.1276595745%;
+}
 
-  .qti-layout-row [class*='qti-layout-col']:empty {
-    width: 0;
-    overflow: hidden; /* to fully collapse if there’s padding or borders */
-  }
+.qti-layout-row [class*='qti-layout-col']:not(:empty) {
+  box-sizing: border-box;
+}
 
-  .qti-layout-col1 {
-    width: 6.3829787234%;
-  }
+.qti-layout-row [class*='qti-layout-col']:empty {
+  width: 0;
+  overflow: hidden; /* to fully collapse if there’s padding or borders */
+}
 
-  .qti-layout-col2 {
-    width: 14.8936170213%;
-  }
+.qti-layout-col1 {
+  width: 6.3829787234%;
+}
 
-  .qti-layout-col3 {
-    width: 23.4042553191%;
-  }
+.qti-layout-col2 {
+  width: 14.8936170213%;
+}
 
-  .qti-layout-col4 {
-    width: 31.914893617%;
-  }
+.qti-layout-col3 {
+  width: 23.4042553191%;
+}
 
-  .qti-layout-col5 {
-    width: 40.4255319149%;
-  }
+.qti-layout-col4 {
+  width: 31.914893617%;
+}
 
-  .qti-layout-col6 {
-    width: 48.9361702128%;
-  }
+.qti-layout-col5 {
+  width: 40.4255319149%;
+}
 
-  .qti-layout-col7 {
-    width: 57.4468085106%;
-  }
+.qti-layout-col6 {
+  width: 48.9361702128%;
+}
 
-  .qti-layout-col8 {
-    width: 65.9574468085%;
-  }
+.qti-layout-col7 {
+  width: 57.4468085106%;
+}
 
-  .qti-layout-col9 {
-    width: 74.4680851064%;
-  }
+.qti-layout-col8 {
+  width: 65.9574468085%;
+}
 
-  .qti-layout-col10 {
-    width: 82.9787234043%;
-  }
+.qti-layout-col9 {
+  width: 74.4680851064%;
+}
 
-  .qti-layout-col11 {
-    width: 91.4893617021%;
-  }
+.qti-layout-col10 {
+  width: 82.9787234043%;
+}
 
-  .qti-layout-col12 {
-    width: 100%;
-  }
+.qti-layout-col11 {
+  width: 91.4893617021%;
+}
 
-  .qti-layout-offset1 {
-    margin-left: 8.5106382979%;
-  }
+.qti-layout-col12 {
+  width: 100%;
+}
 
-  .qti-layout-offset2 {
-    margin-left: 17.0212765957%;
-  }
+.qti-layout-offset1 {
+  margin-left: 8.5106382979%;
+}
 
-  .qti-layout-offset3 {
-    margin-left: 25.5319148936%;
-  }
+.qti-layout-offset2 {
+  margin-left: 17.0212765957%;
+}
 
-  .qti-layout-offset4 {
-    margin-left: 34.0425531915%;
-  }
+.qti-layout-offset3 {
+  margin-left: 25.5319148936%;
+}
 
-  .qti-layout-offset5 {
-    margin-left: 42.5531914894%;
-  }
+.qti-layout-offset4 {
+  margin-left: 34.0425531915%;
+}
 
-  .qti-layout-offset6 {
-    margin-left: 51.0638297872%;
-  }
+.qti-layout-offset5 {
+  margin-left: 42.5531914894%;
+}
 
-  .qti-layout-offset7 {
-    margin-left: 59.5744680851%;
-  }
+.qti-layout-offset6 {
+  margin-left: 51.0638297872%;
+}
 
-  .qti-layout-offset8 {
-    margin-left: 68.085106383%;
-  }
+.qti-layout-offset7 {
+  margin-left: 59.5744680851%;
+}
 
-  .qti-layout-offset9 {
-    margin-left: 76.5957446809%;
-  }
+.qti-layout-offset8 {
+  margin-left: 68.085106383%;
+}
 
-  .qti-layout-offset10 {
-    margin-left: 85.1063829787%;
-  }
+.qti-layout-offset9 {
+  margin-left: 76.5957446809%;
+}
 
-  .qti-layout-offset11 {
-    margin-left: 93.6170212766%;
-  }
+.qti-layout-offset10 {
+  margin-left: 85.1063829787%;
+}
 
-  @media (width <= 767px) {
-    [class*='qti-layout-col'] {
-      width: 100%;
-    }
+.qti-layout-offset11 {
+  margin-left: 93.6170212766%;
+}
+
+@media (width <= 767px) {
+  [class*='qti-layout-col'] {
+    width: 100%;
   }
 }
+}
+/**
+ * Layer order for everything the theme ships, and the imports that fill it.
+ *
+ * A file is assigned its layer HERE, at its import, wherever it belongs to exactly one layer —
+ * so the ordering is readable in one place and the file itself stays free of wrapper blocks.
+ * The files imported without `layer()` below span several layers internally and declare their
+ * own `@layer` blocks; splitting them per layer is the only way to import-assign them, and is
+ * not worth the file count.
+ *
+ * `interactions.brand` and `overrides` hold nothing here ON PURPOSE — they are the extension points
+ * a brand sheet writes into (apps/e2e/src/stories/kennisnet/kennisnet.css uses `interactions.brand`).
+ * They must stay DECLARED even while empty: a layer first created by a consumer's own `@layer`
+ * 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,
@@ -1271,7 +1628,8 @@
   }
 }
 }
-/* Plain HTML author markup (tables, lists, rules). Sibling to reset.css, same @scope. */
+@layer qti-components.elements{
+
 /**
  * Prose — plain HTML author markup: tables, lists, headings, rules.
  *
@@ -1295,40 +1653,41 @@
  * Values route through the theme tokens with a literal fallback, so prose tracks a brand for free.
  * The --qti-prose-* names are the override surface.
  */
-@layer qti-components.elements {
-  /*
-   * Shared — rendered item bodies AND editor documents.
-   *
-   * Intentionally empty. Every candidate rule so far (border-collapse, cell padding) moves rendered
-   * items, which is a product decision rather than a styling gap. Add here only with that in mind.
-   */
 
-  /*
-   * Authoring only — the editor's document.
-   */
-  @scope (.ProseMirror) {
-    :scope table {
-      border-collapse: collapse;
-      margin: var(--qti-prose-table-margin, 0.5rem 0);
-    }
-
-    :scope th,
-    :scope td {
-      border: var(--qti-prose-table-border-width, var(--qti-border-thickness, 1px))
-        var(--qti-prose-table-border-style, var(--qti-border-style, solid))
-        var(--qti-prose-table-border-color, var(--qti-border-color, #c6cad0));
-      padding: var(--qti-prose-table-cell-padding, 0.25rem 0.5rem);
-      text-align: left;
-      /* No vertical-align here: that is layout, and the theme does not do layout (CONTRACT.md §7,
-         enforced by qti/no-layout-in-theme). Cells keep the UA default. */
-    }
+/*
+ * Shared — rendered item bodies AND editor documents.
+ *
+ * Intentionally empty. Every candidate rule so far (border-collapse, cell padding) moves rendered
+ * items, which is a product decision rather than a styling gap. Add here only with that in mind.
+ */
 
-    :scope th {
-      background: var(--qti-prose-table-header-bg, var(--qti-bg-active, #f6f8fa));
-      font-weight: 600;
-    }
+/*
+ * Authoring only — the editor's document.
+ */
+@scope (.ProseMirror) {
+  :scope table {
+    border-collapse: collapse;
+    margin: var(--qti-prose-table-margin, 0.5rem 0);
+  }
+
+  :scope th,
+  :scope td {
+    border: var(--qti-prose-table-border-width, var(--qti-border-thickness, 1px))
+      var(--qti-prose-table-border-style, var(--qti-border-style, solid))
+      var(--qti-prose-table-border-color, var(--qti-border-color, #c6cad0));
+    padding: var(--qti-prose-table-cell-padding, 0.25rem 0.5rem);
+    text-align: left;
+    /* No vertical-align here: that is layout, and the theme does not do layout (CONTRACT.md §7,
+       enforced by qti/no-layout-in-theme). Cells keep the UA default. */
+  }
+
+  :scope th {
+    background: var(--qti-prose-table-header-bg, var(--qti-bg-active, #f6f8fa));
+    font-weight: 600;
   }
 }
+}
+/* Multi-layer: declares global + interactions.{base,states,corrections} internally. */
 /* QTI base — design variables. The theme's tokens; a substrate overrides their VALUES to
  * express its look (value first). Split from qti-base.css. See also qti-mixins.css.
  *
@@ -1771,6 +2130,7 @@
     --qti-answer-border: var(--qti-info);
   }
 }
+/* Mixin definitions only — emits nothing on its own, so it takes no layer. */
 /* 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. */
@@ -1996,6 +2356,7 @@
  * hotspots and choices alike where no single rule suited all of them. This one is called from drags
  * only.
  */
+/* Per-interaction sheets; each import carries its layer where the file has just one. */
 @layer qti-components.interactions.base {
   qti-choice-interaction {
     /* A choice hugs its text here, unlike order-interaction, which uses the same element as a chip.
@@ -5528,11 +5889,11 @@
     }
   }
 }
-@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-slider-interaction {
+  --qti-tick-color: rgb(229 231 235 / 100%);
+  --qti-tick-width: 1px;
+}
 }
 @layer qti-components.interactions.base {
   qti-select-point-interaction {
@@ -5571,16 +5932,17 @@
     }
   }
 }
-@layer qti-components.interactions.base {
-  qti-position-object-stage {
-    & qti-position-object-interaction {
-      /* no styles necessary, only layout styles, defined in the component */
-    }
+@layer qti-components.interactions.base{
+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.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.
  *
@@ -5602,58 +5964,54 @@
  *     never rendered, because the shared rule declared `background-color` directly and outranked the
  *     binding that reads them. Deleted with the rule that was hiding them.
  */
-@layer qti-components.interactions.corrections {
-  /*
-   * The candidate-correction badge, `part="correction"` on every corrected element.
-   *
-   * A token list, so `::part(correction-correct)` reaches the badge in the drag bank, on the
-   * floating clone, and inside a drop target's shadow root — a token survives `exportparts`,
-   * where a chained `::part()` would not.
-   */
-  ::part(correction-correct) {
-    background-color: var(--qti-correct);
-    mask: var(--qti-check-mask) no-repeat center / contain;
-    -webkit-mask: var(--qti-check-mask) no-repeat center / contain;
-  }
-
-  ::part(correction-incorrect) {
-    background-color: var(--qti-incorrect);
-    mask: var(--qti-times-mask) no-repeat center / contain;
-    -webkit-mask: var(--qti-times-mask) no-repeat center / contain;
-  }
-
-
+/*
+ * The candidate-correction badge, `part="correction"` on every corrected element.
+ *
+ * A token list, so `::part(correction-correct)` reaches the badge in the drag bank, on the
+ * floating clone, and inside a drop target's shadow root — a token survives `exportparts`,
+ * where a chained `::part()` would not.
+ */
+::part(correction-correct) {
+  background-color: var(--qti-correct);
+  mask: var(--qti-check-mask) no-repeat center / contain;
+  -webkit-mask: var(--qti-check-mask) no-repeat center / contain;
+}
 
-  /*
-   * The third verdict. correction.styles.ts has always SIZED `correction-partially-correct` beside
-   * its two siblings, but no rule anywhere ever painted it — so a partially-correct badge has been
-   * an invisible 1em gap in every interaction, not just extended-text. This is repo-wide, and the
-   * reason it went unnoticed is that partial credit needs a mapping to arise at all.
-   */
-  ::part(correction-partially-correct) {
-    background-color: var(--qti-partially-correct);
-    mask: var(--qti-partial-mask) no-repeat center / contain;
-    -webkit-mask: var(--qti-partial-mask) no-repeat center / contain;
-  }
+::part(correction-incorrect) {
+  background-color: var(--qti-incorrect);
+  mask: var(--qti-times-mask) no-repeat center / contain;
+  -webkit-mask: var(--qti-times-mask) no-repeat center / contain;
+}
 
+/*
+ * The third verdict. correction.styles.ts has always SIZED `correction-partially-correct` beside
+ * its two siblings, but no rule anywhere ever painted it — so a partially-correct badge has been
+ * an invisible 1em gap in every interaction, not just extended-text. This is repo-wide, and the
+ * reason it went unnoticed is that partial credit needs a mapping to arise at all.
+ */
+::part(correction-partially-correct) {
+  background-color: var(--qti-partially-correct);
+  mask: var(--qti-partial-mask) no-repeat center / contain;
+  -webkit-mask: var(--qti-partial-mask) no-repeat center / contain;
+}
 
-  /* 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 ::part(drag) {
-    background-color: var(--qti-answer-bg);
-    color: var(--qti-answer-fg);
-    border-color: var(--qti-answer-border);
-  }
+/* 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 ::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 ::part(drag-control)::before {
-    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;
-  }
+.full-correct-response :state(drag)::part(control)::before,
+.full-correct-response ::part(drag-control)::before {
+  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.elements{
 /* `display: block` is declared by the element itself, in qti-rubric-block.ts. */
@@ -5691,6 +6049,7 @@ qti-feedback-block::part(feedback) {
   margin-top: var(--qti-gap);
 }
 }
+@layer qti-components.global{
 /*
  * Cross-interaction custom states.
  *
@@ -5712,60 +6071,75 @@ qti-feedback-block::part(feedback) {
  * third and fourth time in the Kennisnet overlay. Declared per interaction the rule is an opt-in:
  * graphic-gap-match simply never states one, and there is no exception to write down anywhere.
  */
-@layer qti-components.global {
-  ::part(message) {
-    color: var(--qti-fg);
-    background-color: color-mix(in srgb, var(--qti-warning) 5%, white);
-    padding: var(--qti-padding-box);
-    border: var(--qti-border-thickness) solid var(--qti-warning);
-    border-radius: var(--qti-border-radius);
-    margin-top: var(--qti-gap);
-  }
+::part(message) {
+  color: var(--qti-fg);
+  background-color: color-mix(in srgb, var(--qti-warning) 5%, white);
+  padding: var(--qti-padding-box);
+  border: var(--qti-border-thickness) solid var(--qti-warning);
+  border-radius: var(--qti-border-radius);
+  margin-top: var(--qti-gap);
+}
 
-  /*
-   * The interaction is presenting the answer key rather than the candidate's own response.
-   * Set on the interaction host by `Interaction.toggleInternalCorrectResponse`.
-   *
-   * Reaches the host wherever that base implementation runs, which is more than it looks: besides
-   * `qti-extended-text-interaction`, both `ChoiceCorrectionMixin` and most per-interaction overrides
-   * call `super`, so choice, hottext, select-point, slider, graphic-order and the rest set the host
-   * state AND mark their individual choices with `correct-response` / `incorrect-response`.
-   *
-   * Three do not, and so never paint this outline: the drag-drop mixin replaces the implementation
-   * outright, and the two inline interactions — text-entry and inline-choice — hand internal mode to
-   * the full correct response, which presents the key in a sibling wrapper rather than on the host.
-   *
-   * The outline went unseen on hottext until its host stopped being an inline box (see the note in
-   * qti-match-interaction.styles.ts) — an inline box whose children are all block has no area to
-   * 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) {
-    outline: var(--qti-border-thickness) dashed var(--qti-correct);
-    outline-offset: 0.25rem;
-  }
+/*
+ * The interaction is presenting the answer key rather than the candidate's own response.
+ * Set on the interaction host by `Interaction.toggleInternalCorrectResponse`.
+ *
+ * Reaches the host wherever that base implementation runs, which is more than it looks: besides
+ * `qti-extended-text-interaction`, both `ChoiceCorrectionMixin` and most per-interaction overrides
+ * call `super`, so choice, hottext, select-point, slider, graphic-order and the rest set the host
+ * state AND mark their individual choices with `correct-response` / `incorrect-response`.
+ *
+ * Three do not, and so never paint this outline: the drag-drop mixin replaces the implementation
+ * outright, and the two inline interactions — text-entry and inline-choice — hand internal mode to
+ * the full correct response, which presents the key in a sibling wrapper rather than on the host.
+ *
+ * The outline went unseen on hottext until its host stopped being an inline box (see the note in
+ * qti-match-interaction.styles.ts) — an inline box whose children are all block has no area to
+ * 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) {
+  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{
+
+/**
+ * Structural rules for the item shell itself — what is shown and what is hidden.
+ *
+ * Lives in a file of its own so it can be assigned a layer at its import (see index.css). Rules
+ * written straight into item.css would be unlayered, and unlayered CSS outranks every layer,
+ * including the `qti-extended` slot consumers are told to author in.
+ */
+
 [view],
 qti-outcome-declaration,
 qti-response-declaration {
   display: none;
 }
+
 [view].show {
   display: block;
 }
+
 :host {
   box-sizing: border-box;
 }
+
 qti-test-part:not(:has(qti-assessment-item)),
 qti-assessment-section:not(:has(qti-assessment-item)),
 qti-assessment-item-ref:not(:has(qti-assessment-item)) {
   display: none;
 }
-div.full-correct-response {
-}
+
 div.full-correct-response-block {
   display: block;
 }
+
 div.full-correct-response-inline {
   display: inline-block;
 }
+}