/* Veridor docs theme.
 *
 * Every value below was extracted from the reference with getComputedStyle
 * rather than eyeballed. The canvas matches veridor.org exactly — a reader
 * crossing from the site should not notice a seam — but the TYPE does not:
 * the site is 300-weight display type for scanning, the docs are 400-weight
 * at 1.5 leading for reading. That difference is deliberate on the reference
 * and it is deliberate here.
 *
 * Nothing loads from another origin. Material runs with `font: false`, so the
 * system grotesque renders and no third party learns who read the docs.
 */

:root {
  --vd-canvas: #030710;      /* rgb(3,7,16)     shared with veridor.org */
  --vd-fg: #ffffff;          /* docs body is white, not blue-tinted */
  --vd-muted: #9f9fa0;       /* rgb(159,159,160) */
  --vd-faint: #707071;       /* rgb(112,112,113) */
  --vd-line: #161f34;        /* rgb(22,31,52)   hairline + code fill */
  --vd-card-line: #4f5d73;   /* rgb(79,93,115)  card border */
  --vd-accent: #006ddd;      /* rgb(0,109,221) */
  --vd-accent-soft: #7fc8ff;
  --vd-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- palette -------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--vd-canvas);
  --md-default-bg-color--light: #0a1220;
  --md-default-fg-color: var(--vd-fg);
  --md-default-fg-color--light: var(--vd-muted);
  --md-default-fg-color--lighter: var(--vd-faint);
  --md-default-fg-color--lightest: var(--vd-line);
  --md-primary-fg-color: var(--vd-canvas);
  --md-accent-fg-color: var(--vd-accent-soft);
  --md-typeset-a-color: var(--vd-accent-soft);
  --md-typeset-color: var(--vd-fg);
  --md-code-bg-color: var(--vd-line);
  --md-code-fg-color: var(--vd-fg);
  --md-footer-bg-color: var(--vd-canvas);
  --md-footer-bg-color--dark: var(--vd-canvas);
}
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--dark: var(--vd-canvas);
  --md-accent-fg-color: var(--vd-accent);
  --md-typeset-a-color: var(--vd-accent);
}

/* ---- body: 16px / 24px / 400, the reading setting -------------------- */
.md-typeset {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}
.md-typeset p,
.md-typeset li { color: var(--md-default-fg-color); }

/* ---- headings: 30px/600 h1, not display type ------------------------ */
.md-typeset h1 {
  font-size: 30px; line-height: 1.2; font-weight: 600;
  letter-spacing: -0.025em; color: var(--md-default-fg-color);
  margin: 0 0 0.8rem;
}
.md-typeset h2 {
  font-size: 22px; line-height: 1.3; font-weight: 600;
  letter-spacing: -0.02em; color: var(--md-default-fg-color);
  margin-top: 2.4rem; padding-top: 1.3rem;
  border-top: 1px solid var(--vd-line);
}
[data-md-color-scheme="default"] .md-typeset h2 { border-top-color: #e8e8ea; }
.md-typeset h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--md-default-fg-color); margin-top: 1.8rem;
}
.md-typeset h4 { font-size: 15px; font-weight: 600; }

/* The paragraph directly after the H1 is the page lede. */
.md-typeset h1 + p {
  font-size: 17px; color: var(--vd-muted);
  max-width: 64ch; margin-bottom: 1.8rem;
}
/* #9f9fa0 reads at about 7:1 on the dark canvas and about 2.5:1 on white,
 * which is below AA for body text. The light scheme needs its own grey. */
