/*! Syllabus design system 1.0.0 (2026-11-07). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Syllabus base: document defaults, zero-specificity resets inside .sy-page, type roles, containers,
   sections, layout helpers, the progress mark every rail uses, and specimen frames for documentation.
   Load after tokens.css and before every component. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sy-nav-h) + var(--sy-space-4));
}

body {
  margin: 0;
  background: var(--sy-paper);
  color: var(--sy-body);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-body);
  line-height: var(--sy-lh-body);
  font-weight: var(--sy-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

:where(.sy-page),
:where(.sy-page) *,
:where(.sy-page) *::before,
:where(.sy-page) *::after {
  box-sizing: border-box;
}

:where(.sy-page) :where(h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, pre, table, blockquote) {
  margin: 0;
}

:where(.sy-page) :where(fieldset) {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

:where(.sy-page) :where(legend) {
  padding: 0;
}

:where(.sy-page) :where(img, svg, video) {
  display: block;
  max-inline-size: 100%;
}

:where(.sy-page) :where(img, video) {
  block-size: auto;
}

:where(.sy-page) :where(h1, h2, h3, h4, h5) {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--sy-weight-semibold);
  text-wrap: balance;
}

:where(.sy-page) :where(h1) {
  font-size: var(--sy-fs-page);
  line-height: var(--sy-lh-display);
  letter-spacing: var(--sy-track-display);
}

:where(.sy-page) :where(h2) {
  font-size: var(--sy-fs-title);
  line-height: var(--sy-lh-title);
  letter-spacing: var(--sy-track-title);
}

:where(.sy-page) :where(h3) {
  font-size: var(--sy-fs-card);
  line-height: var(--sy-lh-snug);
}

:where(.sy-page) :where(h4, h5) {
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-body);
  font-weight: var(--sy-weight-semibold);
  line-height: var(--sy-lh-snug);
}

:where(.sy-page) :where(p, li, dd, figcaption) {
  text-wrap: pretty;
}

:where(.sy-page) :where(a) {
  color: var(--sy-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--sy-dur-fast) var(--sy-ease), text-decoration-color var(--sy-dur-fast) var(--sy-ease);
}

:where(.sy-page) :where(a:hover) {
  color: var(--sy-ink);
  text-decoration-thickness: 2px;
}

:where(.sy-page) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

:where(.sy-page) :where(button) {
  font: inherit;
}

:where(.sy-page) :where(code, kbd, samp) {
  font-family: var(--sy-font-mono);
  font-size: 0.9em;
}

:where(.sy-page) :where(strong, b) {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-semibold);
}

:where(.sy-page) :where(abbr[title]) {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

:where(.sy-page) ::selection {
  background: var(--sy-mark);
  color: var(--sy-mark-ink);
}

:where(.sy-page) :where([hidden]) {
  display: none !important;
}

/* Type roles as classes, for when the element and the look differ */
.sy-display,
.sy-page-title,
.sy-title,
.sy-headline {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--sy-weight-semibold);
  text-wrap: balance;
}

.sy-display {
  font-size: var(--sy-fs-display);
  line-height: var(--sy-lh-display);
  letter-spacing: var(--sy-track-display);
}

.sy-page-title {
  font-size: var(--sy-fs-page);
  line-height: var(--sy-lh-display);
  letter-spacing: var(--sy-track-display);
}

.sy-title {
  font-size: var(--sy-fs-title);
  line-height: var(--sy-lh-title);
  letter-spacing: var(--sy-track-title);
}

.sy-headline {
  font-size: var(--sy-fs-headline);
  line-height: var(--sy-lh-title);
}

.sy-lede {
  max-inline-size: 38em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-lede);
  line-height: 1.55;
}

.sy-small {
  font-size: var(--sy-fs-small);
  line-height: 1.55;
}

.sy-meta {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: var(--sy-lh-snug);
}

.sy-label {
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  line-height: var(--sy-lh-snug);
}

.sy-muted {
  color: var(--sy-muted);
}

.sy-serif {
  font-family: var(--sy-font-serif);
}

.sy-num {
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-center {
  margin-inline: auto;
  text-align: center;
}

/* Containers */
.sy-container {
  inline-size: 100%;
  max-inline-size: calc(var(--sy-content) + var(--sy-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--sy-gutter);
}

.sy-container--narrow {
  max-inline-size: calc(var(--sy-reading) + var(--sy-gutter) * 2);
}

.sy-container--mid {
  max-inline-size: calc(920px + var(--sy-gutter) * 2);
}

/* Sections: paper by default; desk for alternation; ruled for the exercise-book moments */
.sy-section {
  padding-block: var(--sy-section);
}

.sy-section--tight {
  padding-block: calc(var(--sy-section) * 0.6);
}

.sy-section--flush-top {
  padding-block-start: 0;
}

.sy-section--flush-bottom {
  padding-block-end: 0;
}

.sy-section--desk {
  border-block: 1px solid var(--sy-hair);
  background: var(--sy-desk);
}

.sy-section--surface {
  border-block: 1px solid var(--sy-hair);
  background: var(--sy-surface);
}

.sy-section--ruled,
.sy-ruled {
  background-color: var(--sy-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sy-ruled) - 1px), var(--sy-rule) calc(var(--sy-ruled) - 1px), var(--sy-rule) var(--sy-ruled));
}

/* Layout helpers */
.sy-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sy-space-4);
}

.sy-stack--tight {
  gap: var(--sy-space-2);
}

.sy-stack--loose {
  gap: var(--sy-space-8);
}

.sy-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-3);
}

.sy-cluster--start {
  align-items: flex-start;
}

.sy-cluster--between {
  justify-content: space-between;
}

.sy-grid {
  display: grid;
  gap: var(--sy-space-6);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .sy-grid--2,
  .sy-grid--3,
  .sy-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .sy-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sy-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sy-split {
  display: grid;
  gap: var(--sy-space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .sy-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sy-space-10);
  }

  .sy-split--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .sy-split--aside {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .sy-split--center {
    align-items: center;
  }
}

/* Two-column shell: a side column (rail, toc or side nav) beside the main column.
   .sy-layout--sticky pins the side under the nav from 1024px; use it when the side fits one screen. */
.sy-layout {
  display: grid;
  gap: var(--sy-space-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.sy-layout__side {
  min-inline-size: 0;
}

.sy-layout__main {
  min-inline-size: 0;
}

@media (min-width: 1024px) {
  .sy-layout {
    grid-template-columns: var(--sy-rail-w) minmax(0, 1fr);
    gap: var(--sy-space-10);
  }

  .sy-layout--sticky > .sy-layout__side {
    position: sticky;
    inset-block-start: calc(var(--sy-nav-h) + var(--sy-space-6));
    max-block-size: calc(100vh - var(--sy-nav-h) - var(--sy-space-8));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .sy-layout--narrow {
    grid-template-columns: 248px minmax(0, 1fr);
  }
}

/* The progress mark: hollow (not started), half (in progress), filled with a check (done).
   Rails, the table of contents, the curriculum, the timeline and the quiz all read it. */
.sy-pmark {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid var(--sy-pending);
  border-radius: 50%;
  background: var(--sy-surface);
  vertical-align: middle;
  transition: transform var(--sy-dur) var(--sy-ease-out);
}

.sy-pmark--pending {
  border-color: var(--sy-pending);
}

.sy-pmark--doing {
  border-color: var(--sy-done);
  background: linear-gradient(90deg, var(--sy-done) 0 50%, var(--sy-surface) 50% 100%);
}

.sy-pmark--done {
  border-color: var(--sy-done);
  background: var(--sy-done);
}

.sy-pmark--done::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 4.5px;
  inline-size: 4px;
  block-size: 8px;
  border: solid var(--sy-done-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sy-pmark--sm {
  inline-size: 14px;
  block-size: 14px;
}

.sy-pmark--sm.sy-pmark--done::after {
  inset-block-start: 1px;
  inset-inline-start: 3px;
  inline-size: 3px;
  block-size: 6px;
  border-width: 0 1.5px 1.5px 0;
}

.sy-pmark--lg {
  inline-size: 24px;
  block-size: 24px;
}

.sy-pmark--lg.sy-pmark--done::after {
  inset-block-start: 3px;
  inset-inline-start: 6.5px;
  inline-size: 6px;
  block-size: 11px;
  border-width: 0 2.5px 2.5px 0;
}

.sy-pmark.is-popped {
  animation: sy-pop var(--sy-dur-slow) var(--sy-ease-out);
}

@keyframes sy-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Visually hidden, skip link, arrow link, hairline rule */
.sy-sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sy-skip {
  position: absolute;
  inset-inline-start: var(--sy-space-4);
  inset-block-start: var(--sy-space-3);
  z-index: 100;
  padding: var(--sy-space-3) var(--sy-space-4);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-ink);
  color: var(--sy-paper);
  font-weight: var(--sy-weight-semibold);
  text-decoration: none;
  transform: translateY(-180%);
}

.sy-skip:focus {
  transform: none;
  color: var(--sy-paper);
}

.sy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sy-space-2);
  color: var(--sy-accent);
  font-weight: var(--sy-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.sy-link svg {
  flex: none;
  transition: transform var(--sy-dur) var(--sy-ease);
}

.sy-link:hover {
  color: var(--sy-ink);
}

.sy-link:hover svg {
  transform: translateX(3px);
}

[dir="rtl"] .sy-link svg {
  transform: scaleX(-1);
}

[dir="rtl"] .sy-link:hover svg {
  transform: scaleX(-1) translateX(3px);
}

.sy-rule {
  block-size: 1px;
  margin: 0;
  border: 0;
  background: var(--sy-hair);
}

/* Specimen frames: documentation pages that show components in every state */
.sy-specimen {
  padding-block: var(--sy-space-8);
  border-block-start: 1px solid var(--sy-hair);
}

.sy-specimen__head {
  display: grid;
  gap: var(--sy-space-2);
  margin-block-end: var(--sy-space-6);
}

.sy-specimen__title {
  font-size: var(--sy-fs-headline);
}

.sy-specimen__text {
  max-inline-size: 46em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
}

.sy-specimen__stage {
  display: grid;
  gap: var(--sy-space-6);
  min-inline-size: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sy-link svg,
  .sy-pmark,
  :where(.sy-page) :where(a) {
    transition: none;
  }

  .sy-pmark.is-popped {
    animation: none;
  }
}

/* ---- buttons ---- */
/* Syllabus buttons: 8px corners, Lexend labels, slate-teal primary, one primary per view. */

.sy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sy-space-2);
  min-block-size: 46px;
  padding: 10px 18px;
  border: 1px solid var(--sy-control);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-surface);
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--sy-dur) var(--sy-ease),
    border-color var(--sy-dur) var(--sy-ease),
    color var(--sy-dur) var(--sy-ease),
    transform var(--sy-dur-fast) var(--sy-ease);
}

.sy-btn:hover {
  border-color: var(--sy-ink);
  background: var(--sy-surface);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-btn:active {
  transform: translateY(1px);
}

.sy-btn:focus-visible {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-btn svg {
  flex: none;
}

.sy-btn--primary {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
  color: var(--sy-on-primary);
}

.sy-btn--primary:hover {
  border-color: var(--sy-primary-hover);
  background: var(--sy-primary-hover);
  color: var(--sy-on-primary);
}

.sy-btn--secondary {
  background: var(--sy-surface);
}

.sy-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--sy-ink);
}

.sy-btn--ghost:hover {
  border-color: transparent;
  background: var(--sy-desk);
}

.sy-btn--sm {
  min-block-size: 40px;
  padding: 7px 14px;
  font-size: var(--sy-fs-meta);
}

.sy-btn--lg {
  min-block-size: 54px;
  padding: 13px 24px;
  font-size: var(--sy-fs-body);
}

.sy-btn--block {
  display: flex;
  inline-size: 100%;
}

.sy-btn--icon {
  inline-size: 46px;
  padding: 0;
}

.sy-btn--icon.sy-btn--sm {
  inline-size: 40px;
}

.sy-btn[aria-pressed="true"]:not(.sy-btn--primary) {
  border-color: var(--sy-primary);
  background: var(--sy-accent-soft);
  color: var(--sy-ink);
  box-shadow: inset 0 0 0 1px var(--sy-primary);
}

/* Disabled stays legible: muted text on the desk, never faded */
.sy-btn:disabled,
.sy-btn[aria-disabled="true"] {
  border-color: var(--sy-hair);
  background: var(--sy-desk);
  color: var(--sy-muted);
  cursor: not-allowed;
  transform: none;
}

.sy-btn__spin {
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: sy-spin 0.8s linear infinite;
}

.sy-btn[aria-busy="true"] {
  cursor: progress;
}

@keyframes sy-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (pointer: coarse) {
  .sy-btn--sm {
    min-block-size: 44px;
  }

  .sy-btn--icon.sy-btn--sm {
    inline-size: 44px;
  }
}

.sy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-3);
}

.sy-actions--center {
  justify-content: center;
}

.sy-actions--end {
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .sy-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .sy-actions--stack-sm .sy-btn {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-btn {
    transition: none;
  }

  .sy-btn:active {
    transform: none;
  }

  .sy-btn__spin {
    animation-duration: 2.4s;
  }
}

/* ---- badges ---- */
/* Syllabus badges: small 6px tags in Lexend. Status words, never decoration. */

.sy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 26px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--sy-radius-chip);
  background: var(--sy-desk);
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--sy-track-label);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sy-badge svg {
  flex: none;
}

.sy-badge--teal {
  background: var(--sy-accent-soft);
  color: var(--sy-accent);
}

.sy-badge--ok {
  background: var(--sy-ok-soft);
  color: var(--sy-ok);
}

.sy-badge--warn {
  background: var(--sy-warn-soft);
  color: var(--sy-warn);
}

.sy-badge--danger {
  background: var(--sy-danger-soft);
  color: var(--sy-danger);
}

.sy-badge--info {
  background: var(--sy-info-soft);
  color: var(--sy-info);
}

.sy-badge--mark {
  background: var(--sy-mark);
  color: var(--sy-mark-ink);
}

.sy-badge--outline {
  border-color: var(--sy-hair-strong);
  background: transparent;
  color: var(--sy-body);
}

.sy-badge--dot::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentColor;
}

.sy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: var(--sy-radius-round);
  background: var(--sy-primary);
  color: var(--sy-on-primary);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- mark ---- */
/* Syllabus mark: the highlighter. One marked phrase per heading, a few per lesson. */

.sy-mark {
  padding: 0.04em 0.2em;
  margin-inline: -0.04em;
  border-radius: 0.28em 0.5em 0.32em 0.55em / 0.5em 0.3em 0.55em 0.35em;
  background: var(--sy-mark);
  color: var(--sy-mark-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The heading swipe: a marker stroke across the lower part of a short phrase */
.sy-mark--swipe {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  padding: 0 0.08em;
  margin: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

.sy-mark--swipe::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -0.06em;
  inset-block: 0.46em 0.02em;
  border-radius: 0.18em 0.42em 0.24em 0.5em / 0.4em 0.22em 0.48em 0.3em;
  background: var(--sy-mark);
  transform-origin: left center;
}

[dir="rtl"] .sy-mark--swipe::before {
  transform-origin: right center;
}

.sy-mark--swipe.is-armed::before {
  animation: sy-draw 760ms var(--sy-ease-out) 120ms both paused;
}

.sy-mark--swipe.is-armed.is-drawing::before {
  animation-play-state: running;
}

@keyframes sy-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* A marker underline for links to key terms */
.sy-mark--under {
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sy-tip-bar);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

@media (prefers-reduced-motion: reduce) {
  .sy-mark--swipe.is-armed::before {
    animation: none;
  }
}

@media (forced-colors: active) {
  .sy-mark,
  .sy-mark--swipe::before {
    forced-color-adjust: none;
  }
}

/* ---- nav ---- */
/* Syllabus nav: paper bar with a hairline, the school mark, five links and one primary action. */

.sy-nav {
  container-type: inline-size;
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid var(--sy-hair);
  background: var(--sy-paper);
}

.sy-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sy-space-4);
  inline-size: 100%;
  max-inline-size: calc(var(--sy-content) + var(--sy-gutter) * 2);
  min-block-size: var(--sy-nav-h);
  margin-inline: auto;
  padding-inline: var(--sy-gutter);
}

.sy-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: auto;
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-nav__brand:hover {
  color: var(--sy-ink);
}

