/*
 * evermesh.org — "carbon & signal", a media app's landing page.
 *
 * 2026-07-31 redesign. Colour/type/shape come from assets/tokens.css;
 * this file lays things out. Dark is the default on a dark OS; both
 * themes are hand-checked for contrast (see tokens.css's own notes).
 *
 * The whole illustration system — the hero graticule, the three "survive"
 * cards, the small capability icons — reuses one visual vocabulary: dots
 * (nodes) joined by round-capped lines (edges), the same language as the
 * brand mark itself (a play-triangle with three edges to three nodes).
 * That repetition is deliberate: one motif recurring at different scales
 * reads as a designed system, not six unrelated stock-icon sets.
 *
 * Motion is limited to a few small, purposeful moments (a signal
 * travelling the hero mesh, a card lifting on hover) and stops entirely
 * under prefers-reduced-motion.
 */

@import url("assets/fonts/fonts.css");
@import url("assets/tokens.css");

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bo-bg);
  color: var(--bo-fg);
  font-family: var(--bo-font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--bo-link);
  text-decoration-color: color-mix(in srgb, var(--bo-link) 40%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--bo-link-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--bo-focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

code,
kbd,
.mono {
  font-family: var(--bo-font-mono);
  font-size: 0.88em;
}

h1,
h2,
h3 {
  font-family: var(--bo-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.wrap {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}

@media (max-width: 560px) {
  .wrap {
    width: min(1180px, 100% - 32px);
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bo-signal);
  color: var(--bo-on-signal);
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 0 0 var(--bo-radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- corner brackets
   A reusable "monitor frame" mark, echoed from the brand's broadcast/mesh
   register: four L-shaped ticks at the corners, built from gradients
   rather than an image. Used sparingly, on the two big framed elements
   (hero shot, status panel), so it reads as a signature detail. */

.corner-frame {
  position: relative;
  --site-tick: 20px;
  --site-tickw: 2px;
  background-image:
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong)),
    linear-gradient(var(--bo-border-strong), var(--bo-border-strong));
  background-repeat: no-repeat;
  background-size:
    var(--site-tickw) var(--site-tick), var(--site-tick) var(--site-tickw),
    var(--site-tickw) var(--site-tick), var(--site-tick) var(--site-tickw),
    var(--site-tickw) var(--site-tick), var(--site-tick) var(--site-tickw),
    var(--site-tickw) var(--site-tick), var(--site-tick) var(--site-tickw);
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bo-bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bo-border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  display: block;
  height: 24px;
  width: auto;
}

.site-header nav {
  margin-left: auto;
}

.site-header nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav a {
  color: var(--bo-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.site-header nav a:hover {
  color: var(--bo-fg);
}

.site-header nav a.nav-cta {
  color: var(--bo-fg);
  border: 1px solid var(--bo-border-strong);
  border-radius: var(--bo-radius-pill);
  padding: 7px 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The GitHub pill carries the mark instead of the word; the anchor keeps the
   accessible name via aria-label. display:block on the svg drops the inline
   descender gap that would otherwise make the pill taller than it looks. */
.site-header nav a.nav-cta-icon {
  padding: 7px 13px;
}

.site-header nav a.nav-cta svg {
  display: block;
}

.site-header nav a.nav-cta:hover {
  border-color: var(--bo-signal);
  color: var(--bo-fg);
}

@media (max-width: 860px) {
  .site-header nav ul li.nav-hide {
    display: none;
  }
}

/* The docs page reuses this header but shows the landing's section links, which
   do not fit one line on a phone: the <ul> stayed 417px wide inside a 358px
   wrap and took the document with it. Let it wrap, and let the header grow. */
@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: 12px;
    gap: 14px;
  }
  .site-header nav ul {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: 44px 0 0;
  overflow: hidden;
}

/* A restrained echo of the brand's mesh: a handful of nodes and edges
   fading in from the top-right corner, one packet travelling one edge.
   Not a full-bleed graticule — a corner accent, so it reads as signal,
   not wallpaper. */
.hero-mesh {
  position: absolute;
  top: -40px;
  right: -60px;
  width: min(760px, 80vw);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

.hero-mesh .edge {
  stroke: var(--bo-border-strong);
  stroke-width: 1.5;
  fill: none;
}

.hero-mesh .node {
  fill: var(--bo-border-strong);
}

.hero-mesh .signal {
  fill: var(--bo-signal);
  opacity: 0;
  animation: vm-travel 8s linear infinite;
}

@keyframes vm-travel {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  6% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.hero-copy {
  max-width: 760px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bo-muted);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-pill);
  padding: 6px 14px;
  background: var(--bo-surface);
  margin: 0;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bo-signal);
  flex: none;
}

.hero h1 {
  font-size: clamp(36px, 5.6vw, 60px);
  margin: 24px 0 0;
  max-width: 14ch;
  font-weight: 800;
}

.hero-sub {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 19px;
  color: var(--bo-muted);
}

.hero-sub strong {
  color: var(--bo-fg);
  font-weight: 600;
}

/* the honesty banner: always visible, never below the fold, never on the
   FAQ or in a table only. A warning glyph plus two short, plain-language
   facts. */
.hero-honest {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 26px 0 0;
  padding: 14px 18px;
  max-width: 640px;
  border: 1px solid color-mix(in srgb, var(--bo-live) 40%, var(--bo-border-strong));
  border-radius: var(--bo-radius-sm);
  background: color-mix(in srgb, var(--bo-live) 7%, var(--bo-surface));
  font-size: 14.5px;
  color: var(--bo-muted);
}

.hero-honest svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--bo-live);
}

.hero-honest b {
  color: var(--bo-fg);
  font-weight: 700;
}

.hero-honest a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bo-live) 55%, transparent);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--bo-radius-sm);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: var(--bo-signal);
  color: var(--bo-on-signal);
}

