/* ################## Teacher toolbox, editors, quick-access bar, live results ################## */
/* Shared neo-brutalist kit for the question-authoring UI. Matches questions.css conventions
   (var(--dark) borders, offset box-shadows, var(--ekwarg) display type). */

/* ############ Shared form fields (qe-) ############ */
.qe-field { display: grid; gap: .35rem; width: 100%; }
.qe-label { font-weight: 700; font-size: .85rem; opacity: .8; }

.qe-input {
    width: 100%;
    border: 3px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    color: var(--dark);
    font-family: var(--ekwarg);
    font-size: 1rem;
    padding: .45rem .6rem;
    outline: none;
    box-shadow: 3px 3px 0 var(--dark);
    transition: box-shadow .1s ease, border-color .15s ease;
}

.qe-input:focus { border-color: var(--teal); box-shadow: 3px 3px 0 var(--teal); }
.qe-prompt { resize: vertical; min-height: 3rem; }

/* Holds up to 500 characters, so it wraps and grows rather than scrolling sideways under the caret. */
.qe-note { resize: vertical; min-height: 3rem; }

.qe-row { display: flex; gap: .8rem; width: 100%; }
.qe-row .qe-field { flex: 1; }

.qe-hint { margin: 0; font-size: .9rem; font-weight: 600; opacity: .7; }
.qe-error { margin: 0; color: var(--red); font-weight: 700; text-align: center; }

.qe-range { width: 100%; accent-color: var(--teal); }
.qe-range:disabled { opacity: .4; }
.qe-duration { gap: .1rem; }

.qe-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
    font-family: var(--inter);
    font-size: .8rem;
    color: var(--dark);
    cursor: pointer;
}

.qe-check input { accent-color: var(--teal); cursor: pointer; }

/* ############ Options list editor ############ */
.qe-options { display: grid; gap: .5rem; width: 100%; }

.qe-option-row { display: flex; align-items: center; gap: .4rem; }
.qe-option-input { flex: 1; }

.qe-option-badge {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 6px;
    border: 2px solid var(--dark);
    background: var(--teal);
    color: var(--beige);
    font-family: var(--ekwarg);
}

.qe-icon-btn {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border: 2px solid var(--dark);
    border-radius: 6px;
    background: var(--beige);
    color: var(--dark);
    cursor: pointer;
    font-size: .8rem;
    transition: background .12s ease, transform .08s ease;
}

.qe-icon-btn:hover:not(:disabled) { background: var(--purple); color: var(--beige); transform: translateY(-1px); }
.qe-icon-btn.qe-remove:hover:not(:disabled) { background: var(--red); }
.qe-icon-btn:disabled { opacity: .35; cursor: not-allowed; }

.qe-add-option {
    justify-self: start;
    border: 2px dashed var(--dark);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--dark);
    font-weight: 700;
    padding: .35rem .8rem;
    cursor: pointer;
    transition: background .12s ease;
}
.qe-add-option:hover { background: var(--teal); color: var(--beige); border-style: solid; }

/* Correct-answer marker on an option row, and the YesNo pair chooser. */
.qe-correct {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border: 2px solid var(--dark);
    border-radius: 6px;
    background: var(--beige);
    color: var(--dark);
    opacity: .45;
    cursor: pointer;
    font-size: .9rem;
    transition: background .12s ease, opacity .12s ease, transform .08s ease;
}

.qe-correct:hover { opacity: 1; transform: translateY(-1px); }
.qe-correct.on { background: var(--lime); color: var(--dark); opacity: 1; }

.qe-correct-row { display: flex; gap: .75rem; }

/* ############ Editor pane ############ */
.qe-pane {
    display: grid;
    gap: 1rem;
    justify-items: stretch;
    width: min(92vw, 560px);
    padding: 1.5rem;
    border: 3px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    box-shadow: 8px 8px 0 var(--dark);
}

