/* ============================================================
   A mi bolygónk 2.3 / 3–4. lépés — az alsó sáv időszalaggal (js/bolygo-ido.js) és a méhsejt-térkép (js/bolygo-mehsejt.js).
   Csak tokenek (docs/arculat.md). A bolygo-3.css UTÁN töltődik.
   ============================================================ */
/* ---- alsó sáv: a két fül + az időszalag egy fehér csíkban ---- */
.blMod { align-items:center; gap:8px; width:min(calc(100vw - 24px), 760px); }
.blModFulek { display:flex; gap:4px; flex:none; }
.blSzalag { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; padding-left:8px; border-left:2px solid var(--sage); }
.blSzSav { position:relative; flex:1 1 auto; min-width:90px; height:var(--tap); display:flex; align-items:center; }
.blSzCsikok { position:absolute; left:0; right:0; top:8px; bottom:8px; display:flex; border-radius:var(--r-s); overflow:hidden; background:var(--bg);
  box-shadow:inset 0 0 0 1.5px var(--sage); pointer-events:none; }
.blSzCsikok i { flex:1 1 0; min-width:0; background:var(--c); }
/* történeteknél: oszlopok alulról (hány történet kezdődött abban az évben) */
.blSzCsikok.is-tort { align-items:flex-end; }
.blSzCsikok.is-tort i { height:var(--h); background:var(--leaf); opacity:.7; }
.blSzSav input[type="range"] { position:relative; width:100%; margin:0; height:var(--tap); background:transparent; accent-color:var(--ink); cursor:pointer;
  -webkit-appearance:none; appearance:none; }
.blSzSav input[type="range"]::-webkit-slider-runnable-track { height:var(--tap); background:transparent; }
.blSzSav input[type="range"]::-moz-range-track { height:var(--tap); background:transparent; }
.blSzSav input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:36px; margin-top:4px; border-radius:5px;
  background:var(--ink); border:2px solid var(--surface); box-shadow:var(--soft-sm); }
.blSzSav input[type="range"]::-moz-range-thumb { width:8px; height:34px; border-radius:5px; background:var(--ink); border:2px solid var(--surface); }
.blSzSav input[type="range"]:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-s); }
.blSzEvSzam { flex:none; min-width:3.2em; text-align:center; font:400 var(--fs-m)/1 var(--display); font-variant-numeric:tabular-nums; }
.blSzGomb { flex:none; display:inline-flex; align-items:center; gap:4px; min-height:var(--tap); padding:0 10px; border:2px solid var(--line);
  border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:700 var(--fs-xs)/1 var(--body); cursor:pointer; }
.blSzGomb .pic { width:18px; height:18px; }
.blSzGomb:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.blSzHatar { background:var(--butter); }
.blSz2050 { background:var(--accent); color:var(--on-accent); }
.blSzLejatsz { flex:none; }
/* a fülsor korábbi helye fölött: a téma-sor és a témakártya kicsit feljebb (a sáv magasabb lett) */
#blTemak { bottom:calc(82px + env(safe-area-inset-bottom, 0px)); }

/* ---- a témakártya év-sora: az év és a világ- / EU-átlag (a csúszka az időszalagra költözött) ---- */
.blJmEv { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.blJmAtlag { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--ink-soft); }
.blJmAtlag .pic { width:14px; height:14px; }
.blJmAtlag b { color:var(--ink); }

/* ---- méhsejt-térkép: a glóbusz helyén, a felső és az alsó sáv között ---- */
#blHex { position:absolute; inset:0; display:grid; place-items:center; background:var(--bg);
  padding:calc(64px + env(safe-area-inset-top, 0px)) 72px calc(140px + env(safe-area-inset-bottom, 0px)) 12px; }
#blHex.hidden { display:none; }
#blHex svg { width:100%; height:100%; max-height:100%; cursor:pointer; }
.blHexCella polygon { fill:var(--sage-bg); stroke:var(--surface); stroke-width:1.2; transition:fill var(--t-fast) var(--ease-out); }
.blHexCella[data-db="van"] polygon { fill:var(--accent); }
.blHexCella[data-db="sok"] polygon { fill:var(--honey-deep); }
.blHexCella.is-kiemelt polygon { stroke:var(--ink); stroke-width:2.4; }
.blHexCella text { font:700 5.4px/1 var(--body); fill:var(--ink); text-anchor:middle; pointer-events:none; }
.blHexCella.is-nincs text { fill:var(--ink-soft); }
#blHex.is-apro .blHexCella text { display:none; }
.blHexNincsAlap { fill:var(--paper); } .blHexNincsCsik { fill:var(--sage); }
/* méhsejt-nézetben a glóbusz tű-csoportjai és lámpái nem kellenek */
#bl.blMehsejt #blCsoportok, #bl.blMehsejt #blCimkek { display:none; }
@media (prefers-reduced-motion: reduce){ .blHexCella polygon { transition:none; } }

