/* ================================================================== *
 * qjax — a flat, high-contrast theme in Google Sans Flex (text) and   *
 * Google Sans Code (code), layered over Material for MkDocs.          *
 *                                                                     *
 * Ported from the Docsforge template. Two deliberate departures from   *
 * it, both marked `qjax:` below:                                      *
 *   1. the accent is taken from the logo ramp rather than the darkest  *
 *      end of the neutral ramp, so links carry the brand;             *
 *   2. the logo is a full-color mark, so the template's white-line-art *
 *      treatments (header glow, hero invert) are dropped.             *
 *                                                                     *
 * Everything is namespaced `--site-*` / `.site-*`, so it never         *
 * collides with Material (`md-`) or mkdocstrings (`doc-`) classes.     *
 *                                                                     *
 * To rebrand: swap the nine `--site-c-*` ramp values below. Every      *
 * other color in this file — and every Material variable it maps —     *
 * is derived from that ramp, so nothing else needs touching.           *
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * The palette. A single neutral ramp, lightest → darkest, plus the     *
 * two logo colors the accent is drawn from.                           *
 * ------------------------------------------------------------------ */
:root {
  --site-c-bright-snow:   #f8f9fa;
  --site-c-platinum:      #e9ecef;
  --site-c-alabaster:     #dee2e6;
  --site-c-pale-slate:    #ced4da;
  --site-c-pale-slate-2:  #adb5bd;
  --site-c-slate-grey:    #6c757d;
  --site-c-iron-grey:     #495057;
  --site-c-gunmetal:      #343a40;
  --site-c-carbon-black:  #212529;

  /* qjax: from the logo ramp. Bondi Blue is legible on Bright Snow;
     Light Green 2 is legible on Carbon Black. */
  --site-c-bondi-blue:    #168aad;
  --site-c-light-green:   #99d98c;
}

/* ------------------------------------------------------------------ *
 * Light scheme — Bright Snow page, Carbon Black ink.                  *
 * ------------------------------------------------------------------ */
:root,
[data-md-color-scheme="default"] {
  /* qjax: accent is the logo's deep teal rather than the template's
     Carbon Black, so links and active nav items read as brand. */
  --md-accent-fg-color: var(--site-c-bondi-blue);
  --md-accent-fg-color--transparent: rgba(22, 138, 173, 0.1);

  --md-primary-fg-color: var(--site-c-carbon-black);
  --md-primary-fg-color--light: var(--site-c-gunmetal);
  --md-primary-fg-color--dark: var(--site-c-carbon-black);
  --md-primary-bg-color: var(--site-c-bright-snow);
  --md-primary-bg-color--light: var(--site-c-pale-slate);

  --md-default-bg-color: var(--site-c-bright-snow);
  --md-default-bg-color--light: var(--site-c-bright-snow);
  --md-default-bg-color--lighter: var(--site-c-platinum);
  --md-default-bg-color--lightest: var(--site-c-alabaster);

  --md-default-fg-color: var(--site-c-gunmetal);
  --md-default-fg-color--light: var(--site-c-slate-grey);
  --md-default-fg-color--lighter: var(--site-c-pale-slate-2);
  --md-default-fg-color--lightest: var(--site-c-alabaster);

  --md-code-bg-color: var(--site-c-platinum);
  --md-code-fg-color: var(--site-c-carbon-black);

  --md-footer-bg-color: var(--site-c-carbon-black);
  --md-footer-bg-color--dark: var(--site-c-carbon-black);
  --md-footer-fg-color: var(--site-c-bright-snow);
  --md-footer-fg-color--light: var(--site-c-pale-slate-2);
  --md-footer-fg-color--lighter: var(--site-c-slate-grey);

  /* Site chrome. */
  --site-heading: var(--site-c-carbon-black);
  --site-border: var(--site-c-alabaster);
  --site-border-strong: var(--site-c-pale-slate-2);
  --site-hover: var(--site-c-platinum);
}

/* ------------------------------------------------------------------ *
 * Dark scheme — Carbon Black page, Bright Snow ink. Same ramp, read   *
 * from the other end.                                                 *
 * ------------------------------------------------------------------ */