.sy-nav__brand .sy-brandmark {
  flex: none;
  color: var(--sy-primary);
}

.sy-nav__name {
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: var(--sy-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1;
}

.sy-nav__school {
  display: none;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--sy-hair-strong);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: 1.2;
  white-space: nowrap;
}

.sy-nav__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding: 8px 12px;
  border-radius: var(--sy-radius-btn);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-regular);
  text-decoration: none;
  white-space: nowrap;
}

.sy-nav__link:hover {
  background: var(--sy-desk);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-nav__link[aria-current="page"] {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

.sy-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 4px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--sy-primary);
}

.sy-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sy-space-2);
}

.sy-nav__signin {
  display: none;
}

.sy-nav__extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-2);
  padding-block-start: var(--sy-space-3);
  margin-block-start: var(--sy-space-2);
  border-block-start: 1px solid var(--sy-hair);
}

.sy-theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .sy-theme-toggle__sun {
  display: inline-flex;
}

:root[data-theme="dark"] .sy-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sy-theme-toggle__sun {
    display: inline-flex;
  }

  :root:not([data-theme="light"]) .sy-theme-toggle__moon {
    display: none;
  }
}

/* Phones and tablets: the links fold into a disclosure panel under the bar */
@container (max-width: 1023px) {
  .sy-nav__menu {
    padding-block: var(--sy-space-2) var(--sy-space-4);
  }

  .sy-nav.has-menu .sy-nav__menu {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: none;
    padding: var(--sy-space-3) var(--sy-gutter) var(--sy-space-5);
    border-block-end: 1px solid var(--sy-hair);
    background: var(--sy-paper);
    box-shadow: var(--sy-shadow-lift);
  }

  .sy-nav.has-menu .sy-nav__menu.is-open {
    display: block;
  }

  .sy-nav:not(.has-menu) .sy-nav__inner {
    flex-wrap: wrap;
  }

  .sy-nav:not(.has-menu) .sy-nav__menu {
    order: 3;
    inline-size: 100%;
  }

  .sy-nav:not(.has-menu) .sy-nav__links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@container (min-width: 1024px) {
  .sy-nav__menu {
    order: 0;
  }

  .sy-nav__links {
    flex-direction: row;
    align-items: center;
  }

  .sy-nav__link {
    padding-inline: 12px;
  }

  .sy-nav__toggle,
  .sy-nav__extra {
    display: none;
  }

  .sy-nav__signin {
    display: inline-flex;
  }

  .sy-nav__brand {
    margin-inline-end: var(--sy-space-5);
  }

  .sy-nav__actions {
    margin-inline-start: auto;
  }
}

@container (min-width: 1200px) {
  .sy-nav__school {
    display: inline;
  }
}

@container (max-width: 380px) {
  .sy-nav__inner {
    gap: var(--sy-space-2);
  }

  .sy-nav__name {
    font-size: 1.125rem;
  }
}

/* ---- announcement-bar ---- */
/* Syllabus announcement bar: one slate line above the nav, on the band tokens so it stays dark in dark mode. */

.sy-announce {
  background: var(--sy-band);
  color: var(--sy-band-ink);
}

.sy-announce__inner {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
  min-block-size: 48px;
  padding-block: var(--sy-space-2);
}

.sy-announce__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sy-space-3);
  flex: 1;
  color: var(--sy-band-ink);
  font-size: var(--sy-fs-small);
  line-height: 1.45;
}

.sy-announce__text svg {
  flex: none;
}

.sy-announce__link {
  color: var(--sy-band-ink);
  font-weight: var(--sy-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sy-announce__link:hover {
  color: var(--sy-band-ink);
  text-decoration-thickness: 2px;
}

.sy-announce__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--sy-radius-btn);
  background: transparent;
  color: var(--sy-band-ink);
  cursor: pointer;
}

.sy-announce__close:hover {
  background: var(--sy-band-line);
}

.sy-announce :focus-visible {
  outline-color: var(--sy-band-ink);
}

@media (pointer: coarse) {
  .sy-announce__close {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ---- breadcrumbs ---- */
/* Syllabus breadcrumbs: course, module and lesson path above a title. */

.sy-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sy-fs-meta);
  line-height: 1.4;
}

.sy-crumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--sy-muted);
}

.sy-crumbs__item + .sy-crumbs__item::before {
  content: "/";
  margin-inline: var(--sy-space-2);
  color: var(--sy-hair-strong);
}

.sy-crumbs__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--sy-muted);
  text-decoration: none;
}

.sy-crumbs__link:hover {
  color: var(--sy-ink);
  text-decoration: underline;
}

.sy-crumbs__item [aria-current="page"] {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

@media (pointer: coarse) {
  .sy-crumbs__link {
    min-block-size: 44px;
  }
}

/* ---- sidebar-nav ---- */
/* Syllabus side navigation: grouped links with a current bar. */

.sy-sidenav {
  display: grid;
  gap: var(--sy-space-6);
}

.sy-sidenav__group {
  display: grid;
  gap: var(--sy-space-2);
}

.sy-sidenav__title {
  padding-inline: 12px;
  color: var(--sy-muted);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
}

.sy-sidenav__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-sidenav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 40px;
  padding: 8px 12px;
  border-radius: var(--sy-radius-btn);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.35;
  text-decoration: none;
}

.sy-sidenav__link svg {
  flex: none;
  color: var(--sy-muted);
}

.sy-sidenav__link:hover {
  background: var(--sy-desk);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-sidenav__link[aria-current="page"],
.sy-sidenav__link[aria-current="true"],
.sy-sidenav__link[aria-current="location"] {
  background: var(--sy-accent-soft);
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

.sy-sidenav__link[aria-current="page"] svg,
.sy-sidenav__link[aria-current="true"] svg,
.sy-sidenav__link[aria-current="location"] svg {
  color: var(--sy-accent);
}

.sy-sidenav__link[aria-current="page"]::before,
.sy-sidenav__link[aria-current="true"]::before,
.sy-sidenav__link[aria-current="location"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--sy-primary);
}

.sy-sidenav__count {
  margin-inline-start: auto;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
  .sy-sidenav__link {
    min-block-size: 44px;
  }
}

/* ---- footer ---- */
/* Syllabus footer: the desk under the page, quiet columns, a legal row. */

.sy-footer {
  border-block-start: 1px solid var(--sy-hair);
  background: var(--sy-desk);
  color: var(--sy-body);
}

.sy-footer__inner {
  display: grid;
  gap: var(--sy-space-8);
  padding-block: var(--sy-space-10) var(--sy-space-8);
}

@media (min-width: 900px) {
  .sy-footer__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--sy-space-10);
  }
}

.sy-footer__brand {
  display: grid;
  gap: var(--sy-space-4);
  align-content: start;
}

.sy-footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-footer__mark .sy-brandmark {
  flex: none;
  color: var(--sy-primary);
}

.sy-footer__name {
  font-family: var(--sy-font-serif);
  font-size: 1.25rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.1;
}

.sy-footer__about {
  max-inline-size: 30em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
}

.sy-footer__cols {
  display: grid;
  gap: var(--sy-space-7);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .sy-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sy-footer__title {
  margin-block-end: var(--sy-space-3);
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  letter-spacing: 0;
  line-height: 1.3;
}

.sy-footer__links {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-footer__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  text-decoration: none;
}

.sy-footer__link:hover {
  color: var(--sy-ink);
  text-decoration: underline;
}

.sy-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-3) var(--sy-space-6);
  padding-block: var(--sy-space-5) var(--sy-space-7);
  border-block-start: 1px solid var(--sy-hair-strong);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-2) var(--sy-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-footer__legal a {
  color: var(--sy-muted);
}

.sy-footer__legal a:hover {
  color: var(--sy-ink);
}

@media (pointer: coarse) {
  .sy-footer__link {
    min-block-size: 44px;
  }
}

/* ---- hero ---- */
/* Syllabus hero: ruled paper, a Literata title with one marked phrase, and a coded lesson window. */

.sy-hero {
  position: relative;
  container-type: inline-size;
  border-block-end: 1px solid var(--sy-hair);
  background-color: var(--sy-paper);
}

/* The exercise-book ruling fades in away from the copy, so it never runs through a sentence */
.sy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sy-ruled) - 1px), var(--sy-rule) calc(var(--sy-ruled) - 1px), var(--sy-rule) var(--sy-ruled));
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, black 62%);
  mask-image: linear-gradient(90deg, transparent 8%, black 62%);
  pointer-events: none;
}

[dir="rtl"] .sy-hero::before {
  -webkit-mask-image: linear-gradient(270deg, transparent 8%, black 62%);
  mask-image: linear-gradient(270deg, transparent 8%, black 62%);
}

.sy-hero__inner {
  position: relative;
  display: grid;
  gap: var(--sy-space-9);
  inline-size: 100%;
  max-inline-size: calc(var(--sy-content) + var(--sy-gutter) * 2);
  margin-inline: auto;
  padding: var(--sy-space-10) var(--sy-gutter) var(--sy-space-11);
}

.sy-hero__copy {
  display: grid;
  gap: var(--sy-space-6);
  align-content: start;
}

.sy-hero__title {
  font-size: var(--sy-fs-display);
  line-height: var(--sy-lh-display);
  letter-spacing: var(--sy-track-display);
}

.sy-hero__lede {
  max-inline-size: 34em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-lede);
  line-height: 1.55;
}

.sy-hero__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-inline-size: 34em;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.5;
}

.sy-hero__note svg {
  flex: none;
  margin-block-start: 2px;
  color: var(--sy-primary);
}

.sy-hero__stage {
  position: relative;
  min-inline-size: 0;
}

@container (min-width: 960px) {
  .sy-hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--sy-space-10);
    padding-block: var(--sy-space-11) var(--sy-space-12);
  }
}

/* Inner pages: a shorter hero with breadcrumbs and a page title */
.sy-hero--page .sy-hero__inner {
  gap: var(--sy-space-5);
  padding-block: var(--sy-space-9) var(--sy-space-10);
}

.sy-hero--page .sy-hero__title {
  font-size: var(--sy-fs-page);
}

.sy-hero--page .sy-hero__copy {
  max-inline-size: 48rem;
  gap: var(--sy-space-5);
}

@container (min-width: 960px) {
  .sy-hero--page .sy-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--sy-space-10) var(--sy-space-11);
  }

  .sy-hero--split .sy-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.sy-hero--center .sy-hero__copy {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.sy-hero--center .sy-hero__lede,
.sy-hero--center .sy-hero__note {
  margin-inline: auto;
}

/* Side panel for course facts and price */
.sy-hero__panel {
  display: grid;
  gap: var(--sy-space-5);
  padding: var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-lift);
}

/* The coded lesson window */
.sy-window {
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--sy-hair-strong);
  border-radius: var(--sy-radius-panel);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-pop);
  color: var(--sy-body);
  font-size: var(--sy-fs-meta);
}

.sy-window__bar {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
  min-block-size: 44px;
  padding: 8px 16px;
  border-block-end: 1px solid var(--sy-hair);
  background: var(--sy-desk);
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

.sy-window__crumbs {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sy-window__meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sy-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sy-window__track {
  position: relative;
  display: block;
  inline-size: 64px;
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--sy-radius-round);
  background: var(--sy-track);
}

.sy-window__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: inherit;
  background: var(--sy-progress);
}

.sy-window__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sy-window__rail {
  display: none;
  padding: var(--sy-space-4) var(--sy-space-3);
  border-inline-end: 1px solid var(--sy-hair);
  background: var(--sy-paper);
}

.sy-window__dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sy-window__page {
  display: grid;
  gap: var(--sy-space-3);
  align-content: start;
  padding: var(--sy-space-5) var(--sy-space-5) var(--sy-space-6);
}

.sy-window__title {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.sy-window__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

.sy-window__text {
  color: var(--sy-body);
  font-family: var(--sy-font-serif);
  font-size: var(--sy-fs-small);
  line-height: 1.62;
}

.sy-window__q {
  display: grid;
  gap: 8px;
  padding: var(--sy-space-4);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-paper);
}

.sy-window__ask {
  color: var(--sy-ink);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
}

.sy-window__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-surface);
  font-size: var(--sy-fs-meta);
}

.sy-window__letter {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--sy-desk);
  color: var(--sy-ink);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-semibold);
}

.sy-window__choice.is-right {
  border-color: var(--sy-ok);
  background: var(--sy-ok-soft);
  color: var(--sy-ink);
}

.sy-window__choice.is-right .sy-window__letter {
  background: var(--sy-ok);
  color: var(--sy-ok-soft);
}

@container (min-width: 560px) {
  .sy-window__body {
    grid-template-columns: 208px minmax(0, 1fr);
    min-block-size: 400px;
  }

  .sy-window__rail {
    display: block;
  }

  .sy-window__dots {
    display: none;
  }

  .sy-window__page {
    padding: var(--sy-space-6) var(--sy-space-7) var(--sy-space-7);
  }
}

/* A floating progress note that overlaps the window corner on wide screens */
.sy-hero__float {
  display: none;
}

@container (min-width: 1100px) {
  .sy-hero__float {
    position: absolute;
    inset-inline-start: -36px;
    inset-block-end: -28px;
    display: flex;
    align-items: center;
    gap: var(--sy-space-3);
    padding: 12px 18px 12px 12px;
    border: 1px solid var(--sy-hair);
    border-radius: var(--sy-radius-card);
    background: var(--sy-surface);
    box-shadow: var(--sy-shadow-lift);
    color: var(--sy-body);
    font-size: var(--sy-fs-meta);
    line-height: 1.35;
  }

  .sy-hero__float strong {
    display: block;
    color: var(--sy-ink);
  }
}

/* ---- section-header ---- */
/* Syllabus section header: a Literata title, an optional lede and one action. No label above it. */

.sy-section-header {
  display: grid;
  gap: var(--sy-space-4);
  max-inline-size: 48rem;
  margin-block-end: var(--sy-space-9);
}

.sy-section-header__title {
  font-size: var(--sy-fs-title);
  line-height: var(--sy-lh-title);
  letter-spacing: var(--sy-track-title);
}

.sy-section-header__lede {
  max-inline-size: 38em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-lede);
  line-height: 1.55;
}

.sy-section-header__actions {
  margin-block-start: var(--sy-space-2);
}

.sy-section-header--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 960px) {
  .sy-section-header--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--sy-space-10);
    max-inline-size: none;
  }

  .sy-section-header--split .sy-section-header__lede {
    padding-block-end: 4px;
  }
}

/* ---- cards ---- */
/* Syllabus cards: sheets of paper on the desk. Plain, linked, ruled index card and desk. */

.sy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sy-space-3);
  padding: var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
  color: var(--sy-body);
}

.sy-card__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--sy-space-1);
  border-radius: 10px;
  background: var(--sy-accent-soft);
  color: var(--sy-accent);
}

.sy-card__title {
  font-size: var(--sy-fs-card);
  line-height: var(--sy-lh-snug);
}

.sy-card__title a {
  color: inherit;
  text-decoration: none;
}

.sy-card__text {
  font-size: var(--sy-fs-small);
  line-height: 1.6;
}

.sy-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sy-space-3);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-3);
  margin-block-start: auto;
  padding-block-start: var(--sy-space-4);
  border-block-start: 1px solid var(--sy-hair);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-card--link {
  transition: border-color var(--sy-dur) var(--sy-ease), box-shadow var(--sy-dur) var(--sy-ease), transform var(--sy-dur) var(--sy-ease);
}

.sy-card--link .sy-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sy-card--link:hover {
  border-color: var(--sy-control);
  box-shadow: var(--sy-shadow-lift);
  transform: translateY(-2px);
}

.sy-card--link:hover .sy-card__title {
  color: var(--sy-accent);
}

.sy-card--link:focus-within {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-card--link .sy-card__title a:focus-visible {
  outline: none;
}

.sy-card--lead {
  gap: var(--sy-space-4);
  padding: var(--sy-space-7);
}

.sy-card--lead .sy-card__title {
  font-size: var(--sy-fs-headline);
  line-height: var(--sy-lh-title);
}

.sy-card--desk {
  border-color: transparent;
  background: var(--sy-desk);
  box-shadow: none;
}

/* The index card: a colored header line and faint ruled lines below it */
.sy-card--ruled {
  padding-block-start: var(--sy-space-5);
  background-color: var(--sy-surface);
  background-image:
    linear-gradient(var(--sy-err-bar), var(--sy-err-bar)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--sy-rule) 27px, var(--sy-rule) 28px);
  background-repeat: no-repeat, repeat;
  background-size: 100% 1px, 100% 28px;
  background-position: 0 60px, 0 61px;
}

