/* ============================================================
   BustPlay UI — дизайн-токены (UI_DESIGN.md §2, единственный источник).
   Хром поверх произвольного видео: цвет несёт смысл, а не украшает.
   Клиент переопределяет любую переменную на своём хосте:
     .bp-player{ --bp-played:#5B8CFF; }
   ============================================================ */
:root {
  /* Поверхности */
  --bp-glass:        rgba(14, 17, 21, .66);
  --bp-glass-solid:  rgba(14, 17, 21, .94);
  --bp-hairline:     rgba(255, 255, 255, .11);
  --bp-hairline-str: rgba(255, 255, 255, .18);

  /* Хром */
  --bp-chrome:       #E8EBEF;
  --bp-chrome-dim:   rgba(232, 235, 239, .64);
  --bp-chrome-mute:  rgba(232, 235, 239, .52);

  /* Функциональный цвет: белый — позиция, янтарь — ТОЛЬКО реклама,
     циан — ТОЛЬКО фокус с клавиатуры. */
  --bp-played:       #FFFFFF;
  --bp-buffer:       rgba(255, 255, 255, .26);
  --bp-track:        rgba(255, 255, 255, .15);
  --bp-ad:           #F3B857;
  --bp-focus:        #6FD3E7;

  /* Геометрия */
  --bp-r-panel: 14px;
  --bp-r-btn:   10px;
  --bp-hit:     40px;
  --bp-bar-h:   2px;
  --bp-bar-h-a: 5px;

  /* Движение: появляется быстро, уходит медленно */
  --bp-reveal:  160ms cubic-bezier(.2, .8, .2, 1);
  --bp-hide:    420ms cubic-bezier(.4, 0, .6, 1);
  --bp-grab:    220ms cubic-bezier(.34, 1.4, .64, 1);
  --bp-panel:   200ms cubic-bezier(.2, .8, .2, 1);

  /* Шрифт: системный стек, плеер не грузит веб-шрифты */
  --bp-font: ui-sans-serif, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bp-grab:   1ms;
    --bp-panel:  1ms;
    --bp-hide:   120ms;
    --bp-reveal: 120ms;
  }
}
/* ============================================================
   BustPlay UI — хром плеера (M2). Классы bp-*, значения только из
   токенов --bp-* (tokens.css конкатенируется в начало dist/ui.css).
   Цвет несёт смысл: белый — позиция, янтарь — только реклама,
   циан — только фокус с клавиатуры.

   RTL: направление плеер берёт от контейнера (dir="rtl" на странице),
   своего переключателя нет. Хром зеркалится логическими свойствами
   (inset-inline-*, margin-inline-*), а ДОРОЖКА и слайдер громкости
   остаются физическими: таймлайн — ось времени, она идёт слева направо
   даже в RTL-локалях (как у YouTube). Заливка .bp-played всегда растёт
   слева направо — left/right внутри .bp-seek и .bp-vol-rail не трогать.
   ============================================================ */

