/* ============================================================
   Chimera Docs — matches the marketing site's gold/silver palette.
   ============================================================ */

:root > * {
  --copyright-accent-colour: #8a8d94;

  /* Brand tokens — keep these in sync with Site/src/app/globals.css */
  --chimera-bg: #0a0a0c;
  --chimera-bg-soft: #14141a;
  --chimera-fg: #f3f1ea;
  --chimera-gold: #d4b46a;
  --chimera-gold-light: #e8d199;
  --chimera-gold-dark: #a08540;
  --chimera-silver: #c4c8d0;
  --chimera-silver-dark: #8a8d94;
  --chimera-border: rgba(255, 255, 255, 0.08);
}

/* ---------- Light theme (kept readable, but the docs default to dark) ---------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--chimera-gold-dark);
  --md-primary-fg-color--light: var(--chimera-gold-light);
  --md-primary-fg-color--dark: #7d6730;

  --md-accent-fg-color: var(--chimera-gold-dark);
  --md-accent-fg-color--transparent: rgba(212, 180, 106, 0.12);

  --md-typeset-a-color: var(--chimera-gold-dark);
}

/* ---------- Dark theme (default for Chimera docs) ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 240;

  --md-default-bg-color: var(--chimera-bg);
  --md-default-bg-color--light: rgba(20, 20, 26, 0.72);
  --md-default-bg-color--lighter: rgba(20, 20, 26, 0.5);
  --md-default-bg-color--lightest: rgba(20, 20, 26, 0.3);

  --md-default-fg-color: var(--chimera-fg);
  --md-default-fg-color--light: var(--chimera-silver);
  --md-default-fg-color--lighter: var(--chimera-silver-dark);
  --md-default-fg-color--lightest: rgba(196, 200, 208, 0.4);

  --md-primary-fg-color: var(--chimera-gold);
  --md-primary-fg-color--light: var(--chimera-gold-light);
  --md-primary-fg-color--dark: var(--chimera-gold-dark);
  --md-primary-bg-color: var(--chimera-bg);
  --md-primary-bg-color--light: rgba(10, 10, 12, 0.8);

  --md-accent-fg-color: var(--chimera-gold-light);
  --md-accent-fg-color--transparent: rgba(232, 209, 153, 0.10);
  --md-accent-bg-color: var(--chimera-bg);
  --md-accent-bg-color--light: rgba(10, 10, 12, 0.7);

  --md-typeset-a-color: var(--chimera-gold-light);

  /* Code highlighting — warm/cool mix that reads against dark bg */
  --md-code-fg-color: #e9e6dc;
  --md-code-bg-color: #14141a;
  --md-code-hl-color: rgba(212, 180, 106, 0.18);
  --md-code-hl-color--light: rgba(212, 180, 106, 0.08);

  --md-code-hl-number-color: #e8a87c;
  --md-code-hl-special-color: #d4b46a;
  --md-code-hl-function-color: #e8d199;
  --md-code-hl-constant-color: #c4c8d0;
  --md-code-hl-keyword-color: #d4b46a;
  --md-code-hl-string-color: #b8c5a8;
  --md-code-hl-name-color: #e9e6dc;
  --md-code-hl-operator-color: #c4c8d0;
  --md-code-hl-punctuation-color: #8a8d94;
  --md-code-hl-comment-color: #6c6f76;
  --md-code-hl-generic-color: #c9a961;
  --md-code-hl-variable-color: #d6c8a3;
}

/* ---------- Breadcrumb (md-path) ---------- */
.md-path__link {
  color: var(--chimera-silver-dark);
  transition: color 0.15s ease;
}
.md-path__item:not(.md-path__item--current) .md-path__link:hover {
  color: var(--chimera-gold-light);
}
.md-path__item--current .md-path__link {
  color: var(--chimera-silver);
  cursor: default;
}

/* ---------- Page chrome ---------- */
body,
.md-main,
.md-container {
  background: var(--chimera-bg);
}

.md-header {
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--chimera-border);
  box-shadow: none;
  color: var(--chimera-silver);
}

/* All header text/icons inherit silver — fix for unreadable right side. */
.md-header,
.md-header *,
.md-header a,
.md-header__title,
.md-header__topic,
.md-header__topic .md-ellipsis,
.md-header__option,
.md-header__button {
  color: var(--chimera-silver);
}

.md-header__button.md-icon,
.md-header__button.md-icon svg {
  fill: var(--chimera-silver);
  color: var(--chimera-silver);
}

.md-header__button:hover,
.md-header__button:focus {
  color: var(--chimera-gold-light);
  opacity: 1;
}

