/*
 * CT Quest styles, built on the Slate theme contract (slate/docs/adr/0002).
 *
 * Every colour and font below is a contract name. The values are Slate's
 * house palette (the 2026-08-01 amendment), so retinting the whole app is an
 * edit to this one :root block and nothing else. Light only, permanently:
 * there is no dark palette, no toggle and no prefers-color-scheme rule.
 *
 * The four --status-* tones are the contract's optional extension for "the
 * state of a thing": correct/incorrect answers, late attempts, answers
 * waiting to be marked, released results. Destructive controls (reset an
 * attempt, log out) are app-local and draw on --status-critical, because the
 * contract has no destructive colour (slate/docs/adr/0021).
 *
 * The component classes (.card, .btn, .field, .tag, .section-heading,
 * .error-text, .progress, .concept-tags) are plain-CSS ports of the Slate
 * registry components of the same names. See
 * docs/adr/0002-adopt-slate-visual-conventions.md.
 */

:root {
  color-scheme: light;

  /* Neutrals (7) */
  --color-ink: #19222C;
  --color-ink-soft: #46525F;
  --color-muted: #57616D;
  --color-surface: #F1E2C0;
  --color-surface-2: #F4E9CE;
  --color-line: #E4D3A6;
  --color-line-strong: #C9AD6E;

  /* Background (1) and accent trio (3) */
  --color-bg: #F7F1E1;
  --color-accent: #2E7D63;
  --color-accent-deep: #245F4B;
  --color-accent-soft: #DCE3D0;

  /* Fonts (3): Slate's system stacks, no web font to download */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Liberation Serif", "DejaVu Serif", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Status tones (optional extension, ADR 0002 amendment). Each clears
     4.5:1 on both --color-bg and --color-surface, so they are safe for
     small text. */
  --status-positive: #245F4B;
  --status-neutral: #525C68;
  --status-warning: #7A530C;
  --status-critical: #8A3226;
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.05rem;
}

p {
  margin: 0;
}

a {
  color: var(--color-accent-deep);
}

code,
pre,
kbd {
  font-family: var(--font-mono);
}

strong {
  color: var(--color-ink);
  font-weight: 600;
}

button:not(:disabled) {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Page shell (PageShell) ---------- */

.bar {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-2);
}

.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
}

.bar__title {
  font-size: 1.1rem;
}

.bar__context {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0;
}

.bar__link {
  font-size: 0.875rem;
  color: var(--color-accent-deep);
  text-underline-offset: 3px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}

.wrap--wide {
  max-width: 1200px;
}

.stack {
  display: grid;
  gap: 12px;
}

.stack--tight {
  gap: 8px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.row--between {
  justify-content: space-between;
}

.muted {
  color: var(--color-muted);
}

.small {
  font-size: 0.8125rem;
}

.mono {
  font-family: var(--font-mono);
}

.mt-s {
  margin-top: 6px;
}

.mt-m {
  margin-top: 12px;
}

.stack > .section-heading {
  margin-bottom: 0;
}

/* ---------- Card ---------- */

.card {
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.card--flush {
  padding: 0;
}

.card__pad {
  padding: 12px 12px 0;
}

p.card__pad {
  padding-bottom: 12px;
}

.card--raised {
  background: var(--color-surface-2);
}

.card--accent {
  background: var(--color-accent-soft);
}

/* ---------- SectionHeading (no eyebrow) ---------- */

.section-heading {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.section-heading p {
  color: var(--color-ink-soft);
  max-width: 65ch;
}

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 2.25rem;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:not(:disabled):active {
  transform: translateY(1px);
}

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

.btn--primary {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}

.btn--primary:not(:disabled):hover {
  background: var(--color-ink-soft);
  border-color: var(--color-ink-soft);
}

/* The registry's accent button fills with --color-accent, which is under
   4.5:1 against light text at this size (ADR 0002's contrast table), so this
   app fills with the deep shade instead. */
.btn--accent {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: var(--color-bg);
}

.btn--accent:not(:disabled):hover {
  background: color-mix(in srgb, var(--color-accent-deep) 80%, var(--color-ink));
  border-color: color-mix(in srgb, var(--color-accent-deep) 80%, var(--color-ink));
}

.btn--secondary {
  background: var(--color-bg);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.btn--secondary:not(:disabled):hover {
  background: var(--color-surface-2);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink-soft);
}

.btn--ghost:not(:disabled):hover {
  background: var(--color-surface-2);
}

/* App-local destructive control (ADR 0021): outline only, so a row of them
   does not shout, in the critical tone. */
.btn--destructive {
  background: transparent;
  border-color: color-mix(in srgb, var(--status-critical) 45%, transparent);
  color: var(--status-critical);
}

.btn--destructive:not(:disabled):hover {
  background: color-mix(in srgb, var(--status-critical) 8%, transparent);
  border-color: var(--status-critical);
}

.btn--sm {
  min-height: 1.875rem;
  padding: 3px 10px;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
}

/* ---------- Field ---------- */

.field {
  display: block;
  min-width: 0;
}

.field__label,
.field > label,
.legend {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.field__hint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-ink-soft);
}

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  min-height: 2.25rem;
  padding: 6px 10px;
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.9375rem;
}

textarea {
  line-height: 1.5;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface-2);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

input[type="radio"],
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: none;
  accent-color: var(--color-accent-deep);
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
  box-shadow: none;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-ink);
  cursor: pointer;
}

.check--disabled {
  color: var(--color-muted);
  cursor: default;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

/* ---------- ErrorText and notices ---------- */

.error-text {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--status-critical);
}

.notice {
  padding: 8px 12px;
  border-left: 3px solid var(--status-neutral);
  border-radius: 0 6px 6px 0;
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-size: 0.875rem;
}

.notice--warning {
  border-left-color: var(--status-warning);
}

.notice--critical {
  border-left-color: var(--status-critical);
  color: var(--status-critical);
}

.notice--positive {
  border-left-color: var(--status-positive);
}

/* ---------- Tag, status and ConceptTags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.tag--accent {
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.tag--code {
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* A status is a tag with a dot. A hollow dot means "not known yet"
   (--status-neutral, ADR 0002): an answer still being marked. */
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

.status--positive {
  color: var(--status-positive);
  border-color: color-mix(in srgb, var(--status-positive) 40%, transparent);
}

.status--neutral,
.status--pending {
  color: var(--status-neutral);
}

.status--pending::before {
  background: transparent;
}

.status--warning {
  color: var(--status-warning);
  border-color: color-mix(in srgb, var(--status-warning) 40%, transparent);
}

.status--critical {
  color: var(--status-critical);
  border-color: color-mix(in srgb, var(--status-critical) 40%, transparent);
}

.tone-positive {
  color: var(--status-positive);
}

.tone-critical {
  color: var(--status-critical);
}

.tone-warning {
  color: var(--status-warning);
}

.tone-neutral {
  color: var(--status-neutral);
}

.concept-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.concept-tag {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--color-line-strong);
  border-radius: 4px;
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ---------- Student: join ---------- */

.join {
  max-width: 400px;
  margin: 8px auto 0;
}

.join__rules {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--color-ink-soft);
  font-size: 0.8125rem;
}

.join__rules li + li {
  margin-top: 2px;
}

/* ---------- Student: progress strip (ProgressNav, laid flat) ---------- */

.q-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: -16px -16px 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(6px);
}

.q-strip__count {
  font-weight: 600;
  color: var(--color-ink);
}

.q-strip__event {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.progress {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-ink-soft);
  border-radius: 50%;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.progress__dot--done {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-deep);
  color: var(--color-bg);
}

.progress__dot--current {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* Skipped: a dashed ring, so it reads differently from answered without
   relying on colour. */
.progress__dot--skipped {
  border-style: dashed;
  border-color: var(--color-ink-soft);
}

/* Locked (committed, can't be changed): square corners. */
.progress__dot--locked {
  border-radius: 4px;
}

/* In order: not reached yet. */
.progress__dot--ahead {
  border-color: var(--color-line-strong);
  color: var(--color-line-strong);
}

/* Free navigation: each dot sits in a 32px button that jumps to its
   question. The dot keeps its size; the button is the hit area. */
.progress--jump {
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.progress__jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.progress__jump:hover .progress__dot:not(.progress__dot--done) {
  border-color: var(--color-accent-deep);
  color: var(--color-ink);
}

.progress__jump:focus-visible {
  outline-offset: -2px;
}

.timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.timer--low {
  color: var(--status-critical);
  font-weight: 600;
}

/* ---------- Student: question ---------- */

.q-layout {
  display: grid;
  gap: 12px;
  align-items: start;
}

@media (min-width: 900px) {
  .q-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.q-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.q-points {
  flex: none;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.prompt-text {
  margin-top: 10px;
  color: var(--color-ink);
  font-size: 1rem;
  white-space: pre-wrap;
}

.code-label {
  margin: 10px 0 4px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}

.code-label + pre {
  margin-top: 0;
}

.answer-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.options {
  display: grid;
  gap: 6px;
}

.opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
}

.opt:hover {
  background: var(--color-surface-2);
}

.opt:has(input:checked) {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}

.opt input {
  margin-top: 3px;
}

.opt__text {
  line-height: 1.45;
  /* An option can be multi-line printed output (RGS-S1-04). */
  white-space: pre-line;
}

.q-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.q-nav .row {
  margin-left: auto;
}

.q-status {
  margin-top: 12px;
}

.q-hint {
  margin-top: 10px;
}

.answer-locked {
  opacity: 0.85;
}

.answer-locked .opt,
.answer-locked .pa-handle {
  cursor: default;
}

/* While a commit is in flight the answer cannot be edited (the area is
   inert); dimmed so that shows. */
.answer-area--busy {
  opacity: 0.6;
}

.q-change {
  margin-top: 12px;
}

.q-feedback {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface-2);
}

.q-feedback__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

/* ---------- Student: results ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.stat {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
}

.stat dt {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.stat dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* "(2 answers still being marked)" under a total marked so far. */
.stat__note {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}

.breakdown {
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-line);
}

.result-row:last-child {
  border-bottom: 0;
}

.result-row__side {
  display: grid;
  flex: none;
  gap: 4px;
  justify-items: end;
  align-content: start;
}

.result-row__score {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 600;
}

.result-meta {
  margin-top: 2px;
  color: var(--color-ink-soft);
  font-size: 0.8125rem;
}

/* Keep line breaks and indentation in typed output and ordered code. */
.result-answer {
  white-space: pre-wrap;
}

.result-answer code {
  font-size: 0.8125rem;
}

.backup summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink);
}

.codebox {
  max-height: 5.5rem;
  margin-top: 8px;
  padding: 8px 10px;
  overflow: auto;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  word-break: break-all;
}

/* ---------- Question types (web/types/) ---------- */

/* Code trace: the program with line numbers, and the output box. */
.ct-code code {
  display: block;
}

.ct-line {
  display: block;
  white-space: pre;
}

.ct-line__no {
  display: inline-block;
  width: 2em;
  margin-right: 10px;
  text-align: right;
  color: var(--color-muted);
  user-select: none;
  -webkit-user-select: none;
}

.ct-output,
textarea.open-response {
  min-height: 8rem;
}

.ct-output {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.ct-hint,
.open-response__hint {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Parsons: the program being built and the pool of unused lines. */
.pa-help {
  margin: 12px 0 4px;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.pa .code-label {
  margin: 10px 0 4px;
}

.pa-list {
  min-height: 2.75rem;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px dashed var(--color-line-strong);
  border-radius: 6px;
}

.pa-program {
  border-style: solid;
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-soft) 45%, transparent);
}

.pa-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  padding: 2px 4px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-bg);
}

.pa-line--dragging {
  outline: 2px solid var(--color-accent-deep);
  opacity: 0.9;
}

.pa--dragging,
.pa--dragging * {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* touch-action: none only on the handle, so the rest of the page still
   scrolls with a finger. */
.pa-handle {
  flex: none;
  padding: 6px 2px;
  color: var(--color-muted);
  letter-spacing: -3px;
  cursor: grab;
  touch-action: none;
}

.pa-text {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: pre;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.pa-controls {
  display: flex;
  flex: none;
  gap: 3px;
}

.pa-btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 2px 8px;
}

/* Fingers need bigger targets than a mouse does. */
@media (pointer: coarse) {
  .pa-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

.pa-program .pa-add,
.pa-pool .pa-up,
.pa-pool .pa-down,
.pa-pool .pa-remove {
  display: none;
}

.pa-empty {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.pa-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Code reading: dotted glossary words in the code, the note they open,
   and the two parts of the answer. The code block itself is the code-trace
   one (.ct-code, .ct-line). */
.cr-term {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dotted var(--color-accent-deep);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: help;
}

.cr-term:hover,
.cr-term[aria-expanded="true"] {
  background: var(--color-accent-soft);
}

.cr-hint {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.cr-note {
  margin: 6px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--color-line-strong);
  border-left: 3px solid var(--color-accent-deep);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-size: 0.875rem;
}

.cr-part + .cr-part {
  margin-top: 14px;
}

.cr-part__points {
  margin-left: 4px;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.cr-line-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
}

.cr-line-pick__no {
  flex: none;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.cr-line-pick code {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---------- Teacher: dashboard ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.dash {
  display: grid;
  gap: 12px;
  align-items: start;
}

.dash__side,
.dash__main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* The sidebar holds only the event list; the main area shows the chosen
   event or the new-event form. */
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.side-head h2 {
  font-size: 1.125rem;
}

.dash__back {
  justify-self: start;
}

/* A sidebar link to a page that is not an event, such as the question bank. */
.side-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.side-link:hover {
  background: var(--color-surface-2);
}

.side-link--active {
  border-left-color: var(--color-accent-deep);
  background: var(--color-accent-soft);
}

.bank__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 8px 10px;
  margin-bottom: 10px;
}

.bank__count {
  margin-bottom: 6px;
}

.form-actions--start {
  justify-content: flex-start;
}

/* On a phone or narrow window the list comes first. Opening an event or the
   form replaces it, and "All events" brings it back. */
@media (max-width: 999.98px) {
  .dash--open .dash__side,
  .dash:not(.dash--open) .dash__main {
    display: none;
  }
}

@media (min-width: 1000px) {
  .dash {
    grid-template-columns: 20rem minmax(0, 1fr);
  }

  .dash__side {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .dash__back {
    display: none;
  }

  /* The form has the main area's width: four short fields to a row, the two
     settings side by side, and the quick setup cards in two columns. */
  .dash__main .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dash__main .form-grid .setting {
    grid-column: span 2;
  }

  .dash__main .quick__list {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    align-items: start;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Event list */
.event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
}

.event-card:hover {
  background: var(--color-surface-2);
}

.event-card--active {
  border-left-color: var(--color-accent-deep);
  background: var(--color-accent-soft);
}

.event-card--active:hover {
  background: var(--color-accent-soft);
}

.event-card__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.event-card__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.event-card__owner {
  color: var(--color-ink-soft);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* An admin's event filter (ADR 0004): All teachers / Mine, then a teacher. */
.event-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
}

.segmented {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  overflow: hidden;
}

.segmented__btn {
  min-height: 1.875rem;
  padding: 3px 10px;
  border: 0;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
}

.segmented__btn + .segmented__btn {
  border-left: 1px solid var(--color-line-strong);
}

.segmented__btn:hover {
  background: var(--color-surface-2);
}

.segmented__btn[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  font-weight: 600;
}

.segmented__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.event-filter select {
  flex: 1 1 9rem;
  width: auto;
  min-width: 0;
  min-height: 1.875rem;
  padding: 3px 8px;
  font-size: 0.8125rem;
}

/* Results */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.attempts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.attempt {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-line);
}

.attempt__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) minmax(0, 2fr) auto auto;
  align-items: center;
  gap: 4px 12px;
}

.attempt__who {
  min-width: 0;
  overflow-wrap: anywhere;
}

.attempt__score {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
}

@media (max-width: 640px) {
  .attempt__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .attempt__row .row {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .attempt__row .btn {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
}

/* Event facts, settings edit and history */
.results-facts {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

/* An admin reading another teacher's event (ADR 0004). */
.read-only {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.edit-settings {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-surface-2);
}

.edit-settings .notice {
  margin: 8px 0 10px;
  background: var(--color-bg);
}

.edit-settings .form-actions {
  gap: 8px;
}

.history {
  margin: 0 0 10px;
}

.history summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.history__list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.history__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* AI answer review */
.ai-review {
  margin: 8px 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-line-strong);
  border-radius: 0 6px 6px 0;
  background: var(--color-surface-2);
}

.ai-review--attention {
  border-left-color: var(--status-warning);
}

.ai-review__answer {
  margin: 6px 0;
  color: var(--color-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-review__form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}

.ai-review__score {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-review__score input {
  width: 4.5rem;
}

.ai-review textarea {
  min-height: 2.25rem;
  height: 2.25rem;
}

@media (max-width: 640px) {
  .ai-review {
    margin-left: 0;
  }

  .ai-review__form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ai-review__form .field--feedback {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ai-review textarea {
    height: 4.5rem;
  }
}

/* Per-outcome summary */
.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table caption {
  padding: 12px 0 6px;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.data-table th,
.data-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-line);
  text-align: right;
  vertical-align: top;
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 0;
  text-align: left;
}

.data-table thead th {
  border-bottom-color: var(--color-line-strong);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.data-table td {
  font-variant-numeric: tabular-nums;
}

.data-table td:first-child {
  color: var(--color-ink);
}

.data-table .indent {
  padding-left: 16px;
}

.sort-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.sort-btn:hover {
  color: var(--color-ink);
}

/* ---------- Teacher: quick setup cards and event settings ---------- */

.quick {
  display: grid;
  gap: 8px;
  /* A fieldset is as wide as its min-content by default, so the question
     preview's code lines would push it past the column. */
  min-width: 0;
}

.quick > * {
  min-width: 0;
}

.quick__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preset {
  border: 1px solid var(--color-line);
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: var(--color-bg);
}

.preset--chosen {
  border-color: var(--color-line-strong);
  border-left-color: var(--color-accent-deep);
  background: var(--color-accent-soft);
}

.preset__pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
  padding: 6px 8px;
  cursor: pointer;
}

.preset__pick input {
  margin: 3px 0 0;
  accent-color: var(--color-accent-deep);
}

.preset__text {
  display: grid;
  min-width: 0;
}

.preset__label {
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.preset__desc {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.preset__count {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.quick__knobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 8px;
  padding: 0 8px 8px 30px;
}

.quick__who {
  grid-column: 1 / -1;
}

.setting {
  display: grid;
  align-content: start;
  gap: 6px;
}

.setting__options {
  display: grid;
  gap: 4px;
}

.setting__options .check input {
  accent-color: var(--color-accent-deep);
}

/* ---------- Teacher: advanced picker ---------- */

#advancedPicker {
  grid-column: 1 / -1;
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-surface-2);
}

#advancedPicker > summary {
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink);
}

.picker {
  display: grid;
  gap: 12px;
  padding: 0 10px 10px;
}

@media (min-width: 1000px) {
  .picker {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .picker__preview {
    position: sticky;
    top: 12px;
  }
}

.picker__filters {
  display: grid;
  gap: 12px;
}

.picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.picker__hint {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.picker__difficulty {
  display: flex;
  gap: 8px;
}

.picker__difficulty input {
  width: 5rem;
}

.picker__preview {
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  font-size: 0.875rem;
}

.preview-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  font-size: 0.8125rem;
}

.preview-facts dt {
  color: var(--color-muted);
}

.preview-facts dd {
  margin: 0;
  color: var(--color-ink);
}

.preview-list {
  max-height: 24rem;
  margin: 8px 0 0;
  padding: 0 0 0 20px;
  overflow: auto;
  font-size: 0.8125rem;
  color: var(--color-ink);
}

.preview-list li {
  padding: 1px 0;
}

.outcome-groups {
  display: grid;
  gap: 8px;
}

@media (min-width: 700px) {
  .outcome-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.outcome-group {
  padding: 6px 10px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
}

.outcome-group legend {
  padding: 0 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.outcome-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 0;
  color: var(--color-ink);
  font-size: 0.8125rem;
  cursor: pointer;
}

.outcome-option input {
  margin-top: 2px;
}

.tree {
  padding: 6px 10px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
}

.tree-branch > summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.tree-branch > summary::-webkit-details-marker {
  display: none;
}

.tree-branch > summary::before {
  content: "\25b8";
  flex: none;
  width: 1em;
  color: var(--color-muted);
}

.tree-branch[open] > summary::before {
  content: "\25be";
}

.tree-children,
.tree-leaf {
  margin-left: 1.2em;
}

.tree-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  color: var(--color-ink);
  font-size: 0.8125rem;
  cursor: pointer;
}

.tree-count {
  color: var(--color-muted);
  font-size: 0.75rem;
}

/* ---------- Teacher: compact question preview ---------- */

.qp__controls {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.qp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A column flex item's default min-width is content-based, not 0, so a wide
   descendant (the rubric table, say) would otherwise stretch the whole list
   to fit it instead of wrapping or scrolling inside its own block. */
.qp-list > li {
  min-width: 0;
}

.qp-row {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface-2);
}

.qp-row > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
}

.qp-row > summary::-webkit-details-marker {
  display: none;
}

.qp-row__num {
  flex: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.qp-row__title {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--color-ink);
}

.qp-row__body {
  padding: 4px 10px 12px;
  border-top: 1px solid var(--color-line);
}

.qp-row__body .prompt-text {
  margin-top: 8px;
}

.qp-row__body .pa-line {
  justify-content: space-between;
}

.qp-teacher {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px dashed var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-bg);
}

.qp-teacher__label {
  margin: 0 0 6px;
}

/* Same look as a real MCQ option, plus room to wrap onto a second line for
   the "Correct" tag on narrow screens, which the interactive .opt never
   needs. */
.qp-opt {
  flex-wrap: wrap;
  cursor: default;
}

.qp-opt .opt__text {
  flex: 1 1 0;
  min-width: 0;
}

/* The preview shows a question whole: no height cap on its code, grids and
   programs, unlike the short code boxes elsewhere on the page. */
.qp-row__body .codebox {
  max-height: none;
}

.qp-teacher p + p {
  margin-top: 6px;
}

.qp-rubric td:nth-child(2) {
  text-align: left;
}

.qp-glossary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  margin: 4px 0 0;
  font-size: 0.8125rem;
}

.qp-glossary dd {
  margin: 0;
}

/* Block grids side by side where they fit, each scrolling on its own if a
   grid is wider than the screen. */
.qp-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.qp-stage {
  min-width: 0;
  max-width: 100%;
}

.qp-grid {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  line-height: 1.2;
  letter-spacing: 0.2em;
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  .wrap {
    padding: 12px 12px 24px;
  }

  .card:not(.card--flush) {
    padding: 12px;
  }

  .q-strip {
    margin: -12px -12px 10px;
    padding: 6px 12px;
  }

  .q-strip__event {
    display: none;
  }

  /* A long row of question buttons scrolls sideways rather than taking
     several lines of the sticky strip. */
  .progress--jump {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .progress--jump li {
    flex: none;
  }

  .stats {
    gap: 6px;
  }

  /* Score and status go above the question on a phone, so the answer text
     gets the full width. */
  .result-row {
    flex-direction: column;
    gap: 4px;
  }

  .result-row__side {
    order: -1;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }

  .stat {
    padding: 6px 8px;
  }

  .stat dd {
    font-size: 1.1rem;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Question bank review workbench ---------- */

/* The index of every question beside the review pane; stacked on a narrow
   screen. The list scrolls on its own so the pane stays in reach. */
.qr {
  display: grid;
  gap: 12px;
  align-items: start;
}

.qr-index,
.qr-pane {
  min-width: 0;
}

/* Stacked, the list is capped so the pane is not a long scroll away. */
.qr-index {
  max-height: 18rem;
  overflow-y: auto;
}

.qr-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qr-row {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.qr-row:hover {
  border-color: var(--color-line-strong);
}

.qr-row[aria-current="true"] {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent-deep);
}

/* A retired question stays in the list, dimmed; its badge says why. */
.qr-row--retired .qr-row__title {
  color: var(--color-muted);
  text-decoration: line-through;
}

.qr-row__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--color-ink);
}

.qr-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.qr-pane {
  display: grid;
  gap: 12px;
}

.qr-student {
  display: grid;
  gap: 12px;
}

.qr-practice {
  margin-bottom: 8px;
}

.qr-key__body {
  margin-top: 8px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface-2);
}

.qr-key__body[hidden] {
  display: none;
}

.qr-empty {
  padding: 24px 8px;
  text-align: center;
}

@media (min-width: 1000px) {
  .qr {
    grid-template-columns: 17rem minmax(0, 1fr);
  }

  .qr-index {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
}

/* Event composition: the count by response type and a difficulty histogram
   (one series, so one colour and no legend). Columns are at most 24px wide
   with a 4px rounded top and a square base, the count sits on the cap. */
.composition {
  margin: 0 0 12px;
}

.composition__types {
  margin: 0 0 8px;
}

.dh {
  margin: 0;
}

.dh__caption {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

.dh__cols {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dh__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
}

.dh__count,
.dh__level {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.dh__slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-bottom: 1px solid var(--color-line-strong);
}

.dh__bar {
  width: 24px;
  border-radius: 4px 4px 0 0;
  background: var(--color-accent);
}