/* --- Syntax highlighting: Monokai Light + Monokai Dark ---
 *
 * TWO sets of variables to override:
 *   --md-code-hl-*-color     → Material's markdown code blocks (.highlight)
 *   --jp-mirror-editor-*-color → notebook code blocks (.highlight-ipynb)
 *
 * Notebook code uses JupyterLab's CSS variables, NOT Material's. Both must
 * be overridden together to keep colors consistent across the whole site.
 *
 * Light = darkened-Monokai variant (dark hues on light bg for readability);
 * Dark = classic Monokai.
 */

:root,
[data-md-color-scheme="default"] {
  --md-code-fg-color: #272822;
  --md-code-bg-color: #fafafa;

  /* Material code blocks — Monokai (darkened for light bg) */
  --md-code-hl-keyword-color:     #d11f72;   /* darkened pink */
  --md-code-hl-string-color:      #998800;   /* mustard yellow */
  --md-code-hl-number-color:      #6f42c1;   /* purple */
  --md-code-hl-function-color:    #4d8d04;   /* green */
  --md-code-hl-comment-color:     #75715e;   /* olive-gray */
  --md-code-hl-name-color:        #272822;   /* default text */
  --md-code-hl-operator-color:    #d11f72;   /* pink */
  --md-code-hl-punctuation-color: #272822;
  --md-code-hl-constant-color:    #6f42c1;   /* purple — None, True, False */
  --md-code-hl-special-color:     #4d8d04;   /* green — decorators */
  --md-code-hl-variable-color:    #d35400;   /* burnt orange */
  --md-code-hl-generic-color:     #272822;
}

[data-md-color-scheme="slate"] {
  --md-code-fg-color: #f8f8f2;
  /* Derived from slate body bg hsla(var(--md-hue), 15%, 14%, 1):
     same hue, less saturated (6%), brighter (18%). Subtle slate hint, mostly gray. */
  --md-code-bg-color: hsla(var(--md-hue), 6%, 18%, 1);

  /* Material code blocks — classic Monokai */
  --md-code-hl-keyword-color:     #f92672;   /* hot pink */
  --md-code-hl-string-color:      #e6db74;   /* yellow */
  --md-code-hl-number-color:      #ae81ff;   /* purple */
  --md-code-hl-function-color:    #a6e22e;   /* green */
  --md-code-hl-comment-color:     #75715e;   /* olive-gray */
  --md-code-hl-name-color:        #f8f8f2;   /* default text */
  --md-code-hl-operator-color:    #f92672;   /* pink */
  --md-code-hl-punctuation-color: #f8f8f2;
  --md-code-hl-constant-color:    #ae81ff;   /* purple — None, True, False */
  --md-code-hl-special-color:     #a6e22e;   /* green — decorators */
  --md-code-hl-variable-color:    #fd971f;   /* orange */
  --md-code-hl-generic-color:     #f8f8f2;
}

/* JupyterLab vars: must be set ON .jupyter-wrapper because that element
   re-defines them locally (e.g. --jp-mirror-editor-keyword-color: #008000).
   Prefix with `body` (where Material puts the scheme attribute) to outrank
   mkdocs-jupyter's inline `[data-md-color-scheme=slate] .jupyter-wrapper`,
   which otherwise wins on cascade order. */
body[data-md-color-scheme="default"] .jupyter-wrapper {
  --jp-mirror-editor-keyword-color:     #d11f72;
  --jp-mirror-editor-string-color:      #998800;
  --jp-mirror-editor-number-color:      #6f42c1;
  --jp-mirror-editor-builtin-color:     #4d8d04;
  --jp-mirror-editor-comment-color:     #75715e;
  --jp-mirror-editor-operator-color:    #d11f72;
  --jp-mirror-editor-punctuation-color: #272822;
  --jp-mirror-editor-variable-color:    #d35400;
  --jp-mirror-editor-meta-color:        #4d8d04;
  --jp-mirror-editor-bracket-color:     #272822;
  --jp-mirror-editor-property-color:    #272822;
  --jp-mirror-editor-attribute-color:   #d11f72;
  --jp-mirror-editor-tag-color:         #d11f72;
}

