/* ============================================================
   ÖKOS OTTHON — a bemutató-ház felülete
   A design system tokenjeire épül (css/tokens.css); nyers szín és kemény árnyék itt nincs.
   A tartalom saját színeit (fokozat-jelölés) névvel deklaráljuk, és úgy használjuk.
   ============================================================ */

body:not(.okoshaz) #ohHud,
body:not(.okoshaz) #ohLevels,
body:not(.okoshaz) #ohPanel { display:none; }
/* a közös, szelektálós súgó („WASD… felvesz/bedob”) és a pontszám itt nem érvényes – eddig csak a fejléc
   takarta őket, összecsukott fejlécnél viszont előbújtak (ugyanígy rejti az Ökos-rejtély is) */
.okoshaz #score, .okoshaz #hud, .okoshaz #hudBtn { display:none !important; }

/* ---- Fejléc: a nagy fokozat-kapcsoló és a mérősáv ---- */
#ohHud{
  --oh-hagyomanyos:var(--ember); --oh-ingyenes:var(--leaf); --oh-okos:var(--honey-deep);
  position:fixed; inset:auto 0 auto 0; top:0; z-index:var(--z-hud);
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:calc(var(--sp-2) + env(safe-area-inset-top,0px)) var(--sp-3) var(--sp-3);
  background:linear-gradient(180deg, var(--bg) 70%, transparent);
  pointer-events:none;
}
#ohHud > *{ pointer-events:auto; }
.ohSwitch{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-1);
  max-width:640px; margin:0 auto; width:100%;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill);
  padding:var(--sp-1); box-shadow:var(--soft-sm);
}
.ohSeg{
  min-height:var(--tap); border:0; border-radius:var(--r-pill); cursor:pointer;
  background:transparent; color:var(--ink-soft); font:var(--fs-s)/1.2 var(--body);
  padding:var(--sp-2) var(--sp-1); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ohSeg b{ font-weight:700; }
.ohSeg[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); box-shadow:var(--press); }
.ohSeg:focus-visible{ outline:var(--focus); }

.ohMeters{
  display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center;
  max-width:820px; margin:0 auto; width:100%;
}
.ohMeter{
  flex:1 1 128px; min-width:112px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:0 var(--sp-1);
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-m);
  padding:var(--sp-2); box-shadow:var(--soft-sm);
}
.ohMIco{ grid-row:span 2; font-size:var(--fs-l); align-self:center; }
.ohMVal{ font:var(--fs-l)/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.ohMUnit, .ohMName{ font-size:var(--fs-xs); color:var(--ink-soft); }
.ohMName{ grid-column:2/4; }
.ohMBar{ grid-column:1/4; display:block; height:6px; margin-top:var(--sp-1);
  background:var(--sage-bg); border-radius:var(--r-pill); overflow:hidden; }
.ohMBar i{ display:block; height:100%; width:100%; background:var(--ember); border-radius:var(--r-pill);
  transition:width var(--t-slow) var(--ease), background var(--t-slow) var(--ease); }
.ohMeter.jo .ohMBar i{ background:var(--good); }
.ohBecsles{ text-align:center; font-size:var(--fs-xs); color:var(--ink-soft); }

/* ---- Szintváltó (a HUD alsó sorában – telefonon a bal oldali ikonoszlop nem takarja) ---- */
#ohLevels{ display:flex; gap:var(--sp-1); }
#ohLevels.hidden{ display:none; }
.ohLvl{
  display:flex; align-items:center; gap:var(--sp-1); min-height:var(--tap);
  padding:var(--sp-1) var(--sp-3); cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line);
  border-radius:var(--r-pill); box-shadow:var(--soft-sm); font:var(--fs-s)/1 var(--body);
}
.ohLvl.sel{ background:var(--accent); color:var(--on-accent); box-shadow:var(--press); }
.ohLvl:focus-visible{ outline:var(--focus); }

/* ---- Panel ---- */
#ohPanel{ position:fixed; inset:0; z-index:var(--z-panel); display:flex; align-items:center; justify-content:center;
  background:var(--scrim); padding:var(--sp-3); }
