/* ─── Vero Protocol docs — Material skinned to the drawing-sheet design ──
   These pages are Sheet 3 of vero.technology, served at /protocol/ outside
   the marketing SPA. Source of truth: design_handoff_vero_site/README.md
   (design tokens §) and web/site/src/styles.css, whose token values are
   mirrored below 1:1. Ground #0d0f12 with a 52px construction grid, #22262c
   borders, #3399FF accent, Outfit type + system mono annotations. Borders
   are 1px, radii only on buttons. No shadows anywhere: elevation is an edge,
   not a glow. */

/* ─── Self-hosted Outfit (latin subset, OFL — see assets/fonts/OFL.txt) ──
   Same five woff2 the marketing site vendors. mkdocs.yml sets `font: false`
   so Material emits no Google Fonts <link>; these are the only type requests
   the site makes, and they are same-origin. A product whose pitch is that
   nothing phones home cannot have its own specification phone home. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/outfit-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/outfit-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/outfit-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/outfit-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/outfit-latin-700.woff2') format('woff2');
}

:root {
  --vero-accent: #3399ff;
  --vero-accent-light: #5aa9ff;
  --vero-ground: #0d0f12;
  --vero-panel: #0a0b0e;
  --vero-border: #22262c;
  --vero-divider: #1a1d22;
  --vero-bracket: #3a3f47;
  --vero-rule: #2f343b;
  --vero-text-high: #e8eaed;
  --vero-text-body: #b6b9bf;
  --vero-text-muted: #9aa0a6;
  --vero-text-dim: #8b9199;
  --vero-annotation: #7d838c;
  --vero-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Revision-status amber. Deliberately outside the design tokens: the draft
     stamp must not read as accent-blue chrome, which on this site means
     "link / active / sheet number". */
  --vero-draft: #d9a441;

  /* Material composes --md-text-font-family from --md-text-font plus its own
     fallbacks; with font: false that input is empty, so set the composed
     variable outright. extra_css loads after the theme sheet, so this wins. */
  --md-text-font: 'Outfit';
  --md-text-font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-code-font-family: var(--vero-mono);

  --md-primary-fg-color: var(--vero-ground);
  --md-primary-fg-color--light: var(--vero-panel);
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--vero-accent);
  --md-accent-fg-color--transparent: rgba(51, 153, 255, 0.08);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--vero-ground);
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: var(--vero-text-body);
  --md-default-fg-color--lighter: var(--vero-text-muted);
  --md-default-fg-color--lightest: var(--vero-annotation);

  --md-typeset-color: var(--vero-text-body);
  --md-typeset-a-color: var(--vero-accent);

  --md-code-bg-color: var(--vero-panel);
  --md-code-fg-color: var(--vero-text-high);
  --md-code-font-family: var(--vero-mono);

  --md-footer-bg-color: var(--vero-ground);
  --md-footer-bg-color--dark: var(--vero-ground);
  --md-footer-fg-color: var(--vero-annotation);

  --md-typeset-table-color: var(--vero-border);
  --md-admonition-bg-color: var(--vero-panel);
}

/* Ground: #0d0f12 with the 52px construction grid */
body {
  background-color: var(--vero-ground);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 52px 52px;
}
.md-main, .md-container { background: transparent; }

/* Sheet corner ticks: four L-marks, 8px inset, 22px legs (injected in
   overrides/main.html) */
.vero-tick {
  position: fixed;
  width: 22px;
  height: 22px;
  z-index: 50;
  pointer-events: none;
}
.vero-tick--tl { top: 8px; left: 8px; border-top: 1px solid var(--vero-bracket); border-left: 1px solid var(--vero-bracket); }
.vero-tick--tr { top: 8px; right: 8px; border-top: 1px solid var(--vero-bracket); border-right: 1px solid var(--vero-bracket); }
.vero-tick--bl { bottom: 8px; left: 8px; border-bottom: 1px solid var(--vero-bracket); border-left: 1px solid var(--vero-bracket); }
.vero-tick--br { bottom: 8px; right: 8px; border-bottom: 1px solid var(--vero-bracket); border-right: 1px solid var(--vero-bracket); }

/* ─── Banner: the SPA's chrome lives here ────────────────────────────────
   Material wraps the `announce` block in .md-banner__inner.md-grid.md-typeset,
   which centres it at 61rem and applies typeset styles. The nav, the sheet
   strip and the draft bar are all full-bleed on the marketing site, so undo
   the grid and hand each of them its own typography. */