.sy-card--ruled .sy-card__title {
  min-block-size: 36px;
}

@media (prefers-reduced-motion: reduce) {
  .sy-card--link {
    transition: none;
  }

  .sy-card--link:hover {
    transform: none;
  }
}

/* ---- bento ---- */
/* Syllabus bento: study tools, each with a coded mini interface in a desk well. */

.sy-bento {
  display: grid;
  gap: var(--sy-space-5);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-bento__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sy-space-3);
  padding: var(--sy-space-4) var(--sy-space-4) var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-bento__visual {
  display: grid;
  place-items: center;
  min-block-size: 180px;
  margin-block-end: var(--sy-space-2);
  padding: var(--sy-space-5);
  overflow: hidden;
  border: 1px solid var(--sy-hair);
  border-radius: 10px;
  background: var(--sy-desk);
}

.sy-bento__title {
  padding-inline: var(--sy-space-2);
  font-size: var(--sy-fs-card);
}

.sy-bento__text {
  padding-inline: var(--sy-space-2);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

@media (min-width: 640px) {
  .sy-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sy-bento__cell--wide {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .sy-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sy-bento__cell {
    grid-column: span 2;
  }

  .sy-bento__cell--wide {
    grid-column: span 4;
  }

  .sy-bento__cell--half {
    grid-column: span 3;
  }
}

/* Mini interfaces that live inside a visual well */
.sy-bento__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sy-space-2);
}

.sy-bento__streak {
  display: grid;
  grid-template-columns: repeat(7, 18px);
  gap: 5px;
}

.sy-bento__day {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 4px;
  background: var(--sy-surface);
  box-shadow: inset 0 0 0 1px var(--sy-hair);
}

.sy-bento__day--1 { background: var(--sy-seq-1); box-shadow: none; }
.sy-bento__day--2 { background: var(--sy-seq-2); box-shadow: none; }
.sy-bento__day--3 { background: var(--sy-seq-3); box-shadow: none; }
.sy-bento__day--4 { background: var(--sy-seq-4); box-shadow: none; }
.sy-bento__day--5 { background: var(--sy-seq-5); box-shadow: none; }

.sy-bento__stack {
  position: relative;
  inline-size: min(100%, 260px);
  block-size: 128px;
}

.sy-bento__sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sy-space-4);
  border: 1px solid var(--sy-hair);
  border-radius: 10px;
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
  font-weight: var(--sy-weight-semibold);
  text-align: center;
}

.sy-bento__sheet--back {
  transform: translate(10px, -10px) rotate(3deg);
  background: var(--sy-paper);
}

.sy-bento__sheet--back2 {
  transform: translate(20px, -18px) rotate(6deg);
  background: var(--sy-desk-strong);
}

/* ---- features ---- */
/* Syllabus features: icon tiles in a grid, and alternating rows that pair copy with a coded visual. */

.sy-features {
  display: grid;
  gap: var(--sy-space-8) var(--sy-space-7);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .sy-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .sy-features--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sy-features__item {
  display: grid;
  gap: var(--sy-space-3);
  align-content: start;
}

.sy-features__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--sy-space-1);
  border: 1px solid var(--sy-hair);
  border-radius: 10px;
  background: var(--sy-surface);
  color: var(--sy-primary);
  box-shadow: var(--sy-shadow-card);
}

.sy-features__title {
  font-size: var(--sy-fs-card);
}

.sy-features__text {
  max-inline-size: 34em;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.6;
}

.sy-features__rows {
  display: grid;
  container-type: inline-size;
}

.sy-features__row {
  display: grid;
  gap: var(--sy-space-7);
  align-items: center;
  padding-block: var(--sy-space-9);
  border-block-start: 1px solid var(--sy-hair);
}

.sy-features__row:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.sy-features__copy {
  display: grid;
  gap: var(--sy-space-4);
  align-content: start;
}

.sy-features__heading {
  font-size: var(--sy-fs-headline);
}

.sy-features__list {
  display: grid;
  gap: var(--sy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-features__list li {
  display: flex;
  gap: 10px;
  font-size: var(--sy-fs-small);
}

.sy-features__list svg {
  flex: none;
  margin-block-start: 3px;
  color: var(--sy-primary);
}

.sy-features__media {
  display: grid;
  gap: var(--sy-space-4);
  align-content: center;
  min-inline-size: 0;
  min-block-size: 260px;
  padding: var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-desk);
}

@container (min-width: 720px) {
  .sy-features__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--sy-space-8);
  }

  .sy-features__row:nth-child(even) .sy-features__media {
    order: -1;
  }
}

@container (min-width: 1000px) {
  .sy-features__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sy-space-10);
  }

  .sy-features__media {
    padding: var(--sy-space-7);
  }
}

/* ---- stats ---- */
/* Syllabus stats: course facts in big Literata numerals over a hairline. */

.sy-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block-start: 1px solid var(--sy-hair-strong);
}

.sy-stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sy-space-5) var(--sy-space-4) var(--sy-space-5) 0;
  border-block-end: 1px solid var(--sy-hair);
}

.sy-stats__value {
  order: -1;
  margin: 0;
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: var(--sy-fs-title);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-stats__label {
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
}

.sy-stats__note {
  margin: 0;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

@media (min-width: 960px) {
  .sy-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sy-stats__item {
    padding: var(--sy-space-6) var(--sy-space-6);
    border-block-end: 0;
    border-inline-start: 1px solid var(--sy-hair);
  }

  .sy-stats__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* ---- logo-row ---- */
/* Syllabus logo row: invented monogram marks for the open data sources the exercises use. */

.sy-logos {
  display: grid;
  gap: var(--sy-space-5);
}

.sy-logos__title {
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
  text-align: center;
}

.sy-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sy-space-4) var(--sy-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-logos__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.sy-logos__item svg {
  flex: none;
  color: var(--sy-ink);
}

/* ---- testimonial ---- */
/* Syllabus testimonial: a quote from the school's own people, set in Literata. */

.sy-quote {
  display: grid;
  gap: var(--sy-space-6);
  max-inline-size: 52rem;
  margin: 0;
}

.sy-quote__mark {
  color: var(--sy-primary);
}

.sy-quote__text {
  margin: 0;
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: var(--sy-weight-regular);
  line-height: 1.42;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

.sy-quote__text p + p {
  margin-block-start: 0.8em;
}

.sy-quote__by {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
}

.sy-quote__name {
  display: block;
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
}

.sy-quote__role {
  display: block;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: 1.3;
}

.sy-quote--card {
  padding: var(--sy-space-7);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-quote--card .sy-quote__text {
  font-size: var(--sy-fs-headline);
}

.sy-quote--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

/* ---- pricing ---- */
/* Syllabus pricing: three plan sheets, one featured, one primary action each, a plain refund line. */

.sy-pricing {
  display: grid;
  gap: var(--sy-space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 960px) {
  .sy-pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sy-pricing--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 880px;
    margin-inline: auto;
  }
}

.sy-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sy-space-5);
  padding: var(--sy-space-7) var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-plan__head {
  display: grid;
  gap: var(--sy-space-2);
}

.sy-plan__name {
  font-size: var(--sy-fs-headline);
}

.sy-plan__desc {
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
}

.sy-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sy-space-2);
  padding-block-end: var(--sy-space-5);
  border-block-end: 1px solid var(--sy-hair);
}

.sy-plan__amount {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 3rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-plan__per {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-plan__list {
  display: grid;
  gap: var(--sy-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-plan__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--sy-fs-small);
  line-height: 1.45;
}

.sy-plan__item svg {
  flex: none;
  margin-block-start: 2px;
  color: var(--sy-primary);
}

.sy-plan__item--no {
  color: var(--sy-muted);
}

.sy-plan__item--no svg {
  color: var(--sy-muted);
}

.sy-plan__cta {
  display: grid;
  gap: var(--sy-space-3);
  margin-block-start: auto;
  padding-block-start: var(--sy-space-2);
}

.sy-plan__note {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  text-align: center;
}

.sy-plan--featured {
  border: 2px solid var(--sy-primary);
  box-shadow: var(--sy-shadow-lift);
}

.sy-plan__badge {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: var(--sy-space-6);
}

.sy-plan__badge .sy-badge {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
  color: var(--sy-on-primary);
}

.sy-pricing__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-inline-size: 46rem;
  margin: var(--sy-space-8) auto 0;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  text-align: start;
}

.sy-pricing__note svg {
  flex: none;
  margin-block-start: 2px;
  color: var(--sy-ok);
}

/* ---- cta ---- */
/* Syllabus CTA: a closing sheet on ruled paper, or the one slate band per page. */

.sy-cta__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--sy-space-6);
  padding: var(--sy-space-8) var(--sy-space-6);
  overflow: hidden;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-panel);
  background-color: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-cta__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sy-ruled) - 1px), var(--sy-rule) calc(var(--sy-ruled) - 1px), var(--sy-rule) var(--sy-ruled));
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, black 85%);
  mask-image: linear-gradient(90deg, transparent 30%, black 85%);
  pointer-events: none;
}

[dir="rtl"] .sy-cta__inner::before {
  -webkit-mask-image: linear-gradient(270deg, transparent 30%, black 85%);
  mask-image: linear-gradient(270deg, transparent 30%, black 85%);
}

.sy-cta__copy {
  display: grid;
  gap: var(--sy-space-4);
}

.sy-cta__title {
  font-size: var(--sy-fs-title);
}

.sy-cta__text {
  max-inline-size: 36em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-lede);
  line-height: 1.55;
}

.sy-cta__side {
  display: grid;
  gap: var(--sy-space-4);
  align-content: center;
}

.sy-cta__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--sy-body);
  font-size: var(--sy-fs-meta);
  line-height: 1.45;
}

.sy-cta__note svg {
  flex: none;
  color: var(--sy-primary);
}

@media (min-width: 960px) {
  .sy-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
    gap: var(--sy-space-10);
    padding: var(--sy-space-10) var(--sy-space-10);
  }
}

/* The slate band: one per page at most, full bleed */
.sy-cta--band {
  background: var(--sy-band);
  color: var(--sy-band-ink);
}

.sy-cta--band .sy-cta__inner {
  padding-inline: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sy-cta--band .sy-cta__inner::before {
  display: none;
}

.sy-cta--band .sy-cta__title {
  color: var(--sy-band-ink);
}

.sy-cta--band .sy-cta__text,
.sy-cta--band .sy-cta__note {
  color: var(--sy-band-muted);
}

.sy-cta--band .sy-cta__note svg {
  color: var(--sy-band-ink);
}

.sy-cta--band .sy-btn {
  border-color: var(--sy-band-line);
  background: transparent;
  color: var(--sy-band-ink);
}

.sy-cta--band .sy-btn:hover {
  border-color: var(--sy-band-ink);
}

.sy-cta--band .sy-btn--primary {
  border-color: var(--sy-band-btn);
  background: var(--sy-band-btn);
  color: var(--sy-band-btn-ink);
}

.sy-cta--band .sy-btn--primary:hover {
  border-color: var(--sy-band-btn);
  background: var(--sy-band-btn);
  color: var(--sy-band-btn-ink);
  box-shadow: 0 0 0 3px var(--sy-band-line);
}

.sy-cta--band :focus-visible {
  outline-color: var(--sy-band-ink);
}

/* ---- faq ---- */
/* Syllabus FAQ: native details, a plus that turns to a cross, Literata questions. */

.sy-faq {
  display: grid;
  border-block-start: 1px solid var(--sy-hair-strong);
}

.sy-faq__item {
  border-block-end: 1px solid var(--sy-hair);
}

.sy-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sy-space-5);
  padding-block: var(--sy-space-5);
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.sy-faq__q::-webkit-details-marker {
  display: none;
}

.sy-faq__q:hover {
  color: var(--sy-accent);
}

.sy-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  margin-block-start: -1px;
  border: 1px solid var(--sy-hair-strong);
  border-radius: 50%;
  background: var(--sy-surface);
  color: var(--sy-ink);
  transition: transform var(--sy-dur) var(--sy-ease), background-color var(--sy-dur) var(--sy-ease);
}

.sy-faq__item[open] .sy-faq__icon {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
  color: var(--sy-on-primary);
  transform: rotate(45deg);
}

.sy-faq__a {
  display: grid;
  gap: var(--sy-space-3);
  max-inline-size: 62ch;
  padding-block-end: var(--sy-space-6);
  color: var(--sy-body);
  font-size: var(--sy-fs-body);
}

.sy-faq__group {
  margin-block: var(--sy-space-9) var(--sy-space-3);
  font-size: var(--sy-fs-card);
}

.sy-faq__group:first-child {
  margin-block-start: 0;
}

.sy-faq--sheet {
  padding: var(--sy-space-2) var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
}

.sy-faq--sheet .sy-faq__item:last-child {
  border-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sy-faq__icon {
    transition: none;
  }
}

/* ---- prose ---- */
/* Syllabus prose: the reading column. Literata at 19px with generous leading, one idea per paragraph. */

.sy-prose {
  max-inline-size: var(--sy-reading);
  color: var(--sy-body);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: var(--sy-fs-prose);
  line-height: var(--sy-lh-prose);
  hanging-punctuation: first allow-end last;
  font-variant-numeric: lining-nums;
}

.sy-prose > * + * {
  margin-block-start: 1.1em;
}

.sy-prose > :where(h2) {
  margin-block-start: 2.1em;
  font-size: var(--sy-fs-headline);
  line-height: var(--sy-lh-title);
  letter-spacing: -0.01em;
  scroll-margin-block-start: calc(var(--sy-nav-h) + var(--sy-space-6));
}

.sy-prose > :where(h3) {
  margin-block-start: 1.7em;
  font-size: var(--sy-fs-card);
  scroll-margin-block-start: calc(var(--sy-nav-h) + var(--sy-space-6));
}

.sy-prose > :where(h2 + *, h3 + *) {
  margin-block-start: 0.55em;
}

.sy-prose__lead {
  color: var(--sy-ink);
  font-size: 1.3125rem;
  line-height: 1.6;
}

.sy-prose :where(a) {
  color: var(--sy-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sy-prose :where(a:hover) {
  color: var(--sy-ink);
}

.sy-prose :where(ul, ol) {
  padding-inline-start: 1.4em;
}

.sy-prose :where(li + li) {
  margin-block-start: 0.4em;
}

.sy-prose :where(li)::marker {
  color: var(--sy-primary);
}

.sy-prose :where(ol > li)::marker {
  font-family: var(--sy-font-sans);
  font-size: 0.9em;
  font-weight: var(--sy-weight-semibold);
}

.sy-prose :where(code) {
  padding: 1px 6px;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-xs);
  background: var(--sy-desk);
  color: var(--sy-ink);
  font-size: 0.84em;
  overflow-wrap: anywhere;
}

.sy-prose :where(strong) {
  color: var(--sy-ink);
}

.sy-prose :where(dfn) {
  color: var(--sy-ink);
  font-style: italic;
  font-weight: var(--sy-weight-semibold);
}

.sy-prose :where(mark) {
  padding: 0.04em 0.2em;
  margin-inline: -0.04em;
  border-radius: 0.28em 0.5em 0.32em 0.55em / 0.5em 0.3em 0.55em 0.35em;
  background: var(--sy-mark);
  color: var(--sy-mark-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sy-prose :where(blockquote) {
  padding-inline-start: var(--sy-space-5);
  border-inline-start: 3px solid var(--sy-hair-strong);
  color: var(--sy-ink);
  font-style: italic;
}

.sy-prose :where(figure) {
  margin-block: 2em;
}

.sy-prose :where(figcaption) {
  margin-block-start: var(--sy-space-3);
  color: var(--sy-muted);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  line-height: 1.45;
}

.sy-prose :where(hr) {
  block-size: 1px;
  margin-block: 2.4em;
  border: 0;
  background: var(--sy-hair);
}

.sy-prose :where(table) {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.sy-prose :where(th, td) {
  padding: 10px 12px;
  border-block-end: 1px solid var(--sy-hair);
  text-align: start;
  vertical-align: top;
}

.sy-prose :where(th) {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-semibold);
}

.sy-prose > :where(.sy-callout, .sy-formula, .sy-mcq, .sy-chart, .sy-deck, .sy-alert) {
  margin-block: 1.7em;
}

.sy-prose :where(.sy-callout, .sy-mcq, .sy-deck, .sy-alert) {
  font-family: var(--sy-font-sans);
}

/* ---- callout ---- */
/* Syllabus callouts: five kinds learners recognize at a glance. A 4px bar, a tint, an icon and a label. */

.sy-callout {
  display: grid;
  gap: var(--sy-space-2);
  padding: var(--sy-space-4) var(--sy-space-5) var(--sy-space-5);
  border-inline-start: var(--sy-bar) solid var(--sy-rem-bar);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--sy-radius-btn);
  border-end-end-radius: var(--sy-radius-btn);
  background: var(--sy-rem-tint);
  color: var(--sy-body);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-body);
  line-height: 1.6;
}

.sy-callout__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sy-rem-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--sy-track-label);
}

