/* ==========================================================================
   CryptoAcademia – a kinyitott tudásoldal (a kártyából „kinyíló” fehér lap)
   és a tananyag tipográfiája (ALAPANYAG + EXTRA TUDÁS).
   SZABÁLY: csak var(--…) a tokens.css-ből, konkrét szín nincs.
   ========================================================================== */

/* Nyitott tudásoldal alatt a térkép nem görgethető, csak a lap maga. */
html.panel-open, html.panel-open body { overflow: hidden; }
/* A térkép elemei (kártyák, lapozó nyilak) a megnyitáskor eltűnnek; a felső sáv és a lábléc marad (halványítva). */
html.panel-open .map, html.panel-open .pager-arrow { opacity: 0; pointer-events: none; }

/* Halványító réteg a tudásoldal mögött. A térkép, a felső sáv és a lábléc (amelyik éppen látszott) átderengenek
   rajta, a lap szélén tehát az látszik, ami a megnyitáskor a képernyőn volt: így egyetlen mindmapen lépkedünk
   előre-hátra. A halványítás mértéke: --veil-opacity (tokens.css); a nyitás/zárás animációja 0-ról ide fut. */
.topic-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--color-paper); opacity: var(--veil-opacity); }

/* A fehér lap. Nyugalmi helyzetben a CSS rögzíti (inset), animáció közben a JavaScript méretezi. */
.topic-panel {
  position: fixed;
  inset: var(--panel-inset-y) var(--panel-inset);
  z-index: 51;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--node-border) solid var(--color-ink);
  overflow: hidden;
}
.topic-panel.is-animating { inset: auto; }
.topic-panel.is-animating .panel-close { visibility: hidden; }

.panel-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Visszazáró gomb a lap jobb felső sarkában */
.panel-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* négyzet, csak az ikon (a „Térkép” felirat törölve) */
  height: 44px;
  padding: 0;
  background: var(--color-surface);
  border: var(--line-medium) solid var(--color-ink);
  color: var(--color-text);
  font-weight: var(--fw-heavy);
  font-variant-caps: all-small-caps;
  font-size: var(--fs-md);
  text-decoration: none;
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.panel-close svg { width: 18px; height: 18px; }
.panel-close:hover { background: var(--accent); color: var(--accent-text); }
.panel-close:active { transform: translateY(2px); }

/* ── A tudásoldal tartalma ── */
.topic { max-width: var(--topic-width); margin: 0 auto; padding: var(--space-7) var(--space-7) var(--space-8); }

.crumbs { font-size: var(--fs-sm); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-dim); padding-right: 140px; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-link); }
.crumbs .sep { margin: 0 var(--space-2); }

.topic-title {
  margin: var(--space-3) 0 var(--space-3);
  font-size: var(--fs-xxl);
  font-weight: var(--fw-heavy);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.topic-title:focus { outline: none; }
.topic-summary { margin-bottom: var(--space-4); }
/* a fejléc alatti vastag elválasztó vonal */
.topic-head { padding-bottom: var(--space-5); border-bottom: var(--node-border) solid var(--color-ink); }

/* ── Tananyag tipográfia ── */
.prose { font-size: var(--fs-prose); line-height: var(--lh-prose); }
.prose > :first-child { margin-top: var(--space-6); }
.prose p, .prose ul, .prose ol, .prose table { margin: var(--space-4) 0; }
.prose h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
  line-height: var(--lh-tight);
}
.prose h2::before { content: ""; display: block; width: 48px; height: var(--line-thick); background: var(--accent); margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li { margin: var(--space-2) 0; }
.prose li::marker { color: var(--accent); font-weight: var(--fw-heavy); }
.prose strong { font-weight: var(--fw-bold); }
.prose em { font-style: italic; color: var(--color-text-muted); }
/* kiemelőszínű szöveg (a szövegszerkesztő „A” gombja): mindig az aktuális térkép színe */
.prose .hl { color: var(--accent-link); }
.prose code { font-size: 0.88em; padding: 1px 5px; background: var(--color-surface-sunken); border: var(--line-thin) solid var(--color-border); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.prose th { text-align: left; padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-muted); background: var(--color-surface-sunken); border-bottom: var(--line-thin) solid var(--color-border); }
.prose td { padding: var(--space-2) var(--space-3); border-bottom: var(--line-thin) solid var(--color-border); vertical-align: top; }

/* Kiemelt doboz (markdownban: > idézet), pl. „Megjegyzés” */
.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--accent-faded);
  border-left: var(--node-border) solid var(--accent);
}
.prose blockquote > :first-child { margin-top: 0; }
.prose blockquote > :last-child { margin-bottom: 0; }

