/* =========================================================
   RatedTunes Track Card Clean CSS

   AUTO-COPIED from:
   public/css/rt-custom_new.css

   Purpose:
   - track card layout
   - title / artist / style hierarchy
   - hover / playing / loading states
   - rating badge
   - plays / likes / comments metrics

   Important:
   - rt-custom_new.css is NOT modified
   - keep this file loaded AFTER rt-custom_new.css
   ========================================================= */


/* Remove bottom spacing artifacts */
.ms_index_secwrap:last-child,
.ms_songslist_main:last-child,
.ms_index_inner,
.ms_songslist_wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
   4. TABS UI — New Releases / Most Played / Top 100
   ========================================================= */

.ms_songslist_nav > li > a {
    transition:
        color 0.16s ease,
        opacity 0.16s ease;
}

/* Hover & Active tab */
.ms_songslist_nav > li > a:hover,
.ms_songslist_nav > li > a.active {
    color: #ff4d6d !important;
}

/* Active underline */
.ms_songslist_nav > li > a.active::after,
.ms_songslist_nav > li > a.active:after {
    background: #ff4d6d !important;
    box-shadow: 0 0 10px rgba(58, 167, 255, 0.45) !important;
}

/* =========================================================
   5. TRACK CARD BASE LAYOUT
   ========================================================= */

.playlist-tabbed_track {
    position: relative;
    min-height: 74px;
    padding: 8px 10px !important;
    display: flex;
    align-items: center;
    border-radius: 10px;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}

/* Left side: number + play + title block */
.ms_songslist_left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

/* Track number */
.songslist_number {
    width: 34px;
    min-width: 34px;
    text-align: center;
    height: 0 !important;
    justify-content: normal !important;
}

/* Text column */
.songslist_name {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1 !important;
}

/* Right side: favorite / time / menu */
.ms_songslist_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 150px;
    margin-left: 16px;
}

/* =========================================================
   6. TRACK TYPOGRAPHY HIERARCHY
   Title = primary
   Artist = secondary
   Style = micro-chip
   ========================================================= */

/* Title */
.song_name,
.song_name a,
.songslist_name .song_name,
.songslist_name .song_name > a {
    display: block;
    margin-bottom: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    letter-spacing: 0.01em;
    color: #ffffff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.16s ease;
}

/* Artist */
.song_artist,
.song_artist a,
.songslist_name .song_artist,
.songslist_name .song_artist a {
    display: inline-block;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
    color: #8fa3b8 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color 0.16s ease;
}

.playlist-tabbed_track:hover .song_artist a {
    color: #becedd !important;
}

/* Style micro-chip */
.track_style,
.songslist_name .track_style {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9fd8ff !important;
    background: rgba(58, 167, 255, 0.1) !important;
    border: 1px solid rgba(58, 167, 255, 0.2) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

/* =========================================================
   7. TRACK CARD HOVER
   Subtle hover only. Playing state is stronger.
   ========================================================= */

/* Base card */
.playlist-tabbed_track {
    position: relative;
    transition:
        background 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.22s ease;
}

/* Hover Fade out Smoke*/

/* Hover / Fade out / Smoke*/
.playlist-tabbed_track:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    /* box-shadow:
        0 0 0 1px rgba(58, 167, 255, 0.35),
        0 0 18px rgba(58, 167, 255, 0.16) !important; */

/* Исчезновение тени у карточки на hover */

    box-shadow: 
        0 0 0 1px rgba(58, 167, 255, 0.35),
        0 0 18px rgba(58, 167, 255, 0.16) !important;
}

.playlist-tabbed_track:hover .song_name a {
    color: #3aa7ff !important;
}

.playlist-tabbed_track:hover .track_style {
    background: rgba(58, 167, 255, 0.16) !important;
    border-color: rgba(58, 167, 255, 0.35) !important;
}

/* Left accent line */
.playlist-tabbed_track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    width: 2px;
    height: 80%;
    background: transparent;
    border-radius: 2px;
    transition:
        background 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.22s ease;
}

/* =========================================================
   8. PLAY BUTTON
   ========================================================= */

.songslist_play-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    margin: 0 12px 0 6px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.songslist_play-button svg {
    width: 12px;
    height: 12px;
}

.songslist_play-button svg path {
    fill: #ffffff !important;
}

/* .playlist-tabbed_track:hover .songslist_sn {
    color: #3aa7ff !important;
} */