.qe-pane-head { display: flex; align-items: center; justify-content: space-between; }
.qe-type-tag {
    font-family: var(--ekwarg);
    font-size: 1.15rem;
    padding: .15rem .9rem;
    border: 2px solid var(--dark);
    border-radius: 999px;
    background: var(--orange);
    color: var(--beige);
    box-shadow: 2px 2px 0 var(--dark);
}

.qe-display-prompt { margin: 0; text-align: center; }

.qe-preview {
    display: grid;
    gap: .5rem;
    justify-items: center;
    padding: 1rem;
    border: 2px dashed var(--dark);
    border-radius: var(--border-radius);
    background: rgba(40, 105, 131, .06);
}
.qe-preview-label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
/* The preview reuses the student leaf but shrinks the giant YesNo tiles so the pane stays compact. */
/* Gap so the Submit button never sticks to the last option (the student view gets this from .qa-body). */
.qe-preview-body { width: 100%; display: grid; justify-items: center; gap: 1.15rem; transform: scale(.92); }
.qe-preview-body .qa-yesno-btn { height: 6rem; width: 6rem; font-size: 1.2rem; box-shadow: 4px 4px 0 var(--dark); }
.qe-preview-body .qa-submit { min-width: 9rem; }

.qe-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.qe-name { flex: 1 1 12rem; }

.qe-btn {
    border: 3px solid var(--dark);
    border-radius: var(--border-radius);
    font-family: var(--ekwarg);
    font-size: 1.05rem;
    padding: .5rem 1.4rem;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--dark);
    transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.qe-btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--dark); }
.qe-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dark); }
.qe-btn:disabled { opacity: .5; cursor: not-allowed; }

.qe-fire, .qe-confirm-save { background: var(--teal); color: var(--beige); }
.qe-ghost { background: var(--beige); color: var(--dark); }

/* The picked YesNo answer means the same as a ticked option, so it carries the same colour. */
.qe-correct-pick { background: var(--lime); color: var(--dark); }

/* ############ Toolbox side panel (tb-) ############ */
.tb-panel { display: grid; gap: 1.25rem; min-width: 15rem; }
.tb-group { display: grid; gap: .6rem; }
.tb-group-title {
    margin: 0;
    font-family: var(--ekwarg);
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

.tb-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    box-shadow: 3px 3px 0 var(--dark);
    transition: transform .08s ease, box-shadow .08s ease;
}
.tb-item:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--dark); }

/* Templates read as blank-editor shortcuts (teal, dashed accent); definitions read as ready-to-fire
   saved/system questions (solid orange accent). Distinction required in menu AND quick bar. */
.tb-item-template { border-left: 6px solid var(--teal); }
.tb-item-def { border-left: 6px solid var(--orange); }

.tb-item-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--dark);
    font-family: inherit;
    font-size: .95rem;
    padding: 0;
    min-width: 0;
}
.tb-item-main:hover { color: var(--teal); }
.tb-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-item-kind { font-size: .7rem; font-weight: 800; opacity: .55; text-transform: uppercase; }
.tb-system-badge { font-size: .65rem; font-weight: 800; color: var(--purple); text-transform: uppercase; }

.tb-pin, .tb-del {
    flex: 0 0 auto;
    display: grid; place-items: center;
    background: none; border: none; cursor: pointer;
    color: var(--dark); opacity: .55;
    padding: .1rem;
    transition: opacity .12s ease, transform .08s ease, color .12s ease;
}
.tb-pin:hover, .tb-del:hover { opacity: 1; transform: scale(1.1); }
.tb-pin.pinned { opacity: 1; color: var(--teal); }
.tb-del:hover { color: var(--red); }
.tb-empty { margin: 0; font-size: .85rem; opacity: .55; font-style: italic; }

