/* ============================================================================
   rd-theme.css — ReactiveDynamics.jl documentation brand overrides.

   A thin layer over Documenter 1.x (Bulma-derived, `#documenter`-prefixed
   selectors, light + `html.theme--documenter-dark` themes). It does NOT replace
   the stock themes — it repaints the chrome to the house design language shared
   with demo/bd_acquisition/presentation.html:

     International Typographic Style — pitch-black ink, hairline-black rules as
     the structural device, ONE accent (teal), and functional figure hues that
     carry meaning (teal = people/capacity, amber = money/budget, rose = risk).

   What this file changes, and nothing else:
     · the navigation sidebar → a near-white field (matches the presentation
       masthead / colophon), mono labels, teal active-page marker;
     · headings → Inter, tight tracking, a teal underline accent on h1 and a
       hairline rule under h2;
     · links / accents → teal;
     · admonitions → recoloured to the semantic palette (note→teal,
       warning→amber, danger→rose, tip→teal);
     · code → flat field, hairline border, teal keywords.

   Specificity notes (so overrides actually land): the stock light rules are
   `#documenter .foo` (id+class); we match that exactly and win on source order
   (Documenter injects `assets` AFTER the theme CSS). The dark rules add an
   `html.theme--documenter-dark` prefix, so every dark override below repeats
   that prefix to match specificity. Code glyphs stay on JuliaMono (full Julia
   unicode coverage: →, ≥, α); JetBrains Mono is reserved for UI chrome.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Palette aligned to the canonical Claude Design identity board
     (spec/design_system.html): warm neutrals, teal accent, semantic figure hues. */
  --rd-ink:      #0A0A0A;   /* pitch-black ink & hairlines            */
  --rd-paper:    #FFFFFF;   /* pure white content ground              */
  --rd-inset:    #F4F4F2;   /* warm neutral inset (code surround)     */
  --rd-accent:   #0A8A84;   /* teal — the accent (events / decisions) */
  --rd-accent-d: #076A65;   /* deep teal — link hover                 */
  --rd-accent-lt:#3FB5AF;   /* light teal — accent reversed out       */
  --rd-teal:     #0A8A84;   /* people / capacity (== the accent)      */
  --rd-amber:    #B5740A;   /* money / budget                         */
  --rd-rose:     #E5243B;   /* risk / failure / binding constraint    */
  --rd-grey:     #6A6A68;   /* warm grey — subordinate metadata       */
  --rd-grey-lt:  #9A9A98;   /* warm grey, lighter                     */
  --rd-hair:     #C7C7C4;   /* warm hairline (faint internal divider) */

  /* navigation sidebar — a near-white panel in light mode, a warm dark
     panel in dark mode (was pitch-black, then creamy off-white; lifted to
     near-white per house review). The panel sits a touch below the pure-white
     content ground so the sidebar reads as a distinct panel that anchors the
     logo — at #FBFBFA it was ~1pt off #FFFFFF and the logo floated. */
  --rd-nav-bg:      #F3F3F1; /* light: near-white panel (vs #FFFFFF content) */
  --rd-nav-hover:   #E7E7E3; /* light: hover / active fill             */
  --rd-nav-edge:    #D9D9D5; /* light: right border + dividers         */
  --rd-nav-bg-dk:   #1B1B19; /* dark: warm near-black panel            */
  --rd-nav-hover-dk:#262624; /* dark: hover / active fill              */
  --rd-nav-edge-dk: #3A3A38; /* dark: right border + dividers          */
  --rd-code-bg-dk:  #282F2F; /* dark: code-block field (== stock dark) */

  --rd-night:      #0A0A0A; /* the reversed-out field                 */
  --rd-night-edge: #3A3A3A; /* hairlines on black                     */
  --rd-night-ink:  #F4F4F2; /* body text reversed out                 */
  --rd-night-mut:  #9A9A98; /* muted reversed out                     */

  --rd-display: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --rd-mono:    "JetBrains Mono", "JuliaMono", "SF Mono", ui-monospace, monospace;
  --rd-code:    "JuliaMono", "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- body & headings ------------------------------------------------ */