.sy-callout__head svg {
  flex: none;
  color: var(--sy-rem-bar);
}

.sy-callout__title {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.1875rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.35;
}

.sy-callout__body {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-callout__body p,
.sy-callout__body li {
  font-size: var(--sy-fs-body);
}

.sy-callout dfn {
  color: var(--sy-ink);
  font-style: normal;
  font-weight: var(--sy-weight-semibold);
}

.sy-callout__steps {
  display: grid;
  gap: var(--sy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sy-step;
}

.sy-callout__steps > li {
  position: relative;
  padding-inline-start: 36px;
  counter-increment: sy-step;
}

.sy-callout__steps > li::before {
  content: counter(sy-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1px;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1.5px solid var(--sy-ex-bar);
  border-radius: 50%;
  background: var(--sy-surface);
  color: var(--sy-ex-ink);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.sy-callout__answer {
  padding-block-start: var(--sy-space-3);
  border-block-start: 1px dashed var(--sy-ex-bar);
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

.sy-callout--definition {
  border-inline-start-color: var(--sy-def-bar);
  background: var(--sy-def-tint);
}

.sy-callout--definition .sy-callout__head {
  color: var(--sy-def-ink);
}

.sy-callout--definition .sy-callout__head svg {
  color: var(--sy-def-bar);
}

.sy-callout--example {
  border-inline-start-color: var(--sy-ex-bar);
  background: var(--sy-ex-tint);
}

.sy-callout--example .sy-callout__head {
  color: var(--sy-ex-ink);
}

.sy-callout--example .sy-callout__head svg {
  color: var(--sy-ex-bar);
}

.sy-callout--tip {
  border-inline-start-color: var(--sy-tip-bar);
  background: var(--sy-tip-tint);
}

.sy-callout--tip .sy-callout__head {
  color: var(--sy-tip-ink);
}

.sy-callout--tip .sy-callout__head svg {
  color: var(--sy-tip-bar);
}

.sy-callout--mistake {
  border-inline-start-color: var(--sy-err-bar);
  background: var(--sy-err-tint);
}

.sy-callout--mistake .sy-callout__head {
  color: var(--sy-err-ink);
}

.sy-callout--mistake .sy-callout__head svg {
  color: var(--sy-err-bar);
}

.sy-callout--remember {
  border-inline-start-color: var(--sy-rem-bar);
  background: var(--sy-rem-tint);
}

.sy-callout--compact {
  gap: 6px;
  padding: var(--sy-space-3) var(--sy-space-4);
  font-size: var(--sy-fs-meta);
  line-height: 1.5;
}

.sy-callout--compact .sy-callout__head {
  font-size: var(--sy-fs-label);
}

.sy-callout--compact .sy-callout__body p {
  font-size: var(--sy-fs-small);
  line-height: 1.5;
}

/* ---- formula ---- */
/* Syllabus formula: math set in text. Italic variables, real fractions and roots, a where-list. */

.sy-formula {
  display: grid;
  gap: var(--sy-space-4);
  padding: var(--sy-space-6) var(--sy-space-5) var(--sy-space-5);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
  font-family: var(--sy-font-sans);
}

.sy-formula__expr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.18em 0.3em;
  padding-block: var(--sy-space-2);
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.sy-formula var,
.sy-formula__var {
  font-family: var(--sy-font-serif);
  font-style: italic;
}

.sy-formula__bar {
  text-decoration-line: overline;
  text-decoration-thickness: 0.06em;
}

.sy-formula__op {
  padding-inline: 0.12em;
  font-style: normal;
}

.sy-formula__frac {
  display: inline-grid;
  justify-items: center;
  vertical-align: middle;
  text-align: center;
}

.sy-formula__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25em 0.14em;
  border-block-end: 0.06em solid currentColor;
}

.sy-formula__den {
  padding: 0.12em 0.25em 0;
}

.sy-formula__root {
  display: inline-flex;
  align-items: stretch;
}

.sy-formula__radical {
  position: relative;
  flex: none;
  inline-size: 0.62em;
  margin-inline-end: -1px;
}

.sy-formula__radical svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.sy-formula__radicand {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.32em 0.24em 0.06em;
  border-block-start: 1.6px solid currentColor;
}

.sy-formula__sum {
  display: inline-grid;
  justify-items: center;
  margin-inline-end: 0.18em;
  line-height: 1;
}

.sy-formula__sigma {
  font-size: 1.35em;
  font-style: normal;
}

.sy-formula__limit {
  font-size: max(0.55em, 12px);
}

.sy-formula sub,
.sy-formula sup {
  font-size: max(0.62em, 12px);
  line-height: 0;
}

.sy-formula__caption {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  text-align: center;
}

.sy-formula__where {
  display: grid;
  gap: 10px var(--sy-space-4);
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
  padding-block-start: var(--sy-space-4);
  border-block-start: 1px solid var(--sy-hair);
  font-size: var(--sy-fs-small);
}

.sy-formula__where dt {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.4;
  text-align: end;
}

.sy-formula__where dd {
  margin: 0;
  color: var(--sy-body);
  line-height: 1.5;
}

.sy-formula--inline {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--sy-font-serif);
}

/* ---- toc ---- */
/* Syllabus table of contents: drawn as a rail. Read sections fill in, the one in view is half full. */

.sy-toc {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-toc__title {
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
}

.sy-toc__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-toc__item {
  position: relative;
}

.sy-toc__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  inset-block: 28px -10px;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--sy-hair-strong);
}

.sy-toc__item:last-child::before {
  display: none;
}

.sy-toc__item.is-read::before {
  background: var(--sy-done);
}

.sy-toc__link {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: var(--sy-space-3);
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
  line-height: 1.4;
  text-decoration: none;
}

.sy-toc__link .sy-pmark {
  margin-block-start: 4px;
}

.sy-toc__link:hover {
  background: var(--sy-desk);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-toc__link[aria-current="location"],
.sy-toc__link[aria-current="true"] {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

.sy-toc__status {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

/* ---- byline ---- */
/* Syllabus byline: who wrote it, when, and how long it takes to read. */

.sy-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-3) var(--sy-space-5);
}

.sy-byline__who {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
}

.sy-byline__name {
  display: block;
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
}

.sy-byline__role {
  display: block;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: 1.3;
}

.sy-byline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sy-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-byline__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sy-byline--rule {
  justify-content: space-between;
  padding-block: var(--sy-space-4);
  border-block: 1px solid var(--sy-hair);
}

/* ---- timeline ---- */
/* Syllabus timeline: dated entries on a rail. Done entries draw the rail in the primary color. */

.sy-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--sy-space-4);
  padding-block-end: var(--sy-space-7);
}

.sy-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 11px;
  inset-block: 30px 4px;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--sy-hair-strong);
}

.sy-timeline__item--done::before {
  background: var(--sy-done);
}

.sy-timeline__item:last-child {
  padding-block-end: 0;
}

.sy-timeline__item:last-child::before {
  display: none;
}

.sy-timeline__mark {
  display: grid;
  justify-items: center;
  padding-block-start: 3px;
}

.sy-timeline__body {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
}

.sy-timeline__date {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sy-timeline__title {
  font-size: 1.1875rem;
  line-height: 1.35;
}

.sy-timeline__text {
  max-inline-size: 40em;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-timeline--dated .sy-timeline__item {
  row-gap: 4px;
}

.sy-timeline--dated .sy-timeline__mark {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.sy-timeline--dated .sy-timeline__date {
  grid-column: 2;
  grid-row: 1;
}

.sy-timeline--dated .sy-timeline__body {
  grid-column: 2;
  grid-row: 2;
}

@media (min-width: 768px) {
  .sy-timeline--dated .sy-timeline__item {
    grid-template-columns: 132px 24px minmax(0, 1fr);
    column-gap: var(--sy-space-4);
  }

  .sy-timeline--dated .sy-timeline__item::before {
    inset-inline-start: calc(132px + var(--sy-space-4) + 11px);
  }

  .sy-timeline--dated .sy-timeline__date {
    grid-column: 1;
    grid-row: 1;
    padding-block-start: 3px;
    text-align: end;
  }

  .sy-timeline--dated .sy-timeline__mark {
    grid-column: 2;
    grid-row: 1;
  }

  .sy-timeline--dated .sy-timeline__body {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ---- forms ---- */
/* Syllabus forms: Lexend labels above 48px fields, hints in plain words, errors that say how to fix it. */

.sy-form {
  display: grid;
  gap: var(--sy-space-5);
}

.sy-form__row {
  display: grid;
  gap: var(--sy-space-5);
}

@media (min-width: 640px) {
  .sy-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sy-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-3) var(--sy-space-5);
  padding-block-start: var(--sy-space-2);
}

.sy-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-inline-size: 0;
}

.sy-field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
  line-height: 1.35;
}

.sy-field__optional {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-regular);
}

.sy-field__hint {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: 1.45;
}

.sy-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--sy-danger);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  line-height: 1.45;
}

.sy-field__error svg,
.sy-field__success svg {
  flex: none;
  margin-block-start: 1px;
}

.sy-field__success {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--sy-ok);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  line-height: 1.45;
}

.sy-input,
.sy-select,
.sy-textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 11px 14px;
  border: 1px solid var(--sy-control);
  border-radius: var(--sy-radius-input);
  background: var(--sy-surface);
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  line-height: 1.4;
  transition: border-color var(--sy-dur-fast) var(--sy-ease), box-shadow var(--sy-dur-fast) var(--sy-ease);
}

.sy-textarea {
  min-block-size: 132px;
  resize: vertical;
}

.sy-input::placeholder,
.sy-textarea::placeholder {
  color: var(--sy-muted);
  opacity: 1;
}

.sy-input:hover,
.sy-select:hover,
.sy-textarea:hover {
  border-color: var(--sy-ink);
}

.sy-input:focus-visible,
.sy-select:focus-visible,
.sy-textarea:focus-visible {
  border-color: var(--sy-focus);
  outline: 2px solid var(--sy-focus);
  outline-offset: 0;
}

.sy-input[aria-invalid="true"],
.sy-select[aria-invalid="true"],
.sy-textarea[aria-invalid="true"] {
  border-color: var(--sy-danger);
  box-shadow: inset 0 0 0 1px var(--sy-danger);
}

.sy-field.is-valid .sy-input {
  border-color: var(--sy-ok);
}

.sy-input:disabled,
.sy-select:disabled,
.sy-textarea:disabled {
  border-color: var(--sy-hair);
  background: var(--sy-desk);
  color: var(--sy-muted);
  cursor: not-allowed;
}

.sy-input[readonly] {
  background: var(--sy-desk);
}

.sy-select-wrap {
  position: relative;
  display: block;
}

.sy-select {
  padding-inline-end: 42px;
  appearance: none;
  cursor: pointer;
}

.sy-select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 18px;
  inset-block-start: 50%;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: -6px;
  border: solid var(--sy-ink);
  border-width: 0 2px 2px 0;
  pointer-events: none;
  transform: rotate(45deg);
}

.sy-input-group {
  display: flex;
  align-items: stretch;
}

.sy-input-group__addon {
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  border: 1px solid var(--sy-control);
  border-inline-end: 0;
  border-start-start-radius: var(--sy-radius-input);
  border-end-start-radius: var(--sy-radius-input);
  background: var(--sy-desk);
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
}

.sy-input-group .sy-input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Checkboxes and radios */
.sy-fieldset {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-legend {
  margin-block-end: var(--sy-space-1);
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
}

.sy-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sy-space-3);
  min-block-size: 32px;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.45;
  cursor: pointer;
}

.sy-check__input {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  border: 1.5px solid var(--sy-control);
  border-radius: 6px;
  background: var(--sy-surface);
  appearance: none;
  cursor: pointer;
}

.sy-check__input[type="radio"] {
  border-radius: 50%;
}

.sy-check__input:checked {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
}

.sy-check__input[type="checkbox"]:checked::after {
  content: "";
  inline-size: 5px;
  block-size: 10px;
  margin-block-start: -2px;
  border: solid var(--sy-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sy-check__input[type="radio"]:checked::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--sy-on-primary);
}

.sy-check__input:focus-visible {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-check__input:disabled {
  border-color: var(--sy-hair-strong);
  background: var(--sy-desk);
  cursor: not-allowed;
}

.sy-check:has(.sy-check__input:disabled) {
  color: var(--sy-muted);
  cursor: not-allowed;
}

.sy-check__input[aria-invalid="true"] {
  border-color: var(--sy-danger);
}

.sy-check__text {
  padding-block-start: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .sy-input,
  .sy-select,
  .sy-textarea {
    transition: none;
  }
}

/* ---- switch ---- */
/* Syllabus switch: an on/off setting on a checkbox with role="switch". */

.sy-switch {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sy-space-4);
  cursor: pointer;
}

.sy-switch__text {
  display: grid;
  gap: 2px;
}

.sy-switch__label {
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
  line-height: 1.35;
}

.sy-switch__hint {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: 1.45;
}

.sy-switch__input {
  position: relative;
  flex: none;
  inline-size: 46px;
  block-size: 28px;
  margin: 0;
  border: 1.5px solid var(--sy-control);
  border-radius: var(--sy-radius-round);
  background: var(--sy-desk-strong);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--sy-dur) var(--sy-ease), border-color var(--sy-dur) var(--sy-ease);
}

.sy-switch__input::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 19px;
  block-size: 19px;
  border-radius: 50%;
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-lift);
  transition: transform var(--sy-dur) var(--sy-ease-out);
}

.sy-switch__input:checked {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
}

.sy-switch__input:checked::after {
  background: var(--sy-on-primary);
  transform: translateX(18px);
}

[dir="rtl"] .sy-switch__input:checked::after {
  transform: translateX(-18px);
}

