/* ============================================================
   A mi bolygónk 2.1 — módok, színezés-sáv, széles oldal-panel és húzható alsó lap, ország-oldal, a Föld állapota,
   előnézet-buborék, tű-csoportok, túra. Csak tokenek (docs/arculat.md). A bolygo.css UTÁN töltődik, azt írja felül.
   Alulról felfelé: fülsor (.blMod) → színezés-sáv (#blTemak) → jelmagyarázat (#blJm).
   ============================================================ */
/* ---- négy mód, alsó fülsor ---- */
.blMod { position:absolute; left:50%; translate:-50% 0; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); display:flex; gap:4px; padding:4px;
  background:var(--surface); border-radius:var(--r-l); box-shadow:var(--soft); z-index:2; }
.blModGomb { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:var(--tap); min-width:84px; padding:4px 8px;
  border:0; border-radius:var(--r-m); background:none; color:var(--ink); font:700 var(--fs-xs)/1.1 var(--body); cursor:pointer; }
.blModGomb .pic { width:22px; height:22px; }
.blModGomb.on { background:var(--accent); color:var(--on-accent); }
.blModGomb:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

/* ---- színezés-sáv: „Mit mutasson a bolygó?” ---- */
#blTemak { bottom:calc(78px + env(safe-area-inset-bottom, 0px)); align-items:center; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:2px 2px 6px; }
#blTemak .ds-chip { flex:none; }
.blSavCim { flex:none; font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); background:var(--surface); border-radius:var(--r-s); padding:4px 8px; }
@media (min-width:1100px){ #blTemak { justify-content:safe center; } }
#bl[data-mod="fold"] #blTemak, #bl[data-mod="tura"] #blTemak, #bl[data-mod="jovo"] #blTemak { display:none; }
#blJm { bottom:calc(136px + env(safe-area-inset-bottom, 0px)); }
#bl.blTurazik #blJm { display:none; }
.blAlReteg { margin:0 0 4px; }

/* ---- a panel: asztalon jobb oldalt, a széles változat az ország-oldal, a Föld és a Tudástár ---- */
#blLap { bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
#blLap.blSzeles, #blLap.blTudastar { width:min(94vw, 520px); }
.blHuzo { display:none; }

/* ---- ország-oldal ---- */
.blOldalFej { display:flex; gap:12px; align-items:center; padding-right:48px; }
.blOldalFej h2 { margin:0; font:400 var(--fs-xl)/1.1 var(--display); }
.blOldalFej small { color:var(--ink-soft); font-size:var(--fs-xs); }
.blOldalFej .blZaszlo { border-radius:4px; }
.blFoldIkon .pic { width:44px; height:44px; }
.blOsszegzes { display:grid; gap:4px; padding:10px 12px; border-radius:var(--r-m); background:var(--butter); }
.blOsszegzes > b { font:400 var(--fs-m)/1.2 var(--display); }
.blOsszegzes p, .blOsszegzes li { margin:0; font-size:var(--fs-s); line-height:1.45; }
.blOsszegzes ul { margin:0; padding-left:18px; }
.blCsempek { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.blCsempe { display:grid; gap:2px; align-content:start; padding:8px 10px; border-radius:var(--r-m); background:var(--bg); }
.blCsempe small { font:700 var(--fs-xs)/1.25 var(--body); color:var(--ink-soft); }
.blCsempe > b { font:400 var(--fs-xl)/1 var(--display); }
.blCsempeE { font-size:var(--fs-xs); color:var(--ink-soft); }
.blCsempe .blHarmad { display:flex; }
.blCsempeMit summary { display:inline-flex; gap:4px; align-items:center; min-height:32px; font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); cursor:pointer; list-style:none; }
.blCsempeMit summary::-webkit-details-marker { display:none; }
.blCsempeMit summary .pic { width:14px; height:14px; }
.blCsempeMit p { margin:4px 0 0; font-size:var(--fs-xs); line-height:1.4; overflow-wrap:anywhere; }
.blGrafikon { width:100%; height:32px; }
.blGrafikon polyline { fill:none; stroke:var(--ember); stroke-width:1.8; vector-effect:non-scaling-stroke; }
.blGrafikon.jo polyline { stroke:var(--leaf); }
.blCsikok { margin:0; display:grid; gap:4px; }
.blCsikSor { display:flex; height:44px; border-radius:var(--r-s); overflow:hidden; }
.blCsikSor i { flex:1; background:var(--c); }
.blCsikok figcaption { display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-xs); color:var(--ink-soft); }
.blCsikok figcaption b { color:var(--ink); }
.blOldalTetel { display:grid; gap:4px; padding:8px 0; border-top:1px solid var(--sage); }
.blTemakorCimke { display:inline-flex; align-items:center; gap:4px; font:700 var(--fs-xs)/1 var(--body); color:var(--ink-soft); }
.blTemakorCimke .pic { width:16px; height:16px; }
.blMindMutato .blMutatok { margin-top:8px; }