/* The stock theme sets Lato with !important, so we must also use !important. */
#documenter .docs-main,
#documenter .docs-main p,
#documenter .docs-main li,
#documenter .docs-main table {
  font-family: var(--rd-display) !important;
  letter-spacing: -0.004em;
}
html.theme--documenter-dark #documenter .docs-main { font-family: var(--rd-display) !important; }

#documenter .docs-main h1,
#documenter .docs-main h2,
#documenter .docs-main h3,
#documenter .docs-main h4 {
  font-family: var(--rd-display) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--rd-ink);
}
html.theme--documenter-dark #documenter .docs-main h1,
html.theme--documenter-dark #documenter .docs-main h2,
html.theme--documenter-dark #documenter .docs-main h3,
html.theme--documenter-dark #documenter .docs-main h4 { color: #FFFFFF; }

/* h1 — a teal underline accent (the presentation's kicker rule, distilled) */
#documenter .docs-main h1 { position: relative; padding-bottom: 0.35rem; }
#documenter .docs-main h1::after {
  content: ""; display: block; width: 3rem; height: 3px;
  background: var(--rd-accent); margin-top: 0.45rem;
}
/* h2 — a full-width hairline-black rule, the one structural device */
#documenter .docs-main h2 {
  border-bottom: 1px solid var(--rd-ink);
  padding-bottom: 0.35rem;
}
html.theme--documenter-dark #documenter .docs-main h2 { border-bottom-color: var(--rd-night-edge); }

/* ---------- links / accents ------------------------------------------------ */
#documenter .docs-main a,
#documenter .docs-main a code { color: var(--rd-accent); }
#documenter .docs-main a:hover { color: var(--rd-accent-d); text-decoration: underline; }
html.theme--documenter-dark #documenter .docs-main a,
html.theme--documenter-dark #documenter .docs-main a code { color: var(--rd-accent-lt); }

/* Heading text is wrapped in an `<a class="docs-heading-anchor">`; keep it the
   heading's ink colour, NOT the teal link colour — teal stays the ONE accent
   (the h1 underline + real links). */
#documenter .docs-main h1 a.docs-heading-anchor,
#documenter .docs-main h1 a.docs-heading-anchor:hover,
#documenter .docs-main h2 a.docs-heading-anchor,
#documenter .docs-main h2 a.docs-heading-anchor:hover,
#documenter .docs-main h3 a.docs-heading-anchor,
#documenter .docs-main h3 a.docs-heading-anchor:hover,
#documenter .docs-main h4 a.docs-heading-anchor,
#documenter .docs-main h4 a.docs-heading-anchor:hover {
  color: var(--rd-ink);
  text-decoration: none;
}
html.theme--documenter-dark #documenter .docs-main h1 a.docs-heading-anchor,
html.theme--documenter-dark #documenter .docs-main h2 a.docs-heading-anchor,
html.theme--documenter-dark #documenter .docs-main h3 a.docs-heading-anchor,
html.theme--documenter-dark #documenter .docs-main h4 a.docs-heading-anchor { color: #FFFFFF; }

/* ============================================================================
   NAVIGATION SIDEBAR — a warm off-white panel (light) / warm dark panel (dark).
   Each rule has a light base form + a dark-scoped `html.theme--documenter-dark`
   twin. Text is dark-on-pale in light mode, pale-on-dark in dark mode; the teal
   accent marks section eyebrows and the active page in both.
   ============================================================================ */
#documenter .docs-sidebar {
  background-color: var(--rd-nav-bg);
  color: var(--rd-ink);
  border-right: 1px solid var(--rd-nav-edge);
}
html.theme--documenter-dark #documenter .docs-sidebar {
  background-color: var(--rd-nav-bg-dk);
  color: var(--rd-night-ink);
  border-right: 1px solid var(--rd-nav-edge-dk);
}

