/* A térkép belseje (markmap). Szó szerint bekerül az exportált HTML/SVG/PNG-be
 * is, ezért csak a markmap SVG-jén belülre szabhat, és csak tokens.css
 * változókra támaszkodhat.
 *
 * A markmap a saját alap-CSS-ét az SVG-be ágyazza `.markmap` szelektorral, és
 * mivel az később áll a dokumentumban, azonos erősségű szabályt felülírna.
 * Ezért minden szabály itt `svg.markmap`-pel kezdődik (egy fokkal erősebb). */

svg.markmap {
  --markmap-font: 400 16px/1.35 var(--font);
  --markmap-text-color: var(--ink);
  --markmap-a-color: var(--link);
  --markmap-a-hover-color: var(--link);
  --markmap-code-bg: var(--code-bg);
  --markmap-code-color: var(--ink);
  --markmap-highlight-bg: var(--mark-bg);
  --markmap-circle-open-bg: var(--map-ground);
  --markmap-highlight-node-bg: var(--hit-bg);
  --markmap-table-border: 1px solid var(--rule-strong);
  background: var(--map-ground);
  font-kerning: normal;
}

/* Megállók: a markmap köre a csomópont végén. Vastagabb gyűrű, mint alapból —
 * nyitva üres megálló, becsukva a vonal színével kitöltve (ezt a markmap adja). */
svg.markmap .markmap-node > circle {
  stroke-width: 2.5px;
}

/* A mélység a hangerő: a gyökér beszél a leghangosabban, a levelek a
 * leghalkabban. A markmap a méretet a DOM-ból méri, így ez a tördelésbe is
 * beleszámít. */
svg.markmap .markmap-node[data-depth="1"] > .markmap-foreign {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}
svg.markmap .markmap-node[data-depth="2"] > .markmap-foreign {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}
svg.markmap .markmap-node[data-depth="3"] > .markmap-foreign {
  font-size: 16px;
}
svg.markmap .markmap-node:not([data-depth="1"]):not([data-depth="2"]):not([data-depth="3"]) > .markmap-foreign {
  font-size: 15px;
}

svg.markmap .markmap-foreign strong {
  font-weight: 600;
}
svg.markmap .markmap-foreign em {
  font-style: italic;
}
svg.markmap .markmap-foreign del {
  color: var(--muted);
  text-decoration-thickness: 1.5px;
}
svg.markmap .markmap-foreign mark {
  color: var(--mark-ink);
  padding: 0 0.18em;
  border-radius: 3px;
}
svg.markmap .markmap-foreign a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
svg.markmap .markmap-foreign code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.08em 0.36em;
  border-radius: 4px;
}
svg.markmap .markmap-foreign pre {
  margin: 4px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--code-bg);
  font: 13px/1.5 var(--mono);
  text-align: left;
}
svg.markmap .markmap-foreign pre > code {
  padding: 0;
  background: none;
  font-size: inherit;
  color: var(--ink);
}
svg.markmap .markmap-foreign table {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
svg.markmap .markmap-foreign th,
svg.markmap .markmap-foreign td {
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
}
svg.markmap .markmap-foreign th {
  font-weight: 600;
  background: var(--code-bg);
}
svg.markmap .markmap-foreign img {
  display: block;
  max-width: 280px;
  height: auto;
  margin: 2px 0;
  border-radius: 8px;
}
/* A jelölőnégyzetek a markmap saját kis SVG-i. */
svg.markmap .markmap-foreign svg {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.2em;
  fill: currentColor;
}
svg.markmap .markmap-foreign .katex {
  font-size: 1.06em;
}

/* Kódszínezés (highlight.js osztályok) a tokens.css színeiből, hogy világos és
 * sötét módban is a vonalhálózat színvilágát kövesse. */
svg.markmap .hljs-keyword,
svg.markmap .hljs-selector-tag,
svg.markmap .hljs-built_in,
svg.markmap .hljs-type {
  color: var(--tok-keyword);
}
svg.markmap .hljs-string,
svg.markmap .hljs-regexp,
svg.markmap .hljs-symbol {
  color: var(--tok-string);
}
svg.markmap .hljs-number,
svg.markmap .hljs-literal {
  color: var(--tok-number);
}
svg.markmap .hljs-title,
svg.markmap .hljs-section,
svg.markmap .hljs-name {
  color: var(--tok-title);
}
svg.markmap .hljs-attr,
svg.markmap .hljs-attribute,
svg.markmap .hljs-property,
svg.markmap .hljs-variable {
  color: var(--tok-attr);
}
svg.markmap .hljs-comment,
svg.markmap .hljs-quote,
svg.markmap .hljs-meta {
  color: var(--tok-comment);
  font-style: italic;
}
svg.markmap .hljs-bullet,
svg.markmap .hljs-punctuation {
  color: var(--muted);
}