#ohPanel.hidden{ display:none; }
.ohBox{
  position:relative; width:min(560px, 100%); max-height:86vh; overflow:auto;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--soft); padding:var(--sp-4); color:var(--ink);
}
/* a bezáró gomb ragadós: hosszú listán sem görgethető ki (2026-10-03) */
.ohClose{ position:sticky; top:0; float:right; margin:calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0 var(--sp-2); z-index:1; width:var(--tap); height:var(--tap);
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill); }
.ohHeadRow{ display:flex; gap:var(--sp-3); align-items:center; margin:0 var(--tap) var(--sp-3) 0; }
.ohHeadRow h2{ margin:0; font:var(--fs-xl)/1.1 var(--display); }
.ohHeadRow small{ color:var(--ink-soft); font-size:var(--fs-xs); }
.ohIco{ font-size:var(--fs-2xl); line-height:1; }
.ohIco svg, .ohIco img{ width:2.4em; height:2.4em; }
.ohSmall{ font-size:var(--fs-xs); color:var(--ink-soft); }
.ohMiert{ font:var(--fs-m)/1.4 var(--body); margin:0 0 var(--sp-3); }

/* ---- A kártya lépései ---- */
.ohSteps{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.ohStep{
  display:grid; gap:var(--sp-1); text-align:left; cursor:pointer;
  padding:var(--sp-3); border-radius:var(--r-m); box-shadow:var(--soft-sm);
  background:var(--surface); color:var(--ink);
  border:var(--line-w) solid var(--line); position:relative; padding-left:calc(var(--sp-3) + 20px);
}
/* a kategória színe egy kis hatszög-jelölőben (a vastag színes oldalcsík helyett) */
.ohStep::before{ content:""; position:absolute; left:var(--sp-3); top:calc(var(--sp-3) + 3px); width:12px; height:13px;
  clip-path:var(--hex); background:var(--oh-c, var(--line)); }
.ohStep.hagyomanyos{ --oh-c:var(--ember); }
.ohStep.ingyenes{ --oh-c:var(--leaf); }
.ohStep.okos{ --oh-c:var(--honey-deep); }
.ohStep.sel{ background:var(--sage-bg); box-shadow:var(--press); }
.ohStep:focus-visible{ outline:var(--focus); }
.ohStepFok{ font-size:var(--fs-xs); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.ohStep b{ font:var(--fs-m)/1.25 var(--body); font-weight:700; }
.ohStepNum{ font-size:var(--fs-s); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ohStepFt{ font-size:var(--fs-s); }
.ohStepFt.jo{ color:var(--good-ink); font-weight:700; }
.ohAssume{ justify-self:start; }
.ohTry{ background:var(--sage-bg); border-radius:var(--r-m); padding:var(--sp-3); font-size:var(--fs-s); }
.ohSrc{ margin:var(--sp-2) 0 0; padding-left:var(--sp-4); font-size:var(--fs-xs); color:var(--ink-soft); }

/* ---- Lista-nézet (egyenrangú nézet, nem kisegítő) ---- */
.ohListaCim{ font:var(--fs-xl)/1.1 var(--display); margin:0 var(--tap) var(--sp-1) 0; }
.ohListaSzoba h3{ font:var(--fs-l)/1.2 var(--display); margin:var(--sp-4) 0 var(--sp-2); }
.ohListaSzoba h3 small{ font:var(--fs-xs)/1 var(--body); color:var(--ink-soft); margin-left:var(--sp-2); }
.ohListaUl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.ohListaBtn{
  width:100%; display:flex; align-items:center; gap:var(--sp-3); text-align:left; cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line);
  border-radius:var(--r-m); padding:var(--sp-2) var(--sp-3); min-height:var(--tap); box-shadow:var(--soft-sm);
}
.ohListaBtn:focus-visible{ outline:var(--focus); }
.ohListaIco{ font-size:var(--fs-l); flex:0 0 auto; }
.ohListaIco svg, .ohListaIco img{ width:1.8em; height:1.8em; }
.ohListaSzo{ flex:1 1 auto; display:grid; }
.ohListaSzo small{ font-size:var(--fs-xs); color:var(--ink-soft); }
.ds-tag.oh-hagyomanyos{ background:var(--blossom-bg); }
.ds-tag.oh-ingyenes{ background:var(--sage-bg); }
.ds-tag.oh-okos{ background:var(--butter); }

/* ---- Belépő kérdések ---- */
.ohKerdesLep{ font-size:var(--fs-xs); color:var(--ink-soft); margin:0; }
.ohKerdesCim{ font:var(--fs-xl)/1.15 var(--display); margin:var(--sp-1) var(--tap) var(--sp-3) 0; }
.ohKerdesValaszok{ display:grid; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.ohValasz{
  display:grid; gap:2px; text-align:left; cursor:pointer; min-height:var(--tap);
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line);
  border-radius:var(--r-m); padding:var(--sp-3); box-shadow:var(--soft-sm);
}
.ohValasz:focus-visible{ outline:var(--focus); }
.ohValasz small{ color:var(--ink-soft); font-size:var(--fs-xs); }
.ohSkip{ display:block; margin:0 auto; }

/* ---- Otthon-terv ---- */
.ohTervCim{ font:var(--fs-2xl)/1.1 var(--display); margin:0 var(--tap) var(--sp-1) 0; }
.ohTervLista{ list-style:none; margin:var(--sp-3) 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.ohTervLista li{ display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--sage-bg); border-radius:var(--r-m); padding:var(--sp-3); }
.ohTervSzam{ flex:0 0 auto; width:1.8em; height:1.8em; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); border-radius:var(--r-pill); font:var(--fs-m)/1 var(--display); }
.ohTervLista small{ display:block; color:var(--ink-soft); font-size:var(--fs-s); font-variant-numeric:tabular-nums; }
.ohTervLagy{ font-size:var(--fs-s); color:var(--ink-soft); }
.ohTervOssz{ background:var(--paper); border:var(--line-w) solid var(--line); border-radius:var(--r-m); padding:var(--sp-3); }
.ohTervOssz h3{ font:var(--fs-l)/1.2 var(--display); margin:0 0 var(--sp-2); }
.ohTervOssz ul{ margin:0 0 var(--sp-2); padding-left:var(--sp-4); font-variant-numeric:tabular-nums; }
.ohTervGombok{ display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap; margin-top:var(--sp-3); }

/* ---- Partner-ajánlat: láthatóan elkülönül a tartalomtól ---- */
.ohPartner{
  margin:var(--sp-3) 0; padding:var(--sp-3);
  border:var(--line-w) dashed var(--line); border-radius:var(--r-m); background:var(--paper);
}
.ohPartnerCim{ font:var(--fs-s)/1.2 var(--body); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin:0 0 var(--sp-2); }
.ohPartnerSor{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-2); }
.ohPartnerSor p{ margin:2px 0; font-size:var(--fs-s); }
.ohPartnerLogo{ width:56px; height:56px; object-fit:contain; }
.ohPartnerKapcs{ color:var(--ink-soft); font-size:var(--fs-xs); }
.ohPartnerUl{ margin:0; padding-left:var(--sp-4); font-size:var(--fs-s); }
.ohPartnerLab{ margin:var(--sp-2) 0 0; font-size:var(--fs-xs); color:var(--ink-soft); }

