/* Плееры «до / после» и мини-плееры. Цвета из токенов; в светлых секциях (.paper, .h-cream) переменные меняются. */
.ab,.mini{--fg:var(--text-on-dark);--mut:var(--text-muted-on-dark);--line:var(--border-dark);--sel-bg:var(--cream);--sel-fg:var(--ink);--btn-bg:var(--red);--btn-fg:var(--cream);--track:#2a2a2e}
.paper .ab,.paper .mini,.on-light .ab,.on-light .mini{--fg:var(--text-on-light);--mut:var(--text-muted-on-light);--line:rgba(20,20,20,.28);--sel-bg:var(--ink);--sel-fg:var(--cream);--track:rgba(20,20,20,.18)}
.ab{color:var(--fg)}
.ab__nojs{display:block}
.ab__nojs audio{width:100%;margin:4px 0 14px}
.js .ab__nojs{display:none}
.ab__ui{display:none}
.js .ab__ui{display:block}

.ab [hidden]{display:none!important}
.ab__chips{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:1023px){
  .ab__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .ab__chips::-webkit-scrollbar{display:none}
}
.ab__chip{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;text-align:left;font:500 .875rem/1.2 var(--font-body)}
.ab__chip b{font:800 .75rem/1.1 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.ab__chip:hover{border-color:var(--fg)}
.ab__chip[aria-selected="true"]{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-bg)}
.ab__chip:focus-visible,.ab__sw:focus-visible,.ab__play:focus-visible,.ab__seek:focus-visible,.mini__btn:focus-visible{outline:3px solid var(--red-2);outline-offset:3px}

.ab__meta{margin-top:20px;display:grid;gap:4px}
.ab__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ab__song{margin:0;font:800 1.375rem/1.2 var(--font-display)}
.ab__orig{margin:0;font-size:.875rem;line-height:1.35;color:var(--mut)}
.ab__note{display:inline-block;padding:3px 9px;font:700 .75rem/1.3 var(--font-body);letter-spacing:.04em;background:var(--red);color:var(--cream)}

.ab__switch{display:flex;align-items:center;gap:20px;margin-top:22px}
.ab__lbl{font:500 clamp(1.1rem,2.6vw,1.5rem)/1.1 var(--font-display);text-transform:uppercase;color:var(--mut);transition:color .15s;min-width:0;cursor:pointer}
.ab[data-mode="0"] .ab__lbl[data-lbl="0"],.ab[data-mode="1"] .ab__lbl[data-lbl="1"],.ab:not([data-mode]) .ab__lbl[data-lbl="0"]{color:var(--fg);font-weight:900}
.ab__sw{flex:none;position:relative;width:88px;height:44px;border:2px solid var(--fg);background:transparent;cursor:pointer;padding:0}
.ab__knob{position:absolute;top:3px;left:3px;width:34px;height:34px;background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink);transition:transform .15s,background .15s}
.ab__sw[aria-checked="true"] .ab__knob{transform:translateX(44px);background:var(--red);box-shadow:none}
.ab__sw[aria-checked="true"]{border-color:var(--red)}

.ab__bar{display:flex;align-items:center;gap:16px;margin-top:22px}
.ab__play,.mini__btn{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-fg);border:0;cursor:pointer}
.ab__play:hover,.mini__btn:hover{filter:brightness(1.15)}
.ab__ic,.mini__ic{width:18px;height:20px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:3px}
.ab.is-on .ab__ic,.mini.is-on .mini__ic{clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0);margin-left:0}
.ab__seek{flex:1;min-width:0;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ab__seek::-webkit-slider-runnable-track{height:6px;background:var(--track)}
.ab__seek::-moz-range-track{height:6px;background:var(--track)}
.ab__seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:22px;margin-top:-8px;background:var(--fg);border:0}
.ab__seek::-moz-range-thumb{width:16px;height:22px;background:var(--fg);border:0;border-radius:0}
.ab__seek:disabled{opacity:.5;cursor:default}
.ab__time{flex:none;font:600 .875rem/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--mut)}

@media(max-width:600px){
  .ab__switch{justify-content:space-between;gap:10px}
  .ab__sw{width:76px}
  .ab__sw[aria-checked="true"] .ab__knob{transform:translateX(32px)}
  .ab__bar{gap:10px}
}