/* ---- a Föld állapota ---- */
.blFoldBev { margin:0; font-size:var(--fs-s); }
.blHatarKor { position:relative; width:min(100%, 300px); aspect-ratio:1; margin:0 auto; }
.blHatarKor svg { width:100%; height:100%; }
.blHatarIkon { position:absolute; translate:-50% -50%; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--surface); box-shadow:var(--soft-sm); }
.blHatarIkon .pic { width:18px; height:18px; }
.blHatarJm { display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:center; margin:0; font-size:var(--fs-xs); }
.blHatarJm span { display:inline-flex; gap:4px; align-items:center; }
.blHatarJm i { width:14px; height:10px; border-radius:3px; }
.bl-biztonsagos { background:var(--good-bg); }
.bl-atlepve { background:var(--butter); }
.bl-magas_kockazat { background:var(--blossom-bg); }
.blHatarJm i.bl-biztonsagos { background:var(--leaf); } .blHatarJm i.bl-atlepve { background:var(--honey); } .blHatarJm i.bl-magas_kockazat { background:var(--ember); }
.blHatarJm i.bl-zona { background:none; border:2px dashed var(--leaf); }
.blHatar { display:grid; gap:4px; padding:10px 0; border-top:1px solid var(--sage); }
.blHatarFej { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.blHatarFej .pic { width:22px; height:22px; }
.blHatar p { margin:0; font-size:var(--fs-s); line-height:1.45; }
.blHatarIrany { color:var(--ink-soft); font-size:var(--fs-xs) !important; }
.blMiSegit { display:flex; gap:6px; align-items:flex-start; padding:6px 8px; border-radius:var(--r-m); background:var(--good-bg); }
.blMiSegit .pic { width:18px; height:18px; flex:none; }
.blSzamok { margin:6px 0 0; padding-left:18px; font-size:var(--fs-xs); }
.blSzamlalo { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-m); background:var(--bg); }
.blSzamlalo > span .pic { width:32px; height:32px; }
.blSzamlalo div { display:grid; gap:2px; }
.blSzamlalo b { font:400 var(--fs-xl)/1 var(--display); font-variant-numeric:tabular-nums; }
.blSzamlalo small { font-size:var(--fs-xs); color:var(--ink-soft); }
.blLampaJel { display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 3px var(--blossom-bg); vertical-align:middle; }
.blTemaSzuro { display:flex; flex-wrap:wrap; gap:6px; }
.blTemaSzuro .ds-chip { min-height:var(--tap); cursor:pointer; }

