/* ==========================================================================
     Аудиоплеер — переменные и базовая стилизация
   - Переменные (light/dark)
   - Карточка и строка
   - Порядок элементов в широкой строке
   - Разрыв строки для узкого вида
   - Кнопки и слайдеры
   - Меню скорости (зелёная палитра в стиле плеера)
   - Контейнерные запросы и медиазапросы на узкие ширины
   ========================================================================== */
:root {
  --ap-track:            #e5e7eb;
  --ap-progress-accent:  #184635;
  --ap-volume-accent:    #184635;
  --ap-thumb-border:     #000;
  --ap-card-border:      rgba(0, 0, 0, .08);
  --ap-gap:              .75rem;
  --ap-menu-bg:          #dcfce7;               /* светло-зелёный (как у карточки) */
  --ap-menu-border:      #166534;               /* тёмно-зелёный обводки */
  --ap-menu-text:        #064e3b;               /* тёмно-зелёный текст */
  --ap-menu-hover:       rgba(22, 101, 52, 0.08);
  --ap-menu-active:      rgba(22, 101, 52, 0.16);
}

html.dark {
  --ap-track:            #1f2937;
  --ap-progress-accent:  #dcfce7;
  --ap-volume-accent:    #dcfce7;
  --ap-thumb-border:     #fff;
  --ap-card-border:      rgba(255, 255, 255, .15);
  --ap-menu-bg:          rgba(40, 80, 54, 0.5);  /* полупрозрачный светло-зелёный */
  --ap-menu-border:      #dcfce7;
  --ap-menu-text:        #dcfce7;
  --ap-menu-hover:       rgba(220, 252, 231, 0.12);
  --ap-menu-active:      rgba(220, 252, 231, 0.18);
}

/* Карточка — реагируем на ЕЁ ширину (если поддерживаются container queries) */
.ap-card {
  position: relative;
  overflow: visible;
  border: 1px solid var(--ap-card-border);
  border-radius: .75rem;
  color: inherit;
  container-type: inline-size;
}

/* Базовая строка */
.ap-row {
  display: flex !important;        /* перебиваем grid/tailwind при необходимости */
  align-items: center;
  gap: var(--ap-gap);
  flex-wrap: wrap;                 /* разрешаем переносы */
  white-space: normal !important;  /* перебиваем .whitespace-nowrap */
}

/* Порядок ШИРОКО (одна строка) */
.ap-play      { order: 0; flex: 0 0 auto; }
.ap-progress  { order: 1; flex: 1 1 320px; min-width: 220px; min-inline-size: 0; }
.ap-time      { order: 2; flex: 0 0 auto; white-space: nowrap; width: 96px; text-align: right; }
.ap-volwrap   { order: 3; flex: 0 0 auto; position: relative; }
.ap-speedwrap { order: 4; flex: 0 0 auto; position: relative; }

/* Жёсткий «разрыв» второй строки — включим в узком виде */
.ap-row::after {
  content: "";
  display: none;
  width: 100%;
  height: 0;
  flex-basis: 100%;
  order: 2;
}

/* Play — всегда круглая и не сплющивается */
.ap-play .ap-btn {
  width: clamp(36px, 8vw, 44px);
  height: clamp(36px, 8vw, 44px);
  min-width: 36px;
  min-height: 36px;
  border-radius: 9999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  color: inherit;
}

/* Общий стиль кнопок */
.ap-btn {
  border: 1px solid currentColor;
  color: inherit;
  opacity: .95;
  border-radius: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}

.ap-btn:hover { opacity: 1; }


/* ── СЛАЙДЕРЫ ─────────────────────────────────────────────────────────────── */
.ap-range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  outline: none;
  background: var(--ap-track);
}

/* Длительность — заливка по --ap-progress (в %) */
.ap-progress {
  background: linear-gradient(
    to right,
    var(--ap-progress-accent) var(--ap-progress, 0%),
    var(--ap-track)           var(--ap-progress, 0%)
  );
}