/* ############ Quick-access bar (qab-) ############ */
/* Sits on the row just under the action bar, with a small breathing gap. */
.qab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 0;
    padding: 0;
}
/* Takes the quick-access bar's place while a quiz owns the screen. */
.quizOwnsScreen { margin: .5rem 0 0; font-size: .95rem; color: var(--dark); }
/* Icons inside quick-bar chips and editor buttons align with the label. */
.qab-item .mud-icon-root, .qe-btn .mud-icon-root { font-size: 1.05rem; }
.qab-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border: 2px solid var(--dark);
    border-radius: 999px;
    background: var(--beige);
    color: var(--dark);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 2px 2px 0 var(--dark);
    transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.qab-item:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--dark); }
.qab-item:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--dark); }
.qab-template { border-color: var(--teal); }
.qab-template .qab-dot { background: var(--teal); }
.qab-def { border-color: var(--orange); }
.qab-def .qab-dot { background: var(--orange); }
.qab-dot { width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid var(--dark); }

/* ############ Toolbox launcher + drawer ############ */
.tb-launcher {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--purple);
    color: var(--beige);
    font-family: var(--ekwarg);
    padding: .35rem 1rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--dark);
    transition: transform .08s ease;
}
.tb-launcher:hover:not(:disabled) { transform: translate(-1px, -1px); }
.tb-launcher:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Catches the click that closes the drawer; invisible so the lesson behind stays readable. */
.tb-backdrop {
    position: fixed; inset: 0;
    z-index: 10001;
}

/* Left drawer above the draggable feedback overlay (z-index 10000). Always mounted; the .open class
   slides it in, and removing it slides it out, so both directions animate. */
.tb-drawer {
    position: fixed; top: 0; left: 0;
    height: 100%;
    width: min(92vw, 22rem);
    background: var(--beige);
    border-right: 3px solid var(--dark);
    box-shadow: 8px 0 0 rgba(57, 53, 82, .15);
    padding: 1.25rem;
    overflow-y: auto;
    display: grid;
    /* Without this the implicit column takes max-content, so one long name widens every row. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-content: start;
    z-index: 10002;
    /* Past its own width by the width of the shadow, or those 8px stay on screen as a dark strip. */
    transform: translateX(calc(-100% - 8px));
    transition: transform .22s ease;
}
.tb-drawer.open { transform: none; }
.tb-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.tb-drawer-title { margin: 0; font-family: var(--ekwarg); }

/* The editor pane floats centered when firing from the toolbox/quick-bar; above the feedback overlay. */
.qe-modal {
    position: fixed; inset: 0;
    background: rgba(57, 53, 82, .35);
    z-index: 10003;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow-y: auto;
}

/* ############ Live results (lr-) ############ */
.lr-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: min(92vw, 640px);
    padding: 1.5rem;
    border: 3px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    box-shadow: 8px 8px 0 var(--dark);
    /* Clears the 8px shadow, so the panel reads as ending rather than as cut off. */
    margin-bottom: 1rem;
}
.lr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lr-prompt { margin: 0; }
.lr-count {
    font-family: var(--ekwarg);
    padding: .1rem .8rem;
    border: 2px solid var(--dark);
    border-radius: 999px;
    background: var(--teal);
    color: var(--beige);
    white-space: nowrap;
}
.lr-stop {
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--red);
    color: var(--beige);
    font-family: var(--ekwarg);
    padding: .3rem 1rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--dark);
}
.lr-stop:hover { transform: translate(-1px, -1px); }

.lr-bars { display: grid; gap: .6rem; }
.lr-bar-row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: .6rem; }
.lr-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-bar-track { height: 1.6rem; border: 2px solid var(--dark); border-radius: var(--border-radius); background: var(--beige); overflow: hidden; }
.lr-bar-fill { height: 100%; background: var(--teal); transition: width .3s ease; }
.lr-bar-count { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2rem; text-align: right; }
/* Only a question with an answer key gets the mark column, so ordinary questions keep their layout. */
.lr-keyed .lr-bar-row { grid-template-columns: 1.4rem minmax(4rem, 8rem) 1fr auto; }
.lr-bar-mark { display: flex; align-items: center; justify-content: center; color: var(--teal); }

