/* ============================================================================
   Plasma docs — same look & feel as the plasma.sh landing.
   Pure #000 black · JetBrains Mono throughout · emerald accent (#10b981) ·
   crisp #1a1a1a hairlines · #8b8b8b secondary text · #0d0d0d code.
   White primary button + ghost secondary (verbatim from the landing).
   The header stays black in both schemes so the wordmark always reads.
   Light mode is a clean counterpart built from the same language.
   ============================================================================ */

:root {
  --plasma-grad: linear-gradient(90deg, #FD6F8E 0%, #7A5AF8 33%, #1570EF 67%, #27FCE2 100%);
  --plasma-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --md-accent-fg-color: #34d399;
}

/* ---- Dark scheme (default) — the landing's palette, verbatim ------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-default-bg-color: #000000;
  --md-default-bg-color--light: #0a0a0a;
  --md-default-fg-color: #e4e4e7;
  --md-default-fg-color--light: #b4b4ba;
  --md-default-fg-color--lighter: #8b8b8b;
  --md-default-fg-color--lightest: #242424;
  --md-primary-fg-color: #000000;
  --md-primary-bg-color: #e4e4e7;
  --md-accent-fg-color: #34d399;
  --md-typeset-a-color: #10b981;
  --md-code-bg-color: #0d0d0d;
  --md-code-fg-color: #e4e4e7;
  --md-footer-bg-color: #000000;
  --md-footer-bg-color--dark: #000000;
  --plasma-border: #1a1a1a;
  --plasma-surface: #0a0a0a;
  --plasma-th-bg: #0a0a0a;
  --plasma-search-bg: #141414;
  --plasma-scroll: #222222;
  --plasma-h1: #f4f4f6;
  /* landing code-syntax palette */
  --plasma-hl-kw: #10b981;
  --plasma-hl-fn: #7dd3fc;
  --plasma-hl-str: #fbbf24;
  --plasma-hl-cm: #7a7a7a;
  --plasma-hl-num: #fbbf24;
}
/* Beat Material's per-primary slate link colour (higher specificity) so the
   accent stays emerald — active nav, ToC, body links. */
[data-md-color-scheme="slate"][data-md-color-primary] { --md-typeset-a-color: #10b981; }

/* ---- Light scheme — clean counterpart, same language -------------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #1a1a1f;
  --md-default-fg-color--light: #52525b;
  --md-default-fg-color--lighter: #71717a;
  --md-default-fg-color--lightest: #e6e6e9;
  --md-primary-fg-color: #000000;       /* header stays dark */
  --md-primary-bg-color: #e4e4e7;
  --md-accent-fg-color: #065f46;
  --md-typeset-a-color: #047857;
  --md-code-bg-color: #f6f6f7;
  --plasma-border: #e6e6e9;
  --plasma-surface: #fafafa;
  --plasma-th-bg: #f5f5f6;
  --plasma-search-bg: #141414;          /* sits in the dark header */
  --plasma-scroll: #cdcdd2;
  --plasma-h1: #0b0b0d;
  --plasma-hl-kw: #047857;
  --plasma-hl-fn: #1570ef;
  --plasma-hl-str: #b45309;
  --plasma-hl-cm: #a1a1aa;
  --plasma-hl-num: #b45309;
}
[data-md-color-scheme="default"][data-md-color-primary] { --md-typeset-a-color: #047857; }

/* ---- Base reading rhythm (mono, like the landing) ----------------------- */
.md-typeset { font-size: 0.78rem; line-height: 1.78; }
.md-typeset p, .md-typeset li { letter-spacing: 0; }

/* ---- Headings ----------------------------------------------------------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4,
.md-header__topic, .md-nav__title { font-family: var(--plasma-mono); }
.md-typeset h1 { font-weight: 700; letter-spacing: -0.02em; color: var(--plasma-h1); }
.md-typeset h2 {
  font-weight: 600; letter-spacing: -0.01em;
  margin-top: 2.4em; padding-top: 1.2em;
  border-top: 1px solid var(--plasma-border);
}
.md-typeset h3 { font-weight: 600; letter-spacing: -0.01em; }
.md-content .md-typeset > h1:first-of-type {
  display: inline-block; padding-bottom: 8px;
  background: var(--plasma-grad);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
}

/* ---- Header (black in both schemes) ------------------------------------- */
.md-header { background-color: #000; border-bottom: 1px solid #1a1a1a; box-shadow: none; }
.md-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--plasma-grad);
}
.md-tabs { background-color: #000; }
.md-header__button.md-logo { display: inline-flex; align-items: center; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.45rem; width: auto; }
/* On very narrow phones (≤340px) shrink the wordmark so the header buttons fit */
@media screen and (max-width: 340px) {
  .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.1rem; }
}
.md-header__title .md-header__topic:first-child .md-ellipsis { display: none; }