.sy-switch__input:focus-visible {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-switch__input:disabled {
  border-color: var(--sy-hair-strong);
  background: var(--sy-desk);
  cursor: not-allowed;
}

.sy-switch:has(.sy-switch__input:disabled) {
  cursor: not-allowed;
}

.sy-switch:has(.sy-switch__input:disabled) .sy-switch__label {
  color: var(--sy-muted);
}

.sy-switch-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-switch-list > li {
  padding-block: var(--sy-space-4);
  border-block-end: 1px solid var(--sy-hair);
}

.sy-switch-list > li:first-child {
  padding-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sy-switch__input,
  .sy-switch__input::after {
    transition: none;
  }
}

/* ---- choice-cards ---- */
/* Syllabus choice cards: radios or checkboxes dressed as sheets. The checked sheet takes the primary edge. */

.sy-choices {
  display: grid;
  gap: var(--sy-space-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .sy-choices--2,
  .sy-choices--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .sy-choices--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sy-choices__legend {
  margin-block-end: var(--sy-space-3);
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
}

.sy-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--sy-space-3);
  padding: var(--sy-space-4) var(--sy-space-4) var(--sy-space-4) var(--sy-space-5);
  border: 1px solid var(--sy-hair-strong);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  cursor: pointer;
  transition: border-color var(--sy-dur-fast) var(--sy-ease), background-color var(--sy-dur-fast) var(--sy-ease);
}

.sy-choice:hover {
  border-color: var(--sy-control);
}

.sy-choice__input {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  border: 1.5px solid var(--sy-control);
  border-radius: 50%;
  background: var(--sy-surface);
  appearance: none;
  cursor: pointer;
}

.sy-choice__input[type="checkbox"] {
  border-radius: 6px;
}

.sy-choice__input:checked {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
}

.sy-choice__input:checked::after {
  content: "";
  inline-size: 5px;
  block-size: 10px;
  margin-block-start: -2px;
  border: solid var(--sy-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sy-choice__input:focus-visible {
  outline: none;
}

.sy-choice:has(.sy-choice__input:focus-visible) {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-choice__title {
  grid-column: 1;
  grid-row: 1;
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.35;
}

.sy-choice__text {
  grid-column: 1 / -1;
  color: var(--sy-body);
  font-size: var(--sy-fs-meta);
  line-height: 1.5;
}

.sy-choice__meta {
  grid-column: 1 / -1;
  margin-block-start: 4px;
  color: var(--sy-accent);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sy-choice:has(.sy-choice__input:checked) {
  border-color: var(--sy-primary);
  background: var(--sy-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sy-primary);
}

.sy-choice:has(.sy-choice__input:disabled) {
  border-color: var(--sy-hair);
  background: var(--sy-desk);
  cursor: not-allowed;
}

.sy-choice:has(.sy-choice__input:disabled) .sy-choice__title,
.sy-choice:has(.sy-choice__input:disabled) .sy-choice__text,
.sy-choice:has(.sy-choice__input:disabled) .sy-choice__meta {
  color: var(--sy-muted);
}

.sy-choice__input:disabled {
  border-color: var(--sy-hair-strong);
  background: var(--sy-desk);
}

@media (prefers-reduced-motion: reduce) {
  .sy-choice {
    transition: none;
  }
}

/* ---- search-field ---- */
/* Syllabus search: a 48px field with a magnifier, a clear button and a submit action. */

.sy-search {
  display: flex;
  gap: var(--sy-space-2);
  inline-size: 100%;
}

.sy-search__box {
  position: relative;
  flex: 1;
  min-inline-size: 0;
}

.sy-search__icon {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  color: var(--sy-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.sy-search__input {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 11px 44px;
  border: 1px solid var(--sy-control);
  border-radius: var(--sy-radius-input);
  background: var(--sy-surface);
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  appearance: none;
}

.sy-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.sy-search__input::placeholder {
  color: var(--sy-muted);
  opacity: 1;
}

.sy-search__input:hover {
  border-color: var(--sy-ink);
}

.sy-search__input:focus-visible {
  border-color: var(--sy-focus);
  outline: 2px solid var(--sy-focus);
  outline-offset: 0;
}

.sy-search__clear {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sy-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.sy-search__clear:hover {
  background: var(--sy-desk);
  color: var(--sy-ink);
}

.sy-search--lg .sy-search__input {
  min-block-size: 56px;
  font-size: var(--sy-fs-body);
}

.sy-search--lg .sy-btn {
  min-block-size: 56px;
}

@media (max-width: 479px) {
  .sy-search--stack {
    flex-direction: column;
  }
}

/* ---- file-drop ---- */
/* Syllabus file drop: a dashed sheet for assignment uploads, with a file list under it. */

.sy-drop {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-drop__zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sy-space-2);
  padding: var(--sy-space-8) var(--sy-space-5);
  border: 2px dashed var(--sy-control);
  border-radius: var(--sy-radius-card);
  background: var(--sy-desk);
  color: var(--sy-body);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--sy-dur-fast) var(--sy-ease), background-color var(--sy-dur-fast) var(--sy-ease);
}

.sy-drop__zone:hover {
  border-color: var(--sy-ink);
}

.sy-drop__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.sy-drop__zone:has(.sy-drop__input:focus-visible) {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-drop__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--sy-space-1);
  border-radius: 50%;
  background: var(--sy-surface);
  color: var(--sy-primary);
  box-shadow: var(--sy-shadow-card);
}

.sy-drop__title {
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
}

.sy-drop__browse {
  color: var(--sy-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sy-drop__hint {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-drop.is-over .sy-drop__zone {
  border-color: var(--sy-primary);
  border-style: solid;
  background: var(--sy-accent-soft);
}

.sy-drop.is-error .sy-drop__zone {
  border-color: var(--sy-danger);
  background: var(--sy-danger-soft);
}

.sy-drop__list {
  display: grid;
  gap: var(--sy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-drop__file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sy-space-3);
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-surface);
  font-size: var(--sy-fs-meta);
}

.sy-drop__file svg {
  color: var(--sy-muted);
}

.sy-drop__name {
  overflow: hidden;
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sy-drop__size {
  display: block;
  color: var(--sy-muted);
  font-weight: var(--sy-weight-regular);
  font-variant-numeric: tabular-nums;
}

.sy-drop__file--done .sy-drop__state {
  color: var(--sy-ok);
}

.sy-drop__file--error {
  border-color: var(--sy-danger);
}

.sy-drop__file--error .sy-drop__size {
  color: var(--sy-danger);
}

.sy-drop__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sy-muted);
  font-weight: var(--sy-weight-medium);
}

@media (prefers-reduced-motion: reduce) {
  .sy-drop__zone {
    transition: none;
  }
}

/* ---- newsletter ---- */
/* Syllabus newsletter: a short sign-up for study notes, with a polite confirmation. */

.sy-newsletter {
  display: grid;
  gap: var(--sy-space-4);
  padding: var(--sy-space-7) var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-newsletter__title {
  font-size: var(--sy-fs-headline);
}

.sy-newsletter__text {
  max-inline-size: 36em;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-newsletter__form {
  display: grid;
  gap: var(--sy-space-2);
}

.sy-newsletter__row {
  display: flex;
  flex-direction: column;
  gap: var(--sy-space-2);
}

@media (min-width: 560px) {
  .sy-newsletter__row {
    flex-direction: row;
  }

  .sy-newsletter__row .sy-input {
    flex: 1;
  }
}

.sy-newsletter__note {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-newsletter__status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--sy-ok);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
}

.sy-newsletter__status:empty {
  display: none;
}

.sy-newsletter--plain {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

@media (min-width: 960px) {
  .sy-newsletter--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sy-space-4) var(--sy-space-10);
    padding: var(--sy-space-8);
  }

  .sy-newsletter--wide .sy-newsletter__form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---- tables ---- */
/* Syllabus tables: hairlines, a desk header, tabular numerals, labelled stacks on phones. */

.sy-table-wrap {
  position: relative;
  inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
}

.sy-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--sy-body);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-table__caption {
  padding: var(--sy-space-4) var(--sy-space-5);
  border-block-end: 1px solid var(--sy-hair);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  text-align: left;
  caption-side: top;
}

.sy-table__caption strong {
  display: block;
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
}

.sy-table th,
.sy-table td {
  padding: 13px 16px;
  border-block-end: 1px solid var(--sy-hair);
  text-align: left;
  vertical-align: top;
}

[dir="rtl"] .sy-table th,
[dir="rtl"] .sy-table td,
[dir="rtl"] .sy-table__caption {
  text-align: right;
}

.sy-table thead th {
  background: var(--sy-desk);
  color: var(--sy-ink);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  white-space: nowrap;
}

.sy-table tbody th {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

.sy-table tbody tr:last-child > * {
  border-block-end: 0;
}

.sy-table tbody tr:hover > * {
  background: var(--sy-paper);
}

.sy-table .sy-table__num {
  text-align: right;
  white-space: nowrap;
}

[dir="rtl"] .sy-table .sy-table__num {
  text-align: left;
}

.sy-table--compact th,
.sy-table--compact td {
  padding: 9px 12px;
}

.sy-table--compare tbody td {
  text-align: center;
}

.sy-table--compare thead th:not(:first-child) {
  text-align: center;
}

.sy-table__yes {
  display: inline-flex;
  color: var(--sy-ok);
}

.sy-table__no {
  display: inline-flex;
  color: var(--sy-muted);
}

.sy-table__group th {
  padding-block: 10px;
  background: var(--sy-paper);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
}

@media (max-width: 639px) {
  .sy-table--stack thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sy-table--stack,
  .sy-table--stack tbody,
  .sy-table--stack tr,
  .sy-table--stack th,
  .sy-table--stack td {
    display: block;
  }

  .sy-table--stack tr {
    padding: var(--sy-space-3) var(--sy-space-4);
    border-block-end: 1px solid var(--sy-hair);
  }

  .sy-table--stack tbody tr:last-child {
    border-block-end: 0;
  }

  .sy-table--stack th,
  .sy-table--stack td {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--sy-space-3);
    padding: 6px 0;
    border: 0;
  }

  .sy-table--stack td::before,
  .sy-table--stack th[data-label]::before {
    content: attr(data-label);
    color: var(--sy-muted);
    font-size: var(--sy-fs-meta);
    font-weight: var(--sy-weight-medium);
  }

  .sy-table--stack .sy-table__num,
  .sy-table--compare.sy-table--stack tbody td {
    text-align: left;
  }

  [dir="rtl"] .sy-table--stack .sy-table__num,
  [dir="rtl"] .sy-table--compare.sy-table--stack tbody td {
    text-align: right;
  }
}

/* ---- description-list ---- */
/* Syllabus description list: term and value pairs on hairlines, or as small boxes. */

.sy-dl {
  display: grid;
  align-content: start;
  margin: 0;
}

.sy-dl__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--sy-space-4);
  padding-block: var(--sy-space-3);
  border-block-end: 1px solid var(--sy-hair);
}

.sy-dl__row:first-child {
  border-block-start: 1px solid var(--sy-hair);
}

.sy-dl__term {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  line-height: 1.5;
}

.sy-dl__value {
  margin: 0;
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.sy-dl--stacked .sy-dl__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.sy-dl--boxes {
  gap: var(--sy-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .sy-dl--boxes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sy-dl--boxes .sy-dl__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--sy-space-3) var(--sy-space-4);
  border: 1px solid var(--sy-hair);
  border-radius: 10px;
  background: var(--sy-surface);
}

.sy-dl--boxes .sy-dl__value {
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
  font-weight: var(--sy-weight-semibold);
}

/* ---- pagination ---- */
/* Syllabus pagination: 44px targets, the current page filled with the primary. */

.sy-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--sy-radius-btn);
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.sy-pagination__link:hover {
  border-color: var(--sy-hair-strong);
  background: var(--sy-surface);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-pagination__link[aria-current="page"] {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
  color: var(--sy-on-primary);
  font-weight: var(--sy-weight-semibold);
}

.sy-pagination__link--dir {
  border-color: var(--sy-control);
  background: var(--sy-surface);
}

.sy-pagination__link[aria-disabled="true"] {
  border-color: var(--sy-hair);
  background: var(--sy-desk);
  color: var(--sy-muted);
  pointer-events: none;
}

.sy-pagination__gap {
  min-inline-size: 28px;
  color: var(--sy-muted);
  text-align: center;
}

[dir="rtl"] .sy-pagination__link--dir svg {
  transform: scaleX(-1);
}

@media (max-width: 479px) {
  .sy-pagination__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- avatar ---- */
/* Syllabus avatar: initials on four quiet tints. No photos. */

.sy-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--sy-avatar-1);
  color: var(--sy-avatar-1-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
}

.sy-avatar--2 {
  background: var(--sy-avatar-2);
  color: var(--sy-avatar-2-ink);
}

.sy-avatar--3 {
  background: var(--sy-avatar-3);
  color: var(--sy-avatar-3-ink);
}

.sy-avatar--4 {
  background: var(--sy-avatar-4);
  color: var(--sy-avatar-4-ink);
}

.sy-avatar--sm {
  inline-size: 32px;
  block-size: 32px;
  font-size: var(--sy-fs-label);
}

.sy-avatar--lg {
  inline-size: 64px;
  block-size: 64px;
  font-family: var(--sy-font-serif);
  font-size: 1.375rem;
}

.sy-avatar--xl {
  inline-size: 88px;
  block-size: 88px;
  font-family: var(--sy-font-serif);
  font-size: 1.875rem;
}

.sy-avatar-group {
  display: inline-flex;
  align-items: center;
}

.sy-avatar-group .sy-avatar {
  box-shadow: 0 0 0 2px var(--sy-surface);
}

.sy-avatar-group .sy-avatar + .sy-avatar {
  margin-inline-start: -8px;
}

/* ---- alert ---- */
/* Syllabus alerts: inline status in a soft tint with an icon, a title and one plain sentence. */

.sy-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sy-space-3);
  padding: var(--sy-space-4);
  border: 1px solid var(--sy-info-soft);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-info-soft);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.5;
}

.sy-alert__icon {
  display: inline-flex;
  margin-block-start: 1px;
  color: var(--sy-info);
}

.sy-alert__body {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.sy-alert__title {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-semibold);
}

.sy-alert__text {
  color: var(--sy-body);
}

.sy-alert__close {
  display: inline-grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sy-ink);
  cursor: pointer;
}

.sy-alert__close:hover {
  background: var(--sy-surface);
}

.sy-alert--ok {
  border-color: var(--sy-ok-soft);
  background: var(--sy-ok-soft);
}

.sy-alert--ok .sy-alert__icon {
  color: var(--sy-ok);
}

.sy-alert--warn {
  border-color: var(--sy-warn-soft);
  background: var(--sy-warn-soft);
}

.sy-alert--warn .sy-alert__icon {
  color: var(--sy-warn);
}

.sy-alert--danger {
  border-color: var(--sy-danger);
  background: var(--sy-danger-soft);
}

.sy-alert--danger .sy-alert__icon {
  color: var(--sy-danger);
}

@media (pointer: coarse) {
  .sy-alert__close {
    inline-size: 44px;
    block-size: 44px;
    margin: -10px -10px -10px 0;
  }
}

/* ---- toast ---- */
/* Syllabus toasts: short slate confirmations, bottom corner, announced politely. */

.sy-toaster {
  position: fixed;
  inset-inline-end: var(--sy-space-5);
  inset-block-end: var(--sy-space-5);
  z-index: 90;
  display: grid;
  justify-items: end;
  gap: var(--sy-space-2);
  max-inline-size: min(420px, calc(100vw - var(--sy-space-8)));
  pointer-events: none;
}

.sy-toast {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
  padding: 12px 10px 12px 16px;
  border-radius: 10px;
  background: var(--sy-invert);
  color: var(--sy-invert-ink);
  font-size: var(--sy-fs-small);
  line-height: 1.4;
  box-shadow: var(--sy-shadow-pop);
  pointer-events: auto;
  animation: sy-toast-in var(--sy-dur-slow) var(--sy-ease-out) both;
}

.sy-toast svg {
  flex: none;
}

.sy-toast__icon {
  display: inline-flex;
  color: var(--sy-invert-ink);
}

.sy-toast__text {
  flex: 1;
}

.sy-toast__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sy-invert-ink);
  cursor: pointer;
}

.sy-toast__close:hover {
  background: var(--sy-invert-hair);
}

.sy-toast :focus-visible {
  outline-color: var(--sy-invert-ink);
}

.sy-toast.is-leaving {
  animation: sy-toast-out var(--sy-dur) var(--sy-ease) both;
}

.sy-toast--static {
  animation: none;
}

@keyframes sy-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sy-toast-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 479px) {
  .sy-toaster {
    inset-inline: var(--sy-space-4);
    justify-items: stretch;
    max-inline-size: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-toast,
  .sy-toast.is-leaving {
    animation: none;
  }
}

/* ---- dialog ---- */
/* Syllabus dialog: native <dialog>, a white sheet over a slate scrim, actions at the end. */

.sy-dialog {
  inline-size: min(520px, calc(100vw - var(--sy-space-7)));
  max-block-size: calc(100vh - var(--sy-space-8));
  padding: 0;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-panel);
  background: var(--sy-surface);
  color: var(--sy-body);
  box-shadow: var(--sy-shadow-pop);
}

.sy-dialog::backdrop {
  background: var(--sy-scrim);
}

.sy-dialog[open] {
  animation: sy-dialog-in var(--sy-dur-slow) var(--sy-ease-out);
}

.sy-dialog__panel {
  display: grid;
  gap: var(--sy-space-4);
  padding: var(--sy-space-6);
}

.sy-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sy-space-4);
}

.sy-dialog__title {
  font-size: var(--sy-fs-headline);
}

.sy-dialog__close {
  margin: -6px -8px 0 0;
}

.sy-dialog__body {
  display: grid;
  gap: var(--sy-space-3);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sy-space-3);
  padding-block-start: var(--sy-space-2);
}