.bp-player{
  position:relative; overflow:hidden; isolation:isolate;
  background:#000; border-radius:var(--bp-r-panel);
  font-family:var(--bp-font); font-variant-numeric:tabular-nums;
  color:var(--bp-chrome); user-select:none; touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
  /* Изоляция от хоста в обе стороны: страница с text-align:center или своим
     line-height не должна перекраивать хром (ловил на лендинге).
     start, а не left — в RTL-контейнере тексты прижимаются к своему краю. */
  text-align:start; line-height:1.4;
}
.bp-player:fullscreen{border-radius:0}
.bp-player:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px}
.bp-video{display:block; width:100%; height:100%; object-fit:contain; background:#000}

/* Курсор уходит вместе с хромом. */
.bp-player.bp-idle{cursor:none}

/* ---------- скримы ---------- */
.bp-scrim{position:absolute; left:0; right:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity var(--bp-hide)}
.bp-scrim-top{top:0; height:34%; background:linear-gradient(180deg, rgba(5,6,9,.62), rgba(5,6,9,0))}
.bp-scrim-bottom{bottom:0; height:46%; background:linear-gradient(0deg, rgba(5,6,9,.88) 4%, rgba(5,6,9,.40) 42%, rgba(5,6,9,0))}
.bp-player.bp-awake .bp-scrim{opacity:1; transition:opacity var(--bp-reveal)}

/* ---------- верхняя строка ---------- */
.bp-topbar{position:absolute; z-index:4; top:0; inset-inline:0; padding:18px 20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  opacity:0; transform:translateY(-6px); transition:opacity var(--bp-hide), transform var(--bp-hide)}
.bp-player.bp-awake .bp-topbar{opacity:1; transform:none; transition:opacity var(--bp-reveal), transform var(--bp-reveal)}
.bp-title{font-size:14px; font-weight:550; letter-spacing:-.005em; margin:0; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.bp-subtitle{font-size:12px; color:var(--bp-chrome-dim); margin:3px 0 0; text-shadow:0 1px 10px rgba(0,0,0,.5)}
.bp-branding{font-size:11px; color:var(--bp-chrome-dim); text-decoration:none;
  padding:4px 9px; border-radius:7px; background:var(--bp-glass); border:1px solid var(--bp-hairline);
  align-self:flex-start}
.bp-branding:hover{color:var(--bp-chrome)}
.bp-branding:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px}
.bp-logo, .bp-logo-img{display:block}
.bp-logo-img{max-height:24px; opacity:.85}

/* ---------- центр ---------- */
.bp-center{position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none}
.bp-bigplay{
  pointer-events:auto; width:76px; height:76px; border-radius:50%;
  border:1px solid var(--bp-hairline-str); background:var(--bp-glass);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  color:var(--bp-chrome); display:grid; place-items:center; cursor:pointer; padding:0;
  transition:transform var(--bp-grab), background 160ms, border-color 160ms;
}
.bp-bigplay:hover{transform:scale(1.06); border-color:var(--bp-hairline-str)}
.bp-bigplay:active{transform:scale(.97)}
/* Оптическая центровка треугольника «плей». Физический margin намеренно:
   треугольник смотрит вправо и в RTL — это универсальный символ, не текст. */
.bp-bigplay svg{margin-left:4px}
.bp-player.bp-playing .bp-bigplay{display:none}

.bp-spinner{display:none; width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--bp-track); border-top-color:var(--bp-chrome);
  box-shadow:0 0 0 1px rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.15); /* виден и на белом кадре */
  animation:bp-spin .8s linear infinite}
@keyframes bp-spin{to{transform:rotate(360deg)}}
.bp-player.bp-buffering .bp-spinner{display:block}
.bp-player.bp-buffering .bp-bigplay{display:none}

/* ---------- ошибка: причина и следующий шаг ---------- */
.bp-error{position:absolute; inset:0; z-index:5; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center;
  background:var(--bp-glass-solid)}
.bp-player.bp-has-error .bp-error{display:flex}
/* Под непрозрачным оверлеем ошибки bigplay просвечивал призраком (скриншот-прогон). */
.bp-player.bp-has-error .bp-center{display:none}
.bp-error-text{margin:0; font-size:13px; max-width:42ch; line-height:1.5}
.bp-retry{font:inherit; font-size:13px; color:var(--bp-chrome); cursor:pointer;
  background:transparent; border:1px solid var(--bp-hairline-str); border-radius:var(--bp-r-btn);
  padding:9px 16px; transition:background 140ms}
.bp-retry:hover{background:var(--bp-track)}
.bp-retry:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px}

/* ---------- реклама ---------- */
.bp-adbar{position:absolute; z-index:5; inset-inline-start:20px; bottom:70px; display:none;
  align-items:center; gap:9px; font-size:12px}
.bp-player.bp-ad .bp-adbar{display:flex}
.bp-adbar-dot{width:5px; height:5px; border-radius:50%; background:var(--bp-ad)}
.bp-adbar-label{color:var(--bp-ad); text-shadow:0 1px 8px rgba(0,0,0,.6)} /* читаемость на светлой полосе кадра */
.bp-player.bp-ad .bp-played{background:var(--bp-ad)}
.bp-player.bp-ad .bp-seek{pointer-events:none}

/* ---------- скип-кнопка брейка (создаёт @bustplay/ads) ---------- */
.bp-skip{position:absolute; z-index:8; inset-inline-end:20px; bottom:70px; display:none;
  align-items:center; gap:8px; padding:11px 16px; border-radius:11px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--bp-chrome);
  background:var(--bp-glass-solid); border:1px solid var(--bp-hairline-str);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:background 140ms, transform 140ms}
