/* page-academy.css — rules that belong to academy.html and the academy-*.html course pages.
   Shared styling lives in subpage.css, sections.css and parts.css; treat those as read only.

   What is in this file:
   1. lesson index under the course hero
   2. lesson layout: sticky side label, body measure, sub headings
   3. key figures (the record list, reused from the about page idea)
   4. process flow strip
   5. comparison tables
   6. knowledge check
   7. hub: course progress label and glossary spacing

   Tokens only: no hardcoded colours, radius 0 or 4, one easing token. */

/* ── 1. Lesson index ───────────────────────────────────────────────────────── */
.sy-acad-toc {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  counter-reset: sy-toc;
}
.sy-acad-toc li { counter-increment: sy-toc; }
.sy-acad-toc a {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
  text-decoration: none;
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
.sy-acad-toc a::before { content: counter(sy-toc, decimal-leading-zero) "  "; color: var(--vy-text-primary); }
.sy-acad-toc a:hover,
.sy-acad-toc a:focus-visible { color: var(--vy-text-primary); }

/* ── 2. Lessons ────────────────────────────────────────────────────────────── */
.sy-acad-lesson { border-bottom: 1px solid var(--color-line-soft); scroll-margin-top: 96px; }
/* Grid items do not shrink below their content by default, and the tables carry a
   min-width, so without this the whole lesson column widens past a phone screen
   instead of the table wrapper scrolling. */
.sy-acad-lesson > *,
.sy-acad-quiz > * { min-width: 0; }
.sy-acad-lesson__side { position: sticky; top: 120px; }
.sy-acad-lesson__side .vy-leaf-kickercap { color: var(--vy-text-primary); }
.sy-acad-lesson__time {
  margin-top: 10px;
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.sy-acad-h3 {
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--vy-text-primary);
  margin: clamp(36px, 4vw, 56px) 0 16px;
}
.sy-acad-lesson .vy-leaf-stack strong { color: var(--vy-text-primary); font-weight: 600; }
.sy-acad-lesson .vy-amt-mesh { margin-top: clamp(32px, 4vw, 52px); }
ul.vy-leaf-stack { padding-left: 1.1em; }
ul.vy-leaf-stack li + li { margin-top: 8px; }
.sy-acad-lesson .vy-amt-mesh + .vy-leaf-stack,
.sy-acad-lesson .sy-acad-table-wrap + .vy-leaf-stack { margin-top: clamp(32px, 4vw, 52px); }

/* ── 3. Key figures ────────────────────────────────────────────────────────── */
.sy-acad-facts {
  margin: clamp(32px, 4vw, 52px) 0 0;
  max-width: 62ch;
  border-top: 1px solid var(--color-line);
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--vy-text-secondary);
}
.sy-acad-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.sy-acad-facts dt { text-transform: uppercase; }
.sy-acad-facts dd { margin: 0; color: var(--vy-text-primary); text-align: right; }

/* ── 4. Process flow ───────────────────────────────────────────────────────
   An ordered list read left to right. Wraps instead of scrolling, so nothing hides. */
.sy-acad-flow {
  list-style: none;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line-soft);
  counter-reset: sy-flow;
}
.sy-acad-flow li {
  counter-increment: sy-flow;
  padding: 16px 14px 18px;
  border-right: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--vy-text-primary);
}
.sy-acad-flow li::before {
  content: counter(sy-flow, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--vy-text-secondary);
}
.sy-acad-flow small {
  display: block;
  margin-top: 6px;
  font-size: var(--text-2xs);
  color: var(--vy-text-secondary);
}

/* ── 5. Tables ─────────────────────────────────────────────────────────────
   The wrapper scrolls sideways on narrow screens; the page itself never does. */
