/* ASTROLAB docs — Barlow (same family as stellor.space), self-hosted */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../resources/fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../resources/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../resources/fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../resources/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../resources/fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../resources/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../resources/fonts/barlow-condensed-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../resources/fonts/barlow-condensed-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../resources/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../resources/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../resources/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../resources/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --al-radius: 12px;
  --al-accent: #22d3ee;
  --al-border: rgba(148, 163, 184, 0.22);
  --md-text-font: "Barlow";
  --md-code-font: "Roboto Mono", ui-monospace, monospace;
  --al-font-body: "Barlow", system-ui, sans-serif;
  --al-font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
}

body,
.md-typeset {
  font-family: var(--al-font-body);
}

.md-header__title,
.md-nav__title,
.md-typeset h1,
.md-typeset h2,
.doc-kicker {
  font-family: var(--al-font-display);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #060608;
  --md-code-bg-color: #101014;
}

.md-header {
  backdrop-filter: blur(12px);
}

/* Theme toggle — cleaner sun / moon control */
.md-header__button.md-icon[title*="light mode"],
.md-header__button.md-icon[title*="dark mode"],
label[for^="__palette"] {
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

label[for^="__palette"]:hover {
  background: rgba(34, 211, 238, 0.12);
}

label[for^="__palette"] svg {
  width: 1.15rem;
  height: 1.15rem;
}

[data-md-color-scheme="slate"] label[for^="__palette"] svg {
  color: #67e8f9;
}

[data-md-color-scheme="default"] label[for^="__palette"] svg {
  color: #4f46e5;
}

.md-typeset h1 {
  font-weight: 650;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
  border-bottom: 1px solid var(--al-border);
  padding-bottom: 0.25em;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--al-radius);
}

.md-typeset table:not([class]) {
  border-radius: var(--al-radius);
  overflow: hidden;
}

/* Screenshots — rounded media, caption outside (no outer frame) */
.doc-figure {
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.doc-figure img {
  display: block;
  width: auto;
  max-width: min(100%, 920px);
  height: auto;
  margin-inline: auto;
  object-fit: unset;
  border-radius: 14px;
  border: 1px solid var(--al-border);
  background: transparent;
}

.doc-figure figcaption,
.doc-figure-caption {
  margin: 0.55rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
  border: 0;
  text-align: center;
}

.doc-figure-placeholder {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 1.5rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
  font-size: 0.85rem;
  line-height: 1.45;
  border: 1px dashed var(--al-border);
  border-radius: 14px;
  background: rgba(34, 211, 238, 0.04);
}

.doc-figure-placeholder strong {
  display: block;
  color: var(--md-default-fg-color);
  margin-bottom: 0.35rem;
}

/* Platforms overview — Web + Desktop side by side; phone stays portrait-sized */
.doc-platform-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  align-items: start;
}

.doc-platform-gallery .doc-figure {
  margin: 0;
}

.doc-platform-gallery .doc-figure img {
  max-width: 100%;
}

.doc-platform-gallery .doc-figure--phone {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 280px);
}

.doc-figure--phone img {
  max-width: min(100%, 360px);
}

@media (max-width: 720px) {
  .doc-platform-gallery {
    grid-template-columns: 1fr;
  }
}

/* Two vertical screenshots side by side (e.g. spacecraft Orbit state + wizard) */
.doc-figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  align-items: start;
}

.doc-figure-pair .doc-figure {
  margin: 0;
}

.doc-figure-pair .doc-figure img {
  max-width: 100%;
  max-height: min(72vh, 820px);
  width: auto;
  margin-inline: auto;
}

@media (max-width: 720px) {
  .doc-figure-pair {
    grid-template-columns: 1fr;
  }
}

.doc-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-accent);
  line-height: 1.35;
}

.doc-home-hero {
  text-align: center;
  margin: 0.25rem 0 1.75rem;
}

.doc-home-hero .doc-kicker {
  margin-bottom: 0.65rem;
}

.doc-home-hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.5vw, 2.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.md-typeset .grid.cards > ul > li {
  border-radius: var(--al-radius);
}

/* ------------------------------------------------------------------ */
/* Mermaid diagrams — container + subgraph clusters                     */
/* ------------------------------------------------------------------ */

