/* Wiki article styling — the single source of truth.
 *
 * The same article is rendered two ways: as a static page under
 * public/wiki/*.html (what search engines and direct links get) and inside the
 * React shell by components/Wiki/WikiPage.tsx (what in-app navigation gets).
 * Both put class="wiki-page" on <main> and both load this file, so there is
 * one place to change and no second copy to drift out of step.
 *
 * Two rules keep it that way:
 *   1. Every selector is scoped to .wiki-page. The sheet is inert anywhere
 *      else, so it can be loaded next to the app's own CSS without leaking.
 *   2. Nothing relies on the surrounding page. Tokens, fonts and the element
 *      defaults that Tailwind's preflight strips (list markers, margins) are
 *      all stated here, because the static pages have no preflight and the app
 *      does — anything left implicit renders differently in the two shells.
 */

.wiki-page {
  /* Local to the article: the app defines its own values for these names and
     the static shell has none at all. */
  --text-main: #1f2328;
  --text-muted: #667078;
  --panel-bg: #ffffff;
  /* The site's soft rule, the same one the app's tables and card dividers use.
     It was a slightly lighter alpha here, which showed as two different greys
     where the article's related-links rule met the site footer's. */
  --divider: #e0e4e5;
  --fixed-accent: #20262a;
  --fixed-bg: rgba(31, 35, 40, 0.055);

  /* Same column and the same gutter as .site-nav-inner and as every page in
     the app, so prose starts on the same line as the logo above it. */
  width: min(100%, var(--page-max, 108rem));
  margin: 0 auto;
  padding: clamp(2.75rem, 5vw, 4.75rem) clamp(1rem, 3.5vw, 4rem) 4rem;

  background: var(--panel-bg);
  color: var(--text-main);
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Inter,
    ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 430;
  line-height: 1.78;
  /* Tabular figures line up the calculators' readout columns; in running prose
     they only set the digits wider. */
  font-variant-numeric: normal;
}

/* The app points every unqualified border at its own token and the static
   pages fall back to currentColor. Neither is visible (these borders are
   0-width) but pinning it keeps the two renderings byte-identical. */
/* .btn is excluded: buttons bring their own border colour from /buttons.css,
   and this rule would otherwise repaint the article's CTA in the prose tint. */
.wiki-page,
.wiki-page *:not(.btn),
.wiki-page *::before,
.wiki-page *::after {
  border-color: var(--divider);
}

/* Maths is the exception, and it has to come after the reset above.
 *
 * The comment above is wrong about one case: these borders are not all 0-width.
 * KaTeX draws fraction bars, \overline, \underline, \sqrt overbars and array
 * rules as real CSS borders and leaves them at currentColor so they take the
 * surrounding text colour. The reset repainted every one of them in the
 * hairline divider grey, so each fraction bar was #e0e4e5 on white — the colour
 * of a table rule, at 0.5px, where it should have been ink.
 *
 * Borders inside a formula are part of the notation, not furniture.
 */
.wiki-page .katex,
.wiki-page .katex * {
  border-color: currentColor;
}

/* ---------------------------------------------------------------- elements */

.wiki-page h1 {
  color: var(--text-main);
  font-family: inherit;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 660;
  line-height: 1.08;
  /* !important clears the app's global letter-spacing reset, which is more
     specific than this rule. */
  letter-spacing: -0.025em !important;
  margin: 0 0 0.5rem;
}

.wiki-page h2 {
  color: var(--text-main);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 660;
  letter-spacing: -0.01em;
  margin: 4rem 0 0.5rem;
  scroll-margin-top: 5rem;
}

.wiki-page h3 {
  color: var(--text-main);
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 600;
  margin: 1.75rem 0 0.35rem;
}

.wiki-page p {
  margin: 0.95rem 0;
}

/* Preflight strips the marker and the indent; the static pages keep the UA
   defaults. Stated here so a bulleted list looks the same in both. */
.wiki-page ul {
  list-style: disc;
  margin: 0.5rem 0 0.5rem 1.2rem;
  padding: 0;
}

