/**
 * Musik-Dashboard – Stylesheet
 *
 * Zeilen-/Accordion-Layout fuer das Hub-Dashboard
 * (Optik analog Portal-Startseite, eigener Klassen-Namespace `scl-md2-*`).
 *
 * Phase 90: Musik-Dashboard als zentraler Einstieg fuer Musik-Module.
 * PATCH 214A: Umstellung von Kachel-Grid auf Zeilen/Accordion.
 *   Alte `.md-tile*` und `.md-community-teaser*` Blocks entfernt — sie wurden
 *   durch die scoped `.scl-md2-*` Selektoren ersetzt. Header/Wrap/Coming-soon
 *   bleiben unveraendert (Layout-Header und Coming-soon-Page nutzen sie weiter).
 */

/* ── Reset / Base ──────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    background: var(--bg, #0f0f14);
    color: var(--text, #e8e8ec);
    min-height: 100vh;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ── Wrap ──────────────────────────────────────────────────────────────────── */

.scl-md { /* body-Klasse: keine Breitenbeschraenkung */ }
.md-wrap {
    max-width: var(--scl-width-standard, 1080px);
    margin: 0 auto;
    padding: 0 var(--scl-page-pad-x, 20px) var(--scl-page-pad-y, 80px);
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.md-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.md-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.md-header__icon {
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.9;
}

.md-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text, #fff);
    letter-spacing: -0.02em;
}

.md-header__sub {
    font-size: 0.95rem;
    color: var(--muted, rgba(255,255,255,0.5));
    margin-top: 0.2rem;
}

/* ── Zeilen/Accordion (PATCH 214A) ─────────────────────────────────────────── */

