/* Shared usability refinements. Kept separate from the generated site-tail sheet. */
:root { --ml-nav-clearance: calc(112px + env(safe-area-inset-bottom, 0px)); }

html { scroll-padding-block-start: calc(var(--ml-hd-h, 64px) + 16px); }
html :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ml-accent) !important;
  outline-offset: 3px;
}

/* A unit has one actionable sequence of lessons and quizzes. The card above it
   now gives only the total; the row itself carries the detailed state. */
.ml-mastery { padding-block: var(--ml-sp-4); }
.ml-mastery-note { max-width: 76ch; }
.ml-topic-copy { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.ml-topic-status { display: block; color: var(--ml-muted); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-medium); line-height: var(--ml-lh-ui); }
.ml-topic-status small { display: inline; margin-inline-start: .5em; font-size: inherit; }
.ml-topic-status.is-done { color: var(--ml-success); }
.ml-topic-status.is-progress { color: var(--ml-accent-text); }
.ml-topic-status.is-unknown { color: var(--ml-muted); }
.ml-booknote { max-width: 76ch; margin-block-start: var(--ml-sp-2); color: var(--ml-muted); font-size: var(--ml-fs-2); line-height: var(--ml-lh-body); }
.ml-booknote summary { width: fit-content; min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ml-accent-text); font-weight: var(--ml-fw-bold); }
.ml-booknote summary::before { content: '▸'; margin-inline-end: .5em; transition: transform var(--ml-dur-1) ease; }
.ml-booknote[open] summary::before { transform: rotate(90deg); }
.ml-booknote p { margin: 0 0 var(--ml-sp-2); }

/* All authored learning callouts retain their type and handwriting face. */
.mlu .box { position: relative; border: 1px solid var(--rail); padding: var(--ml-sp-4); background: var(--fill); }
.mlu .box .bt { min-height: 40px; padding-inline-start: 52px; align-items: center; }
.mlu .box .bt svg {
  position: absolute; inset-inline-start: -1px; top: -1px;
  width: 48px; height: 48px; padding: 12px;
  color: var(--title); background: color-mix(in srgb, var(--rail) 22%, var(--ml-surface));
  border: 1px solid var(--rail);
  border-start-start-radius: var(--ml-r-md);
  border-end-end-radius: var(--ml-r-lg);
}
.mlu .box.voice :is(.bt, p, li) { font-family: var(--font-voice); }

/* Figure labels: diagram and answers share the screen on desktop. */
.mlu .lbl-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr); gap: var(--ml-sp-5); align-items: start; }
.mlu .lbl-workspace > * { min-width: 0; }
.mlu .lbl-figure-pane { position: sticky; top: calc(var(--ml-hd-h, 64px) + var(--ml-sp-3)); }
.mlu .lbl-grid { grid-template-columns: minmax(0, 1fr); }
.mlu .lbl-nav { display: none; }
.mlu .lbl-badge { border-radius: var(--ml-r-full); font: inherit; }
.mlu .lbl-badge[aria-current="step"] { outline: 3px solid var(--ml-warning); outline-offset: 2px; }

@media (max-width: 700px) {
  .mlu .lbl-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--ml-sp-3); }
  .mlu .lbl-figure-pane { position: static; }
  .mlu .lbl-fig[style*="--fig-r"] { width: min(100%, calc(45dvh * var(--fig-r))); max-height: 45dvh; }
  .mlu .lbl-fig[style*="--fig-r"] img { max-height: 45dvh; }
  .mlu .lbl-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--ml-sp-2); margin-block: var(--ml-sp-2); }
  .mlu .lbl-nav button { min-height: 44px; min-width: 64px; }
  .mlu .lbl-counter { text-align: center; font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-ui); }
  .mlu .lbl-row:not(.is-active) { display: none !important; }
  .mlu .lbl-grid.is-complete .lbl-row { display: grid !important; }
  .mlu .lbl-row { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (max-width: 900px) {
  html { scroll-padding-block-end: var(--ml-nav-clearance); }
  .ml-course-layout { padding-bottom: var(--ml-nav-clearance) !important; }
  .ml-tabbar { height: auto !important; min-height: var(--ml-tabbar-h); }
  .ml-tabbar a, .ml-tabbar button { min-height: 44px; }
  .ml-ctxbar { height: auto; min-height: var(--ml-tabbar-h); }
  :is(.ml-topic-grid button, .ml-quizrow button, .ml-course-unit-grid button) { min-height: 44px; }
  :is(.ml-topic-grid, .ml-chapter-guide, .ml-course-unit-grid) > * { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-booknote summary::before { transition: none; }
}