/* ---- keskeny kijelző: a fülek csak ikonnal, a szalag kitölti a sort ---- */
@media (max-width:620px){
  .blMod { left:8px; right:8px; width:auto; translate:none; gap:4px; padding:3px; }
  .blModGomb { min-width:var(--tap); padding:4px; } .blModGomb span { display:none; }
  .blSzalag { padding-left:4px; gap:4px; }
  .blSzLejatsz { display:none; }
  .blSzGomb { padding:0 8px; } .blSz2050 span, .blSzHatar span { font-size:var(--fs-xs); }
  .blSzMa { display:none; }
  .blSzEvSzam { min-width:2.6em; font-size:var(--fs-s); }
  #blTemak { bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
  #blHex { padding:calc(150px + env(safe-area-inset-top, 0px)) 56px calc(126px + env(safe-area-inset-bottom, 0px)) 4px; }
}
@media (max-width:820px) and (min-width:621px), (orientation:portrait) and (min-width:621px){
  #blHex { padding-top:calc(150px + env(safe-area-inset-top, 0px)); }
}
/* álló kijelzőn (telefon, álló tablet) a széles méhsejt-térkép kitölti a magasságot, és oldalra görgethető – így a hatszögek
   koppintható méretűek maradnak; induláskor Európa van középen (js/bolygo-mehsejt.js) */
@media (orientation:portrait){
  #blHex { place-items:center start; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; overscroll-behavior:contain; }
  #blHex svg { width:auto; height:100%; max-width:none; }
}
/* nagyon keskeny telefon (pl. 360–375 px): a bolygóhatár-jel csak ikon, a szalag tovább szűkülhet – a 2050 nem lóghat ki */
@media (max-width:420px){
  .blSzHatar { padding:0; width:var(--tap); justify-content:center; } .blSzHatar span { display:none; }
  .blSzSav { min-width:48px; }
  .blSz2050 { padding:0 6px; gap:2px; }
  .blSzEvSzam { min-width:2.2em; }
}

/* ---- „Nézet” lenyíló és görgethető téma-sor (telefon-kör, 2026-10-06, js/bolygo-nezet.js) ----
   Álló telefonon a jobb oldali vezérlő-oszlop a térkép harmadát takarta: ott csak + · szint · − · Nézet látszik, a Térkép,
   a Méhsejt és a Jelek a „Nézet” gomb alatt nyílik. A téma-sor oldalra görög; ahol még van gomb, a széle elhalványul. */
.blNezetKapcs { display:none; }
#blZoom.is-nyitva .blNezetKapcs { background:var(--butter); }
@media (max-width:620px) and (orientation:portrait){
  #blZoom .blNezetKapcs { display:grid; }
  #blZoom:not(.is-nyitva) .blTerkepGomb:not(.blNezetKapcs) { display:none; }
}
#blTemak.is-tobb-jobbra { -webkit-mask-image:linear-gradient(to right, black calc(100% - 48px), transparent); mask-image:linear-gradient(to right, black calc(100% - 48px), transparent); }
#blTemak.is-tobb-balra { -webkit-mask-image:linear-gradient(to right, transparent, black 40px); mask-image:linear-gradient(to right, transparent, black 40px); }
#blTemak.is-tobb-balra.is-tobb-jobbra { -webkit-mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 48px), transparent);
  mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 48px), transparent); }

/* ---- jelmagyarázat (2026-10-06, js/bolygo-nezet.js): a térkép-vezérlők bal oldalán nyílik, velük együtt mozog ---- */
#blJelek { position:absolute; right:calc(100% + 10px); top:0; width:min(290px, calc(100vw - 104px)); max-height:max(180px, calc(100dvh - 330px));
  overflow-y:auto; display:grid; align-content:start; gap:6px; padding:10px 12px; text-align:left; box-shadow:var(--soft); }
