/* The three brand faces, self-hosted beside this file (OFL-*.txt beside them). */
@font-face { font-family: "Inter"; src: url("Inter.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("Archivo.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("JetBrainsMono.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

/* == tokens == (the design's own tokens -- colour, space, radius, motion -- are design.css's,
 * loaded after this sheet; what is here is only what it does not define.) */
:root {
  color-scheme: dark;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* == /tokens == */

* { box-sizing: border-box; }

html,
body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  /* A long unbroken title (a file:// path, a URL) wraps inside its box instead of running out of it. */
  overflow-wrap: break-word;
}

/* Mono inherits its size. The artboards set every mono size absolutely -- 9.5px, 10px,
   10.5px -- so a 0.86 multiplier here just produced values the design never uses
   (11.5 x 0.86 = 9.89, 10.5 x 0.86 = 9.03, 12 x 0.86 = 10.32). */
code { font-family: var(--mono); }
section[hidden] { display: none !important; }

th,
td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
tbody tr:hover { background: var(--panel-2); }

summary { cursor: pointer; }

/* iOS Safari zooms the whole page on focus of any text input under 16px. */
@media (max-width: 719px) {
  input,
  select,
  textarea { font-size: 16px; }
}

#toasts { position: fixed; right: 10px; bottom: 10px; z-index: 100; display: grid; gap: 7px; max-width: min(440px, 92vw); }
.toast {
  background: var(--panel-2); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent); border-radius: 7px; padding: 9px 13px;
  font-size: 12px; line-height: 1.45; color: var(--ink); max-width: 560px;
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.6);
}
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast .x { float: right; cursor: pointer; color: var(--faint); }

/* Any heading, anywhere: absolute, so nothing falls through to the user agent's 1.5em. */
h1,
h2,
h3,
h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 5px; }