.bp-skip:hover:not(:disabled){background:rgba(24,28,34,.96); transform:translateX(2px)}
/* Сдвиг при наведении — «к краю», в RTL край с другой стороны. */
.bp-skip:dir(rtl):hover:not(:disabled){transform:translateX(-2px)}
.bp-skip:disabled{cursor:default; color:var(--bp-chrome-dim)}
.bp-skip:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px}

/* ---------- non-linear оверлей (создаёт @bustplay/ads) ---------- */
.bp-overlay-ad{position:absolute; z-index:6; left:50%; bottom:64px; translate:-50% 0;
  max-width:90%}
.bp-overlay-ad img{display:block; max-width:100%; height:auto; border-radius:8px;
  border:1px solid var(--bp-hairline)}
.bp-overlay-close{position:absolute; top:-10px; inset-inline-end:-10px; width:24px; height:24px;
  border-radius:50%; border:1px solid var(--bp-hairline-str); background:var(--bp-glass-solid);
  color:var(--bp-chrome); font-size:11px; cursor:pointer; display:grid; place-items:center; padding:0}
.bp-overlay-close:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px}

/* ---------- нижний блок ---------- */
.bp-controls{position:absolute; z-index:4; inset-inline:0; bottom:0; padding:0 16px 14px;
  opacity:0; transform:translateY(8px); transition:opacity var(--bp-hide), transform var(--bp-hide)}
.bp-player.bp-awake .bp-controls{opacity:1; transform:none; transition:opacity var(--bp-reveal), transform var(--bp-reveal)}
/* До первого запуска хром закреплён — прятать нечего (UI_DESIGN §5). */
.bp-player.bp-before-start .bp-controls,
.bp-player.bp-before-start .bp-scrim,
.bp-player.bp-before-start .bp-topbar{opacity:1; transform:none}

/* ---------- дорожка ----------
   ФИЗИЧЕСКИЕ свойства намеренно (см. правило в шапке файла): таймлайн —
   ось времени, LTR даже в RTL. direction:ltr отвязывает дорожку от
   dir-контейнера, .bp-played растёт слева направо всегда. */
.bp-seek{position:relative; height:20px; display:flex; align-items:center; cursor:pointer; margin:0 4px; direction:ltr}
.bp-seek:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px; border-radius:4px}
.bp-rail{position:relative; width:100%; height:var(--bp-bar-h); border-radius:4px; background:var(--bp-track);
  transition:height var(--bp-grab)}
.bp-seek:hover .bp-rail, .bp-seek.bp-grab .bp-rail{height:var(--bp-bar-h-a)}
.bp-buffered,.bp-played{position:absolute; left:0; top:0; bottom:0; border-radius:inherit}
.bp-buffered{background:var(--bp-buffer); width:0}
.bp-played{background:var(--bp-played); width:0}

.bp-chapter-gap{position:absolute; top:0; bottom:0; width:2px; background:rgba(5,6,9,.75); translate:-50% 0}
.bp-ad-mark{position:absolute; top:50%; translate:-50% -50%; width:3px; height:9px; border-radius:2px;
  background:var(--bp-ad); box-shadow:0 0 0 2px rgba(5,6,9,.6)}

.bp-handle{position:absolute; top:50%; left:0; width:13px; height:13px; border-radius:50%;
  background:var(--bp-played); translate:-50% -50%; scale:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.28), 0 0 18px 2px rgba(255,255,255,.42);
  transition:scale var(--bp-grab)}
.bp-seek:hover .bp-handle, .bp-seek.bp-grab .bp-handle{scale:1}
.bp-seek.bp-grab .bp-handle{scale:1.24; box-shadow:0 0 0 1px rgba(0,0,0,.28), 0 0 26px 5px rgba(255,255,255,.6)}

.bp-preview{position:absolute; bottom:26px; translate:-50% 0; width:152px; opacity:0; pointer-events:none;
  text-align:center; transition:opacity 120ms}
