/* ==========================================================================
   math.css: /math/, /math/<subject>/ and the notes reader (/math/?subject=)
   --------------------------------------------------------------------------
   Reads only tokens. Sections:
     1. Index entries (type label, title, count)
     2. Reader layout (contents, article)
     3. Notes typography and math
     4. Note blocks (definition, theorem, proof, ...)
     5. Interactive figures (JSXGraph, three.js), steps, code
     6. States (loading, empty, error)
   ========================================================================== */

/* 1. Index entries ---------------------------------------------------------
   One row per thing to read or watch: a mono type label, the title and a
   line about it, and a count or date in mono on the right. */
.entries {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--line);
}
.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "type meta"
    "body body";
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 48rem) {
  .entry {
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    grid-template-areas: "type body meta";
    align-items: baseline;
  }
}
.entry__type {
  grid-area: type;
  font-family: var(--font-mono);
  font-size: var(--step-n2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.entry__body { grid-area: body; min-width: 0; }
.entry__meta {
  grid-area: meta;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}
.entry__title { font-size: var(--step-2); }
.entry__title a { color: var(--ink); text-decoration: none; }
/* The whole row is the link; the title carries the name. */
.entry__title a::before { content: ""; position: absolute; inset: 0; }
.entry__title a:hover { color: var(--accent); }
.entry__title a:focus-visible { outline: none; }
.entry:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.entry__title svg { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.15em; color: var(--ink-3); vertical-align: 0.1em; }
.entry__desc { max-width: var(--measure); margin-top: var(--space-1); color: var(--ink-2); }
.entry--soon .entry__type { color: var(--ink-3); }
.entry--soon .entry__title a { color: var(--ink-2); }
.entry--soon .entry__title a:hover { color: var(--accent); }

.math-note {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--ink-3);
  font-size: var(--step-n1);
}

/* Sections on the index pages: a small heading, then the list. */
.math-block + .math-block { margin-top: var(--space-8); }
.math-block .section__head { margin-bottom: var(--space-4); }
.math-block .section__head h2 { font-size: var(--step-2); }
.math-block .section__head p { color: var(--ink-3); }

.subject-facts { color: var(--ink-3); }
.subject-facts b { color: var(--ink-2); font-weight: var(--weight-medium); }

/* Chapter rows carry their sections underneath. */
.entry__sections {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.entry__sections a {
  position: relative;
  z-index: 1;               /* above the row link */
  color: var(--ink-2);
  text-decoration: none;
}
.entry__sections a:hover { color: var(--accent); }
.entry__sections .mono { margin-right: var(--space-2); color: var(--ink-3); }

/* Before JavaScript has decided what to show, a note address (?subject=)
   keeps the index hidden so it does not flash. Set in the page itself. */
.math-reading .math-index { display: none; }
.math-reader { display: none; }

/* 2. Reader layout --------------------------------------------------------- */
.math-reading .math-reader {
  display: grid;
  gap: var(--space-6) var(--space-8);
  padding-block: var(--space-7) 0;
}
@media (min-width: 64rem) {
  .math-reading .math-reader { grid-template-columns: 14rem minmax(0, 1fr); }
}

.m-toc { align-self: start; }
@media (min-width: 64rem) {
  .m-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    max-height: calc(100vh - var(--header-h) - var(--space-7));
    overflow-y: auto;
  }
}
.m-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--step-n1);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}
.m-toc > summary::-webkit-details-marker { display: none; }
.m-toc > summary svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.m-toc[open] > summary svg { transform: rotate(180deg); }
@media (min-width: 64rem) {
  .m-toc > summary {
    padding: 0;
    border: 0;
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--step-n2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
    pointer-events: none;
  }
  .m-toc > summary svg { display: none; }
}
.m-toc__subject {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--ink);
}
.m-toc__subject a { color: inherit; text-decoration: none; }
.m-toc__subject a:hover { color: var(--accent); }
@media (min-width: 64rem) { .m-toc__subject { margin-top: 0; } }
.m-toc ol { margin: 0; padding: 0; list-style: none; }
.m-toc__chapter + .m-toc__chapter { margin-top: var(--space-4); }
.m-toc__chapter > a {
  display: block;
  color: var(--ink);
  font-size: var(--step-n1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-decoration: none;
}
.m-toc__chapter > a .mono { display: block; color: var(--ink-3); font-weight: var(--weight-regular); }
.m-toc__sections {
  margin-top: var(--space-2) !important;
  border-left: var(--hairline) solid var(--line);
}
.m-toc__sections a {
  display: block;
  margin-left: -1px;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--ink-3);
  font-size: var(--step-n1);
  line-height: var(--leading-snug);
  text-decoration: none;
}
.m-toc a:hover { color: var(--accent); }
.m-toc a[aria-current="page"] { color: var(--ink); border-left-color: var(--accent); }
.m-toc__chapter > a[aria-current="page"] { color: var(--accent); }

