/* Сайт «Радио». Значения — из прототипа design_handoff_radio_web/Radio Web v2:
   большая часть стилей стоит на элементах инлайном, как в прототипе, здесь —
   токены тем, база, анимации и состояния (hover/focus), которых инлайном не
   выразить. */

html, body { margin: 0; height: 100%; font-family: Rubik, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; text-align: left; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #FF6A8D; outline-offset: 2px; }
input:focus-visible { outline: none; }
.field:focus-within { box-shadow: 0 0 0 2px #FF6A8D, 0 6px 16px rgba(0,0,0,.08) !important; }
input { font: inherit; color: inherit; outline: none; }
img { display: block; }
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* ── Темы ─────────────────────────────────────────────────────────────── */
.rw {
  --bg:#fff; --list:#F6F6FC; --text:#464762; --text2:#9CA6C7; --textSt:#464762;
  --hdr1:#FF082D; --hdr2:#FE0000; --hdrText:#fff; --mini:#fff; --pbg:#E3E3ED;
  --ppanel:#fff; --play1:#FF6A8D; --play2:#FEA178; --playRing:#FAEBEF;
  --playIcon:#fff; --dot:#FF6464; --more:#9294A2; --ph:#F4F4FB;
  --div:rgba(0,0,0,.05); --sheet:rgba(255,255,255,.85); --field:#fff;
  --card:#fff; --chip:rgba(70,71,98,.1); --btn:#fff; --btnText:#111;
  --onLogo:#fff; --row:#fff; --circle:#fff; --circleShadow:rgba(0,0,0,.12);
  --fieldText:#464762;
  /* Кнопка ⋯ поверх обложки станции — светлая в обеих темах. */
  --moreBg:#fff; --moreFg:#464762;
  /* Кольцо буфера — `playButtonProgressColor` приложения ARGB(62,254,106,140)
     с теми же множителями прозрачности: подложка ×0.25, буфер ×1.1,
     головка ×2.2. */
  --ringTrack:rgba(254,106,140,.0608); --ringBuffer:rgba(254,106,140,.2675);
  --ringHead:rgba(254,106,140,.5349);
}
.rw[data-theme="dark"] {
  --bg:#000; --list:#1E1B21; --text:#CAD2EE; --textSt:#B5B5B5; --hdr1:#BE0622;
  --hdr2:#C20101; --hdrText:#DBD4D4; --mini:#141117; --pbg:#000; --ppanel:#1E1B21;
  --play1:#DBDBDB; --play2:#fff; --playRing:#A7A7A7; --playIcon:#282828;
  --ph:#131313; --div:rgba(255,255,255,.07); --sheet:rgba(33,33,33,.72);
  --field:#2A2630; --fieldText:#CAD2EE; --card:#141117; --chip:rgba(202,210,238,.1); --btn:#EEEEEE;
  --btnText:#111; --onLogo:#DBD4D4; --row:#141117; --circle:#2A2630;
  --circleShadow:rgba(0,0,0,.5);
  --ringTrack:rgba(30,30,30,.0598); --ringBuffer:rgba(30,30,30,.2631);
  --ringHead:rgba(30,30,30,.5263);
  --moreBg:rgba(255,255,255,.82); --moreFg:#2A2630;
}
@media (prefers-color-scheme: dark) {
  .rw[data-theme="auto"] {
    --bg:#000; --list:#1E1B21; --text:#CAD2EE; --textSt:#B5B5B5; --hdr1:#BE0622;
    --hdr2:#C20101; --hdrText:#DBD4D4; --mini:#141117; --pbg:#000; --ppanel:#1E1B21;
    --play1:#DBDBDB; --play2:#fff; --playRing:#A7A7A7; --playIcon:#282828;
    --ph:#131313; --div:rgba(255,255,255,.07); --sheet:rgba(33,33,33,.72);
    --field:#2A2630; --fieldText:#CAD2EE; --card:#141117; --chip:rgba(202,210,238,.1); --btn:#EEEEEE;
    --btnText:#111; --onLogo:#DBD4D4; --row:#141117; --circle:#2A2630;
    --circleShadow:rgba(0,0,0,.5);
    --ringTrack:rgba(30,30,30,.0598); --ringBuffer:rgba(30,30,30,.2631);
    --ringHead:rgba(30,30,30,.5263);
    --moreBg:rgba(255,255,255,.82); --moreFg:#2A2630;
  }
}

/* Плейсхолдер поля поиска — цветом подписи темы. */
#search-input::placeholder { color: var(--text2); }

/* ── Анимации ─────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,141,.65); } 100% { box-shadow: 0 0 0 16px rgba(255,106,141,0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { opacity: .45; } 50% { opacity: 1; } 100% { opacity: .45; } }
@keyframes bars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes spark { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Окна сайта — по-веб: короткое появление на месте (без сдвига на 24 px,
   как у шитов телефона), подложка проявляется, меню выпадает от кнопки.
   Анимируется только opacity и scale — центрирование окна делает flex, а не
   transform, поэтому окно не «прыгает». */
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.x-close { color: var(--text2); }
.x-close:hover { background: var(--chip) !important; color: var(--text) !important; }
.menu-item:hover, .menu-item:focus-visible { background: var(--chip); outline: none; }

/* ── Иконки: монохромные PNG, тонируются цветом текста ─────────────────── */
.ic { display: block; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }

/* ── Состояния (в прототипе — style-hover / style-focus) ───────────────── */
.hv-chip:hover { background: var(--chip) !important; }
.hv-div:hover { background: var(--div) !important; }
.hv-o9:hover { opacity: .9 !important; }
.hv-o85:hover { opacity: .85 !important; }
.hv-o8:hover { opacity: .8 !important; }
.hv-o7:hover { opacity: .7 !important; }
.hv-s103:hover { transform: scale(1.03) !important; }
.hv-s104:hover { transform: scale(1.04) !important; }
.hv-s108:hover { transform: scale(1.08) !important; }
.hv-text-chip:hover { color: var(--text) !important; background: var(--chip) !important; }
.hv-hdr1:hover { color: var(--hdr1) !important; }
.hv-text:hover { color: var(--text) !important; }
.hv-white:hover { color: #fff !important; }
.fc-ring:focus { border-color: #FF6A8D !important; box-shadow: 0 0 0 1px #FF6A8D !important; }

/* Кольцо буфера лежит на рамке кнопки Play и клики пропускает; при
   наведении растёт вместе с кнопкой. */
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 2; transition: transform .15s; }
.hv-s104:hover + .ring { transform: translate(-50%, -50%) scale(1.04); }

/* Наведение на карточку станции: затемнение, Play и ⋯. В прототипе это
   состояние `hovered` с mouseenter/leave — здесь то же самое средствами CSS. */
.hov { display: none !important; }
/* Только там, где наведение есть: на тач-экране «залипший» hover после тапа
   оставлял поверх карточки затемнение с Play. */
@media (hover: hover) {
  .card:hover .hov { display: grid !important; }
  .card:hover .hov-flex { display: flex !important; }
}
.more-touch { display: none !important; }
/* Кнопка «в Мои» в строке веб-списка — по наведению (сохранённая видна всегда). */
.hov-show { opacity: 0; transition: opacity .15s, background .15s; }
.card:hover .hov-show, .hov-show:focus-visible { opacity: 1; }
.card:hover .more-touch, .touch .more-touch { display: grid !important; }

/* Подвал «приложение» и прочее, что не должно мигать при гидрации. */
[hidden] { display: none !important; }

/* Заголовок для поисковика и скринридера, которого не видно на экране:
   на этих страницах видимый заголовок — приветствие или вкладка. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ссылки-названия в карточках выглядят как текст карточки. */
a.st-link { color: inherit; text-decoration: none; }
a.st-link:focus-visible { outline: 2px solid #FF6A8D; outline-offset: 2px; border-radius: 4px; }
a.seo-link { color: var(--text2); text-decoration: none; }
a.seo-link:hover { color: var(--text); text-decoration: underline; }

/* Громкость: дорожка 4 px, заливка градиентом кнопки Play до уровня (--v);
   при наведении — 6 px и белый бегунок, как в Apple Music. */
.vol { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 22px;
  margin: 0; background: transparent; cursor: pointer; --track: 4px; }
.vol:hover, .vol:active, .vol:focus-visible { --track: 6px; }
.vol:focus-visible { outline: none; }
.vol::-webkit-slider-runnable-track { height: var(--track); border-radius: 3px;
  background: linear-gradient(90deg, var(--play1), var(--play2)) left / var(--v) 100% no-repeat, var(--chip);
  transition: height .15s; }
.vol::-moz-range-track { height: var(--track); border-radius: 3px; background: var(--chip); transition: height .15s; }
.vol::-moz-range-progress { height: var(--track); border-radius: 3px;
  background: linear-gradient(90deg, var(--play1), var(--play2)); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  margin-top: calc((var(--track) - 14px) / 2); border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); opacity: 0; transition: opacity .15s; }
.vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); opacity: 0; transition: opacity .15s; }
.vol:hover::-webkit-slider-thumb, .vol:active::-webkit-slider-thumb, .vol:focus-visible::-webkit-slider-thumb,
.touch .vol::-webkit-slider-thumb { opacity: 1; }
.vol:hover::-moz-range-thumb, .vol:active::-moz-range-thumb, .vol:focus-visible::-moz-range-thumb,
.touch .vol::-moz-range-thumb { opacity: 1; }
.vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #FF6A8D, 0 1px 4px rgba(0,0,0,.3); }