/*
 * Livesuomi – suosikit
 *
 * Kaksi asiaa: sydännappi joka voi olla millä tahansa sivulla, ja
 * suosikkilistaus omalla sivullaan.
 *
 * Muuttujat peritään .ls-live / .ls-tv -lohkoilta kun sydän on niiden
 * sisällä. Suosikkilistaus on oma juurensa, joten se määrittelee omansa —
 * samat arvot, koska paletti on yksi.
 */

/* ------------------------------------------------------------ sydännappi */

.ls-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ls-muted, #9aa3aa);
  cursor: pointer;
  flex: 0 0 auto;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}

.ls-fav:hover,
.ls-fav:focus-visible {
  color: var(--ls-live, #e23744);
  background: var(--ls-card-hover, rgba(255, 255, 255, 0.07));
}

.ls-fav.is-on {
  color: var(--ls-live, #e23744);
}

/*
 * Kumpi sydän näkyy, on luokan asia eikä JS:n vaihtaman kuvan.
 *
 * Symbolin sisällä oleva fill-attribuutti voittaa peritun värin, joten
 * täyttöä ei voi kytkeä päälle tyylitiedostosta — siksi sydämiä on kaksi
 * ja näkyvä valitaan tästä.
 */
.ls-fav__on,
.ls-fav.is-on .ls-fav__off {
  display: none;
}

.ls-fav.is-on .ls-fav__on {
  display: inline;
}

/* Kortin sydän: oikeaan yläkulmaan, kortin päälle. */
.ls-card {
  position: relative;
}

.ls-fav--card {
  position: absolute;
  top: 6px;
  right: 6px;
  /*
   * Kortti on kokonaan linkki, joten sydän on sen päällä. Tausta on
   * himmeä levy, jotta ikoni erottuu myös kuvan päältä.
   */
  background: rgba(10, 13, 15, 0.55);
  backdrop-filter: blur(2px);
}

.ls-fav--card:hover,
.ls-fav--card:focus-visible {
  background: rgba(10, 13, 15, 0.8);
}

/*
 * SYDÄN KERTOO KOHTEENSA KOROSTAMALLA SEN.
 *
 * Kortissa lukee kaksi nimeä: kanavan ja jakson. Sydän koskee kanavaa,
 * mutta nappi yksin ei kerro kumpaa — ja juuri siitä syntyi väärinkäsitys
 * että suosikiksi menisi jakso. Hiirivihje kertoi asian, mutta vasta
 * sekunnin odotuksen jälkeen ja vain hiirellä.
 *
 * Kun sydän on hiiren alla tai kohdistettuna, kanavan nimi korostuu.
 * Vastaus tulee siis samalla hetkellä kun kysymys herää, eikä sitä
 * tarvitse lukea mistään.
 *
 * :has() on tässä oikea työkalu: vaihtoehto olisi JS joka lisää luokan
 * hover-tapahtumasta, eli sama tila kahdessa paikassa.
 */
.ls-card:has(.ls-fav--card:hover) .ls-card__channel,
.ls-card:has(.ls-fav--card:focus-visible) .ls-card__channel {
  color: var(--ls-live, #e23744);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* TV-oppaan kanavaotsikko: sydän otsikon oikeassa reunassa. */
.ls-tv__channel {
  position: relative;
}

.ls-fav--ch {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
}

.ls-fav--chpage {
  margin-left: auto;
  width: 40px;
  height: 40px;
}

/* --------------------------------------------------------------- listaus */

.ls-favs {
  /*
   * --ls-accent tarvitaan, koska TV:n lähdepiste käyttää sitä. Ilman
   * sitä piste piirtyi tummana tummalle eikä näkynyt lainkaan —
   * muuttuja oli määritelty vain .ls-live-lohkossa.
   */
  --ls-accent: #2f7f94;
  --ls-accent-text: #6bb6c8;
  --ls-live: #e23744;
  --ls-bg: #14181b;
  --ls-card: #1c2126;
  --ls-card-hover: #242b31;
  --ls-text: #eef1f2;
  --ls-muted: #9aa3aa;
  --ls-border: #2a3238;
  --ls-radius: 10px;

  /*
   * Paneelin iho. Mekanismi tulee paneeli.css:stä, värit täältä — sama
   * jako kuin podcastsivulla, jotta kaksi sivua käyttää yhtä mekanismia
   * eikä kahta samannäköistä.
   */
  --ls-panel-card: var(--ls-card);
  --ls-panel-open: var(--ls-card-hover);
  --ls-panel-hover: var(--ls-card-hover);
  --ls-panel-line: var(--ls-border);
  --ls-panel-accent: var(--ls-accent);
  --ls-panel-dim: var(--ls-muted);

  color: var(--ls-text);
  font-size: 15px;
  line-height: 1.45;
}

/* Sama kytkin kuin teemassa ja livenäkymässä — ei käyttöjärjestelmästä. */
:root[data-theme="light"] .ls-favs {
  --ls-accent: #0f4c5c;
  --ls-accent-text: #0f4c5c;
  --ls-bg: #ffffff;
  --ls-card: #f7f8f9;
  --ls-card-hover: #eef1f2;
  --ls-text: #1b1f22;
  --ls-muted: #697076;
  --ls-border: #e2e6e8;
}

.ls-favs__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
}

.ls-favs__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  color: var(--ls-muted);
  font-size: 0.875rem;
}

.ls-favs__seenall {
  padding: 3px 10px;
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  background: var(--ls-card);
  color: var(--ls-text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.ls-favs__seenall:hover {
  background: var(--ls-card-hover);
}

.ls-favs__empty {
  padding: 24px 0;
  color: var(--ls-muted);
}

.ls-favs__login {
  color: var(--ls-accent-text);
}

/* Ruudukko tulee .ls-panels-luokasta; tässä ei ole omaa asettelua. */
.ls-favs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------- korttiotsikko */

/*
 * Kortin tausta, reunat ja kulmat tulevat .ls-panel-luokasta. Täällä on
 * enää se mikä on suosikkikortin omaa: tilan värit ja otsikon sisältö.
 */

.ls-fav-row__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  flex: 0 0 auto;
}

.ls-fav-row__logo--empty {
  background: var(--ls-card-hover);
}

/*
 * Teksti kasvaa, jolloin Katso-linkki, sydän ja kolmio jäävät oikeaan
 * reunaan ilman auto-marginaaleja. Kaksi auto-marginaalia samalla
 * rivillä jakaisi vapaan tilan keskenään.
 *
 * display: flex on pakollinen: elementit ovat <span>-elementtejä, koska
 * <summary> ei saa sisältää lohkotason sisältöä.
 */
.ls-fav-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ls-fav-row__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.ls-fav-row__name {
  font-weight: 700;
  color: var(--ls-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-fav-row__source {
  color: var(--ls-muted);
  font-size: 0.75rem;
}

/*
 * Katso-linkki: vain livenä olevassa kortissa, ja tarpeeksi erottuva
 * ettei sitä sekoita kortin avaamiseen. Se on otsikon ainoa kohta joka
 * vie pois sivulta.
 */
.ls-fav-row__go {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ls-live);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ls-fav-row__go:hover,
.ls-fav-row__go:focus-visible {
  filter: brightness(1.12);
  text-decoration: none;
}

.ls-fav--row {
  flex: 0 0 auto;
}

/* Lähdepiste tulee livenäkymän tyyleistä; väli sen ja nimen väliin. */
.ls-fav-row__top .ls-dot {
  margin-left: 2px;
}

.ls-fav-row__badge {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ls-fav-row__badge--live {
  background: var(--ls-live);
  color: #fff;
}

.ls-fav-row__badge--new {
  background: var(--ls-accent-text);
  color: #0b0f11;
}

/*
 * Toinen rivi katkaistaan yhteen riviin.
 *
 * Otsikon tehtävä on vastata kysymykseen "onko täällä jotain", ja
 * vastaus luetaan yhdellä silmäyksellä. Koko teksti on nyt yhden
 * avauksen päässä — se on paneelissa, eikä sitä tarvitse ahtaa tähän.
 */
.ls-fav-row__what {
  display: block;
  color: var(--ls-muted);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Tilan väri kortin reunassa.
 *
 * Tarkennin on .ls-fav-row--x.ls-panel eikä pelkkä .ls-fav-row--x, koska
 * .ls-panel[open] asettaa oman reunavärinsä ja voittaisi muuten
 * tarkkuudessa — avattu live-kortti menettäisi punaisen reunansa juuri
 * silloin kun sitä katsotaan.
 */
.ls-fav-row--live.ls-panel {
  border-color: var(--ls-live);
  box-shadow: inset 3px 0 0 var(--ls-live);
}

.ls-fav-row--new.ls-panel {
  box-shadow: inset 3px 0 0 var(--ls-accent-text);
}

.ls-fav-row--idle .ls-fav-row__logo {
  opacity: 0.75;
}

/* ------------------------------------------------------- avattu paneeli */

.ls-fav-items {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ls-fav-item {
  border-bottom: 1px solid var(--ls-border);
}

.ls-fav-item:last-child {
  border-bottom: 0;
}

/*
 * Nimi ja metatiedot samalle riville: paneelissa on tilaa, koska se on
 * koko ruudukon levyinen. Kapealla näytöllä paneeli on kortin levyinen
 * ja ne palaavat allekkain.
 */
.ls-fav-item__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 8px;
  color: var(--ls-text);
  text-decoration: none;
}

a.ls-fav-item__link:hover,
a.ls-fav-item__link:focus-visible {
  background: var(--ls-card);
  text-decoration: none;
}

.ls-fav-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.ls-fav-item__meta {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--ls-muted);
}

.ls-fav-item__time {
  flex: 0 0 auto;
  padding: 7px 0 7px 4px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ls-muted);
}

/* TV-ohjelmarivi on pelkkää tekstiä: ei linkkiä, siis oma asettelu. */
.ls-fav-item--now,
.ls-fav-item:not(:has(.ls-fav-item__link)) {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 4px;
}

.ls-fav-item--now .ls-fav-item__title {
  font-weight: 600;
}

/*
 * Näkemätön merkitään pisteellä eikä sanalla: kymmenen kertaa "UUSI"
 * peittää sen mitä se korostaa. Piste on rivin alussa, jossa silmä
 * kulkee muutenkin.
 */
.ls-fav-item__dot {
  flex: 0 0 auto;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ls-accent-text);
}

.ls-fav-item--new .ls-fav-item__title {
  font-weight: 600;
  color: var(--ls-text);
}

.ls-fav-item__tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ls-card-hover);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ls-muted);
}

.ls-fav-item__tag--live {
  background: var(--ls-live);
  color: #fff;
}

.ls-fav-item__viewers {
  color: var(--ls-live);
  font-weight: 600;
}

.ls-fav-item__dur {
  font-variant-numeric: tabular-nums;
}

.ls-fav-items__empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--ls-muted);
  font-size: 0.8125rem;
}

.ls-fav-items__link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 12px 12px;
  font-size: 0.78rem;
}

.ls-fav-items__link a {
  color: var(--ls-muted);
  text-decoration: none;
}

.ls-fav-items__link a:hover,
.ls-fav-items__link a:focus-visible {
  color: var(--ls-text);
  text-decoration: underline;
}

.ls-fav-items__seen {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ls-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.ls-fav-items__seen:hover {
  color: var(--ls-text);
  border-color: var(--ls-accent);
}

/* --------------------------------------------------------------- mobiili */

@media (max-width: 720px) {
  /* Kortin levyisessä paneelissa nimi ja metatiedot eivät mahdu rinnan. */
  .ls-fav-item__link {
    flex-wrap: wrap;
  }

  .ls-fav-item__title {
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  .ls-fav-row__head {
    padding: 8px 10px;
    gap: 10px;
  }

  .ls-fav-row__logo {
    width: 32px;
    height: 32px;
  }

  /* Sormenpää on leveämpi kuin hiiren kärki. */
  .ls-fav {
    width: 40px;
    height: 40px;
  }
}