.m-article { min-width: 0; max-width: var(--measure); }

.m-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  color: var(--ink-3);
}
.m-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }
.m-crumbs a { color: var(--ink-2); text-decoration: none; }
.m-crumbs a:hover { color: var(--accent); }

.m-head { margin-bottom: var(--space-7); }
.m-head .eyebrow { margin-bottom: var(--space-3); color: var(--accent); }
.m-head h1 { font-size: var(--step-4); }
.m-head__meta { margin-top: var(--space-3); color: var(--ink-3); }
.m-head__lede { margin-top: var(--space-4); font-size: var(--step-1); line-height: var(--leading-snug); color: var(--ink-2); }

/* 3. Notes typography and math --------------------------------------------
   Notes are set in the serif, the way a textbook would be, with KaTeX's own
   fonts for the math. Display math gets room above and below, and a wide
   equation scrolls inside its own strip instead of widening the page. */
.m-prose {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: var(--leading);
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.m-prose p + p { margin-top: 0.9em; }
.m-prose strong, .m-prose b { color: var(--ink); }
.m-prose ul, .m-prose ol { padding-left: 1.25em; }
.m-prose li + li { margin-top: 0.35em; }
.m-prose li::marker { color: var(--ink-3); }

.m-body > * + * { margin-top: var(--space-5); }

.katex { font-size: 1.04em; color: var(--ink); }

.m-display {
  margin-block: var(--space-7);
  padding-block: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  scrollbar-width: thin;
}
.m-display .katex { font-size: 1.12em; }
/* KaTeX's own display blocks inside prose also scroll on their own. */
.m-prose .katex-display {
  margin-block: var(--space-5);
  padding-block: var(--space-1);
  overflow-x: auto;
  overflow-y: hidden;
}
.m-prose .m-display .katex-display { margin: 0; padding: 0; overflow: visible; }

/* 4. Note blocks -----------------------------------------------------------
   A mono label and a rule on the left say what kind of block it is. Color
   is reserved for the two that matter most: definitions (green) and
   theorems (gold). */
.m-block {
  margin-block: var(--space-7);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--line-strong);
}
.m-block__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-n2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.m-block__name {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  font-style: italic;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.m-block--definition { border-left-color: var(--accent); }
.m-block--definition .m-block__label { color: var(--accent); }
.m-block--theorem {
  padding: var(--space-5);
  border-left-color: var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}
.m-block--theorem .m-block__label { color: var(--gold-ink); }
.m-block--note {
  padding: var(--space-4) var(--space-5);
  border-left-color: var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-size: var(--step-0);
}
.m-block--warning { border-left-color: var(--gold); }
.m-block--warning .m-block__label { color: var(--gold-ink); }

/* Proofs and solutions fold with <details>, so the keyboard and screen
   readers get the behaviour for free. */
.m-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
}
.m-fold > summary::-webkit-details-marker { display: none; }
.m-fold > summary svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.m-fold[open] > summary svg { transform: rotate(180deg); }
.m-fold > summary .when-open,
.m-fold[open] > summary .when-closed { display: none; }
.m-fold[open] > summary .when-open { display: inline; }
.m-proof > summary { margin-bottom: 0; }
.m-proof[open] > summary { margin-bottom: var(--space-3); }
.m-proof > summary:hover { color: var(--ink); }
.m-qed { margin-top: var(--space-3); text-align: right; color: var(--ink-3); }