.md-banner {
  background: var(--vero-ground);
  color: var(--vero-annotation);
}
.md-banner__inner {
  max-width: none;
  margin: 0;
  padding: 0; /* .md-grid's 0.8rem gutter would inset the full-bleed chrome */
  font-size: 1rem;
}
.md-banner__inner.md-typeset a { color: inherit; }

/* Primary nav — mirrors web/site/src/components/NavBar.tsx exactly. Protocol
   is the active item here; on the SPA it is the one muted link that leaves. */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--vero-border);
}
/* Scoped through .md-banner__inner to outrank Material's
   `.md-typeset img { height: auto }`, which the banner wrapper drags in. */
.md-banner__inner.md-typeset .site-nav__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: none;
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  line-height: 1.4;
}
.md-banner__inner.md-typeset .site-nav-links a {
  color: var(--vero-text-muted);
  text-decoration: none;
}
.md-banner__inner.md-typeset .site-nav-links a.site-nav__active { color: var(--vero-text-high); }
.md-banner__inner.md-typeset .site-nav-links a.site-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--vero-accent);
  border-radius: 8px;
  color: var(--vero-accent);
  font-weight: 500;
}

/* Sheet header strip: mono 10px uppercase cells divided by #22262c. Four
   cells, per SheetHeaderStrip.tsx: accent tagline · sheet name · company ·
   accent sheet number, right-aligned. */
.vero-sheetstrip {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--vero-border);
  background: var(--vero-ground);
  font-family: var(--vero-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--vero-annotation);
}
.vero-sheetstrip span {
  padding: 9px 20px;
  border-right: 1px solid var(--vero-border);
}
.vero-sheetstrip span:first-child {
  padding: 9px 40px;
  color: var(--vero-accent);
}
.vero-sheetstrip span:last-child {
  margin-left: auto;
  border-right: none;
  color: var(--vero-accent);
}
.vero-sheetstrip a { color: inherit; text-decoration: none; }

/* ─── Draft stamp ────────────────────────────────────────────────────────
   Published ahead of the founder's editing pass. Full bleed under the strip,
   in the site's mono annotation idiom (stamp · fading hairline · note, the
   FigCaptionRow pattern) but amber so it cannot be mistaken for chrome. Not
   dismissible: the announce.dismiss feature is deliberately off. */
.vero-draft {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 40px;
  border-bottom: 1px solid rgba(217, 164, 65, 0.26);
  background: rgba(217, 164, 65, 0.055);
  font-family: var(--vero-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--vero-draft);
}
.vero-draft__stamp {
  padding: 3px 9px;
  border: 1px solid rgba(217, 164, 65, 0.5);
  letter-spacing: 0.2em;
  font-weight: 500;
}
.vero-draft__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(217, 164, 65, 0.32), rgba(217, 164, 65, 0));
}

/* The banner scrolls away, so the draft state also rides a fixed watermark
   under the content — a reader who deep-links into a spec and never sees the
   top still has it in frame. z-index -1 keeps it strictly behind every glyph,
   panel and table, so it costs nothing in legibility. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='300'%3E%3Ctext x='170' y='158' fill='rgba(217,164,65,0.055)' font-family='ui-monospace,SFMono-Regular,Menlo,monospace' font-size='30' letter-spacing='12' text-anchor='middle' transform='rotate(-30 170 150)'%3EDRAFT%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}

@media screen and (max-width: 900px) {
  .site-nav { flex-wrap: wrap; row-gap: 14px; padding: 16px 20px; }
  .site-nav-links { flex-wrap: wrap; row-gap: 12px; }
  .vero-sheetstrip { flex-wrap: wrap; }
  .vero-sheetstrip span:first-child { padding: 9px 20px; }
  .vero-sheetstrip span:last-child { margin-left: 0; }
  .vero-draft { padding: 9px 20px; }
}

/* Header: flat ground with the hairline border. This is the sticky docs
   toolbar that survives once the banner scrolls away — it keeps the page
   title and search. Its logo is hidden because the nav above already carries
   one: two wordmarks stacked is the giveaway that this is a bolted-on theme. */
.md-header {
  background-color: var(--vero-ground);
  border-bottom: 1px solid var(--vero-border);
  box-shadow: none;
}
.md-header__button.md-logo { display: none; }
.md-header__title { font-weight: 500; }
.md-tabs { background-color: var(--vero-ground); border-bottom: 1px solid var(--vero-border); }

