.DISView_window {

}

.tq_interaction_dialog > h1 {
    text-align: center;
}

.tq-dialog-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tq-header {
    background-color: gray;
    color: white;
}

.tq-quantity-stimulus-editor {
   margin-bottom: 15px;
}

.tq-flex-column {
    display: flex;
    flex-direction: column;
}
.tq-flex-row {
    display: flex;
    flex-direction: row;
}
.tq-flex-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.tq-full-width {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.tq-center-span {
    display:flex;
    justify-content: center;
    flex-direction: row;
}

div.DISView_window > div.DISView_body {
    display: flex;
    flex-direction: row;
    margin-left: -15px;
    margin-right: -15px;
}
div.tq-panel-close {
    width: 54px;
    min-width: 54px;
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

div.tq-panel-open {
    width: 320px;
    flex-shrink: 0;
    align-self: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

div.tq-panel-close > :not(.tq-panel-header) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s 150ms, opacity 120ms ease;
}

div.tq-panel-open > :not(.tq-panel-header) {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 150ms ease 200ms;
}

.tq-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #d0d4dc;
    width: calc(100% + 24px);
    margin-left: -12px;
    height: 54px;
    min-height: 54px;
    flex-shrink: 0;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

div.tq-panel-close .tq-panel-title {
    display: none;
}

div.tq-sheild {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.2);
    top: 0px;
    left: 0px;
}

div.tq-side-panel div.Tree_window {
    width: max-content;
}


.tq-pattern-display {
    display: grid;
    grid-template-columns: 1fr ffr 1fr;
}

.tq-reorderable-list {
    width: fit-content;
}

    .tq-reorderable-list ul {
        list-style: none;
        background-color: #ffffff;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
        border-radius: 0.75rem; /* rounded-xl */
        padding: 1.5rem; /* p-6 */
    }


.tq-reorderable-list-item {
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: space-between; /* justify-between */
    padding: 0.75rem; /* p-3 (Tailwind's spacing scale) */
    background-color: #ffffff; /* bg-white */
    border-width: 1px; /* border */
    border-color: #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition-property: box-shadow; /* transition */
    transition-duration: 150ms; /* duration-150 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}

.tq-picked-up {

}

.tq-dragging {
    opacity: 0.4;
    border: 2px dashed var(--color-border, #d1d5db);
    background-color: var(--color-surface-sunken, #f3f4f6);
}

.tq-simulation-row1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.tq-simulation-template-dialog {
    min-width: 80%;
}

    .tq-simulation-template-dialog .tq-reorderable-list {
        width: 100%;
        padding-right: 2em;
    }

/* BankWorkflowView Workflow Activities: scoped to .bw-activity-list so the
   list fills its fixed-width column and long activity labels wrap instead of
   forcing the list wider. Does not affect other ReorderableList instances. */
.bw-activity-list .tq-reorderable-list {
    width: 100%;
}

    .bw-activity-list .tq-reorderable-list ul {
        padding: 0.75rem;
    }

.bw-activity-list .tq-reorderable-list-item {
    gap: 4px;
}

.tq-draggable-list-item {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.tq-list-item-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
}


    .bw-activity-list .tq-draggable-list-item > span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

div.tq-gr-canvas {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100% ;
    background-color: rgba(255,255,255,0.2);
    top: 0px;
    left: 0px;
    border: 2px dashed red;
}

div.tq-gr-canvas>div {
    background-color: white;
    width: 100%;
    text-align:center;
}

div.tq-dialog-controls {
    display: grid;
    grid-template-columns: auto auto;
}
dialog.tq-condition,
div.tq-condition {
    width: 100%;
    border: 1px solid black;
    border-radius: .5em;
}

    div.tq-condition div.tq-body {
        width: stretch;
        display: grid;
        grid-template-columns: 1fr;
        margin-left: .5em;
        margin-right: 2px;
        margin-bottom: 2px;
    }

    div.tq-condition div.tq-body.tq-logic {
        grid-template-columns: 5em 1fr;
    }
    div.tq-condition select {
        width: 100%;
        height: fit-content;
    }
div.DISView_window > div.DISView_body div.tq-assertion-panel div.tq-condition div.tq-header {
        width: stretch;
        display: flex;
        flex-direction: row;
        justify-content: left;
        margin-left: .5em;
        margin-right: .5em;
        border: none;
    }

div.DISView_window > div.DISView_body div.tq-numeric-buttons > span.tq-control-span select.Select_window,
div .tq-condition div.tq-header select.Select_window {
    width: auto;
    border: none;
    padding: 2px;
}

div.DISView_window > div.DISView_body div.tq-control-span select.Select_window,
div .tq-condition div.tq-header select.Select_window {
    width: auto;
    border: none;
    padding: 2px;
}

div .tq-condition div.tq-header mrow[inert] {
    margin-left: .5em;
    margin-right: 1em;
}

button:disabled {
    color: lightgray;
}
div .tq-side-panel div.tq-sample-panel button.tq-expandable-button.tq-selected,
button.tq-selected {
    color: var(--color-primary-dark, #4B24A8);
    background-color: var(--color-primary-tint, #F3EEFF);
}

.tq-widget-spec-generator div.tq-scroll-box {
    height: 16em;
    width: auto;
    border: 1px solid grey;
    margin-bottom: 1.5em;
}

.tq-widget-spec-generator div.tq-scroll-box .tq-reorderable-list {
    width: 100%;
}
button.tq-test-score-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: inherit;
    padding: 4px 2px;
}

button.tq-test-score-btn:hover,
button.tq-test-score-btn:focus {
    background: transparent;
}

button.tq-test-score-btn::after {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background-color: #b8b8b8;
    background-image: radial-gradient(circle, white 48%, transparent 50%);
    background-size: 22px 22px;
    background-position: 2px center;
    background-repeat: no-repeat;
    transition: background-color 250ms ease, background-position 250ms ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

button.tq-test-score-btn.tq-test-score-mode,
button.tq-test-score-btn.tq-test-score-mode:hover,
button.tq-test-score-btn.tq-test-score-mode:focus {
    background: transparent;
    color: inherit;
    border: none;
    transform: none;
    box-shadow: none;
}

button.tq-test-score-btn.tq-test-score-mode::after {
    background-color: var(--color-primary);
    background-position: 20px center;
}

/* Score-report dialogs (success score-result + failure scoring-issues).
   Mirrors the assertion-dialog chrome so both adopt the new app-dialog look:
   a centred flex-column box with a sticky header and a scrolling body. The
   table styling further down is scoped to this dialog only so the global
   .Table2D_* rules (used app-wide) stay untouched. */
dialog.tq-score-dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(900px, 90%);
    max-width: 900px; /* override .app-dialog's 480px cap */
    max-height: 92vh;
    margin: auto;
    padding: 0;
}

dialog.tq-score-dialog[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Slight dim only — the item behind stays readable. */
dialog.tq-score-dialog::backdrop {
    background: rgba(0, 0, 0, 0.18);
}

/* The header holds only the close (×) button — the table caption carries the
   title now — so push the × to the right. */
dialog.tq-score-dialog .app-dialog-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

dialog.tq-score-dialog .app-dialog-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    margin-bottom: 0;
}

dialog.tq-score-dialog .app-dialog-close {
    /* Keep the shared 44x44 hit target (WCAG 2.5.5 AAA) — do NOT shrink it the
       way the assertion dialog does. Base .app-dialog-close already sets
       min-width/height:44px + flex centering; here we only enlarge the glyph
       and darken it for AAA contrast. */
    font-size: 1.4rem;
    line-height: 1;
    /* Comfortable AAA: 12.2:1 on white. The shared default (#475569) is only
       7.6:1 — a marginal pass — so the score dialog uses the brand dark. */
    color: var(--color-primary-dark);
}

dialog.tq-score-dialog .app-dialog-close:hover {
    /* 10.8:1 on the tint hover background (the shared purple hover is 7.4:1). */
    color: var(--color-primary-dark);
}

/* Strong, visible focus indicators (AAA). */
dialog.tq-score-dialog button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Assertions / issues table — styled after the redesigned WorkQueue table
   (.wq-table in styles.css): borderless, uppercase column headers with a 2px
   under-rule, light horizontal row dividers, no vertical grid lines, 44px-tall
   rows, and light-purple even-row striping (the global Table2D zebra fill,
   recoloured from grey — see styles.css). Scoped to this dialog so the
   structural .Table2D_* rules stay untouched; long assertion text may wrap. */
dialog.tq-score-dialog .Table2D_window {
    width: 100%;
    border: none;
    border-collapse: collapse;
    font-size: 1.0625rem;
    color: var(--color-text-base);
}

dialog.tq-score-dialog .Table2D_header {
    background-color: transparent;
}

dialog.tq-score-dialog .Table2D_header th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-base);
    border: none;
    border-bottom: 2px solid var(--color-border);
}

dialog.tq-score-dialog .Table2D_body td {
    padding: 10px 16px;
    text-align: left;
    border: none;
}

dialog.tq-score-dialog .Table2D_body tr {
    height: 44px;
    border-bottom: 1px solid var(--color-border);
}

dialog.tq-score-dialog .Table2D_body tr:last-child {
    border-bottom: none;
}

/* Even rows use the global Table2D zebra fill, recoloured to light purple in
   styles.css (was WAF grey) — no per-dialog override needed. */

/* The dialog header is just the × now, so the table caption carries the visible
   title. The centered layout + right-aligned download + hidden summary all come
   from the global .Table2D_titlebar (WAFBaseCSS.css); here we only emphasise the
   title text as a near-black heading. */
dialog.tq-score-dialog .Table2D_titletext {
    font-weight: 600;
    color: var(--color-text-heading);
}

dialog.tq-score-dialog div.tq-score-result-header {
    margin: 0.5em 0 1em 0;
    padding: 0.75em 1em;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-primary-tint);
}
dialog.tq-score-dialog div.tq-score-result-header div.tq-score-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25em 0;
}
dialog.tq-score-dialog div.tq-score-result-header span.tq-score-result-label {
    font-weight: 600;
    margin-right: 1em;
    color: var(--color-text-heading);
}
dialog.tq-score-dialog div.tq-score-result-header span.tq-score-result-value {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* Score-report standards info buttons + dialog. The ⓘ button rides each
 * assertion row (and the numeric score rows) in the DEFAULT report;
 * disabled (greyed, explanatory title) when the target has no aligned
 * standards. The framework name renders in small print after a standard's
 * text only when the bank spans multiple frameworks. Colors keep WCAG AAA
 * contrast on white (#444 = 9.7:1; #555 = 7.5:1). */
button.tq-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 2px 6px;
    color: var(--color-primary-dark);
}
button.tq-info-btn:disabled {
    color: #767676;
    cursor: not-allowed;
}
button.tq-info-btn:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 1px;
}

/* Incomplete-definition marker (EmptyDefinitionBadge): a VE with no
 * constraints (never holds) or an assertion with no condition (always
 * true) gets an amber background + ⓘ — no modal, saving stays allowed.
 * The class rides BOTH the container and the always-visible title row
 * (the accordion title paints its own background over the block's, so
 * the container alone was invisible). Amber #ffd54f is unmistakable and
 * keeps dark text at 12:1; the ⓘ glyph #5a3c00 = 7.2:1 on it (AAA). */
.tq-empty-def,
li.tq-assertion-item.tq-empty-def:hover,
li.tq-assertion-item.tq-empty-def:focus {
    background: #ffd54f;
}
button.tq-info-btn.tq-empty-info {
    color: #5a3c00;
}
button.tq-info-btn.tq-empty-info:focus-visible {
    outline: 2px solid #5a3c00;
    outline-offset: 1px;
}
li.tq-assertion-item.tq-empty-def button.tq-empty-info {
    /* Assertion rows are flex — push the ⓘ to the row's far edge. */
    margin-left: auto;
}
td.tq-standards-cell {
    text-align: center;
    vertical-align: middle;
}
dialog.tq-standards-dialog {
    max-width: 44em;
}
dialog.tq-standards-dialog h3.tq-standards-title {
    margin: 0;
    font-size: 1.1em;
}
ul.tq-standards-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
li.tq-standard-item {
    line-height: 1.4;
}
li.tq-standard-item span.tq-standard-code {
    font-weight: 700;
    margin-right: 8px;
}
li.tq-standard-item span.tq-standard-framework {
    font-size: 0.8em;
    color: #444;
    margin-left: 8px;
    white-space: nowrap;
}

/* Visually-hidden utility (screen-reader-only text), used for the standards
 * column's table header. */
.tq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

div.DISView_window > div.DISView_body div.tq-scoring-display {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: auto;
    padding: 2em;
    box-sizing: border-box;
}
    div.DISView_window > div.DISView_body div.tq-scoring-display.tq-assertions-live {
        height: 50vh;
    }

/* Re-show the simulation "valid comparisons" affordance, which is hidden by
   default everywhere (QtiInteractionStyles.css: .p-qti-valid-comparisons),
   only here inside the scoring editor's rendered item. This file is loaded
   by the authoring app but NOT by delivery/preview/the public demo, so the
   affordance stays hidden in every non-scoring context.
   SHADOW NOTE (keep in sync): items render in shadow roots, which this
   page rule cannot reach — the live copy is the scoring extra sheet in
   DefineItemScoringView._presentItem. This rule remains for any legacy
   light-DOM render inside the scoring display. */
div.DISView_window > div.DISView_body div.tq-scoring-display .p-qti-valid-comparisons {
    display: block;
}

/* Passage-set internal pane height for SHADOW-rendered items: the pane
   rules below cannot reach inside item roots, so the height ships in the
   DISView scoring extra sheet reading --tq-scoring-pane-max, which is set
   HERE (custom properties inherit through the shadow host) so the
   .tq-assertions-live shrink still tracks live panel state. */
div.DISView_window > div.DISView_body div.tq-scoring-display {
    --tq-scoring-pane-max: calc(80vh - 4em);
}
div.DISView_window > div.DISView_body div.tq-scoring-display.tq-assertions-live {
    --tq-scoring-pane-max: calc(50vh - 4em);
}

/* Single-scrollbar enforcement for the scoring view's right panel.
 *
 * Paldroe's .p-qti-item-container (and .p-qti-stimulus when a
 * stimulus is rendered) carry their own height + overflow:auto
 * (PaldroeStyles.css ~line 526/531) so they scroll independently
 * when used inside the runtime player. Stacked inside
 * .tq-scoring-display — which has its own height + overflow:auto —
 * those inner containers produce nested scroll regions. The
 * ItemShield positions itself over .tq-scoring-display with
 * height = parentDiv.scrollHeight (ItemShield.js _highlightEntity),
 * so it never extends into the nested scrollers; content past the
 * inner viewport sits behind the shield and the user can't scroll
 * to reach it.
 *
 * Strip the inner height + overflow inside .tq-scoring-display so
 * the sole scrollable container is .tq-scoring-display itself.
 * The shield then covers the full scroll-height uniformly and
 * every interaction stays reachable.
 */
div.DISView_window > div.DISView_body div.tq-scoring-display div.p-qti-item-container,
div.DISView_window > div.DISView_body div.tq-scoring-display div.p-qti-stimulus {
    height: auto;
    max-height: none;
    overflow: visible;
}

/* EXCEPTION to the single-scroller rule above, for the passage-set container's
 * INTERNAL split pane (it reuses .p-qti-stimulus / .p-qti-item-container under its
 * own .p-qti-stim-split). The rule above strips those panes' height + overflow so
 * .tq-scoring-display is the sole scroller — correct for single-item scoring + the
 * ItemShield, but it also flattens the passage-set's two panes into one outer
 * scroll. Scoped to .p-qti-stim-split (more specific, so it wins) and to the panes
 * UNDER it, so single-item scoring is untouched: re-instate each pane's own scroll,
 * bounded to the .tq-scoring-display box (80vh, less its 2em padding) so the passage
 * scrolls independently of the parts instead of growing the outer scroller.
 * (.tq-assertions-live shrinks that box to 50vh.)
 * SHADOW NOTE (keep in sync): the container's internal split now sits
 * inside the item's shadow root — the live copy of this height rule is in
 * DefineItemScoringView's scoring extra sheet, driven by
 * --tq-scoring-pane-max (set above). These rules remain for any legacy
 * light-DOM render. */
div.DISView_window > div.DISView_body div.tq-scoring-display .p-qti-stim-split > div.p-qti-stimulus,
div.DISView_window > div.DISView_body div.tq-scoring-display .p-qti-stim-split > div.p-qti-item-container {
    height: calc(80vh - 4em);
    overflow: auto;
}

    div.DISView_window > div.DISView_body div.tq-scoring-display.tq-assertions-live .p-qti-stim-split > div.p-qti-stimulus,
    div.DISView_window > div.DISView_body div.tq-scoring-display.tq-assertions-live .p-qti-stim-split > div.p-qti-item-container {
        height: calc(50vh - 4em);
    }

