/* ------------------------------------------------------------------ *
 *  TESTTÉRKÉP – „hol fáj?”
 *
 *  Önálló fájl, mert több oldal is használja: a „Miben segítek”
 *  oldal és a próbaoldal is ezt tölti be.
 * ------------------------------------------------------------------ */

/* ================================================================== *
 *  TESTTÉRKÉP – „hol fáj?”
 * ================================================================== */
.testterkep {
  display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 24px;
  align-items: start; margin: 22px 0;
}
.tt-abra { text-align: center; }
.tt-abra svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.tt-felirat { margin: 0 0 8px; font-size: 13px; color: var(--soft); }

/* A fej, a karok töve és a segédvonalak – nem választhatók. */
.tt-alap { fill: var(--line); }
.tt-alap path[d*="M110 240"] { stroke: var(--line); stroke-width: 2; fill: none; }
.tt-gerinc rect { fill: var(--bg); opacity: .22; }
.tt-gerinc { pointer-events: none; }

/* A választható testrészek. */
.tt-regio path {
  fill: var(--line);
  stroke: var(--bg); stroke-width: 1.5;
  transition: fill .2s ease;
}
.tt-regio { cursor: pointer; outline: none; }
@media (hover: hover) {
  .tt-regio:hover path { fill: var(--accent-wash); }
}
.tt-regio:focus-visible path { fill: var(--accent-wash); }
.tt-regio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tt-regio.valasztott path { fill: var(--accent); }

/* A lista. */
.tt-panel {
  /* A lista ragad a nézethez: az ábra magas, és ha a látogató legörget a
     sarokig, a panel akkor is a szeme előtt marad. A 96 px a ragadós
     fejléc alatti hely. */
  position: sticky; top: 96px;
  /* A legnagyobb lista öt tételes. Ekkora helyet tartunk fenn neki, hogy
     a doboz ne ugráljon, amikor rövidebb listára vált. */
  min-height: 340px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--raised); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
}
.tt-panel h3 { margin: 0 0 5px; font-size: 21px; }
.tt-panel .tt-ures { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.6; }
.tt-panel .tt-vezeto { margin: 0 0 12px; font-size: 15px; color: var(--soft); }
.tt-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tt-panel li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 10px; text-decoration: none;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font-size: 16.5px; font-weight: 600;
  transition: border-color .2s, transform .2s, background-color .2s;
}
.tt-panel li a::after { content: '→'; color: var(--accent); font-weight: 400; }
@media (hover: hover) {
  .tt-panel li a:hover { border-color: var(--accent); background: var(--accent-wash); transform: translateX(3px); }
}
.tt-panel li a:active { transform: translateX(3px) scale(.99); }

/* Megjelenéskor lágyan felúszik. */
.tt-panel.friss ul li {
  opacity: 0; transform: translateY(6px);
  animation: tt-be .32s cubic-bezier(.2,.8,.3,1) forwards;
}
.tt-panel.friss ul li:nth-child(1) { animation-delay: .02s; }
.tt-panel.friss ul li:nth-child(2) { animation-delay: .08s; }
.tt-panel.friss ul li:nth-child(3) { animation-delay: .14s; }
.tt-panel.friss ul li:nth-child(4) { animation-delay: .20s; }
@keyframes tt-be { to { opacity: 1; transform: none; } }

/* Telefonon az ábra fölül, a lista alatta – és nagyobb célpontok. */
@media (max-width: 700px) {
  .testterkep { grid-template-columns: 1fr; gap: 16px; }
  .tt-abra svg { max-width: 220px; }
  .tt-panel { min-height: 0; }
  .tt-panel li a { padding: 13px 14px; }
}

/* A felkar a kar-régió része. Ha a könyököt emeljük ki, a felkar is
   vele világít, csak halványabban – így látszik, mi a fő és mi a
   hozzá tartozó rész. */
.tt-regio path.felkar { transition: fill .2s ease; }
.tt-regio path.felkar.kiserve { fill: var(--accent-wash); }