body[data-md-color-scheme="slate"] .jupyter-wrapper {
  --jp-mirror-editor-keyword-color:     #f92672;
  --jp-mirror-editor-string-color:      #e6db74;
  --jp-mirror-editor-number-color:      #ae81ff;
  --jp-mirror-editor-builtin-color:     #a6e22e;
  --jp-mirror-editor-comment-color:     #75715e;
  --jp-mirror-editor-operator-color:    #f92672;
  --jp-mirror-editor-punctuation-color: #f8f8f2;
  --jp-mirror-editor-variable-color:    #fd971f;
  --jp-mirror-editor-meta-color:        #a6e22e;
  --jp-mirror-editor-bracket-color:     #f8f8f2;
  --jp-mirror-editor-property-color:    #f8f8f2;
  --jp-mirror-editor-attribute-color:   #f92672;
  --jp-mirror-editor-tag-color:         #f92672;
}

/* --- Custom palette: soft dark slate primary + sky accent --- */

:root,
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #334155;          /* slate-700 — soft dark header */
  --md-primary-fg-color--light: #475569;   /* slate-600 */
  --md-primary-fg-color--dark: #1e293b;    /* slate-800 — hover/active */
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* Light-mode accent: deeper sky for contrast on white */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #0284c7;           /* sky-600 */
  --md-accent-fg-color--transparent: rgba(2, 132, 199, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
}

/* Dark-mode accent: brighter sky for contrast on slate background */
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #38bdf8;           /* sky-400 — brighter for dark bg */
  --md-accent-fg-color--transparent: rgba(56, 189, 248, 0.15);
}

/* Light-mode resting link: brighter than the accent for prominence.
   Hover keeps the accent (sky-600) for darken-on-hover affordance. */
.md-typeset a {
  color: #0284c7;                          /* sky-600 */
}

.md-typeset a:hover {
  color: #0ea5e9;                          /* sky-500 — brighten on hover */
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #38bdf8;                          /* sky-400 */
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #7dd3fc;                          /* sky-300 */
}

/* TOC + nav active item: Material binds .md-nav__link--active to
   --md-typeset-a-color, which defaults to --md-primary-fg-color (slate-700).
   That makes the selected item near-invisible (slate-on-white in light,
   slate-on-dark in dark). Re-bind to our sky link colors. */
:root,
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0284c7;           /* sky-600 — matches link color */
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #38bdf8;           /* sky-400 — matches link color */
}

/* macOS-style nav items (left sidebar + right TOC): rounded pill on hover and
   active, no harsh borders. Inspired by PyData Sphinx / Furo nav treatments. */
.md-nav__link {
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  margin: 0.05rem -0.5rem;
  transition: background 100ms, color 100ms;
}

.md-nav__link:hover {
  background: rgba(2, 132, 199, 0.07);     /* sky-600 tint */
  color: var(--md-typeset-a-color);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background: rgba(56, 189, 248, 0.10);    /* sky-400 tint */
}

.md-nav__link--active {
  background: rgba(2, 132, 199, 0.10);
  font-weight: 500;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  background: rgba(56, 189, 248, 0.14);
}

/* Material fades .md-nav__link--passed (already-scrolled-past TOC items + the
   previous nav page) to --md-default-fg-color--light, which in slate is 56%
   opacity → unreadable. Keep some fade but make it legible. */
.md-nav__link--passed,
.md-nav__link--passed code {
  color: var(--md-default-fg-color);
  opacity: 0.85;
}

/* --- Layout: wider content, denser sidebars --- */

:root {
  --md-grid-max-width: 80rem;  /* default 61rem — let content breathe */
}

.md-grid {
  max-width: var(--md-grid-max-width);
}

/* Narrower sidebars — defaults are 12.1rem each.
   Both kept visible (no toc.integrate) so the per-page TOC stays on the right. */
.md-sidebar--primary {
  width: 11rem;
}

.md-sidebar--secondary {
  width: 10rem;
}

/* Tighter heading spacing site-wide (matches notebook aesthetic) */
.md-typeset h1 {
  margin: 0 0 0.5em;
  font-weight: 600;
}

.md-typeset h2 {
  margin: 0.8em 0 0.3em;
}

.md-typeset h3 {
  margin: 0.6em 0 0.2em;
}

.md-typeset h4 {
  margin: 0.5em 0 0.15em;
}