.wiki-page ol {
  list-style: decimal;
  margin: 0.5rem 0 0.5rem 1.2rem;
  padding: 0;
}

.wiki-page li {
  margin: 0.3rem 0;
}

.wiki-page a:not(.article-card):not(.cta) {
  color: var(--fixed-accent);
  /* With no accent colour, links no longer stand out by hue alone. A quiet
     underline identifies them without reintroducing colour. Cards and buttons
     are excluded — they read as chrome, not prose. */
  text-decoration: underline;
  text-decoration-color: rgba(31, 35, 40, 0.32);
  text-underline-offset: 2px;
}

.wiki-page a:not(.article-card):not(.cta):hover {
  text-decoration-color: var(--text-main);
}

.wiki-page table {
  border-collapse: collapse;
  width: 100%;
  margin: 2.25rem 0;
  font-size: 0.95rem;
}

.wiki-page th,
.wiki-page td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}

.wiki-page th {
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.85rem;
}

.wiki-page td:first-child {
  color: var(--text-main);
  white-space: nowrap;
}

.wiki-page footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--divider);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ page furniture */

.wiki-page .crumb {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.wiki-page .hero,
.wiki-page .guide-hero {
  max-width: none;
  margin-bottom: 1.75rem;
}

.wiki-page .hero {
  display: grid;
  gap: 1.5rem;
  align-items: end;
}

.wiki-page .lede {
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.74;
  margin: 1rem 0 0;
  /* Fewer characters than the body: a standfirst reads better a little narrow,
     and the larger size means the same pixel width already carries fewer. */
  max-width: 48ch;
}

.wiki-page .article-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0.35rem 0 2rem;
}

/* ------------------------------------------------------------- wiki index */

.wiki-page .search-wrap {
  width: 100%;
  max-width: 520px;
}

.wiki-page label {
  display: block;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.45rem;
}

.wiki-page .search {
  width: 100%;
  height: 3rem;
  border: 1px solid var(--divider);
  border-radius: 2px;
  background: var(--panel-bg);
  color: var(--text-main);
  padding: 0 0.95rem;
  font: inherit;
  outline: none;
}

.wiki-page .search:focus {
  border-color: rgba(31, 35, 40, 0.28);
  outline: 1px solid rgba(31, 35, 40, 0.18);
  outline-offset: 1px;
}

.wiki-page .wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

/* The card is an <a> wrapping its whole contents, and text-decoration
   propagates to descendants — underlining it would strike through the
   heading, body copy and tags too. */
.wiki-page a.article-card {
  color: var(--fixed-accent);
  text-decoration: none;
}

.wiki-page .article-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--divider);
  border-radius: 2px;
  background: var(--panel-bg);
  padding: 1.15rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.wiki-page .article-card:hover,
.wiki-page .article-card:focus-visible {
  border-color: var(--fixed-accent);
}

.wiki-page .article-card:active {
  transform: translateY(1px);
}

.wiki-page .article-card:focus-visible {
  outline: 3px solid rgba(32, 32, 30, 0.24);
  outline-offset: 3px;
}

.wiki-page .article-card[hidden] {
  display: none;
}

/* Section headings scale up, card headings do not. */
.wiki-page .article-card h2 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.wiki-page .article-card p {
  margin: 0;
  color: var(--text-main);
}

.wiki-page .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.wiki-page .tag {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 0 0.55rem;
  color: var(--text-muted);
  background: var(--fixed-bg);
  font-family: inherit;
  font-size: 0.72rem;
}

.wiki-page .open {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2.25rem;
  font-weight: 700;
}

/* --------------------------------------------------------- article layout */

