/*
 * Styles for the student and teacher apps.
 *
 * Accessibility commitments (WCAG 2.1 AA), made concrete:
 *   - Every text/background pair below meets 4.5:1; large text meets 3:1.
 *   - Focus is ALWAYS visible. No `outline: none` anywhere in this file.
 *   - Colour never carries meaning alone: pass/fail states have an icon and a
 *     word as well as a colour.
 *   - `prefers-reduced-motion` disables every transition and animation.
 *   - Hit targets are at least 44x44 CSS px.
 *   - Body text is 17px with a 1.65 line height, and layout is fluid down to
 *     320px so lesson prose is readable on a phone.
 */

/* ---------------------------------------------------------------- */
/* Tokens                                                            */
/* ---------------------------------------------------------------- */

:root {
  /* A light, cheerful palette: warm cream background, sun-orange accent.
     Every text/background pair below is checked at >= 4.5:1 (large text
     >= 3:1) with the WCAG relative-luminance formula -- see .wizard history
     for the exact ratios computed while choosing these. */
  --bg: #fff8ee;
  --bg-subtle: #fff1dc;
  --surface: #ffffff;
  --fg: #2b2140;
  --muted: #5b4a70;
  --border: #ead9bf;

  --accent: #c7440c;
  --accent-fg: #ffffff;
  --accent-subtle: #ffe8d6;

  --pass: #0b6b3a;
  --pass-bg: #e3f6e9;
  --fail: #9c2320;
  --fail-bg: #fdeceb;
  --warn: #7a4b06;
  --warn-bg: #fff3d6;

  --focus: #b34700;

  --editor-bg: #fffdf7;
  --editor-fg: #2b2140;
  --editor-gutter: #fff3e0;
  /* Semi-transparent on purpose: CodeMirror paints the selection layer at
     z-index -2, BEHIND the line, so an opaque active line hides the selection
     on the one line you are always selecting on. */
  --editor-active: rgba(199, 68, 12, 0.08);
  /* CodeMirror's own caret is black and its selection is a pale lavender,
     both hard-coded for a light editor. Ours follow the page theme instead. */
  --editor-caret: #2b2140;
  --editor-selection: #ffd9b3;
  --editor-match: rgba(255, 196, 61, 0.45);

  /* Syntax colours. Every one of these is >= 4.5:1 against --editor-bg. */
  --tok-keyword: #8118a8;
  --tok-name: #2b2140;
  --tok-function: #b34700;
  --tok-constant: #7a4b06;
  --tok-type: #0b6b6e;
  --tok-operator: #4a4358;
  --tok-string: #a11111;
  --tok-comment: #6b6478;
  --tok-invalid: #9c2320;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(43, 33, 64, 0.06), 0 4px 12px rgba(43, 33, 64, 0.06);
  --measure: 68ch;
}

:root[data-theme='dark'] {
  --bg: #10141a;
  --bg-subtle: #171d26;
  --surface: #1a212b;
  --fg: #e9edf3;
  --muted: #a2aebd;
  --border: #2f3947;

  /* Same warm family as the light theme's accent, retuned for a dark ground. */
  --accent: #ffb37a;
  --accent-fg: #241200;
  --accent-subtle: #33231a;

  --pass: #6cd39a;
  --pass-bg: #12281d;
  --fail: #ff9a92;
  --fail-bg: #2c1614;
  --warn: #f0c274;
  --warn-bg: #2b2113;

  --focus: #ffb060;

  --editor-bg: #141a22;
  --editor-fg: #e9edf3;
  --editor-gutter: #171e27;
  --editor-active: rgba(255, 179, 122, 0.1);
  --editor-caret: #e9edf3;
  --editor-selection: #2b4a72;
  --editor-match: rgba(255, 196, 61, 0.26);

  --tok-keyword: #cf9bf0;
  --tok-name: #e9edf3;
  --tok-function: #ffb37a;
  --tok-constant: #f0c274;
  --tok-type: #6cd39a;
  --tok-operator: #c3cdda;
  --tok-string: #ff9a92;
  --tok-comment: #a2aebd;
  --tok-invalid: #ff9a92;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------- */
/* Focus and skip link                                               */
/* ---------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

.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;
}

/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.container-narrow {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

main {
  flex: 1;
}

.site-header {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  /* Keeps the logo+wordmark from being squeezed by neighboring flex items in
     .site-header-inner at narrow widths. */
  min-width: max-content;
}