/* ---- Links (landing style: colour only) --------------------------------- */
.md-typeset a { color: var(--md-typeset-a-color); text-decoration: none; transition: color .2s; }
.md-typeset a:hover { color: var(--md-accent-fg-color); }

/* ---- Code --------------------------------------------------------------- */
.md-typeset code {
  font-family: var(--plasma-mono);
  border: 1px solid var(--plasma-border); border-radius: 4px;
  padding: 0.1em 0.36em; font-size: 0.88em;
}
.md-typeset pre > code { border: none; padding: 0.72rem 0.95rem; }
.md-typeset pre { border-radius: 6px; }
.md-typeset .highlight > pre, .md-typeset > pre {
  border: 1px solid var(--plasma-border); border-radius: 6px;
}
.md-typeset .highlight code { line-height: 1.7; }
/* landing code-syntax colours */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kc, .highlight .kr,
.highlight .kt, .highlight .ow, .highlight .nt { color: var(--plasma-hl-kw); }
.highlight .nf, .highlight .fm, .highlight .nb, .highlight .nc { color: var(--plasma-hl-fn); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb,
.highlight .sd, .highlight .se, .highlight .si { color: var(--plasma-hl-str); }
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp,
.highlight .cs { color: var(--plasma-hl-cm); font-style: normal; }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh { color: var(--plasma-hl-num); }

/* ---- Navigation --------------------------------------------------------- */
.md-nav { font-size: 0.72rem; }
.md-nav__item--section > .md-nav__link, .md-nav__title {
  font-family: var(--plasma-mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}
.md-nav__link--active, .md-nav__link:focus, .md-nav__link:hover { color: var(--md-typeset-a-color); }
.md-sidebar--primary .md-nav__link--active { position: relative; font-weight: 600; }
.md-sidebar--primary .md-nav__link--active::before {
  content: ""; position: absolute; left: -0.85rem; top: 0.15em; bottom: 0.15em;
  width: 2px; border-radius: 2px; background: var(--plasma-grad);
}
.md-typeset .md-nav__link { font-family: inherit; }
.md-nav--secondary .md-nav__link--active { color: var(--md-typeset-a-color); }

/* ---- Admonitions -------------------------------------------------------- */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--plasma-border); border-radius: 6px;
  background: var(--plasma-surface); font-size: 0.76rem;
}
/* Informational admonitions use the accent; warnings/dangers keep semantic colours */
.md-typeset .admonition.note, .md-typeset .admonition.info,
.md-typeset .admonition.tip, .md-typeset .admonition.abstract,
.md-typeset details.note, .md-typeset details.info,
.md-typeset details.tip, .md-typeset details.abstract {
  border-left: 3px solid var(--md-typeset-a-color);
}
.md-typeset .note > .admonition-title, .md-typeset .info > .admonition-title,
.md-typeset .tip > .admonition-title, .md-typeset .abstract > .admonition-title,
.md-typeset .note > summary, .md-typeset .info > summary,
.md-typeset .tip > summary, .md-typeset .abstract > summary {
  background-color: color-mix(in srgb, var(--md-typeset-a-color) 12%, transparent);
}
.md-typeset .note > .admonition-title::before, .md-typeset .info > .admonition-title::before,
.md-typeset .tip > .admonition-title::before, .md-typeset .abstract > .admonition-title::before,
.md-typeset .note > summary::before, .md-typeset .info > summary::before,
.md-typeset .tip > summary::before, .md-typeset .abstract > summary::before {
  background-color: var(--md-typeset-a-color);
}

/* ---- Tables ------------------------------------------------------------- */
/* (Wide tables scroll inside Material's .md-typeset__scrollwrap by default.) */
.md-typeset table:not([class]) {
  border: 1px solid var(--plasma-border); border-radius: 6px; font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
  background: var(--plasma-th-bg); font-family: var(--plasma-mono);
  font-weight: 600; letter-spacing: 0.01em;
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--plasma-border); }

