/* ── Doc Layout ──────────────────────────────────────────────── */
.doc-layout {
  display: flex;
  align-items: flex-start;
  min-height: 100%;
}

.doc-toc {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 40px 0 40px 32px;
  border-right: 1px solid var(--ivory-3);
}

.toc-hdr {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}

.toc-link {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 5px 0;
  line-height: 1.4;
  transition: color var(--ease);
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
}

.toc-link:hover { color: var(--ink); }
.toc-link.active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--ink);
}

/* ── Doc Body ────────────────────────────────────────────────── */
.doc-body {
  flex: 1;
  padding: 48px 72px 80px 52px;
  max-width: 860px;
}

.doc-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.doc-title {
  font-size: 38px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
}

.doc-subtitle {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ivory-3);
  font-weight: 500;
}

.doc-lead {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.78;
  max-width: 600px;
  margin-bottom: 40px;
}

.doc-rule {
  border: none;
  border-top: 1px solid var(--ivory-3);
  margin: 48px 0;
}

.doc-body h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 52px 0 14px;
  padding-top: 52px;
  border-top: 1px solid var(--ivory-3);
}

.doc-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.section-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 52px 0 14px;
  padding-top: 52px;
  border-top: 1px solid var(--ivory-3);
}

.doc-body h3,
.doc-body h3.section-subheading {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-body p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.82;
  font-weight: 300;
  margin-bottom: 14px;
}

.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body em { font-style: italic; }

.doc-body ul,
.doc-body ol {
  margin: 0 0 14px 18px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.8;
  font-weight: 300;
}

.doc-body li { margin-bottom: 3px; }

.doc-body blockquote {
  border-left: 3px solid var(--ink-4);
  margin: 28px 0;
  padding: 16px 24px;
  background: var(--ivory-2);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.65;
  font-weight: 300;
}

/* ── Tables ──────────────────────────────────────────────────── */
.doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 12px;
}

.doc-body th {
  background: var(--ivory-2);
  border: 1px solid var(--ivory-4);
  padding: 9px 13px;
  text-align: left;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.doc-body td {
  border: 1px solid var(--ivory-3);
  padding: 9px 13px;
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.6;
  font-weight: 300;
}

.doc-body tr:hover td { background: var(--ivory-2); }

/* ── Callout ─────────────────────────────────────────────────── */
.callout {
  border-left: 2px solid var(--ink-4);
  padding: 14px 20px;
  margin: 20px 0;
  background: var(--ivory-2);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

.callout-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* ── Code Reference ──────────────────────────────────────────── */
.code-ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ivory-2);
  border: 1px solid var(--ivory-4);
  border-radius: var(--r);
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: all var(--ease);
  margin: 10px 0;
}

.code-ref:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* ── Mermaid Diagrams ────────────────────────────────────────── */
/* SVG's initial `overflow` value is `hidden`, unlike HTML's `visible`, so any
   foreignObject Mermaid uses for a node label clips its text by default. When
   a label runs even a pixel or two past the box Mermaid computed for it,
   which happens easily with long state names in the JetBrains Mono monospace
   font, the last character or two gets cut off instead of wrapping. Setting
   overflow to visible lets labels render in full even when they slightly
   exceed their computed box. */
.mermaid foreignObject {
  overflow: visible;
}

/* ── Image Cards ─────────────────────────────────────────────── */
.img-card {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--ivory-4);
  margin: 20px 0 32px;
}

.img-card img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.img-card-caption {
  padding: 10px 14px;
  background: var(--ivory-2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Overview Hero ───────────────────────────────────────────── */
.ov-hero {
  padding: 68px 72px 52px;
  border-bottom: 1px solid var(--ivory-3);
  background: var(--ivory-2);
  position: relative;
  overflow: hidden;
}

.ov-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ivory-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--ivory-3) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.6;
}

.ov-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  position: relative;
}

.ov-eyebrow-line {
  width: 22px;
  height: 1px;
  background: var(--ink-4);
}

.ov-eyebrow-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.ov-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 20px;
  position: relative;
  max-width: 640px;
}

.ov-sub {
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 520px;
  line-height: 1.78;
  position: relative;
  font-weight: 300;
}

/* ── Stats Grid ──────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ivory-3);
  gap: 1px;
}

.stat-card {
  background: var(--ivory);
  padding: 34px 38px;
  position: relative;
  overflow: hidden;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.stat-unit {
  font-size: 18px;
  font-weight: 300;
  color: var(--ink-3);
}

.stat-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.stat-desc {
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.5;
}

/* ── Layer Cards ─────────────────────────────────────────────── */
.layers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ivory-3);
  margin: 1px 0;
}

.layer-card {
  background: var(--ivory);
  padding: 28px 30px 32px;
}

.layer-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}

.layer-body {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.72;
  font-weight: 300;
}

/* ── Portal Notice ───────────────────────────────────────────── */
.portal-notice {
  padding: 32px 72px;
  border-top: 1px solid var(--ivory-3);
}

.portal-notice-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}

.portal-notice p {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.72;
  max-width: 760px;
}

/* ── Soon Page ───────────────────────────────────────────────── */
.soon-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  flex-direction: column;
  gap: 16px;
}

.soon-icon { font-size: 28px; opacity: 0.3; }

.soon-h {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
}

.soon-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  background: var(--yellow-bg);
  border-radius: 2px;
  padding: 3px 10px;
}