/* An article is narrower than the rest of the site.
 *
 * .wiki-page is 108rem wide to line its left edge up with the nav logo, which
 * is right for the index — a grid of cards that uses the width. An article does
 * not: the prose is capped at its measure and the contents box is at most
 * 360px, so on a wide screen the 1fr column held about 560px of nothing between
 * the two. Sizing the container to what an article actually needs closes that
 * hole and centres the page instead.
 *
 * The cost is that the h1 no longer starts on the same vertical as the logo
 * above it. That alignment is worth less than a column of empty space in the
 * middle of the reading position.
 */
.wiki-page:has(.guide-grid) {
  --page-max: 74rem;
}

.wiki-page .guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.wiki-page .guide-body {
  min-width: 0;
}

/* Prose measure. 780px at 17px ran to about 92 characters a line, well past the
   60-75 that stays comfortable over a long article — the eye loses the start of
   the next line on the way back. ch tracks the font instead of guessing in
   pixels, and it is deliberately not applied to equations: narrowing those would
   force horizontal scrolling on maths that fits on one line today.

   56ch, not 70ch: ch is the width of "0", and in this stack the digit is 10.8px
   against 8.6px for average lowercase, so a ch buys about 1.26 real characters.
   Measured 71 per line at this value. Recalibrate if the font stack changes. */
.wiki-page .guide-body > h2,
.wiki-page .guide-body > h3,
.wiki-page .guide-body > p,
.wiki-page .guide-body > ul,
.wiki-page .guide-body > ol,
.wiki-page .guide-body > .note,
.wiki-page .guide-body > footer {
  max-width: 56ch;
}

/* The maths column matches the prose measure exactly and the number hangs in
   the 3rem beside it, so equations line up with the text they belong to instead
   of jutting out to a wider bound. The widest equation in the wiki is 509px
   against the 605px this leaves it, so nothing is squeezed; the katex-display
   below still scrolls if a future one is longer. */
.wiki-page .guide-body > .eq {
  max-width: calc(56ch + 3rem);
}

.wiki-page .guide-body > h2:first-child {
  margin-top: 0;
}

.wiki-page .toc {
  background: var(--panel-bg);
  border: 1px solid var(--divider);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin: 0;
  line-height: 1.6;
}

.wiki-page .toc strong {
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* No markers, following the encyclopaedia convention the articles are written
   to: sections are named, not numbered. The list stays an <ol> because document
   order is meaningful — it is the reading order of the article — but numbering
   it here would reintroduce the mismatch this box used to have, where the
   sidebar counted 1-4 and the headings it pointed at carried no numbers. */
.wiki-page .toc ol {
  margin: 0.5rem 0 0;
  padding-left: 0;
  list-style: none;
}

.wiki-page .toc li {
  margin: 0.15rem 0;
}

.wiki-page .article-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
}

.wiki-page .article-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}


/* A button, not prose: framed like every other box and without the underline
   that would otherwise run through its label. */
/* Size, border and weight come from .btn--primary in /buttons.css; only the
   article-flow bits belong to the article. */
.wiki-page .cta {
  align-self: flex-start;
  margin: 1rem 0;
  text-decoration: none;
}

