/* ============================================================
   A mi bolygónk 2.3 — rendrakás: hierarchia és navigáció (Kristóf döntései, 2026-10-02). A bolygo-2.css UTÁN töltődik.
   Rétegek: bal fent HOL VAGY (cím + morzsasor) · jobb fent ESZKÖZÖK (felirattal) · jobb szélen a TÉRKÉP kezelése
   (+ · szint · − · Térkép) · alul SZÍNEZÉS, legalul a MÓDOK. Egy nyitott panel mellé húzódik minden (--bl-lap-w).
   Csak tokenek (docs/arculat.md).
   ============================================================ */

/* ---- hol vagy: cím + morzsasor ---- */
#blCim { align-items:flex-start; padding:8px 12px; max-width:min(46vw, 460px); }
#blCim > div { display:grid; gap:2px; min-width:0; }
.blMorzsa { display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; margin:0; padding:0; list-style:none; font:600 var(--fs-xs)/1.3 var(--body); }
.blMorzsa li { display:inline-flex; align-items:center; min-width:0; }
.blMorzsa li + li::before { content:"›"; margin:0 6px; color:var(--ink-soft); }
.blMorzsa button { min-height:28px; min-width:28px; padding:0 4px; border:0; background:none; color:var(--ink-soft); font:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--sage); cursor:pointer; }
.blMorzsa [aria-current] { color:var(--ink); font-weight:700; }
.blMorzsa .blMorzsaOrszag { display:inline-flex; gap:4px; align-items:center; padding:2px 8px; border-radius:var(--r-pill); background:var(--butter);
  color:var(--ink); font-weight:700; text-decoration:none; }
.blMorzsa .blMorzsaOrszag .pic { width:14px; height:14px; }
.blMorzsa button:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
@media (hover:hover) and (pointer:fine){ .blMorzsa button:hover { color:var(--ink); text-decoration-color:var(--ink); } }
#blSub { color:var(--ink); font-weight:700; }
@media (pointer:coarse){ .blMorzsa button { min-height:var(--tap); min-width:var(--tap); } }   /* érintőn a morzsa is 44 px-es célpont */

/* ---- eszközök jobb fent: mindig felirattal ---- */
#blGombok { gap:6px; }
.blEszkoz { position:relative; box-shadow:var(--soft-sm); --stamp-rot:0deg; }   /* a pecsét-mozdulat ne billentse a feliratot */
.blJelveny { margin-left:2px; padding:0 6px; border-radius:var(--r-pill); background:var(--butter); font:700 var(--fs-xs)/1.5 var(--body); font-variant-numeric:tabular-nums; }

/* ---- a térkép kezelése: egy csoport a jobb szélen ---- */
#blZoom { padding:6px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--soft); gap:4px; }
#blZoom .ds-icon-btn { box-shadow:none; }
.blSzintNev { background:none; padding:2px 0; }
.blTerkepGomb { display:grid; justify-items:center; gap:2px; min-width:var(--tap); min-height:var(--tap); margin-top:4px; padding:6px 4px 4px; border:0;
  border-top:1px solid var(--sage); border-radius:0 0 var(--r-m) var(--r-m); background:none; color:var(--ink); font:700 var(--fs-xs)/1 var(--body); cursor:pointer; }
.blTerkepGomb .pic { width:22px; height:22px; }
.blTerkepGomb:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
#blNezet:not(.hidden) ~ #blZoom .blTerkepGomb { background:var(--butter); }
/* a Föld állapota és a Zöld 2050 panel-mód (rögzített űr-nézet), a túrát a méhecske vezeti: ott nincs térkép-kezelés */
#bl[data-mod="jovo"] #blZoom, #bl[data-mod="tura"] #blZoom { display:none; }

/* ---- nyitott panel (asztalon jobb oldalt): a többi elem mellé húzódik, nem alá ---- */
#bl.lapNyitva #blZoom { right:calc(24px + var(--bl-lap-w, 400px)); }
#bl.lapNyitva #blTemak { right:calc(24px + var(--bl-lap-w, 400px)); }

/* ---- színezés-sáv ---- */
.blSavCim { display:inline-flex; gap:4px; align-items:center; color:var(--ink); }
.blSavCim .pic { width:16px; height:16px; }

