/* ============================================================
   Quizdemics UI — Design Tokens & Component Foundation
   Theme: Aubergine Copper (quizdemics)

   Load order: after Bootstrap.
   Scope: .qd-theme.qd-theme--quizdemics
   Safe future presets: .qd-theme--embedded-lti, .qd-theme--mytest
   ============================================================ */

/* ============================================================
   1. THEME VARIABLES
   ============================================================ */

.qd-theme.qd-theme--quizdemics {
  /* Brand */
  --qd-primary:        #5B3B67;
  --qd-primary-hover:  #472D52;
  --qd-primary-soft:   #F0EAF3;

  --qd-accent:         #B56B2F;
  --qd-accent-hover:   #95511A;
  --qd-accent-pressed: #7B3E0F;
  --qd-accent-soft:    #FAF0E6;

  /* Workspace / Surfaces */
  --qd-bg:             #F7F6F8;
  --qd-surface:        #FFFFFF;
  --qd-surface-alt:    #F2EFF4;
  --qd-border:         #DFD7E4;
  --qd-border-strong:  #B8ADBF;
  --qd-control-border: #A99CB1;

  /* Typography */
  --qd-text:           #231C28;
  --qd-muted:          #6F6777;
  --qd-heading:        #1A141E;
  --qd-text-inverse:   #FFFFFF;

  /* Semantic — Success */
  --qd-success:        #2E7D5A;
  --qd-success-soft:   #EAF6EF;

  /* Semantic — Warning */
  --qd-warning:        #B7791F;
  --qd-warning-hover:  #8F5E14;
  --qd-warning-soft:   #FBF2E3;

  /* Semantic — Danger */
  --qd-danger:         #B94A48;
  --qd-danger-hover:   #963B39;
  --qd-danger-soft:    #F8EAEA;

  /* Semantic — Info */
  --qd-info:           #4F6BD7;
  --qd-info-hover:     #3D57BC;
  --qd-info-soft:      #EEF2FF;

  /* Semantic — Locked */
  --qd-locked:         #5E5770;
  --qd-locked-soft:    #F0EEF4;

  /* Status badge tokens */
  --qd-status-draft-bg:               #EEEAEF;
  --qd-status-draft-text:             #3D3547;
  --qd-status-draft-border:           #D6D0DC;

  --qd-status-active-bg:              #DFF0FF;
  --qd-status-active-text:            #0D3D6E;
  --qd-status-active-border:          #9ECBF0;

  --qd-status-scheduled-bg:           var(--qd-info-soft);
  --qd-status-scheduled-text:         #243A7A;
  --qd-status-scheduled-border:       #C5CFEE;

  --qd-status-in-progress-bg:         #E8F0FE;
  --qd-status-in-progress-text:       #1A3270;
  --qd-status-in-progress-border:     #B8C9F0;

  --qd-status-submitted-bg:           var(--qd-locked-soft);
  --qd-status-submitted-text:         var(--qd-locked);
  --qd-status-submitted-border:       #D5D0DE;

  --qd-status-expired-bg:             #ECEBED;
  --qd-status-expired-text:           #5A5265;
  --qd-status-expired-border:         #D0CBD6;

  /* Closed — cool slate-blue: ended on schedule */
  --qd-status-closed-bg:              #E7E9F0;
  --qd-status-closed-text:            #3E4A63;
  --qd-status-closed-border:          #CBD2E0;

  /* Archived — warm dim taupe: filed away / out of active use */
  --qd-status-archived-bg:            #EBE6E1;
  --qd-status-archived-text:          #5C5147;
  --qd-status-archived-border:        #D8CFC6;

  --qd-status-pending-grading-bg:     var(--qd-warning-soft);
  --qd-status-pending-grading-text:   #4D3512;
  --qd-status-pending-grading-border: #E8D4B0;

  --qd-status-graded-bg:              var(--qd-success-soft);
  --qd-status-graded-text:            #1A3D2B;
  --qd-status-graded-border:          #B2DAC5;

  --qd-status-hidden-bg:              var(--qd-locked-soft);
  --qd-status-hidden-text:            var(--qd-locked);
  --qd-status-hidden-border:          #C4BDD0;

  /* Guidance panel text tokens */
  --qd-guidance-info-text:            #1C2E6B;
  --qd-guidance-warning-text:         #4D3512;
  --qd-guidance-danger-text:          #5A1F1E;
  --qd-guidance-success-text:         #1A3D2B;
  --qd-guidance-locked-text:          var(--qd-locked);

  /* Focus / Shape / Elevation */
  --qd-focus-ring:     rgba(91, 59, 103, 0.28);

  --qd-radius-sm:      4px;
  --qd-radius-md:      8px;
  --qd-radius-lg:      12px;

  --qd-shadow-sm:      0 1px 2px rgba(15, 23, 42, .04);
  --qd-shadow-md:      0 2px 8px rgba(15, 23, 42, .06);
  --qd-shadow-lg:      0 8px 24px rgba(15, 23, 42, .08);

  /* Base resets for scoped content */
  color:               var(--qd-text);
  background-color:    var(--qd-bg);
  font-size:           0.9375rem;
  line-height:         1.6;
}

/* ============================================================
   2. BASE SHELL / PAGE LAYOUT
   ============================================================ */

.qd-theme .qd-page-shell {
  min-height: 100vh;
  background-color: var(--qd-bg);
  padding: 2rem 0;
}

.qd-theme .qd-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--qd-border);
}

.qd-theme .qd-page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--qd-heading);
  margin: 0;
  line-height: 1.25;
}

.qd-theme .qd-page-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qd-muted);
  margin-bottom: 0.2rem;
}

.qd-theme .qd-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ============================================================
   3. BUTTONS
   ============================================================
   Contrast rules:
   - Primary (#5B3B67) → white text  ✓ (4.93:1)
   - Primary hover (#472D52) → white text  ✓
   - Accent solid: use --qd-accent-hover (#95511A) → white text  ✓
   - Do NOT use --qd-accent (#B56B2F) with white text
   - Warning solid: use --qd-warning-hover (#8F5E14) → white text  ✓
   - Danger solid: use --qd-danger (#B94A48) → white text  ✓
   ============================================================ */

.qd-theme .qd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--qd-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.qd-theme .qd-btn:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: 2px;
}

.qd-theme .qd-btn:disabled,
.qd-theme .qd-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.qd-theme .qd-btn-primary {
  background-color: var(--qd-primary);
  color: var(--qd-text-inverse);
  border-color: var(--qd-primary);
}
.qd-theme .qd-btn-primary:hover,
.qd-theme .qd-btn-primary:focus {
  background-color: var(--qd-primary-hover);
  border-color: var(--qd-primary-hover);
  color: var(--qd-text-inverse);
}

/* Secondary (outlined) */
.qd-theme .qd-btn-secondary {
  background-color: transparent;
  color: var(--qd-primary);
  border-color: var(--qd-control-border);
}
.qd-theme .qd-btn-secondary:hover,
.qd-theme .qd-btn-secondary:focus {
  background-color: var(--qd-primary-soft);
  border-color: var(--qd-primary);
  color: var(--qd-primary-hover);
}

/* Accent solid — uses accent-hover for contrast with white */
.qd-theme .qd-btn-accent {
  background-color: var(--qd-accent-hover);
  color: var(--qd-text-inverse);
  border-color: var(--qd-accent-hover);
}
.qd-theme .qd-btn-accent:hover,
.qd-theme .qd-btn-accent:focus {
  background-color: var(--qd-accent-pressed);
  border-color: var(--qd-accent-pressed);
  color: var(--qd-text-inverse);
}

/* Ghost — text-only, no visible border; subtle hover tint */
.qd-theme .qd-btn-ghost {
  background-color: transparent;
  color: var(--qd-primary);
  border-color: transparent;
}
.qd-theme .qd-btn-ghost:hover,
.qd-theme .qd-btn-ghost:focus {
  background-color: var(--qd-primary-soft);
  border-color: transparent;
  color: var(--qd-primary-hover);
}

/* Danger */
.qd-theme .qd-btn-danger {
  background-color: var(--qd-danger);
  color: var(--qd-text-inverse);
  border-color: var(--qd-danger);
}
.qd-theme .qd-btn-danger:hover,
.qd-theme .qd-btn-danger:focus {
  background-color: var(--qd-danger-hover);
  border-color: var(--qd-danger-hover);
  color: var(--qd-text-inverse);
}

/* Inline text-link action — used for small "create the missing prerequisite"
   prompts inside form help text (e.g. "Can't find it? + Create Question Bank") */
.qd-theme .qd-inline-action {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--qd-primary);
  text-decoration: underline;
  cursor: pointer;
}
.qd-theme .qd-inline-action:hover,
.qd-theme .qd-inline-action:focus {
  color: var(--qd-primary-hover);
}

/* ============================================================
   4. FORM CONTROLS
   ============================================================ */

.qd-theme .qd-form-control {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--qd-text);
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-control-border);
  border-radius: var(--qd-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

.qd-theme .qd-form-control:focus {
  outline: none;
  border-color: var(--qd-primary);
  box-shadow: 0 0 0 3px var(--qd-focus-ring);
}

.qd-theme .qd-form-control::placeholder {
  color: var(--qd-muted);
  opacity: 0.75;
}

.qd-theme label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--qd-text);
  margin-bottom: 0.3rem;
  display: block;
}

/* ============================================================
   5. CARDS / PANELS
   ============================================================ */

.qd-theme .qd-card {
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  box-shadow: var(--qd-shadow-sm);
  overflow: hidden;
}

.qd-theme .qd-card-header {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--qd-border);
  background-color: var(--qd-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.qd-theme .qd-card-header .qd-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--qd-heading);
  margin: 0;
}

.qd-theme .qd-card-body {
  padding: 1.125rem;
}

/* Action card — interactive card with hover */
.qd-theme .qd-action-card {
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  padding: 1rem 1.125rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--qd-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.qd-theme .qd-action-card:hover {
  border-color: var(--qd-border-strong);
  box-shadow: var(--qd-shadow-md);
  color: var(--qd-text);
  text-decoration: none;
}

.qd-theme .qd-action-card .qd-action-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--qd-heading);
  margin: 0 0 0.25rem;
}