.md-typeset .mermaid,
.md-typeset .astrolab-diagram {
  display: flex;
  justify-content: center;
  margin: 1.35rem 0;
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: var(--al-radius);
  border: 1px solid var(--al-border);
  overflow-x: auto;
  line-height: 1.4;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram {
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(34, 211, 238, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(16, 16, 20, 0.92), rgba(10, 10, 12, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-md-color-scheme="default"] .md-typeset .mermaid,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram {
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(79, 70, 229, 0.07), transparent 62%),
    linear-gradient(180deg, #fafbfc, #f4f6f8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.md-typeset .mermaid svg,
.md-typeset .astrolab-diagram svg {
  max-width: 100%;
  height: auto;
  font-family: "Barlow", system-ui, sans-serif;
}

/* Node boxes — slight corner radius (the look that worked) */
.md-typeset .mermaid svg g.node rect,
.md-typeset .mermaid svg g.node > rect,
.md-typeset .astrolab-diagram svg g.node rect,
.md-typeset .astrolab-diagram svg g.node > rect {
  rx: 8 !important;
  ry: 8 !important;
}

.md-typeset .mermaid svg g.cluster > rect,
.md-typeset .astrolab-diagram svg g.cluster > rect {
  rx: 10 !important;
  ry: 10 !important;
}

/* Subgraph / cluster boxes */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.cluster > rect,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .cluster rect,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.cluster > rect,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .cluster rect {
  fill: rgba(34, 211, 238, 0.06) !important;
  stroke: rgba(34, 211, 238, 0.34) !important;
  stroke-width: 1px !important;
  rx: 10 !important;
  ry: 10 !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg g.cluster > rect,
[data-md-color-scheme="default"] .md-typeset .mermaid svg .cluster rect,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.cluster > rect,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .cluster rect {
  fill: rgba(79, 70, 229, 0.05) !important;
  stroke: rgba(79, 70, 229, 0.28) !important;
  stroke-width: 1px !important;
  rx: 10 !important;
  ry: 10 !important;
  filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.06));
}

[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.node > rect,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.node > rect,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.node rect,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.node rect {
  fill: #101014 !important;
  stroke: rgba(34, 211, 238, 0.42) !important;
  stroke-width: 1.25px !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg g.node > rect,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.node > rect,
[data-md-color-scheme="default"] .md-typeset .mermaid svg g.node rect,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.node rect {
  fill: #ffffff !important;
  stroke: rgba(79, 70, 229, 0.45) !important;
  stroke-width: 1.35px !important;
}

/* Node / label text — high contrast in both schemes */
.md-typeset .mermaid svg text,
.md-typeset .mermaid svg tspan,
.md-typeset .astrolab-diagram svg text,
.md-typeset .astrolab-diagram svg tspan {
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 500 !important;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid svg text,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg tspan,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg text,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg tspan,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .nodeLabel,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .nodeLabel {
  fill: #e8eef7 !important;
  color: #e8eef7 !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg text,
[data-md-color-scheme="default"] .md-typeset .mermaid svg tspan,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg text,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg tspan,
[data-md-color-scheme="default"] .md-typeset .mermaid svg .nodeLabel,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .nodeLabel {
  fill: #0f172a !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* htmlLabels (foreignObject) — often the broken light-mode case */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg foreignObject div,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg foreignObject span,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg foreignObject div,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg foreignObject span {
  color: #e8eef7 !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg foreignObject div,
[data-md-color-scheme="default"] .md-typeset .mermaid svg foreignObject span,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg foreignObject div,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg foreignObject span {
  color: #0f172a !important;
}

/* Cluster titles */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.cluster-label text,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.cluster-label tspan,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.cluster-label text,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.cluster-label tspan {
  fill: #67e8f9 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg g.cluster-label text,
[data-md-color-scheme="default"] .md-typeset .mermaid svg g.cluster-label tspan,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.cluster-label text,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.cluster-label tspan {
  fill: #3730a3 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.cluster-label foreignObject div,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg g.cluster-label foreignObject span,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.cluster-label foreignObject div,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg g.cluster-label foreignObject span {
  color: #67e8f9 !important;
  font-weight: 600 !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg g.cluster-label foreignObject div,
[data-md-color-scheme="default"] .md-typeset .mermaid svg g.cluster-label foreignObject span,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.cluster-label foreignObject div,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg g.cluster-label foreignObject span {
  color: #3730a3 !important;
  font-weight: 600 !important;
}

/* Edges & arrows */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .edgePath .path,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .flowchart-link,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .edgePath .path,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .flowchart-link {
  stroke: rgba(148, 163, 184, 0.58) !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg .edgePath .path,
[data-md-color-scheme="default"] .md-typeset .mermaid svg .flowchart-link,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .edgePath .path,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .flowchart-link {
  stroke: rgba(100, 116, 139, 0.62) !important;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid svg marker path,
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .arrowheadPath,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg marker path,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .arrowheadPath {
  fill: rgba(148, 163, 184, 0.58) !important;
  stroke: rgba(148, 163, 184, 0.58) !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg marker path,
[data-md-color-scheme="default"] .md-typeset .mermaid svg .arrowheadPath,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg marker path,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .arrowheadPath {
  fill: rgba(100, 116, 139, 0.62) !important;
  stroke: rgba(100, 116, 139, 0.62) !important;
}

/* Sequence diagrams (participant boxes) */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .actor,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .actor {
  fill: #101014 !important;
  stroke: rgba(34, 211, 238, 0.38) !important;
  rx: 10 !important;
  ry: 10 !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg .actor,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .actor {
  fill: #ffffff !important;
  stroke: rgba(79, 70, 229, 0.32) !important;
  rx: 10 !important;
  ry: 10 !important;
}

/* Edge label pills */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg .edgeLabel rect,
[data-md-color-scheme="slate"] .md-typeset .astrolab-diagram svg .edgeLabel rect {
  fill: #101014 !important;
  stroke: rgba(148, 163, 184, 0.25) !important;
  rx: 6 !important;
  ry: 6 !important;
}

[data-md-color-scheme="default"] .md-typeset .mermaid svg .edgeLabel rect,
[data-md-color-scheme="default"] .md-typeset .astrolab-diagram svg .edgeLabel rect {
  fill: #ffffff !important;
  stroke: rgba(100, 116, 139, 0.2) !important;
  rx: 6 !important;
  ry: 6 !important;
}