.qti-orientation-vertical {
    display: flex;
    flex-direction: column;
}

/*this belongs in pladroe styles, but it does not work there. fix this later
ol.p-qti-no-linefeed li >label span:first-child>p{
   display: inline;
   padding: 0px;
   margin: 1em;
   border: 0px;
}
    */
.qti-orientation-horizontal {
    display: flex;
    flex-direction: row;
}

/* Columns — the QTI 3 shared-vocabulary qti-choices-stacking-N classes (BR-70).
   The choices list becomes a grid of N equal columns and the ORIENTATION class
   decides the fill order: horizontal fills across then down (a 2x2 reads as a
   "Z"), vertical fills down then across (a "backwards N"). Column flow needs an
   explicit row count, which CSS cannot derive from the child count, so Choice.js
   sets --p-qti-choice-rows (ceil(choices / N)) on the list at render time. The
   DOM is never reordered: reading order and keyboard order stay the authored
   order; only the visual placement moves. `columns: N` (CSS multicol) was the
   previous implementation; it is ignored on a flex container, which the
   orientation classes always make the list, so stacking never took effect.
   The orientation rules above set display:flex with the same specificity;
   these come later in the file and win. */
.qti-choices-stacking-1,
.qti-choices-stacking-2,
.qti-choices-stacking-3,
.qti-choices-stacking-4,
.qti-choices-stacking-5 {
    display: grid;
    grid-auto-flow: row;
    column-gap: 1.5rem;
}

.qti-choices-stacking-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.qti-choices-stacking-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qti-choices-stacking-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qti-choices-stacking-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qti-choices-stacking-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Vertical orientation fills each column top to bottom before starting the
   next. Without the row count from Choice.js the list would keep adding
   implicit columns, so the fallback is one row per choice — a single column,
   which is the plain vertical layout. */
.qti-orientation-vertical[class*="qti-choices-stacking-"] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--p-qti-choice-rows, 1), auto);
}

/* Narrow screens: a phone cannot show four columns of choices, so every
   stacking collapses to one column — still in DOM (identifier) order. */
@media (max-width: 30rem) {
    .qti-choices-stacking-2,
    .qti-choices-stacking-3,
    .qti-choices-stacking-4,
    .qti-choices-stacking-5 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .qti-orientation-vertical[class*="qti-choices-stacking-"] {
        grid-auto-flow: row;
        grid-template-rows: none;
    }
}

/* Choice labels. qti-labels-* is the QTI 3 shared-vocabulary name (vocab §1.2.1.1) that the
   authoring dialog writes since 2026-09-29 and every foreign package carries;
   qti-choice-labels-* is the older Ments name still found in stored content. Both are styled. */
.qti-choice-labels-none,
.qti-labels-none {
    counter-reset: list;
}

.qti-choice-labels-none > li,
.qti-labels-none > li {
    list-style: none;
}

.qti-choice-labels-decimal,
.qti-labels-decimal {
    counter-reset: list;
}

    .qti-choice-labels-decimal > li,
    .qti-labels-decimal > li {
        list-style: none;
    }

        .qti-choice-labels-decimal > li:before,
        .qti-labels-decimal > li:before {
            content: counter(list, decimal);
            counter-increment: list;
        }
        .qti-choice-labels-decimal.qti-labels-suffix-period > li:before,
        .qti-labels-decimal.qti-labels-suffix-period > li:before {
            content: counter(list, decimal) ". ";
            counter-increment: list;
        }
        .qti-choice-labels-decimal.qti-labels-suffix-parenthesis > li:before,
        .qti-labels-decimal.qti-labels-suffix-parenthesis > li:before {
            content: counter(list, decimal) ") ";
            counter-increment: list;
        }
.qti-choice-labels-upper-alpha,
.qti-labels-upper-alpha {
    counter-reset: list;
}

    .qti-choice-labels-upper-alpha > li,
    .qti-labels-upper-alpha > li {
        list-style: none;
    }
        .qti-choice-labels-upper-alpha > li:before,
        .qti-labels-upper-alpha > li:before {
            content: counter(list, upper-alpha);
            counter-increment: list;
        }
        .qti-choice-labels-upper-alpha.qti-labels-suffix-period > li:before,
        .qti-labels-upper-alpha.qti-labels-suffix-period > li:before {
            content: counter(list, upper-alpha) ". ";
            counter-increment: list;
        }
        .qti-choice-labels-upper-alpha.qti-labels-suffix-parenthesis > li:before,
        .qti-labels-upper-alpha.qti-labels-suffix-parenthesis > li:before {
            content: counter(list, upper-alpha) ") ";
            counter-increment: list;
        }
