/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover {
  background: var(--bg-hover);
}
.btn[aria-current='page'],
.btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 500;
}
.btn-primary:hover {
  filter: brightness(1.08);
  background: var(--accent);
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover {
  background: var(--bg-hover);
}
.btn-icon {
  padding: 6px 9px;
  font-size: var(--fs-sm);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Cards and chips */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.card-sunken {
  background: var(--bg-sunken);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  white-space: nowrap;
}
.chip-row {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-block: var(--sp-2);
}

/* Difficulty dots */
.difficulty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.difficulty i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}
.difficulty[data-level='1'] i:nth-child(1) {
  background: var(--d1);
}
.difficulty[data-level='2'] i:nth-child(-n + 2) {
  background: var(--d2);
}
.difficulty[data-level='3'] i {
  background: var(--d3);
}

.star {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-faint);
  padding: 0 2px;
}
.star[aria-pressed='true'] {
  color: var(--d2);
}

/* Task panel */
.task-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.task-number {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.statement {
  font-size: var(--fs-md);
}
.statement p:last-child {
  margin-block-end: 0;
}

.answer-format {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-sunken);
  font-size: var(--fs-sm);
  margin-block: var(--sp-3);
}
.answer-format strong {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  font-weight: 500;
}

.graded-on {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin-block-end: var(--sp-3);
}

/* Hint ladder */
.ladder {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--sp-3);
  margin-block-start: var(--sp-3);
}
.ladder-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-block-end: var(--sp-2);
  overflow: hidden;
}
.ladder-item > button {
  width: 100%;
  text-align: start;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-panel);
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-sm);
}
.ladder-item > button:hover:not(:disabled) {
  background: var(--bg-hover);
}
.ladder-item > button:disabled {
  cursor: not-allowed;
  color: var(--text-faint);
}
.ladder-lock {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.ladder-body {
  padding: var(--sp-3);
  border-block-start: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: var(--fs-sm);
}

/* Work area */
.work {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.work-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.work-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

.field-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-2);
  flex-wrap: wrap;
}
.field-label {
  min-width: 2.5em;
  font-weight: 500;
}

/* Math input is always LTR, whatever the page direction is. */
.math-input {
  direction: ltr;
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  min-width: 0;
  flex: 1;
}
.math-input:focus {
  border-color: var(--accent);
}
.math-input.is-wide {
  width: 100%;
}

.preview {
  min-height: 2.2em;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.preview-label {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.keypad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-start: var(--sp-2);
}
.keypad button {
  font-family: var(--font-mono);
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  direction: ltr;
}
.keypad button:hover {
  background: var(--bg-hover);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.choice-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.choice-option:hover {
  background: var(--bg-hover);
}
.choice-option input {
  accent-color: var(--accent);
}

/* Result strip */
.result {
  border-radius: var(--radius);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: var(--fs-sm);
}
.result[data-verdict='correct'] {
  background: var(--ok-soft);
  border-color: var(--ok);
}
.result[data-verdict='partial'] {
  background: var(--warn-soft);
  border-color: var(--warn);
}
.result[data-verdict='incorrect'] {
  background: var(--err-soft);
  border-color: var(--err);
}
.result[data-verdict='invalid'] {
  background: var(--bg-sunken);
  border-color: var(--border-strong);
}
.result-head {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-1);
}
.result ul {
  margin: 0;
  padding-inline-start: 1.2em;
}
.result li + li {
  margin-block-start: 4px;
}

/* Reference panel */
.formula-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  margin-block-end: var(--sp-2);
  background: var(--bg-panel);
}
.formula-card button {
  border: 0;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: start;
  padding: 0;
}
.formula-card .formula-title {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  display: block;
}
.formula-card .formula-note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  display: block;
  margin-block-start: 4px;
}
.formula-group {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-transform: none;
  margin-block: var(--sp-3) var(--sp-1);
  font-weight: 700;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: start;
}
.table th {
  background: var(--bg-sunken);
  font-weight: 500;
  color: var(--text-soft);
}
.table tbody tr:hover {
  background: var(--bg-hover);
}
.table-wrap {
  overflow-x: auto;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  margin-inline-end: 6px;
}
.status-dot[data-status='solved'] {
  background: var(--ok);
}
.status-dot[data-status='first-try'] {
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--ok-soft);
}
.status-dot[data-status='attempted'] {
  background: var(--warn);
}

.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-sunken);
  overflow: hidden;
  min-width: 80px;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--ok);
}

.empty {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  padding: var(--sp-4);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.toast {
  position: fixed;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  z-index: 50;
}

.topic-tree {
  font-size: var(--fs-sm);
}
.topic-tree details {
  margin-block-end: var(--sp-2);
}
.topic-tree summary {
  cursor: pointer;
  font-weight: 500;
  padding: 4px 0;
}
.topic-tree ul {
  list-style: none;
  padding-inline-start: var(--sp-3);
  margin: 0;
}
.topic-tree li {
  padding: 2px 0;
}
.topic-tree a {
  text-decoration: none;
  color: var(--text);
}
.topic-tree a:hover {
  text-decoration: underline;
}
.topic-tree .is-planned {
  color: var(--text-faint);
}

.filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-block-end: var(--sp-3);
}
select,
input[type='search'],
input[type='text'] {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
}