/* ---- Zöld 2050: képeslapok, idővonal, kérdéssor ---- */
.bl2Bev { margin:0; font-size:var(--fs-s); line-height:1.45; }
.bl2Kerd { justify-self:start; align-self:flex-start; }
.bl2Racs { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.bl2Lap { display:grid; gap:4px; justify-items:start; text-align:left; padding:8px; border:0; border-radius:var(--r-m); background:var(--good-bg); color:var(--ink); cursor:pointer; min-height:var(--tap); }
.bl2Lap b { font:400 var(--fs-m)/1.15 var(--display); }
.bl2Lap small { font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); }
.bl2Lap:focus-visible { background:var(--butter); }
@media (hover:hover) and (pointer:fine){ .bl2Lap:hover { background:var(--butter); } }
.bl2Kep { display:grid; place-items:center; width:100%; aspect-ratio:4/3; border-radius:var(--r-s); background:var(--sky-bg); overflow:hidden; }
.bl2Kep img.art, .bl2Kep .art { width:100%; height:100%; object-fit:contain; }
.bl2KepHiany .pic { width:40%; height:40%; }
.bl2Kepeslap { display:grid; gap:6px; padding:10px; border-radius:var(--r-l); background:var(--good-bg); }
.bl2Kepeslap h2 { margin:0; font:400 var(--fs-xl)/1.1 var(--display); }
.bl2Szem { font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }
.bl2Jelenet { margin:0; font-size:var(--fs-m); line-height:1.5; }
.bl2Feltetel { margin:0; display:flex; gap:6px; align-items:flex-start; font-size:var(--fs-s); font-style:italic; }
.bl2Feltetel .pic { width:18px; height:18px; flex:none; }
.bl2Ido { list-style:none; margin:0; padding:0 0 0 18px; border-left:3px solid var(--leaf); display:grid; gap:10px; }
.bl2Ido li { position:relative; display:grid; gap:2px; font-size:var(--fs-s); line-height:1.4; }
.bl2Ido li::before { content:""; position:absolute; left:-26px; top:4px; width:13px; height:13px; border-radius:50%; background:var(--leaf); border:2px solid var(--paper); }
.bl2Ido li.ma::before { background:var(--honey); }
.bl2Ido b { font:400 var(--fs-l)/1 var(--display); }
.bl2Ido .ds-tag { font-style:normal; font-size:var(--fs-xs); }
.bl2Vissza { align-self:flex-start; }
.bl2Kerdes { margin:0; font:400 var(--fs-l)/1.25 var(--display); }
.bl2Eredmeny { margin:0; padding:8px 10px; border-radius:var(--r-m); background:var(--butter); font-weight:700; display:flex; gap:6px; align-items:center; }

/* ---- kereső ---- */
.blKeresLista .blListaElem .blZaszlo { flex:none; }

/* ---- előnézet-buborék és tű-csoportok ---- */
#blBub { position:absolute; width:min(80vw, 300px); display:grid; gap:6px; padding:10px 12px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--soft); z-index:3; }
#blBub.hidden { display:none; }
#blBub p { margin:0; font-size:var(--fs-s); line-height:1.4; }
.blBubFej { display:flex; gap:8px; align-items:center; }
#blBub .ds-btn-sm { justify-self:start; }
#bl > #blCsoportok { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.blCsoport { position:absolute; left:0; top:0; width:48px; height:48px; pointer-events:auto; border:0; clip-path:var(--hex); cursor:pointer;
  background:var(--honey-deep); color:var(--paper); font:800 var(--fs-m)/1 var(--body); display:grid; place-items:center; }
.blCsoport:focus-visible { outline:3px solid var(--focus); }

/* ---- túra ---- */
#blTura { position:absolute; left:12px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); width:min(94vw, 460px); display:grid; gap:8px; z-index:3; }
#blTura.hidden { display:none; }
#blTura .ds-bubble { font-size:var(--fs-s); line-height:1.45; }
.blTuraGombok { display:flex; gap:8px; justify-content:flex-end; }

/* ---- telefon és álló képernyő: a panel húzható alsó lap ---- */
@media (max-width:820px), (orientation:portrait){
  .blMod { left:8px; right:8px; translate:none; justify-content:space-between; }
  .blModGomb { flex:1; min-width:0; padding:4px; }
  .blModGomb span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .blSavCim { display:none; }
  #blJm { bottom:calc(128px + env(safe-area-inset-bottom, 0px)); }
  #blLap, #blLap.blSzeles, #blLap.blTudastar { top:auto; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom, 0px)); width:auto;
    height:var(--bl-lap-m, 52vh); max-height:none; border-radius:var(--r-l) var(--r-l) 0 0; transition:height .2s ease; }
  #blLap.blHuzas { transition:none; }
  .blHuzo { display:block; position:sticky; top:-12px; z-index:1; flex:none; height:30px; margin:-12px -12px 0; cursor:grab; touch-action:none; background:inherit; }
  .blHuzo i { display:block; width:44px; height:5px; margin:12px auto 0; border-radius:3px; background:var(--sage); }
  #blTura { left:8px; right:8px; width:auto; top:60px; bottom:auto; }
  .blCsempek { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){ #blLap { transition:none; } }