.qd-theme .qd-action-card .qd-action-card-meta {
  font-size: 0.8125rem;
  color: var(--qd-muted);
  margin: 0;
}

/* ============================================================
   6. BADGES / STATUS LABELS
   ============================================================
   Accessibility: every badge has a visible text label.
   Color is supplementary, not the sole indicator.
   Recommended icon/symbol usage noted per variant.
   ============================================================ */

.qd-theme .qd-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.55em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--qd-radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

/* Draft — neutral grey */
.qd-theme .qd-status-badge--draft {
  background-color: var(--qd-status-draft-bg);
  color: var(--qd-status-draft-text);
  border-color: var(--qd-status-draft-border);
}

/* Active — aubergine primary */
.qd-theme .qd-status-badge--active {
  background-color: var(--qd-status-active-bg);
  color: var(--qd-status-active-text);
  border-color: var(--qd-status-active-border);
}

/* Scheduled — info soft */
.qd-theme .qd-status-badge--scheduled {
  background-color: var(--qd-status-scheduled-bg);
  color: var(--qd-status-scheduled-text);
  border-color: var(--qd-status-scheduled-border);
}

/* In Progress — info/accent */
.qd-theme .qd-status-badge--in-progress {
  background-color: var(--qd-status-in-progress-bg);
  color: var(--qd-status-in-progress-text);
  border-color: var(--qd-status-in-progress-border);
}

/* Submitted — locked soft */
.qd-theme .qd-status-badge--submitted {
  background-color: var(--qd-status-submitted-bg);
  color: var(--qd-status-submitted-text);
  border-color: var(--qd-status-submitted-border);
}

/* Expired — muted slate */
.qd-theme .qd-status-badge--expired {
  background-color: var(--qd-status-expired-bg);
  color: var(--qd-status-expired-text);
  border-color: var(--qd-status-expired-border);
}

/* Pending Grading — warning soft */
.qd-theme .qd-status-badge--pending-grading {
  background-color: var(--qd-status-pending-grading-bg);
  color: var(--qd-status-pending-grading-text);
  border-color: var(--qd-status-pending-grading-border);
}

/* Graded — success soft */
.qd-theme .qd-status-badge--graded {
  background-color: var(--qd-status-graded-bg);
  color: var(--qd-status-graded-text);
  border-color: var(--qd-status-graded-border);
}

/* Results Hidden — locked soft + lock symbol */
.qd-theme .qd-status-badge--hidden {
  background-color: var(--qd-status-hidden-bg);
  color: var(--qd-status-hidden-text);
  border-color: var(--qd-status-hidden-border);
}

/* Published — success green (test lifecycle: live/available).
   Distinct from the aubergine "active" schedule state and the muted
   "draft" state so lifecycle is readable at a glance. */
.qd-theme .qd-status-badge--published {
  background-color: var(--qd-status-graded-bg);
  color: var(--qd-status-graded-text);
  border-color: var(--qd-status-graded-border);
}

/* Closed — cool slate-blue: a schedule that has ended */
.qd-theme .qd-status-badge--closed {
  background-color: var(--qd-status-closed-bg);
  color: var(--qd-status-closed-text);
  border-color: var(--qd-status-closed-border);
}

/* Archived — warm dim taupe: filed away / out of active use */
.qd-theme .qd-status-badge--archived {
  background-color: var(--qd-status-archived-bg);
  color: var(--qd-status-archived-text);
  border-color: var(--qd-status-archived-border);
}

/* Cancelled — muted neutral (similar to expired; a deliberate end state) */
.qd-theme .qd-status-badge--cancelled {
  background-color: var(--qd-status-expired-bg);
  color: var(--qd-status-expired-text);
  border-color: var(--qd-status-expired-border);
}

/* Pending Review — amber/warning: awaiting teacher action */
.qd-theme .qd-status-badge--pending-review {
  background-color: var(--qd-status-pending-grading-bg);
  color: var(--qd-status-pending-grading-text);
  border-color: var(--qd-status-pending-grading-border);
}

/* Compact modifier for dense tables (e.g. gradebook matrix cells) */
.qd-theme .qd-status-badge--sm {
  padding: 0.1em 0.4em;
  font-size: 0.65rem;
}

/* ============================================================
   7. GUIDANCE PANELS
   ============================================================ */

.qd-theme .qd-guidance-panel {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--qd-radius-md);
  border-left: 3px solid transparent;
  font-size: 0.875rem;
  line-height: 1.55;
}

.qd-theme .qd-guidance-panel .qd-guidance-icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 0.05rem;
}

.qd-theme .qd-guidance-panel .qd-guidance-body {
  flex: 1;
  min-width: 0;
}

.qd-theme .qd-guidance-panel .qd-guidance-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.qd-theme .qd-guidance-panel--info {
  background-color: var(--qd-info-soft);
  border-left-color: var(--qd-info);
  color: var(--qd-guidance-info-text);
}

.qd-theme .qd-guidance-panel--warning {
  background-color: var(--qd-warning-soft);
  border-left-color: var(--qd-warning);
  color: var(--qd-guidance-warning-text);
}

.qd-theme .qd-guidance-panel--danger {
  background-color: var(--qd-danger-soft);
  border-left-color: var(--qd-danger);
  color: var(--qd-guidance-danger-text);
}

.qd-theme .qd-guidance-panel--success {
  background-color: var(--qd-success-soft);
  border-left-color: var(--qd-success);
  color: var(--qd-guidance-success-text);
}

.qd-theme .qd-guidance-panel--locked {
  background-color: var(--qd-locked-soft);
  border-left-color: var(--qd-locked);
  color: var(--qd-guidance-locked-text);
}

/* ============================================================
   8. EMPTY STATE
   ============================================================ */

.qd-theme .qd-empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background-color: var(--qd-surface);
  border: 1px dashed var(--qd-border-strong);
  border-radius: var(--qd-radius-lg);
  color: var(--qd-muted);
}

.qd-theme .qd-empty-state .qd-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.875rem;
  display: block;
  opacity: 0.5;
}

.qd-theme .qd-empty-state .qd-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--qd-heading);
  margin-bottom: 0.4rem;
}

.qd-theme .qd-empty-state .qd-empty-hint {
  font-size: 0.875rem;
  color: var(--qd-muted);
  margin-bottom: 1.25rem;
}

/* ============================================================
   9. COMMAND BAR
   ============================================================ */

.qd-theme .qd-command-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  margin-bottom: 1rem;
}

/* Guidance panel — zero out p margins so component renders cleanly */
.qd-theme .qd-guidance-panel .qd-guidance-body p {
  margin-bottom: 0;
}

/* ============================================================
   10. STORYBOARD HELPERS (token display only — not for prod pages)
   ============================================================ */

