/* The character grid.
 *
 * This is what separates a terminal from "a dark theme with a monospace font":
 * every measurement is in character cells. Horizontal insets are multiples of
 * --cw (one character), vertical rhythm is multiples of --lh (one row). Frame
 * corners then land on cell boundaries instead of near them.
 *
 * FONTS AND THE ch UNIT. 1ch is the width of "0" in the current font, so a
 * webfont swapping in mid-load changes every measurement on the page at once
 * and visibly tears the layout. The usual advice, font-display: swap, is
 * exactly wrong here. This stylesheet therefore uses a system monospace stack,
 * which cannot tear because nothing loads. When a subsetted OFL face is
 * self-hosted later it must use font-display: optional, a preload link, and a
 * size-adjust on the fallback so the two agree on the width of a cell.
 */

:root {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", monospace;

  --cw: 1ch;            /* one character cell, horizontally */
  --lh: 1.5rem;         /* one row */
  --measure: 80ch;      /* the classic terminal width, and a good measure */

  --pad-x: calc(var(--cw) * 2);
  --pad-y: var(--lh);
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem);
  line-height: 1.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* color-scheme tells the UA which scrollbars, form controls and text caret to
 * draw. It must be switched on exactly the conditions the palette switches on.
 *
 * The obvious `color-scheme: light dark` is wrong here: it says "either is
 * fine", and the UA then makes its own choice, which need not agree with
 * prefers-color-scheme. A browser that reports a light preference can still
 * resolve the canvas to dark, painting UA surfaces dark behind author styles
 * that are entirely light. Naming one scheme per state removes that freedom. */
html {
  background: var(--bg);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

body {
  margin: 0;
  /* Explicit, never transparent: the page must carry its own ground rather
   * than borrowing whatever is behind it. */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-variant-ligatures: none;   /* a terminal shows the characters it has */
  -webkit-text-size-adjust: 100%;
}

/* -- rhythm ---------------------------------------------------------------- */

p, ul, ol, dl, pre, table, figure, blockquote {
  margin-block: 0 var(--lh);
}

h1, h2, h3 {
  margin-block: calc(var(--lh) * 2) var(--lh);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--fg-strong);
}

h1 { margin-block-start: 0; }

/* Headings read as shell comments -- the marker is generated, so it is never
 * copied with the text and never announced by a screen reader. */
h2::before,
h3::before {
  content: "# ";
  color: var(--fg-dim);
}
h3::before { content: "## "; }

/* -- links ----------------------------------------------------------------- */

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

a:hover { text-decoration-thickness: 2px; }

/* An external link is verifiable by clicking it -- the mark says so. */
a[target="_blank"]::after {
  content: " \2197";
  text-decoration: none;
}

/* -- focus ----------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* -- utilities ------------------------------------------------------------- */

/* Visually hidden, but present in the accessibility tree. This is what lets the
 * ASCII banner be decoration while the heading still has honest text. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--cw);
  top: calc(var(--lh) * -3);
  z-index: 10;
  padding: calc(var(--lh) / 4) var(--cw);
  background: var(--bg-raise);
  color: var(--fg-strong);
  border: 1px solid var(--rule);
}

.skip:focus { top: calc(var(--lh) / 4); }

.dim    { color: var(--fg-dim); }
.strong { color: var(--fg-strong); }
.warn   { color: var(--warn); }

/* Wide content scrolls inside its own box; the page itself never scrolls
 * sideways. */
.scroll-x {
  overflow-x: auto;
  max-width: 100%;
}