.sy-acad-table-wrap {
  margin: clamp(32px, 4vw, 52px) 0 0;
  overflow-x: auto;
  border-top: 1px solid var(--color-line);
}
.sy-acad-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.sy-acad-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 14px;
  font-size: var(--text-2xs);
  color: var(--vy-text-secondary);
}
.sy-acad-table th,
.sy-acad-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.sy-acad-table thead th {
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.sy-acad-table tbody th { color: var(--vy-text-primary); font-weight: 600; }
.sy-acad-table td { color: var(--vy-text-secondary); }

/* ── 6. Knowledge check ────────────────────────────────────────────────────── */
.sy-acad-quiz { scroll-margin-top: 96px; }
.sy-acad-q {
  margin: 0;
  padding: 24px 0 28px;
  border: 0;
  border-top: 1px solid var(--color-line);
  max-width: 72ch;
}
.sy-acad-q:last-of-type { border-bottom: 1px solid var(--color-line); }
.sy-acad-q legend {
  padding: 0;
  margin-bottom: 18px;
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--vy-text-primary);
}
.sy-acad-q legend span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  color: var(--vy-text-secondary);
}
.sy-acad-q label {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: var(--vy-radius);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--vy-text-secondary);
  cursor: pointer;
  transition: background-color var(--vy-dur-micro) var(--vy-ease), color var(--vy-dur-micro) var(--vy-ease);
}
.sy-acad-q label:hover { background: var(--vy-bg-secondary); color: var(--vy-text-primary); }
.sy-acad-q input { accent-color: var(--vy-text-primary); flex: none; }
.sy-acad-q[data-done] label { cursor: default; }
.sy-acad-q[data-done] label:hover { background: none; }
.sy-acad-q label[data-mark]::after {
  margin-left: auto;
  padding-left: 16px;
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.sy-acad-q label[data-mark="right"] { color: var(--vy-text-primary); background: var(--vy-bg-secondary); }
.sy-acad-q label[data-mark="right"]::after { content: "Correct"; color: var(--vy-text-primary); }
.sy-acad-q label[data-mark="wrong"] { text-decoration: line-through; text-decoration-color: var(--vy-ink-55); }
.sy-acad-q label[data-mark="wrong"]::after { content: "Your answer"; color: var(--vy-text-secondary); }
.sy-acad-q__why {
  margin: 16px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}
.sy-acad-quiz__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 28px;
  max-width: 72ch;
}
.sy-acad-quiz__score {
  margin: 0;
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--vy-text-primary);
}
.sy-acad-quiz__reset {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sy-acad-quiz__reset:hover { color: var(--vy-text-primary); }

/* ── 7. Hub ────────────────────────────────────────────────────────────────── */
.sy-acad-progress { color: var(--vy-text-secondary); }
.sy-acad-progress[data-state="done"] { color: var(--vy-text-primary); }
.sy-acad-glossary .vy-faq__panel p { max-width: 62ch; }
.sy-acad-next { padding-bottom: clamp(88px, 13vh, 168px); }
.sy-acad-next .vy-reel-stack,
.sy-acad-hub-list .vy-reel-stack { margin-top: clamp(24px, 3vw, 40px); }
.sy-acad-glossary .vy-faq__list { margin-top: 0; }
.sy-acad-how > .vy-leaf-kickercap { display: block; margin-bottom: clamp(36px, 4vw, 60px); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sy-acad-lesson__side { position: static; }
}
@media (max-width: 720px) {
  .vy-leaf-statbar { grid-template-columns: 1fr; gap: 10px; }
  .vy-leaf-statbar span:nth-child(2),
  .vy-leaf-statbar span:last-child { text-align: left; }
  .sy-acad-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sy-acad-toc a,
  .sy-acad-q label { transition: none; }
}

/* Hub marquee: the same containment as the about page marquee (see page-about.css, block 4).
   The track is an inline block as wide as its content, so the container clips it. */
.sy-acad-marquee { overflow: clip; contain: paint; }
.sy-acad-glossary .vy-faq__item h3 { margin: 0; }