/* GENERATED FILE — do not edit.
 * Written from src/docs/tokens.ts by scripts/docs/build.ts.
 *
 * Both schemes are declared here and nowhere else, so the contrast the
 * accessibility check computes is the contrast a page renders with. There is no
 * theme toggle: the dark scheme is selected solely by prefers-color-scheme (D6),
 * because a stored preference would need client storage that R1.3 forbids.
 */
:root {
  color-scheme: light dark;
  --docs-surface: #F7F5EE; /* page background — warm paper in light, near-black in dark */
  --docs-surface-elevated: #FDFCF7; /* card, callout and code-block background */
  --docs-surface-alt: #EFEEE4; /* the navigation rail */
  --docs-content: #0E0E10; /* body text and headings */
  --docs-content-muted: #3D3D40; /* secondary prose */
  --docs-content-subtle: #5C5C5A; /* metadata lines, captions, rail section labels */
  --docs-accent: #6B3459; /* links and the focus ring — Omphalis plum */
  --docs-accent-on: #F7F5EE; /* text on an accent-filled surface */
  --docs-border: #E4E3DC; /* rules and container edges (non-text); the marketing 8% alpha, pre-composited */
}

@media (prefers-color-scheme: dark) {
  :root {
    --docs-surface: #0E0E10; /* page background — warm paper in light, near-black in dark */
    --docs-surface-elevated: #1C1C1E; /* card, callout and code-block background */
    --docs-surface-alt: #141416; /* the navigation rail */
    --docs-content: #F7F5EE; /* body text and headings */
    --docs-content-muted: #D4D2CA; /* secondary prose */
    --docs-content-subtle: #9A9A95; /* metadata lines, captions, rail section labels */
    --docs-accent: #C885B0; /* links and the focus ring — Omphalis plum */
    --docs-accent-on: #0E0E10; /* text on an accent-filled surface */
    --docs-border: #1E1E1F; /* rules and container edges (non-text); the marketing 8% alpha, pre-composited */
  }
}

/* R13.13 — suppress every non-essential animation and transition. Deliberately
 * a universal selector: an enumerated list stops covering whatever is added
 * next, and this site ships almost no motion for it to cost anything. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Faces — self-hosted on the Docs_Origin (R1.10). Same families as the
 * marketing site: Fraunces for display, Inter for body, JetBrains Mono for code.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Document
 * ------------------------------------------------------------------------- */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--docs-surface);
  color: var(--docs-content);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  /* A long identifier must not force horizontal scrolling at 320 CSS px (R13.12). */
  overflow-wrap: break-word;
  /* Rail beside content. One column until there is room for two, so the narrow
   * case needs no toggle — which it could not have, since a toggle needs script. */
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  grid-template-areas:
    "banner"
    "rail"
    "main"
    "footer";
}

@media (min-width: 60rem) {
  body {
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-areas:
      "rail banner"
      "rail main"
      "rail footer";
  }
}

/* ---------------------------------------------------------------------------
 * Rail — the navigation landmark. Always expanded: a collapse state would need
 * storage R1.3 forbids.
 * ------------------------------------------------------------------------- */
.docs-rail {
  grid-area: rail;
  background: var(--docs-surface-alt);
  border-bottom: 1px solid var(--docs-border);
  padding: 1.5rem 1.25rem 1.75rem;
}

@media (min-width: 60rem) {
  .docs-rail {
    border-bottom: 0;
    border-inline-end: 1px solid var(--docs-border);
    /* Sticky rather than fixed: fixed removes it from the flow and a long rail
     * then becomes unreachable at 256% zoom. */
    position: sticky;
    top: 0;
    /* Full viewport height so the rail's surface colour spans the page rather than
     * ending wherever its last link happens to fall, which read as a rendering fault.
     * Scrolls internally once the section list outgrows the viewport. */
    height: 100vh;
    overflow-y: auto;
    align-self: start;
    /* Full viewport height, not the height of its own content: with align-self
     * start the rail's surface stopped partway down the page and read as an
     * unfinished block. */
    height: 100vh;
    overflow-y: auto;
  }
}

.docs-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

/* Visible to a screen reader, not to the eye: the placeholder carries the label visually, and a
 * duplicated visible label in a narrow rail costs a line for nothing. */
.docs-search-label {
  /* Visually hidden without a fixed pixel size: clip-path does the hiding, so R13.12's
   * no-fixed-width rule stays literally true. */
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  inline-size: 1ch;
  block-size: 1ch;
}

