/* Phyal — vanilla CSS, változó-alapú téma. „Obszidián” design.
   Nincs build lépés, nincs framework. A betű self-hostolt (offline is él). */

@font-face {
  font-family: "Archivo";
  src: url("../betuk/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201F, U+2026;
}
@font-face {
  font-family: "Archivo";
  src: url("../betuk/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-024F, U+0150-0151, U+0170-0171;
}

/* Unbounded 800 — csak a „Phyal” szóvédjegyé (betöltő, belépés). SIL OFL 1.1. */
@font-face {
  font-family: "Unbounded";
  src: url("../betuk/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

/* Nunito 900 — a NAGY számoké: kerek, barátságos, tabuláris. */
@font-face {
  font-family: "Nunito";
  src: url("../betuk/nunito-latin.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201F, U+2026;
}
@font-face {
  font-family: "Nunito";
  src: url("../betuk/nunito-latin-ext.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0150-0151, U+0170-0171;
}

:root {
  /* „Phyal": OLED-fekete alap, laborszínek. A kártyák hajszál-kerettel
     válnak el, mert tiszta feketén az árnyék nem látszik. */
  --hatter: #000000;
  --lap: #0d0d0f;
  --lap-vilagos: #141518;
  --lap-emelt: #1c1d21;
  --keret: rgba(255, 255, 255, 0.09);
  --melyseg: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.55);
  --szoveg: #f4f5f7;
  --halvany: #9a9fab;
  --kiemelt: #04d9ff;
  --kiemelt-sotet: #00b0d6;
  --siker: #9be12c;
  --figyelem: #f5b83d;
  --narancs: #f6863c;
  --veszely: #fa2e55;
  /* Metrika-színek — az egész appban ugyanazok: kalória, fehérje, edzés,
     kávé, és a terem-mód „volt"-sárgája. */
  --kaloria: #fa2e55;
  --feherje: #04d9ff;
  --edzes-szin: #9be12c;
  --kave: #f5b83d;

  /* Makró-színek: a szénhidrát és a zsír eddig a --siker és a --figyelem
     tokent használta, csakhogy azok már foglaltak (edzés-lime, kávé). */
  --szenhidrat: #b98cff;
  --zsir: var(--narancs);
  --pulzus-szin: #ef5b5b;
  /* A TESTSÚLY LILÁJA (Levi, 2026-09-18). Volt türkiz is — csakhogy a türkiz
     is a zöld családba esik, és a rácson így NÉGY zöldes csempe ült egymás
     közelében. A lila az egyetlen szabad hue: a narancsot Levi elvetette („úgy
     tűnne, mintha mindig baj lenne a súllyal"), a fehéret is. Az átfedést a
     szénhidráttal vállaljuk — a Haladás-rácson nincsenek makrók. */
  --testsuly: #b98cff;
  /* A HALADÁS-RÁCS SZÍNRENDJE (Levi, 2026-09-18). Egy szín = egy jelentés az
     egész appban: cián = az app, a Kalibráció és a hét; LIME = edzés ÉS a
     terhelhetőség, amíg rendben van; narancs = naptár (és a terhelhetőség első
     jelzése); lila = testsúly; indigó = alvás; pink = kalória és veszély;
     fehér = ami csak összegez.
     A NAPTÁR NARANCS: egy körben az edzés lime-ját viselte, de attól négy
     zöldes csempe lett a lapon, és közben a hideg ciánból kettő maradt, ami
     szétszórta volna őket. Így a narancs az egyetlen meleg szín a rácson. */
  --naptar: var(--narancs);
  --semleges-csempe: #e6eaf2;
  /* A TERHELHETŐSÉG UGYANAZT A ZÖLDET VISELI, MINT AZ EDZÉS. Volt egy kör saját
     mohazölddel, hogy elváljon tőle — Levi döntése az lett, hogy a zöld maradjon
     közös, a két csempe viszont kerüljön a rács átellenes sarkába (lásd app.js,
     a tégla-sorrend). Jelzéskor `--narancs`, majd `--kaloria`. */
  --terhelhetoseg: var(--edzes-szin);
  /* AZ ALVÁS CSEMPE-SZÍNE. A fázis-sávok mély kékje (--alvas-mely) a diagramé
     marad; a csempe azonosító színe ez a halkabb indigó. */
  --alvas: #a5a6ff;
  /* Alvás-fázisok — eddig a JS-ben álltak bedrótozva. */
  --alvas-mely: #3d7dff;
  --alvas-rem: #8f6bff;
  --alvas-konnyu: #2c4a86;
  --alvas-ebren: #54586a;
  /* A RITMUS-GRAFIKON SKÁLÁJA: minél jobb az éjszaka, annál sötétebb a sávja.
     A sötét vég itt áll meg, mert a #4b46c8 még 3:1 kontrasztú a fekete lapon —
     lejjebb pont a legjobb éjszakád olvadna bele a háttérbe. */
  --alvas-jo: #4b46c8;
  --alvas-gyenge: #dcdcff;
  /* PULZUSZÓNÁK. Eddig öt bedrótozott hex volt a pulzus.js-ben — vagyis
     világos témában sem váltottak, és az egyikük (#3ecf8e) épp az a zöld,
     amit a grafikonok palettavalidátora megbuktatott. */
  --zona-1: #6b7a90;
  --zona-2: #3ecf8e;
  --zona-3: #f0b429;
  --zona-4: #ef8b3b;
  --zona-5: #ef5b5b;
  /* Szöveg az akcentus-háttéren. Világosban fehérre vált, mert a sötét
     felirat a #0086a8-on már a 4,5:1-es küszöb alatt van. */
  --kiemelt-szoveg: #05111f;

  /* ---- Típusskála. Hét lépcső, mind px-ben. ----
     A --t-torzs 16px nem esztétikai döntés: ez az a padló, ami alatt az iOS
     ránagyít a fókuszált mezőre, és nem nagyít vissza. Minden input ebből kap. */
  --t-cimke: 11px;
  --t-apro: 13px;
  --t-torzs: 16px;
  --t-cim: 20px;
  --t-nagy: 26px;
  --t-orias: 34px;
  --t-plakat: 52px;

  --sugar: 18px;
  --sugar-kicsi: 12px;
  --sugar-nagy: 26px;
  --sugar-pirula: 999px;
  --sav: 14px;
  --cimke-ritkitas: 0.12em;

  /* ---- TÉRKÖZ-SKÁLA (audit 08) ----
     A rendszer eddigi hiányzó tengelye. Szín, betű, sugár és érintőminimum
     mind token volt; a térköz nem, ezért 254 padding-deklarációban 21 külön
     érték élt 1-től 26 pixelig. Ez NEM tömeges csere: a meglévő 6/10/14-es
     értékek maradnak, ahol jól működnek — az ÚJ szabályok viszont innen
     dolgozzanak, és a kártya-belsők egyetlen értékből jöjjenek. */
  --r0: 2px;    /* hajszál, ikon-köz */
  --r1: 4px;    /* cím és alcím közt */
  --r2: 8px;    /* lista-sorok, chipek */
  --r3: 12px;   /* kártyán belüli blokkok */
  --r4: 16px;   /* KÁRTYA-BELSŐ, lap-margó */
  --r5: 24px;   /* szakaszok közt */
  --r6: 32px;   /* plakát-blokkok körül */

  /* A KÁRTYA-BELSŐ EGY HELYEN. A Ma fülön három egymás alatti kártya 16 / 20
     / 16 px-es belső margóval élt: a középső szövege 4 px-rel beljebb
     kezdődött, mint a szomszédaié. Minden kártya innen kapja. */
  --lap-bel: var(--r4);

  /* Az érintőfelületek minimuma. Edzés közben, izzadt kézzel a 44px is kevés. */
  --erinto: 48px;

  color-scheme: dark;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  PRÓBA: KÖZÖS TÍPUSSKÁLA (2026-09-14)                                ║
   ║  Beállítások → Megjelenés → „Közös betűskála (próba)".               ║
   ║  ALAPBÓL BE. A VISSZAÚT: a kapcsoló kikapcsolása — onnantól minden   ║
   ║  pontosan úgy néz ki, ahogy a próba előtt; semmi más nem változik.    ║
   ║  VÉGLEGES ELTÁVOLÍTÁS: töröld ezt a blokkot, a `data-betu` sort az    ║
   ║  index.html head-scriptjéből, és a kapcsolót a beallitasok.js-ből.    ║
   ╚══════════════════════════════════════════════════════════════════════╝

   MIÉRT. Az audit három bajt mért:
     1. a 11 és a 13 px közt 1,18-as a lépcső — nem olvasódik két szintnek,
        mégis ez a kettő viszi a 428 deklaráció 69%-át;
     2. a látható szöveg 42%-a a legkisebb fokon ül, vagyis a `--t-torzs`
        neve „törzs", a valódi törzsméret viszont 11 px;
     3. a négy fül ugyanarra a szerepre más lépcsőt használ.

   A javítás EGY helyen történik — a tokenek értékében —, ezért minden fül,
   almenü és lap EGYÜTT mozdul; nincs 428 külön szerkesztés.

   AZ ÚJ LÉPCSŐ. 12 / 15 / 17 / 22 / 28 / 34 / 52. A 12→15 szétnyitja az
   eddig összetapadt párt; a 17 marad az iOS beviteli padlója (16) fölött;
   a 22/28/34 az iOS saját cím-fokozatai, tehát ismerős arány egy iPhone-on.
   Az arányok: 1,25 · 1,13 · 1,29 · 1,27 · 1,21 · 1,53. A 15→17 szándékosan
   szűk: az a két szerep (másodlagos és elsődleges törzs) tényleg közeli, és
   a beviteli mezők padlója nem enged lejjebb. */
:root[data-betu="uj"] {
  --t-cimke: 12px;
  --t-apro: 15px;
  --t-torzs: 17px;
  --t-cim: 22px;
  --t-nagy: 28px;
  --t-orias: 34px;
  --t-plakat: 52px;
}

* { box-sizing: border-box; }

/* KRITIKUS: a saját `display` szabályaink (pl. .kozep { display: flex }) erősebbek,
   mint a böngésző beépített `[hidden] { display: none }` szabálya — az utóbbi csak
   a UA-stíluslapban él. Enélkül a `hidden` képernyők LÁTHATATLANUL is helyet
   foglalnak, és lejjebb tolják a valódi tartalmat. Nálunk pont ez történt: a fő
   felület 1624 pixellel a képernyő alá csúszott, és teljesen üresnek tűnt az app. */
[hidden] { display: none !important; }

/* CSAK A FELOLVASÓNAK. Nem `display: none` és nem `visibility: hidden` —
   azokat a képernyőolvasó is kihagyná. Egy képpontnyi, kivágott doboz: a
   szemnek nincs ott, a felolvasónak van. Ide kerül minden olyan állapot,
   amit ma csak SZÍN közöl (a szinkron-pötty), vagy csak `title`-ben él. */
.rejtett {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--hatter);
  color: var(--szoveg);
  /* A TÖRZSMÉRET A SKÁLÁRÓL JÖN (audit 12). Eddig 16 px volt bedrótozva,
     miközben a skála 15-öt és 17-et ismer — vagyis minden méret nélküli
     szöveg (naplóbejegyzés összefoglalója, coach-listák, bekezdések) egy
     nyolcadik, sehol nem definiált fokozaton ült. */
  font: var(--t-torzs)/1.5 "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* iOS: a rugalmas görgetés ne húzza el az egész appot */
  overscroll-behavior-y: none;
  /* A GÖRGETŐSÁV ELREJTVE. Telefonon úgyis csak egy áttűnő csík, ami görgetés
     közben felvillan — vízszintes húzásnál viszont a pár képpontnyi függőleges
     elmozdulás is előhozza, és ott már zavaró. A vízszintesen görgethető
     sávok (fül-sorok, story-kártyák) eleve így vannak. */
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* A SÁV ÁLTAL ELFOGLALT MAGASSÁG — egy helyen.
   A `--also-sav-h` a sáv MÉRT magassága (`offsetHeight`), és a sáv a saját
   `padding-bottom`-jában MÁR tartalmazza a safe-area-t. Aki eddig még egyszer
   hozzáadta az `env(safe-area-inset-bottom)`-ot, az egy telefonnyi bevágással
   följebb tolta a tartalmát: a fix app-héjban ez a fül alján egy fülsávnyi
   üres területként jelent meg. A fallback a JS betöltése előtti pillanatra
   szól: 64 px sáv + ~34 px tipikus bevágás. */
:root { --sav-magas: var(--also-sav-h, 98px); }

#app { min-height: 100%; display: flex; flex-direction: column;
  position: relative; z-index: 1; }

/* ==================== APP-HÉJ =============   A héj PONTOSAN a képernyő magassága, és a görgetés a TARTALOMÉ — a
   dokumentum maga sosem görög.

   MIÉRT: iOS-en fülönként változott, hogy a lap görgethető-e (a Ma és a
   Haladás befér, az Edzés és az Étkezés nem), a böngésző pedig ehhez
   igazítja a saját sávját — így az app alja fülváltáskor más magasságba
   ugrott. Böngésző-panelben ez sosem látszik: ott nincs behúzódó URL-sáv.

   A `@supports` azért kell, mert a `100vh` iOS-en a NAGY viewportot jelenti
   (URL-sáv nélkül), tehát rosszabb lenne a mainál; ahol nincs `dvh`, ott a
   régi, működő viselkedés marad. */
@supports (height: 100dvh) {
  #app { height: 100dvh; }
  #fo { min-height: 0; }
  main {
    min-height: 0; overflow-y: auto;
    /* A rugalmas görgetés ne terjedjen a lapra: onnan indulna a chrome
       mozgása, amit épp meg akarunk állítani. */
    overscroll-behavior-y: contain;
  }
}

.teljes { min-height: 100dvh; }
.kozep { display: flex; align-items: center; justify-content: center; padding: 24px; }

/* ---------- betöltésjelző ---------- */
.jelzo {
  width: 34px; height: 34px;
  border: 3px solid var(--keret);
  border-top-color: var(--kiemelt);
  border-radius: 50%;
  animation: forog 0.8s linear infinite;
}
@keyframes forog { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .jelzo { animation-duration: 2s; }
}

/* ---------- betöltő képernyő ----------
   Fix réteg, mindig fekete: ez az app „indítóképe", és az iOS indítóképekkel
   (apple-touch-startup-image) azonos rajz, hogy a rendszer képéről az app
   saját betöltőjére váltás észrevétlen legyen. Ezért nem tokeneket használ:
   világos témában sem válthat színt. A neon-cián a sötét téma akcentusa. */
#betoltes {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #000000; color: #f4f5f7;
  transition: opacity 0.22s ease-out;
}
#betoltes.eltunik { opacity: 0; pointer-events: none; }
.betolto-tartalom {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  margin-top: -60px;
}
.betolto-fiola {
  width: 110px; height: 132px; overflow: visible;
  filter: drop-shadow(0 0 14px rgba(57, 230, 255, 0.6));
}
/* A fiola lassan telik, majd visszaáll: ugyanaz a rajz, mint az indítóképen,
   ezért a mozgás a nyugalmi (indítókép) állásból indul és oda tér vissza. */
.betolto-folyadek { animation: betolto-telik 2.4s ease-in-out infinite; }
@keyframes betolto-telik {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.betolto-szoveg { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.betolto-nev { font-family: "Unbounded", "Archivo", sans-serif; font-size: var(--t-nagy); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: #E8F7FF; }
.betolto-felirat {
  font-size: var(--t-apro); color: #39E6FF;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  animation: betolto-lelegzik 1.8s ease-in-out infinite;
}
@keyframes betolto-lelegzik { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .betolto-folyadek { animation: none; }
  .betolto-felirat { animation: none; opacity: 0.8; }
}

/* ---------- kártya, űrlap ---------- */
.kartya {
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  /* EGY KÁRTYA-BELSŐ AZ EGÉSZ APPBAN (audit 08). Ez 20 px volt, miközben a
     mellette álló összegző 16-ot, az edzés-ajánló 15/16/13-at használt — a
     középső kártya szövege 4 px-cel beljebb kezdődött a szomszédainál. */
  padding: var(--lap-bel);
  box-shadow: var(--melyseg);
}
.keskeny { width: 100%; max-width: 380px; }

.markanev { margin: 0 0 4px; font-family: "Unbounded", "Archivo", sans-serif; font-size: var(--t-nagy); font-weight: 800; letter-spacing: -0.03em; }
.halvany { color: var(--halvany); font-size: var(--t-apro); }

.mezo { display: block; margin: 18px 0; }
.mezo > span { display: block; margin-bottom: 6px; font-size: var(--t-apro); color: var(--halvany); }
.mezo input {
  width: 100%;
  min-height: var(--erinto);
  padding: 10px 12px;
  background: var(--lap-vilagos);
  border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi);
  color: var(--szoveg);
  /* 16px alatt az iOS ránagyít a mezőre fókuszáláskor — ezt nem akarjuk */
  font-size: var(--t-torzs);
}
.mezo input:focus { outline: 2px solid var(--kiemelt); outline-offset: 1px; }

.uzenet { margin: 12px 0 0; font-size: var(--t-apro); }
.uzenet.hiba { color: var(--veszely); }

/* ---------- gombok ---------- */
.gomb {
  min-height: var(--erinto);
  padding: 0 16px;
  border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi);
  background: var(--lap-vilagos);
  color: var(--szoveg);
  font-size: var(--t-torzs);
  cursor: pointer;
  /* mobil: a mi koppintásunk vezérel, nem a böngésző dupla-koppintásos nagyítása */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gomb:active { transform: scale(0.98); }
/* A felső margó egyedül álló gombnak való: az űrlap alján legyen levegő
   fölötte. Vízszintes gombsorban viszont 8 px-cel LEJJEBB és 8 px-cel
   ALACSONYABBRA nyomta a kitöltött gombot a szomszédjánál — ott ki kell venni.
   (A .gyors-sor és a .kijelolo-sor a lentebbi szabályokban nullázza.) */
.gomb.elsodleges {
  width: 100%;
  margin-top: 8px;
  background: var(--kiemelt);
  border-color: var(--kiemelt);
  color: var(--kiemelt-szoveg);
  font-weight: 600;
}
.gomb.elsodleges:disabled { opacity: 0.55; cursor: default; }
.gomb.szellem { background: transparent; border-color: transparent; }
/* Az „apró" gomb is elérje az érintőminimumot — a nap-léptetők és a
   hónapváltók ezt viselik, és pont mozgás közben kell eltalálni őket.
   (audit 10) A méret nem saját szám: --erinto, hogy a szabályt EGY helyen
   lehessen elállítani, ne három egymáshoz közeli konstansban. */
.gomb.apro { min-height: var(--erinto); min-width: var(--erinto); padding: 0 10px; font-size: var(--t-apro); }

/* ---------- fejléc ---------- */
.fejlec {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) var(--sav) 10px;
  background: color-mix(in srgb, var(--hatter) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--keret);
}
.marka { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { color: var(--kiemelt); font-size: var(--t-cim); }
.cim { margin: 0; font-size: var(--t-cim); font-weight: 600; letter-spacing: -0.01em;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A cím fülváltáskor programból kap fókuszt, hogy a felolvasó bemondja, hova
   érkeztünk — ott nem kell keret. Billentyűzetes fókusznál (:focus-visible)
   viszont igen, azt a lentebbi közös szabály adja. */
#oldalCim:focus:not(:focus-visible) { outline: none; }
.fejlec-jobb { display: flex; align-items: center; gap: 6px; }

.szinkron-jelzo {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--halvany);
  transition: background-color 0.25s;
}
.szinkron-jelzo.rendben { background: var(--siker); }
.szinkron-jelzo.varakozik { background: var(--figyelem); }
.szinkron-jelzo.hiba { background: var(--veszely); }

/* ---------- figyelmeztető sáv ---------- */
.figyelmeztetes {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 10px var(--sav) 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--figyelem) 16%, var(--lap));
  border: 1px solid color-mix(in srgb, var(--figyelem) 45%, var(--keret));
  border-radius: var(--sugar-kicsi);
  font-size: var(--t-apro);
}

/* ---------- tartalom ---------- */
/* A #fo (fejléc + main) az #app flex-oszlopának nyúló tagja — enélkül a
   main lenti flex:1-e sosem ért célba, és a képernyőnél rövidebb tartalom
   (pl. a Haladás rácsa) fölött-alatt űr maradt. */
#fo { display: flex; flex-direction: column; flex: 1; }
main {
  flex: 1;
  padding: var(--sav);
  /* Az alsó sáv magassága + safe-area, hogy semmi ne csússzon alá */
  padding-bottom: calc(var(--sav-magas) + 20px);
}

/* ---------- alsó fülsáv ---------- */
.also-sav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  /* A BEVÁGÁS-RÁHAGYÁST FUTÁSIDŐBEN DÖNTJÜK EL (`bevagasEldontes` az
     app.js-ben): az `env()` csak a bevágás MÉRETÉT mondja meg, azt nem, hogy
     a lap belelóg-e. Ahol a rendszer már kihagyta a csík helyét, ott a
     ráhagyás másodszor hagyná ki ugyanazt — attól szorulnak a fülek följebb,
     üres sávval alattuk. Az alapérték a biztonságos ág: amíg a mérés meg nem
     történt, kihagyjuk a helyet. */
  --sav-pad-alul: calc(6px + var(--sav-bevagas, env(safe-area-inset-bottom)));
  padding: 6px 6px var(--sav-pad-alul);
  background: color-mix(in srgb, var(--hatter) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--keret);
}
.ful {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: var(--erinto);
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: var(--halvany);
  font-size: var(--t-cimke);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--sugar-kicsi);
}
.ful .ikon { font-size: var(--t-cim); line-height: 1; }

/* Szekciószínek. Mind a meglévő palettából jön, ezért nem üt el az apptól:
   a kék az alap kiemelés, a sárga az edzőterem-módé, a zöld a „siker", a
   piros a „veszély" tokenje. Az inaktív ikon halványan viseli a saját színét
   — így minden fülnek van arca, de csak az aktív ordít. */
.ful[data-nezet="ma"]          { --ful-szin: var(--szoveg); }
.ful[data-nezet="edzes"]       { --ful-szin: var(--edzes-szin); }
.ful[data-nezet="etkezes"]     { --ful-szin: var(--kaloria); }
.ful[data-nezet="konyha"]      { --ful-szin: var(--narancs); }
.ful[data-nezet="statisztika"] { --ful-szin: var(--feherje); }
/* Világos témában az élénk árnyalatok fehéren olvashatatlanok (az aktív fül
   zöldje 2,0:1 kontraszt volt) — mélyebb párjuk jön a tokenekből, a sárga
   pedig kap egy sajátot. */

.ful { position: relative; }
.ful .ikon { color: color-mix(in srgb, var(--ful-szin) 50%, var(--halvany)); }
/* Az aktív fül SZÍNT vált (a hátterét a csúszka viszi) — az átmenet miatt
   a szín is átúszik, nem ugrik. */
.ful, .ful .ikon { transition: color 0.28s ease; }
.ful.aktiv { color: var(--ful-szin); }
.ful.aktiv .ikon { color: var(--ful-szin); }

/* A FÓKUSZ-CSÚSZKA: egyetlen pirula, ami a fülek közt vándorol, és közben a
   célfül színét veszi fel. A pozíciót és a színt a body szekció-jelzője adja,
   ezért nincs hozzá JS — a `nezetValt` úgyis beállítja a `data-szekcio`-t.
   A `translateX` egysége a saját szélessége: egy fül + a 2 px-es rács-köz. */
.ful-csuszka {
  position: absolute; z-index: 0;
  /* A csúszka PONTOSAN a fülek dobozát fedi: ugyanabból a változóból, amiből
     a sáv paddingja — külön számolva elcsúszott, amint a padding változott. */
  top: 6px; bottom: var(--sav-pad-alul); left: 6px;
  width: calc((100% - 12px - 8px) / 5);
  transform: translateX(calc(var(--ful-i, 0) * (100% + 2px)));
  border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--csuszka-szin, var(--szoveg)) 13%, transparent);
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.28, 1),
    background-color 0.34s ease;
  pointer-events: none;
}
/* A vékony sapka a csúszkán ül, tehát vele együtt csúszik. */
.ful-csuszka::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--csuszka-szin, var(--szoveg));
  transition: background-color 0.34s ease;
}
body[data-szekcio="ma"]          .also-sav { --ful-i: 0; --csuszka-szin: var(--szoveg); }
body[data-szekcio="edzes"]       .also-sav { --ful-i: 1; --csuszka-szin: var(--edzes-szin); }
body[data-szekcio="etkezes"]     .also-sav { --ful-i: 2; --csuszka-szin: var(--kaloria); }
body[data-szekcio="konyha"]      .also-sav { --ful-i: 3; --csuszka-szin: var(--narancs); }
body[data-szekcio="statisztika"] .also-sav { --ful-i: 4; --csuszka-szin: var(--feherje); }
@media (prefers-reduced-motion: reduce) {
  .ful-csuszka, .ful-csuszka::before, .ful, .ful .ikon { transition: none; }
}
/* A .ful kikapcsolja a böngésző koppintás-villanását, de eddig nem tett a
   helyére semmit: a fülváltás fél másodpercig úgy nézett ki, mintha nem
   talált volna a koppintás. */
.ful:active { background: color-mix(in srgb, var(--szoveg) 12%, transparent);
  color: var(--szoveg); }
.ful:active .ikon { color: var(--szoveg); }
/* A sapka a csúszkára költözött (feljebb) — így az is vele együtt vándorol. */

/* A fejléc rombusza együtt vált a füllel. */
body[data-szekcio="ma"]          .fejlec .logo { color: var(--szoveg); }
body[data-szekcio="edzes"]       .fejlec .logo { color: var(--edzes-szin); }
body[data-szekcio="etkezes"]     .fejlec .logo { color: var(--kaloria); }
body[data-szekcio="konyha"]      .fejlec .logo { color: var(--narancs); }
body[data-szekcio="statisztika"] .fejlec .logo { color: var(--feherje); }

/* ---------- verziójelző ---------- */
.verzio-jelzo {
  position: fixed;
  left: 10px;
  bottom: calc(6px + env(safe-area-inset-bottom));
  z-index: 5;
  font-size: var(--t-cimke);
  color: color-mix(in srgb, var(--halvany) 55%, transparent);
  pointer-events: none;
}

/* ================================================================== EDZÉS ==
   Edzőterem-használatra tervezve: nagy érintőfelületek, magas kontraszt,
   és a fontos szám (múltkori súly) mindig látszik gépelés nélkül is. */

.lazito { margin-bottom: 14px; }
.gomb.auto { width: auto; margin-top: 0; }

/* ---------- futó edzés ---------- */
/* A név zsugorodhat, a két gomb nem — a minmax(0,…) helyett itt a min-width: 0
   teszi ugyanezt flexben: enélkül a hosszú gyakorlatnév kitolná a Befejezést. */

/* Sprite-ikon, nem „←" karakter: az a .gomb.szellem saját 20 px-es
   betűméretével optikailag nagyobb és nehezebb volt, mint a mellette álló,
   14 px-es „Befejezés" — a kettő nem tartozott egy családba. */
.edzes-sugo { margin: -6px 0 14px; font-size: var(--t-apro); line-height: 1.45; }

.gyak-blokk {
  margin-bottom: 10px;
  background: var(--lap); border: 1px solid var(--keret); border-radius: var(--sugar);
  overflow: hidden;
}
.gyak-blokk.kesz { border-color: color-mix(in srgb, var(--siker) 45%, var(--keret)); }

.gyak-fej {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 64px; padding: 12px 14px;
  background: transparent; border: none; color: var(--szoveg); text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gyak-fo { display: grid; gap: 2px; min-width: 0; }
.gyak-nev { font-size: var(--t-torzs); font-weight: 600; }
.gyak-cel { font-size: var(--t-apro); color: var(--halvany); }
.gyak-allas {
  flex: none; min-width: 46px; padding: 5px 9px;
  background: var(--lap-vilagos); border-radius: var(--sugar-pirula);
  font-size: var(--t-apro); font-variant-numeric: tabular-nums; text-align: center;
}
.gyak-blokk.kesz .gyak-allas { background: color-mix(in srgb, var(--siker) 28%, var(--lap-vilagos)); }

.gyak-tartalom { padding: 0 10px 14px; border-top: 1px solid var(--keret); }

/* A KÉSZ kártya nyugalmi állapota egy sor: lime pipa · név · N/N · összefoglaló ·
   jobbra az emelés chipje. Koppintásra ugyanúgy nyílik, mint a többi. */
.gyak-blokk.kesz:not(.nyitva) .gyak-fej { min-height: 56px; padding: 10px 14px; justify-content: flex-start; }
.gyak-blokk.kesz:not(.nyitva) .gyak-fo { flex: 1; }
.gyak-blokk.kesz:not(.nyitva) .prog-chip { margin-left: auto; }
.gyak-pipa { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--siker); color: #05210f; font-size: var(--t-apro); font-weight: 900; }
.gyak-blokk.kesz:not(.nyitva) .gyak-nev { font-size: var(--t-apro); }
.gyak-blokk.kesz:not(.nyitva) .gyak-cel { font-size: var(--t-cimke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Az automatikusan továbbnyitott kártya: „KÖVETKEZIK" cián címke, és alulról úszik be. */
.kov-cimke { font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kiemelt); }
.gyak-blokk.kovetkezik { animation: kartyaFel 0.3s ease both; }
@keyframes kartyaFel { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gyak-blokk.kovetkezik { animation: none; } }

/* ---------- változat-választó ---------- */
.valtozat-sor {
  display: flex; gap: 6px; margin: 12px 0; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.valtozat-sor::-webkit-scrollbar { display: none; }
.valtozat {
  /* 38 px volt. A chipek szorosan, 6 px-es közökkel állnak, ezért itt sem a
     ::after a megoldás, hanem a magasság — a sor ritmusa nem sérül tőle. */
  flex: none; min-height: 44px; padding: 0 12px;
  background: var(--lap-vilagos); border: 1px solid var(--keret); border-radius: var(--sugar-pirula);
  color: var(--halvany); font-size: var(--t-apro); white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
}
.valtozat.aktiv {
  background: color-mix(in srgb, var(--kiemelt) 22%, var(--lap-vilagos));
  border-color: var(--kiemelt); color: var(--szoveg);
}

/* NEM TILTOTT, CSAK NEM FÉR BELE. Az ütem-választón az az ütem, amihez a
   mért energiaigény kevés: a 25%-os deficit-plafon miatt a cél úgyis
   lejjebb állna. Szándékosan NEM `disabled`: beállíthatod, csak tudd, mi
   lesz belőle — a felirat kiírja a szükséges igényt. Halványabb keret, de
   a szöveg olvasható marad. */
.valtozat.nem-fer { border-style: dashed; opacity: 0.72; }
.valtozat.nem-fer.aktiv { opacity: 1; }

/* ---------- .set-mezo — közös szám-mező ----------
   NEM a futó edzésé (az már a sorozat-táblát használja), de él tovább a
   tervszerkesztőben, a méreteknél, a receptszerkesztőben és az étkezésnél.
   Ezért maradt itt, amikor a set-sorok helyére a tábla került. */
.set-mezo { display: flex; align-items: center; gap: 3px; }
.set-mezo input {
  width: 52px; min-height: 42px; padding: 4px 4px;
  background: var(--hatter); border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  color: var(--szoveg); text-align: center;
  /* 16px alatt az iOS ránagyít a mezőre — ezt edzés közben különösen zavaró */
  font-size: var(--t-torzs); font-variant-numeric: tabular-nums;
}
.set-mezo input:focus { outline: 2px solid var(--kiemelt); outline-offset: 1px; }
.set-mezo > span { font-size: var(--t-cimke); color: var(--halvany); }
.set-mezo.ures { font-size: var(--t-cimke); color: var(--halvany); }
/* A szám-mezők nyilait elrejtjük: mobilon csak helyet foglalnak. */
.set-mezo input::-webkit-outer-spin-button,
.set-mezo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.set-mezo input[type="number"] { -moz-appearance: textfield; }

/* ---------- AZ EDZÉS FÜL: HERO, MÓDVÁLTÓ, NAPSOROK, FOLYTATÁS (Canvas-4 #3a–#3e) ----------
   Két zóna, divider nélkül: a hero KÁRTYA (mód-színű keret, 26 px-es név) és
   alatta a többi nap SIMA SOROKBAN. Anton és háttérszám nincs többé. */
.hero { --m: var(--narancs); position: relative; padding: 16px; border-radius: var(--sugar-nagy);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--m) 14%, transparent), transparent 60%), var(--lap);
  border: 1px solid color-mix(in srgb, var(--m) 45%, transparent); box-shadow: var(--melyseg);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; margin-bottom: 12px; }
.hero > * { min-width: 0; }
.hero.laza { --m: var(--siker); }
.hero-fej { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cimke { font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--halvany); }
.kicsi { font-size: var(--t-cimke); }
.hero-nev { font-size: var(--t-nagy); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.hero-nev span { color: var(--halvany); font-weight: 500; }
.gyl { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-apro); color: var(--halvany); }
.gyl b { color: var(--szoveg); font-weight: 600; font-variant-numeric: tabular-nums; }
.gyl-fel { color: var(--m); font-weight: 700; }
.hero-elonezet { display: flex; gap: 6px; align-items: baseline; font-size: var(--t-cimke); color: var(--halvany); }
.hero-elonezet > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-tobbi { flex: none; color: var(--szoveg); font-weight: 600; }
.cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--erinto); width: 100%;
  border-radius: var(--sugar-kicsi); background: var(--m); color: #1c0d02; border: 0;
  font: 600 var(--t-torzs) "Archivo", sans-serif; cursor: pointer; touch-action: manipulation; }
.hero.laza .cta { color: #05210f; }
.cta:active { filter: brightness(0.92); }
.hero-gombok { display: flex; gap: 10px; align-items: center; }
.hero-gombok .apro-g { min-height: 48px; display: inline-flex; align-items: center; gap: 6px; }
.hero-gombok .cta, .hero-gombok .gomb.elsodleges { flex: 1; margin-top: 0; }
.apro-g.veszely { color: var(--veszely); border-color: color-mix(in srgb, var(--veszely) 40%, transparent); }
/* A kibontott másik nap gyakorlat-listája: 38 px-es sorok hajszálvonallal. */
.hero-gyak { display: grid; border-top: 1px solid var(--keret); margin-top: 2px; }
.hero-gyak-sor { display: flex; justify-content: space-between; gap: 10px; min-height: 38px; align-items: center;
  font-size: var(--t-apro); }
.hero-gyak-sor + .hero-gyak-sor { border-top: 1px solid var(--keret); }
.hero-gyak-sor > span:first-child { min-width: 0; }
/* A piramis-sémák célszövege hosszú („12×50 · 10×50 · 8×50 kg"): a sor ne törjön, a szám vége vesszen el. */
.hero-gyak-sor .szam { color: var(--halvany); white-space: nowrap; max-width: 62%; overflow: hidden; text-overflow: ellipsis; flex: none; }
/* Módváltó a hero sarkában — ott, amit befolyásol. 30 px magas, de 80+ px széles. */
.modv { display: inline-flex; padding: 2px; border-radius: var(--sugar-pirula); background: var(--lap-vilagos); border: 1px solid var(--keret); flex: none; }
/* 30 px volt: a képernyő legfontosabb bináris döntése viselte a legkisebb
   célfelületet. A két pirula EGYMÁS MELLETT áll, ezért itt a látható méret
   nő — a ::after-os kiterjesztés a szomszédjába lógna. */
.modv button { min-height: 44px; padding: 0 11px; border-radius: var(--sugar-pirula); border: 0; background: transparent;
  color: var(--halvany); font: 700 var(--t-cimke) "Archivo", sans-serif; letter-spacing: 0.04em; cursor: pointer; touch-action: manipulation; }
.modv button.akt { background: color-mix(in srgb, var(--m) 22%, transparent); color: var(--m); }
/* Másik nap: nincs kártya — ez különbözteti meg a herótól. */
.nl-blokk { margin-bottom: 14px; }
.nl-fej { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 4px; }
.nl-fej .halvany { font-size: var(--t-cimke); }
.nl { display: grid; }
.nl-sor-tarto { display: grid; grid-template-columns: minmax(0, 1fr) var(--erinto); align-items: center;
  border-top: 1px solid var(--keret); }
.nl-sor-tarto:first-of-type { border-top: 0; }
.nl-sor-tarto.halk { opacity: 0.7; }
.nl-sor { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 52px; padding: 0 4px 0 6px; border: 0; background: transparent;
  color: var(--szoveg); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nl-sor .n { font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; font-size: var(--t-apro); color: var(--halvany); }
.nl-sor .nev { font-size: var(--t-torzs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-sor .al { font-size: var(--t-apro); color: var(--halvany); white-space: nowrap; }
.nl-sor .al .fel { color: var(--siker); }
/* A szerkesztő ✎ ÖNÁLLÓ gomb a sor mellett (nem benne): gomb a gombban
   érvénytelen, és a billentyűzet sem érte el. Teljes érintőmagasság. */
.nl-sor-tarto > .sz { width: var(--erinto); min-height: var(--erinto); display: grid; place-items: center;
  border: 0; background: transparent; color: var(--halvany); opacity: 0.7; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nl-sor-tarto > .sz:active { color: var(--kiemelt); opacity: 1; }
/* Az összecsukott hero (kiválasztás alatt): egy sor kártya-kerettel. */
.nl-sor.hero-osszecsukva { grid-template-columns: auto minmax(0, 1fr) auto; border: 1px solid var(--keret); border-radius: var(--sugar);
  padding: 0 12px; background: var(--lap); margin-bottom: 12px; }
.nl-sor.hero-osszecsukva .al.vissza { color: var(--kiemelt); }
/* Folytatható edzés: a cián kártya a hero helyén. */
.folyt { padding: 14px 16px; border-radius: var(--sugar-nagy); margin-bottom: 12px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--kiemelt) 16%, transparent), transparent 60%), var(--lap);
  border: 1px solid color-mix(in srgb, var(--kiemelt) 50%, transparent); box-shadow: var(--melyseg); display: grid; gap: 10px; }
.folyt > * { min-width: 0; }
.folyt .sin-sav { height: 4px; }
.folyt-cimke { color: var(--kiemelt); display: flex; align-items: center; gap: 6px; }
.led-kek { width: 7px; height: 7px; border-radius: 50%; background: var(--kiemelt); box-shadow: 0 0 6px var(--kiemelt); }

/* ---------- KORÁBBI EDZÉSEK — EGY KÁRTYA (Canvas-4 #3a/#3c/#3d) ---------- */
.tort-kartya { margin-top: 2px; }
.tort-fej { display: flex; justify-content: space-between; align-items: baseline; }
.tort-fej .szam { color: var(--szoveg); font-weight: 900; font-family: "Nunito", "Archivo", sans-serif; }
.tort-bevezeto { margin: 8px 0 0; font-size: var(--t-apro); color: var(--halvany); line-height: 1.5; }
.tort-csempek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tort-csempek.ketto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tort-csempek .csempe { padding: 10px 12px; }
.tort-csempek .csempe-cim { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.tort-csempek .csempe-ertek { font-size: var(--t-cim); line-height: 1.2; }
/* Ritmus-szalag: 12 oszlop = 12 hét, a magasság a heti tonnázs, az aktuális hét teli. */
.szalag { display: flex; gap: 4px; align-items: flex-end; height: 34px; margin-top: 12px; }
.szalag i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--edzes-szin) 55%, transparent); height: var(--h, 40%); }
.szalag i.ures { background: color-mix(in srgb, var(--szoveg) 8%, transparent); height: 4px; }
.szalag i.most { background: var(--edzes-szin); }
.szalag i.most.ures { background: color-mix(in srgb, var(--edzes-szin) 35%, transparent); }
.szalag.lapos { height: 14px; }
.szalag-felirat { display: flex; justify-content: space-between; font-size: 10px; color: var(--halvany); margin-top: 4px; }
.csira-sor { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.csira-sor .szalag { flex: none; width: 70px; margin-top: 0; }
.csira-sor p { margin: 0; font-size: var(--t-cimke); color: var(--halvany); line-height: 1.45; }
.tort-lista { margin-top: 12px; }
.hsor { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 52px; padding: 0 4px; border-top: 1px solid var(--keret); background: var(--lap); }
.huzhato:first-child .hsor { border-top: 0; }
.hsor .pt { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.hsor.kardio .pt { background: none; border: 2px solid var(--c); opacity: 0.7; }
.hsor .pt.friss { box-shadow: 0 0 7px var(--c); }
.hsor-szoveg { min-width: 0; }
.hsor .nev { font-size: var(--t-apro); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsor .al { font-size: var(--t-apro); color: var(--halvany); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsor .v { font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; font-size: var(--t-torzs);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; white-space: nowrap; }
.hsor .v.halk { font-family: "Archivo", sans-serif; font-weight: 600; font-size: var(--t-cimke); color: var(--halvany); }
.hsor .v small { display: block; font: 600 var(--t-cimke) "Archivo", sans-serif; color: var(--halvany); }
.hsor .v small.fel { color: var(--siker); }
.hsor[data-edzesreszlet] { cursor: pointer; }
.hsor[data-edzesreszlet]:active .nev { color: var(--kiemelt); }
.tort-archivum { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 40px; }

/* ---------- A FUTÓ EDZÉS FEJLÉCE ÉS A HALADÁS-SÍN ----------
   Egy sor: ‹ · név + eltelt idő · mód · Befejezés. Archivo 600, nem plakát —
   a plakátbetű a napkártyáé marad. Alatta a sín: egy szegmens = egy gyakorlat,
   a töltés a kész sorozatok aránya, az aktuális cián. Ez mondja meg, hol
   tartasz a hét gyakorlatból — eddig csak „N sorozat rögzítve" volt. */
.efej { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px;
  border-bottom: 1px solid var(--keret); }
.efej-cim { flex: 1; min-width: 0; }
.efej-cim b { display: block; font-size: var(--t-torzs); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.efej-cim span { display: flex; gap: 6px; align-items: center; font-size: var(--t-apro);
  color: var(--halvany); white-space: nowrap; }
.efej-cim em { font-style: normal; color: var(--szoveg); }
/* 44 px-es szellem ikongomb: a nyíl kicsi, a célfelület nem. */
.ikg { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; color: var(--szoveg);
  cursor: pointer; touch-action: manipulation; }
.ikg:active { color: var(--kiemelt); }
/* Apró szellem gomb, pirula: másodlagos műveletek (Befejezés, Kihagy, Ugrás). */
.apro-g { flex: none; min-height: 36px; padding: 0 12px; border-radius: var(--sugar-pirula);
  border: 1px solid var(--keret); background: transparent; color: var(--halvany);
  font: 600 var(--t-apro) "Archivo", sans-serif; cursor: pointer; touch-action: manipulation; }
.apro-g:active { color: var(--szoveg); }
.sin { padding-top: 8px; margin-bottom: 12px; display: grid; gap: 6px; }
.sin-sav { display: flex; gap: 3px; height: 4px; }
.sin-sav i { flex: 1; border-radius: 2px; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--szoveg) 10%, transparent); }
.sin-sav i::after { content: ""; position: absolute; inset: 0; width: var(--f, 0%);
  background: var(--edzes-szin); transition: width 0.3s ease; }
.sin-sav i.most::after { background: var(--kiemelt); }
.sin-sav i.most { outline: 1px solid color-mix(in srgb, var(--kiemelt) 50%, transparent);
  outline-offset: 1px; }
.sin-cap { display: flex; justify-content: space-between; font-size: var(--t-apro);
  color: var(--halvany); letter-spacing: 0.02em; }
.sin-cap b { color: var(--szoveg); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sin-sav i::after { transition: none; } }

/* ---------- KÁRTYA-FEJ: meta-sor + progresszió-chip, és a trend-sor ---------- */
.gy-fej-sor { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 2px; }
.gy-meta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: var(--t-apro); color: var(--halvany); }
.gy-meta b { color: var(--szoveg); font-weight: 600; font-variant-numeric: tabular-nums; }
/* A kártyafej egyetlen ÁLLÍTHATÓ adata: a súlylépcső. A többi meta csak közöl,
   ez viszont koppintható — a szaggatott alsó vonal ezt jelzi, hogy ne kelljen
   kitalálni. A forrás (mért/kézi/terv) halkan mögötte áll. */
.meta-g { display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 0; min-height: 28px; border: 0; background: none; cursor: pointer;
  touch-action: manipulation; font: inherit; color: var(--halvany);
  border-bottom: 1px dashed var(--keret); }
.meta-g b { color: var(--szoveg); font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-g small { font-size: var(--t-cimke); color: var(--halvany); }
/* A chip a régi üzenetsáv tömörítve: a lényeg elöl, az indoklás koppintásra. */
.prog-chip { flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; min-height: 28px; border: 0; border-radius: var(--sugar-pirula);
  font: 700 var(--t-cimke) "Archivo", sans-serif; letter-spacing: 0.02em;
  cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.prog-chip.fel { background: color-mix(in srgb, var(--siker) 16%, transparent); color: var(--siker); }
.prog-chip.info { background: color-mix(in srgb, var(--szoveg) 8%, transparent); color: var(--halvany); }
.prog-chip.figyelem { background: color-mix(in srgb, var(--figyelem) 16%, transparent); color: var(--figyelem); }
.prog-chip:disabled { opacity: 0.6; cursor: default; }
.prog-magyarazat { margin: 4px 0 2px; font-size: var(--t-apro); line-height: 1.45; }
/* NEHEZÍTÉS-AJÁNLAT: a chip mögött nem indoklás, hanem választás. Teljes
   szélességű, 44 px-nél magasabb gombok — izzadt kézzel, két sorozat között
   ezekre kell célozni, és egyik sem hat addig, amíg meg nem nyomod. */
.prog-opciok { margin: 4px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.prog-opciok .prog-magyarazat { margin: 0 0 2px; }
.prog-opcio { display: flex; align-items: baseline; gap: 8px; width: 100%;
  min-height: 46px; padding: 8px 12px; text-align: left; cursor: pointer;
  touch-action: manipulation; border: 1px solid color-mix(in srgb, var(--siker) 40%, var(--keret));
  border-radius: var(--sugar-kicsi); background: color-mix(in srgb, var(--siker) 8%, transparent); }
.prog-opcio b { flex: none; font: 700 var(--t-cimke) "Archivo", sans-serif;
  letter-spacing: 0.02em; color: var(--siker); }
.prog-opcio span { flex: 1; min-width: 0; font-size: var(--t-apro);
  color: var(--szoveg); font-variant-numeric: tabular-nums; }
.prog-opcio.halk { border-color: var(--keret); background: transparent; }
.prog-opcio.halk b { color: var(--halvany); }
.prog-opcio.halk span { color: var(--halvany); }
.prog-opcio:disabled { opacity: 0.6; cursor: default; }
/* Trend-sor: az utolsó hat alkalom csúcssúlya. Ez az „↑ 3. sor" képben. */
/* FLEX, nem grid: az SVG „width=100%"-a grid-sávban vagy 15 px-re esik össze,
   vagy a 300 px-es alap-méretére dagad és túlcsordul. Flexben a maradék
   helyet kapja — mérve: 157 px a 316-ból, pont amennyi a címke és az érték
   mellett jut. */
.trend-sor { display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 8px 12px; border-radius: var(--sugar-kicsi);
  background: var(--hatter); border: 1px solid var(--keret); }
.trend-cimke, .trend-ert { flex: none; }
.trend-cimke { font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--halvany); }
.trend-sor svg { flex: 1 1 0; min-width: 0; display: block; height: 34px; }
.trend-pont { fill: var(--siker); }
.trend-ert { font-size: var(--t-torzs); white-space: nowrap; color: var(--siker); }
.trend-ert small { font: 700 10px "Archivo", sans-serif; color: var(--halvany); margin-left: 3px; }
.trend-sor.all .trend-ert, .trend-sor.all .trend-pont { color: var(--halvany); fill: var(--halvany); }
.trend-sor.le .trend-ert, .trend-sor.le .trend-pont { color: var(--figyelem); fill: var(--figyelem); }

/* ---------- EDZÉS-ÁTTEKINTÉS ----------
   A sínre koppintva. Teljes lista pötty-állapottal, három csempe, és itt az
   elsődleges „Edzés befejezése". A sín maga gomb — 4 px-es csík + felirat,
   ezért párnával éri el a 44 px-es célfelületet. */
button.sin { width: 100%; background: transparent; border: 0; color: inherit; font: inherit;
  text-align: inherit; cursor: pointer; touch-action: manipulation; padding: 8px 0 4px;
  min-height: 44px; -webkit-tap-highlight-color: transparent; }
button.sin:active .sin-cap { color: var(--szoveg); }
.apro-g.kiemelt { color: var(--kiemelt); border-color: color-mix(in srgb, var(--kiemelt) 45%, transparent); }
.att-csempek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.att-csempek .csempe { padding: 10px 12px; }
.att-csempek .csempe-cim { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.att-csempek .csempe-ertek { font-size: var(--t-cim); line-height: 1.2; }
.gy-lista { display: grid; gap: 4px; margin-top: 2px; }
.gy-sor { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 52px; padding: 0 10px; border-radius: var(--sugar-kicsi); border: 1px solid transparent;
  background: transparent; color: var(--szoveg); font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gy-sor.most { background: color-mix(in srgb, var(--kiemelt) 9%, var(--lap-vilagos));
  border-color: color-mix(in srgb, var(--kiemelt) 45%, transparent); }
.gy-sor.kesz .gy-nev { color: color-mix(in srgb, var(--szoveg) 70%, transparent); }
.gy-sor.kov { opacity: 0.6; }
.gy-n { font-size: var(--t-apro); font-weight: 700; color: var(--halvany); font-variant-numeric: tabular-nums; }
.gy-sor.most .gy-n { color: var(--kiemelt); }
.gy-szoveg { min-width: 0; display: grid; gap: 1px; }
.gy-nev { font-size: var(--t-apro); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gy-al { font-size: var(--t-apro); color: var(--halvany); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gy-fel { color: var(--siker); font-weight: 700; }
.pontok { display: flex; gap: 4px; flex: none; }
.pontok i { width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--szoveg) 25%, transparent); }
.pontok i.k { background: var(--siker); border-color: var(--siker); }
.pontok i.m { border-color: var(--kiemelt); background: color-mix(in srgb, var(--kiemelt) 30%, transparent); }

/* ---------- SOROZAT-TÁBLA ----------
   A régi sorozat-sor KÉT EMELETES volt (fej + értékek), teremmódban 58 px-es
   gombokkal: négy sorozat ~520 pixelt kért, egyszerre két és fél látszott.
   Ez egysoros tábla: # · előző · kg · ism · ✓, soronként --sor-h (52 px alapon)
   — négy sorozat 220 pixel, mind a négy egyszerre látszik.

   Az „ELŐZŐ" oszlop a viszonyítás: enélkül a mai szám magában áll. */
.st { display: grid; gap: 4px; margin-top: 10px; }
.st-fej, .sr {
  display: grid; grid-template-columns: 22px 62px minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: 8px; align-items: center;
}
.st-fej {
  padding: 0 8px 2px; font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--halvany);
}
.st-fej span:nth-child(3), .st-fej span:nth-child(4) { text-align: center; }
.sr {
  min-height: var(--sor-h, 52px); padding: 0 8px;
  border-radius: var(--sugar-kicsi); border: 1px solid transparent; position: relative;
}
.sr-n { font-size: var(--n-fs, 14px); color: var(--halvany); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.sr-amrap { display: block; font-style: normal; font-size: 9px; font-weight: 800;
  letter-spacing: 0.06em; color: var(--figyelem); }
.sr-e { font-size: var(--e-fs, 12px); color: var(--halvany);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-v {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--v-fs, 20px); font-variant-numeric: tabular-nums;
  color: var(--szoveg); line-height: 1; background: transparent; border: 0; padding: 0;
  min-height: calc(var(--sor-h, 52px) - 8px);
}
button.sr-v { cursor: pointer; touch-action: manipulation; }
.sr-v small {
  font: 700 var(--e-fs, 12px) "Archivo", sans-serif; color: var(--halvany);
  letter-spacing: 0.02em; align-self: flex-end; padding-bottom: 1px;
}
.sr-testsuly { font-family: "Archivo", sans-serif; font-weight: 600;
  font-size: var(--e-fs, 12px); color: var(--halvany); }
.sr-ido2 { grid-column: span 2; display: flex; justify-content: center; }
.sr-p {
  width: 36px; height: 36px; margin-left: auto; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--szoveg) 22%, transparent);
  color: transparent; background: transparent;
  font-size: var(--t-torzs); font-weight: 800;
  cursor: pointer; touch-action: manipulation;
}
/* kész */
.sr.kesz { background: color-mix(in srgb, var(--siker) 7%, transparent); }
.sr.kesz .sr-v { color: color-mix(in srgb, var(--szoveg) 72%, transparent); }
.sr.kesz .sr-p {
  background: var(--siker); border-color: var(--siker); color: #05210f;
  animation: pipaPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes pipaPop { 0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
/* aktuális — egy sorban csak egy ilyen van */
.sr.most {
  background: color-mix(in srgb, var(--kiemelt) 9%, var(--lap-vilagos));
  border-color: color-mix(in srgb, var(--kiemelt) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kiemelt) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--kiemelt) 16%, transparent);
}
.sr.most::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--kiemelt);
}
.sr.most .sr-n { color: var(--kiemelt); }
.sr.most .sr-v {
  background: var(--lap-emelt); border: 1px solid var(--keret); border-radius: 8px;
  min-height: calc(var(--sor-h, 52px) - 12px);
}
.sr.most .sr-p {
  width: 40px; height: 40px; background: var(--kiemelt);
  border-color: var(--kiemelt); color: var(--kiemelt-szoveg);
  /* „Várom, hogy kipipáld": 45 %-os cián gyűrű kifelé elhal, 2,4 s. */
  animation: varakozik 2.4s ease-in-out infinite;
}
@keyframes varakozik {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kiemelt) 45%, transparent); opacity: 1; }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--kiemelt) 0%, transparent); opacity: 0.72; }
}
/* Pihenő alatt nem vár — akkor a sor maga „vár", és a pipa halk. */
body.piheno-fut .sr.most .sr-p { animation: none; }
/* következő */
.sr.kov { opacity: 0.55; }
.sr.kov .sr-v { font-weight: 700; }
.sr.kov .sr-p { border-style: dashed; }
/* PIHENŐ ALATT a soron következő nem „aktív", hanem „vár": a cián keret és a
   gombok elhalkulnak (kovm), amíg az időzítő fut — a rajz #1c állapota. Az
   időzítő végén a body.piheno-fut lekerül, és a sor magától „most" lesz. */
body.piheno-fut .sr.most { background: color-mix(in srgb, var(--szoveg) 3%, transparent);
  border-color: var(--keret); box-shadow: none; }
body.piheno-fut .sr.most::before { background: color-mix(in srgb, var(--kiemelt) 45%, transparent); }
body.piheno-fut .sr.most .sr-n { color: var(--halvany); }
body.piheno-fut .sr.most .sr-p { background: transparent; border-color: color-mix(in srgb, var(--kiemelt) 50%, transparent); color: transparent; }
/* kihagyott: nem tény, csak szándék — áthúzva, halkan */
.sr.kihagyva { opacity: 0.4; }
.sr.kihagyva .sr-v { text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .sr.kesz .sr-p, .sr.most .sr-p { animation: none; } }

/* ---------- AZ EDZÉS-DOKK ----------
   Egy hüvelykzóna a fülsáv fölött. Korábban két külön felület volt: a lap
   alján a „sorozat kész" gomb, fölötte egy önálló pihenő-sáv. Kettejük
   együtt elvették a képernyő alsó harmadát, és a hüvelyk mindkettőt csak
   nyújtózva érte el. Most EGY felület, ami ÁTALAKUL. */
.edokk {
  position: fixed; left: 0; right: 0; bottom: var(--sav-magas); z-index: 25;
  display: grid; gap: 10px;
  padding: 10px var(--sav) 14px;
  background: var(--hatter); border-top: 1px solid var(--keret);
}
.edokk-sor { display: flex; gap: 10px; align-items: center; }
.edokk-alap { display: flex; gap: 10px; align-items: center; }
.edokk-alap .gomb { margin-top: 0; }
.edokk-alap .gomb.elsodleges { flex: 1; }
.edokk-alap .gomb.szellem { flex: none; min-height: 48px; }

/* A −15 / +15 pirulák. 44 px a minimum, mert izzadt kézzel nyomod. */
.pir {
  /* A komment eddig is 44-et mondott, a szabály mégis 40-et adott. Most az
     --erinto, mert ezt izzadt kézzel, edzés közben kell eltalálni. */
  min-width: var(--erinto); height: var(--erinto); padding: 0 12px;
  border-radius: var(--sugar-pirula); border: 1px solid var(--keret);
  background: var(--lap-vilagos); color: var(--szoveg);
  font: 700 var(--t-apro) "Archivo", sans-serif;
  cursor: pointer; touch-action: manipulation;
}
.pir:active { transform: scale(0.95); }

/* AZ IDŐZÍTŐ SZÍNE FOLYAMATOSAN ÚSZIK.
   A --p az eltelt arány, a JS írja másodpercenként. A szín a rendszer két
   végpontja között kever oklch-ban: --siker (van még idő) → --veszely
   (lejárt). A köztes árnyalatok SZÁMÍTOTT színek, nem új tokenek — ezért
   nem kell hozzájuk sem sárga, sem narancs felvenni a palettába. */
.edokk.ido { --p: 0%; --tsz: color-mix(in oklch, var(--siker), var(--veszely) var(--p)); }
/* A dolgozó szakasz (plank) nem pihenő: ott nem úszik a szín, fix borostyán. */
.edokk.munka { --tsz: var(--figyelem); }
.edokk-ido { display: grid; gap: 8px; }
.edokk-ido-fej { align-items: flex-end; }
.ido-fo { display: grid; gap: 2px; min-width: 0; }
.ido-cimke {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--halvany);
}
.ido-szam {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-variant-numeric: tabular-nums; font-size: var(--t-orias); line-height: 1;
  color: var(--tsz); text-shadow: 0 0 14px color-mix(in srgb, var(--tsz) 40%, transparent);
  transition: color 0.8s linear, font-size 0.3s ease;
}
.ido-info {
  margin-left: auto; display: grid; gap: 2px; text-align: right; min-width: 0;
  font-size: var(--t-cimke); color: var(--szoveg);
}
.ido-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ido-info b { font-weight: 700; }
/* A CSÍK MAGA A GOMB (2026-09-14). A régi „Ugrás →" gomb helyett az egész
   időzítő-panel léptet tovább; a csík azért valódi `<button>`, hogy a
   billentyűzetnek és a képernyőolvasónak is maradjon megnevezett vezérlő. */
.ido-csik {
  display: block; width: 100%; padding: 0; border: 0;
  height: 3px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--szoveg) 10%, transparent);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ido-csik > i { display: block; height: 100%; width: 100%; background: var(--tsz);
  transition: width 0.25s linear, background 0.8s linear; }
/* AZ UTOLSÓ 10 MÁSODPERCBEN A CSÍK MEGNŐ — ekkor akarsz rákoppintani, hogy
   továbbmenj, és ilyenkor nem a telefont nézed, hanem a súlyt. 28 px-es sávot
   vakon is eltalál a hüvelyk; a panel bármely pontja amúgy is léptet, ez a
   látható meghívás rá. */
.edokk.vege .ido-csik { height: 28px; border-radius: var(--sugar-kicsi); }
.edokk.vege .ido-csik:active { transform: scale(0.99); }
.led {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tsz); box-shadow: 0 0 6px var(--tsz);
  animation: ledPisla 1s steps(1, end) infinite;
}
@keyframes ledPisla { 50% { opacity: 0.25; } }
/* Az utolsó 10 másodperc: a szám plakátméretre nő és lüktet — a szemed
   sarkából is látszik, nem kell a telefonra fókuszálni. */
.edokk.vege .ido-szam { font-size: var(--t-plakat); animation: idoLukt 1s ease-in-out infinite; }
.edokk.vege .ido-cimke { color: var(--tsz); }
.edokk.vege .led { animation-duration: 0.5s; }
@keyframes idoLukt { 50% { transform: scale(1.04); } }
.edokk.lejart { animation: piheno-villog 0.6s ease-in-out 2; }
/* Szünetben az idő áll: a szám halványabb, a LED nem villog, a szín nem úszik. */
.edokk.szunet .ido-szam { opacity: 0.55; animation: none; }
.edokk.szunet .led { animation: none; opacity: 0.5; }
.ido-szam { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; cursor: pointer; }
/* Az egész panel koppintható: a visszajelzés is az egészé. A saját gombjai
   (±15, hang, csík) ezt felülírják a maguk :active állapotával. */
.edokk-ido { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.edokk-ido:active { opacity: 0.92; }

.hang {
  width: var(--erinto); height: var(--erinto); border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--keret); background: var(--lap-vilagos); color: var(--kiemelt);
  cursor: pointer; touch-action: manipulation;
}
.hang.nema { color: var(--halvany); background: color-mix(in srgb, var(--halvany) 14%, transparent); }
.hang:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: 2px; }
/* A hangkapcsoló a sor jobb szélére: a két pirula balra, a kapcsoló jobbra —
   a sor így kiegyensúlyozott maradt az „Ugrás" gomb kivétele után is. */
.edokk-ido .hang { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .led, .edokk.vege .ido-szam, .edokk.lejart { animation: none; }
  .ido-csik { transition: none; }
  .ido-szam { transition: none; }
}

/* ---------- napló ---------- */

/* Ha a pihenő-sáv látszik, a tartalom alá kell még hely — de CSAK akkor.
   Korábban feltétel nélkül élt, és minden képernyő alján ~160 px üres hely
   maradt. A body.piheno-fut osztályt az app kapcsolja az időzítővel együtt. */
body.edokk-fut main {
  padding-bottom: calc(var(--sav-magas) + var(--dokk-h, 96px) + 12px);
}

/* ============================================================== HALADÁS ==
   A grafikonok színei NEM az app akcentusai: azokat a palettavalidátor
   megbuktatta a sötét felületen. A jelölő-színek a grafikon.js-ben élnek. */

.csempe-racs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.csempe {
  padding: 12px; background: var(--lap); border: 1px solid var(--keret);
  border-radius: var(--sugar);
}
.csempe-cim { font-size: var(--t-apro); color: var(--halvany); }
/* A hősszám: ez a csempe lényege, ezért nagy és tabuláris. */
.csempe-ertek { font-size: var(--t-nagy); font-weight: 700; line-height: 1.2;
                font-variant-numeric: tabular-nums; }
.csempe-alcim { font-size: var(--t-cimke); color: var(--halvany); }

.grafikon-doboz { position: relative; padding: 14px; margin-bottom: 12px; }
.grafikon { display: block; width: 100%; height: auto; overflow: visible; }
/* A szöveg SOHA nem viseli a sorozat színét — az azonosítást a jelölő adja. */
.gr-tengely { fill: var(--halvany); font-size: var(--t-cimke); }
.gr-ertek { fill: var(--szoveg); font-size: var(--t-cimke); font-weight: 600;
            font-variant-numeric: tabular-nums; }

/* ---------- ÉLŐ VONALDIAGRAM a tégla-lapokon (2026-09-21) ----------
   Levi: „menjen ugyanúgy végig a pont a grafikonon, ahogy a kis nézetben, de
   legyen egy kezdő animáció is." A sorrend ezért: a vonal megrajzolja magát,
   utána a terület dereng elő, majd a napi mérések bukkannak fel sorban, és a
   végén indul el a futó pont. Ugyanaz a négy mozdulat, mint a csempék
   sávjain (`elo-rajz`, `elo-elotunik`, `elo-felbukkan`) — nem új szótár.

   A doboz azért pozicionált, mert az értékbuborék hozzá képest kap abszolút
   helyet; a lap törzse görgethető és nincs pozicionálva. */
.gr-doboz { position: relative; }
.gr-nyers { transform-box: fill-box; transform-origin: center; }
.gr-elo .gr-vonal {
  stroke-dasharray: 1;
  animation: elo-rajz var(--be-rajz) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.gr-elo .gr-terulet { animation: elo-elotunik 600ms ease backwards; animation-delay: 620ms; }
.gr-elo .gr-nyers {
  animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards;
  animation-delay: calc(760ms + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso-suru)));
}
.gr-elo .gr-vegpont { animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
  transform-box: fill-box; transform-origin: center; animation-delay: var(--be-rajz); }
.gr-elo .gr-ertek { animation: elo-elotunik 320ms ease backwards; animation-delay: calc(var(--be-teljes) - 320ms); }
/* A futó pont csak azután induljon, hogy van mire ráfutnia. */
.gr-elo .futo { animation: elo-elotunik 400ms ease backwards; animation-delay: var(--be-elet); }
.gr-cel:focus-visible { outline: 2px solid var(--szoveg); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) {
  .gr-elo .gr-vonal, .gr-elo .gr-terulet, .gr-elo .gr-nyers,
  .gr-elo .gr-vegpont, .gr-elo .gr-ertek, .gr-elo .futo { animation: none !important; }
  .gr-elo .gr-vonal { stroke-dasharray: none; }
}

.gr-buborek {
  position: absolute; z-index: 5; transform: translateX(-50%);
  display: grid; gap: 1px; padding: 5px 8px; pointer-events: none;
  background: var(--hatter); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); white-space: nowrap;
}
.gr-buborek strong { font-size: var(--t-apro); font-variant-numeric: tabular-nums; }
.gr-buborek span { font-size: var(--t-cimke); color: var(--halvany); }

.apro-jegyzet { margin: 10px 0 0; font-size: var(--t-cimke); line-height: 1.45; }

.rekord-lista { display: grid; gap: 6px; }
.rekord-sor {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 8px;
  padding: 7px 8px; background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
}
.rekord-nev { font-size: var(--t-apro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rekord-ertek { font-size: var(--t-torzs); font-weight: 700; font-variant-numeric: tabular-nums; }
.rekord-alap { font-size: var(--t-cimke); font-variant-numeric: tabular-nums; }

/* A grafikonok jelölői billentyűzettel is elérhetők. */
.grafikon [tabindex]:focus-visible { outline: 2px solid var(--szoveg); outline-offset: 2px; }

.gomb:focus-visible,
.ful:focus-visible,
.halk-gomb:focus-visible,
.etkezes-fej-ikon:focus-visible,
.tetel-torol:focus-visible,
.spajz-pipa:focus-visible,
.sr-p:focus-visible,
.sr-v:focus-visible,
.terv-set-torol:focus-visible,
.valtozat-torlo:focus-visible {
  outline: 2px solid var(--kiemelt);
  outline-offset: 2px;
}

/* ============================================================== ÉTKEZÉS == */

.nap-valto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.nap-cimke { font-size: var(--t-torzs); font-weight: 600; }
.gyors-sor { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* 1 1 auto, nem 1: a tartalom szabja a szélességet, így a hosszú felirat nem
   tördel három sorba. Az ikongombok pedig egyáltalán nem nyúlnak. */
.gyors-sor .gomb { flex: 1 1 auto; min-width: 0; }
.gyors-sor .gomb.elsodleges { width: auto; margin-top: 0; }
.gyors-sor .gomb.ikon-gomb { flex: 0 0 auto; }
.gyors-sor .gomb.teljes { flex: 1 0 100%; width: 100%; }
.lazito-fent { margin-top: 22px; }

/* ---------- étkezés-blokkok ---------- */
/* Az étkezés-blokk az IDŐVONALON él: nincs saját kártya-doboza, mert a pont
   és a behúzás már elkülöníti. A nyitott tétellista sorai hozzák a felületet. */
.etkezes-blokk { padding: 0; background: none; border: 0; }
/* A fejlécben négy dolog osztozik: név, kcal, szorzó, másolás, hozzáadás.
   A név zsugorodik, a gombok nem — a gap is szűkebb, hogy elférjenek. */
/* NÉV-DOMINÁNS MÉRETEZÉS (2026-09-14). Levi panasza az volt, hogy a fül
   MyFitnessPal-méretű: apró sorok, apró tételek. A fejléc ezért 56 px magas,
   a név 20 px-es, az ikonok 46×52-esek (a 38×44 helyett).
   A NÉV TÖRIK, NEM CSONKUL: négy ikon mellett 390 px-en nem fér ki egy sorba
   a „Reggeli · 07:30", és a néma ellipszis eddig pont az időt vágta le. Két
   sor olvasható; a csonkolt egy sor nem az. */
.etkezes-fej { display: flex; align-items: center; gap: 4px; min-height: 56px; }
.etkezes-nev { flex: 1 1 0; min-width: 0; font-size: var(--t-cim); font-weight: 700;
  line-height: 1.15; text-align: left; }
/* Az idő a név mellett, halkabban: a napszak a hír, az óra a lábjegyzete. */
.etkezes-ido { font-size: var(--t-apro); font-weight: 400; color: var(--halvany); }
/* Csukva az egész név egyetlen verzál címke — az idő is azzal egy méretben. */
.etkezes-blokk.zarva .etkezes-ido { font-size: inherit; font-weight: inherit; }
/* A fejléc négy gombja EGY család: azonos méret, KERET NÉLKÜL. A hozzáadást
   nem keret emeli ki (az kilógott a másik három közül), hanem a szín.
   A keretet és a hátteret a név-domináns kör adta nekik, 44×52-esre nőve —
   kilenc ilyen doboz ült egy képernyőn, és nehezebbek lettek, mint a
   tartalom, amit kísérnek. Visszatérés a saját szabályhoz: puszta ikon,
   42×44. A ::after-os érintőnyújtás itt NEM jó: négy ikon 4 px-es közökkel
   áll, a 48 px-es kiterjesztések egymásba érnének, és a szomszéd fogná el a
   koppintást. 44 px magas sor viszont önmagában is elég célpont. */
.etkezes-fej-ikon {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: var(--sugar-kicsi);
  color: var(--halvany); font: inherit; font-size: var(--t-torzs); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.etkezes-fej-ikon:active { background: var(--lap-vilagos); color: var(--kiemelt); }
.etkezes-fej-ikon.fo { color: var(--kiemelt); }
/* A KCAL PUSZTA SZÁM (a mértékegység nélkül): a „575 kcal" négy ikon mellett
   elvette a helyet a névtől, és ebben a környezetben úgysem lehet más, mint
   kalória. A szín a napi hős-számé — ez a napszak zöld mérlege. */
.etkezes-kcal { font-size: var(--t-cim); color: var(--siker); font-weight: 800;
  font-variant-numeric: tabular-nums; }

.tetel-lista { display: grid; gap: 6px; margin-top: 8px; }
.tetel-sor {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 32px;
  align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
}
.tetel-nev { font-size: var(--t-apro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tetel-mennyiseg, .tetel-kcal { font-size: var(--t-apro); color: var(--halvany);
                                font-variant-numeric: tabular-nums; }
.tetel-mennyiseg { text-align: right; line-height: 1.25; }

/* ===== NÉV-DOMINÁNS TÉTELSOR (2026-09-14) =====
   A sor KÉT OSZLOP: balra a név a teljes szélességben — két sorba is törhet —,
   alatta a mennyiség; jobbra a kalória és a törlés. A négyoszlopos, egysoros
   változat 13 px-es betűvel és ellipszissel dolgozott, és a hosszabb neveket
   („Protein ice bar white chocolate crisp") ott vágta el, ahol a lényeg van.
   72 px-es sor, 16 px-es név: a listát olvasni lehet, nem kibetűzni. (A név
   18-ról jött le egy fokozatot a skálán — a SOR magassága maradt, mert az a
   nagy célpont miatt van, nem a betűért.)

   Csak a NAPLÓ tételeire vonatkozik (`.tetel-lista`): a szinkron-ütközések
   listája ugyanezt az osztályt használja, de ott két mező van, nem négy. */
.tetel-lista .tetel-sor {
  grid-template-columns: minmax(0, 1fr) auto 48px;
  grid-template-areas: "nev kcal torol" "menny kcal torol";
  gap: 2px 10px; min-height: 72px; padding: 10px 4px 10px 16px;
}
.tetel-lista .tetel-nev {
  grid-area: nev; font-size: var(--t-torzs); font-weight: 600;
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2;
}
.tetel-lista .tetel-mennyiseg { grid-area: menny; text-align: left; }
.tetel-lista .tetel-kcal { grid-area: kcal; font-size: var(--t-torzs); font-weight: 700; }
.tetel-lista .tetel-torol, .tetel-lista .tetel-torol-hely {
  grid-area: torol; width: 48px; height: 48px;
}
/* A kiszerelés a gramm MELLÉ kerül, nem alá: két sor már van (név, mennyiség),
   egy harmadik a sort háromsorossá nyújtaná. */
.tetel-lista .tetel-darab { display: inline; margin-left: 6px; }
/* A SOR EGÉSZE nyitja a mennyiség-választót — nem csak a szám. A törlés-gomb
   kivétel, azt a saját kezelője megállítja. */
.tetel-sor.szerkesztheto {
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tetel-sor.szerkesztheto:active { background: var(--lap-emelt); }
.tetel-darab {
  display: block; font-size: var(--t-cimke); opacity: 0.75; white-space: nowrap;
}
.tetel-kcal { color: var(--szoveg); }
.tetel-torol {
  width: 40px; height: 40px; border: none; border-radius: var(--sugar-kicsi);
  background: transparent; color: var(--halvany); font-size: var(--t-apro); cursor: pointer;
  touch-action: manipulation;
}

.tetel-torol,
.spajz-pipa,
.valtozat-torlo,
.terv-set-torol,
.javaslat-pipa,
.naplo-kuld,
.edzes-torol,
.prog-chip,
.halk-gomb,
.apro-g { position: relative; }
.tetel-torol::after,
.spajz-pipa::after,
.valtozat-torlo::after,
.terv-set-torol::after,
.javaslat-pipa::after,
.naplo-kuld::after,
.edzes-torol::after,
.prog-chip::after,
.halk-gomb::after,
.apro-g::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: var(--erinto); height: var(--erinto);
  transform: translate(-50%, -50%);
}

/* ── A PRÓBA MÁSODIK FELE: a skáláról leesett tíz méret visszakerül rá. ──
   Ezek azok a helyek, amik kicsúsztak a rendszerből: hét a saját 11 px-es
   padló ALÁ (9 / 9,5 / 10 px), három pedig mellé (14 / 15 / 19 px). Amíg a
   kapcsoló ki van kapcsolva, mind marad, ahogy volt.
   A `.gyuru-szam` SVG-elem: a JS `font-size="15"` attribútumot ír rá, a CSS
   viszont veri a prezentációs attribútumot — ezért innen is állítható. */
:root[data-betu="uj"] .sr-amrap,
:root[data-betu="uj"] .fer-egyseg,
:root[data-betu="uj"] .soro-nap span,
:root[data-betu="uj"] .att-csempek .csempe-cim,
:root[data-betu="uj"] .tort-csempek .csempe-cim,
:root[data-betu="uj"] .szalag-felirat,
:root[data-betu="uj"] [data-meret="nagy"] .sr-n::after { font-size: var(--t-cimke); }
:root[data-betu="uj"] .vizu-nyilak { font-size: var(--t-apro); }
:root[data-betu="uj"] .beall-csokor-fej::after { font-size: var(--t-cim); }
/* A nagyobb lépték egyetlen helyen szorít ki egy CÍMET: a Haladás-csempe
   verzál címkéje („KALÓRIA & ENERGIA") 12 px-en, 0,12em ritkítással már nem
   fér a csempe szélességébe. A méret marad, a ritkítás enged — a verzál
   címke úgy is olvasható, és így nem kell kivételt csinálni a skálából. */
:root[data-betu="uj"] .htegla-cim { letter-spacing: 0.07em; }

/* ---------- alulról felcsúszó lap ---------- */
.alsolap-hatter {
  /* A MAGASSÁGOT JS ÁLLÍTJA a látható nézethez (lásd `lapNyit`), mert iOS-en
     a billentyűzet NEM kicsinyíti a lap-nézetet, csak a láthatót. Enélkül a
     lap alja — és vele a beviteli sáv — a billentyűzet alá kerül.
     Az `inset: 0` a tartalék, amíg a JS be nem áll. */
  position: fixed; inset: 0; z-index: 60;
  height: var(--lathato-magassag, 100%);
  top: var(--lathato-teteje, 0px); bottom: auto;
  display: flex; align-items: flex-end;
  /* A háttér a LEHÚZÁSSAL EGYÜTT világosodik: minél lejjebb húzod a lapot,
     annál inkább látszik, mi van mögötte — így a mozdulat közben is látod,
     hogy zárás felé tart, nem csak a végén derül ki. */
  background: rgba(0, 0, 0, calc(0.55 * var(--lap-halvanyul, 1)));
}
.alsolap {
  /* A LAP A TARTALMÁHOZ IGAZODIK, felső korláttal.
     Korábban minden lap a képernyő tetejéig nyílt, mert a féltenyérnyi lapok
     után újra és újra görgetni kellett. A stabil felület viszont csak a
     LISTA- és ŰRLAP-lapoknak kell — ott tényleg zavaró, ha minden
     megnyitáskor más a méret. A kétgombos döntés-lapok (Befejezetlen edzés,
     Másolás, tipp-lapok) így 92dvh magasak voltak három sornyi tartalomhoz:
     a szöveg fent ült, a hüvelyk lent, és a gombokért nyújtózni kellett.
     A `.magas` osztályt a `lapNyit(cim, { magas: true })` teszi fel. */
  /* A magasság a HÁTTÉRHEZ igazodik, nem a nézethez: a háttér már a látható
     területet fedi, tehát billentyűzet mellett is a helyén marad a lap alja. */
  width: 100%; height: auto; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--hatter);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border-top: 1px solid var(--keret);
  padding-bottom: env(safe-area-inset-bottom);
}
/* MINDEN LAP TELJES MAGASSÁGÚ. A tartalomhoz igazodó magasság azért nem vált
   be, mert a lap mérete megnyitásonként ugrált, és ami még rosszabb: ahogy
   feljött a billentyűzet, a rövid lap lényege pont a takarásba került. A
   felül maradó sáv szándékos: azon lehet koppintva kilépni. */
.alsolap.magas { height: calc(100% - 44px); }
/* TELJES KÉPERNYŐS LAP (`lapNyit(cim, { teljes: true })`). A fenti 44 px-es
   sáv azért van, hogy legyen hova koppintva kilépni — ez a változat épp azt
   adja fel, cserébe a teljes magasságért. Csak olyan lapnak való, aminek a
   TARTALMA kéri a helyet (a másolás-lap idővonala), és csak azért vállalható,
   mert a ✕ és a lehúzás ugyanúgy kivezet. A felső bevágás alá nem csúszhat a
   fogó, ezért kap saját safe-area ráhagyást. */
.alsolap.teljes {
  height: 100%;
  border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  padding-top: env(safe-area-inset-top);
}
@media (prefers-reduced-motion: reduce) { .alsolap { animation: none; } }

/* LEHÚZÁSSAL ZÁRÁS. A fogó-csík jelzi, hogy a lap megfogható — enélkül a
   gesztus létezik, de senki nem találja meg. A ✕ marad: billentyűzettel és
   egérrel az a járható út. */
.alsolap-fogo {
  flex: none; width: 40px; height: 4px; margin: 8px auto 0;
  border-radius: var(--sugar-pirula);
  background: color-mix(in srgb, var(--szoveg) 26%, transparent);
}
/* Elengedés után a lap VISSZARUGÓZIK a helyére; húzás közben viszont nincs
   átmenet, mert az az ujj után kullogna. */
.alsolap { transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.alsolap.huzas-alatt { transition: none; }
@media (prefers-reduced-motion: reduce) { .alsolap { transition: none; } }

.alsolap-fej {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--keret);
}
.alsolap-cim { margin: 0; font-size: var(--t-cim); font-weight: 600; }
/* OLDALRA SOSEM GÖRGET. A heti értékelés lapján a vízszintes pálya negatív
   margóval ül ki a törzs széléig, és pár képpontnyit túl is lógott rajta — a
   teljes lap elcsúszott oldalra a húzásra. A törzs fölöslegét levágjuk; ami
   szándékosan görgethető vízszintesen (a pálya), az a saját dobozán belül teszi. */
.alsolap-torzs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; }
/* A lap törzse SOSEM lehet üres fekete felület: amíg a hívó feltölti, ez ül
   benne. Ha a feltöltés elhasal, a helyére hibaüzenet kerül (lásd lapNyit). */
.lap-betoltes {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0; color: var(--halvany);
}
/* CSONTVÁZ-BLOKKOK: a jövendő tartalom arányai. Animáció nélkül — a villogó
   csillanás önmagában is nyugtalanít, és a betöltés általában rövid. */
.csontvaz { background: var(--lap-vilagos, var(--lap)); border-radius: 10px; }
.csv-hero { height: 62px; }
.csv-blokk { height: 104px; margin-top: 6px; }
.csv-sor { height: 34px; }
.csv-sor.rovid { width: 42%; height: 14px; margin-top: 8px; }
.lap-betoltes p { margin: 0; }
.lap-hiba-reszlet {
  padding: 8px 10px; border-radius: var(--sugar-kicsi);
  background: var(--lap-vilagos); font-family: ui-monospace, monospace;
  word-break: break-word;
}

/* ---------- kereső és találatok ---------- */
.kereso {
  width: 100%; min-height: var(--erinto); padding: 10px 12px; margin-bottom: 10px;
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); color: var(--szoveg);
  /* 16px alatt az iOS ránagyít fókuszáláskor */
  font-size: var(--t-torzs);
}
.talalat-lista { display: grid; gap: 6px; }
/* A találat-sor KÉT oszlop: balra a név és a makrók, jobbra a „belefér-e a
   napba" jelvény. A jobb oszlop `auto`, tehát jelvény nélkül (nincs napi cél)
   a sor pontosan úgy néz ki, mint korábban. */
.talalat {
  display: grid; gap: 2px 10px; text-align: left;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nev fer" "makro fer";
  align-items: center;
  min-height: var(--erinto); padding: 9px 11px;
  background: var(--lap); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); color: var(--szoveg);
  cursor: pointer; touch-action: manipulation;
}
.talalat:active { background: var(--lap-vilagos); }
/* A találat a BELEFÉR-E nyelvén: a bal szegély a nap sávját mondja (zöld:
   bőven, sárga: a határon, piros: túllépnéd) — ugyanaz, amit a jelvény színe,
   csak ránézésre, olvasás nélkül. Cél nélkül nincs szegély. */
.talalat[data-sav="zold"] { border-left: 3px solid var(--siker); }
.talalat[data-sav="sarga"] { border-left: 3px solid var(--figyelem); }
.talalat[data-sav="piros"] { border-left: 3px solid var(--veszely); }
.talalat-nev { grid-area: nev; font-size: var(--t-apro); }
.talalat-makro { grid-area: makro; font-size: var(--t-cimke); }
.talalat-makro em { font-style: normal; opacity: 0.7; }

/* „Belefér-e még a napba?" — zöld: bőven; sárga: a határon; piros: túllépnéd.
   A szín MELLETT a szám is ott van: színvakoknál a jelvény önmagában nem
   közölhet információt. */
.fer-jelveny {
  grid-area: fer; justify-self: end;
  display: grid; justify-items: center; gap: 1px;
  padding: 5px 9px; border-radius: var(--sugar-pirula);
  border: 1px solid var(--fer-szin);
  background: color-mix(in srgb, var(--fer-szin) 13%, transparent);
  color: var(--fer-szin);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.fer-jelveny.zold  { --fer-szin: var(--siker); }
.fer-jelveny.sarga { --fer-szin: var(--figyelem); }
.fer-jelveny.piros { --fer-szin: var(--veszely); }
.fer-szam { font-size: var(--t-apro); font-weight: 800; }

/* A szűrő-chipek AKTÍVAN a saját sávjuk színét viselik — így ránézésre
   látszik, mire szűrtél, nem csak abból, melyik chip van bekapcsolva. */
.fer-vezerlo { margin-bottom: 10px; }
.fer-vezerlo [data-fer="belefer"].aktiv { --fer-szin: var(--siker); }
.fer-vezerlo [data-fer="tul"].aktiv     { --fer-szin: var(--veszely); }
.fer-vezerlo [data-fer].aktiv:not([data-fer=""]) {
  background: color-mix(in srgb, var(--fer-szin) 18%, transparent);
  border-color: var(--fer-szin);
  color: var(--fer-szin);
}
.fer-egyseg {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.75;
}

/* Csereszabatos csoportok: „bármelyik köret 60 g". A találat-lista rácsán
   belül élnek, ezért saját ráccsal — enélkül a szekció egy blokk lenne, és a
   tagok közti 6 px eltűnne. */
.csere-csoport { display: grid; gap: 6px; }
.csere-csoport + .csere-csoport { margin-top: 14px; }
.csere-fej {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.csere-nev {
  font-size: var(--t-cimke); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--halvany);
}
.csere-adag {
  font-size: var(--t-apro); color: var(--kaloria);
  font-variant-numeric: tabular-nums;
}
.csere-adag.szabad {
  color: var(--halvany); font-size: var(--t-cimke); font-style: italic;
}
/* Párosítatlan tag: ott a neve, hogy tudd, mit ehetsz — de nem kattintható,
   mert makró nélkül nincs mit naplózni. */
.talalat.parositatlan { opacity: 0.5; cursor: default; }

.adag-sor { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.elonezet {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 12px 0; padding: 10px 12px;
  background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
}
.elonezet strong { font-size: var(--t-cim); font-variant-numeric: tabular-nums; }
.elonezet .halvany { font-size: var(--t-apro); }

.harmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.harmas .mezo { margin: 8px 0; }
.harmas.ketto { grid-template-columns: repeat(2, 1fr); }

/* ---------- recept ---------- */
/* Fejléc-csipsor (recept és edzés részletlapja).
   EGYFORMA MAGASSÁG, EGYFORMA BETŰ. Korábban a sorban álló három csip három
   különböző méretű volt: az adagváltó gomb `font: inherit`-tel felülírta a
   pirula 13 px-ét (16-ra), és egy 44 px-es `min-height`-tel a szomszédai
   duplájára nőtt. A `.mod-cimke` pedig ennél is kisebb betűvel ült ott.
   A sor a `.valtozat` fül-csipek bevált méretét veszi át (38 px). */
.recept-fejadat {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-bottom: 10px;
}
.recept-fejadat > * { min-height: 38px; }
.cimke-pirula {
  display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: var(--sugar-pirula); font-size: var(--t-apro);
  background: var(--lap-vilagos); border: 1px solid var(--keret);
}
.recept-fejadat .mod-cimke {
  display: inline-flex; align-items: center; padding: 0 12px;
  font-size: var(--t-apro);
}

.hozzavalo-lista { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
.hozzavalo {
  /* Három oszlop: szöveg | skálázott mennyiség | párosítás-jel. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 8px; align-items: start;
  padding: 7px 9px; background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
  font-size: var(--t-apro);
}
.hozzavalo.opcionalis { opacity: 0.65; }
.hozzavalo-szoveg { line-height: 1.4; }
.hozzavalo-jel { text-align: center; font-size: var(--t-apro); color: var(--siker); }

.lepesek { font-size: var(--t-apro); line-height: 1.55; }

.jelveny {
  position: absolute; top: 4px; right: 6px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--figyelem); color: #201503;
  border-radius: var(--sugar-pirula); font-size: var(--t-cimke); font-weight: 700;
}

.figyelmeztetes.lapon { margin: 0 0 12px; }

/* Elutasított írás: SÚLYOSABB az ütközésnél. Ütközésnél a vesztes változat a
   szerveren megvan; itt a bejegyzés soha nem jutott fel. */
.figyelmeztetes.veszelyes {
  background: color-mix(in srgb, var(--veszely) 14%, var(--lap));
  border-color: color-mix(in srgb, var(--veszely) 45%, var(--keret));
}
.elutasitott-lista { display: grid; gap: 10px; }
.elutasitott-tetel { padding: 12px 14px; }
.elutasitott-fej {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--t-apro);
}
.elutasitott-ok { margin: 6px 0 0; font-size: var(--t-apro); color: var(--veszely); }
.elutasitott-adat {
  margin: 10px 0 0; padding: 9px 10px; max-height: 190px; overflow: auto;
  background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
  font-family: ui-monospace, monospace; font-size: var(--t-cimke);
  color: var(--halvany); white-space: pre-wrap; word-break: break-word;
}

.lejarat { padding: 1px 7px; border-radius: var(--sugar-pirula); font-size: var(--t-cimke); }
.lejarat.lejart { background: color-mix(in srgb, var(--veszely) 25%, transparent);
                  color: var(--veszely); }
.lejarat.kozeli { background: color-mix(in srgb, var(--figyelem) 22%, transparent);
                  color: var(--figyelem); }

/* ---------- bevásárlólista ---------- */
.uj-tetel { display: flex; gap: 8px; margin-bottom: 12px; }
.uj-tetel .kereso { flex: 1; margin-bottom: 0; }
.uj-tetel .gomb { flex: none; width: var(--erinto); padding: 0; font-size: var(--t-cim); }

/* ---------- mit főzzek ---------- */
.arany {
  display: inline-block; min-width: 34px; padding: 1px 6px; margin-right: 4px;
  background: color-mix(in srgb, var(--figyelem) 22%, transparent);
  color: var(--figyelem); border-radius: var(--sugar-pirula);
  font-size: var(--t-cimke); font-weight: 700; font-variant-numeric: tabular-nums;
}
.arany.jo { background: color-mix(in srgb, var(--siker) 22%, transparent); color: var(--siker); }

/* ==================================================================== AI == */

.szoveges-doboz { margin-bottom: 10px; }
.szoveg-mezo { resize: vertical; min-height: 62px; font-family: inherit; line-height: 1.4; }
.szoveges-doboz .gomb { width: 100%; }

.valaszto-vonal {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  color: var(--halvany); font-size: var(--t-apro);
}
.valaszto-vonal::before, .valaszto-vonal::after {
  content: ""; flex: 1; height: 1px; background: var(--keret);
}

/* ---------- AI-javaslatok megerősítése ----------
   SAJÁT rács. Korábban a .set-sor-ra épült, ami `display: flex;
   flex-direction: column` — ott a grid-template-columns egyáltalán nem
   érvényesült, és a pipa / név / gramm / kcal négy külön sorban ült.
   Ráadásul a .set-sor cursor: pointer-e miatt a sor kattinthatónak látszott. */
.javaslat-sor {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px;
  padding: 8px; background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
}
/* Szokásos-előnézet: a recept-csoport neve a hozzávalói fölött, hogy lásd,
   melyik tétel tartozik össze — ugyanúgy, ahogy a naplóban is kártya lesz. */
.elonezet-recept {
  margin: 8px 0 2px; font-size: var(--t-cimke); font-weight: 700;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  color: var(--halvany);
}
.elonezet-recept:first-child { margin-top: 0; }
.elonezet-ossz {
  margin: 14px 0 12px; text-align: right;
  font-size: var(--t-apro); color: var(--halvany);
}
.elonezet-ossz b {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-cim); color: var(--szoveg);
  font-variant-numeric: tabular-nums;
}

.javaslat-pipa {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 44px; margin: -10px 0;
}
.javaslat-pipa input { width: 22px; height: 22px; accent-color: var(--kiemelt); margin: 0; }
.javaslat-sor .set-mezo input { min-height: 44px; }
/* A név és a „becsült" / „nincs adat" jelölés EGY rács-cellában: a jelölés
   korábban a nowrap + ellipszises .tetel-nev-en BELÜL ült, tehát hosszú
   névnél épp az a figyelmeztetés vágódott le, ami miatt a lap létezik. */
.javaslat-nev { min-width: 0; display: flex; align-items: baseline; gap: 0; }
.javaslat-nev .tetel-nev { min-width: 0; }
.javaslat-nev .becsult { flex: none; }
.javaslat-sor .tetel-kcal { min-width: 46px; text-align: right; }
/* Pörgő az ikongombokba: a felirat („Elemzés…") nem fért a 48 px-es körbe,
   és a gomb utána más alakban tért vissza, mint a két szomszédja. */
.perdulo {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: perdul 0.8s linear infinite;
}
@keyframes perdul { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .perdulo { animation: none; } }

/* „Gondolkodom…" jelző a hosszú AI-hívásokhoz. Egy sorban: perdülő, kétsoros
   szöveg, jobbra az eltelt idő — így a doboz magassága nem ugrál, miközben a
   lépés-szöveg váltakozik. */
.gondolkodo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px; min-height: 56px;
}
.gondolkodo .perdulo { flex: none; color: var(--kiemelt); }
.gondolkodo-szoveg { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gondolkodo-szoveg strong { font-size: var(--t-torzs); }
.gondolkodo-lepes {
  font-size: var(--t-apro); line-height: 1.35;
  /* Két sorra hagyunk helyet: a váltakozó szövegek nem egyforma hosszúak, és
     enélkül a doboz minden váltásnál ugrana egyet. */
  min-height: 2.7em;
}
.gondolkodo-ido {
  flex: none; font-size: var(--t-apro); color: var(--halvany);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right;
}

.becsult {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: color-mix(in srgb, var(--figyelem) 22%, transparent);
  color: var(--figyelem); border-radius: var(--sugar-pirula);
  font-size: var(--t-cimke); font-style: normal;
}
/* A termékadatbázisból jött tápérték NEM figyelmeztetés: jobb, mint a puszta
   becslés, csak nem a mi ellenőrzött katalógusunk. Ezért higgadt cián, nem a
   borostyán „ellenőrizd" szín. A pontos terméknév a `title`-ben. */
.becsult.forras-off {
  background: color-mix(in srgb, var(--kiemelt) 18%, transparent);
  color: var(--kiemelt);
}

/* ---------- üres jövőbeli nap ----------
   A tervsor renderelése a heti tervezővel együtt kiesett, de a napváltó
   továbbra is elenged hét napot előre — ott eddig hat üres fejléc állt,
   egyetlen mondat nélkül arról, mit lehet itt csinálni. */
.ures-nap {
  margin-bottom: 12px; padding: 22px 18px; text-align: center;
  border: 1px dashed var(--keret); border-radius: var(--sugar);
}
.ures-nap p { margin: 0 0 14px; font-size: var(--t-apro); color: var(--halvany); }
.ures-nap .gomb { width: 100%; }

/* ---------- hozzávalónkénti bontás a recept-naplózón ----------
   A KIMARADÓ tételek mindig látszanak, a rendben lévők lenyíló mögött. */
.hb-fejlec {
  margin: 14px 0 6px; font-size: var(--t-apro); font-weight: 700;
  color: var(--figyelem);
}
.hozzavalo-bontas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hozzavalo-bontas li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
  align-items: baseline;
  padding: 7px 10px; border-radius: var(--sugar-kicsi);
  background: var(--lap-vilagos); font-size: var(--t-apro);
}
.hozzavalo-bontas li.hb-gond {
  background: color-mix(in srgb, var(--figyelem) 13%, var(--lap-vilagos));
  border-left: 3px solid var(--figyelem);
}
.hb-nyers { min-width: 0; overflow-wrap: anywhere; }
.hb-talalat { color: var(--halvany); text-align: right; white-space: nowrap; }
.hb-gond .hb-talalat { color: var(--figyelem); }
.hb-reszletek { margin-top: 10px; }
.hb-reszletek > summary {
  padding: 8px 2px; font-size: var(--t-apro); color: var(--halvany);
  cursor: pointer; list-style: none;
}
.hb-reszletek > summary::-webkit-details-marker { display: none; }
.hb-reszletek > summary::before { content: "▸ "; }
.hb-reszletek[open] > summary::before { content: "▾ "; }

/* Teljes szélességű, de nem elsődleges gomb (pl. a vonalkód-lap kamerája). */
.gomb.teljes-gomb { width: 100%; }

/* ---------- feldolgozásra váró szövegek ---------- */
.figyelmeztetes.oszlopos { flex-direction: column; align-items: stretch; gap: 8px; }
.gyors-sor.oszlopos { flex-direction: column; }
.gyors-sor.oszlopos .gomb { min-height: 50px; }
.varakozo-sor {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.varakozo-szoveg { font-size: var(--t-apro); font-style: italic; min-width: 0;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.varakozo-gombok { display: flex; gap: 6px; flex: none; }

/* ---------- valós energiaigény ---------- */
.tdee-fo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.tdee-nagy { font-size: var(--t-orias); font-weight: 700; line-height: 1;
             font-variant-numeric: tabular-nums; }
.tdee-reszletek { display: grid; gap: 6px; }
.tdee-reszletek > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--t-apro);
}
.tdee-reszletek strong { font-variant-numeric: tabular-nums; }

.forras-jel {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  background: color-mix(in srgb, var(--siker) 18%, transparent);
  color: var(--siker); border-radius: var(--sugar-pirula);
  font-size: var(--t-cimke); font-weight: 600; vertical-align: middle;
}

.tdee-reszletek strong.elter { color: var(--figyelem); }

/* ---------- beállítások panel ---------- */
.beall-fejezet {
  font-size: var(--t-cimke); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--cimke-ritkitas);
  color: var(--halvany); margin: 22px 0 10px;
}
.beall-fejezet:first-child { margin-top: 0; }

.beall-blokk { margin-bottom: 18px; }

/* ---------- a Ma-cellák részletlapja ---------- */
/* A metrika saját színe `--cella-szin`-ként érkezik a fejrészre, és onnan
   sugárzik szét — így ugyanaz a lap három arcot ölt anélkül, hogy három
   stílust kellene karbantartani. */
.cellalap-fej {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--keret);
}
/* A SZÁM SZÖVEG-SZÍNŰ (L-89, L-66/6): a kalória színe a piros, és a kcal-szám
   sosem piros. A `--cella-szin` a díszítésen (oszlop, sáv, pötty) marad. */
.cellalap-nagy {
  font-size: var(--t-orias); line-height: 1;
  color: var(--szoveg); font-variant-numeric: tabular-nums;
}
.cellalap-nagy small {
  display: block; margin-top: 6px;
  font-size: var(--t-apro); color: var(--halvany); font-weight: 400;
}
.cellalap-pct {
  font-size: var(--t-nagy); color: var(--szoveg);
  font-variant-numeric: tabular-nums; opacity: 0.55;
}
.cellalap-mondat { margin: 12px 0 4px; font-size: var(--t-torzs); line-height: 1.5; }

.cellalap-cim {
  margin: 20px 0 8px; font-size: var(--t-cimke); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--cimke-ritkitas);
  color: var(--halvany);
}

/* Bontás-lista: név — sáv — érték. A sáv `1fr`, tehát a nevek és a számok
   egymás alatt maradnak, akármilyen hosszú a felirat. */
.cellalap-bontas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cellalap-bontas li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nev ert" "sav sav"; gap: 4px 10px; align-items: baseline;
}
.cellalap-bontas-nev {
  grid-area: nev; font-size: var(--t-apro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellalap-bontas-ert {
  grid-area: ert; font-size: var(--t-apro); color: var(--halvany);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cellalap-bontas-sav {
  grid-area: sav; display: block; height: 5px; border-radius: var(--sugar-pirula);
  background: var(--lap-vilagos); overflow: hidden;
}
.cellalap-bontas-sav i { display: block; height: 100%; border-radius: inherit; }

/* Makró-energiaarány */
.cellalap-makrosav { display: grid; gap: 10px; }
.cellalap-makro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "sav sav" "nev ert"; gap: 4px 10px; align-items: baseline;
}
.cellalap-makro-sav {
  grid-area: sav; display: block; height: 6px; border-radius: var(--sugar-pirula);
  background: var(--lap-vilagos); overflow: hidden;
}
.cellalap-makro-sav i { display: block; height: 100%; border-radius: inherit; }
.cellalap-makro-nev { grid-area: nev; font-size: var(--t-apro); }
.cellalap-makro-ert {
  grid-area: ert; font-size: var(--t-apro); color: var(--halvany);
  font-variant-numeric: tabular-nums;
}

/* Hét napos oszlopdiagram */
.cellalap-heti {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  align-items: end; margin-bottom: 8px;
}
.cellalap-nap { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.cellalap-oszlop-ter {
  position: relative; width: 100%; height: 76px;
  display: flex; align-items: flex-end;
  background: var(--lap-vilagos); border-radius: var(--sugar-kicsi); overflow: hidden;
}
/* Csak a TETEJE kerek: a talpánál lekerekítve az oszlop lebegő pirulának
   látszik, nem a nulláról induló oszlopnak. */
.cellalap-oszlop {
  width: 100%; border-radius: var(--sugar-kicsi) var(--sugar-kicsi) 0 0;
}
/* A cél vonala: enélkül az oszlopok magassága önmagában semmit nem mond. */
.cellalap-cel {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--halvany); opacity: 0.6;
}
.cellalap-napnev { font-size: var(--t-cimke); color: var(--halvany); }
.cellalap-napszam {
  font-size: var(--t-cimke); font-variant-numeric: tabular-nums;
  color: var(--halvany);
}
.cellalap-nap.ma .cellalap-napnev,
.cellalap-nap.ma .cellalap-napszam { color: var(--szoveg); font-weight: 700; }

/* Vízszintes lapozás (húzás) — a becsúszó tartalom animációja.
   Csak a TARTALOM mozdul, a fejléc és az alsó sáv nem: a húzás a lapon belül
   lép egyet, nem fület vált, és ezt a mozgásnak is mutatnia kell. */
@keyframes lapJobbrol {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lapBalrol {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}
.lap-jobbrol, .lap-balrol {
  /* A becsúszás 26 px-et lóg ki oldalra. Kifelé lógó tartalom a lap
     szélességét is megnövelheti (jobbra), illetve levágódhat (balra) — a
     `clip` mindkettőt kizárja, görgethető területet sem csinál belőle. */
  overflow-x: clip;
}
.lap-jobbrol { animation: lapJobbrol 0.22s ease-out; }
.lap-balrol  { animation: lapBalrol  0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .lap-jobbrol, .lap-balrol { animation: none; }
}

/* AI-költség. A havi összeg a főszereplő, a bontás alatta halkabban. */
.koltseg-fo { margin-bottom: 10px; }
.koltseg-ertek { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.koltseg-ertek .szam { font-size: var(--t-nagy); }
.koltseg-ertek .halvany { font-size: var(--t-torzs); }
.koltseg-tabla {
  width: 100%; border-collapse: collapse; margin: 12px 0;
  font-size: var(--t-apro); font-variant-numeric: tabular-nums;
}
.koltseg-tabla th {
  text-align: left; font-size: var(--t-cimke); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--cimke-ritkitas);
  color: var(--halvany); padding-bottom: 6px;
}
.koltseg-tabla td { padding: 5px 0; border-top: 1px solid var(--keret); }
.koltseg-tabla .szam-cella { text-align: right; white-space: nowrap; }
.koltseg-hibas { color: var(--veszely); font-size: var(--t-cimke); }
.koltseg-arfolyam { max-width: 190px; }
/* Figyelmeztető segédszöveg (pl. elavult automatikus mentés). */
.beall-sugo.beall-figyelem { color: var(--figyelem); font-weight: 600; }
/* Elavult egészség-adat jelzése a terhelhetőség-kártyán. */
.terhel-elavult {
  margin: 10px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--figyelem);
  border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--figyelem) 13%, var(--lap-vilagos));
  font-size: var(--t-apro); line-height: 1.5;
}
.beall-cimke { display: block; font-size: var(--t-apro); margin-bottom: 6px; }

/* A mező és a gomb egy sorban; a mező zsugorodhat, a gomb nem.
   A minmax(0, 1fr) itt is kell: enélkül a hosszú token szétfeszíti a rácsot
   és a Másolás gomb lecsúszik a képernyőről 375 px-en. */
.beall-masolo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
}
.beall-mezo {
  min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-apro); padding: 11px 12px;
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar);
  text-overflow: ellipsis;
}
.masol-gomb { white-space: nowrap; min-height: 44px; padding: 0 14px; }
.masol-gomb.siker { background: var(--siker); color: #08130d; }

.beall-sugo {
  margin: 7px 0 0; font-size: var(--t-apro); line-height: 1.45; color: var(--halvany);
}

.beall-infolista {
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  border-radius: var(--sugar); overflow: hidden;
}
.beall-info {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 13px; font-size: var(--t-apro);
  border-bottom: 1px solid var(--keret);
}
.beall-info:last-child { border-bottom: none; }

.gomb.veszely {
  background: color-mix(in srgb, var(--veszely) 20%, var(--lap));
  color: var(--veszely); border: 1px solid color-mix(in srgb, var(--veszely) 45%, transparent);
}
.gomb.veszely:active { background: color-mix(in srgb, var(--veszely) 32%, var(--lap)); }
.beall-kilep { width: 100%; margin-top: 26px; min-height: 48px; }

/* ---------- edzésmód: progresszív / laza ---------- */
.mod-gomb {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 13px; min-height: var(--erinto);
  background: var(--lap); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar);
  font: inherit; cursor: pointer;
}
.mod-gomb.aktiv {
  background: color-mix(in srgb, var(--kiemelt) 16%, var(--lap));
  border-color: var(--kiemelt);
}
.mod-nev { font-weight: 600; font-size: var(--t-torzs); }
.mod-gomb.aktiv .mod-nev { color: var(--kiemelt); }
/* A két edzésmódnak saját színe van: progresszív = narancs (terhelés),
   laza = zöld (kímélő). Így ránézésre látszik, milyen edzés indul. */
.mod-gomb[data-mod="progressziv"] .mod-nev { color: var(--narancs); }
.mod-gomb[data-mod="laza"] .mod-nev { color: var(--siker); }
.mod-gomb[data-mod="progressziv"].aktiv {
  background: color-mix(in srgb, var(--narancs) 15%, var(--lap));
  border-color: var(--narancs);
}
.mod-gomb[data-mod="laza"].aktiv {
  background: color-mix(in srgb, var(--siker) 15%, var(--lap));
  border-color: var(--siker);
}
.mod-leiras { font-size: var(--t-apro); line-height: 1.35; color: var(--halvany); }

.mod-cimke {
  flex: none; padding: 2px 8px; border-radius: var(--sugar-pirula);
  font-size: var(--t-cimke); font-weight: 600; letter-spacing: 0.02em;
}
.mod-cimke.progressziv { background: color-mix(in srgb, var(--narancs) 20%, transparent);
                         color: var(--narancs); }
.mod-cimke.laza       { background: color-mix(in srgb, var(--siker) 20%, transparent);
                         color: var(--siker); }

/* ---------- napi napló ---------- */
.naplo-mezo {
  width: 100%; margin: 10px 0; padding: 12px;
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar);
  font: inherit; font-size: var(--t-torzs); line-height: 1.5; resize: vertical;
  min-height: 96px;
}

.naplo-uzenet { margin: 10px 0 0; font-size: var(--t-apro); color: var(--halvany); }
.naplo-uzenet.hiba { color: var(--figyelem); }

.naplo-lista { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.naplo-tetel {
  padding: 12px; background: var(--lap-vilagos);
  border: 1px solid var(--keret); border-radius: var(--sugar);
}
.naplo-tetel.vart { border-color: color-mix(in srgb, var(--figyelem) 45%, var(--keret)); }

.naplo-fej { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.naplo-datum { font-size: var(--t-apro); color: var(--halvany); }
.naplo-allapot { font-size: var(--t-apro); color: var(--figyelem); }
.naplo-osszefoglalo { margin: 6px 0 0; font-weight: 500; line-height: 1.45; }
.naplo-nyers {
  margin: 6px 0 0; font-size: var(--t-apro); line-height: 1.5; color: var(--halvany);
  white-space: pre-wrap;
}

.naplo-csipek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.naplo-csip {
  padding: 3px 9px; border-radius: var(--sugar-pirula); font-size: var(--t-cimke); font-weight: 600;
  background: var(--lap); color: var(--halvany);
}
.naplo-csip.jo      { background: color-mix(in srgb, var(--siker) 18%, transparent);
                      color: var(--siker); }
.naplo-csip.kozepes { background: color-mix(in srgb, var(--figyelem) 16%, transparent);
                      color: var(--figyelem); }
.naplo-csip.rossz,
/* A fájdalom-csip színe a SÚLYOSSÁGOT követi. Korábban mindig piros volt —
   így az „alig fáj" ugyanúgy riasztásként festett, mint a „nagyon erős". */
.naplo-csip.fajdalom { background: color-mix(in srgb, var(--halvany) 18%, transparent);
                       color: var(--halvany); }
.naplo-csip.fajdalom.enyhe   { background: color-mix(in srgb, var(--halvany) 18%, transparent);
                               color: var(--szoveg); }
.naplo-csip.fajdalom.kozepes { background: color-mix(in srgb, var(--figyelem) 16%, transparent);
                               color: var(--figyelem); }
.naplo-csip.fajdalom.eros    { background: color-mix(in srgb, var(--veszely) 18%, transparent);
                               color: var(--veszely); }

.naplo-muveletek { display: flex; gap: 8px; margin-top: 10px; }

.coach-fajdalmak { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.coach-fajdalom {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 9px 11px; border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--veszely) 10%, var(--lap-vilagos));
  font-size: var(--t-apro);
}
.coach-fajdalom.sulyosbodo {
  background: color-mix(in srgb, var(--veszely) 20%, var(--lap-vilagos));
  border: 1px solid color-mix(in srgb, var(--veszely) 45%, transparent);
}

.coach-osszegzes { margin: 0 0 12px; line-height: 1.55; }
.coach-alcim {
  margin: 16px 0 8px; font-size: var(--t-apro); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--halvany);
}
.coach-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.coach-lista li { line-height: 1.5; }
.coach-lista strong { display: block; }
.coach-lista .halvany { display: block; font-size: var(--t-apro); margin-top: 2px; }

/* ---------- spájz: pipálós lista ---------- */
.spajz-sor { display: flex; align-items: center; gap: 12px; }
.spajz-pipa {
  position: relative;
  flex: none; width: 32px; height: 32px; border-radius: var(--sugar-kicsi);
  border: 2px solid var(--keret); background: transparent;
  display: grid; place-items: center; font-size: var(--t-cim); line-height: 1;
  color: transparent; cursor: pointer; padding: 0;
}
.spajz-sor.megvan .spajz-pipa { background: var(--siker); border-color: var(--siker);
                                color: #08130d; }
.spajz-sor.megvan .talalat-nev { color: var(--halvany); }
.spajz-szerkeszt {
  position: relative;
  flex: none; width: 44px; min-height: 44px; border: none; background: transparent;
  color: var(--halvany); font-size: var(--t-torzs); cursor: pointer; border-radius: var(--sugar-kicsi);
}
.spajz-szerkeszt:active { background: var(--lap-vilagos); }

/* ---------- kardió-lista törlés-gombja ---------- */
.edzes-torol {
  flex: none; width: 40px; min-height: 44px; margin-left: 4px;
  border: none; background: transparent; color: var(--halvany);
  font-size: var(--t-torzs); cursor: pointer; border-radius: var(--sugar-kicsi);
}
.edzes-torol:active { background: var(--lap-vilagos); color: var(--veszely); }

/* Élesített törlés-gomb: az első koppintás után feliratos és piros. */
.edzes-torol.eles {
  width: auto; padding: 0 12px; font-size: var(--t-apro); font-weight: 600;
  color: var(--veszely);
  background: color-mix(in srgb, var(--veszely) 16%, transparent);
}

/* ---------- cél-kalkulátor ---------- */
.cel-urlap .harmas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.cel-valaszto { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
#cUtem { margin-top: 8px; flex-wrap: wrap; }
#cUtem .valtozat { line-height: 1.3; padding: 8px 12px; }
#cUtem .valtozat .halvany { font-size: var(--t-cimke); font-weight: 400; }
.cel-eredmeny { margin-top: 18px; }
.cel-tdee { max-width: 46%; text-align: right; font-size: var(--t-apro); line-height: 1.4; }
/* A KÉRT ÉS A TELJESÍTHETŐ ÜTEM egy mondatban. Teljes szélesség, mert a
   `.cel-tdee` 46%-os jobbra zárt hasábjában ez öt sorba tört. */
.cel-utem-sor { margin: 8px 0 0; font-size: var(--t-apro); line-height: 1.45; }
.cel-megjegyzes {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--figyelem) 13%, var(--lap-vilagos));
  border-left: 3px solid var(--figyelem);
  font-size: var(--t-apro); line-height: 1.5;
}
.cel-mentes { width: 100%; margin-top: 14px; min-height: 50px; }

/* ==================== EDZÉS-NÉZET MÉRETE =============   A korábbi „edzőterem-mód" egyetlen kapcsolóban kötötte össze a MÉRETET és a
   SZÍNT: mindent felnagyított, és az egész képernyőt savsárgára váltotta,
   a világos témát is felülírva. A kettő nem tartozik össze, és a szín nem az
   app döntése. Marad a rendszer színvilága; a méret pedig választható lett
   (Beállítások › Megjelenés), és MINDÖSSZE HÁROM változóban különbözik.

   --sor-h  a sorozat-sor magassága (az érintőminimum sosem megy 44 px alá)
   --v-fs   az érték betűmérete (súly / ismétlés)
   --e-fs   a kísérő apró szövegé (egység, „előző")
   --n-fs   a sorszámé */
/* (09-07) A vászon frissítése: a kísérő méretek is a skálára kerültek —
   az --e-fs és --n-fs Alapon 12/14, Kompaktban 11/13, Nagyban 13/16. */
[data-meret="kompakt"] { --sor-h: 44px; --v-fs: 17px; --e-fs: 11px; --n-fs: 13px; }
[data-meret="alap"]    { --sor-h: 52px; --v-fs: 20px; --e-fs: 12px; --n-fs: 14px; }
[data-meret="nagy"]    { --sor-h: 62px; --v-fs: 26px; --e-fs: 13px; --n-fs: 16px; }
/* KOMPAKT: a kártya-fej egy sorba tömörül, a pipa 30 px — így a következő
   gyakorlat előnézete is a hajtás fölé fér (#1g). */
[data-meret="kompakt"] .gy-fej-sor { margin: 4px 0 0; }
[data-meret="kompakt"] .gy-meta { gap: 2px 10px; font-size: var(--t-cimke); }
[data-meret="kompakt"] .sr-p { width: 30px; height: 30px; }
[data-meret="kompakt"] .sr.most .sr-p { width: 34px; height: 34px; }
[data-meret="kompakt"] .prog-magyarazat { font-size: var(--t-cimke); }
/* NAGY (≈ a régi teremmód): az „Előző" a sorszám alá kerül kis szövegként,
   hogy a Kg/Ism gombok szélesek maradjanak; a pipa 44/48; a dokk gombjai
   56 px-esek, --t-cim felirattal (#1h). Négy sorozat így is egy képernyőn. */
[data-meret="nagy"] .st-fej, [data-meret="nagy"] .sr { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 52px; }
[data-meret="nagy"] .st-fej span:nth-child(2), [data-meret="nagy"] .sr-e { display: none; }
[data-meret="nagy"] .sr-n { display: grid; gap: 1px; }
[data-meret="nagy"] .sr-n::after { content: attr(data-elozo); font-size: 10px; font-weight: 600; color: var(--halvany); white-space: nowrap; }
[data-meret="nagy"] .sr-p { width: 44px; height: 44px; }
[data-meret="nagy"] .sr.most .sr-p { width: 48px; height: 48px; }
[data-meret="nagy"] .edokk-alap .gomb { min-height: 56px; font-size: var(--t-cim); }
[data-meret="nagy"] .edokk-alap .gomb.szellem { font-size: var(--t-torzs); }

/* Hangkapcsoló a futó időzítőn. Halk, amíg be van kapcsolva — a némítás
   viszont látszódjon, különben nem derül ki, miért nem szól. */

/* Tápérték nélküli tétel: nem hiba (a víz tényleg nulla), de látszódjon,
   mert némán alulszámolja az egész napot. */
.tetel-kcal.nulla {
  color: var(--figyelem);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}

/* Gomb alatti magyarázat a rövid döntés-lapokon. A mondat-hosszú
   gombfelirat két sorba tört, és a döntés lényege elveszett benne. */
.apro-jegyzet {
  margin: -2px 0 0; font-size: var(--t-cimke); line-height: 1.4;
  text-align: center;
}

/* RAGADÓ LÁBLÉC a hosszú lapokon (A2). Az elsődleges gomb eddig a törzs
   végén görgött: a „Mentés" a hajtás alatt volt, közvetlenül a „Törlés"
   mellett. A destruktív gomb SZÁNDÉKOSAN nem kerül ide — az marad a törzs
   alján, hogy ne lehessen félreütni a mentés helyett. */
.alsolap-labl {
  flex: none; display: flex; gap: 10px;
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--keret);
  background: var(--lap);
}
.alsolap-labl:empty { display: none; }
/* SZERKESZTŐ-LÁBLÉC: a naplózó lap keresője és beviteli gombjai. Nem gombsor,
   hanem sáv — ezért oszlopba rendeződik (a szöveges bevitel doboza a kereső
   FÖLÖTT nyílik, nem mellette), és a belső margóit maga hozza. */
.alsolap-labl.szerkeszto-labl {
  flex-direction: column; gap: 0; padding-top: 10px;
  background: color-mix(in srgb, var(--lap) 96%, transparent);
  backdrop-filter: blur(10px);
}
.szerkeszto-labl .kereso-sav { position: static; margin: 0; padding: 0; background: none; }
/* A szöveges bevitel a sáv FÖLÉ nyílik, hogy a mező a billentyűzet közelében
   maradjon, és ne told el alá a keresőt. */
.szerkeszto-labl .szoveges-doboz { order: -1; margin: 0 0 10px; }
.alsolap-labl .gomb { margin-top: 0; }
.alsolap-labl .gomb.elsodleges { flex: 1; }

/* HOZZÁVALÓ-BEKÖTÉS (kötelező pótló lap). A tétel állapota ránézésre
   látszik: amíg nincs bekötve, a lap nem enged tovább. */
.uj-alapanyag-forras {
  margin: 0 0 10px; font-size: var(--t-apro); color: var(--halvany);
  font-style: italic;
}
.potlo-talalatok { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.potlo-talalat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 12px;
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); color: var(--szoveg);
  font-size: var(--t-apro); text-align: left; cursor: pointer;
}
.potlo-talalat.aktiv {
  border-color: var(--siker);
  background: color-mix(in srgb, var(--siker) 14%, transparent);
}
.potlo-talalat b { color: var(--halvany); font-size: var(--t-cimke); }
.potlo-uj { margin-top: 6px; }
.potlo-uj summary {
  cursor: pointer; font-size: var(--t-apro); color: var(--kiemelt);
  padding: 6px 0; list-style: none;
}
.potlo-uj summary::-webkit-details-marker { display: none; }
.potlo-allapot {
  margin: 10px 0 0; font-size: var(--t-cimke); font-weight: 700;
  color: var(--figyelem);
}
.potlo-allapot.kesz { color: var(--siker); }

/* HOZZÁADÁS (B2): ragadó kereső-sáv a lap tetején, mellette a bevitel
   módjai ikonként. A három nagy tégla helyet és görgetést vitt el, miközben
   a keresés a leggyakoribb művelet. */
.kereso-sav {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 10px;
  background: var(--hatter);
}
.kereso-sav .kereso { flex: 1; min-width: 0; margin: 0; }
.ai-ikonok { flex: none; display: flex; gap: 6px; }
.ai-ikon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--lap); border: 1px solid var(--keret);
  border-radius: 12px; color: var(--kiemelt); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ai-ikon:active { background: var(--lap-vilagos); }
.ai-ikon:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: 2px; }

/* NAPLÓ (B3): a mező elöl, alatta egy sor súgó + tipp-gomb. */
.naplo-sugosor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px;
}
.naplo-lista-fej {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 18px;
}
.naplo-szakasz {
  margin: 0; font-size: var(--t-apro); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--halvany);
}
/* A pihenő-tipp aszinkron érkezik: fenntartjuk a helyét, hogy ne ugorjon el
   a tartalom írás közben. Ha nem jön tipp, a hely összecsukódik. */
.naplo-tipp-hely { min-height: 74px; margin-top: 14px; }
.naplo-tipp-hely.ures { min-height: 0; margin-top: 0; }

/* LAPOZÁS-JELZŐ a cella-lapon (A5). A lap eddig is oldalra húzva váltott,
   de semmi nem árulta el — a mozdulatot nem lehet kitalálni. */
.cellalap-lapozo {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--keret);
}
.cellalap-szomszed {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px;
  background: none; border: 0; color: var(--halvany);
  font-size: var(--t-apro); font-weight: 600; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellalap-szomszed:first-child { text-align: left; }
.cellalap-szomszed:last-child { text-align: right; }
.cellalap-szomszed:disabled { opacity: 0; pointer-events: none; }
.cellalap-pottyok { flex: none; display: flex; gap: 6px; align-items: center; }
.cellalap-potty {
  width: 6px; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--halvany) 45%, transparent);
  transition: width 0.18s ease, background 0.18s ease;
}
.cellalap-potty.aktiv { width: 18px; background: var(--potty-szin); }

/* A hero másodsora: a bevitt/cél/százalék, miután a nagy szám a maradék lett. */
.cellalap-masodsor {
  margin: -6px 0 0; font-size: var(--t-apro);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .cellalap-potty { transition: none; }
}

/* BEÁLLÍTÁS-CSOKROK. Húsz egyenrangú fejezet helyett öt csukható csoport
   (plusz egy „Egyéb", ha valami kimaradna a besorolásból): a lap szerkezete
   így egy képernyőn látszik, és a magyarázó szövegek csak akkor jönnek elő,
   amikor tényleg kellenek. A számok a beallitasok.js CSOKROK tömbjéből
   jönnek — ha ott változik, ez a komment is frissítendő. */
.beall-csokor {
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  margin-top: 10px; overflow: hidden;
  background: var(--lap);
}
.beall-csokor-fej {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; cursor: pointer;
  font-size: var(--t-torzs); font-weight: 700;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.beall-csokor-fej::-webkit-details-marker { display: none; }
/* Saját nyíl, hogy a nyitott állapot ránézésre látszódjon. */
.beall-csokor-fej::after {
  content: "›"; margin-left: auto; margin-right: 2px;
  font-size: 19px; color: var(--halvany);
  transform: rotate(90deg); transition: transform 0.18s ease;
}
.beall-csokor[open] > .beall-csokor-fej::after { transform: rotate(270deg); }
.beall-csokor-db {
  font-size: var(--t-cimke); font-weight: 800; color: var(--halvany);
  padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--halvany) 16%, transparent);
}
/* A csokron BELÜL a fejezetcímek kisebbek: a csokor neve a fő szint. */
.beall-csokor .beall-fejezet {
  font-size: var(--t-apro); margin: 12px 14px 6px;
}
.beall-csokor .beall-blokk { margin: 0 14px 12px; }
.beall-csokor.veszelyes { border-color: color-mix(in srgb, var(--veszely) 40%, transparent); }
.beall-csokor.veszelyes > .beall-csokor-fej { color: var(--veszely); }

@media (prefers-reduced-motion: reduce) {
  .beall-csokor-fej::after { transition: none; }
}

/* A fázisváltás mérföldköve: ritka, ezért ünnepélyes lehet — de a naplista
   tetején ül, ahol nem takarhat el semmit, ezért marad egyetlen sor. */
.fazis-sav {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 10px 12px; border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--edzes-szin) 14%, transparent);
  border-left: 3px solid var(--edzes-szin);
  font-size: var(--t-apro); line-height: 1.45;
}
.fazis-sav strong { color: var(--edzes-szin); }
.fazis-sav span { color: var(--halvany); }

/* ---------- fájdalom-idővonal ---------- */
.coach-fajdalom { display: block; }
.coach-fajdalom-fej {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
/* Oldal-bontás: a testtáj egy sor, de ha kiderült, melyik oldalról volt szó,
   az itt látszik. Halkabb a fejlécnél — kiegészítés, nem főszereplő. */
.coach-fajdalom-oldalak { margin-top: 4px; font-size: var(--t-cimke); }

/* ---------- hosszú AI-szövegek nyitó sora ----------
   A teljes elemzés alsó lapon él; itt csak egy kattintható sor marad, hogy a
   Haladás fül ne nőjön a duplájára. A kivonat EGY sorra vágva: ha tördelhetne,
   visszahoznánk pont azt a hosszúságot, amitől szabadulni akartunk. */
.ai-nyito {
  width: 100%; text-align: left; display: grid; gap: 3px;
  grid-template-columns: 1fr auto; align-items: center;
  padding: 12px 13px; min-height: var(--erinto);
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); color: var(--szoveg);
  cursor: pointer; touch-action: manipulation;
  font: inherit;
}
.ai-nyito:active { background: var(--lap-emelt); }
.ai-nyito-fo { grid-column: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai-nyito-cim { font-size: var(--t-apro); font-weight: 700; }
.ai-nyito-kor { font-size: var(--t-cimke); }
.ai-nyito-kivonat {
  grid-column: 1; font-size: var(--t-cimke); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-nyito-nyil { grid-column: 2; grid-row: 1 / -1; color: var(--halvany); flex: none; }

/* A lapra került szöveg kapjon rendes olvasási ritmust — itt már nem
   pásztázunk, hanem olvasunk. */
.ai-lap-torzs > * + * { margin-top: 12px; }
.ai-lap-torzs .coach-osszegzes { font-size: var(--t-torzs); line-height: 1.55; }
.fajd-idovonal { display: flex; gap: 2px; margin-top: 8px; height: 22px; align-items: flex-end; }
.fajd-nap {
  flex: 1; min-width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--halvany) 22%, transparent);
  height: 4px;
}
/* Magasság ÉS szín is kódolja az erősséget — színvakság mellett is olvasható. */
.fajd-nap.e1 { height: 30%; background: color-mix(in srgb, var(--figyelem) 45%, transparent); }
.fajd-nap.e2 { height: 48%; background: color-mix(in srgb, var(--figyelem) 70%, transparent); }
.fajd-nap.e3 { height: 66%; background: var(--figyelem); }
.fajd-nap.e4 { height: 84%; background: color-mix(in srgb, var(--veszely) 78%, var(--figyelem)); }
.fajd-nap.e5 { height: 100%; background: var(--veszely); }

/* ---------- edzésen belüli kardió ---------- */
.edzes-kardio-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.edzes-kardio {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--kiemelt) 10%, var(--lap-vilagos));
  border: 1px solid var(--keret);
}
.edzes-kardio > span:first-child { font-weight: 600; font-size: var(--t-apro); }
.edzes-kardio > .halvany { flex: 1; min-width: 0; font-size: var(--t-apro); }

/* ---------- pulzusgörbe ---------- */
.pulzus-blokk {
  /* A naplósor alá bújik: negatív felső margóval hozzátapad, hogy egy
     egységnek látszódjon, ne külön kártyának. */
  margin: -6px 0 10px;
  padding: 8px 12px 10px;
  border: 1px solid var(--keret);
  border-top: none;
  border-radius: 0 0 var(--sugar) var(--sugar);
  background: var(--lap);
}
.pulzus-svg { display: block; width: 100%; height: 96px; }
.pulzus-csucs { font-size: var(--t-cimke); font-weight: 600; fill: var(--szoveg); }
.pulzus-tengely { font-size: var(--t-cimke); fill: var(--halvany); }

.pulzus-sav {
  display: flex; gap: 2px; height: 6px; margin-top: 6px;
  border-radius: var(--sugar-pirula); overflow: hidden;
}
.pulzus-sav > span { display: block; min-width: 2px; }
.pulzus-jelmagyarazat {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px;
  font-size: var(--t-cimke); color: var(--halvany);
  font-variant-numeric: tabular-nums;
}
.pulzus-jelmagyarazat span { display: inline-flex; align-items: center; gap: 5px; }
.pulzus-jelmagyarazat i {
  width: 8px; height: 8px; border-radius: 2px; flex: none;
}
.pulzus-cimke {
  margin-top: 8px; font-size: var(--t-cimke); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--halvany);
}

/* ---------- csukható csoportok a bevásárlólistán ---------- */
.csoport-fej {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--erinto);
  margin: 14px 0 6px; padding: 6px 4px;
  border: none; background: transparent; color: var(--halvany);
  font-size: var(--t-apro); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.csoport-fej.kiemelt-fej { color: var(--szoveg); }
.csoport-cim { flex: 1; min-width: 0; }
.csoport-nyil { transition: transform 0.15s ease; font-size: var(--t-apro); }
.csoport-nyil.zarva { transform: rotate(-90deg); }
.csoport-db {
  padding: 2px 9px; border-radius: var(--sugar-pirula);
  background: var(--lap-vilagos); color: var(--halvany);
  font-size: var(--t-apro); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.csoport-fej.kiemelt-fej .csoport-db {
  background: color-mix(in srgb, var(--kiemelt) 20%, var(--lap-vilagos));
  color: var(--szoveg);
}
@media (prefers-reduced-motion: reduce) { .csoport-nyil { transition: none; } }
/* „Venni kell" fejléc + másolás ikongomb egy sorban. */
.csoport-fej-sor { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.csoport-fej-sor .csoport-fej { flex: 1; min-width: 0; margin: 0; }
.csoport-fej-sor .masol-gomb { width: auto; margin: 0; padding: 0 12px; min-height: var(--erinto); }

/* ---------- húzható sorrend ---------- */
.rendezo-lista { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.rendezo-sor {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--erinto); padding: 8px 12px;
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  background: var(--lap-vilagos);
  /* A húzott sor a többi FÖLÖTT ússzon, és ne legyen átmenet — az animáció
     az ujj alatt késleltetve követné a mozgást. */
  position: relative; z-index: 0;
}
.rendezo-sor.huzva {
  z-index: 2; box-shadow: var(--melyseg);
  border-color: var(--kiemelt); opacity: 0.95;
}
/* Húzás közben ne jelöljön ki szöveget, és ne görgessen a lista. */
.rendezo-lista.huzas-alatt { user-select: none; -webkit-user-select: none; }
.rendezo-fogo {
  flex: none; width: 32px; min-height: var(--erinto);
  display: flex; align-items: center; justify-content: center;
  color: var(--halvany); font-size: var(--t-cim); cursor: grab;
  /* KELL: enélkül az iOS görgetésnek veszi az ujjhúzást, és a sor nem mozdul. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.rendezo-sor.huzva .rendezo-fogo { cursor: grabbing; color: var(--kiemelt); }

/* ---------- sorrend-szerkesztő: csoportos kijelölés ---------- */
.rendezo-szam {
  flex: none; min-width: 22px;
  color: var(--halvany); font-size: var(--t-apro);
  font-variant-numeric: tabular-nums; text-align: right;
}
.rendezo-sor .talalat-nev { flex: 1; min-width: 0; }
.rendezo-sor.kijelolve {
  border-color: var(--kiemelt);
  background: color-mix(in srgb, var(--kiemelt) 16%, var(--lap-vilagos));
}
.rendezo-pipa { flex: none; color: var(--kiemelt); font-weight: 700; }

/* Célválasztó mód: a sorok „ide" jelentésűek, ezt a kurzor és a felső él jelzi. */
.rendezo-lista.cel-mod .rendezo-sor { cursor: copy; }
.rendezo-lista.cel-mod .rendezo-sor:not(.kijelolve):hover {
  border-top-color: var(--kiemelt);
  box-shadow: inset 0 2px 0 var(--kiemelt);
}

/* A kijelölő sáv az alsó lap aljához tapad, hogy görgetés közben is elérd. */
.kijelolo-sav {
  position: sticky; bottom: 0; z-index: 3;
  /* KÉT SOR: a darabszám és a műveletek külön sorban. Egy sorba zsúfolva
     390 px-en a „4 kijelölve" felirat két karakterre nyomódott össze, és a
     gombok feliratai levágódtak. */
  display: flex; flex-direction: column; gap: 8px;
  margin: 10px -2px -2px; padding: 10px 12px;
  border-radius: var(--sugar);
  background: color-mix(in srgb, var(--lap-vilagos) 92%, var(--hatter));
  border: 1px solid var(--keret);
  box-shadow: var(--melyseg);
}
.kijelolo-fej { display: flex; align-items: center; gap: 8px; }
.kijelolo-db {
  flex: 1; min-width: 0; font-size: var(--t-apro); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* A kijelölés és a rá vonatkozó művelet két külön sor: korábban négy gomb
   állt egy sorban négyféle stílusban, és az elsődleges width:100%-a miatt
   amúgy is önálló sorba tört — csak épp 8 px-cel elcsúszva. */
.kijelolo-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.kijelolo-sor { display: flex; gap: 8px; width: 100%; }
.kijelolo-sor .gomb { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.kijelolo-gombok .gomb.elsodleges { width: 100%; }
.kijelolo-sav .gomb { min-height: 42px; padding: 6px 10px; font-size: var(--t-apro); }
.kijelolo-sav .gomb.szellem { flex: none; min-width: 42px; }
.kijelolo-sugo { margin: 0; font-size: var(--t-apro); color: var(--halvany); }
.gomb.veszelyes {
  border-color: color-mix(in srgb, var(--veszely) 55%, var(--keret));
  color: var(--veszely);
}
.gomb.veszelyes[data-eles="1"] { background: var(--veszely); color: #fff; }

/* A teljes sorozat-sor kattintható, ezért kapjon visszajelzést is. */
.sr { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sr:active { background: color-mix(in srgb, var(--kiemelt) 12%, var(--lap-vilagos)); }
.sr input, .sr label { cursor: auto; }

/* ---------- pihenő: az utolsó 10 másodperc ---------- */
/* Lejáratkor a teljes sáv villog — ez a „mehetsz" jelzés. */
@keyframes piheno-villog {
  0%, 100% { background: var(--lap); }
  50%      { background: color-mix(in srgb, var(--siker) 40%, var(--lap)); }
}

.beall-kapcsolo {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--erinto); cursor: pointer;
}
.beall-kapcsolo input { width: 22px; height: 22px; accent-color: var(--kiemelt); flex: none; }
.beall-kapcsolo span { font-size: var(--t-torzs); }

/* Beviteli hiba az űrlap előnézetében (pl. hiányzó perc a kardiónál). */
.mezo-hiba { color: var(--veszely); }

/* ---------- párosító: visszavonható „nem alapanyag” jelölések ---------- */
.par-kihagyottak {
  margin: 24px 0 40px; padding: 12px 14px;
  border: 1px solid var(--keret); border-radius: var(--sugar);
  background: var(--lap);
}
.par-kihagyottak summary { cursor: pointer; font-size: var(--t-apro); color: var(--halvany); }
.par-kihagyott {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--keret); font-size: var(--t-apro);
}
.par-kihagyott > span:first-child { flex: 1; min-width: 180px; }
.par-kihagyott .halvany { font-size: var(--t-apro); font-style: italic; }

/* ---------- terv-szerkesztő ---------- */
/* KOMPAKT SOR: a szerkesztő ✎ nem lebeg a sor fölött, hanem MELLETTE ül —
   egy sor magas, nincs mit takarnia. A plakát-kártyáknál (hero) marad a
   lebegő elhelyezés, ott a nagy háttérszám úgyis kitölti a sarkot. */
.terv-blokk { padding: 12px; margin: 12px 0; }
.terv-valtozat { padding: 8px 0; border-top: 1px solid var(--keret); }
.terv-valtozat:first-child { border-top: none; }
.terv-fej { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* Csak akkor jelenik meg, ha ez a változat MÁS gyakorlat, mint a kártya címe. */
.terv-valtozat-nev { flex: 1 1 100%; font-size: var(--t-apro); color: var(--halvany); }
.terv-cimke {
  flex: 1; min-width: 120px; min-height: 44px; padding: 6px 10px;
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  /* 16px alatt az iOS ránagyít a mezőre, és nem nagyít vissza */
  font-size: var(--t-torzs);
}
.terv-piheno { display: block; font-size: var(--t-apro); color: var(--halvany); margin: 4px 0; }
.terv-piheno input {
  width: 74px; min-height: 44px; padding: 4px 8px; margin-left: 6px;
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  font-size: var(--t-torzs); font-variant-numeric: tabular-nums;
}
.terv-setek { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
/* RÁCS, nem tördelő flex: 360-370 px-es kijelzőn a törlő ✕ korábban önálló
   sorba került, jobbra tolva — elszakadt attól a sorozattól, amit töröl. */
.terv-set {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--sugar-kicsi); background: var(--lap-vilagos);
  font-size: var(--t-apro);
}
.terv-set-mezok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tartomany-jel { color: var(--halvany); }
.terv-set label { display: inline-flex; align-items: center; gap: 3px; color: var(--halvany); }
.terv-set input {
  width: 56px; min-height: 44px; padding: 2px 6px; text-align: center;
  background: var(--lap); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  font-size: var(--t-torzs); font-variant-numeric: tabular-nums;
}
/* min-width, nem width: a JS „Biztos?"-ra írja át a feliratot, és az kilógott. */
.terv-set-torol {
  flex: none; min-width: 34px; height: 34px; padding: 0 9px; border-radius: var(--sugar-kicsi);
  border: 1px solid var(--keret); background: transparent; white-space: nowrap;
  color: var(--halvany); font: inherit; font-size: var(--t-apro); cursor: pointer;
}
.terv-set-torol.eles {
  color: var(--veszely); border-color: var(--veszely);
  border-radius: var(--sugar-pirula);
}

.terv-blokk-fej { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.terv-blokk-cim { flex: 1; min-width: 0; font-size: var(--t-torzs); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terv-uj-sor { display: flex; gap: 8px; }
.terv-uj-sor select {
  /* min-width: 0 nélkül a select a leghosszabb opciója szerint feszül szét,
     és vízszintesen kitolja az egész lapot. */
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 10px;
  font-size: var(--t-torzs);
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
}

.undo-sor {
  /* Az allap aljára RAGASZTVA: hosszú listánál görgetés nélkül is látszik. */
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  margin: 14px -14px -14px; padding: 10px 14px;
  background: color-mix(in srgb, var(--hatter) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--keret);
}
.undo-gomb {
  min-width: var(--erinto); min-height: var(--erinto);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
}
.undo-gomb[disabled] { opacity: 0.35; }
.undo-koz { flex: 1; }

.ma-nem {
  position: relative;
  flex: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--halvany);
  border: 1px solid var(--keret); border-radius: 50%;
  font-size: var(--t-torzs); line-height: 1; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bev-kereso { margin-bottom: 10px; }

.szerk-mod { flex: none; min-width: var(--erinto); }

.meret-lista { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.meret-sor {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--lap); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); padding: 10px 12px;
}
.meret-cimke { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meret-sugo { font-size: var(--t-apro); }
.meret-sor .set-mezo { flex: none; }
.meret-sor input { width: 84px; text-align: right; }

.ma-terv { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }

.valtozat-torlo {
  position: relative;
  margin-left: auto; flex: none; min-width: 34px; min-height: 34px;
  background: transparent; color: var(--halvany);
  border: 1px solid var(--keret); border-radius: 50%;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.valtozat-torlo.eles { color: var(--veszely); border-color: var(--veszely); border-radius: var(--sugar-pirula); padding: 0 10px; }

.naptar-valto .nap-cimke { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.naptar-valto .honap-nev { color: var(--halvany); }
.naptar-valto .gomb.apro { border-radius: 50%; width: var(--erinto); height: var(--erinto); padding: 0; display: grid; place-items: center; }
/* ---------- A HÓNAP EGY GYŰRŰN (N5, Levi választása, 2026-09-23) ----------
   Fent az elseje, az óra járása szerint körbe, közepén a mai nap. Minden
   narancs: a SZELET a kalória (színes és annál mélyebb, minél közelebb járt a
   kerethez; üres, ha fölötte), a belső PÖTTY az edzés (teli súlyzós, üres
   kardió). A mai nap arany és nincs elbírálva, a jövő halvány.
   A MOZGÁS a rács nyelvén, a közös óráról: a szeletek az elsejétől sorra
   bukkannak elő, utánuk a pöttyök, végül beúszik a közép; élet gyanánt egy
   fénycsík jár körbe a külső szélen (mint a hétkörön), a mai szelet lélegzik,
   a gyűrű alatt halk derengés lüktet. */
.naptar-valto .honap-nev { font-size: var(--t-apro); font-weight: 700; letter-spacing: 0.02em; color: var(--szoveg); }
.nk5-doboz { position: relative; }
/* A gyűrű kis telefonon összébb megy, hogy a jelmagyarázat és a csík is
   kiférjen; nagy kijelzőn a természetes méretét tartja. */
.nk5-doboz svg { max-height: min(340px, 42vh); }
.nc-jel { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  margin: 10px 0 0; font-size: var(--t-cimke); color: var(--halvany); }
.nc-jel span { display: inline-flex; align-items: center; gap: 6px; }
.nc-m { width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 1.5px solid transparent; box-sizing: border-box; }
.nc-m.belefert { background: color-mix(in srgb, var(--naptar) 82%, transparent); }
.nc-m.tul { border-color: var(--naptar); }
.nc-m.tures { background: color-mix(in srgb, var(--figyelem) 70%, transparent); }
.nc-p { width: 8px; height: 8px; border-radius: 50%; background: var(--naptar);
  display: inline-block; box-sizing: border-box; }
.nc-p.kardio { background: none; border: 1.5px solid var(--naptar); }
.nc-p.terv { opacity: 0.4; }
.nk5-szelet { transform-box: fill-box; transform-origin: center; cursor: pointer;
  animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-suru)); }
.nk5-szelet.ma {
  animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards,
             nk5-lelegzik 2.6s ease-in-out infinite;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-suru)), var(--be-elet); }
@keyframes nk5-lelegzik {
  0%, 100% { stroke-width: 2.5; filter: drop-shadow(0 0 0 transparent); }
  45% { stroke-width: 3.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--figyelem) 70%, transparent)); }
}
.nk5-pont { transform-box: fill-box; transform-origin: center;
  animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards;
  animation-delay: calc(var(--be-eltol) + 380ms + var(--i, 0) * 10ms); }
.nk5-cimke { animation: elo-elotunik 300ms ease backwards;
  animation-delay: calc(var(--be-eltol) + 30ms + var(--i, 0) * var(--be-lepcso-suru)); }
.nk5-kozep { animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--be-szam); }
.nk5-feny { transform-box: view-box; transform-origin: var(--cx) var(--cy); opacity: 0.9;
  animation: elo-elotunik 400ms ease backwards, nk5-korbe 12s linear infinite;
  animation-delay: var(--be-elet), 0s; }
@keyframes nk5-korbe { to { transform: rotate(360deg); } }
.nk5-udvar { transform-box: fill-box; transform-origin: center; animation: elo-dereng 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .nk5-szelet, .nk5-szelet.ma, .nk5-pont, .nk5-cimke, .nk5-kozep, .nk5-feny, .nk5-udvar { animation: none !important; }
}

.uj-recept-mezo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.uj-recept-mezo input, .uj-recept-mezo textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
}
.uj-alapanyag { padding: 12px; margin-bottom: 10px; }
/* A katalógus-pótló makró-mezői. Korábban `.makro-sor` volt a neve, ami
   ütközött a napi összegző azonos nevű sávjával — a flex felülírta a gridet,
   és a fehérje/CH/zsír csíkok 0 szélesre estek. */
.uj-makro-sor { display: flex; gap: 8px; flex-wrap: wrap; }
.uj-makro-sor input { width: 64px; text-align: right; }

/* ================= Obszidián tipográfia és mozgás ================= */
h1, h2, h3, .szekcio-cim { font-weight: 800; letter-spacing: 0.01em; }
/* A szakaszcímek egy része mostantól VALÓDI címsor (h2), hogy a
   képernyőolvasó rotorja találjon fogódzót a fülképernyőkön is — eddig
   mind a négy fül üres címsor-listát adott. A megjelenésük nem változik:
   a saját osztályuk viszi a méretet, itt csak a böngésző alapmargóját
   nullázzuk. */
h2.cimke, h2.szekcio-cim, h2.szokasos-cim { margin: 0; }
h2.szekcio-cim { margin: 4px 0 12px; }
h2.szokasos-cim { margin: 14px 2px 8px; }
/* EGY szakaszcím-stílus az egész appban. Korábban két, egymásnak ellentmondó
   .szekcio-cim blokk élt 1379 sor távolságra, plusz külön .beall-fejezet és
   .alcim ugyanarra a szerepre. */
.szekcio-cim {
  margin: 4px 0 12px;
  font-size: var(--t-cimke); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--cimke-ritkitas); color: var(--halvany);
}
.elonezet strong {
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.gomb { transition: transform 0.12s, background 0.2s, border-color 0.2s; }
.gomb:active { transform: scale(0.97); }
.spajz-pipa { transition: transform 0.15s, background 0.2s; }
.megvan .spajz-pipa { animation: pipapop 0.28s; }
@keyframes pipapop { 45% { transform: scale(1.22); } }
.alsolap { animation: lapfel 0.32s cubic-bezier(0.2, 0.8, 0.25, 1); }
@keyframes lapfel { from { transform: translateY(26px); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .alsolap, .megvan .spajz-pipa { animation: none; }
  .gomb, .gomb:active { transition: none; transform: none; }
}
.skeleton {
  border-radius: var(--sugar-kicsi); height: 15px; margin: 9px 0;
  background: linear-gradient(100deg, var(--lap-vilagos) 40%, var(--lap-emelt) 50%, var(--lap-vilagos) 60%);
  background-size: 220% 100%; animation: csillan 1.4s infinite;
}
@keyframes csillan { to { background-position: -120% 0; } }

.makro-fej { display: flex; justify-content: space-between; font-size: var(--t-apro); margin-bottom: 4px; }
.makro-fej b { font-variant-numeric: tabular-nums; }
.makro-sav { height: 6px; border-radius: var(--sugar-pirula); background: var(--lap-vilagos); overflow: hidden; }
.makro-sav > i { display: block; height: 100%; border-radius: var(--sugar-pirula);
  transition: width 0.8s cubic-bezier(0.3, 0.7, 0.3, 1); }

/* SVG tab-ikonok: a szöveg-alapú méretezés helyett fix doboz. */
.ful svg.ikon { width: 22px; height: 22px; display: block; margin: 0 auto 1px; }
.ful.aktiv svg.ikon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ful-szin) 55%, transparent)); }
#beallitasGomb svg { display: block; }

.gr-pont { stroke: var(--lap); }

/* Naplózott recept a napi nézetben: kibontható kártya hozzávalónként. */
.recept-naplo { border-radius: var(--sugar-kicsi); background: var(--lap-vilagos); }
.recept-naplo-fej { cursor: pointer; list-style: none; font-weight: 700; }
.recept-naplo-fej::-webkit-details-marker { display: none; }
.naplo-nyil { display: inline-block; color: var(--halvany); font-size: var(--t-apro);
  transition: transform 0.18s; margin-right: 2px; }
.recept-naplo[open] .naplo-nyil { transform: rotate(90deg); }
.recept-naplo-torzs { padding: 0 10px 10px 22px; }
.recept-naplo-torzs .tetel-sor { border-top: 1px solid var(--keret); }
.recept-naplo-bovit { margin-top: 8px; }

/* A lap bezárása: ugyanaz a mozgás visszafelé, a fátyol is kifakul.
   A ZÁRÁS GYORSABB A NYITÁSNÁL. Nyitáskor a mozgás információ (honnan jön a
   lap), záráskor viszont már döntöttél — ott a mozgás csak útban van. Ez az
   appban a leghosszabb átmenet volt, és érződött is rajta. */
.alsolap-hatter { animation: fatyolfel 0.25s; }
.alsolap-hatter.zarodik { animation: fatyolle 0.16s forwards; pointer-events: none; }
.alsolap-hatter.zarodik .alsolap {
  animation: laple 0.18s cubic-bezier(0.55, 0, 0.75, 0.4) forwards;
}
@keyframes fatyolfel { from { opacity: 0; } }
@keyframes fatyolle { to { opacity: 0; } }
@keyframes laple { to { transform: translateY(108%); } }
@media (prefers-reduced-motion: reduce) {
  .alsolap-hatter, .alsolap-hatter.zarodik, .alsolap-hatter.zarodik .alsolap {
    animation: none;
  }
}

/* A fülváltás SZÁNDÉKOSAN animáció nélküli: a tartalom aszinkron töltődik,
   ezért bármilyen mozgás beleütközik a renderelésbe — telefonon ez akadozásnak
   látszott. A lapok felúszása marad, ott a mozgás egy állandó tartalmon fut. */
main { overflow-x: hidden; }

/* A DOKK SZÁMLÁLÓ-JELVÉNYEI. A méret a rendszer CÍMKE-fokozata, nem az
   „apró" törzsé: 15 px-en a szám nagyobb volt, mint amit egy 48 px-es kör
   sarkában el lehet viselni, és elvitte a figyelmet magáról az ikonról.
   Ugyanaz a fokozat, amit a bevásárlás-jelvény (`.jelveny`) is visel. */
.kave-jelveny {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  border-radius: var(--sugar-pirula); background: var(--figyelem); color: #201503;
  font-size: var(--t-cimke); font-weight: 800; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; line-height: 1;
}
.kave-jelveny.viz-jelveny { background: var(--kiemelt); color: var(--kiemelt-szoveg); }
.kave-jelveny.viz-jelveny.kesz { background: var(--siker); color: #12210a; }

/* Ütközés-lap: a lezárt sorok halványabbak. */
.utkozes-sor.lezart { opacity: 0.55; }

/* Szerkesztés-ikon: vékony vonalas ceruza, mindenhol azonos méretben. */
.ikon-szerk { display: block; margin: 0 auto; }
.szerk-mod.aktiv { color: var(--kiemelt); border-color: var(--kiemelt);
  background: color-mix(in srgb, var(--kiemelt) 14%, var(--lap-vilagos)); }

/* ---------- Edzés-részletlap ---------- */
.reszlet-szamok {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px;
}
.reszlet-szamok > div {
  background: var(--lap-vilagos); border-radius: var(--sugar-kicsi);
  padding: 12px 10px; text-align: center;
}
.reszlet-szamok strong {
  display: block; font-size: var(--t-cim); font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.reszlet-szamok span { font-size: var(--t-cimke); text-transform: uppercase;
  letter-spacing: var(--cimke-ritkitas); font-weight: 700; }
.reszlet-gyakorlat {
  border-top: 1px solid var(--keret); padding: 14px 0 4px;
}
.reszlet-fej { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.reszlet-fej strong { font-size: var(--t-torzs); font-weight: 700; flex: 1; min-width: 0; }
.reszlet-valtozas {
  flex: none; font-size: var(--t-apro); font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--sugar-pirula);
}
.reszlet-valtozas.jo { color: var(--siker);
  background: color-mix(in srgb, var(--siker) 16%, transparent); }
.reszlet-valtozas.vissza { color: var(--figyelem);
  background: color-mix(in srgb, var(--figyelem) 16%, transparent); }
.reszlet-setek { display: flex; flex-wrap: wrap; gap: 6px; }
.set-pirula {
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  border-radius: var(--sugar-pirula); padding: 4px 11px; font-size: var(--t-apro);
  font-variant-numeric: tabular-nums;
}
.set-pirula.amrap { border-color: var(--kiemelt); color: var(--kiemelt); }
.reszlet-multkor { margin-top: 8px; font-size: var(--t-apro); }
.reszlet-szamok strong small { font-size: var(--t-apro); font-weight: 700; opacity: 0.65; }

/* ---------- Fotós naplózás: kereső + exponáló ----------
   Ez a blokk hiányzott: a `.foto-kereso` és a `.foto-exponal` osztályokra
   semmilyen szabály nem vonatkozott. Következmény a telefonon: a videó a
   NATÍV méretében (1920×1080) próbált megjelenni, ami a keskeny képernyőn
   „bezoomolt" képnek látszik, az exponáló gomb pedig — mivel felirat nélküli,
   csak `aria-label`-lel ellátott elem — nulla méretű, láthatatlan pont volt.
   A méretezés a bevált vonalkód-kereső mintáját követi. */
.foto-kereso {
  position: relative; margin: 12px 0; border-radius: var(--sugar);
  overflow: hidden; background: #000;
}
/* `contain`, nem `cover`: a rögzítés a videó TELJES képét menti a vászonra,
   tehát a keresőnek is a teljeset kell mutatnia. `cover`-rel a széleket
   levágnánk a képernyőn, a fotóra viszont rákerülnének — a felhasználó mást
   fotózna, mint amit lát. A fix magasság azért kell, hogy a kereső nagy
   legyen: 16:9-es kamerakép a telefon szélességében magától csak ~195 px. */
.foto-kereso video {
  display: block; width: 100%; height: 44dvh; object-fit: contain;
  background: #000;
}
/* Klasszikus exponáló: fehér gyűrű a kereső alján, benne tömör korong. A
   `--erinto` fölötti méret azért kell, mert egy kézzel, félig felemelt
   telefonnal céloz az ember. */
.foto-exponal {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 66px; height: 66px; padding: 0;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.9);
  background: transparent; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.foto-exponal::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: #fff;
  transition: transform 0.12s ease;
}
.foto-exponal:active::after { transform: scale(0.88); }
/* Amíg a kamera nem áll készen, a gomb halvány — de LÁTSZIK, hogy hol lesz. */
.foto-exponal:disabled { opacity: 0.4; cursor: default; }
.foto-exponal:disabled::after { background: rgba(255, 255, 255, 0.6); }
.foto-exponal:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: 3px; }

/* ---------- „megvan a kép" visszajelzés ----------
   A panasz jogos volt: a koppintás után a kereső TOVÁBB ÉLT, tehát semmi nem
   mondta, hogy a fénykép elkészült. Három jelzés jár együtt, mert egy önmagában
   elveszik: villanás (a zárszerkezet), a kép megfagy (a mozgás megáll), és
   rákerül az „elemzem" réteg (megmondja, mi történik most). */
.foto-kereso img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  background: #000;
  animation: fotoBefagy 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* A kész kép egy pillanatra visszahúzódik, mint egy előhívott felvétel. */
@keyframes fotoBefagy { from { transform: scale(1.06); opacity: 0.4; } }

.foto-villanas {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none;
}
.foto-villanas.villan { animation: fotoVillan 0.32s ease-out; }
@keyframes fotoVillan { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.foto-reteg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  color: #fff; text-align: center;
}
.foto-reteg-szoveg { font-size: var(--t-torzs); font-weight: 700; text-wrap: balance; }
.foto-porgo {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--kiemelt);
  animation: forog 0.85s linear infinite;
}
/* Amíg az elemzés fut, az exponáló gomb nem hívogat: lehalkul, és a helyét
   átveszi a réteg. */
.foto-exponal.kesz { opacity: 0.25; }

@media (prefers-reduced-motion: reduce) {
  .foto-kereso img { animation: none; }
  .foto-villanas.villan { animation: none; }
  .foto-porgo { animation-duration: 2.4s; }
}

/* ---------- Vonalkód-beolvasó ---------- */
.vk-kereso { position: relative; margin: 12px 0; border-radius: var(--sugar);
  overflow: hidden; background: #000; }
.vk-kereso video { display: block; width: 100%; max-height: 46dvh;
  object-fit: cover; }
/* Célvonal: a felhasználó erre igazítja a kódot — vízszintesen olvasunk. */
.vk-cel {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: var(--veszely); box-shadow: 0 0 12px var(--veszely);
  transform: translateY(-50%); pointer-events: none;
}
.vk-sugo {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 10px 14px; font-size: var(--t-apro); line-height: 1.4; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72) 45%);
  text-align: center;
}

/* ---------- görgethető számválasztó (iOS-kerék) ---------- */
.gorgeto-lap { height: auto; }
.gorgeto-torzs { position: relative; padding: 6px 14px 2px; }
.kerek {
  height: 220px; overflow-y: auto; scroll-snap-type: y mandatory;
  /* Az `overflow-x` a CSS szabályai szerint magától `auto`-vá válik, amint a
     másik tengely nem `visible` — emiatt a kerék oldalra is elhúzható volt.
     A `touch-action: pan-y` ugyanezt zárja ki érintésre, a `contain` pedig
     megakadályozza, hogy a görgetés átragadjon a mögöttes lapra. */
  overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}
.kerek::-webkit-scrollbar { display: none; }
.kerek-parna { height: 88px; flex: none; }
.kerek-elem {
  height: 44px; display: flex; align-items: center; justify-content: center;
  /* `scroll-snap-stop` NÉLKÜL: az `always` megtiltaná az elemek átugrását,
     vagyis a lendületes húzás mindig a szomszédos számnál fékezne le. Az iOS-es
     érzethez épp az kell, hogy a pörgetés továbbguruljon, és csak a végén
     tapadjon a legközelebbi értékre. */
  scroll-snap-align: center;
  font-size: var(--t-cim); font-weight: 600; color: var(--halvany);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.kerek-elem.valasztott {
  color: var(--szoveg); font-size: var(--t-nagy); font-weight: 800; transform: scale(1.02);
}
.kerek-sav {
  position: absolute; left: 14px; right: 14px; top: 50%; height: 44px;
  transform: translateY(-50%); pointer-events: none;
  border-top: 1px solid var(--keret); border-bottom: 1px solid var(--keret);
  background: color-mix(in srgb, var(--kiemelt) 8%, transparent);
  border-radius: var(--sugar-kicsi);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 16px;
}
.kerek-egyseg { font-size: var(--t-apro); font-weight: 700; color: var(--halvany); }
/* KÉT kerék egymás mellett (gramm + saját mértékegység). A kiemelő sáv
   keréknként külön él, ezért a pozicionálás az oszlopra kerül. */
.gorgeto-torzs.ketkerek { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kerek-oszlop { position: relative; min-width: 0; }
.gorgeto-torzs.ketkerek .kerek-sav { left: 0; right: 0; }
.gorgeto-torzs.ketkerek .kerek-elem { font-size: var(--t-cim); }
.gorgeto-torzs.ketkerek .kerek-elem.valasztott { font-size: var(--t-nagy); }
.gorgeto-torzs.ketkerek .kerek-egyseg { font-size: var(--t-cimke); }
.gorgeto-kesz { margin: 6px 14px 14px; width: calc(100% - 28px); }
@media (prefers-reduced-motion: reduce) {
  .kerek-elem { transition: none; }
}

/* A recept-kártya törlő-gombja a summary-n KÍVÜL él (gomb-a-gombban iOS-en
   megbízhatatlan), a helyét egy üres távtartó tartja a fejlécen. */
.recept-naplo { position: relative; }
.recept-naplo-torlo { position: absolute; top: 4px; right: 6px; z-index: 1; }
.tetel-torol-hely { width: 40px; flex: none; }

/* Lecsukható étkezés-blokk: a NÉV a kapcsoló, hogy a × és a + ne kerüljön
   gombba ágyazva (iOS-en az félreüt). */
.etkezes-valto {
  display: flex; align-items: center; gap: 7px;
  min-height: var(--erinto); padding: 0; margin: 0;
  background: transparent; border: none; color: var(--szoveg);
  font: inherit; font-size: var(--t-torzs); font-weight: 600; text-align: left;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.etkezes-valto .csoport-nyil { color: var(--halvany); }
/* A NÉV-KAPCSOLÓ MÉRETE a név-domináns fejléchez (lásd fent). Külön szabály
   kell, mert a `.etkezes-valto` LEJJEBB áll a fájlban, mint a `.etkezes-nev`,
   és a saját `font-size`-ja különben felülírná a 20 px-et.
   FLEX-TÖRDELÉS: a gomb flex-konténer (nyíl + név + idő), és négy ikon mellett
   390 px-en nem fér ki egy sorba — tördelve az idő a név ALÁ kerül, ami
   olvasható; enélkül a szöveg kilógott és a kalória rácsúszott. */
.etkezes-fej .etkezes-valto {
  flex: 1 1 0; min-width: 0; flex-wrap: wrap; row-gap: 0;
  font-size: var(--t-cim); font-weight: 700;
}
/* Csukva egyetlen verzál címke — ott nincs mit tördelni. */
.etkezes-blokk.zarva .etkezes-valto { flex-wrap: nowrap; }
/* A KALÓRIA SOHA NEM CSÚSZIK A NÉVRE: fix szélességet kap, a név zsugorodik
   helyette. (Enélkül mindkettő rugalmas volt, és negatív helyen egymásra
   csúsztak — a „12:40" alatt ott ült a „680".) */
.etkezes-fej .etkezes-kcal { flex: none; }
.etkezes-blokk.zarva .etkezes-kcal { color: var(--szoveg); font-weight: 700; }

/* Beállítások: címkézett választó/mező (nem a monospace .beall-mezo). */
.beall-valaszto {
  display: block; margin-bottom: 10px;
  font-size: var(--t-apro); color: var(--halvany);
}
.beall-valaszto select,
.beall-valaszto input {
  display: block; width: 100%; margin-top: 5px; min-height: 44px;
  padding: 8px 10px; font: inherit; font-size: var(--t-torzs);
  background: var(--lap-vilagos); color: var(--szoveg);
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
}

/* Receptlap: adag-váltó és a skálázott mennyiség a hozzávaló mellett. */
.adag-valto {
  border: 1px solid var(--kiemelt); color: var(--kiemelt);
  background: color-mix(in srgb, var(--kiemelt) 12%, transparent);
  /* `font-family: inherit`, NEM `font: inherit`: az utóbbi a betűméretet is
     visszaállítja az örökölt 16 px-re, és ettől lógott ki a csip a sorból. */
  font-family: inherit; font-size: var(--t-apro); font-weight: 600;
  cursor: pointer; touch-action: manipulation;
}
.hozzavalo-menny {
  flex: none; font-size: var(--t-apro); font-weight: 700; color: var(--kiemelt);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hozzavalo.opcionalis .hozzavalo-menny { color: var(--halvany); font-weight: 600; }

/* ==================== FITNESS LAB — közös építőkockák ==================== */

/* Nagy számok: Nunito 900, tabuláris — mindenhol, ahol a szám a főszereplő. */
.szam {
  font-family: "Nunito", "Archivo", sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.cella-toltes {
  /* Szélesebb a csőnél és lelóg alul: ±14 fokig dönthető úgy, hogy a
     sarkoknál ne villanjon ki a "levegő". */
  position: absolute; left: -35%; right: -35%; bottom: -26px; height: 0%;
  transition: height 1.1s cubic-bezier(0.3, 0.7, 0.25, 1);
  transform: rotate(var(--dol, 0deg));
  transform-origin: 50% 10px;
  will-change: transform;
}
.buborek {
  position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); animation: felszall 3.4s ease-in infinite;
}
.buborek.b2 { width: 3px; height: 3px; animation-duration: 2.6s; animation-delay: 1.1s; }
.buborek.b3 { width: 4px; height: 4px; animation-duration: 4.1s; animation-delay: 2s; }
/* A `bottom` százaléka a FOLYADÉK magasságához mér — a buborék útja együtt
   nő a töltéssel, és sosem hagyja el a felszínt. */
@keyframes felszall {
  0% { bottom: 4px; opacity: 0; }
  12% { opacity: 0.7; }
  80% { opacity: 0.55; }
  100% { bottom: calc(100% - 6px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .buborek { animation: none; }
  .buborek { display: none; }
}

/* ==================== JELVÉNY-FOGLALAT =============   A jel köré rajzolt keret: fokozatonként gazdagodik (puszta kör → tintált
   érme → vert perem → hatszög-plakett → örvény). A jelek maguk változatlanok
   — a rang a foglalatból olvasható le.

   MINDEN a `--sj-szin`-ből él: a körvonal, a halványabb rétegek, a kitöltés
   és a pislákolás izzása is (a `color` azért kell, mert a `sjPisla` a
   `currentColor`-t használja — így egy keyframe kiszolgálja mind a 10 fokot). */
.sj-fogl {
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--sj-fogl-meret, 76px); height: var(--sj-fogl-meret, 76px);
  color: var(--sj-szin, var(--edzes-szin));
}
.sj-fogl > svg { position: absolute; inset: 0; overflow: visible; }
/* A JELVÉNY HELYE a Sorozat-kártyán (2026-09-24): 124 px-es doboz, benne a
   jelvény a régi 88 px-en, középre. A kártya ettől magasabb, a jelvény nem. */
.sj-hely { flex: none; width: var(--sj-hely-w, 116px); height: 116px; display: grid; place-items: center; }
/* A jelvény doboza (112) szélesebb a helyénél (a látható foglalat): két oldalt
   egyformán nyúlik túl, negatív margóval, hogy a flex ne tolja el. */
.sj-hely > .sj-fogl, .sj-hely > .meg-nem {
  margin-inline: calc((var(--sj-hely-w, 116px) - var(--sj-meret, 112px)) / 2);
}
/* A VÁSZON 5-ÖS LAPJA, KÖZÉPRE RENDEZVE (Levi, 2026-09-24: „lődd be középre az
   egész contentet"): a jelvény és a szövegtömb egy csoport, a kártya közepén,
   egyforma hellyel a két oldalon. Az ampullák a szám sorában. */
.sorozat-kartya:has(> .sj-hely) { justify-content: center; gap: 0; }
/* A rés a jelvény után jelvényfüggő (--sj-res, sorozat_jel.js jelvenyRes). */
.sorozat-kartya > .sj-hely { margin-right: var(--sj-res, 22px); }
.sorozat-kartya:not(.ures) > .sorozat-torzs { flex: 0 1 180px; }
/* KISEBB FELIRAT (Levi, 2026-09-24): a szám 28 px, a „napos sorozat" nem
   törhet el; a jelvény és a szöveg közt 22 px, mert a kerek és hatszög
   foglalat a látható széléig ér, és 12 px-nél a felirathoz tapadt. */
.sorozat-kartya:has(> .sj-hely) .sorozat-szam b { font-size: var(--t-nagy, 28px); }
.sorozat-kartya:has(> .sj-hely) .sorozat-szam > span:not(.sorozat-jokerek) { white-space: nowrap; font-size: var(--t-cimke); }
.sorozat-szam > .sorozat-jokerek { margin-left: 10px; align-self: center; }
.sj-v { stroke: var(--sj-szin, var(--edzes-szin)); }
.sj-v path, .sj-v circle, .sj-v ellipse, .sj-v polygon, .sj-v line {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
/* A rétegek a fő színből keverednek, nem külön hexekből — így a világos téma
   tokenje egy helyen dől el. */
.sj-v .tolt { fill: color-mix(in srgb, var(--sj-szin, var(--edzes-szin)) 14%, transparent); }
.sj-v .halk { stroke: color-mix(in srgb, var(--sj-szin, var(--edzes-szin)) 45%, transparent); }
.sj-v .karima { stroke: color-mix(in srgb, var(--sj-szin, var(--edzes-szin)) 32%, transparent); }
.sj-v .mag { fill: var(--sj-szin, var(--edzes-szin)); stroke: none; }
/* A fénypont a peremen fut körbe (Hologram) — a rés hosszabb, mint a fény. */
.sj-v .sj-fenypont {
  stroke: color-mix(in srgb, var(--sj-szin, var(--edzes-szin)) 55%, #fff);
  animation: sjFut 1.8s linear infinite;
}
/* A részecske a gyorsítógyűrűn száguld (Ciklotron): egy kör 0,9 s, a Hologram
   fénypontjánál kétszer gyorsabb. A -188.5 a r30-as kör kerülete. */
.sj-v .sj-reszecske {
  stroke: color-mix(in srgb, var(--sj-szin, var(--edzes-szin)) 45%, #fff);
  animation: sjGyorsit 0.9s linear infinite;
}
.sj-v .sj-kering { animation: sjKering 6s linear infinite; }
.sj-v .sj-lukt { animation: sjLukt 2s ease-in-out infinite; }
/* A JELVÉNY PISLÁKOL: szabálytalan ritmusú izzás, hogy éljen — a fokozat
   színében, mert a `currentColor` a foglalat `color`-ját veszi. */
.sj-pisla { animation: sjPisla 2.2s ease-in-out infinite; }

/* A KIALUDT JELVÉNY: elvesztetted, de a tiéd marad. Minden mozgás megáll,
   a szín kiszürkül, a fény elmegy — a rajz viszont sértetlen. (Levente
   09-18: a repedés kikerült, egy szép jelvényt nem kell elrontani.) A belső
   fényudvar inline drop-shadow, ezért csak felülírással vehető le. */
.sj-fogl.kialudt { animation: none; filter: grayscale(.9) brightness(.5); }
.sj-fogl.kialudt * { animation: none !important; }
.sj-fogl.kialudt .sj-v *, .sj-fogl.kialudt .sorozat-jel svg * { filter: none !important; }
@keyframes sjPisla {
  0%, 100% { filter: drop-shadow(0 0 5px currentColor); }
  18% { filter: drop-shadow(0 0 15px currentColor); }
  30% { filter: drop-shadow(0 0 7px currentColor); }
  52% { filter: drop-shadow(0 0 18px currentColor); }
  70% { filter: drop-shadow(0 0 9px currentColor); }
  86% { filter: drop-shadow(0 0 14px currentColor); }
}
@keyframes sjFut { to { stroke-dashoffset: -288; } }
@keyframes sjGyorsit { to { stroke-dashoffset: -188.5; } }
@media (prefers-reduced-motion: reduce) {
  .sj-pisla { animation: none; filter: drop-shadow(0 0 9px currentColor); }
  .sj-v .sj-fenypont, .sj-v .sj-reszecske, .sj-v .sj-kering, .sj-v .sj-lukt { animation: none; }
}

.sorozat-jel { width: 26px; height: 28px; flex: none; }
.sorozat-jel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sorozat-jel path,
.sorozat-jel circle,
.sorozat-jel ellipse {
  fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
}
/* Az animáció-szótár: a jel-modul ezekből az osztályokból építkezik, a
   fokonkénti tempót inline animation-duration adja — így egy szótár szolgálja
   ki mind a tíz fokozatot, és a fokozódás (lomha → örvénylő) a jel-modulban
   olvasható, egy helyen. */
@keyframes sjFoPislakol {
  0%, 100% { opacity: 1; } 40% { opacity: 1; } 42% { opacity: 0.3; }
  44% { opacity: 1; } 46% { opacity: 0.7; } 48% { opacity: 1; }
  86% { opacity: 1; } 88% { opacity: 0.5; } 90% { opacity: 1; }
}
@keyframes sjKisPislakol {
  0%,100% { opacity: 1; } 8% { opacity: 0.2; } 10% { opacity: 1; }
  23% { opacity: 0.5; } 25% { opacity: 1; } 26% { opacity: 0.15; } 28% { opacity: 1; }
  55% { opacity: 0.85; } 57% { opacity: 0.25; } 59% { opacity: 1; }
  80% { opacity: 0.5; } 82% { opacity: 1; }
}
@keyframes sjKering { to { transform: rotate(360deg); } }
@keyframes sjBugyog {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateY(-7px); opacity: 0; }
}
@keyframes sjLukt { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes sjVillan {
  0%, 100% { opacity: 1; } 6% { opacity: 0.15; } 9% { opacity: 1; }
  12% { opacity: 0.4; } 14% { opacity: 1; }
  60% { opacity: 1; } 62% { opacity: 0.3; } 64% { opacity: 1; }
}
@keyframes sjPasztaz { to { stroke-dashoffset: -22; } }
.sorozat-jel .sj-fo { animation: sjFoPislakol 3.2s linear infinite; }
.sorozat-jel .sj-kis { animation: sjKisPislakol 1.7s linear infinite; }
.sorozat-jel .sj-forog { transform-origin: 13px 14px; animation: sjKering 9s linear infinite; }
.sorozat-jel .sj-bugyog { animation: sjBugyog 2.8s ease-out infinite; }
.sorozat-jel .sj-lukt { animation: sjLukt 2s ease-in-out infinite; }
.sorozat-jel .sj-villan { animation: sjVillan 1.8s linear infinite; }
.sorozat-jel .sj-pasztaz { stroke-dasharray: 5 6; animation: sjPasztaz 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sorozat-jel .sj-fo, .sorozat-jel .sj-kis, .sorozat-jel .sj-forog,
  .sorozat-jel .sj-bugyog, .sorozat-jel .sj-lukt, .sorozat-jel .sj-villan,
  .sorozat-jel .sj-pasztaz { animation: none; }
}

/* ---------- a kísérlet lapja ---------- */
.soro-fej { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
/* A fej és a következő-szint jele AZONOS méretű dobozban ül. Korábban a
   fej 52, a következő 30 pixel volt — a kisebb jelet nagyban, a nagyobbat
   kicsiben rajzolva a szintek közti méretkülönbség pont kioltódott. */
/* Amit még nem értél el: ugyanaz a jelvény, halványan és pislákolás nélkül —
   látszik, hogy jár, de még nem a tiéd. */
.meg-nem { opacity: 0.5; }
.meg-nem .sj-pisla { animation: none; filter: none; }

.soro-nagy { font-size: var(--t-torzs); color: var(--halvany); }
.soro-nagy .szam {
  font-size: var(--t-orias); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; margin-right: 6px;
  color: var(--sj-szin);
  text-shadow: 0 0 14px color-mix(in srgb, var(--sj-szin) 45%, transparent);
}
.soro-fokozat {
  margin-top: 4px; font-size: var(--t-cimke); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sj-szin);
}

/* ---------- mikroünneplés: a fokozatlépés pillanata ----------
   Teljes képernyős réteg, ami MEGVÁRJA, amíg elküldöd (2026-09-22): lehúzod,
   ahogy egy alsó lapot. Eddig 4,2 másodperc után magától eltűnt, és ha épp
   félrenéztél, pont az üzenetet veszítetted el, amiért a réteg létezik. */
.unnep {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--hatter) 78%, transparent);
  backdrop-filter: blur(3px);
  animation: unnepBe 0.28s ease-out both;
}
.unnep.zarodik { animation: unnepKi 0.32s ease-in both; }
@keyframes unnepBe { from { opacity: 0; } to { opacity: 1; } }
@keyframes unnepKi { from { opacity: 1; } to { opacity: 0; } }
.unnep-lap {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  animation: unnepLap 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
/* A jelvény BEUGRIK: kicsiből a helyére, egy apró túllövéssel. Ez az egyetlen
   hely az appban, ahol a jelvény mozdul a megjelenéskor — pont ettől lesz
   esemény. */
@keyframes unnepLap {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.unnep-cim {
  font-size: var(--t-nagy, 22px); font-weight: 800; color: var(--sj-szin);
  text-shadow: 0 0 18px color-mix(in srgb, var(--sj-szin) 45%, transparent);
}
.unnep-alcim { font-size: var(--t-apro); color: var(--halvany); }
/* AZ ÜZENET: ez a réteg valódi tartalma. Nem a jelvény lett meg, hanem
   valami megváltozott — ezt mondja ki. Szélesebb sorhossz, nyugodt szedés. */
.unnep-uzenet {
  max-width: 330px; margin: 6px 0 0; font-size: var(--t-apro); line-height: 1.6;
  color: color-mix(in srgb, var(--szoveg) 86%, transparent); text-align: center;
}
/* A keret ünneplésekor a csempe-keret rajza áll a jelvény helyén. */
.unnep-keret {
  position: relative; display: block; width: 200px; height: 108px;
  border-radius: var(--sugar-nagy); background: var(--lap); overflow: hidden;
}
/* A LEHÚZÁS AFFORDANCIÁJA: fogó és felirat a réteg alján. Látszania kell,
   különben a felhasználó nem tudja, mit kezdjen egy réteggel, ami nem múlik
   el magától. A felirat GOMB is: gesztus nélkül is el lehet küldeni. */
.unnep-elkuld {
  position: absolute; left: 50%; bottom: calc(var(--sav-magas) + 14px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 18px; min-height: var(--erinto);
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: var(--t-cimke); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.unnep-fogo {
  display: block; width: 40px; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--szoveg) 30%, transparent);
}
/* HÚZÁS KÖZBEN nincs átmenet: a réteg az ujjat kövesse, ne késsen utána. */
.unnep.unnep-huzas { animation: none; transition: none; }
/* ELENGEDVE a küszöb alatt: visszaugrik a helyére. */
.unnep:not(.unnep-huzas):not(.zarodik) {
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.24s;
}
/* A RÉTEG NEM VÁLASZT SZÖVEGET húzás közben. */
.unnep { user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .unnep, .unnep-lap, .unnep.zarodik { animation: none; }
  .unnep:not(.unnep-huzas):not(.zarodik) { transition: none; }
}

/* A REKORD SORA: halk tény a rang alatt. Nem versenyez a nagy számmal —
   akkor számít igazán, amikor a nagy szám nulla. A „jelen" változat azt
   mondja ki, hogy épp most állsz a csúcson. */
.soro-rekord { margin-top: 5px; font-size: var(--t-apro); color: var(--halvany); }
.soro-rekord.jelen { color: var(--sj-szin); font-weight: 700; }
/* A Ma-kártyán ugyanez, a nulla állapot alatt: ott ez az egyetlen szám, ami
   nem esett vissza. */
.sorozat-rekord {
  display: block; margin-top: 5px; font-size: var(--t-cimke); color: var(--halvany);
}
.soro-halad { display: grid; gap: 8px; margin-bottom: 6px; }
.soro-halad-sav {
  height: 6px; border-radius: var(--sugar-pirula);
  background: color-mix(in srgb, var(--szoveg) 8%, transparent); overflow: hidden;
}
.soro-halad-sav i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--sj-szin);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sj-szin) 55%, transparent);
}
.soro-halad p { margin: 0; font-size: var(--t-apro); }
.soro-vegso { margin: 0 0 6px; font-size: var(--t-apro); }
.soro-visszaeses {
  margin: 8px 0 0; padding: 9px 12px; font-size: var(--t-apro); line-height: 1.5;
  border-left: 3px solid var(--figyelem);
  background: color-mix(in srgb, var(--figyelem) 10%, transparent);
  border-radius: 0 var(--sugar-kicsi) var(--sugar-kicsi) 0;
}

/* Utolsó 14 nap: pöttyök napbetűvel. */
.soro-napok { display: flex; gap: 5px; }
.soro-nap { flex: 1; display: grid; gap: 4px; justify-items: center; min-width: 0; }
.soro-nap i {
  width: 13px; height: 13px; border-radius: 50%;
  background: color-mix(in srgb, var(--szoveg) 10%, transparent);
}
/* A NAPOK NYELVE (Levente 09-18): HÁROM SZÍN. Zöld — belefért; sárga —
   hajszálon múlt; piros — túlment vagy hiányzik. Ha aznap ampulla ment el
   (bevett ellenszer vagy pajzs), a karika helyén az AMPULLA jele áll, a nap
   saját színében: zöld, ha így is beszámított, piros, ha nem. */
.soro-nap.jo i { background: var(--edzes-szin);
  box-shadow: 0 0 8px -2px var(--edzes-szin); }
.soro-nap.hajszal i { background: var(--figyelem); }
.soro-nap.hiba i { background: color-mix(in srgb, var(--veszely) 75%, transparent); }
.soro-nap.ma i {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--szoveg) 35%, transparent);
}
/* Ampullás nap: a `i` helyett a valódi fiola áll, kicsinyítve. A tömege alul
   van (a folyadék az alsó 70%), ezért 2,5 px-szel megemelve ül egy vonalban
   a pöttyökkel. */
.soro-nap .joker-ampulla { transform: translateY(-2.5px) scale(.55); transform-origin: center; }
.soro-nap.joker, .soro-nap.pajzs, .soro-nap.joker-tul { --sj-szin: var(--edzes-szin); }
.soro-nap.pajzs, .soro-nap.joker-tul { --sj-szin: var(--veszely); }
.soro-nap span { font-size: 9.5px; color: var(--halvany); }

/* AZ ELLENSZER GOMBJA maga is a fiola nyelvén beszél: az aktuális jelvény
   színének tintája a háttere, a kerete ugyanaz a szín, és bal oldalt egy kis
   ampulla áll — ugyanaz a jel, amit a készlet is mutat, csak kisebben. A
   sima szürke gomb ehhez a szertárhoz nem illett. */
/* Az ampullák és az állapot EGY SORBAN: a gomb a készlet mellé kerül, nem alá.
   `wrap`, mert az állapot lehet mondat is („Tegnap már bevettél egyet…") —
   az tördel a következő sorba, a rövid gomb viszont elfér az ampullák mellett. */
.joker-sor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.joker-gomb {
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-height: 34px; padding: 0 14px;
  font-size: var(--t-cimke); font-weight: 700;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sj-szin) 20%, transparent),
    color-mix(in srgb, var(--sj-szin) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--sj-szin) 45%, transparent);
  color: var(--szoveg);
  box-shadow: 0 0 16px color-mix(in srgb, var(--sj-szin) 18%, transparent);
}
.joker-gomb:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--sj-szin) 26%, transparent);
}
/* A GOMB KICSI, AZ ÉRINTŐFELÜLETE NEM: a rajz 34 px magas, de egy láthatatlan
   réteg kiterjeszti a `--erinto` minimumra. Ez az app bevált mintája (lásd a
   cél-fogaskereket): a felület tömör maradhat anélkül, hogy a hüvelykujjnak
   célozni kelljen. */
.joker-gomb::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--erinto); transform: translateY(-50%);
}
/* HALK ALÁHÚZÁS: vékony vonal jelenik meg és fogy el a gomb alján. A gomb
   csak akkor van a képernyőn, ha VAN ellenszered — ilyenkor jogos, hogy
   halkan jelezzen. Nem a gomb egésze mozog, csak egy vonal: ez a
   legvisszafogottabb jelzés, ami még észrevehető. */
.joker-gomb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 0 0 var(--sugar-pirula) var(--sugar-pirula);
  background: linear-gradient(90deg, transparent, var(--sj-szin), transparent);
  animation: jokerAlahuzas 3.8s ease-in-out infinite;
}
@keyframes jokerAlahuzas {
  0%, 100% { opacity: 0; transform: scaleX(0.2); }
  50% { opacity: 0.9; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .joker-gomb::after { animation: none; opacity: 0.55; transform: scaleX(1); }
}

.joker-doboz { display: grid; gap: 10px; justify-items: start; }
.joker-doboz p { margin: 0; }
.joker-kartyak { display: flex; gap: 7px; align-items: flex-end; }
.joker-termeles b { color: var(--szoveg); }

/* A következő szint ÉL: a saját színében pislákol, saját színű szalagon —
   ez a jutalom, ami felé mész, tehát kívánatosnak kell kinéznie, nem
   gyengébbnek a mainál. Ugyanaz a szalag-nyelv, mint a Ma-kártyán. */
.soro-kovetkezo {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--sugar-kicsi);
  font-size: var(--t-apro);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sj-szin) 12%, transparent),
    color-mix(in srgb, var(--sj-szin) 4%, transparent) 55%,
    transparent);
  border: 1px solid color-mix(in srgb, var(--sj-szin) 25%, transparent);
}

.soro-kovetkezo b {
  color: var(--sj-szin); font-weight: 700; font-size: var(--t-torzs);
  text-shadow: 0 0 10px color-mix(in srgb, var(--sj-szin) 40%, transparent);
}
.soro-kovetkezo .szam { color: var(--szoveg); }

.soro-szabalyok {
  margin: 0; padding-left: 18px; display: grid; gap: 6px;
  font-size: var(--t-apro); line-height: 1.5;
}

/* ==================== TEREM-VÁLTÓ CHIPEK =============   A futó edzés gyakorlat-ugró sávja: foglalt gépnél egy koppintással másik
   gyakorlatra léphetsz. A szín a --kiemelt-ből jön, ami terem-módban volt-
   sárgára vált. */

/* Eltelt idő a futó edzés fejlécében. */
.edzes-eltelt { font-size: var(--t-apro); }

/* ==================== TRENDS-RÁCS ==================== */
.trend-sor { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.trend-sor .szam { font-size: var(--t-cim); line-height: 1.1; }
.trend-sor .szam small { font-size: var(--t-apro); font-weight: 700; }
.trend-sor svg { width: 15px; height: 15px; flex: none; transform: translateY(1px); }

/* ==================== KISEBB LAB-FINOMÍTÁSOK ==================== */

/* Kávé-jelvény színfokozat: 1 zöld · 2 sárga · 3 narancs · 4+ piros. */
.kave-jelveny.j1 { background: var(--edzes-szin); color: #12210a; }
.kave-jelveny.j2 { background: var(--kave); color: #201503; }
/* A csipegetés jelvénye a KALÓRIA színét viseli — az összeget mutatja, nem
   darabszámot, ezért szélesebb is lehet. */
/* A csipegetés jelvénye a GOMB színét viseli, nem a kalóriáét: a dokkban a
   naplózás gombja lett a kalória-piros, és két egyforma piros kör egymás
   mellett nem mond semmit. */
.csip-jelveny {
  background: var(--szenhidrat); color: #1b1030;
  font-variant-numeric: tabular-nums;
}
.kave-jelveny.j3 { background: var(--narancs); color: #251102; }
.kave-jelveny.j4 { background: var(--veszely); color: #fff; }

/* Kör alakú ikon-gomb (testsúly-sor): mint a Ma-fül nagy gombjai, kicsiben. */
.gomb.ikon-gomb {
  flex: none; width: 48px; height: 48px; min-height: 0; padding: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
#meretekGomb { color: var(--halvany); }
#naploGomb { position: relative; color: var(--kiemelt); }
/* Feldolgozásra váró bejegyzés: egyetlen pötty az ikonon — a korábbi
   állapotsor („3 vár feldolgozásra") helyett, ami már nem fér ki. */
.ikon-pott {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--figyelem);
  box-shadow: 0 0 0 2px var(--lap);
}

/* Napló-bevitel: csupasz mező beépített küldő-gombbal — a gombsor helyett. */
.naplo-bevitel { position: relative; }
.naplo-bevitel .naplo-mezo {
  width: 100%; border: 0; border-radius: var(--sugar);
  background: var(--lap-vilagos); color: var(--szoveg);
  padding: 14px 60px 14px 16px; font: inherit; resize: none; min-height: 88px;
}
.naplo-bevitel .naplo-mezo:focus {
  outline: 1.5px solid color-mix(in srgb, var(--kiemelt) 55%, transparent);
  outline-offset: 0;
}
.naplo-kuld {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: var(--kiemelt); color: var(--kiemelt-szoveg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.naplo-kuld:disabled { opacity: 0.5; cursor: default; }
.naplo-korabbi {
  display: block; margin: 8px 0 0 auto; min-height: 44px; padding: 6px 2px;
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: var(--t-apro); font-weight: 700; cursor: pointer;
}

/* ==================== ÉTKEZÉS-FÜL TETEJE: GYŰRŰ + FIOLÁK =============   Egy nagy „ennyi fér még" gyűrű + három FEKVŐ fiola. Az álló kémcsövek alá
   csak egy tört szám fért („102/165"), amit fejben kellett kivonni; fekve a
   sor végén elfér a kész válasz: „63 kell", „45 fér". */
.makro-fejlec {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 6px 2px 18px; padding-right: 30px;
}
/* SZÁM-ELSŐ: a nap kulcsszáma plakát-méretben, alatta két halk sor. A gyűrű
   íve ugyanezt mondta el, de elvitte a szélesség felét a fiolák elől. */
.fer-szam { flex: none; min-width: 0; }
.fer-szam .fsz-nagy {
  display: block;
  font-size: var(--t-plakat); font-weight: 900; line-height: 1;
  color: var(--fsz-szin, var(--siker));
  text-shadow: 0 0 14px color-mix(in srgb, var(--fsz-szin, var(--siker)) 40%, transparent);
}
.fer-szam .fsz-al {
  display: block; margin-top: 4px; font-size: var(--t-apro); color: var(--halvany);
  line-height: 1.35;
}
/* Túllépésnél a szám vörös — a felirat mondja ki, hogy „túl". */
.fer-szam.tul { --fsz-szin: var(--figyelem); }
/* A tűrésben (2. audit L-16): ugyanaz a borostyán, a különbséget a szöveg mondja. */
.fer-szam.tures { --fsz-szin: var(--figyelem); }

.fiola-oszlop {
  flex: 1; min-width: 0; margin-left: 4px;
  display: grid; gap: 10px;
}
/* A három oszlop fix–rugalmas–auto: a betűjel és a maradék-szöveg mindhárom
   soron egy vonalban áll, a fiola meg kitölti, ami marad. */
.fiola-sor {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 8px;
}
.fiola-cimke {
  font-size: var(--t-cimke); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.fiola {
  position: relative; height: 18px; border-radius: var(--sugar-pirula);
  background: linear-gradient(165deg, color-mix(in srgb, var(--szoveg) 9%, transparent),
    color-mix(in srgb, var(--szoveg) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--szoveg) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--szoveg) 10%, transparent);
  overflow: hidden;
}
.fiola i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: var(--sugar-pirula); overflow: hidden;
  background: linear-gradient(90deg, var(--fi-szin), color-mix(in srgb, var(--fi-szin) 72%, #fff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--fi-szin) 45%, transparent);
  transition: width 1.1s cubic-bezier(0.3, 0.7, 0.25, 1);
}
/* SODRÓDÓ BUBORÉK: a folyadék él. Két buborék fiolánként, eltérő méretben és
   tempóban — a szabályos ismétlődés gépiesnek látszana. */
.fiola .buborek {
  position: absolute; top: 4px; width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in srgb, #fff 60%, transparent);
  animation: sodrodik 3.4s linear infinite;
}
.fiola .buborek.kicsi {
  top: 9px; width: 3px; height: 3px;
  background: color-mix(in srgb, #fff 50%, transparent);
  animation-duration: 2.7s; animation-delay: 1.2s;
}
/* A három fiola nem egyszerre lélegzik. */
.fiola-sor:nth-child(2) .buborek { animation-duration: 3.8s; animation-delay: 0.6s; }
.fiola-sor:nth-child(2) .buborek.kicsi { animation-duration: 3s; animation-delay: 1.8s; }
.fiola-sor:nth-child(3) .buborek { animation-duration: 3.1s; animation-delay: 0.3s; }
.fiola-sor:nth-child(3) .buborek.kicsi { animation-duration: 4.2s; animation-delay: 2.1s; }
@keyframes sodrodik {
  0% { left: 4%; opacity: 0; }
  15% { opacity: 0.65; }
  85% { opacity: 0.5; }
  100% { left: 90%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fiola .buborek { animation: none; opacity: 0.4; } }
/* Mozgás-érzékeny beállításnál a csíkok azonnal a helyükön állnak — az érték
   ugyanaz, csak nem fut oda. */
@media (prefers-reduced-motion: reduce) {
  .led-csik > i, .fiola i { transition: none; }
}
/* ==================== CÉL FÖLÖTT: A LÉ VÖRÖSBE FORDUL =============   Korábban a lé egyszerűen alvadtvér-vörösre váltott (#8f0f1d → #d61f30, fix
   hexekkel, tehát világos témában is sötéten). Két baja volt: a szín nem a
   rendszer tokenjéből jött, és egy kemény, száraz folt ült ott, ahol az egész
   metafora folyadékról szól.

   Most a lé VÉGE fordul vörösbe, éles határ nélkül — a buborékok átúsznak
   rajta. A vörös zóna HOSSZA a túllépés mértéke: a `--tul-zona` a JS-ből jön.
   Hosszú, puha átmenettel a 2%-os és a 35%-os túllépés egyformán nézett ki,
   ezért kapcsol be a vörös rövid úton.

   Mellé a buborékok enyhén felgyorsulnak: a lé nyugtalan lesz, de nem forr
   fel. Ez csak kíséret — a jelzést a szín viszi, mert az mozgás nélkül is
   látszik (pillanatkép, prefers-reduced-motion, gyors ránézés).

   A FEHÉRJE SZÁNDÉKOSAN NEM KAPJA MEG (lásd etkezes.js): a célon túli
   fehérje nem hiba, és a cián–vörös keverés ráadásul szürkén megy át. */
/* TÚLCSORDULÁSNÁL NINCS VÖRÖS VÉG (Levi, 2026-09-19 este: „úgy néz ki, mint
   egy pattanás"): a fiola tele marad a saját színével, és csak a buborékok
   gyorsulnak fel benne. A felirat („10 túl") mondja ki a tényt. */
/* Enyhén, nem vadul: a tempó nagyjából duplázódik. Ennél gyorsabban a három
   fiola együtt vibrálni kezdett, és a fejléc nyugtalan lett. */
.fiola.tul .buborek { animation-duration: 1.9s; }
.fiola.tul .buborek.kicsi { animation-duration: 1.6s; }
.fiola-ertek {
  font-size: var(--t-cimke); font-weight: 900; color: var(--halvany);
  white-space: nowrap;
}

/* ==================== PIRÍTÓS (elúszó visszajelzés) =============   Az alsó fülsáv FÖLÖTT lebeg, mert a hüvelykujj ott van, és mert a sáv
   eltakarná. Nem blokkol semmit: 3 másodperc után magától elúszik. */
.piritos {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--sav-magas) + 14px);
  display: flex; align-items: center; gap: 9px;
  max-width: min(92vw, 400px); padding: 12px 16px;
  border-radius: var(--sugar-pirula); border: 1px solid var(--keret);
  background: var(--lap-emelt); color: var(--szoveg);
  font-size: var(--t-apro); font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0; transform: translate(-50%, 14px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.piritos.lathato { opacity: 1; transform: translate(-50%, 0); }
.piritos svg { flex: none; }
.piritos.siker { color: var(--edzes-szin); }
.piritos.siker span { color: var(--szoveg); }
.piritos.vart { color: var(--feherje); }
/* A HIBA a rendszer hiba-színén. Eddig borostyán volt — ugyanaz, mint a
   kávé-jelvényé —, tehát semmi nem különböztette meg egy semleges jelzéstől. */
.piritos.hiba {
  color: var(--veszely);
  border-color: color-mix(in srgb, var(--veszely) 45%, transparent);
}
/* Kattintható pirítós (hiba vagy akció): a gombok elférnek a szöveg mellett. */
.piritos.zarhato { pointer-events: auto; }
.piritos-akcio, .piritos-zar {
  flex: none; margin-left: 4px; padding: 4px 10px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px; color: inherit;
  font-size: var(--t-cimke); font-weight: 700; cursor: pointer;
}
.piritos-zar { padding: 4px 8px; }
.piritos.vart span { color: var(--szoveg); }
/* Itt állt egy második `.piritos.hiba { color: var(--figyelem) }` — azonos
   specificitással, tizenöt sorral a fenti javítás után, tehát az nyert: a
   hibaüzenet piros kerettel, de BOROSTYÁN betűvel jelent meg, vagyis pont
   attól a semleges jelzéstől nem különbözött, amitől el akartuk választani.
   A szabály törölve; a szín a fenti blokkból, a --veszely-ből jön. */
.piritos.hiba span { color: var(--szoveg); }
/* Futó pihenő-időzítőnél a sáv fölé kerül, hogy ne takarja a visszaszámlálót. */
body.piheno-fut .piritos {
  bottom: calc(var(--sav-magas) + 96px);
}
/* A MA FÜLÖN A HÜVELYK-DOKK FÖLÉ (audit 02). A pirítós alja
   `--sav-magas + 14`, a dokké `--sav-magas + 10` volt — négy képpont
   különbség két olyan felület közt, amiből az egyik 66, a másik 65 pixel
   magas: az átfedés 62 px. A sikerüzenet átengedi a koppintást, a hibaüzenet
   viszont `pointer-events: auto`, és szándékosan kint marad, amíg le nem
   zárod — vagyis addig blokkolja a kávé-, víz- és csipegetés-gombot.
   A dokk magassága egy helyen dől el (lásd `--dokk-magas` a HÜVELYK-DOKK
   blokkban), így a köz akkor is 12 px marad, ha az --erinto változik. */
body[data-szekcio="ma"] .piritos {
  bottom: calc(var(--sav-magas) + 10px + var(--dokk-magas) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  .piritos { transition: opacity 0.15s linear; transform: translate(-50%, 0); }
}

/* Aktív cél-emelési javaslat a cellák alatt. */
.cel-javaslat {
  margin-top: 14px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--lap-vilagos); border-radius: var(--sugar);
  font-size: var(--t-apro); color: var(--halvany); line-height: 1.4;
}
.cel-javaslat b { color: var(--edzes-szin); }
.cel-javaslat-gombok { display: flex; gap: 6px; flex: none; }

/* A CÉL-JAVASLAT hosszabb, mint az égetésé: két-három mondat, néha egy
   feltevés-sorral alatta. Egy sorban a szöveg és a gombok összepréselődnének,
   ezért ez a változat oszlopba rendez. */
.cel-javaslat.celkeret { flex-direction: column; align-items: stretch; }
.cel-javaslat.celkeret .cel-javaslat-gombok { justify-content: flex-end; }
.cel-javaslat.celkeret .apro-jegyzet { margin: 0; }
/* A BIZTONSÁGI ÁG nem javasol, hanem jelez: a mostani kereted árt. Ezért
   viseli a figyelem színét, nem az edzés-lime-ot — ugyanaz a nyelv, mint
   máshol az appban. */
.cel-javaslat.surgos { border-left: 3px solid var(--figyelem); }
.cel-javaslat.surgos b { color: var(--figyelem); }

/* ==================== HETI ÉRTÉKELÉS =============   A három coach vasárnap esti összesítője. A sorok HELYBEN nyílnak ki, mert
   az appban egyszerre egy alsó lap élhet — külön lapra vinni azt jelentené,
   hogy az összesítő bezáródik mögötte. */
/* AZ ARCHÍVUM BEJÁRATA. Halk: szaggatott keret, halvány szöveg — nem verseng
   azzal, amiért a lapot megnyitottad, de mindig ott van a lap alján. Ugyanez a
   gomb áll a Kalória- és a Heti mérleg-lapon is. */
.hert-archiv {
  width: 100%; margin-top: 16px;
  color: var(--halvany); font-size: var(--t-apro);
  border: 1px dashed var(--keret);
}
.hert-archiv:disabled { opacity: 0.6; }

/* AZ ARCHÍVUM LISTÁJA. Egy sor = egy hét: a címke, hány értékelő készült el
   belőle, és EGY kivonat. Három egymás alatti mondattól a lista olvashatatlan
   lenne — a részletek a hét saját lapján vannak. */
.hert-lista { display: flex; flex-direction: column; gap: 8px; }
.hert-listasor {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; padding: 12px 14px; text-align: left;
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  background: var(--lap); color: var(--szoveg); cursor: pointer;
}
.hert-listasor:active { background: color-mix(in srgb, var(--kiemelt) 8%, var(--lap)); }
.hert-listafej { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hert-listacim { font-weight: 600; }
.hert-listadb {
  flex: none; font-size: var(--t-cimke); color: var(--halvany);
  font-variant-numeric: tabular-nums;
}
.hert-listasor .hert-kivonat {
  font-size: var(--t-apro); color: var(--halvany); line-height: 1.45;
}

.hert-alcim {
  margin: 0 0 12px; font-size: var(--t-cimke); color: var(--halvany);
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
}
/* HÁROM KÁRTYA EGYMÁS ALATT — se váltó, se vízszintes húzás.
   Két korábbi kör tanulsága van benne. (1) Az első változat három szürke doboz
   volt, mindegyiken színes BAL SZEGÉLLYEL: az irodai kartoték formája. (2) A
   második egy vízszintesen húzható pálya, alul pöttyökkel — az kilógott a
   törzsből (az egész lap elcsúszott oldalra), a pöttyökért pedig görgetni
   kellett. Most: kártya-forma, mint a rácson; AZ VAN NYITVA, amelyiknek
   mondanivalója van; a másik kettő egy sor, koppintásra nyílik. */
.hert-sor { display: flex; flex-direction: column; gap: 10px; }
/* AZ AMPULLA ÁRCÉDULÁJA a heti értékelés tetején. Nem riasztás: halvány
   keret, semleges szín — a tény, nem a szemrehányás. */
.hert-ampulla {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  background: var(--lap-vilagos);
  font-size: var(--t-apro); line-height: 1.5; color: var(--halvany);
}
.hert-ampulla b { color: var(--szoveg); }

/* A HÉT GYŰRŰJE NAGYBAN, a csukott értékelések alatt (Levi, 2026-09-20).
   Ugyanaz a rajz, mint a Haladás-csempén, csak nagyobb sugárral — a mozgását
   a `belepo` osztály indítja, a változók pedig azért kellenek, mert a csempén
   a rács adja őket (ott `--alap` a csempe sorszámából jön). */
.hert-kor {
  --alap: 0ms; --jelzo-kesik: 0ms;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--keret);
}
.hert-kor[hidden] { display: none; }
.hert-kor-cimke { font-size: var(--t-apro); color: var(--halvany); }
.hert-kartya {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; border-radius: var(--sugar);
  background: var(--lap); border: 1px solid var(--keret);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.hert-kartya.nyitva {
  gap: 10px;
  border-color: color-mix(in srgb, var(--jel, var(--kiemelt)) 30%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--jel, var(--kiemelt)) 10%, transparent), transparent 46%),
    var(--lap);
}
@media (prefers-reduced-motion: reduce) { .hert-kartya { transition: none; } }
/* A FEJLÉC EGÉSZE GOMB: a koppintási felület a teljes sor, nem egy nyilacska. */
.hert-fej {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 24px; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hert-pont {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--jel, var(--kiemelt));
}
/* A FEJLÉC SOSEM LÓGHAT KI. A `min-width: 0` nélkül a flex-elemek nem tudnak a
   tartalmuk alá zsugorodni, és a sor pár képponttal szélesebb lett a kártyánál
   — pont az a fajta apró túlcsordulás, amitől a lap oldalra mozdult. */
.hert-nev {
  flex: none; font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--jel, var(--kiemelt));
}
.hert-mi {
  flex: 1 1 auto; min-width: 0; font-size: var(--t-cimke); color: var(--halvany);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A NYÍL SAJÁT, NÉGYZETES DOBOZBAN forog: elforgatva a szöveg-doboza szélesebb
   lenne, mint állva, és pár képponttal kilógna a sorból. */
.hert-nyil {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px;
  color: var(--halvany); font-size: var(--t-cim); line-height: 1;
  transition: transform 0.18s ease;
}
.hert-kartya.nyitva .hert-nyil { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .hert-nyil { transition: none; } }

/* A CSUKOTT KÁRTYA egyetlen sor: a hét mondatának az eleje. */
.hert-torzs { display: none; flex-direction: column; gap: 12px; }
.hert-kartya.nyitva .hert-torzs { display: flex; }
.hert-tett { display: flex; flex-direction: column; gap: 2px; }
.hert-tett b { font-size: var(--t-apro); font-weight: 700; line-height: 1.4; }
.hert-cimke {
  font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--jel, var(--kiemelt));
}
.hert-also { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hert-tobb {
  padding: 6px 14px; border-radius: var(--sugar-pirula);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--keret);
  color: var(--halvany); font: inherit; font-size: var(--t-cimke); cursor: pointer;
}
.hert-kartya .hert-reszletek { display: none; }
.hert-kartya.reszletes .hert-reszletek { display: flex; }

/* AZ IDÉZET: a hét mondata. Nem bekezdés — ezért nagyobb, sűrűbb sorközzel
   és a szöveg teljes fényével. A részletek alatta halkabbak. */
/* CSUKVA EGY SOR, NYITVA a teljes mondat — ez a „ne legyen túl sok szöveg"
   első rétege: hármat látsz egy pillantással, és csak egy szól hozzád. */
.hert-idezet {
  margin: 0; font-size: var(--t-apro); font-weight: 500; line-height: 1.45;
  color: var(--halvany);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.hert-kartya.nyitva .hert-idezet {
  font-size: var(--t-cim); font-weight: 700; line-height: 1.34;
  letter-spacing: -0.01em; color: var(--szoveg);
  display: block; overflow: visible;
}
.hert-idezet.halvany { font-weight: 600; color: var(--halvany); }
.hert-reszletek { display: flex; flex-direction: column; gap: 4px; }
.hert-reszletek > p { margin: 0 0 10px; font-size: var(--t-apro); line-height: 1.6; }
.hert-mikor { font-size: var(--t-cimke); color: var(--halvany); }
.hert-cim {
  margin: 14px 0 6px; font-size: var(--t-cimke); font-weight: 600;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase; color: var(--halvany);
}
.hert-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hert-lista li { font-size: var(--t-apro); line-height: 1.5; }
.hert-lista b { font-weight: 600; }
/* A BIZONYÍTÉK halkabban: ez különbözteti meg a megfigyelést a véleménytől,
   de nem az a fő mondanivaló. */
.hert-alap { display: block; margin-top: 1px; font-size: var(--t-cimke); line-height: 1.45; color: var(--halvany); }
.hert-korabbi li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.hert-korabbi .hert-alap, .hert-korabbi b { grid-column: 2; }
.hert-jel { grid-row: 1 / 3; color: var(--halvany); text-align: center; }
/* A FIGYELMEZTETÉS: pirula-kártya, kerek jellel. A bal szegélyes doboz volt az
   utolsó elem a lapon a régi kartoték-korból; az app többi fülén kerek jelek és
   pirulák vannak (makró-sávok, sorozat-jelvény, jelvény-pöttyök). */
.hert-figyelem {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 12px 14px; border-radius: var(--sugar);
  background: color-mix(in srgb, var(--figyelem) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--figyelem) 32%, transparent);
  color: var(--szoveg); font-size: var(--t-apro); line-height: 1.45;
}
.hert-figyelem-jel {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--figyelem); color: #1a1205;
  font-size: var(--t-cimke); font-weight: 900;
}

/* ==================== HETI MÉRLEG =============   A hős-csempe, amint a Kalibráció betelt. Egy nap alatta vagy fölötte lenni
   nem jelent semmit — a hét az egység, és ez a szám azt mutatja. */

/* A NAPOK SÁVJA a csempe talpán: minden lezárt nap egy oszlop a középvonalhoz
   képest. Lefelé (zöld) a keret alatt, felfelé (piros) fölötte — ugyanaz a
   két szín, amit az app máshol is a „belefér / túllépted" párra használ. */
.napsav {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-top: 10px; height: 26px; align-items: center;
}
.napsav i { position: relative; display: block; height: 100%; }
.napsav i s { position: absolute; left: 0; right: 0; border-radius: 2px; text-decoration: none; }
.napsav i.alul s { top: 50%; height: var(--h); background: var(--siker); }
.napsav i.felul s { bottom: 50%; height: var(--h); background: var(--kaloria); }
/* A MAI NAP csak egy vonal: még nincs eredménye, tehát nem állíthat semmit. */
.napsav i.ma s { top: calc(50% - 1px); height: 2px; background: var(--kiemelt); }
.napsav i.ures { height: 50%; border-bottom: 1px dashed rgba(255, 255, 255, 0.14); }

.hm-mondat { margin: 0 0 12px; font-size: var(--t-apro); line-height: 1.55; }
.hm-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-apro); margin-bottom: 12px; }
.hm-tabla th {
  text-align: right; padding: 0 0 8px; font-weight: 400;
  font-size: var(--t-cimke); letter-spacing: var(--cimke-ritkitas);
  text-transform: uppercase; color: var(--halvany);
  border-bottom: 1px solid var(--keret);
}
.hm-tabla th:first-child, .hm-tabla td:first-child { text-align: left; }
.hm-tabla td { text-align: right; padding: 8px 0; color: var(--halvany); }
.hm-tabla td:first-child { color: var(--szoveg); }
/* A kcal-szám semleges; a nap és a hét ítéletét a pötty mondja (2. audit L-16, L-23). */
.hm-pott { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.hm-pott.jo { background: var(--siker); }
.hm-pott.tul { background: var(--kaloria); }
.hm-tabla tr.hm-jovo td { opacity: 0.5; }
.hm-tabla tfoot td { border-top: 1px solid var(--keret); padding-top: 12px; color: var(--szoveg); font-weight: 600; }
.hm-cimke {
  margin-left: 6px; padding: 1px 6px; border-radius: var(--sugar-pirula);
  font-size: 10px; letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  background: color-mix(in srgb, var(--kiemelt) 22%, transparent); color: var(--kiemelt);
}

/* ==================== KALIBRÁCIÓ =============   Mit tud már rólad az app, és mi jön legközelebb. NEM a teljesítményed
   mérője — azt a jelvények csinálják. Ezért nincs fokozat-szín és nincs
   ünneplés: halk, tájékoztató kártya, ami eltűnik, ha már nincs mondandója. */
/* A HALADÁS-CSIK a hős-csempe alján ül (a `also` slotban), ott, ahol korábban
   „A heted" napi pöttyei voltak. */
.kalib-csik {
  display: block; width: 100%; height: 4px; margin-top: 10px;
  border-radius: var(--sugar-pirula);
  background: rgba(255, 255, 255, 0.12); overflow: hidden;
}
.kalib-csik i { display: block; height: 100%; background: var(--kiemelt); border-radius: inherit; }
.kalib-kov { margin: 0 0 12px; font-size: var(--t-apro); line-height: 1.5; }

/* AZ ÓRA SZEMÉLYES SZORZÓJA a Kalibráció lapon. Ugyanaz a hang, mint a
   „következő lépés" soré: tény, nem figyelmeztetés. */
.kalib-ora {
  margin: 10px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--kiemelt); border-radius: var(--sugar-kicsi);
  background: var(--lap-vilagos);
  font-size: var(--t-apro); line-height: 1.5; color: var(--halvany);
}
.kalib-ora b { color: var(--szoveg); }

.kalib-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kalib-sor {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start;
  font-size: var(--t-apro); color: var(--halvany);
}
.kalib-sor b { display: block; color: var(--halvany); font-weight: 600; }
.kalib-sor.kesz b { color: var(--szoveg); }
.kalib-sor.most b { color: var(--kiemelt); }
/* A TENNIVALÓ más műfaj, mint a várakozás: a Mintázathoz ÍRNOD kell a
   naplóba, nem telik be magától. A figyelem színe mondja, hogy rajtad múlik. */
.kalib-sor.tennivalo b { color: var(--figyelem); }
.kalib-jel { text-align: center; line-height: 1.5; color: var(--halvany); }
.kalib-sor.kesz .kalib-jel { color: var(--siker); }
.kalib-sor.most .kalib-jel { color: var(--kiemelt); }
.kalib-sor.tennivalo .kalib-jel { color: var(--figyelem); }
.kalib-miert { display: block; margin-top: 1px; font-size: var(--t-cimke); line-height: 1.45; }

/* AI-javaslatok: a hiányzó tápérték feltűnő, a becsült csak halk jelzés. */
.becsult.nincs-makro { color: var(--veszely); border-color: var(--veszely); }
.tetel-kcal.nincs-makro { color: var(--veszely); }
.gomb.figyelmeztet {
  background: var(--veszely); border-color: var(--veszely); color: #fff;
  font-size: var(--t-apro); line-height: 1.3; height: auto; padding: 12px 14px;
}

/* ==================== RECEPT-NAPLÓZÓ LAP =============   Az adagszám kerékkel áll (nincs beírandó mező), a mentés pedig külön,
   egyértelmű gomb — az étkezés-nevek csak választanak. */
.mezo.adag-valaszto, .mezo.kerek-mezo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: var(--erinto); margin-top: 12px; padding: 10px 14px;
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  border-radius: var(--sugar-kicsi); color: var(--szoveg); font: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.mezo.adag-valaszto:active, .mezo.kerek-mezo:active { background: var(--lap-emelt); }
.mezo.adag-valaszto strong, .mezo.kerek-mezo strong {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-cim); font-variant-numeric: tabular-nums;
}
.gomb.naplozo-kesz { margin-top: 16px; }

.szoveges-doboz { margin-top: 12px; }

/* Visszavonás / mégis a fejlécben — csak akkor látszanak, ha van mit tenni. */
.fejlec-ikon { padding: 6px; min-width: 36px; color: var(--halvany); }
.fejlec-ikon:active { color: var(--kiemelt); }
.fejlec-ikon[hidden] { display: none !important; }

.alvas-sav { display: flex; height: 14px; border-radius: var(--sugar-kicsi); overflow: hidden; gap: 2px; }
.alvas-sav i { display: block; height: 100%; }
.alvas-jel { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px;
  font-size: var(--t-cimke); color: var(--halvany); }
.alvas-jel i { display: inline-block; width: 8px; height: 8px; border-radius: 3px;
  margin-right: 5px; }

/* ---------- az alvás-lap fejrésze és havi ritmusa (2026-09-21) ----------
   Levi a vászon D2 változatát választotta. Ami változott a régihez képest:
   a pontszám nem külön korongban ül az óra MELLETT, hanem pirulaként az óra
   sorában; a fázis-szalag alatt a két időpont a két szélen; a négy rész-pont
   pedig EGY sorban áll, nem négy teljes szélességű sorban. */
.al-fej { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.al-fej-sor { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.al-hossz { font-size: var(--t-orias); line-height: 1; }
.al-pont-pirula {
  font-size: var(--t-cimke); color: var(--alvas); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--alvas) 45%, transparent);
  border-radius: var(--sugar-pirula); padding: 4px 10px;
}
.al-pont-pirula b { font-size: var(--t-apro); }
.al-ido-sor { display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--t-cimke); color: var(--szoveg); }
/* A KERET NÉLKÜLI CSÍK. Szegély és belső margó nélkül a teljes oszlop a
   szövegé, ezért a „Rendszeresség" és a „Folytonosság" is kifér csonkolás
   nélkül — kerettel csak nagybetűs rövidítéssel fért volna el. */
/* NÉGY SZÁM EGY SORBAN — közös csík két lapon (alvás rész-pontjai,
   terhelhetőség jelzőszámai). Keret és belső margó nélkül a teljes oszlop a
   szövegé: így a hosszú nevek sem csonkulnak. A `szuk` változat kisebb
   számokkal dolgozik, mert ott mértékegység is van a szám mellett. */
.szam-csik {
  /* Annyi oszlop, ahány cella van: a kalórián három, máshol négy. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px;
  margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--keret);
}

/* AZ EGYENLEG a kalória-lap üzenete: a grafikon UTÁN áll, hajszálvonal alatt,
   és a saját előjelének színét viseli — piros, ha pluszban vagy, zöld, ha
   megtakarítottál. Ugyanaz a két szín, amivel az oszlopok is beszélnek. */
.kcal-egyenleg {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--keret);
  font-size: var(--t-cimke); color: var(--halvany);
  animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--be-teljes) - var(--be-tart));
}
.kcal-egyenleg strong { font-size: var(--t-nagy); line-height: 1; }
/* A kcal-szám semleges (Levi szabálya: kcal sosem piros); az előjelet a pötty mondja (2. audit L-40b). */
.kcal-pott { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin: 0 6px 0 2px; vertical-align: middle; }
.kcal-pott.tul { background: var(--kaloria); }
.kcal-pott.alatt { background: var(--siker); }
@media (prefers-reduced-motion: reduce) { .kcal-egyenleg { animation: none !important; } }
/* EGY CELLA, HÁROM SOR, mindenhol ugyanaz (Levi, 2026-09-21: „legyen egységes
   a lapok csempe dizájnja"): fent az ÉRTÉK a mértékegységével, alatta a NÉV,
   legalul egy halk harmadik sor — az lehet szöveg (eltérés, alapvonal) vagy
   egy vékony sáv (ahol az érték 0-100-as pontszám). A méret is közös: 22 px a
   szám, mert a terhelhetőségen mértékegység is fér mellé. */
/* HAT CELLA két sorban. Egy sorban 55 képpont jutna egyre a heti értékelés
   kártyáján — a „alvás (szubjektív)" ott két betű lenne. */
.hert-torzs .szam-csik { margin-top: 4px; border-top: 0; padding-top: 0; }
.szam-csik.harmas { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 14px; }
.szam-csik-cella { display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0; text-align: center; }
.szam-csik-cella b { font-size: var(--t-cim); line-height: 1; }
.szam-csik-cella b small { font-size: var(--t-cimke); font-weight: 600; }
.szam-csik-nev { font-size: var(--t-cimke); color: var(--halvany); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.szam-csik-al { font-size: var(--t-cimke); color: var(--halvany); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.szam-csik-al.jelez { color: var(--figyelem); }

/* A LENYÍLÓ MAGYARÁZAT. A lap alján két hosszú bekezdés állt (a képernyő
   negyede); csukva ez egy sor, nyitva ott van minden szó. */
.apro-reszlet { margin-top: 10px; }
.apro-reszlet > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-cimke); color: var(--halvany);
  border: 1px solid var(--keret); border-radius: var(--sugar-pirula); padding: 5px 12px;
  min-height: 32px; box-sizing: border-box;
}
.apro-reszlet > summary::-webkit-details-marker { display: none; }
.apro-reszlet > summary::after { content: "›"; display: inline-block;
  transform: rotate(90deg); font-size: 14px; }
.apro-reszlet[open] > summary::after { transform: rotate(-90deg); }
.apro-reszlet > p { margin: 10px 0 0; font-size: var(--t-cimke); line-height: 1.5;
  color: var(--halvany); }
.al-resz-vonal { display: block; width: 100%; height: 3px; border-radius: 2px;
  background: var(--lap-emelt); }
.al-resz-vonal i { display: block; height: 100%; border-radius: 2px; background: var(--alvas); }

/* A RITMUS-GRAFIKON. A doboz pozicionált, mert az értékbuborék hozzá képest
   kap abszolút helyet (a lap törzse görgethető és nincs pozicionálva). */
.al-ritmus-doboz { position: relative; }
.al-cel:focus-visible { outline: 2px solid var(--szoveg); outline-offset: -1px; }
/* A SKÁLA LEÍRVA: a csík ugyanaz a két vég, mint a sávoké. */
.al-skala { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
.al-skala-cimke { font-size: var(--t-cimke); color: var(--halvany); white-space: nowrap; }
.al-skala-sav { flex: 1; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--alvas-gyenge), var(--alvas-jo)); }
/* Mozgás a rács szokásos nyelvén: belépőkor alulról nőnek, utána sávonként
   eltolva szuszognak, a legutolsó éjszaka mélyebbet lélegzik. */
.al-sav { transform-box: fill-box; transform-origin: bottom;
  animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards,
             elo-szuszog 3.4s ease-in-out infinite;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso-suru))), calc(var(--i, 0) * -120ms); }
.al-sav.al-ma { animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards,
             elo-pislog 2.6s ease-in-out infinite;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso-suru))), 0s; }
@media (prefers-reduced-motion: reduce) {
  .al-sav, .al-sav.al-ma { animation: none !important; }
}

.alvas-racs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--keret);
}
.alvas-racs > div { display: flex; flex-direction: column; gap: 2px; }
.alvas-racs span { font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; }
.alvas-racs b { font-size: var(--t-cim); }
.alvas-racs b.rossz { color: var(--veszely); }

/* A fejléc jobb oldalán a szám mellé kerülő halk kiegészítés. */
.hblokk-mellek { font-size: var(--t-apro); font-weight: 700; color: var(--halvany); }
.hblokk-mellek.jelzo { color: var(--figyelem); }
.szekcio-cim.alcim { margin-top: 20px; }

/* Halk, szöveges másodlagos művelet — ott, ahol egy teljes gomb túl hangos
   lenne a ritkán használt funkcióhoz (pl. az alvás kézi javítása). */
.halk-gomb {
  display: block; margin: 10px 0 0 auto; padding: 6px 2px;
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: var(--t-apro); font-weight: 700; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.halk-gomb:active { color: var(--kiemelt); }

/* ==================== HALADÁS: TÉGLA-RÁCS =============   A fül 2 oszlopos, színes tégla-rács — a story-kártyák nyelvén, kb. fél
   méretben: sarokból bevilágító szín, kis verzál cím, nagy szám. A részletek
   koppintásra alsó lapon nyílnak; a sorrend hosszú nyomás + húzással a
   felhasználóé. */
.htegla-racs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
/* A HALADÁS kitölti a képernyőt. A tömör rács magas kijelzőn jóval az alsó
   sáv fölött elfogyott, és a nagy üres tér miatt úgy tűnt, „feljebb került a
   lábléc" — ezért kevés tartalomnál a SOROK nyúlnak meg egyenletesen, nem a
   rács alatti űr. Ha a tartalom magasabb a képernyőnél, a minmax() miatt
   minden marad a régiben. */
/* A HALADÁS EGY KÉPERNYŐ: a rács a main teljes magasságát kitölti. A héj
   korlátait az app-héj blokkja adja (fent) — itt már csak a rács dolga van. */
body[data-szekcio="statisztika"] main {
  display: flex; flex-direction: column;
  min-height: 0;
  /* A sáv fölött marad 20 px levegő, mint a Ma fül dokkja fölött — a rács
     így nem ér neki a fülsávnak. (Ez a padding korábban azért hiányzott,
     mert a rács a tartalmához nőtt és a fül alja üresnek látszott; mióta a
     rács a képernyő magasságát tölti ki, a tartalék nem hagy űrt.) */
  padding-bottom: calc(var(--sav-magas) + 20px);
}
/* A HALADÁS EGY KÉPERNYŐ: a rács kitölti a fül magasságát, és a sorok
   egyenlően osztoznak rajta. `flex-basis: 0`, mert az `auto` a rács saját
   tartalommagasságából indulna, és a maradékot AHHOZ adná — attól a rács
   túlnyúlt a main belméretén. A 96 px-es alsó korlát a biztosíték: ha egyszer
   annyi tégla lesz, hogy ez alá kellene menni, inkább legyen görgetés, mint
   csonkolt tartalom. */
body[data-szekcio="statisztika"] .htegla-racs {
  flex: 1 1 0; min-height: 0;
  /* AZ ELSŐ SOR A TARTALMÁHOZ IGAZODIK, nem kap részt a maradék helyből. Ott a
     Kalibráció CSÍKJA áll, aminek nincs háttere: magas kijelzőn a `1fr` neki is
     kiosztott egy csempényi sávot, és mivel üresen nem látszik semmi, a fejléc
     alatt egy tenyérnyi lyuk tátongott. (Ha a Kalibráció betelt, az első sor a
     Heti értékelésé — az is jobban jár a saját magasságával.) */
  grid-template-rows: auto;
  /* A sor alsó korlátja a TARTALOM, nem egy szám: a 96 px a hero-csempének
     kevés volt (címke + plakátszám + a hét pöttyei ~124 px), és mivel a
     csempe `overflow: hidden`, a címke csonkult. Így a sor legalább a
     legmagasabb csempéje, a maradék helyen pedig továbbra is egyenlően
     osztoznak — sok csempénél inkább görgetés, mint csonkolás. */
  grid-auto-rows: minmax(max-content, 1fr);
}
/* A téglák saját `min-height`-je itt nem szab határt (összeadódva az adta a
   görgetést), és a belső köz is szűkebb — így a sorok a kiosztott magasságba
   férnek, és a fül alján marad a 20 px levegő. */
body[data-szekcio="statisztika"] .htegla,
body[data-szekcio="statisztika"] .htegla.hero { min-height: 0; }
body[data-szekcio="statisztika"] .htegla { padding: 14px 15px 12px; }
body[data-szekcio="statisztika"] .htegla.hero { padding: 14px 16px 12px; }
/* A CÍM ÉS AZ ALCÍM TÖRDELŐDIK, NEM CSONKUL (Levi, 2026-09-18: „ne legyenek
   rövidítve a szövegek a csempéken, úgy rendezd, hogy kényelmesen kiférjen —
   kisebb kijelzőkön is"). A „Kalória & energia" egyetlen pixellel lógott ki
   375-ön, és 360-on a felezővonal alatt minden hosszabb cím levágódott volna.
   A SZÁM marad egysoros: az sosem tördelhető ketté. A Kalibráció csíkja is
   kivétel — az egy sor, ott az ellipszis a helyes. */
body[data-szekcio="statisztika"] .htegla:not(.csik) .htegla-cim,
body[data-szekcio="statisztika"] .htegla:not(.csik) .htegla-al {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: break-word;
}
.htegla {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  /* A MIN-HEIGHT AZÉRT VOLT 124, hogy a jobb felső sarokban elférjen az ábra.
     Az ábra lekerült a csempe aljára, tehát a fenntartott hely fölösleges —
     és a sáv magassága amúgy is hozzáadódik. Levi élesben látta, hogy a rács
     görgetni kezdett: a 124 + sáv egy sorral hosszabbá tette a fület. */
  min-height: 102px; padding: 12px 13px 10px; text-align: left;
  /* A SZÍNFOLT KÜLÖN RÉTEG (::after), nem a háttér része: így lélegezhet
     anélkül, hogy a csempe többi része mozdulna. Az `isolation` tartja a
     réteget a tartalom ALATT (z-index: -1 a saját rétegzésben). */
  background: var(--lap); isolation: isolate;
  border: 1px solid var(--keret); border-radius: var(--sugar-nagy);
  color: var(--szoveg); font: inherit; cursor: pointer;
  box-shadow: var(--melyseg);
  /* pan-y: a rácson át görgetni lehet; a rendezés hosszú nyomásra indul. */
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.htegla:active { transform: scale(0.98); }
.htegla-cim {
  font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--halvany);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htegla-ertek {
  font-size: var(--t-nagy); line-height: 1.05;
  color: var(--tegla-szin, var(--szoveg));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A szöveges érték (pl. „Rendben") ne a plakát-számbetűt kapja. */
.htegla-ertek:not(.szam) { font-weight: 800; }
.htegla-al {
  font-size: var(--t-cimke); color: var(--halvany); min-height: 1.2em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A HERO-tégla: teljes sor, plakát-számmal. Ez a fül vezérszáma — a többi
   tégla mellette másodlagos, ezért kap saját, színezett keretet is. */
.htegla.hero {
  grid-column: 1 / -1; min-height: 150px; padding: 16px 16px 14px;
  /* NÉVÜTKÖZÉS: az Edzés fül kártyája is `.hero` (stil.css, „AZ EDZÉS FÜL:
     HERO"), és annak a 12 px-es alsó margója ide is átszivárgott. A csempe
     ettől 12 px-szel alacsonyabb lett a rács-soránál, a tartalom nem fért
     el, és a címke („A HÉTEN") 7 px-re préselődve félig kilógott felül
     (Levi képe, 2026-09-14). A margó itt nulla; a rács adja a helyet. */
  margin: 0;
  border-color: color-mix(in srgb, var(--tegla-szin, var(--kiemelt)) 30%, transparent);
}
/* A DERENGÉS RÉTEGE. Ugyanaz a folt, ami eddig a háttérben ült — most külön
   elem, hogy 9 másodperces ütemben lélegezhessen (lásd az élet-réteget). */
.htegla::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(130% 120% at 85% -10%,
      color-mix(in srgb, var(--tegla-szin, var(--kiemelt)) 24%, transparent),
      transparent 55%);
}
.htegla.hero::after {
  background: radial-gradient(130% 140% at 85% -10%,
      color-mix(in srgb, var(--tegla-szin, var(--kiemelt)) 28%, transparent),
      transparent 60%);
}
.htegla.csik::after { display: none; }
/* A hero értéke SOR, nem egyetlen szó: a nagy szám és a mellék-szöveg egy
   alapvonalon áll, és ha szűk a kijelző, a szöveg tördelődik — nem csonkul. */
.htegla.hero .htegla-ertek {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px;
  font-size: var(--t-plakat); line-height: 1;
  white-space: normal; overflow: visible; text-overflow: clip;
}
.htegla.hero .htegla-al:empty { display: none; }
/* A mellék-szöveg a nagy szám ALAPVONALÁN ül, nem alatta: együtt olvassa az
   ember a kettőt („16,4 t összvolumen · előtte 14,9 t"). */
.htegla.hero .htegla-mellek {
  min-width: 0; font-size: var(--t-apro); font-weight: 400;
  color: var(--halvany); letter-spacing: 0;
}
/* Teljes szélességű, de nem hero (naptár, heti értékelés): csak a sort tölti ki. */
.htegla.szeles { grid-column: 1 / -1; }

/* ---------- A KALIBRÁCIÓ CSÍKJA ----------
   Hős-csempeként a rács negyedét vitte el egyetlen töredéknek („6/7"), és a
   többi csempe szorult tőle. Csíkként ugyanaz az információ egy sorban áll:
   címke, arány, telítődő vonal, és hogy mi jön. Nem kártya — nincs kerete és
   háttere —, mert nem adat, hanem állapotjelző. A megnyíló lapja változatlan. */
.htegla.csik {
  grid-column: 1 / -1; min-height: 0;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 2px 6px; background: none; border: none; box-shadow: none;
}
.htegla.csik:active { transform: none; opacity: 0.7; }
.htegla.csik .htegla-cim { flex: none; font-size: var(--t-cimke); }
.htegla.csik .htegla-ertek {
  flex: none; font-size: var(--t-apro); line-height: 1;
  color: var(--tegla-szin, var(--kiemelt));
}
/* A vonal kapja a maradék helyet, a „köv.: …" pedig a jobb szélre kerül —
   a jelölés sorrendje (érték, alcím, csík) ettől független. */
.htegla.csik .kalib-csik { order: 3; flex: 1 1 auto; min-width: 40px; margin: 0; }
.htegla.csik .htegla-al {
  order: 4; flex: none; min-height: 0; max-width: 45%; font-size: var(--t-cimke);
}

/* ---------- OLDALSÓ ÁBRÁS CSEMPE (Heti értékelés) ----------
   A szöveg balra, a rajz jobbra, függőlegesen középen — a Hétkör így nem a
   szöveg alatt szorong, és a csempe alacsony maradhat. */
.htegla.oldalas {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 14px; row-gap: 2px;
}
.htegla.oldalas > .htegla-cim,
.htegla.oldalas > .htegla-ertek,
.htegla.oldalas > .htegla-al { grid-column: 1; }
.htegla.oldalas > .htegla-oldal { grid-column: 2; grid-row: 1 / span 3; }
/* A HETI ÉRTÉKELÉSEN a dátum nem plakát-szám: a csempe hangja halk, a rajz
   beszél. (A hét mondata a megnyíló lapon van, nem itt — Levi, 2026-09-18.) */
.htegla[data-tegla="heti_ert"] .htegla-ertek {
  font-size: var(--t-apro); font-weight: 600; color: var(--szoveg);
}

/* ---------- A NAPTÁR SORA ----------
   Bal oldalt a dátum, jobbra a három hét rácsa, teljes szélességben. A rács
   széles adat: félbe vágva csak egy dátumszám maradna belőle. */
.htegla[data-tegla="naptar"] {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 16px; row-gap: 0;
}
.htegla[data-tegla="naptar"] > .htegla-cim,
.htegla[data-tegla="naptar"] > .htegla-ertek,
.htegla[data-tegla="naptar"] > .htegla-al { grid-column: 1; }
.htegla[data-tegla="naptar"] > .htegla-sav {
  grid-column: 2; grid-row: 1 / span 3; margin-top: 0;
}
/* ALACSONY KIJELZŐN VISSZAVESZÜNK A LEVEGŐBŐL. A rács egy képernyő: ha nem fér
   el, nem görgetni kezd, hanem a csempék csonkulnak (`overflow: hidden`) — élesben
   a Naptár alja tűnt el a fülsáv mögött egy 780 px magas kijelzőn. A méretek itt
   ugyanabban a sorrendben fogynak, ahogy a szem sorrendje engedi: köz, belső
   margó, adatsáv, naptár-pötty. A SZÖVEG MÉRETE NEM VÁLTOZIK. */
@media (max-height: 830px) {
  body[data-szekcio="statisztika"] .htegla-racs { gap: 10px; }
  body[data-szekcio="statisztika"] .htegla { padding: 12px 14px 10px; }
  body[data-szekcio="statisztika"] .htegla-sav { --adatsav-magas: 22px; margin-top: 8px; }
  body[data-szekcio="statisztika"] .htegla-naptar { --naptar-pont: 13px; gap: 5px; margin-top: 8px; }
}
/* Keskeny kijelzőn a pötty is kisebb, hogy a dátum mellett kényelmesen elférjen. */
@media (max-width: 379px) {
  body[data-szekcio="statisztika"] .htegla-naptar { --naptar-pont: 13px; }
}

.htegla { transition: transform 0.14s ease, box-shadow 0.18s ease; }
@media (prefers-reduced-motion: reduce) { .htegla { transition: none; } }

/* A tégla-vizu: apró jel a jobb felső, üresebb félben — a pigmentfolt fölött
   ül, ezért félig áttetsző színnel is olvasható. */
.htegla-vizu {
  position: absolute; top: 12px; right: 12px;
  pointer-events: none; opacity: 0.95;
}
.htegla-vizu svg { display: block; }
.vizu-nyilak {
  display: flex; gap: 2px;
  font-size: 14px; font-weight: 800; font-style: normal;
  color: color-mix(in srgb, var(--halvany) 70%, transparent);
}
.vizu-nyilak i { font-style: normal; }
.vizu-nyilak .mozdul { color: var(--tegla-szin, var(--kiemelt)); }
/* A nyíl IRÁNYT és MINŐSÍTÉST is mond: zöld a kívánt irányba, piros ellene.
   Ahol nem tudjuk megmondani, mi lenne a jó (kalória megbízható cél nélkül,
   testsúly megbízható TDEE nélkül), ott marad a semleges tégla-szín — a
   tippelt minősítés rosszabb, mint a hallgatás. */
.vizu-nyilak .mozdul.jo { color: var(--siker); }
.vizu-nyilak .mozdul.rossz { color: var(--veszely); }

/* ---------- ÉLŐ CSEMPÉK — a „Jelző" irány (2026-09-13) ----------
   Két réteg. (1) BELÉPŐ: a fül megnyitásakor minden mini grafikon egyszer
   megrajzolja magát, téglánként 110 ms-os lépcsőben, ~2 mp alatt kész — a
   rács ehhez a `belepo` osztályt kapja, és CSAK fülváltáskor (app.js,
   haladasBelepoKell). (2) JELZŐ: a belépő után csak az mozog tovább, aminek
   mondanivalója van — a Terhelhetőség végpontja, ha nem „Rendben"; a kalória
   túllépő oszlopai; a Trendek piros nyila. Ami rendben van, az áll: egy jó
   napon az oldal mozdulatlan, és az is üzenet.

   Minden belépő kulcskocka CSAK `from`-ot ad meg, és `backwards` kitöltésű:
   a végállapot mindig az elem SAJÁT stílusa (a gyűrű a maga töltöttségére, az
   oszlop a maga magasságára fut). Így nincs `forwards`, ami utána örökre
   felülírná a :active kicsinyítést vagy az emelt tégla átlátszóságát — és a
   csökkentett mozgás egyetlen `animation: none`-nal a kész képet adja. */
.htegla-vizu svg { overflow: visible; }
/* A KALÓRIA-CSEMPE SÁVJA: a csempe alján, teljes szélességben. A sarokban ez
   az egy ábra tömör folttá állt össze (14 magas oszlop), és elvette a helyet
   a leghosszabb csempe-címtől. Itt kiterül, és a cím megkapja az egész sort. */
/* A SÁV MAGASSÁGA 26 PX (2026-09-18). 16-tal a vonalak és az oszlopok alig
   mondtak valamit — Levi: „nem nagyon lehet kiolvasni belőle semmit". A csempe
   ettől nem lett magasabb: a hős-csempe helyét a Kalibráció csíkja vette át. */
.htegla-sav { display: block; width: 100%; margin-top: 8px; line-height: 0; }
.htegla-sav svg {
  display: block; width: 100%; height: var(--adatsav-magas, 26px); overflow: visible;
}
/* A TRENDEK nyilai is sávban állnak, csak nem SVG-ben: egyenletesen elosztva,
   a csempe teljes szélességében. */
/* A NAPTÁR PÖTTYEI — 21 nap, hét oszlopban. Kör, nem négyzet: az app többi
   fülén kapszula-sávok, gyűrűk és pöttyök vannak, a négyzetrács ebből lógott ki.
   A méret FIX (nem a csempe szélességének aránya), mert a pötty akkor kör, ha a
   magassága és a szélessége ugyanaz — a sávok nyújtott SVG-jében ez nem volt
   tartható. A mai nap GYŰRŰ: teli pöttyként beleolvadna az edzésnapokba. */
.htegla-naptar {
  display: grid; grid-template-columns: repeat(7, var(--naptar-pont, 15px));
  gap: 6px; justify-content: end; margin-top: 10px; line-height: 0;
}
.htegla-naptar i {
  display: block; width: var(--naptar-pont, 15px); height: var(--naptar-pont, 15px);
  border-radius: 50%; background: var(--pont-szin, var(--kiemelt)); opacity: 0.22;
}
.htegla-naptar i.edzes { opacity: 0.95; }
.htegla-naptar i.jovo { opacity: 0.09; }
/* A MAI NAP TELI PÖTTY, a naptár narancsának világosabb, aranyos árnyalatában
   (a színt a JS adja `--pont-szin`-ben). Előbb gyűrű volt (a belseje feketének
   látszott), aztán fehér — az viszont túl feltűnő volt a csempén (Levi,
   2026-09-20). A pulzálás (lentebb, `elo-pulzal`) mondja meg, hogy ez a mai. */
.htegla-naptar i.ma {
  background: var(--pont-szin, var(--szoveg)); opacity: 1;
}

.htegla-nyilsav { line-height: 1; }
.htegla-nyilsav .vizu-nyilak {
  display: flex; justify-content: space-between; width: 100%;
  height: var(--adatsav-magas, 16px); align-items: center;
}

/* A HETI ÉRTÉKELÉS CSEMPÉJE: az egyetlen, amelyik BESZÉL.
   A szám helyén egy mondat áll, tehát tördelnie kell — a többi csempén a
   `nowrap` és az ellipszis a helyes, mert ott egyetlen érték van. A jobb
   felső sarokban három pötty mondja meg, ki szól; a teli a beszélő. */
.htegla.hangos .htegla-ertek {
  font-size: var(--t-apro); font-weight: 600; line-height: 1.4;
  color: var(--szoveg);
  white-space: normal; overflow: hidden; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.htegla.hangos { justify-content: flex-start; }
/* A cím ne fusson a pöttyök alá: a három pötty a jobb felső sarokban ül, a
   cím pedig nowrap + ellipszis — a jobb oldali margó adja meg neki a határt. */
.htegla.hangos .htegla-cim { padding-right: 30px; }
.htegla.hangos .htegla-al { margin-top: auto; }

/* ---------- A HÉTKÖR ----------
   Hét szegmens egy gyűrűn, hétfőtől vasárnapig; a fény a nap pontja. A belépőnél
   HÉTFŐTŐL VASÁRNAPIG söpör végig — a hét lejátssza magát —, aztán megáll. Nem
   lüktet tovább: ami rendben van, az áll (a rács jelző-elve). */
.hkor { display: block; line-height: 0; }
.hkor svg { display: block; }
.belepo .hkor-szel {
  animation: elo-elotunik 420ms ease backwards;
  animation-delay: calc(var(--alap, 0ms) + var(--i) * 110ms);
}
.pont, .udvar, .oszlop, .lyuk, .nap, .ma { transform-box: fill-box; }
.pont, .udvar, .nap, .ma { transform-origin: center; }
.oszlop, .lyuk { transform-origin: bottom; }
.udvar { opacity: 0; }
.vizu-nyilak i { display: inline-block; }
/* ---------- A BELÉPŐ KÖZÖS ÓRÁJA (Levi, 2026-09-23) ----------
   Minden fül és minden lap ugyanarról az óráról mozog. A számok a meglévő
   mozdulatokból jönnek (a Ma fül herója, az Edzés fül, a Haladás-rács), csak
   egy helyen állnak: ha egy lap belépője máshogy jár, az itt látszik. */
:root {
  --be-gyors: 260ms;      /* felbukkan: pöttyök, pontok, szeletek */
  --be-tart: 340ms;       /* beúszik vagy alulról nő: hero, csík, oszlop */
  --be-eltol: 170ms;      /* a hero után ennyivel indul a tartalom */
  --be-lepcso: 34ms;      /* egymás utáni elemek: rács, a hét napjai */
  --be-lepcso-suru: 16ms; /* harminc elem: havi oszlopok, a gyűrű szeletei */
  --be-kartya-lepcso: 55ms; /* egész kártyák egymás után: a Ma fül blokkjai, a Haladás csempéi */
  --be-kartya-utan: 220ms;  /* a csempe adata ennyivel a csempe indulása után rajzolódik */
  --be-rajz: 900ms;       /* vonalrajz */
  --be-szam: 820ms;       /* a szám előtűnik, amikor a rajz kész */
  --be-teljes: 1200ms;    /* A MÉRCE: a naptár gyűrűjének teljes belépője */
  --be-elet: var(--be-teljes); /* az élő réteg (futó pont, körbejáró fény) indul */
}
/* MINDEN LAP UGYANANNYI IDEIG LÉP BE (Levi, 2026-09-23 este): a mérce a
   naptár gyűrűje, 1,2 mp. Egy lépcsőzött csoport nem fix lépéssel jár, hanem
   a SAJÁT elemszámából (`--n`, a rajzoló adja) számolja ki, mekkora lépés
   kell ahhoz, hogy az utolsó eleme pont a mércénél érjen be: hat oszloppár
   ráérősen, harminc oszlop sűrűn, hatvan mérés-pont villámgyorsan, de a lap
   egésze mindig ugyanannyi. Így egy hosszú animációjú lap nem lesz csúnyán
   gyors, egy rövid pedig nem hagy üres másodperceket. */
.terhel-havi-doboz, .al-ritmus-doboz, .edzes-heti-doboz, .gr-doboz.nyulik, .tr-paros, .izom-sav {
  --be-lepcso-n: calc((var(--be-teljes) - var(--be-eltol) - var(--be-tart)) / var(--n, 30));
}
/* A vonalrajz után bukkannak fel a pontok: a maradék időt osztják el. */
.gr-doboz.gr-vonal-doboz { --be-lepcso-n: calc((var(--be-teljes) - 760ms - var(--be-gyors)) / var(--n, 30)); }
@keyframes elo-rajz { from { stroke-dashoffset: 1; } }
@keyframes elo-felbukkan { from { opacity: 0; transform: scale(0); } }
@keyframes elo-no { from { transform: scaleY(0); } }
@keyframes elo-beuszik { from { opacity: 0; transform: translateY(5px); } }
@keyframes elo-elotunik { from { opacity: 0; } }
@keyframes elo-lelegzik { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@keyframes elo-udvar { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }
@keyframes elo-pislog { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* ---- AZ ÉLET-RÉTEG (2026-09-18) ----
   Levi: „egyelőre csak a kalória csempéjén látok animációt, de mindenhova
   kértem." A belépő eddig is minden csempén futott, de csak fülváltáskor, két
   másodpercig; utána egyedül a JELZŐ réteg mozgott — az pedig szándékosan csak
   ott, ahol baj van (a kalória túllépő oszlopai, a terhelhetőség pontja, ha nem
   „Rendben", a Trendek piros nyila).
   Mostantól minden csempén mozog EGY elem: a LEGUTOLSÓ adat. A mai nap, a mai
   oszlop, a legfrissebb mérés — az, ami még élhet. Lassabb (3,4 s) és halkabb,
   mint a jelző réteg (2,6 s), tehát a kettő nem mosódik össze: a lapon a
   mozgás továbbra is azt jelenti, hogy valami szól, csak a lap már nem halott. */
@keyframes elo-szuszog { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes elo-lelegzik-halk { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes elo-nyil-halk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes elo-nyil { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.55; transform: translateY(-1.5px); } }

/* (1) belépő */
/* A CSEMPÉK AZONNAL OTT VANNAK. Korábban maguk a téglák is beúsztak,
   téglánként 110 ms-os lépcsőben — a rács így két másodpercig épült fel,
   és a fül megnyitása után várni kellett, mire olvashatóvá vált. A doboz
   most az első képkockán a helyén van; ami ÉL, az a tartalma: a mini
   grafikonok megrajzolják magukat, a jelző-elemek utána tovább mozognak.

   AZ ÜTEM (2026-09-14, második kör): az egész lánc ~37%-kal rövidebb.
   A leglassabb szál — a nyolcadik csempe görbéjének végpontja — 1755 ms
   helyett 1120 körül ér célba, a jelző-mozgás pedig 1885 helyett 1180-nál
   indul. A MOZDULATOK JELLEGE nem változott: a görbe ugyanúgy rajzolódik,
   az oszlopok ugyanúgy nőnek — csak nem kell kivárni őket. */
/* A CSEMPE ELŐBB MEGÉRKEZIK, AZTÁN RAJZOL (Levi, 2026-09-23, a belépő-vászon
   A lapja): a csempe maga is beúszik (lásd „KÁRTYÁK BELÉPŐJE" lejjebb), és az
   adata csak azután indul, hogy a csempe nagyjából a helyén van. */
/* A CSEMPE ÉS A RAJZA EGYSZERRE INDUL (Levi, 2026-09-24): a 220 ms-os
   „előbb megérkezik, aztán rajzol" késés kikerült; a megjelenés és a
   kirajzolódás ugyanabban a pillanatban kezd, csempénként a rács lépcsőjével. */
.belepo .htegla { --alap: calc(var(--t, 0) * var(--be-kartya-lepcso)); }
.belepo .vonal { stroke-dasharray: 1; animation: elo-rajz 560ms cubic-bezier(0.4, 0, 0.2, 1) backwards; animation-delay: var(--alap); }
.belepo .pont { animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; animation-delay: calc(var(--alap) + 480ms); }
.belepo .alapvonal { animation: elo-elotunik 340ms ease backwards; animation-delay: calc(var(--alap) + 300ms); }
.belepo .terulet { animation: elo-elotunik 520ms ease backwards; animation-delay: calc(var(--alap) + 240ms); }
.belepo .oszlop { animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--alap) + var(--i, 0) * 28ms); }
.belepo .lyuk { animation: elo-elotunik 220ms ease backwards; animation-delay: calc(var(--alap) + var(--i, 0) * 28ms); }
.belepo .vizu-nyilak i { animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--alap) + var(--i, 0) * 52ms); }
.belepo .nap, .belepo .ma { animation: elo-felbukkan var(--be-gyors) ease-out backwards; animation-delay: calc(var(--alap) + var(--i, 0) * 18ms); }

/* (2) jelző — a belépő után indul (`--jelzo-kesik`), belépő nélkül azonnal */
.belepo .htegla { --jelzo-kesik: calc(var(--alap) + 800ms); }
/* AZ ÉLET-RÉTEG: csempénként egy elem, a legutolsó adat. A `:not()` azért kell,
   hogy a JELZŐ réteg mindig erősebb maradjon nála — ahol baj van, ott a hangos
   mozgás vezet, nem a halk. */
/* A „G" HÁROM ÚJ MOZGÁSA (Levi, 2026-09-19): a színfolt lélegzik (9 mp,
   csempénként eltolva), fény fut a két vonalon (9 mp), és a Hétkörön egy
   szegmensnyi fény jár körbe (12 mp). Mind lassú, és egyik sem mozdít el
   semmit a helyéről — csak fény és méret változik. */
@keyframes elo-dereng { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes elo-forog { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.htegla::after { animation: elo-dereng 9s ease-in-out infinite; animation-delay: calc(var(--t, 0) * -1.1s); }
.hkor-feny { transform-box: fill-box; transform-origin: center; animation: elo-forog 12s linear infinite; }
/* A vonalakon a VÉGPONT fut végig (`.futo`, SMIL animateMotion az app.js
   `futoPont`-jában) — ennek nincs CSS-animációja, a mozgás maga az élete. A
   belépőnél a vonal rajzolása alatt rejtve van, hogy ne egy még meg nem rajzolt
   vonalon szaladjon. */
.belepo .futo { animation: elo-elotunik 300ms ease backwards; animation-delay: calc(var(--alap) + 560ms); }
/* Belépőkor a söprés csak a gyűrű rajza UTÁN tűnik elő. */
.belepo .hkor-feny { animation: elo-elotunik 400ms ease backwards, elo-forog 12s linear infinite; animation-delay: calc(var(--alap) + 1060ms), 0s; }
/* A BELÉPŐ OSZTÁLY ~2,5 mp után lekerül a rácsról (app.js). Ami ITT `.belepo`
   alatt áll, az csak a belépő idejére szól; utána az élet-réteg sima szabályai
   élnek, és az `ujra` osztály tiszta lappal tudja újraindítani ugyanazokat az
   animációkat. */

.htegla:not(.jelez) .pont { animation: elo-lelegzik-halk 3.4s ease-in-out infinite; }
.oszlop.utolso:not(.tul) { animation: elo-szuszog 3.4s ease-in-out infinite; }
.hkor-szel.utolso { animation: elo-szuszog 3.4s ease-in-out infinite; }
/* A NAPTÁR MAI NAPJA LÜKTET (Levi, 2026-09-19: „a naptár fehér pontja
   pulzáljon"): a gyűrűből 2,6 mp-enként egy halvány kör indul ki és elenyészik
   — szívverés, nem lélegzés. A belső gyűrű vastagsága végig ugyanaz. */
@keyframes elo-pulzal {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pont-szin, var(--szoveg)) 60%, transparent); }
  45% { transform: scale(1.18); }
  70%, 100% { transform: scale(1); box-shadow: 0 0 0 9px transparent; }
}
.htegla-naptar i.ma { animation: elo-pulzal 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
.kalib-csik i { animation: elo-szuszog 3.4s ease-in-out infinite; }
.vizu-nyilak .mozdul:not(.rossz) { animation: elo-nyil-halk 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 180ms); }

.htegla.jelez .pont { animation: elo-lelegzik 2.6s ease-in-out infinite; animation-delay: var(--jelzo-kesik, 0ms); }
.htegla.jelez .udvar { animation: elo-udvar 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; animation-delay: var(--jelzo-kesik, 0ms); }
.oszlop.tul { animation: elo-pislog 2.6s ease-in-out infinite; animation-delay: calc(var(--jelzo-kesik, 0ms) + var(--i, 0) * 120ms); }
.vizu-nyilak .rossz { animation: elo-nyil 2.6s ease-in-out infinite; animation-delay: var(--jelzo-kesik, 0ms); }
/* belépő + jelző ugyanazon az elemen: előbb a belépő, utána a lélegzés.
   A késéseknek EGYEZNIÜK KELL a fenti (1) blokkal — ha ott változik a szám,
   itt is változtatni kell, különben az elem kétszer indulna. */
.belepo .htegla.jelez .pont { animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards, elo-lelegzik 2.6s ease-in-out infinite; animation-delay: calc(var(--alap) + 480ms), var(--jelzo-kesik); }
.belepo .oszlop.tul { animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards, elo-pislog 2.6s ease-in-out infinite; animation-delay: calc(var(--alap) + var(--i, 0) * 28ms), calc(var(--jelzo-kesik) + var(--i, 0) * 120ms); }
.belepo .vizu-nyilak .rossz { animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards, elo-nyil 2.6s ease-in-out infinite; animation-delay: calc(var(--alap) + var(--i, 0) * 52ms), var(--jelzo-kesik); }
/* belépő + ÉLET ugyanazon az elemen. Ugyanaz a kényszer, mint fent: a belépő
   osztálya a rácson MARAD a mozgás lefutása után is (a következő újrarajzolásig),
   ezért az élet-réteget itt is ki kell mondani — különben a csempék a belépő
   után megint megállnának. A késések egyeznek az (1) blokkal. */
.belepo .htegla:not(.jelez) .pont { animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards, elo-lelegzik-halk 3.4s ease-in-out infinite; animation-delay: calc(var(--alap) + 480ms), var(--jelzo-kesik); }
.belepo .oszlop.utolso:not(.tul) { animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards, elo-szuszog 3.4s ease-in-out infinite; animation-delay: calc(var(--alap) + var(--i, 0) * 28ms), var(--jelzo-kesik); }
.belepo .hkor-szel.utolso { animation: elo-elotunik 420ms ease backwards, elo-szuszog 3.4s ease-in-out infinite; animation-delay: calc(var(--alap, 0ms) + var(--i) * 110ms), var(--jelzo-kesik); }
.belepo .htegla-naptar i.ma { animation: elo-felbukkan var(--be-gyors) ease-out backwards, elo-pulzal 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; animation-delay: calc(var(--alap) + var(--i, 0) * 18ms), var(--jelzo-kesik); }
.belepo .vizu-nyilak .mozdul:not(.rossz) { animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards, elo-nyil-halk 3.4s ease-in-out infinite; animation-delay: calc(var(--alap) + var(--i, 0) * 52ms), calc(var(--jelzo-kesik) + var(--i, 0) * 180ms); }

@media (prefers-reduced-motion: reduce) {
  .htegla-racs .htegla,
  .htegla-vizu *,
  .htegla-sav *,
  .hkor *,
  .kalib-csik i,
  .htegla::after { animation: none !important; }
}

/* ---------- a tégla lapja ----------
   Színes hős-sáv a lap tetején: a tégla kulcsszáma nagyban, a szakasz
   színével — alatta a megszokott tartalom. */
.tegla-lap-hero {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -14px -14px 16px; padding: 20px 16px 16px;
  background: radial-gradient(120% 160% at 82% -30%,
    color-mix(in srgb, var(--tegla-szin, var(--kiemelt)) 26%, transparent),
    transparent 62%);
  border-bottom: 1px solid color-mix(in srgb, var(--tegla-szin, var(--kiemelt)) 20%, var(--keret));
}
.tegla-hero-ertek {
  font-size: var(--t-orias); line-height: 1;
  color: var(--tegla-szin, var(--szoveg));
}
.tegla-hero-ertek:not(.szam) { font-weight: 800; }
.tegla-hero-al { font-size: var(--t-apro); color: var(--halvany); }
/* A lapba csomagolt régi kártyák saját kerete itt is kikapcsol — kártya a
   lapon belül zavaros lenne (ugyanaz az elv, mint a hblokk-torzsnél volt). */
.tegla-lap > .kartya {
  border: 0; background: none; box-shadow: none;
  padding: 0; margin: 0 0 8px; border-radius: 0;
}
/* A LAP GRAFIKONJAI A CSEMPE SZÍNÉT VISELIK. A hős-sáv eddig is a
   `--tegla-szin`-ből élt, a benne lévő diagramok viszont fixen ciánok
   voltak: az Edzés lapján zöld fejléc alatt kék oszlopok álltak, a
   Testsúlyén türkiz alatt kék. A grafikon.js innen olvassa a sorozat
   színét (SZIN.fo). */
.tegla-lap { --grafikon-szin: var(--tegla-szin, var(--kiemelt)); }

/* ---------- A LAP A KÉPERNYŐHÖZ IGAZODIK (Levi, 2026-09-23) ----------
   Minden tégla-lap oszlopként áll a törzs teljes magasságában; a `nyulik`
   blokk (a lap grafikonja) kapja a maradék helyet, és a közepén tartja a
   rajzot, így a jegyzet és a lenyíló a lap ALJÁRA kerül, nem a grafikon alá
   tapadva üres fekete sávval. Kis telefonon, ahol nincs maradék hely, a lap
   ugyanúgy görgethető, mint eddig. */
.alsolap-torzs.torzs-nyujt { display: flex; flex-direction: column; }
.tegla-lap.lap-nyujt { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 100%; }
.lap-nyujt .nyulik { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
/* A HERO ÉS A CSÍK BELÉPŐJE ugyanaz a mozdulat, mint a Ma fül heróján és az
   Edzés fülön: beúszik alulról, a csík fél lépéssel utána. */
.tegla-lap-hero { animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.tegla-lap .szam-csik { animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--be-eltol) / 2); }

/* ---------- TRENDEK: OSZLOPPÁROK (T2, 2026-09-23) ----------
   Hat mérés, mindegyik egy pár: a halvány az előző 14 nap, a teli a mostani.
   A szín az adaté, az irány nem minősít. A hat pár a hero és a jegyzet közti
   teljes helyet kitölti, egyenletesen elosztva. */
.tr-paros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; margin: 6px 0; }
.lap-nyujt .tr-paros.nagy { flex: 1; align-content: space-evenly; }
.tr-paros-cella { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso))); }
.tr-paros-cella svg { max-width: 100%; height: auto; }
.tr-paros-cella .tr-nev { font-size: var(--t-apro); color: var(--szoveg); white-space: nowrap; }
.tr-paros-cella b { font-size: var(--t-cim); line-height: 1; white-space: nowrap; }
.tr-regi { transform-box: fill-box; transform-origin: bottom;
  animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.tr-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-apro); color: var(--halvany); }
.tr-delta svg { width: 18px; height: 18px; flex: none; }
.tr-delta.fel, .tr-delta.le { color: var(--m); }

/* ---------- EDZÉS: IZOMCSOPORTOK EGY SÁVBAN (E1, 2026-09-23) ----------
   A lime árnyalatai a legnagyobbtól a legkisebbig; a szeletek balról jobbra
   nőnek ki, a rács lépcsőjével. */
.izom-sav { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; margin-top: 4px; }
.izom-sav i { display: block; height: 100%; transform-origin: left;
  animation: izom-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso))); }
@keyframes izom-no { from { transform: scaleX(0); } }
.izom-jel { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 9px; font-size: var(--t-cimke); color: var(--halvany); }
.izom-jel span { display: inline-flex; align-items: center; gap: 5px; }
.izom-jel i { width: 8px; height: 8px; border-radius: 50%; }
.izom-jel b { color: var(--szoveg); }
@media (prefers-reduced-motion: reduce) {
  .tegla-lap-hero, .tegla-lap .szam-csik, .tr-paros-cella, .tr-regi, .izom-sav i { animation: none !important; }
}

.tegla-lap .csempe { padding: 16px 14px; }
.tegla-lap .csempe-ertek { font-size: var(--t-orias); }
.terhel-magyarazat { margin: 0 0 14px; line-height: 1.55; }
.tegla-lap .csempe-ertek.mezo-hiba { color: var(--figyelem); }

/* ---------- a terhelhetőség havi oszlopai (2026-09-20) ----------
   Harminc nap a lapon, naponta egy oszlop: a magasság a pontszám, a szín az
   ítélet. A MOZGÁS a rács szokásos nyelve, új szótár nélkül:

   - belépő: `elo-no`, alulról, 22 ms-os lépcsőben — ugyanaz a mozdulat, mint
     a csempék mini oszlopainál, csak sűrűbb lépcsővel, mert itt harminc áll
     egymás mellett és a 28 ms-os lépcső már egy teljes másodpercig söpörne;
   - élet: `elo-szuszog` (3,4 s), oszloponként ELTOLVA. Együtt lüktetve az
     egész grafikon dobogna; eltolva lassú hullám fut végig a hónapon.
   - a MAI oszlop `elo-pislog`-gal él (mélyebb lélegzet), mert a rácson is
     mindig az utolsó adat az, ami még mozoghat.

   A `transform-origin: bottom` azért kell, hogy az oszlop a TENGELYRŐL nőjön
   ki, ne a közepéből táguljon. */
.th-oszlop, .th-lyuk { transform-box: fill-box; transform-origin: bottom; }
.th-oszlop {
  animation:
    elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards,
    elo-szuszog 3.4s ease-in-out infinite;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso-suru))), calc(var(--i, 0) * -104ms);
}
.th-oszlop.th-ma {
  animation:
    elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards,
    elo-pislog 2.6s ease-in-out infinite;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso-suru))), 0s;
}
.th-lyuk {
  animation: elo-elotunik 240ms ease backwards;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso-n, var(--be-lepcso-suru)));
}
.th-ertek { animation: elo-elotunik 320ms ease backwards; animation-delay: calc(var(--be-teljes) - 320ms); }
@media (prefers-reduced-motion: reduce) {
  .th-oszlop, .th-oszlop.th-ma, .th-lyuk, .th-ertek { animation: none !important; }
}
/* Az értékbuborék horgonya. A grafikon.js abszolút pozíciót ad a buboréknak a
   GYÖKERÉHEZ képest — ha az nincs pozicionálva, a buborék a legközelebbi
   pozicionált ősre (itt a képernyőre feszített lap-háttérre) ül ki, és a
   grafikontól függetlenül csúszkál. */
.terhel-havi-doboz { position: relative; }
/* A találati sávok láthatatlanok, de billentyűzettel bejárhatók: a fókuszt
   ilyenkor látni is kell. */
.th-cel:focus-visible { outline: 2px solid var(--szoveg); outline-offset: -1px; }

/* A grafikon a tégla-lapon: a kartya-nullázás elvette a margókat, ezért a
   viewBoxon KÍVÜL rajzolt tengelyfeliratok a képernyő szélén csonkultak, és
   görgetés közben a fölöttük lévő elemekre (pl. a hős-sáv kcal-feliratára)
   úsztak rá. Visszakapják a helyet, és a doboz zár — semmi nem lóg ki. */
.tegla-lap .grafikon-doboz {
  padding: 18px 8px 8px 40px;
  overflow: hidden;
}

/* --- a szokásosaid --- */
.szokasos-cim {
  margin: 14px 2px 8px; font-size: var(--t-cimke); font-weight: 800;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  color: var(--halvany);
}
/* A rács alatt levegő: a kereső ne fusson egybe a csempékkel. */
/* VÍZSZINTES SZALAG, nem 2×2-es rács. A rács négy csempénél megtelt, és a
   nyolcadik szokásod sehogy nem fért el. Így viszont annyi fér rá, amennyi van,
   és a képernyő szélén félbevágott csempe hívja a hüvelykujjat.

   A NEGATÍV MARGÓ a lap 14 képpontos belső margóját üti ki: a szalag a
   képernyő széléig ér, tehát a csempék tényleg „kigördülnek" a képből, nem egy
   dobozban tolonganak. A padding visszaadja a kezdő behúzást.

   A `scroll-padding-inline-end` a WebKit záró-padding hibája miatt kell: a
   görgetés végén egyébként elnyelné a jobb oldali levegőt, és az utolsó csempe
   a kijelző pereméhez tapadna. */
.szokasos-racs {
  display: flex; gap: 8px; margin: 0 -14px 14px; padding: 2px 14px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: 14px;
  overscroll-behavior-x: contain;
}
.szokasos-racs::-webkit-scrollbar { display: none; }
/* Fix szélesség: a másfeledik csempe SZÁNDÉKOSAN kilóg a képből — az mondja
   meg, hogy van még, görgetés nélkül is. Egyenlő magasság, hogy a szalag ne
   legyen fűrészfogas. */
.szokasos-racs .szokasos-tegla {
  flex: none; width: 62%; max-width: 230px; min-height: 92px;
  scroll-snap-align: start;
}
.szokasos-tegla {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 12px; border-radius: var(--sugar-kicsi);
  background: var(--lap); border: 1px solid var(--keret);
  border-bottom: 3px solid var(--siker);
  color: var(--szoveg); font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.szokasos-tegla:active { transform: scale(0.98); }
.szokasos-tegla.sav-sarga { border-bottom-color: var(--figyelem); }
.szokasos-tegla.sav-piros { border-bottom-color: var(--veszely); opacity: 0.7; }
/* Egy csempe mostantól egy EGÉSZ étkezés: a neve több szó, mint egy
   hozzávalóé volt („Padlizsánkrém, Teljes kiőrlésű kenyér"). Két sorra
   vágjuk, különben a 2×2-es rács felborul. */
.szokasos-nev {
  font-weight: 700; font-size: var(--t-apro); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.szokasos-adag { font-size: var(--t-cimke); }

/* ===== MÁSOLÁS-LAP: NAP-TENGELY (2026-09-14) =====
   Függőleges idővonal: öt nap egymás alatt, középen a nézett nap. Fönt a
   múlt (onnan IDE hozunk), lent a jövő (ide INNEN viszünk) — a két irány
   nem felirat, hanem HELY. A vonal színe ezt ismétli: fölül kalória-piros,
   alul kiemelés-cián, középen semleges.

   A sorok egyenlően osztoznak a magasságon (`1fr`), mert a tengelynek
   levegő kell, hogy idővonalnak látsszon, ne listának. A törzs így nem is
   görget: pont öt sor van, mindig. */
.tengely {
  position: relative; height: 100%;
  display: grid; grid-auto-rows: minmax(0, 1fr); gap: 2px;
}
/* A MÚLT SZAKASZA PIROS (tegnapelőtt, tegnap: onnan hozunk), a jövőé cián
   (oda viszünk); a nézett nap pontja körül vált a szín. Öt sor, egyforma
   magas: a váltás a vonal közepén van. */
.tengely-vonal {
  position: absolute; left: 21px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kaloria) 80%, transparent) 0 44%,
    color-mix(in srgb, var(--szoveg) 22%, transparent) 50%,
    color-mix(in srgb, var(--kiemelt) 70%, transparent) 56% 100%);
}
.ts {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 0; min-width: 0;
  background: none; border: 0; color: var(--szoveg); font: inherit;
  text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ts:active { transform: scale(0.99); }
/* A PONT ül a vonalon: a sor bal széle a tengely, nem a szöveg. */
.ts-pont {
  flex: none; width: 14px; height: 14px; margin-left: 15px; border-radius: 50%;
  background: var(--hatter);
  border: 2px solid color-mix(in srgb, var(--szoveg) 30%, transparent);
}
.ts.mult .ts-pont { border-color: var(--kaloria); }
.ts.jovo .ts-pont { border-color: var(--kiemelt); }
/* A NÉZETT NAP lehorgonyozva: nagyobb, tömör pont és halk zöld alap. Nem
   koppintható — önmagára másolni értelmetlen —, ezért nincs :active sem. */
.ts.most .ts-pont {
  width: 20px; height: 20px; margin-left: 12px;
  border-color: var(--siker); background: var(--siker);
  animation: ts-pulzal 2.2s ease-in-out infinite;
}
/* A HORGONY-PONT LÉLEGZIK: ez a „itt vagy" jele, nem riasztás — ezért lassú,
   lágy lüktetés, nem a LED-ek éles villogása. A fény és a méret együtt
   mozdul, így a mozgás akkor is látszik, ha a szem épp a szövegen van. */
/* A fény színe a hívótól jön (`--pulzus-feny`), mert két helyen szól: a
   másolás lap horgonya zölden, az Étkezés-fül soron következő étkezése
   ciánul. Alapértéknek a zöld marad, hogy a régi hívó ne változzon. */
@keyframes ts-pulzal {
  0%, 100% { transform: scale(1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--pulzus-feny, var(--siker)) 55%, transparent); }
  50% { transform: scale(1.14);
    box-shadow: 0 0 22px color-mix(in srgb, var(--pulzus-feny, var(--siker)) 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ts.most .ts-pont { animation: none; box-shadow: 0 0 12px color-mix(in srgb, var(--siker) 60%, transparent); }
}
.ts.most {
  background: color-mix(in srgb, var(--siker) 7%, transparent);
  border-radius: var(--sugar); cursor: default;
}
.ts.most:active { transform: none; }
.ts-szov { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ts-nap {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--t-cim); font-weight: 700; line-height: 1.1;
}
.ts-nap small { font-size: var(--t-cimke); font-weight: 400; color: var(--halvany); }
.ts.most .ts-nap { color: var(--siker); }
.ts-etel {
  font-size: var(--t-apro); color: var(--halvany);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-adat { font-size: var(--t-cimke); color: var(--halvany); }
/* A pirula a koppintás tettét mondja: „másolás". Az IRÁNYT nem a felirat
   viszi, hanem a szín és a hely — fönt piros (onnan ide), lent cián (innen
   oda). Két külön szó (hozom/viszem) ugyanezt ismételte volna el gyengébben. */
.ts-tett {
  flex: none; padding: 7px 11px; border-radius: var(--sugar-pirula);
  font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ts.mult .ts-tett { color: var(--kaloria); background: color-mix(in srgb, var(--kaloria) 13%, transparent); }
.ts.jovo .ts-tett { color: var(--kiemelt); background: color-mix(in srgb, var(--kiemelt) 13%, transparent); }
/* A NÉZETT NAP sora is `disabled` (önmagára másolni értelmetlen), de nem
   halvány: az a horgony, amihez a többi napot méred. Csak a valóban üres
   forrás fakul ki. */
.ts[disabled]:not(.most) { opacity: 0.4; cursor: default; }
.ts[disabled]:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .ts:active { transform: none; } }

/* --- a soron következő étkezés kiemelt kártyája --- */
.etkezes-kiemelt {
  background: radial-gradient(140% 120% at 90% -20%,
      color-mix(in srgb, var(--kiemelt) 15%, transparent), transparent 55%),
    var(--lap-vilagos);
  border-color: color-mix(in srgb, var(--kiemelt) 35%, transparent);
}
.ek-fej { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ek-cim { font-size: var(--t-nagy); font-weight: 800; }
.ek-mikor { margin-left: auto; font-size: var(--t-cimke); }
.ek-javaslat {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 64px; margin-top: 8px; padding: 10px 14px;
  border-radius: var(--sugar-kicsi);
  background: var(--lap-emelt); border: 1px solid var(--keret);
  border-left: 4px solid var(--siker);
  color: var(--szoveg); font: inherit; font-size: var(--t-torzs); text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ek-javaslat:active { transform: scale(0.98); }
.ek-javaslat.sav-sarga { border-left-color: var(--figyelem); }
.ek-javaslat.sav-piros { border-left-color: var(--veszely); }
.ek-javaslat .ek-nev { min-width: 0; white-space: normal; line-height: 1.25; }
.ek-javaslat .ek-kcal { margin-left: auto; font-weight: 800; color: var(--siker);
  font-size: var(--t-cim); }
.ek-javaslat.sav-sarga .ek-kcal { color: var(--figyelem); }
.ek-javaslat.sav-piros .ek-kcal { color: var(--veszely); }

/* --- összehúzott üres étkezés --- */
/* Az idővonalon a szaggatott KERET felesleges: a szaggatott pont már
   megmondta, hogy ez az étkezés még üres. Marad a puszta szövegsor. */
.etkezes-osszehuzott {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 56px; padding: 0; margin: 0;
  background: transparent; border: 0;
  color: var(--halvany); font: inherit; font-weight: 600; font-size: var(--t-cim);
  text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Az üres étkezés sora: a név nyúlik, az ikonok a jobb szélen ülnek —
   ugyanott, ahol a kitöltött étkezés fejlécében. */
.etkezes-uressor { display: flex; align-items: center; gap: 2px; width: 100%; }
.etkezes-uressor .etkezes-osszehuzott { flex: 1 1 auto; width: auto; }
/* A kiemelt kártyán a másolás a „most van itt az ideje" után jön, és nem
   tolja szét a fejlécet: az ikon a saját alapvonalán ül. */
.ek-fej .etkezes-fej-ikon { align-self: center; margin-right: -4px; }

/* --- recept-rács --- */
.recept-racs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rtegla {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: 3px;
  min-height: 116px; padding: 12px 12px 10px;
  border-radius: var(--sugar-nagy);
  background: var(--lap); border: 1px solid var(--keret);
  color: var(--szoveg); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--melyseg);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rtegla::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 110% at 85% -15%, var(--fer-fenye, transparent),
    transparent 55%);
}
.rtegla.sav-zold { --fer-fenye: color-mix(in srgb, var(--siker) 22%, transparent); }
.rtegla.sav-sarga { --fer-fenye: color-mix(in srgb, var(--figyelem) 22%, transparent); }
.rtegla.sav-piros { --fer-fenye: color-mix(in srgb, var(--veszely) 20%, transparent); opacity: 0.65; }
.rtegla:active { transform: scale(0.98); }
.rtegla-nev { font-weight: 800; font-size: var(--t-apro); line-height: 1.25; position: relative; }
.rtegla-al {
  font-size: var(--t-cimke); color: var(--halvany); position: relative;
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}
/* A KCAL-SZÁM SZÖVEG-SZÍNŰ (L-89): a belefér-jelzés egy külön pötty előtte.
   Zöld: belefér, borostyán: határon, szürke: nem fér. Piros sosem. */
.rtegla-kcal { font-size: var(--t-torzs); font-weight: 800; color: var(--szoveg); position: relative; }
.rtegla-kcal::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 0.1em; background: var(--fer-pott, transparent);
}
.rtegla-kcal em { font-style: normal; font-size: var(--t-cimke); color: var(--halvany); font-weight: 600; }
.rtegla.sav-zold .rtegla-kcal::before { background: var(--siker); }
.rtegla.sav-sarga .rtegla-kcal::before { background: var(--figyelem); }
.rtegla.sav-piros .rtegla-kcal::before { background: var(--halvany); }
.rtegla.sav-nincs .rtegla-kcal { color: var(--halvany); }
.rtegla.sav-nincs .rtegla-kcal::before { display: none; }

/* --- gyors mennyiség-gombok --- */
.adag-gyors { display: flex; gap: 8px; margin: 2px 0 4px; }
.adag-gyors .valtozat { flex: 1; min-height: 44px; font-weight: 800; }

/* --- „más étkezések receptjei" elválasztó a találatok közt --- */
.talalat-valaszto { margin: 14px 0 6px; }

/* --- kompakt étkezés-összefoglaló (a mockup „✓ Zabkása banánnal · 412 kcal" sora) --- */
/* A `min-height` NEM dísz: ez a sor 20 képpont magas volt, miközben iPhone-on
   44 a legkisebb megbízható koppintási felület. Márpedig az ember ösztönösen
   az ÉTELNEVEKRE koppint, nem a fölötte lévő apró verzál címkére — vagyis
   pont a legkézenfekvőbb mozdulat talált mellé. A szöveg ott marad, ahol
   volt (középre igazítva), csak a gomb doboza nő köré. */
.etkezes-osszefoglalo {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; margin-top: 4px; padding: 0;
  background: none; border: 0; color: var(--szoveg);
  font: inherit; font-size: var(--t-torzs); text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.eo-pipa { color: var(--siker); font-weight: 900; flex: none; font-size: var(--t-cim); }
.eo-nevek {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
}
.eo-kcal { margin-left: auto; color: var(--halvany); white-space: nowrap; flex: none; }
/* Csukott (kompakt) állapotban a fejléc lecsupaszodik: nincs dupla kcal —
   azt az összefoglaló sor mondja ki, ahogy a mockupon.
   A MŰVELETI IKONOK VISZONT KINT MARADNAK. Korábban egy
   `.zarva .etkezes-fej-ikon:not(.fo) { display: none }` rejtette őket, és
   mivel a múltbeli étkezés ALAPBÓL csukva jön föl, a szorzás, a másolás és a
   „mentés receptként" pontosan akkor volt elérhetetlen, amikor utólag akartál
   hozzájuk nyúlni. Előbb ki kellett nyitni a blokkot — amire viszont semmi
   nem utalt, úgyhogy kívülről úgy festett, mintha a funkció nem is létezne. */
.etkezes-blokk.zarva .etkezes-kcal { display: none; }
/* Csukva a blokk EGY idővonal-tétel: apró verzál címke (név · idő) fölött a
   megevett ételek. A ✓ pipa elmarad — a lime pont már kimondta. */
.etkezes-blokk.zarva .etkezes-nev {
  font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--halvany);
  /* Négy ikon mellett a név a maradékon osztozik — 375 px-en is maradjon
     olvasható darabja, a csonkolást a szülő ellipszise intézi. */
  min-width: 5.5em;
  /* CSUKVA a név CÍMKE, nem tartalom: az ételeket az alatta lévő összefoglaló
     sor mondja ki, tehát itt a csonkolás a helyes válasz — a tördelés csak
     két sornyi verzált csinálna a semmiért. Nyitva viszont törhet: ott a név
     az egyetlen hely, ahol az étkezés ideje látszik. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etkezes-blokk.zarva .etkezes-osszefoglalo { margin-top: 2px; }
.etkezes-blokk.zarva .eo-pipa { display: none; }
.etkezes-blokk.zarva .eo-nevek { font-size: var(--t-apro); color: var(--szoveg); }
.etkezes-blokk.zarva .eo-kcal { font-weight: 900; }

/* A kereső-találat húzható burokban ül: a `.talalat` saját, tömör háttere
   takarja a mögötte lapuló törlés-gombot, amíg félre nem húzod. */
.talalat-lista .huzhato .talalat { width: 100%; }
/* „Szabad" jelölés: nincs katalógus-sora, csak a napló emléke — ezért nem is
   törölhető innen, a jelölés ezt is kimondja. */
.forras-jel.szabad {
  background: color-mix(in srgb, var(--halvany) 18%, transparent);
  color: var(--halvany);
}

/* --- forrás-váltó a kereső alatt: halvány szövegsor, nem pirulák --- */
.forras-sor {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  padding: 2px 0 4px; color: var(--halvany); font-size: var(--t-apro);
}
.forras {
  min-height: 40px; padding: 4px 6px;
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: var(--t-apro); font-weight: 600; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.forras.aktiv { color: var(--kiemelt); font-weight: 800; }

/* --- receptek fejsora: kereső + kis Új gomb egy sorban --- */
.recept-fejsor { display: flex; gap: 8px; align-items: stretch; }
.recept-fejsor .kereso { flex: 1; min-width: 0; }
.recept-fejsor .gomb { flex: none; }

/* --- edzés-ajánló tégla a Ma fülön (a súly-kártya alatt) ---
   A Haladás-téglák nyelvén: edzés-lime derengés a sarokból, verzál címke,
   nagy név. Koppintásra az Edzés fülre visz. */
/* A tégla a MÓD színét viseli, mint az Edzés fül nap-kártyái: progresszív =
   narancs, laza = lime. A `--mod-szin` a tartón (`#maEdzesInfo`) dől el. */
#maEdzesInfo { --mod-szin: var(--edzes-szin); }
#maEdzesInfo[data-aktiv-mod="progressziv"] { --mod-szin: var(--narancs); }
#maEdzesInfo[data-aktiv-mod="laza"] { --mod-szin: var(--siker); }

/* A Ma fül összegző kártyája RÁCS: a belső elemek (LED-panel, esti chipek,
   CH-tipp, cél-javaslat) közti 12 px akkor is megmarad, ha valamelyik nem
   jelenik meg — margókkal az elmaradó elem térköze is elmaradna. A kártya
   címe (h2) a rács első sora. */
/* A Ma fül összegzője NEM kártya többé (ma-terv, 2026-09-19): a LED-panel
   maga a hero, a cél-javaslatok alatta állnak, 12 px-es közzel. */
#maAjanlo { display: grid; gap: var(--r3); padding: 0; }
#maAjanlo > .szekcio-cim { margin: 0; }

/* A Ma-fül zárósora: a nap mozgása, halkan. Nem koppintható, csak tájékoztat —
   ezért nem kártya, és nem is éri el az érintő-minimumot. */
.ma-lepessor {
  margin: 0; text-align: center;
  font-size: var(--t-apro); color: var(--halvany);
}
.ma-lepessor .szam { color: var(--edzes-szin); }

/* A Ma fül blokkjai ELOSZTJÁK a rendelkezésre álló magasságot: a köz 14 px a
   minimum, a maradékot a `space-between` a blokkok KÖZÉ teszi, nem egy
   tömbben az utolsó alá. A kártyák maguk nem nyúlnak (`flex: none`) — a
   LED-panelt vagy a súly-sort megnyújtani csúnya lenne, a levegőt a közök
   viszik. Ha a tartalom magasabb a fülnél (este-mód a chipekkel), a köz
   visszaáll a 14 px minimumra, és a fül görgethető marad. */
/* A Ma fül blokkjai közt ugyanakkora a köz, mint a legfelső tégla és a fejléc
   vonala közt: mindkettő a `--sav` (14 px). Így a fül pereme és a blokkok
   ritmusa ugyanaz a szám — nem két egymáshoz közeli, de eltérő érték.
   `flex-start`, nem `space-between`: a köz FIX marad, a maradék hely a fül
   alján gyűlik össze, nem a blokkok közt oszlik szét. */
/* (09-22) NEM FLEX, HANEM SIMA BLOKK-FOLYAM.
 *
 * A HIBA, amiért ez megváltozott. Levente: „a Ma fülön egyáltalán nem tudok
 * görgetni, a Testsúly csempéről sem." A `#tartalom` maga a GÖRGETŐ
 * (`overflow-y: auto`, `flex: 1`, `min-height: 0`), és a Ma fül volt az
 * EGYETLEN, ahol ezt ráadásul flex-konténerré is tettük. A többi fülön
 * ugyanez a görgető sima blokk, és ott nincs panasz.
 *
 * A flexnek itt semmi dolga nem volt: `flex-direction: column`,
 * `justify-content: flex-start` és `> * { flex: none }` együtt PONTOSAN
 * annyit tud, mint a blokk-folyam — a `gap` helyét egy szomszéd-margó veszi
 * át. Egy görgető konténerből viszont fölösleges bonyodalom, és iOS-en
 * ismert, hogy a flex-görgetők másképp viselkednek.
 *
 * A KÖZ ugyanaz a `--sav` (14 px), mint eddig, és a rejtett blokkok
 * ugyanúgy nem hagynak lyukat: a `display: none` elemet a `+` szomszéd-
 * választó átugorja, mert a következő LÁTHATÓ testvér kapja a margót. */
body[data-szekcio="ma"] #tartalom { display: block; }
body[data-szekcio="ma"] #tartalom > * + * { margin-top: var(--sav); }
body[data-szekcio="ma"] #tartalom > [data-rend] { margin-bottom: 0; }

/* --- napló-tippek gomb: a súgószöveg végén ülő halk link --- */
.naplo-tipp-gomb {
  display: inline; padding: 0; margin-left: 4px; min-height: 0;
  background: none; border: 0; color: var(--kiemelt);
  font: inherit; font-size: inherit; font-weight: 600; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* ==================== MŰSZERFAL — a Ma fül LED-panelje =============   A döntés-szám a főszereplő: „mennyi fér még", nem „hány százalék". A panel
   egy műszer-kijelzőt idéz — sötétzöld üveg, befelé sugárzó fény, neon szám.
   Este ciánra vált (`.este`), mert akkor már a fehérje a kérdés. */
/* A KERET: BEVÉSETT (10 · a keret-vászonból, 2026-09-13). A panel a
   kártyába süllyesztett kijelző: sötétebb, mint a lap, fekete él, felülről
   belső árnyék, az alsó élen egy hajszálnyi fény — a ház pereme. A keret
   maga színtelen: a szín csak a számon, a pöttyön és a vonalon világít, ezért
   az esti váltáshoz itt sem kell külön szabály. Világos témában is sötét
   marad — az elődje (a LED-üveg) is az volt: a kijelző fekete, a ház világos. */
/* A PANEL SAJÁT TOKEN-KÉSZLETE (audit 01).
   A ház világos témában is sötét marad — ez szándék. A rajta lévő SZÍNEK
   viszont a globális tokenekből jöttek, azok pedig világosban fehér lapra
   hangolt sötét tintára váltanak: a fekete kijelzőn ettől a címkék 7,66-ról
   3,24:1-re, a szénhidrát-érték 7,18-ról 3,18-ra esett. Vagyis a világos
   téma Ma füle rosszabbul volt olvasható, mint a sötété.

   A megoldás ugyanaz az elv, ami a betöltőképernyőnél már él a fájlban
   („ezért nem tokeneket használ: világos témában sem válthat színt”): a
   panel önálló felület, tehát saját, TÉMAFÜGGETLEN készletet kap. A belső
   elemek változatlanul `var(--…)`-ból olvasnak — csak innen, nem a :root-ból.
   A JS inline stílusai (`--led-szin: var(--siker)`, `--m-szin: var(--zsir)`)
   szintén ezeket az értékeket kapják, mert a panelen dőlnek el. */
.led-panel {
  --halvany: #9a9fab;
  --szoveg: #f4f5f7;
  --keret: rgba(255, 255, 255, 0.09);
  --lap: #0d0d0f;
  --siker: #9be12c;
  --kiemelt: #04d9ff;
  --feherje: #04d9ff;
  --edzes-szin: #9be12c;
  --szenhidrat: #b98cff;
  --narancs: #f6863c;
  --zsir: #f6863c;
  --figyelem: #f5b83d;
  --veszely: #fa2e55;

  padding: 14px 16px 12px;
  border-radius: var(--sugar-kicsi);
  background: #050605;
  border: 1px solid #000;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
.led-fej {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--halvany);
}
/* A LED SEMLEGES (audit 09). A panel „üzemjelzője" eddig a napszak színét
   viselte — nappal lime, este cián —, vagyis pontosan azt a két színt,
   amivel a panelen az EDZÉS és a FEHÉRJE metrika is beszél. Egy állandó,
   állapotot nem hordozó dísz nem foglalhatja el egy metrika színét. */
.led-pott {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--halvany);
}
.led-fo {
  margin-top: 4px;
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-plakat); line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--led-szin, var(--siker));
  text-shadow: 0 0 14px color-mix(in srgb, var(--led-szin, var(--siker)) 45%, transparent);
}
.led-fo small { font-size: var(--t-cim); color: color-mix(in srgb, var(--led-szin, var(--siker)) 60%, transparent); }
/* A NAGY SZÁM ODOMÉTERE (a vászon ★ 21 lapja, 2026-09-23): a szám flex-sor,
   minden jegy egy 1 em magas ablak, benne a 0-9-es oszlop, ami a helyére
   gördül. A végállapot az oszlop inline stílusa, a keyframe csak a `from`. */
.led-fo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.12em; }
/* A „/ 1850" utótag egyben marad: ha nem fér a szám mellé (négyjegyű szám a
   gombok mellett), egészben megy a szám alá, nem a perjel után törik. */
.led-fo small { white-space: nowrap; }
.led-odo { display: flex; }
.led-odo-j { display: block; height: 1em; overflow: hidden; }
.led-odo-o { display: flex; flex-direction: column; animation: led-gordul 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--k, 0) * 140ms + 100ms); }
.led-odo-o > span { display: block; height: 1em; line-height: 1; }
@keyframes led-gordul { from { transform: translateY(0); } }
/* ESTE a fő szám a hiányzó FEHÉRJE, ezért a fehérje színét viseli — a panel
   cián marad (az az este), de a szám arról szól, amiről a metrika. */
.led-panel.este .led-fo { color: var(--feherje);
  text-shadow: 0 0 14px color-mix(in srgb, var(--feherje) 45%, transparent); }
.led-panel.este .led-fo small { color: color-mix(in srgb, var(--feherje) 60%, transparent); }
.ma-bmr-intes {
  padding: 7px 10px;
  border-left: 3px solid var(--figyelem); border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--figyelem) 10%, transparent);
  font-size: var(--t-apro); line-height: 1.45; color: var(--szoveg);
}
/* A KÁRTYA ALATT teljes szélességben ül, a rács saját közével elválasztva. */
.ma-bmr-intes { margin-top: var(--sav, 12px); }

.led-fo-al { margin-top: 3px; font-size: var(--t-cimke); color: var(--halvany); }
/* A PANEL FEJE két oszlop (6.1 · Műszersor): balra címke + nagy szám, jobbra az
   óra és a napszak. Az óra a rendszer meta-nyelvén (verzál címke), a szám
   alatta — a „14:20 / NAPPAL" pár mondja, hol tart a nap. */
.led-ido-fej { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.led-ido-bal { min-width: 0; }
.led-most {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none;
  padding-top: 2px; font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--halvany);
}
.led-most b { font-size: var(--t-cim); color: var(--szoveg); letter-spacing: 0; line-height: 1.1; }
/* AZ IDŐVONAL a százalék-csík helyén: a nap 6-tól 24-ig, az étkezések pöttyök,
   a „most" vonal, a 18 utáni fehérje-idő sáv. A viewBox 298 széles — a panel
   belseje 390-es kijelzőn —, keskenyebb telefonon arányosan kicsinyedik. */
.led-idovonal { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
/* Az idővonal MOZGÁSA a fül megnyitásakor — ugyanaz a mozdulat, mint a
   műszersor csíkjaié, csak lassabb: az eltelt idő vonala 1,6 mp alatt kúszik
   6-tól a mostig, a pöttyök akkor pattannak be, amikor a vonal odaér (`--i` a
   helyük aránya), a végén tűnik elő a kurzor. A kulcskockák a Haladás-blokk
   `elo-*` készletéből jönnek, `backwards` kitöltéssel — a végállapot az elem
   saját stílusa, a csökkentett mozgás egy `animation: none`-nal kész. */
.led-idovonal .ido-eltelt { stroke-dasharray: 1; animation: elo-rajz 1.6s cubic-bezier(0.3, 0.7, 0.3, 1) backwards; animation-delay: 120ms; }
.led-idovonal .ido-etkezes { transform-box: fill-box; transform-origin: center; animation: elo-felbukkan var(--be-gyors) cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; animation-delay: calc(120ms + var(--i, 1) * 1.6s); }
/* A „MOST" VONALA KIKERÜLT (Levi, 2026-09-20): a villogó kurzor helyett egy
   golyó fut végig a vonalon, és az étkezés-körök pulzálnak, ahogy odaér. Ez a
   mozgás SMIL, az app.js `maIdovonal`-jában — CSS-szabály nem tartozik hozzá.
   A csökkentett mozgást a lenti media query NEM fogja meg a SMIL-en, ezért a
   golyót és a pulzálást a JS hagyja ki (matchMedia). */
@media (prefers-reduced-motion: reduce) { .led-idovonal *, .led-odo-o { animation: none !important; } }
.led-csik {
  margin-top: 8px; height: 4px; border-radius: var(--sugar-pirula);
  background: color-mix(in srgb, var(--led-szin, var(--siker)) 15%, transparent);
  overflow: hidden;
}
/* NULLÁRÓL indul: a szélességet a render után a JS állítja be, és az átmenet
   viszi fel — enélkül a blokk `width:auto`-val azonnal teljesen tele lenne. */
.led-csik > i { display: block; width: 0; height: 100%; background: var(--led-szin, var(--siker));
  transition: width 0.8s cubic-bezier(0.3, 0.7, 0.3, 1); }

/* Javaslat-chipek az este-módban: mit egyél MOST, hogy meglegyen a fehérje. */
/* A minmax(0,1fr): grid-elem alapból `min-width:auto`, és a hosszú
   márkanév ettől kitolta a chipet a képernyőről az ellipszis helyett. */
.este-chipek { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }

/* Az esti szénhidrát-tipp: nem sima bekezdés, hanem jelölt sor — a borostyán
   bal szegély mondja meg, hogy ez FIGYELMEZTETÉS, nem hír. */
.ch-tipp {
  margin-top: 10px; padding: 10px 12px;
  background: color-mix(in srgb, var(--figyelem) 8%, var(--lap));
  border-left: 3px solid var(--figyelem); border-radius: var(--sugar-kicsi);
  font-size: var(--t-apro); color: var(--halvany); line-height: 1.45;
}
.ch-tipp-szam { color: var(--szenhidrat); font-weight: 900; }

/* ==================== SOROZAT — hero-kártya =============   A sorozat motivációs főszereplő, nem lábjegyzet: saját kártyát kap a
   fokozat színével, a haladás-csíkkal és a joker-készlettel. */
.sorozat-kartya {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px; text-align: left;
  background: radial-gradient(130% 140% at 12% -20%,
      color-mix(in srgb, var(--sj-szin) 26%, transparent), transparent 55%),
    var(--lap);
  border: 1px solid color-mix(in srgb, var(--sj-szin) 35%, transparent);
  border-radius: var(--sugar-nagy);
  color: var(--szoveg); font: inherit; cursor: pointer;
  box-shadow: var(--melyseg);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sorozat-kartya:active { transform: scale(0.98); }
/* NULLA ÁLLAPOT: ugyanaz a kártya, halkabbra fogva — a jelvény szaggatott,
   a szám szürke. Így látszik, hogy a hely megvan, csak még üres. */
.sorozat-kartya.ures {
  background: var(--lap);
  border-color: var(--keret);
}
.sorozat-kartya.ures .sorozat-cimke { color: var(--halvany); }
.sorozat-kartya.ures .sorozat-szam b { color: var(--halvany); text-shadow: none; }

/* ==================== A CSEMPE KERETE: a gyűjtemény =============   Tíz keret (keret_gyujtemeny.js), a felhasználó választ közülük. A rajz egy
   SVG a csempe fölött; a geometria CSS-ből jön, a pathLength="100" miatt a
   szaggatás a KERÜLET százalékában számol, ezért a fény a sarkokban is
   egyenletesen halad. A keret és az ampulla színe a jelvényé (--sj-szin).
   A csempe saját pereme átlátszó, hogy ne legyen dupla vonal. */
.sorozat-kartya[data-keret-fok] { border-color: transparent; }
.keret-rajz { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }
.keret-rajz rect {
  x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px);
  rx: calc(var(--sugar-nagy) - 1.5px);
  fill: none; stroke: var(--sj-szin); stroke-width: 2; stroke-linecap: round;
}
@keyframes keretFut { to { stroke-dashoffset: -100; } }

/* NYERS (tartós) — egyetlen halk vonal. */
[data-keret-fok="nyers"] .keret-rajz rect { stroke-width: 1.5; stroke-opacity: .42; }

/* KALIBRÁLT (tartós) — külső vonal + belső hajszál. */
[data-keret-fok="kalibralt"] .keret-rajz rect { stroke-width: 1.5; stroke-opacity: .6; }
[data-keret-fok="kalibralt"] .keret-rajz rect.belso {
  x: 6px; y: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  rx: calc(var(--sugar-nagy) - 6px); stroke-width: 1; stroke-opacity: .26;
}

/* FELTÁMADT (mulandó) — elmosódó csóvájú fény fut körbe a peremen. A
   legszebb perem-mozgás a legszebb pillanathoz: visszaszerezted, amit
   elvesztettél. Harminc nap múlva lejár, ha nem történik újabb. */
[data-keret-fok="feltamadt"] .keret-rajz rect { stroke-width: 2; stroke-opacity: .55; }
@property --sorozat-fut { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
[data-keret-fok="feltamadt"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 2.5px;
  /* ERŐSEBB CSÓVA (Levente 09-19: „alig látszik"). Hosszabb farok (250°-tól
     halványan indul), teljes fényű fej és fényudvar — a vastagabb perem
     pedig a kis csempén is látszik. */
  background: conic-gradient(from var(--sorozat-fut),
    transparent 0deg 250deg,
    color-mix(in srgb, var(--sj-szin) 32%, transparent) 312deg,
    var(--sj-szin) 350deg,
    transparent 360deg);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sj-szin) 75%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: sorozatKeretFut 5s linear infinite;
}
@keyframes sorozatKeretFut { to { --sorozat-fut: 360deg; } }

/* HITELESÍTETT (tartós) — ugyanaz a vert perem és vésett rács, de ÁLL. Az
   Etalon mozdulatlan testvére: a mérföldkő csendes, a mozgás a csúcsé. */
[data-keret-fok="hitelesitett"] .keret-rajz rect { stroke-width: 2.5; stroke-opacity: .7; }
[data-keret-fok="hitelesitett"] .keret-rajz rect.belso {
  x: 8px; y: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  rx: calc(var(--sugar-nagy) - 8px); stroke-width: 1; stroke-opacity: .3;
}
[data-keret-fok="hitelesitett"] .veset {
  position: absolute; inset: 2.5px; pointer-events: none; padding: 5.5px;
  border-radius: calc(var(--sugar-nagy) - 2.5px);
  background: repeating-linear-gradient(-45deg,
    transparent 0 3px, color-mix(in srgb, var(--sj-szin) 26%, transparent) 3px 4px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ETALON (tartós, a csúcs) — ugyanez, de a rács ÚSZIK (8 s). Lineáris
   minta: a sarkoknál nem nyúlik. */
[data-keret-fok="etalon"] .keret-rajz rect { stroke-width: 2.5; stroke-opacity: .8; }
[data-keret-fok="etalon"] .keret-rajz rect.belso {
  x: 8px; y: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  rx: calc(var(--sugar-nagy) - 8px); stroke-width: 1; stroke-opacity: .32;
}
[data-keret-fok="etalon"] .veset {
  position: absolute; inset: 2.5px; pointer-events: none; padding: 5.5px;
  border-radius: calc(var(--sugar-nagy) - 2.5px);
  background: repeating-linear-gradient(-45deg,
    transparent 0 3px, color-mix(in srgb, var(--sj-szin) 32%, transparent) 3px 4px);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: keretVeset 8s linear infinite;
}
@keyframes keretVeset { to { background-position: 28px 28px; } }

/* MAKULÁTLAN (mulandó) — CSILLÁMOK: nyolc pont rögzített helyen gyúl ki és hal el. */
[data-keret-fok="makulatlan"] .keret-rajz rect { stroke-width: 2; stroke-opacity: .6; }
[data-keret-fok="makulatlan"] .csillamok { position: absolute; inset: 0; pointer-events: none; }
[data-keret-fok="makulatlan"] .csillamok i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--sj-szin) 70%, #fff);
  box-shadow: 0 0 6px color-mix(in srgb, var(--sj-szin) 80%, transparent);
  opacity: 0; animation: keretCsillam var(--t) ease-in-out infinite; animation-delay: var(--d);
}
[data-keret-fok="makulatlan"] .csillamok i:nth-child(1) { left: 36%; top: 22%; --t: 4.8s; --d: 0s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(2) { left: 88%; top: 30%; --t: 5.6s; --d: 1.3s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(3) { left: 62%; top: 74%; --t: 5s; --d: 2.4s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(4) { left: 20%; top: 80%; --t: 6.2s; --d: 3.1s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(5) { left: 76%; top: 52%; --t: 4.4s; --d: .7s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(6) { left: 48%; top: 44%; --t: 5.2s; --d: 4s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(7) { left: 30%; top: 58%; --t: 5.8s; --d: 1.9s; }
[data-keret-fok="makulatlan"] .csillamok i:nth-child(8) { left: 93%; top: 72%; --t: 4.6s; --d: 2.9s; }
@keyframes keretCsillam { 0%, 100% { opacity: 0; transform: scale(.55); } 50% { opacity: .9; transform: scale(1); } }

/* VASAKARAT (tartós) — KOVÁCSSZIKRÁK: hét szikra pattan a jelvény mellől, rövid
   ívben lehull és kialszik. */
[data-keret-fok="vasakarat"] .keret-rajz rect { stroke-width: 2; stroke-opacity: .6; }
[data-keret-fok="vasakarat"] .szikrak { position: absolute; inset: 0; pointer-events: none; }
[data-keret-fok="vasakarat"] .szikrak i {
  position: absolute; left: 88px; top: 46%; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--sj-szin) 50%, #fff);
  box-shadow: 0 0 6px var(--sj-szin);
  opacity: 0; animation: keretSzikra var(--t) cubic-bezier(.2,.6,.6,1) infinite; animation-delay: var(--d);
}
[data-keret-fok="vasakarat"] .szikrak i:nth-child(1) { --dx: 44px; --dy: 42px; --t: 1.8s; --d: 0s; }
[data-keret-fok="vasakarat"] .szikrak i:nth-child(2) { --dx: 72px; --dy: 32px; --t: 2.2s; --d: -.7s; }
[data-keret-fok="vasakarat"] .szikrak i:nth-child(3) { --dx: 28px; --dy: 50px; --t: 1.6s; --d: -1.3s; width: 2px; height: 2px; }
[data-keret-fok="vasakarat"] .szikrak i:nth-child(4) { --dx: 58px; --dy: 48px; --t: 1.9s; --d: -1.9s; }
[data-keret-fok="vasakarat"] .szikrak i:nth-child(5) { --dx: 88px; --dy: 24px; --t: 2.4s; --d: -.4s; width: 2px; height: 2px; }
[data-keret-fok="vasakarat"] .szikrak i:nth-child(6) { --dx: 36px; --dy: 36px; --t: 1.7s; --d: -2.4s; }
[data-keret-fok="vasakarat"] .szikrak i:nth-child(7) { --dx: 66px; --dy: 54px; --t: 2.1s; --d: -1s; width: 2px; height: 2px; }
@keyframes keretSzikra {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  60% { opacity: .6; }
  100% { transform: translate(calc(var(--dx) * var(--sz, 1)), calc(var(--dy) * var(--sz, 1))); opacity: 0; }
}
/* AZ 1×1-ES MINTÁN a jelvény középen ül, nem a bal szélen: a szikrák a
   közepéről indulnak, és fele akkora ívet írnak le, hogy a dobozban maradjanak
   (a minta `overflow: hidden`, a 88 px-es kezdőpont kívül esett rajta). */
.gar-minta [data-keret-fok="vasakarat"] .szikrak i { left: 52%; top: 50%; --sz: .42; }

/* MÉRLEGMESTER (tartós) — HAJSZÁL LEOLVASÓ, oda-vissza: egy függőleges vonal jár
   a lapon jobbra a szélig, megáll, vissza balra, megáll, újra. */
[data-keret-fok="merlegmester"] .keret-rajz rect { stroke-width: 1.5; stroke-opacity: .45; }
[data-keret-fok="merlegmester"] .leolvaso {
  position: absolute; top: 12px; bottom: 12px; width: 1px; left: 6px; pointer-events: none;
  background: color-mix(in srgb, var(--sj-szin) 60%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--sj-szin) 50%, transparent);
  animation: keretLeolvas 5.5s ease-in-out infinite alternate;
}
@keyframes keretLeolvas { 0%, 8% { left: 6px; } 92%, 100% { left: calc(100% - 7px); } }

/* MARATONI (mulandó) — HÁROM GOLYÓ, vonal nélkül, szorosan egymás után. */
[data-keret-fok="maratoni"] .keret-rajz rect { stroke-opacity: 0; }
[data-keret-fok="maratoni"] .keret-rajz rect.golyo {
  stroke: color-mix(in srgb, var(--sj-szin) 65%, #fff); stroke-opacity: 1;
  stroke-dasharray: 0.01 99.99; filter: drop-shadow(0 0 5px var(--sj-szin));
  animation: keretFut 14s linear infinite;
}
[data-keret-fok="maratoni"] .keret-rajz rect.golyo:nth-of-type(2) { stroke-width: 7; }
[data-keret-fok="maratoni"] .keret-rajz rect.golyo:nth-of-type(3) { stroke-width: 5; animation-delay: -.9s; }
[data-keret-fok="maratoni"] .keret-rajz rect.golyo:nth-of-type(4) { stroke-width: 4; animation-delay: -1.7s; }

/* FORRÁSBAN (mulandó) — BUBORÉKOK: kilenc buborék indul a lap alján ülő folyadékból,
   felfelé imbolyog, a teteje felé elhalványul — ahogy az ampullában. */
[data-keret-fok="forrasban"] .keret-rajz rect { stroke-width: 2; stroke-opacity: .7; }
[data-keret-fok="forrasban"] .folyadek {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sj-szin) 9%, transparent));
}
[data-keret-fok="forrasban"] .buborekok { position: absolute; inset: 0; pointer-events: none; }
[data-keret-fok="forrasban"] .buborekok i {
  position: absolute; bottom: -8px; border-radius: 50%;
  background: color-mix(in srgb, var(--sj-szin) 55%, transparent);
  box-shadow: inset -1px -1px 1px color-mix(in srgb, #fff 40%, transparent);
  animation: keretBuborek var(--t) ease-in infinite; animation-delay: var(--d);
}
[data-keret-fok="forrasban"] .buborekok i:nth-child(1) { left: 10%; width: 4px; height: 4px; --t: 6.4s; --d: 0s; --ki: 7px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(2) { left: 22%; width: 3px; height: 3px; --t: 8.2s; --d: 1.9s; --ki: -5px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(3) { left: 31%; width: 5px; height: 5px; --t: 7.1s; --d: 3.4s; --ki: 6px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(4) { left: 44%; width: 2.5px; height: 2.5px; --t: 9s; --d: .8s; --ki: -8px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(5) { left: 55%; width: 4.5px; height: 4.5px; --t: 6.8s; --d: 5.1s; --ki: 5px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(6) { left: 63%; width: 3px; height: 3px; --t: 7.6s; --d: 2.6s; --ki: -6px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(7) { left: 74%; width: 5px; height: 5px; --t: 6.2s; --d: 4.3s; --ki: 8px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(8) { left: 84%; width: 2.5px; height: 2.5px; --t: 8.8s; --d: 1.2s; --ki: -4px; }
[data-keret-fok="forrasban"] .buborekok i:nth-child(9) { left: 92%; width: 3.5px; height: 3.5px; --t: 7.3s; --d: 3.9s; --ki: 6px; }
@keyframes keretBuborek {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .6; }
  50% { transform: translate(var(--ki), -65px); }
  75% { opacity: .35; }
  100% { transform: translate(calc(var(--ki) * -0.6), -135px); opacity: 0; }
}

.cim-szam {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  color: var(--halvany); font-variant-numeric: tabular-nums; margin-left: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .keret-rajz rect, [data-keret-fok]::before, [data-keret-fok] .veset,
  [data-keret-fok] .leolvaso, [data-keret-fok] .buborekok i,
  [data-keret-fok] .csillamok i, [data-keret-fok] .szikrak i { animation: none !important; }
  [data-keret-fok] .buborekok, [data-keret-fok] .leolvaso,
  [data-keret-fok] .csillamok, [data-keret-fok] .szikrak { display: none; }
}

/* ==================== A GARÁZS: a keret és a jelvény választója =============   Levente három kérése formálta (2026-09-19):

     • NINCS KÜLÖN MAKETT. A sorozat-lapon a VALÓDI csempe áll, pontosan úgy,
       ahogy a Ma-fülön — se posztamens, se szaggatott jelölőkeret. „A maketten
       ne legyen kulon keret mert igy nem latszik a keret amit felprobalok."
     • A VÁLASZTÓ KÜLÖN LAP. A csempén a keretre vagy a jelvényre koppintva
       saját alsó lap nyílik. Egy lapra zsúfolva mindkettő olvashatatlan volt.
     • A KERET SZELETBEN LÁTSZIK: „csak egy szelt egy kanyart mutassunk".
       A minta a csempe bal felső SARKÁT vágja ki, VALÓS méretben — a belső
       csempe teljes méretű, csak a doboz kicsi. Kicsinyítve a keret 1,5–2,5
       px-es vonala fél pixel alá esne, és a keret egyszerűen eltűnne. */
.gar-bevezeto { margin: 2px 0 12px; line-height: 1.5; }

/* A TERVEZŐ CSEMPÉJE: a valódi kártya, fölötte két láthatatlan célpont —
   a jelvény köre és a maradék felület. Mindkettő igazi gomb, tehát
   billentyűzetről is elérhető, de semmit nem rajzol a keret fölé. */
.gar-csempe { position: relative; }
.gar-csempe .sorozat-kartya { cursor: pointer; }
.gar-kap {
  position: absolute; border: 0; background: none; padding: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gar-kap-keret { inset: 0; border-radius: var(--sugar-nagy); }
.gar-kap-jelveny {
  left: 8px; top: 50%; width: 96px; height: 96px; margin-top: -48px; border-radius: 50%;
}
.gar-kap:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: 3px; }

/* A két sor a csempe alatt: mi van rajta, és hova visz a koppintás. */
.gar-sorok { display: grid; gap: 8px; margin-top: 10px; }
.gar-sor {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 12px 8px 8px; border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--sj-szin) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--sj-szin) 16%, transparent);
  color: inherit; font: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gar-sor:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: 2px; }
.gar-sor-torzs { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.gar-sor-cimke {
  font-size: 9.5px; font-weight: 800; letter-spacing: var(--cimke-ritkitas);
  text-transform: uppercase; color: var(--halvany);
}
.gar-sor-ertek { font-size: var(--t-apro); font-weight: 900; color: var(--szoveg); }
.gar-sor-jel { width: 46px; display: grid; place-items: center; flex: none; }
.gar-nyil { width: 14px; height: 14px; flex: none; color: var(--halvany); }

/* ---------- a választó lapok: egyetlen rács, kétféle tartalommal ----------
   A keretválasztón a JELVÉNY állandó és a keret változik, a jelvényválasztón
   fordítva. Ugyanaz a 1×1-es négyzet minta mindkettőn (Levente 09-19: „a
   keretet egy 1x1 negyzet alakban jelenitsuk meg… legyen akkora mint a
   jelvenyek"), mert a keret mozgása csak így látszik mind a négy oldalon. */
.gar-racs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 14px 8px; margin: 4px 0 12px; justify-items: center;
}
.gar-racs.kicsi { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 6px; }
.gar-tetel {
  border: 0; background: none; padding: 0; display: grid; gap: 6px;
  justify-items: center; text-align: center; color: inherit; font: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gar-tetel:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: 3px; border-radius: 10px; }

/* A MINTA: valós méretű csempe 1×1-ben. Nem kicsinyítjük — a keret 1,5–2,5
   px-es vonala egy scale() alatt fél pixel alá esne, és eltűnne. */
.gar-minta {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--sugar-nagy); background: var(--lap-vilagos);
}
.gar-minta .sorozat-kartya {
  display: grid; place-items: center; padding: 0; box-sizing: border-box; cursor: inherit;
}
/* RAJTA = ez van a csempéden. FÓKUSZ = ezt olvasod épp az adatlapon. A kettő
   külön jel: a zártat meg lehet nézni, de nem kerül fel. */
.gar-tetel.rajta .gar-minta { outline: 2px solid var(--sj-szin); outline-offset: 2px; }
.gar-tetel.fokusz:not(.rajta) .gar-minta {
  outline: 1px solid color-mix(in srgb, var(--halvany) 60%, transparent); outline-offset: 2px;
}
.gar-tetel.zart .gar-minta {
  outline: 1px dashed color-mix(in srgb, var(--halvany) 40%, transparent); outline-offset: 2px;
}
.gar-nev {
  display: flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; color: var(--halvany); line-height: 1.2;
}
.gar-tetel.rajta .gar-nev { color: var(--szoveg); }
.gar-racs.kicsi .gar-nev { font-size: 9px; text-align: center; }
/* A „VÉLETLEN" CSEMPE (2026-09-24): üres minta, közepén a kocka a halvány
   színben; ha rajta van, a kocka a jelvény színét veszi. */
.gar-veletlen .gar-minta { display: grid; place-items: center; }
.gar-veletlen .gar-kocka { width: 44%; height: 44%; color: var(--halvany); }
.gar-veletlen.rajta .gar-kocka { color: var(--sj-szin); }
.gar-nev { max-width: 100%; }
.gar-lakat { width: 9px; height: 9px; flex: none; }

/* AZ ADATLAP: mindig arról szól, amit épp kiválasztottál vagy megnéztél —
   név, MIT CSINÁL, és mi kell hozzá. A „mit csinál" volt a hiányzó fél
   válasz: a mintából nem lehetett kitalálni, mit veszel fel. */
.gar-adatlap {
  margin: 0 0 12px; padding: 11px 12px; border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--sj-szin) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--sj-szin) 16%, transparent);
  display: grid; gap: 5px;
}
.gar-tetel-fej { display: flex; align-items: baseline; gap: 7px; }
.gar-tetel-fej b {
  font-size: var(--t-apro); font-weight: 900; color: var(--szoveg);
  display: inline-flex; align-items: center; gap: 4px;
}
.gar-tipus {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--halvany);
}
.gar-allas {
  margin-left: auto; font-size: var(--t-cimke); font-weight: 800;
  color: var(--halvany); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gar-mozgas { font-size: var(--t-cimke); line-height: 1.45; color: var(--szoveg); }
.gar-mit { font-size: var(--t-cimke); line-height: 1.35; color: var(--halvany); }
.gar-sav {
  display: block; height: 3px; border-radius: 99px; background: var(--lap-vilagos);
  overflow: hidden; margin: 1px 0;
}
.gar-sav > i { display: block; height: 100%; border-radius: 99px; background: var(--sj-szin, var(--halvany)); }

.sorozat-torzs { min-width: 0; flex: 1; }
.sorozat-cimke {
  display: block; font-size: var(--t-cimke); font-weight: 800;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase; color: var(--sj-szin);
}
.sorozat-szam { display: flex; align-items: baseline; gap: 6px; }
.sorozat-szam b {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-orias); line-height: 1.15; color: var(--sj-szin);
  text-shadow: 0 0 14px color-mix(in srgb, var(--sj-szin) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
.sorozat-szam span { font-size: var(--t-apro); color: var(--halvany); }
.sorozat-halad {
  display: block; margin-top: 6px; height: 4px; border-radius: var(--sugar-pirula);
  background: color-mix(in srgb, var(--sj-szin) 16%, transparent); overflow: hidden;
}
.sorozat-halad > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--sj-szin),
    color-mix(in srgb, var(--sj-szin) 55%, #fff));
}
.sorozat-kovetkezo { display: block; margin-top: 4px; font-size: var(--t-cimke); color: var(--halvany); }
.sorozat-jokerek { flex: none; display: flex; gap: 6px; align-items: flex-end; }
/* AMPULLA: teli, színes folyadékkal = joker a készletben; szaggatott üres
   fiola = még nincs meg. A kártyalap-metafora („J") kártyajátékot idézett;
   a fiola a rendszer saját, laboros nyelve. */
/* `overflow: visible`, hogy a buborékok az üveg SZÁJA FÖLÖTT is látszódjanak —
   a folyadék attól nem lóg ki, mert saját, az üveg aljához simuló lekerekítést
   kap. */
.joker-ampulla {
  /* `flex: none`: az ampulla flex-elemként ül a kártyán és a lapon is, és
     szűk helyen az alapértelmezett zsugorodás nullára nyomná az üveget. */
  position: relative; overflow: visible; flex: none;
  width: 15px; height: 32px; border-radius: 4px 4px 999px 999px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--szoveg) 9%, transparent),
    color-mix(in srgb, var(--szoveg) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--szoveg) 30%, transparent);
}
/* A JOKER FOLYADÉKA AZ AKTUÁLIS JELVÉNY SZÍNE: a kártya egyetlen színben
   beszél, a joker nem üt el tőle. Az átmenet enyhe (a világosabb árnyalat a
   felszín felé), mert az üveg 15 px széles: erős gradiens ott csak zaj. */
.joker-ampulla > i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sj-szin) 72%, #fff),
    var(--sj-szin) 55%,
    color-mix(in srgb, var(--sj-szin) 88%, #000));
  box-shadow: 0 0 10px color-mix(in srgb, var(--sj-szin) 50%, transparent);
}
/* BUBORÉKOK: a folyadékból indulnak, átérnek a felszínen, és az üveg szája
   fölött halványulnak el. Három van, eltérő pályán és tempóban — az egyszerre
   induló, azonos méretű buborékok gépiesnek látszanának. Kettő a folyadék
   pszeudo-elemei, a harmadik az üvegé. */
.joker-ampulla > i::before,
.joker-ampulla > i::after,
.joker-ampulla::after {
  content: ""; position: absolute; border-radius: 50%;
  background: color-mix(in srgb, #fff 70%, var(--sj-szin));
  animation: jokerBuborek 2.8s ease-in infinite;
}
.joker-ampulla > i::before { left: 3px; bottom: 3px; width: 3.5px; height: 3.5px; }
.joker-ampulla > i::after {
  left: 8px; bottom: 6px; width: 2.5px; height: 2.5px;
  animation-duration: 3.6s; animation-delay: 0.9s;
}
.joker-ampulla::after {
  left: 5px; bottom: 9px; width: 2px; height: 2px;
  animation-duration: 3.2s; animation-delay: 1.8s;
}
/* A pálya az üveg magasságának kétszerese: a felső fele már a SZÁJ FÖLÖTT
   van, ott halványul el a buborék. */
@keyframes jokerBuborek {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  12% { opacity: 0.9; }
  55% { opacity: 0.85; }
  100% { transform: translateY(-30px) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .joker-ampulla > i::before,
  .joker-ampulla > i::after,
  .joker-ampulla::after { animation: none; opacity: 0.5; }
}
/* Üres ampullában nincs folyadék, tehát buborék sincs. */
.joker-ampulla.ures { background: none; border-style: dashed; }
.joker-ampulla.ures::after { content: none; }

/* AZ EXTRA AMPULLA (2026-09-24): ugyanaz a folyadék, fénylő peremmel.
   CSAK AZ EXTRA BUBORÉKOL (Levi, 2026-09-25, a vászon E6 lapja:
   XbostSQNHY46oHgo6z4SZH). A normál ampulla csendes: így összesen kevesebb
   mozog a képernyőn, és épp a mozgás különbözteti meg az extrát. */
.joker-ampulla.extra {
  border-color: color-mix(in srgb, var(--sj-szin) 85%, #fff);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sj-szin) 40%, transparent),
    0 0 8px color-mix(in srgb, var(--sj-szin) 45%, transparent);
}
.joker-ampulla:not(.extra) > i::before,
.joker-ampulla:not(.extra) > i::after,
.joker-ampulla:not(.extra)::after { animation: none; opacity: 0; }

/* A GYŰLŐ AMPULLA (2026-09-21). A következő üveg annyira van tele,
   amennyire közel vagy a következő ampullához: négy tiszta napból ahány
   megvan, vagy a 700 kcal mozgásból amennyi összegyűlt — a kettő közül a
   közelebbi. A magasságot a jelölés adja, mert napról napra változik.

   A KERET SZAGGATOTT MARAD: a folyadék azt mondja, hogy gyűlik; a szaggatott
   perem azt, hogy még nincs meg. A kettő együtt pontos.

   BUBORÉK NINCS BENNE. Egy negyedig töltött üvegben a buborékok a folyadék
   fölött, a levegőben szállnának — és a bugyborékolás „kész"-nek látszik,
   miközben ez épp a várakozás állapota. */
.joker-ampulla.tolt { background: none; border-style: dashed; }
.joker-ampulla.tolt > i {
  box-shadow: none;
  opacity: 0.55;
  /* A TÖLTŐDÉS LÁTSZIK IS: a magasság a renderelés után áll be, ahogy a
     LED-csíkok és a makró-sávok. Ugyanaz a mozdulat, nem új nyelv. */
  transition: height 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.joker-ampulla.tolt > i::before,
.joker-ampulla.tolt > i::after { content: none; }

/* ==================== EDZÉS: NYITÓ MOZDULAT =============   A Ma fül idővonala megrajzolja magát, a Haladás mini grafikonjai
   megelevenednek, az Étkezés csíkjai feltöltődnek — az Edzés fül volt az
   egyetlen, ami csak úgy ODACSAPÓDOTT. Ugyanaz a mozdulat-készlet, mint a
   Haladásé (`elo-*`), ugyanazzal a fegyelemmel: CSAK `from` kulcskocka és
   `backwards` kitöltés, tehát a végállapot mindig az elem saját stílusa —
   nincs `forwards`, ami utána felülírná a :active kicsinyítést.

   A sorrend a képernyő olvasási sorrendje: előbb a hero (vagy a folytatható
   edzés kártyája), aztán a többi nap egyenként, végül a korábbi edzések. */
.e-belepo .hero,
.e-belepo .folyt,
.e-belepo .fazis-sav {
  animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.e-belepo .nl-blokk .nl-fej {
  animation: elo-elotunik 300ms ease backwards; animation-delay: 160ms;
}
/* A napsorok egyenként, 45 ms-os lépcsőben — a `--i` a sor sorszáma. */
.e-belepo .nl-sor-tarto {
  animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--be-eltol) + var(--i, 0) * var(--be-lepcso));
}
/* A hero fölötti összecsukott sor (ha másik napot néztél) a heróval együtt. */
.e-belepo .nl-sor.hero-osszecsukva {
  animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.e-belepo .tort-kartya {
  animation: elo-beuszik var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: 360ms;
}
/* A ritmus-szalag oszlopai a kártya után, balról jobbra. */
.e-belepo .szalag i {
  animation: elo-no var(--be-tart) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(500ms + var(--i, 0) * var(--be-lepcso-suru));
  transform-origin: bottom;
}
@media (prefers-reduced-motion: reduce) {
  .e-belepo .hero, .e-belepo .folyt, .e-belepo .fazis-sav,
  .e-belepo .nl-blokk .nl-fej, .e-belepo .nl-sor-tarto, .e-belepo .nl-sor,
  .e-belepo .tort-kartya, .e-belepo .szalag i { animation: none; }
}

/* ==================== KÁRTYÁK BELÉPŐJE: MA ÉS HALADÁS =============   Levi döntése (2026-09-23, a „Belépő mozgás" vászon A lapja, „Lépcső"):
   fülváltáskor ne álljon ott azonnal minden. A Ma fül blokkjai és a Haladás
   csempéi olvasási sorrendben úsznak be, 10 px-ről, a közös óra kártya-lépcsőjén
   (55 ms), ugyanazzal a mozdulattal, amivel az Edzés fül nyit. A fejléc és a
   fülsáv nem mozdul: fülváltáskor azok maradnak, csak a tartalom cserélődik.

   CSAK `from` kulcskocka és `backwards` kitöltés, mint az Edzésnél: a végállapot
   az elem saját stílusa, így a :active kicsinyítést és a csempe áttűnéseit
   nem írja felül semmi.

   MA: a `ma-belepo` osztály a main-re kerül a fül nyitásakor (app.js,
   `maBelepoKell`), és ~2,5 mp után lekerül, mint a Haladás `belepo`-ja.
   A blokkok egymás után jönnek; a dokk a fülsáv fölül emelkedik fel, az
   sorozat-kártya környékén. A hero belső mozgása (idővonal, felpörgő szám,
   gyűrűk) a saját idejében indul, ez nem zavarja: a hero 340 ms alatt a helyén
   van, a belső rajzok később kezdődnek.

   HALADÁS: a `belepo` rács csempéi ugyanígy; az adat-belépő (`--alap`) a
   csempe indulása után 220 ms-mal kezd (lásd fent, az élő csempék blokkjában). */
@keyframes elo-beuszik-kartya { from { opacity: 0; transform: translateY(10px); } }
/* A dokk középre igazítása a transformon ül, ezért saját kulcskocka kell,
   ami megtartja az X-eltolást. */
@keyframes elo-beuszik-dokk { from { opacity: 0; transform: translate(-50%, 16px); } }
.ma-belepo .ma-hero      { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.ma-belepo .hero-lab     { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(1 * var(--be-kartya-lepcso)); }
.ma-belepo .cel-javaslat { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(2 * var(--be-kartya-lepcso)); }
.ma-belepo #maSorozat    { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(3 * var(--be-kartya-lepcso)); }
.ma-belepo .suly-tegla   { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(4 * var(--be-kartya-lepcso)); }
.ma-belepo #maEdzesInfo  { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(5 * var(--be-kartya-lepcso)); }
.ma-belepo #maEsti,
.ma-belepo .ma-lepessor  { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(6 * var(--be-kartya-lepcso)); }
.ma-belepo .dokk         { animation: elo-beuszik-dokk 360ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(4 * var(--be-kartya-lepcso) + 20ms); }
.belepo .htegla          { animation: elo-beuszik-kartya var(--be-tart) cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(var(--t, 0) * var(--be-kartya-lepcso)); }
@media (prefers-reduced-motion: reduce) {
  .ma-belepo .ma-hero, .ma-belepo .hero-lab, .ma-belepo .cel-javaslat, .ma-belepo #maSorozat,
  .ma-belepo .suly-tegla, .ma-belepo #maEdzesInfo, .ma-belepo #maEsti, .ma-belepo .ma-lepessor,
  .ma-belepo .dokk, .belepo .htegla { animation: none; }
}

/* ==================== HÜVELYK-DOKK =============   A gyakori műveletek oda kerülnek, ahol a hüvelykujj van: a fülsáv fölé
   lebegő pirulába. A Ma-kártya alján ülő régi gombsor ezzel megszűnik. */
/* A DOKK MAGASSÁGA EGY HELYEN. Gomb + a pirula két oldali párnája + a
   keretek: ebből számol a lap alsó párnája ÉS a pirítós elkerülő magassága
   is, így mind a három együtt mozdul, ha az --erinto valaha változna. */
:root { --dokk-magas: calc(var(--erinto) + 18px); }
.dokk {
  position: fixed; z-index: 19;
  /* A DOKK A TARTALMÁHOZ IGAZODIK ÉS KÖZÉPEN ÜL. Amíg a naplózás feliratos,
     széles gomb volt, a sáv a képernyő két széle közt feszült. Négy egyforma
     ikon-gombnál viszont a teljes szélesség csak üres hely lenne körülöttük.
     (A gombok száma közben ötre nőtt, és a pirula 314 px-re hízott egy 390-es
     kijelzőn — a navigációs gomb kivételével visszaállt négyre, 254 px-re.) */
  left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--sav));
  bottom: calc(var(--sav-magas) + 10px);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--sugar-pirula);
  background: color-mix(in srgb, var(--lap-emelt) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--szoveg) 12%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}
.dokk-gomb {
  position: relative; flex: none;
  width: var(--erinto); height: var(--erinto); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lap-vilagos); border: 1px solid var(--keret);
  color: var(--dokk-szin, var(--szoveg)); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  /* A számlálókon HOSSZÚ NYOMÁS lép vissza egyet — a rendszer kijelölés- és
     megosztás-menüje ilyenkor csak útban lenne. */
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.dokk-gomb:active { transform: scale(0.94); }
/* A naplózás gombja is közönséges ikon-gomb lett (a `.dokk-fo` kiszolgált):
   négy egyforma kör, mindegyik a saját színével — a szerep a színből és az
   ikonból olvasható, nem méretkülönbségből. */
/* A dokk elfedné a lap alját — a Ma fül tartalma ennyivel lejjebb ér véget. */
body[data-szekcio="ma"] main {
  padding-bottom: calc(var(--sav-magas) + 10px + var(--dokk-magas) + 8px);
}

/* ==================== EDZÉS — pirula mód-váltó + hero-nap =============   A mód két pirula: a döntés bináris, nem kell hozzá két leíró kártya. Az
   ajánlott nap plakát-hőse azonnali indító gombot kap; a többi nap kompakt
   sorrá zsugorodik, mert ott a választás a lényeg, nem a látvány. */
/* Az aktív pirula a mód SAJÁT színét viseli — ugyanazt, amivel az ajánlott
   nap kerete világít, hogy a két jelzés ne mondjon mást. */

.nap-cimke {
  display: block; font-size: var(--t-cimke); font-weight: 800;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  color: var(--mod-szin, var(--edzes-szin));
}

/* ================================================= KORÁBBI EDZÉSEK ==
   RITMUS-SZALAG. Két olvasat egyetlen tengelyen: fent a heti tonnázs
   görbéje, alatta hetenként egy-egy kocka minden alkalomra. Ugyanaz a
   13 képpontos osztás tartja őket együtt — a görbe SVG-je és a kockák
   flex-rácsa arányosan nyúlik, ezért a két grafikon bármilyen
   képernyőszélességen fedésben marad.

   MIÉRT NEM LISTA: pár száz edzésnél a lista maga a probléma. A mintázat
   viszont egy pillantás alatt olvasható, és a lista ötre rövidül. */

/* A négy edzésnap a terv-beli SORRENDJE szerint kap színt, nem a neve
   szerint — átnevezéskor is stabil marad. Meglévő metrika-tokenekből, hogy
   a világos téma automatikusan kövesse. */
:root {
  --nap-1: var(--edzes-szin);
  --nap-2: var(--kiemelt);
  --nap-3: var(--szenhidrat);
  --nap-4: var(--zsir);
}


/* ---------- oldalra húzható sor ----------
   A `touch-action: pan-y` a kulcs: a FÜGGŐLEGES görgetést a böngésző intézi,
   a vízszintes mozdulat pedig hozzánk ér — így a két gesztus nem versenyez
   egymással. (Ugyanez a szétválasztás hiányzott korábban a lapozásnál.) */
.huzhato { position: relative; overflow: hidden; border-radius: var(--sugar-kicsi); }
.huzhato-muvelet {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  width: 96px; padding-right: 16px;
  background: color-mix(in srgb, var(--veszely) 16%, transparent);
  border: 0; border-radius: var(--sugar-kicsi);
  color: var(--veszely); font: inherit; font-size: var(--t-apro); font-weight: 700;
  cursor: pointer;
}
.huzhato-muvelet:active { background: color-mix(in srgb, var(--veszely) 26%, transparent); }
.huzhato-lap {
  position: relative; touch-action: pan-y;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Húzás közben nincs átmenet: az ujj alatt azonnal kell követnie. */
.huzhato-lap.huzas-alatt { transition: none; }

/* ---------- archívum-lap ---------- */
.archiv-ho {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 2px;
  font-size: var(--t-cimke); font-weight: 700; color: var(--halvany);
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
}
.archiv-ho:first-child { margin-top: 4px; }
.archiv-vonal { flex: 1; height: 1px; background: var(--keret); }
.archiv-db {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .huzhato-lap { transition: none; }
}

.tipp-fej { display: flex; align-items: center; gap: 8px; }
.tipp-tema {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-cimke); font-weight: 800;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  color: var(--tipp-szin, var(--kiemelt));
}
/* Ahol a bizonyíték gyengébb, ott ki is mondjuk. Egy bevált szokás nem lesz
   attól tudomány, hogy magabiztosan írjuk le. */
.tipp-gyenge {
  padding: 1px 7px; border-radius: var(--sugar-pirula);
  background: color-mix(in srgb, var(--halvany) 18%, transparent);
  color: var(--halvany); font-size: var(--t-cimke); font-weight: 600;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
/* A TIPP maga konyhanyelv, ezért nagyobb és határozottabb. A bizonyító rész
   alatta apró és halvány: az ellenőrzés anyaga, nem a meggyőzésé. */
.tipp-szoveg { font-size: var(--t-torzs); font-weight: 600; line-height: 1.42; }
.tipp-alap {
  margin: 0; font-size: var(--t-cimke); line-height: 1.5; color: var(--halvany);
}
.tipp-tovabb {
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
  font-size: var(--t-cimke); font-weight: 700; color: var(--tipp-szin);
  letter-spacing: 0.04em;
}

/* ---------- egy tipp részletei: plakát-elrendezés ----------
   Ugyanaz a nyelv, mint a jelvényeké és a heti riporté: fent a nagy szám
   Nunitóval, alatta a mondat. A száraz rész lejjebb, kisebben. */
.tipp-lap { display: flex; flex-direction: column; }
.tipp-plakat {
  padding: 20px 18px 22px; margin-bottom: 4px;
  border-radius: var(--sugar);
  background:
    radial-gradient(130% 110% at 15% 0%,
      color-mix(in srgb, var(--tipp-szin) 16%, transparent), transparent 62%),
    var(--lap-vilagos);
  border: 1px solid color-mix(in srgb, var(--tipp-szin) 28%, var(--keret));
}
.tipp-lap-tema {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-cimke); font-weight: 800;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  color: var(--tipp-szin);
}
.tipp-szam {
  margin-top: 10px;
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-plakat); line-height: 1; color: var(--tipp-szin);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px color-mix(in srgb, var(--tipp-szin) 40%, transparent);
  animation: tippSzam 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
@keyframes tippSzam { from { opacity: 0; transform: scale(0.82); } }
.tipp-szam-alatt {
  margin-top: 5px; font-size: var(--t-cimke); color: var(--halvany);
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
}
.tipp-mondat {
  margin: 14px 0 0; font-size: var(--t-cim); font-weight: 700; line-height: 1.34;
  text-wrap: balance;
}
.tipp-cimke {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 6px; font-size: var(--t-cimke); font-weight: 700;
  letter-spacing: var(--cimke-ritkitas); text-transform: uppercase;
  color: var(--halvany);
}
.tipp-reszlet { margin: 0; font-size: var(--t-torzs); line-height: 1.5; }
.tipp-lap .tipp-alap { font-size: var(--t-apro); }
.tipp-osszes {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: var(--erinto); margin-top: 22px;
  border: 1px dashed var(--keret); border-radius: var(--sugar);
  color: var(--halvany); font-size: var(--t-apro); font-weight: 600;
}

/* ---------- a teljes lista ---------- */
.tipp-lista { display: flex; flex-direction: column; gap: 8px; }
.tipp-tetel {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
  padding: 12px 13px 12px 14px;
  background: var(--lap); border: 1px solid var(--keret);
  border-left: 3px solid var(--tipp-szin, var(--kiemelt));
  border-radius: var(--sugar-kicsi);
  color: var(--szoveg); font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tipp-tetel:active { background: var(--lap-vilagos); }

@media (prefers-reduced-motion: reduce) {
  .tipp-szam { animation: none; }
}

/* AMÍG NEM MEGBÍZHATÓ, a nagy szám helyén ez áll. Nem hiba-, hanem
   nyugodt hangnem: a semleges szövegszín és a normál méret azt mondja, hogy
   ez a dolgok rendes menete, nem elrontottál valamit. */
.tdee-varakozik {
  margin: 0 0 12px; font-size: var(--t-alap); line-height: 1.5;
  color: var(--szoveg);
}

/* A valós energiaigény figyelmeztetése. Nem hiba, hanem korlát: a szám
   önmagában hihetőnek látszik, ezért kell kimondani, mikor nem az. */
.tdee-figyelem {
  margin: 10px 0 0; padding: 11px 13px;
  border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--figyelem) 12%, transparent);
  border-left: 3px solid var(--figyelem);
  color: var(--szoveg); font-size: var(--t-apro); line-height: 1.5;
}

/* FÜGGŐ ELEMZÉS SÁVJA: jóvá nem hagyott felismerés a naplózó lap tetején.
   Figyelem-színű, mert nem hiba, hanem elvarratlan szál — és mert egy fizetős
   AI-hívás eredménye lapul mögötte, amit kár volna eldobni. */
.fuggo-elemzes {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 11px 12px;
  border-radius: var(--sugar-kicsi);
  background: color-mix(in srgb, var(--figyelem) 12%, transparent);
  border-left: 3px solid var(--figyelem);
}
.fuggo-elemzes > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fuggo-elemzes b { font-size: var(--t-apro); }
.fuggo-elemzes .halvany { font-size: var(--t-cimke); }
.fuggo-elemzes .gomb { flex: none; margin: 0; }

/* ==================== MA FÜL: EGY NYELV (ma-terv, 2026-09-19) =============   A vászon ★ lapja: a LED-panel a hero (26 px, a Haladás hero-csempéjének
   sugara), a láblécén a nap tippje; alatta a Haladás-rács nyelvén a sorozat
   teljes sorban, a testsúly és a következő edzés két csempében; legalul az
   esti fehérje hajszálvonalas listája szakaszcímmel. Kártya a kártyában nincs. */
.led-panel.ma-hero {
  /* KERET ÉS FÉNY NÉLKÜL (Levi döntése a vásznon, 2026-09-19 este): nincs
     doboz, nincs hajszál, nincs árnyék, nincs derengés. A tartalom a lapon
     ül, a hero helyét a nagy szám és a makró-sor adja. A szín marad a
     napszaké: nappal lime, este cián. */
  position: relative;
  background: none; border: 0; box-shadow: none;
  border-radius: 0;
  padding: 12px 16px 12px;
}
/* A TIPP A HERO ALATT, keret és alap nélkül; csak a téma színe a címkén.
   A húzás (balra elrejt, jobbra másik) ugyanígy megy rajta. */
.hero-lab {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; margin: 0; padding: 2px 6px 0;
  border: 0; border-radius: 0;
  background: none; color: var(--szoveg); font: inherit; text-align: left;
  cursor: pointer; touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s;
}
.hero-lab.huzas-alatt { transition: none; }
/* A HERO ALJÁN A FEHÉRJE ÉS AZ AKTÍV KALÓRIA (a vászon W04 lapja, 2026-09-24):
   két cella hajszálvonallal, a szám színes, csík nincs. Közel az idővonalhoz,
   a hero alja 6 px (Levi, 2026-09-24: „ne legyen nagy hely a fehérje/aktív
   alatt"): a rács 14 px-es margójával együtt 20 px a kártyáig. */
.led-panel.ma-hero:has(.ma-par) { padding-bottom: 6px; }
.ma-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--halvany) 20%, transparent); }
.ma-par-c { padding: 2px 16px 2px; min-width: 0; -webkit-tap-highlight-color: transparent; }
.ma-par-c:first-child { padding-left: 4px; }
.ma-par-c + .ma-par-c { border-left: 1px solid color-mix(in srgb, var(--halvany) 20%, transparent); }
.ma-par-szam { font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums; }
.ma-par-c.feh .ma-par-szam { color: var(--feherje); }
.ma-par-c.akt .ma-par-szam { color: var(--edzes-szin); }
/* Este a bal cella a „Ma még belefér" (kcal): a szám a szöveg színe, nem ítél. */
.ma-par-c.kcal .ma-par-szam { color: var(--szoveg); }
.ma-par-per { font-size: var(--t-cimke); color: var(--halvany); }
.ma-par-nev { margin-top: 4px; font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--halvany); white-space: nowrap; }
/* A TIPP A RÁCS ALATT (2026-09-24): a csempék után 16 px-szel. */
.ma-tipp-tarto:empty { display: none; }
.ma-tipp-tarto { margin-top: 16px; }
.hero-lab .tipp-fej { justify-content: space-between; }
.hero-lab .tipp-szoveg { font-size: var(--t-apro); }
.hero-lab .tipp-tovabb { color: var(--tipp-szin, var(--kiemelt)); }
.hero-lab:focus-visible { outline: 2px solid var(--kiemelt); outline-offset: -2px; }
/* Balra húzva a lábléc kiúszik és a hero összezárul; jobbra húzva a régi
   kimegy jobbra, az új bejön balról. Egy mozdulat, egy jel. */
@keyframes lab-el-balra { to { transform: translateX(-110%); opacity: 0; } }
@keyframes lab-el-jobbra { to { transform: translateX(110%); opacity: 0; } }
@keyframes lab-be-balrol { from { transform: translateX(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-lab.elmegy-balra { animation: lab-el-balra 0.22s ease-in forwards; }
.hero-lab.elmegy-jobbra { animation: lab-el-jobbra 0.2s ease-in forwards; }
.hero-lab.bejon-balrol { animation: lab-be-balrol 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lab-be-jobbrol { from { transform: translateX(60%); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-lab.bejon-jobbrol { animation: lab-be-jobbrol 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .hero-lab, .hero-lab.elmegy-balra, .hero-lab.elmegy-jobbra, .hero-lab.bejon-balrol, .hero-lab.bejon-jobbrol { animation: none; transition: none; }
}

/* A RÁCS: két oszlop, mint a Haladáson; a sorozat teljes sorban. A tartó
   `display: grid`, hogy a benne álló kártya a cella teljes szélességét vigye. */
.ma-racs { gap: 12px; }
.ma-racs-teljes { grid-column: 1 / -1; display: grid; }
.ma-racs-teljes:empty { display: none; }
.ma-racs #maEdzesInfo { display: grid; }
.ma-racs #maEdzesInfo[hidden] { display: none; }
/* A CÍM ÉS AZ ALCÍM TÖRDELŐDIK, NEM CSONKUL (Levi, 2026-09-18) — a Haladás
   szabálya itt is. A szám marad egysoros. */
.ma-racs .htegla-cim, .ma-racs .htegla-al {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
}
.ma-racs .htegla-ertek small { font-size: var(--t-apro); font-weight: 500; color: var(--halvany); }
.ma-racs .htegla-ertek .htegla-mellek {
  font-family: "Archivo", sans-serif; font-size: var(--t-apro); font-weight: 400;
  color: var(--halvany); margin-left: 4px;
}
.ma-racs .htegla-al b { font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; color: var(--szoveg); }
.lepes-tegla { justify-content: flex-start; padding-top: 16px; cursor: default; }
.lepes-tegla:active { transform: none; }
.lepes-tegla .htegla-ertek.szam { color: var(--edzes-szin); }
/* A testsúly-csempe: a nagy koppintható felület a rögzítés, a két kis
   ikon-gomb (méretek, napló) a csempe jobb felső sarkában él tovább. */
/* A KÉT CSEMPE TARTALMA EGY VONALBAN ÁLL (Levi, 2026-09-20). A `.htegla`
   alapból ALULRA igazít (a csempék nagy részén adat-ábra ül a tartalom alatt),
   a lépés-csempe viszont felülre igazított — a magasabb csempén ettől 25 px-cel
   csúszott el a két címke egymáshoz képest. Ezen a kettőn nincs ábra, tehát
   mindkettő FELÜLRŐL indul — 16 px ráhagyással. (Volt egy kör 24-gyel, amikor
   a csempe alja még üres volt; azóta az alsó sáv tölti ki.) A felső igazítás
   azért marad, hogy a két csempe címkéje akkor is egy vonalban álljon, ha az
   egyikről elmarad az alsó sáv. */
.suly-tegla { cursor: default; padding-top: 16px; justify-content: flex-start; }
.suly-fo {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  flex: 1; width: 100%; min-height: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.suly-fo:active { opacity: 0.8; }
/* A két ikon a csempe ALJÁN áll, saját sorban: a címke és a szám így teljes
   szélességben olvasható (a sarokban a „Testsúly" felirat kettétört). */
.ma-racs .htegla-ertek { overflow: visible; text-overflow: clip; }
.suly-fo .htegla-ertek:not(.szam) { font-weight: 800; color: var(--tegla-szin); }
/* A három gyors gomb a hero jobb felső sarkában, a napszak-címke alatt. */
.hero-ikonok { display: flex; gap: 6px; margin-top: 8px; }
.hero-ikonok .gomb.ikon-gomb { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
/* Mindhárom ikon cián: az id-alapú `#meretekGomb { color: halvány }` szabályt
   csak azonos erejű választó üti. */
.hero-ikonok #meretekGomb, .hero-ikonok #naploGomb, .hero-ikonok #celGomb,
.hero-ikonok #hogyanGomb { color: var(--kiemelt); }
.hero-ikonok .ikon-pott { top: 4px; right: 4px; }
/* A KÉT CSEMPE MAGASABB (Levi, 2026-09-20): plusz információ nélkül a Ma fül
   alján üres sáv maradt, ezért a testsúly és a lépések csempéje visszakapta a
   magasságát, és mindkettő kapott EGY halk sort (heti súlyváltozás, szokásos
   lépésszám) a csempe alsó sávjában. Nem több: a csempe attól még egy
   pillantásnyi. */
.ma-racs .suly-tegla, .ma-racs .lepes-tegla { min-height: 132px; }
/* A MÁSODIK ADAT A CSEMPE ALJÁN, teljes szélességben (Levi választása a
   változatok közül, 2026-09-20: a „D6"). Hajszálvonal fölötte, balra a címke,
   jobbra a szám a csempe színében. Ez tölti ki azt az alsó sávot, ami a
   magasabb csempén üresen maradt, és a két csempe alja egy vonalban zár.
   A `margin-top: auto` nyomja le: a felső blokk a helyén marad, a maradék
   hely a kettő közé kerül. */
.ma-racs .tegla-sav {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--halvany) 20%, transparent);
}
.ma-racs .tegla-sav[hidden] { display: none; }
.ma-racs .tegla-sav small { font-size: var(--t-cimke); color: var(--halvany); }
.ma-racs .tegla-sav b {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-torzs); color: var(--tegla-szin); font-variant-numeric: tabular-nums;
}

/* AZ ESTI FEHÉRJE LISTÁJA: az Edzés-fül hajszálvonalas sorai, szakaszcímmel. */
.ma-szakasz { margin-bottom: 0; }
.ma-szakasz .nl-fej { padding: 2px 6px 4px; }
.ma-szakasz .nl-sor { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; }
.ma-szakasz .nl-sor .nev { white-space: normal; }
.ma-szakasz .nl-sor .nev small { display: block; font-size: var(--t-apro); font-weight: 400; color: var(--halvany); }
.ma-szakasz .nl-sor .al {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; font-size: var(--t-torzs);
  color: var(--szoveg); font-variant-numeric: tabular-nums;
}
.ma-szakasz .nl-sor .al small { font-family: "Archivo", sans-serif; font-weight: 400; font-size: var(--t-apro); color: var(--halvany); }
.ma-szakasz .nl-sor[disabled] { opacity: 0.45; }
#maEsti .ch-tipp { margin-top: 10px; }

/* ==================== ÉTKEZÉS FÜL: A NAP MINT TENGELY (2026-09-19 este) =============   Legfelül a nap-konzol vékonyan (a napot húzással váltjuk), alatta a régi
   összegző (nagy kcal-szám és fiolák egymás mellett), a kávé és a víz két kis
   csempén; a nap mint tengely a másolás-lap nyelvén, a sor jobb szélén a
   műveletek ikonjai. Kalória-szám sehol nem piros (Levi szabálya). */
.osszegzo.hosszu { display: grid; gap: 4px; padding: 0 2px; }
.osszegzo.hosszu .makro-fejlec { margin: 0 0 6px; padding-right: 0; }
/* A tengely a lap aljáig ér: a min-height-ot a JS méri ki a lap maradék
   magasságából (etkezes.js, rajzol). Flex-oszlopként a görgető konténer alsó
   párnáját Safari elnyelte, és pár képpontnyi túllógásnál nem lehetett
   görgetni; blokkként ez nem fordul elő. */
.napkonzol.vekony { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; margin: -4px 0 0; }
.napkonzol.vekony .gomb.apro { width: 36px; min-width: 36px; height: 32px; min-height: 32px; padding: 0; color: var(--halvany); }
.napkonzol-cim { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.napkonzol-cim b { font-size: var(--t-torzs); font-weight: 700; }
/* A lezárt nap halk sora a napváltó alatt (2026-09-23, a nap D+2 00:00-kor fagy be). */
.osszegzo .lezaras-sor { margin: 2px 0 8px; text-align: center; }
.napkonzol-cim small { font-size: var(--t-cimke); color: var(--halvany); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ital-csempék: ikon és szám, egymás mellett; koppintás egy adagot von vissza. */
.ital-csempek { display: flex; justify-content: center; gap: 10px; margin: 0 0 6px; }
.ital-csempe { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 10px;
  background: var(--lap); border: 1px solid var(--keret); border-radius: var(--sugar-kicsi);
  color: var(--halvany); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ital-csempe:active { background: var(--lap-vilagos); }
.ital-csempe b { font-size: var(--t-torzs); font-weight: 800; color: inherit; }
.ital-csempe b small { font-size: var(--t-cimke); font-weight: 600; color: var(--halvany); margin-left: 1px; }
/* Színezve: a kávé borostyán, a víz cián; a csempe a saját színének halk alapján ül. */
.ital-csempe { border-color: color-mix(in srgb, currentColor 35%, var(--keret)); background: color-mix(in srgb, currentColor 8%, var(--lap)); }
#kaveSor { color: var(--figyelem); }
#vizSor { color: var(--kiemelt); }
.ital-csempe.kave-sok { color: var(--veszely); }
.ital-csempe.viz-kesz { color: var(--siker); }
/* A tengely: a másolás-lap vonala és pontjai, de irány nélkül: a kész szám
   fehér, a plusz cián, a kimaradt szürke; a múlt pontja lime (megvolt). */
.tengely-nap { position: relative; display: grid; gap: 2px; padding: 4px 0 0; align-content: start; }
/* A TENGELY KITÖLTI A LAPOT: a fül tartalma flex-oszlop, és a tengely a növő
   elem. Így csukott étkezéseknél is a lap aljáig fut a vonal, és akkor is
   marad úgy, ha a látható magasság utólag változik (URL-sáv behúzódik,
   billentyűzet eltűnik) — a korábbi JS-mérés ilyenkor rövid maradt.
   A `flex: none` a többi elemen azért kell, hogy a fejléc ne préselődjön
   össze, amikor a tengely hosszú. */
body[data-szekcio="etkezes"] #tartalom { display: flex; flex-direction: column; }
body[data-szekcio="etkezes"] #tartalom > * { flex: none; }
body[data-szekcio="etkezes"] #tartalom > .tengely-nap { flex: 1 0 auto; }
/* A SOROK KITÖLTIK A TENGELYT (Levi, 2026-09-24): csukott étkezéseknél a
   sorok egyenlő közzel oszlanak el a lap aljáig, a telefon magasságához
   igazodva, így alul nem marad üres sáv. Ha a tartalom hosszabb a lapnál
   (nyitott étkezés), nincs szabad hely, és ennek nincs hatása. */
body[data-szekcio="etkezes"] #tartalom > .tengely-nap { align-content: space-between; }
/* Az Étkezés fejléce koppintható (a mai napon): kalória és makrók. */
.cella-nyit { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cella-nyit:active { opacity: 0.75; }
/* A VONAL A FÜLSÁVIG MEGY, nem áll meg fölötte. A tengely doboza a lap belső
   magasságáig ér, ami a fülsáv magassága PLUSZ 20 px-cel a lap alja fölött van
   (main padding-bottom). Ez a 20 px a sorok levegője; a vonalnak viszont nincs
   rá szüksége, ezért pont ennyivel lóg túl — így a fülsáv tetejénél ér véget,
   és nem marad alatta üres folt (Levi, 2026-09-20). */
body[data-szekcio="etkezes"] .tengely-nap .tengely-vonal {
  bottom: calc(-1 * (var(--sav-magas) + 20px));
}
.tengely-nap .tengely-vonal { position: absolute; left: 21px; top: 30px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--siker) 55%, transparent),
    color-mix(in srgb, var(--szoveg) 22%, transparent) 55%, color-mix(in srgb, var(--kiemelt) 55%, transparent)); }
.ts.fl { align-items: flex-start; padding: 8px 2px 8px 0; gap: 12px; cursor: default; }
/* A fül nyitásakor a tengely megrajzolódik: a vonal fentről lefut, a sorok
   pontostul egymás után úsznak be. Csak a fülváltás indítja. */
.tengely-nap.rajzolodik .tengely-vonal { transform-origin: top; animation: tengely-lefut 0.55s cubic-bezier(0.3, 0.7, 0.25, 1) both; }
.tengely-nap.rajzolodik .ts { animation: ts-beuszik 0.32s ease-out both; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
@keyframes tengely-lefut { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ts-beuszik { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tengely-nap.rajzolodik .tengely-vonal, .tengely-nap.rajzolodik .ts { animation: none; }
}
.ts.fl .ts-szov { gap: 0; }
/* A műveletek ikonjai a sor jobb szélén, mint a régi listán; a kész sorban
   négy, az üresben kettő. A plusz cián, a kimaradt sorban halk. */
.ts-fejsor { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.ts-fejsor > .ts-nap, .ts-fejsor > .ts-nyit { flex: 1; min-width: 0; }
.ts-ikonok { display: flex; flex: none; margin-left: auto; margin-top: -5px; }
.ts-ikonok .etkezes-fej-ikon { width: 34px; height: 32px; }
.ts-ikonok .etkezes-fej-ikon.fo.halk { color: var(--halvany); }
/* Csukott soron csak a plusz; a szorzás, mentés, másolás akkor jön elő, ha az
   étkezés nyitva van, vagyis van mit szorozni, menteni, másolni. */
.ts.fl:not(.nyitva) .ts-ikonok .etkezes-fej-ikon:not(.fo) { display: none; }
/* A kcal EGY OSZLOPBAN: csukott soron a plusz mellett, mindig ugyanott
   (a sor jobb széléhez mérve), így a számok egymás alatt állnak. Nyitott
   soron az ikonsor elfoglalja a helyét, ilyenkor az időpont mellé áll. */
.ts-kcal { position: absolute; right: 46px; top: 13px; width: 58px; text-align: right;
  font-size: var(--t-apro); font-weight: 900; color: var(--szoveg); }
.ts.fl.nyitva .ts-kcal { position: static; width: auto; margin-left: 10px; }
/* A KINYITOTT étkezés zöld alapot kap: látszik, melyikben dolgozol. */
.ts.fl.mult.nyitva { background: color-mix(in srgb, var(--siker) 8%, transparent); border-radius: var(--sugar); }
.ts.fl .ts-pont { margin-top: 6px; }
.ts.fl.mult .ts-pont { border-color: var(--siker); background: var(--siker); }
.ts.fl.mult.nyitva .ts-nap { color: var(--siker); }
.ts.fl.mult.halk .ts-pont { background: var(--hatter); border-style: dashed; border-color: color-mix(in srgb, var(--szoveg) 30%, transparent); }
.ts.fl.halk .ts-szov { opacity: 0.6; }
.ts.fl.jovo .ts-pont { border-color: var(--kiemelt); }
.ts.fl.most .ts-pont { margin-top: 8px; --pulzus-feny: var(--kiemelt); border-color: var(--kiemelt); background: var(--kiemelt); }
.ts.fl.most .ts-nap { color: var(--kiemelt); }
.ts.fl.most { background: color-mix(in srgb, var(--kiemelt) 7%, transparent); cursor: default; }
.ts-nyit { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0; border: 0; background: none;
  color: var(--szoveg); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ts.fl .ts-etel { white-space: normal; }
.ts.fl.nyitva .ts-etel { display: none; }
.ts.fl .tetel-lista { margin-top: 8px; }
.ts-javaslatok { display: grid; gap: 6px; margin: 8px 0 4px; }
.ts-javaslatok .ek-javaslat { width: 100%; }
.ts.fl .gomb.elsodleges { margin-top: 4px; }
.ts.fl .ts-tett { border: 0; font: inherit; font-size: var(--t-cimke); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; min-height: 34px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tengely-nap .ts.mult .ts-tett, .tengely-nap .ts.jovo .ts-tett { color: var(--kiemelt); background: color-mix(in srgb, var(--kiemelt) 13%, transparent); }
.tengely-nap .ts.mult .ts-tett.kesz { color: var(--szoveg); background: color-mix(in srgb, var(--szoveg) 8%, transparent); font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; letter-spacing: 0; text-transform: none; font-size: var(--t-apro); }
.tengely-nap .ts.mult .ts-tett.halk, .tengely-nap .ts.jovo .ts-tett.halk { color: var(--halvany); background: color-mix(in srgb, var(--halvany) 13%, transparent); }
/* A javaslat száma fehér; a döntés a pötty. */
.ek-javaslat.jav-fer, .ek-javaslat.jav-hatar, .ek-javaslat.jav-nem { border-left-color: var(--keret); }
.ek-javaslat.jav-fer .ek-kcal, .ek-javaslat.jav-hatar .ek-kcal { color: var(--szoveg); }
/* A PÖTTY OSZTÁLYA `jav-pott`, NEM `jav-fer`: a `jav-fer` a GOMB állapota
   (belefér a keretbe), és amíg a kettő egy néven futott, a pötty szabálya a
   gombra is ráült — a javaslat-sorból szürke ellipszis lett, amint belefért
   (Levi, 2026-09-20). Állapot és elem sose ossza meg a nevét. */
.jav-pott { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--halvany); }
.ek-javaslat.jav-fer .jav-pott { background: var(--siker); }
.ek-javaslat.jav-hatar .jav-pott { background: var(--figyelem); }
.ek-javaslat.jav-nem .jav-pott { background: color-mix(in srgb, var(--halvany) 55%, transparent); }
.ek-javaslat.jav-nem .ek-nev, .ek-javaslat.jav-nem .ek-kcal { color: var(--halvany); }
/* A Konyha fül két csempéje: a rács tölti a szélességet, a csempék magasabbak. */
.konyha-racs .htegla { min-height: 150px; }
.konyha-racs .htegla-ertek { white-space: normal; overflow: visible; }

/* ÖSSZETÉTEL-SÁV — a leadott tömegből mennyi volt zsír.
   Egyetlen vízszintes sáv, mert a szám (78%) önmagában absztrakt; a hossz
   viszont ránézésre mond valamit. 100% fölött is teli marad: az azt jelenti,
   hogy közben zsírmentes tömeget is építettél, és az nem hiba. */
.osszetetel-sav {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--testsuly) 18%, transparent);
  margin: 12px 0 10px;
}
.osszetetel-sav i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--testsuly);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ═══ HOGYAN SZÁMOL ═══════════════════════════════════════════════════════
   A mai keret levezetése, nyugta-formában. Két bejárata van: a Haladás fül
   csíkja és a Ma fül kalória-lapjának alja.

   MIÉRT NYUGTA. A forma maga mondja el a szabályt: számok egy tengelyen,
   vastag vonal, végösszeg. Ezt senkinek nem kell elmagyarázni, és attól,
   hogy ismerős, a tartalom is kevésbé hat varázslatnak.
   A vászon terve: „Hogyan számol" lap, K4 (2026-09-21). */

.hsz-bevezeto { margin: 0 0 12px; font-size: var(--t-apro); line-height: 1.5; color: var(--halvany); }

.hsz-lanc {
  background: var(--lap-bel); border: 1px solid var(--keret);
  border-radius: var(--sugar); padding: 4px 16px;
}
.hsz-sor {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px;
  align-items: baseline; padding: 14px 0; border-top: 1px solid var(--keret);
}
.hsz-sor:first-child { border-top: 0; }
.hsz-mit { font-size: var(--t-torzs); font-weight: 600; line-height: 1.35; }
.hsz-mennyi {
  font-family: "Nunito", "Archivo", sans-serif; font-weight: 900;
  font-size: var(--t-nagy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hsz-mennyi small {
  font-size: var(--t-cimke); font-weight: 700; color: var(--halvany); margin-left: 3px;
}
/* A LEVONÁSOK HALVÁNYAK: a szem az első számra és a végösszegre essen. */
.hsz-levon .hsz-mennyi { color: var(--halvany); }
.hsz-miert {
  grid-column: 1 / -1; margin: -4px 0 0;
  font-size: var(--t-apro); line-height: 1.45; color: var(--halvany);
}
/* A VÉGÖSSZEG: vastag vonal fölötte, ahogy egy blokkon. */
.hsz-vegosszeg { border-top: 2px solid var(--szoveg); padding-top: 16px; }
.hsz-vegosszeg .hsz-mit { font-weight: 800; }
.hsz-vegosszeg .hsz-mennyi { font-size: var(--t-plakat); line-height: 1; color: var(--kiemelt); }
/* A RÉSZÖSSZEG: a mérés szerinti alap, amire a „+20" sor hivatkozik (Levi,
   2026-09-23). Vékony vonal fölötte, a szám a szöveg színével. */
.hsz-reszosszeg { border-top: 1px solid var(--szoveg); }
.hsz-reszosszeg .hsz-mit { font-weight: 800; }
.hsz-reszosszeg .hsz-mennyi { color: var(--szoveg); }

.hsz-ved-cim { display: block; margin: 20px 0 8px; }
.hsz-ved {
  background: var(--lap-bel); border: 1px solid var(--keret);
  border-radius: var(--sugar); padding: 2px 16px;
}
.hsz-ved-sor {
  display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 11px;
  align-items: start; padding: 13px 0; border-top: 1px solid var(--keret);
}
.hsz-ved-sor:first-child { border-top: 0; }
.hsz-ved-sor i {
  display: block; width: 7px; height: 7px; margin-top: 8px;
  border-radius: 50%; background: var(--hsz-szin, var(--siker));
}
.hsz-ved-sor p { margin: 0; font-size: var(--t-apro); line-height: 1.45; }
.hsz-ved-sor p b { font-family: "Nunito", "Archivo", sans-serif; font-weight: 900; }
.hsz-ved-sor p .hsz-hal { color: var(--halvany); }

/* A BEJÁRAT a kalória-lap alján. Teljes szélességű sor, 48 px magas: a
   hüvelykujjnak készült, nem az egérnek. */
.cellalap-tovabb {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* FÖLÜL ÜL, közvetlenül a nagy szám alatt (2026-09-22), ezért a köz
     mindkét oldalon kell: fölötte a fejrész, alatta a magyarázat. */
  width: 100%; min-height: 48px; margin: 16px 0 4px; padding: 12px 14px;
  background: var(--lap-bel); border: 1px solid var(--keret);
  border-radius: var(--sugar); color: var(--kiemelt);
  font: inherit; font-size: var(--t-apro); font-weight: 700; text-align: left;
  cursor: pointer;
}
.cellalap-tovabb:active { background: var(--lap-emelt); }