/* ------------------------------------------------------------------
 * dropcard.css — the compact card face.
 *
 * Self-contained: it shares no rule with playdrop.css, so changing one face
 * can never move the other. Every colour is a variable with a fallback, and
 * the renderer only writes a variable when the setting is not the default,
 * so an untouched site gets exactly these values.
 *
 * Note on the link styling: the buttons are anchors, and a theme that
 * underlines and recolours every anchor in the post content will otherwise
 * turn the words on a red button purple and underlined. That is why the
 * colour and text-decoration below carry !important. It is the one place in
 * this file that needs to beat the theme rather than sit alongside it.
 * ------------------------------------------------------------------ */

.pdc {
    --pdc-bg: #121418;
    --pdc-ink: #ffffff;
    --pdc-dim: #9aa1ab;
    --pdc-line: rgba(255, 255, 255, .1);

    --pdc-stream: #e8101a;
    --pdc-stream-fg: #ffffff;
    --pdc-dl: #1aa653;
    --pdc-dl-fg: #ffffff;
    --pdc-badge: #e8101a;
    --pdc-badge-fg: #ffffff;

    box-sizing: border-box;
    margin: 26px 0;
    padding: 18px 18px 16px;
    border-radius: 14px;
    background: var(--pdc-bg);
    color: var(--pdc-ink);
    font-size: 16px;
    line-height: 1.35;
    overflow: hidden;
}
.pdc *, .pdc *::before, .pdc *::after { box-sizing: border-box; }

/* ------------------------------- the names ------------------------------- */

.pdc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.pdc-names { min-width: 0; }

.pdc-title {
    display: block;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--pdc-ink);
    overflow-wrap: break-word;
}
.pdc-artist {
    display: block;
    margin-top: 2px;
    font-size: .98rem;
    color: var(--pdc-dim);
}

.pdc-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pdc-badge);
    color: var(--pdc-badge-fg);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .82;
    transition: opacity .2s ease;
}
.pdc-badge i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}
/* While something is actually playing the badge is telling the truth, so it
   brightens and the dot beats. Idle, it is a label. */
.pdc.is-playing .pdc-badge { opacity: 1; }
.pdc.is-playing .pdc-badge i { opacity: 1; animation: pdc-beat 1.4s ease-in-out infinite; }
@keyframes pdc-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
    .pdc.is-playing .pdc-badge i { animation: none; }
}

/* ------------------------------ the transport ---------------------------- */

.pdc-transport {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 16px;
}

.pdc-b {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--pdc-ink);
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.pdc-b:hover  { background: rgba(255, 255, 255, .16); }
.pdc-b:active { transform: scale(.93); }
.pdc-b svg { width: 22px; height: 22px; fill: currentColor; }

/* The forward icon is the back icon mirrored. The number is HTML rather than
   part of the drawing, so it stays the right way round. */
.pdc-fwd svg { transform: scaleX(-1); }

/* The play button is the big one, as it is the only one anybody aims at. */
.pdc-play {
    width: 46px; height: 46px;
    background: var(--pdc-stream);
    color: var(--pdc-stream-fg);
}
.pdc-play:hover { background: var(--pdc-stream); filter: brightness(1.1); }
.pdc-play svg { width: 24px; height: 24px; }

.pdc-i-pause { display: none; }
.pdc.is-playing .pdc-i-play  { display: none; }
.pdc.is-playing .pdc-i-pause { display: block; }

/* The "15" printed inside the skip rings, the way a podcast app does it.
   Sitting slightly below centre because the ring's opening is at the top. */
.pdc-b-n {
    position: absolute;
    top: 57%;
    left: 0; right: 0;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-align: center;
    pointer-events: none;
}

.pdc-seek {
    flex: 1 1 auto;
    position: relative;
    height: 4px;
    min-width: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
}
.pdc-seek-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: var(--pdc-stream);
    transition: width .1s linear;
}
.pdc-seek:focus-visible { outline: 2px solid var(--pdc-stream); outline-offset: 3px; }

.pdc-time {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--pdc-dim);
    font-variant-numeric: tabular-nums;
}

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

.pdc-btn {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 15px 18px;
    border: 0;
    border-radius: 9px;
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}
.pdc-btn:active { transform: translateY(1px); }
.pdc-btn:hover  { filter: brightness(1.08); }

