/* ============================================================
   JÖVŐK VITÁJA – a csoportos vitajáték (js/vita*.js): vezetői sáv, beállás, érvelés, újraszavazás, világ, értékelés, statisztika-gráf.
   Kivetítőre méretezve: nagy betű (Aa: 3 fok), 44 px-nél nagyobb gombok. Csak tokenek (docs/arculat.md).
   ============================================================ */
#vt { --vt-fs:1; position:fixed; inset:0; z-index:var(--z-hud); display:grid; grid-template-rows:auto 1fr; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:calc(var(--fs-m) * var(--vt-fs)); }
#vt.hidden { display:none; } #vt[data-aa="2"] { --vt-fs:1.2; } #vt[data-aa="3"] { --vt-fs:1.45; }
#vt > * { min-width:0; }
.vtSav { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:calc(var(--tap) + 20px + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-2); }
.vtCim { margin:0; font:400 var(--fs-xl)/1.1 var(--display); display:flex; gap:8px; align-items:center; }
.vtLepcso { list-style:none; margin:0; padding:0; display:flex; gap:var(--sp-1); align-items:center; }
.vtLepcso li { width:32px; height:32px; display:grid; place-items:center; border:var(--line-w) solid var(--line); border-radius:50%; font:700 var(--fs-xs)/1 var(--body); background:var(--paper); }
.vtLepcso li.kesz { background:var(--leaf); color:var(--cream); } .vtLepcso li.most { background:var(--butter); }
.vtLepcso li.szak { width:auto; height:auto; border:0; border-radius:0; background:none; padding-inline:var(--sp-2); font-size:var(--fs-m); }
.vtEsz { margin-left:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.vtTer { overflow-y:auto; padding:var(--sp-3) var(--sp-4) var(--sp-5); width:min(1240px, 100%); margin:0 auto; display:grid; align-content:start; gap:var(--sp-3); }
.vtTer > section { display:grid; gap:var(--sp-3); min-width:0; }
.vtLead { margin:0; font-weight:600; line-height:1.4; } .vtKicsi { margin:0; font-size:var(--fs-xs); opacity:.85; }
.vtKerdes { margin:0; font:400 calc(var(--fs-xl) * var(--vt-fs))/1.2 var(--display); text-wrap:balance; }
.vtVilagSor { margin:0; display:flex; gap:6px; align-items:center; font-weight:600; }
.vtGombok { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.vtTakar { position:absolute; inset:0; z-index:var(--z-top); display:grid; place-items:center; background:var(--bg); } .vtTakar[hidden] { display:none; }
.vtTakar p::before { content:'🐝'; display:block; font-size:64px; text-align:center; } .vtTakar p { margin:0; font:400 var(--fs-xl)/1.2 var(--display); }
/* a három út kártyái és a létszám-léptető */
.vtKartyak { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-3); }
.vtVal { display:grid; gap:var(--sp-2); padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); align-content:start; }
.vtVal p { margin:0; font-weight:600; line-height:1.35; }
.vtBetu { display:inline-grid; place-items:center; width:40px; height:40px; border:var(--line-w) solid var(--line); border-radius:50%; background:var(--butter); font:400 var(--fs-m)/1 var(--display); flex:none; }
.vt-a .vtBetu { background:var(--sky); } .vt-b .vtBetu { background:var(--honey); } .vt-c .vtBetu { background:var(--blossom); }
.vtLeptet { display:flex; gap:var(--sp-2); align-items:center; }
.vtNum { width:6ch; min-height:var(--tap); text-align:center; font:700 var(--fs-m)/1 var(--body); }
.vtDelta { font-weight:700; } .vtDelta[data-irany="fel"] { color:var(--leaf); } .vtDelta[data-irany="le"] { color:var(--berry); }
.vtOssz { margin:0; font-weight:600; }
.vtDonto { display:grid; gap:var(--sp-2); padding:var(--sp-3); border:var(--line-w) dashed var(--line); border-radius:var(--r-l); background:var(--sage-bg); }
.vtDonto p { margin:0; }
/* érvelés */
.vtIdoSav { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.vtIdo { font:400 calc(var(--fs-xl) * 1.6)/1 var(--display); min-width:3.2ch; } .vtIdo.lejart { color:var(--berry); }
.vtOldalak { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-3); }
.vtOldal { display:grid; gap:var(--sp-2); align-content:start; padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); }
.vtOldal header { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; } .vtOldal h3 { margin:0; flex:1; font:700 var(--fs-m)/1.25 var(--body); } .vtOldal h4 { margin:var(--sp-2) 0 0; }
.vtLetszam { font:400 var(--fs-m)/1 var(--display); }
.vtErvek { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.vtErv { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:var(--sp-2); border-radius:var(--r-s); border:var(--line-w) solid var(--line); background:var(--cream); }
.vtErv .ds-chip { width:fit-content; } .vtErv p, .vtErv .ds-details { margin:0; flex-basis:100%; line-height:1.35; } .vtErv.vt-teny { background:var(--sage-bg); } .vtErv.vt-velemeny { background:var(--sky-bg); } .vtErv.vt-erdek { background:var(--blossom-bg); }
.vtVilagKartya, .vtAlt, .vtKerdesek, .vtVagy { padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); display:grid; gap:var(--sp-2); }
.vtVilagKartya h3, .vtAlt h3, .vtKerdesek h3, .vtVagy h3 { margin:0; } .vtKov { margin:0; font-weight:600; line-height:1.4; }
/* értékelés */
.vtUt { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.vtUt li { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) auto; gap:var(--sp-3); align-items:center; padding:var(--sp-2) var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); }
.vtUt li.on { background:var(--butter); } .vtSavok { display:grid; gap:4px; }
.vtMini { display:grid; grid-template-columns:20px 1fr auto; gap:6px; align-items:center; font-size:var(--fs-xs); }
.vtMini i { height:10px; border-radius:6px; background:linear-gradient(to right, var(--leaf) var(--veg), var(--sage) 0); border:1px solid var(--line); } .vtMini.le i { background:linear-gradient(to right, var(--berry) var(--veg), var(--sage) 0); }
.vtAltAg { display:grid; gap:4px; padding-block:var(--sp-2); border-top:1px solid var(--line); } .vtAltAg p { margin:0; }
.vtVagyLista { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.vtVagyLista li { display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.vtKerdesek ol { margin:0; padding-left:1.2em; display:grid; gap:var(--sp-1); }
/* statisztika-gráf */
.vtGrafKeret { overflow-x:auto; border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); padding:var(--sp-2); }
.vtGraf { width:100%; min-width:min(720px, 100%); height:auto; display:block; }
.vtEl { fill:none; stroke:var(--sage); stroke-linecap:round; opacity:.55; } .vtEl.van { stroke:var(--honey-deep); opacity:.85; } .vtEl.most { stroke:var(--leaf); opacity:1; }
.vtCs rect { fill:var(--cream); stroke:var(--line); stroke-width:2; } .vtCs.most rect { fill:var(--butter); } .vtCs.vege rect { fill:var(--sage-bg); } .vtCs.vege.most rect { fill:var(--butter); }
.vtCs text { fill:var(--ink); font:700 13px var(--body); } .vtCs .vtSz { font:700 12px var(--body); } .vtEv { fill:var(--ink); font:400 18px var(--display); }
.vtKetOszlop { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-3); } .vtKetOszlop h3 { margin:0 0 var(--sp-2); }
.vtOszlopok { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.vtOszlopok li { display:grid; grid-template-columns:minmax(0, 1fr) minmax(60px, 1fr) 3ch; gap:var(--sp-2); align-items:center; font-size:var(--fs-xs); }
.vtOszlopok i { height:14px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(to right, var(--leaf) var(--w), var(--paper) 0); }
.vtMenet { margin:0; padding-left:1.2em; display:grid; gap:var(--sp-2); }
.vtInd { max-width:760px; }
#vt :is(button, input):focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (max-width:700px){ .vtUt li { grid-template-columns:1fr; } .vtSav { gap:var(--sp-2); } }
@media (prefers-reduced-motion:reduce){ #vt * { transition:none !important; } }
/* visszafelé tervezés (backcasting): vízió, lépések, terv, terv vs. valóság */
.vtCelok, .vtBelok { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--sp-3); }
.vtCel, .vtBel, .vtTervVs, .vtTervStat { display:grid; gap:var(--sp-2); align-content:start; padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); }
.vtCel h3, .vtTervVs h3, .vtTervStat h3 { margin:0; } .vtCel p, .vtBel p, .vtTervVs p { margin:0; }
.vtBel.kot { background:var(--butter); } .vtBelSz { font-weight:600; line-height:1.35; display:flex; gap:var(--sp-2); align-items:flex-start; }
.vtFelt { margin-top:var(--sp-2); }
.vtUt li.egyezik { background:var(--sage-bg); } .vtUt li.elter { background:var(--blossom-bg); }
.vtOkok { display:flex; flex-wrap:wrap; gap:var(--sp-2); } .vtOk { min-height:var(--tap); cursor:pointer; } .vtOk[aria-pressed="true"] { background:var(--butter); }
.vtTervVonal { fill:none; stroke:var(--ink); stroke-width:3; stroke-dasharray:9 6; stroke-linecap:round; pointer-events:none; }
.vtVal .ds-chip { justify-self:start; width:fit-content; }
/* kulturális réteg: kultúrsáv, ihlet, „Mi lett belőle?” – a hangulat szín ÉS ikon (nem csak szín) */
.vkSav, .vkMiLett, .vkIhlet { display:grid; gap:var(--sp-2); padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); }
.vkSav h3, .vkMiLett h3, .vkIhlet h4 { margin:0; }
.vkOszlopok { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); }
.vkOsz { display:grid; align-content:start; gap:var(--sp-2); min-width:0; } .vkOsz h4 { margin:0; font:400 var(--fs-m)/1 var(--display); } .vkOsz ul, .vkLista { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.vkOsz ul { max-height:min(62dvh, 560px); overflow-y:auto; align-content:start; padding-right:4px; }
.vkMu { display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-2); border:var(--line-w) solid var(--line); border-radius:var(--r-s); background:var(--cream); font-size:var(--fs-xs); }
.vkMu p { margin:4px 0; line-height:1.3; } .vkMu small { display:block; opacity:.85; } .vkUres { opacity:.7; font-size:var(--fs-xs); }
.vkHang { flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:var(--line-w) solid var(--line); background:var(--sage); } .vkHang .pic { width:16px; height:16px; }
.vk-utopia .vkHang, .vk-remeny .vkHang { background:var(--leaf); } .vk-disztopia .vkHang { background:var(--ember); } .vk-tragedia .vkHang { background:var(--berry); } .vk-ambivalens .vkHang { background:var(--honey); }
.vkMl { display:grid; gap:4px; padding:var(--sp-2); border-top:1px solid var(--line); } .vkMl h4 { margin:0; } .vkMl p { margin:0; }
.vtIhletGomb { display:flex; gap:var(--sp-2); }
/* részvételi műhely (Köves-féle backcasting) */
.vtMu { max-width:860px; } .vtMuMezo { display:grid; gap:4px; } .vtMuCim { font-weight:700; }
.vtMuTa { width:100%; min-height:var(--tap); resize:vertical; font:600 var(--fs-m)/1.4 var(--body); }
.vtMuPre { margin:0; padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); white-space:pre-wrap; overflow-wrap:anywhere; font:600 var(--fs-xs)/1.5 var(--body); max-height:60dvh; overflow:auto; }
.vtMuAllas { display:grid; gap:4px; padding-block:var(--sp-2); border-top:1px solid var(--line); }
@media print { body.vita > *:not(#vt) { display:none !important; } #vt { position:static; display:block; background:none; } #vt .vtSav, #vt .vtTakar, #vt .vtGombok, #vt .vtMuOsszOpt, #vt .vtVilagSor, #vt h2 { display:none !important; } #vt .vtMuPre { max-height:none; overflow:visible; border:0; font-size:12pt; } }
/* jövőkép-koncepciók */
.vkpKartya, .vkpHasonlo, .vkpLencse { display:grid; gap:var(--sp-2); padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); }
.vkpKartya header { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; } .vkpKartya h3, .vkpKartya h4, .vkpHasonlo h3, .vkpLencse h3 { margin:0; }
.vkpDl { margin:0; display:grid; gap:var(--sp-2); } .vkpSor { display:grid; gap:2px; padding-top:var(--sp-2); border-top:1px solid var(--line); } .vkpSor dt { font-weight:700; } .vkpSor dd { margin:0; line-height:1.4; }
.vkp-figyelmezteto { background:var(--blossom-bg); }
.vkpRacs { display:grid; gap:var(--sp-2); } .vkpHl { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.vtErzekeny { display:grid; gap:4px; justify-items:start; }
/* fordulópontok: térkép, gráf, idővonal, kártya – a hangulat alak ÉS szín */
.vfp { display:grid; gap:var(--sp-2); } .vfpSz { flex-wrap:wrap; }
.vfpTerkep { position:relative; border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--sky-bg); overflow:hidden; }
.vfpSvg { display:block; width:100%; height:min(62dvh, 560px); touch-action:none; cursor:grab; } .vfpOrszag { fill:var(--cream); stroke:var(--sage); stroke-width:.4; vector-effect:non-scaling-stroke; }
.vfpZoom { position:absolute; right:var(--sp-2); bottom:var(--sp-2); display:grid; gap:var(--sp-1); }
.vfpP { cursor:pointer; } .vfpP polygon, .vfpN .vfpJel polygon { stroke:var(--line); stroke-width:2; vector-effect:non-scaling-stroke; } .vfpHit { fill:transparent; }
.vfpP.tragedia polygon, .vfpN.tragedia .vfpJel polygon, .vfpJelKicsi.tragedia polygon { fill:var(--berry); } .vfpP.siker polygon, .vfpN.siker .vfpJel polygon, .vfpJelKicsi.siker polygon { fill:var(--leaf); } .vfpP.kettos polygon, .vfpN.kettos .vfpJel polygon, .vfpJelKicsi.kettos polygon { fill:var(--honey); }
.vfpP.on polygon { stroke-width:4; } .vfpP:focus-visible, .vfpN:focus-visible, .vfpCs:focus-visible { outline:none; } .vfpP:focus-visible polygon, .vfpCs:focus-visible circle { stroke:var(--focus); stroke-width:4; }
.vfpCs { cursor:pointer; } .vfpCs circle { fill:var(--ember); stroke:var(--line); stroke-width:2; vector-effect:non-scaling-stroke; } .vfpCs text { fill:var(--cream); font:700 13px var(--body); text-anchor:middle; }
.vfpGrafKeret { overflow-x:auto; border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); padding:var(--sp-2); } .vfpGraf { width:100%; min-width:min(820px, 100%); height:auto; display:block; }
.vfpEl { fill:none; stroke:var(--sage); stroke-width:2; opacity:.7; } .vfpEl.be { stroke:var(--ink); stroke-width:3; opacity:1; } .vfpEl.halvany, .vfpN.halvany { opacity:.45; }
.vfpN rect { fill:var(--cream); stroke:var(--line); stroke-width:2; } .vfpN.on rect { fill:var(--butter); } .vfpN { cursor:pointer; } .vfpN text { fill:var(--ink); font:700 11px var(--body); } .vfpEv { font-weight:400 !important; opacity:.8; }
.vfpFej { fill:var(--ink); font:400 15px var(--display); } .vfpSav { fill:var(--cream); } .vfpSav.pars { fill:var(--paper); } .vfpSavN { fill:var(--ink); font:700 12px var(--body); } .vfpTick { stroke:var(--sage); stroke-width:1; stroke-dasharray:4 4; }
.vfpKartya, .vfpIlyen { display:grid; gap:var(--sp-2); padding:var(--sp-3); border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--paper); } .vfpKartya h3, .vfpKartya h4, .vfpIlyen h3 { margin:0; } .vfpKartya p { margin:0; line-height:1.4; }
.vfpKartya header { display:flex; gap:var(--sp-2); align-items:flex-start; } .vfpKartya header > div { flex:1; } .vfpJelKicsi { width:26px; height:26px; flex:none; } .vfpJelKicsi polygon { stroke:var(--line); stroke-width:1.5; }
.vfpIl { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); } .vfpIl li { display:flex; gap:var(--sp-2); align-items:flex-start; } .vfpIl p { margin:2px 0 0; font-size:var(--fs-xs); }