/* ============================================================================
   КОМПОНЕНТ. ВСТАВКА ВИДЕО — TASK-006, фаза 4 (видео и реклама живьём).

   Точный порт принятого владельцем 12.08.2026 образца
   materials/design/образец-видео-2026-08-12.html (разбор
   materials/design/видео-разбор-2026-08-12.md). Значения принятого компонента
   не меняются (неприкосновенность принятого) — здесь только сняты строительные
   леса образца (.doc__*, .sect, .probe, .tbl, .slot) и общий reset, которого
   тема не дублирует; числа — из tokens.css (единый источник).

   Собран ФАСАДОМ: до нажатия на странице нет ни плеера, ни стороннего скрипта —
   своя обложка, своя кнопка, своя подпись. Плеер приходит только по нажатию
   (video.js). Так одновременно держатся критерий 3 (место занято до загрузки),
   критерий 5 (CLS ≤ 0,1) и критерий 6 (ни одного блокирующего скрипта).
   ============================================================================ */

.video{
  margin-block:var(--space-6);
  max-width:var(--measure-text);
}

/* Кадр. Соотношение сторон держит место до того, как обложка пришла: пустой
   блок занимает ровно столько же, сколько занятый. Волосяная линейка по контуру
   тенью, а не рамкой: рамка меняет геометрию. */
.video__frame{
  position:relative;
  display:block;
  aspect-ratio:var(--video-ratio, 16 / 9);
  background:var(--bg-sunk);
  box-shadow:0 0 0 1px var(--rule-strong);
  overflow:hidden;
}
.video__cover{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}

/* Кнопка. Плашка со словом (значок ДОПОЛНЯЕТ подпись, а не вытесняет — решение
   08.08.2026). Белизна держит контраст на любом кадре; место — нижний левый
   угол, там же подпись и палец на телефоне. */
.video__play{
  position:absolute;
  inset-block-end:var(--space-3);
  inset-inline-start:var(--space-3);
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:2.75rem;              /* 44 px — порог пальца */
  padding:var(--space-2) var(--space-4);
  border:0;
  background:var(--bg);
  color:var(--ink);
  box-shadow:0 0 0 1px var(--rule-strong);
  font-family:var(--font-apparatus);
  font-size:var(--step-2);
  font-weight:var(--wght-meta);
  line-height:var(--lh-meta);
  cursor:pointer;
  transition:background .12s linear, color .12s linear;
}
.video__play svg{
  flex:none;
  width:1.125em;height:1.125em;
  fill:currentColor;
}
.video__play:hover{background:var(--ink);color:var(--bg)}
.video__play:active{background:var(--ink);color:var(--bg);transform:translateY(1px)}
/* Кольцо двойное — чернильное поверх белого: одноцветное на снимке пропадает. */
.video__play:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 1px var(--rule-strong), 0 0 0 4px var(--bg);
}
.video__play[disabled]{
  color:var(--ink-mute);
  cursor:not-allowed;
  background:var(--bg-sunk);
}
.video__play[disabled]:hover{background:var(--bg-sunk);color:var(--ink-mute)}

/* Длительность — часть кнопки, одно нажимаемое место вместо двух соседних. */
.video__dur{font-variant-numeric:tabular-nums;color:inherit;opacity:1}
.video__play:not(:hover):not(:active) .video__dur{color:var(--ink-mute)}

/* Подпись. Та же, что у снимка: гротеск, --ink-soft, мера от своего кегля. */
.video__cap{
  margin-block-start:var(--space-3);
  font-family:var(--font-apparatus);
  font-size:var(--step-2);
  line-height:var(--lh-meta);
  color:var(--ink-soft);
  max-width:calc(var(--step-2) * 40);
}
/* Строка источника. Служебное, самый слабый чернильный тон: где ролик лежит и
   сколько идёт. Не «крошка» — слово несёт сведение. */
.video__src{
  margin-block-start:var(--space-1);
  font-family:var(--font-apparatus);
  font-size:var(--step-1);
  line-height:var(--lh-meta);
  color:var(--ink-mute);
  max-width:calc(var(--step-1) * 40);
}
.video__src a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
.video__src a:hover{text-decoration-thickness:2px}
.video__src a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* СОСТОЯНИЕ: ИГРАЕТ. Область отдана провайдеру целиком — его плеер системе не
   принадлежит и оформлять его нечем. Своё здесь только место и подпись.
   video.js вставляет сюда <iframe> провайдера на всю площадь кадра. */
.video__stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--font-apparatus);
  font-size:var(--step-1);
  text-align:center;
  padding:var(--space-4);
}
.video__stage iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}

/* СОСТОЯНИЕ: ЗАГРУЗКА. Скелет ровно той высоты, что и кадр (соотношение сторон
   на том же элементе). Без мерцания — правка 12.08.2026 по находке детектора. */
.video__frame--load{background:var(--bg-sunk)}

/* СОСТОЯНИЕ: ВИДЕО НЕДОСТУПНО. Обязательное (решение владельца 08.08.2026,
   OPEN-021): вставки переносим, ролики закрыты для РФ или удалены. Ссылка на
   первоисточник обязана быть; кадр остаётся серым полем — обложка чужого
   ролика, которого больше нет, вводила бы в заблуждение. */
.video__frame--gone{
  background:var(--bg-sunk);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-5);
}
.video__gone{
  font-family:var(--font-apparatus);
  text-align:center;
  max-width:calc(var(--step-2) * 34);
}
.video__gone-h{
  font-size:var(--step-2);
  font-weight:var(--wght-meta);
  line-height:var(--lh-meta);
  color:var(--ink);
}
.video__gone-p{
  margin-block-start:var(--space-2);
  font-size:var(--step-1);
  line-height:var(--lh-meta);
  color:var(--ink-soft);
}
.video__gone a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:1px}
.video__gone a:hover{text-decoration-thickness:2px}
.video__gone a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* На чернильной подложке code берёт цвет окружения: свой --ink-soft дал бы
   1,93 : 1 — тёмное на тёмном (сохранено из образца на случай code в подписи). */
.video__stage code{color:inherit}

/* Reduced-motion: тема глобального guard не несёт (base.css), гасим точечно. */
@media (prefers-reduced-motion:reduce){
  .video__play{transition:none}
  .video__play:active{transform:none}
}