/*
 * slitspace-player.css — a bemutató-lejátszó megjelenése (V61/2)
 *
 * Szándékosan visszafogott és semleges, hogy illeszkedjen a slitspace
 * honlap minimalista arculatához. Minden méret relatív, tehát mobilon is
 * használható. A színek CSS-változóból jönnek, így a befogadó oldal
 * felülírhatja őket saját arculatra.
 */
.slitspace-player {
  --ssp-hatter: #0b0b10;
  --ssp-elem: #16161f;
  --ssp-szoveg: #e8e8ee;
  --ssp-halvany: #8b8b9c;
  --ssp-kiemeles: #78ffbe;
  --ssp-keret: rgba(255, 255, 255, 0.10);

  display: block;
  max-width: 100%;
  margin: 0 auto;
  color: var(--ssp-szoveg);
  background: var(--ssp-hatter);
  border: 1px solid var(--ssp-keret);
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* V59_4: hangszínválasztó a csatorna-sávban — csak teljes keverő módban. */
.slitspace-player .ssp-csat-valaszto {
  /* Nőjön ki a rendelkezésre álló helyre, de ~7rem alá ne szoruljon —
     ott inkább törjön új sorba (lásd a `.ssp-csat` tördelését). */
  flex: 1 1 7rem;
  min-width: 0;
  font: inherit;
  font-size: .72rem;
  padding: .15rem .25rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
}

/* V59_4: csatorna-csúszkák (hangerő, panoráma) — csak teljes keverő módban
   épülnek fel, a webes csomagban nem jelennek meg. */
.slitspace-player .ssp-csat-csuszka {
  width: 100%;
  min-width: 60px;
  accent-color: currentColor;
  cursor: pointer;
}

/* ── V59_4: OSZTOTT ELRENDEZÉS ──────────────────────────────────────────
   Bal oldalt a kép, jobb oldalt a vezérlők. Keskeny képernyőn (telefon,
   szűk beágyazás) egymás alá kerülnek, mert két oszlop ott olvashatatlan. */
.slitspace-player .ssp-oszlopok {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.slitspace-player .ssp-bal {
  flex: 1 1 58%;
  min-width: 0;
}

.slitspace-player .ssp-jobb {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

@media (max-width: 700px) {
  .slitspace-player .ssp-oszlopok { flex-direction: column; }
  .slitspace-player .ssp-bal,
  .slitspace-player .ssp-jobb { flex: 1 1 auto; width: 100%; }
}

/* A kép és a fölé rajzolt mozgó fej közös doboza.

   A doboz a KÉPHEZ zsugorodik (`width: fit-content`), és nem fordítva.
   Ez azért kell, mert a mozgó fejet rajzoló vászon és a kattintás-
   leképezés is a KÉP téglalapjából számol (`kep.getBoundingClientRect()`):
   ha a doboz szélesebb maradna a képnél, a fej elcsúszna a képtől. */
.slitspace-player .ssp-kep-doboz {
  position: relative;
  line-height: 0;
  cursor: crosshair;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* A kép MINDIG elfér: a természetes méretéből indulunk, és mindkét irányban
   korlátozzuk — így az arány sosem torzul. A magassági korlát változóból
   jön, hogy a weboldal és az alkalmazás külön hangolható legyen.

   A nagy, generált képeknél ez nem látható változás: azok szélesebbek a
   doboznál, tehát a `max-width` ugyanúgy leskálázza őket, mint korábban a
   `width: 100%`. Cserébe a MAGAS képek (pl. 5120x6144) végre elférnek. */
.slitspace-player {
  --ssp-kep-max-h: 85vh;
}

.slitspace-player .ssp-kep {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--ssp-kep-max-h);
  user-select: none;
  -webkit-user-drag: none;
}

/* A mozgó fejet rajzoló réteg — soha ne fogja el a kattintást */
.slitspace-player .ssp-vaszon {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slitspace-player .ssp-vezerlok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.slitspace-player .ssp-gomb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ssp-keret);
  background: var(--ssp-elem);
  color: var(--ssp-szoveg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.slitspace-player .ssp-gomb:hover { background: #1f1f2b; }
.slitspace-player .ssp-gomb:focus-visible {
  outline: 2px solid var(--ssp-kiemeles);
  outline-offset: 2px;
}

.slitspace-player .ssp-csuszka { flex: 1 1 160px; min-width: 120px; }
.slitspace-player .ssp-hangero { flex: 0 1 90px; }

.slitspace-player input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #2a2a38;
  cursor: pointer;
}
.slitspace-player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ssp-kiemeles);
  border: none;
  cursor: pointer;
}
.slitspace-player input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ssp-kiemeles);
  border: none;
  cursor: pointer;
}

.slitspace-player .ssp-ido {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ssp-halvany);
  min-width: 84px;
  text-align: center;
}