#blJelek.hidden { display:none; }
#bl.blJelekNyitva #blZoom { z-index:4; }                /* nyitott jelmagyarázat a témakártya fölött (telefonon egymásra érnek) */
#blZoom [data-bl-jelek][aria-expanded="true"] { background:var(--butter); }
.blJelekFej { display:flex; align-items:center; gap:6px; }
.blJelekFej b { flex:1; display:inline-flex; gap:6px; align-items:center; font:400 var(--fs-m)/1.1 var(--display); }
.blJelekFej b .pic { width:18px; height:18px; }
.blJelekAl { margin:2px 0 0; font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); }
.blJelekLista { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.blJelekLista li { display:flex; align-items:center; gap:8px; font-size:var(--fs-s); line-height:1.3; }
.blJelekLista li.is-ki { opacity:.5; }                  /* most nem látszik a glóbuszon (kikapcsolva vagy színezés alatt) */
.blJelekLista .blJel { width:24px; height:24px; font-size:12px; }
.blJelCsop { flex:none; width:24px; height:24px; clip-path:var(--hex); display:grid; place-items:center; background:var(--honey-deep); color:var(--paper); font:800 12px/1 var(--body); }
.blJelekLampa { flex:none; width:20px; height:20px; margin:2px; display:inline-grid; place-items:center; color:var(--paper); font:800 12px/1 var(--body); }
.blJelekLampa.is-pozitiv { background:var(--leaf); box-shadow:0 0 0 3px var(--good-bg); }
.blJelGyuru { flex:none; width:24px; display:grid; place-items:center; }
.blJelGyuru .pic { width:22px; height:22px; }
#blJelek p { margin:0; font-size:var(--fs-xs); line-height:1.4; }
.blJelekNev { font-weight:700; }
.blJelekSkala { display:flex; height:14px; border-radius:var(--r-s); overflow:hidden; }
.blJelekSkala i { flex:1; background:var(--c); }
.blJelekNincs { display:flex; align-items:center; gap:6px; }
.blJelekNincs i.blNincsMinta { flex:none; width:22px; height:12px; border-radius:3px; background:repeating-linear-gradient(45deg, var(--paper) 0 3px, var(--sage) 3px 5px); }
#blJelek .blJelekMeg { color:var(--ink-soft); }

/* ---- első látogatás: vezetett séta a tűkön (js/bolygo-tura.js) – a DS.coach gyűrűje a tű köré, Kihagyom a Tovább mellett ---- */
.blElsoCel { position:fixed; width:56px; height:56px; display:none; pointer-events:none; }
.blElsoCoach .ds-coach-ring { border-radius:50%; }
#bl.blElsoFut #blCimkek { visibility:hidden; }
.blElsoGombok { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:var(--sp-2); }
.blElsoCoach .ds-coach-say .blElsoGombok .ds-btn-sm { margin:0; }

/* ---- az indítós súgó (közös js/sugo.js) a bolygón ne takarja az eszközsort: a fejléc alá, a glóbusz fölé kerül ---- */
body.bolygo #sugo { top:calc(150px + env(safe-area-inset-top, 0px)); }
@media (max-width:620px){
  /* keskeny telefon: a jobb oldali térkép-vezérlők szabadon maradnak */
  body.bolygo #sugo { top:calc(172px + env(safe-area-inset-top, 0px)); left:8px; transform:none; width:calc(100vw - 84px); }
}

/* fekvő telefon (alacsony képernyő): a térkép-vezérlők két oszlopban férnek el – egy oszlopban a „Jelek” kilógott,
   a „Méhsejt”-et pedig az időszalag 2050 gombja takarta (méret-próba, 2026-10-06) */
@media (orientation:landscape) and (max-height:520px){
  #blZoom { top:calc(146px + env(safe-area-inset-top, 0px)); translate:none; grid-template-columns:repeat(2, auto); gap:4px; padding:4px; }
  /* a szint neve („Kontinens”) itt csak a képernyőolvasónak szól (aria-live) – a felső sáv és az időszalag közt nincs több hely */
  #blZoom .blSzintNev { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* első küldetések (js/bolygo-kuldetes.js): egy sor a cím alatt – cél ikon, „Küldetés 1/3”, egy mondat; kész lépésnél levél-zöld pipa */
.blKuld { display:flex; align-items:flex-start; gap:6px; margin:4px 0 0; padding:4px 10px 5px 6px; border-radius:var(--r-m); background:var(--butter);
  color:var(--ink); font:600 var(--fs-s)/1.3 var(--body); transition:background-color .2s var(--ease-out); }
.blKuld[hidden] { display:none; }
.blKuld > span:last-child { display:grid; min-width:0; }
.blKuld small { color:var(--ink-soft); font:700 var(--fs-xs)/1.2 var(--body); letter-spacing:.02em; }
.blKuldJel .pic { width:18px; height:18px; margin-top:2px; }
.blKuld.is-kesz { background:var(--sage); }
.blKuld.is-kesz small { color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .blKuld { transition:none; } }
.blKuld { white-space:normal; overflow-wrap:break-word; }
/* álló telefonon a jobb oldali nagyító-panel a fejléc-kártya alsó sávjára lóg: a küldetés-sor előtte törjön */
@media (orientation:portrait) and (max-width:600px){ .blKuld { margin-right:56px; } }