/* Search input on the right side */
.md-search__input {
  background: rgba(255, 255, 255, 0.04);
  color: var(--chimera-fg);
  border: 1px solid var(--chimera-border);
}
.md-search__input::placeholder {
  color: var(--chimera-silver-dark);
}
.md-search__input + .md-search__icon,
.md-search__icon {
  color: var(--chimera-silver-dark);
  fill: var(--chimera-silver-dark);
}
.md-search__input:focus,
.md-search__input:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(212, 180, 106, 0.35);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  background: rgba(255, 255, 255, 0.08);
}

/* Palette / language / repo buttons */
.md-header__option label.md-icon,
.md-header__option label.md-header__button {
  color: var(--chimera-silver);
}
.md-header__option label.md-icon:hover {
  color: var(--chimera-gold-light);
}

.md-tabs {
  background: transparent;
  border-bottom: 1px solid var(--chimera-border);
}
.md-tabs__link {
  color: var(--chimera-silver);
  opacity: 1;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--chimera-gold-light);
}

/* ---------- Footer ---------- */
.md-footer {
  background: var(--chimera-bg);
  border-top: 1px solid var(--chimera-border);
}

/* Prev / next nav above the meta strip — keep it subtle, not heavy */
.md-footer__inner {
  background: transparent;
  padding: 0.6rem 0.8rem;
}

.md-footer__link {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--chimera-border);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin: 0.25rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.md-footer__link:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(212, 180, 106, 0.35);
  transform: translateY(-1px);
}
.md-footer__title {
  color: var(--chimera-fg);
}
.md-footer__direction {
  color: var(--chimera-silver-dark);
  opacity: 1;
}

/* Bottom meta strip (copyright + social) — hidden site-wide.
   Prev/next nav above is kept for sequential reading. */
.md-footer-meta {
  display: none;
}

/* ---------- Subtle aurora behind the page header, matching the site ---------- */
.md-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 200% at 50% -50%, rgba(212, 180, 106, 0.10), transparent 70%),
    radial-gradient(40% 200% at 80% -50%, rgba(196, 200, 208, 0.06), transparent 70%);
  z-index: -1;
}

/* ---------- Logo + branding ---------- */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

.md-header__title {
  color: var(--chimera-silver);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Links ---------- */
.md-typeset a {
  color: var(--chimera-gold-light);
  transition: color 0.15s ease;
}
.md-typeset a:hover {
  color: var(--chimera-gold);
}

/* ---------- Buttons / search input ---------- */
.md-search__form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--chimera-border);
}
.md-search__form:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- Sidebar nav ---------- */
.md-nav__title {
  display: none !important;
}

.md-nav__link {
  position: relative;
  color: inherit;
}

.md-nav__item--section > .md-nav__link {
  border-bottom: 1px solid var(--chimera-border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.1rem;
  color: var(--chimera-silver);
}

.md-nav__link.md-nav__link--active {
  color: var(--chimera-gold-light);
}

.md-nav__link.md-nav__link--active:not(:has(.md-nav__icon.md-icon))::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--chimera-gold-light) 0%,
    var(--chimera-gold) 100%
  );
  border-radius: 2px;
  opacity: 0;
  animation:
    navHighlight 0.3s ease forwards,
    navIdlePulseBar 3s ease-in-out infinite;
}

@keyframes navIdlePulseBar {
  0%,
  100% {
    transform: translateY(-50%) scaleY(1);
  }
  50% {
    transform: translateY(-50%) scaleY(1.2);
  }
}

@keyframes navHighlight {
  from {
    opacity: 0;
    left: -0.9rem;
  }
  to {
    opacity: 1;
    left: -0.4rem;
  }
}