div.DISView_window > div.DISView_body div.tq-assertion-panel {
    height: 30vh;
    display:block;
    width: 100%;
}

    div.DISView_window > div.DISView_body div.tq-assertion-panel div.tq-header {
        border: 1px solid black;
        border-radius: .5em;
        width: 100%;
        background: white;
        color: black;
        height: fit-content;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
        div.DISView_window > div.DISView_body div.tq-assertion-panel div.tq-header button {
            background-color: white;
            width: 1.5em;
            height: 1.5em;
            padding: 2px 2px 2px 2px;
        }
        div.DISView_window > div.DISView_body div.tq-assertion-panel div.tq-header textarea {
            width: 25em;
            height: 2em;
            resize: both;
            margin-left: .5em;
            margin-right: .5em;
        }

    div.DISView_window > div.DISView_body div.tq-assertion-panel div.tq-body {
    }



div.DISView_window > div.DISView_body div.tq-scoring-display div.tq-shield {
    height: 100%;
}

div.DISView_window div.tq-item-frame {
    position: relative;
    margin: 24px 16px 16px;
    border: 2px solid #bfdbfe;
    border-radius: 8px;
}

div.DISView_window div.tq-item-frame.tq-item-frame-unlocked {
    border-color: transparent;
}

div.DISView_window div.tq-item-frame div.tq-lock-badge {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: white;
    border: 2px solid #bfdbfe;
    border-radius: 6px;
    z-index: 1;
}

div.DISView_window div.tq-item-frame div.tq-lock-badge.tq-lock-badge-hidden {
    display: none;
}

div.DISView_window div.tq-item-frame div.tq-lock-badge span.tq-lock-badge-icon {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    background-color: #1d4ed8;
    -webkit-mask-image: url('/images/lock.svg');
    mask-image: url('/images/lock.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

div.DISView_window > div.DISView_body div.tq-numeric-buttons{
    background-color: aqua;
    position: relative;
    width: 95%
}

    div.DISView_window > div.DISView_body div.tq-numeric-buttons > span.tq-control-span {
        z-index: 10;
        position: fixed;
        background-color: aqua;
    }

    div.DISView_window > div.DISView_body div.tq-numeric-buttons > span.tq-control-span > button.Button_window {
        background-color: steelblue;
        color: white;
        height: 1.4em;
        padding: .1em 1em;
        height: 100%;
        margin-left: 1em;
        margin-top: .1em;
        margin-bottom: .1em;
    }
    div.DISView_window > div.DISView_body div.tq-numeric-buttons > button:disabled {
        background-color: grey;
    }

    div.DISView_window > div.DISView_body div.tq-numeric-buttons > span.tq-existing-score-span > span.tq-score-row > button.Button_window:not(.tq_delete) {
        background-color: transparent;
        border: 2px outset black;
        margin: .1em .1em .1em .1em;
        padding: .1em;
        color: black;
    }

    /* Each existing score is a row: its main (edit) button + an integrated
       trashcan that deletes the score. */
    div.DISView_window > div.DISView_body div.tq-numeric-buttons > span.tq-existing-score-span > span.tq-score-row {
        display: inline-flex;
        align-items: center;
        gap: .15em;
        margin: .1em .25em .1em 0;
    }
    div.DISView_window > div.DISView_body div.tq-numeric-buttons > span.tq-existing-score-span > span.tq-score-row > button.tq_delete {
        min-width: 1.8em;
        min-height: 1.8em;
        background-size: 1.1em 1.1em;
    }
 
div .tq-side-panel div.tq-output-display {
    white-space:nowrap;
    min-height: 2em;
    text-align: center;
    border: 2px solid black;
    display:block;
    overflow-x: auto;
}

div .tq-side-panel div.tq-sample-panel {
    //overflow: auto;
    position: relative;
}
div .tq-side-panel div.tq-sample-panel button.tq-expandable-button:disabled {
    color: var(--color-text-muted, #999);
    opacity: 0.6;
    cursor: not-allowed;
}

div .tq-side-panel div.tq-sample-panel button.tq-expandable-button:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
}

/* ── Scoring side-panel accordion: overrides the global black AccBlock ── */
.DISView_window .tq-side-panel div.AccGroup_window {
    height: auto !important;
    overflow: visible;
}

.DISView_window .tq-side-panel div.AccGroup_window div.AccBlock_window {
    margin: 0 0 4px;
    border: 1px solid var(--color-border, #e0e4ed);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
}

.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    text-align: left;
    padding: 0 0.75em;
    background: #fff;
    color: var(--color-text-base, #333);
    font-size: 0.875em;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border-radius: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title::before {
    content: '\203A';
    flex: 0 0 auto;
    margin-right: 0.4em;
    font-size: 1.25em;
    line-height: 1;
    color: var(--color-accent, #0e7fa8);
    transform: rotate(0deg);
    transition: transform 0.18s ease;
}

.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title:hover {
    background: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
}

.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title.AccBlock_active {
    background: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
}

.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title.AccBlock_active::before {
    transform: rotate(90deg);
    color: var(--color-primary, #5B34A8);
}

.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title .tq_delete {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    background-size: 1.1em 1.1em;
}

.DISView_window .tq-side-panel div.AccGroup_window .tq_delete:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

/* Incomplete-definition marker on a VE title (EmptyDefinitionBadge): the
 * title rules above set background at 4-class specificity, so the generic
 * .tq-empty-def rule never won — match it here. Amber persists through
 * hover AND the open (active) state: the indicator must not vanish while
 * the author works the block. Dark text on #ffd54f = 9:1 (WCAG AAA). */
.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title.tq-empty-def,
.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title.tq-empty-def:hover,
.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title.tq-empty-def.AccBlock_active {
    background: #ffd54f;
    color: var(--color-text-base, #333);
}

/* Implicit (identifier) VEs: no caret, no hover interaction */
.DISView_window .tq-side-panel div.AccGroup_window span.AccBlock_title.tq-ve-implicit-title::before {
    content: none;
}

.DISView_window .tq-side-panel div.AccGroup_window div.AccBlock_body {
    border: none;
    border-top: 1px solid var(--color-border, #e0e4ed);
    margin: 0;
    padding: 0;
    background: #fff;
}

.DISView_window .tq-side-panel div.AccGroup_window div.AccBlock_body > * {
    padding: 8px 12px 12px;
}

div .tq-side-panel div.tq-sample-panel.tq-sample-panel-overlay {
    z-index: 20;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: steelblue;
    position: absolute;
}

dialog.tq-dialog.tq-pattern-dialog div.tq-dialog-controls {
    display: block;
}

.tq-dialog.tq-pattern-dialog .tq-dialog-controls ul.CheckboxGroup_window {
    padding-left: 0px;
    display: flex;
}

.tq-scoring-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.tq-scoring-section-header .tq-scoring-section-title {
    flex: 1;
}

.tq-scoring-section-header.tq-accordion-header {
    cursor: pointer;
    user-select: none;
}

.tq-accordion-caret {
    font-size: 1.1em;
    line-height: 1;
    margin-left: 6px;
    color: var(--color-text-muted, #888);
    transition: transform 0.18s ease;
    display: inline-block;
}

.tq-scoring-section-header.tq-accordion-open .tq-accordion-caret {
    transform: rotate(90deg);
}

.tq-scoring-section-body {
    overflow: hidden;
}

.tq-new-assertion-btn {
    display: block;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 13px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #4a5568;
    border-radius: 10px;
    background: #fff;
    color: var(--jcmaPurple);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.tq-new-assertion-btn:hover:not(:disabled) {
    border-color: var(--jcmaPurple);
    box-shadow: 0 2px 8px rgba(94, 6, 145, 0.20);
    transform: translateY(-1px);
}

.tq-new-assertion-btn:focus-visible {
    outline: 3px solid var(--jcmaPurple);
    outline-offset: 2px;
}

.tq-assertion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border, #e0e4ed);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.tq-assertion-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 0.85em;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
    cursor: pointer;
    user-select: none;
    color: var(--color-text-base, #333);
}

.tq-assertion-item:last-child {
    border-bottom: none;
}

.tq-assertion-item:hover,
.tq-assertion-item:focus {
    background: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
}

.tq-assertion-item:focus-visible {
    outline: 2px solid var(--color-primary-dark, #4B24A8);
    outline-offset: -2px;
}

.tq-assertion-item-active {
    background: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
    font-weight: 500;
}

.tq-assertion-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tq-assertion-item:hover > span,
.tq-assertion-item:focus > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

div.tq-scoring-section {
    margin: 0 -12px;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
}

.tq-deleted-items-accordion-container {
    margin: 0 -12px;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
}

.tq-deleted-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 4px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    user-select: none;
}

.tq-deleted-accordion-caret {
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.18s ease;
}

.tq-deleted-accordion-header.tq-deleted-accordion-open .tq-deleted-accordion-caret {
    transform: rotate(90deg);
}

.tq-deleted-accordion-body {
    padding: 4px 0 2px;
}

.tq-deleted-section {
    border: 1px solid var(--color-border, #e0e4ed);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}

.tq-deleted-section:last-child {
    margin-bottom: 0;
}

.tq-deleted-section-title {
    padding: 5px 10px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f7f8fa;
    color: var(--color-text-muted, #888);
    border-bottom: 1px solid var(--color-border, #e0e4ed);
}

.tq-deleted-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tq-deleted-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
    font-size: 0.82em;
}

.tq-deleted-item:last-child {
    border-bottom: none;
}

.tq-deleted-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-base, #333);
}

.tq-deleted-interaction-info {
    color: var(--color-text-muted, #888);
}

.tq-cascade-container {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    color: var(--color-text-muted, #888);
    white-space: nowrap;
}

.tq-restore-btn {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    font-size: 0.75em;
    font-weight: 600;
    border: 1px solid var(--color-border, #e0e4ed);
    border-radius: 4px;
    background: #fff;
    color: var(--color-text-base, #333);
    cursor: pointer;
    white-space: nowrap;
}

.tq-restore-btn:hover {
    background: var(--color-primary-tint, #F3EEFF);
    border-color: var(--color-primary, #5B34A8);
    color: var(--color-primary-dark, #4B24A8);
}

div.tq-scoring-section-title {
    padding: 8px 0 4px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #888);
}

div.tq-property-widget-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    color: var(--color-text-base, #333);
    border-bottom: 1px solid var(--color-border, #e0e4ed);
    padding: 6px 0 6px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #888);
}

/* The exemplified checkbox + info icon, kept together at the left. */
.tq-property-toggle {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.tq-property-toggle input[type="checkbox"] {
    margin: 0;
    padding: 0;
}

/* One em between the information icon and the start of the property label. */
div.tq-property-widget-title > label {
    margin-left: 0.5em;
}

/* Let property widgets fill the full width of their virtual-entity block. The
   global AccBlock_body has 1em side margins that inset the property area from
   the full-width VE titlebar; drop the side inset within the scoring panel
   only (other accordions keep their margins). */
.tq-sample-panel div.AccGroup_window div.AccBlock_body {
    margin-left: 0;
    margin-right: 0;
}

/* Info button next to the "exemplified" control: a circled "i" — white inside the
   circle, a heavier ring, and transparent outside the circle (so the dark title bar
   shows through the corners). */
/* The circled "i" that opens a feature's help modal (HelpIcon.js). It is the
   only affordance pointing at the help, so it is essential UI, not decoration:
   it uses --color-text-base (10.4:1, AAA) rather than the AA-only
   --color-text-muted it began with. */
button.tq-info-icon {
    background-color: #ffffff;
    color: var(--color-text-base, #333);
    border: 1px solid var(--color-border, #e0e4ed);
    border-radius: 50%;            /* circle; corners outside it stay transparent */
    width: 1.2em;
    height: 1.2em;
    min-width: 1.2em;
    padding: 0;
    margin-left: 0.4em;
    font-size: 0.85em;
    font-style: italic;
    font-weight: bold;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

button.tq-info-icon:hover {
    color: var(--color-primary-dark, #3d2270);
    border-color: var(--color-primary, #5B34A8);
}

button.tq-info-icon:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 1px;
}

/* A WAF.Dialog title bar is a flex row with space-between, holding the title
   and the close button. HelpIcon.attachToDialog wraps the title text and the
   icon in this span so the bar keeps exactly TWO flex children — otherwise a
   third child is spread into the middle of the bar. */
span.tq-dialog-title-help {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* A setting's label and its help icon sit on one row, because the attribute
   widget around them is a flex COLUMN (label row above, input below). */
div.tq-attr-label-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Help modal body (WAF.notify's addClass hook). Help text is prose with
   bullet lists, not the one-line message AlertThen is normally given, so it
   is left-aligned and given room and leading to stay readable. */
.tq-help-body {
    text-align: left;
    max-width: 46em;
    line-height: 1.5;
}

.tq-help-body p {
    margin: 0 0 0.6em 0;
}

.tq-help-body ul {
    margin: 0 0 0.6em 0;
    padding-left: 1.3em;
    list-style: disc;
}

.tq-help-body li {
    margin-bottom: 0.3em;
}

.tq-help-body :last-child {
    margin-bottom: 0;
}

/* ── Demo video library (DemoVideoLibrary.js) ─────────────────────────────
   The Watch affordance inside the help modal, and the modal player itself.
   Contrast: --color-primary-dark (#3d2270) on white is ~12.9:1 — AAA (7:1)
   with margin in both the plain and the hover-inverted state. */
button.tq-video-watch {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.8em;
    padding: 0.5em 0.9em;
    background-color: #ffffff;
    color: var(--color-primary-dark, #3d2270);
    border: 1px solid var(--color-primary-dark, #3d2270);
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
}

button.tq-video-watch:hover {
    background-color: var(--color-primary-dark, #3d2270);
    color: #ffffff;
}

button.tq-video-watch:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

.tq-video-watch-glyph {
    font-size: 0.85em;
    line-height: 1;
}

/* The player video: always hosted inside a measured .ht-player-stage (the
   Help & Training tabs and the fullscreen overlay — the small modal player
   is retired, owner 2026-09-01). width/height are the pre-metadata
   fallback; DemoVideoLibrary.attachStageSizing sets px sizes so the
   contained frame plus the 60px control band always fits the stage, with
   the picture pinned to the top so the native control strip (anchored to
   the video's CONTENT box) lands on the band, never on the burned-in
   caption line. */
.tq-video-player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 0;
    background-color: #000000;
}

/* The fullscreen overlay player (help modals' Watch): the whole viewport,
   the same bar + stage layout as the Help & Training tabs' players. */
dialog.tq-video-full-dialog[open] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: none;
    padding: 0 1em;
    box-sizing: border-box;
    background-color: #ffffff;
}

.tq-video-summary {
    text-align: left;
    max-width: 46em;
    line-height: 1.5;
    margin: 0.6em 0 0 0;
}

/* ── Help & Training screen (HelpTrainingView.js) ─────────────────────────
   The video course + online user guide. Contrast: body text #26262b on
   white is ~15.6:1, the meta line #3f3f46 is ~10.4:1, and the primary-dark
   accents are ~12.9:1 — all past AAA (7:1). */
.ht-view {
    padding: 0 1.5em 2em 1.5em;
    max-width: 62em;
    text-align: left;
    color: #26262b;
}

.ht-heading {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-primary-dark, #3d2270);
}

/* Immersive chrome hides the heading via the hidden ATTRIBUTE — but the
   display:flex above would defeat the UA's [hidden] rule without this
   (live bug 2026-09-01: the heading stayed put while a guide section or
   full-size player was up, eating ~100px of the stage's viewport). */
.ht-heading[hidden] {
    display: none;
}

.ht-heading:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

.ht-chapter {
    margin: 1.2em 0;
}

.ht-chapter-title {
    color: var(--color-primary-dark, #3d2270);
    border-bottom: 1px solid var(--color-primary-dark, #3d2270);
    padding-bottom: 0.25em;
}

.ht-notice {
    max-width: 46em;
    line-height: 1.5;
    padding: 0.6em 0.9em;
    border: 1px solid #5b5b66;
    border-radius: 6px;
    background-color: #f6f6f8;
    color: #26262b;
}

/* ── the course face ── */
.ht-video-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ht-video-list > li {
    margin: 0.5em 0;
}

/* One course row: a real button, full-width, left-aligned. */
button.ht-video-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    width: 100%;
    text-align: left;
    padding: 0.7em 0.9em;
    background-color: #ffffff;
    color: #26262b;
    border: 1px solid var(--color-primary-dark, #3d2270);
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
}

button.ht-video-row:hover {
    background-color: #f1edf9;
}

button.ht-video-row:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

.ht-video-glyph {
    color: var(--color-primary-dark, #3d2270);
    font-size: 0.9em;
    line-height: 1.6;
}

.ht-video-body {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.ht-video-title {
    font-weight: 600;
    color: var(--color-primary-dark, #3d2270);
}

.ht-video-meta {
    font-size: 0.9em;
    color: #3f3f46;
}

.ht-video-summary {
    line-height: 1.45;
    max-width: 46em;
}

/* ── the guide face ── */
.ht-guide-toc ul {
    list-style: none;
    margin: 0.4em 0 1.4em 0;
    padding: 0;
}

button.ht-toc-link {
    background: none;
    border: none;
    padding: 0.25em 0.2em;
    font-size: 1em;
    color: var(--color-primary-dark, #3d2270);
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

button.ht-toc-link:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

.ht-guide-body {
    max-width: 46em;
    line-height: 1.55;
}

/* ── paged reading mode (Word-reading-mode style, owner 2026-09-01) ──
   The nav bar stays put; the page below is the one scrolling region. */
.ht-guide-nav,
.ht-player-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--color-primary-dark, #3d2270);
    margin-bottom: 0.8em;
}

button.ht-nav-button {
    font-size: 1em;
    padding: 0.35em 0.9em;
    border: 1px solid var(--color-primary-dark, #3d2270);
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--color-primary-dark, #3d2270);
    cursor: pointer;
}

button.ht-nav-button:hover:not(:disabled) {
    background-color: var(--color-primary-tint, #F3EEFF);
}

button.ht-nav-button:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

button.ht-nav-button:disabled {
    border-color: #767680;   /* 4.5:1 on white — disabled UI is AA-exempt */
    color: #59595f;
    cursor: default;
}

/* Reader nav: icon buttons on the left, the section title truly centered —
   the right-hand spacer mirrors the three-button group's width. */
button.ht-nav-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.25em;
    line-height: 1;
    border: 1px solid var(--color-primary-dark, #3d2270);
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--color-primary-dark, #3d2270);
    cursor: pointer;
}

button.ht-nav-icon:hover:not(:disabled) {
    background-color: var(--color-primary-tint, #F3EEFF);
}

button.ht-nav-icon:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

button.ht-nav-icon:disabled {
    border-color: #767680;
    color: #59595f;
    cursor: default;
}

.ht-guide-nav-spacer {
    width: 148px;   /* three 44px buttons + two 0.5em gaps */
    flex-shrink: 1;
}

.ht-guide-where {
    flex: 1;
    text-align: center;
    color: #3f3f46;
    font-weight: 600;
}

.ht-guide-page {
    max-height: calc(100vh - 21em);
    min-height: 14em;
    overflow-y: auto;
    padding-right: 0.6em;
}

/* ── immersive chrome (owner 2026-09-01): while reading a guide section or
   playing a course video, the screen heading is hidden and the view takes
   the full width and the remaining viewport height. Chrome above the page
   shrinks to the app banner + tabs + nav bar (~12em). ── */
.ht-view.ht-immersive {
    max-width: none;
}

.ht-view.ht-immersive .ht-guide-body {
    max-width: none;
}

.ht-view.ht-immersive .ht-guide-page {
    max-height: calc(100vh - 12em);
}

.ht-guide-page:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

.ht-toc-chapter {
    color: var(--color-primary-dark, #3d2270);
    margin: 1em 0 0.2em 0;
}

/* ── the course's full-size player ── */
.ht-player-title {
    margin-left: 0.4em;
    font-weight: 600;
    color: #26262b;
}

/* The stage's height is set in px by DemoVideoLibrary.attachStageSizing —
   the MEASURED viewport remainder below the back bar (re-measured on
   resize and tab re-show) — so the whole frame always fits on screen. No
   em estimates here (owner bug 2026-09-01: the old max-height guesses put
   the burned-in captions below the fold). The video's own sizing lives on
   .tq-video-player above. */
.ht-player-stage {
    background-color: #000000;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ht-guide-body a {
    color: var(--color-primary-dark, #3d2270);
}

.ht-guide-body code {
    background-color: #f1edf9;
    border-radius: 3px;
    padding: 0.05em 0.3em;
    color: #26262b;
}

.ht-guide-body h4:focus-visible,
.ht-chapter-title:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3d2270);
    outline-offset: 2px;
}

.tq-guide-img {
    max-width: 100%;
    border: 1px solid #5b5b66;
    border-radius: 6px;
}

/* Screenshot stand-in (placeholder:<key> images) until the screenshot
   pipeline lands: a clearly-styled box carrying the alt text plus the
   localized "coming" note the view appends. */
/* Blockquote callouts in the online guide (the '>' notes in the chapters). */
.tq-guide-callout {
    margin: 0.8em 0;
    padding: 0.6em 0.9em;
    border-left: 4px solid var(--color-primary-dark, #3d2270);
    border-radius: 0 6px 6px 0;
    background-color: #f6f6f8;
    color: #26262b;
}

.tq-guide-callout p {
    margin: 0;
}

.tq-guide-screenshot-placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    align-items: center;
    justify-content: center;
    min-height: 7em;
    margin: 0.8em 0;
    padding: 1em;
    border: 2px dashed #5b5b66;
    border-radius: 6px;
    background-color: #f6f6f8;
    color: #26262b;
    font-weight: 600;
}

/* A captured screenshot replacing a placeholder's content: fit the page
   column, and let the box drop its dashed "coming" chrome. */
.tq-guide-screenshot {
    display: block;
    max-width: 100%;
    border: 1px solid var(--color-border, #d3d3da);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.tq-guide-screenshot-placeholder.ht-screenshot-filled {
    min-height: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}

.ht-screenshot-note,
.ht-video-coming {
    font-size: 0.9em;
    font-weight: normal;
    font-style: italic;
    color: #3f3f46;
}

.ht-video-coming {
    display: inline-block;
    margin-top: 0.6em;
}

div.tq-property-body {
    position: relative;
    padding-left: 1.25em;
    padding-top: 4px;
}

    .tq-pattern-dislay,
    div.tq-property-body button.tq-constraint-display {
        display: inline-flex;
        justify-content: space-evenly;
        width: 100%;
        padding-left: 0;
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--color-border, #e0e4ed);
    }
    div.tq-property-body > div.RadioGroup_div0 > ul.RadioGroup_window {
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
        padding-left: 0;
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--color-border, #e0e4ed);
    }

    div.tq-property-body .p-qti-eq-frame {
        min-width: 100%;
    }

div.tq-property-body button:disabled {
    background-color: var(--color-disabled-bg, #f0f0f0);
    color: var(--color-disabled-text, #aaa);
}
div.tq-property-body input {
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-border, #e0e4ed);
    z-index: unset;
}

div.tq-property-widget .tq-disable-sheild {
    background-color: transparent;
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: all;
}

div.tq-property-body:has(.tq-disable-sheild) > *:not(.tq-disable-sheild) {
    opacity: 0.38;
    pointer-events: none;
}

/* Open/close + selected styling key off the "exemplified" TOGGLE only. The
   :has() is scoped to .tq-property-toggle (the title-bar checkbox wrapper) on
   purpose: an unscoped :has(input[type=checkbox]...) also matches checkboxes
   INSIDE the editor body (e.g. the number widget's relative-tolerance checkbox,
   or the valid-comparison rows checkboxes), which kept those properties
   collapsed even when the author checked the toggle. Do not widen this. */
/* Selected (checked) property widget — title bar highlighted */
div.tq-property-widget:has(.tq-property-toggle input[type="checkbox"]:checked) div.tq-property-widget-title {
    background-color: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
}

/* Non-selected (unchecked) property widget — collapse the body and show only a
   greyed-out header, so an inactive virtual-entity property reads as disabled
   without taking up space with its (unused) options. */
div.tq-property-widget:has(.tq-property-toggle input[type="checkbox"]:not(:checked)) div.tq-property-body {
    display: none;
}
div.tq-property-widget:has(.tq-property-toggle input[type="checkbox"]:not(:checked)) div.tq-property-widget-title {
    background-color: #e2e5eb;
    color: #3d3d3d;
}
div.tq-property-widget:has(.tq-property-toggle input[type="checkbox"]:not(:checked)) div.tq-property-widget-title > label {
    opacity: 0.5;
}

/* ===== Human-Scoring Rubric widgets (left scoring panel) =====
   Two property-widget-styled blocks (Shared Rubrics / Item-Specific
   Rubric) rendered by HumanScoringRubricSection. They reuse the
   tq-property-widget chrome; the rules below cover only their
   internals. */
.tq-human-rubric-section {
    margin: 4px 0 8px;
}

/* No enable toggle on rubric widgets — keep the title bar's label
   flush left where the toggle would have been. */
div.tq-rubric-widget div.tq-property-widget-title > label {
    margin-left: 0;
}

.tq-rubric-group {
    padding: 4px 0;
}

.tq-rubric-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.tq-rubric-name {
    flex: 1;
    overflow-wrap: anywhere;
}

/* 7.46:1 on white — WCAG AAA for normal text. */
.tq-rubric-none {
    flex: 1;
    color: #555;
}

.tq-rubric-interaction-id {
    display: block;
    font-family: monospace;
    /* 7:1+ on white (AAA). */
    color: #3d3d3d;
}

/* In-development badge: white on #5c3c00 is ~9.4:1 (AAA). */
.tq-rubric-badge {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #5c3c00;
    color: #ffffff;
    font-size: 0.8em;
    white-space: nowrap;
}

.tq-rubric-status {
    font-size: 0.85em;
}

/* Visible placeholder shown when a property's widget fails to render, so it
   never silently vanishes from the panel. High-contrast warning, not colour-
   only (a leading warning glyph) for WCAG. */
div.tq-property-render-failed {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.6em;
    border: 1px solid #8a1f11;
    border-radius: 3px;
    background-color: #fbeae5;
    color: #6b1810;
}

div.tq-property-render-failed::before {
    content: "\26A0";   /* ⚠ warning sign */
    font-weight: bold;
}


div.tq-property-body input.TextInput_window {
    height: 1.5em;
}

/* Region-predicate widget: status line above the "Choose region" button. */
div.tq-region-status {
    margin-bottom: 0.35em;
    font-style: italic;
    color: #333;
}

/* Small icon button (a circle next to a square) that opens the drawing
   canvas. Mirrors the .tq_external_link reference button so the region
   widget's two actions read as a matched pair. */
button.tq-region-choose {
    background-image: url('/Images/circle-square.svg');
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: center;
    background-color: transparent;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
button.tq-region-choose:hover {
    background-color: var(--color-primary-tint);
    border-color: var(--color-primary);
}

/* Value editor = number field + reference (link) + delete (trash) buttons,
   living in one half-width grid cell. The two 44px (WCAG) buttons on the same
   row would crowd the field down to nothing (and the editor overflowed its
   cell). Let the field take a full row with the buttons wrapping beneath it,
   and min-width:0 so the editor (a grid item) shrinks to its cell instead of
   overflowing. */
.tq-number-property-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.tq-number-property-editor > input.TextInput_window {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* TextContains property widget — rubric authoring.
   The body lays out a label, a multi-line textarea, and an inline help
   line. Matches the surrounding tq-property-body shadow / radius so the
   control reads as part of the property family rather than a foreign
   input. Field colors stay at the default body/text colors (>= 7:1 on
   the body background per WCAG AAA); the help line uses a slightly
   muted hue but stays at the AAA 4.5:1 minimum for non-essential text.
   Browser focus ring is intentionally preserved (no outline override)
   so keyboard focus is visible. */
label.tq-property-textcontains-label {
    display: block;
    margin: 0.5rem 0 0.25rem 0;
    font-weight: 600;
}

textarea.tq-property-textcontains-input {
    display: block;
    width: 100%;
    min-height: 4.5em;
    padding: 0.5rem 0.75rem;
    border: 1px solid #555;            /* AAA-grade against white surface */
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: vertical;
}

div.tq-property-textcontains-help {
    margin: 0.4rem 0 0.25rem 0;
    color: #333;                       /* >= 4.5:1 against #fff body */
    font-size: 0.9rem;
    line-height: 1.4;
}

/* SHADOW NOTE (keep in sync): scoring-entity highlights are stamped INSIDE
   shadow-rendered items — the live copies of the .tq-highlight /
   .p-qti-selected rules ride in DefineItemScoringView._presentItem's
   scoring extra sheet. These page rules remain for light-DOM widgets
   (simple-scoring panels, editor surfaces). */
.tq-highlight {
    background-color: var(--color-primary-tint, #F3EEFF);
    cursor: pointer;
}

/* The CustomSelectWidget button (used by InlineChoice) has an
   explicit `background: white` in PaldroeStyles.css at the same
   specificity as .tq-highlight, so the cascade order determines
   which wins — making the scoring-author hover highlight invisible.
   Raise specificity so .tq-highlight wins over the button's white
   default.

   Inputs and textareas don't usually carry a default background
   from a stylesheet, but the same rule covers them so the purple
   hover highlight on TextEntry / ExtendedText is robust against
   any future per-element background. */
button.tq-highlight,
input.tq-highlight,
textarea.tq-highlight,
.p-qti-custom-select-button.tq-highlight {
    background-color: var(--color-primary-tint, #F3EEFF);
}

.tq-dialog-widgets div.tq-reorderable-list ul {
    max-height: 9em;
    overflow: auto
}


figure {
    display: inline-block;
    margin-top: 0px;
}

div.p-qti-selected {
    outline: 3px solid red;
}

.tq_resizable.p-qti-columns {
    border: 1px dashed darkgrey;
    border-right: 1px dashed darkgrey;
    min-height: 2em;
    width: 100%;
    display: grid;

}

button.tq-draggable-indicator {
    background-image: url(/Images/menu.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    border: none;
    height: 44px;
    width: 44px;
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: #9ca3af; /* text-gray-400 */
    padding: 0;
    border-radius: 0.125rem; /* rounded-sm */
    transition: color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    outline: none; /* focus:outline-none */
}
    button.tq-draggable-indicator:hover {
        cursor: grab;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* hover:shadow-md */
    }

button.tq_edit {
    background-image: url('/images/edit.svg');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
button.tq_edit:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
}
button.tq_edit:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}

/* Every toolbar TestQuill.makeQuill builds carries .tq-editor-toolbar —
   scope shared editor-toolbar chrome to THAT marker, never to an
   enumerated list of host window classes (each newly listed host was a
   bug waiting to happen: any editor host missing from the list rendered
   the custom buttons with no icon face — hit live in the rubric editor). */

/* WCAG 2.1 SC 2.5.5 requires minimum 44x44px touch targets */
div.ql-toolbar.ql-snow.tq-editor-toolbar button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-qti-interaction {
    background-image: url('/images/interaction-button.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-qti-markup {
    background-image: url('/images/markup-button.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-suppress-tts {
    background-image: url('/images/suppress-tts.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* Compact the toolbar to help it stay on one line: trim the inter-group
   margin (Quill default 15px) and the toolbar padding. This reclaims width
   WITHOUT shrinking any button — the 24px targets stay at the WCAG AA floor
   (AAA target size is 44px, which a toolbar can't meet). */
div.ql-toolbar.ql-snow.tq-editor-toolbar {
    padding: 5px 6px;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar .ql-formats {
    margin-right: 6px;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-columns {
    background-image: url('/images/columns.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-table {
    background-image: url('/images/table.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* Section-break (horizontal rule) button — a line glyph via SVG data URI. */
div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-hr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='2' y='8' width='14' height='2' rx='1' fill='%23444'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* The section break as authors see it — the editor match to the delivery
   rule in QTIScripts/css/QtiBaseStyles.css (hr: 1px solid black top border,
   1rem vertical margins), so what the author sees is what candidates get. */
div.ql-editor hr {
    border: none;
    border-top: 1px solid #000;
    margin: 1rem 0;
    width: 100%;
}

/* Click-to-view button — a dialog-window glyph via SVG data URI. */
div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-click-to-view {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='2' y='3' width='14' height='12' rx='1.5' fill='none' stroke='%23444' stroke-width='1.5'/%3E%3Cline x1='2' y1='6.5' x2='16' y2='6.5' stroke='%23444' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='11' r='1.6' fill='%23444'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* Click-to-view box as the AUTHOR sees it in the body editor: the label
   renders as the same button-face students get (mirrors the delivery
   trigger styling in QTIScripts/css/PaldroeStyles.css); the content rides
   along hidden; a pencil appears on hover/focus to open the dialog. */
div.ql-editor .p-qti-click-to-view {
    position: relative;
    display: block;
    margin: 0.5em 0;
}

div.ql-editor .p-qti-click-to-view > .p-qti-ctv-label {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #475467;
    border-radius: 6px;
    background: #f0f4f8;
    color: #101828;
    cursor: pointer;
    /* The label is a native <summary>; the box face reads as a button,
       not a disclosure widget — hide the marker (toggle is suppressed in
       the editor anyway; clicking opens the authoring dialog). */
    list-style: none;
}

div.ql-editor .p-qti-click-to-view > .p-qti-ctv-label::-webkit-details-marker {
    display: none;
}

div.ql-editor .p-qti-click-to-view > .p-qti-ctv-label:hover,
div.ql-editor .p-qti-click-to-view > .p-qti-ctv-label:focus {
    background: #e4e9f0;
}

/* Label lines are Quill <div> blocks; render them inline in the face. */
div.ql-editor .p-qti-click-to-view > .p-qti-ctv-label div {
    display: inline;
}

div.ql-editor .p-qti-click-to-view > .p-qti-ctv-content {
    display: none;
}

div.ql-editor .p-qti-click-to-view > button.tq-ctv-edit {
    position: absolute;
    top: 2px;
    left: -2px;
    transform: translateX(-100%);
    display: none;
    padding: 2px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #ffffff;
    color: #101828;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
}

div.ql-editor .p-qti-click-to-view:hover > button.tq-ctv-edit,
div.ql-editor .p-qti-click-to-view:focus-within > button.tq-ctv-edit {
    display: inline-block;
}

/* The click-to-view authoring dialog: a modal-styled overlay, NOT the top
   layer. Everything that can open on top of it is either a showModal()
   top-layer dialog (interaction template, equation, special chars, image /
   asset dialogs, WAF.notify) — always above regardless of z-index — or
   stacked by z-index and must exceed these values: the interaction picker
   (.ip-overlay 199 / .ip-panel 200, styles.css) and the interaction hover
   toolbar (.tq-interaction-toolbar 1000). Keep this overlay/panel BELOW 199
   or the picker opens behind the dialog (a real, reported bug). */
.tq-ctv-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(16, 24, 40, 0.45);
}

.tq-ctv-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 160;
    width: min(960px, 94vw);
    max-height: 88vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    padding: 16px 20px 20px;
}

.tq-ctv-panel > label {
    display: block;
    margin: 12px 0 4px;
    font-weight: 600;
    color: #101828;
}

.tq-ctv-panel .tq-ctv-content-editor .ql-container {
    min-height: 240px;
}

.tq-ctv-panel .tq-dialog-buttons {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Special-character palette button — a glyph rather than an SVG asset. */
div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-special-char::before {
    content: "\03A9"; /* Ω */
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-restore-interaction {
    background-image: url('/images/restore-trash.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* ============================================================
   Content tables (TQTable) — author-inserted semantic tables,
   distinct from the student-fillable TableInput interaction.
   ============================================================ */

/* Size to content and stay resizable. Quill's base stylesheet forces
   `.ql-editor table { width:100%; table-layout:fixed }`, which stretched every
   table across the whole editor; override it (higher specificity) so a new
   table is only as wide as its content and an author-set inline width wins. */
.ql-editor table.tq-content-table,
table.tq-content-table {
    width: auto;
    table-layout: auto;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0.6em 0;
}

table.tq-content-table > tbody > tr > th,
table.tq-content-table > tbody > tr > td {
    border: 1px solid #98a2b3;
    padding: 6px 10px;
    min-width: 3em;
    vertical-align: top;
    text-align: left;
}

/* Header cells (column or row headers) read as emphasized. */
table.tq-content-table > tbody > tr > th {
    background: #eef2f6;
    font-weight: 600;
}

/* Content-editable cells shouldn't paint the browser's focus outline over
   the cell border; use a subtle inset highlight instead. */
table.tq-content-table > tbody > tr > td:focus,
table.tq-content-table > tbody > tr > th:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #b2ccff;
}

/* ---- cell lines + in-cell lists (cell-line model) ----------------------
   A cell holds one or more qti-cell-line elements (custom element, so it
   needs display:block); consecutive list lines group under qti-cell-list
   (role="list"; lines carry role="listitem"). Markers come from CSS —
   bullets via list-style, numbering via a counter reset per list, so a
   second list in the same cell restarts at 1. */
qti-cell-line,
qti-col-line {
    display: block;
}

qti-cell-list {
    display: block;
    padding-left: 1.6em;
    counter-reset: tq-cell-ol;
}

qti-cell-list > qti-cell-line,
qti-cell-list > qti-col-line {
    display: list-item;
}

qti-cell-list[data-list-kind="bullet"] > qti-cell-line,
qti-cell-list[data-list-kind="bullet"] > qti-col-line {
    list-style-type: disc;
}

qti-cell-list[data-list-kind="ordered"] > qti-cell-line,
qti-cell-list[data-list-kind="ordered"] > qti-col-line {
    list-style-type: none;
    counter-increment: tq-cell-ol;
}

qti-cell-list[data-list-kind="ordered"] > qti-cell-line::before,
qti-cell-list[data-list-kind="ordered"] > qti-col-line::before {
    content: counter(tq-cell-ol) ". ";
}

/* ---- contextual controls (portalled to <body>, positioned via inline styles) ---- */
.tq-table-controls {
    display: none;
    font-family: inherit;
}

/* Pills group the three actions for the hovered column (horizontal) or row
   (vertical) so they read as one control and stay compact near an edge. */
.tq-tc-pill {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.28);
}

/* 24px hit target (WCAG 2.2 SC 2.5.8 AA); the equivalent right-click menu
   covers the 44px AAA target-size path. White glyph on a dark fill gives AAA
   text contrast (>=7:1) — see the per-kind notes below. */
.tq-tc-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3);
}

/* Insert = green, delete = red, so intent is obvious at a glance. */
.tq-tc-insert {
    background: #14532d; /* white on #14532d ~= 9.1:1 (AAA) */
}

.tq-tc-delete {
    background: #7f1d1d; /* white on #7f1d1d ~= 10.0:1 (AAA) */
}

/* Hover feedback that does NOT lighten the fill (which would erode the AAA
   contrast) — a focus-style ring instead. */
.tq-tc-btn:hover {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4), 0 1px 2px rgba(16, 24, 40, 0.3);
}

/* Visible keyboard focus (WCAG 2.4.7 / AAA 2.4.13 focus appearance). */
.tq-tc-btn:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

/* Right-edge drag handle to resize the table width. */
.tq-tc-resize {
    width: 10px;
    height: 40px;
    border-radius: 5px;
    background: #1d4ed8;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
    cursor: ew-resize;
}

.tq-tc-resize:hover {
    background: #1e40af;
}

/* While a table-width drag is live (TQTableControls stamps this on
   <html>): keep the resize cursor and suppress text selection when the
   pointer outruns the handle mid-drag. */
html.tq-col-resizing,
html.tq-col-resizing * {
    cursor: ew-resize !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* ============================================================
   Special-character palette (SpecialCharPicker)
   ============================================================ */
dialog.tq-charpicker {
    width: min(560px, 92vw);
    max-height: 82vh;
    padding: 0;
    border: 1px solid #98a2b3;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.28);
    overflow: hidden;
}

dialog.tq-charpicker::backdrop {
    background: rgba(16, 24, 40, 0.35);
}

.tq-charpicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e7ec;
}

.tq-charpicker-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.tq-charpicker-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #475467;
}

.tq-charpicker-close:hover {
    background: #f2f4f7;
}

.tq-charpicker-closeafter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #e4e7ec;
    font-size: 13px;
    color: #344054;
    cursor: pointer;
}

.tq-charpicker-body {
    padding: 8px 16px 16px;
    overflow-y: auto;
    max-height: calc(82vh - 130px);
}

.tq-charpicker-heading {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #667085;
}

.tq-charpicker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tq-charpicker-char {
    width: 36px;
    height: 36px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tq-charpicker-char:hover {
    background: #eef2f6;
    border-color: #98a2b3;
}

.tq-charpicker-char:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
}

/* ============================================================
   Footnote block style (header value 'footnote' -> div.qti-footnote)
   ============================================================ */
/* Styles-dropdown option label (mirrors Quill's built-in header labels). */
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="footnote"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="footnote"]::before {
    content: "Footnote";
    font-size: 0.8em;
}

/* Footnote appearance in the editor — mirrors the delivery rule in
   QTIScripts/css/PaldroeStyles.css so authoring matches what students see. */
.qti-footnote {
    font-size: 0.85em;
    color: #475467;
    border-top: 1px solid #d0d5dd;
    margin-top: 0.75em;
    padding-top: 0.4em;
}

/* QtiMarkup content styling - blue text and blue borders */
tq-markup {
    color: #1565c0;
}

tq-markup img,
tq-markup figure,
tq-markup iframe {
    border: 2px solid #1565c0;
}

/* SuppressTTS content styling - red underline */
tq-suppress-tts {
    text-decoration: underline;
    text-decoration-color: #c62828;
    text-decoration-thickness: 2px;
}


div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-float {
    background-image: url('/images/floatNone.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1em;
    width: 1em;
    margin: .1em .1em.1em.1em;
}
    div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-float[value=left] {
        background-image: url('/images/floatLeft.png');
        background-repeat: no-repeat;
        background-size: contain;
        height: 1em;
        width: 1em;
        margin: .1em .1em.1em.1em;
    }

    div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-float[value=right] {
        background-image: url('/images/floatRight.png');
        background-repeat: no-repeat;
        background-size: contain;
        height: 1em;
        width: 1em;
        margin: .1em .1em.1em.1em;
    }


span.tq_resizable.tq-stand-in[data-tq-type="figure"] {
    display: inline-block;
    text-align: center;
    margin: 1em 1em 1em 1em;
}
/* Paragraph blocks: tag-agnostic. The Paragraph blot renders a <qti-span>
   (Paragraph.js tagName='qti-span'), so a div-only selector left new paragraphs
   as the custom element's default display:inline — Enter created a paragraph but
   the caret didn't visually move to a new line (it lagged a line behind). Match
   the paragraph by its data-tq-type, whatever element carries it. */
.tq-stand-in[data-tq-type="p"] {
    display: block;
}

.tq-stand-in.ql-align-center[data-tq-type="p"] {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}
.tq-stand-in.ql-align-right[data-tq-type="p"] {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: end;
}
.tq-stand-in.ql-align-center[data-tq-type="p"] {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-content: center;
}

.tq-stand-in[data-tq-type="p"]:has(br:first-child) {
    display: block;
}

span.TreeNode_normal.tq_highlight {
    border:groove;
    background-color: aqua;
}

div.tq-gap-images-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
    margin-top: 1em;
    border: 2px dashed #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    min-height: 60px;
}

div.tq-gap-image {
    width: 50px;
    height: auto;
    resize: horizontal;      /* width-only; height follows the locked aspect-ratio (set in GapImage.js) so the picture never stretches */
    display: block;
    overflow: hidden;
    position: relative;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    /* aspect-ratio will be set dynamically via JavaScript */
}

    div.tq-gap-image:hover {
        border-color: #0066cc;
        transform: scale(1.05);
    }

    div.tq-gap-image.p-qti-selected {
        border-color: #0066cc;
        box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
    }

div.tq-gap-image > img {
    width: 100%;
    height: auto;
}

    div.tq-gap-image > button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
    }

button.tq-tool-button {
    width: 36px;
    height: 36px;
    border: 3px groove lightgrey;
    padding: 0px 0px 0px 0px;
}

.tq-missing-required {
    background-color: red;
    border: 2px solid red;
}

.tq_button_span {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.node-widget > div:first-child {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
}

.tq_properties {
    background-image: url('/images/settings.svg');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
.tq_properties:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
}
.tq_properties:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}
/* The settings wheel hosts a background-image gear icon and sets
   border:none / background-color:transparent, which (equal specificity,
   later in source) overrode the generic .tq-missing-required red flag — so
   a missing required attribute marked the wheel but it never visibly turned
   red, i.e. validation failed silently. Re-assert the red error state with
   higher specificity so the wheel clearly turns red while the gear stays
   legible. */
.tq_properties.tq-missing-required {
    background-color: #ffb3b3;
    border: 2px solid red;
}
.tq_delete {
    background-image: url('/images/trash-2.svg');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
.tq_delete:hover {
    background-color: #fee2e2;
}
.tq_delete:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}

/* Choice reorder buttons — same icon-button pattern as their
   siblings; chevrons from the shared icon set. */
.tq_move_up,
.tq_move_down {
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
.tq_move_up { background-image: url('/images/chevron-up.svg'); }
.tq_move_down { background-image: url('/images/chevron-down.svg'); }
.tq_move_up:hover,
.tq_move_down:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
}
.tq_move_up:focus-visible,
.tq_move_down:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}

/* Copy / rename siblings of .tq_delete — same icon-button pattern,
   non-destructive hover tint. */
.tq_copy,
.tq_rename {
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
.tq_copy {
    background-image: url('/images/copy.svg');
}
.tq_rename {
    background-image: url('/images/edit-3.svg');
}
.tq_copy:hover,
.tq_rename:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
}
.tq_copy:focus-visible,
.tq_rename:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}

div.DISView_window > div.DISView_body div.tq-numeric-buttons > button.Button_window.tq_add,
.tq_add {
    background-image: url('/images/plus-square.svg');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease, border-color 120ms ease;
}
.tq_add:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
    border-color: var(--color-primary);
}
.tq_add:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}
.tq_subtract {
    background-image: url('/images/minus-square.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
}

.tq_link_edit {
    background-image: url('/images/edit-2.svg');
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: center;
    background-color: transparent;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.tq_link_edit:hover {
    background-color: var(--color-primary-tint);
    border-color: var(--color-primary);
}
.tq_link_edit:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.tq_external_link {
    background-image: url('/Images/external-link.svg');
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: center;
    background-color: transparent;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.tq_external_link:hover {
    background-color: var(--color-primary-tint);
    border-color: var(--color-primary);
}
.tq_remove_external_link {
    background-image: url('/Images/trash-2.svg');
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: center;
    background-color: transparent;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.tq_remove_external_link:hover {
    background-color: #fee2e2;
    border-color: #a32020;
}

.tq_start_point {
    background-image: url('/Images/startPoint.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
    border: none;
}
.tq_intersects {
    background-image: url('/Images/intersects.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
    border: none;
}
.tq_points_towards {
    background-image: url('/Images/pointsTowards.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
    border: none;
}

.tq_close {
    background-image: url('/Images/close.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
}
.tq_circle-arrow-left {
    background-image: url('/Images/arrow-left-circle.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
    border: none;
    background-color: transparent;
}
.tq_circle-arrow-right {
    background-image: url('/Images/arrow-right-circle.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
}

.tq_layout {
    background-image: url('/images/layout.svg');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
.tq_layout:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
}
.tq_layout:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}
.tq_image {
    background-image: url('/images/image.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
}



.tq_hotspot {
    background-image: url('/images/crosshair.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    margin: .1em .1em.1em.1em;
}

.tq-big-btn {
    display: block;
    width: 100%;
}

.tq-big-add-btn {
    display: block;
    background-image: url('/images/plus-square.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color:lightgray;
    width:100%;
    height: 1.5em;
}

.tq-expandable-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    background-image: none;
    background-color: transparent;
    color: var(--color-text-base, #333);
    width: 100%;
    height: auto;
    padding: 0.55em 0.75em;
    text-align: left;
    font-size: 0.875em;
    border: none;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
    cursor: pointer;
    box-sizing: border-box;
    transition: var(--btn-transition, background-color 0.15s ease);
}

.tq-expandable-button::after {
    content: '';
    display: block;
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.tq-expandable-button.tq-selected::after {
    transform: rotate(-135deg) translateY(2px);
}

.tq-assertion-selector {
    display: block;
    width: max-content;
    background-color: lightgray;
}
.tq-assertion-selector div.tq-title {
    font-weight: bold;
    text-align: center;
}

.tq-assertion-selector div.tq-body {
    display: block;
}
.tq-assertion-selector div.tq-body > span{
    display: block;
} 
.tq-assertion-selector div.tq-body input.tq-map {
    width: 5em;
}

span.tq-yes-no-out {
    display: inline-flex;
}

    span.tq-yes-no-out input[type=radio] {
        position: fixed;
        opacity: 0;
        pointer-events: none;
    }

    span.tq-yes-no-out img {
        margin-left: 2px;
        margin-right: 2px;
    }

    span.tq-yes-no-out input[type=radio]:checked + img {
        background-color: white;
    }
    span.tq-yes-no-out input[type=radio]:focus + img {
        border: solid black 2px;
    }


div.tq-calc {
    margin-top: 1em;
}

div.tq-calc button.Button_window {
    width: 100%;
}

.tq_dialog {
    display: flex;
    flex-direction: column;
}
/* Legacy alias — CssClassEditor now uses .app-dialog */
.tq-entity-dialog {
    display: grid;
    background-color: lightgray;
    border: 4px outset;
    border-radius: 5%;
    width: max-content;
}

.tq-side-panel {
    max-width: none;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-right: 1px solid #d0d4dc;
    box-sizing: border-box;
}

div.tq-side-panel div.tq-calc {
    overflow-y: auto;
    position: relative;
}

div.tq-side-panel div.tq-calc div.tq-calc-shield {
    z-index: 200;
    top: 0;
    left: 0;
    position: absolute;
    background-color: lightgray;
}

.tq-entity-dialog > div.tq-controls {
    justify-content: space-around;
    border-bottom: none;
    padding: 0;
}

.tq-side-panel > button.Button_window {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #d0d4dc;
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
    background-position: center;
    background-size: 20px 20px;
}

.tq-side-panel > button.Button_window:hover {
    background-color: #e8eaf2;
}

.tq-side-panel > button.Button_window:focus-visible {
    outline: 3px solid var(--color-primary, #5B34A8);
    outline-offset: -3px;
}

button.tq-panel-toggle-btn {
    background-color: transparent;
    box-shadow: none;
    border: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}

button.tq-panel-toggle-btn:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
    border: 1px solid var(--color-primary);
}

button.tq-panel-toggle-btn:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}

button.tq-panel-toggle-btn.tq_circle-arrow-right,
button.tq-panel-toggle-btn.tq_circle-arrow-left {
    background-image: none;
    height: 44px;
    width: 44px;
    margin: 0;
}

button.tq-panel-toggle-btn::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #555;
    border-top: 2px solid #555;
}

button.tq-panel-toggle-btn.tq_circle-arrow-right::after {
    transform: rotate(45deg);
}

button.tq-panel-toggle-btn.tq_circle-arrow-left::after {
    transform: rotate(-135deg);
}

.tq-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #d0d4dc;
    box-sizing: border-box;
}

.tq-controls > span.tq-score-action {
    margin-left: 4em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.tq-controls > span.tq-score-action input.tq-show-intermediates {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
}

.tq-controls > span.tq-score-action label.tq-show-intermediates-label {
    white-space: nowrap;
    font-size: 0.72em;
    color: var(--color-text-muted);
    line-height: 1;
}

 div.tq-side-panel div.tq-calc div.tq-controls {
     display: block;
     overflow-y: auto;
     overflow-x: overlay;
     border-bottom: none;
     padding: 0;
 }
 

/* Floating Edit/Reload toolbar for interactions. It is a single element
   appended to <body> (not inside the Quill editor content), shown via JS on
   hover over an interaction iframe and pinned to the iframe's top-right corner
   with position:fixed. Kept out of the editor's content tree so Quill never
   reparents the iframe (which would reload it). JS toggles display:flex;
   default is hidden. */
.tq-interaction-toolbar {
    position: fixed;
    z-index: 1000;
    display: none;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d0d5dd);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Self-contained icon buttons for the interaction toolbar. Not coupled to the
   shared tq_edit icon class — this toolbar owns its button styling and icon
   size, so it doesn't have to match every other edit button. The 44x44 hit-area
   (WCAG 2.5.5) is kept; only the <img> glyph is smaller. */
.tq-interaction-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 120ms ease;
}
.tq-interaction-toolbar button:hover {
    background-color: var(--color-primary-tint, #F3EEFF);
}
/* Delete is destructive — red hover like .tq_delete */
.tq-interaction-toolbar button.tq-interaction-delete-btn:hover {
    background-color: #fee2e2;
}
.tq-interaction-toolbar button:focus-visible {
    outline: var(--focus-outline, 3px solid #5B34A8);
    outline-offset: var(--focus-offset, 2px);
}
.tq-interaction-toolbar-icon {
    width: 18px;
    height: 18px;
    display: block;
}
.property-widget {
    padding-left: 2em;
}

dialog.tq-dialog {
    z-index: 50;
    position: fixed;
    align-self: anchor-center;
}

.tq-entity-dialog > caption {
    font-size:larger;
    font-weight: bold;
    align-self:center;
}

.tq-dialog-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Property widget label cells. Labels are camelCase i18n tags like
 * .validComparisonShowsForValues. with no whitespace wrap opportunities;
 * `overflow-wrap: anywhere` lets them break mid-token within the grid
 * cell, and `min-width: 0` lets the grid item shrink below its content's
 * intrinsic width (the default `min-width: auto` for grid items would
 * otherwise force overflow). */
.tq-dialog-widgets > span {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Same intrinsic-width containment for the grid's other direct children —
 * <label> cells and the control cells (number inputs, the linked-reference
 * flex row). Without min-width:0 an intrinsically-wide control overflows
 * the property panel's right edge instead of shrinking to its cell. */
.tq-dialog-widgets > label {
    overflow-wrap: anywhere;
    min-width: 0;
}
.tq-dialog-widgets > input,
.tq-dialog-widgets > div {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Cell value by row content — vertical layout spanning the 2-column grid. */
.tq-cellvalue-content {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.tq-cellvalue-content select,
.tq-cellvalue-content input {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
/* Target column: label + picker on one line; the picker fills the rest. */
.tq-cellvalue-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tq-cellvalue-field-row > span {
    flex: 0 0 auto;
}
.tq-cellvalue-field-row > .tq-linkable-variable-selector {
    flex: 1 1 0;
    min-width: 0;
}
.tq-cellvalue-field-row > .tq-linkable-variable-selector select {
    width: 100%;
}
/* Value-property "match" single-identifier row: the picker (or the linked
 * reference chip) grows to fill the width; the link/unlink buttons sit beside
 * it and wrap beneath when the selected label is long. The selection display
 * (custom-select value AND chip) wraps inside its border rather than
 * overflowing. */
.tq-match-single {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}
.tq-match-single > .tq-value-customselect {
    flex: 1 1 auto;
    min-width: 0;
}
.tq-match-single .p-qti-custom-select-button {
    height: auto;
    align-items: flex-start;
}
.tq-match-single .p-qti-custom-select-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.tq-match-single > .tq-linkable-chip {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Free-text Value match (string entities — text-entry / extended-text /
 * TableInput text cells): the expected-answer input fills the row like the
 * picker does. */
.tq-match-single > .tq-match-text-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* EvaluatesTo property widget: the {variable = value} pairs editor above the
 * expected-value row. Rows are compact flex lines; the remove × reuses the
 * assertion-dialog remove style; the NaN warning is amber, not colour-only
 * (the text itself states the problem). */
.tq-evalto-heading {
    font-weight: 600;
    margin-bottom: 2px;
}

.tq-evalto-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.tq-evalto-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* The variable name is a read-only label (the pair set is fixed by the
 * exemplar expression); long generated names break rather than push the
 * value input past the panel edge. */
.tq-evalto-row .tq-evalto-name {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.tq-evalto-row .tq-evalto-value {
    width: 8em;
    max-width: 100%;
    box-sizing: border-box;
}

.tq-evalto-warning {
    border: 1px solid #b45309;
    background: #fef3c7;
    color: #7c2d12;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 4px 0;
    font-size: 0.9em;
}

/* Compact multi-select identifier picker (Contains / NoneOf, and the container
   Value/"match" widget — see IdentifierPickerControl). Vertical layout: the
   selected options are a full-width list on top (one option per row, a thin
   divider between rows), and the "Choose" button sits left-justified BELOW the
   list. grid-column makes the picker span the full width of the 2-column
   tq-dialog-widgets grid. */
.tq-contains-editor {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.tq-contains-editor > button {
    flex: 0 0 auto;
}
.tq-contains-summary {
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.tq-contains-summary-item {
    padding: 4px 2px;
    overflow-wrap: anywhere;
}
/* Thin divider between consecutive selected options. */
.tq-contains-summary-item:not(:last-child) {
    border-bottom: 1px solid #d0d0d0;
}

/* Thin divider between options in the multi-select checkbox dialog, so a long
   option list (e.g. dozens of distractors) is easier to scan. */
.tq-picker-dialog .tq-checkbox-option:not(:last-child) {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 0.5em;
}

/* Each row criterion is a single line: variable + value fill it, delete is a
 * fixed 1.5em square at the end. */
.tq-cellvalue-criterion {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tq-cellvalue-criterion > select,
.tq-cellvalue-criterion > .tq-linkable-value-input {
    flex: 1 1 0;
    min-width: 0;
}
.tq-cellvalue-criterion > .tq-linkable-value-input {
    display: flex;
}
.tq-cellvalue-criterion > .tq-linkable-value-input > input,
.tq-cellvalue-criterion > .tq-linkable-value-input > .tq-value-customselect {
    flex: 1 1 auto;
    width: 100%;
}
.tq-cellvalue-criterion > button.tq_delete {
    flex: 0 0 1.5em;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
}
/* Full-width thin add button with a centered "+". */
.tq-cellvalue-add {
    width: 100%;
    padding: 0;
    line-height: 1.3;
    font-weight: bold;
    cursor: pointer;
}
.tq-cellvalue-disc-label {
    margin-top: 4px;
}
/* Discriminator selector + its numeric-outcome variable, stacked full-width. */
.tq-cellvalue-discriminator,
.tq-cellvalue-discriminator-var select {
    width: 100%;
}

/* Checkbox grid for row selection - vertical stacking */
.tq-checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tq-checkbox-grid-scrollable {
    max-height: 96px; /* Approximately 4 rows at ~24px each */
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 3px;
    background-color: #fff;
}

.tq-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    cursor: pointer;
}

.tq-checkbox-wrapper:hover {
    background-color: #f0f0f0;
    border-radius: 2px;
}

.tq-row-checkbox {
    cursor: pointer;
    margin: 0;
}

.tq-checkbox-label {
    cursor: pointer;
    margin: 0;
    user-select: none;
}

/* Assertion authoring dialog. Uses app-dialog for centering; specific
   overrides below maintain the flex-column layout and sizing.
   High-contrast chrome + strong focus rings (AAA). */
dialog.tq-assertion-dialog {
    position: fixed;
    /* inset:0 + margin:auto centers the dialog in the viewport on both axes.
       The previous margin:0 cancelled the <dialog> UA centering, so a 90%-wide
       dialog sat off-centre and ran past the right edge, and its footer
       (Done/Cancel) fell below the bottom of the screen. With inset:0 the
       max-height:92vh box is centred and the flex footer stays on screen. */
    inset: 0;
    box-sizing: border-box;
    width: 85%;
    max-width: 1000px;
    max-height: 92vh;
    margin: auto;
    padding: 0;
}

dialog.tq-assertion-dialog[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Slight dim only — the VEs behind must remain readable. */
dialog.tq-assertion-dialog::backdrop {
    background: rgba(0, 0, 0, 0.18);
}

dialog.tq-assertion-dialog .app-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

dialog.tq-assertion-dialog .app-dialog-title {
    display: block;
    width: auto;
    margin: 0;
}

/* Header left group: title + live save-state chip sit together on the left. */
dialog.tq-assertion-dialog .app-dialog-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* let the title shrink rather than push the chip off-row */
}

/* Save-state chip — clean (✓ all saved) vs dirty (● unsaved). Meaning is
   carried by the glyph + text, never colour alone (WCAG AAA); the colours are
   redundant reinforcement and meet 7:1 contrast (dark text on a pale fill). */
dialog.tq-assertion-dialog .tq-save-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}
dialog.tq-assertion-dialog .tq-save-state-icon {
    font-size: 0.9em;
}
dialog.tq-assertion-dialog .tq-save-state.is-clean {
    background: #e7f6ec;
    color: #0f5132;
    border-color: #a3cfb6;
}
dialog.tq-assertion-dialog .tq-save-state.is-clean .tq-save-state-icon::before {
    content: "\2713"; /* ✓ */
}
dialog.tq-assertion-dialog .tq-save-state.is-dirty {
    background: #fbeaea;
    color: #842029;
    border-color: #e2adb1;
}
dialog.tq-assertion-dialog .tq-save-state.is-dirty .tq-save-state-icon::before {
    content: "\25CF"; /* ● */
}

/* Push Delete to the far left, away from the affirmative Save/Submit actions. */
dialog.tq-assertion-dialog .app-dialog-footer .tq-footer-delete {
    margin-right: auto;
}

dialog.tq-assertion-dialog .app-dialog-close {
    min-width: unset;
    min-height: unset;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.1em 0.4em;
}

dialog.tq-assertion-dialog .app-dialog-close:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

dialog.tq-assertion-dialog .app-dialog-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

dialog.tq-assertion-dialog .tq-assertion-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

dialog.tq-assertion-dialog .tq-order-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

dialog.tq-assertion-dialog .tq-order-row label,
dialog.tq-assertion-dialog .tq-assertion-meta > label {
    font-weight: 600;
}

dialog.tq-assertion-dialog .tq-ad-order {
    width: 5em;
}

dialog.tq-assertion-dialog textarea.form-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 3em;
}

dialog.tq-assertion-dialog .tq-condition-tools {
    display: flex;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

dialog.tq-assertion-dialog .tq-condition-tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Aligned-standards section at the bottom of the assertion dialog. The
 * standard rows, "+" button, and the add dialog reuse the global ib-align-*
 * styles (styles.css) so both alignment surfaces look identical. */
dialog.tq-assertion-dialog .tq-ad-alignments {
    border-top: 1px solid #ddd;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
}

dialog.tq-assertion-dialog .tq-ad-align-title {
    font-size: 1em;
    margin: 0 0 0.35rem 0;
}

dialog.tq-assertion-dialog .tq-ad-align-empty {
    font-style: italic;
    color: #767676;
    font-size: 0.9em;
}

dialog.tq-assertion-dialog .tq-ad-align-remove {
    border: none;
    background: none;
    color: #a00000;
    cursor: pointer;
    font-size: 1em;
    padding: 0 4px;
}

dialog.tq-assertion-dialog .tq-ad-align-remove:focus-visible {
    outline: 2px solid #1a4480;
    outline-offset: 1px;
}

dialog.tq-assertion-dialog .app-dialog-footer {
    flex-shrink: 0;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid #c9c9c9;
}

/* Strong, visible focus indicators (AAA). */
dialog.tq-assertion-dialog button:focus-visible,
dialog.tq-assertion-dialog input:focus-visible,
dialog.tq-assertion-dialog textarea:focus-visible,
dialog.tq-assertion-dialog select:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Destructive outline button variant — red border/text, no fill. */
.btn--destructive-outline {
    background-color: transparent;
    color: var(--btn-destructive);
    border: 1.5px solid var(--btn-destructive);
}
.btn--destructive-outline:hover:not(:disabled):not(.btn--loading),
.btn--destructive-outline:focus:not(:disabled):not(.btn--loading) {
    background-color: #fff1f1;
}

/* Copy/Paste condition tools render as standard icon buttons (copy +
   clipboard glyphs). Accessible name comes from each button's aria-label. */
.tq_copy_conditions {
    background-image: url('/images/copy.svg');
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: center;
    background-color: transparent;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.tq_paste_conditions {
    background-image: url('/images/clipboard.svg');
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: center;
    background-color: transparent;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.tq_paste_conditions:disabled,
.tq_paste_conditions.Button_disabled {
    opacity: 0.4;
    cursor: default;
}

/* The framework's `.Button_disabled:hover { background: ... !important }`
   (styles.css) uses the background shorthand, which would wipe the icon's
   background-image on hover (paste starts disabled). Re-assert the icon with
   higher specificity so it stays visible on hover/focus, enabled or not. */
.tq_copy_conditions:hover,
.tq_copy_conditions.Button_disabled:hover,
.tq_copy_conditions.Button_disabled:focus {
    background-image: url('/images/copy.svg') !important;
    background-color: var(--color-primary-tint) !important;
    border-color: var(--color-primary);
}

.tq_paste_conditions:hover,
.tq_paste_conditions.Button_disabled:hover,
.tq_paste_conditions.Button_disabled:focus {
    background-image: url('/images/clipboard.svg') !important;
    background-color: var(--color-primary-tint) !important;
    border-color: var(--color-primary);
}

dialog.tq-assertion-dialog div.tq-assertion-definition div.tq-condition-holder {
    padding-bottom: 1em;
}

dialog.tq-assertion-dialog div.tq-assertion-definition {
    display: grid;
    grid-template-columns: 5em 1fr;
    padding-top: 1em;
}

.node_container_widgets {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 4px 5px;
}

.tq_interaction_dialog div.tq-p-qti-tool-editor.node_container {
    display: flex;
    flex-direction: row;
    height: fit-content;
    overflow: revert;
}

.tq_interaction_dialog {
    display: flex;
    flex-direction: column;
}
    .tq_interaction_dialog div.node_container {
        border: 1.5px solid var(--color-border, #C4BFD8);
        border-radius: var(--radius-md, 8px);
        margin: 12px 0;
        padding: 8px 12px;
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
    }
        .tq_interaction_dialog div.node_container > div:first-child {
            border-bottom: 1.5px solid var(--color-border);
            background-color: var(--color-surface);
            color: var(--color-text-heading);
            font-weight: bold;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;
            gap: .5em;
            padding: .35em .5em;
            margin: -8px -12px 8px -12px;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }
        .tq_interaction_dialog div.node_container > div:first-child > label {
            flex: 1 1 auto;
            width: auto;
            display: inline-block;
            text-align: left;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tq_interaction_dialog div.node_container > div:first-child > label:nth-child(2) {
            float: right;
            top: 0px;
        }

/* ===== Subnode row: preview + inline action buttons =====
   The per-subnode type label was dropped; the bordered preview now fills the
   row and the action buttons (properties / delete) sit inline to its right. */
.node-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .25em;
}
.node-widget > .tq-subnode-preview {
    flex: 1 1 auto;
}
.node-widget > .tq_button_span {
    flex: 0 0 auto;
    margin-left: 0;
    align-self: center;
}

/* ===== Click-to-edit subnode preview =====
   Replaces the inline Quill editor that used to fill each subnode. Shows the
   rendered content (or muted placeholder text when empty) inside a light,
   rounded border, and behaves as a button: focusable, Enter/Space activates it,
   strong visible focus ring. Colours meet WCAG AAA (>=7:1 text, >=3:1 boundary
   / focus ring). */
.tq-subnode-preview {
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    padding: .2em .5em;
    margin: .15em 0;
    min-height: 1.5em;
    background-color: #ffffff;
    color: var(--color-text-base);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.tq-subnode-preview:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-tint);
}
.tq-subnode-preview:focus,
.tq-subnode-preview:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-color: var(--color-primary);
}
.tq-subnode-preview.tq-subnode-empty {
    color: var(--color-text-muted);
    font-style: italic;
}
/* A committed 'filled' asset slot carries the popup editor's revise button in
   its content; the preview is a read-only click-target (itself role=button),
   so never show a nested interactive control there. */
.tq-subnode-preview .tq-asset-revise {
    display: none;
}
/* Multi-line content shows only its first line in the compact preview; this
   note tells the author the rest exists (click through to edit it). */
.tq-subnode-preview .tq-subnode-more-note {
    display: block;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: .85em;
}

/* ===== Rich note editor (asset request / revision dialogs) =====
   The TestQuill basicToolbar editor embedded in a BasicDialog. Generous
   default size, and author-SIZEABLE: the CSS resize grip on the editor box
   lets the author drag it larger (overflow:hidden is required for the grip;
   the inner .ql-editor does its own scrolling, so nothing is clipped). */
.tq-rich-note-host {
    width: min(60rem, 90vw);
}
.tq-rich-note-editor {
    height: 20rem;
    min-height: 10rem;
    min-width: 100%;
    resize: both;
    overflow: hidden;
    background-color: #ffffff;
}
.tq-rich-note-editor .ql-editor {
    height: 100%;
    overflow-y: auto;
}

/* ===== Help-text editing dialog (HelpTextEditor.js) =====
   The editor is the dialog's whole purpose, so the dialog claims most of
   the viewport and the editor stretches to fill it. Scoped to [open] so
   the closed <dialog> keeps its native display:none. The column chain
   needs min-height:0 at every level or the flex items refuse to shrink
   and the editor overflows instead of scrolling. */
.tq-help-edit-dialog[open] {
    display: flex;
    flex-direction: column;
    width: min(75rem, 92vw);
    height: 85vh;
}
.tq-help-edit-dialog .tq-dialog-widgets {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
}
.tq-help-edit-dialog .tq-rich-note-host {
    width: auto;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* The Quill toolbar (the host's first child) keeps its natural height;
   the editor box takes everything below it. The drag grip is pointless
   when the editor already fills the dialog, so resize goes. */
.tq-help-edit-dialog .tq-rich-note-editor {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    resize: none;
}

/* ===== Item-specific rubric dialog editor =====
   Same shape as the rich-note editor above: the editor is a fixed-
   height resizable box whose inner .ql-editor does the scrolling —
   nothing is clipped, and no scrollbar sits on the container itself.

   The WAF Dialog_normal box is FIXED-width (width:100% capped by
   max-width) — the host therefore uses auto width + side margins to
   fill it exactly (an explicit rem width overflowed the box), and the
   dialog itself is widened via the .tq-rubric-dialog modifier for the
   full-toolbar editor. The modifier also turns the stock 2-column
   Dialog_body grid (one widget per row) into a right-aligned
   horizontal row for the Save/Cancel pair. */
.Dialog_normal.tq-rubric-dialog {
    max-width: min(64rem, 92vw);
}
.tq-rubric-dialog .Dialog_body {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.tq-rubric-dialog .Dialog_body > label:empty {
    display: none;
}
.tq-rubric-block-host {
    margin: 16px 20px 0;
}
.tq-rubric-block-editor {
    height: 20rem;
    min-height: 10rem;
    min-width: 100%;
    resize: both;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #c7c7c7;
}
.tq-rubric-block-editor .ql-editor {
    height: 100%;
    overflow-y: auto;
}

/* Rich request text rendered on the specialist's work page: sample images
   (plain or resizable-figure form) must never overflow the details pane. */
.asvc-details dd img,
.asvc-details dd figure {
    max-width: 100%;
    height: auto;
}

/* Awaiting-revision marker: a delivered asset whose revision has been
   requested (or is claimed and in progress). Amber outline PLUS a visible
   text badge on the slot in every authoring surface — body editor,
   sub-editor popups, subnode previews, and the interaction stand-in (which
   also loads this sheet). The badge text arrives translated via
   data-revision-label (set alongside the class); it renders only while the
   marker class is present, and ItemTransformer strips the class from
   export, so it can never reach delivery. aria duplication is avoided: the
   slot's aria-label carries the same text, the ::after is presentational. */
.tq-asset-revision-pending {
    position: relative;
    outline: 3px solid #b45309;
    outline-offset: 2px;
    border-radius: 2px;
}
.tq-asset-revision-pending::after {
    content: attr(data-revision-label);
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 3px;
    background: #7c3a00;
    color: #ffffff;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

/* The specialist work page's read-only item render — the page body under
   the floating request panel. */
.asvc-item-display {
    position: relative;
    min-height: 24rem;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 0.5rem;
    background-color: #ffffff;
}

/* ===== Full-width "add" bar at the bottom of a subnode collection =====
   Reuses the .tq_add plus-square icon, but stretched into a bar and kept
   centred (overriding .tq_add's contain/1.5em sizing). */
button.tq_subnode_add_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 2.25em;
    margin: .25em 0 0 0;
    padding: .35em;
    background-color: var(--color-bg);
    background-position: center;
    background-size: 1.4em 1.4em;
    border: 2px dashed var(--color-input-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
button.tq_subnode_add_bar:hover {
    background-color: var(--color-surface);
    border-color: var(--color-text-base);
}
button.tq_subnode_add_bar:focus,
button.tq_subnode_add_bar:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-color: var(--color-primary);
}

/* ===== Rich-text editor popup (SubnodeEditor.openEditor) ===== */
dialog.tq_subnode_dialog {
    width: 70%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
}
dialog.tq_subnode_dialog .tq-subnode-editor-host {
    border: 1.5px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    min-height: 8em;
    margin-bottom: .75em;
}
dialog.tq_subnode_dialog .tq-subnode-dialog-buttons {
    gap: .5em;
}

/* ===== Match-set "restrict one selection per row/column" toggle ===== */
.tq-restrict-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--color-text-heading);
    font-weight: normal;
}
/* Reserve enough height to show ~3 entries before the list scrolls. */
.tq-match-set .node_container_widgets {
    min-height: 7em;
}
.tq-restrict-toggle input[type=checkbox] {
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
    accent-color: var(--color-primary-dark);
}
.tq-restrict-toggle label {
    cursor: pointer;
    color: inherit;
}

.tq-dialog-title {
    display: inline-flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    font-weight:bold;
    flex-shrink: 0; /* Prevent dialog title from shrinking */
}

.tq-dialog-title button,
.tq-dialog-title select,
.tq-dialog-title input {
    height: 1.5em;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-left: .5em;
    margin-right: .5em;
}

.tq-drop-target {
    background-color: white;
    /* Basic button styling (adjust as needed) */
    padding: 1rem 2rem;
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #ffffff; /* text-white */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.2s ease-in-out;
    cursor: pointer; /* Default cursor */
    /* --- Styles to invite dropping --- */
    border: 3px dashed #a5b4fc; /* indigo-200 - a dashed border suggests a drop zone */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    /* Visual feedback when something is dragged over it */
    /* This class would be added via JavaScript on 'dragenter' or 'dragover' */
}

.tq-drop-target-drag-over{
    background-color: #6366f1; /* indigo-500 */
    border-color: #818cf8; /* indigo-300 */
    transform: scale(1.02); /* Slight scale to emphasize */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    cursor: copy; /* Or 'grab', 'grabbing', 'move' depending on desired effect */
}



.tq_select_holder {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.RIV_window .tq_resizable {
    resize: none;
}

iframe.tq_resizable,
qti-span.tq_resizable {
    resize: both;
    overflow: auto;
    height: fit-content;
    width: fit-content;
    display: inline-block;
}
    .tq_resizable > img {
        width: 100%;
        height: calc(100%-2em);
    }
    .tq_resizable > caption {
        width: 100%;
        min-height: 1.1em;
        display: block;
    }

.tq_interaction_iframe {
    border: none;
    width: fit-content;
    height: fit-content;
    display: inline;
}

div.tq-graphic-canvas-editor > div.tq-svg-holder {
    /* Width-only resize: the height is driven by the reference aspect ratio in
       GraphicCanvasEditor (updateAttributesOnResize). Allowing free 2-axis
       resize let the canvas take a shape different from the image/coordinate
       grid, which letterboxed the grid and misplaced authored hotspots. */
    resize: horizontal;
    display: inline-block;
    overflow: hidden;
}
    div.tq-graphic-canvas-editor > div.tq-svg-holder > svg {
        width: 100%;
        height: 100%;
        background-color: aliceblue;
    }
    div.tq-graphic-canvas-editor > div.tq-svg-holder > svg > image {
        width: 100%;
        height: auto;
        box-sizing:border-box;
    }

        div.tq-graphic-canvas-editor > div.tq-svg-holder > svg > image.tq-btn-image {
            width: 15px;
            height: 15px;
        }

div.p-qti-quantity-stimulus {
    display: grid;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    align-self:center;
}

div.tq-response-number {
    background-color: lightgray;
    font-weight: bold;
    border: outset;
    text-align: center;
    height: fit-content;
    min-height: 1.8em;
    min-width: 1.8em;
}

div.tq-attributes {
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 16px;
    background: var(--color-surface, #E6E3EF);
    border: 1px solid var(--color-border, #C4BFD8);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 16px;
}

div.tq-attributes div.attribute-widget {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}

input[type="checkbox"].attribute-input {
    accent-color: var(--color-primary, #5B34A8);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    margin-top: 6px;
}
span.tq-element-editor {
    padding: .1em .1em .1em .1em;
}

span.tq-element-editor:focus {
    border:none;
}

span.tq-element-editor-cursor {
    display: inline-block;
    width: 1px;
    height: 1.2em;
    padding-left: 1px;
    padding-right: 1px;
    background-color: black;
    animation: blink 1s linear alternate
}

@keyframes blink {
    50% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }

}


/*span.tq-receive-unknown {
    display:inline-block;
    height: 1em;
    width: .8em;
    background-color: yellow;
}
*/
span.tq-function {
    margin-left: .5em;
}

span.tq-close-paren {
    margin-right: .5em;
}
span.tq-function::after,
span.tq-operator::after {
    content: attr(data-value);
}

input[type="number"].tq-parameter-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].tq-parameter-value {
    -moz-appearance: textfield;
    field-sizing: content;
}

span.tq-value-reference {
    border: 2px dashed red;
}

div.tq-calculator-result {
    border: none;
    height: 1.5em;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

div.tq-calulation-receiver {
    border: none;
    width: 100%;
    position: relative;
}

/* Dialog message area above submit/cancel buttons */
.tq-dialog-message {
    min-height: 1.5em;
    padding: 0.75em;
    margin-bottom: 1em;
    border-radius: 0.25em;
    flex-shrink: 0; /* Prevent message area from shrinking */
}

.tq-error-message {
    color: #dc2626; /* red-600 */
    background-color: #fee2e2; /* red-100 */
    border: 1px solid #fca5a5; /* red-300 */
}

.tq-info-message {
    color: #2563eb; /* blue-600 */
    background-color: #dbeafe; /* blue-100 */
    border: 1px solid #93c5fd; /* blue-300 */
}

/* Validation error border for list items */
.tq-validation-error {
    border: 2px dashed red !important;
}

/* Validation message area in OutputInstructionGetter */
.tq-validation-message {
    min-height: 1.5em;
    color: #dc2626; /* red-600 */
    padding: 0.5em;
    margin-bottom: 0.5em;
}

/* Checkbox list for container value widgets */
.tq-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.tq-checkbox-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

    .tq-checkbox-option input[type="checkbox"] {
        cursor: pointer;
        margin: 0;
    }

    .tq-checkbox-option span {
        display: inline;
        vertical-align: middle;
    }

/* ========== Simulation Template Dialog ========== */
.tq-simulation-template-dialog {
    max-height: 85vh; /* Limit dialog to 85% of viewport height */
    max-width: 95vw; /* Limit dialog to 95% of viewport width */
    height: 85vh; /* Fixed height to ensure proper calculation */
    overflow: hidden; /* Prevent dialog from scrolling */
    padding: 0; /* Remove default padding */
}

/* (Animation Brief Dialog CSS removed 2026-08-30 with the manual
   Generate-animation-brief button — the brief now rides implicitly in
   every animation request.) */

/* ========== Animation Studio Dialog ========== */
.tq-animation-studio-dialog {
    width: 86vw;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

    .tq-animation-studio-dialog .tq-studio-body {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 16px;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .tq-animation-studio-dialog .tq-studio-stage-pane {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        overflow-y: auto;
    }

    .tq-animation-studio-dialog .tq-studio-stage {
        border: 1px solid #ccd4da;
        border-radius: 6px;
        background: #f4f6f8;
        min-height: 240px;
    }

        .tq-animation-studio-dialog .tq-studio-stage svg {
            display: block;
            width: 100%;
            height: auto;
        }

    .tq-animation-studio-dialog .tq-studio-scene-tag {
        font-family: monospace;
        font-size: 0.75rem;
        color: #5a6b77;
    }

    .tq-animation-studio-dialog .tq-studio-run-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .tq-animation-studio-dialog .tq-studio-conv-pane {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 0;
    }

    .tq-animation-studio-dialog .tq-studio-sent-line {
        font-size: 0.8rem;
        color: #5a6b77;
        margin: 0;
    }

    .tq-animation-studio-dialog .tq-studio-revisions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .tq-animation-studio-dialog .tq-studio-rev-chip {
        border-radius: 999px;
        padding: 2px 12px;
        font-size: 0.8rem;
    }

        .tq-animation-studio-dialog .tq-studio-rev-chip[aria-pressed="true"] {
            background: #dceeed;
            border-color: #0e7c7b;
            font-weight: 600;
        }

    .tq-animation-studio-dialog .tq-studio-transcript {
        flex: 1 1 auto;
        min-height: 120px;
        overflow-y: auto;
        border: 1px solid #e0e5e9;
        border-radius: 6px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tq-animation-studio-dialog .tq-studio-msg {
        font-size: 0.85rem;
        border-radius: 6px;
        padding: 6px 10px;
        max-width: 94%;
    }

    .tq-animation-studio-dialog .tq-studio-msg-model {
        background: #eef1f4;
        align-self: flex-start;
    }

    .tq-animation-studio-dialog .tq-studio-msg-author {
        background: #dceeed;
        align-self: flex-end;
    }

    .tq-animation-studio-dialog .tq-studio-msg-who {
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #5a6b77;
    }

    .tq-animation-studio-dialog .tq-studio-working {
        font-size: 0.85rem;
        color: #7a5c10;
        border: 1px dashed #ccd4da;
        border-radius: 6px;
        padding: 6px 10px;
    }

    .tq-animation-studio-dialog .tq-studio-feedback textarea {
        width: 100%;
        min-height: 60px;
        box-sizing: border-box;
        resize: vertical;
    }

    .tq-animation-studio-dialog .tq-studio-feedback-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .tq-animation-studio-dialog .tq-studio-round {
        font-size: 0.8rem;
        color: #5a6b77;
    }

    .tq-animation-studio-dialog .tq-studio-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        border-top: 1px solid #e0e5e9;
        padding-top: 10px;
        margin-top: 10px;
    }

    .tq-animation-studio-dialog .tq-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

/* ========== Simulation Template Content ========== */
.tq-simulation-template-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the dialog */
    overflow: hidden; /* Prevent dialog content from scrolling */
}

/* ========== Simulation Template Scrollable Content ========== */
.tq-simulation-scrollable-content {
    flex: 1; /* Take remaining space */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    min-height: 0; /* Allow flex child to shrink below content size */
    padding: 0 1rem 1rem 1rem; /* Add padding for content spacing */
}

/* ========== Tab View Styles ========== */
.tq-tab-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Allow flex child to shrink below content size */
}

.tq-tab-buttons {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #ccc;
    padding: 0;
    margin-bottom: 16px;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.tq-tab-button {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-size: 14px;
    transition: background 0.2s;
}

.tq-tab-button:hover {
    background: #e8e8e8;
}

.tq-tab-button-active {
    background: white;
    border-bottom: 2px solid white;
    margin-bottom: -2px;
    font-weight: bold;
}

.tq-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Allow flex child to shrink below content size */
}

.tq-tab-panel {
    height: 100%;
}

/* ========== Two-Column Layout ========== */
.tq-simulation-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    flex: 1; /* Take up remaining space in flex container */
    min-height: 0; /* Allow flex child to shrink below content size */
    padding: 16px;
    overflow: hidden; /* Prevent container from scrolling */
}

.tq-simulation-left-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    padding-right: 16px;
    overflow: hidden; /* Prevent column itself from scrolling */
    min-height: 0; /* Allow grid child to shrink below content size */
    height: 100%; /* Ensure column takes full height of grid cell */
}

/* A simulation tab's panel: a header row carrying the area's name and its help
   icon, then the tab's own content. The icon cannot sit on the tab itself —
   TabView builds each tab as a <button>, and a <button> inside a <button> is
   invalid — so the panel carries it instead. The panel must not eat the
   column's height budget: the content below it is what scrolls. */
.tq-sim-tab-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.tq-sim-tab-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 2px 0 6px 0;
}

.tq-sim-tab-title {
    font-weight: 600;
    color: var(--color-text-base);
}

.tq-sim-tab-panel > :not(.tq-sim-tab-header) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.tq-simulation-right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto; /* Allow right column to scroll */
    min-height: 0; /* Allow grid child to shrink below content size */
    height: 100%; /* Ensure column takes full height of grid cell */
    padding-right: 8px; /* Add padding for scrollbar */
}

/* ========== Title Bar ========== */
.tq-simulation-title-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0; /* Prevent title bar from shrinking */
}

.tq-simulation-title-bar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tq-simulation-title-bar-group label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
}

.tq-simulation-title-bar-group input,
.tq-simulation-title-bar-group button {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.tq-simulation-title-bar-group input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.tq-simulation-title-bar-group button {
    background: #007bff;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.tq-simulation-title-bar-group button:hover {
    background: #0056b3;
}

/* ========== Preview Sections ========== */
.tq-preview-section {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    background: white;
}

.tq-preview-section h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Preview table styling */
.tq-simulation-output-table {
    border-collapse: collapse;
    width: 100%;
}

.tq-simulation-output-table th,
.tq-simulation-output-table td {
    border: 1px dashed #ccc;
    padding: 8px;
    text-align: center;
}

.tq-simulation-output-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.tq-simulation-output-table td {
    color: #999;
    font-style: italic;
}

/* Scene list styling */
.tq-scene-item {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    background-color: #fafafa;
}

.tq-scene-item:last-child {
    margin-bottom: 0;
}

.tq-scene-item-top-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.tq-scene-name-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tq-scene-name-group label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
}

.tq-scene-name-group input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.tq-scene-duration-group {
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tq-scene-duration-group label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
}

.tq-scene-duration-group input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.tq-scene-description-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.tq-scene-description-row label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
}

.tq-scene-description-row textarea {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

.tq-delete-scene-button {
    padding: 6px 12px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    align-self: flex-start;
}

.tq-delete-scene-button:hover {
    background-color: #c82333;
}

.tq-add-scene-button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 12px;
}

.tq-add-scene-button:hover {
    background-color: #0056b3;
}

/* Dialog header buttons */
.tq-dialog-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tq-submit-button {
    padding: 8px 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.tq-submit-button:hover {
    background-color: #218838;
}

.tq-submit-button:focus {
    background-color: #28a745;
    outline: 2px solid #1e7e34;
    outline-offset: 2px;
}

/* Entity description area (always visible space) */
.tq-entity-description-area {
    min-height: 24px;
    padding: 6px 8px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Clickable mapping style (for identifier containers) */
.tq-clickable-mapping {
    background-color: #f0f8ff;
    border: 1px solid #4a9eff;
    cursor: pointer;
}

.tq-clickable-mapping:hover {
    background-color: #e6f2ff;
    border-color: #3d8eff;
}

.tq-entity-description-text {
    font-size: 0.9em;
    color: #333;
}

.tq-clickable-mapping .tq-entity-description-text {
    color: #0066cc;
    font-weight: 500;
}

/* Mapping dialog */
.tq-mapping-dialog {
    min-width: 400px;
    max-width: 600px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tq-mapping-dialog h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}

.tq-mapping-dialog .tq-instructions {
    margin: 0 0 15px 0;
    font-size: 0.9em;
    color: #666;
}

/* Options picker: cap the dialog height and let only the option list
 * scroll, so the select-all toolbar and the OK/Cancel footer stay
 * visible no matter how many options there are. */
.tq-picker-dialog {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.tq-picker-dialog .tq-checkbox-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.tq-picker-dialog .tq-dialog-buttons {
    flex: 0 0 auto;
}

.tq-picker-toolbar {
    flex: 0 0 auto;
    display: flex;
    gap: 14px;
    margin: 0 0 10px 0;
}

.tq-picker-toolbar button {
    background: none;
    border: none;
    padding: 0;
    color: #0078D4;
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: underline;
}

.tq-picker-toolbar button:hover,
.tq-picker-toolbar button:focus-visible {
    color: #005a9e;
}

.tq-mapping-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.tq-mapping-table th,
.tq-mapping-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.tq-mapping-table th {
    background-color: #f5f5f5;
    font-weight: 600;
    font-size: 0.9em;
}

.tq-mapping-label {
    cursor: help;
    font-size: 0.9em;
}

.tq-mapping-value-input {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}

.tq-mapping-value-input.error {
    border-color: #d32f2f;
    background-color: #ffebee;
}

.tq-no-values-message {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
}

.tq-dialog-buttons {
    display: flex;
    flex-wrap: wrap; /* wrap rather than overflow past the dialog's left edge */
    justify-content: flex-end;
    gap: 10px;
}

.tq-button-primary,
.tq-button-secondary {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.tq-button-primary {
    background-color: #4a9eff;
    color: white;
    border-color: #4a9eff;
}

.tq-button-primary:hover {
    background-color: #3d8eff;
}

.tq-button-secondary {
    background-color: #f5f5f5;
    color: #333;
}

.tq-button-secondary:hover {
    background-color: #e0e0e0;
}

/* Destructive action (e.g. "Lose Changes and Exit", DeleteConfirmation).
   Dark red on white clears WCAG AAA contrast (~9:1). */
.tq-button-danger {
    padding: 8px 16px;
    border: 1px solid #8e0000;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    background-color: #8e0000;
    color: #ffffff;
}

.tq-button-danger:hover {
    background-color: #6d0000;
}


/* Quill editor containers for widget and outcome labels */
div.tq-widget-label-editor-container,
div.tq-outcome-label-editor {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    margin-bottom: 8px;
}

    /* Target the actual Quill container div (has both tq-widget-label-editor and ql-container classes) */
    div.tq-widget-label-editor.ql-container,
    div.tq-outcome-label-editor.ql-container {
        max-height: 15em;
        overflow-y: auto;
        height: auto;
    }

        /* Make Quill editor content area grow with content */
        div.tq-widget-label-editor.ql-container .ql-editor,
        div.tq-outcome-label-editor.ql-container .ql-editor {
            min-height: 3em;
            height: auto;
        }

    /* Ensure resizable images work inside label editors */

    div.tq-widget-label-editor iframe.tq_resizable,
    div.tq-widget-label-editor qti-span.tq_resizable,
    div.tq-outcome-label-editor qti-span.tq_resizable {
        resize: both !important;
        overflow: auto !important;
        display: inline-block
    }

/* Option label editor in LabelValuePairGetter dialog */
div.tq-option-label-editor-container {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    margin-bottom: 8px;
}

div.tq-option-label-editor.ql-container {
    max-height: 15em;
    overflow-y: auto;
    height: auto;
}

div.tq-option-label-editor.ql-container .ql-editor {
    min-height: 3em;
    height: auto;
}

/* Ensure resizable images work inside option label editors */
div.tq-option-label-editor .tq_resizable {
    resize: both !important;
    overflow: auto !important;
    display: inline-block;
}

/* Simulation Prompt Section (Template Editor) */
.tq-simulation-prompt-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.tq-simulation-prompt-section .node-widget {
    margin: 0;
}

/* ========== ResizableImage (Embed-based) ========== */

/* Main embed wrapper - must be inline for text flow */
span.tq-image-embed {
    display: inline;
}

/* The contentNode wrapper created by Quill's Embed */
span.tq-image-embed > span[contenteditable="false"] {
    display: inline-block;
    vertical-align: top;
}

/* The figure inside the embed */
span.tq-image-embed figure.tq-image {
    display: inline-block;
    margin: 0.5em;
    padding: 0;
    text-align: center;
    /* Resizable */
    resize: both;
    overflow: hidden;
    /* Minimum size to allow resize handle */
    min-width: 50px;
    min-height: 50px;
}

/* The image inside the figure */
span.tq-image-embed figure.tq-image > img {
    display: block;
    width: 100%;
    height: auto;
    /* Maintain aspect ratio when figure is resized */
    object-fit: contain;
}

/* Selection indicator when image embed is selected */
span.tq-image-embed.p-qti-selected > span[contenteditable="false"],
span.tq-image-embed:focus-within figure.tq-image {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

/* Hover state for better UX */
span.tq-image-embed figure.tq-image:hover {
    outline: 2px dashed #ccc;
    outline-offset: 1px;
    cursor: pointer;
}

/* Float support */
span.tq-image-embed[style*="float: left"] {
    margin-right: 1em;
}

span.tq-image-embed[style*="float: right"] {
    margin-left: 1em;
}

/* Inside label editors - ensure resizable works */
div.tq-widget-label-editor span.tq-image-embed figure.tq-image,
div.tq-outcome-label-editor span.tq-image-embed figure.tq-image,
div.tq-option-label-editor span.tq-image-embed figure.tq-image {
    resize: both !important;
    overflow: auto !important;
}

/* ===============================================
   Markup Editor Styles
   =============================================== */

/* Main view layout */
.MEView_window {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.MEView_body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

/* Toolbar */
.me-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5em;
    gap: 0.5em;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.me-toolbar button {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    font-size: 0.9em;
}

.me-toolbar button:hover:not(:disabled) {
    background-color: #e8e8e8;
}

.me-toolbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.me-toolbar button.me-btn-markup {
    border-color: #1565c0;
    background-image: url('/images/markup-button.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-markup:hover:not(:disabled) {
    background-color: rgba(21, 101, 192, 0.1);
}

.me-toolbar button.me-btn-suppress-tts {
    border-color: #c62828;
    background-image: url('/images/suppress-tts.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-suppress-tts:hover:not(:disabled) {
    background-color: rgba(198, 40, 40, 0.1);
}

.me-toolbar button.me-btn-screen-reader {
    border-color: #c62828;
    background-image: url('/images/screen-reader-text.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-screen-reader:hover:not(:disabled) {
    background-color: rgba(198, 40, 40, 0.1);
}

/* Long-description tool (compliance plan S2): framed graphic + text lines —
 * "an image with its extended description". Icon-button pattern matches
 * me-btn-markup: the button keeps its text content (font-size 0) as the
 * accessible name and its title attribute as the hover tooltip. */
.me-toolbar button.me-btn-long-desc {
    border-color: #6a1b9a;
    background-image: url('/images/long-description.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-long-desc:hover:not(:disabled) {
    background-color: rgba(106, 27, 154, 0.1);
}

/* aria-label tool (compliance plan S2): luggage tag carrying an "A" —
 * "a label attached to an element". */
.me-toolbar button.me-btn-aria-label {
    border-color: #00695c;
    background-image: url('/images/aria-label-tag.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-aria-label:hover:not(:disabled) {
    background-color: rgba(0, 105, 92, 0.1);
}

/* Edit-replacement tool: the replace-text "A" (same blue as
 * screen-reader-text.svg) under a pencil — red border like the other
 * replace-text tool it edits. */
.me-toolbar button.me-btn-edit-replacement {
    border-color: #c62828;
    background-image: url('/images/edit-replacement.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-edit-replacement:hover:not(:disabled) {
    background-color: rgba(198, 40, 40, 0.1);
}

.me-toolbar button.me-btn-remove {
    border-color: #666;
    background-image: url('/images/trash.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.me-toolbar button.me-btn-remove:hover:not(:disabled) {
    background-color: rgba(102, 102, 102, 0.1);
}

.me-toolbar-spacer {
    flex: 1;
}

.me-toolbar button.me-btn-save {
    background-color: #2e7d32;
    color: white;
    border-color: #2e7d32;
}

.me-toolbar button.me-btn-save:hover:not(:disabled) {
    background-color: #1b5e20;
}

.me-toolbar button.me-btn-cancel {
    background-color: #d32f2f;
    color: white;
    border-color: #d32f2f;
}

.me-toolbar button.me-btn-cancel:hover:not(:disabled) {
    background-color: #b71c1c;
}

/* Display area */
.me-display-area {
    flex: 1;
    overflow: auto;
    padding: 1em 2em;
    position: relative;
}

/* Disabled interactions - visible but not clickable */
.me-interaction-disabled {
    pointer-events: none;
    position: relative;
}

.me-interaction-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(200, 200, 200, 0.1);
    pointer-events: none;
}

/* Markup tag styling - editor only.
 *
 * SHADOW NOTE (keep in sync): the tags are stamped INSIDE shadow-rendered
 * items — the live copies of every in-item me-* rule below (through the
 * inline-choice block) plus the tracked markers (~:6567-6681) ride in
 * MarkupItemRenderer.present's extra sheet. The page rules remain for the
 * light-DOM Quill editor surfaces.
 *
 * MarkupItemRenderer adds .me-markup-tag / .me-suppress-tts-tag /
 * .me-screen-reader-tag classes to spans the markup-creation editor
 * exposes for region authoring. The bare span[data-catalog-idref]
 * (and span[data-qti-suppress-tts]) selectors used to ride the same
 * rule, but those attributes are present on every rendered SBAC item
 * — so the editor's blue dashed border and shaded background bled
 * into student rendering. Whether a student sees any visual
 * indication is decided at render time by the QTI renderer
 * (RenderingTools._processFromLink adds .p-qti-clickable, which the
 * QTIScripts CSS underlines), not by the presence of catalog-idref. */
.me-markup-tag {
    color: #1565c0;
    background-color: rgba(21, 101, 192, 0.1);
    border: 1px dashed #1565c0;
    border-radius: 2px;
    padding: 0 2px;
    cursor: pointer;
    display: inline;
}

.me-markup-tag:hover {
    background-color: rgba(21, 101, 192, 0.2);
}

/* Suppress TTS tag — editor only */
.me-suppress-tts-tag {
    text-decoration: underline wavy #c62828;
    background-color: rgba(198, 40, 40, 0.1);
    border-radius: 2px;
    padding: 0 2px;
    cursor: pointer;
    display: inline;
}

.me-suppress-tts-tag:hover {
    background-color: rgba(198, 40, 40, 0.2);
}

/* Screen-reader-only tag — editor only */
.me-screen-reader-tag {
    color: #1565c0;
    background-color: rgba(21, 101, 192, 0.08);
    border: 1px dashed #c62828;
    border-radius: 2px;
    padding: 0 2px;
    cursor: pointer;
    display: inline;
    font-style: italic;
}

.me-screen-reader-tag:hover {
    background-color: rgba(21, 101, 192, 0.2);
}

/* Long-description anchor — editor only (plan S2). Outlines the described
   visual (img / svg / table) so the tagger sees which visuals carry one. */
.me-long-desc-tag {
    display: inline-block;
    border: 2px dashed #6a1b9a;
    border-radius: 2px;
    padding: 2px;
    cursor: pointer;
}

.me-long-desc-tag:hover {
    background-color: rgba(106, 27, 154, 0.1);
}

/* aria-label marker — editor only (plan S2). The attribute is invisible by
   nature; the outline shows the tagger which elements carry an authored
   label. Colour meets 3:1 against white for non-text indicators. */
.me-aria-label-tag {
    outline: 2px dotted #00695c;
    outline-offset: 1px;
}

/* Spoken-replacement chip — editor only. The delivery `qti-visually-hidden`
   rule clips this off-screen; inside the markup editor the author MUST see
   the replacement words, styled distinctly as "what TTS speaks instead".
   Colour pair #14401a on #e6efe6 is ~11:1 (WCAG 2.x AAA). */
.me-display-area .qti-visually-hidden,
.me-display-area .me-replacement-text {
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: inline !important;
    margin: 0 0 0 2px;
    padding: 0 4px;
    background-color: #e6efe6;
    color: #14401a;
    border: 1px dashed #2e7d32;
    border-radius: 2px;
    font-style: italic;
    font-size: 0.9em;
    cursor: pointer;
}

.me-display-area .qti-visually-hidden::before {
    content: '\1F50A\00A0'; /* speaker glyph — signals "spoken replacement" */
    font-style: normal;
}

.me-display-area .qti-visually-hidden:hover {
    background-color: #d4e6d4;
}

/* Selected tag for removal */
.me-tag-selected {
    outline: 2px solid #000;
    outline-offset: 1px;
}

/* An equation selected as an ATOMIC tag target (click-to-tag — no text selection is
   possible over MathML). Dashed to distinguish "about to be tagged" from the solid
   outline of an existing tag selected for removal. */
.me-display-area math {
    cursor: pointer;
}
.me-equation-selected {
    outline: 2px dashed #000;
    outline-offset: 2px;
    background-color: #eef4ff;
}

/* Selection indicator when text is selected */
.me-has-selection .me-toolbar button.me-btn-markup,
.me-has-selection .me-toolbar button.me-btn-suppress-tts,
.me-has-selection .me-toolbar button.me-btn-screen-reader {
    animation: me-pulse 1s ease-in-out infinite;
}

@keyframes me-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Status message */
.me-status {
    padding: 0.3em 0.5em;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
}

/* Interaction overlay for selection */
.me-interaction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 1;
}

/* Expanded inline choice in markup editor */
.me-inline-choice-expanded {
    display: inline-block;
    border: 1px solid #90a4ae;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: #fafafa;
    margin: 2px 0;
}

.me-inline-choice-header {
    font-size: 0.75em;
    color: #607d8b;
    margin-bottom: 2px;
    user-select: none;
}

.me-inline-choice-option {
    padding: 2px 4px;
    border-bottom: 1px dotted #cfd8dc;
    user-select: text;
    cursor: text;
}

.me-inline-choice-option:last-child {
    border-bottom: none;
}

/* Interaction label in markup editor */
.me-interaction-label {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.75em;
    padding: 0.2em 0.5em;
    border-radius: 0 0 0 4px;
    z-index: 2;
}

/* ==========================================================================
   Markup Creation System (mc- prefix)
   ========================================================================== */

/* Main layout */
.MCView_window {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mc-header {
    display: flex;
    align-items: baseline;
    gap: 1em;
    padding: 0.5em 1em;
    border-bottom: 1px solid #ddd;
}

.mc-header h1 {
    margin: 0;
    font-size: 1.3em;
}

.mc-item-info {
    font-size: 0.9em;
    color: #666;
}

/* Toolbar */
.mc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    gap: 0.5em;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

/* Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    font-size: 0.9em;
}

.mc-btn:hover:not(:disabled) {
    background-color: #e8e8e8;
}

.mc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-btn-primary {
    background-color: #1565c0;
    color: white;
    border-color: #1565c0;
}

.mc-btn-primary:hover:not(:disabled) {
    background-color: #0d47a1;
}

.mc-btn-success {
    background-color: #2e7d32;
    color: white;
    border-color: #2e7d32;
}

.mc-btn-success:hover:not(:disabled) {
    background-color: #1b5e20;
}

.mc-btn-secondary {
    background-color: #757575;
    color: white;
    border-color: #757575;
}

.mc-btn-secondary:hover:not(:disabled) {
    background-color: #616161;
}

/* Tag navigation stepper - now rendered in panel header, see .mc-panel-nav */

/* Content area */
.mc-content.mc-content-full {
    flex: 1;
    overflow: auto;
    position: relative;
}

.mc-display-area {
    padding: 1em 2em;
    min-height: 200px;
}

.mc-no-item-message {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 3em 1em;
}

.mc-no-regions-note {
    color: #888;
    font-style: italic;
    padding: 0.5em;
}

/* Support-type picker — rendered only for purposes that declare more than
   one catalog support type (Content Supports, Simplified Content). Sits
   above the editors because it selects which card they are bound to. */
.mc-support-type-section {
    padding: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
}

.mc-support-type-label {
    display: block;
    margin-bottom: 0.25em;
    font-weight: 600;
    color: #26282b;
}

.mc-support-type-section select {
    width: 100%;
    padding: 0.3em;
    color: #26282b;
    background-color: #fff;
    border: 1px solid #595d63;
}

.mc-support-type-section select:focus-visible {
    outline: 3px solid #0b4a8f;
    outline-offset: 1px;
}

/* Status bar */
.mc-status-bar {
    padding: 0.3em 0.5em;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #fafafa;
}

/* Draggable editor panel */
.mc-draggable-panel {
    position: fixed;
    z-index: 1000;
    width: 400px;
    background-color: #fff;
    border: 2px solid #1565c0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}

.mc-draggable-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4em 0.6em;
    background-color: #1565c0;
    color: white;
    border-radius: 4px 4px 0 0;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.mc-draggable-panel-header:active {
    cursor: grabbing;
}

.mc-draggable-panel-title {
    font-size: 0.9em;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

.mc-draggable-panel-minimize {
    background: none;
    border: none;
    color: white;
    font-size: 1.3em;
    cursor: pointer;
    padding: 0 0.3em;
    line-height: 1;
    border-radius: 3px;
    flex-shrink: 0;
}

.mc-draggable-panel-minimize:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mc-draggable-panel-content {
    padding: 0.6em;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.mc-draggable-panel-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.6em;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mc-btn-danger {
    background-color: #d32f2f;
    color: #fff;
    border: 1px solid #b71c1c;
}

.mc-btn-danger:hover:not(:disabled) {
    background-color: #b71c1c;
}

.mc-btn-sm {
    padding: 0.2em 0.5em;
    font-size: 0.85em;
}

/* Minimized state: header only, clickable to restore */
.mc-draggable-panel-minimized {
    max-height: none;
}

.mc-draggable-panel-minimized .mc-draggable-panel-header {
    border-radius: 4px;
    cursor: pointer;
}

/* Panel header navigation buttons */
.mc-panel-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 0.4em;
    flex-shrink: 0;
}

.mc-panel-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    position: relative;
    min-width: 24px;
    min-height: 24px;
}

.mc-panel-nav-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.25);
}

.mc-panel-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mc-panel-nav-progress {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 0.3em;
    white-space: nowrap;
    user-select: none;
}

.mc-nav-badge {
    position: absolute;
    bottom: -1px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background-color: white;
    color: #1565c0;
    border: 1px solid #1565c0;
    border-radius: 2px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* ───────────────────────── AfA PnP Dialog ───────────────────────── */

dialog.tq-pnp-dialog {
    z-index: 50;
    position: fixed;
    align-self: anchor-center;
    width: 60%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-family: inherit;
    font-size: 0.9em;
}

dialog.tq-pnp-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.tq-pnp-dialog-title {
    padding: 12px 16px;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 6px 6px 0 0;
}

.tq-pnp-dialog-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.tq-pnp-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 0 0 6px 6px;
}

/* Collapsible sections */

.tq-pnp-section {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
}

.tq-pnp-section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background-color: #f5f6f7;
    user-select: none;
    border-radius: 4px;
}

.tq-pnp-section-header:hover {
    background-color: #e8eaed;
}

.tq-pnp-chevron {
    font-size: 0.7em;
    width: 12px;
    text-align: center;
    color: #555;
}

.tq-pnp-section-title {
    font-weight: 600;
    font-size: 0.95em;
}

.tq-pnp-section-body {
    padding: 12px;
}

/* Form grid — label + control pairs */

.tq-pnp-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: center;
}

.tq-pnp-form-grid > label {
    font-weight: 500;
    white-space: nowrap;
}

/* Checkbox grids — 3-column */

.tq-pnp-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 12px;
}

/* Checkbox row — inline flow */

.tq-pnp-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 4px;
}

/* Individual checkbox item */

.tq-pnp-checkbox-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tq-pnp-checkbox-item label {
    cursor: pointer;
}

/* Form row — single label + input */

.tq-pnp-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* Sub-labels within sections */

.tq-pnp-sub-label {
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #333;
}

/* Input styling */

.tq-pnp-input {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em;
    min-width: 120px;
}

.tq-pnp-number-input {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em;
    width: 80px;
}

.tq-pnp-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em;
    min-width: 140px;
}

.tq-pnp-color-input {
    width: 50px;
    height: 28px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

/* Radio groups */

.tq-pnp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tq-pnp-radio-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tq-pnp-radio-row label {
    cursor: pointer;
}

/* Enable/disable toggle row */

.tq-pnp-enable-row {
    margin-bottom: 8px;
}

/* Detail controls — disabled state */

.tq-pnp-detail-controls[data-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* Sub-groups within a section */

.tq-pnp-sub-group {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}

.tq-pnp-sub-group:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Timing group */

.tq-pnp-timing-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Font name chips */

.tq-pnp-font-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.tq-pnp-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tq-pnp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: #e0e7ef;
    border-radius: 12px;
    font-size: 0.85em;
}

.tq-pnp-chip-remove {
    cursor: pointer;
    font-weight: bold;
    color: #666;
    margin-left: 2px;
}

.tq-pnp-chip-remove:hover {
    color: #c00;
}

.tq-pnp-small-btn {
    padding: 3px 10px;
    font-size: 0.85em;
}

/* ── Accommodation Picker ── */

.tq-acc-description {
    font-size: 0.8em;
    color: #777;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}

.tq-acc-hint {
    font-size: 0.8em;
    color: #0b6fcc;
    background-color: #e8f2fc;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 8px;
    line-height: 1.4;
}

.tq-acc-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tq-acc-combo-detail {
    margin-left: 24px;
    padding: 6px 0;
}

.tq-acc-combo-detail[data-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   Preview View (tq-pv- prefix) — item / passage-set / stimulus preview
   with the always-visible settings bar
   ========================================================================== */

.PreviewView_window {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tq-pv-header {
    border-bottom: 1px solid #ddd;
}

.tq-pv-h1 {
    margin: 0;
    font-size: 1.3em;
}

/* The title bar IS the settings-accordion toggle: full-width, clearly
   interactive, 7:1 text contrast, visible keyboard focus. */
.tq-pv-header-toggle {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    width: 100%;
    padding: 0.5em 1em;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
}

.tq-pv-header-toggle:hover {
    background-color: #eef2f6;
}

.tq-pv-header-toggle:focus-visible {
    outline: 3px solid #0b57d0;
    outline-offset: -3px;
}

.tq-pv-chevron {
    font-size: 0.9em;
    color: #444;
}

.tq-pv-title {
    font-size: 1em;
}

.tq-pv-settings {
    padding: 0.5em;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.tq-pv-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    padding: 0.25em 0.5em;
}

.tq-pv-row label {
    font-weight: 500;
    white-space: nowrap;
}

.tq-pv-row label[data-disabled="true"] {
    opacity: 0.5;
}

.tq-pv-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em;
    min-width: 180px;
}

/* 7:1 contrast on the light settings bar (WCAG AAA) */
.tq-pv-modified {
    color: #8a3c00;
    font-weight: 600;
    font-size: 0.9em;
}

.tq-pv-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.5em 0.4em;
}

.tq-pv-chips-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #444;
}

.tq-pv-chip-none {
    background-color: #eee;
    color: #444;
    font-style: italic;
}

.tq-pv-notice {
    padding: 0.4em 1em;
    background-color: #fff6e5;
    border-bottom: 1px solid #e0c98f;
    color: #5c4400;
}

.tq-pv-notice p {
    margin: 0;
    font-size: 0.9em;
}

.tq-pv-display {
    padding: 1em 2em;
    min-height: 200px;
}

.tq-pv-stimulus {
    max-width: 60em;
    margin: 0 auto;
}

.tq-pv-status {
    padding: 0.3em 0.5em;
    font-size: 0.85em;
    color: #555;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #fafafa;
}

/* ========== Math Formula Blot (Inline Equation Editor) ========== */

/* Inline blot wrapper */
qti-span.tq-math-formula {
    display: inline-block;
    vertical-align: middle;
}

/* Math element inside the blot */
qti-span.tq-math-formula math {
    cursor: pointer;
    padding: 0 2px;
}

/* Hover indicator for editable equation */
qti-span.tq-math-formula:hover math {
    outline: 2px dashed #1565c0;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Toolbar button icon - sigma symbol via SVG data URI */
div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-math-formula {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 2h12v2.5H8.5L12 9l-3.5 4.5H15V16H3v-2.5l5-5.5L3 4.5z' fill='%23444'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* Asset Services "Request graphic" toolbar button — artist's beret +
   paintbrush, so it can't be confused with the framed-picture Insert
   Image icon beside it (they used to be nearly identical). Foreground
   is the Asset Studio card's violet (#5E00BD, see images/AssetStudio.svg)
   to tie the button to the studio it sends work to. Brush anatomy:
   round-ended handle, thick ferrule band, bristle head that bulges
   wider than the handle before tapering (a straight taper read as a
   knife blade). */
div.ql-toolbar.ql-snow.tq-editor-toolbar button.ql-asset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1.8 6.4 Q1.5 3.5 5.2 2.7 Q9 1.9 10.2 4.3 Q10.7 5.5 9.4 6.2 Q5.3 7.6 1.8 6.4 Z' fill='%235E00BD'/%3E%3Ccircle cx='6' cy='2.1' r='0.8' fill='%235E00BD'/%3E%3Cpath d='M16.4 6.6 L12.6 10.4' stroke='%235E00BD' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12.6 10.4 L11.15 11.85' stroke='%235E00BD' stroke-width='2.4'/%3E%3Cpath d='M10.3 11.0 L12.0 12.7 Q11.5 15.0 7.2 15.4 Q7.9 12.3 10.3 11.0 Z' fill='%235E00BD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}

/* Asset Services placeholder (pending) box in the editor. */
.tq-asset-pending {
    display: inline-block;
    padding: 6px 10px;
    border: 2px dashed #767676;
    border-radius: 4px;
    background: #f3f3f3;
    color: #222;
    font-style: italic;
}

/* AI provider's note on a slot (why the last round died / needs a human).
   Dark red on the light pending background — 7:1+ contrast (WCAG AAA). */
.tq-asset-provider-note {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    font-style: normal;
    color: #8a1f11;
}

/* Asset Services filled slot: the asset + a "request revision" icon button that
   is revealed on hover (mouse) or keyboard focus. The button is a real, always-
   in-tab-order <button>, so keyboard users can Tab to it (it becomes visible on
   :focus) and press Enter/Space to open the revision panel. */
.tq-asset-filled {
    position: relative;
    display: inline-block;
}
/* Delivered graphics / video are resizable, like images (mirrors
   span.tq-image-embed figure.tq-image): drag the figure's corner handle. The
   .tq-asset-filled wrapper is inline-block, so it grows with the figure and the
   revise button stays pinned to its top-right corner. */
span.tq-asset-slot figure.tq-asset-media {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    resize: both;
    overflow: hidden;
    min-width: 50px;
    min-height: 50px;
}
span.tq-asset-slot figure.tq-asset-media > img,
span.tq-asset-slot figure.tq-asset-media > video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.tq-asset-revise {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    line-height: 24px;
    padding: 0;
    font-size: 16px;
    text-align: center;
    color: #1b1b1b;
    background: #ffffff;
    border: 1px solid #6b6b6b;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}
.tq-asset-filled:hover .tq-asset-revise,
.tq-asset-revise:focus {
    opacity: 1;
}
.tq-asset-revise:hover {
    background: #eef4ff;
}
.tq-asset-revise:focus {
    outline: 2px solid #1a5fb4;
    outline-offset: 1px;
}

/* Equation editor dialog */
dialog.tq-equation-dialog {
    z-index: 50;
    position: fixed;
    align-self: anchor-center;
    min-width: 500px;
    max-width: 90vw;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

dialog.tq-equation-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

dialog.tq-equation-dialog .tq-dialog-title {
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 6px 6px 0 0;
}

dialog.tq-equation-dialog .tq-equation-editor-container {
    padding: 16px;
    min-height: 200px;
}

dialog.tq-equation-dialog .tq-dialog-buttons {
    padding: 10px 16px;
    border-top: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 0 0 6px 6px;
}

/* ========== HOTTEXT AUTHORING ========== */

.tq-hottext-markup-section {
    margin: 12px 0;
}

.tq-hottext-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tq-hottext-toolbar button {
    padding: 4px 10px;
    border: 1px solid #999;
    border-radius: 3px;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 0.85em;
}

.tq-hottext-toolbar button:hover {
    background: #e0e0e0;
}

.tq-hottext-editor {
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 10px;
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.8;
    background: white;
}

.tq-hottext-editor:focus {
    outline: 2px solid #0078D4;
    outline-offset: 1px;
}

/* Authoring-only highlight for marked hottext regions — shown ONLY
 * inside the Quill editor (.ql-editor) so it never leaks into rendered or
 * preview contexts (the stimulus context panel, defineScoring, delivery),
 * where the runtime hottext widget controls region appearance instead
 * (plain until hover/focus). The qti-hottext-authoring class still rides
 * along in saved bodies but is inert outside the editor. */
.ql-editor .qti-hottext-authoring {
    background-color: #fff3cd;
    border-bottom: 2px dashed #d4a017;
    padding: 1px 2px;
    border-radius: 2px;
}

/* Accessibility content (qti-visually-hidden / qti-hidden) is hidden in
 * delivery (QtiBaseStyles.css), but inside the Quill editor (.ql-editor) it
 * must stay VISIBLE and editable — otherwise an author can't see or change the
 * screen-reader / spoken-replacement text. Defeat the delivery hide (the
 * visually-hidden recipe uses `position: fixed !important`, so the un-hide
 * needs !important too) and give it a muted dashed affordance so the author
 * can tell it's special-purpose content. The classes still ride along in
 * saved bodies and behave normally outside the editor. */
.ql-editor .qti-visually-hidden,
.ql-editor .qti-hidden {
    position: static !important;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    display: inline;
    outline: 1px dashed #6c8ebf;
    outline-offset: 1px;
    background-color: #eef3fb;
    color: #335;
}

/* qti-keyword-emphasis is gated by .pnp-keyword-emphasis at delivery, so it
 * looks ordinary outside that context. In the editor the author must still see
 * which words they've marked, so always show the emphasis here. */
.ql-editor .qti-keyword-emphasis {
    font-weight: 700;
}

.tq-hottext-region-list {
    margin-top: 8px;
}

.tq-hottext-region-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.tq-hottext-region-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
}

.tq-hottext-region-table td:first-child {
    width: 120px;
}

.tq-hottext-region-table td:last-child {
    width: 30px;
    text-align: center;
}

.tq-hottext-region-table button {
    background: none;
    border: none;
    cursor: pointer;
    color: #c0392b;
    font-size: 1rem;
}

.tq-hottext-region-id {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
}

.tq-hottext-region-id:hover,
.tq-hottext-region-id:focus {
    border-color: #bbb;
    background: white;
    outline: none;
}

.tq-hottext-region-jump {
    color: #0078D4;
    text-decoration: none;
    cursor: pointer;
}

.tq-hottext-region-jump:hover,
.tq-hottext-region-jump:focus {
    text-decoration: underline;
}

.tq-hottext-empty {
    color: #888;
    font-style: italic;
}

.tq-hottext-prompt-section {
    margin: 12px 0;
}

.tq-hottext-prompt-editor {
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 8px;
    min-height: 40px;
    background: white;
}

.tq-hottext-prompt-editor:focus {
    outline: 2px solid #0078D4;
    outline-offset: 1px;
}


/* ----- Simple-scoring panel layout -----
   The panel renders inside .tq-side-panel (max-width: 30% of the
   viewport). Its WAF.Table2D (long expected-value strings, item-id
   columns, button labels) and inline editors otherwise overflow
   horizontally and obscure the item display next to the panel.
   Constrain everything inside the panel to the side-panel width;
   long content scrolls inside the panel rather than escaping it. */

div.tq-simple-scoring-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    padding: 0.5em;
}

div.tq-simple-scoring-panel * {
    box-sizing: border-box;
    max-width: 100%;
}

div.tq-simple-scoring-panel div.tq-simple-scoring-table {
    overflow-x: auto;
    width: 100%;
}

/* Table2D-rendered cells: wrap long values rather than running off
   the right edge. The exemplar table includes captured-response
   summaries (identifier lists, equation strings) that can be wide. */
div.tq-simple-scoring-panel table {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
}

div.tq-simple-scoring-panel table td,
div.tq-simple-scoring-panel table th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Per-option response table for the "correct"/"mapping" template
   editors (SimpleScoringPanel._renderMappingTable / _renderCorrectTable):
   option | score-or-contribution | delete. Light borders + padding so
   the columns read as a table. */
div.tq-simple-scoring-panel table.tq-simple-scoring-response-table {
    border-collapse: collapse;
    margin: 0.4em 0;
}
div.tq-simple-scoring-panel table.tq-simple-scoring-response-table td,
div.tq-simple-scoring-panel table.tq-simple-scoring-response-table th {
    border: 1px solid #ccc;
    padding: 0.25em 0.5em;
    text-align: left;
    vertical-align: middle;
}
/* The panel-wide table rule above forces table-layout:fixed, so COLUMN
   widths come from the HEADER row (a td width is ignored) — without
   these the columns split equally and a narrow panel squeezed the
   controls, while the option column lost the room long content needs.
   One narrow, fixed control column (the contribution input stacked over
   the tq_delete icon); the option/answer column takes the remainder. */
div.tq-simple-scoring-panel table.tq-simple-scoring-response-table th.tq-simple-scoring-col-compact {
    width: 5.5em;
}
div.tq-simple-scoring-panel table.tq-simple-scoring-response-table th.tq-simple-scoring-col-part {
    width: 10em;
}
/* The compact control cell: contribution input above the delete icon,
   centered, hugging the top of tall option rows. */
div.tq-simple-scoring-panel td.tq-simple-scoring-cell-compact {
    vertical-align: top;
    text-align: center;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
}
/* Long unbreakable content (equations, wide images) scrolls INSIDE its
   cell instead of overflowing the column/panel. word-break/overflow-wrap
   (panel-wide rules above) handle ordinary text. */
div.tq-simple-scoring-panel td.tq-simple-scoring-cell-option {
    overflow-x: auto;
}
div.tq-simple-scoring-panel td.tq-simple-scoring-cell-option img {
    max-width: 100%;
    height: auto;
}
div.tq-simple-scoring-panel td.tq-simple-scoring-cell-option math {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
/* Small contribution input — a number input's INTRINSIC width (~10em)
   otherwise pokes past the narrow fixed column. Deliberately compact:
   the option content owns the table's width. */
div.tq-simple-scoring-panel input.tq-simple-scoring-cell-score {
    width: 4.5em;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.85em;
    padding: 0.15em 0.3em;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-fullcredit-heading {
    font-weight: bold;
    margin: 0.5em 0 0.25em 0;
}

/* Inline-edit number inputs (Score column, default-score field).
   Without a max-width they default to a wide native size. */
div.tq-simple-scoring-panel input[type="number"],
div.tq-simple-scoring-panel input[type="text"] {
    max-width: 8em;
    box-sizing: border-box;
}

div.tq-simple-scoring-panel select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Template-picker (CustomSelectWidget) — max 90% of its container so
   it sits comfortably next to the picker label, and let the long
   description text wrap inside both the closed-state button and the
   open-state dropdown options. Without these rules the widget's
   default styles (PaldroeStyles.css §"CUSTOM SELECT WIDGET") render
   single-line text with overflow:hidden + text-overflow:ellipsis on
   templates with longer descriptions (TplA2-MatchCorrectAll,
   TplI-CrossInteractionIter, etc.). 2026-05-20 UI tweaks.

   The two-part fix:
   (a) Override the value-span's nowrap+ellipsis so the text wraps.
       The value-span is a flex child (flex:1) inside a flex button;
       set min-width:0 too — without it, the span won't shrink below
       its content's min-content width and the long text pushes the
       button (and the page) wider, producing a horizontal scrollbar.
   (b) Drop the widget's default max-width:400px AND let its inner
       button/dropdown grow to the container's bound. The container
       itself is the 90%-of-parent cap that the page-layout asks for.
   (c) Switch button + option alignment from align-items:center to
       align-items:flex-start so multi-line wrapped text grows
       downward instead of pushing the icon (arrow) around. */
div.tq-simple-scoring-panel div.tq-simple-scoring-template-select {
    max-width: 90%;
    box-sizing: border-box;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-template-select
    .p-qti-custom-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-template-select
    .p-qti-custom-select-button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    height: auto;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-template-select
    .p-qti-custom-select-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-template-select
    .p-qti-custom-select-dropdown {
    max-width: 100%;
    box-sizing: border-box;
}

/* Template-picker status line: the long description of the highlighted
   (dropdown open) or selected (dropdown closed) scoring template.
   Reserve a little height so the panel doesn't jump as the text
   appears/changes. #3d3d3d on white is 10.4:1 (AAA). */
div.tq-simple-scoring-panel .tq-sst-status {
    max-width: 90%;
    min-height: 2.4em;
    margin: 4px 0 8px;
    font-size: 0.9em;
    line-height: 1.35;
    color: #3d3d3d;
}
div.tq-simple-scoring-panel div.tq-simple-scoring-template-select
    .p-qti-custom-select-option {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    align-items: flex-start;
    height: auto;
}

/* Editor pane that renders below the table when an Edit button is
   clicked. Kept inside the panel so the user can scroll vertically
   without the editor pushing content off the right edge. */
div.tq-simple-scoring-editor {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5em;
    padding: 0.5em;
    border-top: 1px solid #ccc;
}

/* Edit-in-place bar inside .tq-simple-scoring-editor: shown when
   the user clicks Edit on an exemplar row. The item shield has
   already been lifted at this point so the user can interact with
   the item; this bar lets them set the score and Save / Cancel. */

div.tq-simple-scoring-edit-bar {
    width: 100%;
    box-sizing: border-box;
    background: #f6f6f6;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0.5em;
}

div.tq-simple-scoring-edit-bar p.tq-simple-scoring-edit-intro {
    margin: 0 0 0.5em 0;
    font-size: 0.9em;
    color: #444;
}

div.tq-simple-scoring-edit-score-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

div.tq-simple-scoring-edit-score-row input.tq-simple-scoring-edit-score-input {
    width: 6em;
}

div.tq-simple-scoring-edit-buttons {
    display: flex;
    gap: 0.5em;
}

/* ===== Assertion All / None / Any row editor (AssertionDnfEditor) ===== */
.tq-dnf-editor { width: 100%; }
.tq-dnf-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 0.45em;
    align-items: stretch;
}
.tq-dnf-colhead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-weight: bold;
    padding: 0.35em 0.5em;
    background-color: var(--color-primary-dark);   /* white-on-dark: AAA contrast */
    color: #ffffff;
    border-radius: 4px;
}
.tq-dnf-rowgutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    min-width: 2.6em;
}
.tq-dnf-or { font-weight: bold; color: var(--color-primary); }
.tq-dnf-row-delete,
.tq-dnf-chip-remove {
    background: transparent;
    border: 1px solid #8060c0;
    color: var(--color-primary);
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tq-dnf-chip-remove { color: var(--color-primary-dark); }
.tq-dnf-row-delete:hover,
.tq-dnf-chip-remove:hover { background: #f3d6d6; border-color: #a32020; color: #7a1515; }
.tq-dnf-cell {
    border: 1px solid #c0a8e8;
    border-radius: 4px;
    padding: 0.4em;
    min-height: 3em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    background: #fbf9ff;
}
.tq-dnf-cell-tools { display: flex; gap: 0.3em; flex-wrap: wrap; }
.tq-dnf-tool {
    cursor: pointer;
    border: 1px solid #c0a8e8;
    background: #ffffff;
    border-radius: 4px;
    padding: 0.15em 0.45em;
    min-width: 1.9em;
    min-height: 1.9em;
}
.tq-dnf-tool:hover { background: #ece5fa; }
.tq-dnf-tool:focus-visible,
.tq-dnf-row-delete:focus-visible,
.tq-dnf-chip-remove:focus-visible,
.tq-dnf-addrow:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.tq-dnf-chips { display: flex; flex-wrap: wrap; gap: 0.3em; }
.tq-dnf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    padding: 0.1em 0.55em 0.1em 0.3em;
    background: #e8daff;
    color: var(--color-primary-dark);
}
.tq-dnf-chip-calc .tq-dnf-chip-label { cursor: pointer; }
.tq-dnf-chip.tq-missing-reference { border-color: #a32020; background: #f7e9e9; color: #7a1515; }
.tq-dnf-addrow {
    grid-column: 1 / -1;
    cursor: pointer;
    border: 1px dashed #8060c0;
    background: var(--color-primary-tint);
    border-radius: 4px;
    padding: 0.45em;
    font-weight: bold;
    color: var(--color-primary);
}
.tq-dnf-addrow:hover { background: #e5d8ff; }
.tq-dnf-error {
    grid-column: 1 / -1;
    border: 1px solid #a32020;
    background: #f7e9e9;
    color: #7a1515;
    border-radius: 4px;
    padding: 0.6em;
    font-weight: bold;
}

/* Visibly-disabled scoring toolbar controls. In test-score mode only Score /
   Test Score / Clear stay enabled; every other control is disabled and must
   read as disabled (not just be unclickable). */
.tq-controls button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.tq-scoring-mode-label {
    font-size: 0.72em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.tq-scoring-mode-dropdown.tq-disabled,
.tq-show-intermediates-label.tq-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Virtual-entity name prompt (ItemShield) + shared small-dialog bits */
.tq-ve-name-dialog .tq-ve-name-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35em;
    margin: 0.3em 0;
}
.tq-dialog-label { font-weight: bold; display: block; margin-top: 0.4em; }
.tq-dialog-error { color: #7a1515; min-height: 1.2em; }

/* Loading overlay (publication state load, etc.) */
.mt-load-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.mt-load-box {
    background: #fff;
    padding: 1.5em 2em;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}
.mt-load-spinner {
    width: 2.5em;
    height: 2.5em;
    border: 4px solid #d0d8e8;
    border-top-color: #5a8dee;
    border-radius: 50%;
    animation: mt-load-spin 0.8s linear infinite;
}
@keyframes mt-load-spin {
    to { transform: rotate(360deg); }
}
.mt-load-label {
    font-size: 0.95em;
    color: #333;
}

/* ── VE context-menu (ItemShield interaction click) ──────────────── */
.tq-ve-context-menu {
    background: #ffffff;
    border: 1px solid var(--color-border, #e0e4ed);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    min-width: 180px;
    padding: 0;
}

.tq-ve-context-menu::before {
    content: attr(data-title);
    display: block;
    color: var(--color-text-muted, #888);
    font-weight: 600;
    font-size: 0.75em;
    padding: 7px 14px 5px;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
    pointer-events: none;
    user-select: none;
}

.tq-ve-context-menu .menu_menu {
    border: none;
    border-bottom: 1px solid var(--color-border, #e0e4ed);
    text-align: left;
    padding: 9px 14px;
    color: var(--color-text-base, #333);
    font-style: normal;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.1s;
}

.tq-ve-context-menu .menu_menu:last-child {
    border-bottom: none;
}

.tq-ve-context-menu .menu_menu:hover,
.tq-ve-context-menu .menu_active {
    background: var(--color-primary-tint, #F3EEFF);
    color: var(--color-primary-dark, #4B24A8);
    font-style: normal;
}

/* ==========================================================================
   Set Construction view (sc- prefix)
   Collapsible left construction panel + right assembled-set preview.
   The collapse mechanism reuses the global .tq-side-panel / .tq-panel-*
   rules; everything below is self-contained so the view doesn't depend on
   the DISView-scoped scoring styles.
   ========================================================================== */

/* Two-pane work area: fixed-width side panel + flexible preview pane. */
.sc-workarea {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 8px;
    min-height: 78vh;
}

.sc-workarea > .tq-full-width {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/* Right-hand assembled-set preview — the sole scroll container. */
.sc-preview {
    height: 80vh;
    overflow: auto;
    padding: 1em;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Passage name heading at the top of the construction panel. */
.sc-passage-title {
    margin: 8px 6px;
    font-size: 1.1em;
    color: #1a1a1a;            /* >7:1 on white (AAA) */
    overflow-wrap: anywhere;
}

.sc-accordion-host {
    margin-top: 8px;
}

/* Membership checkbox list. */
ul.sc-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Note shown in the membership block when the passage has no
   associated items yet (an empty block would read as broken). */
p.sc-member-empty {
    margin: 4px 2px;
    font-style: italic;
    color: #1a1a1a;            /* AAA contrast */
}

li.sc-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
}

li.sc-member-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

li.sc-member-row input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

label.sc-member-label {
    cursor: pointer;
    color: #1a1a1a;            /* AAA contrast */
    overflow-wrap: anywhere;
}

/* Reorder-only mode for the order list: membership is driven by the
   checkboxes, so suppress the ReorderableList's own add / edit / delete
   affordances (drag + keyboard reorder remain). */
.tq-reorder-only .tq_edit,
.tq-reorder-only .tq_delete,
.tq-reorder-only .tq-big-add-btn,
.tq-reorder-only .tq-center-span {
    display: none !important;
}

/* ---- Tracked editorial suggestions (tq-ins / tq-del) ----
   Rendered only inside a tracked Editorial Review or a Post-Editorial Content
   Review; ItemTransformer strips both markers before the item is delivered or
   exported, so these styles never reach a student.

   WCAG AAA: meaning is never carried by colour alone. An insertion is underlined
   and a deletion is struck through, so the distinction survives greyscale, and
   both colours are >= 7:1 on white. The ::after label is decorative (aria-hidden
   via CSS content is not exposed as text to AT); the Changes panel is the
   accessible surface, and each marker carries an accessible name there. */
tq-ins,
tq-del {
    border-radius: 2px;
    padding: 0 1px;
}

tq-ins {
    color: #0b5c2e;                 /* 7.4:1 on white */
    background-color: #e6f4ea;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

tq-del {
    color: #8a1c1c;                 /* 7.1:1 on white */
    background-color: #fdeaea;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* An insertion or deletion that wraps an embed (image, equation, interaction)
   cannot show a text decoration, so it gets a visible border instead — again,
   shape not colour. */
tq-ins:has(img, figure, iframe, math, .tq-image-embed),
tq-del:has(img, figure, iframe, math, .tq-image-embed) {
    display: inline-block;
    border: 3px solid currentColor;
    text-decoration: none;
}

tq-del:has(img, figure, iframe, math, .tq-image-embed) {
    border-style: dashed;
}

/* ---- Changes summary bar + in-place resolve popover (Post-Editorial Content Review) ----
   Per-change accept/reject is done IN THE ITEM via the popover; this slim sticky bar carries the
   outstanding count (which gates completion), the bulk actions, and the keyboard walk. Meaning is
   never carried by colour alone: in the popover an addition is underlined and a removal struck
   through, each also labelled in words. */
.tq-changes-panel {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem 0;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background-color: var(--color-surface-sunken, #f9fafb);
}

.tq-changes-heading {
    margin: 0;
    font-size: 0.9375rem;
    color: #1a1a1a;                 /* AAA */
}

.tq-changes-count {
    margin: 0;
    margin-right: auto;             /* push the bulk actions to the far end of the bar */
    font-weight: 600;
    color: #1a1a1a;                 /* AAA — this is the number that gates completion */
}

.tq-changes-nav,
.tq-changes-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Clickable-suggestion affordance — only in the RESOLVING editor, never the read-only suggesting
   review. The marker's own styling still distinguishes ins/del/comment; this only signals that it
   can be acted on. */
.tq-resolving tq-ins,
.tq-resolving tq-del,
.tq-resolving tq-comment {
    cursor: pointer;
}
.tq-resolving tq-ins:hover,
.tq-resolving tq-del:hover,
.tq-resolving tq-comment:hover {
    outline: 2px solid #1a1a1a;
    outline-offset: 1px;
}

/* The in-place resolve popover: click a suggestion → Accept / Reject (or Dismiss, for a comment). */
.tq-change-popover {
    position: absolute;
    z-index: 1000;
    max-width: 22rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background-color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.tq-change-popover-kind {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #1a1a1a;                 /* AAA */
    margin-bottom: 0.25rem;
}

.tq-change-popover-text {
    color: #1a1a1a;
    overflow-wrap: anywhere;
    max-height: 6rem;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.tq-change-popover-text--insert {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.tq-change-popover-text--delete {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.tq-change-popover-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* Screen-reader-only live region. */
.tq-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Tracked editorial suggestions — the markers a Tracked Editorial Review produces, whether
   created surgically over the rendered view (TrackedSuggestReviewView) or by the Quill blots
   (TrackedChangeBlots.js).
   SHADOW NOTE (keep in sync): in shadow-rendered items the live copies of
   the tq-ins/tq-del/tq-comment marker rules ride in
   MarkupItemRenderer.present's extra sheet (the .tq-resolving affordance
   becomes :host(.tq-resolving) there — the resolving view toggles the
   class on each [data-shadow-item] host). These page rules remain for the
   Quill blots. Colour is reinforcement only; the strike / underline carries the
   meaning, so colour-blind and forced-colours users still read it. Contrast targets AAA (7:1). */
tq-ins, .tq-stand-in[data-tq-type="ins"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: #0a5c2a;
    text-decoration-color: #0a5c2a;
}
tq-del, .tq-stand-in[data-tq-type="del"] {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: #8a1c10;
    text-decoration-color: #8a1c10;
}
/* The comment highlight must WIN against author-styled content in the
   commented range (Word-pasted background-colored spans — hit live in a
   rubric table, where the comment was invisible and findable only by
   clicking). Quill merges inline formatting onto the fewest elements, so
   the author's inline background-color can land in EITHER place:
     - on the tq-comment element ITSELF (style attr beats a stylesheet rule
       — hence the !important on the marker's own background), or
     - on a child span inside the marker (hence the transparent override).
   Neither touches the stored content: resolving unwraps the marker and the
   author styling returns untouched. */
tq-comment, .tq-stand-in[data-tq-type="comment"] {
    background-color: #fff3cd !important;
    border-bottom: 2px dotted #7a5b00;
    cursor: pointer;
}
tq-comment [style*="background"],
.tq-stand-in[data-tq-type="comment"] [style*="background"] {
    background-color: transparent !important;
}
/* A POINT comment has no wrapped text — it is an empty anchor shown as a speech-balloon glyph.
   The glyph is CSS ::before (not real DOM), so unwrapping the marker changes no content. */
tq-comment.tq-point-comment {
    display: inline-block;
    background: none;
    border: none;
    vertical-align: text-bottom;
}
tq-comment.tq-point-comment::before {
    content: "\1F4AC";
    font-size: 0.9em;
}
/* The read-only suggesting surface: text is selectable (that is how you suggest), but the
   rendered content is not itself editable. */
.tsr-display-area {
    user-select: text;
}
.tsr-suggest-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
/* Live count of suggestions + comments on the entry (mirrors .tq-changes-count on the
   Post-Editorial bar — same completion stakes, so the same weight and AAA ink). */
.tsr-suggestion-count {
    margin-left: auto;
    font-weight: 600;
    color: #1a1a1a;                 /* AAA */
}