/* Academy styles: courses, lessons, simulations and formulas.
   Loaded after style.css, the shared dataio.pl stylesheet (keep that file an exact copy
   of dataio-html/style.css). Everything Academy-specific belongs here. */
.academy-content {
  padding-bottom: 80px;
}

.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin: 24px 0 50px;
}

.academy-grid .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.article details {
  margin: 16px 0;
}

.article summary {
  cursor: pointer;
  font-weight: 600;
}

/* Buttons inside a lesson keep their own colours instead of the article link colour. */
.lesson-next {
  margin-top: 24px;
}

.article a.btn-primary {
  color: var(--color-on-accent);
}

.article a.btn-outline {
  color: var(--color-text);
}

.article a.btn-outline:hover {
  color: var(--color-accent);
}

.lesson-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.academy-lab {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 20px;
  border-radius: var(--radius);
  margin: 18px 0;
}

.academy-lab label {
  display: block;
  font-weight: 600;
}

.academy-lab input[type="range"] {
  display: block;
  width: 100%;
  accent-color: var(--color-accent);
  margin: 16px 0;
}

.academy-lab canvas {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}

.academy-checklist label {
  display: block;
  margin: 10px 0;
  cursor: pointer;
}

.academy-checklist input {
  accent-color: var(--color-accent);
  margin-right: 9px;
}

/* Lesson reading aids: core content remains available without JavaScript. */
.lesson-toc, .lesson-flow {
  margin: 28px 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.lesson-flow li { margin: 10px 0; }
.lesson-flow figcaption { font-size: 0.95rem; }
/* Formulas are pre-rendered by scripts/render_math.cjs (KaTeX, vendored in vendor/katex). */
.math-display {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--color-surface);
  overflow-x: auto;
  overflow-y: hidden;
}
.math-display .katex-display { margin: 0; }
/* The lesson eyebrow follows the inline back-link; put it on its own line. */
.article .back-link + .eyebrow { display: block; }
.math-display .katex { font-size: 1.15em; }
.math .katex { font-size: 1.05em; }
.lesson-table { overflow-x: auto; margin: 24px 0; }
.lesson-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lesson-table th, .lesson-table td { padding: 10px; border-bottom: 1px solid var(--color-border); text-align: right; }
.lesson-table caption { text-align: left; margin-bottom: 10px; }
.lesson-code-guide dt { margin-top: 22px; font-weight: 600; overflow-wrap: anywhere; }
.lesson-code-guide dd { margin: 8px 0 22px; }
@media (max-width: 600px) {
  .lesson-toc, .lesson-flow, .academy-lab { padding: 12px; }
  .lesson-table th, .lesson-table td { padding: 8px; }
}

.lesson-check {
  margin: 28px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
}
.lesson-check h4 { margin: 0 0 12px; }
.lesson-check p:last-child { margin-bottom: 0; }
.academy-lab fieldset { min-width: 0; margin: 20px 0; padding: 14px; border: 1px solid var(--color-border); }
.academy-lab legend { padding: 0 6px; }
.academy-lab :is(select, button) {
  max-width: 100%;
  white-space: normal;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px;
  min-height: 44px;
}
.academy-lab button { cursor: pointer; }
.academy-lab :disabled { cursor: not-allowed; }
#regression-chart { display: block; width: 100%; max-width: 560px; height: auto; margin: 20px auto; }
.regression-axis { fill: none; stroke: var(--color-faint); stroke-width: 1; }
.regression-labels { fill: var(--color-text); font: 14px sans-serif; }
.regression-targets { fill: var(--color-text); stroke: var(--color-surface); stroke-width: 1.5; }
#regression-line { stroke: var(--color-accent); stroke-width: 3; }

/* Sparse editorial emphasis; the complete meaning remains in the surrounding prose. */
.learning-highlight {
  --learning-marker: rgba(250, 204, 21, 0.32);
  color: inherit;
  background: linear-gradient(
    transparent 38%,
    var(--learning-marker) 38%,
    var(--learning-marker) 91%,
    transparent 91%
  );
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .learning-highlight { --learning-marker: rgba(250, 204, 21, 0.22); }
}
@media print, (forced-colors: active) {
  .learning-highlight { background: none; }
}
@media print {
  .learning-highlight { color: #000; }
}

/* Where the reader is within a multi-part lesson. */
.lesson-progress ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}
.lesson-progress li {
  flex: 1 1 220px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.lesson-progress li:has([aria-current]) { border-color: var(--color-accent); border-width: 2px; }
.lesson-progress [aria-current] { font-weight: 600; }
.lesson-progress-time { display: block; font-size: 0.9rem; color: var(--color-muted); }
/* Two-column step comparison: the steps read as text, so align them left. */
.lesson-compare :is(th, td) { text-align: left; vertical-align: top; }
.lesson-compare tbody th { font-weight: 400; }