@keyframes sy-dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A static preview for documentation pages: the same sheet without the modal layer */
.sy-dialog--preview {
  position: static;
  display: block;
  margin: 0;
  animation: none;
}

@media (max-width: 479px) {
  .sy-dialog__foot {
    flex-direction: column-reverse;
  }

  .sy-dialog__foot .sy-btn {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-dialog[open] {
    animation: none;
  }
}

/* ---- tooltip ---- */
/* Syllabus tooltips: glossary terms and icon hints. They open on hover and focus, close on Escape. */

.sy-tip {
  position: relative;
  display: inline-block;
}

.sy-tip__term {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--sy-control);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: help;
}

.sy-tip__term:hover {
  text-decoration-color: var(--sy-ink);
}

.sy-tip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: 50%;
  z-index: 60;
  display: none;
  inline-size: max-content;
  max-inline-size: min(280px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: var(--sy-radius-btn);
  background: var(--sy-invert);
  color: var(--sy-invert-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-style: normal;
  font-weight: var(--sy-weight-regular);
  line-height: 1.45;
  text-align: start;
  white-space: normal;
  box-shadow: var(--sy-shadow-lift);
  pointer-events: none;
  transform: translateX(calc(-50% + var(--sy-tip-x, 0px)));
}

[dir="rtl"] .sy-tip__bubble {
  transform: translateX(calc(50% + var(--sy-tip-x, 0px)));
}

.sy-tip__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(50% - var(--sy-tip-x, 0px));
  margin-inline-start: -6px;
  border: 6px solid transparent;
  border-block-start-color: var(--sy-invert);
}

[dir="rtl"] .sy-tip__bubble::after {
  inset-inline-start: calc(50% + var(--sy-tip-x, 0px));
}

.sy-tip:hover .sy-tip__bubble,
.sy-tip:focus-within .sy-tip__bubble,
.sy-tip.is-open .sy-tip__bubble {
  display: block;
  animation: sy-tip-in var(--sy-dur-fast) var(--sy-ease);
}

.sy-tip.is-dismissed .sy-tip__bubble {
  display: none;
}

@keyframes sy-tip-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sy-tip--start .sy-tip__bubble {
  inset-inline-start: 0;
  transform: translateX(var(--sy-tip-x, 0px));
}

.sy-tip--start .sy-tip__bubble::after {
  inset-inline-start: calc(18px - var(--sy-tip-x, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .sy-tip:hover .sy-tip__bubble,
  .sy-tip:focus-within .sy-tip__bubble,
  .sy-tip.is-open .sy-tip__bubble {
    animation: none;
  }
}

/* ---- empty-state ---- */
/* Syllabus empty state: a dashed sheet, one sentence about what's missing, one action. */

.sy-empty {
  display: grid;
  justify-items: center;
  gap: var(--sy-space-3);
  padding: var(--sy-space-9) var(--sy-space-6);
  border: 2px dashed var(--sy-hair-strong);
  border-radius: var(--sy-radius-card);
  text-align: center;
}

.sy-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--sy-space-2);
  border-radius: 50%;
  background: var(--sy-desk);
  color: var(--sy-muted);
}

.sy-empty__title {
  font-size: var(--sy-fs-card);
}

.sy-empty__text {
  max-inline-size: 34em;
  color: var(--sy-muted);
  font-size: var(--sy-fs-small);
}

.sy-empty__actions {
  margin-block-start: var(--sy-space-3);
}

/* ---- skeleton ---- */
/* Syllabus skeleton: soft placeholder shapes while a list loads; the shimmer stops under reduced motion. */

.sy-skeleton {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-skeleton__line,
.sy-skeleton__block,
.sy-skeleton__circle {
  position: relative;
  overflow: hidden;
  background: var(--sy-desk-strong);
}

.sy-skeleton__line {
  block-size: 12px;
  border-radius: 6px;
}

.sy-skeleton__line--title {
  block-size: 20px;
  inline-size: 70%;
}

.sy-skeleton__line--short {
  inline-size: 45%;
}

.sy-skeleton__line--mid {
  inline-size: 80%;
}

.sy-skeleton__block {
  block-size: 120px;
  border-radius: 10px;
}

.sy-skeleton__circle {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
}

.sy-skeleton__row {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
}

.sy-skeleton__row > .sy-skeleton {
  flex: 1;
}

.sy-skeleton__line::after,
.sy-skeleton__block::after,
.sy-skeleton__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--sy-surface), transparent);
  opacity: 0.55;
  transform: translateX(-100%);
  animation: sy-shimmer 1.8s var(--sy-ease) infinite;
}

@keyframes sy-shimmer {
  to {
    transform: translateX(100%);
  }
}

.sy-skeleton--card {
  padding: var(--sy-space-5);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
}

@media (prefers-reduced-motion: reduce) {
  .sy-skeleton__line::after,
  .sy-skeleton__block::after,
  .sy-skeleton__circle::after {
    animation: none;
    opacity: 0;
  }
}

/* ---- progress ---- */
/* Syllabus progress: labelled bars on native progress elements, and the weeks of a course as segments. */

.sy-progress {
  display: grid;
  gap: var(--sy-space-2);
}

.sy-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sy-space-3);
  font-size: var(--sy-fs-meta);
  line-height: 1.35;
}

.sy-progress__label {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-medium);
}

.sy-progress__value {
  color: var(--sy-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sy-progress__bar {
  display: block;
  inline-size: 100%;
  block-size: 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--sy-radius-round);
  background: var(--sy-track);
  color: var(--sy-progress);
  appearance: none;
}

.sy-progress__bar::-webkit-progress-bar {
  border-radius: var(--sy-radius-round);
  background: var(--sy-track);
}

.sy-progress__bar::-webkit-progress-value {
  border-radius: var(--sy-radius-round);
  background: var(--sy-progress);
}

.sy-progress__bar::-moz-progress-bar {
  border-radius: var(--sy-radius-round);
  background: var(--sy-progress);
}

.sy-progress--sm .sy-progress__bar {
  block-size: 6px;
}

.sy-progress--lg .sy-progress__bar {
  block-size: 12px;
}

.sy-progress--ok .sy-progress__bar::-webkit-progress-value {
  background: var(--sy-ok);
}

.sy-progress--ok .sy-progress__bar::-moz-progress-bar {
  background: var(--sy-ok);
}

/* Weeks of a course as segments: done, this week (half), ahead */
.sy-weeks {
  display: grid;
  grid-template-columns: repeat(var(--sy-weeks, 6), minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-weeks__seg {
  display: grid;
  gap: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sy-weeks__seg::before {
  content: "";
  block-size: 8px;
  border-radius: 4px;
  background: var(--sy-track);
}

.sy-weeks__seg--done::before {
  background: var(--sy-progress);
}

.sy-weeks__seg--doing {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-semibold);
}

.sy-weeks__seg--doing::before {
  background: linear-gradient(90deg, var(--sy-progress) 0 50%, var(--sy-track) 50% 100%);
}

/* ---- progress-ring ---- */
/* Syllabus progress ring: an SVG ring with the percentage set in the middle. */

.sy-ring {
  --sy-ring-size: 72px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--sy-ring-size);
  block-size: var(--sy-ring-size);
}

.sy-ring__svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
}

.sy-ring__track {
  fill: none;
  stroke: var(--sy-track);
  stroke-width: 4;
}

.sy-ring__value {
  fill: none;
  stroke: var(--sy-progress);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: var(--sy-ring-value, 0) 100;
}

.sy-ring--ok .sy-ring__value {
  stroke: var(--sy-ok);
}

.sy-ring--pending .sy-ring__value {
  display: none;
}

.sy-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sy-ring__sub {
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-regular);
}

.sy-ring--sm {
  --sy-ring-size: 44px;
}

.sy-ring--sm .sy-ring__label {
  font-size: var(--sy-fs-label);
}

.sy-ring--sm .sy-ring__track,
.sy-ring--sm .sy-ring__value {
  stroke-width: 5;
}

.sy-ring--lg {
  --sy-ring-size: 132px;
}

.sy-ring--lg .sy-ring__track,
.sy-ring--lg .sy-ring__value {
  stroke-width: 3.5;
}

.sy-ring--lg .sy-ring__label {
  font-family: var(--sy-font-serif);
  font-size: 2rem;
}

.sy-ring--lg .sy-ring__sub {
  margin-block-start: 4px;
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
}

.sy-ring-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- chart ---- */
/* Syllabus charts: inline SVG shapes that read only the viz tokens, with labels set in HTML. */

.sy-chart {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sy-space-4);
  margin: 0;
  padding: var(--sy-space-5);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  font-family: var(--sy-font-sans);
}

.sy-chart__head {
  display: grid;
  gap: 2px;
}

.sy-chart__title {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.35;
}

.sy-chart__sub {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-chart__frame {
  position: relative;
  block-size: 200px;
  margin-inline-start: 36px;
  margin-block-start: var(--sy-space-2);
}

.sy-chart__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.sy-chart__y {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-chart__y li {
  position: absolute;
  inset-inline-end: calc(100% + 8px);
  inset-block-end: var(--sy-y, 0%);
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: translateY(50%);
  white-space: nowrap;
}

.sy-chart__grid {
  stroke: var(--sy-hair);
  stroke-width: 1;
}

.sy-chart__axis {
  stroke: var(--sy-hair-strong);
  stroke-width: 1.5;
}

.sy-chart__bar {
  fill: var(--sy-viz-1);
}

.sy-chart__bar--2 { fill: var(--sy-viz-2); }
.sy-chart__bar--3 { fill: var(--sy-viz-3); }
.sy-chart__bar--4 { fill: var(--sy-viz-4); }
.sy-chart__bar--5 { fill: var(--sy-viz-5); }
.sy-chart__bar--6 { fill: var(--sy-viz-6); }
.sy-chart__bar--muted { fill: var(--sy-hair-strong); }

.sy-chart__line {
  fill: none;
  stroke: var(--sy-viz-1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sy-chart__line--2 {
  stroke: var(--sy-viz-2);
  stroke-dasharray: 6 5;
}

.sy-chart__line--3 { stroke: var(--sy-viz-3); }

.sy-chart__pts {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-chart__pt {
  position: absolute;
  inset-inline-start: var(--sy-x, 0%);
  inset-block-end: var(--sy-y, 0%);
  inline-size: 10px;
  block-size: 10px;
  margin-inline-start: -5px;
  margin-block-end: -5px;
  border: 2.5px solid var(--sy-viz-1);
  border-radius: 50%;
  background: var(--sy-surface);
}

.sy-chart__pt--2 {
  border-color: var(--sy-viz-2);
  border-radius: 2px;
}

[dir="rtl"] .sy-chart__frame,
[dir="rtl"] .sy-chart__x {
  direction: ltr;
}

.sy-chart__x {
  display: grid;
  grid-template-columns: repeat(var(--sy-n, 6), minmax(0, 1fr));
  margin: 0 0 0 36px;
  padding: 0;
  list-style: none;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sy-chart__x--edges {
  display: flex;
  justify-content: space-between;
}

.sy-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-2) var(--sy-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sy-body);
  font-size: var(--sy-fs-meta);
}

.sy-chart__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sy-chart__key strong {
  font-variant-numeric: tabular-nums;
}

.sy-chart__swatch {
  inline-size: 12px;
  block-size: 12px;
  flex: none;
  border-radius: 3px;
  background: var(--sy-viz-1);
}

.sy-chart__swatch--2 { background: var(--sy-viz-2); }
.sy-chart__swatch--3 { background: var(--sy-viz-3); }
.sy-chart__swatch--4 { background: var(--sy-viz-4); }
.sy-chart__swatch--5 { background: var(--sy-viz-5); }
.sy-chart__swatch--6 { background: var(--sy-viz-6); }

.sy-chart__swatch--dash {
  block-size: 3px;
  inline-size: 18px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--sy-viz-2) 0 5px, transparent 5px 8px);
}

/* Donut */
.sy-chart__donut {
  display: grid;
  gap: var(--sy-space-5);
  align-items: center;
}

@media (min-width: 560px) {
  .sy-chart__donut {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--sy-space-7);
  }
}

.sy-chart__ring {
  position: relative;
  inline-size: 180px;
  block-size: 180px;
  margin-inline: auto;
}

.sy-chart__ring svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
}

.sy-chart__seg {
  fill: none;
  stroke: var(--sy-viz-1);
  stroke-width: 6;
}

.sy-chart__seg--2 { stroke: var(--sy-viz-2); }
.sy-chart__seg--3 { stroke: var(--sy-viz-3); }
.sy-chart__seg--4 { stroke: var(--sy-viz-4); }
.sy-chart__seg--5 { stroke: var(--sy-viz-5); }
.sy-chart__seg--6 { stroke: var(--sy-viz-6); }

.sy-chart__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  text-align: center;
}