[data-md-color-scheme="slate"] {
  --md-hue: 210;

  /* qjax: the light-green end of the logo ramp on the dark page. */
  --md-accent-fg-color: var(--site-c-light-green);
  --md-accent-fg-color--transparent: rgba(153, 217, 140, 0.1);

  --md-primary-fg-color: var(--site-c-carbon-black);
  --md-primary-fg-color--light: var(--site-c-gunmetal);
  --md-primary-fg-color--dark: var(--site-c-carbon-black);
  --md-primary-bg-color: var(--site-c-bright-snow);
  --md-primary-bg-color--light: var(--site-c-pale-slate-2);

  --md-default-bg-color: var(--site-c-carbon-black);
  --md-default-bg-color--light: var(--site-c-carbon-black);
  --md-default-bg-color--lighter: var(--site-c-gunmetal);
  --md-default-bg-color--lightest: var(--site-c-iron-grey);

  --md-default-fg-color: var(--site-c-platinum);
  --md-default-fg-color--light: var(--site-c-pale-slate-2);
  --md-default-fg-color--lighter: var(--site-c-slate-grey);
  --md-default-fg-color--lightest: var(--site-c-gunmetal);

  --md-code-bg-color: var(--site-c-gunmetal);
  --md-code-fg-color: var(--site-c-platinum);

  --md-footer-bg-color: var(--site-c-carbon-black);
  --md-footer-bg-color--dark: var(--site-c-carbon-black);
  --md-footer-fg-color: var(--site-c-bright-snow);
  --md-footer-fg-color--light: var(--site-c-pale-slate-2);
  --md-footer-fg-color--lighter: var(--site-c-slate-grey);

  --site-heading: var(--site-c-bright-snow);
  --site-border: var(--site-c-iron-grey);
  --site-border-strong: var(--site-c-slate-grey);
  --site-hover: var(--site-c-gunmetal);
}

/* ------------------------------------------------------------------ *
 * Type — Google Sans Flex for text and UI, Google Sans Code for code. *
 * Both are set by `theme.font` in mkdocs.yml and reach us through     *
 * Material's font variables, so that config stays the single source.  *
 * Google Sans Flex ships no italic faces; browsers synthesize them.   *
 * ------------------------------------------------------------------ */
body,
.md-typeset,
.md-nav,
.md-header,
.md-footer,
input,
button {
  font-family: var(--md-text-font-family), system-ui, -apple-system, sans-serif;
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--md-code-font-family), ui-monospace, SFMono-Regular, Menlo,
    monospace;
}

