/* ============================================================
 * Code blocks, Mermaid, Pyodide runner — design system layer
 * ============================================================ */

/* ---------- Code blocks (refined, no kitsch) ---------- */

.md-typeset .highlight {
  position: relative;
  background: var(--color-code-bg) !important;
  color: var(--color-code-fg) !important;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  margin: 0.9em 0 !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

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

/* Subtle top bar (replaces the ●●● dots) */
.md-typeset .highlight::before {
  content: "";
  display: block;
  height: 0;
  padding: 0;
}

.md-typeset .highlight pre {
  margin: 0 !important;
  padding: 0.85em 1em !important;
  background: transparent !important;
  overflow-x: auto;
  border: 0;
}

.md-typeset .highlight pre code,
.md-typeset .highlight code {
  background: transparent !important;
  color: var(--color-code-fg) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.83em !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  padding: 0 !important;
  display: block;
}

/* Filename label (small badge at top-left when used) */
.md-typeset .highlight .filename {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-tertiary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.4em 0.9em;
  font-size: 0.74em;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Line-number gutter — quieter */
.md-typeset .highlight .linenodiv,
.md-typeset .highlight table.linenotable td.linenos {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.20) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-right: 0.9em !important;
  user-select: none;
}
.md-typeset .highlight .lineno,
.md-typeset .highlight .linenos { color: rgba(255, 255, 255, 0.20) !important; }

/* Copy button — visible, on-brand */
.md-clipboard {
  color: rgba(255, 255, 255, 0.35) !important;
  transition: color 0.15s ease;
}
.md-clipboard:hover { color: rgba(255, 255, 255, 0.85) !important; }
.md-typeset .highlight .md-clipboard {
  top: 0.55em !important;
  right: 0.55em !important;
  z-index: 2;
}

/* ---------- Syntax colors (One Dark-ish, calmer than VS Code Dark+) ---------- */

/* Keywords */
.md-typeset .highlight .k,
.md-typeset .highlight .kc,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kp,
.md-typeset .highlight .kr,
.md-typeset .highlight .kt { color: #C792EA !important; font-weight: 500 !important; }

/* Strings */
.md-typeset .highlight .s,
.md-typeset .highlight .sb,
.md-typeset .highlight .sc,
.md-typeset .highlight .sd,
.md-typeset .highlight .s2,
.md-typeset .highlight .se,
.md-typeset .highlight .sh,
.md-typeset .highlight .si,
.md-typeset .highlight .sx,
.md-typeset .highlight .sr,
.md-typeset .highlight .s1,
.md-typeset .highlight .ss { color: #C3E88D !important; }

/* Comments */
.md-typeset .highlight .c,
.md-typeset .highlight .ch,
.md-typeset .highlight .cm,
.md-typeset .highlight .cp,
.md-typeset .highlight .cpf,
.md-typeset .highlight .c1,
.md-typeset .highlight .cs { color: #5C6370 !important; font-style: italic !important; }

/* Built-ins (print, len, int, str) */
.md-typeset .highlight .nb { color: #82AAFF !important; }

/* Function and method names */
.md-typeset .highlight .nf,
.md-typeset .highlight .fm { color: #82AAFF !important; }

/* Class names */
.md-typeset .highlight .nc { color: #FFCB6B !important; }

/* Module / namespace names */
.md-typeset .highlight .nn { color: #FFCB6B !important; }

/* Decorators */
.md-typeset .highlight .nd { color: #82AAFF !important; }

/* Generic names */
.md-typeset .highlight .n,
.md-typeset .highlight .na,
.md-typeset .highlight .ni { color: #E1E2E6 !important; }

/* Operators */
.md-typeset .highlight .o,
.md-typeset .highlight .ow { color: #89DDFF !important; }

/* Numbers */
.md-typeset .highlight .mi,
.md-typeset .highlight .mf,
.md-typeset .highlight .mb,
.md-typeset .highlight .mh,
.md-typeset .highlight .mo,
.md-typeset .highlight .m  { color: #F78C6C !important; }

/* Errors */
.md-typeset .highlight .err { color: #FF5370 !important; background: transparent !important; }

.md-typeset .highlight .p { color: #E1E2E6 !important; }

/* Shell prompts / generic output */
.md-typeset .highlight .gp,
.md-typeset .highlight .go { color: #82AAFF !important; opacity: 0.85; }

/* Diff lines */
.md-typeset .highlight .gi { background: rgba(195, 232, 141, 0.10); color: #C3E88D !important; }
.md-typeset .highlight .gd { background: rgba(255, 83, 112, 0.10); color: #FF5370 !important; }

/* ---------- Mermaid diagrams — refined multi-tone, NOT all-green ---------- */

.md-typeset .mermaid {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.6em 1.4em;
  margin: 1.8em 0;
  text-align: center;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

[data-md-color-scheme="slate"] .md-typeset .mermaid {
  background: #FFFFFF;            /* keep diagrams readable in dark mode */
  border-color: rgba(255, 255, 255, 0.06);
}

.md-typeset .mermaid svg {
  max-width: 100% !important;
  height: auto !important;
  font-family: var(--font-sans) !important;
}

/* Default nodes — soft indigo */
.md-typeset .mermaid .node rect,
.md-typeset .mermaid .node polygon,
.md-typeset .mermaid .node circle,
.md-typeset .mermaid .node ellipse {
  fill: #EEF2FF !important;
  stroke: #4F46E5 !important;
  stroke-width: 1.5px !important;
}

/* Rounded corners on rectangles */
.md-typeset .mermaid .node rect {
  rx: 8px !important;
  ry: 8px !important;
}

/* Decision nodes (diamonds) — amber */
.md-typeset .mermaid .node.default polygon[points*=","] {
  fill: #FEF3C7 !important;
  stroke: #F59E0B !important;
}

/* Round / event nodes (terminals) — sky */
.md-typeset .mermaid .node.stadium rect,
.md-typeset .mermaid .node.circle circle {
  fill: #E0F2FE !important;
  stroke: #0EA5E9 !important;
}

/* Database / cylinder shapes — emerald */
.md-typeset .mermaid .node.cylinder path,
.md-typeset .mermaid .node.cylinder ellipse {
  fill: #D1FAE5 !important;
  stroke: #10B981 !important;
}

/* Text inside nodes */
.md-typeset .mermaid .node .label,
.md-typeset .mermaid .node text,
.md-typeset .mermaid .nodeLabel {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  fill: #0F172A !important;
  color: #0F172A !important;
}

/* Edge labels — clean white pill */
.md-typeset .mermaid .edgeLabel,
.md-typeset .mermaid .edgeLabel p {
  background: #FFFFFF !important;
  color: #4F46E5 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid #E0E7FF !important;
}

/* Edge paths */
.md-typeset .mermaid .edgePath .path,
.md-typeset .mermaid .flowchart-link {
  stroke: #64748B !important;
  stroke-width: 1.5px !important;
}
.md-typeset .mermaid .arrowheadPath,
.md-typeset .mermaid .arrowMarkerPath {
  fill: #64748B !important;
  stroke: #64748B !important;
}

/* Subgraph clusters — softer treatment */
.md-typeset .mermaid .cluster rect {
  fill: #F8FAFC !important;
  stroke: #CBD5E1 !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: 4 4 !important;
  rx: 10px !important;
  ry: 10px !important;
}
.md-typeset .mermaid .cluster text,
.md-typeset .mermaid .cluster .nodeLabel {
  font-weight: 700 !important;
  font-size: 13px !important;
  fill: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ---------- Spacing tweaks for long pages ---------- */

.md-content__inner {
  padding-top: 1.2em;
}

.md-content__inner > h1:first-child {
  margin-top: 0.4em;
}

/* Table-of-contents on the right */
.md-nav--secondary .md-nav__title {
  font-size: 0.7rem;
  margin-bottom: 0.5em;
}
.md-nav--secondary .md-nav__link {
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
}

/* Search highlight */
.md-search-result__teaser mark {
  background: var(--color-accent-amber-soft);
  color: var(--color-text-primary);
  padding: 0 2px;
  border-radius: 2px;
}

/* Better focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar polish (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 5px;
  border: 2px solid var(--color-bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* Selection */
::selection {
  background: var(--color-accent-primary-soft);
  color: var(--color-accent-primary);
}

/* Print-friendly */
@media print {
  .md-header, .md-tabs, .md-sidebar, .md-footer { display: none; }
}