/* Question Banks (/teacher/banks/). Builds on ../teacher.css; every value comes from ../../tokens.css.
   No text below 16px (--tlg-text-md): Chromebook-first. */
main:has(#view-bank:not([hidden])) { max-width: 1400px; }
.qb-crumbs { margin-bottom: var(--tlg-space-3); color: var(--tlg-text-muted); font-size: var(--tlg-text-md); }
.qb-crumbs a { color: var(--tlg-link); }
.qb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); }
.qb-row input[type="text"], .qb-row input[type="search"] { flex: 1 1 14rem; width: auto; margin-top: 0; }
.qb-normal { font-weight: var(--tlg-weight-regular); }
.qb-note { margin-top: var(--tlg-space-1); color: var(--tlg-text-muted); font-size: var(--tlg-text-md); }
.qb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); margin-top: var(--tlg-space-1); color: var(--tlg-text-muted); font-size: var(--tlg-text-md); }
.qb-field-error { margin-top: var(--tlg-space-2); color: var(--tlg-danger-fg); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); }
label, legend { font-size: var(--tlg-text-md); }
.check { font-size: var(--tlg-text-md); min-height: var(--tlg-tap); }
input[type="search"], select { width: 100%; min-height: var(--tlg-tap); margin-top: var(--tlg-space-1); padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }
select:disabled { opacity: .6; }
textarea { min-height: 0; }
fieldset { margin-top: var(--tlg-space-3); padding: 0; border: 0; }
legend { margin-bottom: var(--tlg-space-1); font-weight: var(--tlg-weight-bold); }

/* badges and chips */
.qb-badge, .qb-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-pill); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); line-height: 1.2; }
.qb-badge { color: var(--tlg-text); background: var(--tlg-surface-3); }
.qb-badge--shared, .qb-badge--official { color: var(--tlg-on-solid); background: var(--tlg-primary); }
.qb-badge--retired { color: var(--tlg-status-missing-fg); background: var(--tlg-surface-2); border: var(--tlg-border-width) solid currentColor; }
.qb-badge--added { color: var(--tlg-status-done-fg); background: var(--tlg-surface-2); border: var(--tlg-border-width) solid currentColor; }
.qb-chip { color: var(--tlg-text); background: var(--tlg-chip-bg); font-weight: var(--tlg-weight-regular); }
.qb-badge--practice { color: var(--tlg-status-done-fg); background: var(--tlg-surface-2); border: var(--tlg-border-width) solid currentColor; }

/* my banks */
.qb-create { padding: var(--tlg-space-6); }
.qb-banks { display: grid; gap: var(--tlg-space-3); list-style: none; }
.qb-bank { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tlg-space-4); padding: var(--tlg-space-5) var(--tlg-space-6); }
.qb-bank h2 a { color: var(--tlg-text); text-decoration: none; }
.qb-bank h2 a:hover { text-decoration: underline; }
.qb-bank-main { min-width: 0; flex: 1 1 18rem; }