.btn-primary:hover {
  background: var(--bo-brand-600);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .btn-primary:hover {
    background: var(--bo-brand-300);
  }
}

:root.dark .btn-primary:hover {
  background: var(--bo-brand-300);
}

.btn-secondary {
  border-color: var(--bo-border-strong);
  color: var(--bo-fg);
  background: var(--bo-surface);
}

.btn-secondary:hover {
  border-color: var(--bo-signal);
  color: var(--bo-fg);
}

.btn-ghost {
  color: var(--bo-muted);
  padding: 13px 6px;
}

.btn-ghost:hover {
  color: var(--bo-fg);
}

/* ------------------------------------------------------------ hero shot
   The single strongest asset on the page: a real screenshot of the real
   app, shown large, in the first screen. No fake browser chrome wrapped
   around it — the app's own header already reads as "this is real
   software" — just a clean frame, a soft shadow, and (dark theme only) a
   faint glow that ties it back to the signal accent. */

.hero-shot-wrap {
  margin: 44px 0 0;
  position: relative;
}

.hero-shot-glow {
  position: absolute;
  inset: -60px -20px auto;
  height: 340px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--bo-signal) 22%, transparent), transparent 72%);
  z-index: 0;
  pointer-events: none;
  display: none;
}

:root.dark .hero-shot-glow,
:root[data-theme="dark"] .hero-shot-glow {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) .hero-shot-glow {
    display: block;
  }
}

.shot-frame {
  position: relative;
  z-index: 1;
  padding: 10px;
  background: var(--bo-surface);
  border-radius: calc(var(--bo-radius) + 6px);
  box-shadow: var(--bo-shadow-lg);
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bo-radius-sm);
  border: 1px solid var(--bo-border);
}

.shot-tag {
  position: absolute;
  top: -14px;
  left: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--bo-fg);
  background: var(--bo-bg);
  border: 1px solid var(--bo-border-strong);
  border-radius: var(--bo-radius-pill);
  padding: 6px 13px;
}

.shot-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bo-signal);
}

/* -------------------------------------------------------------- sections */

.section {
  padding: 58px 0;
  border-top: 1px solid var(--bo-border);
}

.section-tight {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section-head {
  max-width: 640px;
  margin: 0 0 30px;
}

.section-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  color: var(--bo-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  margin: 0;
}

.lede {
  margin: 14px 0 0;
  color: var(--bo-muted);
  font-size: 17.5px;
  max-width: 60ch;
}

.section-head .lede {
  margin-top: 12px;
}

/* -------------------------------------------------------- capability row
   "What you can do today" — four short, concrete actions, each with a
   small dot-and-line icon in the same visual language as the brand mark. */

.cap-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}

