/* ==========================================================================
   CryptoAcademia – a térkép (mindmap)
   - Vízszintesen TÉRKÉPEK: minden gyökértéma egy teljes képernyőnyi térkép, saját fával. Jobbra-balra csak egész
     térképenként lehet mozdulni (CSS scroll-snap + static/js/pager.js).
   - Függőlegesen: egy térképen belül a fa szabadon görgethető lefelé.
   - A fa szabályos, fentről lefelé haladó; nincs szabad nagyítás és mozgatás.
   SZABÁLY: csak var(--…) a tokens.css-ből, konkrét szín nincs.
   ========================================================================== */

/* A térkép nézetben maga a dokumentum nem görget: a térképek görgetnek, egyenként. */
html.map-page, html.map-page body { height: 100%; overflow: hidden; }

/* ── A térképek sávja ── */
.pages {
  display: flex;
  height: 100vh;
  height: 100dvh;                    /* mobilon a címsor eltűnésével változó magasság */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;     /* mindig egy teljes térképre áll be */
  overscroll-behavior-x: contain;    /* a böngésző „vissza” mozdulata ne induljon el véletlenül */
  scrollbar-width: none;
}
.pages::-webkit-scrollbar { display: none; }

.page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;          /* egy lendülettel sem lehet térképet átugrani */
  /* a négyzetrács a térképpel együtt mozog, függőlegesen is */
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: local;
}
.page:focus { outline: none; }

.map { flex: 1; padding: calc(var(--pager-height) + var(--space-8)) var(--space-5) var(--space-8); }

/* ── Felső sáv: a térképek jelzője ──
   Teljes szélességű, a képernyő tetejére tapadó sáv (a lábléc párja). A fülek egyforma szélesek: új térkép
   felvételekor a többi automatikusan keskenyebb lesz. A sáv végén a cryptodetective-gomb áll: mindig négyzet
   (a magassága = a szélessége), a fülek a maradék helyen osztoznak.
   A fülek színe a lapozással SZINKRONBAN változik: a static/js/pager.js a térképek vízszintes görgetési állásából
   fülenként kiszámolja a --p értéket (0 = nem aktív, 1 = teljesen aktív), ezért a szín pontosan a térképpel együtt
   mozog (swipe-nál az ujjal, nyílnál és fülre kattintáskor a térkép mozgásával). Minden fül alján a saját
   térképe színes csíkja látszik (a data-accent adja). */
.pager {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  height: var(--pager-height);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--color-footer-bg);
}
.pager-tab {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;                       /* mindegyik fül ugyanakkora szélességet kap */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  text-align: center;
  /* a betű a fülek számával arányosan kisebb (a --tabs a sablonból jön), hogy a hosszú szavak is kiférjenek */
  font-size: clamp(var(--fs-xs), min(1.3vw, calc(100vw / var(--tabs, 3) / 12)), var(--fs-md));
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* szót sosem választunk el és nem törünk szét: sortörés csak szóközben lehet (a betűméretet a pager.js fitTabs igazítja) */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-decoration: none;
  /* szöveg: a halvány szürkéből a kiemelőszínű háttér szövegszínébe vált a --p szerint */
  color: color-mix(in srgb, var(--accent-text) calc(var(--p, 0) * 100%), var(--color-text-muted));
  /* Elválasztó vonal nincs: a fülek alján a színes csíkok érintkezése jelzi a határt. A csík NEM szegély (két szegély
     találkozásánál a böngésző átlósan vágja a sarkot, és a csík széle ferde lenne), hanem külön elem (::after). */
  user-select: none;
}
/* a színes csík alul, szögletes végekkel */
.pager-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--line-thick);
  background: var(--accent);
}
/* a kitöltés: a térkép színe, a --p szerinti átlátszósággal */
.pager-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  opacity: var(--p, 0);
}
.pager-tab:hover { color: color-mix(in srgb, var(--accent-text) calc(var(--p, 0) * 100%), var(--color-text-inverse)); }

/* cryptodetective-gomb: négyzet, mérete független a fülektől */
.pager-link {
  flex: 0 0 var(--pager-height);
  width: var(--pager-height);
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
/* Narancssárga csík alul (a fülekkel egységes; a gomb mindig bitcoin-színű). Külön elem, nem szegély, mert a szegély
   sarka a böngészőben átlósan vágódik (ferde csíkvég). Elválasztó vonal nincs. */
.pager-link::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: var(--line-thick); background: var(--btc); }
/* a logó a csík fölötti területet tölti ki, a közepére igazítva (a szélein a sötét háttér miatt nem látszik vágás) */
.pager-link img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter var(--dur-base); }
.pager-link:hover img, .pager-link:focus-visible img { filter: brightness(1.7); }

