/* ============================================================
   Prism theme – afgestemd op jouw palet (light/dark)
   Laad NA prism.min.css
   ============================================================ */

/* --- Basis voor alle codeblokken (Prism + gewone <pre><code>) --- */
.md pre,
pre[class*="language-"] {
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem 1rem;
  overflow: auto;
  /* géén font-size / line-height hier, die regelen we centraal in theme.css */
}

/* Inline code in lopende tekst (zonder language-klasse) */
.md :not(pre) > code:not([class*="language-"]) {
  background: var(--hover);
  color: var(--fg);
  padding: .12rem .35rem;
  border-radius: .35rem;
  border: 1px solid var(--border);
}

/* Inline code met language-klasse */
:not(pre) > code[class*="language-"] {
  background: var(--code-bg);
  color: var(--fg);
  padding: .12rem .35rem;
  border-radius: .35rem;
  border: 1px solid var(--border);
}

/* Tekstselectie binnen code */
pre[class*="language-"] ::selection,
code[class*="language-"] ::selection {
  background: color-mix(in oklab, var(--donkerblauw) 30%, transparent);
}

/* ------------------------------------------------------------
   Tokenkleuren – op basis van jouw variabelen
   (mixen zodat het in beide thema's goed contrasteert)
   ------------------------------------------------------------ */
pre[class*="language-"],
code[class*="language-"] {
  --tok-comment: color-mix(in oklab, var(--grijs) 85%, var(--fg) 15%);
  --tok-punct:   color-mix(in oklab, var(--fg) 70%, transparent);
  --tok-kw:      color-mix(in oklab, var(--paars) 90%, var(--fg) 10%);
  --tok-func:    color-mix(in oklab, var(--donkerblauw) 95%, var(--fg) 5%);
  --tok-class:   color-mix(in oklab, var(--donkerblauw) 85%, var(--fg) 15%);
  --tok-string:  color-mix(in oklab, var(--geel) 90%, var(--fg) 10%);
  --tok-num:     color-mix(in oklab, var(--oranje) 90%, var(--fg) 10%);
  --tok-bool:    color-mix(in oklab, var(--oranje) 90%, var(--fg) 10%);
  --tok-attr:    color-mix(in oklab, var(--groen) 90%, var(--fg) 10%);
  --tok-builtin: color-mix(in oklab, var(--lichtblauw) 90%, var(--fg) 10%);
  --tok-regex:   color-mix(in oklab, var(--paars) 80%, var(--fg) 20%);
  --tok-del:     color-mix(in oklab, var(--rood) 95%, var(--fg) 5%);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: var(--tok-comment); font-style: italic; }

.token.punctuation { color: var(--tok-punct); }

.token.keyword     { color: var(--tok-kw); font-weight: 700; }
.token.function    { color: var(--tok-func); }

.token.class-name,
.token.constant,
.token.symbol      { color: var(--tok-class); }

.token.string,
.token.attr-value  { color: var(--tok-string); }

.token.attr-name,
.token.property,
.token.selector,
.token.inserted    { color: var(--tok-attr); }

.token.number,
.token.boolean     { color: var(--tok-num); }

.token.builtin,
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string { color: var(--tok-builtin); }

.token.regex,
.token.important,
.token.variable    { color: var(--tok-regex); }

.token.deleted     { color: var(--tok-del); }

.token.bold   { font-weight: 700; }
.token.italic { font-style: italic; }

/* ------------------------------------------------------------
   Light/dark kleine tweaks
   ------------------------------------------------------------ */
html:not([data-theme="dark"]) pre[class*="language-"] {
  border-color: color-mix(in oklab, var(--border) 80%, #000 20%);
}
html[data-theme="dark"] pre[class*="language-"] {
  /* iets minder transparant in dark voor crisp rendering */
  background: color-mix(in oklab, var(--bg-donker) 94%, transparent) !important;
  border-color: color-mix(in oklab, var(--border) 85%, transparent);
}

/* Render-scherpte voor donkere achtergronden */
code[class*="language-"],
pre[class*="language-"] { text-shadow: none !important; }
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] pre[class*="language-"] {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* ------------------------------------------------------------
   Line highlight & line numbers (optioneel als je Prism plugins gebruikt)
   ------------------------------------------------------------ */
pre[class*="language-"] .line-highlight {
  background: color-mix(in oklab, var(--donkerblauw) 15%, transparent);
  border-inline-start: 3px solid color-mix(in oklab, var(--donkerblauw) 65%, transparent);
}













/* ------------------------------------------------------------
   CodeFlask integratie (clean build zonder ingebakken Prism)
   - transparante gutter
   - geen eigen bg die je thema overschrijft
   ------------------------------------------------------------ */
.py-playground .codeflask,
.py-playground .codeflask * {
  background: transparent !important;
  background-color: transparent !important;
}

.py-playground .CodeFlask__lines {
  background: transparent !important;
  border: 0 !important;
}
html[data-theme="dark"] .py-playground .CodeFlask__lines span {
  color: rgba(255,255,255,.45) !important;
}
html:not([data-theme="dark"]) .py-playground .CodeFlask__lines span {
  color: rgba(0,0,0,.45) !important;
}

/* De container bepaalt het “kaartje” rondom de editor */
.py-playground .codeflask {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  position: relative;
 /* height: 260px;
  max-height: 50vh; */
  overflow: hidden;
  max-width: 100%;
}

/* Prism in de CodeFlask mirror */
.py-playground .CodeFlask__pre {
  margin: 0;
  white-space: pre;
  color: var(--fg);
}

/* Zorg dat operators nooit een achtergrond pakken door vreemde resets */
.token.operator { background: transparent !important; }








/* ---------------- prism line-numbers (clean, plugin hangt rows in <code>) ---------------- */

/* Het codeblok met nummers */
pre[class*="language-"].line-numbers {
  position: relative;       /* referentie voor de absolute gutter */
  padding-left: 0;          /* geen extra padding meer links */
  counter-reset: linenumber;
}

/* Code naar rechts schuiven zodat er plaats is voor de nummers */
pre[class*="language-"].line-numbers > code {
  /* BELANGRIJK: GEEN position: relative hier! */
  position: static;
  display: block;
  white-space: inherit;
  margin-left: 3.4em;       /* ruimte voor de gutter */
}

/* Container voor de nummer-rijen (de gutter) – wordt door plugin in <code> gezet */
pre[class*="language-"].line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1em;
  left: 0;
  width: 3em;
  border-right: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
}

/* Eén span per regel – hier teller verhogen */
pre[class*="language-"].line-numbers .line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
  /* géén eigen line-height → erft 1.45 van jouw globale code font */
}

/* De daadwerkelijke cijfers */
pre[class*="language-"].line-numbers .line-numbers-rows > span:before {
  content: counter(linenumber);
  display: block;
  text-align: right;
  padding-right: 0.5em;
  font-size: 0.85em;

  color: color-mix(in oklab, var(--fg) 55%, transparent);
}



/* Forceer line-height voor alleen de regelnummers */
pre[class*="language-"].line-numbers .line-numbers-rows > span {
  line-height: 1.7;  /* jouw gewenste regelhoogte */
}