@media (max-width: 900px) {
  .cap-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .cap-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cap-item {
  padding-top: 20px;
  border-top: 2px solid var(--bo-border-strong);
}

.cap-icon {
  width: 30px;
  height: 30px;
  color: var(--bo-signal);
  margin-bottom: 16px;
}

.cap-item h3 {
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.cap-item p {
  margin: 0;
  color: var(--bo-muted);
  font-size: 15px;
}

/* ------------------------------------------------------------ survive
   Three plain-language cards, each with a small hand-authored
   illustration built from the same dot/line vocabulary as the mark,
   coloured with one accent each so the three read as distinct but
   related — not three copies of one template. */

.survive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 940px) {
  .survive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.survive-card {
  padding: 28px 26px 30px;
  background: var(--bo-surface);
  border-radius: var(--bo-radius);
  border: 1px solid var(--bo-border);
}

.survive-illus {
  width: 100%;
  height: 128px;
  margin-bottom: 22px;
}

.survive-card h3 {
  font-size: 20px;
  margin: 0 0 10px;
}

.survive-card p {
  margin: 0;
  color: var(--bo-muted);
  font-size: 15.5px;
}

.survive-more {
  margin: 30px 0 0;
  color: var(--bo-faint);
  font-size: 15px;
}

/* ------------------------------------------------------------- gallery
   Real screenshots of the two real frontends, theme-matched via <picture>
   so the shot always matches the reader's own colour scheme. */

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

@media (max-width: 860px) {
  .app-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app-card {
  display: flex;
  flex-direction: column;
}

.app-shot {
  padding: 10px;
  background: var(--bo-surface);
  border-radius: var(--bo-radius);
  border: 1px solid var(--bo-border);
}

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bo-radius-sm);
  border: 1px solid var(--bo-border);
}

.app-caption {
  margin-top: 16px;
  padding: 0 4px;
  color: var(--bo-muted);
  font-size: 15px;
}

.app-caption b {
  color: var(--bo-fg);
  font-weight: 600;
}

.app-note {
  margin: 30px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--bo-live);
  background: var(--bo-surface);
  border-radius: 0 var(--bo-radius-sm) var(--bo-radius-sm) 0;
  color: var(--bo-muted);
  font-size: 14.5px;
  max-width: 82ch;
}

.app-note a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--bo-live) 55%, transparent);
}

/* -------------------------------------------------------------- roles */

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 860px) {
  .role-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.role-card {
  padding: 24px 24px 26px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius);
}

.role-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bo-surface-2);
  font-family: var(--bo-font-mono);
  font-size: 13px;
  color: var(--bo-muted);
  margin-bottom: 16px;
}

.role-card h3 {
  font-size: 19px;
  margin: 0 0 4px;
}

.role-runs {
  display: block;
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  color: var(--bo-faint);
  margin-bottom: 12px;
}

.role-card p {
  margin: 0;
  color: var(--bo-muted);
  font-size: 15px;
}

.roles-note {
  margin: 26px 0 0;
  color: var(--bo-faint);
  font-size: 14.5px;
  max-width: 78ch;
}

/* -------------------------------------------------------------- status
   Deliberately not a 12-row implementer's table: two short, plain-
   language lists (what works / what doesn't yet), plus one line on
   conformance. The deep table and per-runtime skip reasons live on
   GitHub, linked, not deleted. */

.status-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  margin: 0 0 32px;
  border: 1px solid color-mix(in srgb, var(--bo-live) 40%, var(--bo-border-strong));
  border-left: 3px solid var(--bo-live);
  border-radius: var(--bo-radius-sm);
  background: var(--bo-surface);
  font-size: 16px;
  max-width: 84ch;
}

.status-banner svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--bo-live);
}

.status-banner b {
  color: var(--bo-fg);
}

.status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

@media (max-width: 780px) {
  .status-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.status-col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--bo-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--bo-muted);
}

.status-col h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.status-col.is-built h3::before {
  background: var(--bo-signal);
}

.status-col.is-spec h3::before {
  background: var(--bo-live);
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-list li {
  padding: 10px 0 0;
  border-top: 1px solid var(--bo-border);
  font-size: 15px;
  color: var(--bo-muted);
}

.status-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.status-list b {
  display: block;
  color: var(--bo-fg);
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 3px;
}

.status-conform {
  margin-top: 36px;
  padding: 18px 22px;
  background: var(--bo-surface);
  border-radius: var(--bo-radius-sm);
  font-size: 15px;
  color: var(--bo-muted);
  max-width: 84ch;
}

.status-conform b {
  color: var(--bo-fg);
}

.status-links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14.5px;
}

/* ------------------------------------------------------------------ faq */

