/* Layout and type metrics follow the reference blog:
   root 110% (= 17.6px) with a 47.7em column, 1.5 line-height, plain
   system sans-serif, #222 on #fff. */

:root {
  /* page */
  --measure: 47.7em;
  --bg: #fff;
  --ink: #222;
  --head: #333;
  --muted: #666;
  --link: #2e7d32;
  --link-hover: #1b5e20;
  --rule: #ddd;           /* table and control borders */
  --quote-rule: #fa6432;  /* blockquote rule */
  --box-rule: #222;       /* rule above a box */
  --box-bg: #fafafa;
  --mul-head-bg: #f4f4f4; /* first row and column of a multiplication table */

  /* figures — common.js reads these */
  --fig-ink: #222;
  --fig-grid: #e6e6e6;
  --fig-axis: #bbb;
  --fig-dim: #999;
  --fig-faint: #dcdcdc;
  --fig-a: #FF9200;
  --fig-b: #36B24D;
  --fig-c: #0072B2;      /* q i, the image of the second basis vector */
  --fig-image: #f0c68a;
  --fig-mesh-back: #ececec;
  --fig-mesh-front: #c9c9c9;

  color-scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  height: 100%;
  font: 90%/1.5 sans-serif;
  word-wrap: break-word;
  margin: 0 auto;
  padding: 1.5em;
}

@media (min-width: 768px) {
  html {
    font-size: 110%;
    max-width: var(--measure);
  }
}

body {
  background: var(--bg);
  color: var(--ink);
}

/* room to scroll the last section clear of the bottom of the window */
.container { padding-bottom: 60vh; }

/* ---------- header ---------- */

header {
  display: flex;
  justify-content: flex-end;
  /* the title's own 2.5rem top margin collapses into this, so this value is
     the whole gap */
  margin-bottom: 7rem;
}

/* not a link — plain text, so it takes no link colour */
.logo { color: var(--muted); }

a {
  color: var(--link);
  text-decoration: none;
}

a:hover, a:focus, a:active {
  text-decoration: underline;
  color: var(--link-hover);
}

/* ---------- headings and text ---------- */

h1, h2, h3, h4 {
  margin: 2.5rem 0 1.5rem 0;
  line-height: 1.25;
  color: var(--head);
}

.title {
  font-size: 2.2em;
  text-align: center;
  margin-bottom: 3.5rem;
}

.subtitle {
  font-weight: normal;
  font-size: 0.75em;
  color: var(--muted);
}

h2 { font-size: 1.5em; }

p {
  margin: 1em 0;
  line-height: 1.5;
}

em { font-style: italic; }

ol, ul { margin: 1em 1em 1em 2em; }
ol li p, ul li p { margin: 0; }

blockquote {
  padding-left: 1em;
  font-style: italic;
  border-left: solid 1px var(--quote-rule);
}

/* ---------- table of contents ---------- */

.toc {
  margin: 2.5rem 0;
}

.toc::before {
  content: "Contents";
  display: block;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5em;
}

.toc ol {
  margin: 0 0 0 1.4em;
  padding: 0;
}

.toc li {
  margin: 0.2em 0;
  line-height: 1.45;
}

/* ---------- boxes ---------- */

.box-wrap { margin: 2rem 0; }