.qti-choice-labels-lower-alpha,
.qti-labels-lower-alpha {
    counter-reset: list;
}

    .qti-choice-labels-lower-alpha > li,
    .qti-labels-lower-alpha > li {
        list-style: none;
    }
        .qti-choice-labels-lower-alpha > li:before,
        .qti-labels-lower-alpha > li:before {
            content: counter(list, lower-alpha);
            counter-increment: list;
        }
        .qti-choice-labels-lower-alpha.qti-labels-suffix-period > li:before,
        .qti-labels-lower-alpha.qti-labels-suffix-period > li:before {
            content: counter(list, lower-alpha) ". ";
            counter-increment: list;
        }
        .qti-choice-labels-lower-alpha.qti-labels-suffix-parenthesis > li:before,
        .qti-labels-lower-alpha.qti-labels-suffix-parenthesis > li:before {
            content: counter(list, lower-alpha) ") ";
            counter-increment: list;
        }

/* CJK ideographic labels (vocab §1.2.1.9: "Display labels with list-style-type cjk-ideographic
   characters"), with the same suffix forms as the other label kinds. */
.qti-labels-cjk-ideographic {
    counter-reset: list;
}

    .qti-labels-cjk-ideographic > li {
        list-style: none;
    }
        .qti-labels-cjk-ideographic > li:before {
            content: counter(list, cjk-ideographic);
            counter-increment: list;
        }
        .qti-labels-cjk-ideographic.qti-labels-suffix-period > li:before {
            content: counter(list, cjk-ideographic) ". ";
            counter-increment: list;
        }
        .qti-labels-cjk-ideographic.qti-labels-suffix-parenthesis > li:before {
            content: counter(list, cjk-ideographic) ") ";
            counter-increment: list;
        }

/* qti-labels-suffix-none (vocab §1.2.1.2): the label with no suffix. Absent a suffix class the
   labels already carry none; the explicit class wins over a period or parenthesis class written
   beside it, so the author's "none" is what renders. */
.qti-choice-labels-decimal.qti-labels-suffix-none > li:before,
.qti-labels-decimal.qti-labels-suffix-none > li:before {
    content: counter(list, decimal);
}
.qti-choice-labels-upper-alpha.qti-labels-suffix-none > li:before,
.qti-labels-upper-alpha.qti-labels-suffix-none > li:before {
    content: counter(list, upper-alpha);
}
.qti-choice-labels-lower-alpha.qti-labels-suffix-none > li:before,
.qti-labels-lower-alpha.qti-labels-suffix-none > li:before {
    content: counter(list, lower-alpha);
}
.qti-labels-cjk-ideographic.qti-labels-suffix-none > li:before {
    content: counter(list, cjk-ideographic);
}

/* The simulation "valid comparisons" affordance (SimulationResponse.js appends
   one .p-qti-valid-comparisons div under the output table) is a scoring-authoring
   aid only. Hide it by default so it never surfaces during delivery, item
   preview, or the public demo. Ments' scoring editor re-shows it, scoped to
   div.DISView_window .tq-scoring-display (Scripts/css/TestQuill.css). */
.p-qti-valid-comparisons {
    display: none;
}

/* Media interaction (MediaInteraction.js). The player is the native <audio> /
   <video> control, so there is nothing to skin — only the block spacing around
   it, the small line that says how many plays are left, and the look of a
   player whose plays are spent (max-plays reached: the controls are removed,
   so the element is left greyed rather than silently inert). */
.p-qti-media-interaction {
    margin: 0.5em 0;
}
.p-qti-media-interaction audio,
.p-qti-media-interaction video {
    max-width: 100%;
}
.p-qti-media-status {
    font-size: 0.9em;
    margin-top: 0.25em;
}
.p-qti-media-spent audio,
.p-qti-media-spent video {
    opacity: 0.5;
}