.faq-list {
  border-top: 1px solid var(--bo-border);
  max-width: 760px;
}

.faq-item {
  border-bottom: 1px solid var(--bo-border);
  padding: 18px 0;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--bo-font-display);
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: -0.015em;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "+";
  flex: none;
  width: 18px;
  font-family: var(--bo-font-mono);
  font-weight: 400;
  font-size: 18px;
  color: var(--bo-signal);
}

.faq-item[open] summary::before {
  content: "\2212";
}

.faq-item summary:hover {
  color: var(--bo-muted);
}

.faq-body {
  margin: 14px 0 0 34px;
  color: var(--bo-muted);
  font-size: 15.5px;
  max-width: 68ch;
}

.faq-body strong {
  color: var(--bo-fg);
}

@media (max-width: 600px) {
  .faq-body {
    margin-left: 0;
  }
}

/* -------------------------------------------------------------- final CTA */

.final-cta {
  background: var(--bo-surface);
  border-radius: var(--bo-radius);
  padding: 38px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.final-cta h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 10px;
}

.final-cta p {
  margin: 0;
  color: var(--bo-muted);
  font-size: 16px;
  max-width: 46ch;
}

.final-cta .cta-row {
  margin-top: 0;
}

.quick-docs {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14.5px;
}

.quick-docs a {
  color: var(--bo-muted);
  text-decoration: none;
}

.quick-docs a:hover {
  color: var(--bo-fg);
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  padding: 52px 0 68px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.footer-inner img {
  height: 22px;
  width: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.footer-note {
  margin: 0;
  color: var(--bo-faint);
  font-size: 14.5px;
  max-width: 72ch;
}

.footer-note + .footer-note {
  margin-top: 10px;
}

/* ----------------------------------------------------------- docs viewer */

.docs-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 40px 0 88px;
}

@media (max-width: 940px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.docs-nav {
  position: sticky;
  top: 90px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius);
  padding: 8px 14px 16px;
  background: var(--bo-surface);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.docs-nav-toggle {
  display: none;
}

@media (max-width: 940px) {
  .docs-nav-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 14px 18px;
    margin-bottom: 4px;
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    background: var(--bo-surface);
    color: var(--bo-fg);
    font-family: var(--bo-font-display);
    font-weight: 700;
    font-size: 16px;
  }

  .docs-nav-toggle-chevron::before {
    content: "\25BE";
    color: var(--bo-signal);
    display: inline-block;
    transition: transform 0.15s ease;
  }

  .docs-nav-toggle[aria-expanded="true"] .docs-nav-toggle-chevron::before {
    transform: rotate(180deg);
  }

  .docs-nav {
    display: none;
    position: static;
    max-height: 55vh;
  }

  .docs-nav.open {
    display: block;
    margin-bottom: 20px;
  }
}

.docs-nav .group {
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bo-muted);
  padding: 16px 10px 6px;
  margin: 0;
}

.docs-nav a {
  display: block;
  padding: 7px 11px;
  border-radius: var(--bo-radius-sm);
  color: var(--bo-muted);
  font-size: 15px;
  text-decoration: none;
  border-left: 2px solid transparent;
}

.docs-nav a:hover {
  background: var(--bo-surface-2);
  color: var(--bo-fg);
}

.docs-nav a.active {
  background: color-mix(in srgb, var(--bo-signal) 14%, transparent);
  color: var(--bo-fg);
  font-weight: 600;
  border-left-color: var(--bo-signal);
}

.docs-main {
  min-width: 0;
}

.docs-crumb {
  font-family: var(--bo-font-mono);
  font-size: 12px;
  color: var(--bo-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.markdown {
  font-size: 16.5px;
  max-width: 72ch;
}

.markdown > *:first-child {
  margin-top: 0;
}

/* Inline diagrams are drawn at their viewBox width and panned rather than
   fitted to the column — fitting them scales their labels down with the
   drawing, which is how concepts.md came to render 14px text at 3.23px on a
   phone. docs.html wraps each svg[viewBox] in this box. */
.markdown .diagram-scroll {
  overflow-x: auto;
  margin: 1.4em 0;
}
.markdown .diagram-scroll > svg {
  display: block;
}

.markdown h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0.2em 0 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--bo-border);
}

.markdown h2 {
  font-size: 25px;
  margin: 1.7em 0 0.6em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--bo-border);
  scroll-margin-top: 92px;
}

