/* A kiszamolok stilusa. Kulon fajlban, mert csak a ket eszkozoldal
   hasznalja, es render-blokkolokent minden mas oldalt is lassitotta.
   Betoltese: segitseg/teszta-kiszamolo es segitseg/kijozanodas. */
.eszkoz-torzs { padding: 56px 0 96px; }
.eszkoz-racs { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: start; }

.tk-urlap { padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.tk-mod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 28px; }
.tk-mod button {
  padding: 12px 6px; border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--ink-soft);
  font: 600 14px/1 var(--sans); cursor: pointer;
  transition: color .3s var(--ease-fiok), background .3s var(--ease-fiok), border-color .3s var(--ease-fiok);
}
.tk-mod button:hover { color: var(--forest); border-color: var(--sage); }
.tk-mod button.on { color: var(--white); background: var(--forest); border-color: var(--forest); }
.tk-mod button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tk-racs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tk-mezo label {
  display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px;
  color: var(--ink); font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  /* Vedelem: hosszabb cimkenel a mertekegyseg korabban kicsuszott a dobozbol.
     Tordelessel inkabb uj sorba kerul, semmi nem lohat ki a kartyabol. */
  flex-wrap: wrap; min-width: 0;
}
.tk-mezo label > * { min-width: 0; }
.tk-mezo label .tk-egyseg { color: var(--sage); font-weight: 500; letter-spacing: .04em; }
.tk-mezo input, .tk-mezo select {
  width: 100%; height: 46px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); color: var(--ink);
  font: 400 15.5px/1 var(--sans); outline: none;
  transition: border-color .3s var(--ease-fiok), box-shadow .3s var(--ease-fiok);
}
.tk-mezo input:focus, .tk-mezo select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 170, 118, .28); }
.tk-szeles { grid-column: 1 / -1; }
.tk-rejtve { display: none !important; }

