/* LogopédiApp — demó oldal (demo.html). Csak a demóra vonatkozik. */

/* A demóban alapból MINDEN feladat-szekció rejtett, és csak az aktív látszik.
   Azért megengedő (és nem tiltó) a szabály, mert az app.js a szerkesztőből
   jövő 339 feladatot aszinkron szúrja be: tiltó jelöléssel ezek a beszúrás és
   a JS reakciója közti pillanatban láthatóak voltak — élesben egy 250 000 px
   magas lapot mértünk. Megengedő jelöléssel rejtetten születnek. */
body.demo-mode main.stage > section:not(.demo-on) { display: none !important; }
body.demo-mode .demo-off { display: none !important; }

/* Semmi ne lógjon ki vízszintesen. */
body.demo-mode { overflow-x: hidden; }
body.demo-mode main.stage { max-width: 100%; }
body.demo-mode main.stage > section { max-width: 100%; }

/* Alsó lapozósáv */
.demo-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 24px rgba(40, 30, 70, 0.18);
  backdrop-filter: blur(8px);
  max-width: calc(100vw - 24px);
}
.demo-nav-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #d9d2f5;
  background: #fff;
  color: #4b3f8f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.demo-nav-btn:disabled { opacity: 0.35; cursor: default; }
.demo-nav-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.demo-nav-title {
  font-weight: 700;
  font-size: 13px;
  color: #3a3160;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-nav-indicator { font-size: 12px; color: #7a72a0; }

/* Hely az alsó sávnak */
body.demo-mode main.stage { padding-bottom: 96px; }

/* A fejléc kompakt lapozója a demóban mindig látszik */
body.demo-mode .demo-compact-header { display: flex; }

/* --- Mobil: a kártyafeliratok ne vágódjanak el --- */
@media (max-width: 640px) {
  body.demo-mode .art-lip-text-card,
  body.demo-mode .tongue-card {
    min-height: 0;
  }
  body.demo-mode .art-lip-text-card .art-lip-text-caption,
  body.demo-mode .art-lip-text-card figcaption,
  body.demo-mode .tongue-card .tongue-copy {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    display: block;
  }
}

/* ------------------------------------------------------------------
   Mobil (≤700px): a „képernyőre zsugorító” rács helyett természetes,
   görgethető lista. Az éles appban ez a méretezés azért van, hogy a
   kivetítőn egy képernyőre férjen minden — telefonon viszont emiatt
   vágódik el a szöveg. A demóban telefonon ezt kikapcsoljuk.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  body.demo-mode [data-testid="task-art-tongue-pages"] .art-lip-page:not([hidden]),
  body.demo-mode [data-testid="task-art-lip-pages"] .art-lip-page:not([hidden]),
  body.demo-mode [data-testid="task-art-blow-suck-pages"] .art-lip-page:not([hidden]) {
    display: block !important;
    height: auto !important;
    max-height: none !important;
  }

  body.demo-mode [data-testid="task-art-tongue-grid"],
  body.demo-mode [data-testid="task-art-lip-grid"],
  body.demo-mode [data-testid="task-art-blow-suck-grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    gap: 12px !important;
  }

  body.demo-mode .art-lip-page .tongue-card.art-lip-text-card {
    display: grid !important;
    grid-template-columns: 42% 1fr !important;
    align-items: center !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  body.demo-mode .art-lip-page .art-lip-text-card .art-lip-visual {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  body.demo-mode .art-lip-page .art-lip-text-card .art-lip-text-copy {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.demo-mode .art-lip-page .art-lip-text-card .tongue-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    overflow: visible !important;
  }

  body.demo-mode .art-lip-page .art-lip-text-card .art-lip-confirm {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  body.demo-mode .art-lip-page .art-lip-text-card { position: relative !important; }
}

/* A demóban a nyelvgyakorlatokból csak egy oldal látszik, így a
   kategória- és oldalváltó nem kell (Niki: „nem akarom az összes oldalt”). */
body.demo-mode [data-testid="task-art-lip-tongue-subnav"],
body.demo-mode [data-testid="task-art-tongue-page-nav"],
body.demo-mode .task-art-lip-tongue-heading-row .art-lip-page-nav {
  display: none !important;
}

/* A pipa gomb ne takarja a szöveget mobilon. */
@media (max-width: 700px) {
  body.demo-mode .art-lip-page .art-lip-text-card .art-lip-text-copy {
    padding-right: 34px !important;
  }
}

@media (max-width: 700px) {
  /* 11.a: a hosszú feliratok ne lógjanak ki a kártyából */
  body.demo-mode [data-testid="task-11a"] .task-11a-card,
  body.demo-mode [data-testid="task-11a"] figcaption,
  body.demo-mode [data-testid="task-11a"] .task-11a-label {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  /* A feladat-címke („2. feladat”) ne vágódjon el a szekció tetején */
  body.demo-mode main.stage > section { overflow: visible !important; }
  body.demo-mode .section-kicker { white-space: nowrap; }

  /* Hely az alsó lapozósávnak. 120px volt; a sáv ~70px, és minden fölösleges
     képpont a zoomos illesztés ellen dolgozik, ezért szűkebb. */
  body.demo-mode main.stage { padding-bottom: 84px !important; }
}

@media (max-width: 700px) {
  /* 11.a: 5 oszlop helyett 3 egyenlő oszlop — így semmi nem lóg ki */
  body.demo-mode [data-testid="task-11a"] .actions-pool {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.demo-mode [data-testid="task-11a"] .actions-pool > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ==================================================================
   Instrukció előtérben, ablakban  (Hris, 2026-11-13)
   ------------------------------------------------------------------
   A feladatra lépve a magyarázat előtérben jelenik meg; a „Kezdjük!”
   után eltűnik, és a feladat kapja a teljes képernyőt. Telefonon ez
   adja a helyet ahhoz, hogy a feladat egy oldalba férjen.
   ================================================================== */

.demo-instr-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(32, 24, 60, 0.55);
  backdrop-filter: blur(3px);
}
.demo-instr-overlay[hidden] { display: none; }

.demo-instr-dialog {
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow: 0 18px 60px rgba(30, 20, 60, 0.35);
  text-align: left;
  animation: demo-instr-in 180ms ease-out;
}
@keyframes demo-instr-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-instr-dialog { animation: none; }
}

.demo-instr-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #2f8f5b;
  background: #e8f7ee;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.demo-instr-kicker[hidden] { display: none; }

.demo-instr-title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.25;
  color: #2e2554;
}
.demo-instr-text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #4a4470;
}
.demo-instr-text[hidden] { display: none; }

