/* Abyss-specific additions layered on top of theme.css (the ported wormhole-docs
   theme). Only figure/diagram classes, branding, and small content tweaks live
   here; all base chrome (header, tabs, nav, colors, typography) is theme.css's job. */

/* Space Grotesk: the display face abyss-app uses; headings only, body stays Inter */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

/* ---------- Abyss branding ---------- */

/* the header brand is the ABYSS logotype image (same asset as the app); the
   plain-text site title next to it becomes redundant */
.md-header__topic { display: none; }

.md-header__button.md-logo img { height: 0.85rem; width: auto; }

/* logotype ships as the light (near-black) variant; invert it on the dark scheme */
[data-md-color-scheme="custom-dark"] .md-header__button.md-logo img {
  filter: invert(1);
}

/* headings in the app's display face */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Space Grotesk", Inter, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

/* pull the dark scheme's grey ladder down to the app's near-black (#09090B base),
   keeping theme.css's internal relationships (bg / table header / borders) intact */
[data-md-color-scheme="custom-dark"] {
  --grey-10: #0B0B0E;
  --grey-10-opacity-1: rgb(11, 11, 14);
  --grey-15: #17171B;
  --grey-17: #1D1D22;
}

:root {
  /* figure palette (shared by the inline SVG diagrams; fixed light values because
     the diagrams are drawn on a white card in both color schemes) */
  --paper: #F7F8FA;
  --ink: #14202E;
  --muted: #5A6B7E;
  --navy: #0B1F3A;
  --accent: #2563EB;
  --accent-soft: #E8EFFC;
  --line: #D7DEE6;
  --red: #9E3B2E;
}

/* figures render on a fixed white card so the SVG palette holds in both schemes.
   Material sets `figure { width: fit-content }`, which shrinks and re-centers the
   box instead of letting it span the text column; !important reclaims full width. */
.doc-figure {
  display: block !important;
  width: 100% !important;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.1rem 0.8rem;
  margin: 1.6rem 0;
  overflow-x: auto;
}

.doc-figure svg { display: block; width: 100%; height: auto; min-width: 560px; }

.doc-figure figcaption {
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.doc-figure figcaption b { color: var(--navy); }

/* screenshots */
.doc-screen {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 1.2rem 0;
  max-width: 100%;
}

/* footer copyright: Material defaults to white-at-45% here, which vanishes on the
   theme's light-grey footer (wormhole replaces this area with a custom partial, so
   their sheet never covers it); use the theme's own footer foreground token. */
.md-copyright,
.md-copyright__highlight,
.md-social__link {
  color: var(--md-footer-fg-color);
}

/* Material colors this anchor at white-70% with higher specificity; this is a
   two-element leaf case, so the !important is contained */
.md-footer-meta .md-copyright a {
  color: var(--md-footer-fg-color) !important;
}

/* every table on this site is bps/USD/counts; digits should sit in columns */
.md-typeset table {
  font-variant-numeric: tabular-nums;
}

/* note/abstract admonitions: recolor Material's stock #448AFF to the brand blue;
   match Material's type-class specificity to win the cascade. */
.md-typeset .admonition.note,
.md-typeset .admonition.abstract,
.md-typeset details.note,
.md-typeset details.abstract {
  border-color: var(--accent);
}

.md-typeset .admonition.note > .admonition-title,
.md-typeset .admonition.abstract > .admonition-title,
.md-typeset details.note > summary,
.md-typeset details.abstract > summary {
  background-color: var(--accent-soft);
}

.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.abstract > .admonition-title::before,
.md-typeset details.note > summary::before,
.md-typeset details.abstract > summary::before {
  background-color: var(--accent);
}

/* SVG figure system v2 (Stripe-flat spec) */
.f-node { fill: #FFFFFF; stroke: #D9E0EA; stroke-width: 1; }
.f-node-hi { fill: #EBF1FD; stroke: #2563EB; stroke-width: 1.75; }
.f-zone { fill: #F4F6F9; stroke: #D9E0EA; stroke-width: 1; }
.f-zone-red { fill: #FBF1EF; stroke: #EAD3CD; stroke-width: 1; }
.f-band-navy { fill: #0B1F3A; }
.f-band-teal { fill: #2563EB; }
.f-title { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600; fill: #0B1F3A; }
.f-title-inv { font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; fill: #FFFFFF; letter-spacing: 0.03em; }
.f-sub { font-family: system-ui, sans-serif; font-size: 11px; fill: #5B6472; }
.f-sub-inv { font-family: system-ui, sans-serif; font-size: 11px; fill: #DCE4EE; }
.f-edge { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 500; fill: #5B6472; }
.f-zlabel { font-family: system-ui, sans-serif; font-size: 10px; font-weight: 600; fill: #5B6472; letter-spacing: 0.06em; text-transform: uppercase; }
.f-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; fill: #2563EB; }
.f-red { fill: #9E3B2E; }
.f-line { stroke: #8494A8; stroke-width: 1.75; fill: none; }
.f-line-accent { stroke: #2563EB; stroke-width: 1.75; fill: none; }
.f-hair { stroke: #E4E9F0; stroke-width: 1; }
.f-badge { fill: #2563EB; }
.f-badge-t { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; fill: #FFFFFF; }

/* SVG shared classes */
.d-box { fill: #FFFFFF; stroke: var(--navy); stroke-width: 1.4; }
.d-box-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; }
.d-box-navy { fill: var(--navy); stroke: none; }
.d-box-dash { fill: #FFFFFF; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
/* CSS font-size intentionally beats the per-element font-size attributes: one knob scales all figure text */
.d-title { font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 600; fill: var(--navy); }
.d-title-inv { font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 600; fill: #FFFFFF; }
.d-text { font-family: system-ui, sans-serif; font-size: 11px; fill: var(--muted); }
.d-text-inv { font-family: system-ui, sans-serif; font-size: 11px; fill: #C9D4E3; }
.d-mono { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; fill: var(--accent); }
.d-line { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.d-line-accent { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.d-line-red { stroke: var(--red); stroke-width: 1.4; fill: none; }
.d-num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; fill: #FFFFFF; }