/* brand lockup — the firing-glyph mark stacked above the wordmark. The stock
   theme sizes `.docs-logo > img` at max-height 6rem, which nearly spans the
   18rem sidebar edge-to-edge; 4.5rem gives the glyph a bold presence that fills
   the width without reading as a banner.

   SPECIFICITY: the stock light rule is `#documenter … .docs-logo>img` (1,2,1),
   which our unscoped rule ties and beats on source order. But the dark AND
   catppuccin themes emit the SAME rule PREFIXED with `html.theme--…` (1,3,2),
   which out-specifies us — so the logo stayed at 6rem on those two themes (bigger
   than light). We therefore repeat the cap under each theme prefix to match that
   specificity and win on source order. (Only these three themes ship — the theme
   list is filtered to them in docs/make.jl.) */
#documenter .docs-sidebar .docs-logo > img,
html.theme--documenter-dark #documenter .docs-sidebar .docs-logo > img,
html.theme--catppuccin-latte #documenter .docs-sidebar .docs-logo > img {
  max-height: 4.5rem;
  margin-top: 0.6rem;
}

/* brand / package name — the masthead treatment. Set in the Inter display face
   (NOT the mono UI face) so the wordmark matches spec/design_system.html; the
   `.jl` extension is wrapped by rd-logo.js and tinted teal below. */
#documenter .docs-sidebar .docs-package-name {
  border-bottom: 1px solid var(--rd-nav-edge);
}
html.theme--documenter-dark #documenter .docs-sidebar .docs-package-name {
  border-bottom-color: var(--rd-nav-edge-dk);
}
/* SPECIFICITY (same trap as the logo cap above): stock `.docs-package-name`
   sets `font-size:1.5rem` — unscoped on light (our unscoped rule ties + wins on
   order) but PREFIXED with `html.theme--…` on dark/catppuccin, which out-specifies
   an unscoped override. So a plain `font-size:1.1rem` only shrank the wordmark on
   light; it stayed 1.5rem on dark/catppuccin. Repeat the size under each shipped
   theme prefix so the wordmark is uniform across all three. */
#documenter .docs-sidebar .docs-package-name,
html.theme--documenter-dark #documenter .docs-sidebar .docs-package-name,
html.theme--catppuccin-latte #documenter .docs-sidebar .docs-package-name {
  padding-bottom: 0.5rem;
  font-size: 1.4rem;
}
#documenter .docs-sidebar .docs-package-name a,
#documenter .docs-sidebar .docs-package-name a:hover {
  color: var(--rd-ink);
  font-family: var(--rd-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
html.theme--documenter-dark #documenter .docs-sidebar .docs-package-name a,
html.theme--documenter-dark #documenter .docs-sidebar .docs-package-name a:hover {
  color: #FFFFFF;
}
/* the `.jl` extension, wrapped in `<span class="rd-jl">` by rd-logo.js — the
   ONE teal accent on the wordmark, echoing the identity board's `.jl` treatment.
   Reversed out to the light-teal on the dark nav. */
#documenter .docs-sidebar .docs-package-name a .rd-jl { color: var(--rd-accent); }
html.theme--documenter-dark #documenter .docs-sidebar .docs-package-name a .rd-jl {
  color: var(--rd-accent-lt);
}

