/* CT Quiz Engine — presentation. Uses brand tokens from tokens.css.
   Restrained, editorial, book-like. Colour is always paired with a glyph (accessibility). */

.ctq-quiz {
  font-family: var(--ct-font-body);
  color: var(--ct-ink);
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  line-height: 1.5;
}

.ctq-title {
  font-family: var(--ct-font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 2rem;
  margin: 0 0 0.15em;
}
.ctq-sub  { font-style: italic; color: var(--ct-muted); margin: 0 0 0.5em; }
.ctq-desc { margin: 0 0 0.75em; }
.ctq-meta { font-size: 0.85rem; color: var(--ct-faint); margin: 0 0 0.5em; }
.ctq-obj  { font-size: 0.9rem; color: var(--ct-muted); margin: 0 0 0.5em; }
.ctq-obj summary { cursor: pointer; }
.ctq-obj ul { margin: 0.4em 0 0; padding-left: 1.2em; }

.ctq-head { border-bottom: 2px solid var(--ct-ink); padding-bottom: 0.9rem; margin-bottom: 1.5rem; }

/* Assignment links — clear context without turning the quiz into an application shell. */
.ctq-assignment-banner,
.ctq-assignment-notice {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--ct-radius);
}
.ctq-assignment-banner {
  border: 1px solid var(--ct-intro);
  border-left: 4px solid var(--ct-intro);
  background: #f5f1e8;
}
.ctq-assignment-heading { margin: 0; font-family: var(--ct-font-display); font-weight: 800; }
.ctq-assignment-label,
.ctq-assignment-details,
.ctq-assignment-instruction { margin: 0.25rem 0 0; }
.ctq-assignment-label,
.ctq-assignment-details { color: var(--ct-muted); font-size: 0.9rem; }
.ctq-assignment-instruction { font-size: 0.95rem; }
.ctq-assignment-notice { border-left: 4px solid var(--ct-bridge); background: #fdf6e8; }
.ctq-assignment-retired { border-left-color: var(--ct-chorus); background: #fbeeed; }

/* Teacher guidance — compact orientation, honest limits, and readable policy. */
.ctq-teacher-page section[id] { scroll-margin-top: 1rem; }
.ctq-teacher-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 1.25rem;
}
.ctq-teacher-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ct-ink);
  font-weight: 700;
}
.ctq-teacher-nav a:focus,
.ctq-teacher-faq summary:focus,
.ctq-privacy-link a:focus,
.ctq-privacy-copy a:focus {
  outline: 3px solid color-mix(in srgb, var(--ct-intro) 35%, transparent);
  outline-offset: 2px;
}
.ctq-teacher-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
  counter-reset: teacher-step;
}
.ctq-teacher-steps li {
  counter-increment: teacher-step;
  padding: 1rem;
  border: 1px solid var(--ct-hairline);
  border-top: 4px solid var(--ct-intro);
  border-radius: var(--ct-radius);
  background: var(--ct-paper);
}
.ctq-teacher-steps li::before {
  content: counter(teacher-step);
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ct-intro);
  font-family: var(--ct-font-display);
  font-size: 1.5rem;
  font-weight: 800;
}
.ctq-teacher-steps strong,
.ctq-teacher-steps span { display: block; }
.ctq-teacher-steps span { margin-top: 0.35rem; color: var(--ct-muted); }
.ctq-honest-limits,
.ctq-boundary-statement,
.ctq-privacy-copy {
  border: 1px solid var(--ct-hairline);
  border-left: 4px solid var(--ct-bridge);
  border-radius: var(--ct-radius);
  background: var(--ct-paper);
}
.ctq-honest-limits,
.ctq-boundary-statement { padding: 1rem 1.1rem; }
.ctq-honest-limits p:first-child { margin-top: 0; }
.ctq-honest-limits p:last-child { margin-bottom: 0; }
.ctq-teacher-faq details { border-top: 1px solid var(--ct-hairline); }
.ctq-teacher-faq details:last-child { border-bottom: 1px solid var(--ct-hairline); }
.ctq-teacher-faq summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
  font-weight: 700;
  cursor: pointer;
}
.ctq-teacher-faq details p { margin: 0 0 1rem; }
.ctq-privacy-link { margin-top: 1.5rem; }
.ctq-privacy-link a,
.ctq-privacy-copy a { display: inline-flex; align-items: center; min-height: 44px; }
.ctq-privacy-copy { padding: 1.25rem; overflow-wrap: anywhere; }
.ctq-privacy-copy h2:not(:first-child) { margin-top: 1.75rem; }