.wiki-page .note,
.wiki-page .empty,
.wiki-page .wiki-error {
  border: 1px solid var(--divider);
  border-radius: 2px;
  color: var(--text-muted);
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------- maths */

/* Monospace here is deliberate: this is notation, not UI text. No tinted chip
   behind it — the face alone carries the distinction. */
.wiki-page code,
.wiki-page .f,
.wiki-page .formula {
  color: var(--text-main);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wiki-page .f {
  display: inline-block;
  margin: 0.15rem 0;
}

.wiki-page .formula {
  display: inline-block;
  margin: 0.35rem 0;
}

/* Numbered display equations.
 *
 * Pure CSS on purpose. The same article is rendered twice — as this static page
 * and by WikiPage.tsx, which injects main.innerHTML through
 * dangerouslySetInnerHTML. That never executes scripts, so anything done with
 * JavaScript here would number the equations on one rendering and not the other.
 * A counter costs nothing and is right in both.
 *
 * The counter also renumbers itself when an equation is inserted, which the
 * hand-written references in the prose do not — see .eqref below.
 */
.wiki-page .guide-body {
  counter-reset: eq;
}

.wiki-page .eq {
  /* Two columns rather than a block, so the tag sits outside the maths and the
     horizontal scroll below stays on the maths alone. With the tag inside the
     scrolling box it slid out of view on a narrow screen. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  align-items: center;
  counter-increment: eq;
  color: var(--text-main);
  padding: 1.15rem 0;
  margin: 1rem 0;
}

.wiki-page .eq::after {
  content: '(' counter(eq) ')';
  color: var(--text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.wiki-page .eq .katex-display {
  margin: 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}

/* A reference to an equation from the running prose: "substituting (3)".
 *
 * The number here is written into the HTML, because CSS cannot read a counter
 * from another element (target-counter has no browser support). So the tag on
 * the equation renumbers automatically and this does not — if you insert an
 * equation, re-check the references that follow it. There are few enough to
 * grep for: `class="eqref"`.
 */
.wiki-page .eqref {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Applies to inline chips as well as display equations. Left to itself KaTeX
   sets 1.21em, which reads noticeably larger than the surrounding prose. */
.wiki-page .katex {
  font-size: 1.08em;
}

/* --------------------------------------------------------------- figures */

.wiki-page figure.fig {
  margin: 2.25rem 0;
}

.wiki-page figure.fig svg {
  width: 100%;
  height: auto;
  display: block;
  /* Preflight sets this on every svg; moot next to display:block, pinned so
     the two renderings stay identical. */
  vertical-align: middle;
  background: var(--panel-bg);
  border: 1px solid var(--divider);
  border-radius: 2px;
}

.wiki-page figure.fig figcaption {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.6rem;
  text-align: center;
}

.wiki-page .fig text {
  fill: var(--text-muted);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

.wiki-page .fig .sym {
  fill: var(--text-main);
  font-style: italic;
  font-size: 15px;
}

.wiki-page .fig .acc {
  fill: var(--fixed-accent);
  font-style: italic;
  font-size: 15px;
}

.wiki-page .fig .beam {
  stroke: var(--fixed-accent);
  stroke-width: 2;
  fill: none;
}

.wiki-page .fig .beamfill {
  fill: color-mix(in srgb, var(--fixed-accent) 12%, transparent);
  stroke: none;
}

.wiki-page .fig .axis {
  stroke: color-mix(in srgb, var(--text-main) 28%, transparent);
  stroke-width: 1.5;
}

.wiki-page .fig .dash {
  stroke: var(--text-muted);
  stroke-dasharray: 4 4;
  opacity: 0.6;
  fill: none;
}

.wiki-page .fig .lead {
  stroke: var(--fixed-accent);
  stroke-width: 1.4;
  fill: none;
}

.wiki-page .fig .lens {
  fill: color-mix(in srgb, var(--fixed-accent) 14%, transparent);
  stroke: var(--fixed-accent);
  stroke-width: 1.5;
}

/* ----------------------------------------------------------- breakpoints */

@media (min-width: 768px) {
  .wiki-page .hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  }

  .wiki-page .search-wrap {
    justify-self: end;
  }
}

@media (min-width: 1024px) {
  .wiki-page .guide-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .wiki-page .guide-body {
    order: 1;
  }

  .wiki-page .toc {
    order: 2;
    position: sticky;
    top: 5.5rem;
  }
}

@media (max-width: 639px) {
  .wiki-page h1 {
    font-size: 1.55rem;
  }

  .wiki-page .lede {
    font-size: 1rem;
  }

  .wiki-page table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .wiki-page th,
  .wiki-page td {
    padding: 0.45rem 0.5rem;
  }

  /* The equation tag costs a fixed 3rem of a 320px screen. Move it above the
     maths rather than squeezing what is already the tightest element here. */
  .wiki-page .eq {
    grid-template-columns: minmax(0, 1fr);
  }

  .wiki-page .eq::after {
    order: -1;
    text-align: left;
    margin-bottom: 0.35rem;
  }
}