.qd-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.qd-token-swatch {
  border-radius: var(--qd-radius-sm, 4px);
  overflow: hidden;
  border: 1px solid var(--qd-border, #DFD7E4);
  background-color: var(--qd-surface, #fff);
  font-size: 0.75rem;
}

.qd-token-swatch .qd-swatch-color {
  height: 52px;
  width: 100%;
  display: block;
}

.qd-token-swatch .qd-swatch-label {
  padding: 0.375rem 0.5rem;
  line-height: 1.3;
}

.qd-token-swatch .qd-swatch-name {
  font-weight: 600;
  color: var(--qd-text, #231C28);
  display: block;
}

.qd-token-swatch .qd-swatch-hex {
  color: var(--qd-muted, #6F6777);
  font-family: monospace;
  font-size: 0.7rem;
}

/* Sub-section label above token grids ("Brand", "Typography", etc.) */
.qd-sb-muted-label {
  font-size: 0.8125rem;
  color: var(--qd-muted, #6F6777);
  margin-bottom: 0.75rem;
}

/* Help/note text below a preview section */
.qd-sb-muted-note {
  font-size: 0.8125rem;
  color: var(--qd-muted, #6F6777);
  margin-top: 0.25rem;
}

/* Card preview grid */
.qd-sb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Form controls preview wrapper */
.qd-sb-form-preview {
  max-width: 480px;
}

.qd-sb-form-preview > div {
  margin-bottom: 1rem;
}

/* Small action button inside the workspace sample table */
.qd-sb-compact-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

/* Vertical stack of guidance panels */
.qd-sb-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Key column cells in the overview meta table */
.qd-sb-table-key {
  width: 160px;
  color: var(--qd-muted, #6F6777);
  font-weight: 600;
}

/* Storyboard section header */
.qd-sb-section {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--qd-border, #DFD7E4);
}

.qd-sb-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qd-muted, #6F6777);
  margin: 0;
}

/* Storyboard row — flex wrap for inline preview items */
.qd-sb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Storyboard preview table */
.qd-sb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.qd-sb-table th {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--qd-muted, #6F6777);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--qd-border, #DFD7E4);
  background-color: var(--qd-surface-alt, #F2EFF4);
}

.qd-sb-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--qd-border, #DFD7E4);
  color: var(--qd-text, #231C28);
  vertical-align: middle;
}

.qd-sb-table tr:last-child td {
  border-bottom: none;
}

/* Concept header: label + recommended chip on same row.
   margin-top separates each concept preview visually. */
.qd-sb-concept-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: 2.25rem;
  margin-bottom: .5rem;
}

.qd-sb-concept-header .qd-preview-label {
  margin-bottom: 0;
}

.qd-sb-recommended-chip {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qd-primary-hover, #472D52);
  background: var(--qd-primary-soft, #F0EAF3);
  border: 1px solid #C9B8D4;
  border-radius: 20px;
  padding: .15em .7em;
  white-space: nowrap;
}

/* Conservative fallback note under Concept A */
.qd-sb-fallback-note {
  font-size: .75rem;
  color: var(--qd-muted, #6F6777);
  margin-bottom: .625rem;
}

/* Filter input/select width helpers — for command bar filter controls */
.qd-sb-filter-input   { max-width: 220px; }
.qd-sb-filter-select  { max-width: 140px; }
.qd-sb-filter-select-sm { max-width: 120px; }

/* Inline count label in command bars */
.qd-sb-count-label {
  font-size: .8125rem;
  color: var(--qd-muted, #6F6777);
}

/* Sub-section headings inside screens ("Recent Activity", "Publish Readiness") */
.qd-sb-subsection-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--qd-heading, #1A141E);
  margin-bottom: .625rem;
}

/* ============================================================
   11. APP SHELL PREVIEW COMPONENTS
   Scoped to .qd-theme. Used in storyboard shell concepts and
   future real-page migration. Not yet applied to base.html.
   ============================================================ */

/* Preview frame — contains a shell/screen mock as a visual unit.
   overflow-x:auto lets the internal shell scroll when the viewport is
   narrower than the mock rather than collapsing it into stacked text.
   max-width caps it so the frame looks like a contained app window
   rather than stretching across the full page on wide screens. */
.qd-theme .qd-preview-frame {
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--qd-shadow-md);
  background: var(--qd-bg);
  max-width: 960px;
  margin: 0 auto;
}

/* Preview viewport — semantic inner wrapper inside .qd-preview-frame.
   Carries the min-width that triggers horizontal scroll so shell layout
   components (qd-app-shell-preview, qd-split-workspace) are not
   responsible for the scroll boundary. */
.qd-theme .qd-preview-viewport {
  min-width: 760px;
}

/* Wide viewport — sidebar/split-workspace shells where combined
   nav-rail + main area needs a broader minimum width. */
.qd-theme .qd-preview-viewport--wide {
  min-width: 960px;
}

/* Compact viewport — embedded/LTI shell previews where a narrower
   minimum is appropriate. */
.qd-theme .qd-preview-viewport--compact {
  min-width: 640px;
}

/* Standalone preview label (Concept A, C, and product screens) gets
   top margin so there is clear visual breathing room before each frame. */
.qd-theme .qd-preview-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qd-muted);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* --- Topbar shell (Concept A) --- */

.qd-theme .qd-app-topbar {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 1.25rem;
  background: var(--qd-surface);
  border-bottom: 1px solid var(--qd-border);
  gap: 0;
  min-width: 520px;  /* prevents topbar from collapsing inside narrow frames */
  flex-wrap: nowrap;
}

.qd-theme .qd-app-topbar-brand {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--qd-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 1.25rem;
}

.qd-theme .qd-app-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
}

.qd-theme .qd-app-nav-item {
  display: inline-flex;
  align-items: center;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--qd-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  height: 100%;
  flex-shrink: 0;  /* never shrink nav items — let the topbar scroll instead */
  transition: color 0.12s ease, border-color 0.12s ease;
}

.qd-theme .qd-app-nav-item:hover {
  color: var(--qd-text);
  text-decoration: none;
}

/* Active nav — aubergine underline + text, not color alone */
.qd-theme .qd-app-nav-item--active {
  color: var(--qd-primary);
  border-bottom-color: var(--qd-primary);
  font-weight: 600;
}

.qd-theme .qd-app-topbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--qd-muted);
  flex-shrink: 0;
}

/* --- Sidebar shell (Concept B) --- */

.qd-theme .qd-app-shell-preview {
  display: flex;
  min-height: 340px;
  min-width: 520px;   /* sidebar(196) + main(280) + border — prevents wrap */
  flex-wrap: nowrap;
}

.qd-theme .qd-app-sidebar {
  width: 196px;
  flex-shrink: 0;
  background: var(--qd-surface);
  border-right: 1px solid var(--qd-border);
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
}

.qd-theme .qd-app-sidebar-brand {
  padding: 0.375rem 1rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--qd-primary);
  letter-spacing: -0.01em;
}

.qd-theme .qd-app-sidebar-section {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qd-muted);
  padding: 0.75rem 1rem 0.25rem;
  opacity: 0.7;
}

.qd-theme .qd-app-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--qd-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.1s, background-color 0.1s;
}

.qd-theme .qd-app-sidebar-item:hover {
  color: var(--qd-text);
  background: var(--qd-surface-alt);
  text-decoration: none;
}

/* Active sidebar item — left rule + soft bg, not color alone */
.qd-theme .qd-app-sidebar-item--active {
  color: var(--qd-primary);
  border-left-color: var(--qd-primary);
  background: var(--qd-primary-soft);
  font-weight: 600;
}

.qd-theme .qd-app-main {
  flex: 1;
  min-width: 280px;  /* must not shrink to 0 — frame scrolls before this collapses */
  padding: 1.25rem 1.5rem;
  background: var(--qd-bg);
  /* overflow:auto removed — scroll container inside a flex item with only
     min-height traps content below the fold; let height grow naturally */
}

/* --- Screen layout (used inside shell mocks and product previews) --- */

.qd-theme .qd-screen-preview {
  padding: 1.125rem 1.375rem;
  background: var(--qd-bg);
  min-width: 400px;  /* topbar-only screens need a usable minimum width */
}

.qd-theme .qd-screen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.qd-theme .qd-screen-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--qd-heading);
  margin: 0;
  line-height: 1.3;
}

.qd-theme .qd-screen-meta {
  font-size: 0.8125rem;
  color: var(--qd-muted);
  margin: 0.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.qd-theme .qd-screen-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Preview-frame typography overrides ---
   Inside a preview frame everything renders as a "miniature" app window.
   Scale headings slightly smaller so the visual hierarchy stays clear
   relative to body text, and prevent the screen header from wrapping
   the action buttons when the frame is at its minimum width.
   These selectors do not affect sections 1–9. */

.qd-theme .qd-preview-frame .qd-screen-title {
  font-size: 1rem;
}

.qd-theme .qd-preview-frame .qd-screen-title--compact {
  font-size: 0.9375rem;
}

.qd-theme .qd-preview-frame .qd-screen-header {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.qd-theme .qd-preview-frame .qd-screen-meta {
  margin-top: 0.125rem;
}

/* --- Workspace list — thin-border rows, no heavy card per item --- */

.qd-theme .qd-workspace-list {
  background: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  overflow: hidden;
}

.qd-theme .qd-workspace-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--qd-border);
  font-size: 0.875rem;
  transition: background 0.1s;
}

.qd-theme .qd-workspace-list-row:last-child {
  border-bottom: none;
}

.qd-theme .qd-workspace-list-row:hover {
  background: var(--qd-surface-alt);
}

.qd-theme .qd-workspace-list-title {
  font-weight: 600;
  color: var(--qd-heading);
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.qd-theme .qd-workspace-list-meta {
  font-size: 0.8rem;
  color: var(--qd-muted);
  margin: 0.1rem 0 0;
}

.qd-theme .qd-workspace-list-end {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* --- Stat strip — horizontal stat cells --- */

.qd-theme .qd-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.qd-theme .qd-stat-cell {
  background: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-sm);
  padding: 0.75rem 1rem;
}

.qd-theme .qd-stat-cell-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--qd-heading);
  line-height: 1.2;
}