/* ---- jelmagyarázat: név → skála → hogyan olvasd → idő → forrás ---- */
.blJmOlvas { margin:0; color:var(--ink); font-weight:600; line-height:1.35; }
.blJmForras { color:var(--ink-soft); }
.blJmForras summary { display:flex; gap:4px; align-items:center; min-height:28px; cursor:pointer; list-style:none; overflow-wrap:anywhere; }
.blJmForras summary::-webkit-details-marker { display:none; }
.blJmForras p { margin:2px 0 0; overflow-wrap:anywhere; }
.blJmTipp { margin:0; display:flex; gap:4px; align-items:center; color:var(--ink-soft); }
.blJmTipp .pic, .blJmForras .pic { width:14px; height:14px; flex:none; }

/* ---- történet-kártya: cím → hol · mikor → egy mondat → Bővebben → Te is tehetsz ---- */
.blTetelNagy .blTetelCim { font:400 var(--fs-l)/1.15 var(--display); }
.blTetelNagy > .blJel { width:32px; height:32px; font-size:15px; }
.blMeta { display:block; margin-top:2px; color:var(--ink-soft); font-size:var(--fs-xs); line-height:1.35; }
.blTetelNagy .blMondat { font-size:var(--fs-m); line-height:1.45; margin:8px 0; }
.blBov > div > p { font-size:var(--fs-s); line-height:1.45; }
.blBovCim { display:flex; gap:6px; align-items:center; margin:12px 0 2px; font:700 var(--fs-s)/1.3 var(--body); }
.blBovCim .pic { width:16px; height:16px; }
.blForrasSor { font-size:var(--fs-xs) !important; overflow-wrap:anywhere; margin:2px 0; }

/* ---- ország-oldal ---- */
.blOldalFej { padding-right:56px; flex-wrap:wrap; }
.blOldalFej > div { flex:1 1 140px; min-width:0; }
.blOldalFej .blOsszGomb { flex:none; }
.blCsempeJm { margin:0; display:flex; gap:6px; align-items:flex-start; color:var(--ink-soft); font-size:var(--fs-xs); line-height:1.35; }
.blCsempeJm .pic { width:14px; height:14px; flex:none; margin-top:2px; }

/* ---- Gyűjtemény: fejléc + fülsor (útlevél · kvíz · Tudástár) ---- */
.blGyujtFej { display:grid; gap:8px; padding-right:52px; }
.blGyujtFej > b { display:flex; gap:6px; align-items:center; font:400 var(--fs-l)/1.1 var(--display); }
.blGyujtFul { display:flex; }
.blGyujtFul button { flex:1 1 0; display:inline-flex; gap:4px; align-items:center; justify-content:center; }
.blGyujtFul .pic { width:16px; height:16px; }
#blLap[data-gyujt] .blLapFej { margin-top:4px; }
.blKvizLap { display:grid; gap:8px; justify-items:start; }
.blKvizLap p { margin:0; font-size:var(--fs-s); line-height:1.45; }
.blKvizEddig, .blKvizCsillag { display:flex; gap:6px; align-items:center; }
.blTipp { margin:0; display:flex; gap:6px; align-items:flex-start; color:var(--ink-soft); font-size:var(--fs-xs); line-height:1.35; }
.blTipp .pic { width:14px; height:14px; flex:none; margin-top:2px; }
.blJavasol { display:flex; gap:8px; align-items:center; margin:0; font-size:var(--fs-s); }