.box {
  border: none;
  border-left: 3px solid var(--box-rule);
  border-radius: 0;
  background-color: var(--box-bg);
  padding: 1rem 1.25rem 1.1rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.box-label {
  display: block;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.box > :last-child { margin-bottom: 0; }
.box > :first-child { margin-top: 0; }

/* label running into the statement, rather than sitting above it */
.box-label.inline {
  display: inline;
  margin: 0 0.4em 0 0;
}

/* ---------- proofs ---------- */

.proof {
  background: #f4f4f4;
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: 0.97rem;
}

.proof > :first-child { margin-top: 0; }
.proof > :last-child { margin-bottom: 0; }

.proof-label {
  font-style: italic;
  font-weight: 600;
  margin-right: 0.4em;
}

.qed {
  text-align: right;
  color: var(--muted);
  margin-top: 0.6em;
}

/* ---------- closing ---------- */

/* Set off from the argument like the foot of a letter: a rule, some air, the
   thanks in the hand of an aside, and the name signed under it. */
.signoff {
  margin-top: 4.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

.signoff p { margin: 0; font-style: italic; }

.signature {
  margin-top: 1.6rem !important;
  text-align: right;
  font-style: normal !important;
  color: var(--ink);
}

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

/* Flush with the text column. */
.fig {
  width: 100%;
  margin: 1.5em 0;
  padding: 0;
  /* so a figure linked to from the text does not land jammed against the top
     of the window */
  scroll-margin-top: 2rem;
}

.canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  touch-action: none;
  cursor: crosshair;
}

.fig-pair {
  display: flex;
  gap: 14px;
}

/* min-width:0 is essential: a canvas element's intrinsic width is set to
   CSS pixels x devicePixelRatio, and a flex item's automatic minimum size
   refuses to shrink below that — so on a 2x display the two panels would each
   demand the full row width and overflow.
   Direct children, so a pair can hold either bare canvases or .fig-cell
   wrappers that carry a caption of their own. */
.fig-pair > * { flex: 1 1 0; min-width: 0; }

.canvas-square { aspect-ratio: 1 / 1; }

/* a lone square panel, the same size as one half of a .fig-pair */
.canvas-half {
  width: calc(50% - 7px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* On a phone every panel gets the whole column. A pair stops sitting side by
   side and stacks, which already gives each half the full width; the lone
   half width panels have to be told, or they stay at half of an already narrow
   screen. Labels are drawn at a fixed pixel size on the canvas, so a panel at
   half width is not just small, it is small with oversized text on it. */
@media (max-width: 560px) {
  .fig-pair { flex-direction: column; }
  .canvas-half { width: 100%; }
}

figcaption, .fig-cap {
  font-family: monospace, monospace;
  font-size: 0.75em;
  text-align: center;
  color: grey;
  margin-top: 0.5em;
  line-height: 1.5;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: 0.6em;
  font-family: monospace, monospace;
  font-size: 0.75em;
  color: grey;
}

.controls input[type="range"] {
  flex: 0 1 300px;
  accent-color: var(--fig-a);
}

.controls output { font-variant-numeric: tabular-nums; min-width: 3.5em; }

/* ---------- multiplication tables ---------- */
/* NB: do not call this .mtable — that is KaTeX's own class for
   aligned environments, and styling it shrinks every equation. */

.mul-table {
  border-collapse: collapse;
  margin: 1.5em auto;
  font-size: 0.95rem;
  text-align: center;
}

.mul-table th,
.mul-table td {
  border: 1px solid var(--rule);
  padding: 0.2em 0;
  width: 2.7em;
  font-weight: 400;
  color: var(--muted);
  /* html sets word-wrap: break-word, which would split "-e13" over two
     lines rather than let the table scroll. */
  white-space: nowrap;
}

/* The first row and column carry the two factors rather than products, so
   they get a tint to set them off from the body of the table. */
.mul-table th {
  font-weight: 600;
  color: var(--ink);
  background: var(--mul-head-bg);
}
.mul-table td.given { color: var(--ink); }

.mul-table input {
  width: 2.1em;
  border: none;
  background: none;
  font: inherit;
  text-align: center;
  color: var(--ink);
  padding: 0;
}

.mul-table input:focus { outline: 2px solid var(--fig-a); outline-offset: 1px; }
.mul-table input.ok  { color: #1b7f3b; font-weight: 600; }
.mul-table input.bad { color: #b3261e; }

.mt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: -0.5em;
  font-family: monospace, monospace;
  font-size: 0.75em;
  color: grey;
}

.mt-controls button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.3em 0.8em;
  cursor: pointer;
}

.mt-controls button:hover { border-color: var(--muted); }

.mt-controls button:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--rule);
}

.mt-controls button.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em;
  width: 2.1em;
  color: var(--muted);
}

.mt-controls button.icon:hover { color: var(--ink); }

.mt-controls button.icon svg { width: 1.15em; height: 1.15em; display: block; }

.mt-status { margin-left: 0.4em; }

/* the wider e-numbered table, and its walkthrough */
.mul-table-wide { font-size: 0.85rem; }
.mul-table-wide th,
.mul-table-wide td { width: 3.1em; padding: 0.3em 0; }

/* 17 columns; narrow enough to fit the column, and scrollable when it can't */
.mul-table-16 { font-size: 0.68rem; }
.mul-table-16 th,
.mul-table-16 td { width: 2.9em; padding: 0.25em 0; }

.mtable-wrap { overflow-x: auto; }

.mul-table td.hl  { background: #fff2dd; color: var(--ink); }
.mul-table td.hl2 { background: #e5e5e5; }
.mul-table td.bad { background: #fdeae8; color: #b3261e; }

.mt-note {
  display: block;
  max-width: 34em;
  margin: 0.9em auto 0;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* ---------- math ---------- */

/* KaTeX's own default is 1.21em, which is what renders. Set a value here to
   override it — style.css is loaded after katex.min.css, so this wins. */
/* .katex { font-size: 1.21em; } */

/* A display equation wider than the column would otherwise push the whole
   page sideways on a phone. Let the equation scroll instead. */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.3em 0;
}

/* ---------- numbered equations ---------- */

/* Three columns so the equation stays centred on the page rather than on the
   space left over beside the tag. Only equations referred to elsewhere get a
   number, so the count is of references, not of displays, and the numbers have
   to stay in document order.

   Use a div when the display stands on its own and a span when it sits inside
   a paragraph, since a div inside a p would close the paragraph early. */
.eq-numbered {
  display: grid;
  grid-template-columns: 3em 1fr 3em;
  align-items: center;
  scroll-margin-top: 2rem;
}

/* Anything that is not the tag, because KaTeX wraps what it renders in a
   span of its own and the .katex-display lands one level further down.
   min-width:0 for the same reason as .fig-pair: without it a wide equation
   refuses to shrink into its track and pushes the tag off the page, instead
   of scrolling inside its own box. */
.eq-numbered > *:not(.eq-tag) {
  grid-column: 2;
  min-width: 0;
}

.eq-tag {
  grid-column: 3;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* so a reader arriving from a reference can see which one they landed on */
.eq-numbered:target .eq-tag { color: var(--link); }

/* A display with no number that is still linked to from the text. It needs
   nothing but the anchor and somewhere to land. */
.eq-anchor { scroll-margin-top: 2rem; }

/* .box zeroes the bottom margin of its last child, but with the display now
   wrapped for numbering that child is the wrapper, and KaTeX's own margin
   underneath the equation survives as a gap. Reach through to it. */
.box > .eq-numbered:last-child .katex-display { margin-bottom: 0; }