.markdown h3 {
  font-size: 19px;
  margin: 1.5em 0 0.5em;
  scroll-margin-top: 92px;
}

.markdown h4 {
  font-family: var(--bo-font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bo-muted);
  margin: 1.4em 0 0.5em;
}

.markdown p,
.markdown li {
  color: color-mix(in srgb, var(--bo-fg) 88%, var(--bo-muted));
  overflow-wrap: break-word;
}

.markdown code {
  background: var(--bo-surface-2);
  border-radius: 5px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

.markdown pre {
  background: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-sm);
  padding: 16px 18px;
  overflow: auto;
  max-width: 100%;
}

.markdown pre code {
  background: none;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.7;
  overflow-wrap: normal;
  white-space: pre;
}

.markdown blockquote {
  margin: 1.2em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--bo-signal);
  color: var(--bo-muted);
}

.markdown .table-scroll {
  margin: 1.4em 0;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-sm);
  overflow-x: auto;
}

.markdown table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}

.markdown th,
.markdown td {
  border-bottom: 1px solid var(--bo-border);
  border-right: 1px solid var(--bo-border);
  padding: 9px 13px;
  text-align: left;
}

.markdown th:last-child,
.markdown td:last-child {
  border-right: 0;
}

.markdown tr:last-child td {
  border-bottom: 0;
}

.markdown th {
  background: var(--bo-surface);
  font-weight: 600;
}

.markdown hr {
  border: 0;
  border-top: 1px solid var(--bo-border);
  margin: 2.2em 0;
}

.docs-toc {
  margin: 0 0 2em;
  padding: 14px 18px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-sm);
  background: var(--bo-surface);
}

.docs-toc summary {
  cursor: pointer;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bo-muted);
  list-style: none;
}

.docs-toc summary::-webkit-details-marker {
  display: none;
}

.docs-toc[open] summary {
  margin-bottom: 12px;
}

.docs-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
}

@media (max-width: 640px) {
  .docs-toc ol {
    columns: 1;
  }
}

.docs-toc li {
  break-inside: avoid;
  font-size: 14px;
  margin-bottom: 6px;
}

.docs-toc a {
  text-decoration: none;
  color: var(--bo-muted);
}

.docs-toc a:hover {
  color: var(--bo-link);
}

.docs-toc .toc-sub {
  margin-left: 16px;
  color: var(--bo-faint);
}

.docs-error {
  border: 1px solid color-mix(in srgb, var(--bo-live) 45%, var(--bo-border));
  background: color-mix(in srgb, var(--bo-live) 8%, transparent);
  border-radius: var(--bo-radius-sm);
  padding: 16px 18px;
}

.docs-license {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--bo-border);
  color: var(--bo-faint);
  font-size: 14px;
  max-width: 80ch;
}

/* ------------------------------------------------------------- motion off */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero-mesh .signal {
    display: none;
  }
}

/* ── Vulos suite chrome — identical on every product landing ───────────────
   Two elements, and only two: a logo-only home button in the top bar, and
   one line in the footer. Deliberately free of repo variables so the block
   is byte-identical across the suite and can be diffed as one thing. */
.vulos-home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; opacity: .72; transition: opacity .15s ease, transform .15s ease; }
.vulos-home:hover, .vulos-home:focus-visible { opacity: 1; transform: translateY(-1px); }
.vulos-home img { display: block; width: 22px; height: 22px; border-radius: 6px; }
.vulos-foot { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.45; text-decoration: none; color: inherit; opacity: .85; transition: opacity .15s ease; }
.vulos-foot:hover { opacity: 1; text-decoration: none; }
.vulos-foot img { display: block; width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; }

/* Dark-ground correction for the mark above. vulos-logo.png is flat #2E383A
   on transparency — ink drawn for paper — so composited on this surface it
   measures about 1.3:1 and reads as a smudge, not as a dimmed logo. The
   artwork carries its whole shape in the alpha channel, so brightness(0)
   invert(1) recolours it to the surface's foreground with the glyph intact,
   and the opacity holds it at the same secondary weight the light theme
   gives it. Styling only: the chrome markup stays byte-identical suite-wide. */
:root[data-theme="dark"] .vulos-home img,
:root[data-theme="dark"] .vulos-foot img { filter: brightness(0) invert(1); opacity: .66; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vulos-home img,
  :root:not([data-theme="light"]) .vulos-foot img { filter: brightness(0) invert(1); opacity: .66; }
}