/* Slightly denser code blocks */
.md-typeset pre > code {
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Markdown code fences — same treatment as notebook code cells:
   sky-600 left stripe, hover brightens, click-to-copy via JS, "Copied!" badge.
   Excludes inline `code` and mkdocstrings .doc-signature blocks. */
.md-typeset .highlight {
  border-left: 2px solid #0284c7;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  position: relative;
  transition: border-left-color 150ms, box-shadow 150ms, background 200ms;
}

.md-typeset .highlight:hover {
  border-left-color: #0ea5e9;            /* sky-500 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.md-typeset .highlight.copied {
  background: rgba(0, 0, 0, 0.04);
}

.md-typeset .highlight.copied::after {
  content: '✓ Copied!';
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.65em 1.6em;
  background: #0284c7;                     /* sky-600 — brand color, vivid */
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  pointer-events: none;
  animation: copied-fade 900ms ease-out forwards;
}

[data-md-color-scheme="slate"] .md-typeset .highlight {
  border-left-color: #38bdf8;            /* sky-400 — brighter for dark bg */
}

[data-md-color-scheme="slate"] .md-typeset .highlight:hover {
  border-left-color: #7dd3fc;            /* sky-300 */
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset .highlight.copied {
  background: rgba(255, 255, 255, 0.05);
}

/* --- Landing page --- */

/* Centered hero: tagline, badges, CTA buttons */
.md-typeset .hero {
  max-width: 42rem;
  margin: 2rem auto 1rem;
  text-align: center;
}

.md-typeset .hero h1 {
  margin-bottom: 0.6rem;
  font-size: 2.6rem;
  font-weight: 700;
}

.md-typeset .hero p {
  font-size: 1.1rem;
  color: var(--md-default-fg-color--light);
}

/* Badge row: tight, centered, no paragraph spacing */
.md-typeset .hero p:has(img) {
  margin: 0.6rem 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}

.md-typeset .hero img {
  margin: 0;
}

/* Landing-page content (cards, code, etc.) — narrower than full grid */
.md-typeset .landing {
  max-width: 64rem;
  margin: 0 auto;
}

/* Landing-page section headings: centered, with breathing room */
.md-typeset .landing h2 {
  text-align: center;
  margin: 2.4rem 0 1rem;
}

/* Landing-page code blocks: macOS-window treatment with traffic-light dots.
   Title-bar space is created by padding-top on .highlight; the dots are drawn
   in a single ::before via box-shadow (red dot + 2 shadow-offset dots).
   Always-dark: locally redefine the Monokai dark palette so the showcase reads
   like a terminal screenshot, regardless of the site's color scheme. */
.md-typeset .landing > .highlight {
  position: relative;
  max-width: 40rem;                        /* match regular code-block width */
  margin: 0 auto 1.5rem;
  padding-top: 1.9rem;
  border-left: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  /* Linear gradient: top 1.9rem = title bar (uses --md-primary-fg-color so it
     always matches the "Get Started" / .md-button--primary background, whether
     the user is on auto/indigo or our custom slate palette). Below = code area
     (derived from site bg, brighter + less saturated). Confines the title-bar
     color to the top only — no "footer" bleed at the bottom. */
  background: linear-gradient(
    to bottom,
    var(--md-primary-fg-color) 0,
    var(--md-primary-fg-color) 1.9rem,
    hsla(var(--md-hue), 6%, 18%, 1) 1.9rem,
    hsla(var(--md-hue), 6%, 18%, 1) 100%
  );
  box-shadow:
    0 0 24px rgba(2, 132, 199, 0.18),      /* sky glow */
    0 8px 28px rgba(0, 0, 0, 0.18);        /* drop shadow */
  overflow: hidden;

  /* Force Monokai dark, locally — overrides whatever scheme is active. */
  --md-code-fg-color: #f8f8f2;
  --md-code-bg-color: hsla(var(--md-hue), 6%, 18%, 1);    /* matches global dark code bg */
  --md-code-hl-keyword-color:     #f92672;
  --md-code-hl-string-color:      #e6db74;
  --md-code-hl-number-color:      #ae81ff;
  --md-code-hl-function-color:    #a6e22e;
  --md-code-hl-comment-color:     #75715e;
  --md-code-hl-name-color:        #f8f8f2;
  --md-code-hl-operator-color:    #f92672;
  --md-code-hl-punctuation-color: #f8f8f2;
  --md-code-hl-constant-color:    #ae81ff;
  --md-code-hl-special-color:     #a6e22e;
  --md-code-hl-variable-color:    #fd971f;
  --md-code-hl-generic-color:     #f8f8f2;
}

.md-typeset .landing > .highlight::before {
  content: '';
  position: absolute;
  top: 0.65rem;
  left: 0.85rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #ff5f57;                     /* close — red */
  box-shadow:
    1.05rem 0 0 #febc2e,                   /* minimize — yellow */
    2.10rem 0 0 #28c840;                   /* zoom — green */
}

/* Title-bar label centered in the title strip. :not(.copied) so the
   "Copied!" badge can take over the ::after slot during click feedback. */
.md-typeset .landing > .highlight:not(.copied)::after {
  content: '🚀 Quick Start';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--md-text-font);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.md-typeset .landing > .highlight:hover {
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow:
    0 0 36px rgba(2, 132, 199, 0.32),
    0 10px 32px rgba(0, 0, 0, 0.22);
}

[data-md-color-scheme="slate"] .md-typeset .landing > .highlight {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 0 28px rgba(56, 189, 248, 0.18),     /* sky-400 glow on dark */
    0 8px 28px rgba(0, 0, 0, 0.45);
}

[data-md-color-scheme="slate"] .md-typeset .landing > .highlight:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow:
    0 0 40px rgba(56, 189, 248, 0.32),
    0 10px 32px rgba(0, 0, 0, 0.5);
}

/* Button row spacing — scoped to the landing hero where button rows actually appear */
.md-typeset .hero .md-button + .md-button {
  margin-left: 0.5rem;
}

/* Grid card hover lift — small polish */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Notebook styling — nbsphinx / linopy aesthetic ---
 *
 * mkdocs-jupyter's CSS uses `.jupyter-wrapper .jp-*` selectors;
 * the `.jupyter-wrapper` prefix is required for our overrides to win
 * on specificity against the inlined Jupyter Lab stylesheet.
 */

/* Cell rhythm: as tight as possible without cramping */
.jupyter-wrapper .jp-Cell {
  margin: 0;
  padding: 0;
}

/* Code cells: prompt + content side-by-side, indented as one unit.
   Markdown cells share the wrapper structure but have an empty prompt;
   below we strip both so markdown flows full-width at the left edge. */
.jupyter-wrapper .jp-CodeCell .jp-Cell-inputWrapper,
.jupyter-wrapper .jp-Cell-outputWrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.25em;
  margin: 0;
  padding: 0;
}

