/* SPDX-License-Identifier: AGPL-3.0-only */
/* The docs pages (docs-build.ts): ink and paper, following the system like the sign-in pages, with the
   sign-in card's colours, the app's root size and type roles (D372: sizes in rem, the root 110 % of 16 px on desktop and 16 px on touch) and weights. One small deferred script (doc.js) marks the section being read.
   Mobile-first: one column, a 44 px target for every link row on touch, and the safe areas respected. */
@font-face {
  font-family: "Maple Mono NF";
  src: url("/docs/fonts/roman.latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #101113;
  --fg: #f4f4f5;
  --fg-2: #a1a1aa;
  --line: rgb(255 255 255 / 0.09);
  --wash: rgb(255 255 255 / 0.05);
  /* The product's tone colours, for callouts (doc.css); in the canvas window the theme supplies them. */
  --accent: #7a9cff; --ok: #4ade80; --warn: #e5a93d; --danger: #f87171;
  --hover: rgb(255 255 255 / 0.06);
  /* The app's root size and type sizes (packages/ui/styles.css, D372), written again because these pages load no token file:
     the root is 110 % of 16 px on desktop and 16 px on touch, every size is in rem, and the page reads the body role (the
     one long-reading size) and the eyebrow role for secondary text. */
  --ui-base: 1.1;
  font-size: calc(16px * var(--ui-base));
  --ui-size-body: 0.875rem; --ui-size-label: 0.8125rem; --ui-size-eyebrow: 0.75rem;
  --text-body: var(--ui-size-body); --text-secondary: var(--ui-size-eyebrow); --row: 1.75rem;
  --fw-secondary: 450; --fw-body: 500; --fw-label: 550; --fw-title: 650;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* The app names this one curve --ease-out (style.css); doc.css is shared with the in-app reader and reads that name, so the standalone pages define it too. */
  --ease-out: var(--ease);
  /* The same three transition durations as the app (packages/ui/styles.css, D372); doc.css reads them. */
  --t-press: 120ms; --t-pop: 180ms; --t-panel: 240ms;
  background: var(--bg);
  color: var(--fg);
  font-family: "Maple Mono NF", ui-monospace, monospace;
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f6f4;
    --fg: #18181b;
    --fg-2: #52525b;
    --line: rgb(0 0 0 / 0.1);
    --wash: rgb(0 0 0 / 0.05);
    --accent: #3555c9; --ok: #15803d; --warn: #9a5b00; --danger: #b91c1c;
    --hover: rgb(0 0 0 / 0.05);
  }
}
@media (pointer: coarse) { :root { --ui-base: 1; --ui-size-body: 0.9375rem; --row: 2.75rem; } }

body { margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font-size: var(--text-body); font-weight: var(--fw-body); line-height: 1.7; }
/* The header and the page share one width and one left edge. It holds the text (70 characters) and the contents beside it. */
header, main { box-sizing: border-box; max-width: calc(55rem + 40px); margin: 0 auto; padding-inline: 20px; }
main { container-type: inline-size; }
header { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); }
header a { display: inline-flex; min-height: var(--row); align-items: center; color: var(--fg-2); font-weight: var(--fw-label); text-decoration: none; }
main { padding-top: 24px; padding-bottom: 64px; }

p, ul, ol { margin: 0 0 16px; }
ul, ol { padding-left: 1.4em; }
li { margin: 6px 0; }
strong { font-weight: var(--fw-title); }
a { color: var(--fg); text-decoration-color: var(--fg-2); text-underline-offset: 3px; }