/*
 * ClubOS — socle visuel Musique partagé.
 *
 * Ce fichier contient uniquement les tokens et composants communs au mobile
 * et au desktop. Les media queries de géométrie restent dans les fichiers
 * music-mobile-complete.css et music-desktop.css.
 */
body.music-page-shell {
    --music-accent: var(--site-accent, #0f8278);
    --music-accent-strong: color-mix(in srgb, var(--music-accent) 82%, #052b33);
    --music-accent-soft: color-mix(in srgb, var(--music-accent) 13%, transparent);
    --music-surface: var(--site-surface, #ffffff);
    --music-surface-raised: color-mix(in srgb, var(--site-surface, #ffffff) 96%, var(--music-accent) 4%);
    --music-surface-elevated: var(--music-surface-raised);
    --music-surface-selected: color-mix(in srgb, var(--music-accent) 9%, var(--site-surface, #ffffff));
    --music-border-soft: color-mix(in srgb, var(--site-border, #d6dde8) 72%, transparent);
    --music-border: var(--music-border-soft);
    --music-text-main: var(--site-text, #172033);
    --music-text: var(--music-text-main);
    --music-text-secondary: var(--site-text-muted, #64748b);
    --music-text-muted: var(--music-text-secondary);
    --music-control-hover: color-mix(in srgb, var(--music-accent) 10%, transparent);
}

:root[data-theme="dark"] body.music-page-shell,
:root[data-bs-theme="dark"] body.music-page-shell {
    --music-accent-strong: color-mix(in srgb, var(--music-accent) 72%, #ffffff);
    --music-surface-raised: color-mix(in srgb, var(--site-surface, #101b2d) 92%, var(--music-accent) 8%);
    --music-surface-selected: color-mix(in srgb, var(--music-accent) 14%, var(--site-surface, #101b2d));
    --music-border-soft: color-mix(in srgb, var(--site-border, #31435f) 78%, transparent);
}

/* Le HTML serveur fournit ces classes. Le JS ne fait plus que les compléter. */
body.music-page-shell .music-track-cover-cell,
body.music-page-shell .music-track-number-cell,
body.music-page-shell .music-track-title-cell,
body.music-page-shell .music-track-duration-cell,
body.music-page-shell .music-track-actions-cell {
    min-width: 0;
}

body.music-page-shell .music-mobile-track-meta {
    display: none;
}

/* Composeur commun : toujours lisible, même avant toute réhydratation JS. */
body.music-page-shell .music-comment-composer {
    margin-top: .55rem;
    color: var(--music-text-main);
}

body.music-page-shell .music-comment-composer__main {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: .55rem;
}

body.music-page-shell .music-comment-composer__avatar {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--music-accent-soft);
    color: var(--music-accent-strong);
    font-size: .78rem;
    font-weight: 850;
}

body.music-page-shell .music-comment-composer__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body.music-page-shell .music-comment-composer__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

body.music-page-shell .music-comment-composer .js-track-comment-content {
    width: 100%;
    min-height: 44px;
    max-height: 8.5rem;
    padding: .68rem .85rem;
    border: 1px solid var(--music-border-soft);
    border-radius: 16px;
    background: var(--music-surface);
    color: var(--music-text-main);
    resize: none;
    line-height: 1.42;
    overflow-y: hidden;
    box-shadow: none;
}

body.music-page-shell .music-comment-composer .js-track-comment-content:focus {
    border-color: color-mix(in srgb, var(--music-accent) 62%, var(--music-border-soft));
    outline: 2px solid color-mix(in srgb, var(--music-accent) 25%, transparent);
    outline-offset: 1px;
}

body.music-page-shell .music-comment-composer__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    margin-top: .45rem;
}

body.music-page-shell .music-comment-composer__secondary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .35rem;
}

body.music-page-shell .music-comment-composer__tool,
body.music-page-shell .music-comment-composer__clear-time,
body.music-page-shell .music-comment-reply-cancel {
    border: 1px solid var(--music-border-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--music-text-muted);
    font: inherit;
}

body.music-page-shell .music-comment-composer__tool {
    min-height: 36px;
    padding: .28rem .62rem;
}

body.music-page-shell .music-comment-composer__tool:hover,
body.music-page-shell .music-comment-composer__tool:focus-visible,
body.music-page-shell .music-comment-reply-cancel:hover,
body.music-page-shell .music-comment-reply-cancel:focus-visible {
    background: var(--music-control-hover);
    color: var(--music-text-main);
}

body.music-page-shell .music-comment-composer__tool[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--music-accent) 42%, var(--music-border-soft));
    background: var(--music-accent-soft);
    color: var(--music-accent-strong);
}

body.music-page-shell .music-comment-composer__submit,
body.music-page-shell .music-comment-reply-submit {
    min-height: 38px;
    padding: .34rem .9rem;
    border: 0;
    border-radius: 999px;
    background: var(--music-accent);
    color: #fff;
    font: inherit;
    font-weight: 820;
}

body.music-page-shell .music-comment-composer__submit:disabled,
body.music-page-shell .music-comment-reply-submit:disabled {
    opacity: .45;
    cursor: default;
}

body.music-page-shell .music-comment-composer__time {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.35rem;
    margin-top: .32rem;
    color: var(--music-accent-strong);
    font-size: .75rem;
}

body.music-page-shell .music-comment-composer__clear,
body.music-page-shell .music-comment-composer__clear-time {
    border: 0;
    background: transparent;
    color: var(--music-text-muted);
}

body.music-page-shell .music-comment-composer__clear {
    display: none;
}

body.music-page-shell .music-comment-emoji-wrap {
    position: relative;
}

body.music-page-shell .music-comment-emoji-picker {
    position: absolute;
    z-index: 6800;
    left: 0;
    bottom: calc(100% + .4rem);
    display: grid;
    grid-template-columns: repeat(6, 40px);
    gap: .2rem;
    max-height: min(17rem, 55vh);
    padding: .4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--music-border-soft);
    border-radius: 16px;
    background: var(--music-surface-raised);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}

body.music-page-shell .music-comment-emoji-picker[hidden] {
    display: none !important;
}

body.music-page-shell .music-comment-emoji-picker button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 1.1rem;
}

body.music-page-shell .music-comment-emoji-picker button:hover,
body.music-page-shell .music-comment-emoji-picker button:focus-visible {
    background: var(--music-control-hover);
}

body.music-page-shell .music-comment-reply-form__label {
    display: block;
    margin-bottom: .35rem;
    color: var(--music-text-muted);
    font-size: .78rem;
    font-weight: 720;
}

body.music-page-shell .music-comment-reply-cancel {
    min-height: 34px;
    padding: .28rem .65rem;
}

body.music-page-shell .music-comment-link {
    color: var(--music-accent-strong);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: .14em;
}

body.music-page-shell .music-comment-sortbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 .45rem;
}

body.music-page-shell .music-comment-sortbar__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--music-text-muted);
    font-size: .76rem;
    font-weight: 720;
}

body.music-page-shell .music-comment-sortbar__select {
    min-height: 34px;
    padding: .28rem 2rem .28rem .65rem;
    border: 1px solid var(--music-border-soft);
    border-radius: 10px;
    background: var(--music-surface);
    color: var(--music-text-main);
    font: inherit;
}

body.music-page-shell .music-comment-composer__feedback {
    margin: .35rem 0 0 2.9rem;
    color: var(--music-accent-strong);
    font-size: .78rem;
    font-weight: 700;
}

body.music-page-shell .music-comment-composer__feedback.is-error {
    color: #b42318;
}

:root[data-theme="dark"] body.music-page-shell .music-comment-composer__feedback.is-error,
:root[data-bs-theme="dark"] body.music-page-shell .music-comment-composer__feedback.is-error {
    color: #ff9b8f;
}

@media (max-width: 767.98px) {
    body .clubos-mobile-player-progress {
        inset: -18px 0 auto;
        height: 36px;
        display: flex;
        align-items: center;
        touch-action: none;
        pointer-events: auto;
    }

    body .clubos-mobile-player-progress > input[type="range"] {
        width: 100%;
        height: 36px;
        margin: 0;
        touch-action: none;
        pointer-events: auto;
    }
}

/* 8.15.8.1.3 — visiteur public : lecture sans exposition des mécaniques sociales. */
.music-page-shell.music-guest .music-btn-like,
.music-page-shell.music-guest .music-btn-favorite,
.music-page-shell.music-guest [data-overflow-target="global-player-like"],
.music-page-shell.music-guest [data-overflow-target="global-player-favorite"]{display:none!important}
.music-track-actions-heading{text-align:center!important}
.music-track-actions-cell .music-track-actions{justify-content:center}
.music-page-shell.music-guest .music-track-actions-heading{width:92px!important}

/* 8.15.8.1.5.1 — défense en profondeur côté invité : même si un ancien runtime
   recrée temporairement les actions mobiles, aucune mécanique membre n'est visible. */
.music-page-shell.music-guest .music-mobile-player-action[data-source-id="global-player-like"],
.music-page-shell.music-guest .music-mobile-player-action[data-source-id="global-player-favorite"],
.music-page-shell.music-guest .music-mobile-player-action[data-source-id="global-player-playlist"],
.music-page-shell.music-guest [data-overflow-target="global-player-playlist"]{display:none!important}