/* SPDX-License-Identifier: MIT */
/* Copyright (c) 2026 Evgeny Baulin */
/* Buttons, problem cards, steps, hints, answers, dialogs, tables, notes and the handout. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-height: 2.1em;
  padding: 0.2em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
  color: var(--muted);
  border-color: var(--line);
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  color: var(--on-accent);
  filter: brightness(1.12);
}
.btn-quiet {
  border-color: var(--line);
  background: transparent;
}
.tool {
  flex: none;
  min-height: 2em;
  padding: 0.15em 0.45em;
  font-size: 0.88rem;
  white-space: nowrap;
}
.tool-keys {
  min-width: 2.1em;
  font-weight: 700;
}
/* a mode that is on (instructor): the second accent */
.tool[aria-pressed="true"],
.tool[aria-pressed="true"]:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.timer {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-right: 4px;
}
.timer .btn {
  border-radius: 0;
  margin-left: -1px;
}
.timer .btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  margin-left: 0;
}
.timer .btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.timer-display {
  min-width: 4.2em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.timer.is-running .timer-display {
  color: var(--accent);
  border-color: var(--accent);
}
.timer.is-ended .timer-display {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--on-accent);
}

.lead {
  max-width: var(--measure);
  font-size: 1.08rem;
}

/* ---------------------------------------------------------------- recap and lists */
.recap {
  margin: 0.4em 0;
  padding-left: 1.2em;
  max-width: 82ch;
}
.recap li {
  margin: 0.35em 0;
}
.mistake-list li,
.summary li,
.bridge li {
  margin: 0.4em 0;
}

/* ---------------------------------------------------------------- problem cards */
.problem {
  position: relative;
  margin: 12px 0 8px;
  padding: 4px 0 8px 20px;
  border-left: 4px solid var(--accent);
  scroll-margin-top: calc(var(--toolbar-h) + 16px);
}
.problem-students {
  border-left-color: var(--line-strong);
}
.problem-home {
  border-left-color: var(--line);
}
.problem-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}
.problem-id {
  font-weight: 700;
  color: var(--accent);
  font-size: 1.1rem;
}
.problem-who {
  color: var(--muted);
  font-style: italic;
  --punct-style: italic;
}
.problem-title {
  flex-basis: 100%;
  font-size: 1.12rem;
}
.problem-skill {
  margin: 0.2em 0 0.4em;
  color: var(--muted);
  font-size: 0.95rem;
}
.problem-statement {
  margin: 0.5em 0 0.8em;
  font-size: 1.04rem;
}

.solution-title,
.answers-title,
.hints-title {
  margin: 0.9em 0 0.3em;
  font-size: 0.98rem;
  color: var(--fg-soft);
}
.steps {
  margin: 0.3em 0;
  padding-left: 1.5em;
}
.step {
  margin: 0.55em 0;
  padding-left: 0.2em;
}
.step::marker {
  color: var(--accent);
  font-weight: 700;
}
.predict {
  margin: 0.2em 0;
  color: var(--fg-soft);
}
.predict-tag {
  color: var(--accent-2);
  font-weight: 700;
}
.solution-toggle {
  margin: 0.3em 0 0.2em;
}
.solution-body {
  margin-top: 0.3em;
}
.answer-text {
  max-width: var(--measure);
  margin: 0.7em 0 0.2em;
  padding: 0.35em 0.7em;
  border-left: 3px solid var(--ok);
  background: var(--panel-2);
}
.review {
  color: var(--fg-soft);
  font-style: italic;
  --punct-style: italic;
}

.hints {
  margin: 0.4em 0;
}
.hint-list {
  margin: 0.4em 0 0;
  padding-left: 1.4em;
}
.hint {
  margin: 0.3em 0;
}