/* menu items — mono, muted */
#documenter .docs-sidebar ul.docs-menu .tocitem,
#documenter .docs-sidebar ul.docs-menu .tocitem:hover {
  color: var(--rd-grey);
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu .tocitem,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu .tocitem:hover {
  color: var(--rd-night-mut);
  background: transparent;
}
/* section labels (non-link `span.tocitem`) — teal eyebrow */
#documenter .docs-sidebar ul.docs-menu > li > span.tocitem,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu > li > span.tocitem {
  color: var(--rd-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu > li > span.tocitem {
  color: var(--rd-accent-lt);
}

#documenter .docs-sidebar ul.docs-menu a.tocitem:hover,
#documenter .docs-sidebar ul.docs-menu label.tocitem:hover {
  color: var(--rd-ink);
  background-color: var(--rd-nav-hover);
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu a.tocitem:hover,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu label.tocitem:hover {
  color: #FFFFFF;
  background-color: var(--rd-nav-hover-dk);
}

/* active page — the selected group of headers reads as a boxed band: a hairline
   top + bottom rule (like the stock/Catppuccin active group) with the teal left
   rule marking it as current, over a subtle fill. */
#documenter .docs-sidebar ul.docs-menu li.is-active {
  border-top: 1px solid var(--rd-nav-edge);
  border-bottom: 1px solid var(--rd-nav-edge);
  background-color: var(--rd-nav-hover);
  border-left: 3px solid var(--rd-accent);
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active {
  border-top: 1px solid var(--rd-nav-edge-dk);
  border-bottom: 1px solid var(--rd-nav-edge-dk);
  background-color: var(--rd-nav-hover-dk);
  border-left: 3px solid var(--rd-accent-lt);
}
#documenter .docs-sidebar ul.docs-menu li.is-active > .tocitem,
#documenter .docs-sidebar ul.docs-menu li.is-active > .tocitem:hover {
  background-color: var(--rd-nav-hover);
  color: var(--rd-ink);
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active > .tocitem,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active > .tocitem:hover {
  background-color: var(--rd-nav-hover-dk);
  color: #FFFFFF;
}
/* in-page (internal) anchors under the active page. The stock theme paints these
   `#fff` via a DESCENDANT rule (`li.is-active .tocitem`), which clashes with the
   off-white panel — so clear the fill to transparent (they ride the active li's
   subtle tint) and repeat `li.is-active` here to out-specify the stock rule. */
#documenter .docs-sidebar ul.docs-menu li.is-active ul.internal .tocitem {
  color: var(--rd-grey);
  background-color: transparent;
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active ul.internal .tocitem {
  color: var(--rd-night-mut);
  background-color: transparent;
}
#documenter .docs-sidebar ul.docs-menu li.is-active ul.internal .tocitem:hover {
  color: var(--rd-ink); background: var(--rd-nav-hover);
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active ul.internal .tocitem:hover {
  color: #FFFFFF; background: var(--rd-nav-hover-dk);
}

/* search button + version selector */
#documenter .docs-sidebar #documenter-search-query {
  background-color: var(--rd-paper);
  border: 1px solid var(--rd-nav-edge);
  color: var(--rd-grey);
  font-family: var(--rd-mono);
  border-radius: 0;
}
html.theme--documenter-dark #documenter .docs-sidebar #documenter-search-query {
  background-color: var(--rd-nav-hover-dk);
  border: 1px solid var(--rd-nav-edge-dk);
  color: var(--rd-night-mut);
}
#documenter .docs-sidebar .docs-version-selector {
  border-top: 1px solid var(--rd-nav-edge);
}
html.theme--documenter-dark #documenter .docs-sidebar .docs-version-selector {
  border-top: 1px solid var(--rd-nav-edge-dk);
}

/* ============================================================================
   ADMONITIONS — recoloured to the semantic palette. Left border + header text
   carry the hue; the body stays a flat neutral inset with square corners.
   ============================================================================ */
#documenter .docs-main .admonition {
  border-radius: 0;
  border-width: 1px;
  background-color: var(--rd-inset);
}
#documenter .docs-main .admonition.is-info,
#documenter .docs-main .admonition.is-note { border-color: var(--rd-accent); }
#documenter .docs-main .admonition.is-info > .admonition-header,
#documenter .docs-main .admonition.is-note > .admonition-header { color: var(--rd-accent); }

