/* Project documentation (the notes): the list of notes
   on the left (the open one marked), the note in one reading
   column, and "Next →" at the bottom. What goes inside a note is styled by
   notes.css. */

.cx-page { padding: clamp(16px, 3vw, 32px) var(--gutter) clamp(64px, 8vw, 112px); }
.cx-error { color: var(--muted); }

.ca-shell { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: clamp(32px, 5vw, 80px); }
.ca-toc { position: sticky; top: 24px; align-self: start; max-height: calc(100dvh - 48px); overflow: auto; font-size: 14px; }
.ca-toc .label { margin: 0 0 10px; }
.ca-toc ol { margin: 0; padding: 0; list-style: none; }
.ca-toc > ol > li + li { margin-top: 4px; }
.ca-toc a { display: block; width: fit-content; max-width: 100%; color: var(--muted); transition: color .2s var(--ease); }  /* only the words are clickable */
.ca-toc a:hover { color: var(--ink); }
/* A note in the list; the open one is marked */
.ca-toc .c { display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; color: var(--ink-soft); }
.ca-toc .c:not(:has(span)) { display: block; }  /* the introduction has no number */
.ca-toc .c span { margin-right: 8px; font: 500 11px var(--mono); color: var(--muted); }
.ca-toc .c[aria-current] { font-weight: 600; color: var(--ink); }
.ca-toc .c[aria-current] span { color: var(--terracotta); }

/* Next: light and minimal. A small "Next →" over the next note's name,
   both in the reading sans, on the right; no hover change */
.ca-next { display: grid; gap: 2px; width: fit-content; margin: 64px 0 0 auto; text-align: right; }
.ca-next .label { margin: 0; font: 400 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ca-next .t { font: 400 17px/1.4 var(--sans); color: var(--ink-soft); }
.ca-next[hidden] { display: none; }
@media (max-width: 900px) { .ca-shell { display: block; } .ca-toc { position: static; max-height: none; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } }

/* Moving between docs pages cross-fades instead of blinking (browsers without
   this simply change page as usual) */
@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}