/* one bank */
.qb-bank-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tlg-space-4); margin-bottom: var(--tlg-space-5); }
.qb-bank-head h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.qb-head-actions { display: flex; gap: var(--tlg-space-2); }
.qb-practice { margin-bottom: var(--tlg-space-5); padding: var(--tlg-space-4) var(--tlg-space-5); }
.qb-practice .check { display: flex; align-items: center; gap: var(--tlg-space-2); color: var(--tlg-text); font-weight: var(--tlg-weight-bold); }
.qb-dialog .check { display: flex; align-items: center; gap: var(--tlg-space-2); }
.qb-dialog p.qb-check-help { margin-top: calc(-1 * var(--tlg-space-2)); color: var(--tlg-text-muted); padding-left: calc(var(--tlg-space-2) + 18px); }
.qb-practice input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
.qb-practice legend { float: left; width: 100%; padding: 0; margin-bottom: var(--tlg-space-2); font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); }
.qb-practice legend + * { clear: left; }
.qb-class-list { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2) var(--tlg-space-5); margin-top: var(--tlg-space-3); }
.qb-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tlg-space-5); align-items: start; }
@media (min-width: 1100px) { .qb-editor { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.qb-items, .qb-side { padding: var(--tlg-space-5); }
.qb-item-list, .qb-results { display: grid; gap: var(--tlg-space-2); margin-top: var(--tlg-space-3); padding-left: 0; list-style: none; counter-reset: qb; }
.qb-item, .qb-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tlg-space-3); padding: var(--tlg-space-3) var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); }
.qb-item { counter-increment: qb; }
.qb-item .qb-item-prompt::before { content: counter(qb) ". "; color: var(--tlg-text-muted); }
.qb-item.is-retired { background: var(--tlg-surface-2); }
.qb-item.is-retired .qb-item-prompt { color: var(--tlg-text-muted); text-decoration: line-through; }
.qb-item.is-editing { border-color: var(--tlg-primary); box-shadow: 0 0 0 2px var(--tlg-primary-tint); }
.qb-item-text { min-width: 0; }
.qb-item-prompt { color: var(--tlg-text); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); overflow-wrap: anywhere; max-width: none; }
.qb-item-answer { margin-top: var(--tlg-space-1); color: var(--tlg-text); font-size: var(--tlg-text-md); overflow-wrap: anywhere; max-width: none; }
.qb-item-actions { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: var(--tlg-space-1); max-width: 17rem; }
.qb-icon { min-width: var(--tlg-tap); padding: 0 var(--tlg-space-2); font-size: var(--tlg-text-lg); }
@media (max-width: 640px) { .qb-item, .qb-result { grid-template-columns: minmax(0, 1fr); } .qb-item-actions { justify-content: flex-start; max-width: none; } }

/* tabs */
.qb-tabs { display: flex; gap: var(--tlg-space-1); margin-bottom: var(--tlg-space-4); border-bottom: var(--tlg-border-width-strong) solid var(--tlg-border); }
.qb-tabs button { min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: 0; border-bottom: 4px solid transparent; color: var(--tlg-text-muted); background: none; font: inherit; font-weight: var(--tlg-weight-bold); cursor: pointer; }
.qb-tabs button[aria-selected="true"] { color: var(--tlg-text); border-bottom-color: var(--tlg-primary); }
.qb-form-title { margin-bottom: var(--tlg-space-2); }
.qb-types { display: flex; flex-wrap: wrap; gap: var(--tlg-space-1) var(--tlg-space-4); margin-top: 0; margin-bottom: var(--tlg-space-3); }
.qb-types legend { width: 100%; }
.qb-tf { display: flex; gap: var(--tlg-space-5); }
.qb-tf legend { width: 100%; }
.qb-options ol { display: grid; gap: var(--tlg-space-2); margin-bottom: var(--tlg-space-2); padding-left: 0; list-style: none; }
.qb-option { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); }
.qb-option input[type="radio"] { width: 22px; height: 22px; }
.qb-option input[type="text"] { margin-top: 0; }
.qb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--tlg-space-3); margin-top: var(--tlg-space-2); }

/* game-style preview: the review games' dark navy question panel, the same in both themes */
.qb-preview { margin-top: var(--tlg-space-2); }
.qb-pv-card { padding: var(--tlg-space-5); border-radius: var(--tlg-radius-lg); color: var(--tlg-band-text); background: var(--tlg-band-bg); }
.qb-pv-tag { margin-bottom: var(--tlg-space-2); color: var(--tlg-band-accent); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); max-width: none; }
.qb-pv-prompt { color: var(--tlg-band-text); font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); overflow-wrap: anywhere; max-width: none; }
.qb-pv-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--tlg-space-2); margin-top: var(--tlg-space-4); }
.qb-pv-choice { display: flex; align-items: center; min-height: var(--tlg-tap); padding: var(--tlg-space-2) var(--tlg-space-3); border: 2px solid var(--tlg-band-muted); border-radius: var(--tlg-radius-sm); color: var(--tlg-band-text); font-size: var(--tlg-text-md); overflow-wrap: anywhere; }
.qb-pv-choice.is-right { border-color: var(--tlg-band-accent); box-shadow: inset 6px 0 0 var(--tlg-band-accent); }
.qb-pv-fill { display: flex; gap: var(--tlg-space-2); margin-top: var(--tlg-space-4); }
.qb-pv-input { flex: 1; display: flex; align-items: center; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-3); border-radius: var(--tlg-radius-sm); color: var(--tlg-band-muted); background: rgba(255, 255, 255, .08); font-size: var(--tlg-text-md); }