/* ---- Telefon, álló nézet ---- */
@media (max-width:520px){
  /* a bal oldali kör alakú ikonoszlop alatt nem lehet tartalom – ezért a HUD balról beljebb kezdődik */
  #ohHud{ padding-left:60px; padding-right:var(--sp-2); gap:var(--sp-1); }
  .ohSwitch{ padding:2px; }
  .ohSeg{ font-size:var(--fs-xs); padding:var(--sp-1) 2px; min-height:40px; }
  .ohMeters{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
  .ohMeter{ min-width:0; padding:4px 2px; grid-template-columns:1fr; text-align:center; justify-items:center; }
  .ohMIco{ grid-row:auto; font-size:var(--fs-s); }
  .ohMVal{ font-size:var(--fs-s); }
  .ohMUnit{ display:none; }
  .ohMName{ grid-column:1; font-size:10px; }
  .ohMBar{ grid-column:1; width:100%; height:4px; margin-top:2px; }
  .ohHudSor{ gap:var(--sp-1); }
  .ohLvl{ padding:var(--sp-1) var(--sp-2); font-size:var(--fs-xs); min-height:40px; }
  .ohBecsles{ flex:1 1 100%; }
  .ohBox{ padding:var(--sp-3); max-height:92vh; }
}

/* A fejléc alsó sora: nézetváltó gombok és a „becslés" jelölés */
.ohHudSor{ display:flex; gap:var(--sp-2); align-items:center; justify-content:center; flex-wrap:wrap; }

/* A jelenlegi választás jól láthatóan kiemelve (szín mellett szöveg is jelzi: „most így van”) */
.ohStep.sel{ outline:3px solid var(--accent); outline-offset:-3px; }

/* ---- Rezsicsökkentés: a kedvezményes keret ---- */
.ohSav{
  display:block; width:100%; max-width:820px; margin:0 auto; cursor:pointer; text-align:center;
  padding:var(--sp-1) var(--sp-3); min-height:var(--tap);
  background:var(--sage-bg); color:var(--ink); border:var(--line-w) solid var(--line);
  border-radius:var(--r-pill); font:var(--fs-s)/1.3 var(--body); box-shadow:var(--soft-sm);
}
.ohSav.felett{ background:var(--blossom-bg); }
.ohSav.hidden{ display:none; }
.ohSav:focus-visible{ outline:var(--focus); }
.ohSavTetel{ margin:var(--sp-3) 0; }
.ohSavFej{ display:flex; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap;
  font-size:var(--fs-s); font-variant-numeric:tabular-nums; }
.ohSavBar{ position:relative; display:flex; height:14px; margin:var(--sp-1) 0; border-radius:var(--r-pill);
  background:var(--paper); overflow:hidden; border:var(--line-w) solid var(--line); }
.ohSavBar i{ display:block; height:100%; }
.ohSavBar i.alatt{ background:var(--good); }
.ohSavBar i.felett{ background:var(--ember); }
.ohSavJel{ position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--ink); border-radius:2px; }
.ohSavTetel small{ color:var(--ink-soft); font-size:var(--fs-xs); }
.ohSavOssz{ background:var(--blossom-bg); border-radius:var(--r-m); padding:var(--sp-3); }
.ohSavOssz.jo{ background:var(--good-bg); }
.ohSavTipp{ font-size:var(--fs-s); }

/* ---- Három nézet: hőkamera, tél, éjszaka ---- */
.ohNezetek{ margin-top:2px; }
.ohNez{ display:inline-flex; align-items:center; gap:var(--sp-1); }
.ohNez.on{ background:var(--accent); color:var(--on-accent); box-shadow:var(--press); }
.ohHoSkala{ display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); color:var(--ink-soft); }
.ohHoSkala.hidden{ display:none; }
/* a hőtérkép skálája: ugyanaz a színsor, amit a 3D-ben látsz (js/haz/haz-ho.js) */
.ohHoSkala i{ display:block; width:80px; height:10px; border-radius:var(--r-pill);
  border:var(--line-w) solid var(--line);
  --oh-h0:#141452; --oh-h1:#4b2a9e; --oh-h2:#b8307a; --oh-h3:#e8542a; --oh-h4:#ffb627; --oh-h5:#fff6c8;
  background:linear-gradient(90deg, var(--oh-h0), var(--oh-h1) 30%, var(--oh-h2) 50%, var(--oh-h3) 68%, var(--oh-h4) 85%, var(--oh-h5)); }
/* hőkamerás és éjszakai módban a fejléc ne világítson bele a képbe */
body.ohHo #ohHud, body.ohEjjel #ohHud{ background:linear-gradient(180deg, rgba(0,0,0,.55) 60%, transparent); }
body.ohHo .ohMeter, body.ohHo .ohSwitch, body.ohEjjel .ohMeter, body.ohEjjel .ohSwitch{ opacity:.94; }
/* sötét háttéren a kísérő sorok világos betűvel olvashatók */
body.ohHo .ohBecsles, body.ohEjjel .ohBecsles,
body.ohHo .ohHoSkala, body.ohEjjel .ohHoSkala{ color:var(--cream); }
.ohEjjelSor{ font-size:var(--fs-s); }

/* ---- Saját számla összevetése ---- */
.ohSzamlaUrlap{ display:grid; gap:var(--sp-2); margin:var(--sp-3) 0; }
.ohSzamlaIdo{ justify-self:start; }
.ohSzamlaSor{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font:var(--fs-m)/1.2 var(--body); }
.ohSzamlaSor small{ color:var(--ink-soft); font-size:var(--fs-xs); }
.ohSzamlaSor input{ width:9ch; text-align:right; font-variant-numeric:tabular-nums; }
.ohSzamlaCim{ font:var(--fs-l)/1.2 var(--display); margin:var(--sp-4) 0 var(--sp-2); }
.ohSzamlaLista{ list-style:none; margin:0 0 var(--sp-2); padding:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.ohSzamlaLista li{ display:flex; gap:var(--sp-2); align-items:baseline; flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-m); background:var(--paper);
  font-variant-numeric:tabular-nums; }
.ohSzamlaLista li.kozel{ background:var(--sage-bg); box-shadow:var(--press); }
.ohSzamlaLista li span{ color:var(--ink-soft); font-size:var(--fs-s); }
.ohSzamlaLista li em{ font-style:normal; font-size:var(--fs-xs); color:var(--good-ink); font-weight:700; }
.ohStepNote{ font-size:var(--fs-s); color:var(--ink-soft); line-height:1.4; }
.ohPartnerUl li{ margin-bottom:var(--sp-1); }
.ohPartnerUl small{ display:block; color:var(--ink-soft); font-size:var(--fs-xs); }

/* ---- Csúszka: folyamatos átmenet hagyományos → ökos ----
   A sín színe magát az utat mutatja: a három fokozat saját színe (a #ohHud-on deklarált tartalom-színek).
   A megállók a fölötte álló ohSwitch gombjai – a csúszka csak összeköti őket. */
