/* ============================================================================
   The written explainer
   ----------------------------------------------------------------------------
   The reading half of the piece gets its own texture: Sagittaire Text rather
   than PolySans, set larger and looser, with the thin brand rule between
   sections that Amp's own Owner's Manual uses. Playing and reading should
   feel like two rooms in the same building.
   ========================================================================= */

/* --- Explainer shell: contents rail beside the reading column ----------- */

.explainer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}

@media (min-width: 80rem) {
  .explainer__grid {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--s-8);
  }
}

.toc { position: sticky; top: 6rem; align-self: start; }
.toc__h {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-3);
}
.toc__list { display: grid; gap: 1px; counter-reset: toc; }
.toc__item { counter-increment: toc; }
.toc__link {
  display: block;
  padding: var(--s-2) var(--s-3);
  padding-inline-start: var(--s-2);
  border-inline-start: 2px solid transparent;
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.toc__link::before {
  content: counter(toc) ". ";
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-faint);
}
.toc__link:hover { color: var(--fg); border-inline-start-color: var(--line-strong); }
.toc__link[aria-current="location"] {
  color: var(--fg);
  border-inline-start-color: var(--brand);
}

/* On narrow screens the rail becomes a plain contents list above the prose. */
@media (max-width: 80rem) {
  .toc { position: static; }
  .toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
  }
  .toc__link {
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: var(--s-1) var(--s-3);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
  .toc__link[aria-current="location"] { border-color: var(--brand); }
}
@media (max-width: 80rem) and (pointer: coarse) {
  .toc__link { min-height: var(--tap); }
}

/* --- The reading column -------------------------------------------------- */

.prose {
  font-family: var(--font-text);
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--fg);
  max-width: var(--prose-max);
}

.prose section + section {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid color-mix(in oklab, var(--brand) 55%, transparent);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  margin: var(--s-6) 0 var(--s-3);
  text-wrap: balance;
}

.prose p { margin-bottom: var(--s-4); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }

.prose strong { font-weight: 500; }
.prose em { font-style: italic; }

.prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* --- Lists --------------------------------------------------------------- */

.prose ul, .prose ol {
  margin: 0 0 var(--s-4);
  padding-inline-start: var(--s-5);
}
.prose ul { list-style: none; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--s-2); }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-5) * -1 + 2px);
  top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* --- Definition lists ---------------------------------------------------- */

.prose dl {
  margin: 0 0 var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.prose dt {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-1);
}
.prose dd {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.prose dd code { color: var(--fg); }

/* --- Code ---------------------------------------------------------------- */

.prose code {
  font-family: var(--font-mono);
  font-size: max(1rem, 0.86em);
  padding: 0.1em 0.3em;
  border-radius: var(--r-sm);
  background: var(--card-hover);
  overflow-wrap: anywhere;
}

.prose pre {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.55;
  tab-size: 2;
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
  white-space: pre;
}

/* --- Figures ------------------------------------------------------------- */

.prose figure { margin: 0 0 var(--s-5); }
.prose figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.prose figcaption code { font-size: max(1rem, 0.9em); }

/* --- Progressive disclosure ---------------------------------------------
   The surface line stays in the flow; the deeper detail lives behind a
   `<details>`. Native disclosure is already keyboard-operable and already
   announced correctly, so this is styling only — no ARIA, no JS, nothing that
   would fight the element's own semantics. The default triangle is replaced
   with a drawn marker because the UA one does not scale with 22px type. */

.prose details {
  margin: 0 0 var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}

.prose summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  min-height: var(--tap);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--d-fast) var(--ease-out);
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary:hover { background: var(--card-hover); }
.prose summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--r-lg);
}

/* A chevron drawn from two borders: scales with the type, needs no font. */
.prose summary::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-top: 0.25em;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
  transition: transform var(--d-mid) var(--ease-orb);
}
.prose details[open] > summary::before { transform: rotate(45deg); }
.prose details[open] > summary { border-bottom: 1px solid var(--line); }

.prose details > *:not(summary) {
  padding-inline: var(--s-5);
  font-size: var(--t-md);
}
.prose details > *:not(summary):first-of-type { padding-top: var(--s-4); }
.prose details > *:last-child { padding-bottom: var(--s-4); margin-bottom: 0; }
.prose details pre { margin-inline: var(--s-5); padding-inline: var(--s-4); }
.prose details > pre { padding-inline: var(--s-4); }

@media (max-width: 40rem) {
  .prose summary { padding: var(--s-3) var(--s-4); }
  .prose details > *:not(summary) { padding-inline: var(--s-4); }
}

/* --- Quotes -------------------------------------------------------------- */

.prose blockquote {
  margin: 0;
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--brand);
}
.prose blockquote p {
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.45;
  color: var(--fg);
  text-wrap: pretty;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose cite { font-style: italic; }

/* --- Tables -------------------------------------------------------------- */

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  margin-bottom: var(--s-5);
}
.prose caption {
  text-align: start;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  padding-bottom: var(--s-3);
  text-wrap: pretty;
}
.prose thead th {
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.prose tbody th {
  text-align: start;
  font-weight: 500;
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  white-space: nowrap;
}
/* Short values ("40 GB", "$0.08") read badly broken over two lines. The
   marker is set per cell at boot by measuring the text, because a positional
   rule would also catch the 130-character prose columns in the other two
   reference tables and force them off the page. */
.prose tbody td[data-short] { white-space: nowrap; }
.prose tbody td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
  vertical-align: top;
}
.prose tbody th code { background: none; padding: 0; color: var(--brand); }

/* Wide tables scroll inside their own box rather than pushing the page.
   The scroll container is a wrapper added at boot rather than
   `display: block` on the table itself — changing a table's display value
   strips its rows and cells out of the accessibility tree in most browsers,
   and these reference tables are part of the non-visual path through the
   site. The wrapper is focusable so the scroll region is keyboard-reachable. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: var(--s-5);
}
.table-scroll > table { margin-bottom: 0; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Reference section is wider, since it is all tables ------------------ */

.prose #reference { max-width: none; }
.prose #reference table { font-size: var(--t-xs); }

/* The reference appendix is all tables, so it is allowed to run wider than
   the reading measure. */
@media (min-width: 80rem) {
  .prose #reference { max-width: 60rem; }
}

@media (max-width: 40rem) {
  .prose { font-size: var(--t-md); line-height: 1.62; }
  .prose h2 { font-size: var(--t-2xl); }
  .prose blockquote p { font-size: var(--t-lg); }
  .prose pre { padding: var(--s-3) var(--s-4); font-size: var(--t-xs); }
}