/* ---- Search (in the dark header) ---------------------------------------- */
.md-search__input { background-color: var(--plasma-search-bg); border-radius: 6px; color: #e4e4e7; }
.md-search__input::placeholder { color: #8b8b8b; }

/* ---- Grid cards --------------------------------------------------------- */
.md-typeset .grid.cards > ul > li, .md-typeset .grid > .card {
  border: 1px solid var(--plasma-border); border-radius: 6px;
  background: var(--plasma-surface);
  transition: border-color .2s, transform .2s;
}
.md-typeset .grid.cards > ul > li:hover, .md-typeset .grid > .card:hover {
  border-color: var(--md-typeset-a-color);
  transform: translateY(-2px);
}

/* ---- Buttons (verbatim from the landing) -------------------------------- */
/* primary = solid light fill, dark text, fades on hover */
.md-typeset .md-button--primary {
  background-color: var(--md-default-fg-color);
  border: none;
  color: var(--md-default-bg-color);
  font-family: var(--plasma-mono); font-weight: 600; font-size: 0.74rem;
  border-radius: 6px; transition: opacity .2s;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--md-default-fg-color);
  color: var(--md-default-bg-color); opacity: 0.85;
}
/* secondary = ghost, hairline border, brightens on hover */
.md-typeset .md-button {
  background-color: transparent;
  border: 1px solid var(--plasma-border);
  color: var(--md-default-fg-color--lighter);
  font-family: var(--plasma-mono); font-weight: 500; font-size: 0.74rem;
  border-radius: 6px; transition: border-color .2s, color .2s;
}
.md-typeset .md-button:hover {
  background-color: transparent;
  border-color: var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color);
}

/* ---- Header tabs -------------------------------------------------------- */
.md-tabs__link { opacity: 1; font-size: 0.74rem; }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--md-accent-fg-color); }

/* ---- Tabbed code -------------------------------------------------------- */
.md-typeset .tabbed-labels > label { font-family: var(--plasma-mono); font-size: 0.74rem; }
.md-typeset .tabbed-set > input:checked + label { color: var(--md-typeset-a-color); }

/* ---- Scrollbar ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--plasma-scroll) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--plasma-scroll); border-radius: 6px; }

/* ---- Mermaid diagrams (colours themed in mermaid-init.js) --------------- */
.md-typeset .mermaid { text-align: center; line-height: normal; }

/* ---- Mobile: inset code blocks + stack tables as cards ------------------ */
@media screen and (max-width: 44.9375em) {
  /* CTA button pairs: equal-width, side by side, clean gap (no ragged wrap) */
  .md-typeset p:has(> .md-button) { display: flex; flex-wrap: wrap; gap: 12px; }
  .md-typeset p:has(> .md-button) > .md-button {
    flex: 1 1 8em; text-align: center; margin: 0;
  }

  /* Code blocks align with the body text instead of bleeding to the edges */
  .md-typeset > .highlight,
  .md-content__inner > .highlight,
  .md-typeset > pre,
  .md-content__inner > pre { margin-left: 0; margin-right: 0; }
  .md-typeset > .highlight > pre, .md-typeset > pre { border-radius: 6px; }

  /* Tables → stacked "label: value" cards (no horizontal scroll). Only tables
     the JS has labelled (data-stackable) transform; others keep scrolling. */
  .md-typeset__table:has(table[data-stackable]) { display: block; overflow-x: visible; }
  .md-typeset__scrollwrap:has(table[data-stackable]) { overflow-x: visible; }
  .md-typeset table[data-stackable] { display: block; border: 0; font-size: 0.8rem; }
  .md-typeset table[data-stackable] thead { display: none; }
  .md-typeset table[data-stackable] tbody { display: block; }
  .md-typeset table[data-stackable] tr {
    display: block;
    border: 1px solid var(--plasma-border);
    border-radius: 6px;
    background: var(--plasma-surface);
    padding: 2px 12px;
    margin: 0 0 12px;
  }
  .md-typeset table[data-stackable] td {
    display: block;
    border: 0;
    border-top: 1px solid var(--plasma-border);
    padding: 9px 0;
    text-align: left;
    white-space: normal;
  }
  .md-typeset table[data-stackable] tr > td:first-child { border-top: 0; }
  .md-typeset table[data-stackable] td[data-label]:not([data-label=""]) {
    display: grid;
    grid-template-columns: minmax(5.5em, 38%) 1fr;
    gap: 12px;
    align-items: baseline;
  }
  .md-typeset table[data-stackable] td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--md-default-fg-color--light);
  }
}