/* Markdown cells: full width, no prompt gutter, no left indent */
.jupyter-wrapper .jp-MarkdownCell .jp-Cell-inputWrapper {
  margin: 0;
  padding: 0;
}

.jupyter-wrapper .jp-MarkdownCell .jp-InputPrompt {
  display: none !important;
}

.jupyter-wrapper .jp-MarkdownCell .jp-InputArea {
  display: block;
}

/* JupyterLab's `.jp-MarkdownOutput { padding-left: var(--jp-code-padding) }`
   is supposed to be overridden by mkdocs-jupyter's later `padding: 0`, but
   we force it here to keep markdown content (esp. headings) flush left in
   every cascade scenario. */
.jupyter-wrapper .jp-MarkdownCell .jp-MarkdownOutput,
.jupyter-wrapper .jp-MarkdownCell .jp-RenderedHTMLCommon {
  padding: 0;
}

.jupyter-wrapper .jp-MarkdownCell h1,
.jupyter-wrapper .jp-MarkdownCell h2,
.jupyter-wrapper .jp-MarkdownCell h3,
.jupyter-wrapper .jp-MarkdownCell h4,
.jupyter-wrapper .jp-MarkdownCell h5,
.jupyter-wrapper .jp-MarkdownCell h6 {
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}

/* Numbered prompts: monospace gutter — input sky (#0284c7), output muted
   slate (#cbd5e1) to keep the output secondary.
   The "In " / "Out" prefixes are stripped by javascripts/notebook-prompts.js;
   only the bracketed number remains.
   !important needed because JupyterLab's `:not(.jp-mod-active)` rule has
   higher specificity and forces a gray color + reduced opacity. */
.jupyter-wrapper .jp-InputPrompt,
.jupyter-wrapper .jp-OutputPrompt {
  display: block !important;
  /* ch-based gutter sized for post-JS "[NN]:" / "[NNN]:" — the JS strips the
     "In " / "Out" prefixes within milliseconds, so we optimise for the
     steady-state look. Pre-JS may briefly overflow leftward into the margin. */
  flex: 0 0 5ch !important;
  min-width: 5ch !important;
  padding: 0.4em 0.5em 0 0 !important;
  font-family: 'Fira Code', monospace;
  font-size: 0.78em;
  text-align: right;
  background: none;
  border: none;
  opacity: 1 !important;
}

.jupyter-wrapper .jp-InputPrompt {
  color: #0284c7 !important;       /* sky-600 — matches our link color */
}