@media (max-width: 520px) {
  .ctq-teacher-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .ctq-teacher-steps { grid-template-columns: 1fr; }
  .ctq-honest-limits,
  .ctq-boundary-statement,
  .ctq-privacy-copy { padding: 0.9rem; }
}

/* Teacher assignment builder — one narrow, readable form with explicit outputs. */
.ctq-builder {
  font-family: var(--ct-font-body);
  color: var(--ct-ink);
  max-width: 720px;
  margin: 0 auto;
}
.ctq-builder-form { display: grid; gap: 1rem; }
.ctq-builder-field { display: grid; gap: 0.35rem; }
.ctq-builder-field-label { font-weight: 700; }
.ctq-builder-help { color: var(--ct-muted); font-size: 0.85rem; }
.ctq-builder input,
.ctq-builder select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ct-hairline);
  border-radius: var(--ct-radius);
  background: #fff;
  color: var(--ct-ink);
  font: inherit;
}
.ctq-builder input:focus,
.ctq-builder select:focus { outline: 3px solid color-mix(in srgb, var(--ct-intro) 35%, transparent); outline-offset: 2px; }
.ctq-builder-submit,
.ctq-builder-action {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ct-ink);
  border-radius: var(--ct-radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ctq-builder-submit { background: var(--ct-ink); color: #fff; }
.ctq-builder-action { display: inline-flex; align-items: center; margin: 0.35rem 0.5rem 0.35rem 0; background: #fff; color: var(--ct-ink); }
a.ctq-builder-action { text-decoration: none; }
.ctq-builder-error { min-height: 1.5em; margin: 0; color: var(--ct-chorus); font-weight: 700; }
.ctq-builder-output {
  margin-top: 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--ct-hairline);
  border-left: 4px solid var(--ct-intro);
  border-radius: var(--ct-radius);
  background: var(--ct-paper);
}
.ctq-builder-output[hidden] { display: none; }
.ctq-builder-output h2 { margin: 1.2rem 0 0.35rem; font-family: var(--ct-font-display); font-size: 1.25rem; }
.ctq-builder-output h2:first-child { margin-top: 0; }
.ctq-builder-assignment-url,
.ctq-builder-checker-url { overflow-wrap: anywhere; padding: 0.6rem; background: #f6f4ef; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.ctq-builder-qr { max-width: 18rem; margin: 1rem 0; }
.ctq-builder-qr svg { display: block; width: 100%; height: auto; }
.ctq-builder-copy-status { min-height: 1.5em; color: var(--ct-muted); }

@media (max-width: 520px) {
  .ctq-builder-action { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
}

/* Teacher completion checker — the verdict always uses words and a symbol. */
#check-completion { scroll-margin-top: 1rem; }
.ctq-checker {
  font-family: var(--ct-font-body);
  color: var(--ct-ink);
  max-width: 720px;
  margin: 0 auto;
}
.ctq-checker-form { display: grid; gap: 1rem; }
.ctq-checker-field { display: grid; gap: 0.35rem; }
.ctq-checker-field-label { font-weight: 700; }
.ctq-checker-help { color: var(--ct-muted); font-size: 0.85rem; }
.ctq-checker input,
.ctq-checker textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ct-hairline);
  border-radius: var(--ct-radius);
  background: #fff;
  color: var(--ct-ink);
  font: inherit;
}
.ctq-checker textarea { resize: vertical; overflow-wrap: anywhere; }
.ctq-checker input:focus,
.ctq-checker textarea:focus,
.ctq-checker-submit:focus {
  outline: 3px solid color-mix(in srgb, var(--ct-intro) 35%, transparent);
  outline-offset: 2px;
}
.ctq-checker-submit {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ct-ink);
  border-radius: var(--ct-radius);
  background: var(--ct-ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ctq-checker-verdict {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ct-hairline);
  border-left-width: 4px;
  border-radius: var(--ct-radius);
  background: var(--ct-paper);
  overflow-wrap: anywhere;
}
.ctq-checker-verdict[hidden] { display: none; }
.ctq-checker-valid { border-left-color: var(--ct-verse); }
.ctq-checker-invalid { border-left-color: var(--ct-chorus); }
.ctq-checker-heading { margin: 0 0 0.6rem; font-family: var(--ct-font-display); font-size: 1.25rem; }
.ctq-checker-valid .ctq-checker-heading { color: var(--ct-verse); }
.ctq-checker-invalid .ctq-checker-heading { color: var(--ct-chorus); }
.ctq-checker-verdict p { margin: 0.3rem 0; }
.ctq-checker-retired {
  margin-top: 0.8rem !important;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid var(--ct-bridge);
  background: #fdf6e8;
}

/* Batch check — a whole class at once */
.ctq-checker-batch-form { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ct-hairline); }
.ctq-checker-batch-heading { margin: 0 0 0.8rem; font-family: var(--ct-font-display); font-size: 1.25rem; }
.ctq-checker-batch-submit {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ct-ink);
  border-radius: var(--ct-radius);
  background: var(--ct-ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ctq-checker-batch-verdict {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ct-hairline);
  border-left-width: 4px;
  border-radius: var(--ct-radius);
  background: var(--ct-paper);
  overflow-wrap: anywhere;
}
.ctq-checker-batch-verdict[hidden] { display: none; }
.ctq-checker-mixed { border-left-color: var(--ct-bridge); }
.ctq-checker-batch-table { margin: 0.8rem 0; border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.ctq-checker-batch-th, .ctq-checker-batch-td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--ct-hairline);
  text-align: left;
  vertical-align: top;
}
.ctq-checker-batch-row-valid .ctq-checker-batch-td:nth-child(2) { color: var(--ct-verse); font-weight: 700; }
.ctq-checker-batch-row-invalid .ctq-checker-batch-td:nth-child(2) { color: var(--ct-chorus); }