.m-solution { margin-top: var(--space-4); }
.m-solution > summary { min-height: 36px; }
.m-solution__body {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline) dashed var(--line-strong);
}

.m-figure { margin-block: var(--space-7); }
.m-figure img { border-radius: var(--radius); margin-inline: auto; }
.m-figure figcaption { margin-top: var(--space-3); color: var(--ink-3); font-size: var(--step-n1); text-align: center; }

.m-takeaways {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line);
}
.m-takeaways ul { margin-top: var(--space-3); padding-left: 1.25em; }
.m-takeaways li + li { margin-top: var(--space-2); }
.m-takeaways li::marker { content: "✓  "; color: var(--accent); }

/* 5. Interactive figures, steps, code -------------------------------------- */
.m-panel {
  margin-block: var(--space-7);
  overflow: hidden;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--step-0);
}
.m-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
}
.m-panel__title { color: var(--ink); font-size: var(--step-n1); font-weight: var(--weight-medium); }
.m-panel__title .eyebrow { display: inline; margin-right: var(--space-2); }
.m-panel__foot {
  padding: var(--space-2) var(--space-4);
  border-top: var(--hairline) solid var(--line);
  color: var(--ink-3);
  font-size: var(--step-n1);
  text-align: center;
}

.m-graph__canvas,
.m-3d__canvas {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 16rem;
  max-height: 28rem;
  background: var(--surface);
}
/* JSXGraph's stylesheet draws its own box; the panel already has one. */
.m-graph__canvas.jxgbox { border: 0; border-radius: 0; background: var(--surface); }
.m-3d__canvas { cursor: grab; touch-action: none; }
.m-3d__canvas:active { cursor: grabbing; }
.m-3d__canvas canvas { display: block; width: 100% !important; height: 100% !important; }

.m-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4);
  border-top: var(--hairline) solid var(--line);
}
.m-slider label {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
  color: var(--ink-2);
  font-size: var(--step-n1);
}
.m-slider output { font-family: var(--font-mono); color: var(--ink); }
.m-slider input { width: 100%; accent-color: var(--accent); }

.m-steps__controls { display: flex; align-items: center; gap: var(--space-2); }
.m-steps__controls .icon-btn { width: 36px; height: 36px; border: var(--hairline) solid var(--line-strong); }
.m-steps__controls .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.m-steps__controls svg { width: 16px; height: 16px; }
.m-steps__counter { min-width: 4.5em; text-align: center; color: var(--ink-3); }
.m-steps__body { padding: var(--space-5); font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink-2); }
.m-steps__step[hidden] { display: none; }

.m-code { background: var(--surface); }
.m-code .m-panel__bar { color: var(--ink-3); }
.m-code pre { border-radius: 0; background: none; font-size: var(--step-n1); }

/* 6. States ---------------------------------------------------------------- */
.m-skeleton { display: grid; gap: var(--space-3); max-width: var(--measure); }
.m-skeleton span {
  display: block;
  height: 1.1em;
  border-radius: var(--radius-sm);
  background: var(--surface);
  animation: m-pulse 1.4s var(--ease) infinite alternate;
}
.m-skeleton span:first-child { width: 30%; height: 0.8em; }
.m-skeleton span:nth-child(2) { width: 70%; height: 2.4em; margin-bottom: var(--space-5); }
.m-skeleton span:nth-child(odd) { width: 92%; }
.m-skeleton span:last-child { width: 55%; }
@keyframes m-pulse { to { opacity: 0.45; } }

.m-state { max-width: var(--measure); padding-block: var(--space-4) var(--space-7); }
.m-state h1 { font-size: var(--step-4); }
.m-state p { margin-top: var(--space-4); color: var(--ink-2); }
.m-state .btn { margin-top: var(--space-5); }

.m-pager {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 40rem) { .m-pager { grid-template-columns: 1fr 1fr; } }
.m-pager a { display: grid; gap: var(--space-1); color: var(--ink); text-decoration: none; }
.m-pager a:hover { color: var(--accent); }
.m-pager .mono { color: var(--ink-3); }
.m-pager__next { text-align: right; grid-column: -2; }