.qd-theme .qd-stat-cell-label {
  font-size: 0.75rem;
  color: var(--qd-muted);
  margin-top: 0.15rem;
}

/* --- Compact topbar (LTI / embedded shell) --- */

.qd-theme .qd-app-topbar--compact {
  height: 40px;
  padding: 0 1rem;
  gap: .75rem;
}

.qd-theme .qd-app-topbar-brand--compact {
  font-size: .8125rem;
}

.qd-theme .qd-lti-context {
  font-size: .8125rem;
  color: var(--qd-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qd-theme .qd-topbar-user-compact {
  font-size: .75rem;
  color: var(--qd-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Compact screen title (embedded / detail panel headings) */
.qd-theme .qd-screen-title--compact {
  font-size: 1rem;
}

/* --- Test builder section header row inside workspace list --- */

.qd-theme .qd-workspace-section-row {
  background: var(--qd-surface-alt);
  font-size: .75rem;
  font-weight: 700;
  color: var(--qd-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Indented question row (under a section header) */
.qd-theme .qd-workspace-list-row--indented {
  padding-left: 1.75rem;
}

/* Question sequence number label */
.qd-theme .qd-qnum {
  font-size: .75rem;
  color: var(--qd-muted);
}

/* --- Publish readiness check rows --- */

.qd-theme .qd-readiness-row--success .qd-workspace-list-title {
  color: var(--qd-success);
}

.qd-theme .qd-readiness-row--warning .qd-workspace-list-title {
  color: var(--qd-warning);
}

/* --- Split workspace layout (section outline + work area) --- */

.qd-theme .qd-split-workspace {
  display: flex;
  min-height: 320px;
  min-width: 520px;   /* nav(200) + main(280) + border — prevents wrap */
  flex-wrap: nowrap;
  background: var(--qd-bg);
}

.qd-theme .qd-split-workspace-nav {
  width: 200px;
  flex-shrink: 0;
  background: var(--qd-surface);
  border-right: 1px solid var(--qd-border);
  display: flex;
  flex-direction: column;
}

.qd-theme .qd-split-workspace-main {
  flex: 1;
  min-width: 280px;  /* must not shrink to 0 — frame scrolls before this collapses */
  padding: 1.125rem 1.375rem;
  background: var(--qd-bg);
  /* overflow:auto removed — with min-height:320px on the flex parent the
     split-workspace-main becomes a fixed-height scroll container and the
     question/answer/explanation content scrolls silently below the fold */
}

/* Split nav group label */
.qd-theme .qd-split-nav-group {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qd-muted);
  padding: .625rem 1rem .2rem;
}

/* Split nav item */
.qd-theme .qd-split-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem 1rem;
  font-size: .8125rem;
  color: var(--qd-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .1s, background .1s;
  cursor: pointer;
}

.qd-theme .qd-split-nav-item:hover {
  background: var(--qd-surface-alt);
  color: var(--qd-text);
  text-decoration: none;
}

.qd-theme .qd-split-nav-item--active {
  color: var(--qd-primary);
  border-left-color: var(--qd-primary);
  background: var(--qd-primary-soft);
  font-weight: 600;
}

.qd-theme .qd-split-nav-item-count {
  font-size: .75rem;
  color: var(--qd-muted);
  font-weight: 400;
}

/* Footer of the split nav (summary line) */
.qd-theme .qd-split-nav-footer {
  margin-top: auto;
  padding: .625rem 1rem;
  border-top: 1px solid var(--qd-border);
  font-size: .75rem;
  color: var(--qd-muted);
}

/* --- Question detail panel (used in builder + student review) --- */

.qd-theme .qd-question-detail-panel {
  background: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  overflow: hidden;
}

.qd-theme .qd-question-detail-header {
  padding: .625rem 1rem;
  background: var(--qd-surface-alt);
  border-bottom: 1px solid var(--qd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--qd-muted);
}

.qd-theme .qd-question-detail-body {
  padding: 1rem;
}

/* Answer option (student attempt / review) */
.qd-theme .qd-answer-option {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-sm);
  margin-bottom: .375rem;
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  color: var(--qd-text);
}

/* Answer selected by student */
.qd-theme .qd-answer-option--selected {
  border-color: var(--qd-primary);
  background: var(--qd-primary-soft);
  color: var(--qd-primary-hover);
}

/* Correct answer revealed in review */
.qd-theme .qd-answer-option--correct {
  border-color: var(--qd-success);
  background: var(--qd-success-soft);
  color: var(--qd-guidance-success-text);
}

/* --- Question navigator grid (student attempt sidebar) --- */

.qd-theme .qd-qnav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* explicit row height avoids the aspect-ratio ambiguity in grid contexts;
     32px makes each cell comfortably square given the 200px nav width */
  grid-auto-rows: 32px;
  gap: .25rem;
  padding: .625rem .75rem;
}

.qd-theme .qd-qnav-cell {
  height: 32px;   /* explicit height — drop aspect-ratio which can resolve to 0
                     inside a flex column container */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--qd-radius-sm);
  border: 1px solid var(--qd-border);
  background: var(--qd-surface);
  color: var(--qd-muted);
  cursor: pointer;
}

/* Answered question cell */
.qd-theme .qd-qnav-cell--answered {
  background: var(--qd-primary-soft);
  border-color: var(--qd-status-active-border);
  color: var(--qd-primary-hover);
}

/* Currently viewed question cell */
.qd-theme .qd-qnav-cell--current {
  background: var(--qd-primary);
  border-color: var(--qd-primary);
  color: var(--qd-text-inverse);
}

/* Legend beneath the navigator grid */
.qd-theme .qd-qnav-legend {
  padding: .2rem .75rem .5rem;
  font-size: .6875rem;
  color: var(--qd-muted);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

/* ============================================================
   13. GLOBAL APP SHELL — AUTHENTICATED TOPBAR
   Real-page application of the Aubergine Copper nav direction.
   Replaces Bootstrap's bg-primary/navbar-dark on base.html.
   ============================================================ */

/* Topbar bar — surface-coloured with a subtle bottom border.
   No height declaration: Bootstrap's .navbar flex layout handles
   vertical alignment; padding-top/bottom set to zero so nav-link
   padding controls the bar height naturally. */
.qd-theme .qd-global-topbar {
  background: var(--qd-surface);
  border-bottom: 1px solid var(--qd-border);
  padding-top: 0;
  padding-bottom: 0;
}

/* Brand wordmark — aubergine, no Bootstrap fw-bold override needed */
.qd-theme .qd-global-brand {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--qd-primary);
  letter-spacing: -0.01em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.qd-theme .qd-global-brand:hover,
.qd-theme .qd-global-brand:focus {
  color: var(--qd-primary-hover);
  text-decoration: none;
}

.qd-theme .qd-global-brand:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Nav links — muted resting colour, underline active state.
   Border-bottom on every link keeps the bar height stable when
   active/inactive links appear side by side. */
.qd-theme .qd-global-nav-link {
  color: var(--qd-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.qd-theme .qd-global-nav-link:hover,
.qd-theme .qd-global-nav-link:focus {
  color: var(--qd-text);
  text-decoration: none;
}

.qd-theme .qd-global-nav-link:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Active nav link — aubergine underline + text; not colour alone */
.qd-theme .qd-global-nav-link--active {
  color: var(--qd-primary);
  border-bottom-color: var(--qd-primary);
  font-weight: 600;
}

/* Public Library result identification on the Questions list — copper
   accent so a Public row reads as visually distinct from the aubergine-
   toned local/org rows beside it. Never the only identification signal:
   always paired with the "Public Library" text label (see
   templates/questions/list.html) and an icon, never colour alone. */
.qd-theme .qd-meta-badge--public-library {
  color: var(--qd-accent-pressed);
  border-color: var(--qd-accent-hover);
}

/* Right-side user/action area */
.qd-theme .qd-global-nav-end {
  display: flex;
  align-items: center;
}

/* Logout button — plain text style, no Bootstrap blue btn-link colour */
.qd-theme .qd-global-logout-btn {
  color: var(--qd-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.qd-theme .qd-global-logout-btn:hover,
.qd-theme .qd-global-logout-btn:focus {
  color: var(--qd-text);
  text-decoration: underline;
}

.qd-theme .qd-global-logout-btn:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Nav dropdowns (Content / Questions / Assessments / workspace switcher) —
   themed to match .qd-global-nav-link instead of Bootstrap's default blue
   hover/active state. */
.qd-theme .qd-global-topbar .dropdown-menu {
  border-color: var(--qd-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.qd-theme .qd-global-topbar .dropdown-item:hover,
.qd-theme .qd-global-topbar .dropdown-item:focus {
  background-color: var(--qd-surface-muted, rgba(0, 0, 0, 0.04));
  color: var(--qd-primary);
}

.qd-theme .qd-global-topbar .dropdown-item.active,
.qd-theme .qd-global-topbar .dropdown-item:active {
  background-color: var(--qd-primary);
  color: #fff;
}

.qd-theme .qd-global-topbar .dropdown-header {
  color: var(--qd-muted);
  font-size: 0.75rem;
}

/* ============================================================
   14. DASHBOARD — STAT CARDS, QUICK ACTIONS, PANELS
   ============================================================ */

/* Stat card grid — auto-fits all cards on one row when space
   allows; wraps to 2-up and then 1-up on narrow screens. */
.qd-theme .qd-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

/* Stat card — surface card, centred content */
.qd-theme .qd-stat-card {
  background: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  text-align: center;
  box-shadow: var(--qd-shadow-sm);
  overflow: hidden;
}

/* Card body — padding wrapper; also used as the <a> element
   when stat_url is provided so the whole card is clickable. */
.qd-theme .qd-stat-card-body {
  padding: 1.25rem 1rem;
}

.qd-theme .qd-stat-card a.qd-stat-card-body {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease;
}

.qd-theme .qd-stat-card a.qd-stat-card-body:hover {
  background-color: var(--qd-surface-alt);
}

.qd-theme .qd-stat-card a.qd-stat-card-body:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: -2px;
}

/* Large numeric/text value */
.qd-theme .qd-stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  color: var(--qd-heading);
}

.qd-theme .qd-stat-value--primary { color: var(--qd-primary); }
.qd-theme .qd-stat-value--success { color: var(--qd-success); }
.qd-theme .qd-stat-value--warning { color: var(--qd-accent-hover); }
.qd-theme .qd-stat-value--info    { color: var(--qd-info); }
.qd-theme .qd-stat-value--muted   { color: var(--qd-muted); }

/* Descriptive label below the value */
.qd-theme .qd-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--qd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Panel list — replaces Bootstrap list-group-flush */
.qd-theme .qd-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qd-theme .qd-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid var(--qd-border);
  gap: 0.5rem;
}

.qd-theme .qd-panel-item:last-child {
  border-bottom: none;
}

.qd-theme .qd-panel-item-main {
  flex: 1;
  min-width: 0;
}

.qd-theme .qd-panel-item-main a {
  color: var(--qd-text);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-theme .qd-panel-item-main a:hover {
  color: var(--qd-primary);
  text-decoration: underline;
}

.qd-theme .qd-panel-item-secondary {
  font-size: 0.75rem;
  color: var(--qd-muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty panel state */
.qd-theme .qd-panel-empty {
  font-size: 0.875rem;
  color: var(--qd-muted);
}

/* "View all" link inside panel header */
.qd-theme .qd-panel-view-all {
  font-size: 0.8125rem;
  color: var(--qd-muted);
  text-decoration: none;
  font-weight: 400;
}

.qd-theme .qd-panel-view-all:hover {
  color: var(--qd-primary);
  text-decoration: underline;
}

/* ============================================================
   15. CONTENT MANAGEMENT — ITEM LISTS, FORM CARDS, META BADGES
   ============================================================ */

/* Neutral meta badge — for type labels, difficulty, counts, marks.
   Not a status badge; carries no semantic colour meaning. */
.qd-theme .qd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.175em 0.55em;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--qd-radius-sm);
  background: var(--qd-surface-alt);
  color: var(--qd-muted);
  border: 1px solid var(--qd-border);
  white-space: nowrap;
  line-height: 1.4;
}

/* Badge icon + label layout — shared across status/visibility/difficulty/type badges.
   Icons inherit the badge text colour via currentColor — no separate colour needed. */
.qd-theme .qd-status-badge,
.qd-theme .qd-visibility-badge,
.qd-theme .qd-difficulty-badge,
.qd-theme .qd-type-badge {
  gap: 0.35rem;
}

.qd-theme .qd-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9em;
  height: 0.9em;
  color: currentColor;
  flex-shrink: 0;
  line-height: 1;
}

.qd-theme .qd-badge-icon svg {
  width: 0.9em;
  height: 0.9em;
  display: block;
  fill: currentColor;
}

.qd-theme .qd-badge-label {
  line-height: 1;
}

/* Metadata badge — neutral chip for non-status facts (marks, counts).
   Kept visually quiet so it never competes with lifecycle/visibility
   signalling. Shares the neutral look of .qd-badge by intent. */
.qd-theme .qd-meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.175em 0.55em;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--qd-radius-sm);
  background: var(--qd-surface-alt);
  color: var(--qd-muted);
  border: 1px solid var(--qd-border);
  white-space: nowrap;
  line-height: 1.4;
}

/* Interactive chip — used by JS chip-picker widgets for selected curriculum
   topics and tags. Filled aubergine background so the btn-close-white
   close button is legible. Kept compact so it reads inline with form fields. */
.qd-theme .qd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.55em;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--qd-radius-sm);
  background: var(--qd-primary);
  color: var(--qd-text-inverse);
  border: 1px solid var(--qd-primary-hover);
  white-space: nowrap;
  line-height: 1.4;
}

/* Visibility badge — outline style so audience/scope reads as a
   different category from the filled lifecycle status badges.
   Subtle, never alarming. */
.qd-theme .qd-visibility-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.175em 0.55em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--qd-radius-sm);
  background: var(--qd-surface);
  color: var(--qd-muted);
  border: 1px solid var(--qd-border);
  white-space: nowrap;
  line-height: 1.4;
}