/* ---------- мини-плеер ---------- */
.mini{display:flex;align-items:center;gap:12px;color:var(--fg)}
.mini__btn{width:44px;height:44px}
.mini__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mini__t{font:700 1rem/1.25rem var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini__n{font-size:.8125rem;line-height:1.3;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini__d{flex:none;font:600 .875rem/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--mut)}
.mini.is-on .mini__t{color:var(--red-2)}
.paper .mini.is-on .mini__t{color:var(--red)}

/* подсказка, ссылка на полный ролик, пульсация переключателя */
.ab__hint{margin:8px 0 0;font:500 .875rem/1.3 var(--font-body);color:var(--mut)}
.ab--touched .ab__hint{display:none}
.ab__sw::after{content:"";position:absolute;inset:-6px;border:2px solid var(--red);opacity:0;pointer-events:none}
.ab.is-on:not(.ab--touched) .ab__sw::after{animation:ab-pulse 1.8s ease-out infinite}
@keyframes ab-pulse{0%{opacity:.75;transform:scale(.96)}100%{opacity:0;transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.ab.is-on:not(.ab--touched) .ab__sw::after{animation:none}}

/* ===== переключатель: иконки и состояния ===== */
.ab{--accent:var(--red-2)}
.paper .ab,.on-light .ab{--accent:var(--red)}
.ab__switch{gap:12px}
.ab__ico{flex:none;display:inline-flex;line-height:0;color:var(--mut);transition:color .15s}
.ab[data-mode="0"] .ab__ico:not(.ab__ico--ai),.ab:not([data-mode]) .ab__ico:not(.ab__ico--ai){color:var(--fg)}
.ab[data-mode="1"] .ab__ico--ai{color:var(--accent)}
.ab__lbl{transition:color .15s}
.ab[data-mode="1"] .ab__lbl[data-lbl="1"]{color:var(--accent);font-weight:900}
.ab__sw{transition:background .15s,border-color .15s}
.ab__sw[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.ab__knob{transition:transform .15s,background .15s}
.ab__sw[aria-checked="true"] .ab__knob{background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink)}
@media(max-width:600px){
  .ab__switch{gap:6px}
  .ab__lbl{font-size:.9375rem}
  .ab__ico svg{width:20px;height:20px}
}

/* ссылка «Слушать полностью»: область нажатия 44px без изменения вида */
.ab__full{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.ab__full[hidden]{display:none}
.ab .vb__a{border-color:var(--fg);color:var(--fg)}
.ab .vb__a:hover,.ab .vb__a:focus-visible{background:var(--fg);color:var(--bg)}

/* переключатель и прогресс: красный = мой голос, фиолетовый = ИИ-слой (--ai-c цвет, --ai градиент меток ИИ из style.css) */
@property --fill{syntax:"<color>";inherits:true;initial-value:#d40500}
.ab{--ai-c:var(--violet);--fill:var(--red)}
.paper .ab,.on-light .ab{--ai-c:var(--violet-deep)}
.ab[data-mode="1"]{--fill:var(--ai-c)}
.ab .ab__sw,.ab .ab__sw[aria-checked="true"]{background:transparent;border-color:var(--fg)}
.ab .ab__knob,.ab .ab__sw[aria-checked="true"] .ab__knob{box-shadow:none;background:var(--fg)}
.ab .ab__sw[aria-checked="true"]{border-color:var(--ai-c)}
.ab .ab__sw[aria-checked="true"] .ab__knob{background:var(--ai)}
.ab[data-mode="1"] .ab__lbl[data-lbl="1"]{color:var(--ai-c);font-weight:900}
.ab[data-mode="1"] .ab__ico--ai{color:var(--ai-c)}
.ab .ab__lbl{font-weight:500;color:var(--mut)}
.ab[data-mode="0"] .ab__lbl[data-lbl="0"],.ab:not([data-mode]) .ab__lbl[data-lbl="0"]{color:var(--fg);font-weight:900}
.ab__seek{transition:--fill .2s}
.ab__seek::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--fill) var(--p,0%),var(--track) var(--p,0%))}
.ab__seek::-moz-range-track{background:linear-gradient(90deg,var(--fill) var(--p,0%),var(--track) var(--p,0%))}
.ab__seek::-webkit-slider-thumb{background:var(--fill)}
.ab__seek::-moz-range-thumb{background:var(--fill)}
@media(prefers-reduced-motion:reduce){.ab__seek{transition:none}}