/* SilentSwarm "Orpheon" brand theme for the docs — mirrors the app's
   theme.css palette (dark bg, warm-peach primary, hot-orange accent). */

/* Fonts: self-hosted, not fetched from Google. The docs are served under
   /docs/ on the same origin as the app, so they reuse the faces the leader
   already vendors at /vendor/fonts/ (scripts/vendor_frontend.py) - one copy,
   one cache, and no visitor IP address sent to a third party. A standalone
   `mkdocs serve` has no /vendor/, and falls back to the system stack. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;
  src:url(/vendor/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;
  src:url(/vendor/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:700;
  src:url(/vendor/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;
  src:url(/vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:600;
  src:url(/vendor/fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:700;
  src:url(/vendor/fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;
  src:url(/vendor/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}

/* `font: false` in mkdocs.yml leaves Material on the system stack; these put
   the brand faces back.

   It has to be --md-text-font / --md-code-font, NOT the *-family variables:
   Material *derives* those from these two and appends its own fallback stack
   (`--md-text-font-family: var(--md-text-font, _), -apple-system, ...`).
   Setting the derived variable instead is silently ignored, which is how the
   docs shipped for one deploy in the system sans while the headings - styled
   by family name directly, further down this file - looked correct. */
:root {
  --md-text-font: 'Inter';
  --md-code-font: 'JetBrains Mono';
}

:root {
  --ss-bg:        #131313;
  --ss-card:      #1c1b1b;
  --ss-card-elv:  #201f1f;
  --ss-fg:        #e5e2e1;
  --ss-muted:     #ad897e;
  --ss-primary:   #ffb59e;
  --ss-hot:       #ff571a;
  --ss-secondary: #b1c5ff;
  --ss-border:    rgba(255, 255, 255, 0.08);
}

/* Map Material's design tokens onto the Orpheon palette (dark scheme). */
[data-md-color-scheme="slate"] {
  --md-hue: 0;
  --md-default-bg-color:        var(--ss-bg);
  --md-default-bg-color--light: var(--ss-card);
  --md-default-fg-color:            var(--ss-fg);
  --md-default-fg-color--light:     #cfc9c6;
  --md-default-fg-color--lighter:   var(--ss-muted);
  --md-default-fg-color--lightest:  rgba(255, 255, 255, 0.06);

  /* Header + nav: dark like the app's console header, not a solid orange bar. */
  --md-primary-fg-color:        var(--ss-card);
  --md-primary-fg-color--light: var(--ss-card-elv);
  --md-primary-fg-color--dark:  var(--ss-bg);
  --md-primary-bg-color:        var(--ss-fg);
  --md-primary-bg-color--light: var(--ss-muted);

  /* Admonitions ship in Material's own blues, greens and ambers, which put the
     only cold colour on an otherwise warm page - a `!!! note` box read as
     something pasted in from another site. Each keyword gets a colour from the
     Orpheon palette instead: notes in the peach primary, tips and successes in
     the cool secondary (where the contrast is the point), warnings and dangers
     in the hot orange the rest of the UI already uses to mean "look at this". */
  --md-admonition-bg-color: var(--ss-card);
  --md-admonition-fg-color: var(--ss-fg);

  /* Links, hovers, focus: the hot orange / peach accents. */
  --md-accent-fg-color:       var(--ss-hot);
  --md-accent-fg-color--transparent: rgba(255, 87, 26, 0.1);
  --md-typeset-a-color:       var(--ss-primary);

  /* Was #0e0e0e: 1.05:1 against the page, a chip you cannot see. Inline code
     has to read as a distinct object in a sentence, not just a font change. */
  --md-code-bg-color: #26221f;
  --md-code-fg-color: #e6d9d3;

  --md-footer-bg-color:      #0e0e0e;
  --md-footer-bg-color--dark: #0b0b0b;
}

/* Search box + cards pick up the card surface. */
[data-md-color-scheme="slate"] .md-search__form { background-color: var(--ss-card-elv); }
[data-md-color-scheme="slate"] .md-search__form:hover { background-color: #262525; }

/* Headings in Space Grotesk, matching the app. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title,
.md-nav__title {
  font-family: "Space Grotesk", var(--md-text-font-family, sans-serif);
  letter-spacing: -0.01em;
}
.md-typeset h1 { color: var(--ss-fg); font-weight: 700; }

/* Link hover uses the hot orange. */
.md-typeset a:hover { color: var(--ss-hot); }

/* Give the header a subtle bottom border like the app's console. */
.md-header { border-bottom: 1px solid var(--ss-border); }

/* Slightly larger, crisper logo in the header. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.5rem; width: auto; }

/* Screenshots in the user guide: rounded, bordered so they sit on the dark bg. */
.md-typeset img[src*="06_user_guide/img/"] {
  border: 1px solid var(--ss-border);
  border-radius: 6px;
}

/* Footer: "SilentSwarm is a product of NexPatch AI" + company details. */
/* ── Footer ────────────────────────────────────────────────────────────────
   Sizes are in px, not rem. Material sets the root to 125%, so a `rem` here is
   20px - which is how the footer ended up set at 16.4px, larger than the body
   copy it sits under. Centred to match the app and landing footers, which are
   the same content in the same order. */
.ss-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  text-align: center;
  line-height: 1.5;
}
.ss-footer__by {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ss-fg);
  font-size: 12px;
  text-decoration: none;
  opacity: 0.75;
}
.ss-footer__by img { display: block; height: 14px; vertical-align: middle; }
.ss-footer__by:hover { opacity: 1; }