.bp-seek:hover .bp-preview, .bp-seek.bp-grab .bp-preview{opacity:1}
/* Кадр из thumbnails-спрайта: размер кадра задаёт JS, масштаб до 152px — тут. */
.bp-preview-shot{display:none; margin:0 auto 6px; border-radius:8px; overflow:hidden;
  border:1px solid var(--bp-hairline-str); background-repeat:no-repeat;
  transform:scale(var(--shot-scale, 1)); transform-origin:bottom center}
.bp-preview-time{display:block; font-size:11.5px; color:var(--bp-chrome); text-shadow:0 1px 8px rgba(0,0,0,.7)}
.bp-preview-chapter{display:block; font-size:11px; margin-top:2px; color:var(--bp-chrome-dim)}

/* ---------- строка кнопок ---------- */
.bp-row{display:flex; align-items:center; gap:2px; padding-top:2px}
.bp-spacer{flex:1}
.bp-btn{
  width:var(--bp-hit); height:var(--bp-hit); border:0; padding:0; border-radius:var(--bp-r-btn);
  background:transparent; color:var(--bp-chrome); display:grid; place-items:center; cursor:pointer;
  position:relative; transition:background 140ms, transform 140ms;
}
.bp-btn:hover{background:var(--bp-track)}
.bp-btn:active{transform:scale(.93)}
.bp-btn[aria-pressed="true"]{color:var(--bp-played)}
.bp-btn:focus-visible, .bp-bigplay:focus-visible, .bp-vol-rail:focus-visible,
.bp-menu button:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px}

.bp-tip{position:absolute; bottom:calc(100% + 8px); left:50%; translate:-50% 0; white-space:nowrap;
  padding:6px 9px; border-radius:8px; font-size:11.5px; color:var(--bp-chrome);
  background:var(--bp-glass-solid); border:1px solid var(--bp-hairline);
  opacity:0; pointer-events:none; transition:opacity 120ms}
.bp-btn:hover .bp-tip{opacity:1}

/* ---------- громкость ---------- */
.bp-volume{display:flex; align-items:center}
.bp-vol-slider{width:0; overflow:hidden; transition:width var(--bp-panel), margin var(--bp-panel)}
.bp-volume:hover .bp-vol-slider, .bp-volume:focus-within .bp-vol-slider{width:76px; margin-inline-end:8px}
/* Сам слайдер физический, как дорожка: заливка громкости растёт слева направо. */
.bp-vol-rail{position:relative; height:3px; border-radius:3px; background:var(--bp-track); cursor:pointer; width:76px; direction:ltr}
.bp-vol-fill{position:absolute; inset:0 auto 0 0; background:var(--bp-chrome); border-radius:3px}
.bp-vol-knob{position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  background:var(--bp-chrome); translate:-50% -50%; box-shadow:0 0 10px rgba(255,255,255,.35)}

/* Таймкод читается как формула «текущее / всего» — в RTL-тексте bidi
   переставил бы части местами, поэтому изолируем LTR. Отступы логические:
   узкий — к кнопке звука, широкий — к пустоте по центру. */
.bp-time{font-size:12.5px; letter-spacing:.01em; padding-block:0; padding-inline:6px 10px; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate}
.bp-time-total{font-style:normal; color:var(--bp-chrome-mute)}
.bp-live-badge{display:none; color:var(--bp-chrome); background:none; border:0; padding:0;
  font:inherit; cursor:pointer}
.bp-live-badge:focus-visible{outline:2px solid var(--bp-focus); outline-offset:2px; border-radius:4px}
.bp-live-badge.bp-behind{color:var(--bp-chrome-dim)}
.bp-live-badge::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#e33; margin-inline-end:6px; vertical-align:1px}
.bp-player.bp-live .bp-time-current, .bp-player.bp-live .bp-time-total{display:none}
.bp-player.bp-live .bp-live-badge{display:inline-block}
.bp-player.bp-live:not(.bp-dvr) .bp-seek{visibility:hidden}

/* ---------- субтитры: плашка над контролами, стилизуется токенами ---------- */
.bp-captions{position:absolute; z-index:3; left:50%; bottom:78px; translate:-50% 0;
  display:none; max-width:min(86%, 60ch); padding:6px 12px; border-radius:8px;
  background:var(--bp-glass-solid); color:var(--bp-chrome); font-size:15px; line-height:1.45;
  text-align:center; white-space:pre-line; pointer-events:none}