/* search */
.qb-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tlg-space-2); margin-top: var(--tlg-space-4); }
.qb-results-bar p { color: var(--tlg-text); font-size: var(--tlg-text-md); }
.qb-result { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.qb-result-pick input { width: 22px; height: 22px; margin-top: var(--tlg-space-1); }
.qb-result.is-added { background: var(--tlg-surface-2); }
.qb-result-options { margin: var(--tlg-space-1) 0 0 var(--tlg-space-5); color: var(--tlg-text); font-size: var(--tlg-text-md); }
.qb-result-options li.is-right { font-weight: var(--tlg-weight-bold); }
.qb-result-options li.is-right::after { content: " ✓"; color: var(--tlg-status-done-fg); }
@media (max-width: 640px) { .qb-result { grid-template-columns: auto minmax(0, 1fr); } .qb-result > :last-child { grid-column: 2; } }

/* dialogs */
.qb-dialog { max-width: min(34rem, calc(100vw - 2 * var(--tlg-space-4))); margin: auto; padding: var(--tlg-space-6); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); color: var(--tlg-text); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-2); }
.qb-dialog::backdrop { background: var(--tlg-scrim); }
.qb-dialog p { margin-top: var(--tlg-space-2); color: var(--tlg-text); }

/* share-link dialog (QB v2) */
.qb-share input[type="email"] { flex: 1 1 14rem; width: auto; padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }
.qb-share #share-url { font-size: var(--tlg-text-md); }
.qb-share label { font-size: var(--tlg-text-md); }