/* Private — neutral/locked: restricted, not an alert */
.qd-theme .qd-visibility-badge--private {
  color: var(--qd-locked);
  border-color: var(--qd-status-hidden-border);
}

/* Organisation only — info-toned outline */
.qd-theme .qd-visibility-badge--org {
  color: var(--qd-info-hover);
  border-color: var(--qd-status-scheduled-border);
}

/* Public — copper accent outline: distinct but calm */
.qd-theme .qd-visibility-badge--public {
  color: var(--qd-accent);
  border-color: #E6CDB3;
}

/* Type / structure chip — labelled classification (question type, Grouped,
   Atomic, node type). Heading-weight text so it reads as a deliberate tag,
   visually separate from neutral metadata and filled status badges. */
.qd-theme .qd-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.175em 0.55em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--qd-radius-sm);
  background: var(--qd-surface-alt);
  color: var(--qd-heading);
  border: 1px solid var(--qd-border);
  white-space: nowrap;
  line-height: 1.4;
}

/* Grouped/Atomic structural variant — faint aubergine tint so a grouped
   question is recognisable at a glance and consistent on every page. */
.qd-theme .qd-type-badge--group {
  background: var(--qd-primary-soft);
  color: var(--qd-primary-hover);
  border-color: #D9CCE0;
}

/* Difficulty chip — tinted by level (easy/medium/hard). Subtle, never loud. */
.qd-theme .qd-difficulty-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.175em 0.55em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--qd-radius-sm);
  background: var(--qd-surface-alt);
  color: var(--qd-muted);
  border: 1px solid var(--qd-border);
  white-space: nowrap;
  line-height: 1.4;
}

.qd-theme .qd-difficulty-badge--easy {
  background: var(--qd-success-soft);
  color: #1A3D2B;
  border-color: #B2DAC5;
}

.qd-theme .qd-difficulty-badge--medium {
  background: var(--qd-warning-soft);
  color: #4D3512;
  border-color: #E8D4B0;
}

.qd-theme .qd-difficulty-badge--hard {
  background: var(--qd-danger-soft);
  color: #7A2D2C;
  border-color: #E4BFBE;
}

/* Clickable item list — replaces Bootstrap list-group in content
   management pages. Whole row is an anchor so keyboard and pointer
   users can navigate without hunting for a small link target. */
.qd-theme .qd-item-list {
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  overflow: hidden;
  background: var(--qd-surface);
}

.qd-theme .qd-item-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--qd-border);
  text-decoration: none;
  color: var(--qd-text);
  gap: 0.75rem;
  transition: background-color 0.1s ease;
}

.qd-theme .qd-item-list-item:last-child {
  border-bottom: none;
}

.qd-theme .qd-item-list-item:hover {
  background-color: var(--qd-surface-alt);
  color: var(--qd-text);
  text-decoration: none;
}

.qd-theme .qd-item-list-item:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: -2px;
}

.qd-theme .qd-item-list-item-main {
  flex: 1;
  min-width: 0;
}

.qd-theme .qd-item-list-item-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Mobile: stack the meta column below the main content. On a narrow screen
   the row's right-aligned, non-shrinking meta badges would otherwise be
   centred against tall, multi-line main content (topic chips, wrapped
   prompts) and visually overlap it. Stacking puts the badges cleanly beneath
   the content instead, left-aligned. */
@media (max-width: 575.98px) {
  .qd-theme .qd-item-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .qd-theme .qd-item-list-item-meta {
    justify-content: flex-start;
  }
}