.md-typeset {
  line-height: 1.7;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------ *
 * Structural chrome — borders that frame the columns.                 *
 * ------------------------------------------------------------------ */
/* Header and footer stay Carbon Black in both schemes, so the white
   line-art logo and the page frame read the same either way. */
.md-header {
  background-color: var(--site-c-carbon-black);
  color: var(--site-c-bright-snow);
  border-bottom: 1px solid var(--site-c-iron-grey);
  box-shadow: none;
}
.md-footer {
  background-color: var(--site-c-carbon-black);
  border-top: 1px solid var(--site-c-iron-grey);
}
.md-footer-meta {
  background-color: var(--site-c-carbon-black);
  font-size: 0.68rem;
}
.md-footer__link:hover,
.md-footer-meta .md-footer__link:focus {
  color: var(--site-c-bright-snow);
  opacity: 1;
}

/* Sidebar / TOC column dividers. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    border-right: 1px solid var(--site-border);
  }
  .md-sidebar--secondary {
    border-left: 1px solid var(--site-border);
  }
}

/* Header title + search, squared off. */
.md-header__title {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.md-search__form {
  border-radius: 0;
  border: 1px solid var(--site-c-iron-grey);
  background-color: var(--site-c-gunmetal);
  box-shadow: none;
}
.md-search__form:hover {
  background-color: var(--site-c-iron-grey);
}
.md-search__input {
  border-radius: 0;
  color: var(--site-c-bright-snow);
}
.md-search__input::placeholder,
.md-search__icon {
  color: var(--site-c-pale-slate-2);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__output,
.md-search__output {
  border-radius: 0;
}

/* qjax: the header mark is full-color isometric art, not white line-art, so
   the template's white glow is dropped. `object-fit` keeps the mark from
   being stretched into the square box. */
.md-header__button.md-logo {
  padding: 0.2rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.9rem;
  width: 1.9rem;
  object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * Navigation — flat labels, boxed active item.                        *
 * ------------------------------------------------------------------ */
.md-nav {
  font-size: 0.72rem;
}
.md-nav__title {
  font-weight: 700;
}

/* Section labels (Getting started / User guide / API reference). */
.md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > label.md-nav__link {
  color: var(--site-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  opacity: 0.9;
  margin-top: 0.5rem;
}

/* Links: quieter, squared hover box. */
.md-nav__link {
  border-radius: 0;
  transition: background-color 100ms ease, color 100ms ease;
}
.md-nav__link:hover {
  color: var(--site-heading);
  background-color: var(--site-hover);
}
.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover,
.md-nav__item .md-nav__link--active {
  color: var(--site-heading);
  font-weight: 700;
  background-color: var(--site-hover);
  box-shadow: inset 3px 0 0 var(--md-accent-fg-color);
  padding-left: 0.9rem;
}

/* TOC ("On this page") heading. */
.md-nav--secondary .md-nav__title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Typography — mono headings, subtle underlined links.                *
 * ------------------------------------------------------------------ */
.md-typeset h1 {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--site-heading);
  margin-bottom: 0.3rem;
}
.md-typeset h2 {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0;
  color: var(--site-heading);
  margin-top: 2.4em;
  padding-top: 1em;
  border-top: 1px solid var(--site-border);
}
.md-typeset h3 {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--site-heading);
}
.md-typeset h4 {
  font-weight: 700;
  color: var(--site-heading);
}

/* Inline links: thin underline, accent on hover. */
.md-typeset a {
  color: var(--md-default-fg-color);
  text-decoration: underline;
  text-decoration-color: var(--site-border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 100ms ease, text-decoration-color 100ms ease;
}
.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: var(--md-accent-fg-color);
}
.md-typeset .headerlink,
.md-nav__link,
.md-typeset .md-button {
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Surfaces — everything square and flat.                              *
 * ------------------------------------------------------------------ */
.md-typeset pre > code,
.md-typeset code {
  border-radius: 0;
}
.md-typeset code {
  font-size: 0.86em;
  padding: 0.1em 0.35em;
}
.md-typeset .highlight,
.md-typeset pre > code {
  border: 1px solid var(--site-border);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--site-border);
  border-radius: 0;
  overflow: hidden;
  font-size: 0.72rem;
}
.md-typeset table:not([class]) th {
  font-weight: 700;
  color: var(--site-heading);
  background: var(--site-hover);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--site-border);
}

.md-typeset img {
  border-radius: 0;
}
.md-typeset figure img,
.md-typeset p > img:not(.site-hero__logo) {
  border: 1px solid var(--site-border);
  box-shadow: none;
}
.md-typeset figcaption {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  margin-top: 0.4em;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0;
  border: 1px solid var(--site-border);
  border-left-width: 3px;
  border-left-color: var(--site-border-strong);
  background-color: var(--md-default-bg-color);
  font-size: 0.72rem;
  box-shadow: none;
}

/* Admonitions stay on the neutral ramp — Material's hue-coded variants
   are overridden so callouts read as weight, not color. Emphasis rises
   with the left rule: note → tip → warning → danger.

   qjax: Material ≥ 9.6 colors each kind through `.md-typeset .admonition.note`
   (three class selectors), which outranks the template's `.md-typeset .note`
   (two) and left every callout Material blue. The `[class]` attribute selector
   below matches their specificity without enumerating every kind, and the
   ladder that follows re-asserts the per-kind left rule at the same weight.
   Worth folding back into the template. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  border-color: var(--site-border);
  border-left-color: var(--site-border-strong);
}
.md-typeset .admonition[class] > .admonition-title,
.md-typeset details[class] > summary {
  background-color: var(--site-hover);
  border: none;
  color: var(--site-heading);
  font-weight: 700;
}
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before {
  background-color: var(--site-heading);
}
/* The fold marker on collapsible blocks. */
.md-typeset .admonition[class] > .admonition-title::after,
.md-typeset details[class] > summary::after {
  color: var(--site-heading);
}
.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 0.6rem;
}
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset .admonition.example,
.md-typeset .admonition.quote,
.md-typeset details.note,
.md-typeset details.info,
.md-typeset details.abstract,
.md-typeset details.example,
.md-typeset details.quote {
  border-left-color: var(--site-c-pale-slate-2);
}
.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset .admonition.question,
.md-typeset details.tip,
.md-typeset details.success,
.md-typeset details.question {
  border-left-color: var(--site-c-slate-grey);
}
.md-typeset .admonition.warning,
.md-typeset .admonition.failure,
.md-typeset details.warning,
.md-typeset details.failure {
  border-left-color: var(--site-heading);
}
.md-typeset .admonition.danger,
.md-typeset .admonition.bug,
.md-typeset details.danger,
.md-typeset details.bug {
  border-left-width: 5px;
  border-left-color: var(--site-heading);
}

/* Content buttons flat. */
.md-typeset .md-button {
  border-radius: 0;
  color: var(--site-heading);
  border-color: var(--site-border-strong);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-default-bg-color);
}
.md-typeset .md-button--primary {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-default-bg-color);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: transparent;
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