/* Хром спрятан — субтитры опускаются к низу кадра, место возвращается ролику. */
.bp-player:not(.bp-awake) .bp-captions{bottom:18px}
/* Кнопка CC: тонкая черта под глифом — индикатор включённых субтитров. */
.bp-cc[aria-pressed="true"]::after{content:""; position:absolute; bottom:7px; left:50%;
  translate:-50% 0; width:16px; height:1.5px; border-radius:2px; background:var(--bp-played)}

/* ---------- бейдж тач-жестов: «+10 с» / «65%» ---------- */
.bp-gesture{position:absolute; z-index:5; left:50%; top:38%; translate:-50% -50%;
  padding:9px 16px; border-radius:999px; background:var(--bp-glass-solid);
  border:1px solid var(--bp-hairline); color:var(--bp-chrome); font-size:14px;
  opacity:0; pointer-events:none; transition:opacity 120ms}
.bp-gesture.bp-on{opacity:1}

/* ---------- меню ---------- */
.bp-menu{
  position:absolute; inset-inline-end:16px; bottom:66px; z-index:6; width:232px; padding:6px;
  background:var(--bp-glass); backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid var(--bp-hairline); border-radius:var(--bp-r-panel);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8);
  opacity:0; scale:.96; transform-origin:100% 100%; pointer-events:none;
  transition:opacity var(--bp-panel), scale var(--bp-panel);
}
/* Меню растёт из угла кнопки настроек; у transform-origin логического
   варианта нет — в RTL угол зеркалим вручную. */
.bp-menu:dir(rtl){transform-origin:0 100%}
.bp-menu.bp-open{opacity:1; scale:1; pointer-events:auto}
/* На стекле — dim, не mute: mute на glass даёт 3.96:1 (< AA), dim — 5.15 (tools/contrast.mjs). */
.bp-menu h3{margin:0; padding:9px 12px 7px; font-size:11.5px; font-weight:500; color:var(--bp-chrome-dim)}
.bp-menu-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:transparent; border:0; border-radius:9px; padding:9px 12px; cursor:pointer;
  color:var(--bp-chrome); font:inherit; font-size:13px; text-align:start; transition:background 120ms}
.bp-menu-item:hover{background:var(--bp-track)}
.bp-menu-item svg{opacity:0; stroke:var(--bp-played)}
.bp-menu-item[aria-checked="true"] svg{opacity:1}
.bp-menu-hint{color:var(--bp-chrome-mute); font-size:12px}
.bp-menu-hr{height:1px; background:var(--bp-hairline); margin:6px 8px}
.bp-menu-keys{padding:2px 12px 8px}
.bp-menu-key{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--bp-chrome-dim); padding:2.5px 0}
.bp-menu-key kbd{font:inherit; font-size:11px; color:var(--bp-chrome); background:var(--bp-track);
  border:1px solid var(--bp-hairline); border-radius:5px; padding:1.5px 5px; min-width:34px; text-align:center}

/* ---------- скины (UI_DESIGN §6): различия только переменными и раскладкой ---------- */
.bp-player[data-skin="minimal"] .bp-topbar{display:none}
.bp-player[data-skin="minimal"] .bp-btn{width:36px; height:36px}
.bp-player[data-skin="minimal"] .bp-seek:hover .bp-rail{height:var(--bp-bar-h)}
.bp-player[data-skin="minimal"] .bp-seek:hover .bp-handle{scale:0}
.bp-player[data-skin="minimal"] .bp-seek.bp-grab .bp-handle{scale:1}

.bp-player[data-skin="vertical"]{--bp-hit:48px}
.bp-player[data-skin="vertical"] .bp-controls{padding:0 12px 10px}
.bp-player[data-skin="vertical"] .bp-video{object-fit:cover}

/* ---------- адаптив по ширине самого плеера ---------- */
.bp-player.bp-narrow .bp-time{font-size:11.5px; padding-inline:4px 6px}
.bp-player.bp-narrow .bp-btn{width:38px; height:38px}
.bp-player.bp-narrow .bp-topbar{padding:12px 14px}
.bp-player.bp-tiny .bp-subtitle, .bp-player.bp-tiny .bp-pip, .bp-player.bp-tiny .bp-time-total{display:none}