/* ── Oldalsó lapozó nyilak (egérrel használóknak) ── */
.pager-arrow {
  position: fixed;
  top: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background: var(--color-surface);
  border: var(--node-border) solid var(--color-ink);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.pager-arrow svg { width: 22px; height: 22px; }
.pager-arrow:hover { background: var(--accent); color: var(--accent-text); }   /* a --accent a pager.js által beállított data-accent miatt az éppen látható térkép színe */
.pager-arrow:active { transform: translateY(2px); }
.pager-prev { left: var(--space-4); }
.pager-next { right: var(--space-4); }
/* A nyilak akkor látszanak, ha kényelmesen elférnek, vagyis nem lógnának a kártyák fölé; ezt a pager.js dönti el
   (a hidden attribútummal), lásd updateArrows(). Ezért a fa két oldalán nincs fenntartott hely. */

/* ── A fa ── */
.tree, .tree ul { list-style: none; }
.tree li { position: relative; }

/* ── A kártya (csomópont) ── */
.node {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: var(--node-border) solid var(--color-ink);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast);
}
.node:hover { color: var(--color-text); }
.node:active { transform: translateY(2px); }

/* A cím és a rövid kifejtés ugyanabban a cellában áll; egérrel fölé állva a kettő helyet cserél. */
.node > span { grid-area: 1 / 1; transition: opacity var(--dur-base), transform var(--dur-base); }
.node-title {
  font-weight: var(--fw-heavy);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
  line-height: var(--lh-tight);
}
.node-summary {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(4px);
}
/* kiemelőszínű csík a kártya alján, ha fölötte az egér */
.node::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--line-thick);
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur-base);
}
@media (hover: hover) {
  .node:hover .node-title, .node:focus-visible .node-title { opacity: 0; transform: translateY(-4px); }
  .node:hover .node-summary, .node:focus-visible .node-summary { opacity: 1; transform: none; }
  .node:hover::after, .node:focus-visible::after { transform: scaleX(1); }
}
/* Érintőképernyőn nincs „fölé állás”, ezért ott a kifejtés mindig látszik a cím alatt. */
@media (hover: none) {
  .node > span { grid-area: auto; }
  .node-summary { opacity: 1; transform: none; margin-top: var(--space-1); }
}

.node--d0 { width: var(--node-width-0); min-height: var(--node-height-0); }
.node--d0 .node-title { font-size: var(--node-title-0); }
.node--d0 .node-summary { font-size: var(--fs-base); }
.node--d1 { width: var(--node-width-1); min-height: var(--node-height-1); }
.node--d1 .node-title { font-size: var(--node-title-1); }
.node--d2 { width: var(--node-width-2); min-height: var(--node-height-2); padding: var(--space-3); }
.node--d2 .node-title { font-size: var(--node-title-2); }
.node--d2 .node-summary { font-size: 13px; }

/* ── Asztali elrendezés: a gyerekek egymás mellett, összekötő vonalakkal ── */
@media (min-width: 701px) {
  /* A kártyák helyét a pager.js számolja (layoutTree): a li-k a saját ul-jukban abszolút pozícióval állnak, a szélességük
     a kártyáé, a vízszintes helyük a kontúr-alapú elrendezésből jön. Itt csak a függőleges rend és a vonalak vannak. */
  .tree { display: block; width: max-content; margin-inline: auto; }
  .tree li { display: flex; flex-direction: column; align-items: center; padding: var(--tree-gap) 0 0; }
  .tree > li { padding-top: 0; }
  .tree ul { position: relative; display: block; box-sizing: content-box; width: 100%; padding-top: var(--tree-gap); }   /* content-box: a pager.js a magasságot a belső tartalomra adja */
  .tree ul > li { position: absolute; top: var(--tree-gap); }

  /* függőleges vonal a szülő aljától a vízszintes gyűjtővonalig */
  .tree ul::before {
    content: ""; position: absolute; top: 0;
    left: calc(50% - var(--connector) / 2);
    width: var(--connector); height: var(--tree-gap);
    background: var(--color-ink);
  }
  /* vízszintes gyűjtővonal: az első gyerek közepétől az utolsóéig */
  .tree ul > li::before {
    content: ""; position: absolute; top: 0;
    left: calc(50% - var(--bl, 0px)); right: calc(50% - var(--br, 0px));   /* a szomszéd gyerek közepéig ér (a pager.js adja a --bl/--br értéket) */
    height: var(--connector);
    background: var(--color-ink);
  }
  .tree ul > li:first-child::before { left: calc(50% - var(--connector) / 2); }
  .tree ul > li:last-child::before { right: calc(50% - var(--connector) / 2); }
  .tree ul > li:only-child::before { display: none; }
  /* függőleges vonal a gyűjtővonaltól a gyerek tetejéig */
  .tree ul > li::after {
    content: ""; position: absolute; top: 0;
    left: calc(50% - var(--connector) / 2);
    width: var(--connector); height: var(--tree-gap);
    background: var(--color-ink);
  }
}