@media (max-width: 520px) {
  .ctq-checker-submit { width: 100%; }
  .ctq-checker-batch-submit { width: 100%; }
}

/* Completion Seal — a typographic wax medallion, deliberately not a logo. */
.ctq-seal-panel {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--ct-brand-antique-gold);
  border-radius: 10px;
  background: var(--ct-brand-alabaster);
  color: var(--ct-brand-obsidian);
}
.ctq-seal-heading { margin: 0; font-family: var(--ct-font-display); font-size: 1.55rem; }
.ctq-seal-intro { margin: 0.35rem 0 1rem; }
.ctq-seal-id-label { display: block; font-weight: 700; }
.ctq-seal-id {
  display: block;
  width: min(100%, 22rem);
  min-height: 44px;
  box-sizing: border-box;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ct-hairline);
  border-radius: var(--ct-radius);
  background: #fff;
  color: var(--ct-brand-obsidian);
  font: inherit;
}
.ctq-seal-id:focus,
.ctq-seal-generate:focus,
.ctq-seal-copy:focus,
.ctq-seal-email:focus { outline: 3px solid color-mix(in srgb, var(--ct-brand-mahogany) 55%, transparent); outline-offset: 2px; }
.ctq-seal-id-help { margin: 0.35rem 0 0.8rem; color: var(--ct-muted); font-size: 0.85rem; }
.ctq-seal-generate[hidden] { display: none; }
.ctq-seal-generate,
.ctq-seal-copy,
.ctq-seal-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ct-brand-obsidian);
  border-radius: var(--ct-radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ctq-seal-generate { background: var(--ct-brand-obsidian); color: var(--ct-brand-alabaster); }
.ctq-seal-copy,
.ctq-seal-email { background: #fff; color: var(--ct-brand-obsidian); text-decoration: none; }
.ctq-seal-error { min-height: 1.5em; color: var(--ct-brand-mahogany); font-weight: 700; }
.ctq-seal-result[hidden] { display: none; }
.ctq-seal-medallion {
  display: grid;
  place-items: center;
  align-content: center;
  width: min(17rem, 76vw);
  aspect-ratio: 1;
  margin: 1rem auto;
  padding: 1.4rem;
  box-sizing: border-box;
  border: 4px solid var(--ct-brand-antique-gold);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #2E5680, var(--ct-brand-midnight) 72%);
  color: var(--ct-brand-alabaster);
  text-align: center;
  box-shadow:
    inset 0 0 0 7px rgb(251 244 228 / 18%),
    inset 0 6px 18px rgb(0 0 0 / 30%),
    0 12px 30px rgb(28 58 90 / 25%);
}
.ctq-seal-mark,
.ctq-seal-held-tone { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; }
.ctq-seal-held-tone { color: var(--ct-brand-antique-gold); }
.ctq-seal-code { margin: 0.75rem 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; overflow-wrap: anywhere; }
.ctq-seal-plain { display: block; width: fit-content; max-width: 100%; margin: 0 auto 0.75rem; overflow-wrap: anywhere; }
.ctq-seal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; }
.ctq-seal-copy-status { color: var(--ct-muted); font-size: 0.85rem; }

@media (max-width: 520px) {
  .ctq-seal-copy,
  .ctq-seal-email { width: 100%; }
}

/* `sample: N` pools — the dealt-hand note + redraw control */
.ctq-sample-note { font-size: 0.85rem; color: var(--ct-muted); margin: 0.4em 0 0;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ctq-resample { font-family: var(--ct-font-body); font-size: 0.82rem; padding: 0.3rem 0.75rem;
  border: 1px solid var(--ct-ink); background: #fff; color: var(--ct-ink);
  border-radius: var(--ct-radius); cursor: pointer; }
.ctq-resample:hover { background: #f3f1ec; }

.ctq-q {
  border: 1px solid #e2e2e2;
  border-left: 4px solid var(--ct-hairline);
  border-radius: var(--ct-radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.1rem;
  background: var(--ct-paper);
}
.ctq-q.ctq-done { border-left-color: var(--ct-intro); }

.ctq-prompt { font-size: 1.08rem; margin-bottom: 0.75rem; }
.ctq-n { color: var(--ct-faint); font-weight: 600; margin-right: 0.25em; }

.ctq-media { margin: 0 0 0.9rem; }
.ctq-media-image { display: block; max-width: 100%; height: auto; }
.ctq-media-notation { overflow-x: auto; padding: 0.6rem; background: #f6f4ef; }
.ctq-media-link { font-weight: 700; }
.ctq-media-cue, .ctq-media-caption, .ctq-media-transcript { color: var(--ct-muted); }
.ctq-media-caption, .ctq-media-transcript { margin: 0.4rem 0 0; font-size: 0.9rem; }

.ctq-options { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.ctq-opt {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.5rem 0.65rem; border: 1px solid #e6e6e6; border-radius: var(--ct-radius);
  cursor: pointer; transition: background 0.12s ease;
}
.ctq-opt:hover { background: #fafafa; }
.ctq-opt input { margin-top: 0.2rem; flex: none; }
.ctq-opt-text { flex: 1; }

/* Result states — glyph + colour, never colour alone */
.ctq-opt.ctq-correct   { border-color: var(--ct-verse);  background: #eef7ee; }
.ctq-opt.ctq-correct   .ctq-opt-text::after { content: "  ✓"; color: var(--ct-verse); font-weight: 700; }
.ctq-opt.ctq-incorrect { border-color: var(--ct-chorus); background: #fbeeed; }
.ctq-opt.ctq-incorrect .ctq-opt-text::after { content: "  ✗"; color: var(--ct-chorus); font-weight: 700; }
.ctq-opt.ctq-missed    { border-color: var(--ct-bridge); background: #fdf6e8; }
.ctq-opt.ctq-missed    .ctq-opt-text::after { content: "  ← missed"; color: #b07d1a; font-size: 0.8em; }

.ctq-text { font-family: var(--ct-font-body); font-size: 1rem; padding: 0.5rem 0.6rem;
  border: 1px solid #cfcfcf; border-radius: var(--ct-radius); width: 100%; max-width: 22rem; }
.ctq-text.ctq-correct   { border-color: var(--ct-verse);  background: #eef7ee; }
.ctq-text.ctq-incorrect { border-color: var(--ct-chorus); background: #fbeeed; }

/* pitch_input adapter — the keyboard remains a self-contained component; these rules
   own only its host placement plus the Quiz Engine's summary and controls. */
.ctq-keyboard { display: block; margin: 0.25rem 0 0.75rem; }
.ctq-pitch-summary { margin: 0; font-weight: 700; }
.ctq-pitch-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.ctq-pitch-clear, .ctq-pitch-submit {
  min-width: 44px; min-height: 44px; font-family: var(--ct-font-body); font-size: 0.95rem;
  padding: 0.45rem 1.1rem; border-radius: var(--ct-radius); cursor: pointer;
}
.ctq-pitch-clear { border: 1px solid var(--ct-ink); background: #fff; color: var(--ct-ink); }
.ctq-pitch-submit { margin-top: 0; }
.ctq-pitch-clear:disabled, .ctq-pitch-submit:disabled { cursor: default; }

/* interval_construct plug-in — destination first, then one exact spelling choice. */
.ctq-interval-keyboard-guide {
  margin: 0 0 0.75rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--ct-hairline); border-radius: var(--ct-radius); background: #f6f4ef;
}
.ctq-interval-keyboard-guide summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.ctq-interval-keyboard-guide p { margin: 0.4rem 0 0; color: var(--ct-muted); }
.ctq-interval-builder { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; min-width: 0; }
.ctq-interval-builder .ctq-interval-keyboard {
  flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; margin-bottom: 0;
  --ct-keyboard-highlight-a: #005fa8;
  --ct-keyboard-highlight-b: #b0006d;
}
.ctq-interval-pan-hint {
  display: none; flex: 1 1 100%; margin: 0; color: var(--ct-muted); font-size: 0.9rem;
}
.ctq-interval-candidates { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 0.45rem; }
.ctq-interval-candidates[hidden] { display: none; }
.ctq-interval-candidate {
  min-width: 64px; min-height: 44px; padding: 0.45rem 0.7rem;
  border: 1px solid #cfcfcf; border-radius: var(--ct-radius);
  background: #fff; color: var(--ct-ink); font: inherit; cursor: pointer;
}
.ctq-interval-candidate.sel {
  border-color: var(--ct-ink); background: var(--ct-ink); color: #fff;
}
.ctq-interval-candidate:focus, .ctq-interval-submit:focus,
.ctq-interval-keyboard-guide summary:focus {
  outline: 3px solid color-mix(in srgb, var(--ct-intro) 35%, transparent); outline-offset: 2px;
}
.ctq-interval-preview { flex: 1 1 100%; margin: 0; min-height: 1.5em; font-weight: 700; }
.ctq-interval-status { color: var(--ct-chorus); }
.ctq-interval-controls { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 0.6rem; }
.ctq-interval-submit {
  min-width: 44px; min-height: 44px; padding: 0.45rem 1.1rem;
  border-radius: var(--ct-radius); font: inherit; cursor: pointer;
}
.ctq-interval-submit { margin-top: 0; }
.ctq-interval-candidate:disabled, .ctq-interval-submit:disabled { cursor: default; opacity: 0.72; }

@media (max-width: 520px) {
  .ctq-interval-keyboard-guide { padding: 0.45rem 0.55rem; }
  .ctq-interval-pan-hint { display: block; }
  .ctq-interval-candidate { flex: 1 1 5.5rem; }
}

.ctq-hint { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--ct-muted); }
.ctq-hint summary { cursor: pointer; }

.ctq-check {
  margin-top: 0.85rem; font-family: var(--ct-font-body); font-size: 0.95rem;
  padding: 0.45rem 1.1rem; border: 0; border-radius: var(--ct-radius);
  background: var(--ct-ink); color: #fff; cursor: pointer;
}
.ctq-check:disabled { background: var(--ct-hairline); cursor: default; }

.ctq-feedback { margin-top: 0.8rem; }
.ctq-feedback:empty { margin: 0; }
.ctq-verdict { font-weight: 700; }
.ctq-verdict.ctq-correct   { color: var(--ct-verse); }
.ctq-verdict.ctq-incorrect { color: var(--ct-chorus); }

.ctq-optfb { margin: 0.5rem 0 0; padding-left: 1.1em; color: var(--ct-ink); }
.ctq-optfb li { margin: 0.2em 0; }

.ctq-expl { margin-top: 0.7rem; padding: 0.65rem 0.8rem; background: #f6f4ef;
  border-radius: var(--ct-radius); font-size: 0.96rem; }
.ctq-voice { display: block; font-weight: 700; font-size: 0.82rem; color: var(--ct-muted);
  margin-bottom: 0.25rem; letter-spacing: 0.02em; }

.ctq-selfassess { margin-top: 0.7rem; padding: 0.6rem 0.75rem; border: 1px dashed var(--ct-hairline);
  border-radius: var(--ct-radius); background: #fbfaf7; font-size: 0.92rem; }
.ctq-accepted { margin-bottom: 0.45rem; color: var(--ct-muted); }
.ctq-countit { font-family: var(--ct-font-body); font-size: 0.85rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--ct-verse); background: #fff; color: var(--ct-verse);
  border-radius: var(--ct-radius); cursor: pointer; }
.ctq-countit:hover { background: #eef7ee; }
.ctq-selflabel { margin: 0.5rem 0 0.3rem; font-size: 0.85rem; color: var(--ct-muted); }
.ctq-selfbtns { display: flex; gap: 0.5rem; }
.ctq-half { border-color: var(--ct-bridge); color: #b07d1a; }
.ctq-half:hover { background: #fdf6e8; }
.ctq-verdict.ctq-half-verdict { color: #b07d1a; }
.ctq-nearmiss { margin: 0.4rem 0; padding: 0.5rem 0.6rem; background: #fff;
  border-left: 3px solid var(--ct-bridge); border-radius: 3px; }
.ctq-nudge { padding: 0.55rem 0.7rem; background: #fdf6e8; border-left: 3px solid var(--ct-bridge);
  border-radius: 3px; font-size: 0.92rem; }

.ctq-degpicker { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.ctq-degpicker.ctq-stack { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.ctq-accrow, .ctq-degrow { display: flex; gap: 0.3rem; }
.ctq-pickrow { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.ctq-rowlab { font-size: 0.72rem; color: var(--ct-faint); min-width: 3.4rem;
  text-transform: uppercase; letter-spacing: 0.05em; }
.ctq-rngroup { display: flex; flex-direction: column; gap: 0.45rem; }
.ctq-rn-given { flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ctq-rn-of { padding-left: 0.9rem; border-left: 2px solid var(--ct-hairline); }
/* Case-coded numeral grid: major row over minor row */
.ctq-numgrid { display: flex; flex-direction: column; gap: 0.3rem; }
.ctq-numrow { display: flex; gap: 0.3rem; }
/* Fixed "given" prefix shown before the builder (e.g. V7/) */
.ctq-given { font-family: var(--ct-font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--ct-ink); padding: 0.1rem 0.2rem; }
.ctq-acc, .ctq-deg, .ctq-note, .ctq-rn, .ctq-qual, .ctq-sev, .ctq-of, .ctq-dim {
  font-family: var(--ct-font-body); font-size: 1rem; min-width: 2.2rem; padding: 0.4rem 0.5rem;
  border: 1px solid #cfcfcf; background: #fff; border-radius: var(--ct-radius); cursor: pointer;
}
.ctq-acc { font-size: 1.15rem; }
.ctq-qual, .ctq-sev, .ctq-of, .ctq-dim { font-size: 0.92rem; }
.ctq-acc.sel, .ctq-deg.sel, .ctq-note.sel, .ctq-rn.sel, .ctq-qual.sel, .ctq-sev.sel, .ctq-of.sel, .ctq-dim.sel { background: var(--ct-ink); color: #fff; border-color: var(--ct-ink); }
.ctq-acc:disabled, .ctq-deg:disabled, .ctq-note:disabled, .ctq-rn:disabled, .ctq-qual:disabled, .ctq-sev:disabled, .ctq-of:disabled, .ctq-dim:disabled { cursor: default; opacity: 0.85; }
.ctq-deg.ctq-correct, .ctq-note.ctq-correct, .ctq-rn.ctq-correct, .ctq-qual.ctq-correct { background: var(--ct-verse); border-color: var(--ct-verse); color: #fff; }
.ctq-deg.ctq-incorrect, .ctq-note.ctq-incorrect, .ctq-rn.ctq-incorrect, .ctq-qual.ctq-incorrect { background: var(--ct-chorus); border-color: var(--ct-chorus); color: #fff; }

/* Live preview of the assembled answer (chord_spelling / roman_numeral) — glyph + colour */
.ctq-preview { font-size: 1.05rem; font-weight: 700; margin-top: 0.15rem; }
.ctq-preview.ctq-correct::after   { content: "  ✓"; color: var(--ct-verse); }
.ctq-preview.ctq-incorrect::after { content: "  ✗"; color: var(--ct-chorus); }

.ctq-skip, .ctq-none { color: var(--ct-faint); font-style: italic; padding: 0.5rem 0; }

/* Screen-reader-only text (real feedback for assistive tech, not just CSS glyphs) */
.ctq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Restrained connective metadata */
.ctq-meta-line { margin-top: 0.6rem; font-size: 0.82rem; color: var(--ct-faint); }
.ctq-prereq { font-size: 0.85rem; color: var(--ct-muted); margin: 0 0 0.5em; }
.ctq-remediation { margin-top: 0.65rem; }
.ctq-remediation-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ct-brand-mahogany);
  font-weight: 700;
}
.ctq-remediation-link:focus { outline: 3px solid color-mix(in srgb, var(--ct-brand-mahogany) 55%, transparent); outline-offset: 2px; }

.ctq-score {
  position: sticky; bottom: 0; margin-top: 1.5rem;
  background: var(--ct-ink); color: #fff; border-radius: var(--ct-radius);
  padding: 0.7rem 1rem; font-size: 0.92rem; text-align: center;
}
.ctq-score.ctq-pass { background: var(--ct-verse); }
.ctq-score.ctq-fail { background: #8a5a2b; }

code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em;
  background: #efece6; padding: 0.05em 0.3em; border-radius: 3px; }

/* Wikilinked concept/repertoire references — styled text until import-day URL resolution */
.ctq-wikilink { border-bottom: 1px dotted var(--ct-faint); }