/* Громкость — отдельная заливка (если ставишь --ap-progress на .ap-volume) */
.ap-volume {
  width: 110px;
  background: linear-gradient(
    to right,
    var(--ap-volume-accent) var(--ap-progress, 0%),
    var(--ap-track)         var(--ap-progress, 0%)
  );
}

/* WebKit */
.ap-range::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 9999px;
}

.ap-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--ap-track);
  border: 2px solid var(--ap-thumb-border);
  margin-top: -4px;
  cursor: pointer;
}

/* Firefox */
.ap-range::-moz-range-track {
  height: 6px;
  background: var(--ap-track);
  border-radius: 9999px;
}

.ap-range::-moz-range-progress {
  height: 6px;
  background: var(--ap-progress-accent);
  border-radius: 9999px 0 0 9999px;
}

.ap-volume::-moz-range-progress { background: var(--ap-volume-accent); }

.ap-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--ap-track);
  border: 2px solid var(--ap-thumb-border);
  cursor: pointer;
}

/* Меню скорости — контейнер */
.ap-speed {
  background: var(--ap-menu-bg);
  border: 1px solid var(--ap-menu-border);
  border-radius: .75rem;
  backdrop-filter: saturate(120%) blur(2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* Кнопки опций скорости */
.ap-speed-opt {
  text-align: left;
  padding: .375rem .5rem;
  border-radius: .5rem;
  color: var(--ap-menu-text);
  font-weight: 600;
  transition: background-color .15s ease;
}

.ap-speed-opt:hover    { background: var(--ap-menu-hover);  }
.ap-speed-opt.is-active{ background: var(--ap-menu-active); }


/* ────────────────────────────────────────────────────────────────────────────
   Узкий режим (container queries) — перенос ПОЗЖЕ и синхронно (точка ~480px)
   1-я строка: Play + Progress
   2-я строка: Volume, Speed слева; Time справа
   ──────────────────────────────────────────────────────────────────────────── */
@container (max-width: 480px) {
  /* Жёсткий перенос сразу ПОСЛЕ прогресса */
  .ap-row::after { display: block; }

  /* 1-я строка */
  .ap-play     { order: 0; }
  .ap-progress { order: 1; flex: 1 1 0; min-width: 72px; min-inline-size: 0; }

  /* 2-я строка */
  .ap-volwrap  { order: 3; }
  .ap-speedwrap{ order: 4; }
  .ap-time     { order: 5; margin-left: auto; width: auto; min-width: 84px; text-align: right; }

  /* компактные размеры кнопок на телефоне */
  .ap-play .ap-btn { width: 25px; height: 25px; }
  .ap-volwrap .ap-btn,
  .ap-speedwrap .ap-btn { width: 30px; height: 30px; }

  .ap-volwrap, .ap-speedwrap, .ap-time { margin-top: .2rem; }
}

/* Фоллбэк по вьюпорту (если нет container queries) */
@media (max-width: 480px) {
  .ap-row::after { display: block; }

  .ap-play     { order: 0; }
  .ap-progress { order: 1; flex: 1 1 0; min-width: 64px; min-inline-size: 0; }

  .ap-volwrap  { order: 3; }
  .ap-speedwrap{ order: 4; }
  .ap-time     { order: 5; margin-left: auto; width: auto; min-width: 84px; text-align: right; }

  .ap-play .ap-btn { width: 30px; height: 30px; }
  .ap-volwrap .ap-btn,
  .ap-speedwrap .ap-btn { width: 30px; height: 30px; }

  .ap-volwrap, .ap-speedwrap, .ap-time { margin-top: .2rem; }
}

/* Очень узко — только цифры поменьше */
@container (max-width: 360px) { .ap-time { font-size: 12px; } }
@media (max-width: 360px)    { .ap-time { font-size: 12px; } }