/* Numeric dot plot. One dot per answer, positioned as a percentage of the axis by NumericDotPlot.
   Columns are spaced as a percentage of the field, so the mark has to scale with the panel or dots
   overlap and hide answers on a narrow screen. Keep --lr-dot proportional to the panel width: the
   invariant is StackSlot (2.2%) x field width >= dot size, which holds down to ~250px of viewport. */
.lr-dots { display: grid; gap: .1rem; }
.lr-dot-field { position: relative; border-bottom: 2px solid var(--dark); margin-bottom: .35rem; }

.lr-dot {
    position: absolute;
    width: var(--lr-dot);
    height: var(--lr-dot);
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 2px var(--beige);
    transform: translateX(-50%);
    z-index: 2;
}

/* Ringed and labelled as well as recoloured, so a flagged answer never reads by colour alone. */
.lr-dot.out {
    background: var(--purple);
    box-shadow: 0 0 0 2px var(--beige), 0 0 0 4px var(--purple);
    z-index: 3;
}

/* Middle half of the class: wide with a hole means split, narrow means the class agrees. The rgba
   fallbacks matter: without them an older browser drops the band entirely, losing that signal. */
.lr-dot-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(40, 105, 131, .15);
    background: color-mix(in srgb, var(--teal) 15%, transparent);
    border-left: 2px solid rgba(40, 105, 131, .4);
    border-left: 2px solid color-mix(in srgb, var(--teal) 40%, transparent);
    border-right: 2px solid rgba(40, 105, 131, .4);
    border-right: 2px solid color-mix(in srgb, var(--teal) 40%, transparent);
    z-index: 0;
}

.lr-dot-median {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--teal);
    transform: translateX(-50%);
    z-index: 1;
}

/* Axis break. Past this line the scale stops being linear, so an absurd answer can be shown
   without squashing the rest of the class into one column. */
.lr-dot-break {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--dark);
    opacity: .4;
    transform: translateX(-50%);
    z-index: 1;
}

/* Matches .lr-panel, so a tall stack cannot show through the label it sits over. */
.lr-dot-flag {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: 0 .2rem;
    background: var(--beige);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    z-index: 4;
}

.lr-dot-axis { position: relative; height: 1.4rem; font-size: .72rem; font-variant-numeric: tabular-nums; }
/* The :not() guards matter: a flat axis draws one tick that is both first and last, and without
   them the last-child rule wins and shunts the lone label off the column it labels. */
.lr-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lr-tick:first-child:not(:last-child) { transform: translateX(0); }
.lr-tick:last-child:not(:first-child) { transform: translateX(-100%); }

.lr-tick::before {
    content: "";
    position: absolute;
    top: -.35rem;
    left: 50%;
    width: 2px;
    height: .3rem;
    background: var(--dark);
}

/* The end labels are shifted, so their marks have to move with them or they drift inwards by half
   a label. Only applies when there is a range: a flat axis draws a single centred tick. */
.lr-tick:first-child:not(:last-child)::before { left: 0; }
.lr-tick:last-child:not(:first-child)::before { left: 100%; }

.lr-dot-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .72rem; opacity: .7; align-items: center; }
.lr-key { display: inline-flex; align-items: center; gap: .3rem; }
.lr-key-dot { width: var(--lr-dot); height: var(--lr-dot); border-radius: 50%; background: var(--teal); }
.lr-key-dot.out { background: var(--purple); box-shadow: 0 0 0 2px var(--purple); margin-right: 2px; }
.lr-key-band {
    width: 16px;
    height: 10px;
    background: rgba(40, 105, 131, .15);
    background: color-mix(in srgb, var(--teal) 15%, transparent);
    border-left: 2px solid rgba(40, 105, 131, .4);
    border-left: 2px solid color-mix(in srgb, var(--teal) 40%, transparent);
    border-right: 2px solid rgba(40, 105, 131, .4);
    border-right: 2px solid color-mix(in srgb, var(--teal) 40%, transparent);
}
.lr-key-line { width: 2px; height: 11px; background: var(--teal); }
.lr-key-break { width: 0; height: 11px; border-left: 2px dashed var(--dark); opacity: .5; }

