/* Playdrop — front-end styles.
   Scoped under .playdrop so nothing leaks into the theme. */

.playdrop {
    margin: 28px 0;
    font-family: inherit;
    line-height: 1.4;
}

/* ---------------------------------- heading --------------------------------- */

.playdrop-heading {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.playdrop-sub {
    margin: 0 0 14px;
    font-size: .875rem;
    opacity: .7;
}

/* ---------------------------------- embed ----------------------------------- */

.playdrop-embed {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    background: #131313;
    line-height: 0;
}
.playdrop-embed iframe {
    display: block;
    width: 100% !important;
    border: 0;
}

/* -------------------------------- pill buttons ------------------------------ */

.playdrop-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.playdrop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--pd-brand, #333);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.playdrop-btn:hover,
.playdrop-btn:focus {
    color: #fff !important;
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.playdrop-btn-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 12px;
}
.playdrop-btn-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.playdrop-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.playdrop-btn-small {
    font-size: .72rem;
    font-weight: 500;
    opacity: .92;
}
.playdrop-btn-big {
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* --------------------------- platform switcher state ------------------------ */

.playdrop-buttons.is-switching .playdrop-btn {
    cursor: pointer;
    opacity: .82;
}
.playdrop-buttons.is-switching .playdrop-btn:hover,
.playdrop-buttons.is-switching .playdrop-btn:focus,
.playdrop-buttons.is-switching .playdrop-btn.is-active {
    opacity: 1;
}
/* The gap ring is drawn in the platform's own colour at low opacity rather
   than in "page background white", which was only ever right on a light page. */
.playdrop-buttons.is-switching .playdrop-btn.is-active {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .35), 0 0 0 5px var(--pd-brand, #333);
}

.playdrop-switch-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 2px 0;
    font-size: .82rem;
    opacity: .7;
}
.playdrop-open-out {
    text-decoration: none;
    font-weight: 600;
    color: inherit;
    border-bottom: 1px solid currentColor;
}

/* ------------------------------- download block ----------------------------- */

.playdrop-download-block {
    margin-top: 20px;
}

.playdrop-mini {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 16px 18px 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.playdrop-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.playdrop-mini-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.playdrop-mini-title {
    font-weight: 700;
    font-size: 1.02rem;
    color: #16181a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.playdrop-mini-artist {
    font-size: .9rem;
    color: #6b7176;
    margin-top: 2px;
}

.playdrop-mini-play {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--pd-play-bg, #1a8a3c);
    color: var(--pd-play-fg, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: filter .15s ease, transform .12s ease;
}
.playdrop-mini-play:hover { filter: brightness(1.08); }
.playdrop-mini-play:active { transform: scale(.95); }
.playdrop-mini-play svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.playdrop-icon-pause { display: none; }
.playdrop-mini.is-playing .playdrop-icon-play  { display: none; }
.playdrop-mini.is-playing .playdrop-icon-pause { display: block; }

.playdrop-mini-bar {
    position: relative;
    height: 4px;
    margin: 16px 0 8px;
    border-radius: 999px;
    background: #e3e6e8;
    cursor: pointer;
}
.playdrop-mini-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: var(--pd-play-bg, #1a8a3c);
    transition: width .1s linear;
}
.playdrop-mini-times {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: #8a9096;
    font-variant-numeric: tabular-nums;
}

.playdrop-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px auto 0;
    max-width: 330px;
    padding: 16px 26px;
    border-radius: 999px;
    background: var(--pd-dl-bg, #1a8a3c);
    color: var(--pd-dl-fg, #fff) !important;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .02em;
    text-decoration: none !important;
    box-shadow: 0 4px 14px var(--pd-dl-glow, rgba(26, 138, 60, .28));
    transition: transform .15s ease, filter .15s ease;
}
.playdrop-download:hover,
.playdrop-download:focus {
    color: var(--pd-dl-fg, #fff) !important;
    transform: translateY(-2px);
    filter: brightness(1.07);
}
.playdrop-download svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ----------------------------- "See more" collapse -------------------------- */

.playdrop-collapse {
    position: relative;
    margin-bottom: 8px;
}
.playdrop-collapse-inner {
    max-height: var(--pd-collapse, 420px);
    overflow: hidden;
    transition: max-height .35s ease;
}
.playdrop-collapse.is-open .playdrop-collapse-inner {
    max-height: none;
}
.playdrop-collapse-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    height: 110px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 88%);
    /* Replaced by the mask below wherever masks are supported. */
}
.playdrop-collapse.is-open .playdrop-collapse-fade {
    display: none;
}
.playdrop-more {
    display: block;
    margin: 10px auto 0;
    padding: 10px 26px;
    border: 1px solid rgba(128, 128, 128, .38);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.playdrop-more:hover {
    background: rgba(128, 128, 128, .12);
    border-color: rgba(128, 128, 128, .7);
}

/* ---------------------------------- mobile ---------------------------------- */

@media (max-width: 560px) {
    .playdrop-buttons { grid-template-columns: 1fr; }
    .playdrop-mini { padding: 14px 14px 10px; }
    .playdrop-download { max-width: none; }
}

/* ------------------------------- dark themes -------------------------------- */

/* Where masks are supported, fade the text itself to transparent instead of
   covering it with a white panel — then the fade is right on any background,
   and on any theme, without guessing what colour the page is. */
@supports (mask-image: linear-gradient(#000, transparent)) {
    .playdrop-collapse-fade { display: none; }
    .playdrop-collapse:not(.is-open) .playdrop-collapse-inner {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
    }
}

/* ------------------------------ Track details ------------------------------- */

.playdrop-details {
    margin: 22px 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* A clear line between the details list and the article, on whichever side the
   article is. Without it the last row and the first paragraph read as one run
   of text and the list stops looking like a panel. */
.playdrop-details.is-above {
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(128, 128, 128, .3);
}
.playdrop-details.is-below {
    padding-top: 20px;
    margin-top: 26px;
    border-top: 1px solid rgba(128, 128, 128, .3);
}
/* The last row already carries its own spacing; the rule needs the room, not
   a double gap. */
.playdrop-details h2.playdrop-detail:last-child { margin-bottom: 0; }
.playdrop-details-head {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 6px solid rgba(128, 128, 128, .18);
    padding-bottom: 6px;
    margin-bottom: 14px;
    opacity: 1 !important;
    animation: none !important;
    visibility: visible !important;
}
/* The short coloured stripe on the left, following the play button's colour so
   the page reads as one design rather than two unrelated green things. */
.playdrop-details-head::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 34px;
    border-radius: 2px;
    background: var(--pd-play-bg, #1a8a3c);
}
/* The title sits beside its stripe, at every width.
 *
 * It was right-aligned to copy the reference screenshot, which put it at the
 * far end of a long rule. That reads as one heading on a phone-width column
 * and as two unrelated things on a desktop one, where the gap between the
 * stripe and the words is most of the page. Left, next to the stripe, is the
 * same on both — and cannot be pushed off the edge.
 *
 * min-width:0 stops a flex child refusing to shrink and overflowing. */
.playdrop-details .playdrop-details-head span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.2;
    overflow-wrap: break-word;
    color: var(--pd-detail-head, inherit) !important;
}

/* Every row is an h2, so the theme's own h2 rules have to be overridden or the
   list inherits eight enormous headings with big margins.
 *
 * The three lines at the end matter more than they look. A theme is free to
 * colour its headings differently from its body text, or to fade them in as
 * you scroll — and either one leaves this list washed out or invisible while
 * the values beside it show up fine. Taking the colour from the surrounding
 * text instead of from the theme's heading rule, and refusing the fade-in,
 * is what keeps the labels readable on a theme this plugin has never seen. */
.playdrop-details h2.playdrop-detail {
    margin: 0 0 19px;
    padding: 0;
    border: 0;
    font-size: 1.15rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: inherit !important;
    opacity: 1 !important;
    animation: none !important;
    visibility: visible !important;
    transform: none;
}
/* Written with the section class in front of every one of these, and marked
   !important, so a theme rule cannot repaint the list.
 *
 * !important is normally a smell. It earns its place here: this markup is
 * dropped into whatever theme a site happens to run, several of which colour,
 * fade or animate every h2 in the post body, and any of those leaves the
 * labels washed out while the values beside them look fine. The colours stay
 * fully controllable — they come from the CSS variables that Settings →
 * Playdrop → Colours writes, so overriding them is still a setting, not a
 * stylesheet fight. */
.playdrop-details h2.playdrop-detail .playdrop-detail-label {
    color: var(--pd-detail-label, inherit) !important;
    font-weight: 600;
}
.playdrop-details h2.playdrop-detail .playdrop-detail-value,
.playdrop-details h2.playdrop-detail .playdrop-detail-value a {
    color: var(--pd-detail-a, #2f6bff) !important;
    font-weight: 700;
    text-decoration: none;
}
.playdrop-details h2.playdrop-detail .playdrop-detail-value a:hover,
.playdrop-details h2.playdrop-detail .playdrop-detail-value a:focus {
    text-decoration: underline;
}
/* Alternating value colour, as on the blogs this is modelled on. */
.playdrop-details h2.playdrop-detail:nth-of-type(even) .playdrop-detail-value,
.playdrop-details h2.playdrop-detail:nth-of-type(even) .playdrop-detail-value a {
    color: var(--pd-detail-b, #e5484d) !important;
}

@media (max-width: 560px) {
    .playdrop-details .playdrop-details-head span {
        font-size: 1.25rem;
    }
    .playdrop-details-head {
        gap: 10px;
        border-bottom-width: 4px;
    }
    .playdrop-details-head::before { height: 26px; width: 8px; }
    .playdrop-details h2.playdrop-detail {
        font-size: 1.02rem;
        margin-bottom: 15px;
    }
}