/* question pictures (QB v2 Phase 4) */
.qb-image-field { margin-top: var(--tlg-space-3); }
.qb-image-picked { display: flex; gap: var(--tlg-space-3); align-items: center; margin-bottom: var(--tlg-space-2); padding: var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); }
.qb-image-picked img { width: 120px; height: 90px; object-fit: contain; background: #fff; border-radius: var(--tlg-radius-sm); flex: none; }
.qb-image-info { min-width: 0; overflow-wrap: anywhere; }
.qb-opt-thumb { width: 64px; height: 48px; object-fit: contain; background: #fff; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); flex: none; }
.qb-option .qb-opt-text { flex: 1 1 10rem; min-width: 0; }
.qb-item.has-thumb { grid-template-columns: auto minmax(0, 1fr) auto; }
.qb-item-thumb { width: 72px; height: 54px; object-fit: contain; background: #fff; border-radius: var(--tlg-radius-sm); align-self: start; }
.qb-pv-figure { margin: 0 0 var(--tlg-space-2); text-align: center; }
.qb-pv-figure img { max-width: 100%; max-height: 200px; object-fit: contain; background: #fff; border-radius: var(--tlg-radius-sm); }
.qb-pv-figure figcaption { font-size: var(--tlg-text-md); color: var(--tlg-text-muted); }
.qb-pv-choices.has-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-pv-choice img { display: block; max-width: 100%; max-height: 90px; margin: 0 auto 4px; object-fit: contain; background: #fff; border-radius: 4px; }
/* the picker */
.qb-picker { width: min(60rem, calc(100vw - 2 * var(--tlg-space-4))); max-width: none; }
.qb-picker-head { display: flex; justify-content: space-between; align-items: center; gap: var(--tlg-space-3); margin-bottom: var(--tlg-space-3); }
.qb-picker-filters > div { flex: 1 1 14rem; min-width: 0; }
.qb-picker-filters input, .qb-picker-filters select { width: 100%; }
.qb-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--tlg-space-2); margin-top: var(--tlg-space-3); padding: 0; list-style: none; }
.qb-pick { display: grid; gap: 4px; width: 100%; height: 100%; padding: var(--tlg-space-2); border: var(--tlg-border-width-strong) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: var(--tlg-text-md); text-align: left; cursor: pointer; }
.qb-pick:hover, .qb-pick:focus-visible { border-color: var(--tlg-primary); }
.qb-pick img { width: 100%; height: 110px; object-fit: contain; background: #fff; border-radius: 4px; }
.qb-pick-title { overflow-wrap: anywhere; }
.qb-pick-credit { color: var(--tlg-text-muted); }
.qb-picker input[type="file"] { display: block; margin-top: var(--tlg-space-1); font: inherit; font-size: var(--tlg-text-md); }
.qb-upload-preview img { max-width: 240px; max-height: 160px; margin-top: var(--tlg-space-2); object-fit: contain; background: #fff; border-radius: var(--tlg-radius-sm); }
.qb-picker label { font-size: var(--tlg-text-md); }
.qb-picker input[type="search"] { padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }

/* CSV import (QB v2 Phase 5) */
.qb-steps { margin: var(--tlg-space-2) 0 0; padding-left: var(--tlg-space-5); display: grid; gap: var(--tlg-space-2); }
.qb-linkbtn { padding: 0; border: 0; color: var(--tlg-link, var(--tlg-primary)); background: none; font: inherit; text-decoration: underline; cursor: pointer; min-height: var(--tlg-tap); }
.qb-imp-help { margin-top: var(--tlg-space-3); }
.qb-imp-help summary { cursor: pointer; font-weight: var(--tlg-weight-bold); min-height: var(--tlg-tap); display: flex; align-items: center; }
.qb-imp-help ul { padding-left: var(--tlg-space-5); display: grid; gap: var(--tlg-space-1); }
#panel-import input[type="file"], .qb-picker input[type="file"] { display: block; max-width: 100%; margin-top: var(--tlg-space-1); font: inherit; font-size: var(--tlg-text-md); }
#panel-import label { font-size: var(--tlg-text-md); }
.qb-imp-pics { margin: var(--tlg-space-3) 0; padding: var(--tlg-space-3) var(--tlg-space-4); }
.qb-imp-rows { display: grid; gap: var(--tlg-space-2); margin-top: var(--tlg-space-3); padding: 0; list-style: none; }
.qb-imp-row { padding: var(--tlg-space-3) var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border); border-left-width: 6px; border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); overflow-wrap: anywhere; }
.qb-imp-row.is-ready { border-left-color: var(--tlg-status-done-fg); }
.qb-imp-row.is-fix { border-left-color: var(--tlg-status-missing-fg); }
.qb-imp-row.is-wait { border-left-color: var(--tlg-primary); }
.qb-imp-row.is-skipped { opacity: .7; }
.qb-imp-head { display: flex; justify-content: space-between; gap: var(--tlg-space-2); align-items: center; }
.qb-imp-line { font-weight: var(--tlg-weight-bold); }
.qb-imp-badge.is-ready { color: var(--tlg-status-done-fg); background: var(--tlg-surface-2); border: var(--tlg-border-width) solid currentColor; }
.qb-imp-badge.is-fix { color: var(--tlg-status-missing-fg); background: var(--tlg-surface-2); border: var(--tlg-border-width) solid currentColor; }
.qb-imp-prompt { margin-top: var(--tlg-space-1); font-weight: var(--tlg-weight-bold); }
.qb-imp-thumb { float: right; width: 96px; height: 72px; margin: 0 0 var(--tlg-space-2) var(--tlg-space-2); object-fit: contain; background: #fff; border-radius: var(--tlg-radius-sm); }
.qb-imp-errors { margin: var(--tlg-space-2) 0; padding-left: var(--tlg-space-5); color: var(--tlg-status-missing-fg); font-size: var(--tlg-text-md); }
p.qb-imp-errors { padding-left: 0; }
.qb-imp-row .qb-row { margin-top: var(--tlg-space-2); clear: both; }
.qb-imp-edit { display: grid; gap: var(--tlg-space-2); }
.qb-imp-field { display: grid; gap: 2px; font-size: var(--tlg-text-md); }
.qb-imp-field input, .qb-imp-field textarea { margin-top: 0; }
.qb-imp-field input[type="text"] { width: 100%; padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }