@layer components {
  /* Staff responses list */
  .responses-filter { margin-block-end: var(--space-4); }

  .responses-classroom-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* States only set --responses-tab-*. */
  .responses-classroom-tab {
    --responses-tab-background: transparent;
    --responses-tab-border-color: var(--color-border);
    --responses-tab-color: var(--color-text-muted);

    background-color: var(--responses-tab-background);
    border: 1px solid var(--responses-tab-border-color);
    border-radius: var(--radius-full);
    color: var(--responses-tab-color);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    text-decoration: none;
    transition: background-color 150ms, color 150ms;

    &:hover {
      --responses-tab-background: var(--color-surface-raised);
      --responses-tab-color: var(--color-text);
    }
    &.active {
      --responses-tab-background: var(--color-accent);
      --responses-tab-border-color: var(--color-accent);
      --responses-tab-color: white;
    }
  }

  .responses-table {
    border-collapse: collapse;
    font-size: var(--text-sm);
    inline-size: 100%;

    th {
      border-block-end: 2px solid var(--color-border);
      color: var(--color-text-muted);
      font-weight: 600;
      padding: var(--space-2) var(--space-3);
      text-align: start;
    }
    td {
      border-block-end: 1px solid var(--color-border);
      padding: var(--space-3);
      vertical-align: middle;
    }
    tr:last-child td { border-block-end: none; }
  }

  /* ── Responses list: score column ── */
  .responses-score-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .responses-score { font-weight: 600; }
  .responses-score-total {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .responses-score-none {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
  }

  /* Response review (staff read-only attempt view) */
  .response-review {
    max-inline-size: 1100px;

    .student-question-card { max-inline-size: 100%; }
  }
  .response-review-page-heading {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: var(--space-6) 0 var(--space-3);
    text-transform: uppercase;
  }

  .item-choices-fieldset--readonly {
    border: none;
    margin: 0;
    padding: 0;
  }
  .item-choice-label--selected {
    color: var(--color-text);
    font-weight: 600;
  }
  .item-choice-label--correct {
    background: var(--color-success-surface);
    color: light-dark(oklch(30% 0.12 145), var(--color-success-text));
    font-weight: 600;
  }
  .item-choice-label--incorrect {
    color: var(--color-danger);
    font-weight: 600;
  }
  .item-choice-result-icon { margin-inline-start: var(--space-1); }

  .item-no-response {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
  }

  .idb-run-failures {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-block: var(--space-2) 0;
  }

  .item-readonly-richtext {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
  }
  .item-readonly-code {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: auto;

    pre {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      margin: 0;
      padding: var(--space-3);
      white-space: pre-wrap;
      word-break: break-word;
    }
  }

  .dropdown-readonly-value {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: inline-block;
    font-weight: 500;
    padding-block: 0;
    padding-inline: var(--space-2);
  }
  .dropdown-readonly-value--correct {
    background-color: light-dark(oklch(90% 0.08 145), var(--color-success-surface));
    border-color: oklch(72% 0.12 145);
  }
  .dropdown-readonly-value--incorrect {
    background-color: var(--color-danger-surface);
    border-color: var(--color-danger);
  }

  .table-readonly-indicator {
    display: block;
    font-weight: 700;
    text-align: center;
  }
  .table-readonly-indicator--correct { color: var(--color-success); }
  .table-readonly-indicator--incorrect { color: var(--color-danger); }
  .table-select-cell--correct { background-color: light-dark(oklch(88% 0.09 145), var(--color-success-surface)); }
  .table-select-cell--incorrect { background-color: var(--color-danger-surface); }

  /* Side-by-side student / answer panels */
  .response-sidebyside {
    align-items: start;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;

    @media (max-width: 700px) { grid-template-columns: 1fr; }
  }
  .response-sidebyside__panel { min-inline-size: 0; }
  .response-sidebyside__panel--answer {
    background-color: light-dark(oklch(97% 0.01 145), var(--color-success-surface));
    border: 1px solid light-dark(oklch(88% 0.05 145), oklch(0.40 0.06 145));
    border-radius: var(--radius-sm);
    padding: var(--space-3);
  }
  .response-sidebyside__label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
  }
  .response-sidebyside__label--answer { color: light-dark(oklch(38% 0.12 145), var(--color-success-text)); }

  .response-answer-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0 0 var(--space-1);
  }
  .response-answer-dropdown {
    align-items: center;
    display: flex;
    font-size: var(--text-sm);
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
  }

  /* Run block (python / sql execution in staff review) */
  .response-run-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }
  .response-run-status {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .response-run-output { margin-block-start: var(--space-1); }
  .response-run-pre {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
  }
  .response-run-pre--stderr {
    background-color: light-dark(oklch(96% 0.03 25), var(--color-danger-surface));
    border-color: light-dark(oklch(85% 0.06 25), oklch(0.45 0.10 25));
    color: light-dark(oklch(35% 0.15 25), var(--color-danger-text));
  }

  .idb-result-table-wrap { overflow-x: auto; }

  .page-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-block-start: var(--space-1);
  }

  /* ── Staff response review: score summary header ── */
  .response-score-summary {
    align-items: baseline;
    display: flex;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
  }
  .response-score-value {
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
  }
  .response-score-denom {
    color: var(--color-text-muted);
    font-size: 1rem;
  }
  .response-score-partial {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    margin-inline-start: var(--space-2);
  }

  /* ── Per-item marking result block ── */
  .item-marking-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }
  .item-marking-score {
    align-items: center;
    display: flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: var(--space-2);
  }
  .item-marking-score--no-attempt { color: var(--color-text-muted); }
  .item-marking-score--pending {
    color: var(--color-text-muted);
    font-style: italic;
  }
  .item-marking-no-attempt {
    font-size: var(--text-sm);
    font-weight: 400;
    margin-inline-start: var(--space-1);
  }
  .item-marking-comment {
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    margin: 0;
    padding: 0;
  }

  /* ── No attempt banner (readonly partial) ── */
  .no-attempt-banner {
    background: light-dark(oklch(94% 0.04 55), var(--color-warning-surface));
    border: 1px solid light-dark(oklch(80% 0.08 55), oklch(0.45 0.08 55));
    border-radius: var(--radius-sm);
    color: light-dark(oklch(40% 0.12 55), var(--color-warning-text));
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-block-end: var(--space-2);
    padding: 0.2em 0.6em;
    text-transform: uppercase;
  }

  /* ── No attempt checkbox (marker views) ── */
  .marker-no-attempt-label {
    align-items: center;
    color: light-dark(oklch(40% 0.12 55), var(--color-warning-text));
    cursor: pointer;
    display: flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: var(--space-2);
    margin-block-end: var(--space-1);
  }
  .marker-no-attempt-checkbox {
    block-size: 1rem;
    cursor: pointer;
    inline-size: 1rem;
  }

  /* ── Student review flag. States only set --btn-flag-*. ── */
  .results-flag-wrap { margin-block-start: var(--space-3); }

  .btn-flag {
    --btn-flag-background: none;
    --btn-flag-border-color: var(--color-border);
    --btn-flag-color: var(--color-text-muted);

    background: var(--btn-flag-background);
    border: 1px solid var(--btn-flag-border-color);
    border-radius: var(--radius-sm);
    color: var(--btn-flag-color);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 0.3em 0.8em;
    transition: color 150ms, border-color 150ms, background 150ms;

    &:hover {
      --btn-flag-border-color: oklch(65% 0.15 250);
      --btn-flag-color: light-dark(oklch(40% 0.15 250), oklch(0.85 0.08 250));
    }
  }
  .btn-flag--active {
    --btn-flag-background: light-dark(oklch(94% 0.06 250), oklch(0.30 0.06 250));
    --btn-flag-border-color: oklch(65% 0.15 250);
    --btn-flag-color: light-dark(oklch(35% 0.18 250), oklch(0.85 0.08 250));

    font-weight: 600;
  }

  .flag-reason-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }
  .flag-reason-label {
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .flag-reason-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    inline-size: 100%;
    padding: var(--space-2);
    resize: vertical;
  }
  .flag-reason-actions {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  /* ── Staff: review flag notice ── */
  .review-flag-notice {
    align-items: baseline;
    background: light-dark(oklch(94% 0.06 250), oklch(0.30 0.06 250));
    border: 1px solid light-dark(oklch(75% 0.12 250), oklch(0.45 0.08 250));
    border-radius: var(--radius-sm);
    color: light-dark(oklch(35% 0.18 250), oklch(0.85 0.08 250));
    display: flex;
    font-size: var(--text-sm);
    gap: var(--space-2);
    margin-block-end: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }
  .review-flag-icon { font-size: 1rem; }
}