.docs-search-input {
  flex: 1 1 8rem;
  min-inline-size: 0;
  padding: 0.375rem 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--docs-content-strong);
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 6px;
}

.docs-search-input:focus-visible {
  outline: 2px solid var(--docs-accent);
  outline-offset: 1px;
}

.docs-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--docs-content-subtle);
  background: var(--docs-surface-alt);
  border: 1px solid var(--docs-border);
  border-radius: 6px;
  cursor: pointer;
}

.docs-search-trigger kbd {
  font: inherit;
  text-transform: none;
}

/* The palette. Hidden by the "hidden" attribute until the script opens it, so a reader without the
 * script never sees an empty overlay. */
.docs-palette[hidden] {
  display: none;
}

.docs-palette {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 10vh 1rem 1rem;
  background: color-mix(in srgb, var(--docs-content-strong) 40%, transparent);
}

.docs-palette-panel {
  inline-size: min(36rem, 100%);
  max-block-size: 70vh;
  overflow-y: auto;
  padding: 0.75rem;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 10px;
}

.docs-palette-input {
  inline-size: 100%;
  padding: 0.625rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--docs-content-strong);
  background: var(--docs-surface-alt);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
}

.docs-palette-status {
  margin: 0.5rem 0 0;
  font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--docs-content-subtle);
}

.docs-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-search-results a,
.docs-palette-result a {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  text-decoration: none;
}

.docs-search-result-title { display: block; font-weight: 500; color: var(--docs-content-strong); }
.docs-search-result-stage {
  display: block;
  font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--docs-content-subtle);
}
.docs-search-result-answer { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--docs-content-muted); }

.docs-palette-results {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.docs-palette-result a {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  text-decoration: none;
}

.docs-palette-result a:hover,
.docs-palette-result a:focus-visible,
/* The keyboard selection. Focus stays in the input, so the selected row needs its own visible state —
 * without it, arrow keys would move something the reader cannot see. */
.docs-palette-result a.is-selected {
  background: var(--docs-surface-alt);
}

.docs-palette-result a.is-selected {
  outline: 2px solid var(--docs-accent);
  outline-offset: -2px;
}

/* No scrolling behind the overlay: a modal the page moves underneath feels broken even when every key
 * is handled correctly. */
.docs-palette-open,
.docs-palette-open body {
  overflow: hidden;
}

.docs-palette-result-title {
  display: block;
  font-weight: 500;
  color: var(--docs-content-strong);
}

.docs-palette-result-stage {
  display: block;
  font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--docs-content-subtle);
}

.docs-palette-result-answer {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--docs-content-muted);
}

.docs-rail-mark-image {
  /* 1.25rem, which is the app's h-5 w-5 (20px) at default text size — but in rem rather than px so
   * it grows with the reader's text setting instead of shrinking against it at 200% zoom. That also
   * keeps R13.12's no-fixed-width rule literally true; the rule is aimed at layout containers, and
   * satisfying it exactly rather than arguing for an exemption costs nothing here.
   *
   * The source is 512px square and downscaled by the browser: the same file the app ships, kept
   * byte-identical so the two marks cannot drift. */
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.docs-rail-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Fraunces Variable", Fraunces, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--docs-content);
  text-decoration: none;
  margin-bottom: 0.25rem;
}

.docs-rail-sub {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--docs-content-subtle);
  margin-bottom: 1.75rem;
}

.docs-rail ul {
  list-style: none;
  padding: 0;
}

.docs-rail > nav > ul > li {
  margin-bottom: 0.875rem;
}

.docs-rail a {
  display: block;
  padding: 0.1875rem 0;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--docs-content);
}

.docs-rail a:hover {
  color: var(--docs-accent);
}

.docs-rail a[aria-current="page"] {
  color: var(--docs-accent);
  font-weight: 600;
}

.docs-rail details {
  margin-top: 0.125rem;
}

.docs-rail summary {
  cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--docs-content-subtle);
  padding: 0.25rem 0;
}

.docs-rail details ul {
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--docs-border);
  margin-top: 0.25rem;
}

.docs-rail details a {
  font-size: 0.875rem;
  color: var(--docs-content-muted);
}

/* ---------------------------------------------------------------------------
 * Banner, main, footer
 * ------------------------------------------------------------------------- */
.docs-banner {
  grid-area: banner;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  /* Load-bearing: without it the wordmark and the sign-up link render as one run
   * of text ("Omphalis documentationCreate an account"). */
  gap: 0.5rem 1.5rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--docs-border);
}

