/* Mission Control tokens mirror astrona-web/app/assets/css/_tokens.scss.
   Material keeps ownership of search, navigation and version selection. */
:root {
  color-scheme: dark;
  --astro-bg: #0a0711;
  --astro-panel: #140d1d;
  --astro-panel-2: #1a1026;
  --astro-ink: #ece7f5;
  --astro-muted: #9a8fb0;
  --astro-line: rgba(236, 231, 245, 0.12);
  --astro-orange: #ff7a18;
  --astro-orange-ink: #ff9a4d;
  --astro-green: #39ff88;
  --astro-cyan: #35e6ff;
  --astro-pink: #ff5bb0;
  --astro-violet: #c77cf5;
  --astro-radius: 14px;
  --md-text-font: "Space Grotesk", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, monospace;
}

[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-default-bg-color: var(--astro-bg);
  --md-default-fg-color: var(--astro-ink);
  --md-default-fg-color--light: var(--astro-muted);
  --md-default-fg-color--lighter: rgba(236, 231, 245, 0.4);
  --md-default-fg-color--lightest: var(--astro-line);
  --md-primary-fg-color: var(--astro-panel);
  --md-primary-bg-color: var(--astro-ink);
  --md-primary-bg-color--light: var(--astro-muted);
  --md-accent-fg-color: var(--astro-orange-ink);
  --md-accent-fg-color--transparent: rgba(255, 122, 24, 0.1);
  --md-accent-bg-color: #1a0d00;
  --md-typeset-color: var(--astro-ink);
  --md-typeset-a-color: var(--astro-orange-ink);
  --md-code-bg-color: #100a18;
  --md-code-fg-color: var(--astro-ink);
  --md-code-hl-color: rgba(199, 124, 245, 0.12);
  --md-code-hl-number-color: var(--astro-pink);
  --md-code-hl-special-color: var(--astro-pink);
  --md-code-hl-function-color: var(--astro-cyan);
  --md-code-hl-keyword-color: var(--astro-violet);
  --md-code-hl-string-color: var(--astro-green);
  --md-code-hl-comment-color: var(--astro-muted);
  --md-code-hl-name-color: var(--astro-ink);
  --md-footer-bg-color: var(--astro-panel);
  --md-footer-bg-color--dark: var(--astro-bg);
  --md-footer-fg-color: var(--astro-ink);
  --md-footer-fg-color--light: var(--astro-muted);
  --md-footer-fg-color--lighter: var(--astro-muted);
}

body {
  background: var(--astro-bg);
}
.md-grid {
  max-width: 69.6rem;
}
.astro-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 80% 0%,
      rgba(122, 46, 200, 0.17),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 0% 80%,
      rgba(255, 122, 24, 0.05),
      transparent 45%
    );
}
.astro-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #ece7f5 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 64%, #ece7f5 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 32%, #c77cf5 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 48%, #35e6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 74%, #ff9a4d 50%, transparent 51%);
}
.astro-sky__planet {
  position: absolute;
  width: 19rem;
  height: 19rem;
  right: -13rem;
  top: 34%;
  border: 1px solid rgba(199, 124, 245, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(122, 46, 200, 0.08) inset;
}
[data-md-color-scheme="slate"] .md-header {
  background: rgba(20, 13, 29, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--astro-line);
  box-shadow: none;
}
.md-header__title {
  font-weight: 700;
  letter-spacing: -0.035em;
}
.md-header__button.md-logo img {
  width: 1.9rem;
  height: 1.9rem;
}
.md-tabs {
  background: rgba(20, 13, 29, 0.75);
  border-bottom: 1px solid var(--astro-line);
}
.md-tabs__link {
  opacity: 1;
  color: var(--astro-muted);
  font-weight: 500;
}
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover {
  color: var(--astro-orange-ink);
}
.md-tabs__item--active {
  border-bottom: 2px solid var(--astro-orange);
}
.md-search__form {
  border: 1px solid var(--astro-line);
  border-radius: 10px;
  background: rgba(199, 124, 245, 0.07);
}
.md-search__input::placeholder {
  color: var(--astro-muted);
}
.astro-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: calc(100% - 2.4rem);
  padding: 0.7rem 0;
  font-size: 0.6rem;
  font-family: var(--md-code-font);
}
.astro-context__home {
  color: var(--astro-green);
}
.astro-context__home span {
  color: var(--astro-muted);
  padding-left: 0.8rem;
}
.astro-motion {
  flex-shrink: 0;
  border: 1px solid var(--astro-line);
  border-radius: 99px;
  padding: 0.35rem 0.65rem;
  color: var(--astro-muted);
  cursor: pointer;
}
.astro-motion[hidden] {
  display: none;
}
.astro-motion:hover:not(:disabled) {
  color: var(--astro-ink);
  border-color: var(--astro-violet);
}
.astro-motion:disabled {
  cursor: default;
}
.md-main__inner {
  margin-top: 1.25rem;
}
.md-content {
  min-width: 0;
}
.md-content__inner {
  padding: 1.4rem 1.6rem 2rem;
  margin-top: 0;
  border: 1px solid var(--astro-line);
  border-radius: var(--astro-radius);
  background: rgba(20, 13, 29, 0.88);
}
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.75;
}
.md-typeset h1 {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.045em;
  color: var(--astro-ink);
  overflow-wrap: anywhere;
}
.md-typeset h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.md-typeset h3 {
  font-weight: 700;
}
.md-typeset a:hover {
  color: #ffb47a;
}
.md-typeset a:not(.md-button):not(.headerlink) {
  text-underline-offset: 0.2em;
}
.md-typeset p > a,
.md-typeset li > a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 154, 77, 0.4);
}
.md-nav {
  font-size: 0.67rem;
}
.md-nav__title {
  color: var(--astro-violet);
  background: transparent;
  box-shadow: none;
  font-family: var(--md-code-font);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}
