/* Ролики — канон SVIC (svic-platform testnew-edge/player.mjs + clip-player), в токенах After TAX:
   navy → --brand, accent → --accent, белый → бумага #f4efe3. */

/* кнопка Play на обложке: появляется с задержкой 2.5с, при нормальном автозапуске не видна */
.vp-rescue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;width:56px;height:56px;padding:0;border:1px solid rgba(217,179,108,.6);border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none;background:rgba(15,42,34,.72) no-repeat center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4efe3'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");opacity:0;transition:opacity .3s 2.5s,background-color .15s}
.vp-rescue.on{opacity:1}
.vp-rescue:hover{background-color:var(--brand)}
.card-row .vp-rescue,.card:not(.card-lead):not(.card-tv) .vp-rescue{width:40px;height:40px;background-size:16px 16px}
.media.is-sound .vbtn-sound{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4efe3'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E")}

/* шапка статьи: наш пульт поверх YouTube */
.vp-host{position:relative}
.vp-pl{position:absolute;inset:0;z-index:7;font-family:var(--sans);color:#f4efe3;opacity:1;transition:opacity .2s}
.vp-pl.vp-idle{opacity:0;pointer-events:none}
.vp-pl.vp-idle .vp-bar{transform:translateY(6px)}
.vp-hit{position:absolute;inset:0;cursor:pointer}
.vp-bar{position:absolute;left:0;right:0;bottom:0;padding:10px 14px 8px;display:flex;align-items:center;gap:6px;background:linear-gradient(to top,rgba(15,42,34,.82),transparent);transition:transform .2s}
.vp-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;background:none;border:0;color:#f4efe3;cursor:pointer;border-radius:4px;padding:0;opacity:.92}
.vp-btn:hover{opacity:1}
.vp-btn svg{width:22px;height:22px;fill:currentColor}
.vp-pl a.vp-btn,.vp-pl a.vp-btn:link,.vp-pl a.vp-btn:visited,.vp-pl a.vp-btn:hover{color:#f4efe3;background:none;border:0;box-shadow:none;text-decoration:none}
.vp-time{font-size:12.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.95;margin:0 6px;white-space:nowrap}
.vp-sp{flex:1}
.vp-prog{position:absolute;left:14px;right:14px;bottom:46px;height:14px;display:flex;align-items:center;cursor:pointer}
.vp-prog .tr{position:relative;width:100%;height:3px;border-radius:2px;background:rgba(244,239,227,.28);transition:height .1s}
.vp-prog:hover .tr{height:5px}
.vp-prog .buf,.vp-prog .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.vp-prog .buf{background:rgba(244,239,227,.45)}
.vp-prog .fill{background:var(--accent)}
.vp-prog .knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%) scale(0);transition:transform .1s}
.vp-prog:hover .knob{transform:translate(-50%,-50%) scale(1)}
.vp-vol{display:flex;align-items:center}
.vp-vol input{width:0;opacity:0;transition:width .18s,opacity .18s;accent-color:#f4efe3;height:3px;cursor:pointer}
.vp-vol:hover input,.vp-vol input:focus{width:64px;opacity:1;margin-right:4px}
.vp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(15,42,34,.78);border:2px solid rgba(217,179,108,.6);color:#f4efe3;display:none;align-items:center;justify-content:center;cursor:pointer}
.vp-big svg{width:30px;height:30px;fill:currentColor;margin-left:3px}
.vp-pl.paused .vp-big{display:flex}
.vp-pl.paused .vp-bar,.vp-pl.paused .vp-prog{opacity:0;pointer-events:none}
.vp-host .media-play-lg{display:none}
@media (max-width:640px){
  .vp-bar{padding:8px 10px 6px;gap:2px}
  .vp-prog{left:10px;right:10px;bottom:42px}
  .vp-vol input{display:none}
  .vp-time{font-size:11.5px}
  .vp-btn{width:34px}
}
@media (prefers-reduced-motion:reduce){.vp-pl,.vp-bar,.vp-prog .tr,.vp-rescue{transition:none}}