.brand-logo {
  display: block;
  border-radius: 6px;
  flex-shrink: 0;
}

.wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.course-switcher {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* An explicit `display` above would otherwise outrank the UA stylesheet's
   `[hidden] { display: none }` -- found while auditing the same footgun in
   .certificate-link and .btn-google during this change. */
.course-switcher[hidden] {
  display: none;
}
.course-switcher .btn[aria-pressed="true"] {
  background: var(--accent, var(--fg));
  color: var(--bg);
}

.identity {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  flex-wrap: wrap;
}
/* Same footgun as .course-switcher/.certificate-link/.btn-google below: an
   explicit `display` here would otherwise outrank `[hidden] { display: none }`,
   leaving a signed-out visitor looking at an empty identity bar with a
   "Sign out" button in it. */
.identity[hidden] {
  display: none;
}
.identity-name {
  color: var(--fg);
  font-weight: 600;
}

.identity-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  object-fit: cover;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-google[hidden] {
  display: none;
}
.google-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.join-class {
  margin: 1.25rem 0;
}
.join-class summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.join-class form {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.certificate-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
  text-decoration: none;
}
/* An explicit `display` above would otherwise outrank the UA stylesheet's
   `[hidden] { display: none }`, leaving the link visible while "hidden". */
.certificate-link[hidden] {
  display: none;
}

.site-header .identity + .btn {
  margin-left: 0;
}
.site-header-inner > #theme-toggle {
  margin-left: auto;
}
.identity ~ #theme-toggle {
  margin-left: 0;
}

.python-status {
  margin: 0;
  padding: 0.5rem 1.25rem;
  background: var(--accent-subtle);
  color: var(--fg);
  font-size: 0.9rem;
  text-align: center;
}
.python-status.is-warning {
  background: var(--warn-bg);
  color: var(--warn);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------------------------------------------------------------- */
/* Typography                                                        */
/* ---------------------------------------------------------------- */

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.2em 0 0.5em;
}
h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.25;
  margin: 2.25rem 0 0.75rem;
}
h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.5rem;
}
h1:focus,
h2:focus {
  outline: none; /* programmatic focus for screen readers; not keyboard-reachable */
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
}

.lede {
  font-size: 1.1rem;
  color: var(--muted);
}

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