.ms_songslist_inner:hover .songslist_play {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================================================
   10. RIGHT SIDE ACTIONS
   ========================================================= */

.ms_songslist_like {
    width: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f96ad !important;
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ms_songslist_like:hover {
    color: #ff4d6d !important;
    transform: scale(1.12);
}

.ms_songslist_like svg path {
    fill: currentColor !important;
}

/* More menu hidden until hover */
.ms_songslist_more {
    width: 16px;
    min-width: 16px;
}

.songslist_moreicon {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.playlist-tabbed_track:hover .songslist_moreicon {
    opacity: 1;
}

.playlist-tabbed_track .songslist_moreicon,
.playlist-tabbed_track .songslist_moreicon svg,
.playlist-tabbed_track .songslist_moreicon svg path {
    color: #7f96ad !important;
    fill: #7f96ad !important;
}

/* Duration */
.ms_songslist_time {
    text-align: right;
    margin: 0 20px !important;
    font-size: 12px !important;
    color: #7f96ad;
}

.playlist-tabbed_track:hover .ms_songslist_time {
    color: #9fb7cf !important;
}

/* =========================================================
   11. RATING BADGE
   Top-right clean number.
   ========================================================= */

.rt-rating {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 3;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* =========================================================
   12. TRACK MICRO METRICS
   Plays / Likes / Comments
   Location: bottom-right inside .playlist-tabbed_track
   Purpose:
   - compact engagement counters
   - no layout shift
   - muted by default, brighter on hover
   ========================================================= */

/* Main metrics container */
.rt-metrics {
    position: absolute;
    right: 10px;
    bottom: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #7f96ad;
    pointer-events: none;
    white-space: nowrap;
}

/* Single metric item: plays / likes / comments */
.rt-plays,
.rt-like,
.rt-comment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
}

/* Generic metric SVG */
.rt-metric-svg {
    width: 12px;
    height: 12px;
    display: block;
    flex-shrink: 0;
    color: currentColor;
}

/* Force SVG paths to inherit metric color */
.rt-metric-svg path {
    fill: currentColor !important;
}

/* Plays icon fallback if it is still text-based */
.rt-metric-icon {
    font-size: 12px;
    opacity: 0.75;
}

/* Heart icon: slightly larger for better visual balance */
.rt-metric-heart {
    width: 14px !important;
    height: 14px !important;
    /* transform: translateY(0.5px);
    */
}

/* Comment icon: keep compact */
.rt-metric-comment-icon {
    width: 12px !important;
    height: 12px !important;
}

/* Hover state: brighten all metrics together */
.playlist-tabbed_track:hover .rt-metrics {
    color: #9fb7cf;
}

/* Active liked state */
.rt-like.is-liked,
.ms_songslist_like--liked ~ .rt-metrics .rt-like {
    color: #ff6b35 !important;
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .playlist-tabbed_track {
        min-height: 68px;
        padding: 9px 6px !important;
    }

    .songslist_number {
        width: 28px;
        min-width: 96px;
    }

    .songslist_play-button {
        margin: 0 9px 0 4px !important;
    }

    .ms_songslist_right {
        gap: 8px;
        margin-left: 8px;
    }

    .ms_songslist_time {
        min-width: 38px;
    }

    .rt-footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .rt-footer-bottom {
        margin-top: 5px !important;
        padding-top: 5px !important;
        text-align: left;
    }
}

/* =========================================================
   17. REMOVE DEFAULT BLUE HOVER IF NEEDED
   ========================================================= */

/* убираем фон при наведении */

/* если есть hover на внутреннем контейнере */

/* ссылки (чтобы не подсвечивались синим) */

/* кнопка play */

/* =========================================================
   18. HORIZONTAL TRACK GRID — AUTO FLEX ROW WRAP
   2–6 cards depending on screen width
   ========================================================= */

/* remove narrow theme limit */
.ms_index_wrapper .ms_index_secwrap .ms_songslist_main,
.ms_index_secwrap .ms_songslist_main,
.ms_songslist_main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}

/* card itself */
ul.ms_songlist.ms_index_songlist > li > .playlist-tabbed_track {
    width: 100% !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 14px !important;
}

/* default row internals */
ul.ms_songlist.ms_index_songlist .ms_songslist_left,
ul.ms_songlist.ms_index_songlist .songslist_details {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
}

ul.ms_songlist.ms_index_songlist .songslist_thumb {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    /* margin: 0 14px 0 0 !important;
    */
}

ul.ms_songlist.ms_index_songlist .songslist_thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ms_songslist_main {
    flex: 1;
}

/* RatedTunes: spacing for engagement metrics */
.ms_songslist_right .rt-metrics {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 12px !important;
    white-space: nowrap !important;
}

.ms_songslist_right .rt-plays,
.ms_songslist_right .rt-like,
.ms_songslist_right .rt-comment {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ms_songslist_right .rt-metric-icon,
.ms_songslist_right .rt-metric-svg {
    flex: 0 0 auto !important;
}

.ms_songslist_right .ms_songslist_time {
    margin-left: 10px !important;
}

/* Контейнеры должны расти по высоте, не резать карточки */
html,
body,
#root,
.ms_main_wrapper,
.ms_content_wrapper,
.ms_songslist_main,
.ms_songslist_wrap,
.ms_songslist_box,
.fetcher-wrapper,
.tab-content,
.tab-pane,
.tab-pane.active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* 3 цифры у карточек */
.songslist_sn {
    font-size: 20px !important;
    color: #ff5a78 !important;
}

.songslist_play-button {
    position: absolute !important;
    overflow: hidden !important;
}

.playlist-tabbed_track.rt-loading .songslist_play-button > * {
    opacity: 0 !important;
    visibility: hidden !important;
}

.playlist-tabbed_track:not(.rt-playing) .player-animation {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

.playlist-tabbed_track.rt-loading .songslist_play-button svg {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* НЕ скрывать .playing через visibility/opacity */
/* bars должны оставаться видимыми */
.playlist-tabbed_track.rt-loading .songslist_play-button .playing {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   RT CARD PLAY BUTTON — STABLE PAUSE STATE
   ========================================================= */

.playlist-tabbed_track.rt-loading .songslist_play-button svg,
.playlist-tabbed_track.rt-loading .songslist_play-button .playing,
.playlist-tabbed_track.rt-loading .songslist_play-button .player-animation {
    opacity: 0 !important;
    visibility: hidden !important;
}

.playlist-tabbed_track:not(.rt-loading) .songslist_play-button svg {
    opacity: 1 !important;
    visibility: visible !important;
}

.playlist-tabbed_track:not(.rt-loading) .songslist_play-button .playing,
.playlist-tabbed_track:not(.rt-loading) .songslist_play-button .player-animation {
    display: none !important;
}

.audioplayer_meta_title .song_artist {
    margin: 4px 0 0 0 !important;
    color: #35c7e8 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.song_style {
    margin: 3px 0 0 0 !important;
    color: rgba(220, 231, 243, 0.62) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
}

.hover-debug .songslist_play-button {
    background: red !important;
}

.songslist_thumb .rt-thumb-bars {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.songslist_thumb .rt-thumb-bars .playing {
    width: 46px !important;
    height: 42px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
}

.songslist_thumb .rt-thumb-bars .playing__bar {
    display: block !important;
    width: 4px !important;
    min-width: 4px !important;
    border-radius: 3px !important;
    background: var(--theme-color-blue) !important;
    transform: none !important;
    /* animation: rt-thumb-bar-height 1s ease-in-out infinite alternate !important;
    */
    animation: rt-thumb-bar-height 0.8s ease infinite alternate !important;
}

.songslist_thumb .rt-thumb-bars .playing__bar1 {
    animation-delay: -0.2s !important;
}

.songslist_thumb .rt-thumb-bars .playing__bar2 {
    animation-delay: -0.45s !important;
}

.songslist_thumb .rt-thumb-bars .playing__bar3 {
    animation-delay: -0.7s !important;
}

.songslist_thumb .rt-thumb-bars .playing__bar4 {
    animation-delay: -0.95s !important;
}

.songslist_thumb .rt-thumb-bars .playing__bar5 {
    animation-delay: -1.2s !important;
}

/* кад вражения */
.playlist-tabbed_track.rt-loading .songslist_play-button svg,
.playlist-tabbed_track.rt-loading .songslist_play-button .playing,
.playlist-tabbed_track.rt-loading .songslist_play-button .player-animation {
    opacity: 0 !important;
    visibility: hidden !important;
}

.playlist-tabbed_track.rt-loading .songslist_play-button::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.18) !important;
    border-top-color: #ffffff !important;
    animation: rtSpin 0.5s linear infinite !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

.playlist-tabbed_track:not(.rt-loading) .songslist_play-button::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.playlist-tabbed_track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    width: 2px;
    height: 80%;
    background: transparent;
    border-radius: 2px;
    transition:
        background 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.22s ease;
}

.playlist-tabbed_track:hover::before {
    background: rgb(255 0 0 / 8%) !important;
    box-shadow:
        inset 3px 0 0 #ff3a3a,
        inset 0 0 0 1px rgba(255, 58, 58, 0.28) !important;
}

.playlist-tabbed_track.rt-playing {
    background: rgba(255, 58, 91, 0.08) !important;
    box-shadow:
        inset 3px 0 0 #ff3a3a,
        inset 0 0 0 1px rgba(255, 58, 58, 0.28) !important;
}

/* Цвет карточки */
.playlist-tabbed_track.rt-playing {
    /* background: rgba(53, 199, 232, .12) !important;
    */
    /* background: rgb(53 98 232 / 21%) !important;
    */
    background: rgb(87 121 221 / 10%) !important;
    border: 3px solid #ff3a3a !important;
    box-shadow: 0 0 18px rgba(53, 199, 232, 0.2) !important;
}

/* Color Card Button Play/Pause*/
.playlist-tabbed_track:hover .songslist_play-button {
    background: #ff3a3a !important;
    transform: scale(1.12);
}

.playlist-tabbed_track.rt-playing .song_name a {
    color: #3aa7ff !important;
}

/* =========================================================
   TRACK CARD — FINAL OVERRIDE
   Must stay at the END of rt-track-card-clean.css
   ========================================================= */

/* Card base */
.playlist-tabbed_track {
    position: relative !important;
    min-height: 74px !important;
    padding: 8px 10px !important;

    display: flex !important;
    align-items: center !important;

    border-radius: 10px !important;

    background: transparent !important;

    transition:
        background 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.22s ease,
        transform 0.18s ease !important;
}

/* Card hover */
.playlist-tabbed_track:hover {
    background: rgba(255, 255, 255, 0.03) !important;

    box-shadow:
        0 0 0 1px rgba(58, 167, 255, 0.35),
        0 0 18px rgba(58, 167, 255, 0.16) !important;
}

/* Playing card */
.playlist-tabbed_track.rt-playing {
    background:
        linear-gradient(
            90deg,
            rgba(0, 220, 255, .18),
            rgba(0, 120, 255, .10),
            rgba(0, 0, 0, 0)
        ) !important;

    box-shadow:
        inset 3px 0 0 #ff3a3a,
        inset 0 0 0 1px rgba(255, 58, 58, 0.28),
        0 0 18px rgba(53, 199, 232, 0.20) !important;
}

/* Track title */
.song_name,
.song_name a,
.songslist_name .song_name,
.songslist_name .song_name > a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    transition:
        color 0.16s ease,
        text-shadow 0.16s ease !important;
}

.playlist-tabbed_track:hover .song_name a {
    color: #3aa7ff !important;
}

/* Artist */
.song_artist,
.song_artist a,
.songslist_name .song_artist,
.songslist_name .song_artist a {
    color: #8fa3b8 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 15px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    transition: color 0.16s ease !important;
}

.playlist-tabbed_track:hover .song_artist a {
    color: #becedd !important;
}

/* Style chip */
.track_style,
.songslist_name .track_style {
    display: inline-flex !important;
    align-items: center !important;

    width: fit-content !important;
    max-width: 100% !important;

    padding: 2px 7px !important;
    border-radius: 999px !important;

    color: #9fd8ff !important;
    background: rgba(58, 167, 255, 0.10) !important;
    border: 1px solid rgba(58, 167, 255, 0.20) !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease !important;
}

.playlist-tabbed_track:hover .track_style {
    color: #9fd8ff !important;
    background: rgba(58, 167, 255, 0.16) !important;
    border-color: rgba(58, 167, 255, 0.35) !important;
}

/* Play button */
.songslist_play-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;

    margin: 0 12px 0 6px !important;

    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}

.playlist-tabbed_track:hover .songslist_play-button {
    background: #ff3a3a !important;
    transform: scale(1.12) !important;
}

/* Rating */
.rt-rating {
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    z-index: 3 !important;

    color: #ffffff !important;

    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60) !important;

    pointer-events: none !important;
}

/* Metrics */
.rt-metrics {
    position: absolute !important;
    right: 10px !important;
    bottom: 6px !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    color: #7f96ad !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    pointer-events: none !important;
    white-space: nowrap !important;
}

.playlist-tabbed_track:hover .rt-metrics {
    color: #9fb7cf !important;
}

/* =========================================================
   Track title button

   Название визуально остаётся ссылкой, но не выполняет
   переход на /track/:slug. Оно запускает трек в плеере.
   ========================================================= */

.rt-trackcard-title-button {
    width: auto;
    max-width: 100%;

    display: inline-block;

    padding: 0;
    margin: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: inherit; 
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/*
 * Сохраняем существующий цвет title при hover.
 */
.rt-trackcard-title-button:hover,
.rt-trackcard-title-button:focus,
.rt-trackcard-title-button:active {
    border: 0;
    outline: 0;
    background: transparent;

    color: inherit;
    text-decoration: none;
}


/*
 * Видимый keyboard focus.
 */
.rt-trackcard-title-button:focus-visible {
    outline: 1px solid rgba(58, 167, 255, 0.75);
    outline-offset: 3px;
    border-radius: 3px;
}