/*
 * Meting / APlayer skin for the Coral theme.
 *
 * Coral exposes its article palette as --article-* custom properties and only
 * flips them for the night mode inside the article body. The player derives its
 * colours from those properties where they exist and falls back to the same
 * Coral palette elsewhere (excerpts, book and media templates), so one
 * stylesheet serves both the light and the dark variant.
 */

/* The custom element is inline by default; a player needs its own line and
   the same vertical rhythm as figures in the article body. */
meting-js {
    display: block;
    margin: 1.5em 0;
}
meting-js:first-child {
    margin-top: 0;
}
meting-js:last-child {
    margin-bottom: 0;
}

/* Card --------------------------------------------------------------- */
meting-js .aplayer {
    --coral-music-accent: var(--article-accent, #f1404b);
    --coral-music-accent-soft: var(--article-accent-soft, rgba(241, 64, 75, .1));
    --coral-music-heading: var(--article-heading, #222831);
    --coral-music-text: var(--article-text, #303744);
    --coral-music-muted: var(--article-muted, #788392);
    --coral-music-border: var(--article-border, #e6e9ee);
    --coral-music-surface: var(--article-surface, #f7f8fa);
    --coral-music-surface-strong: var(--article-surface-strong, #eef1f4);
    --coral-music-track: #e3e7ed;
    --coral-music-loaded: #ccd3dd;

    margin: 0;
    border: 1px solid var(--coral-music-border);
    border-radius: 6px;
    background-color: var(--coral-music-surface);
    color: var(--coral-music-text);
    font-family: inherit;
    box-shadow: 0 14px 34px -26px rgba(34, 40, 49, .45);
}

body.nice-dark-mode meting-js .aplayer {
    --coral-music-accent: #ff6b73;
    --coral-music-accent-soft: rgba(255, 107, 115, .16);
    --coral-music-heading: #f0f2f5;
    --coral-music-text: #c8cdd5;
    --coral-music-muted: #969faa;
    --coral-music-border: #3b4048;
    --coral-music-surface: #25282d;
    --coral-music-surface-strong: #1d2024;
    --coral-music-track: #3b4048;
    --coral-music-loaded: #4b535e;

    box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .8);
}

/* Coral only redefines --article-* for the night mode inside the article
   body. Follow those values there, and keep the hard-coded night palette
   everywhere else (excerpts, book and media templates). */
body.nice-dark-mode .post_song_word > .songmax meting-js .aplayer {
    --coral-music-accent: var(--article-accent, #ff6b73);
    --coral-music-accent-soft: var(--article-accent-soft, rgba(255, 107, 115, .16));
    --coral-music-heading: var(--article-heading, #f0f2f5);
    --coral-music-text: var(--article-text, #c8cdd5);
    --coral-music-muted: var(--article-muted, #969faa);
    --coral-music-border: var(--article-border, #3b4048);
    --coral-music-surface: var(--article-surface, #25282d);
    --coral-music-surface-strong: var(--article-surface-strong, #1d2024);
}

/* Cover -------------------------------------------------------------- */
/* The theme colour is applied inline by APlayer; keep the Coral accent. */
meting-js .aplayer .aplayer-pic {
    background-color: var(--coral-music-accent) !important;
}

meting-js .aplayer .aplayer-pic .aplayer-button {
    background: rgba(0, 0, 0, .28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* Track info --------------------------------------------------------- */
meting-js .aplayer.aplayer-withlist .aplayer-info {
    border-bottom-color: var(--coral-music-border);
}

meting-js .aplayer .aplayer-info .aplayer-music .aplayer-title {
    color: var(--coral-music-heading);
    font-size: 15px;
    font-weight: 500;
}

meting-js .aplayer .aplayer-info .aplayer-music .aplayer-author {
    color: var(--coral-music-muted);
}

/* Progress bar ------------------------------------------------------- */
meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--coral-music-track);
}

meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    height: 3px;
    border-radius: 2px;
    background: var(--coral-music-loaded);
}

meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 3px;
    border-radius: 2px;
    background-color: var(--coral-music-accent) !important;
}

meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    background-color: var(--coral-music-accent) !important;
    box-shadow: 0 1px 4px rgba(34, 40, 49, .35);
}

/* Volume ------------------------------------------------------------- */
meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
    background: var(--coral-music-track);
}

meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
    background-color: var(--coral-music-accent) !important;
}

/* Time + icons ------------------------------------------------------- */
meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    color: var(--coral-music-muted);
    font-size: 12px;
}

meting-js .aplayer .aplayer-icon path {
    fill: var(--coral-music-muted);
}

meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
    fill: var(--coral-music-muted);
}

meting-js .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
    fill: var(--coral-music-heading);
}

/* Playlist ----------------------------------------------------------- */
/* Row height stays at APlayer's 32px: its list scrolling is hard-coded to
   33px per row, so only colours and borders change here. */
meting-js .aplayer .aplayer-list ol li {
    border-top-color: var(--coral-music-border);
    color: var(--coral-music-text);
}

meting-js .aplayer .aplayer-list ol li:hover {
    background: var(--coral-music-surface-strong);
}

meting-js .aplayer .aplayer-list ol li.aplayer-list-light {
    background: var(--coral-music-accent-soft);
}

meting-js .aplayer .aplayer-list ol li .aplayer-list-index,
meting-js .aplayer .aplayer-list ol li .aplayer-list-author {
    color: var(--coral-music-muted);
}

meting-js .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-index {
    color: var(--coral-music-accent);
}

meting-js .aplayer .aplayer-list ol li .aplayer-list-cur {
    width: 3px;
    background-color: var(--coral-music-accent) !important;
    border-radius: 0 2px 2px 0;
}

meting-js .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
    background-color: var(--coral-music-border);
}

meting-js .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
    background-color: var(--coral-music-muted);
}

/* Lyrics ------------------------------------------------------------- */
/* The masks are painted with the card colour, so they follow the palette. */
meting-js .aplayer .aplayer-lrc:before {
    background: linear-gradient(180deg, var(--coral-music-surface) 0, transparent);
    filter: none;
}

meting-js .aplayer .aplayer-lrc:after {
    background: linear-gradient(180deg, transparent 0, var(--coral-music-surface));
    filter: none;
}

meting-js .aplayer .aplayer-lrc p {
    color: var(--coral-music-muted);
}

meting-js .aplayer .aplayer-lrc p.aplayer-lrc-current {
    color: var(--coral-music-heading);
}

/* Notices ------------------------------------------------------------ */
meting-js .aplayer .aplayer-notice {
    border-radius: 4px;
    background-color: var(--coral-music-surface-strong);
    color: var(--coral-music-text);
}

/* Mini / fixed modes ------------------------------------------------- */
meting-js .aplayer .aplayer-miniswitcher {
    background: var(--coral-music-surface-strong);
    border-radius: 0 5px 5px 0;
}

meting-js .aplayer .aplayer-miniswitcher .aplayer-icon path {
    fill: var(--coral-music-muted);
}

meting-js .aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
    fill: var(--coral-music-heading);
}

meting-js .aplayer.aplayer-fixed {
    border: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
}

meting-js .aplayer.aplayer-fixed .aplayer-body {
    background-color: var(--coral-music-surface);
}

meting-js .aplayer.aplayer-fixed .aplayer-list {
    border-color: var(--coral-music-border);
}

meting-js .aplayer.aplayer-fixed .aplayer-info {
    border-top-color: var(--coral-music-border);
}

meting-js .aplayer.aplayer-fixed .aplayer-lrc {
    text-shadow: none;
}

/* Loading / failure placeholder shown by Meting.min.js ---------------- */
meting-js .aplayer.meting-status {
    display: block;
    color: var(--coral-music-muted);
    font-size: 14px;
    line-height: 1.7;
    border-style: dashed;
    box-shadow: none;
}

meting-js .aplayer.meting-status button {
    margin-left: 12px;
    padding: 4px 14px;
    border: 1px solid var(--coral-music-accent);
    border-radius: 100px;
    background: transparent;
    color: var(--coral-music-accent);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

meting-js .aplayer.meting-status button:hover {
    background: var(--coral-music-accent);
    color: #fff;
}