/* SignalPy docs — custom overrides for Quarto darkly theme
 *
 * The darkly theme body bg is ~#222. We push code blocks lighter (#2d333b)
 * with a visible left accent border so they pop against the page.
 */

/* ── Page body: true dark ──────────────────────────────────────── */
body {
  background-color: #1a1a2e !important;
  color: #e2e8f0 !important;
}

/* ── Code blocks: lighter than body, accent border ─────────────── */
div.sourceCode,
pre.sourceCode {
  background-color: #2d333b !important;
  border: 1px solid #444c56 !important;
  border-left: 4px solid #58a6ff !important;
  border-radius: 6px !important;
  padding: 0.8em 1em !important;
}

/* Inline code: subtle highlight */
code:not(.sourceCode) {
  background-color: #2d333b !important;
  color: #e6edf3 !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
}

/* Code text color: bright.
 * Quarto sets `pre > code.sourceCode > span { color: #003B4F }` as the default
 * for the LINE-WRAPPER spans (one per source line, holds un-classed identifiers
 * like variable names, type names, parameters). That's near-black on our dark
 * bg → invisible. Override only the line wrapper (direct-child selector); the
 * deeper classed token spans `code span.X` are unaffected and keep their colors. */
div.sourceCode code,
pre.sourceCode code,
pre > code.sourceCode > span,
code.sourceCode > span,
div.sourceCode pre.sourceCode {
  color: #e6edf3 !important;
}

/* ── Syntax highlighting tokens: dark-mode palette ─────────────
 * Quarto ships LIGHT-mode token colors (dark blues/reds/grays)
 * which are unreadable on our dark code block background.
 * Override with a GitHub-Dark / One-Dark inspired palette.
 */