.fine-print {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.prose {
  max-width: var(--measure);
}
.prose p,
.prose li {
  font-size: 1.02rem;
}
.prose code {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  display: block;
  overflow-x: auto;
}
.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: left;
}
.prose blockquote {
  border-left: 4px solid var(--accent);
  margin: 1rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--muted);
}
.prose .admonition {
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  background: var(--warn-bg);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
}
.prose .admonition-title {
  font-weight: 700;
  margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Buttons and forms                                                 */
/* ---------------------------------------------------------------- */

.btn {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn:hover:not(:disabled) {
  background: var(--bg-subtle);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  background: var(--accent);
}
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-quiet:hover:not(:disabled) {
  color: var(--fg);
  background: var(--bg-subtle);
}
.btn-small {
  min-height: 36px;
  padding: 0.3rem 0.7rem;
  font-size: 0.875rem;
}
.btn-danger {
  border-color: var(--fail);
  color: var(--fail);
}

.field {
  margin-bottom: 1.25rem;
}
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
}
.field textarea {
  min-height: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.field-help {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.form-error {
  background: var(--fail-bg);
  color: var(--fail);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- */
/* Course map                                                        */
/* ---------------------------------------------------------------- */

.progress-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 2rem;
}
.progress-track {
  height: 12px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 300ms ease;
}
.progress-text {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
}
.streak {
  margin: 0.35rem 0 0;
  color: var(--pass);
  font-weight: 600;
  font-size: 0.9rem;
}

.lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.85rem;
}
.block-heading {
  grid-column: 1 / -1;
  margin: 1.75rem 0 0.25rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.lesson-card {
  display: flex;
}
.lesson-card-inner {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 120ms ease, border-color 120ms ease;
}
button.lesson-card-inner:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.lesson-card.is-locked .lesson-card-inner {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  background: var(--bg-subtle);
}
.lesson-card.is-complete .lesson-card-inner {
  border-left: 4px solid var(--pass);
}
.lesson-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.lesson-title {
  font-weight: 650;
  font-size: 1.05rem;
}
.lesson-summary {
  color: var(--muted);
  font-size: 0.9rem;
}
.lesson-status {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.lesson-card.is-complete .lesson-status {
  color: var(--pass);
}
.lesson-card.is-locked .lesson-status {
  color: var(--muted);
}

.back-link {
  margin-bottom: 0.5rem;
}

.objectives {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.5rem;
  background: var(--bg-subtle);
}
.objectives summary {
  cursor: pointer;
  font-weight: 600;
}
.objective-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}

/* ---------------------------------------------------------------- */
/* Runnable examples                                                 */
/* ---------------------------------------------------------------- */

.example {
  margin: 1.5rem 0;
}
.example-editor {
  max-height: 26rem;
  overflow: auto;
}
.example-bar {
  margin-top: 0.5rem;
}
.example-output {
  margin: 0.5rem 0 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  overflow-x: auto;
}
.example-output.has-error {
  border-left-color: var(--fail);
  background: var(--fail-bg);
  color: var(--fail);
}

/* ---------------------------------------------------------------- */
/* Concept checks                                                    */
/* ---------------------------------------------------------------- */

.concept-check {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 1rem;
  max-width: var(--measure);
}
.concept-check legend {
  font-weight: 650;
  padding: 0 0.35rem;
}
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0;
  min-height: 44px;
}
.radio-row input {
  margin-top: 0.45rem;
  width: 20px;
  height: 20px;
  flex: none;
}
.radio-row label {
  cursor: pointer;
  padding-top: 0.2rem;
}
.concept-feedback {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
}
.concept-feedback:empty {
  display: none;
}
.concept-feedback.is-correct {
  background: var(--pass-bg);
  color: var(--pass);
}
.concept-feedback.is-wrong {
  background: var(--warn-bg);
  color: var(--warn);
}

/* ---------------------------------------------------------------- */
/* Exercises                                                         */
/* ---------------------------------------------------------------- */

.exercise {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.exercise h3 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.exercise-prompt {
  white-space: pre-wrap;
  max-width: var(--measure);
  margin-bottom: 1rem;
}
.hidden-note {
  background: var(--accent-subtle);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  max-width: var(--measure);
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.badge-passed {
  background: var(--pass-bg);
  color: var(--pass);
  border-color: currentColor;
}
.badge-hidden {
  background: var(--bg-subtle);
}
.badge-guided {
  background: var(--accent-subtle);
  color: var(--accent);
}
.badge-synthesis {
  background: var(--warn-bg);
  color: var(--warn);
}

.editor-host {
  height: 22rem;
  margin-bottom: 0.4rem;
}
.editor-host .cm-editor {
  height: 100%;
}

/* CodeMirror decides "light" or "dark" from the theme it was built with, not
   from the page, so a page-level theme swap leaves it drawing a black caret on
   a dark editor (invisible) and a pale lavender selection over pale text
   (unreadable). These rules take both colours from our own variables, which do
   follow the page theme. The selection selector deliberately matches the shape
   and specificity of CodeMirror's own focused-selection rule -- anything less
   loses to it. */
.cm-editor .cm-cursor,
.cm-editor .cm-dropCursor {
  border-left-color: var(--editor-caret);
  border-left-width: 2px;
}
.cm-editor .cm-selectionLayer .cm-selectionBackground,
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
  background: var(--editor-selection);
}
/* highlightSelectionMatches (part of basicSetup) washes every other copy of the
   selected word in a fixed #99ff7780 green, which over a dark editor reads as a
   pale block sitting on top of the text. */
.cm-editor .cm-selectionMatch {
  background-color: var(--editor-match);
}
/* Leave ::selection alone: CodeMirror sets it transparent on purpose, because
   drawSelection paints the layer above instead. Colouring both muddies them. */
.editor-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.controls-note {
  flex-basis: 100%;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: var(--measure);
}

.console {
  margin: 1rem 0 0;
  background: var(--editor-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  max-height: 20rem;
  overflow: auto;
}
.console.has-error {
  border-color: var(--fail);
  background: var(--fail-bg);
  color: var(--fail);
}

/* ---------------------------------------------------------------- */
/* Results                                                           */
/* ---------------------------------------------------------------- */

.results {
  margin-top: 1rem;
}
.result-banner {
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
}
.result-banner p {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
}
.result-banner.is-pass {
  background: var(--pass-bg);
  border-left-color: var(--pass);
  color: var(--pass);
}
.result-banner.is-partial {
  background: var(--warn-bg);
  border-left-color: var(--warn);
  color: var(--warn);
}
.result-banner.is-error {
  background: var(--fail-bg);
  border-left-color: var(--fail);
  color: var(--fail);
}

.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.result {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.result-icon {
  font-weight: 700;
  flex: none;
  width: 1.2em;
  text-align: center;
}
.result-passed .result-icon {
  color: var(--pass);
}
.result-failed .result-icon {
  color: var(--fail);
}
.result-skipped .result-icon,
.result-errored .result-icon {
  color: var(--muted);
}
.result-main {
  min-width: 0;
  flex: 1;
}
.result-name {
  font-weight: 600;
}
.result-message {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.result-error {
  background: var(--fail-bg);
  color: var(--fail);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.result-detail {
  margin-top: 0.5rem;
  font-size: 0.88rem;
}
.result-detail summary {
  cursor: pointer;
  color: var(--accent);
  min-height: 32px;
}
.result-detail dl {
  margin: 0.4rem 0 0;
}
.result-detail dt {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.result-detail dd {
  margin: 0.15rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--editor-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  overflow-x: auto;
}

.history {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.history summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  min-height: 32px;
}
.attempt-list {
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
  color: var(--muted);
}

.teacher-feedback {
  margin-top: 1rem;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--accent-subtle);
  padding: 0.75rem 0.95rem;
}
.teacher-feedback p {
  margin: 0.3rem 0 0;
}

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

.toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}
.toolbar .field {
  margin-bottom: 0;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.15rem 1.3rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

.join-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  display: inline-block;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}
table.grid th,
table.grid td {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}
table.grid thead th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  z-index: 1;
}
table.grid tbody tr:hover {
  background: var(--bg-subtle);
}
.cell-pass {
  background: var(--pass-bg);
  color: var(--pass);
  font-weight: 700;
  text-align: center;
}
.cell-fail {
  background: var(--fail-bg);
  color: var(--fail);
  text-align: center;
}
.cell-none {
  color: var(--muted);
  text-align: center;
}

.heat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.3rem;
}
.heat-cell {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem;
  font-size: 0.7rem;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- */
/* Motion and print                                                  */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 40rem) {
  .container,
  .container-narrow {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .editor-host {
    height: 18rem;
  }
  .controls .btn {
    flex: 1 1 auto;
  }
}

/* Forced-colors (Windows High Contrast): let the OS palette win, but keep
   borders so structure survives. */
@media (forced-colors: active) {
  .btn,
  .card,
  .exercise,
  .result,
  .lesson-card-inner {
    border: 1px solid CanvasText;
  }
  .progress-bar {
    background: Highlight;
  }
}