/* Body copy: the site's 17px / 1.7 measure (Material's html root is 125%, so
   0.85rem is 17px), not Material's tighter 16px / 1.6 default. */
.md-typeset {
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Headings: Outfit weight 500, #fff; h2 carries the fading section rule */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  color: #ffffff;
  font-weight: 500;
}
.md-typeset h1 { letter-spacing: -0.02em; }
.md-typeset h2 {
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 18px;
}
.md-typeset h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--vero-rule), rgba(47, 52, 59, 0));
}
.md-typeset strong { color: #ffffff; font-weight: 500; }

/* Nav: annotation-style section titles, muted items, high-contrast active */
.md-nav__title {
  font-family: var(--vero-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vero-annotation) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.md-nav__link { color: var(--vero-text-muted); }
.md-nav__link:hover { color: var(--vero-text-high); }
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code { color: var(--vero-accent); }

/* Panels (admonitions, details): square, panel ground, 12px top-left bracket */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--vero-panel);
  border: 1px solid var(--vero-border);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.7rem;
  position: relative;
}
.md-typeset .admonition::before,
.md-typeset details::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--vero-bracket);
  border-left: 1px solid var(--vero-bracket);
  pointer-events: none;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-radius: 0;
}
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before {
  background-color: var(--vero-accent);
}

/* Tables: square panels, mono annotation headers, #1a1d22 row dividers —
   the spec-table treatment the marketing site uses (10px / 0.14em uppercase
   mono on rgba(255,255,255,0.02)). */
.md-typeset table:not([class]) {
  background-color: transparent;
  border: 1px solid var(--vero-border);
  border-radius: 0;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--vero-text-high);
  font-family: var(--vero-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--vero-divider);
  font-size: 0.72rem;
}
.md-typeset table:not([class]) tr:hover {
  background-color: rgba(51, 153, 255, 0.04);
  box-shadow: none;
}

/* Code: panel ground, hairline edge, mono stack, and the 12px top-left
   bracket every figure panel on the site carries. */
.md-typeset .highlight { position: relative; }
.md-typeset .highlight::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--vero-bracket);
  border-left: 1px solid var(--vero-bracket);
  z-index: 1;
  pointer-events: none;
}
.md-typeset pre > code {
  border-radius: 0;
  border: 1px solid var(--vero-border);
  background-color: var(--vero-panel);
}
.md-typeset code {
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.04);
  font-family: var(--vero-mono);
  font-size: 0.72rem;
}
.md-clipboard { color: var(--vero-annotation); }
.md-clipboard:hover { color: var(--vero-accent); }

/* Mermaid diagrams: figure panel treatment (#0a0b0e, bracket top-left) */
.md-typeset .vero-mermaid {
  background: var(--vero-panel);
  border: 1px solid var(--vero-border);
  padding: 16px;
  margin: 1em 0;
  text-align: center;
  overflow-x: auto;
  position: relative;
}
.md-typeset .vero-mermaid::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--vero-bracket);
  border-left: 1px solid var(--vero-bracket);
}
.md-typeset .vero-mermaid svg { max-width: 100%; }

/* Links & buttons */
.md-typeset a:hover { color: var(--vero-accent-light); }
.md-typeset .md-button {
  background: transparent;
  border: 1px solid var(--vero-accent);
  border-radius: 8px;
  color: var(--vero-accent);
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: none;
}
.md-typeset .md-button:hover {
  background: rgba(51, 153, 255, 0.08);
  color: var(--vero-accent-light);
  border-color: var(--vero-accent-light);
}
.md-typeset .md-button--secondary {
  border: 1px solid #33383f;
  color: var(--vero-text-body);
}

/* Search */
.md-search__form {
  background-color: var(--vero-panel);
  border: 1px solid var(--vero-border);
  border-radius: 8px;
}

/* Footer: hairline top edge, mono copyright */
.md-footer { border-top: 1px solid var(--vero-border); }
.md-footer-meta { background: var(--vero-ground); }
.md-copyright {
  font-family: var(--vero-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vero-annotation);
}

/* No elevation shadows anywhere */
.md-typeset .md-typeset__scrollwrap,
.md-sidebar__scrollwrap,
.md-top { box-shadow: none; }