/* 14. kör — BELÉPÉS NÉVVEL ÉS E-MAILES KÓDDAL A GÉPEN (`kod` mód, 2026-10-12 este).
   A választott látványterv (`~/ClaudeCode/huni-belepes-terv/index.html`, C „Megjegyzett nevek”) a gép
   belépő kártyájában: a méretek a tervéi, a színek az app tokenjei (gep3-kozos.css). A kártya maga a
   régi (`.belepesfal`, `.belepodoboz`, gep11-szerver.css). Más módban egyik elem sem jön létre.

   ⚠️ A `.belepodoboz p` (0,1,1) minden bekezdésnek 22 px alsó margót és 13 px-es szürkét ad, a
      `.belepodoboz h2` 22 px-es címet — itt minden a saját méretét kapja, kimondottan (0,2,0+). */

/* A tartalom balra igazítva, mint a tervben (a PIN-es belépő középre zárt). */
.belepodoboz.kodbelepo{text-align:left}
.kodbelepo .belepomarka{justify-content:flex-start;margin-bottom:30px}
.belepodoboz.kodbelepo h2{margin:0 0 18px;font-size:28px;font-weight:700;letter-spacing:-.02em;
  line-height:1.15;color:var(--szoveg)}
.belepodoboz.kodbelepo h2 em{font-style:normal;color:var(--kek)}

/* ── a megjegyzett nevek: két oszlop, nagy gombok (monogram-kör + név) ─────────── */
.kodnevek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.kodnevgomb{height:64px;min-width:0;border-radius:16px;border:1.5px solid var(--keret-2);
  background:var(--lap);font:inherit;font-size:17px;font-weight:700;color:var(--szoveg);
  cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 14px;text-align:left;
  transition:border-color .15s,box-shadow .15s}
.kodnevgomb:hover{border-color:var(--kek)}
.kodnevgomb:focus-visible{outline:0;border-color:var(--kek);box-shadow:0 0 0 4px rgba(65,86,149,.16)}
.kodnevgomb i{width:34px;height:34px;border-radius:50%;background:var(--kek-50);color:var(--kek);
  display:grid;place-items:center;font-style:normal;font-size:13px;flex:none}
/* egy hosszú név ne lógjon ki a gombból: három ponttal végződik, nem tör */
.kodnevgomb span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.belepodoboz .kodvagy{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--halvany)}

/* ── a név és a „Kód kérése” egy sorban ───────────────────────────────────────── */
.kodsor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0}
.kodmezo{width:100%;min-width:0;height:56px;border:1.5px solid var(--keret-2);border-radius:14px;
  background:var(--lap);padding:0 16px;font:inherit;font-size:17px;color:var(--szoveg);outline:none;
  transition:border-color .15s,box-shadow .15s}
.kodmezo::placeholder{color:var(--halvanyabb)}
.kodmezo:focus{border-color:var(--kek);box-shadow:0 0 0 4px rgba(65,86,149,.16)}
.kodmezo.rossz{border-color:var(--piros);box-shadow:0 0 0 4px rgba(179,38,30,.12)}
.kodkergomb{height:56px;border:0;border-radius:14px;background:var(--kek);color:#fff;font:inherit;
  font-size:15px;font-weight:700;padding:0 18px;cursor:pointer;white-space:nowrap;
  transition:background .15s,opacity .15s}
.kodkergomb:hover{background:var(--kek-700)}
.kodkergomb:disabled{opacity:.6;cursor:default}
.kodkergomb:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(65,86,149,.22)}
/* (`text-wrap:balance`: a kétsoros hiba a mondathatáron törjön, ne egy árva szóval — „…jól / írtad-e.”) */
.belepodoboz .kodhiba{margin:10px 2px 0;font-size:14px;font-weight:600;line-height:1.4;color:var(--piros);
  text-wrap:balance}
.belepodoboz .kodhiba:empty{display:none}