.docs-banner-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--docs-content-subtle);
}

/* The one filled control on the site. */
.docs-signup {
  background: var(--docs-accent);
  color: var(--docs-accent-on);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4375rem 0.875rem;
  border-radius: 5px;
}

.docs-main {
  grid-area: main;
  max-width: 70ch;
  padding: 3rem clamp(1.25rem, 4vw, 3rem) 4rem;
}

.docs-footer {
  grid-area: footer;
  max-width: 70ch;
  border-top: 1px solid var(--docs-border);
  margin: 0 clamp(1.25rem, 4vw, 3rem);
  padding: 1.5rem 0 3rem;
  color: var(--docs-content-subtle);
  font-size: 0.875rem;
}

.docs-footer nav {
  display: flex;
  flex-wrap: wrap;
  /* Same reason as the banner: these must not run together. */
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.75rem;
}

.docs-build {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--docs-content-subtle);
}

/* ---------------------------------------------------------------------------
 * Content — Fraunces for headings, Inter for prose.
 * ------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: "Fraunces Variable", Fraunces, Georgia, serif;
  font-weight: 500;
  color: var(--docs-content);
}

h1 {
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.375rem;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-top: 2.5rem;
  margin-bottom: 0.625rem;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin-top: 1.875rem;
  margin-bottom: 0.375rem;
}

h4,
h5,
h6 {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
}

.docs-body {
  color: var(--docs-content-muted);
}

.docs-body p,
.docs-body ul,
.docs-body ol,
.docs-body figure,
.docs-body blockquote,
.docs-body .docs-table-scroll {
  margin-bottom: 1.25rem;
}

.docs-body ul,
.docs-body ol {
  padding-inline-start: 1.375rem;
}

.docs-body li + li {
  margin-top: 0.4375rem;
}

.docs-body strong {
  color: var(--docs-content);
  font-weight: 600;
}

.docs-body blockquote {
  border-inline-start: 2px solid var(--docs-accent);
  padding-inline-start: 1rem;
  font-family: "Fraunces Variable", Fraunces, Georgia, serif;
  font-size: 1.0625rem;
}

.docs-reviewed {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--docs-content-subtle);
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
 * Table of contents
 * ------------------------------------------------------------------------- */
.docs-toc {
  background: var(--docs-surface-elevated);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 2.25rem;
}

.docs-toc-heading {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--docs-content-subtle);
  margin: 0 0 0.5rem;
  font-weight: 400;
}

.docs-toc ul {
  list-style: none;
  padding: 0;
  font-size: 0.9375rem;
}

.docs-toc li + li {
  margin-top: 0.3125rem;
}

.docs-toc li[data-level="3"] {
  padding-inline-start: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Interactive
 * ------------------------------------------------------------------------- */
a {
  color: var(--docs-accent);
  text-underline-offset: 0.15em;
}

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

/* R13.4 — 3:1 against the adjacent background, in both schemes, kept in view. */
:focus-visible {
  outline: 2px solid var(--docs-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* R13.5 — first focusable element; never display:none, which would remove it
 * from the tab order. */
.docs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--docs-surface-elevated);
  color: var(--docs-content);
  border: 1px solid var(--docs-border);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.docs-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Media — the one place R13.12 permits scrolling in a container.
 * ------------------------------------------------------------------------- */
figure[role="group"] {
  margin-bottom: 1.25rem;
}

/* Illustrations from the Learn edition. Constrained to the measure so a wide screenshot does
 * not break the reading column, and captioned in the metadata face so the caption reads as
 * apparatus rather than as prose. */
.docs-body figure img {
  /* max-width and height are already set by the global "img" rule below — repeating them here
   * would make that rule look optional, and it silently neutralised a mutation used as evidence
   * that the layout tool works. */
  display: block;
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  background: var(--docs-surface-elevated);
}

.docs-body figcaption {
  margin-top: 0.5rem;
  font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--docs-content-subtle);
}

pre {
  background: var(--docs-surface-elevated);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
}

code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

:not(pre) > code {
  background: var(--docs-surface-elevated);
  border: 1px solid var(--docs-border);
  border-radius: 4px;
  padding: 0.1em 0.3em;
  color: var(--docs-content);
}

.docs-table-scroll {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

th,
td {
  border-bottom: 1px solid var(--docs-border);
  padding: 0.5rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--docs-content-subtle);
  font-weight: 400;
}

img {
  max-width: 100%;
  height: auto;
}