.ohCsSor{ position:relative; max-width:640px; width:100%; margin:0 auto; display:grid; gap:2px; }
.ohCsuszka{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; margin:0;
  background:transparent; cursor:grab; touch-action:none;
}
.ohCsuszka:active{ cursor:grabbing; }
.ohCsuszka::-webkit-slider-runnable-track{
  height:12px; border-radius:var(--r-pill); border:var(--line-w) solid var(--line);
  background:linear-gradient(90deg, var(--oh-hagyomanyos), var(--oh-ingyenes) 50%, var(--oh-okos));
}
.ohCsuszka::-moz-range-track{
  height:12px; border-radius:var(--r-pill); border:var(--line-w) solid var(--line);
  background:linear-gradient(90deg, var(--oh-hagyomanyos), var(--oh-ingyenes) 50%, var(--oh-okos));
}
.ohCsuszka::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-10px;
  border-radius:var(--r-pill); background:var(--surface); border:var(--line-w) solid var(--line);
  box-shadow:var(--soft-sm);
}
.ohCsuszka::-moz-range-thumb{
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--surface); border:var(--line-w) solid var(--line); box-shadow:var(--soft-sm);
}
.ohCsuszka:focus-visible{ outline:var(--focus); outline-offset:4px; border-radius:var(--r-pill); }
/* meddig lehet húzni a mostani kerettel (itt fogy el az erőfeszítés-pont) */
.ohCsKeret{ position:absolute; top:0; height:22px; width:3px; background:var(--ink); border-radius:2px;
  transform:translateX(-1px); pointer-events:none; }
.ohCsKeret.hidden{ display:none; }
.ohCsAll{ display:block; text-align:center; font-size:var(--fs-xs); color:var(--ink-soft); min-height:1.2em; }
.ohCsStop{ color:var(--bad-ink); font-weight:700; }
body.ohHo .ohCsAll, body.ohEjjel .ohCsAll{ color:var(--cream); }

/* ---- Költségvetés: erőfeszítés-pontok (JÁTÉKÉRTÉK, nem ár) ---- */
.ohKeretSor{ display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); min-height:32px;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-pill);
  font:var(--fs-xs)/1 var(--body); font-variant-numeric:tabular-nums; }
.ohKeretSor.tele{ background:var(--butter); }
.ohPont{ display:inline-block; padding:1px var(--sp-2); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; border:2px solid var(--line); white-space:nowrap; }
.ohPont.p0{ background:var(--sage-bg); }
.ohPont.p1{ background:var(--sky-bg); }
.ohPont.p3{ background:var(--butter); }
.ohPontLista{ list-style:none; margin:var(--sp-3) 0; padding:0; display:grid; gap:var(--sp-2); font-size:var(--fs-s); }
.ohKeretValaszok{ display:grid; gap:var(--sp-2); margin:var(--sp-3) 0; }
.ohKeretValaszok .ohValasz.sel{ background:var(--sage-bg); box-shadow:var(--press); }
.ohStep.nemFer{ opacity:.55; cursor:not-allowed; }
.ohStep.nemFer .ohStepFt{ color:var(--bad-ink); font-weight:700; }

/* ---- „És ha minden magyar háztartás?" ---- */
.ohOrszLista{ display:grid; gap:var(--sp-2); margin:var(--sp-3) 0; }
.ohOrszSor{ display:flex; align-items:center; gap:var(--sp-3);
  background:var(--sage-bg); border-radius:var(--r-m); padding:var(--sp-3); }