.md-nav__link {
  border-radius: 8px;
  transition:
    color 0.18s,
    background-color 0.18s;
}
.md-nav__link:hover {
  color: var(--astro-orange-ink);
}
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--astro-orange-ink);
}
.md-nav--secondary {
  border-left: 1px solid var(--astro-line);
}
.md-typeset pre > code {
  border: 1px solid var(--astro-line);
  border-radius: 10px;
}
.md-typeset code {
  border-radius: 5px;
  font-size: 0.8em;
}
.md-typeset .highlight > .filename {
  background: var(--astro-panel-2);
  border: 1px solid var(--astro-line);
  border-radius: 10px 10px 0 0;
}
.md-typeset .highlight > .filename + pre > code {
  border-radius: 0 0 10px 10px;
}
.md-code__button {
  color: var(--astro-muted);
}
.md-typeset table:not([class]) {
  border-radius: 10px;
  border-color: var(--astro-line);
  background: var(--astro-bg);
  font-size: 0.68rem;
}
.md-typeset table:not([class]) th {
  background: var(--astro-panel-2);
  color: var(--astro-ink);
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  background: var(--astro-panel-2);
  font-size: 0.74rem;
}
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--astro-cyan);
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--astro-green);
}
.md-typeset .admonition.warning {
  border-color: #ffc24d;
}
.md-typeset .tabbed-labels {
  border-bottom-color: var(--astro-line);
}
.md-footer {
  border-top: 1px solid var(--astro-line);
}
.md-footer__link {
  border-radius: var(--astro-radius);
}
.eyebrow,
.md-typeset .astro-eyebrow {
  margin: 0 0 0.8rem;
  font: 500 0.58rem/1.5 var(--md-code-font);
  color: var(--astro-green);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.astro-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  margin: 0 0.5rem 0.05rem 0;
  background: currentColor;
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.35);
}