/* ── Mobil elrendezés: a gyerekek egymás alatt, balról behúzva ── */
@media (max-width: 700px) {
  .map { padding: calc(var(--pager-height) + var(--space-7)) var(--space-3) var(--space-7); }
  /* a betűméretet a pager.js (fitTabs) igazítja a szöveghez; szót sosem választunk el, csak szóközben törünk sort */
  .pager-tab { padding: 0 2px; letter-spacing: 0.02em; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .tree { --indent: 28px; --stub-x: 16px; --stub-y: 26px; }
  .tree ul { padding-left: var(--indent); }
  .tree ul > li { padding-top: var(--space-4); }
  /* függőleges gerinc a gyerekek bal oldalán */
  .tree ul > li::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(-1 * var(--stub-x) - var(--connector) / 2);
    width: var(--connector);
    background: var(--color-ink);
  }
  .tree ul > li:last-child::after { bottom: auto; height: calc(var(--space-4) + var(--stub-y) + var(--connector) / 2); }
  /* vízszintes csonk a gerinctől a kártyáig */
  .tree ul > li::before {
    content: ""; position: absolute;
    top: calc(var(--space-4) + var(--stub-y) - var(--connector) / 2);
    left: calc(-1 * var(--stub-x));
    width: var(--stub-x); height: var(--connector);
    background: var(--color-ink);
  }
  .node, .node--d2 { width: 100%; min-height: 0; place-items: start; text-align: left; padding: var(--space-3) var(--space-4); }
  .node--d0 { min-height: 0; }
  .node--d0 .node-title { font-size: var(--fs-lg); }
  .node--d1 .node-title, .node--d2 .node-title { font-size: var(--fs-md); }
  .node--d0 .node-summary, .node--d2 .node-summary { font-size: var(--fs-sm); }
}

/* ── Haladás: a teljesített kártyáig vezető vonal kiszíneződik és vastagabb (a --path színt a quiz.js adja) ── */
@media (min-width: 701px) {
  /* a vastag vonalak sarka sima derékszög: a függőleges szár addig ér, ahol a vízszintes vastag vonal külső széle van */
  .tree ul.path-up::before { background: var(--path); width: var(--connector-done); left: calc(50% - var(--connector-done) / 2); height: calc(var(--tree-gap) + (var(--connector) + var(--connector-done)) / 2); }
  .tree ul > li.is-done::after {
    background: var(--path); width: var(--connector-done); left: calc(50% - var(--connector-done) / 2);
    top: calc((var(--connector) - var(--connector-done)) / 2); height: calc(var(--tree-gap) + (var(--connector-done) - var(--connector)) / 2);
  }
  .tree ul > li.path-full:first-child::before, .tree ul > li.path-half-l:first-child::before, .tree ul > li.path-half-r:first-child::before { left: calc(50% - var(--connector-done) / 2); }
  .tree ul > li.path-full:last-child::before, .tree ul > li.path-half-l:last-child::before, .tree ul > li.path-half-r:last-child::before { right: calc(50% - var(--connector-done) / 2); }
  .tree ul > li.path-full::before, .tree ul > li.path-half-l::before, .tree ul > li.path-half-r::before {
    height: var(--connector-done); top: calc((var(--connector) - var(--connector-done)) / 2);
  }
  .tree ul > li.path-full::before { background: var(--path); }
  /* félig színes szakasz: az egyik fele a haladás színe, a másik fele a megszokott (vékony) vonal */
  .tree ul > li.path-half-l::before {
    background: linear-gradient(var(--path), var(--path)) left center / calc(var(--bl, 0px) + var(--connector-done) / 2) 100% no-repeat, linear-gradient(var(--color-ink), var(--color-ink)) left center / 100% var(--connector) no-repeat;
  }
  .tree ul > li.path-half-r::before {
    background: linear-gradient(var(--path), var(--path)) right center / calc(var(--br, 0px) + var(--connector-done) / 2) 100% no-repeat, linear-gradient(var(--color-ink), var(--color-ink)) left center / 100% var(--connector) no-repeat;
  }
}
@media (max-width: 700px) {
  .tree ul > li.is-done::before {
    background: var(--path); height: var(--connector-done);
    top: calc(var(--space-4) + var(--stub-y) - var(--connector-done) / 2);
    left: calc(-1 * var(--stub-x) - var(--connector-done) / 2); width: calc(var(--stub-x) + var(--connector-done) / 2);   /* a sarok sima derékszög */
  }
  .tree ul > li.spine-part:last-child::after { height: calc(var(--space-4) + var(--stub-y) + var(--connector-done) / 2); }
  .tree ul > li.spine-full::after { background: var(--path); width: var(--connector-done); left: calc(-1 * var(--stub-x) - var(--connector-done) / 2); }
  .tree ul > li.spine-part::after {
    width: var(--connector-done); left: calc(-1 * var(--stub-x) - var(--connector-done) / 2);
    background: linear-gradient(var(--path), var(--path)) center top / 100% calc(var(--space-4) + var(--stub-y) + var(--connector-done) / 2) no-repeat, linear-gradient(var(--color-ink), var(--color-ink)) center top / var(--connector) 100% no-repeat;
  }
}

/* Ahol a vastag (színes) és a vékony vonal találkozik, a vastag van felül: a vékony nem lóg bele */
.tree ul.path-up::before, .tree ul > li.is-done::before, .tree ul > li.is-done::after,
.tree ul > li.path-full::before, .tree ul > li.path-half-l::before, .tree ul > li.path-half-r::before,
.tree ul > li.spine-full::after, .tree ul > li.spine-part::after { z-index: 1; }