/* Truncating variant for long free-text badges (e.g. curriculum topic chips):
   shows an ellipsis instead of overflowing its row. Pair with a title=""
   attribute so the full text stays available on hover/focus. */
.qd-theme .qd-meta-badge--truncate {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Form card — wraps create/edit forms with surface, border, and max-width */
.qd-theme .qd-form-card {
  background: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  padding: 1.5rem;
  max-width: 560px;
}

/* Auth card layout — centered narrow form wrapper for login/register/profile */
.qd-theme .qd-auth-card {
  max-width: 480px;
  margin: 2rem auto;
}

.qd-theme .qd-auth-card--sm {
  max-width: 420px;
}

.qd-theme .qd-auth-card--md {
  max-width: 520px;
}

/* Section sub-header row — title + optional action side by side */
.qd-theme .qd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--qd-border);
}

.qd-theme .qd-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--qd-heading);
  margin: 0;
}

/* Content workspace grid — auto-fills section cards */
.qd-theme .qd-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* Recent items section heading */
.qd-theme .qd-recent-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--qd-heading);
  margin-bottom: 0.75rem;
}

/* Filter bar — wraps search/filter controls above a list */
.qd-theme .qd-filter-bar {
  background: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  padding: 1rem 1.125rem;
  margin-bottom: 1rem;
}

/* Dashboard date-range filter — custom start/end date inputs */
.qd-theme .qd-date-range-input {
  width: 160px;
}

/* Generic hidden-by-default toggle target (e.g. the custom date range
   fields), shown via a small inline script when its toggle is clicked. */
.qd-theme .qd-hidden {
  display: none !important;
}

/* Attention Items list — caps height and scrolls once there are enough
   alerts to make the dashboard unwieldy; short lists look unchanged. */
.qd-theme .qd-attention-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* ============================================================
   16. SCHEDULING
   Schedule-specific reusable classes for the extend-attempts
   inline form and any other schedule-only layout elements.
   ============================================================ */

.qd-theme .qd-schedule-extend-minutes {
  width: 160px;
}

.qd-theme .qd-schedule-extend-reason {
  max-width: 260px;
}

/* ============================================================
   17. TEST BUILDER
   Builder-specific overrides. Items support nested child lists,
   drag handles, marks inputs, and action menus alongside the
   standard qd-item-list container.
   ============================================================ */

/* Builder drop-zones must not clip absolutely-positioned action menus.
   Both the section card and its inner list need overflow:visible so the
   panel can escape both clipping ancestors. Normal qd-card/qd-item-list
   usage (outside builder) keeps overflow:hidden for rounded corners. */
.qd-theme .qd-builder-section,
.qd-theme .qd-item-list.question-drop-zone {
  overflow: visible;
}

.qd-theme .qd-builder-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--qd-border);
  color: var(--qd-text);
  background: var(--qd-surface);
  position: relative;
}

.qd-theme .qd-builder-item:last-child {
  border-bottom: none;
}

.qd-theme .qd-builder-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.qd-theme .qd-builder-children {
  width: 100%;
  padding-left: 1.25rem;
  border-left: 2px solid var(--qd-border);
  margin-top: 0.25rem;
}

.qd-theme .qd-builder-child-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--qd-border);
}

.qd-theme .qd-builder-child-row:last-child {
  border-bottom: none;
}

.qd-theme .qd-drag-handle {
  cursor: grab;
}

.qd-theme .qd-builder-shared-text {
  max-width: 260px;
}

.qd-theme .qd-builder-actions-panel {
  min-width: 200px;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 1000;
  background: var(--qd-surface);
  box-shadow: var(--qd-shadow-md);
}

.qd-theme .qd-marks-input {
  width: 5rem;
}

/* ============================================================
   18. STUDENT ATTEMPT
   ============================================================ */

/* Sticky attempt header wrapper — replaces inline position:sticky */
.qd-theme .qd-attempt-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Timer text — tabular numerals, inherits color from Bootstrap alert parent */
.qd-theme .qd-attempt-timer {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Answered progress counter */
.qd-theme .qd-attempt-progress {
  font-size: 0.875rem;
}

/* Correct-answer reveal block (policy-gated; only shown when show_correct_answers) */
.qd-theme .qd-review-correct-answer {
  margin-top: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--qd-radius-sm);
  border: 1px solid var(--qd-success);
  background: var(--qd-success-soft);
}

/* Teacher feedback per-question block */
.qd-theme .qd-review-feedback {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--qd-radius-sm);
  border-left: 3px solid var(--qd-accent);
  background: var(--qd-accent-soft);
}

/* Explanation per-question block */
.qd-theme .qd-review-explanation {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--qd-radius-sm);
  border-left: 3px solid var(--qd-border);
  background: var(--qd-surface-alt);
}

/* Policy note — muted informational panel for hidden results/answers */
.qd-theme .qd-result-policy-note {
  padding: 0.875rem 1rem;
  border-radius: var(--qd-radius-sm);
  border: 1px solid var(--qd-border);
  background: var(--qd-surface-alt);
  color: var(--qd-muted);
  font-size: 0.875rem;
}

/* Shared text block for grouped questions */
.qd-theme .qd-question-shared-text {
  background: var(--qd-surface-alt);
}

/* Shared passage / group context panel — preview and attempt rendering */
.qd-theme .qd-shared-text-panel {
  padding: 1rem;
  background: var(--qd-surface-alt);
  border-radius: var(--qd-radius-sm);
}

/* Submitted free-text answer block — preserves student whitespace/formatting */
.qd-theme .qd-answer-text {
  background: var(--qd-surface-alt);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-sm);
  white-space: pre-wrap;
}

/* ============================================================
   19. COLLAPSIBLE PANELS — GROUP CONTEXT / CHILD QUESTION AUTHORING
   ============================================================ */

.qd-theme .qd-collapsible-panel {
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  box-shadow: var(--qd-shadow-sm);
  overflow: visible;
  margin-bottom: 1rem;
}

.qd-theme .qd-collapsible-panel-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  user-select: none;
  border-radius: var(--qd-radius-md);
  transition: background-color 0.15s ease;
}

.qd-theme .qd-collapsible-panel-header:hover {
  background-color: var(--qd-surface-alt);
}

.qd-theme .qd-collapsible-panel-header:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: -2px;
}

.qd-theme .qd-collapsible-panel[aria-expanded="false"] .qd-collapsible-panel-header {
  border-radius: var(--qd-radius-md);
}

.qd-theme .qd-collapsible-panel[aria-expanded="true"] .qd-collapsible-panel-header {
  border-bottom: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md) var(--qd-radius-md) 0 0;
}

.qd-theme .qd-panel-toggle-icon {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--qd-muted);
  transition: transform 0.15s ease;
  display: inline-block;
}

.qd-theme .qd-collapsible-panel[aria-expanded="false"] .qd-panel-toggle-icon {
  transform: rotate(-90deg);
}

.qd-theme .qd-collapsible-panel-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--qd-heading);
  flex-shrink: 0;
}

.qd-theme .qd-collapsible-panel-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--qd-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qd-theme .qd-collapsible-panel-body {
  padding: 1.125rem;
}

.qd-theme .qd-collapsible-panel[aria-expanded="false"] .qd-collapsible-panel-body {
  display: none;
}

/* Child question panels sit slightly inset on a tinted surface so the
   Group Context panel and each child panel read as distinct cards. */
.qd-theme .child-question-block {
  border-color: var(--qd-border);
}

.qd-theme .child-question-block + .child-question-block {
  margin-top: 1rem;
}

/* Drag handle — sits in the panel header, between the chevron and the title.
   Native HTML5 drag-and-drop is initiated from this handle only; Move
   up/down in the Actions menu remain the primary accessible reorder path. */
.qd-theme .qd-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.25rem;
  color: var(--qd-muted);
  border-radius: var(--qd-radius-sm);
  cursor: grab;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.qd-theme .qd-drag-handle:hover,
.qd-theme .qd-drag-handle:focus-visible {
  color: var(--qd-text);
  background-color: var(--qd-surface-alt);
}

.qd-theme .qd-drag-handle:active,
.qd-theme .child-question-block.is-dragging .qd-drag-handle {
  cursor: grabbing;
}

.qd-theme .qd-drag-handle-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Lifted state for the block currently being dragged. */
.qd-theme .child-question-block.is-dragging {
  opacity: 0.5;
  border: 1px dashed var(--qd-border-strong);
}

/* Drop-position indicator. Simplified to a single top-border cue rather than
   separate before/after variants — sufficient signal for a short vertical
   list of child panels. */
.qd-theme .child-question-block.is-drag-over {
  border-top: 2px solid var(--qd-primary);
}

/* ============================================================
   20. ACTIONS DROPDOWN MENU
   ============================================================ */

.qd-theme .qd-actions-menu {
  position: relative;
  flex-shrink: 0;
}

.qd-theme .qd-actions-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 50;
  min-width: 160px;
  padding: 0.375rem;
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-border);
  border-radius: var(--qd-radius-md);
  box-shadow: var(--qd-shadow-lg);
  display: none;
}