.pdc-stream,
.pdc-stream:hover,
.pdc-stream:focus,
.pdc-stream:visited { background: var(--pdc-stream); color: var(--pdc-stream-fg) !important; }

.pdc-dl,
.pdc-dl:hover,
.pdc-dl:focus,
.pdc-dl:visited { background: var(--pdc-dl); color: var(--pdc-dl-fg) !important; }

.pdc-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 2px; }

/* --------------------------- the stage, once opened ---------------------- */

.pdc-stage { margin-top: 12px; }
.pdc-embed:empty { display: none; }
.pdc-embed iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
}

.pdc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}
.pdc-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid var(--pdc-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: var(--pdc-ink) !important;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.pdc-chip:hover {
    background: var(--pdc-brand, rgba(255, 255, 255, .14));
    border-color: var(--pdc-brand, var(--pdc-line));
}
.pdc-chip.is-on {
    background: var(--pdc-brand, rgba(255, 255, 255, .14));
    border-color: transparent;
}

/* ------------------------------- the ad slot ----------------------------- */

/* Given room and centred, and nothing else: whatever is pasted in Settings
   brings its own look, and a border drawn round somebody else's advert is
   how a card ends up with two frames. */
.pdc-slot {
    margin: 10px 0 0;
    text-align: center;
    overflow: hidden;
}
.pdc-slot :is(img, iframe) { max-width: 100%; }

/* --------------------------------- phones -------------------------------- */

@media (max-width: 480px) {
    .pdc { padding: 15px 14px 14px; border-radius: 12px; }
    .pdc-title { font-size: 1.16rem; }
    .pdc-badge { padding: 6px 11px; font-size: .66rem; }
    .pdc-transport { gap: 8px; }
    .pdc-time { display: none; }      /* the bar already says where you are */
    .pdc-btn { padding: 14px 16px; font-size: 1rem; }
}

/* A very narrow phone cannot hold the badge and a long song title on one
   line, and the title is the thing that matters. */
@media (max-width: 360px) {
    .pdc-badge { display: none; }
}

/* ------------------------------ a light card ----------------------------- */

.pdc.pdc-light {
    --pdc-bg: #ffffff;
    --pdc-ink: #14171a;
    --pdc-dim: #6b7278;
    --pdc-line: rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .1);
}
.pdc.pdc-light .pdc-b        { background: rgba(0, 0, 0, .07); }
.pdc.pdc-light .pdc-b:hover  { background: rgba(0, 0, 0, .13); }
.pdc.pdc-light .pdc-play     { background: var(--pdc-stream); color: var(--pdc-stream-fg); }
.pdc.pdc-light .pdc-seek     { background: rgba(0, 0, 0, .12); }
.pdc.pdc-light .pdc-chip     { background: rgba(0, 0, 0, .04); }
.pdc.pdc-light .pdc-btn:focus-visible { outline-color: rgba(0, 0, 0, .5); }


/* ------------------------------------------------------------------
 * 1.4.3 — the transport row on a card that has no MP3.
 *
 * Two shapes, and the difference between them is real rather than cosmetic:
 * .pdc-t-live carries a button that opens the platform player, and
 * .pdc-t-off is inert and looks it. Nothing here draws a live-looking
 * control over something that does not respond.
 * ------------------------------------------------------------------ */

.pdc-t-live .pdc-play { flex: 0 0 auto; }

.pdc-onplat {
    font-size: .84rem;
    font-weight: 600;
    color: var(--pdc-dim);
    letter-spacing: .01em;
}

/* Dimmed and genuinely inert. pointer-events belt, disabled braces. */
.pdc-t-off {
    opacity: .38;
    pointer-events: none;
    user-select: none;
}
.pdc-t-off .pdc-b { cursor: default; }
.pdc-t-off .pdc-play { background: rgba(128, 128, 128, .45); color: var(--pdc-ink); }

@media (max-width: 480px) {
    .pdc-onplat { font-size: .78rem; }
}


/* 1.4.4 — the no-file row is three buttons and nothing else. The label that
   sat beside them is gone, and the row is removed from the flow entirely once
   the platform player has opened rather than merely faded, so it takes its
   spacing with it. */
.pdc-t-live { gap: 10px; }
.pdc-t-live[hidden] { display: none !important; }
.pdc-onplat:empty { display: none; }