/* ---------- A CC0 alakrajzos változat ---------- */
.tt-alap-test { fill: var(--line); }
.tt-regio rect { fill: var(--line); transition: fill .2s ease; }
.tt-regio:not(.valasztott) rect { fill: var(--line); }
@media (hover: hover) { .tt-regio:hover rect { fill: var(--accent-wash); } }
.tt-regio.valasztott rect { fill: var(--accent); }
.tt-regio rect.felkar.kiserve { fill: var(--accent-wash); }
.tt-forras { margin: 8px 0 0; font-size: 11.5px; color: var(--soft); }
.tt-forras a { color: inherit; }

/* ---------- Érintéshez nagyobb célterületek ---------- */
/* Láthatatlanok, de fogják a koppintást: a kis testrészeket (nyak, váll,
   könyök, térd, sarok) így ujjal is el lehet találni. */
.tt-celok rect { fill: transparent; cursor: pointer; }

/* ---------- Bezáró gomb: csak a lebegő panelen kell ---------- */
.tt-bezar { display: none; }

@media (max-width: 700px) {
  /* A lista alulról úszik fel, az ábra fölé – ahogy a telefonos
     alkalmazások csinálják. Így a lista rögtön olvasható, az ábra pedig
     közben végig látszik: tudni lehet, melyik testrész van kiválasztva. */
  .testterkep .tt-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0; border-radius: 18px 18px 0 0;
    border: 1px solid var(--line); border-bottom: none;
    max-height: 56vh; overflow-y: auto;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .34);
    transform: translateY(102%);
    transition: transform .32s cubic-bezier(.2, .85, .3, 1);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .testterkep .tt-panel.nyitva { transform: none; }

  /* A csukott panel ne fogja el a koppintást az ábráról. */
  .testterkep .tt-panel:not(.nyitva) { pointer-events: none; }

  /* Amíg nem választott semmit, a kezdő mondat az ábra alatt marad. */
  .testterkep .tt-panel.kezdo {
    position: static; transform: none; max-height: none; box-shadow: none;
    border-radius: var(--radius); border-bottom: 1px solid var(--line);
    pointer-events: auto; padding-bottom: 16px;
  }

  .tt-bezar {
    display: block; position: absolute; top: 10px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--soft);
    font-size: 15px; line-height: 1;
  }
  .testterkep .tt-panel.kezdo .tt-bezar { display: none; }

  /* Hely a panelnek, hogy ne takarja ki a lábat. */
  .testterkep .tt-panel.nyitva ~ * { padding-bottom: 0; }
}

/* A koppintás azonnal hasson: ne várjon a böngésző arra, hogy
   duplakoppintás lesz-e belőle (az régen 300 ms késleltetést jelentett). */
.testterkep svg, .tt-regio, .tt-celok rect { touch-action: manipulation; }

/* ---------- Szöveges lista a térkép alatt ---------- */
/* Csak ott jelenik meg, ahol a térkép a panaszlistát váltja ki. A
   kereső így is megtalálja a hivatkozásokat, és aki inkább olvasna,
   mint bökdösne, az is. */
.tt-szoveges {
  margin: 10px 0 0;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.tt-szoveges summary {
  cursor: pointer; font-size: 17px; font-weight: 600; color: var(--soft);
  padding: 5px 0; list-style: none;
}
.tt-szoveges summary::-webkit-details-marker { display: none; }
.tt-szoveges summary::before { content: '▸ '; color: var(--accent); }
.tt-szoveges[open] summary::before { content: '▾ '; }
.tt-szoveges summary:hover { color: var(--accent); }
.tt-szoveges ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.tt-szoveges li { font-size: 15px; line-height: 1.65; color: var(--soft); }
.tt-szoveges li strong { color: var(--ink); font-weight: 600; }
.tt-szoveges a { color: var(--accent); text-decoration: none; }
.tt-szoveges a:hover { text-decoration: underline; }
@media (min-width: 701px) {
  .tt-szoveges ul { grid-template-columns: repeat(2, 1fr); gap: 7px 24px; }
}