.ohOrszSor > div{ flex:1 1 auto; }
.ohOrszSor small{ display:block; color:var(--ink-soft); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.ohOrszIco{ font-size:var(--fs-l); flex:0 0 auto; }
.ohOrszNagy{ flex:0 0 auto; font:var(--fs-l)/1.1 var(--display); text-align:right; font-variant-numeric:tabular-nums; }
.ohOrszFigy{ background:var(--blossom-bg); border-radius:var(--r-m); padding:var(--sp-3); font-size:var(--fs-s); }
.ohOrszSemmi{ font-size:var(--fs-s); color:var(--ink-soft); }

/* ---- Vezetett séta: a kártya alján a séta vezérlője ----
   Odatapad a kártya aljára: a bemutató alatt a „Következő" gombot ne kelljen megkeresni görgetéssel. */
.ohDemoSor{ position:sticky; bottom:calc(var(--sp-4) * -1); z-index:1;
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end;
  margin:var(--sp-3) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
  padding:var(--sp-3) var(--sp-4); background:var(--surface); border-top:var(--line-w) solid var(--sage); }
.ohDemoLepes{ margin-right:auto; font-size:var(--fs-xs); color:var(--ink-soft); }

@media (max-width:520px){
  /* A fejléc gombjai külön sorba törtek, és a HUD elnyelte a képernyő négyötödét. Telefonon ezért a sor
     NEM törik: egyetlen, vízszintesen görgethető szalag lesz belőle. (Maga a lap nem görög oldalra –
     a görgetés ezen az egy dobozon belül marad.) Ez a szabály a fájl VÉGÉN áll, mert a .ohHudSor
     alapszabálya lejjebb van, mint a többi telefonos blokk, és azonos erősségnél a későbbi nyer. */
  .ohHudSor{ flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .ohHudSor::-webkit-scrollbar{ display:none; }
  .ohHudSor > *{ flex:0 0 auto; }
  .ohHudSor .ds-btn-sm, .ohKeretSor{ white-space:nowrap; }
  .ohDemoSor{ margin:var(--sp-3) calc(var(--sp-3) * -1) calc(var(--sp-3) * -1); padding:var(--sp-2) var(--sp-3);
    bottom:calc(var(--sp-3) * -1); }
  .ohKeretSor{ min-height:28px; }
  .ohCsuszka{ height:20px; }
  .ohCsuszka::-webkit-slider-thumb{ width:24px; height:24px; }
  .ohCsKeret{ height:20px; }
  .ohOrszSor{ padding:var(--sp-2); gap:var(--sp-2); }
  .ohOrszNagy{ font-size:var(--fs-m); }
}

/* ---- Felcsukható fejléc ----
   A kapcsoló és a csúszka mindig látszik (ez a játék gerince), a mérők, a gombsor és a jegyzetek
   egy koppintással összecsukhatók. Összecsukva a gomb maga mutatja a számlát, hogy a lényeg ne tűnjön el. */
.ohHudTest{ display:contents; }
#ohHud.csukva .ohHudTest{ display:none; }
.ohHudKapcs{
  align-self:center; display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap); padding:var(--sp-1) var(--sp-4); cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line);
  border-radius:var(--r-pill); box-shadow:var(--soft-sm); font:var(--fs-s)/1.1 var(--body);
}
.ohHudKapcs:focus-visible{ outline:var(--focus); }
.ohHudOssz{ font:var(--fs-m)/1 var(--display); font-variant-numeric:tabular-nums; display:none; }
#ohHud.csukva .ohHudOssz{ display:inline; }
.ohHudNyil{ font-size:var(--fs-s); }
.ohHudKapcsSzo{ color:var(--ink-soft); }
#ohHud.csukva{ background:linear-gradient(180deg, var(--bg) 40%, transparent); }

/* A csúszka sínje vékony, de az ujjnak kell a hely: a koppintható sáv --tap magas, a sín benne középen. */
.ohCsuszka{ height:var(--tap); }
.ohCsKeret{ height:var(--tap); }

/* Alacsony képernyő (fekvő telefon): ugyanaz a tömör elrendezés, mint keskeny kijelzőn. */
@media (max-height:560px){
  #ohHud{ gap:var(--sp-1); padding-top:calc(var(--sp-1) + env(safe-area-inset-top,0px)); }
  .ohSeg{ min-height:40px; padding:var(--sp-1) 2px; }
  .ohMeters{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
  .ohMeter{ min-width:0; padding:4px 6px; }
  .ohMIco{ font-size:var(--fs-s); }
  .ohMVal{ font-size:var(--fs-m); }
  .ohMBar{ height:4px; margin-top:2px; }
  .ohHudSor{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; padding-bottom:2px; }
  .ohHudSor::-webkit-scrollbar{ display:none; }
  .ohHudSor > *{ flex:0 0 auto; }
  .ohHudSor .ds-btn-sm, .ohKeretSor{ white-space:nowrap; }
  .ohEjjelSor, #ohTobblet{ display:none; }
}

/* ---- Makett-nézet (Sims-szerű felülnézet) ----
   A fő gombsor (makett ↔ séta, összecsukás) az összecsukott fejlécben is látszik. Makettben nincs botkormány és
   „Megnézem” gomb: ott a kamerát húzással forgatod, két ujjal közelítesz, a tárgyra koppintva nyílik a kártya. */
.ohHudFo{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
.ohMakettGomb[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); box-shadow:var(--press); }
body.ohMakett #joy, body.ohMakett #touchBtns, body.ohMakett #hint{ display:none !important; }

/* ---- Katalógus (alsó fiók, a ház közben látszik) ---- */
#ohKat{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-controls);
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom,0px));
  background:var(--surface); border-top:var(--line-w) solid var(--line); border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:var(--soft); max-height:min(56vh, 420px); }
