/* ─────────────────────────────────────────────────────────────────────────────
 * MonaspiceNe Nerd Font Mono — shipped with the site, not fetched from anyone.
 *
 * Self-hosted for two reasons: the page renders the same whether or not a
 * third-party font host is reachable, and no visitor's browser has to announce
 * itself to one to read the site.
 *
 * SUBSET, heavily. The Nerd Font patch carries thousands of icon glyphs this
 * site will never draw: the four weights are 9.2MB unsubsetted and 84KB cut to
 * the characters the pages actually contain (plus printable ASCII and a margin
 * of Western punctuation, so new copy cannot tofu). Re-cut with
 * `pyftsubset --text-file=…` whenever the font is updated.
 * ──────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'MonaspiceNe';
  src: url('../fonts/MonaspiceNe-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MonaspiceNe';
  src: url('../fonts/MonaspiceNe-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'MonaspiceNe';
  src: url('../fonts/MonaspiceNe-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MonaspiceNe';
  src: url('../fonts/MonaspiceNe-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* The wordmark's face, and nothing else's — Monaspace KRYPTON, GitHub's mechanical cut of the superfamily the body
   is set in (SIL Open Font License 1.1; the user, 2026-11-14: "use the other logo font that is the github font that
   starts with k"). Its monospaced cut, Medium for the name and Regular for `.app`, each subset to A-Z a-z 0-9, `.`
   and space — about 6KB a weight — with `pyftsubset … --layout-features='kern,liga,calt' --flavor=woff2` from
   ~/.local/share/fonts' MonaspiceKr Nerd Font Mono. `block`, not `swap`: a logo that paints in a fallback face and
   then jumps is worse than one that waits a few milliseconds to appear. A character outside that set means cutting
   it again. Its own family name, so a Krypton installed on the reader's machine is never mistaken for this cut. */