/* ── Kép a tananyagban ──
   Egységes keret: kiemelőszínű külső vonal, belül kis fehér tér. Alapból teljes szélességű; ha a szerkesztő kisebbre
   vette, oldalra kerül (left / right), és a másik oldalon a hozzá írt szöveg áll. Mobilon egymás alá kerülnek. */
.img-block { display: flex; align-items: flex-start; gap: var(--space-5); margin: var(--space-6) 0; }
.img-block[data-align="right"] { flex-direction: row-reverse; }
.img-frame {
  position: relative;
  flex: 0 0 var(--img-w, 100%);
  max-width: 100%;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--node-border) solid var(--accent);
}
.img-frame img { display: block; width: 100%; height: auto; }
.img-text { flex: 1 1 0; min-width: 0; }
.img-text:empty, .img-block[data-align="full"] .img-text { display: none; }
.img-text > :first-child { margin-top: 0; }
.img-text > :last-child { margin-bottom: 0; }
.img-text h2 { margin-top: 0; }
@media (max-width: 700px) {
  .img-block, .img-block[data-align="right"] { flex-direction: column; gap: var(--space-4); }
  .img-frame { flex-basis: auto; width: 100%; }
}

/* ── Ábra ── */
.figure { margin: var(--space-6) 0; border: var(--line-thin) solid var(--color-border); background: var(--color-surface-alt); }
.figure-art { padding: var(--space-4); overflow-x: auto; }
.figure-art svg { width: 100%; height: auto; min-width: 560px; }
.figure figcaption { padding: var(--space-3) var(--space-4); border-top: var(--line-thin) solid var(--color-border); font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-muted); }

/* ── EXTRA TUDÁS: összecsukható, más színű, szaggatott keretes szakasz ── */
.extra { margin: var(--space-6) 0; border: var(--line-medium) dashed var(--extra-accent); background: var(--extra-faded); }
.extra > summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none;
  font-weight: var(--fw-heavy); line-height: var(--lh-tight);
}
.extra > summary::-webkit-details-marker { display: none; }
.extra > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-lg); line-height: 1; color: var(--extra-accent); transition: transform var(--dur-base); }
.extra[open] > summary::after { transform: rotate(45deg); }
.extra-tag { flex: 0 0 auto; padding: 2px var(--space-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); background: var(--extra-accent); color: var(--extra-text); }
.extra-body { padding: 0 var(--space-5) var(--space-4); border-top: var(--line-thin) dashed var(--extra-accent); }

/* ── Még nem kész téma ── */
.topic-soon { margin: var(--space-6) 0; padding: var(--space-6); text-align: center; border: var(--line-medium) dashed var(--color-border-strong); background: var(--accent-faded); }
.topic-soon h2 { font-size: var(--fs-lg); font-variant-caps: all-small-caps; margin: var(--space-3) 0 var(--space-2); }
.topic-soon p { color: var(--color-text-muted); }

/* ── Innen tovább: a gyerek-témák kis kártyái ── */
.topic-next { margin-top: var(--space-8); }
.topic-next h2 { font-size: var(--fs-lg); font-weight: var(--fw-heavy); font-variant-caps: all-small-caps; margin-bottom: var(--space-4); }
.next-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.next-card {
  display: flex; flex-direction: column; gap: var(--space-1); height: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--node-border) solid var(--color-ink);
  color: var(--color-text); text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-base);
}
.next-card:hover { color: var(--color-text); box-shadow: inset 0 calc(-1 * var(--line-thick)) 0 var(--accent); }
.next-card:active { transform: translateY(2px); }
.next-card .next-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); font-variant-caps: all-small-caps; line-height: var(--lh-tight); }
.next-card .next-summary { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.45; }

@media (max-width: 700px) {
  .topic { padding: var(--space-6) var(--space-4) var(--space-7); }
  .crumbs { padding-right: 56px; }
  .topic-title { font-size: var(--fs-xl); }
  .panel-close { top: var(--space-3); right: var(--space-3); }
  .figure-art svg { min-width: 520px; }
  .extra-body { padding: 0 var(--space-4) var(--space-3); }
}


/* ── Beágyazott kalkulátor (a cryptodetective.net iframe-je) ── */
.calc { margin: var(--space-6) 0; border: var(--line-thick) solid var(--color-ink); background: var(--color-surface); }
.calc-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-ink); color: var(--color-text-inverse); }
.calc-tag { padding: 2px var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); background: var(--accent); color: var(--accent-text); }   /* a doboz teljes felirata (mondat) ebben a színes mezőben áll */
.calc-frame { display: block; width: 100%; height: 640px; border: 0; background: var(--color-surface); }   /* a kalkulátor jelzésére a script átállítja a magasságot */