/* ---- buborék: színezésnél az ország értéke ---- */
.blBubErtek { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.blBubErtek i { align-self:center; width:18px; height:14px; border-radius:3px; background:var(--c); border:1px solid var(--line); }
.blBubErtek i.blNincsMinta { background:repeating-linear-gradient(45deg, var(--paper) 0 3px, var(--sage) 3px 5px); }
.blBubErtek b { font:400 var(--fs-xl)/1 var(--display); font-variant-numeric:tabular-nums; }
.blBubErtek small, .blBubMutato { color:var(--ink-soft); font-size:var(--fs-xs); }

/* ---- 2. lépés: hat témás gerinc – egy jel (hatszög a téma színével) mindenhol ugyanaz ---- */
.blTemaJel { display:inline-grid; place-items:center; flex:none; width:24px; height:26px; clip-path:var(--hex); background:var(--c, var(--sage-bg)); color:var(--ink); }
.blTemaJel .pic { width:15px; height:15px; }
.blTemaChip { gap:6px; padding-left:6px; }
.blTemakorCimke .blTemaJel, .blTudTemak .blTemaJel { width:18px; height:20px; }
.blTemakorCimke .blTemaJel .pic, .blTudTemak .blTemaJel .pic { width:12px; height:12px; }
.blTudTemak6 { display:flex; flex-wrap:wrap; gap:6px; }
.blTudTemak6 .ds-chip { min-height:var(--tap); cursor:pointer; }

/* a témakártya (a jelmagyarázat helyén): téma → mit mutasson a glóbusz → skála és év → a téma bolygóhatára */
#blJm { max-height:calc(100% - 250px); overflow-y:auto; gap:8px; }
/* nyitott panel mellett a témakártya tömör: fejléc, választók, skála és év marad */
#bl.lapNyitva #blJm .blTemaMit, #bl.lapNyitva #blJm .blJmOlvas, #bl.lapNyitva #blJm .blJmForras, #bl.lapNyitva #blJm .blTemaFold { display:none; }
.blTemaFej { display:flex; gap:8px; align-items:center; }
.blTemaFej b { flex:1; font:400 var(--fs-l)/1.1 var(--display); }
.blTemaFej .blTemaJel { width:32px; height:36px; }
.blTemaFej .blTemaJel .pic { width:20px; height:20px; }
.blTemaMit { margin:0; font-size:var(--fs-s); line-height:1.4; color:var(--ink); }
.blTemaNez { display:flex; flex-wrap:wrap; gap:6px; }
.blTemaNez .ds-chip { min-height:var(--tap); cursor:pointer; }
.blTemaNez .ds-chip small { font-weight:700; color:var(--ink-soft); }
.blJmNev { font-size:var(--fs-s); }
.blTemaFold { display:flex; gap:6px; align-items:center; min-height:var(--tap); padding:6px 10px; border:0; border-radius:var(--r-m); background:var(--bg);
  color:var(--ink); font:600 var(--fs-xs)/1.3 var(--body); text-align:left; cursor:pointer; }
.blTemaFold span { flex:1; }
.blTemaFold .pic { width:18px; height:18px; flex:none; }
.blTemaFold:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .blTemaFold:hover { background:var(--butter); } }

/* a „Föld” szint bejárata űr-nézetben */
#blFoldGomb { position:absolute; left:50%; translate:-50% 0; top:calc(62px + env(safe-area-inset-top, 0px)); box-shadow:var(--soft); gap:6px; }   /* a fejléc sorában, a gyűrű fölött */
#blFoldGomb.hidden { display:none; }
#blFoldGomb small { font-weight:600; color:var(--ink-soft); }
/* a Föld-panelen a kiválasztott téma határa */
.blHatar { scroll-margin-top:60px; }   /* a sticky bezáró gomb alá ne csússzon */
.blHatar.is-tema { padding:10px 12px; border-radius:var(--r-m); background:var(--butter); border-top-color:transparent; }
.blHatarTema { display:inline-flex; gap:6px; align-items:center; font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); }

/* ---- telefon és álló képernyő: a panel alul van, semmit nem kell mellé húzni ---- */
@media (max-width:820px), (orientation:portrait){
  #bl.lapNyitva #blZoom, #bl.lapNyitva #blTemak { right:12px; }
  #bl.lapNyitva #blZoom { right:8px; }
}
/* ---- keskeny telefon (lent): három sor a tetején ---- */
@media (max-width:620px){
  /* keskeny telefon: 1. sor rendszergombok · 2. sor a négy eszköz (ikon fölött felirat) · 3. sor hol vagy (morzsasor, teljes szélesség) */
  #blTop { top:calc(62px + env(safe-area-inset-top, 0px)); left:8px; right:8px; flex-direction:column-reverse; flex-wrap:nowrap; align-items:stretch; gap:6px; }
  #blGombok { flex:none; gap:4px; justify-content:space-between; }
  .blEszkoz { flex:1 1 0; flex-direction:column; gap:0; min-width:0; padding:4px 2px 2px; }
  .blEszkoz .blGombNev { display:block; font-size:var(--fs-xs); line-height:1.2; }
  .blEszkoz .blJelveny { position:absolute; top:-6px; right:-2px; }
  #blCim { display:flex; align-self:flex-start; max-width:100%; min-width:0; padding:2px 8px; }
  #blCim > .pic, #blCim b { display:none; }
  .blMorzsa { flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
  #blZoom { top:calc(172px + env(safe-area-inset-top, 0px)); padding:4px; }
  .blTemaMit { display:none; }
  /* a téma-kártya a jobb oldali nagyítás-oszlop MELLETT áll, nem rajta (2026-10-06: telefonon eltakarta a +/− gombokat) */
  #blJm { max-height:calc(100% - 320px); left:8px; right:calc(84px + env(safe-area-inset-right, 0px)); width:auto; }
  #blFoldGomb { top:calc(172px + env(safe-area-inset-top, 0px)); left:8px; translate:none; max-width:calc(100% - 90px); }
  #blFoldGomb small { display:none; }
}
}