/* ── a kódos rész: a kérés után jön, a névsor és a mező helyén ─────────────────── */
.kodresz{display:none}
.kodbelepo.van-kod .kodresz{display:block;animation:kodbe .28s ease-out}
.kodbelepo.van-kod .kodnevek,.kodbelepo.van-kod .kodvagy,.kodbelepo.van-kod .kodsor{display:none}
@keyframes kodbe{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.kodpanel{margin-top:4px;padding:20px 16px 16px;border-radius:18px;background:var(--kek-25);
  border:1px solid var(--kek-100)}
.belepodoboz .kodelkuldve{margin:0 0 14px;text-align:center;font-size:14px;line-height:1.45;
  color:var(--halvany)}

/* ⭐ EGY NAGY MEZŐ (Roland, 2026-10-20: „ne egyesével legyen … mint ahogy itt e-mailben is”) — a
   levélben a kód nagy, félkövér, sötétkék (#2b3a66 = `--kek-900`), ritkított számjegyekkel áll; a
   mező ugyanígy, egyenszélességű betűvel, középre zárva. A `padding-left` a betűköz párja: a
   ritkítás az utolsó jegy UTÁN is helyet hagy, enélkül a kód a középtől balra csúszna. */
.koddobozok{width:100%}
.kodbe{display:block;width:100%;height:68px;margin:0;padding:0 0 0 .4em;box-sizing:border-box;
  border:1.5px solid rgba(19,26,44,.18);border-radius:16px;background:var(--lap);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:34px;
  font-weight:700;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;
  color:var(--kek-900);caret-color:var(--kek);outline:none;
  transition:border-color .12s,box-shadow .12s,background .12s}
.kodbe::placeholder{color:rgba(43,58,102,.22);opacity:1}
/* Üres mezőben a kurzor a pöttyök közepén villogna („• •|• •”): addig rejtve, a fókuszt a kék keret mutatja. */
.kodbe:placeholder-shown{caret-color:transparent}
.kodbe:focus{border-color:var(--kek);box-shadow:0 0 0 4px rgba(65,86,149,.16)}
.kodbe:disabled{background:var(--papir);color:var(--kek-900)}
/* Rossz kód: a mező megrázkódik és piros marad, amíg újra nem gépel. A saját rázkódása (a tervé:
   5 → 3 px) — a `razas` nevet a PIN-es belépő már használja. */
.koddobozok.hibas .kodbe{border-color:var(--piros);animation:kodrazas .32s}
.koddobozok.hibas .kodbe:focus{box-shadow:0 0 0 4px rgba(179,38,30,.12)}
.koddobozok.jo .kodbe{border-color:var(--zold);background:var(--zold-50)}
@keyframes kodrazas{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.belepodoboz .kodallapot{margin:12px 0 0;min-height:20px;text-align:center;font-size:14px;
  font-weight:600;line-height:1.45;color:var(--szoveg);text-wrap:balance}
.belepodoboz .kodallapot.bad{color:var(--piros)}
.belepodoboz .kodallapot.ok{color:var(--zold)}
.belepodoboz .kodallapot.semleges{color:var(--halvany);font-weight:500}
.kodcsik{height:4px;margin:16px 6px 0;border-radius:99px;background:var(--kek-100);overflow:hidden}
.kodcsik i{display:block;height:100%;width:0;background:var(--kek);transition:width 1s linear}

/* „Új kód 0:59” és „Nem te vagy?” — a panel alatt, a két szélen */
.kodalsosor{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.kodlink{border:0;background:none;padding:6px 2px;font:inherit;font-size:14px;font-weight:600;
  color:var(--kek);cursor:pointer;font-variant-numeric:tabular-nums}
.kodlink:not(:disabled):hover{text-decoration:underline;text-underline-offset:2px}
.kodlink:disabled{color:var(--halvanyabb);cursor:default}

/* ⭐ ÁTMENET — a PIN lépése (cím nélküli fiók, Roland 10-12 este): ugyanaz a panel, benne a
   „Még nincs e-mail-címed …” szöveg és a mező, négy jegyre, pontozva; „Új kód” és csík itt nincs, a
   „Nem te vagy?” marad a jobb szélen. */
.kodpinszoveg{display:none;text-wrap:balance}
.kodbelepo.pin-lepes .kodpinszoveg{display:block}
.kodbelepo.pin-lepes .kodelkuldve:not(.kodpinszoveg),
.kodbelepo.pin-lepes .kodcsik,
.kodbelepo.pin-lepes #kodUjra{display:none}
.kodalsosor #kodMasik{margin-left:auto}
.kodegyben{white-space:nowrap}