.sy-chart__center strong {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sy-chart__donut .sy-chart__legend {
  display: grid;
  gap: var(--sy-space-2);
}

.sy-chart__donut .sy-chart__key {
  justify-content: space-between;
  padding-block-end: var(--sy-space-2);
  border-block-end: 1px solid var(--sy-hair);
}

.sy-chart__donut .sy-chart__key > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Sequential heat grid and the ramp legends */
.sy-chart__heat {
  display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  font-size: var(--sy-fs-label);
}

.sy-chart__heat-label {
  padding-inline-end: var(--sy-space-2);
  color: var(--sy-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sy-chart__heat-day {
  color: var(--sy-muted);
  text-align: center;
}

.sy-chart__cell {
  aspect-ratio: 1;
  max-block-size: 34px;
  border-radius: 4px;
  background: var(--sy-paper);
  box-shadow: inset 0 0 0 1px var(--sy-hair);
}

.sy-chart__cell--1 { background: var(--sy-seq-1); box-shadow: none; }
.sy-chart__cell--2 { background: var(--sy-seq-2); box-shadow: none; }
.sy-chart__cell--3 { background: var(--sy-seq-3); box-shadow: none; }
.sy-chart__cell--4 { background: var(--sy-seq-4); box-shadow: none; }
.sy-chart__cell--5 { background: var(--sy-seq-5); box-shadow: none; }

.sy-chart__scale {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

.sy-chart__scale .sy-chart__cell {
  inline-size: 16px;
  block-size: 16px;
}

.sy-chart__scale span:first-child {
  margin-inline-end: 4px;
}

.sy-chart__scale span:last-child {
  margin-inline-start: 4px;
}

.sy-chart__div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}

.sy-chart__div span {
  block-size: 14px;
  border-radius: 3px;
}

.sy-chart__div span:nth-child(1) { background: var(--sy-div-1); }
.sy-chart__div span:nth-child(2) { background: var(--sy-div-2); }
.sy-chart__div span:nth-child(3) { background: var(--sy-div-3); box-shadow: inset 0 0 0 1px var(--sy-hair-strong); }
.sy-chart__div span:nth-child(4) { background: var(--sy-div-4); }
.sy-chart__div span:nth-child(5) { background: var(--sy-div-5); }

.sy-chart__ends {
  display: flex;
  justify-content: space-between;
  margin-block-start: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

/* The data behind every chart */
.sy-chart__data {
  border-block-start: 1px solid var(--sy-hair);
  padding-block-start: var(--sy-space-3);
  font-size: var(--sy-fs-meta);
}

.sy-chart__data > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  color: var(--sy-accent);
  font-weight: var(--sy-weight-medium);
  cursor: pointer;
}

.sy-chart__data[open] > summary {
  margin-block-end: var(--sy-space-3);
}

/* ---- lesson-rail ---- */
/* Syllabus lesson rail, the signature: the module's lessons on a rail with progress marks.
   Done lessons draw the rail in the primary color; the current lesson sits on a teal tint. */

.sy-rail {
  display: grid;
  gap: var(--sy-space-4);
  padding: var(--sy-space-5) var(--sy-space-3) var(--sy-space-4);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  font-family: var(--sy-font-sans);
}

.sy-rail__head {
  display: grid;
  gap: var(--sy-space-3);
  padding-inline: var(--sy-space-2);
}

.sy-rail__course {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  line-height: 1.35;
  text-decoration: none;
}

a.sy-rail__course:hover {
  color: var(--sy-ink);
  text-decoration: underline;
}

.sy-rail__title {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
}

.sy-rail__progress {
  display: grid;
  gap: 6px;
}

.sy-rail__count {
  display: flex;
  justify-content: space-between;
  gap: var(--sy-space-2);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-rail__count strong {
  color: var(--sy-ink);
  font-weight: var(--sy-weight-semibold);
}

.sy-rail__toggle {
  display: none;
}

.sy-rail__body {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-rail__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-rail__item {
  position: relative;
}

.sy-rail__item::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-start: 20px;
  inset-block: 31px -11px;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--sy-hair-strong);
}

.sy-rail__item--done::before {
  background: var(--sy-done);
}

.sy-rail__item:last-child::before {
  display: none;
}

.sy-rail__link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: var(--sy-space-3);
  row-gap: 2px;
  padding: 9px 12px;
  border-radius: var(--sy-radius-btn);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.32;
  text-decoration: none;
}

.sy-rail__link .sy-pmark {
  grid-row: 1 / span 2;
  margin-block-start: 2px;
}

.sy-rail__name {
  min-inline-size: 0;
}

.sy-rail__num {
  margin-inline-end: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sy-rail__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-variant-numeric: tabular-nums;
}

.sy-rail__link:hover {
  background: var(--sy-desk);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-rail__link[aria-current="page"],
.sy-rail__link[aria-current="true"],
.sy-rail__link[aria-current="location"] {
  background: var(--sy-accent-soft);
  color: var(--sy-ink);
}

.sy-rail__link[aria-current="page"] .sy-rail__name,
.sy-rail__link[aria-current="true"] .sy-rail__name,
.sy-rail__link[aria-current="location"] .sy-rail__name {
  font-weight: var(--sy-weight-medium);
}

.sy-rail__link[aria-current="page"]::after,
.sy-rail__link[aria-current="true"]::after,
.sy-rail__link[aria-current="location"]::after {
  content: "";
  position: absolute;
  inset-inline-end: 10px;
  inset-block: 12px;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--sy-primary);
}

.sy-rail__item--locked .sy-rail__link {
  color: var(--sy-muted);
}

.sy-rail__foot {
  display: grid;
  gap: 4px;
  padding: var(--sy-space-3) var(--sy-space-2) 0;
  border-block-start: 1px solid var(--sy-hair);
}

.sy-rail__extra {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 40px;
  padding: 6px 4px;
  border-radius: var(--sy-radius-btn);
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  text-decoration: none;
}

.sy-rail__extra svg {
  flex: none;
  color: var(--sy-primary);
}

.sy-rail__extra .sy-rail__time {
  margin-inline-start: 6px;
}

a.sy-rail__extra:hover {
  background: var(--sy-desk);
  text-decoration: none;
}

.sy-rail__next {
  padding-inline: 4px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

/* Phones and tablets: JS folds the list behind a toggle that names the current lesson */
@media (max-width: 1023px) {
  .sy-rail.is-collapsible .sy-rail__toggle {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sy-space-3);
    inline-size: 100%;
    min-block-size: 52px;
    padding: 10px 12px;
    border: 1px solid var(--sy-hair-strong);
    border-radius: var(--sy-radius-btn);
    background: var(--sy-paper);
    color: var(--sy-ink);
    font-size: var(--sy-fs-small);
    text-align: start;
    cursor: pointer;
  }

  .sy-rail__toggle-text {
    display: grid;
    min-inline-size: 0;
  }

  .sy-rail__toggle-text small {
    color: var(--sy-muted);
    font-size: var(--sy-fs-label);
  }

  .sy-rail__toggle-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sy-rail__toggle svg {
    transition: transform var(--sy-dur) var(--sy-ease);
  }

  .sy-rail__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .sy-rail.is-collapsible .sy-rail__body {
    display: none;
  }

  .sy-rail.is-collapsible.is-open .sy-rail__body {
    display: grid;
  }
}

/* The mini rail inside the hero window: same marks, smaller type, nothing interactive */
.sy-rail--mini {
  gap: var(--sy-space-3);
  padding: 0;
  border: 0;
  background: transparent;
}

.sy-rail--mini .sy-rail__head {
  gap: 4px;
  padding-inline: 6px;
}

.sy-rail--mini .sy-rail__course {
  font-size: var(--sy-fs-label);
}

.sy-rail--mini .sy-rail__title {
  font-size: 1rem;
}

.sy-rail--mini .sy-rail__link {
  padding: 6px 8px;
  column-gap: 10px;
  font-size: var(--sy-fs-label);
}

.sy-rail--mini .sy-rail__num {
  font-size: var(--sy-fs-label);
}

.sy-rail--mini .sy-rail__item::before {
  inset-inline-start: 16px;
  inset-block: 28px -6px;
}

.sy-rail--mini .sy-rail__link::after {
  inset-inline-end: 6px;
  inset-block: 8px;
}

/* A rail without the sheet, for side columns that already sit on paper */
.sy-rail--bare {
  padding: 0;
  border: 0;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sy-rail__toggle svg {
    transition: none;
  }
}

/* ---- lesson-header ---- */
/* Syllabus lesson header: the lesson title with its place in the module and what you'll be able to do. */

.sy-lesson-head {
  display: grid;
  gap: var(--sy-space-5);
  padding-block-end: var(--sy-space-7);
  margin-block-end: var(--sy-space-7);
  border-block-end: 1px solid var(--sy-hair);
}

.sy-lesson-head__title {
  font-size: var(--sy-fs-page);
  line-height: var(--sy-lh-display);
  letter-spacing: var(--sy-track-display);
}

.sy-lesson-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-2) var(--sy-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-lesson-head__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sy-lesson-head__meta svg {
  flex: none;
}

.sy-lesson-head__lede {
  max-inline-size: 36em;
  color: var(--sy-body);
  font-family: var(--sy-font-serif);
  font-size: var(--sy-fs-lede);
  line-height: 1.6;
}

.sy-lesson-head__goals {
  display: grid;
  gap: var(--sy-space-3);
  padding: var(--sy-space-5) var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
}

.sy-lesson-head__goals-title {
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.35;
  letter-spacing: 0;
}

.sy-lesson-head__goals-list {
  display: grid;
  gap: var(--sy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-lesson-head__goals-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.5;
}

.sy-lesson-head__goals-list svg {
  flex: none;
  margin-block-start: 2px;
  color: var(--sy-primary);
}

/* ---- mcq ---- */
/* Syllabus practice question: choose, check, see why. Without JS the answer waits in a details element. */

.sy-mcq {
  display: grid;
  gap: var(--sy-space-4);
  padding: var(--sy-space-5);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
  font-family: var(--sy-font-sans);
}

.sy-mcq__set {
  display: grid;
  gap: var(--sy-space-4);
}

.sy-mcq__q {
  display: grid;
  gap: var(--sy-space-2);
  float: inline-start;
  inline-size: 100%;
  margin-block-end: var(--sy-space-4);
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.4;
}

.sy-mcq__num {
  justify-self: start;
  padding: 3px 9px;
  border-radius: var(--sy-radius-chip);
  background: var(--sy-accent-soft);
  color: var(--sy-accent);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-medium);
  line-height: 1.3;
}

.sy-mcq__choices {
  display: grid;
  clear: both;
  gap: var(--sy-space-2);
}

.sy-mcq__choice {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sy-space-3);
  min-block-size: 50px;
  padding: 10px 12px;
  border: 1px solid var(--sy-hair-strong);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-surface);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--sy-dur-fast) var(--sy-ease), background-color var(--sy-dur-fast) var(--sy-ease);
}

.sy-mcq__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
}

.sy-mcq__letter {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1.5px solid var(--sy-control);
  border-radius: 50%;
  background: var(--sy-surface);
  color: var(--sy-ink);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-semibold);
}

.sy-mcq__verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-semibold);
  white-space: nowrap;
}

.sy-mcq__verdict:empty {
  display: none;
}

.sy-mcq__choice:hover {
  border-color: var(--sy-control);
  background: var(--sy-paper);
}

.sy-mcq:not(.is-answered) .sy-mcq__choice:has(.sy-mcq__input:checked) {
  border-color: var(--sy-primary);
  background: var(--sy-accent-soft);
  color: var(--sy-ink);
}

.sy-mcq:not(.is-answered) .sy-mcq__choice:has(.sy-mcq__input:checked) .sy-mcq__letter {
  border-color: var(--sy-primary);
  background: var(--sy-primary);
  color: var(--sy-on-primary);
}

.sy-mcq__choice:has(.sy-mcq__input:focus-visible) {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-mcq .sy-mcq__choice.is-correct {
  border-color: var(--sy-ok);
  background: var(--sy-ok-soft);
  color: var(--sy-ink);
  box-shadow: inset 0 0 0 1px var(--sy-ok);
}

.sy-mcq .sy-mcq__choice.is-correct .sy-mcq__letter {
  border-color: var(--sy-ok);
  background: var(--sy-ok);
  color: var(--sy-surface);
}

.sy-mcq__choice.is-correct .sy-mcq__verdict {
  color: var(--sy-ok);
}

.sy-mcq .sy-mcq__choice.is-wrong {
  border-color: var(--sy-danger);
  background: var(--sy-danger-soft);
  color: var(--sy-ink);
}

.sy-mcq .sy-mcq__choice.is-wrong .sy-mcq__letter {
  border-color: var(--sy-danger);
  background: var(--sy-danger);
  color: var(--sy-surface);
}

.sy-mcq__choice.is-wrong .sy-mcq__verdict {
  color: var(--sy-danger);
}

.sy-mcq.is-answered .sy-mcq__choice {
  cursor: default;
}

.sy-mcq__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-3) var(--sy-space-4);
}

.sy-mcq__feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
}

.sy-mcq__feedback:empty {
  display: none;
}

.sy-mcq__feedback.is-correct {
  color: var(--sy-ok);
}

.sy-mcq__feedback.is-wrong {
  color: var(--sy-danger);
}

.sy-mcq__feedback.is-empty {
  color: var(--sy-warn);
}

.sy-mcq__answer {
  border-block-start: 1px solid var(--sy-hair);
  padding-block-start: var(--sy-space-3);
}

.sy-mcq__answer > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  color: var(--sy-accent);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
  cursor: pointer;
}

.sy-mcq__explain {
  display: grid;
  gap: var(--sy-space-2);
  margin-block-start: var(--sy-space-2);
  padding: var(--sy-space-4);
  border-radius: var(--sy-radius-btn);
  background: var(--sy-paper);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.6;
}

.sy-mcq.is-enhanced:not(.is-answered) .sy-mcq__answer {
  display: none;
}

.sy-mcq.is-answered .sy-mcq__answer {
  padding-block-start: 0;
  border-block-start: 0;
}

.sy-mcq.is-answered .sy-mcq__answer > summary {
  display: none;
}

.sy-mcq.is-answered .sy-mcq__explain {
  margin-block-start: 0;
  animation: sy-rise var(--sy-dur-slow) var(--sy-ease-out) both;
}

@keyframes sy-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-mcq__choice {
    transition: none;
  }

  .sy-mcq.is-answered .sy-mcq__explain {
    animation: none;
  }
}

/* ---- flashcard ---- */
/* Syllabus flashcards: a term on the front, the meaning on the back. Flip with a click, Enter or Space. */

.sy-deck {
  display: grid;
  gap: var(--sy-space-3);
  min-inline-size: 0;
}

.sy-deck__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sy-space-2) var(--sy-space-4);
}

.sy-deck__title {
  font-size: var(--sy-fs-card);
}

.sy-deck__count {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-deck__track {
  position: relative;
  display: grid;
  grid-auto-columns: min(300px, 84%);
  grid-auto-flow: column;
  gap: var(--sy-space-4);
  margin: 0;
  padding: 4px 4px var(--sy-space-4);
  overflow-x: auto;
  list-style: none;
  align-items: start;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.sy-deck__track:focus-visible {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-flash {
  scroll-snap-align: start;
  min-inline-size: 0;
}

.sy-flash.is-enhanced,
.sy-flash.is-enhanced .sy-flash__card,
.sy-flash.is-enhanced .sy-flash__inner {
  block-size: 100%;
}

.sy-flash__card {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--sy-radius-card);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  perspective: 1200px;
}

.sy-flash__inner {
  position: relative;
  display: grid;
  gap: var(--sy-space-2);
}

.sy-flash__face {
  display: grid;
  align-content: space-between;
  gap: var(--sy-space-4);
  min-block-size: 200px;
  padding: var(--sy-space-5);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-flash__face--back {
  border-color: var(--sy-primary);
  background-color: var(--sy-surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--sy-rule) 27px, var(--sy-rule) 28px);
}

.sy-flash__side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-2);
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-medium);
}

.sy-flash__term {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.25;
}

.sy-flash__meaning {
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.55;
}

.sy-flash__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

.sy-flash__card:hover .sy-flash__face {
  border-color: var(--sy-control);
}

.sy-flash__card:focus-visible {
  outline: 3px solid var(--sy-focus);
  outline-offset: 3px;
}

/* Enhanced by JS: the two faces stack and the card turns over */
.sy-flash.is-enhanced .sy-flash__inner {
  gap: 0;
  transform-style: preserve-3d;
  transition: transform var(--sy-dur-slow) var(--sy-ease-out);
}

.sy-flash.is-enhanced .sy-flash__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sy-flash.is-enhanced .sy-flash__face--back {
  transform: rotateY(180deg);
}

.sy-flash.is-enhanced.is-flipped .sy-flash__inner {
  transform: rotateY(180deg);
}

.sy-deck__status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sy-flash.is-enhanced .sy-flash__inner,
  .sy-flash.is-enhanced.is-flipped .sy-flash__inner {
    transform: none;
    transition: none;
  }

  .sy-flash.is-enhanced .sy-flash__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity var(--sy-dur) linear;
  }

  .sy-flash.is-enhanced .sy-flash__face--back {
    opacity: 0;
    transform: none;
  }

  .sy-flash.is-enhanced.is-flipped .sy-flash__face--front {
    opacity: 0;
  }

  .sy-flash.is-enhanced.is-flipped .sy-flash__face--back {
    opacity: 1;
  }
}

/* ---- curriculum ---- */
/* Syllabus curriculum: one sheet per module, week number in a desk tile, lessons on a rail. */

