/* V3.47 — FXCHS Klangarchiv: just one compact cover-and-note card view.
   SoundCloud supplies authentic artwork/notes only after media consent. */
body.fxv2 .fxv2-header .fxv318-music-panel.fxv344-music-panel {
  box-sizing:border-box!important;
  width:min(610px,calc(100vw - 20px))!important;
  max-width:calc(100vw - 20px)!important;
  max-height:min(650px,calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px))!important;
  padding:17px!important;
  gap:10px!important;
  overflow-x:hidden!important;
  border:1px solid #50745d!important;
  border-radius:17px!important;
  background:rgba(7,22,15,.975)!important;
  color:#f1f9f2!important;
  box-shadow:0 20px 65px #0009!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-heading {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  padding:0 0 11px!important;
  border-bottom:1px solid rgba(169,220,178,.23)!important;
}
body.fxv2 .fxv347-music-ident {display:grid;gap:4px;min-width:0}
body.fxv2 .fxv347-music-ident small {
  display:block;color:#8bcc98!important;
  -webkit-text-fill-color:#8bcc98!important;
  font:750 10px/1.25 system-ui,sans-serif!important;
  letter-spacing:.13em!important;
}
body.fxv2 .fxv2-header .fxv347-music-ident strong {
  display:block;color:#fff!important;-webkit-text-fill-color:#fff!important;
  font:800 21px/1.12 system-ui,sans-serif!important;
  letter-spacing:-.035em!important;
}