/* ---------- Headings ---------- */
.md-typeset h1,
.md-typeset h2 {
  color: var(--chimera-fg);
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  background: linear-gradient(
    180deg,
    #f0eee5 0%,
    #d8d8da 40%,
    var(--chimera-gold) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.md-typeset h2,
.md-typeset h3 {
  color: var(--chimera-silver);
}

/* ---------- Inline code ---------- */
.md-typeset code {
  background: rgba(212, 180, 106, 0.10);
  color: var(--chimera-gold-light);
  border: 1px solid rgba(212, 180, 106, 0.18);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Code in headings should not get its own pill */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

/* ---------- Code blocks ----------
   The .highlight wrapper is the single visual frame: it owns the border,
   border-radius, and surface color. Everything inside (title bar, line
   numbers, code body) is transparent on its own and inherits.
*/
.md-typeset pre,
.md-typeset .highlight {
  margin: 1.1rem 0;
}

.md-typeset .highlight {
  position: relative;
  border: 1px solid var(--chimera-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--chimera-bg-soft);
}

/* Reset every nested surface, border, and pill so the .highlight frame
   is the only visible box. The inline-code styling further down would
   otherwise paint a gold border around the code block's <code> child,
   producing a "box within a box" effect. */
.md-typeset .highlight pre,
.md-typeset .highlight pre > code,
.md-typeset .highlight code,
.md-typeset .highlight .highlighttable,
.md-typeset .highlight .highlighttable .linenos,
.md-typeset .highlight .highlighttable .code,
.md-typeset .highlight .highlighttable .code pre,
.md-typeset .highlight .highlighttable .code pre > code {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Reset the inner highlighttable frame (we already have one via .highlight) */
.md-typeset .highlight .highlighttable {
  border: 0;
  border-radius: 0;
  margin: 0;
  width: 100%;
  display: table;
}

/* Code body — single source of padding per layout, no doubling.
   Two layouts can be produced by pymdownx.highlight:
     1. Plain:        <div.highlight> > <pre> > <code>
     2. Linenums:     <div.highlight> > <table.highlighttable> > <td.code> > <pre> > <code>
   In each layout, exactly ONE element owns the padding. The code element
   itself never has padding so syntax-highlighted text reaches the edges
   of its wrapper consistently. */

.md-typeset .highlight pre {
  margin: 0;
}

.md-typeset .highlight,
.md-typeset .highlight pre,
.md-typeset .highlight pre > code {
  font-size: 0.95em;
  line-height: 1.55;
}

/* Layout 1: padding on <pre> */
.md-typeset .highlight > pre {
  padding: 0.7rem 0.9rem;
}
.md-typeset .highlight > pre > code {
  padding: 0;
}

/* Layout 2: padding on the <td class="code"> cell only */
.md-typeset .highlight .highlighttable .code {
  padding: 0.7rem 0.9rem;
}
.md-typeset .highlight .highlighttable .code pre,
.md-typeset .highlight .highlighttable .code pre > code {
  padding: 0;
}

/* Code-block titles and line numbers are hidden globally — every code block
   is just the code body and a copy icon. The `title="..."` and `linenums="1"`
   directives in the source markdown still parse fine, they just don't render. */
.md-typeset .highlight .filename,
.md-typeset .highlight .title,
.md-typeset .highlight .highlighttable .linenos {
  display: none;
}

/* With the linenos cell gone, the code cell takes the whole row.
   Padding is owned by the cell rule above — don't repeat it here. */
.md-typeset .highlight .highlighttable .code {
  width: 100%;
}

/* Code-block action buttons (copy, etc.) — pinned to top-right of the frame.
   Material has multiple CSS rules for .md-clipboard depending on whether the
   linenumber-table layout is used; force-override every variant so the icon
   sits in the top-right corner regardless. */
.md-typeset .highlight > .md-clipboard,
.md-typeset .highlight .highlighttable .md-clipboard,
.md-typeset .highlight .md-clipboard,
.md-clipboard {
  position: absolute !important;
  top: 0.3rem !important;
  right: 0.3rem !important;
  bottom: auto !important;
  left: auto !important;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--chimera-silver-dark);
  z-index: 2;
}
.md-clipboard:hover {
  color: var(--chimera-gold-light);
}
.md-clipboard.md-icon::after {
  background-color: currentColor;
}

/* ---------- Tables ----------
   Material wraps each table in two divs:
     <div class="md-typeset__scrollwrap">      <- handles horizontal scroll
       <div class="md-typeset__table">         <- defaults to inline-block (!)
         <table>...</table>
       </div>
     </div>
   The inline-block on __table causes the whole frame to shrink-wrap to
   its content. Forcing both wrappers to block + full width makes the
   table reliably fill the article column.
*/
.md-typeset__scrollwrap {
  display: block;
  width: 100%;
  margin: 1.1rem 0;
  border-radius: 10px;
  border: 1px solid var(--chimera-border);
  background: var(--chimera-bg-soft);
  overflow-x: auto;
}

.md-typeset__table {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.md-typeset__scrollwrap table:not([class]),
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.82em;
  border-collapse: separate;
  border-spacing: 0;
}

.md-typeset table:not([class]) th {
  background: rgba(255, 255, 255, 0.025);
  color: var(--chimera-gold-light);
  font-weight: 600;
  font-size: 0.84em;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--chimera-border);
  padding: 0.65rem 1.1rem;
  text-align: left;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--chimera-border);
  padding: 0.6rem 1.1rem;
  color: var(--chimera-silver);
  vertical-align: top;
  line-height: 1.55;
}

.md-typeset table:not([class]) tr:first-child td {
  border-top: 0;
}

.md-typeset table:not([class]) tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Let columns size to their content — narrow types (e.g. `string`) get
   a tight column, wide param names get more room. The whole table still
   fills 100% of the article column via the rule above. */
.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
  white-space: nowrap;
  width: 1%; /* css trick: shrink to content while keeping table 100% wide */
}
.md-typeset table:not([class]) th:not(:first-child),
.md-typeset table:not([class]) td:not(:first-child) {
  white-space: normal;
}

