/* ABOUTME: Engineering-pad skin for numdamentals — quadrille grid, ink/paper palette, three-voice type. */
/* ABOUTME: Mobile-first (16px inputs, ~44px targets, no page overflow); pen-marked feedback; a11y focus + reduced-motion. */

:root {
  font-size: 100%; /* 16px base — no iOS zoom on input focus */
  --paper: #fbfcfe;
  --grid: #e3ebf6;
  --ink: #14213d;
  --muted: #5c6a85;
  --line: #d8e0ee;
  --accent: #2b39c9;
  --accent-tint: #ecefff;
  --correct: #0f7a54;
  --correct-bg: #e8f6ef;
  --wrong: #d23b22;
  --wrong-bg: #fdecea;
  --measure: 44rem;
  --pad: 1rem;
  --touch: 2.75rem; /* ~44px */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  /* Quadrille grid substrate — pure CSS graph paper. */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

header,
main,
footer {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--pad);
}

header {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--ink);
  background: transparent;
}

footer {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* Wordmark: num as a mono number-tile, damentals in ink. */
.brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}

.num-tile {
  font-family: var(--mono);
  font-weight: 700;
  background: var(--accent);
  color: var(--paper);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  margin-right: 2px;
}

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

img,
svg,
.katex-display {
  max-width: 100%;
}

/* Eyebrows and block labels: the mono utility voice. */
.eyebrow,
.block-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.25rem;
}

/* Lesson index as a numbered problem set. */
.lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: lesson;
}

.lesson-list li {
  counter-increment: lesson;
}

.lesson-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  min-height: var(--touch);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.lesson-list a::before {
  content: counter(lesson, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.lesson-list a:hover {
  color: var(--accent);
}

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

/* Content blocks. */
section {
  margin-block: 1.75rem;
}

.exposition {
  /* Sits directly on the grid — reading maths on graph paper. */
}

/* Cards lift problems off the grid onto solid paper. */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(20, 33, 61, 0.04);
  margin-block: 1rem;
}

.q-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.q-marker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.18rem 0.42rem;
  border-radius: 4px;
  margin-top: 0.15rem;
  white-space: nowrap;
}

.q-row .problem {
  flex: 1;
  min-width: 0;
}

.prompt {
  margin: 0 0 0.6rem;
}

/* Answer input: the mono precision voice, touch-friendly, 16px. */
.answer {
  width: 100%;
  min-height: var(--touch);
  padding: 0.5rem 0.7rem;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #b7c0d4;
  border-radius: 6px;
}

.options {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--touch);
  padding: 0.35rem 0;
}

.option input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent);
}

button[type="submit"] {
  min-height: var(--touch);
  margin-top: 0.75rem;
  padding: 0.55rem 1.2rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #212ea8;
}

/* Pen-marked feedback: a coloured left stroke, like a teacher's pen. */
.feedback,
.outcome,
.quiz-results li {
  border-left: 4px solid var(--muted);
  border-radius: 0 6px 6px 0;
  padding: 0.55rem 0.8rem;
  margin-top: 0.7rem;
  background: #f3f6fb;
  animation: markin 0.2s ease-out;
}

.feedback.correct,
.outcome.correct,
.quiz-results li.correct {
  border-left-color: var(--correct);
  background: var(--correct-bg);
  color: var(--correct);
}

.feedback.incorrect,
.outcome.incorrect,
.quiz-results li.incorrect {
  border-left-color: var(--wrong);
  background: var(--wrong-bg);
  color: var(--wrong);
}

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

/* On-demand hint: native <details> disclosure, no JavaScript. */
.hint-box {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

.hint-box > summary {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  cursor: pointer;
  display: inline-block;
  padding: 0.15rem 0;
  min-height: 1.75rem;
}

.hint-box[open] > summary {
  margin-bottom: 0.25rem;
}

.hint-text {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 6px 6px 0;
  color: var(--ink);
}

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

.quiz-results {
  list-style: none;
  padding: 0;
}

.result .eyebrow {
  margin-bottom: 0.35rem;
}

/* Accessibility floor: visible keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.lesson-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@keyframes markin {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Respect reduced-motion: no non-essential animation. */
@media (prefers-reduced-motion: reduce) {
  .feedback,
  .outcome,
  .quiz-results li {
    animation: none;
  }
}

/* Tablet / desktop. */
@media (min-width: 48rem) {
  :root {
    --pad: 1.5rem;
    --measure: 48rem;
  }

  h1 {
    font-size: 2rem;
  }
}