/* The header button starts/pauses music; selecting a card starts a title.
   Only the explicit consent button is needed inside the window. */
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions {
  display:block!important;margin:0!important;padding:0!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions button:not([data-fxv318-load]) {
  display:none!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions [data-fxv318-load] {
  display:block!important;width:100%;min-height:43px!important;
  padding:10px 14px!important;
  border:1px solid #70b77b!important;border-radius:9px!important;
  background:#244d30!important;color:#fff!important;
  text-align:center!important;font:700 13px/1.3 system-ui,sans-serif!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions [data-fxv318-load][hidden] {
  display:none!important;
}
body.fxv2 .fxv347-internal-controls,
body.fxv2 .fxv347-internal-controls[hidden] {display:none!important}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-status {
  margin:0!important;min-height:0!important;
  color:#c4d9c7!important;font:500 11px/1.45 system-ui,sans-serif!important;
}

/* One scrollable set of small, evenly aligned cards. */
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list.fxv347-track-grid {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;align-items:stretch!important;
  column-gap:10px!important;row-gap:10px!important;
  flex:0 1 auto!important;
  box-sizing:border-box!important;
  height:auto!important;min-height:0!important;
  max-height:min(512px,52dvh)!important;
  padding:2px 2px 7px!important;
  margin:0!important;border:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin;scrollbar-color:#588766 transparent;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list.fxv347-track-grid>li {
  margin:0!important;min-width:0!important;
  border:0!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list .fxv347-track {
  position:relative;
  display:flex!important;flex-direction:column;
  box-sizing:border-box;min-width:0;min-height:138px;
  padding:10px;
  border:1px solid rgba(151,199,164,.28)!important;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(26,49,36,.94),rgba(12,32,22,.97));
  box-shadow:0 4px 15px #0002;
  transition:border-color .2s ease,background .2s ease;
}
body.fxv2 .fxv347-track:hover,
body.fxv2 .fxv347-track:focus-within {border-color:#81c38d!important}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv347-track:has(.fxv347-track-select[aria-current="true"]) {
  border-color:#69d079!important;
  background:linear-gradient(145deg,#21462d,#142c1f)!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv347-track-select {
  display:flex!important;flex-direction:row!important;
  align-items:flex-start!important;gap:10px!important;
  box-sizing:border-box;min-width:0;width:100%;flex:1 1 auto;
  min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
  color:#f4fff5!important;-webkit-text-fill-color:#f4fff5!important;
  text-align:left!important;cursor:pointer;
}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv347-track-select[aria-current="true"] {
  border:0!important;background:none!important;
}
body.fxv2 .fxv347-track-select>.fxv318-index {
  position:absolute;top:7px;right:9px;
  min-width:0!important;
  font:600 9px/1 system-ui,sans-serif!important;
  color:#8daa93!important;-webkit-text-fill-color:#8daa93!important;
  font-variant-numeric:tabular-nums;
}
body.fxv2 .fxv347-track-cover {
  display:block;flex:0 0 67px;
  box-sizing:border-box;
  width:67px!important;height:67px!important;max-width:67px!important;
  border-radius:8px;object-fit:cover;
  background:#102d22;
}
body.fxv2 .fxv347-cover-fallback {
  display:grid!important;place-items:center;
  color:#d7f6da!important;
  font:900 19px/1 system-ui,sans-serif;
  letter-spacing:-.08em;
  background:linear-gradient(140deg,#1b6133,#083a29 60%,#0c2f4b)!important;
}
body.fxv2 .fxv347-track-copy {display:grid;gap:5px;min-width:0;min-height:0;padding:3px 11px 0 0}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv347-track-select .fxv318-track-title {
  display:-webkit-box!important;white-space:normal!important;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden!important;text-overflow:ellipsis;
  margin:0!important;
  color:#f5fff7!important;-webkit-text-fill-color:#f5fff7!important;
  font:750 12px/1.35 system-ui,sans-serif!important;
  letter-spacing:0!important;
}
body.fxv2 .fxv347-track-note {
  display:-webkit-box;overflow:hidden;min-width:0;
  -webkit-box-orient:vertical;-webkit-line-clamp:3;
  color:#c4d8c9!important;-webkit-text-fill-color:#c4d8c9!important;
  font:450 11px/1.44 system-ui,sans-serif;
  overflow-wrap:anywhere;
}
body.fxv2 .fxv347-track-play {
  position:absolute;top:75px;left:76px;
  display:block;width:15px;height:15px;
  pointer-events:none;opacity:.6;
}
body.fxv2 .fxv347-track-play:before {
  content:"";position:absolute;left:4px;top:2px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:8px solid #8ce799;
}
body.fxv2 .fxv347-track:has(.fxv347-track-select[aria-current="true"]) .fxv347-track-play {opacity:1}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv347-track-external {
  display:inline-block;align-self:flex-start;min-height:25px;
  margin:8px 0 0 77px;padding:3px 0 0;
  color:#9ce7ae!important;-webkit-text-fill-color:#9ce7ae!important;
  font:650 10px/1.4 system-ui,sans-serif!important;
  text-decoration:underline;text-underline-offset:3px;
}
body.fxv2 .fxv347-track-external:hover {color:#e0ffe0!important}
body.fxv2 .fxv347-track-grid>.fxv318-music-placeholder {
  grid-column:1/-1;
  padding:14px!important;color:#cde8d2!important;
  background:#183123;border:1px solid #396648;border-radius:9px;
}

@media(max-width:610px), (max-height:500px) and (pointer:coarse) {
  body.fxv2 .fxv2-header .fxv318-music-panel.fxv344-music-panel {
    position:fixed!important;
    top:calc(var(--v2-header-height,76px) + 5px)!important;
    left:max(9px,env(safe-area-inset-left,0px))!important;
    right:max(9px,env(safe-area-inset-right,0px))!important;
    width:auto!important;max-width:none!important;
    max-height:calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px)!important;
    margin:0!important;padding:12px!important;
    overflow-y:auto!important;
  }
  body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list.fxv347-track-grid {
    grid-template-columns:1fr!important;
    max-height:calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 124px)!important;
  }
  body.fxv2 .fxv2-header .fxv344-music-panel .fxv347-track {min-height:112px}
}
@media(prefers-reduced-motion:reduce) {
  body.fxv2 .fxv347-track {transition:none!important}
}