@font-face {
  font-family: 'Monaspace Krypton Wordmark';
  src: url('../fonts/MonaspiceKr-Wordmark-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Monaspace Krypton Wordmark';
  src: url('../fonts/MonaspiceKr-Wordmark-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Compass marketing site — theme variables
 *
 * The site has its own palette, in the shape of a modern product site: a
 * near-black canvas, one amber accent, hairline borders and almost no shadow.
 * `theme.js` owns the two palettes (Dark is the default) and writes every
 * property below onto <html> at parse time, so a switch repaints the page in
 * one go.
 *
 * The values here duplicate the DARK palette deliberately: they are what the
 * page is painted with for the instant before theme.js runs, and getting them
 * wrong is a flash of the wrong colour on every cold load.
 *
 * Screenshots of the app carry the app's own palette; they sit in bordered
 * frames precisely so the two do not have to agree.
 * ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Canvas ─────────────────────────────────────────────────────────────── */
  --bg:            #08090a;   /* the page */
  --surface:       #0e0f11;   /* cards, header, footer */
  --surface-2:     #151719;   /* hover, insets, code */
  --surface-3:     #1c1e21;   /* pressed, chips */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --fg:            #f7f8f8;
  --fg-muted:      #8a8f98;
  --fg-subtle:     #62666d;

  /* ── Lines ──────────────────────────────────────────────────────────────── */
  --border:        #26282d;   /* card + control edges */
  --border-2:      #1b1d20;   /* section rules, dividers */

  /* ── Accent ─────────────────────────────────────────────────────────────── */
  /* MONOCHROME. The accent is a value, not a hue: near-white here, near-black
     in the light theme, with `--accent-fg` the canvas it sits on. A primary
     button is therefore the brightest thing on the page and needs no colour to
     be the obvious next step.
     Nothing else on the site is chromatic. The ONE exception is `--brand-code`
     below, and it is deliberately the only one — a single spot of colour reads
     as a mark, where a second one reads as a palette. */
  /* NOT pure white. `#f7f8f8` against this canvas is 18.7:1, and a solid block
     of it is genuinely uncomfortable — it glares rather than reads as a button.
     Softened to 14:1, which is still far past any legibility threshold.
     WARM rather than a cool grey, and that is the part that matters: a cool grey
     at this luminance reads as a DISABLED control on a cool-black page, where a
     warm off-white reads as paper and stays obviously the primary action. */
  --accent:        #dcd8d0;
  --accent-hover:  #eae7e1;   /* brighter on hover, toward the old white */
  --accent-fg:     #08090a;   /* = --bg, so the button's text is the page */
  --accent-soft:   #1c1e21;

  /* The `code` in the wordmark, and nowhere else. See .bn-code in header.css.
     It is the APP's accent blue, the colour the app marks a picked row, a link
     and its icons with — #539bf5 in its Dark theme (GitHub's Dark Dimmed),
     #0969da in its Light one — so the name is set the way the product is: 7.0:1
     on this canvas, 5.2:1 on the light one. Until 2026-11-14 it was a gradient of
     the dial's three arcs (the user: "i dont like the gradiant colors in the
     text"). Nothing else on the site uses it: a spot of colour in the name reads
     as a mark, colour anywhere else would read as a palette. */
  --brand-code:    #539bf5;

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --danger:        #f16a6a;
  --danger-soft:   #2a1618;
  /* Status is now the only chromatic thing in the interface, which is the point
     of a monochrome accent: a green or a red MEANS something here because
     nothing else is coloured. */
  --ok:            #4cb782;
  --ok-soft:       #0f2419;
  --warn:          #e2b33c;

  --shadow:        rgba(0,0,0,0.55);

  /* Syntax-highlight roles (code blocks + the CLI snippets). */
  --code-bg:  #0e0f11;  --code-fg:  #d5d8dd;
  --hl-kw:   #f4a3a3;   --hl-str:  #9ad6b4;  --hl-num: #a4b5ff;  --hl-cmt: #5c6068;
  --hl-mac:  #c8a6ff;   --hl-attr: #9ad6b4;  --hl-life:#f4a3a3;  --hl-type:#e3c07b;  --hl-key:#9ad6b4;

  /* ── Type ───────────────────────────────────────────────────────────────── */
  /* The same face for body and code. `MonaspiceNe Nerd Font Mono` is the name a
     local install registers under, so a reader who already has it skips the
     download entirely. */
  --font-sans: 'MonaspiceNe', 'MonaspiceNe Nerd Font Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* The wordmark only — see header.css `.brand-name` and the face above. */
  --font-brand: 'Monaspace Krypton Wordmark', 'Monaspace Krypton', ui-monospace, monospace;
  --font-mono: 'MonaspiceNe', 'MonaspiceNe Nerd Font Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Shape + measure ────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --maxw:      1100px;   /* text columns */
  --maxw-wide: 1320px;   /* product shots that break out of the text column */
  --header-h:  64px;
}

:root { color-scheme: dark; }
.theme-light { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `calt` is Monaspace's texture healing — it adjusts the spacing of awkward
     pairs so a monospace face reads as prose. `liga` is switched OFF on purpose:
     its arrow ligatures would silently redraw `->` in the code samples as `→`,
     which is a different thing from what the generator actually writes. */
  font-feature-settings: 'calt' 1, 'liga' 0;
  font-variant-ligatures: no-common-ligatures;
}
body { line-height: 1.62; font-size: 14.5px; letter-spacing: 0; }

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

/* One focus ring for the whole site, and only for keyboard users. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Selection takes `--fg`, not `--accent`. With a monochrome accent those are
   nearly the same colour, and a 40% near-white wash under near-white text is
   unreadable. At 25% it is a grey band the text still sits on top of, and it
   inverts correctly in the light theme because `--fg` does. */
::selection { background: color-mix(in srgb, var(--fg) 25%, transparent); color: var(--fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }