/*
 * Äänisoitin: yksi toteutus, kaksi sivua.
 *
 * Podcastsivu ja suosikkisivu käyttävät samaa soitinta. Mekanismi on
 * täällä ja soitin.js:ssä, ja Livesuomi_Player on se yksi paikka joka
 * tietää näiden tiedostojen osoitteet.
 *
 * Värit tulevat muuttujista, joten kumpikin sivu antaa oman ihonsa
 * ilman että soitin tietää niistä mitään. Sama kuvio kuin
 * paneeli.css:ssä — ja samasta syystä: kopio olisi ollut viides kerta
 * tässä projektissa kun sama asia on olemassa kahdessa paikassa.
 */

:where(.ls-pod, .ls-favs) {
  --ls-player-bg: #16191d;
  --ls-player-line: #2a3037;
  --ls-player-accent: #0f4c5c;
  --ls-player-fg: #e9edf1;
  --ls-player-dim: #9aa4ae;
}

.ls-player {
  position: sticky;
  bottom: 0;

  /*
   * Kerrosluku tulee paneeli.css:n asteikosta, ei tästä.
   *
   * Tässä luki 20 ja paneelissa 5, eli avattu jaksolista jäi
   * soittimen alle. Kahta lukua eri tiedostoissa ei voi pitää
   * oikeassa järjestyksessä muistamalla — nyt ne ovat vierekkäin
   * yhdessä paikassa ja perusteltuina.
   */
  z-index: var(--ls-z-player, 20);

  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 24px;
  padding: 10px 12px;
  background: var(--ls-player-bg);
  border: 1px solid var(--ls-player-line);
  border-radius: 12px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}

.ls-player[hidden] { display: none; }

/*
 * ISO TOISTOPAINIKE — PIILOSSA LEVEÄLLÄ, NÄKYVISSÄ KAPEALLA.
 *
 * Painike on olemassa peukaloa varten. Työpöydällä on hiiri ja
 * selaimen omat säätimet, eikä kahta toistopainiketta vierekkäin
 * tarvita — se olisi sotkua ilman hyötyä. Kapealla näytöllä tilanne on
 * päinvastainen: selaimen oma painike on noin 20 pikseliä, ja yöllä
 * puoliunessa siihen ei osu.
 *
 * Näkyvyys on siis tahallinen näyttökokorajaus eikä puute.
 */
.ls-player__big { display: none; }

.ls-player__now {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 260px;
}

.ls-player__cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}

.ls-player__cover[hidden] { display: none; }

.ls-player__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ls-player__show {
  font-size: 0.75rem;
  color: var(--ls-player-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-player__title {
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-player__audio {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
}

.ls-player__close {
  appearance: none;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--ls-player-line);
  border-radius: 8px;
  color: var(--ls-player-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.ls-player__close:hover,
.ls-player__close:focus-visible {
  color: var(--ls-player-fg);
  border-color: var(--ls-player-accent);
}

/*
 * Virheilmoitus soittimessa.
 *
 * Vaikeneva soitin on pahin lopputulos: käyttäjä ei tiedä onko vika
 * hänessä, meissä vai jakelijassa. Teksti tulee CSS:stä, koska se on
 * tila eikä sisältöä — JS asettaa vain lipun.
 */
.ls-player[data-ls-virhe="1"] .ls-player__show::after {
  content: " · toistaminen ei onnistunut";
  color: #e0245e;
}

/* --------------------------------------------------------------- kapea */

@media (max-width: 720px) {
  .ls-player {
    flex-wrap: wrap;
    gap: 10px;
  }

  /*
   * 64 PIKSELIÄ, EIKÄ 44.
   *
   * Applen ohje puhuu 44 pisteestä pienimpänä kosketuskohteena, ja se
   * on mitoitettu valveilla olevalle käyttäjälle joka katsoo mihin
   * osuu. Tämä painike painetaan pimeässä, puoliunessa ja usein
   * katsomatta — silloin pienin sallittu ei ole sama asia kuin
   * riittävä. Leveys on kiinteä eikä jousta, koska juuri tämä kohde ei
   * saa kutistua kun nimi on pitkä.
   */
  .ls-player__big {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    order: 1;

    width: 64px;
    height: 64px;
    padding: 0;
    appearance: none;
    border: 1px solid var(--ls-player-accent);
    border-radius: 50%;
    background: var(--ls-player-accent);
    color: #fff;
    cursor: pointer;
  }

  .ls-player__big:focus-visible {
    outline: 2px solid var(--ls-player-fg);
    outline-offset: 2px;
  }

  /*
   * Kolmio ja kaksi palkkia puhtaana CSS:nä, kuten jaksolistan
   * pikkupainikkeessa. Sama kuvakieli molemmissa, eri koko.
   */
  .ls-player__bigicon {
    position: relative;
    width: 26px;
    height: 26px;
  }

  .ls-player__bigicon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 17px;
    border-color: transparent transparent transparent currentColor;
  }

  .ls-player__big.is-playing .ls-player__bigicon::before {
    transform: translate(-50%, -50%);
    border: 0;
    width: 5px;
    height: 22px;
    background: currentColor;
    box-shadow: 10px 0 0 currentColor;
    margin-left: -5px;
  }

  .ls-player__now {
    order: 2;
    flex: 1 1 0;
  }

  /*
   * KANSIKUVA POIS KAPEALTA NÄYTÖLTÄ.
   *
   * Rivillä on 390 pikseliä ja neljä asiaa: iso painike (64),
   * kansikuva (48), teksti ja sulkupainike (44). Jokin niistä joustaa,
   * ja kuva on heikoin — ohjelman nimi lukee vieressä tekstinä, joten
   * kuva ei kerro mitään mitä rivi ei jo sano. Jakson nimi taas on se
   * mitä palkista luetaan.
   */
  .ls-player__cover {
    display: none;
  }

  /*
   * Jakson nimi kahdelle riville yhden sijaan.
   *
   * Yhdelle riville katkaistuna palkissa luki "Jakso 42: Mitä yöllä
   * t…", eikä saman ohjelman jaksoja erota toisistaan alusta — ne
   * eroavat lopusta. Tilaa on pystysuunnassa ilmaiseksi, koska rivin
   * korkeuden määrää 64 pikselin painike.
   */
  .ls-player__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
  }

  /*
   * Sulkupainike kasvaa myös: se on samalla rivillä ison painikkeen
   * kanssa, ja 32 pikselin kohde sen vieressä on juuri se nappi johon
   * osutaan vahingossa kun tarkoitus oli osua toiseen.
   */
  .ls-player__close {
    order: 3;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }

  .ls-player__audio {
    flex: 1 1 100%;
    order: 4;
  }
}