.qd-theme .qd-actions-menu.is-open .qd-actions-menu-dropdown {
  display: block;
}

.qd-theme .qd-actions-menu-item {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--qd-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--qd-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.qd-theme .qd-actions-menu-item:hover:not(:disabled),
.qd-theme .qd-actions-menu-item:focus-visible:not(:disabled) {
  background-color: var(--qd-surface-alt);
}

.qd-theme .qd-actions-menu-item:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: -2px;
}

.qd-theme .qd-actions-menu-item:disabled {
  color: var(--qd-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.qd-theme .qd-actions-menu-item--danger {
  color: var(--qd-danger);
}

.qd-theme .qd-actions-menu-item--danger:hover:not(:disabled),
.qd-theme .qd-actions-menu-item--danger:focus-visible:not(:disabled) {
  background-color: var(--qd-danger-soft);
  color: var(--qd-danger-hover);
}

/* The Actions trigger button itself stays compact so it doesn't compete
   with the panel title/summary for visual weight. */
.qd-theme [data-child-actions-btn] {
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
}

/* ============================================================
   21. HELP TOOLTIPS
   Small circular "?" trigger beside a label/heading. Shown on
   hover/focus (CSS only) and toggled on click/tap (minimal JS) for
   touch devices where hover doesn't apply.
   ============================================================ */

.qd-theme .qd-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.375rem;
}

.qd-theme .qd-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--qd-border);
  background-color: var(--qd-surface-alt);
  color: var(--qd-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qd-theme .qd-help-trigger:hover {
  border-color: var(--qd-primary);
  color: var(--qd-primary);
}

.qd-theme .qd-help-trigger:focus-visible {
  outline: 3px solid var(--qd-focus-ring);
  outline-offset: 2px;
}

.qd-theme .qd-help-tooltip {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: 16rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--qd-radius-sm);
  border: 1px solid var(--qd-border);
  background-color: var(--qd-surface);
  color: var(--qd-text);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: var(--qd-shadow-lg);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

/* Downward variant — for a trigger near the top of a clipping ancestor
   (e.g. a `.qd-card` with `overflow: hidden`), where the default upward
   tooltip would be cut off. Opens below the trigger instead. */
.qd-theme .qd-help-tooltip--below {
  bottom: auto;
  top: calc(100% + 0.375rem);
}

.qd-theme .qd-help-trigger:hover + .qd-help-tooltip,
.qd-theme .qd-help-trigger:focus-visible + .qd-help-tooltip,
.qd-theme .qd-help.is-open .qd-help-tooltip {
  visibility: visible;
  opacity: 1;
}

/* ============================================================
   UTILITY — THEME HELPERS
   Reusable single-purpose classes to avoid inline style="" usage.
   ============================================================ */

.qd-theme .qd-muted-text {
  color: var(--qd-muted);
}

.qd-theme .qd-section-divider {
  border-color: var(--qd-border);
  opacity: 1;
}

/* Inline-width select — sits beside a label without stretching full width */
.qd-theme .qd-inline-select {
  width: auto;
}

/* ============================================================
   12. STORYBOARD-ONLY INLINE HELPERS
   Small utility classes used only inside shell preview mocks to
   replace inline style="" attributes. Not for production pages.
   Uses var() fallbacks because these are unscoped to .qd-theme.
   ============================================================ */

/* Small link inside shell preview topbars (Log out, Exit, etc.) */
.qd-sb-shell-link {
  color: var(--qd-primary, #5B3B67);
  font-size: .8rem;
  text-decoration: none;
}

.qd-sb-shell-link:hover {
  text-decoration: underline;
}

/* Question body text inside detail panels */
.qd-sb-question-text {
  font-size: .875rem;
  font-weight: 600;
  color: var(--qd-heading, #1A141E);
  margin-bottom: .75rem;
}

/* Answer state indicator labels ("✓ Correct", "Your answer") */
.qd-sb-answer-indicator {
  font-size: .8rem;
  font-weight: 600;
}

.qd-sb-answer-indicator--correct {
  color: var(--qd-success, #2E7D5A);
}

.qd-sb-answer-indicator--selected {
  color: var(--qd-primary, #5B3B67);
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Question / choice / group-context images (ClickUp 86exz021j).       */
/* Structured display-size classes replace freeform inline max-width/  */
/* max-height so teachers pick Small/Medium/Large/Full and a future    */
/* import/export manifest can carry `display_size` as a first-class    */
/* field. Applied to prompt & group-context images; choice images stay */
/* a fixed thumbnail (qd-qimg--choice).                                */
.qd-theme .qd-qimg {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.qd-theme .qd-qimg--small {
  max-height: 90px;
  max-width: 160px;
}
.qd-theme .qd-qimg--medium {
  max-height: 220px;
  max-width: 360px;
}
.qd-theme .qd-qimg--large {
  max-height: 400px;
  max-width: 640px;
}
.qd-theme .qd-qimg--full {
  max-height: none;
  max-width: 100%;
  width: 100%;
}
.qd-theme .qd-qimg--choice {
  max-height: 90px;
  max-width: 180px;
}

/* ------------------------------------------------------------------ */
/* Rich content blocks (ClickUp 86eyc6uz5) — text paragraphs + aligned */
/* images composed inline in the authoring editor and rendered here.   */
.qd-theme .qd-rich-content > * + * {
  margin-top: .5rem;
}
.qd-theme .qd-rich-text {
  white-space: normal;
}
.qd-theme .qd-rich-image {
  display: flex;
}
.qd-theme .qd-rich-image--left {
  justify-content: flex-start;
}
.qd-theme .qd-rich-image--center {
  justify-content: center;
}
.qd-theme .qd-rich-image--right {
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Visual rich-content editor surface (ClickUp 86exz021j UX phase).    */
/* One contentEditable writing area; images flow inline. Serialized to */
/* structured JSON — never stores arbitrary HTML.                      */
.qd-theme .qd-rce-surface {
  min-height: 6rem;
  height: auto;
  overflow-y: auto;
  white-space: pre-wrap;
}
.qd-theme .qd-rce-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--qd-muted, #6c757d);
  pointer-events: none;
}

/* Compact variant (MCQ choice rows): the whole editor sits on ONE line — the
   surface grows in the middle while the Insert-image button + paste help sit to
   its right; it starts at ~one line and grows with content instead of reserving
   a tall mini-editor. The prompt/group-context editors keep the default sizing. */
.qd-theme .qd-rce--compact {
  flex: 1 1 auto;
  min-width: 0;
}
.qd-theme .qd-rce--compact .qd-rce-ui {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.qd-theme .qd-rce--compact .qd-rce-surface {
  order: 1;
  /* flex-basis 0 (+ width:auto) overrides .form-control's width:100%, which
     would otherwise consume the whole line and wrap the toolbar below. */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 2.1rem;
  height: auto;
  overflow: visible;
  padding: .3rem .55rem;
}
.qd-theme .qd-rce--compact .qd-rce-surface p {
  margin: 0 0 .25rem;
}
.qd-theme .qd-rce--compact .qd-rce-toolbar {
  order: 2;
  margin: 0;
  flex-shrink: 0;
}
.qd-theme .qd-rce--compact .qd-rce-error {
  order: 3;
  flex-basis: 100%;
}
.qd-theme .qd-rce--compact .qd-rce-add-image {
  padding: .2rem .5rem;
}
.qd-theme .qd-rce-figure {
  display: inline-block;
  margin: .25rem 0;
  max-width: 100%;
  border: 1px dashed transparent;
  vertical-align: top;
}
.qd-theme .qd-rce-figure:focus-within,
.qd-theme .qd-rce-figure:hover {
  border-color: var(--qd-primary, #5B3B67);
}
.qd-theme .qd-rce-figure img {
  display: block;
  max-width: 100%;
  height: auto;
}
.qd-theme .qd-rce-figure-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
}

/* Upload-in-progress state for the "+ Image" button (rich_content_editor.js
   setUploading): the button is disabled and shows a tiny spinner + "Uploading…"
   while an image uploads, then restores to "+ Image". */
.qd-theme .qd-rce-add-image.is-uploading {
  cursor: progress;
  opacity: .85;
}
.qd-theme .qd-rce-add-image[disabled] {
  cursor: progress;
}
.qd-theme .qd-rce-spinner {
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-right: .4em;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: qd-rce-spin .6s linear infinite;
}
@keyframes qd-rce-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .qd-theme .qd-rce-spinner { animation-duration: 1.5s; }
}

/* ------------------------------------------------------------------ */
/* QT-03A composite question tree — structure editor + read-only preview */
/* ------------------------------------------------------------------ */
.qd-theme .qd-tree,
.qd-theme .qd-tree-children,
.qd-theme .qd-cpreview-root,
.qd-theme .qd-cpreview-children {
  list-style: none;
  margin: 0;
  padding-left: 1.25rem;
}
.qd-theme .qd-tree--root { padding-left: 0; }
.qd-theme .qd-tree-node {
  border-left: 2px solid var(--qd-border, #e5ded6);
  padding: 0.35rem 0 0.35rem 0.75rem;
  margin: 0.25rem 0;
}
.qd-theme .qd-tree-node--container { border-left-color: var(--qd-accent, #7a5c9e); }
.qd-theme .qd-tree-node__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.qd-theme .qd-tree-node__label { display: inline-flex; align-items: center; gap: 0.4rem; }
.qd-theme .qd-tree-node__actions { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.qd-theme .qd-tree-node__context {
  margin: 0.35rem 0;
  color: var(--qd-muted, #6b6259);
  font-size: 0.9rem;
}
.qd-theme .qd-tree-node__leaf { margin-top: 0.2rem; color: var(--qd-ink, #2e2a26); }
.qd-theme .qd-tree-node__edit { margin: 0.35rem 0; }
.qd-theme .qd-tree-node__edit-summary { cursor: pointer; font-size: 0.85rem; color: var(--qd-accent, #7a5c9e); }
.qd-theme .qd-tree-form { display: grid; gap: 0.5rem; max-width: 34rem; margin: 0.5rem 0; }
.qd-theme .qd-tree-form--inline { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.qd-theme .qd-add-node { display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.qd-theme .qd-btn-sm { padding: 0.15rem 0.5rem; font-size: 0.8rem; line-height: 1.4; }
.qd-theme .qd-cpreview-label { color: var(--qd-accent, #7a5c9e); margin-right: 0.25rem; }
.qd-theme .qd-cpreview-container { border-left: 2px solid var(--qd-accent, #7a5c9e); padding-left: 0.75rem; margin: 0.4rem 0; }

/* ------------------------------------------------------------------ */
/* QT-03A.6 — inline nested structure builder (question authoring)      */
/* Builds on .qd-split-workspace but sizes proportionally and STACKS on */
/* narrow viewports, because this is a real page (not a preview frame). */
/* ------------------------------------------------------------------ */
.qd-theme .qd-composite-builder {
  min-width: 0;                 /* allow the grid to shrink; no page scroll */
  align-items: flex-start;
  border: 1px solid var(--qd-border);
  border-radius: .5rem;
  overflow: hidden;
}
.qd-theme .qd-composite-builder > .qd-split-workspace-nav {
  width: 32%;
  min-width: 0;
}
.qd-theme .qd-composite-builder > .qd-split-workspace-main {
  min-width: 0;                 /* lets long content wrap instead of overflowing */
  padding: 1rem 1.25rem;
}

.qd-theme .qd-structure-panel__head,
.qd-theme .qd-contents-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--qd-border);
}
.qd-theme .qd-contents-panel__head {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 1rem;
}
.qd-theme .qd-structure-panel__collapse {
  background: none;
  border: 0;
  color: var(--qd-muted);
  padding: .25rem;
  line-height: 1;
  cursor: pointer;
}
.qd-theme .qd-structure-panel__body { padding: .75rem; }
.qd-theme .qd-structure-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: .75rem;
}
.qd-theme .qd-structure-panel__hint { margin-top: .75rem; }

/* Context indicator — a state label, never a tab. */
.qd-theme .qd-context-indicator {
  font-size: .75rem;
  font-weight: 600;
  color: var(--qd-primary);
  background: var(--qd-primary-soft);
  border-radius: .3rem;
  padding: .2rem .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Structure tree */
.qd-theme .qd-structure-tree { list-style: none; margin: 0; padding: 0; }
.qd-theme .qd-structure-item {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-left: calc(var(--qd-structure-depth, 0) * .75rem);
  border-radius: .3rem;
}
.qd-theme .qd-structure-item.is-selected {
  background: var(--qd-primary-soft);
}
.qd-theme .qd-structure-item__select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  background: none;
  border: 0;
  text-align: left;
  padding: .375rem .5rem;
  color: var(--qd-text);
  border-radius: .3rem;
  cursor: pointer;
}
.qd-theme .qd-structure-item.is-selected .qd-structure-item__select {
  color: var(--qd-primary);
  font-weight: 600;
}
.qd-theme .qd-structure-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qd-theme .qd-structure-item__marks {
  flex-shrink: 0;
  font-size: .6875rem;
  color: var(--qd-muted);
}
/* QT-03A.6 existing-question picker + attached-leaf summary. */
.qd-theme .qd-question-picker {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, .45);
  overflow-y: auto;
}
.qd-theme .qd-question-picker[hidden] { display: none; }
.qd-theme .qd-question-picker__panel {
  width: 100%;
  max-width: 40rem;
  padding: 1.25rem;
  border-radius: var(--qd-radius, .5rem);
  background: var(--qd-surface, #fff);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25);
}
.qd-theme .qd-question-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.qd-theme .qd-question-picker__close {
  background: none;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  min-width: 1.75rem;
  min-height: 1.75rem;
  color: var(--qd-muted);
  cursor: pointer;
}
.qd-theme .qd-question-picker__results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 24rem;
  overflow-y: auto;
}
.qd-theme .qd-question-picker__pick {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .625rem;
  min-height: 1.75rem;
  background: none;
  border: 0;
  border-radius: var(--qd-radius-sm, .25rem);
  cursor: pointer;
}
.qd-theme .qd-question-picker__pick:hover,
.qd-theme .qd-question-picker__pick:focus-visible {
  background: var(--qd-surface-alt, rgba(0, 0, 0, .04));
}
.qd-theme .qd-question-picker__text { display: block; }
.qd-theme .qd-question-picker__meta {
  display: block;
  font-size: .75rem;
  color: var(--qd-muted);
}
.qd-theme .qd-attached-question {
  padding: .75rem;
  border: 1px solid var(--qd-border, rgba(0, 0, 0, .15));
  border-radius: var(--qd-radius-sm, .25rem);
  background: var(--qd-surface-alt, rgba(0, 0, 0, .03));
}
.qd-theme .qd-attached-question[hidden] { display: none; }
.qd-theme .qd-attached-question__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
}
.qd-theme .qd-attached-question__badge {
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--qd-muted);
}

/* QT-03A.6: the structure row the server rejected. Marked with a text badge and
   a left rule as well as colour, so the state is not conveyed by colour alone. */
.qd-theme .qd-structure-item--error > .qd-structure-item__select {
  box-shadow: inset 3px 0 0 var(--qd-danger, #b3261e);
}
.qd-theme .qd-structure-item__error {
  flex-shrink: 0;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--qd-danger, #b3261e);
}
.qd-theme .qd-structure-panel__error {
  color: var(--qd-danger, #b3261e);
}
/* Heading for nodes that lost their place in the hierarchy on a rejected POST. */
.qd-theme .qd-structure-item--repair-head {
  padding: .5rem .625rem .25rem;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--qd-danger, #b3261e);
}
.qd-theme .qd-structure-item__actions {
  display: flex;
  align-items: center;
  gap: .125rem;
  flex-shrink: 0;
}
.qd-theme .qd-structure-item__action {
  background: none;
  border: 0;
  color: var(--qd-muted);
  font-size: .75rem;
  line-height: 1;
  padding: .25rem;
  min-width: 1.75rem;
  min-height: 1.75rem;   /* keep touch targets usable */
  border-radius: .25rem;
  cursor: pointer;
}
.qd-theme .qd-structure-item__action:hover,
.qd-theme .qd-structure-item__action:focus-visible { color: var(--qd-primary); }
.qd-theme .qd-structure-item__move {
  width: auto;
  max-width: 8rem;
  font-size: .75rem;
}

/* Node editors inside Contents */
.qd-theme .qd-node-editor { max-width: 100%; }
.qd-theme .qd-node-pane[hidden] { display: none; }

/* Wide content must scroll inside its own box, never the page. */
.qd-theme .qd-composite-builder .mcq-choice-editor,
.qd-theme .qd-composite-builder .qd-rce { max-width: 100%; }
.qd-theme .qd-composite-builder table { display: block; overflow-x: auto; }

@media (max-width: 991.98px) {
  /* Structure stacks ABOVE Contents; selecting an item scrolls to Contents. */
  .qd-theme .qd-composite-builder {
    display: block;
    min-width: 0;
  }
  .qd-theme .qd-composite-builder > .qd-split-workspace-nav {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--qd-border);
  }
  .qd-theme .qd-composite-builder > .qd-split-workspace-main { width: 100%; }
  .qd-theme .qd-context-indicator { max-width: 100%; }
  .qd-theme .qd-structure-item__move { max-width: 6rem; }
}

/* Expand/collapse twisty on a Part row (QT-03A.6 review finding 4). */
.qd-theme .qd-structure-item__twisty {
  background: none;
  border: 0;
  color: var(--qd-muted);
  font-size: .7rem;
  line-height: 1;
  padding: .25rem;
  min-width: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
}
.qd-theme .qd-structure-item__twisty:hover,
.qd-theme .qd-structure-item__twisty:focus-visible { color: var(--qd-primary); }