/* Attribution and links share a line on a wide window and stack on a narrow
   one. `gap` does the spacing, so no separator character reaches a screen
   reader. */
.ss-footer__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 20px;
}
.ss-footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  font-size: 12px;
}
.ss-footer__links a { color: var(--ss-muted); text-decoration: none; }
.ss-footer__links a:hover,
.ss-footer__links a:focus-visible { color: var(--ss-primary); }

.ss-footer__legal {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ss-muted);
  opacity: 0.7;
}
.ss-footer__legal a { color: var(--ss-muted); }
.ss-footer__legal a:hover { color: var(--ss-primary); }

/* Material's wrapper. `.md-copyright` carries both our block and the theme's
   own "Made with" line as a bare text node after it, at .64rem and left
   aligned - so centring and sizing have to happen here, not on our span. */
.md-footer-meta { border-top: 1px solid var(--ss-border); }
.md-footer-meta__inner { padding: 12px 0 14px; }
.md-copyright {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 10px;      /* the "Made with" line; ours set their own sizes */
  opacity: 0.75;
}
.md-copyright__highlight { color: inherit; }

/* ── Admonitions in the brand palette ──────────────────────────────────────
   Material keys each admonition off two custom properties: the icon mask and
   the accent colour used for the border and the title bar. Setting the pair
   per keyword keeps the built-in icons and only changes the colour. */
.md-typeset .admonition,
.md-typeset details {
  border-color: var(--ss-border);
  background: var(--ss-card);
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary { background: rgba(255, 181, 158, 0.08) }

.md-typeset .note > .admonition-title,
.md-typeset .note > summary { background: rgba(255, 181, 158, 0.10) }
.md-typeset .note { border-color: rgba(255, 181, 158, 0.45) }
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before { background-color: var(--ss-primary) }

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary { background: rgba(177, 197, 255, 0.10) }
.md-typeset .tip, .md-typeset .info { border-color: rgba(177, 197, 255, 0.45) }
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before { background-color: var(--ss-secondary) }

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary,
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary { background: rgba(255, 87, 26, 0.12) }
.md-typeset .warning, .md-typeset .danger { border-color: rgba(255, 87, 26, 0.5) }
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before,
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before { background-color: var(--ss-hot) }

/* ── Card grid on the home page ────────────────────────────────────────────
   Material's default cards sit on the page background; these get the card
   surface the rest of the site uses, and the same left accent rule the app's
   feature cards carry, so the two sites read as one product. */
.md-typeset .grid.cards > ul > li {
  position: relative;
  border: 1px solid var(--ss-border);
  border-radius: 6px;
  background: var(--ss-card);
  box-shadow: none;
  transition: border-color .15s ease, transform .15s ease;
}
.md-typeset .grid.cards > ul > li::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--ss-primary); opacity: .5;
  border-radius: 6px 0 0 6px;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: rgba(255, 181, 158, 0.45);
  transform: none;              /* no lift: it fights the reduced-motion rule */
}
.md-typeset .grid.cards > ul > li > hr {
  margin: .6em 0 .8em; border-color: var(--ss-border);
}
.md-typeset .grid.cards .twemoji { color: var(--ss-primary) }

/* ── Buttons ───────────────────────────────────────────────────────────────
   Material's .md-button borrows --md-primary-fg-color, which this theme maps
   to the dark card surface so the header is not a solid orange bar. That made
   every button dark-on-dark: present in the markup, invisible on the page.
   Buttons get the accent explicitly instead. */
.md-typeset .md-button {
  color: var(--ss-primary);
  border-color: rgba(255, 181, 158, 0.5);
  border-radius: 6px;
  font-weight: 500;
}
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--ss-primary);
  border-color: var(--ss-primary);
  color: var(--ss-bg);
}
.md-typeset .md-button--primary {
  background-color: var(--ss-primary);
  border-color: var(--ss-primary);
  color: var(--ss-bg);
}