.sy-curriculum {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-curriculum__module {
  overflow: hidden;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
}

.sy-curriculum__module[open] {
  box-shadow: var(--sy-shadow-card);
}

.sy-curriculum__summary {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px var(--sy-space-4);
  padding: var(--sy-space-4) var(--sy-space-5) var(--sy-space-4) var(--sy-space-4);
  list-style: none;
  cursor: pointer;
}

.sy-curriculum__summary::-webkit-details-marker {
  display: none;
}

.sy-curriculum__summary:hover .sy-curriculum__title {
  color: var(--sy-accent);
}

.sy-curriculum__week {
  grid-row: 1 / span 2;
  display: grid;
  place-content: center;
  justify-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 10px;
  background: var(--sy-desk);
  color: var(--sy-ink);
  line-height: 1;
}

.sy-curriculum__week-label {
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

.sy-curriculum__week-num {
  margin-block-start: 3px;
  font-family: var(--sy-font-serif);
  font-size: 1.375rem;
  font-weight: var(--sy-weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-curriculum__module--done .sy-curriculum__week {
  background: var(--sy-primary);
  color: var(--sy-on-primary);
}

.sy-curriculum__module--done .sy-curriculum__week-label {
  color: var(--sy-on-primary);
}

.sy-curriculum__module--doing .sy-curriculum__week {
  background: var(--sy-accent-soft);
  box-shadow: inset 0 0 0 2px var(--sy-primary);
}

.sy-curriculum__title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.sy-curriculum__meta {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sy-space-3);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-curriculum__chev {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid var(--sy-hair-strong);
  border-radius: 50%;
  color: var(--sy-ink);
  transition: transform var(--sy-dur) var(--sy-ease);
}

.sy-curriculum__module[open] .sy-curriculum__chev {
  transform: rotate(180deg);
}

.sy-curriculum__lessons {
  display: grid;
  margin: 0;
  padding: var(--sy-space-3) var(--sy-space-5) var(--sy-space-4) var(--sy-space-4);
  border-block-start: 1px solid var(--sy-hair);
  list-style: none;
}

.sy-curriculum__lesson {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px var(--sy-space-3);
  padding-block: 9px;
}

.sy-curriculum__lesson::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  inset-block: 33px -9px;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--sy-hair-strong);
}

.sy-curriculum__lesson--done::before {
  background: var(--sy-done);
}

.sy-curriculum__lesson:last-child::before {
  display: none;
}

.sy-curriculum__lesson .sy-pmark {
  margin-block-start: 3px;
}

.sy-curriculum__name {
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
  line-height: 1.45;
}

a.sy-curriculum__name {
  color: var(--sy-accent);
}

.sy-curriculum__num {
  margin-inline-end: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sy-curriculum__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px var(--sy-space-3);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sy-curriculum__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 768px) {
  .sy-curriculum__lessons {
    padding-inline-start: calc(var(--sy-space-4) + 56px + var(--sy-space-4) - 9px);
  }
}

@media (max-width: 559px) {
  .sy-curriculum__lesson {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .sy-curriculum__detail {
    grid-column: 2;
    justify-content: flex-start;
  }

  .sy-curriculum__type {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-curriculum__chev {
    transition: none;
  }
}

/* ---- course-card ---- */
/* Syllabus course card: a coded cover with the subject's symbol, the facts, and a price or your progress. */

.sy-course {
  position: relative;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
  transition: border-color var(--sy-dur) var(--sy-ease), box-shadow var(--sy-dur) var(--sy-ease), transform var(--sy-dur) var(--sy-ease);
}

.sy-course:hover {
  border-color: var(--sy-control);
  box-shadow: var(--sy-shadow-lift);
  transform: translateY(-2px);
}

.sy-course:focus-within {
  outline: 3px solid var(--sy-focus);
  outline-offset: 2px;
}

.sy-course__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background-color: var(--sy-cover-1);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, var(--sy-cover-line) 23px, var(--sy-cover-line) 24px);
  color: var(--sy-cover-1-ink);
}

.sy-course__cover--2 {
  background-color: var(--sy-cover-2);
  color: var(--sy-cover-2-ink);
}

.sy-course__cover--3 {
  background-color: var(--sy-cover-3);
  color: var(--sy-cover-3-ink);
}

.sy-course__glyph {
  font-family: var(--sy-font-serif);
  font-size: 5.5rem;
  font-style: italic;
  font-weight: var(--sy-weight-semibold);
  line-height: 1;
}

.sy-course__tag {
  position: absolute;
  inset-inline-start: var(--sy-space-4);
  inset-block-end: var(--sy-space-3);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-medium);
}

.sy-course__body {
  display: grid;
  gap: var(--sy-space-2);
  padding: var(--sy-space-5) var(--sy-space-5) var(--sy-space-4);
}

.sy-course__title {
  font-size: var(--sy-fs-card);
}

.sy-course__title a {
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-course__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sy-course__title a:focus-visible {
  outline: none;
}

.sy-course__text {
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-course__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sy-space-4);
  margin: var(--sy-space-1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-course__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sy-course__foot {
  display: grid;
  gap: var(--sy-space-3);
  margin-block-start: auto;
  padding: var(--sy-space-4) var(--sy-space-5) var(--sy-space-5);
  border-block-start: 1px solid var(--sy-hair);
}

.sy-course__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sy-space-2);
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-course__price strong {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.375rem;
  font-weight: var(--sy-weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-course__next {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-2);
  color: var(--sy-ink);
  font-size: var(--sy-fs-meta);
}

@media (prefers-reduced-motion: reduce) {
  .sy-course {
    transition: none;
  }

  .sy-course:hover {
    transform: none;
  }
}

/* ---- instructor-card ---- */
/* Syllabus instructor card: who teaches, what they teach, and when to find them. */

.sy-instructor {
  block-size: 100%;
  display: grid;
  gap: var(--sy-space-4);
  align-content: start;
  padding: var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-instructor__head {
  display: flex;
  align-items: center;
  gap: var(--sy-space-4);
}

.sy-instructor__name {
  font-size: var(--sy-fs-card);
}

.sy-instructor__role {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-instructor__bio {
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-instructor__facts {
  display: grid;
  gap: var(--sy-space-2);
  margin: 0;
  padding: var(--sy-space-4) 0 0;
  border-block-start: 1px solid var(--sy-hair);
  list-style: none;
  color: var(--sy-body);
  font-size: var(--sy-fs-meta);
}

.sy-instructor__facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sy-instructor__facts svg {
  flex: none;
  margin-block-start: 1px;
  color: var(--sy-muted);
}

@media (min-width: 768px) {
  .sy-instructor--row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sy-space-4) var(--sy-space-6);
  }

  .sy-instructor--row .sy-instructor__head {
    grid-row: 1 / span 3;
    align-self: start;
  }

  .sy-instructor--row .sy-instructor__who {
    display: none;
  }
}

/* ---- schedule ---- */
/* Syllabus schedule: the cohort calendar as a list. Dates in tiles, the next event on a teal tint. */

.sy-schedule {
  display: grid;
  gap: var(--sy-space-7);
}

.sy-schedule__week {
  display: grid;
  gap: var(--sy-space-3);
}

.sy-schedule__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sy-space-3);
  font-size: 1.1875rem;
}

.sy-schedule__range {
  color: var(--sy-muted);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-regular);
  font-variant-numeric: tabular-nums;
}

.sy-schedule__list {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  list-style: none;
}

.sy-schedule__event {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sy-space-4);
  padding: var(--sy-space-3) var(--sy-space-4);
}

.sy-schedule__event + .sy-schedule__event {
  border-block-start: 1px solid var(--sy-hair);
}

.sy-schedule__date {
  display: grid;
  justify-items: center;
  inline-size: 56px;
  padding-block: 6px;
  border-radius: var(--sy-radius-btn);
  background: var(--sy-desk);
  line-height: 1.1;
}

.sy-schedule__dow {
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-medium);
}

.sy-schedule__day {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.375rem;
  font-weight: var(--sy-weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

.sy-schedule__body {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.sy-schedule__name {
  color: var(--sy-ink);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-medium);
  line-height: 1.35;
}

.sy-schedule__time {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-schedule__event--past .sy-schedule__date {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sy-hair-strong);
}

.sy-schedule__event--past .sy-schedule__name {
  color: var(--sy-body);
  font-weight: var(--sy-weight-regular);
}

.sy-schedule__event--next {
  background: var(--sy-accent-soft);
}

.sy-schedule__event--next .sy-schedule__date {
  background: var(--sy-primary);
}

.sy-schedule__event--next .sy-schedule__dow,
.sy-schedule__event--next .sy-schedule__day {
  color: var(--sy-on-primary);
}

.sy-schedule__event--next > .sy-badge {
  background: var(--sy-primary);
  color: var(--sy-on-primary);
}

@media (max-width: 479px) {
  .sy-schedule__event {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .sy-schedule__event > .sy-badge,
  .sy-schedule__event > .sy-pmark {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---- lesson-pager ---- */
/* Syllabus lesson pager: mark the lesson done, then step to the previous or next one. */

.sy-pager {
  display: grid;
  gap: var(--sy-space-4);
  margin-block-start: var(--sy-space-9);
  padding-block-start: var(--sy-space-7);
  border-block-start: 1px solid var(--sy-hair);
}

.sy-pager__done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-3) var(--sy-space-5);
  padding: var(--sy-space-4) var(--sy-space-5);
  border-radius: var(--sy-radius-card);
  background: var(--sy-desk);
}

.sy-pager__done-text {
  display: flex;
  align-items: center;
  gap: var(--sy-space-3);
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-pager__done-text svg {
  flex: none;
  color: var(--sy-primary);
}

.sy-pager__links {
  display: grid;
  gap: var(--sy-space-3);
}

@media (min-width: 640px) {
  .sy-pager__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sy-pager__link {
  display: grid;
  gap: 4px;
  padding: var(--sy-space-4) var(--sy-space-5);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  color: var(--sy-ink);
  text-decoration: none;
  transition: border-color var(--sy-dur) var(--sy-ease), box-shadow var(--sy-dur) var(--sy-ease);
}

.sy-pager__link:hover {
  border-color: var(--sy-control);
  box-shadow: var(--sy-shadow-lift);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
}

.sy-pager__title {
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.35;
}

.sy-pager__link--next {
  justify-items: end;
  text-align: end;
}

[dir="rtl"] .sy-pager__dir svg {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  .sy-pager__link {
    transition: none;
  }
}

/* ---- quiz-summary ---- */
/* Syllabus quiz: a question rail that fills as you answer, and the results panel with your misses. */

.sy-pmark--right {
  border-color: var(--sy-ok);
  background: var(--sy-ok);
}

.sy-pmark--right::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 4.5px;
  inline-size: 4px;
  block-size: 8px;
  border: solid var(--sy-surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sy-pmark--wrong {
  border-color: var(--sy-danger);
  background: var(--sy-danger);
}

.sy-pmark--wrong::before,
.sy-pmark--wrong::after {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 2.5px;
  inline-size: 9px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--sy-surface);
  transform: rotate(45deg);
}

.sy-pmark--wrong::after {
  transform: rotate(-45deg);
}

.sy-pmark--sm.sy-pmark--right::after {
  inset-block-start: 1px;
  inset-inline-start: 3px;
  inline-size: 3px;
  block-size: 6px;
  border-width: 0 1.5px 1.5px 0;
}

.sy-pmark--sm.sy-pmark--wrong::before,
.sy-pmark--sm.sy-pmark--wrong::after {
  inset-block-start: 4px;
  inset-inline-start: 1.5px;
  inline-size: 7px;
  block-size: 1.5px;
}

.sy-quiz-nav {
  display: grid;
  gap: var(--sy-space-4);
  padding: var(--sy-space-5) var(--sy-space-4);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
}

.sy-quiz-nav__head {
  display: grid;
  gap: 4px;
  padding-inline: 4px;
}

.sy-quiz-nav__title {
  color: var(--sy-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.1875rem;
  font-weight: var(--sy-weight-semibold);
  line-height: 1.3;
}

.sy-quiz-nav__count {
  color: var(--sy-muted);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sy-quiz-nav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-quiz-nav__link {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-block-size: 56px;
  padding: 8px 4px;
  border-radius: var(--sy-radius-btn);
  color: var(--sy-body);
  font-size: var(--sy-fs-meta);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.sy-quiz-nav__link .sy-pmark,
.sy-quiz-result__mark .sy-pmark {
  order: -1;
}

.sy-quiz-nav__link:hover {
  background: var(--sy-desk);
  color: var(--sy-ink);
  text-decoration: none;
}

.sy-quiz-nav__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--sy-space-4);
  margin: 0;
  padding: var(--sy-space-3) 4px 0;
  border-block-start: 1px solid var(--sy-hair);
  list-style: none;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
}

.sy-quiz-nav__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sy-quiz-actions {
  margin-block: var(--sy-space-8) var(--sy-space-6);
}

.sy-quiz-result {
  scroll-margin-block-start: calc(var(--sy-nav-h) + var(--sy-space-6));
  display: grid;
  gap: var(--sy-space-5);
  padding: var(--sy-space-6);
  border: 1px solid var(--sy-hair);
  border-radius: var(--sy-radius-card);
  background: var(--sy-surface);
  box-shadow: var(--sy-shadow-card);
}

.sy-quiz-result.is-final {
  border: 2px solid var(--sy-primary);
  box-shadow: var(--sy-shadow-lift);
}

.sy-quiz-result__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sy-space-5) var(--sy-space-7);
}

.sy-quiz-result__summary {
  display: grid;
  gap: var(--sy-space-2);
  flex: 1;
  min-inline-size: 220px;
}

.sy-quiz-result__score {
  font-size: var(--sy-fs-headline);
}

.sy-quiz-result__verdict {
  max-inline-size: 36em;
  color: var(--sy-body);
  font-size: var(--sy-fs-small);
}

.sy-quiz-result__marks {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: var(--sy-space-4) 0 0;
  border-block-start: 1px solid var(--sy-hair);
  list-style: none;
}

.sy-quiz-result__mark {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--sy-muted);
  font-size: var(--sy-fs-label);
  font-variant-numeric: tabular-nums;
}

.sy-quiz-result__review {
  display: grid;
  gap: var(--sy-space-2);
}

.sy-quiz-result__review-title {
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  font-size: var(--sy-fs-small);
  font-weight: var(--sy-weight-semibold);
}

.sy-quiz-result__misses {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sy-fs-small);
}

@media (max-width: 479px) {
  .sy-quiz-result__marks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: var(--sy-space-3);
  }
}

/* ---- certificate ---- */
/* Syllabus certificate: a paper document in both themes, framed by a hairline, ready to print. */

.sy-cert {
  position: relative;
  display: grid;
  gap: var(--sy-space-6);
  justify-items: center;
  padding: var(--sy-space-9) var(--sy-space-6);
  border: 1px solid var(--sy-cert-line);
  border-radius: var(--sy-radius-xs);
  background: var(--sy-cert-paper);
  color: var(--sy-cert-ink);
  box-shadow: var(--sy-shadow-pop);
  outline: 1px solid var(--sy-cert-line);
  outline-offset: -12px;
  text-align: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media (min-width: 900px) {
  .sy-cert {
    align-content: center;
    min-block-size: 600px;
    padding: var(--sy-space-10) var(--sy-space-10);
  }
}

.sy-cert__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sy-cert-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
  font-weight: var(--sy-weight-semibold);
}

.sy-cert__brand .sy-brandmark {
  color: var(--sy-cert-seal);
}

.sy-cert__kind {
  color: var(--sy-cert-ink);
  font-family: var(--sy-font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-style: italic;
  font-weight: var(--sy-weight-regular);
  letter-spacing: -0.005em;
}

.sy-cert__lead {
  color: var(--sy-cert-muted);
  font-family: var(--sy-font-serif);
  font-size: 1.125rem;
}

.sy-cert__name {
  padding: 0 var(--sy-space-6) var(--sy-space-3);
  border-block-end: 1px solid var(--sy-cert-line);
  color: var(--sy-cert-ink);
  font-family: var(--sy-font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.sy-cert__text {
  max-inline-size: 40em;
  color: var(--sy-cert-muted);
  font-family: var(--sy-font-serif);
  font-size: var(--sy-fs-small);
  line-height: 1.6;
}

.sy-cert__text strong {
  color: var(--sy-cert-ink);
}

.sy-cert__rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sy-cert__step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  inline-size: 64px;
  color: var(--sy-cert-muted);
  font-size: var(--sy-fs-label);
  font-variant-numeric: tabular-nums;
}

.sy-cert__step + .sy-cert__step::before {
  content: "";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: calc(50% + 11px);
  inline-size: calc(64px - 22px);
  block-size: 2px;
  background: var(--sy-cert-seal);
}

.sy-cert .sy-pmark--done {
  border-color: var(--sy-cert-seal);
  background: var(--sy-cert-seal);
}

.sy-cert .sy-pmark--done::after {
  border-color: var(--sy-cert-paper);
}

.sy-cert__foot {
  display: grid;
  gap: var(--sy-space-6);
  align-items: end;
  inline-size: 100%;
  margin-block-start: var(--sy-space-3);
}

@media (min-width: 768px) {
  .sy-cert__foot {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.sy-cert__sign {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.sy-cert__sig {
  min-inline-size: 180px;
  padding-block-end: 6px;
  border-block-end: 1px solid var(--sy-cert-ink);
  color: var(--sy-cert-ink);
  font-family: var(--sy-font-serif);
  font-size: 1.5rem;
  font-style: italic;
}

.sy-cert__who {
  color: var(--sy-cert-ink);
  font-size: var(--sy-fs-meta);
  font-weight: var(--sy-weight-semibold);
}

.sy-cert__role {
  color: var(--sy-cert-muted);
  font-size: var(--sy-fs-label);
}

.sy-cert__seal {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  inline-size: 112px;
  block-size: 112px;
  margin-inline: auto;
  border: 2px solid var(--sy-cert-seal);
  border-radius: 50%;
  outline: 1px solid var(--sy-cert-seal);
  outline-offset: 4px;
  color: var(--sy-cert-seal);
  font-size: var(--sy-fs-label);
  font-weight: var(--sy-weight-semibold);
  line-height: 1.2;
}

.sy-cert__id {
  color: var(--sy-cert-muted);
  font-size: var(--sy-fs-label);
  font-variant-numeric: tabular-nums;
}

.sy-cert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-3);
  margin-block-end: var(--sy-space-6);
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  .sy-page * {
    visibility: hidden;
  }

  .sy-cert,
  .sy-cert * {
    visibility: visible;
  }

  .sy-cert {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    min-block-size: 0;
    box-shadow: none;
  }
}