#documenter .docs-main .admonition.is-warning { border-color: var(--rd-amber); }
#documenter .docs-main .admonition.is-warning > .admonition-header { color: var(--rd-amber); }

#documenter .docs-main .admonition.is-danger { border-color: var(--rd-rose); }
#documenter .docs-main .admonition.is-danger > .admonition-header { color: var(--rd-rose); }

#documenter .docs-main .admonition.is-success,
#documenter .docs-main .admonition.is-tip { border-color: var(--rd-teal); }
#documenter .docs-main .admonition.is-success > .admonition-header,
#documenter .docs-main .admonition.is-tip > .admonition-header { color: var(--rd-teal); }

#documenter .docs-main .admonition > .admonition-header {
  font-family: var(--rd-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================================
   CODE — flat field, hairline border, square corners; teal keywords.
   Code stays on JuliaMono for full Julia unicode glyph coverage.
   ============================================================================ */
#documenter .docs-main pre,
#documenter .docs-main code {
  font-family: var(--rd-code) !important;
  border-radius: 0;
}
#documenter .docs-main pre {
  border: 1px solid var(--rd-ink);
  background-color: var(--rd-paper);
}
/* Dark mode: the unscoped white `pre` background above out-specifies the stock dark
   theme (id+class beats html.theme--… pre), so restore a dark code field explicitly —
   otherwise light syntax-highlight text renders on white and is unreadable. */
html.theme--documenter-dark #documenter .docs-main pre {
  border-color: var(--rd-night-edge);
  background-color: var(--rd-code-bg-dk);
  color: var(--rd-night-ink);
}
/* inline code — a light neutral chip */
#documenter .docs-main p > code,
#documenter .docs-main li > code {
  background-color: var(--rd-inset);
  color: var(--rd-ink);
  padding: 0.1em 0.35em;
}
html.theme--documenter-dark #documenter .docs-main p > code,
html.theme--documenter-dark #documenter .docs-main li > code {
  background-color: #161616;
  color: var(--rd-night-ink);
}

/* highlight.js tokens → the presentation's code palette (light touch) */
#documenter .docs-main pre .hljs-keyword,
#documenter .docs-main pre .hljs-meta,
#documenter .docs-main pre .hljs-built_in { color: var(--rd-accent); font-weight: 700; }
#documenter .docs-main pre .hljs-string  { color: var(--rd-teal); }
#documenter .docs-main pre .hljs-number  { color: var(--rd-amber); }
#documenter .docs-main pre .hljs-comment { color: var(--rd-grey); font-style: italic; }

/* ---------- docstring headers — a hairline, mono-labelled band ------------- */
#documenter .docs-main .docstring > header {
  border-bottom: 1px solid var(--rd-ink);
}
html.theme--documenter-dark #documenter .docs-main .docstring > header {
  border-bottom-color: var(--rd-night-edge);
}

/* ---------- inline SVG concept figures — center, cap width, breathe -------- */
#documenter .docs-main .rd-figure {
  margin: 1.8rem auto;
  max-width: 900px;
}
#documenter .docs-main .rd-figure svg {
  display: block; width: 100%; height: auto; overflow: visible;
}
#documenter .docs-main .rd-figure figcaption {
  font-size: 0.9rem; color: var(--rd-grey); line-height: 1.5;
  margin-top: 0.6rem; text-align: left;
}
html.theme--documenter-dark #documenter .docs-main .rd-figure figcaption { color: var(--rd-night-mut); }
/* the figures are drawn on white; keep their surround white even in dark mode
   so the hairline artwork stays legible */
html.theme--documenter-dark #documenter .docs-main .rd-figure {
  background: #FFFFFF; padding: 1rem; border: 1px solid var(--rd-night-edge);
}

/* selection + focus, house colours */
#documenter ::selection { background: var(--rd-accent); color: #FFFFFF; }