/* The keypad reads left to right even on an RTL page: it is maths, not prose. */
.keypad {
  direction: ltr;
  justify-content: flex-start;
}

.answer-format p,
.graded-on p {
  margin: 0;
}

/* Lessons */
.lesson {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-md);
  line-height: 1.75;
}
.lesson h1 {
  margin-block-end: var(--sp-4);
}
.lesson h2 {
  margin-block: var(--sp-5) var(--sp-2);
  padding-block-end: var(--sp-1);
  border-block-end: 1px solid var(--border);
}
.lesson h3 {
  margin-block: var(--sp-4) var(--sp-2);
  color: var(--text-soft);
}
.lesson table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-3);
  font-size: var(--fs-sm);
}
.lesson th,
.lesson td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: start;
  vertical-align: top;
}
.lesson th {
  background: var(--bg-sunken);
  font-weight: 500;
}
.lesson blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.lesson blockquote p {
  margin: 0;
}
.lesson ul,
.lesson ol {
  padding-inline-start: 1.4em;
}
.lesson .math-block {
  margin-block: var(--sp-3);
}

/* Figures */
.figure {
  direction: ltr;
}
.figure-holder {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  margin-block-end: var(--sp-3);
  overflow: hidden;
}
.figure-board {
  touch-action: pan-y;
}
.figure-caption {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  padding: var(--sp-1) var(--sp-2);
  border-block-start: 1px solid var(--border);
}
/* JSXGraph paints its own background, so it has to follow the theme. */
.JXGtext {
  font-family: var(--font-ui) !important;
}
.jxgbox {
  background: var(--bg-panel) !important;
  border-radius: var(--radius-sm);
}

/* The scratch board in the work area */
.work-board-holder {
  margin-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--sp-3);
}
.work-board-holder summary {
  cursor: pointer;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}
.sketch {
  margin-block-start: var(--sp-2);
  max-inline-size: 28rem;
}
.sketch-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-block-end: var(--sp-2);
}
.sketch-value bdi {
  color: var(--text);
  font-family: var(--font-mono, monospace);
}
.sketch-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-block-end: var(--sp-2);
}
.sketch-stage {
  position: relative;
}
.sketch-layer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  touch-action: none;
}
.sketch-colours {
  display: inline-flex;
  gap: 4px;
  margin-inline: var(--sp-2);
}
.sketch-colour {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.sketch-colour.is-active {
  border-color: var(--text);
}
.sketch-hint {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  flex-basis: 100%;
}

/* An interactive piece embedded in a lesson */
.lesson-widget {
  margin-block: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  padding: var(--sp-3);
}
.explorer-readout {
  margin-block-end: var(--sp-2);
}
.explorer-line {
  margin-block: var(--sp-1);
}
.explorer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-3);
}
.explorer-slider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.explorer-slider-name {
  min-inline-size: 4.5rem;
  color: var(--text-soft);
}
.explorer-slider-name output {
  color: var(--text);
  font-weight: 500;
}
.explorer-slider input[type='range'] {
  inline-size: 9rem;
  accent-color: var(--accent);
}
.explorer-board {
  max-inline-size: 26rem;
  margin-inline: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The table kind: one input per cell, and the chart it draws */
.table-scroll {
  overflow-x: auto;
  margin-block-end: var(--sp-2);
}
.data-table {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-inline-size: 100%;
}
.data-table th,
.data-table td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
}
.data-table thead th {
  background: var(--bg-sunken);
  font-weight: 500;
  color: var(--text-soft);
}
.data-table th:first-child {
  white-space: normal;
  min-inline-size: 5rem;
}
.data-table tbody th {
  background: var(--bg-sunken);
  font-weight: 500;
  text-align: start;
  position: sticky;
  inset-inline-start: 0;
}
.cell-input {
  inline-size: 2.7rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: center;
  padding: 2px;
}
.cell-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}
.chart-holder,
.chart-live {
  direction: ltr;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: var(--sp-2);
}
.chart-live {
  margin-block-end: var(--sp-2);
}
.figure.chart {
  padding: 0;
}