/* mkdocstrings signatures. */
.md-typeset .doc-signature > pre {
  border-radius: 0;
}

/* ================================================================== *
 * Home hero — no panel, no gradient, no texture. Just the mark, the   *
 * name, one sentence, and two links, separated from the page by a     *
 * single rule. It inherits the page background, so it reads correctly *
 * in both schemes. Markup lives in docs/index.md.                     *
 * ================================================================== */
/* Material reserves `padding-top: .6rem` plus a `.4rem` ::before spacer
   above the first block of every page. The hero sets its own rhythm, so
   reclaim that 1rem and let it sit right under the header. */
.md-content__inner:has(> .site-hero) {
  padding-top: 0;
}
.md-content__inner:has(> .site-hero)::before {
  display: none;
}

.site-hero {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2.25rem;
  padding: 1.25rem 1rem 2rem;
  border-bottom: 1px solid var(--site-border);
}

/* Markdown wraps the logo and the button row in paragraphs of their
   own; zero them so the spacing below is the only spacing there is.
   The tagline rule that follows re-asserts its own margins. */
.md-typeset .site-hero > p {
  margin: 0;
}

/* qjax: the hero carries the full `qjax` wordmark (docs/logo.svg), which is
   wider than it is tall, so the width is capped and the height follows the
   aspect ratio. It is full-color and reads on both schemes, so the template's
   light-scheme invert is dropped. */
.site-hero__logo {
  display: block;
  width: min(300px, 78%);
  height: auto;
  margin: 0 auto 0.9rem;
  border: none !important;
  box-shadow: none !important;
}

.md-typeset .site-hero__title {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--site-heading);
  border-top: none;
  padding-top: 0;
}
.md-typeset .site-hero__title .headerlink {
  display: none;
}

/* qjax: the hero's name is carried by the wordmark, so the page's <h1> is
   hidden from sight but left in the accessibility tree and the document
   outline. Not `display: none`, which would drop it from both. */
.md-typeset .site-hero__title--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.md-typeset .site-hero__tagline {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  max-width: 30rem;
  margin: 0.7rem auto 1.4rem;
}

/* Spacing only — the shared .md-button rules already handle the
   colors, and they follow the active scheme. */
.site-hero .md-button {
  margin: 0.25rem 0.2rem;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.5em 1.2em;
}

.site-hero + h2 {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

@media screen and (max-width: 44.9375em) {
  .site-hero {
    padding: 1rem 1rem 1.75rem;
    margin-bottom: 1.75rem;
  }
  .site-hero__logo { width: min(240px, 86%); }
  .md-typeset .site-hero__title { font-size: 1.8rem; }
}

/* ------------------------------------------------------------------ *
 * Feature grid — flat bordered cards. Auto-fits 1–3 columns.          *
 * ------------------------------------------------------------------ */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin: 1.5rem 0;
  background: var(--site-border);
  border: 1px solid var(--site-border);
}
.site-card {
  padding: 1.1rem 1.25rem;
  background: var(--md-default-bg-color);
  transition: background-color 120ms ease;
}
.site-card:hover {
  background-color: var(--site-hover);
}
.site-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--site-heading);
}
.site-card p {
  margin: 0;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}
.site-card a {
  text-decoration: none;
}
.site-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}