.answers {
  margin: 0.4em 0;
}
.answer-part {
  margin: 0.6em 0;
}
.answer-label {
  margin-bottom: 0.2em;
}
.answer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
/* a bracketed answer: the brackets never part from what they enclose, the inputs shrink instead */
.answer-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.answer-group .component {
  min-width: 0;
}
.answer-group .answer-input {
  min-width: 3.5em;
}
.answer-input {
  width: 7.5em;
  min-height: 2.1em;
  padding: 0.2em 0.45em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
}
.answer-input::placeholder {
  color: var(--muted);
}
.component {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.component-label {
  color: var(--muted);
  font-size: 0.9rem;
}
.bracket {
  font-size: 1.3rem;
  color: var(--muted);
}
/* a matrix answer: entries in a grid between tall round brackets, labels outside the brackets */
.matrix-input {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  gap: 4px 6px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 1px;
}
.matrix-input .answer-input {
  width: 4.6em;
  text-align: center;
}
.matrix-bracket {
  align-self: stretch;
  width: 0.5em;
  border: 2px solid var(--muted);
  border-right-width: 0;
  border-radius: 0.5em 0 0 0.5em / 1.1em 0 0 1.1em;
}
.matrix-bracket.is-right {
  border-width: 2px 2px 2px 0;
  border-radius: 0 0.5em 0.5em 0 / 0 1.1em 1.1em 0;
}
.matrix-label {
  color: var(--muted);
  font-size: 0.9rem;
}
.matrix-label.is-row {
  justify-self: end;
  padding-right: 2px;
}
.answer-input.answer-input-wide {
  width: min(19em, 100%);
}
.answer-hint {
  margin: 0 0 0.3em;
  color: var(--muted);
  font-size: 0.9rem;
}
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.choice input {
  width: 1.05em;
  height: 1.05em;
  accent-color: var(--accent);
}
.feedback {
  min-height: 1.4em;
  margin: 0.25em 0 0;
  font-size: 0.95rem;
}
.feedback.is-ok {
  color: var(--ok);
}
.feedback.is-bad {
  color: var(--bad);
}
.locked {
  margin: 0.6em 0;
  color: var(--muted);
  font-style: italic;
  --punct-style: italic;
}

details.mistakes,
details.self-study {
  margin: 0.6em 0;
}
details > summary {
  cursor: pointer;
  color: var(--accent);
}
details.mistakes ul {
  margin: 0.4em 0;
  padding-left: 1.3em;
}
.check-ref {
  margin: 0.4em 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.own-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.own-note {
  margin: 0.3em 0;
  color: var(--muted);
}
.review-answers {
  margin: 0.5em 0;
}
.review-line {
  margin: 0.35em 0;
}

.exit-list {
  padding-left: 1.4em;
}
.exit-item {
  margin: 0.6em 0;
}
.exit-q {
  margin: 0;
}
.exit-a {
  margin: 0.2em 0 0;
  color: var(--ok);
}
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------------------------------------------------------- dialogs */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 16px;
  background: rgba(8, 12, 20, 0.55);
  overflow-y: auto;
}
.dialog-inner {
  width: min(1400px, 100%);
  padding: 18px 24px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}
#shortcuts .dialog-inner {
  width: min(640px, 100%);
}
.dialog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.dialog-note {
  color: var(--muted);
}
.overview-col h3 {
  font-size: 1.05rem;
  margin: 0.3em 0 0.5em;
  color: var(--accent);
}
.overview-item {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--accent);
}
.overview-item.is-students {
  border-left-color: var(--line-strong);
}
.overview-head {
  margin: 0;
  font-size: 0.9rem;
}
.overview-statement {
  font-size: 0.86rem;
  line-height: 1.4;
}
#overview .dialog-inner {
  padding: 10px 20px 12px;
}
#overview .dialog-note {
  margin: 0.3em 0 0.5em;
  font-size: 0.9rem;
}
#overview .dialog-head h2 {
  font-size: 1.25rem;
}
.shortcut-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}
.shortcut-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.shortcut-table .keys {
  white-space: nowrap;
  width: 8em;
}