.jupyter-wrapper .jp-OutputPrompt {
  color: #cbd5e1 !important;       /* slate-300 — muted, secondary to input */
}

/* Input area: subtle bg, no border, tight padding */
.jupyter-wrapper .jp-InputArea {
  display: flex;
  flex: 1;
  min-width: 0;
}

.jupyter-wrapper .jp-InputArea-editor {
  flex: 1;
  min-width: 0;
}

.jupyter-wrapper .jp-CodeCell .highlight-ipynb {
  background: var(--md-code-bg-color);   /* matches Material's other code blocks */
  border: none;
  border-left: 2px solid #0284c7;        /* sky-600 accent stripe */
  border-radius: 0 2px 2px 0;
  margin: 0;
  width: 100%;
  cursor: pointer;                       /* signals click-to-copy */
  position: relative;                    /* anchor for the .copied ::after badge */
  transition: border-left-color 150ms, box-shadow 150ms, background 200ms;
}

.jupyter-wrapper .jp-CodeCell .highlight-ipynb:hover {
  border-left-color: #0ea5e9;            /* sky-500 — brighten on hover */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Copy confirmation: subtle gray-tinted background flash + "Copied!" badge */
.jupyter-wrapper .jp-CodeCell .highlight-ipynb.copied {
  background: rgba(0, 0, 0, 0.04);       /* barely-there gray overlay */
}

.jupyter-wrapper .jp-CodeCell .highlight-ipynb.copied::after {
  content: '✓ Copied!';
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.65em 1.6em;
  background: #0284c7;                     /* sky-600 — brand color, vivid */
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  pointer-events: none;
  animation: copied-fade 900ms ease-out forwards;
}

@keyframes copied-fade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.jupyter-wrapper .jp-CodeCell .highlight-ipynb pre {
  padding: 0.3em 0.6em;
  margin: 0;
  line-height: 1.45;
  background: transparent;
  border: none;
}

/* Output area: prompt + content laid out via .jp-OutputArea-child
   (mkdocs-jupyter wraps each output in a child div — that's the flex row,
   not the outer .jp-Cell-outputWrapper) */
.jupyter-wrapper .jp-OutputArea {
  flex: 1;
  min-width: 0;
}

.jupyter-wrapper .jp-OutputArea-child {
  display: flex;
  align-items: flex-start;
  gap: 0.25em;
  margin: 0;
}

.jupyter-wrapper .jp-OutputArea-output {
  flex: 1;
  min-width: 0;
  background: none;
  margin: 0;
  border-left: 2px solid #cbd5e1;       /* muted stripe pairs visually with input */
  padding-left: 0.6em;
}

.jupyter-wrapper .jp-RenderedText pre {
  background: transparent;
  border: none;
  padding: 0.3em 0.75em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.4;
}

/* Markdown cells: aggressive heading spacing.
   `.md-typeset` is on <article> (ancestor of the notebook) — putting it
   inside the chain after .jp-MarkdownCell never matches. Drop it and rely
   on .jupyter-wrapper for specificity over Material's `.md-typeset h2`. */
.jupyter-wrapper .jp-MarkdownCell h2 {
  margin: 0.3em 0 0.15em;
}

.jupyter-wrapper .jp-MarkdownCell h3 {
  margin: 0.25em 0 0.1em;
}

.jupyter-wrapper .jp-MarkdownCell h1 {
  margin: 0.4em 0 0.2em;
}

.jupyter-wrapper .jp-MarkdownCell p {
  margin: 0.3em 0;
}

/* Hide non-functional UI elements */
.jupyter-wrapper .jp-Collapser {
  display: none;
}

/* Plotly compactness */
.jupyter-wrapper .jp-OutputArea .js-plotly-plot {
  margin: 0.25em 0;
}

/* Dark mode tone-down */
[data-md-color-scheme="slate"] .jupyter-wrapper .jp-CodeCell .highlight-ipynb {
  border-left-color: #38bdf8;            /* sky-400 — brighter accent for dark bg */
}

[data-md-color-scheme="slate"] .jupyter-wrapper .jp-CodeCell .highlight-ipynb:hover {
  border-left-color: #7dd3fc;            /* sky-300 — brighter still on hover */
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .jupyter-wrapper .jp-CodeCell .highlight-ipynb.copied {
  background: rgba(255, 255, 255, 0.05); /* subtle light overlay on dark */
}

[data-md-color-scheme="slate"] .jupyter-wrapper .jp-CodeCell .highlight-ipynb.copied::after {
  background: #38bdf8;                     /* sky-400 — brighter for dark bg */
  color: #0c1620;                          /* dark text on bright sky bg for max contrast */
  box-shadow: 0 4px 22px rgba(56, 189, 248, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

[data-md-color-scheme="slate"] .jupyter-wrapper .jp-InputPrompt {
  color: #38bdf8 !important;       /* sky-400 — brighter for dark bg */
}

[data-md-color-scheme="slate"] .jupyter-wrapper .jp-OutputPrompt {
  color: #64748b !important;       /* slate-500 — readable muted on dark bg */
}

[data-md-color-scheme="slate"] .jupyter-wrapper .jp-OutputArea-output {
  border-left-color: #475569;       /* slate-600 — subtle on dark bg */
}

/* --- Code block font size ---
   Material defaults to 0.85em on code blocks, which is hard to scan in
   tutorials. Bump to 0.92em on blocks; leave inline `code` at default so
   it still stands out mid-sentence. */
.md-typeset pre > code,
.md-typeset .highlight pre {
  font-size: 0.92em;
}

/* Notebook code cells (mkdocs-jupyter uses JupyterLab CSS variables).
   The plugin inlines its own .jupyter-wrapper rule later in the cascade,
   so we need !important to win the override. */
.jupyter-wrapper {
  --jp-code-font-size: 14.5px !important;
}

/* --- Download notebook button --- */

/* Injected by notebook-download.js as the first child of .jupyter-wrapper.
   Absolute-positioned in the wrapper's top-right corner so it never affects
   the layout of cells below it. */
.jupyter-wrapper {
  position: relative;
}

.notebook-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.3em 0.75em;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #0284c7;                          /* sky-600 — matches link color */
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.notebook-download:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

@media (max-width: 640px) {
  .notebook-download {
    position: static;
    margin-bottom: 0.75em;
  }
}

.notebook-download__icon {
  font-size: 0.95em;
  line-height: 1;
}

[data-md-color-scheme="slate"] .notebook-download {
  color: #38bdf8;                          /* sky-400 — brighter for dark bg */
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.28);
}

[data-md-color-scheme="slate"] .notebook-download:hover {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #0c1620;                          /* dark text on bright sky bg */
}

/* --- Anchor target highlight ---
 * When the URL has a #hash, the matching element gets :target. Flash the
 * background once on arrival so it's obvious where the page jumped to.
 *
 * Class/method headings (h2/h3 outside tables) get a left-border flash.
 * Parameter headings live inside <td> cells of a docstring table — there
 * the h3 has constrained layout so its own background is barely visible.
 * The :has(:target) selector lights the entire <tr> instead, which is
 * much more legible for parameters. */
.md-content :target {
  animation: target-flash 1.5s ease-in-out;
  scroll-margin-top: 4rem;
}

.md-content tr:has(:target) {
  animation: target-row-flash 1.5s ease-in-out;
}

@keyframes target-flash {
  0%, 100% {
    background-color: transparent;
    box-shadow: -0.4rem 0 0 0 transparent;
  }
  25%, 65% {
    background-color: rgba(2, 132, 199, 0.35);    /* sky-600 — matches accent */
    box-shadow: -0.4rem 0 0 0 rgba(2, 132, 199, 0.75);
  }
  45% {
    background-color: transparent;
    box-shadow: -0.4rem 0 0 0 transparent;
  }
}

@keyframes target-row-flash {
  0%, 100% { background-color: transparent; }
  25%, 65% { background-color: rgba(2, 132, 199, 0.3); }
  45% { background-color: transparent; }
}

[data-md-color-scheme="slate"] .md-content :target {
  animation: target-flash-dark 1.5s ease-in-out;
}

[data-md-color-scheme="slate"] .md-content tr:has(:target) {
  animation: target-row-flash-dark 1.5s ease-in-out;
}

@keyframes target-flash-dark {
  0%, 100% {
    background-color: transparent;
    box-shadow: -0.4rem 0 0 0 transparent;
  }
  25%, 65% {
    background-color: rgba(56, 189, 248, 0.22);   /* sky-400 — matches dark accent */
    box-shadow: -0.4rem 0 0 0 rgba(56, 189, 248, 0.65);
  }
  45% {
    background-color: transparent;
    box-shadow: -0.4rem 0 0 0 transparent;
  }
}

@keyframes target-row-flash-dark {
  0%, 100% { background-color: transparent; }
  25%, 65% { background-color: rgba(56, 189, 248, 0.18); }
  45% { background-color: transparent; }
}