.demo-instr-ok {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 14px;
  background: #ff8a3d;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 138, 61, 0.38);
}
.demo-instr-ok:hover { background: #f97d2c; }
.demo-instr-ok:focus-visible { outline: 3px solid #2e2554; outline-offset: 2px; }

/* Amíg az ablak nyitva, a háttér ne görögjön. */
body.demo-instr-open { overflow: hidden; }

/* A „ⓘ” gomb: újraolvasás. */
.demo-nav-btn--info {
  width: 36px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------
   A „Kezdjük!” után: a lapon lévő magyarázat elrejtve — az ablakban
   már elolvasták, és a ⓘ gombbal bármikor újra előhívható.
   ------------------------------------------------------------------ */
body.demo-mode .demo-instr-done .section-heading p,
body.demo-mode .demo-instr-done .task-header .task-instr { display: none !important; }

@media (max-width: 700px) {
  /* Telefonon az egész fejléc elmegy: a címet az alsó sáv és a fejléc
     kompakt lapozója is mutatja, tehát nem vész el információ. */
  body.demo-mode .demo-instr-done .section-heading,
  body.demo-mode .demo-instr-done .task-header { display: none !important; }
}

/* ------------------------------------------------------------------
   Mobil: egy képernyő, görgetés nélkül.
   A `demo-fitted` osztályt a demo-boot.js teszi fel, ha a feladat a
   `zoom`-mal tényleg belefért — csak ilyenkor tiltjuk a görgetést, hogy
   a padlóra futó (nagyon magas) feladat továbbra is elérhető maradjon.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  body.demo-mode.demo-fitted { overflow-y: hidden; }
  body.demo-mode.demo-fitted main.stage { padding-bottom: 8px !important; }

  /* A nyelvgyakorlat-rács két hasáb a demóban.
     A fenti, korábbi szabály egyhasábos, GÖRGETHETŐ listát csinált belőle —
     az a megközelítés a görgetésre épült. Most a cél az egy képernyő, és a
     zoomos illesztés gondoskodik arról, hogy a szöveg ne vágódjon el, ezért
     két hasábbal indulunk: így feleannyi a magasság, és a zoom sem megy a
     padlóig. (Nem a .demo-fitted-hez kötjük, mert az csak az illesztés
     EREDMÉNYE — tyúk-tojás lenne.) */
  body.demo-mode [data-testid="task-art-tongue-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Pontosan az az elem, amiből az instrukciós ablak olvasott. Azért kell külön
   jelölés, mert a fejléc helye feladatonként más: a 2. feladatnál egy KÜLÖN
   szekció (.r-choice-heading), máshol a feladaton belüli .section-heading
   vagy .task-header. */
body.demo-mode .demo-instr-source p,
body.demo-mode .demo-instr-source .task-instr { display: none !important; }

@media (max-width: 700px) {
  body.demo-mode .demo-instr-source { display: none !important; }
}