/* The proof builder */
.proof-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.proof-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  background: var(--bg-sunken);
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
.proof-step-number {
  inline-size: 1.6em;
  block-size: 1.6em;
  flex: none;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.proof-step-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
  flex: 1;
}
.proof-slots {
  display: inline-flex;
  gap: 2px;
  direction: ltr;
}
.proof-step select {
  font-size: var(--fs-sm);
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  max-inline-size: 12rem;
}
.proof-point {
  inline-size: 3.4rem;
}
.proof-preview {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  margin-block-start: var(--sp-1);
}
.theorem-card {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
.theorem-card .formula-title {
  font-weight: 500;
  margin-block-end: 2px;
}

/* The construction palette: tools, their inputs, and what was built so far */
.tool-palette {
  margin-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--sp-3);
}
.tool-hint {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2);
}
.tool-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tool-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.tool-field[hidden] {
  display: none;
}
.tool-select,
.tool-name {
  min-inline-size: 6rem;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
}
.tool-name {
  min-inline-size: 4rem;
  direction: ltr;
  text-align: center;
  font-family: var(--font-mono, monospace);
}
.tool-built {
  margin-block-start: var(--sp-2);
  padding-inline-start: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.tool-built bdi {
  color: var(--text);
  font-family: var(--font-mono, monospace);
}

/* A screen that is not built yet: a label in the navigation, never a link */
.nav-soon {
  gap: 6px;
  color: var(--text-soft);
  cursor: default;
  user-select: none;
}
.nav-soon:hover {
  background: none;
}
.nav-soon-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.78em;
  color: var(--text-soft);
}

/* The drill schedule, shown as how many cards sit in each box */
.box-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--sp-2);
}
.box-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: var(--sp-2);
  text-align: center;
}
.box-cell.is-settled {
  border-color: var(--ok);
}
.box-count {
  font-size: 1.4em;
  font-weight: 600;
}
.box-label {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

/* The free board gets the width of the page, not the width of a side panel */
.sandbox-board .sketch {
  max-inline-size: 40rem;
  margin-inline: auto;
}

/* Exam mode: the scope picker, the clock, the map of questions, the results */
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block: var(--sp-2);
}
.check-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.check-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--bg-accent-soft, transparent);
}
.exam-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-panel);
  padding: var(--sp-2) var(--sp-3);
  margin-block-end: var(--sp-3);
}
.exam-bar > :last-child {
  margin-inline-start: auto;
}
.exam-clock {
  font-family: var(--font-mono, monospace);
  font-size: 1.5em;
  font-variant-numeric: tabular-nums;
}
.exam-clock.is-low {
  color: var(--err);
}
.exam-map {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: var(--sp-3);
}
.exam-dot {
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
}
.exam-dot.is-answered {
  border-color: var(--ok);
  color: var(--text);
}
.exam-dot.is-at {
  border-color: var(--accent);
  border-width: 2px;
  color: var(--text);
  font-weight: 600;
}
.exam-group {
  border-inline-start: 3px solid var(--border);
  padding-inline-start: var(--sp-3);
  margin-block-end: var(--sp-3);
  color: var(--text-soft);
}
.score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.score-big {
  font-size: 2.6em;
  font-weight: 700;
}
.data-table {
  inline-size: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  border-block-end: 1px solid var(--border);
  padding: 6px 8px;
  text-align: start;
}
.data-table th {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  font-weight: 600;
}
.verdict-tag {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
}
.verdict-tag.is-correct {
  border-color: var(--ok);
  color: var(--ok);
}
.verdict-tag.is-incorrect,
.verdict-tag.is-blank {
  border-color: var(--err);
  color: var(--err);
}
.weak-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.weak-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  border-block-end: 1px solid var(--border);
  padding-block-end: var(--sp-2);
}
.weak-list .btn-row {
  margin-inline-start: auto;
}

/* The progress screen: the numbers, and the map of the whole syllabus */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.stat-value {
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.1;
}
.stat-label {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.heat-section {
  margin-block-end: var(--sp-3);
}
.heat-section h3 {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-block: var(--sp-2) var(--sp-1);
}
.heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 6px;
}
.heat-cell {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-panel);
}
a.heat-cell:hover {
  border-color: var(--accent);
}
.heat-cell.is-level-1 {
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-panel));
}
.heat-cell.is-level-2 {
  background: color-mix(in srgb, var(--ok) 28%, var(--bg-panel));
}
.heat-cell.is-level-3 {
  background: color-mix(in srgb, var(--ok) 48%, var(--bg-panel));
}
.heat-cell.is-level-4 {
  background: color-mix(in srgb, var(--ok) 70%, var(--bg-panel));
  border-color: var(--ok);
}
.heat-name {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.25;
}
.heat-count {
  display: block;
  font-size: 0.8em;
  color: var(--text-soft);
}
/* The ladder progress, beside the written tasks and plainly secondary to them. */
.heat-ladder {
  opacity: 0.65;
  font-size: 0.9em;
}
.heat-ladder::before {
  content: '\00b7';
  padding-inline: 0.25em;
}
.heat-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--sp-2);
}
.heat-legend .heat-cell {
  inline-size: 1.5rem;
  block-size: 1.1rem;
  padding: 0;
}

/* A table may be wider than the phone. The page may not. */
.table-scroll {
  overflow-x: auto;
  max-inline-size: 100%;
}
.table-scroll .data-table {
  min-inline-size: 22rem;
}