/* ══════════════════════════════════════════════════════════════════════
   memoit/mediaplayer — domyślna skórka

   Celowo MONOCHROMATYCZNA. Kolor marki to jeden token: ustaw --mp-accent
   i odtwarzacz jest Twój. Nie ma tu żadnego „firmowego" niebieskiego,
   który trzeba najpierw wyplenić.

   Cały wygląd siedzi w zmiennych --mp-* zadeklarowanych na .mp. Serwis
   nadpisuje je pod własną klasą i NIE RUSZA tego pliku:

       .mp--czarko{
         --mp-accent:#b8341f;
         --mp-bg:#eceae4;
         --mp-radius:0;                 (ostre rogi z wytycznych)
         --mp-font:'Schibsted Grotesk',sans-serif;
       }

   Bez tego arkusza odtwarzacz nadal jest używalny — to zwykłe przyciski,
   suwak i tekst. Arkusz robi z nich pasek, nie warunkuje działania.
   ══════════════════════════════════════════════════════════════════════ */

.mp{
  /* ── kolory ── */
  --mp-bg:        #f3f2f0;
  --mp-surface:   #ffffff;
  --mp-fg:        #17171a;
  --mp-muted:     rgba(23,23,26,.62);
  --mp-accent:    #17171a;            /* celowo atrament, nie kolor */
  --mp-on-accent: #ffffff;
  --mp-line:      rgba(23,23,26,.18);
  --mp-track:     rgba(23,23,26,.14);
  --mp-buffer:    rgba(23,23,26,.3);
  --mp-stage:     #0b0b0d;            /* tło kadru wideo */

  /* ── kształt i rytm ── */
  --mp-font:      system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mp-size:      15px;
  --mp-radius:    2px;
  --mp-gap:       10px;
  --mp-pad:       12px;
  --mp-btn:       40px;               /* cel dotykowy — nie schodzić poniżej 44px z paddingiem */
  --mp-rail:      6px;                /* grubość suwaka */
  --mp-thumb:     14px;
  --mp-ratio:     16 / 9;
  --mp-focus:     3px solid var(--mp-accent);

  display: grid;
  gap: var(--mp-gap);
  font: 400 var(--mp-size)/1.5 var(--mp-font);
  color: var(--mp-fg);
  background: var(--mp-bg);
  padding: var(--mp-pad);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-sizing: border-box;
}
.mp *,
.mp *::before,
.mp *::after{ box-sizing: border-box; }

/* Ciemno, gdy system tak mówi — chyba że serwis wymusił jasność klasą.
   Nadpisujemy WYŁĄCZNIE tokeny, żeby reszta arkusza działała bez zmian. */
@media (prefers-color-scheme: dark){
  .mp:not(.mp--light){
    --mp-bg:        #17161a;
    --mp-surface:   #1f1e23;
    --mp-fg:        #f1efec;
    --mp-muted:     rgba(241,239,236,.62);
    --mp-accent:    #f1efec;
    --mp-on-accent: #17161a;
    --mp-line:      rgba(241,239,236,.2);
    --mp-track:     rgba(241,239,236,.18);
    --mp-buffer:    rgba(241,239,236,.34);
  }
}
.mp--dark{
  --mp-bg:        #17161a;
  --mp-surface:   #1f1e23;
  --mp-fg:        #f1efec;
  --mp-muted:     rgba(241,239,236,.62);
  --mp-accent:    #f1efec;
  --mp-on-accent: #17161a;
  --mp-line:      rgba(241,239,236,.2);
  --mp-track:     rgba(241,239,236,.18);
  --mp-buffer:    rgba(241,239,236,.34);
}

/* ── Kadr ────────────────────────────────────────────────────────────── */

.mp__stage{ position: relative; }

.mp--video .mp__stage,
.mp__stage--frame{
  aspect-ratio: var(--mp-ratio);
  background: var(--mp-stage);
  overflow: hidden;
  border-radius: var(--mp-radius);
}
.mp--video .mp__media,
.mp__frame,
.mp__consent{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mp--video .mp__media{ display: block; background: var(--mp-stage); }

.mp--audio .mp__media{ display: block; width: 100%; }
/* Po przejęciu przez skrypt natywny element audio jest już tylko silnikiem
   dźwięku — pasek rysujemy sami, więc go chowamy. */
.mp--enhanced.mp--audio .mp__media{ display: none; }

/* Okładka przy audio — pokazujemy dopiero, gdy skrypt schował natywny pasek,
   żeby bez JS nie wisiał obrazek nad drugim odtwarzaczem. */
.mp__cover{ display: none; }
.mp--enhanced .mp__cover{
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--mp-radius);
}

.mp__fallback{ margin: 0; padding: var(--mp-pad); color: var(--mp-muted); }

/* ── Bramka zgody przed ramką dostawcy ───────────────────────────────── */

.mp__consent{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mp-pad);
  background: var(--mp-stage);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.mp__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.mp__consent-box{
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  max-width: 46ch;
}
.mp__consent-icon{
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.mp__consent-icon svg{ width: 24px; height: 24px; margin-left: 3px; }
.mp__consent-label{ font-weight: 600; font-size: 1.05em; }
.mp__consent-note{ font-size: .82em; line-height: 1.45; opacity: .82; }
.mp__consent:hover .mp__consent-icon{ background: rgba(255,255,255,.14); }

/* ── Podpis ──────────────────────────────────────────────────────────── */

.mp__head{ display: grid; gap: 2px; }
.mp__title{ margin: 0; font-weight: 600; line-height: 1.3; }
.mp__meta,
.mp__download{ margin: 0; font-size: .85em; color: var(--mp-muted); }
.mp__download a{ color: inherit; }

/* ── Pasek sterowania ────────────────────────────────────────────────── */

.mp__bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
}
/* KONIECZNE: display:flex wygrywa z atrybutem hidden, więc bez tej reguły
   pasek byłby widoczny mimo `hidden` i przy wyłączonym JS stałby martwy
   obok natywnych przycisków. */