pre > code.sourceCode > span > a:first-child::before {
  color: #6e7681 !important;  /* line number gutter */
}
code span.al { color: #ff7b72 !important; }                     /* alert */
code span.an { color: #8b949e !important; font-style: italic; } /* annotation */
code span.at { color: #79c0ff !important; }                     /* attribute */
code span.bn { color: #79c0ff !important; }                     /* base-N number */
code span.bu { color: #ffa657 !important; }                     /* builtin */
code span.cf { color: #ff7b72 !important; }                     /* control flow */
code span.ch { color: #a5d6ff !important; }                     /* char */
code span.cn { color: #79c0ff !important; }                     /* constant */
code span.co { color: #8b949e !important; font-style: italic; } /* comment */
code span.cv { color: #8b949e !important; font-style: italic; } /* comment var */
code span.do { color: #8b949e !important; font-style: italic; } /* docstring */
code span.dt { color: #ffa657 !important; }                     /* data type */
code span.dv { color: #79c0ff !important; }                     /* decimal value */
code span.er { color: #ff7b72 !important; font-weight: bold; }  /* error */
code span.ex { color: #e6edf3 !important; }                     /* extension */
code span.fl { color: #79c0ff !important; }                     /* float */
code span.fu { color: #d2a8ff !important; }                     /* function */
code span.im { color: #ff7b72 !important; }                     /* import */
code span.in { color: #8b949e !important; font-style: italic; } /* information */
code span.kw { color: #ff7b72 !important; }                     /* keyword */
code span.op { color: #ff7b72 !important; }                     /* operator */
code span.ot { color: #79c0ff !important; }                     /* other */
code span.pp { color: #d2a8ff !important; }                     /* preprocessor */
code span.sc { color: #a5d6ff !important; }                     /* special char */
code span.ss { color: #a5d6ff !important; }                     /* special string */
code span.st { color: #a5d6ff !important; }                     /* string */
code span.va { color: #ffa657 !important; }                     /* variable */
code span.vs { color: #a5d6ff !important; }                     /* verbatim string */
code span.wa { color: #d29922 !important; font-style: italic; } /* warning */
code span.bi { color: #ffa657 !important; }                     /* builtin (Quarto variant) */

/* ── ASCII art / pre blocks (non-code): distinct from body ──── */
pre:not(.sourceCode) {
  background-color: #2d333b !important;
  color: #e6edf3 !important;
  border: 1px solid #444c56 !important;
  border-left: 4px solid #3fb950 !important;
  border-radius: 6px !important;
  padding: 1em !important;
}

/* ── Mermaid diagrams: high contrast ─────────────────────────────
 * One central place for ALL mermaid theming. Do NOT add inline
 * %%{init: {'theme':...}}%% blocks in .qmd files — they fight these
 * rules and produce inconsistent colors per-page (recurring bug).
 */
.mermaid {
  background: #161b22 !important;
  border: 1px solid #444c56 !important;
  border-radius: 8px !important;
  padding: 1em !important;
}
/* All text-bearing elements */
.mermaid text,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .label,
.mermaid .cluster-label,
.mermaid span,
.mermaid foreignObject div {
  color: #f0f3f6 !important;
  fill: #f0f3f6 !important;
  font-weight: 500 !important;
}
/* edgeLabel backgrounds (the little label-on-arrow bg) */
.mermaid .edgeLabel,
.mermaid .edgeLabel rect,
.mermaid .edgeLabel foreignObject {
  background-color: #161b22 !important;
  fill: #161b22 !important;
}
.mermaid .edgeLabel .labelBkg {
  fill: #161b22 !important;
  background-color: #161b22 !important;
  opacity: 1 !important;
}

/* ── Flowchart nodes ─────────────────────────────────────────────── */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon,
.mermaid .node ellipse,
.mermaid .node path {
  fill: #2d333b !important;
  stroke: #58a6ff !important;
  stroke-width: 2px !important;
}
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: #8b949e !important;
  stroke-width: 2px !important;
  fill: none !important;
}
.mermaid .arrowheadPath,
.mermaid #arrowhead path,
.mermaid marker path {
  fill: #8b949e !important;
  stroke: #8b949e !important;
}

/* ── Subgraph (cluster) ──────────────────────────────────────────── */
.mermaid .cluster rect {
  fill: #1c2128 !important;
  stroke: #58a6ff66 !important;
  stroke-width: 2px !important;
  rx: 8px !important;
}
.mermaid .cluster-label,
.mermaid .cluster-label .nodeLabel,
.mermaid .cluster-label foreignObject div {
  color: #d2a8ff !important;
  fill: #d2a8ff !important;
  font-size: 1.05em !important;
  font-weight: 600 !important;
}

/* ── Sequence diagrams ───────────────────────────────────────────── */
.mermaid .actor,
.mermaid rect.actor {
  fill: #2d333b !important;
  stroke: #58a6ff !important;
  stroke-width: 2px !important;
}
.mermaid text.actor,
.mermaid .actor > tspan,
.mermaid .actor-box text {
  fill: #f0f3f6 !important;
}
.mermaid .actor-line,
.mermaid line.actor-line {
  stroke: #6e7681 !important;
  stroke-width: 1px !important;
}
.mermaid line.messageLine0,
.mermaid line.messageLine1,
.mermaid path.messageLine0,
.mermaid path.messageLine1 {
  stroke: #8b949e !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
.mermaid .messageText,
.mermaid text.messageText {
  fill: #d2a8ff !important;
  stroke: none !important;
  font-weight: 500 !important;
}
.mermaid .note,
.mermaid rect.note {
  fill: #1c2128 !important;
  stroke: #d29922 !important;
}
.mermaid .noteText,
.mermaid text.noteText,
.mermaid .note text {
  fill: #f0f3f6 !important;
  stroke: none !important;
}
.mermaid .loopText,
.mermaid text.loopText,
.mermaid .loopLine {
  fill: #d29922 !important;
  stroke: #d29922 !important;
}
.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: #444c56 !important;
  stroke: #58a6ff !important;
}
.mermaid .labelText,
.mermaid text.labelText {
  fill: #f0f3f6 !important;
}

/* ── Side-by-side code triptych (consumer / provider / kernel) ─── */
.triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  margin: 1.2em 0 1.6em 0;
  align-items: stretch;
}
.triptych > .col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.triptych .col-head {
  display: block;
  font-family: monospace;
  font-size: 0.85em;
  color: #58a6ff;
  border-bottom: 1px solid #444c56;
  padding: 0.25em 0;
  margin-bottom: 0.35em;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}
.triptych pre.sourceCode,
.triptych div.sourceCode {
  font-size: 0.74em !important;
  margin: 0 !important;
  height: 100% !important;
  padding: 0.5em 0.7em !important;
}
@media (max-width: 980px) {
  .triptych { grid-template-columns: 1fr; }
}

/* Numbered call-out badges used in the triptych prose */
.cnum {
  display: inline-block;
  background: #58a6ff;
  color: #0d1117 !important;
  font-weight: 700;
  border-radius: 50%;
  min-width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  padding: 0 0.2em;
  text-align: center;
  font-family: monospace;
  margin-right: 0.35em;
  font-size: 0.85em;
  vertical-align: baseline;
}
/* Defensive: if a long phrase is accidentally wrapped in .cnum, at least
   keep it readable rather than rendering dark-on-dark. */
.cnum:has(> :nth-child(2)),
.cnum:not(:empty):not(:where(*:only-child)) {
  border-radius: 0.7em;
}
.cnum-c { background: #3fb950; }   /* consumer */
.cnum-p { background: #d2a8ff; }   /* provider */
.cnum-k { background: #ffa657; }   /* kernel */

/* ── Callout blocks ────────────────────────────────────────────── */
.callout {
  background-color: #2d333b !important;
  border-radius: 6px !important;
}
.callout-note {
  border-left-color: #58a6ff !important;
}
.callout-tip {
  border-left-color: #3fb950 !important;
}
.callout-warning {
  border-left-color: #d29922 !important;
}
.callout-important {
  border-left-color: #f85149 !important;
}

/* ── Tables: readable borders and header ───────────────────────── */
.table, table {
  border-color: #444c56 !important;
}
.table thead th, table thead th {
  border-bottom: 2px solid #58a6ff !important;
  color: #f0f3f6 !important;
  background-color: #2d333b !important;
}
.table td, table td {
  border-color: #2d333b !important;
}
.table tr:nth-child(even) td {
  background-color: #22272e !important;
}

/* ── Sidebar + navbar: slightly different shade ────────────────── */
.sidebar, .quarto-sidebar {
  background-color: #161b22 !important;
}
.navbar {
  background-color: #161b22 !important;
  border-bottom: 1px solid #444c56 !important;
}

/* ── Level tags for traits ──────────────────────────────────────── */
.level-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  border-radius: 4px;
  font-weight: 700;
  font-family: monospace;
}
.l0 { background: #58a6ff22; color: #58a6ff; border: 1px solid #58a6ff; }
.l1 { background: #d2a8ff22; color: #d2a8ff; border: 1px solid #d2a8ff; }
.l2 { background: #3fb95022; color: #3fb950; border: 1px solid #3fb950; }
.l3 { background: #d2992222; color: #d29922; border: 1px solid #d29922; }

/* ── Links ──────────────────────────────────────────────────────── */
a {
  color: #58a6ff !important;
}
a:hover {
  color: #79c0ff !important;
}