.scl-md2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scl-md2__item {
    background: var(--surface, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: var(--card-radius, var(--radius, 12px));
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.scl-md2__item:hover {
    border-color: var(--border-strong, rgba(255,255,255,0.14));
}

.scl-md2__item[open] {
    background: var(--surface-2, rgba(255,255,255,0.05));
}

/* ── Row (summary) ─────────────────────────────────────────────────────────── */

.scl-md2__row {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    user-select: none;
}

.scl-md2__row::-webkit-details-marker { display: none; }
.scl-md2__row::marker { display: none; content: ''; }

.scl-md2__row:focus-visible {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: -2px;
}

.scl-md2__icon {
    font-size: 1.25rem;
    line-height: 1;
    width: 28px;
    text-align: center;
    opacity: 0.85;
}

.scl-md2__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scl-md2__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-md2__desc {
    font-size: 0.82rem;
    color: var(--muted, rgba(255,255,255,0.55));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-md2__stats {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent, #a78bfa);
    padding: 3px 10px;
    background: var(--accent-dim, rgba(167,139,250,0.14));
    border-radius: 999px;
    white-space: nowrap;
}

.scl-md2__stats--soon {
    color: var(--muted, rgba(255,255,255,0.55));
    background: var(--surface-3, rgba(255,255,255,0.06));
}

.scl-md2__chevron {
    font-size: 0.85rem;
    color: var(--muted, rgba(255,255,255,0.4));
    transition: transform 0.18s ease;
}

.scl-md2__item[open] .scl-md2__chevron {
    transform: rotate(180deg);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */

.scl-md2__body {
    padding: 0 18px 16px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
    padding-top: 14px;
}

.scl-md2__body-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, rgba(255,255,255,0.85));
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scl-md2__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.4em;
    padding: 0.15em 0.45em;
    border-radius: 999px;
    background: var(--accent-dim, rgba(167,139,250,0.18));
    color: var(--accent, #a78bfa);
}

.scl-md2__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.scl-md2__list-item {
    border-top: 1px solid var(--border, rgba(255,255,255,0.05));
    padding-top: 6px;
}

.scl-md2__list-item:first-child {
    border-top: none;
    padding-top: 0;
}

.scl-md2__list-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    transition: opacity 0.15s ease;
}

.scl-md2__list-link:hover {
    opacity: 0.78;
}

.scl-md2__list-title {
    font-size: 0.88rem;
    color: var(--text, #e8e8ec);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.scl-md2__list-meta {
    font-size: 0.76rem;
    color: var(--muted, rgba(255,255,255,0.4));
    white-space: nowrap;
    flex-shrink: 0;
}

.scl-md2__empty {
    font-size: 0.86rem;
    color: var(--muted, rgba(255,255,255,0.55));
    margin-bottom: 12px;
    line-height: 1.55;
}

/* ── CTA-Row ──────────────────────────────────────────────────────────────── */

.scl-md2__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scl-md2__cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--accent, #7c3aed);
    color: #fff;
    transition: background 0.15s ease, transform 0.15s ease;
}

.scl-md2__cta:hover {
    background: var(--accent-strong, #6d28d9);
    text-decoration: none;
}

.scl-md2__cta--ghost {
    background: transparent;
    color: var(--muted, rgba(255,255,255,0.55));
    border: 1px solid var(--border, rgba(255,255,255,0.12));
}

.scl-md2__cta--ghost:hover {
    border-color: var(--accent, #a78bfa);
    background: transparent;
    color: var(--text, #fff);
}

.scl-md2__cta--disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

/* ── Item-Varianten ───────────────────────────────────────────────────────── */

.scl-md2__item--active {
    border-color: var(--accent-dim, rgba(167,139,250,0.3));
}

.scl-md2__item--planned {
    opacity: 0.85;
}

.scl-md2__item--planned .scl-md2__title {
    color: var(--text, rgba(255,255,255,0.78));
}

/* ── Diskografie-Liste (PATCH 214B-B) ─────────────────────────────────────── */

.scl-md2-discography {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.scl-md2-discography__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--border, rgba(255,255,255,0.05));
}

.scl-md2-discography__item:first-child {
    border-top: none;
    padding-top: 0;
}

.scl-md2-discography__cover {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-3, rgba(255,255,255,0.06));
    flex-shrink: 0;
}

.scl-md2-discography__cover--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--muted, rgba(255,255,255,0.35));
}

.scl-md2-discography__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.scl-md2-discography__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

a.scl-md2-discography__title:hover {
    color: var(--accent, #a78bfa);
}

.scl-md2-discography__sub {
    font-size: 0.78rem;
    color: var(--muted, rgba(255,255,255,0.5));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-md2-discography__type {
    font-weight: 500;
    color: var(--muted, rgba(255,255,255,0.6));
}

.scl-md2-discography__empty {
    line-height: 1.55;
}

@media (max-width: 480px) {
    .scl-md2-discography__item {
        grid-template-columns: 40px 1fr;
        gap: 8px;
    }
    .scl-md2-discography__cover {
        width: 40px;
        height: 40px;
    }
    .scl-md2-discography__title {
        font-size: 0.86rem;
    }
}

/* ── Coming-soon Page (Modul global aus) ──────────────────────────────────── */

.md-coming-soon {
    text-align: center;
    padding: 5rem 1rem;
}

.md-coming-soon__icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.md-coming-soon h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text, #fff);
    margin-bottom: 0.5rem;
}

.md-coming-soon p {
    color: var(--muted, rgba(255,255,255,0.5));
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .scl-md2__row {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 12px 14px;
    }

    .scl-md2__stats {
        grid-column: 1 / -1;
        justify-self: start;
        order: 4;
    }

    .scl-md2__chevron {
        order: 3;
    }

    .scl-md2__body {
        padding: 12px 14px 14px;
    }

    .md-header__title {
        font-size: 1.4rem;
    }
}

/* ============================================================== */
/* PATCH 244E — Music Card Dashboard Carousel Pilot               */
/* ============================================================== */

.md-music-cards {
    margin-bottom: 18px;
}

.scl-mc-mininav {
    margin: 0 0 14px;
}
.scl-mc-mininav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}
.scl-mc-mininav__tile {
    /* PATCH 244Y-B: Top-Kachel-Kontrast-Fix. Vorher: bg=#fff, color=inherit (vom dunklen Body
       geerbt) → hellgrauer Text auf weissem Tile = unlesbar. Jetzt: Tile auf dunkler Surface
       mit hellem Text, passend zum Music-Dashboard-Dark-Theme. Brand-Akzent als Border-Left. */
    background: var(--surface-2, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.scl-mc-mininav__tile a,
.scl-mc-mininav__tile > .scl-mc-mininav__disabled {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text, #e8e8ec);
}
.scl-mc-mininav__tile a:hover {
    background: var(--surface-3, rgba(255,255,255,0.1));
}
.scl-mc-mininav__tile--wunsch {
    border-left: 3px solid #ec4899;
}
.scl-mc-mininav__tile--generator {
    border-left: 3px solid #f59e0b;
}
.scl-mc-mininav__tile--guide {
    border-left: 3px solid #10b981;
}
.scl-mc-mininav__title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text, #fff);
}
.scl-mc-mininav__hint {
    display: block;
    font-size: 0.78rem;
    color: var(--muted, rgba(255,255,255,0.6));
    margin-top: 3px;
}
.scl-mc-mininav__disabled {
    color: var(--muted, rgba(255,255,255,0.4));
}

.scl-mc-section {
    margin: 14px 0 20px;
}
.scl-mc-section__title {
    /* PATCH 244Y-B: an Music-Dashboard-Dark-Theme angepasst. Token-Fallback fuer
       Helligkeit; bleibt auch ohne Preset-Override lesbar. */
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--text, #fff);
    font-weight: 600;
}

.scl-mc-carousel {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.scl-mc-carousel__item {
    flex: 0 0 220px;
    scroll-snap-align: start;
}
/* PATCH 244Y-B: Released = Hauptgroesse (220px) bleibt. Presave kompakter (~60%).
   Featured-Presave-Cards (Album-Hero) doppelt so breit wie normale Presaves. */
.scl-mc-carousel--presave .scl-mc-carousel__item {
    flex-basis: 140px;
}
.scl-mc-carousel--presave .scl-mc-carousel__item:has(.scl-mc-card--presave-featured) {
    flex-basis: 260px;
}

.scl-mc-card {
    /* PATCH 244Y: Preset-Token-Binding mit Legacy-Fallback. Tokens kommen aus
       SCL_Preset_Renderer::emit_portal_css() (auf :root). Falls Token leer ist,
       gewinnt der Fallback und das visuelle Verhalten bleibt 1:1 zu Pre-244Y. */
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 10px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.scl-mc-card__cover {
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scl-mc-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scl-mc-card__cover--placeholder span {
    font-size: 3rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
}
.scl-mc-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.scl-mc-card__title {
    /* PATCH 244Y-C: Token-Bind mit lesbarem Fallback. Active preset kann
       --scl-music-card-title-color setzen, wenn Card-BG dunkel ist. */
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--scl-music-card-title-color, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scl-mc-card__artist {
    /* PATCH 244Y-C: Sekundaerer Text-Token. */
    font-size: 0.82rem;
    color: var(--scl-music-card-artist-color, #4b5563);
    margin: 0;
}
.scl-mc-card__release {
    /* PATCH 244Y-C: Meta-Text-Token (release_date Anzeige). */
    font-size: 0.75rem;
    color: var(--scl-music-card-meta-color, #6b7280);
    margin: 0;
}
.scl-mc-card__providers {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.scl-mc-card__provider {
    /* PATCH 244Y: Generisches Provider-Badge an Preset-Badge-Tokens gebunden.
       Branded Varianten (Spotify/Apple/TikTok) unten überschreiben bewusst hardcoded. */
    display: inline-block;
    padding: 2px 8px;
    background: var(--badge-bg, #f3f4f6);
    border-radius: 10px;
    font-size: 0.72rem;
    color: var(--badge-text, #374151);
    text-decoration: none;
    border: 1px solid transparent;
}
.scl-mc-card__provider:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}
.scl-mc-card__provider[data-provider="spotify"] {
    background: #ecfdf5;
    color: #065f46;
}
.scl-mc-card__provider[data-provider="apple_music"] {
    background: #fdf2f8;
    color: #831843;
}
.scl-mc-card__provider[data-provider="tiktok_sound"] {
    background: #fef9c3;
    color: #713f12;
}
.scl-mc-card__cta {
    margin: 6px 0 0;
}
.scl-mc-card__cta-link {
    /* PATCH 244Y-C: CTA-Basis. Rainbow-/Gradient-Anbindung läuft über .scl-mc-cta--platforms
       (siehe unten). Preset-Tokens werden jetzt konsumiert, mit Rainbow-Gradient als
       Lesbarkeits-Garantie-Fallback (immer sichtbar, auch bei transparent gesetzten Preset-Buttons). */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-decoration: none;
    color: #fff;
    background: #6366f1;
    border: 1px solid transparent;
}
.scl-mc-card__cta-link:hover {
    background: #4f46e5;
}

/* PATCH 244Y-C: Rainbow-/Cousine-HQ-Variante fuer Haupt-CTA. Music-Dashboard-scoped Tokens
   mit sichtbarem Gradient-Fallback. Wenn Preset eigene Tokens definiert, gewinnen die.
   Sonst greift der Rainbow-Fallback und garantiert Lesbarkeit unabhaengig von Card-BG. */
.scl-mc-cta--platforms {
    background: var(--scl-music-cta-rainbow-bg, linear-gradient(90deg, #ff4fd8 0%, #ffb347 25%, #57f287 50%, #4da3ff 75%, #b36bff 100%)) !important;
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: var(--scl-music-cta-rainbow-text, #ffffff);
    border: 1px solid var(--scl-music-cta-rainbow-border, rgba(255,255,255,0.28));
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    font-weight: 600;
    transition: background-position 0.4s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.scl-mc-cta--platforms:hover,
.scl-mc-cta--platforms:focus-visible {
    background-position: 100% 50%;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.scl-mc-cta__label {
    display: inline-block;
}
.scl-mc-cta__ext {
    /* externer-Link-Hinweis: ↗ Pfeil, dezent gespacet. */
    display: inline-block;
    margin-left: 2px;
    opacity: 0.9;
    font-size: 0.85em;
}

/* PATCH 244Y-C: Presave-CTA bleibt warm-orange (Pre-Save-Aktion semantisch) — nur dann
   wenn explizit Pre-save-Variante gerendert wird. Rainbow ueberschreibt im released-Mode. */
.scl-mc-card--presave .scl-mc-card__cta-link {
    background: #f59e0b;
}
.scl-mc-card--presave .scl-mc-card__cta-link:hover {
    background: #d97706;
}
.scl-mc-card--presave .scl-mc-cta--platforms {
    /* Presave bekommt eine gedeckte Warm-Gradient-Variante. */
    background: var(--scl-music-cta-presave-bg, linear-gradient(90deg, #f59e0b 0%, #ec4899 100%)) !important;
}

/* PATCH 244Y-C: Cover als CTA-Link. Wird gerendert wenn sichere Feature.fm-/Plattform-URL
   vorhanden ist. Visueller Hover-Feedback + Fokus-Outline fuer Accessibility. */
.scl-mc-cover-link {
    display: block;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
}
.scl-mc-cover-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.scl-mc-cover-link:hover img,
.scl-mc-cover-link:focus-visible img {
    transform: scale(1.04);
    filter: brightness(1.05);
}
.scl-mc-cover-link:focus-visible {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: 2px;
}
.screen-reader-text {
    /* Standard WP-Accessibility-Helper: visuell unsichtbar, fuer Screen-Reader sichtbar. */
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/* PATCH 244Y-C: Card-Title/Artist/Release an Music-Card-spezifische Tokens binden.
   Fallbacks sind die ehemals hardcoded Werte aus 244Y, jetzt aber per Token aenderbar.
   Wenn Preset auf dunkles Card-BG umstellt, kann es passend dazu helle Text-Tokens emittieren. */
/* PATCH 244Y-B: Presave-Card-Variante (kompakter als Release-Card). */
.scl-mc-card--presave .scl-mc-card__title {
    font-size: 0.85rem;
}
.scl-mc-card--presave .scl-mc-card__artist {
    font-size: 0.74rem;
}
.scl-mc-card--presave .scl-mc-card__release {
    font-size: 0.7rem;
}
.scl-mc-card--presave .scl-mc-card__body {
    padding: 8px 10px 10px;
    gap: 4px;
}
.scl-mc-card--presave .scl-mc-card__cta-link {
    padding: 4px 10px;
    font-size: 0.74rem;
}
/* Featured-Presave (Album-Hero): groesser als normale Presaves, fast Release-Niveau. */
.scl-mc-card--presave-featured .scl-mc-card__title {
    font-size: 1rem;
}
.scl-mc-card--presave-featured .scl-mc-card__artist {
    font-size: 0.85rem;
}
.scl-mc-card--presave-featured .scl-mc-card__release {
    font-size: 0.78rem;
}
.scl-mc-card--presave-featured .scl-mc-card__body {
    padding: 12px 14px 14px;
    gap: 6px;
}
.scl-mc-card--presave-featured .scl-mc-card__cta-link {
    padding: 7px 14px;
    font-size: 0.85rem;
}
/* PATCH 244E-E: Public Music Downloads — kleine Buttons im Card-Footer.
   Nur eingeloggte Nutzer sehen diesen Block (Login-Gate in render_downloads()). */
.scl-mc-card__downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
}
.scl-mc-download {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    text-decoration: none;
    border: 1px solid var(--border, rgba(255,255,255,0.18));
    background: var(--surface-2, rgba(255,255,255,0.08));
    color: var(--text, #e8e8ec);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.scl-mc-download:hover {
    background: var(--surface-3, rgba(255,255,255,0.14));
    border-color: var(--accent, #a78bfa);
}
.scl-mc-download--mp3 {
    border-left: 3px solid #10b981;
}
.scl-mc-download--wav {
    border-left: 3px solid #6366f1;
}
.scl-mc-download__note {
    flex-basis: 100%;
    font-size: 0.68rem;
    color: var(--muted, rgba(255,255,255,0.6));
    line-height: 1.4;
}

.scl-mc-card__heart {
    /* PATCH 244F: Legacy-Placeholder, wird durch render_hearts() nicht mehr ausgegeben. */
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.72rem;
    color: #9ca3af;
}

/* PATCH 244F: Live Hearts + Medals (eingeloggte Nutzer toggeln, anonyme sehen nur Count + Login-Hint). */
.scl-mc-heart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--muted, rgba(255,255,255,0.7));
}
.scl-mc-heart__form {
    margin: 0;
    padding: 0;
}
.scl-mc-heart__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    background: var(--surface-2, rgba(255,255,255,0.07));
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text, #e8e8ec);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scl-mc-heart__btn:hover {
    background: var(--surface-3, rgba(255,255,255,0.12));
    border-color: var(--accent, #ec4899);
}
.scl-mc-heart__btn.is-active {
    background: rgba(236,72,153,0.18);
    border-color: #ec4899;
    color: #ec4899;
}
.scl-mc-heart__btn.is-active .scl-mc-heart__icon {
    color: #ec4899;
}
.scl-mc-heart__btn.is-inactive .scl-mc-heart__icon {
    color: var(--muted, rgba(255,255,255,0.55));
}
.scl-mc-heart__icon {
    font-size: 0.95rem;
    line-height: 1;
}
.scl-mc-heart__count {
    font-weight: 600;
    color: inherit;
}
.scl-mc-heart--login {
    /* anonyme Visitor: Login-Hint statt Button */
    color: var(--muted, rgba(255,255,255,0.55));
}
.scl-mc-heart__login-hint {
    font-size: 0.72rem;
}
.scl-mc-heart--disabled {
    /* eingeloggte Nutzer auf nicht-heartable Cards (z.B. Entwurfs-Status) */
    opacity: 0.5;
}

/* Medal-Klassen — Bronze ab 10, Silber ab 50, Gold ab 100 Hearts. */
.scl-mc-medal {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
}
.scl-mc-medal--bronze {
    background: rgba(180,83,9,0.2);
    color: #fbbf24;
    border: 1px solid rgba(217,119,6,0.4);
}
.scl-mc-medal--silver {
    background: rgba(148,163,184,0.18);
    color: #e2e8f0;
    border: 1px solid rgba(203,213,225,0.4);
}
.scl-mc-medal--gold {
    background: rgba(250,204,21,0.18);
    color: #fde047;
    border: 1px solid rgba(253,224,71,0.5);
}
.scl-mc-card__heart-icon {
    font-size: 0.95rem;
}

.scl-mc-empty {
    color: #6b7280;
    padding: 14px;
    text-align: center;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
}

.scl-mc-guide {
    margin: 20px 0 8px;
}
.scl-mc-guide__steps {
    margin: 8px 0 0;
    padding-left: 22px;
}
.scl-mc-guide__steps li {
    margin-bottom: 4px;
    font-size: 0.88rem;
    color: var(--muted, rgba(255,255,255,0.7));
}

/* PATCH 245B: Portal-/Landingpage-Music-Card-Surfaces (read-only).
   Zentrale Music-Card-Wahrheit, kompakter Grid-Stil. */
.scl-mc-portal-section,
.scl-mc-lp-block {
    margin: 24px auto;
    max-width: var(--scl-width-standard, 1080px);
    padding: 0 var(--scl-page-pad-x, 20px);
}
.scl-mc-portal-section__header {
    margin-bottom: 12px;
}
.scl-mc-portal-section__title,
.scl-mc-lp-block__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0 0 12px;
}
.scl-mc-portal-section__grid,
.scl-mc-lp-block__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.scl-mc-portal-section__item,
.scl-mc-lp-block__item {
    /* Card-Container im Portal/LP — keine Carousel-Item-Breite, sondern Grid-Cell. */
}
.scl-mc-portal-section__more {
    margin: 12px 0 0;
    text-align: right;
}
.scl-mc-portal-section__link {
    color: var(--accent, #a78bfa);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}
.scl-mc-portal-section__link:hover {
    text-decoration: underline;
}
/* Read-only Hearts auf Portal/LP — kompakt, kein Button-Styling. */
.scl-mc-heart--readonly {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--muted, rgba(255,255,255,0.65));
    cursor: default;
    user-select: none;
}
.scl-mc-heart--readonly .scl-mc-heart__icon {
    color: #ec4899;
}

@media (max-width: 600px) {
    .scl-mc-portal-section__grid,
    .scl-mc-lp-block__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}

/* PATCH 244G: Diskografie-Archive-View (/musik/?view=archive).
   Server-rendered Grid mit Jahres-/Monatsgruppen. Token-bound mit Dark-Theme-Fallbacks. */
.scl-mc-section__archive-cta {
    margin: 12px 0 0;
    text-align: right;
}
.scl-mc-archive-link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent, #a78bfa);
    background: var(--surface-2, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scl-mc-archive-link:hover {
    background: var(--surface-3, rgba(255,255,255,0.12));
    border-color: var(--accent, #a78bfa);
    color: var(--text, #fff);
}

.scl-mc-archive {
    margin: 18px 0 8px;
}
.scl-mc-archive__header {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
    margin-bottom: 18px;
}
.scl-mc-archive__back {
    margin: 0 0 8px;
    font-size: 0.85rem;
}
.scl-mc-archive__back-link {
    color: var(--accent, #a78bfa);
    text-decoration: none;
}
.scl-mc-archive__back-link:hover {
    text-decoration: underline;
}
.scl-mc-archive__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text, #fff);
}
.scl-mc-archive__sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted, rgba(255,255,255,0.65));
}
.scl-mc-archive__group {
    margin-bottom: 22px;
}
.scl-mc-archive__year {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text, #fff);
    letter-spacing: -0.02em;
}
.scl-mc-archive__month-block {
    margin: 8px 0 14px;
}
.scl-mc-archive__month {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    color: var(--muted, rgba(255,255,255,0.6));
}
.scl-mc-archive__grid {
    /* PATCH 245A: Card-Density leicht reduziert (160px statt 180px) damit mehr Cards
       pro Reihe passen ohne dass Titel/Artist unlesbar werden. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.scl-mc-archive__item {
    /* Card-Container im Archive — keine Carousel-Item-Breite, sondern Grid-Cell. */
}
.scl-mc-archive__empty {
    padding: 24px;
    text-align: center;
    background: var(--surface-2, rgba(255,255,255,0.05));
    border-radius: 8px;
    color: var(--muted, rgba(255,255,255,0.6));
}

/* PATCH 245A: Archive-Cards bekommen leicht reduzierte Body-Padding fuer kompaktere Optik.
   Cover bleibt 1:1 (Aspect-Ratio), Titel/Artist/Meta lesbar. */
.scl-mc-archive .scl-mc-card__body {
    padding: 8px 10px 10px;
    gap: 4px;
}
.scl-mc-archive .scl-mc-card__title {
    font-size: 0.88rem;
}
.scl-mc-archive .scl-mc-card__artist {
    font-size: 0.74rem;
}
.scl-mc-archive .scl-mc-card__release {
    font-size: 0.7rem;
}

@media (max-width: 600px) {
    .scl-mc-archive__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}
@media (max-width: 420px) {
    .scl-mc-archive__grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .scl-mc-archive__title { font-size: 1.3rem; }
    .scl-mc-archive .scl-mc-card__title { font-size: 0.82rem; }
}

/* PATCH 244Y-B: Guide-Sub-View (?view=guide). Eigene Container-Box mit Zurueck-Link. */
.scl-mc-guide-view {
    margin: 18px 0 8px;
    padding: 16px 18px;
    background: var(--surface, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: 10px;
}
.scl-mc-guide-view__back {
    margin: 0 0 12px;
    font-size: 0.85rem;
}
.scl-mc-guide-view__back-link {
    color: var(--accent, #a78bfa);
    text-decoration: none;
}
.scl-mc-guide-view__back-link:hover {
    text-decoration: underline;
}
.scl-mc-guide-view .scl-mc-guide {
    margin: 0;
}

@media (max-width: 600px) {
    .scl-mc-carousel__item {
        flex-basis: 180px;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * PATCH 245C-B — Landingpage Music Card Preset Token Binding
 *
 * 245C verdrahtete Music Cards funktional auf Public-LPs, aber das Layout
 * uebernahm den /musik/-Dashboard-Look hart, ohne LP-Preset-Tokens zu lesen.
 * Folge: Title/Artist/Release-Text fielen auf dunkelgraue Hardcodes zurueck
 * und waren auf dunklen Preset-Surfaces praktisch unsichtbar; Cover-BG war
 * #f3f4f6 (sehr hell) und stoerte Dark-Themes.
 *
 * Dieser Block bindet die Music Card auf Public-LPs an die ohnehin vom
 * LP-Preset emittierten Tokens (--text, --muted, --surface-2, --card-bg,
 * --card-border, --card-radius, --badge-*, --shadow-card, --accent).
 *
 * Layered Fallback-Strategie:
 *   1. Optional scoped LP-Music-Card-Token (--scl-lp-music-card-*) zuerst
 *      → erlaubt zukuenftige Owner-Token-Overrides, ohne globale Tokens zu mutieren.
 *   2. LP-Preset-Token (--text/--muted/--surface-2/...) als zweite Stufe
 *      → garantiert Konsistenz mit dem gewaehlten Landingpage-Preset.
 *   3. Pre-244Y Legacy-Hardcode als letzter Sicherheitsnetz-Fallback.
 *
 * Scope: ausschliesslich .scl-mc-card--ctx-landingpage (245B Renderer-Klasse).
 * Portal-Surface (--ctx-portal) bekommt dieselbe Behandlung praeventiv fuer 245D.
 * Heart-Forms / Downloads sind weiterhin durch Renderer-Filter ausgeschlossen,
 * dieser Block aendert keine Sicherheits-Constraints.
 * ───────────────────────────────────────────────────────────────── */

/* Card-Container Grund-Tokens: bereits in der Base-.scl-mc-card-Regel an
   --card-bg/--card-border/--card-radius gebunden. Hier ergaenzend Padding und
   Shadow fuer LP/Portal-Kontext, damit die Card sauber in die LP-Surface passt. */
.scl-mc-card--ctx-landingpage,
.scl-mc-card--ctx-portal {
    box-shadow: var(--scl-lp-music-card-shadow, var(--shadow-card, none));
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.scl-mc-card--ctx-landingpage:hover,
.scl-mc-card--ctx-portal:hover {
    box-shadow: var(--scl-lp-music-card-shadow-hover, var(--shadow-card-hover, var(--shadow-card, none)));
}

/* Cover-BG: Hardcode #f3f4f6 (sehr hell) → LP-Preset --surface-2 (kontextpassend). */
.scl-mc-card--ctx-landingpage .scl-mc-card__cover,
.scl-mc-card--ctx-portal .scl-mc-card__cover {
    background: var(--scl-lp-music-card-cover-bg, var(--surface-2, #f3f4f6));
}
.scl-mc-card--ctx-landingpage .scl-mc-card__cover--placeholder span,
.scl-mc-card--ctx-portal .scl-mc-card__cover--placeholder span {
    color: var(--scl-lp-music-card-cover-placeholder, var(--muted, #9ca3af));
}

/* Title/Artist/Release: bisher harte Light-Theme-Fallbacks (#111827/#4b5563/#6b7280).
   Auf dunklen LP-Presets unsichtbar. Neu: --text/--muted aus LP-Preset. */
.scl-mc-card--ctx-landingpage .scl-mc-card__title,
.scl-mc-card--ctx-portal .scl-mc-card__title {
    color: var(--scl-lp-music-card-title, var(--text, #111827));
}
.scl-mc-card--ctx-landingpage .scl-mc-card__artist,
.scl-mc-card--ctx-portal .scl-mc-card__artist {
    color: var(--scl-lp-music-card-artist, var(--muted, #4b5563));
}
.scl-mc-card--ctx-landingpage .scl-mc-card__release,
.scl-mc-card--ctx-portal .scl-mc-card__release {
    color: var(--scl-lp-music-card-meta, var(--muted, #6b7280));
    opacity: 0.85;
}

/* Generisches Provider-Badge: an LP-Preset --badge-bg/--badge-text gebunden.
   Branded Varianten (Spotify/Apple/TikTok) lassen wir auf LPs absichtlich
   in ihrer offiziellen Brand-Farbe (Plattform-Erkennbarkeit > Preset-Theming),
   nur Hover-State bekommt LP-Preset-Surface-3-Fallback. */
.scl-mc-card--ctx-landingpage .scl-mc-card__provider,
.scl-mc-card--ctx-portal .scl-mc-card__provider {
    background: var(--scl-lp-music-card-badge-bg, var(--badge-bg, #f3f4f6));
    color: var(--scl-lp-music-card-badge-text, var(--badge-text, #374151));
}
.scl-mc-card--ctx-landingpage .scl-mc-card__provider:hover,
.scl-mc-card--ctx-portal .scl-mc-card__provider:hover {
    background: var(--scl-lp-music-card-badge-hover, var(--surface-3, #e5e7eb));
    border-color: var(--border, #d1d5db);
}

/* Cover-Link Focus-State an LP-Accent. */
.scl-mc-card--ctx-landingpage .scl-mc-cover-link:focus-visible,
.scl-mc-card--ctx-portal .scl-mc-cover-link:focus-visible {
    outline: 2px solid var(--scl-lp-music-card-focus, var(--accent, #a78bfa));
    outline-offset: 2px;
}

/* CTA-Platforms-Rainbow bleibt semantischer Music-Brand-Akzent
   (Cousine-HQ-Wiedererkennung), aber Border-Farbe darf jetzt
   LP-Preset---accent als sanften LP-Akzent nutzen, wenn das Preset
   einen eigenen Rainbow-Border-Override setzt. Ohne Override
   bleibt das bisherige Rainbow-Verhalten erhalten. */
.scl-mc-card--ctx-landingpage .scl-mc-cta--platforms,
.scl-mc-card--ctx-portal .scl-mc-cta--platforms {
    border-color: var(--scl-lp-music-cta-border, var(--scl-music-cta-rainbow-border, rgba(255,255,255,0.28)));
}

/* Read-only Heart-Count auf LP/Portal: an --muted, mit konsistenter Icon-Akzentfarbe. */
.scl-mc-card--ctx-landingpage .scl-mc-heart--readonly,
.scl-mc-card--ctx-portal .scl-mc-heart--readonly {
    color: var(--scl-lp-music-heart-text, var(--muted, rgba(255,255,255,0.65)));
}
.scl-mc-card--ctx-landingpage .scl-mc-heart--readonly .scl-mc-heart__icon,
.scl-mc-card--ctx-portal .scl-mc-heart--readonly .scl-mc-heart__icon {
    color: var(--scl-lp-music-heart-icon, #ec4899);
}

/* Section/Block-Container: Title-Farbe an LP-Preset binden + Section-Spacing
   passend zur LP-page-pad-y-Konvention. */
.scl-mc-lp-block__title {
    color: var(--scl-lp-music-section-title, var(--text, #fff));
    /* Title-Heading-Familie aus LP-Preset, falls vorhanden. */
    font-family: var(--font-family-heading, inherit);
}
.scl-mc-lp-block {
    /* Padding-Inheritance respektiert LP-page-pad-x ueber bereits gesetzte
       Section-Regel; hier nur top/bottom-Gap an LP-Section-Rhythmus binden. */
    margin-top: var(--scl-lp-music-section-gap, 24px);
    margin-bottom: var(--scl-lp-music-section-gap, 24px);
}