#ohKat.hidden{ display:none; }
body:not(.okoshaz) #ohKat{ display:none; }
body.ohKatNyitva #joy, body.ohKatNyitva #touchBtns, body.ohKatNyitva #hint{ display:none !important; }
.ohKatFej{ display:flex; align-items:center; gap:var(--sp-3); }
.ohKatCim{ font:var(--fs-l)/1 var(--display); display:inline-flex; gap:var(--sp-1); align-items:center; }
.ohKatAll{ margin-right:auto; font-size:var(--fs-xs); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ohKatFulek{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.ohKatFulek::-webkit-scrollbar{ display:none; }
.ohKatFulek .ds-tab{ white-space:nowrap; flex:0 0 auto; }
.ohKatLista{ list-style:none; margin:0; padding:0 0 var(--sp-1); display:flex; gap:var(--sp-2); overflow-x:auto; overflow-y:auto; min-height:0; flex:1 1 auto; align-items:stretch; }
.ohKatKartya{ flex:0 0 200px; display:flex; flex-direction:column; gap:4px; padding:var(--sp-2); cursor:pointer;
  background:var(--paper); border:var(--line-w) solid var(--line); border-radius:var(--r-m); box-shadow:var(--soft-sm); }
.ohKatKartya.bent{ background:var(--sage-bg); }
.ohKatKartya b{ font:var(--fs-s)/1.2 var(--body); font-weight:800; }
.ohKatIco{ font-size:var(--fs-l); line-height:1; } .ohKatIco svg, .ohKatIco img{ width:32px; height:32px; }
.ohKatLepes{ font-size:var(--fs-xs); color:var(--ink); line-height:1.3; }
.ohKatHatas{ font-size:var(--fs-xs); color:var(--good-ink); font-weight:700; font-variant-numeric:tabular-nums; margin-top:auto; }
.ohKatKartya .ds-btn-sm{ justify-content:center; margin-top:var(--sp-1); flex:0 0 auto; }
.ohKatHatas{ margin-top:auto; }
.ohKatLab{ margin:0; font-size:var(--fs-xs); color:var(--ink-soft); }
@media (max-height:560px){ #ohKat{ max-height:62vh; } .ohKatLab{ display:none; } .ohKatKartya{ flex-basis:170px; } }
/* Alacsony képernyőn (fekvő telefon) a katalógus alatt csak a fő gombsor marad fent, és a fiók a bal oldali
   rendszergombokat szabadon hagyja (méret-próba, 2026-09-24). */
@media (max-height:560px){
  body.ohKatNyitva #ohHud .ohSwitch, body.ohKatNyitva #ohHud .ohCsSor{ display:none; }
  #ohKat{ left:60px; max-height:calc(100vh - 70px); gap:var(--sp-1); padding-top:var(--sp-1); }
  .ohKatIco, .ohKatLepes{ display:none; }
  .ohKatFulek .ds-tab{ min-height:40px; }
}

/* ---- Kézzelfogható tárgyak: a mozdulat-buborék a tárgy fölött ---- */
.ohAkcio{ position:fixed; left:0; top:0; z-index:var(--z-world); display:flex; gap:var(--sp-1); align-items:center; }
body:not(.okoshaz) .ohAkcio{ display:none !important; }
.ohAkcioGomb{ display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--tap); padding:var(--sp-1) var(--sp-3);
  background:var(--accent); color:var(--on-accent); border:var(--line-w) solid var(--line); border-radius:var(--r-pill);
  box-shadow:var(--press); font:700 var(--fs-s)/1.1 var(--body); cursor:pointer; white-space:nowrap; animation:ohAkcioBe var(--t-base) var(--ease-out); }
.ohAkcioMi{ width:var(--tap); height:var(--tap); border-radius:var(--r-pill); cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line); box-shadow:var(--soft-sm); font:var(--fs-m)/1 var(--display); }
.ohAkcioGomb:focus-visible, .ohAkcioMi:focus-visible{ outline:var(--focus); }
@keyframes ohAkcioBe{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .ohAkcioGomb{ animation:none; } }
.ohAkcioGomb.visz{ background:var(--sage-bg); color:var(--ink); touch-action:none; cursor:grab; }
.ohAkcioGomb.visz:active{ cursor:grabbing; }

/* ---- Kihívás (okoshaz-kihivas.js): a „Kész" gomb a fejléc fő sorában – összecsukva is látszik ---- */
.ohKihGomb{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ohKihGomb b{ font-variant-numeric:tabular-nums; }
.ohVisszaLista{ min-height:var(--tap); gap:6px; margin-bottom:var(--sp-2); }

/* ── „A bemutató az alap” (js/okoshaz-halado.js, 2026-10-03): a haladó eszközök csak a „Haladó” gombra jönnek elő.
   Alapból: három fokozat, mérők, Makett, Lista, szintváltó, „Mutasd a hármat”. ── */
#ohHud:not(.halado) :is(.ohCsSor, #ohKatGomb, [data-oh="terv"], [data-oh="szamla"], [data-oh="keret"], [data-oh="kihivas"],
  #ohKeretSor, .ohNezetek, #ohHoSkala){ display:none !important; }
#ohHaladoGomb .pic{ width:18px; height:18px; }
/* a vezetett séta a sor elején: telefonon a sor vízszintesen görget, így ez a fő gomb mindig látszik */
#ohHud:not(.halado) .ohHudSor [data-oh="demo"]{ order:-1; }

/* ---- Piktogramok az emojik helyén (2026-10-06): a pics.js vonalas jelei, a helyükhöz méretezve ---- */
.ohMIco .pic{ width:1.2em; height:1.2em; }
.ohIco .pic{ width:1.5em; height:1.5em; }
.ohOrszIco .pic{ width:1.3em; height:1.3em; }
.ohHudNyil .pic{ width:16px; height:16px; }
.ohHudOssz .pic{ width:.9em; height:.9em; vertical-align:-.1em; }
.ohLvl .pic, .ohNez .pic, .ohHudKapcs .pic, .ohAkcioGomb .pic{ width:20px; height:20px; }
.ohChev{ display:inline-grid; place-items:center; line-height:0; }
.ohChev-le{ transform:rotate(90deg); } .ohChev-fel{ transform:rotate(-90deg); }
.ohChev .pic{ width:16px; height:16px; }

/* ---- Telefon: egy mérő a fejlécben (2026-10-06, UX-átvilágítás: a mérőpanel a képernyő ~45%-át vitte el) ----
   Csak a számla látszik egy sorban (ikon · Ft/év · sáv · „Több mérő”); koppintásra jön a többi négy és a
   kedvezményes keret sora (js/okoshaz-halado.js → ohMerokNyit). A fő gombsor egy sorba fér, az összecsukó gomb
   csak ikon (a felirata a felolvasónak megmarad). Szélesebb képernyőn minden a régi. */
.ohMerokTobb{ display:none; }
@media (max-width:520px){
  .ohHudFo{ gap:var(--sp-1); }   /* alapból (3 gomb) egy sorba fér; haladóban, összecsukva két sorba törhet */
  /* koppintási felület ≥ 44 px a fokozat- és szintgombokon is (eddig telefonon 40 px volt); a kinyitott mérők neve olvasható */
  .ohSeg, .ohLvl{ min-height:var(--tap); }
  .ohMName{ font-size:var(--fs-xs); }
  .ohHudFo .ohHudKapcs{ padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs); white-space:nowrap; }
  #ohHud:not(.csukva) #ohHudKapcs{ min-width:var(--tap); padding:var(--sp-1); justify-content:center; }
  #ohHud:not(.csukva) #ohHudKapcs .ohHudKapcsSzo{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

  .ohMeters{ grid-template-columns:repeat(4, 1fr); }
  #ohHud:not(.merokNyitva) .ohMeter:not([data-m="ft"]){ display:none; }
  #ohHud:not(.merokNyitva) .ohSav{ display:none; }
  .ohMeter[data-m="ft"]{ position:relative; grid-column:1 / -1; min-height:var(--tap);
    grid-template-columns:auto auto auto minmax(24px, 1fr) auto; align-items:center; justify-items:start;
    text-align:left; gap:0 var(--sp-1); padding:0 0 0 var(--sp-3); }
  .ohMeter[data-m="ft"] .ohMIco{ font-size:var(--fs-m); }
  .ohMeter[data-m="ft"] .ohMVal{ font-size:var(--fs-l); }
  .ohMeter[data-m="ft"] .ohMUnit{ display:inline; font-size:var(--fs-xs); }
  .ohMeter[data-m="ft"] .ohMName{ display:none; }
  .ohMeter[data-m="ft"] .ohMBar{ grid-column:auto; justify-self:stretch; height:6px; margin:0 var(--sp-1); }
  .ohMerokTobb{ display:inline-flex; align-items:center; gap:2px; min-height:var(--tap); padding:0 var(--sp-2);
    background:var(--sage-bg); color:var(--ink); border:0; border-radius:var(--r-pill); cursor:pointer;
    font:700 var(--fs-xs)/1 var(--body); white-space:nowrap; }
  .ohMerokTobb .pic{ width:16px; height:16px; }
  /* az egész mérő-sor koppintható: a gomb láthatatlan „tappancsa” a sort fedi (≥ 44 px magas) */
  .ohMerokTobb::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
  .ohMerokTobb:focus-visible{ outline:var(--focus); }
  #ohHud.merokNyitva .ohMeter[data-m="ft"]{ background:var(--paper); }
}