/* ---------- Admonitions ----------
   One admonition = one accent color, applied consistently to:
     - 3px left border accent
     - title text
     - title icon (the ::before pseudo on .admonition-title)
   The other three border sides stay neutral so the frame matches code blocks.
   We declare per-type tokens via CSS custom properties; defaults are gold.

   Each per-type selector sets `border-color` (full 4-sided) at the same
   specificity Material uses, so we win the cascade and keep the frame
   neutral. Then border-left-color provides the accent.
*/

.md-typeset .admonition,
.md-typeset details {
  --adm-accent: var(--chimera-gold);
  --adm-accent-soft: var(--chimera-gold-light);
  --adm-tint: rgba(212, 180, 106, 0.10);

  background: var(--chimera-bg-soft);
  border-radius: 10px;
  border: 1px solid var(--chimera-border);
  border-left: 3px solid var(--adm-accent);
  box-shadow: none;
  font-size: 0.82rem;
  color: var(--chimera-fg);
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background: var(--adm-tint);
  color: var(--adm-accent-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--chimera-border);
}

/* Force icon color to match title — overrides Material's per-type icon variable */
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  background-color: var(--adm-accent-soft);
}

/* Per-type tokens (info / note / tip / abstract / example — gold) */
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.abstract,
.md-typeset details.abstract,
.md-typeset .admonition.example,
.md-typeset details.example {
  --adm-accent: var(--chimera-gold);
  --adm-accent-soft: var(--chimera-gold-light);
  --adm-tint: rgba(212, 180, 106, 0.10);
  border-color: var(--chimera-border);
  border-left-color: var(--adm-accent);
}

/* Warning / attention / caution — peach */
.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.attention,
.md-typeset details.attention,
.md-typeset .admonition.caution,
.md-typeset details.caution {
  --adm-accent: #e8a87c;
  --adm-accent-soft: #f5c8a8;
  --adm-tint: rgba(232, 168, 124, 0.10);
  border-color: var(--chimera-border);
  border-left-color: var(--adm-accent);
}

/* Failure / danger / error / bug — soft red */
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.error,
.md-typeset details.error,
.md-typeset .admonition.bug,
.md-typeset details.bug {
  --adm-accent: #d97766;
  --adm-accent-soft: #efb1a4;
  --adm-tint: rgba(217, 119, 102, 0.10);
  border-color: var(--chimera-border);
  border-left-color: var(--adm-accent);
}

/* Success / check / done — soft green */
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.check,
.md-typeset details.check,
.md-typeset .admonition.done,
.md-typeset details.done {
  --adm-accent: #9bc88f;
  --adm-accent-soft: #c0dab7;
  --adm-tint: rgba(155, 200, 143, 0.10);
  border-color: var(--chimera-border);
  border-left-color: var(--adm-accent);
}

/* Question / FAQ / help — silver */
.md-typeset .admonition.question,
.md-typeset details.question,
.md-typeset .admonition.faq,
.md-typeset details.faq,
.md-typeset .admonition.help,
.md-typeset details.help {
  --adm-accent: var(--chimera-silver);
  --adm-accent-soft: var(--chimera-silver);
  --adm-tint: rgba(196, 200, 208, 0.06);
  border-color: var(--chimera-border);
  border-left-color: var(--adm-accent);
}

/* Quote — silver */
.md-typeset .admonition.quote,
.md-typeset details.quote {
  --adm-accent: var(--chimera-silver-dark);
  --adm-accent-soft: var(--chimera-silver);
  --adm-tint: rgba(196, 200, 208, 0.06);
  border-color: var(--chimera-border);
  border-left-color: var(--adm-accent);
}

/* ---------- Blockquotes ---------- */
.md-typeset blockquote {
  border-left: 3px solid var(--chimera-gold);
  background: rgba(212, 180, 106, 0.05);
  border-radius: 4px;
  color: var(--chimera-silver);
  padding: 0.8rem 1rem;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Horizontal rule ---------- */
.md-typeset hr {
  border-color: var(--chimera-border);
  margin: 2rem 0;
}

/* ---------- Uniform content width ---------- */
.md-grid {
  max-width: 1400px;
}

.md-typeset {
  font-size: 0.82rem;
}

/* All content children share the article's natural width so nothing
   visually pokes out. Overflow on .highlight / .md-typeset__scrollwrap
   is already handled in their own sections. */
.md-typeset > *,
.md-typeset .highlight,
.md-typeset__scrollwrap {
  max-width: 100%;
}

.md-typeset .highlight {
  overflow-x: auto;
}