.tk-liszt { grid-column: 1 / -1; padding: 18px; background: var(--paper-2); border-radius: 2px; }
.tk-liszt-fej { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tk-liszt h3 { min-width: 0; margin: 0; font: 400 19px/1.2 var(--serif); }
.tk-jelzo {
  flex: 0 0 auto; padding: 5px 8px; border-radius: 2px;
  background: var(--forest); color: var(--white);
  font: 700 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.tk-jelzo.becsult { background: var(--sage); color: var(--forest); }
.tk-liszt-adatok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tk-adat { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.tk-adat span { display: block; color: var(--ink-soft); font: 500 11.5px/1.25 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.tk-adat strong { display: block; margin-top: 4px; font: 600 14px/1.3 var(--sans); }
.tk-liszt-leiras { margin: 14px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.tk-forras { display: inline-block; margin-top: 10px; color: var(--forest); font: 700 13px/1 var(--sans); text-underline-offset: 3px; }

.tk-sajat {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 12px;
  padding: 16px; border: 1px dashed var(--sage); border-radius: 2px; background: var(--paper);
}
.tk-sajat label { font-size: 11px; }
/* A ket lenyithato reszpanel mezoi: egyenrangu szamok, ezert egyenlo oszlopok,
   nem a .tk-sajat 1,35 : 0,8 : 0,8 aranya. */
.tk-etetes, .tk-fazisok { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
/* A cimkek kulonbozo hosszuak, ezert tobb sorba tordelnek. Az end-igazitas
   a mezok aljat teszi egy vonalba, igy a beviteli dobozok soronkent
   egyutt allnak, akkor is, ha a felettuk levo cimke ket soros. */
.tk-szamolt { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.tk-szamolt strong { color: var(--ink); font-weight: 700; }
.tk-apro { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
/* Lenyithato reszletezes az urlap alatt (Widmark-keplet). Alapbol zarva.
   Sima <details>, ezert JS nelkul es billentyuzettel is mukodik. */
.tk-reszletek > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  /* A betut kiirjuk: a cikktorzs sajat summary-szabalya kulonben 20 px-es
     Georgiara valtja, ami kilog a korulotte levo aprobetus blokkbol. */
  font: 600 13px/1.5 var(--sans);
  padding: 8px 0;
}
.tk-reszletek > summary::-webkit-details-marker { display: none; }
.tk-reszletek > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 700ms var(--ease-fiok);
}
.tk-reszletek[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.tk-reszletek > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.tk-reszletek > p { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .tk-reszletek > summary::after { transition: none; }
}

.tk-inditas {
  width: 100%; margin-top: 26px; padding: 16px; border: 0; border-radius: 2px;
  background: var(--forest); color: var(--white);
  font: 600 15px/1.2 var(--sans); letter-spacing: .02em; cursor: pointer;
  transition: background .7s var(--ease-fiok), transform .7s var(--ease-fiok);
}
.tk-inditas:hover { background: #2a4434; }
.tk-inditas:active { transform: translateY(1px); }
.tk-inditas:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tk-eredmeny { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tk-szamok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-szam { min-width: 0; padding: 20px; background: var(--forest); border-radius: 2px; overflow: hidden; }
.tk-szam span { display: block; margin-bottom: 10px; color: var(--sage); font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.tk-szam strong { display: block; color: var(--gold); font: 400 clamp(28px, 3.4vw, 40px)/1 var(--serif); white-space: nowrap; }
.tk-szam small { display: block; margin-top: 10px; color: var(--sage-pale); font: 400 12px/1.35 var(--sans); }
/* Az eszkozoldalak bal hasabja: az urlap melle meg egy doboz kerul, kulonben
   a rovid urlap miatt a bal oldal also resze uresen maradna. */
.eszkoz-bal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Ismetelheto italsor: minden adat sajat, feliratozott dobozban (fajta,
   meret, alkoholszazalek, mennyiseg, idopont). Cimke nelkuli szamdobozok
   korabban ertelmezhetetlenek voltak. */
.tk-italsor { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5px;
  margin-bottom: 10px; padding: 10px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 2px; }
.tk-italsor label, .tk-italsor .f-ido { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  color: var(--ink); font: 700 10px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  /* A cimke ne torjon ket sorba (pl. "ALK. %"), mert attol a doboz magasabb
     lesz a tobbinel, es kibillen a sor. */
  white-space: nowrap; }
.tk-italsor .tk-cimke { display: block; white-space: nowrap; }
/* Az idopont cimkejenek ket valtozata van. Asztali szelessegen a rovid
   "Mikor" fer csak el a sorban; mobilon a mezo sajat sorba kerul, ott
   elfer a beszedesebb mondat. */
.tk-italsor .cs-mobil { display: none; }
.tk-italsor .tk-cimke i { font-style: normal; color: var(--sage); font-weight: 500; letter-spacing: .02em; }
.tk-italsor select, .tk-italsor input {
  height: 38px; padding: 0 6px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); color: var(--ink); font: 400 13.5px/1 var(--sans);
  outline: none; min-width: 0;
  transition: border-color .3s var(--ease-fiok), box-shadow .3s var(--ease-fiok); }
.tk-italsor select:focus, .tk-italsor input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 170, 118, .28); }
/* A mezok rugalmasak: szeles hasabon kitoltik a helyet, keskenyen osszehuzodnak
   az alapmeretukig, es csak azon tul tordelnek. Fix pixelszelessegnel desktopon
   nagy ures folt maradt a sor vegen. */
.tk-italsor label, .tk-italsor .f-ido { flex: 1 1 auto; }
/* A leghosszabb italnev a "Tömény": 50 px a szoveg, plusz 12 px belso
   margo es a lenyito jel helye. Ez ala nem mehet, kulonben levagja. */
.tk-italsor .f-ital  { flex: 1 1 100%; }
/* Kereshető italválasztó: gomb, alatta lenyíló panel keresőmezővel és
   kategóriánként csoportosított listával. 117 italnál a natív <select>
   nem kereshető és nehezen görgethető. */
.tk-italsor .f-ital { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  color: var(--ink); font: 700 10px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.tk-valaszt { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 32px 0 10px;
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; text-align: left;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23203128' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 12px;
  color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none;
  transition: border-color .3s var(--ease-fiok), box-shadow .3s var(--ease-fiok); }
.tk-valaszt:focus-visible, .tk-valaszt[aria-expanded="true"] { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 170, 118, .28); }
.tk-valaszt-nev { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-valaszt-csop { flex: 0 0 auto; color: var(--sage); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tk-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 16px 40px rgba(32, 49, 40, .18);
  font: 400 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; white-space: normal; }
/* 16 px: kisebb betűnél az iPhone ráközelít a mezőre. */
.tk-panel .tk-kereso { width: 100%; height: 40px; padding: 0 10px; font: 400 16px/1 var(--sans);
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); }
.tk-panel .tk-kereso:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 170, 118, .28); }
.tk-lista { margin-top: 8px; max-height: min(340px, 50vh); max-height: min(340px, 50dvh);
  overflow-y: auto; overscroll-behavior: contain; }
.tk-csoport-cim { position: sticky; top: 0; z-index: 1; padding: 8px 8px 4px; background: var(--white);
  color: var(--sage); font: 700 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tk-opcio { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px; border: 0; border-radius: 2px; background: none; cursor: pointer; text-align: left;
  color: var(--ink); font: 400 14px/1.3 var(--sans); }
.tk-opcio:hover, .tk-opcio.aktiv { background: var(--paper-2); }
.tk-opcio.valasztott { font-weight: 700; }
.tk-opcio-szaz { flex: 0 0 auto; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-nincs { margin: 0; padding: 10px 8px; color: var(--ink-soft); font: 400 14px/1.45 var(--sans); }
.tk-opcio-egyeb { padding: 0 2px; border: 0; border-bottom: 2px solid var(--gold); background: var(--paper-2);
  color: var(--ink); font: 700 14px/1.45 var(--sans); cursor: pointer; }
.tk-italsor .f-meret { flex: 3 1 74px; }
.tk-italsor .f-szaz  { flex: 1 1 52px; }
.tk-italsor .f-db    { flex: 1 1 44px; }
/* Az idopontnak ket valaszto van benne, ezert nagyobb resz jar neki. */
.tk-italsor .f-ido   { flex: 3 1 118px; }
.tk-italsor select, .tk-italsor input { width: 100%; }
/* A torles gomb a sor vegen, a mezokkel egy vonalban. Korabban abszolut volt,
   de a jobb oldali belso margo emiatt ketszer foglalta le a helyet. */
.tk-italsor .tk-torol { flex: 0 0 32px; width: 32px; height: 38px; padding: 0; font-size: 14px; }
.tk-italsor .tk-ml, .tk-italsor .tk-szaz, .tk-italsor .tk-db {
  text-align: right; font-variant-numeric: tabular-nums; }
.tk-italsor .tk-ido { padding: 0 5px; font-variant-numeric: tabular-nums; }
/* Sajat ora/perc valaszto. A natív <input type="time"> az Android sajat
   parbeszedablakat nyitja meg, amelynek a gombsora kis kijelzon levaghat,
   es azt az oldal stilusa nem tudja megfogni. Ket sima <select> viszont a
   mi elrendezesunkben marad. */
.tk-italsor .tk-idoparos { display: flex; align-items: center; gap: 5px; min-width: 0; }
/* A ket szamnak es a lenyito jelnek mindig ki kell fernie. Ha nem fer,
   a sor inkabb tordeljen: a zsufolt, levagott szam a rosszabb. */
/* A magassagot a tartalom adja, nem fix ertek: rogzitett magassagnal az
   Android bongeszoi a szamot a doboz tetejere teszik, nem kozepre.
   1 px keret + 18 px sor + 2x9 px belso margo = 38 px, annyi, mint a
   mellette allo mezoke. */
.tk-italsor .tk-idoparos select { flex: 1 1 0; min-width: 52px; width: auto;
  height: auto; line-height: 18px; padding: 9px 2px 9px 6px;
  font-variant-numeric: tabular-nums; }
.tk-italsor .tk-ketto { flex: 0 0 auto; color: var(--ink-soft); font-weight: 600; }
/* A "2 ora 28 perc" jellegu ertek hosszabb, mint egy ezrelek vagy oraallas,
   ezert sajat, kisebb meretet kap, es tordelhet is. */
#mennyiIdo { font-size: clamp(20px, 2.2vw, 27px) !important; white-space: normal !important; }
/* Idotartomany-ertekek (pl. "19:30-21:29") hosszabbak, mint a szazalekok:
   sajat, kisebb betumeret kell nekik, hogy ne vagodjanak le a kartyan. */

.tk-diagnozis { padding: 30px; background: var(--white); border-left: 4px solid var(--gold); border-radius: 2px; }
.tk-allapot {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 999px;
  background: var(--paper-2); color: var(--forest);
  font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.tk-allapot i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.tk-diagnozis h2 { margin: 18px 0 12px; font: 400 clamp(26px, 3.3vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.tk-diagnozis > p, .tk-diagnozis #summary { margin: 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }
/* A magyarazat nyito felirata csak mobilon kell: asztali szelessegen a
   doboz mindig nyitva all, ott a felirat csak zavarna. */
.tk-magyarazat > summary { display: none; }

.tk-savdoboz { padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.tk-savfej { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--ink); font: 700 11.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.tk-sav { height: 9px; background: var(--sage-pale); border-radius: 999px; overflow: hidden; }
.tk-sav span { display: block; height: 100%; background: var(--forest); transition: width .5s var(--ease-fiok); }
.tk-skala { display: flex; justify-content: space-between; margin-top: 9px; color: var(--ink-soft); font-size: 11.5px; }

.tk-lepesek { display: grid; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.tk-lepes { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 20px; }
.tk-lepes + .tk-lepes { border-top: 1px solid var(--line); }
.tk-szamjegy { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--forest); font: 700 14px/1 var(--sans); }
.tk-lepes h3 { margin: 4px 0 6px; font: 600 15.5px/1.3 var(--sans); }
.tk-lepes p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

.tk-ora { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 2px; background: var(--forest); }
.tk-ora-szoveg span { display: block; color: var(--sage); font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.tk-ora-szoveg strong { display: block; margin-top: 6px; color: var(--gold); font: 400 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
.tk-ora button {
  flex: 0 0 auto; padding: 12px 18px; border: 1px solid var(--sage); border-radius: 999px;
  background: transparent; color: var(--white); font: 600 13px/1 var(--sans); cursor: pointer;
  transition: color .4s var(--ease-fiok), background .4s var(--ease-fiok);
}
.tk-ora button:hover { color: var(--forest); background: var(--gold); border-color: var(--gold); }
.tk-ora button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tk-labjegyzet { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.tk-labjegyzet a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }

.eszkoz-tovabb { padding: 0 0 96px; }
.eszkoz-tovabb-doboz { max-width: 720px; padding: 32px; background: var(--paper-2); border-radius: 2px; }
.eszkoz-tovabb h2 { margin: 0 0 14px; font: 400 26px/1.2 var(--serif); }
.eszkoz-tovabb p { margin: 0 0 16px; color: #38483f; font-size: 17px; line-height: 1.75; }
.eszkoz-tovabb p:last-child { margin-bottom: 0; }
.eszkoz-tovabb a[href^="/temak/"] {
  background: var(--white); padding: 1px 4px; border-radius: 2px;
  border-bottom: 2px solid var(--gold); font-weight: 700;
  color: var(--ink); text-decoration: none;
}

@media (max-width: 1000px) {
  .eszkoz-racs { grid-template-columns: 1fr; gap: 32px; max-width: 760px; }
}
@media (max-width: 620px) {
  .tk-magyarazat > summary { display: inline-flex; }
  .tk-magyarazat > #summary { margin-top: 10px; }
  /* Mobilon az eredmeny elore kerul: a becsult csucsertek es a zold dobozok
     rogton az urlap utan jonnek, es csak azok utan a "Miert csak becsles"
     magyarazat. A `display: contents` feloldja a bal oszlopot, igy a benne
     levo blokkok maguk is racselemek lesznek, es sorrendezhetok. A racs
     kozet itt 20 px-re vesszuk, mert eddig a bal oszlop sajat koze volt
     ennyi, es igy a ritmus valtozatlan marad. */
  .eszkoz-racs { gap: 20px; }
  .eszkoz-bal { display: contents; }
  .eszkoz-bal > .tk-riasztas { order: 1; }
  .eszkoz-bal > .tk-urlap { order: 2; }
  .tk-eredmeny { order: 3; }
  .eszkoz-bal > .tk-labjegyzet.tk-kiemelt { order: 4; }
  .eszkoz-bal > p.tk-labjegyzet { order: 5; }
  .eszkoz-bal > .kiemelt-figyelmeztetes { order: 5; }
  /* Az idopont-mezo sajat, teljes szelessegu sorba kerul, es a hosszabb
     cimke tordelhet: igy a mondat nem nyomja szet az italsort. */
  .tk-italsor .f-ido { flex: 1 1 100%; }
  .tk-italsor .f-ido .tk-cimke { white-space: normal; }
  .tk-italsor .cs-asztal { display: none; }
  .tk-italsor .cs-mobil { display: inline; }
  .eszkoz-torzs { padding: 40px 0 64px; }
  .tk-urlap { padding: 22px 18px; }
  .tk-racs { grid-template-columns: 1fr; }
  .tk-szeles, .tk-liszt, .tk-sajat, .tk-apro { grid-column: auto; }
  .tk-liszt-fej { flex-direction: column; }
  .tk-liszt-adatok { grid-template-columns: 1fr 1fr; }
  .tk-adat:last-child { grid-column: 1 / -1; }
  .tk-sajat { grid-template-columns: 1fr 1fr; }
  .tk-sajat .tk-mezo:first-child { grid-column: 1 / -1; }
  .tk-etetes, .tk-fazisok { grid-template-columns: 1fr 1fr; }
  .tk-etetes .tk-mezo:first-child, .tk-fazisok .tk-mezo:first-child { grid-column: auto; }
  .tk-szamok { grid-template-columns: 1fr 1fr; }
  .tk-szam:last-child { grid-column: 1 / -1; }
  .tk-diagnozis { padding: 22px; }
  .tk-ora { flex-direction: column; align-items: flex-start; }
  .eszkoz-tovabb-doboz { padding: 24px 20px; }
}

/* Időzítő: gombpár és a mellette futó magyarázat */
.tk-ora-gombok { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tk-ertesites {
  padding: 9px 14px; border: 1px dashed var(--sage); border-radius: 999px;
  background: transparent; color: var(--sage-pale);
  font: 600 12px/1 var(--sans); cursor: pointer;
  transition: color .4s var(--ease-fiok), border-color .4s var(--ease-fiok);
}
.tk-ertesites:hover { color: var(--gold); border-color: var(--gold); }
.tk-ertesites:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tk-ora-jegyzet { margin: -8px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
@media (max-width: 620px) {
  .tk-ora-gombok { width: 100%; }
}

/* Hős: bal oldalon a cím és a felvezető, jobb oldalon nagy verzállal az,
   hogy mire való az oldal. Eddig ez a sáv üresen állt. */
.eszkoz-hero-racs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}
.eszkoz-cel {
  margin: 0 0 6px;
  padding-top: 20px;
  border-top: 2px solid var(--gold);
  color: var(--forest);
  /* Nagy verzálhoz külön display-betű: a rendszer groteszkje ebben a méretben
     karakter nélküli. A Playfair magas vonalvastagság-kontrasztja adja meg a
     tömbnek a súlyt, és talpasként megfér a Georgia címsorral. */
  font-family: "Playfair Display", var(--serif);
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-align: right;
  /* Összetett szót nem választunk el, tehát a hosszú sornak magától kell
     beférnie. Ezért a két szó KÜLÖN méretet kap: a rövid nagyot, a hosszú
     akkorát, amekkora még kifér az oszlopba. Az értékek az oszlopszélességből
     jönnek (oszlop = (shell − 48) / 2), és minden töréspontnál le vannak mérve. */
  hyphens: none;
}
.eszkoz-cel span { display: block; white-space: nowrap; }
.eszkoz-cel span:first-child { font-size: min(96px, calc(8.6vw - 8px)); line-height: .94; }
.eszkoz-cel span:last-child  { font-size: min(48px, calc(4.3vw - 4.5px)); line-height: 1.1; }

@media (max-width: 1000px) {
  .eszkoz-hero-racs { grid-template-columns: 1fr; gap: 28px; }
  .eszkoz-cel { text-align: left; }
  .eszkoz-cel span:first-child { font-size: min(72px, calc(17vw - 6px)); }
  .eszkoz-cel span:last-child  { font-size: min(29px, calc(8.1vw - 1.5px)); }
}

/* Lisztkeverék: több liszt, mindegyik saját grammal */
.tk-lisztek { grid-column: 1 / -1; }
.tk-lisztek-fej {
  display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px;
  color: var(--ink); font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.tk-lisztek-fej .tk-egyseg { color: var(--sage); font-weight: 500; letter-spacing: .04em; }
.tk-lisztsor { display: grid; grid-template-columns: minmax(0, 1fr) 92px 40px; gap: 8px; margin-bottom: 8px; }
.tk-lisztsor select, .tk-lisztsor input {
  width: 100%; height: 46px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); color: var(--ink);
  font: 400 15.5px/1 var(--sans); outline: none;
  transition: border-color .3s var(--ease-fiok), box-shadow .3s var(--ease-fiok);
}
.tk-lisztsor select:focus, .tk-lisztsor input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 170, 118, .28); }
.tk-lisztsor input { text-align: right; font-variant-numeric: tabular-nums; }
.tk-torol {
  width: 40px; height: 46px; padding: 0;
  border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--ink-soft);
  font: 400 20px/1 var(--sans); cursor: pointer;
  transition: color .3s var(--ease-fiok), border-color .3s var(--ease-fiok), background .3s var(--ease-fiok);
}
.tk-torol:hover:not([disabled]) { color: #8c3b2e; border-color: #8c3b2e; background: var(--paper-2); }
.tk-torol[disabled] { opacity: .35; cursor: default; }
.tk-torol:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tk-lisztek-alj { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.tk-plusz {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 1px dashed var(--sage); border-radius: 999px;
  background: transparent; color: var(--forest);
  font: 600 13.5px/1 var(--sans); cursor: pointer;
  transition: background .3s var(--ease-fiok), border-color .3s var(--ease-fiok);
}
.tk-plusz span { font-size: 17px; line-height: 1; }
.tk-plusz:hover { background: var(--paper-2); border-color: var(--gold); border-style: solid; }
.tk-plusz:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tk-ossz { margin: 0; color: var(--ink-soft); font: 500 13px/1.3 var(--sans); }
.tk-ossz strong { color: var(--forest); font: 700 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .tk-lisztek { grid-column: auto; }
  .tk-lisztsor { grid-template-columns: minmax(0, 1fr) 80px 40px; }
  .tk-lisztek-alj { flex-direction: column; align-items: stretch; }
  .tk-plusz { justify-content: center; }
  .tk-ossz { text-align: center; }
}

/* Kelesztoarany-figyelmeztetes: a fermentacios sav fölött */
.tk-riasztas {
  margin: 0; padding: 16px 18px;
  border-left: 4px solid #8c3b2e; border-radius: 2px;
  background: #f7ece7; color: #6d2f24;
  font: 500 14.5px/1.55 var(--sans);
}
.tk-riasztas strong { display: block; margin-bottom: 6px; font-weight: 700; }
.tk-riasztas.enyhe {
  border-left-color: var(--gold); background: var(--paper-2); color: var(--ink);
}

/* A hibás beviteli mező jelölése — hogy látszódjon, mit kell javítani */
.tk-urlap .tk-hibas {
  border-color: #8c3b2e; background: #fbf2ef;
  box-shadow: 0 0 0 3px rgba(140, 59, 46, .16);
}
.tk-urlap .tk-figyelem { border-color: var(--gold); background: #fdfaf3; }

/* Számolt, nem írható mező */
.tk-mezo input[readonly] {
  color: var(--ink-soft); background: var(--paper-2);
  border-style: dashed; cursor: default;
}
/* Bekarikázott "i": a magyarázat csak ráhúzásra vagy fókuszra jön elő, hogy
   alapállapotban ne foglaljon helyet. */
.tk-cimke-szoveg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tk-info {
  display: inline-grid; place-items: center; position: relative;
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 1px solid var(--sage); border-radius: 50%;
  color: var(--sage); font: 700 10px/1 var(--sans); letter-spacing: 0;
  text-transform: none; cursor: help;
}
.tk-info:hover, .tk-info:focus-visible { color: var(--forest); border-color: var(--forest); outline: none; }
.tk-info-buborek {
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  width: 250px; padding: 12px 14px;
  transform: translate(-50%, 4px);
  border-radius: 2px; background: var(--forest); color: var(--paper);
  font: 400 12.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none;
  text-align: left; box-shadow: 0 10px 28px rgba(32, 49, 40, .24);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
  transition: opacity .25s var(--ease-fiok), transform .25s var(--ease-fiok), visibility .25s;
}
.tk-info:hover .tk-info-buborek, .tk-info:focus .tk-info-buborek,
.tk-info:focus-within .tk-info-buborek { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 620px) { .tk-info-buborek { width: 200px; } }

/* A figyelmeztetés helye képernyőméret szerint változik, ezért a térközt is
   ott kapja, ahol éppen áll. */
/* A figyelmeztetés a rácson belül, teljes szélességben ül, közvetlenül
   a víz és a kovász mezői fölött. */
.tk-racs > .tk-riasztas { grid-column: 1 / -1; margin: 4px 0 0; }

/* A mezők a beviteli dobozok alsó élére igazodnak, hogy egy kétsoros címke
   ne csúsztassa el a mellette lévő mezőt. */
.tk-racs > .tk-mezo { display: flex; flex-direction: column; justify-content: flex-end; }
.tk-racs > .tk-mezo > label { margin-top: auto; }

/* A kiszámoló záró megjegyzése kiemelve: háttér, arany vonal, nagyobb betű */
.tk-labjegyzet.tk-kiemelt {
  padding: 22px 24px; border-left: 4px solid var(--gold); border-radius: 2px;
  background: var(--paper-2); color: var(--ink);
  font-size: 16px; line-height: 1.7;
}
.tk-labjegyzet.tk-kiemelt strong { display: block; margin-bottom: 6px; font: 400 21px/1.3 var(--serif); }
.tk-labjegyzet.tk-kiemelt a {
  background: var(--white); padding: 1px 4px; border-radius: 2px;
  border-bottom: 2px solid var(--gold); font-weight: 700; color: var(--ink); text-decoration: none;
}

/* Időzítő: saját idő percben */
.tk-sajatido { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  color: var(--sage-pale); font: 500 13px/1 var(--sans); }
.tk-sajatido input { width: 72px; height: 36px; padding: 0 10px; text-align: right;
  border: 1px solid var(--sage); border-radius: 2px; background: transparent; color: var(--paper);
  font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.tk-sajatido input::placeholder { color: var(--sage); }
.tk-sajatido input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,170,118,.28); }

/* Derek-magassag kalkulator: az allapotpont szine a sav szerint. A szin mellett
   mindig ott a szoveges allapot is, tehat nem a szin az egyetlen jelzes. */
.tk-allapot[data-szint="jo"] i { background: var(--sage); }
.tk-allapot[data-szint="fokozott"] i { background: var(--gold); }
.tk-allapot[data-szint="magas"] i { background: #a4513b; }
.tk-allapot[data-szint="alatt"] i { background: var(--ink-soft); }
.dm-sav { background: linear-gradient(90deg, var(--sage) 0 33.3%, var(--gold) 33.3% 66.6%, #c98a74 66.6% 100%); }
.dm-sav span { background: transparent; border-right: 3px solid var(--ink); }

/* Derék-magasság kalkulátor: részletes elemzés blokkjai */
.dm-blokk h3 { margin: 0 0 8px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.dm-blokk p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.dm-blokk p + .dm-tabla, .dm-blokk p + .dm-evek { margin-top: 16px; }
.dm-tabla { display: grid; }
.dm-sor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 10px 0; }
.dm-sor + .dm-sor { border-top: 1px solid var(--line); }
.dm-sor span { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.dm-sor strong { font: 600 15px/1.3 var(--sans); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.dm-fej span { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dm-fej span:last-child { text-align: right; }
.dm-blokk .dm-apro { margin-top: 12px; font-size: 12.5px; line-height: 1.5; }
.dm-evek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dm-evek[hidden] { display: none; }
.dm-ev { padding: 12px; background: var(--paper); border-radius: 2px; text-align: center; }
.dm-ev span { display: block; margin-bottom: 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; color: var(--ink-soft); }
.dm-ev strong { display: block; font: 400 22px/1.1 var(--serif); color: var(--ink); white-space: nowrap; }
.dm-ev-te { background: var(--forest); }
.dm-ev-te span { color: var(--sage-pale); }
.dm-ev-te strong { color: var(--gold); }
.dm-forras a { word-break: break-word; }
@media (max-width: 599px) {
  .dm-evek { grid-template-columns: 1fr 1fr; }
}
.dm-egyben { white-space: nowrap; }

/* A kiszámolók „nem diagnózis” figyelmeztetése a bal oszlopban */
.eszkoz-bal > .kiemelt-figyelmeztetes { margin: 0; max-width: none; }

/* Biológiai életkor kiszámoló */
.bk-pelda { margin: 0 0 16px; padding: 8px 12px; background: var(--paper-2); border-radius: 2px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.bk-tipp { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 12px; line-height: 1.4; }

/* Biológiai életkor: 3 soros felhívás a hero jobb oldalán. A hosszabb sorok
   miatt kisebb méretek, mint a kétszavas változatnál; minden sor kifér az oszlopba. */
.bk-cel span:first-child { font-size: min(76px, calc(6.4vw - 6px)); line-height: .98; }
.bk-cel span:nth-child(2), .bk-cel span:last-child { font-size: min(52px, calc(4.4vw - 4px)); line-height: 1.08; }
@media (max-width: 1000px) {
  .bk-cel span:first-child { font-size: min(64px, calc(13vw - 6px)); }
  .bk-cel span:nth-child(2), .bk-cel span:last-child { font-size: min(44px, calc(9vw - 4px)); }
}

/* ---- "Ujabb kiszamolokkal jovunk" doboz a bal oszlop aljan --------------
   A jovahagyott ertesito-blokk kisebb, jatekosabb valtozata: a nagy arany
   kerdojel a "kovetkezo kiszamolo" talanyat jelzi. */
.hirlevel.hirlevel-kisz { position: relative; margin: 8px 0 0; padding: 28px 28px 24px; overflow: hidden; }
.hirlevel-kisz .kisz-jel { position: absolute; top: -6px; right: 18px;
  font: 400 96px/1 var(--serif); color: var(--gold); opacity: .35; pointer-events: none; }
.hirlevel-kisz .hirlevel-cim { max-width: 80%; font-size: clamp(24px, 2.2vw, 28px); }
.hirlevel-kisz p.hirlevel-bevezeto { font-size: 15px; }
.hirlevel-kisz .hirlevel-urlap { margin-top: 16px; }
.hirlevel-kisz .hirlevel-mezo { flex: 1 1 200px; height: 48px; padding: 0 14px; }
.hirlevel-kisz .hirlevel-gomb { height: 48px; padding: 0 20px; }
.hirlevel-kisz .hirlevel-lab { font-size: 12px; line-height: 1.5; }
@media (max-width: 620px) {
  .eszkoz-bal > .hirlevel-kisz { order: 6; }
  .hirlevel.hirlevel-kisz { padding: 22px 20px 20px; }
  .hirlevel-kisz .kisz-jel { font-size: 80px; }
}
.tk-eredmeny > .hirlevel-kisz { margin-top: 0; }

/* ---- Kenyerrecept-keszito ---------------------------------------------
   A receptlap a derek-magassag tablazatanak ritmusat koveti: sorok,
   finom elvalaszto vonal, jobbra igazitott, tabularis szamok. */
.kr-blokk { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.kr-blokk + .kr-blokk { margin-top: 20px; }
.kr-blokk h3 { margin: 0 0 4px; font: 400 22px/1.3 var(--serif); color: var(--ink); }
.kr-al { margin: 0 0 12px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.kr-sor { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 12px; align-items: baseline; padding: 10px 0; }
.kr-sor + .kr-sor { border-top: 1px solid var(--line); }
.kr-sor span { min-width: 0; color: var(--ink); font-size: 15px; line-height: 1.4; }
.kr-sor span small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }
.kr-sor strong { color: var(--ink); font: 600 16px/1.3 var(--sans); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-sor em { color: var(--ink-soft); font: 500 13px/1.3 var(--sans); font-style: normal; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-fej span, .kr-fej strong, .kr-fej em { color: var(--ink-soft); font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.kr-sor.kr-ossz { border-top: 2px solid var(--forest); }
.kr-sor.kr-ossz span, .kr-sor.kr-ossz strong { font-weight: 700; }
.kr-jegyzet { margin: 12px 0 0; padding: 12px 14px; background: var(--paper); border-radius: 2px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.kr-ido { display: block; margin-top: 4px; color: #7d6431; font: 700 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.kr-ido + h3 { margin-top: 2px; }
.kr-idoparos { display: flex; align-items: center; gap: 8px; }
.kr-idoparos select { flex: 0 0 96px; }
.kr-idoparos span { color: var(--ink-soft); font-weight: 700; }
.tk-ajanlott strong { color: var(--ink); }
.kr-link { padding: 0; border: 0; background: none; color: var(--forest); font: 600 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kr-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kr-atvisz-doboz .kr-atvisz {
  display: inline-flex; margin-top: 14px; padding: 12px 18px; border-radius: 999px;
  background: var(--forest); color: var(--white) !important; border: 0 !important;
  font: 600 14px/1.2 var(--sans); text-decoration: none;
  transition: background .7s var(--ease-fiok), transform .7s var(--ease-fiok);
}
.kr-atvisz-doboz .kr-atvisz:hover { background: #2a4434; }
.kr-atvisz-doboz .kr-atvisz:active { transform: translateY(1px); }
.kr-atvisz-doboz .kr-atvisz:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.kr-forrasok { padding: 4px 0 0; }
.kr-forrasok p, .kr-forrasok li { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.kr-forrasok ul { margin: 8px 0 0; padding-left: 18px; }
.kr-forrasok a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }
/* Ha nem irhato recept (pl. rozs elesztovel), csak a figyelmeztetes latszik. */
.tk-eredmeny.kr-ures > :not(#riasztas) { display: none; }
@media (max-width: 620px) {
  .kr-blokk { padding: 20px 16px; }
  .kr-sor { grid-template-columns: minmax(0, 1fr) auto 52px; gap: 10px; }
}
/* Kenyerrecept: a lisztek merteke arany (%) vagy gramm */
.kr-valto { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.kr-valto button { padding: 5px 11px; border: 0; background: transparent; color: var(--ink-soft);
  font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: color .3s var(--ease-fiok), background .3s var(--ease-fiok); }
.kr-valto button.on { background: var(--forest); color: var(--white); }
.kr-valto button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tk-lisztek-fej:has(.kr-valto) { align-items: center; }
.tk-mezo label:has(.kr-valto) { align-items: center; }
/* Kenyerrecept: a felretett viz kiemelt sora, hogy ne vesszen el a tablazatban */
.kr-sor.kr-kiemel { margin: 4px 0; padding: 12px 12px 12px 14px; border-top: 0 !important;
  border-left: 4px solid var(--gold); border-radius: 2px; background: rgba(197, 170, 118, .18); }
.kr-sor.kr-kiemel + .kr-sor { border-top: 0; }
.kr-sor.kr-kiemel span { font-weight: 700; }
.kr-sor.kr-kiemel span small { font-weight: 500; color: var(--ink); }
.kr-sor.kr-kiemel strong { color: var(--forest); font-size: 18px; }
/* Az atvivo gomb a kiemelt jegyzet linkszabalyat (feher hatter, 1px 4px) orokolte, ezert
   feher lett feher szoveggel. Erosebb szelektorral a sajat gombstilusa nyer. */
.tk-labjegyzet.tk-kiemelt a.kr-atvisz {
  display: inline-flex; margin-top: 14px; padding: 12px 18px; border: 0; border-radius: 999px;
  background: var(--forest); color: var(--white); font: 600 14px/1.2 var(--sans); text-decoration: none;
}
.tk-labjegyzet.tk-kiemelt a.kr-atvisz:hover { background: #2a4434; color: var(--white); }
.tk-labjegyzet.tk-kiemelt a.kr-atvisz:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Kenyerrecept: a viz grammja kozvetlenul a hidrataltsag mezo alatt */
.kr-vizgramm { margin-top: -6px; color: var(--ink); font-size: 14.5px; }
.kr-vizgramm strong { color: var(--forest); font-size: 16px; }
/* Mobilon a kapcsolo felirata ("arany %") ket sorba tort: a gomb szovege nem torhet. */
.kr-valto { flex: 0 0 auto; }
.kr-valto button { white-space: nowrap; }
/* Kenyerrecept: a receptlap es az orarend kozotti cim */
.kr-folyamat-cim { margin: 12px 0 -4px; color: var(--ink); font: 700 clamp(26px, 2.6vw, 32px)/1.2 var(--serif); letter-spacing: -.01em; }

/* Mizofonia-teszt (MisoQuest): 14 allitas, mindegyik 1-5-os skalan.
   A gomb a valodi radio inputot takarja, igy billentyuzettel is mukodik
   (nyilakkal valt a csoporton belul). */
.mq-utmutato p { margin: 0 0 14px; }
.mq-jelmagyarazat { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none;
  color: var(--ink-soft); font: 400 14px/1.4 var(--sans); }
.mq-jelmagyarazat li { display: flex; align-items: center; gap: 12px; }
.mq-jelmagyarazat b { display: grid; place-items: center; flex: 0 0 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 2px; color: var(--forest); font: 600 13px/1 var(--sans); }
.mq-kerdes { margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--line);
  border-radius: 2px; transition: background .7s var(--ease-fiok), box-shadow .7s var(--ease-fiok); }
.mq-kerdes legend { display: flex; align-items: flex-start; gap: 12px; padding: 0;
  color: var(--ink); font: 500 16px/1.5 var(--sans); }
.mq-sorszam { display: grid; place-items: center; flex: 0 0 28px; height: 28px; margin-top: -1px;
  border-radius: 50%; background: var(--paper-2); color: var(--forest); font: 700 13px/1 var(--sans);
  transition: background .7s var(--ease-fiok), color .7s var(--ease-fiok); }
.mq-kesz .mq-sorszam { background: var(--forest); color: var(--gold); }
.mq-allitas { min-width: 0; text-wrap: pretty; }
.mq-skala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mq-gomb { position: relative; display: block; cursor: pointer; }
.mq-gomb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mq-gomb span { display: grid; place-items: center; height: 48px; border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--ink-soft); font: 600 16px/1 var(--sans);
  transition: color .3s var(--ease-fiok), background .3s var(--ease-fiok), border-color .3s var(--ease-fiok), transform .3s var(--ease-fiok); }
.mq-gomb:hover span { color: var(--forest); border-color: var(--sage); }
.mq-gomb input:active + span { transform: scale(0.98); }
.mq-gomb input:checked + span { color: var(--white); background: var(--forest); border-color: var(--forest); }
.mq-gomb input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.mq-vegek { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  color: var(--ink-soft); font: 400 12px/1.3 var(--sans); }
.mq-hianyzik { background: var(--paper-2); box-shadow: 0 0 0 12px var(--paper-2); }
.mq-hatra { margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font: 500 14px/1.4 var(--sans); }
.mq-urlap .tk-inditas { margin-top: 14px; }
.mq-torles { display: block; margin: 14px auto 0; padding: 4px 8px; border: 0; background: none;
  color: var(--ink-soft); font: 500 13px/1.4 var(--sans); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.mq-torles:hover { color: var(--forest); }
.mq-torles:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.mq-sav { position: relative; overflow: visible; }
.mq-sav span { border-radius: 999px; }
.mq-sav::after { content: ""; position: absolute; left: 83.9%; top: -5px; width: 2px; height: 19px;
  background: var(--ink); }
.mq-skalajel { position: relative; height: 40px; margin-top: 10px; color: var(--ink-soft);
  font: 400 11.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.mq-skalajel span { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.mq-skalajel span:first-child { transform: none; text-align: left; }
.mq-skalajel span:last-child { transform: translateX(-100%); text-align: right; }
.mq-skalajel small { display: block; margin-top: 3px; font-size: 10.5px; }
.mq-skalajel .mq-hatar { color: var(--ink); font-weight: 700; }
.mq-eros { margin: 0; padding-left: 18px; }
.mq-eros li { margin: 6px 0; }
@media (max-width: 620px) {
  .mq-kerdes { padding: 20px 0; }
  .mq-skala { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-kerdes, .mq-sorszam, .mq-gomb span { transition: none; }
}
/* Asztalon az eredmenypanel a kerdesekkel egyutt halad (ragados), igy
   valaszolas kozben is latszik. Alatta kulon sav a reszleteknek, hogy a
   ket oszlop alja egy vonalba keruljon. */
.mq-reszletek { padding-top: 0; }
/* Alacsony kepernyon a panel nem ferne ki ragadosan, ott marad a helyen. */
@media (min-width: 1001px) and (min-height: 780px) {
  .mq-oszlop { align-self: stretch; }
  .mq-panel { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 20px; }
}
@media (max-width: 1000px) {
  .mq-panel { display: flex; flex-direction: column; gap: 20px; }
  .mq-reszletek .eszkoz-bal { display: flex; }
}
/* A body/html overflow-x: hidden gorgetotarolova teszi a body-t, es attol a
   ragados panel nem ragad. A clip ugyanugy levagja az oldalt, de nem hoz
   letre gorgetotarolot. Csak ezen az oldalon. */
html:has(.mq-panel), html:has(.mq-panel) body { overflow-x: clip; }
/* A legend alapbol a fieldset felso keretebe ul, es alatta nagy hezag marad.
   Lebegtetve rendes blokk lesz: a keret vegigfut, a hezag eltunik. */
.mq-kerdes legend { float: left; width: 100%; }
.mq-skala { clear: both; padding-top: 14px; margin-top: 0; }
.mq-panel .tk-savfej strong { white-space: nowrap; }
.mq-panel { display: flex; flex-direction: column; gap: 20px; }
/* A "MisoQuest" hosszabb szo, mint a tobbi eszkoz felirata: keskeny
   kepernyon a 17vw-os meret kitolna a hos oszlopat. */
@media (max-width: 1000px) {
  html:has(.mq-panel) .eszkoz-cel span:first-child { font-size: min(72px, calc(10.5vw - 2px)); }
}
/* Mizofonia-teszt: a keresett kifejezes a MisoQuest ala kerul, ugyanabban a
   verzalis stilusban, a 14 kerdes fole. */
.eszkoz-cel .mq-cel-kw { margin-top: 6px; font-size: min(36px, calc(3.2vw - 3px)); line-height: 1.15; }
@media (max-width: 1000px) {
  .eszkoz-cel .mq-cel-kw { font-size: min(30px, calc(6.4vw - 2px)); }
}
@media (min-width: 1001px) {
  html:has(.mq-panel) .eszkoz-cel span:first-child { font-size: min(84px, calc(7.4vw - 7px)); }
}

/* Mizofonia-teszt: e-mail-kero felugro ablak. Asztalon kozepen, mobilon
   alulrol felcsuszo lap, hogy a gomb huvelykujjnyira legyen. A magassag dvh,
   a gorgetes a dobozon belul marad, a hatteroldal amig nyitva van, all. */
html.mq-zarolt, html.mq-zarolt body { overflow: hidden; }
.mq-panel-gomb { margin-top: 18px; }
.mq-modal { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; padding: 16px; }
.mq-modal-hatter { position: absolute; inset: 0; background: rgba(31, 51, 40, .64);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .5s var(--ease-fiok); }
.mq-modal-doboz { position: relative; width: min(100%, 480px);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 44px 36px 28px; background: var(--paper); border-top: 3px solid var(--gold); border-radius: 4px;
  box-shadow: 0 24px 64px rgba(15, 26, 20, .28);
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .7s var(--ease-fiok), transform .7s var(--ease-fiok); }
.mq-modal.nyitva .mq-modal-hatter { opacity: 1; }
.mq-modal.nyitva .mq-modal-doboz { opacity: 1; transform: none; }
.mq-modal-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-soft); cursor: pointer; transition: background .3s var(--ease-fiok), color .3s var(--ease-fiok); }
.mq-modal-x svg { width: 22px; height: 22px; }
.mq-modal-x:hover { background: var(--paper-2); color: var(--forest); }
.mq-modal-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mq-modal-doboz h2 { margin: 0 0 14px; padding-right: 32px; color: var(--forest);
  font: 400 32px/1.15 var(--serif); text-wrap: balance; }
.mq-modal-szoveg { margin: 0 0 24px; color: var(--ink); font: 400 16px/1.6 var(--sans); text-wrap: pretty; }
.mq-modal-urlap { display: grid; gap: 12px; }
.mq-modal-mezo { width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--white); color: var(--ink); font: 400 16px/1 var(--sans);
  transition: border-color .3s var(--ease-fiok), box-shadow .3s var(--ease-fiok); }
.mq-modal-mezo::placeholder { color: var(--ink-soft); opacity: .7; }
.mq-modal-mezo:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(197, 170, 118, .35); }
.mq-modal-urlap .mq-modal-gomb { margin-top: 0; }
.mq-modal-gomb:disabled { opacity: .7; cursor: progress; }
.mq-modal-valasz { margin: 12px 0 0; color: #8a3d2b; font: 500 14px/1.4 var(--sans); }
.mq-modal-lab { margin: 18px 0 0; color: var(--ink-soft); font: 400 12px/1.5 var(--sans); }
.mq-modal-lab a { color: var(--forest); text-underline-offset: 2px; }
@media (max-width: 620px) {
  .mq-modal { place-items: end center; padding: 0; }
  .mq-modal-doboz { width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    padding: 36px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0; transform: translateY(40px); }
  .mq-modal-doboz h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-modal-hatter, .mq-modal-doboz { transition: none; }
}
/* A hirlevel kulon, alapbol uresen hagyott jelolonegyzet. */
.mq-modal-pipa { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; cursor: pointer;
  color: var(--ink); font: 500 15px/1.4 var(--sans); }
.mq-modal-pipa input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--forest); cursor: pointer; }
.mq-modal-pipa input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mq-modal-pipa span { padding-top: 1px; }
.mq-modal-urlap .mq-modal-gomb { margin-top: 8px; }
.mq-modal-hirlevel { margin: 16px 0 0; color: var(--ink); font: 500 14px/1.5 var(--sans); }
.mq-modal-hirlevel + .mq-modal-lab { margin-top: 8px; }
/* Belso hivatkozas a kiszamolokon is ugyanugy kiemelve, mint a cikkekben:
   papir hatter, felkover, arany also vonal. */
.eszkoz-torzs a[href^="/temak/"]:not([class]), .eszkoz-torzs a[href^="/segitseg/"]:not([class]) {
  background: var(--paper-2); padding: 1px 4px; border-radius: 2px;
  border-bottom: 2px solid var(--gold); font-weight: 700; color: var(--ink);
  text-decoration: none; transition: background .7s var(--ease-fiok);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.eszkoz-torzs a[href^="/temak/"]:not([class]):hover, .eszkoz-torzs a[href^="/segitseg/"]:not([class]):hover { background: #e2dcce; color: var(--ink); }
.eszkoz-torzs a[href^="/temak/"]:not([class]):focus-visible, .eszkoz-torzs a[href^="/segitseg/"]:not([class]):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Papir hatteru dobozban a link feher alapot kap, kulonben beleolvadna. */
.eszkoz-torzs .tk-kiemelt a[href^="/temak/"]:not([class]), .eszkoz-torzs .tk-kiemelt a[href^="/segitseg/"]:not([class]) { background: var(--white); }