/* Compact split hero and outlined cards, matching the frontend. */
.md-content__inner:has(.astro-hero) {
  padding: 0;
  border: 0;
  background: transparent;
}
.astro-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2.1rem;
  border: 1px solid var(--astro-line);
  border-radius: var(--astro-radius);
  background:
    radial-gradient(
      ellipse at 100% 0,
      rgba(122, 46, 200, 0.15),
      transparent 70%
    ),
    var(--astro-panel);
  overflow: hidden;
}
.md-typeset .astro-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 0.9rem;
}
.md-typeset .astro-hero h1 span {
  color: var(--astro-orange-ink);
}
.astro-hero__copy > p:not(.astro-eyebrow) {
  color: var(--astro-muted);
  font-size: 0.8rem;
  max-width: 32rem;
}
.astro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.3rem;
}
.md-typeset .astro-actions .md-button {
  border: 1px solid var(--astro-line);
  border-radius: 99px;
  padding: 0.6rem 1.05rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--astro-ink);
}
.md-typeset .astro-actions .md-button--primary {
  background: var(--astro-orange);
  border-color: var(--astro-orange);
  color: #1a0d00;
}
.md-typeset .astro-actions .md-button:hover {
  border-color: var(--astro-orange);
  background: #ff9a4d;
  color: #1a0d00;
}
.astro-console {
  border: 1px solid rgba(199, 124, 245, 0.25);
  border-radius: 12px;
  background: var(--astro-bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.astro-console__bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--astro-line);
}
.astro-console__bar i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--astro-violet);
  opacity: 0.6;
}
.astro-console__bar span {
  margin-left: auto;
  color: var(--astro-muted);
  font: 0.5rem var(--md-code-font);
}
.astro-console__map {
  width: 100%;
  height: 10.2rem;
  display: block;
}
.astro-console__commands {
  padding: 0.7rem 1rem 1rem;
  border-top: 1px solid var(--astro-line);
  font: 0.63rem/2 var(--md-code-font);
}
.astro-console__commands span {
  color: var(--astro-green);
}
.astro-orbit {
  transform-origin: 200px 105px;
  animation: astro-orbit 28s linear infinite;
}
.astro-signal {
  stroke-dasharray: 6 12;
  animation: astro-signal 3s linear infinite;
}
.astro-beacon {
  transform-box: fill-box;
  transform-origin: center;
  animation: astro-beacon 3s ease-in-out infinite;
}
.astro-home-intro {
  max-width: 48rem;
  color: var(--astro-muted);
  margin: 1.4rem 0;
}
.md-typeset .grid.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
.md-typeset .grid.cards > ul > li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1.1rem;
  border-radius: var(--astro-radius);
  border: 1px solid var(--astro-line);
  background: var(--astro-panel);
  box-shadow: none;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  transform: translateY(-3px);
  border-color: var(--astro-violet);
}
.md-typeset .grid.cards > ul > li strong {
  display: block;
  color: var(--astro-ink);
  margin: 0.5rem 0;
}
.astro-card-icon {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--astro-cyan);
}
.grid.cards li:nth-child(2) .astro-card-icon {
  color: var(--astro-green);
}
.grid.cards li:nth-child(3) .astro-card-icon {
  color: var(--astro-orange-ink);
}
.grid.cards li:nth-child(4) .astro-card-icon {
  color: var(--astro-pink);
}
.grid.cards li:hover .astro-card-icon,
.grid.cards li:focus-within .astro-card-icon {
  animation: astro-float 2.5s ease-in-out infinite;
}
.astro-capabilities {
  padding: 1.2rem 1.5rem;
  background: var(--astro-panel);
  border: 1px solid var(--astro-line);
  border-radius: var(--astro-radius);
}
.astro-capabilities strong {
  color: var(--astro-cyan);
}
.md-typeset .astro-capabilities ul {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 2rem;
  list-style: none;
}
.md-typeset .astro-capabilities li {
  margin: 0.7rem 0;
}
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--astro-orange);
  outline-offset: 4px;
}
@keyframes astro-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes astro-signal {
  to {
    stroke-dashoffset: -36;
  }
}
@keyframes astro-beacon {
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}
@keyframes astro-float {
  50% {
    transform: translateY(-4px) rotate(-6deg);
  }
}
.astro-motion-paused *,
.astro-motion-paused *::before,
.astro-motion-paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
}
.astro-motion-paused .md-typeset .grid.cards > ul > li:hover,
.astro-motion-paused .md-typeset .grid.cards > ul > li:focus-within {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid.cards > ul > li:focus-within {
    transform: none;
  }
}
@media (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title {
    background: var(--astro-panel-2);
    color: var(--astro-ink);
  }
  .md-nav--primary .md-nav__source {
    background: var(--astro-bg);
  }
}
@media (max-width: 960px) {
  .astro-hero {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .md-typeset .grid.cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .astro-context__home span {
    display: none;
  }
}
@media (max-width: 640px) {
  .md-content__inner {
    margin: 0 0.7rem;
    padding: 1.15rem;
  }
  .md-typeset h1 {
    font-size: 1.65rem;
  }
  .astro-hero {
    grid-template-columns: 1fr;
    padding: 1.25rem;
    gap: 1.2rem;
  }
  .astro-console__map {
    height: 8rem;
  }
  .astro-context {
    width: calc(100% - 1.4rem);
    gap: 0.4rem;
    font-size: 0.52rem;
  }
  .md-typeset .grid.cards,
  .md-typeset .astro-capabilities ul {
    grid-template-columns: 1fr;
  }
  .astro-capabilities {
    padding: 0.8rem 1.1rem;
  }
}
@media print {
  .astro-sky,
  .astro-context,
  .astro-console {
    display: none;
  }
  .md-content__inner,
  .astro-hero,
  .astro-capabilities,
  .md-typeset .grid.cards > ul > li {
    background: transparent;
    box-shadow: none;
  }
  .astro-hero {
    display: block;
  }
}