/* ── V61/4: élő vezérlők (tempó, hangnem) ─────────────────────────────── */
.slitspace-player .ssp-elo {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.slitspace-player .ssp-elo-elem {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 180px;
}

.slitspace-player .ssp-elo-cimke {
  font-size: 12px;
  color: var(--ssp-halvany);
  flex: 0 0 auto;
  min-width: 52px;
}

.slitspace-player .ssp-elo-csuszka { flex: 1 1 auto; min-width: 60px; }

/* ── KAPCSOLÓ-SOR a jobb oszlopban (V59_5 / S13) ──────────────────────────
   Ezek NEM a vízszintes `.ssp-elo` sorban élnek, hanem közvetlenül a jobb
   oszlopban, ami FÜGGŐLEGES flex-tároló. Ezért nem viselhetik az
   `.ssp-elo-elem` osztályt: ott a `flex: 1 1 200px` a főtengelyen mér, ami
   függőleges tárolóban a MAGASSÁG — egyetlen kapcsoló 200 pixel magas dobozt
   kapott, a felirattal középen, alatta-fölötte nagy üres sávval. A
   `flex: 0 0 auto` a tartalom magasságát adja. */
.slitspace-player .ssp-kapcsolo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ssp-halvany);
  cursor: pointer;
}

.slitspace-player .ssp-kapcsolo input { flex: 0 0 auto; margin: 0; }
.slitspace-player .ssp-kapcsolo .ssp-elo-cimke { min-width: 0; }

.slitspace-player .ssp-elo-ertek {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ssp-szoveg);
}

/* ── V61/4: csatorna-sáv (némítás / szóló) ────────────────────────────── */
.slitspace-player .ssp-csatornak {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.slitspace-player .ssp-csat {
  display: flex;
  align-items: center;
  /* V59_5 / S7: TÖRDELÉS. A weblapon a csatorna-sávba két választó kerül
     (hullámforma + forrás), a keverőben pedig négy elem is — a jobb oszlop
     viszont keskeny (42%). Tördelés nélkül a `flex` addig nyomná össze
     őket, amíg olvashatatlanná válnak; így inkább új sorba kerülnek. */
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--ssp-keret);
  border-radius: 999px;
  background: var(--ssp-elem);
}

.slitspace-player .ssp-csat-nev {
  font-size: 12px;
  color: var(--ssp-szoveg);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slitspace-player .ssp-csat-gomb {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ssp-keret);
  background: transparent;
  color: var(--ssp-halvany);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.slitspace-player .ssp-csat-gomb:hover { color: var(--ssp-szoveg); }
.slitspace-player .ssp-csat-gomb.ssp-aktiv {
  background: var(--ssp-kiemeles);
  color: #06281c;
  border-color: transparent;
  font-weight: 600;
}
.slitspace-player .ssp-csat-gomb:focus-visible {
  outline: 2px solid var(--ssp-kiemeles);
  outline-offset: 2px;
}

.slitspace-player .ssp-allapot {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ssp-halvany);
  line-height: 1.4;
}

.slitspace-player.ssp-hiba .ssp-allapot { color: #ff8080; }

/* Világos befogadó oldalhoz: elég a változókat felülírni.
   Példa:
     .slitspace-player { --ssp-hatter:#fff; --ssp-szoveg:#111;
                         --ssp-elem:#f2f2f5; --ssp-keret:rgba(0,0,0,.12); }
*/

@media (max-width: 480px) {
  .slitspace-player { padding: 8px; }
  .slitspace-player .ssp-ido { min-width: 72px; font-size: 12px; }
}

/* ── V59_5 / S3: PARAMÉTER-PANEL ──────────────────────────────────────────
   A jobb oldali szonifikációs panel teljes készlete a keverőpulton. Csak a
   programbeli csomagnál épül fel (a webesben nincs `kevero.parameterek`),
   ezért ez a szabálykészlet a weblapon soha nem hat semmire. */
.slitspace-player .ssp-parameterek {
  margin-top: 12px;
  border-top: 1px solid currentColor;
  padding-top: 8px;
  max-height: 42vh;
  overflow-y: auto;
}

.slitspace-player .ssp-par-fejlec {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ssp-halvany);
  margin-bottom: 6px;
}

.slitspace-player .ssp-par-csoport { margin-bottom: 2px; }

.slitspace-player .ssp-par-cim {
  font-size: 12px;
  cursor: pointer;
  padding: 3px 0;
  color: var(--ssp-halvany);
  list-style: none;
}

.slitspace-player .ssp-par-cim::before { content: '▸ '; }
.slitspace-player details[open] > .ssp-par-cim::before { content: '▾ '; }

.slitspace-player .ssp-par-elem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 2px 14px;
}

.slitspace-player .ssp-par-cimke {
  font-size: 12px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Csak a kiírt fájlra ható mezők halványabbak — élőben nem hallhatók. */
.slitspace-player .ssp-par-export .ssp-par-cimke { opacity: .6; font-style: italic; }

.slitspace-player .ssp-par-szam,
.slitspace-player .ssp-par-valaszto {
  font: inherit;
  font-size: .72rem;
  padding: .15rem .25rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 4px;
  flex: 0 0 auto;
  max-width: 46%;
}

.slitspace-player .ssp-par-szam { width: 92px; }
.slitspace-player .ssp-par-kapcsolo { flex: 0 0 auto; }