@media (max-width: 620px) {
    .lr-dot { box-shadow: 0 0 0 1px var(--beige); }
    .lr-dot.out { box-shadow: 0 0 0 1px var(--beige), 0 0 0 3px var(--purple); }
    .lr-dot-flag, .lr-tick { font-size: .65rem; }
}

.lr-stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.lr-stat { display: grid; gap: .1rem; padding: .5rem 1rem; border: 2px solid var(--dark); border-radius: var(--border-radius); box-shadow: 3px 3px 0 var(--dark); }
.lr-stat-value { font-family: var(--ekwarg); font-size: 1.4rem; }
.lr-stat-label { font-size: .75rem; text-transform: uppercase; opacity: .6; }

.lr-texts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-height: 16rem; overflow-y: auto; }
.lr-text {
    width: 100%;
    min-width: 0;
    padding: .5rem .75rem;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    text-align: left;
    font: inherit;
    cursor: pointer;
    /* One line, full width, trailing ellipsis; the full answer opens in a modal on click. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .12s ease;
}
.lr-text:hover { background: rgba(40, 105, 131, .1); }
.lr-empty { margin: 0; text-align: center; font-style: italic; opacity: .6; }

/* Live countdown chip on the teacher panel, mirroring the student timer. */
.lr-timer {
    font-family: var(--ekwarg);
    padding: .1rem .8rem;
    border: 2px solid var(--dark);
    border-radius: 999px;
    background: var(--teal);
    color: var(--beige);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lr-timer.warn { background: var(--orange); }
.lr-timer.danger { background: var(--red); }

/* Save a fired question to the toolbox, named inline so live results are never covered by a dialog. */
.lr-save {
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    color: var(--dark);
    font-family: var(--ekwarg);
    padding: .3rem 1rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--dark);
    white-space: nowrap;
}
.lr-save:hover { background: var(--teal); color: var(--beige); transform: translate(-1px, -1px); }

.lr-save-row { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; }
.lr-save-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    color: var(--dark);
    padding: .35rem .7rem;
    font: inherit;
}
.lr-save-confirm, .lr-save-cancel {
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    font-family: var(--ekwarg);
    padding: .3rem 1rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--dark);
    white-space: nowrap;
}
.lr-save-confirm { background: var(--teal); color: var(--beige); }
.lr-save-confirm:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.lr-save-cancel { background: var(--beige); color: var(--dark); }
.lr-save-confirm:hover:not(:disabled), .lr-save-cancel:hover { transform: translate(-1px, -1px); }

/* Dismiss (X) a closed question from the teacher panel. */
.lr-dismiss {
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border: 2px solid var(--dark);
    border-radius: 6px;
    background: var(--beige);
    color: var(--dark);
    cursor: pointer;
    transition: background .12s ease, transform .08s ease;
}
.lr-dismiss:hover { background: var(--red); color: var(--beige); transform: translateY(-1px); }

/* Full free-text answer modal. */
.lr-modal {
    position: fixed; inset: 0;
    background: rgba(57, 53, 82, .35);
    z-index: 10003;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.lr-modal-card {
    width: min(92vw, 40rem);
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
    border: 3px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    box-shadow: 8px 8px 0 var(--dark);
    display: grid;
    gap: 1rem;
}
.lr-modal-head { display: flex; align-items: center; justify-content: space-between; }
.lr-modal-title { margin: 0; font-family: var(--ekwarg); }
.lr-modal-body { white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.5; }

/* Matches the trim global.css gives the other action bar buttons on a phone. Confined to the bar:
   the quiz editor and the item rail put these next to buttons that keep their full padding. */
@media (max-width: 640px) {
    .actionBar .tb-launcher { padding: .25rem .55rem; }
}