/* ---------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto;
  margin: 0.5em 0;
}
.sort-table,
.cand-table,
.data-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.sort-table th,
.sort-table td,
.cand-table th,
.cand-table td,
.data-table th,
.data-table td {
  padding: 4px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}
.data-table th,
.data-table td {
  text-align: left;
}
.sort-table th,
.cand-table th,
.data-table th {
  border-bottom: 2px solid var(--line-strong);
  color: var(--fg-soft);
}
.sort-table tr.is-rho td {
  background: var(--panel-2);
  font-weight: 700;
}
.sort-table tr.is-after td {
  color: var(--muted);
}
.cand-table tr.is-kkt td {
  background: var(--panel-2);
}
.cand-table td.yes {
  color: var(--ok);
  text-align: center;
}
.cand-table td.no {
  color: var(--bad);
  text-align: center;
}

/* ---------------------------------------------------------------- code blocks */
.code-block {
  margin: 26px 0 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.code-block > summary {
  font-weight: 700;
}
.code-note {
  color: var(--muted);
  max-width: var(--measure);
}
pre.code {
  margin: 8px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  line-height: 1.45;
  tab-size: 4;
}
.btn-copy {
  margin-top: 6px;
}

/* ---------------------------------------------------------------- notes, handout, cheat sheet */
.note {
  margin: 0.8em 0;
  padding: 0.5em 0.9em;
  border-left: 3px solid var(--line-strong);
  background: var(--panel-2);
  max-width: var(--measure);
}
.note-example {
  border-left-color: var(--ok);
}
.note-intuition {
  border-left-color: var(--accent);
}
.note-convention {
  border-left-color: var(--accent-2);
}
.note-label {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--fg-soft);
}
.note-body > :first-child {
  margin-top: 0.2em;
}
/* definitions and theorems: the accent rule and an accent label; a definition sits on the page colour in a thin frame */
.note-definition,
.note-theorem {
  border-left: 4px solid var(--accent);
}
.note-definition {
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.note-definition .note-label,
.note-theorem .note-label,
.note-note .note-label {
  color: var(--accent);
}
/* a proof: quiet, fully visible, the label line "Proof." above the text and the end mark closing it */
.note-proof {
  border-left: 2px solid var(--line-strong);
  background: transparent;
}
.note-proof .note-body {
  display: flow-root;
}
.proof-label {
  font-weight: 700;
  --punct-weight: 700;
  font-style: italic;
  --punct-style: italic;
  color: var(--fg-soft);
}
.proof-end {
  float: right;
  margin-left: 0.8em;
  color: var(--muted);
  font-size: 1.2em;
  line-height: 1.3;
}
.note-trap {
  border-left: 4px solid var(--accent-2);
}
.note-trap .note-label {
  color: var(--accent-2);
}
.note-selfcheck {
  border-top: 1px dashed var(--line-strong);
  border-right: 1px dashed var(--line-strong);
  border-bottom: 1px dashed var(--line-strong);
  border-left: 3px solid var(--accent-2);
  background: var(--panel);
}
.selfcheck-answer {
  margin: 0.45em 0 0.1em;
}
.selfcheck-answer-body {
  margin-top: 0.2em;
  padding-left: 0.9em;
  border-left: 3px solid var(--ok);
}
.faq {
  margin: 1.2em 0;
  max-width: var(--measure);
}
.faq-q {
  font-size: 1.04rem;
  color: var(--accent);
}
.faq-a {
  margin-top: 0.25em;
}
.handout-code {
  margin: 0.9em 0;
}
.handout-code .code-block {
  margin-top: 16px;
}
.glossary-note {
  color: var(--fg-soft);
}

/* The handout is one column of text: every block keeps its two edges, and the column is as wide as a
   comfortable line. From 860px the contents stand in a column of their own to the right of the text and
   stay in view while it scrolls; below that, and on paper, they come first, under the header. */
.handout {
  --read: 40rem;
}
.handout-head {
  margin-top: 26px;
}
.handout-title {
  font-size: 1.7rem;
}
/* On screen the page header already carries the seminar title; print keeps it for the cheat sheet. */
.page-theory .handout-title,
.page-cheatsheet .cs-title {
  display: none;
}
/* the column itself sets the line length: no block is narrower than the text */
.handout .lead,
.handout .note,
.handout .faq,
.handout .answer-text,
.handout .code-note,
.handout .figure figcaption {
  max-width: none;
}
.handout .lead {
  margin-top: 0;
}

.toc {
  margin: 20px 0 30px;
  padding: 12px 20px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.toc-title {
  font-size: 1.15rem;
}
.toc-list,
.toc-subs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc-list {
  margin-top: 0.35em;
}
.toc a {
  display: block;
  padding: 2px 0;
  text-decoration: none;
}
.toc a:hover {
  text-decoration: underline;
}
/* the number in a column of its own, so that a long title wraps under its own first word */
.toc-section > a {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
}
.toc-number {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.toc-subs {
  margin-bottom: 0.2em;
  padding-left: 1.7rem;
  font-size: 0.92em;
}
.toc-subs a {
  color: var(--fg-soft);
}

.handout-section {
  margin: 40px 0;
  padding-top: 18px;
  border-top: 2px solid var(--accent);
  scroll-margin-top: calc(var(--toolbar-h) + 10px);
}
.handout-subsection {
  margin: 26px 0;
  scroll-margin-top: calc(var(--toolbar-h) + 10px);
}
.section-number {
  color: var(--accent);
}
.handout-problem {
  margin: 22px 0;
  padding-left: 18px;
  border-left: 4px solid var(--line-strong);
}
.handout-problem-title {
  font-size: 1.1rem;
}
.handout .table-wrap {
  margin: 0.8em 0;
}
.handout .data-table {
  width: 100%;
}
.figure {
  margin: 1em 0;
}
/* the panel spans the column, the figure sits in its middle at its own size or smaller */
.figure-panel {
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.figure-panel img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.figure figcaption {
  margin-top: 0.4em;
  color: var(--fg-soft);
  font-size: 0.95rem;
}
.references li {
  margin: 0.3em 0;
}
.pdf-link {
  margin: 0.8em 0;
}

@media screen and (min-width: 860px) {
  .handout {
    display: grid;
    grid-template-columns: minmax(0, var(--read)) minmax(12rem, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head toc" "body toc";
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .handout-head {
    grid-area: head;
  }
  .handout-body {
    grid-area: body;
  }
  /* the contents: a quiet list on a rule, the section being read and its subsections open and marked */
  .handout > .toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: calc(var(--toolbar-h) + 22px);
    max-height: calc(100vh - var(--toolbar-h) - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* the title stands on the first line of the lead */
    margin: 34px 0 0;
    padding: 0 4px 0 0;
    border: 0;
    background: transparent;
    font-size: 0.9rem;
    line-height: 1.35;
  }
  .toc-title {
    padding-left: 15px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .toc-list {
    margin-top: 8px;
    border-left: 1px solid var(--line);
  }
  .toc a {
    margin-left: -1px;
    padding: 4px 0 4px 12px;
    border-left: 3px solid transparent;
    color: var(--fg-soft);
  }
  .toc-subs {
    margin: 0 0 4px;
    padding-left: 0;
    font-size: 0.94em;
  }
  .toc-subs a {
    padding: 2px 0 2px calc(12px + 1.7rem);
  }
  .toc-section:not(.is-current) > .toc-subs {
    display: none;
  }
  .toc .is-current > a {
    border-left-color: var(--accent);
    color: var(--accent);
  }
  .toc-section.is-current > a {
    font-weight: 700;
  }
  .toc-section.is-current .toc-number {
    color: var(--accent);
  }
  /* the scrolling list would clip an outline drawn outside */
  .toc a:focus-visible {
    outline-offset: -3px;
  }
}

.cheatsheet {
  margin-top: 20px;
}
.cs-title {
  font-size: 1.5rem;
}
.cs-subtitle {
  color: var(--muted);
  margin-top: 0.2em;
}
.cs-grid {
  column-count: 3;
  column-gap: 26px;
  margin-top: 14px;
}
.cs-section {
  break-inside: avoid;
  margin: 0 0 14px;
  padding-top: 6px;
  border-top: 2px solid var(--accent);
}
.cs-section h3 {
  font-size: 1.02rem;
  margin: 0.1em 0 0.3em;
}
.cs-section ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.93rem;
}
.cs-section li {
  margin: 0.25em 0;
}
/* A long formula has to break in a cheat-sheet column, or it runs out of the column on screen and
   on the printed page alike. KaTeX breaks it between its boxes and render.js keeps the punctuation
   inside the last of them; only the fallback of render.rich (KaTeX did not render) still ties a
   whole formula to its mark with .nowrap, and in a column that one has to break too. */
.cs-section .nowrap {
  white-space: normal;
}
.cs-print-footer {
  display: none;
}

/* ---------------------------------------------------------------- self-test */
.selftest {
  margin: 20px 0;
  padding: 12px 18px;
  border: 2px solid var(--ok);
  border-radius: var(--radius);
  background: var(--panel);
}
.selftest.is-bad {
  border-color: var(--bad);
}
.selftest-title {
  font-size: 1.2rem;
}
.selftest-summary {
  font-weight: 700;
}
.selftest.is-ok .selftest-summary {
  color: var(--ok);
}
.selftest.is-bad .selftest-summary {
  color: var(--bad);
}
.selftest-groups,
.selftest-failures {
  margin: 0.3em 0;
  padding-left: 1.3em;
}

@media (max-width: 1100px) {
  .cs-grid {
    column-count: 2;
  }
}
@media (max-width: 700px) {
  .cs-grid {
    column-count: 1;
  }
  .answer-input {
    width: 6.2em;
  }
}

/* ---------------------------------------------------------------- live code and highlighting */
:root {
  --syn-keyword: #7a1f8f;
  --syn-def: #1c4fb3;
  --syn-builtin: #0d6b6b;
  --syn-string: #1b6b3a;
  --syn-number: #a14b00;
  --syn-comment: #6b7280;
  --syn-operator: #4f5767;
}
:root[data-theme="dark"] {
  --syn-keyword: #d49bf0;
  --syn-def: #8db8ff;
  --syn-builtin: #6fd3cf;
  --syn-string: #9bd99b;
  --syn-number: #f2b26b;
  --syn-comment: #8b94a5;
  --syn-operator: #b7bfcb;
}
.cm-s-default .cm-keyword { color: var(--syn-keyword); font-weight: 600; }
.cm-s-default .cm-def { color: var(--syn-def); }
.cm-s-default .cm-builtin { color: var(--syn-builtin); }
.cm-s-default .cm-string,
.cm-s-default .cm-string-2 { color: var(--syn-string); }
.cm-s-default .cm-number { color: var(--syn-number); }
.cm-s-default .cm-comment { color: var(--syn-comment); font-style: italic; }
.cm-s-default .cm-operator,
.cm-s-default .cm-punctuation { color: var(--syn-operator); }
.cm-s-default .cm-variable,
.cm-s-default .cm-variable-2,
.cm-s-default .cm-property { color: var(--fg); }
.cm-s-default .cm-meta { color: var(--syn-def); }
.cm-s-default .cm-error { color: var(--bad); }

.live-code {
  margin: 30px 0 8px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.live-title {
  margin: 0 0 6px;
}
.live-code .code-note {
  margin: 4px 0;
}
.live-code .CodeMirror,
.live-editor {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.45;
}
.live-editor {
  display: block;
  padding: 12px 14px;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}
.live-code .CodeMirror-lines {
  padding: 10px 0;
}
.live-code .CodeMirror-gutters {
  border-right: 1px solid var(--line);
  background: var(--panel-2);
}
.live-code .CodeMirror-linenumber {
  color: var(--muted);
}
.live-code .CodeMirror-cursor {
  border-left-color: var(--fg);
}
.live-code .CodeMirror-selected,
.live-code .CodeMirror-focused .CodeMirror-selected {
  background: var(--w-set);
}
.live-code .CodeMirror-focused {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}
.live-buttons {
  align-items: center;
}
.live-status {
  color: var(--muted);
}
.live-output.is-error {
  color: var(--bad);
}
.live-figures img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 0;
  border-radius: var(--radius);
  background: #fff;
}

/* ---------------------------------------------------------------- the screen guard of a locked seminar */
.is-guarded body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.is-guarded input,
.is-guarded textarea,
.is-guarded .CodeMirror {
  -webkit-user-select: text;
  user-select: text;
}
.screen-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(127, 127, 127, 0.35);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}
.screen-veil-note {
  margin: 0;
  padding: 0.6em 1em;
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  font-size: 1.05rem;
}

/* The footnote of a locked seminar, one step off the background and there only while the guard is on; and the
   answer it leads to, for the instructor. */
.problem-erratum {
  display: none;
  margin: 0.3em 0 0;
  color: color-mix(in srgb, var(--fg) 2%, var(--bg));
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.is-guarded .problem-erratum {
  display: block;
}
.erratum-answer {
  max-width: var(--measure);
  margin: 0.7em 0 0.2em;
  padding: 0.35em 0.7em;
  border-left: 3px solid var(--bad);
  background: var(--panel-2);
}