/* The grid row opens to the actual player height, moving the buttons smoothly. */
.media-panel {
 display: grid; grid-template-rows: 0fr; opacity: 0;
 transition: grid-template-rows .3s ease, opacity .2s ease;
}
.media-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.media-panel-inner { min-height: 0; overflow: hidden; }
.media-shell { padding: .85rem .75rem 0; }
.media-toolbar {
 display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
 min-width: 0; font-size: .72rem; line-height: 1.5;
}
.media-name { font-weight: 700; color: #243440; }
.media-external { margin-left: auto; font-size: .68rem; border-bottom: 0; }
.media-close {
 flex: 0 0 36px; width: 36px; height: 36px; padding: 0;
 display: inline-flex; align-items: center; justify-content: center;
 border: 1px solid #dbe5ef; border-radius: .4rem; box-shadow: none;
 background: #f2f6fa; color: #243440 !important;
 font-size: 1.35rem; font-weight: 400; line-height: 1;
 letter-spacing: 0; text-transform: none;
}
.media-close:hover { background: #e3edf7; box-shadow: none; }
.media-close:focus-visible { outline: 3px solid #1484c5; outline-offset: 3px; }
.media-viewport { position: relative; width: 100%; height: 166px; border-radius: .6rem; overflow: hidden; background: #edf2f7; }
.media-viewport iframe { display: block; width: 100%; height: 100%; border: 0; }
.media-video { height: clamp(200px, 40vw, 360px); background: #111; }
.media-mixcloud { height: 120px; }
.media-soundcloud-set { height: 240px; }
.media-spotify { height: 152px; }
.media-spotify-collection { height: 352px; }
.link-disclosure .button.is-player-active { box-shadow: 0 0 0 3px #9bcfff; }
@media (max-width: 480px) {
 .media-toolbar { gap: .4rem; }
 .media-name { font-size: .68rem; }
 .media-external { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
 .media-panel { transition: none; }
}

.media-deezer { height: 150px; }
.media-deezer-collection { height: 310px; }
.media-apple { height: 175px; }
.media-apple-collection { height: 450px; }
.media-bandcamp { height: 120px; }
.media-beatport { height: 162px; }
.media-beatport-collection { height: 362px; }

.media-hearthis { height: 150px; }
.media-hearthis-set { height: 350px; }
.media-notice { padding: .8rem 1rem; margin: 0; font-size: .85rem; }