[data-md-color-scheme="default"] .md-typeset h1 + p { color: #55565a; }

/* ---- announcement bar: the same band veridor.org carries ------------- */
.md-banner {
  background: var(--vd-accent); color: #f2faff;
  font-size: 0.72rem; text-align: center;
}
.md-banner__inner { margin: 0.55rem auto; }
.md-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- header ---------------------------------------------------------
 * Material's `primary: black` paints the header #14151a, a shade lighter
 * than the canvas, which puts a visible seam across the top of every page.
 * The reference header is transparent over the canvas. Set it directly
 * rather than fight the palette variable.
 *
 * The selector is scheme-scoped rather than a bare `.md-header` on purpose:
 * Material paints it from `[data-md-color-primary=black] .md-header`, which
 * outranks a lone class no matter what order the sheets load in.
 */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs { background-color: var(--vd-canvas); }
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs { background-color: #fff; color: #111; }
.md-header { box-shadow: none; border-bottom: 1px solid var(--vd-line); }
[data-md-color-scheme="default"] .md-header { border-bottom-color: #e8e8ea; }
.md-header__title { font-weight: 600; letter-spacing: -0.015em; }
.md-tabs { border-bottom: 1px solid var(--vd-line); }
[data-md-color-scheme="default"] .md-tabs { border-bottom-color: #e8e8ea; }
.md-tabs__link { font-size: 14px; font-weight: 400; opacity: 0.72; }
.md-tabs__link--active, .md-tabs__link:hover { opacity: 1; }

/* ---- card grids: transparent, 16px radius, cool grey border ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: transparent;
  border: 1px solid var(--vd-card-line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  box-shadow: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--vd-accent-soft);
  background: rgba(127, 200, 255, 0.04);
  box-shadow: none;
}
.md-typeset .grid.cards > ul > li > hr { display: none; }
.md-typeset .grid.cards > ul > li > p:first-child {
  font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem;
}
.md-typeset .grid.cards > ul > li .twemoji,
.md-typeset .grid.cards > ul > li svg {
  width: 1.2rem; height: 1.2rem; fill: var(--vd-accent-soft);
}
.md-typeset .grid { gap: 1rem; }

/* ---- code: #161f34 fill, 6px radius, 14px --------------------------- */
.md-typeset code {
  font-family: var(--vd-mono); font-size: 14px;
  border-radius: 6px; padding: 0.15em 0.4em;
}
.md-typeset pre > code { font-size: 13.5px; border-radius: 10px; }
.md-typeset .highlight { border-radius: 10px; }
[data-md-color-scheme="slate"] .md-typeset pre > code {
  border: 1px solid var(--vd-line);
}

/* ---- admonitions: flat, hairline, thicker left rule ------------------ */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--vd-line); border-left-width: 3px;
  border-radius: 10px; box-shadow: none; font-size: 0.95em;
}
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details { background: #0a1220; }

/* ---- tables --------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--vd-line); border-radius: 12px;
  overflow: hidden; box-shadow: none; font-size: 0.94em;
}
[data-md-color-scheme="default"] .md-typeset table:not([class]) { border-color: #e8e8ea; }
.md-typeset table:not([class]) th {
  background: #0a1220; font-weight: 600; font-size: 0.86em;
  letter-spacing: 0.02em; color: var(--vd-muted);
}
[data-md-color-scheme="default"] .md-typeset table:not([class]) th { background: #f6f6f8; color: #55565a; }
/* Material breaks long words inside cells, which splits `inconclusive` across
 * two lines as `inconclusi` / `ve`. An identifier broken mid-token reads as a
 * different identifier. Keep code spans whole and let the table scroll. */
.md-typeset table:not([class]) code { white-space: nowrap; }
.md-typeset__table { overflow-x: auto; }

/* ---- the limit callout ---------------------------------------------- */
.md-typeset .limit {
  border: 1px solid var(--vd-line); border-left: 3px solid #ffc46b;
  border-radius: 10px; background: #0a1220; padding: 1rem 1.2rem; margin: 1.4rem 0;
}
[data-md-color-scheme="default"] .md-typeset .limit { background: #fffaf0; border-color: #f0e2c4; }
.md-typeset .limit > :first-child { margin-top: 0; }
.md-typeset .limit > :last-child { margin-bottom: 0; }

/* ---- nav: 14px / 400 / #f3f3f4, matching the reference --------------- */
.md-nav { font-size: 14px; font-weight: 400; }
.md-nav__link { color: #f3f3f4; }
[data-md-color-scheme="default"] .md-nav__link { color: #3b3b3d; }
.md-nav__title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vd-faint); }
/* Material paints the active link from --md-default-fg-color--light, which the
 * palette above remaps to the muted grey. That renders the page you are ON
 * dimmer than the pages you are not on. Accent it instead. */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active code { color: var(--vd-accent-soft); }
[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__link--active code { color: var(--vd-accent); }
/* A top-level page (Home, Safety posture) IS its own tab, so its current-page
 * marker is the lifted tab label. Material mutes that label at a specificity
 * the rule above cannot reach, which leaves those two pages with nothing in
 * the sidebar showing where you are. Match the specificity. */
[data-md-color-scheme="slate"] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--active > .md-nav__link--active { color: var(--vd-accent-soft); }
[data-md-color-scheme="default"] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--active > .md-nav__link--active { color: var(--vd-accent); }
.md-nav__link--active { font-weight: 600; }
.md-footer-meta { border-top: 1px solid var(--vd-line); }
.md-copyright { font-size: 0.68rem; }