.mp__bar[hidden]{ display: none; }

.mp__btn{
  flex: none;
  display: grid;
  place-items: center;
  width: var(--mp-btn);
  height: var(--mp-btn);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--mp-radius);
  color: var(--mp-fg);
  font: inherit;
  cursor: pointer;
}
.mp__btn:hover{ background: var(--mp-track); }
.mp__btn--play{ background: var(--mp-accent); color: var(--mp-on-accent); }
.mp__btn--play:hover{ background: var(--mp-accent); filter: brightness(1.15); }
.mp__btn--speed{ width: auto; min-width: var(--mp-btn); padding: 0 10px; font-size: .85em; font-weight: 600; }

/* Skoki podpisane liczbą („−15 s"), nie strzałką w kółku: strzałka nie mówi
   O ILE przewija, a to jedyna informacja, której się tu szuka. Lekki prostokąt
   trzyma je w jednym języku z wypełnionym przyciskiem odtwarzania. */
.mp__btn--tekst{
  width: auto;
  gap: 6px;
  grid-auto-flow: column;
  padding: 0 12px;
  border: 1px solid var(--mp-line);
  font-size: .82em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mp__btn--tekst:hover{ border-color: var(--mp-fg); background: var(--mp-track); }
.mp__btn--restart svg{ width: 16px; height: 16px; }

/* Na wąskim ekranie „Od początku" zostaje samą ikoną — nazwa i tak jedzie
   w aria-label, więc czytnik ekranu nic nie traci. */
@media (max-width: 620px){
  .mp__btn--restart .mp__btn-tekst{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mp__btn--restart{ padding: 0 10px; }
}

.mp__time{
  flex: none;
  display: flex;
  gap: 4px;
  padding: 0 4px;
  font-size: .85em;
  font-variant-numeric: tabular-nums;
  color: var(--mp-muted);
  white-space: nowrap;
}
.mp__time-now{ color: var(--mp-fg); }

.mp__seek{
  position: relative;
  flex: 1 1 140px;
  min-width: 110px;
  height: var(--mp-btn);
  display: flex;
  align-items: center;
}
.mp__buffer{
  position: absolute;
  left: 0;
  height: var(--mp-rail);
  width: 0;
  background: var(--mp-buffer);
  border-radius: calc(var(--mp-rail) / 2);
  pointer-events: none;
}

.mp__volume{ flex: none; display: flex; align-items: center; gap: 4px; }
.mp__range--volume{ width: 74px; }
@media (max-width: 520px){
  /* Na telefonie głośność jest sprzętowa — suwak tylko zabiera miejsce paskowi. */
  .mp__range--volume{ display: none; }
}

/* ── Suwak: jeden wygląd w obu silnikach ─────────────────────────────── */

.mp__range{
  position: relative;
  flex: 1;
  width: 100%;
  height: var(--mp-btn);
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.mp__range::-webkit-slider-runnable-track{
  height: var(--mp-rail);
  background: var(--mp-track);
  border-radius: calc(var(--mp-rail) / 2);
}
.mp__range::-moz-range-track{
  height: var(--mp-rail);
  background: var(--mp-track);
  border-radius: calc(var(--mp-rail) / 2);
}
.mp__range::-moz-range-progress{
  height: var(--mp-rail);
  background: var(--mp-accent);
  border-radius: calc(var(--mp-rail) / 2);
}
.mp__range::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: var(--mp-thumb);
  height: var(--mp-thumb);
  margin-top: calc((var(--mp-rail) - var(--mp-thumb)) / 2);
  background: var(--mp-accent);
  border: 0;
  border-radius: 50%;
}
.mp__range::-moz-range-thumb{
  width: var(--mp-thumb);
  height: var(--mp-thumb);
  background: var(--mp-accent);
  border: 0;
  border-radius: 50%;
}
/* Webkit nie umie pomalować przebytej części toru, więc robi to gradient
   sterowany zmienną, którą skrypt ustawia przy każdym ruchu. */
@supports not selector(::-moz-range-progress){
  .mp__range::-webkit-slider-runnable-track{
    background: linear-gradient(
      to right,
      var(--mp-accent) 0 var(--mp-played, 0%),
      var(--mp-track)  var(--mp-played, 0%) 100%
    );
  }
}

/* ── Stan i dostępność ───────────────────────────────────────────────── */

.mp__status{
  margin: 0;
  font-size: .85em;
  color: var(--mp-muted);
}
.mp__status[hidden]{ display: none; }
.mp--error .mp__status{ color: #a8321c; }

.mp :focus-visible{ outline: var(--mp-focus); outline-offset: 2px; }
.mp__consent:focus-visible{ outline-offset: -4px; }

.mp--busy .mp__btn--play{ opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce){
  .mp *{ transition: none !important; animation: none !important; }
}

@media print{
  .mp__bar,
  .mp__stage{ display: none; }
}