/* MusicInsight Blocks 0.7.4
 * Isolated presentation layer for MusicInsight music loops.
 * Site chrome may be RTL, but every music metadata surface is explicitly LTR.
 */
.mi-music-loop{
    --mi-surface:#fff;
    --mi-surface-soft:#f4f5f6;
    --mi-surface-raised:#fff;
    --mi-border:rgba(18,22,27,.10);
    --mi-text:#171a1f;
    --mi-muted:#727982;
    --mi-accent:var(--color-primary,#ff7100);
    --mi-shadow:0 9px 28px rgba(18,22,27,.08);
    --mi-shadow-soft:0 2px 10px rgba(18,22,27,.06);
    --mi-image-ratio:var(--mi-image-ratio-desktop,1);
    --mi-cover-size:var(--mi-cover-size-desktop,64px);
    --mi-action-size:var(--mi-action-size-desktop,32px);
    --mi-play-size:var(--mi-play-size-desktop,36px);
    --mi-play-icon-size:var(--mi-play-icon-desktop,62%);
    width:auto;
    min-width:0;
    box-sizing:border-box;
    position:relative;
    isolation:isolate;
}
.dark .mi-music-loop{
    --mi-surface:#101316;
    --mi-surface-soft:#171b1f;
    --mi-surface-raised:#0c1013;
    --mi-border:rgba(255,255,255,.075);
    --mi-text:#fff;
    --mi-muted:rgba(255,255,255,.62);
    --mi-shadow:0 12px 34px rgba(0,0,0,.22);
    --mi-shadow-soft:0 3px 14px rgba(0,0,0,.16);
}
.mi-music-loop *,
.mi-music-loop *::before,
.mi-music-loop *::after{box-sizing:border-box}
.mi-music-loop a{text-decoration:none}

/* ---------- Gutenberg / Waveme alignment contract ----------
 * Waveme constrains normal and alignwide blocks itself. Do not force width:100%
 * here: doing that breaks alignfull because margins get added on top of 100%.
 * Loop Block's native alignfull uses a safe 2rem gutter; mirror it exactly.
 */
.mi-music-loop.alignfull{
    width:auto!important;
    max-width:none!important;
    margin-left:2rem!important;
    margin-right:2rem!important;
}
.mi-music-loop.alignwide{
    min-width:0;
}

/* ---------- Section header: remains RTL because it belongs to the site UI. ---------- */
.mi-section-head{
    width:100%;
    min-width:0;
    min-height:var(--mi-header-height-desktop,80px);
    margin:0 0 13px;
    padding:15px 20px;
    display:flex;
    align-items:center;
    gap:14px;
    direction:rtl;
    background:linear-gradient(135deg,var(--mi-surface-raised),color-mix(in srgb,var(--mi-surface-soft) 72%,transparent));
    border:1px solid var(--mi-border);
    border-radius:calc(var(--mi-card-radius) + 2px);
    box-shadow:var(--mi-shadow-soft);
    position:relative;
    overflow:hidden;
}
.mi-section-head::after{
    content:"";
    position:absolute;
    inset-inline-start:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:4px;
    background:var(--mi-accent);
    opacity:.92;
}
.mi-section-copy{flex:1 1 auto;min-width:0;padding-inline-start:3px}
.mi-section-title{
    margin:0!important;
    color:var(--mi-section-title-color,var(--mi-text));
    font-size:var(--mi-section-title-desktop)!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:0!important;
    text-align:right;
}
.mi-section-subtitle{
    margin-top:4px;
    color:var(--mi-section-subtitle-color,var(--mi-muted));
    font-size:11.5px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
}
.mi-section-more{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:38px;
    padding:10px 20px;
    border-radius:10px;
    border:0;
    background:var(--color-primary,#ff7100)!important;
    color:#fff!important;
    box-shadow:0 3px 10px color-mix(in srgb,var(--color-primary,#ff7100) 20%,transparent);
    font-size:var(--mi-more-desktop);
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    text-decoration:none!important;
    transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.mi-section-more:hover{
    background:color-mix(in srgb,var(--color-primary,#ff7100) 86%,#000)!important;
    transform:translateY(-1px);
}

/* ---------- Grid / rail shell ---------- */
.mi-items{
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    display:grid!important;
    grid-template-columns:repeat(var(--mi-cols-desktop),minmax(0,1fr))!important;
    gap:var(--mi-gap-desktop)!important;
    align-items:stretch;
    overflow:visible;
    list-style:none;
    direction:rtl;
}

/* Cards are LTR because title, artist, cover-to-copy flow and truncation are music metadata. */
.mi-card{
    position:relative;
    min-width:0;
    width:100%;
    margin:0!important;
    padding:0!important;
    color:var(--mi-text);
    border-radius:var(--mi-card-radius);
    direction:ltr!important;
    unicode-bidi:isolate;
}
.mi-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0!important;
    border:0!important;
}
.mi-cover-placeholder{
    display:block;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,var(--mi-surface-soft),color-mix(in srgb,var(--mi-accent) 10%,var(--mi-surface-soft)));
}

/* Metadata: always keep the beginning of a long title visible, ellipsis on the end. */
.mi-item-title,
.mi-item-title a,
.mi-item-artist,
.mi-item-artist a,
.mi-chart-stats{
    direction:ltr!important;
    unicode-bidi:isolate!important;
    text-align:left!important;
}
.mi-item-title{
    margin:0!important;
    padding:0!important;
    min-width:0;
    color:inherit;
    font-size:var(--mi-item-title-desktop)!important;
    font-weight:800!important;
    line-height:1.3!important;
    letter-spacing:0!important;
}
.mi-item-title a{
    color:inherit!important;
    display:block;
    width:100%;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mi-item-artist{
    margin-top:3px;
    min-width:0;
    max-width:100%;
    color:var(--mi-muted);
    font-size:12px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mi-item-artist a{color:inherit!important}.mi-artist-sep{opacity:.75}

/* ---------- Cover play overlay ----------
 * Geometry is owned entirely by the cover frame. No inherited Play Block /
 * Waveme pseudo element is allowed to affect the circle or icon alignment.
 */
.mi-cover-frame{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:var(--mi-surface-soft);
    isolation:isolate;
}
.mi-cover-frame>a{display:block;width:100%;height:100%}
.mi-cover-play{
    position:absolute!important;
    z-index:7;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    width:var(--mi-play-size)!important;
    height:var(--mi-play-size)!important;
    min-width:var(--mi-play-size)!important;
    min-height:var(--mi-play-size)!important;
    max-width:var(--mi-play-size)!important;
    max-height:var(--mi-play-size)!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:rgba(5,8,11,var(--mi-play-overlay-opacity));
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 5px 18px rgba(0,0,0,.22);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    overflow:hidden;
    pointer-events:none;
    direction:ltr!important;
    transition:background-color .18s ease,box-shadow .18s ease;
}
.mi-cover-frame:hover .mi-cover-play{
    background:rgba(5,8,11,.72);
    box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.mi-cover-play .mi-cover-play-button{
    appearance:none!important;
    -webkit-appearance:none!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    background-image:none!important;
    color:#fff!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    display:grid!important;
    place-items:center!important;
    box-shadow:none!important;
    cursor:pointer;
    border-radius:50%!important;
    pointer-events:auto;
    line-height:0!important;
    font-size:0!important;
    direction:ltr!important;
}
.mi-cover-play .mi-play-svg{
    grid-area:1 / 1;
    display:block!important;
    width:var(--mi-play-icon-size)!important;
    height:var(--mi-play-icon-size)!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    overflow:visible;
    pointer-events:none;
    transform:none!important;
}
.mi-cover-play .mi-play-svg-play{display:block!important}
.mi-cover-play .mi-play-svg-pause{display:none!important}
/* Playlist adds .active to the card's [data-play-id], not to our visible button. */
.mi-card.active .mi-cover-play .mi-play-svg-play{display:none!important}
.mi-card.active .mi-cover-play .mi-play-svg-pause{display:block!important}
.mi-music-loop .mi-play-proxy{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;width:0!important;height:0!important;overflow:hidden!important}
.mi-cover-play .mi-play-label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

/* ---------- Secondary action normalization ---------- */
.mi-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    direction:ltr!important;
    min-width:0;
    flex:0 0 auto;
}
.mi-action{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.mi-actions button,
.mi-actions .btn-download,
.mi-actions .mi-action-download,
.mi-music-loop .egraweb-track-download-btn{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    width:var(--mi-action-size)!important;
    height:var(--mi-action-size)!important;
    min-width:var(--mi-action-size)!important;
    max-width:var(--mi-action-size)!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:calc(var(--mi-action-size) * .3)!important;
    border:1px solid var(--mi-border)!important;
    color:var(--mi-text)!important;
    background:color-mix(in srgb,var(--mi-surface) 88%,transparent)!important;
    box-shadow:none!important;
    line-height:1!important;
    cursor:pointer;
}
.mi-actions button:hover,
.mi-actions .mi-action-download:hover{
    border-color:color-mix(in srgb,var(--mi-accent) 45%,var(--mi-border))!important;
    background:color-mix(in srgb,var(--mi-accent) 8%,var(--mi-surface))!important;
}
.mi-actions button svg,
.mi-actions .btn-download svg,
.mi-actions .mi-action-download svg{
    width:calc(var(--mi-action-size) * .5)!important;
    height:calc(var(--mi-action-size) * .5)!important;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}
.mi-actions .btn-like .count,
.mi-actions .btn-download .count{display:none!important}
.mi-actions .btn-like.active{color:var(--mi-accent)!important}
.mi-actions .mi-action-download{appearance:none;-webkit-appearance:none}
.mi-actions .mi-action-download svg{stroke:currentColor!important;fill:none!important}

/* ---------- A: Cinematic Poster ---------- */
.mi-card-cinematic{
    aspect-ratio:var(--mi-image-ratio);
    overflow:hidden;
    background:var(--mi-surface);
    border:1px solid var(--mi-border);
    box-shadow:var(--mi-shadow);
}
.mi-cinematic-media,
.mi-cinematic-media .mi-cover-link,
.mi-cinematic-media .mi-cover{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.mi-cinematic-shade{
    position:absolute;
    z-index:1;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.02) 26%,rgba(4,7,10,.13) 52%,rgba(4,7,10,.93) 100%);
    pointer-events:none;
}
.mi-cinematic-copy{
    position:absolute;
    z-index:4;
    left:11px;
    right:11px;
    bottom:10px;
    padding-right:0;
    color:#fff;
    min-width:0;
    text-shadow:0 1px 4px rgba(0,0,0,.34);
}
.mi-card-cinematic .mi-item-artist{color:rgba(255,255,255,.7)}
.mi-card-cinematic .mi-actions-overlay{
    position:absolute;
    z-index:8;
    top:9px;
    right:9px;
    gap:4px;
    padding:3px;
    border-radius:11px;
    background:rgba(5,8,11,.28);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.mi-card-cinematic .mi-actions-overlay button,
.mi-card-cinematic .mi-actions-overlay .mi-action-download{
    color:#fff!important;
    background:rgba(10,14,18,.46)!important;
    border-color:rgba(255,255,255,.10)!important;
}
.mi-card-cinematic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}

/* ---------- B: Compact Track ---------- */
.mi-card-tile{
    min-height:calc(var(--mi-cover-size) + 14px);
    display:grid!important;
    grid-template-columns:var(--mi-cover-size) minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    padding:7px!important;
    background:var(--mi-surface-raised);
    border:1px solid var(--mi-border);
    box-shadow:var(--mi-shadow-soft);
    overflow:hidden;
}
.mi-tile-cover{
    width:var(--mi-cover-size);
    height:var(--mi-cover-size);
    border-radius:calc(var(--mi-card-radius) - 4px);
}
.mi-tile-cover>a{overflow:hidden;border-radius:inherit}
.mi-tile-copy{min-width:0;align-self:center}
.mi-card-tile .mi-actions-compact{margin-left:auto}
.mi-card-tile:hover{border-color:color-mix(in srgb,var(--mi-accent) 22%,var(--mi-border))}

/* ---------- C: Editorial Wide ---------- */
.mi-card-editorial{
    aspect-ratio:var(--mi-image-ratio);
    overflow:hidden;
    background:#07090b;
    border:1px solid var(--mi-border);
    box-shadow:var(--mi-shadow);
}
.mi-editorial-media,
.mi-editorial-cover{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.mi-editorial-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.02) 20%,rgba(0,0,0,.14) 47%,rgba(2,5,8,.92) 100%);
    pointer-events:none;
}
.mi-editorial-copy{
    position:absolute;
    z-index:4;
    left:14px;
    right:14px;
    bottom:13px;
    color:#fff;
    min-width:0;
    text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.mi-editorial-mark{display:block;width:28px;height:3px;margin-bottom:8px;border-radius:4px;background:var(--mi-accent);box-shadow:0 0 14px color-mix(in srgb,var(--mi-accent) 55%,transparent)}
.mi-card-editorial .mi-item-title{font-size:calc(var(--mi-item-title-desktop) + 1px)!important}
.mi-card-editorial .mi-item-artist{color:rgba(255,255,255,.7)}
.mi-card-editorial .mi-actions-editorial{
    position:absolute;
    z-index:8;
    top:10px;
    right:10px;
    gap:4px;
    padding:3px;
    border-radius:11px;
    background:rgba(5,8,11,.30);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}
.mi-card-editorial .mi-actions-editorial button,
.mi-card-editorial .mi-actions-editorial .mi-action-download{color:#fff!important;background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.10)!important}

/* ---------- D: Top Chart ---------- */
.mi-card-chart{
    min-height:calc(var(--mi-cover-size) + 14px);
    display:grid!important;
    grid-template-columns:30px var(--mi-cover-size) minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    padding:7px 9px!important;
    background:var(--mi-surface-raised);
    border:1px solid var(--mi-border);
    box-shadow:var(--mi-shadow-soft);
    overflow:hidden;
}
.mi-rank{
    align-self:center;
    justify-self:center;
    color:var(--mi-accent);
    font-size:20px;
    font-weight:900;
    line-height:1;
    direction:ltr!important;
    font-variant-numeric:tabular-nums;
}
.mi-chart-cover{
    width:var(--mi-cover-size);
    height:var(--mi-cover-size);
    border-radius:calc(var(--mi-card-radius) - 5px);
}
.mi-chart-cover>a{overflow:hidden;border-radius:inherit}
.mi-chart-copy{min-width:0}
.mi-chart-stats{display:flex;align-items:center;gap:8px;color:var(--mi-muted);font-size:11px;white-space:nowrap}
.mi-chart-stats .play-count{display:inline-flex!important;align-items:center;gap:4px;margin:0!important}
.mi-chart-stats .play-count::before{content:"";display:block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;opacity:.75}
.mi-chart-stats .count{font-size:inherit!important;color:inherit!important;margin:0!important}
.mi-card-chart .mi-actions-chart{margin-left:auto}
.mi-card-chart:hover{border-color:color-mix(in srgb,var(--mi-accent) 20%,var(--mi-border))}

.mi-card.active{outline:1px solid color-mix(in srgb,var(--mi-accent) 62%,transparent);outline-offset:-1px}
.mi-blocks-empty{padding:14px;border:1px dashed rgba(130,140,150,.25);border-radius:10px;color:var(--mi-muted)}

@media (max-width:999px){
    .mi-items{grid-template-columns:repeat(var(--mi-cols-tablet),minmax(0,1fr))!important;gap:var(--mi-gap-tablet)!important}
}

@media (max-width:576px){
    .mi-music-loop{
        --mi-image-ratio:var(--mi-image-ratio-mobile,var(--mi-image-ratio-desktop,1));
        --mi-cover-size:var(--mi-cover-size-mobile,var(--mi-cover-size-desktop,64px));
        --mi-action-size:var(--mi-action-size-mobile,var(--mi-action-size-desktop,32px));
        --mi-play-size:var(--mi-play-size-mobile,var(--mi-play-size-desktop,36px));
        --mi-play-icon-size:var(--mi-play-icon-mobile,var(--mi-play-icon-desktop,62%));
    }
    .mi-section-head{min-height:var(--mi-header-height-mobile,80px);margin-bottom:10px;padding:15px 20px;border-radius:10px}
    .mi-section-title{font-size:var(--mi-section-title-mobile)!important}
    .mi-section-subtitle{font-size:11px;margin-top:4px}
    .mi-section-more{min-height:38px;padding:10px 20px;border-radius:10px;font-size:var(--mi-more-mobile)}
    .mi-items{grid-template-columns:repeat(var(--mi-cols-mobile),minmax(0,1fr))!important;gap:var(--mi-gap-mobile)!important;padding:0!important;margin:0!important}
    .mi-card .mi-item-title{font-size:var(--mi-item-title-mobile)!important}

    /* Mobile rail contract: keep the Gutenberg/Waveme block width untouched.
     * Only the scrolling viewport becomes full-bleed, exactly like the site's
     * native Loop/Play shelves: section header stays aligned to the page grid,
     * while cards can continue naturally to the physical screen edge. */
    .mi-music-loop.mi-mobile-rail .mi-items{
        --mi-rail-gutter:var(--x-gap,1rem);
        display:grid!important;
        grid-auto-flow:column!important;
        grid-auto-columns:var(--mi-mobile-basis)!important;
        grid-template-columns:none!important;
        gap:var(--mi-gap-mobile)!important;
        width:100vw!important;
        width:100dvw!important;
        max-width:none!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        padding:0 var(--mi-rail-gutter) 5px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scroll-snap-type:none!important;
        scroll-padding-inline:var(--mi-rail-gutter);
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        touch-action:pan-x pan-y;
    }
    .mi-music-loop.mi-mobile-rail.mi-rail-edge-fade[dir="rtl"] .mi-items{
        -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--mi-rail-fade-size),#000 100%);
        mask-image:linear-gradient(to right,transparent 0,#000 var(--mi-rail-fade-size),#000 100%);
    }
    .mi-music-loop.mi-mobile-rail.mi-rail-edge-fade[dir="ltr"] .mi-items{
        -webkit-mask-image:linear-gradient(to left,transparent 0,#000 var(--mi-rail-fade-size),#000 100%);
        mask-image:linear-gradient(to left,transparent 0,#000 var(--mi-rail-fade-size),#000 100%);
    }
    .mi-music-loop.mi-mobile-rail .mi-items::-webkit-scrollbar{display:none}
    .mi-music-loop.mi-mobile-rail .mi-card{scroll-snap-align:start;scroll-snap-stop:normal;min-width:0;width:auto!important}
    .mi-music-loop.mi-mobile-list .mi-items{grid-template-columns:1fr!important}

    .mi-cinematic-copy{left:9px;right:9px;bottom:8px}
    .mi-card-cinematic .mi-item-artist{font-size:11px}
    .mi-card-cinematic .mi-actions-overlay{top:7px;right:7px;gap:3px;padding:2px}

    .mi-card-tile{min-height:calc(var(--mi-cover-size) + 12px);grid-template-columns:var(--mi-cover-size) minmax(0,1fr) auto;gap:9px;padding:6px!important}
    .mi-card-tile .mi-item-artist{font-size:12px}

    .mi-editorial-copy{left:11px;right:11px;bottom:10px}
    .mi-editorial-mark{width:22px;height:2px;margin-bottom:6px}
    .mi-card-editorial .mi-item-title{font-size:var(--mi-item-title-mobile)!important}
    .mi-card-editorial .mi-item-artist{font-size:11px}
    .mi-card-editorial .mi-actions-editorial{top:8px;right:8px;gap:3px;padding:2px}

    .mi-card-chart{min-height:calc(var(--mi-cover-size) + 12px);grid-template-columns:28px var(--mi-cover-size) minmax(0,1fr) auto;gap:8px;padding:6px 7px!important}
    .mi-rank{font-size:18px}
    .mi-chart-stats{display:none}
}

/* Very narrow phones: keep actions usable without sacrificing the metadata start. */
@media (max-width:390px){
    .mi-card-tile{gap:7px}
    .mi-card-tile .mi-actions-compact,
    .mi-card-chart .mi-actions-chart{gap:3px}
    .mi-card-chart{grid-template-columns:24px var(--mi-cover-size) minmax(0,1fr) auto;gap:6px}
}

/* Gutenberg preview isolation.
 * The outer useBlockProps wrapper owns editor alignment. ServerSideRender is
 * intentionally rendered without an inner align class, so full/wide margins
 * are never applied twice inside the editor canvas.
 */
.editor-styles-wrapper .mi-editor-shell > .mi-music-loop{
    width:auto!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
}
.editor-styles-wrapper .mi-items{margin-left:0!important;margin-right:0!important}

/* Gutenberg inspector helpers (unique admin-only class names). */
.mi-mib-term-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mi-mib-term-chips .components-button{max-width:100%;height:auto;min-height:28px;white-space:normal;text-align:start}
.mi-mib-term-loading{display:flex;align-items:center;gap:7px;margin:-4px 0 10px;color:#757575;font-size:12px}
.mi-mib-term-loading .components-spinner{margin:0}


/* ==========================================================================
   MusicInsight — Daily Artist Pick
   Personalized for signed-in listeners, chart-based fallback for guests.
   The site shell remains RTL; music metadata remains LTR.
   ========================================================================== */
.mi-daily-artist{
    --mi-surface:#fff;
    --mi-surface-soft:#f4f5f6;
    --mi-surface-raised:#fff;
    --mi-border:rgba(18,22,27,.10);
    --mi-text:#171a1f;
    --mi-muted:#727982;
    --mi-accent:var(--color-primary,#ff7100);
    --mi-shadow:0 10px 30px rgba(18,22,27,.08);
    --mi-shadow-soft:0 3px 14px rgba(18,22,27,.07);
    --mi-play-size:var(--mi-play-size-desktop,40px);
    --mi-play-icon-size:var(--mi-play-icon-desktop,64%);
    --mi-action-size:var(--mi-action-size-desktop,30px);
    --mi-daily-avatar:var(--mi-daily-avatar-desktop,96px);
    --mi-daily-ratio:var(--mi-daily-ratio-desktop,1);
    width:auto;
    min-width:0;
    position:relative;
    isolation:isolate;
    box-sizing:border-box;
    overflow:visible;
}
.dark .mi-daily-artist{
    --mi-surface:#101316;
    --mi-surface-soft:#171b1f;
    --mi-surface-raised:#0c1013;
    --mi-border:rgba(255,255,255,.075);
    --mi-text:#fff;
    --mi-muted:rgba(255,255,255,.62);
    --mi-shadow:0 12px 34px rgba(0,0,0,.22);
    --mi-shadow-soft:0 3px 14px rgba(0,0,0,.18);
}
.mi-daily-artist *,
.mi-daily-artist *::before,
.mi-daily-artist *::after{box-sizing:border-box}
.mi-daily-artist a{text-decoration:none}

/* Match the exact Gutenberg/Waveme width contract used by the normal loop. */
.mi-daily-artist.alignfull{
    width:auto!important;
    max-width:none!important;
    margin-left:2rem!important;
    margin-right:2rem!important;
}
.mi-daily-artist.alignwide{min-width:0}

/* Artist portrait + ribbon. Portrait stays inside the block boundary and the
 * ribbon slides underneath it, so none/wide/full can never overflow sideways. */
.mi-daily-artist-head{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--mi-daily-avatar);
    grid-template-rows:auto;
    align-items:center;
    direction:ltr;
    position:relative;
    margin:0 0 15px;
    padding:5px 0;
    overflow:visible;
}
.mi-daily-artist-avatar{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    position:relative;
    z-index:4;
    transform:none;
    width:var(--mi-daily-avatar);
    height:var(--mi-daily-avatar);
    display:grid;
    place-items:center;
    border-radius:50%;
    overflow:hidden;
    border:2px solid color-mix(in srgb,var(--mi-accent) 55%,var(--mi-border));
    background:var(--mi-surface-soft);
    box-shadow:0 8px 28px rgba(0,0,0,.16),0 0 0 5px color-mix(in srgb,var(--mi-surface) 72%,transparent);
    color:var(--mi-text)!important;
}
.mi-daily-artist-avatar img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0!important;
}
.mi-daily-artist-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 32% 27%,hsla(var(--mi-artist-hue),75%,62%,.36),transparent 43%),
        linear-gradient(145deg,hsl(var(--mi-artist-hue) 34% 22%),var(--mi-surface-soft));
    color:#fff;
    font:800 calc(var(--mi-daily-avatar) * .28)/1 Arial,Helvetica,sans-serif;
}
.mi-daily-artist-ribbon{
    grid-column:1 / 3;
    grid-row:1;
    align-self:center;
    position:relative;
    z-index:1;
    min-width:0;
    min-height:calc(var(--mi-daily-avatar) * .70);
    margin-right:calc(var(--mi-daily-avatar) * .50);
    padding:11px calc(var(--mi-daily-avatar) * .62) 11px 14px;
    display:flex;
    flex-direction:row;
    direction:rtl;
    align-items:center;
    gap:15px;
    overflow:hidden;
    border:1px solid var(--mi-border);
    border-radius:16px 11px 11px 16px;
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--mi-accent) 3%,var(--mi-surface-raised)),var(--mi-surface-raised) 56%),
        var(--mi-surface-raised);
    box-shadow:var(--mi-shadow-soft);
}
.mi-daily-artist-ribbon::after{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    bottom:11px;
    width:3px;
    border-radius:999px;
    background:var(--mi-accent);
    opacity:.95;
}
.mi-daily-artist-copy{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    gap:3px;
    text-align:right;
}
.mi-daily-artist-kicker{
    color:var(--mi-accent);
    font-size:10px;
    font-weight:800;
    line-height:1.25;
}
.mi-daily-artist-copy h2{
    margin:0!important;
    padding:0!important;
    color:var(--mi-text);
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.28!important;
    text-align:right;
    letter-spacing:0!important;
}
.mi-daily-artist-copy h2 bdi{
    unicode-bidi:isolate;
    font-family:inherit;
}
.mi-daily-artist-reason{
    min-width:0;
    color:var(--mi-muted);
    font-size:11px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mi-daily-artist-profile{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:38px;
    padding:10px 16px;
    border:0;
    border-radius:10px;
    background:var(--color-primary,#ff7100)!important;
    color:#fff!important;
    box-shadow:0 3px 10px color-mix(in srgb,var(--color-primary,#ff7100) 20%,transparent);
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
    text-decoration:none!important;
}
.mi-daily-artist-profile:hover{
    background:color-mix(in srgb,var(--color-primary,#ff7100) 86%,#000)!important;
}

/* Track shelf */
.mi-daily-tracks{
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    display:grid!important;
    grid-template-columns:repeat(var(--mi-daily-cols-desktop),minmax(0,1fr))!important;
    gap:var(--mi-daily-gap-desktop)!important;
    direction:rtl;
    align-items:stretch;
    overflow:visible;
}
.mi-daily-track-card{
    position:relative;
    min-width:0;
    width:100%;
    overflow:hidden;
    direction:ltr!important;
    unicode-bidi:isolate;
    background:var(--mi-surface-raised);
    border:1px solid var(--mi-border);
    border-radius:var(--mi-card-radius);
    box-shadow:var(--mi-shadow-soft);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mi-daily-track-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--mi-accent) 24%,var(--mi-border));
    box-shadow:var(--mi-shadow);
}
.mi-daily-track-media{
    width:100%;
    aspect-ratio:var(--mi-daily-ratio);
    border-radius:calc(var(--mi-card-radius) - 1px) calc(var(--mi-card-radius) - 1px) 0 0;
    overflow:hidden;
}
.mi-daily-track-media>a{
    width:100%;
    height:100%;
    display:block;
}
.mi-daily-track-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0!important;
    border:0!important;
}
.mi-daily-track-body{
    min-width:0;
    min-height:54px;
    padding:9px 9px 10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    direction:ltr!important;
}
.mi-daily-track-copy{
    min-width:0;
    display:grid;
    align-content:center;
}
.mi-daily-track-card .mi-item-title{
    min-width:0;
    color:var(--mi-text);
    font-size:var(--mi-item-title-desktop)!important;
}
.mi-daily-track-card .mi-item-artist{font-size:11px}
.mi-daily-track-count{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:4px;
    color:var(--mi-muted);
    font-size:10px;
    line-height:1;
    white-space:nowrap;
}
.mi-daily-track-count span{font-size:8px;opacity:.7}
.mi-daily-track-actions{
    justify-content:flex-end;
    gap:4px;
}
.mi-daily-artist .mi-play-proxy{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    position:absolute!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;
}
.mi-daily-artist .egraweb-track-download-btn{display:inline-flex!important}

@media (max-width:999px){
    .mi-daily-tracks{
        grid-template-columns:repeat(var(--mi-daily-cols-tablet),minmax(0,1fr))!important;
        gap:var(--mi-daily-gap-tablet)!important;
    }
}

@media (max-width:576px){
    .mi-daily-artist{
        --mi-play-size:var(--mi-play-size-mobile,var(--mi-play-size-desktop,40px));
        --mi-play-icon-size:var(--mi-play-icon-mobile,var(--mi-play-icon-desktop,64%));
        --mi-action-size:var(--mi-action-size-mobile,var(--mi-action-size-desktop,30px));
        --mi-daily-avatar:var(--mi-daily-avatar-mobile,var(--mi-daily-avatar-desktop,96px));
        --mi-daily-ratio:var(--mi-daily-ratio-mobile,var(--mi-daily-ratio-desktop,1));
    }
    .mi-daily-artist-head{margin-bottom:11px;padding:3px 0}
    .mi-daily-artist-ribbon{
        min-height:calc(var(--mi-daily-avatar) * .76);
        margin-right:calc(var(--mi-daily-avatar) * .50);
        padding:9px calc(var(--mi-daily-avatar) * .64) 9px 10px;
        gap:8px;
        border-radius:14px 10px 10px 14px;
    }
    .mi-daily-artist-copy{gap:2px}
    .mi-daily-artist-kicker{font-size:8.5px}
    .mi-daily-artist-copy h2{font-size:15px!important;line-height:1.25!important}
    .mi-daily-artist-reason{font-size:9.5px}
    .mi-daily-artist-profile{
        min-height:34px;
        padding:8px 11px;
        font-size:9.5px;
        border-radius:10px;
    }
    .mi-daily-tracks{
        grid-template-columns:repeat(var(--mi-daily-cols-mobile),minmax(0,1fr))!important;
        gap:var(--mi-daily-gap-mobile)!important;
    }

    /* The Daily Artist header keeps the exact Gutenberg/Waveme block width.
     * Only the track shelf is full-bleed on phones. This mirrors the native
     * Play/Loop experience without mutating the root block geometry. */
    .mi-daily-artist.mi-daily-mobile-rail .mi-daily-tracks{
        --mi-daily-rail-gutter:var(--x-gap,1rem);
        display:grid!important;
        grid-auto-flow:column!important;
        grid-auto-columns:var(--mi-daily-mobile-basis)!important;
        grid-template-columns:none!important;
        gap:var(--mi-daily-gap-mobile)!important;
        width:100vw!important;
        width:100dvw!important;
        max-width:none!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        padding:0 var(--mi-daily-rail-gutter) 5px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scroll-snap-type:none!important;
        scroll-padding-inline:var(--mi-daily-rail-gutter);
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        touch-action:pan-x pan-y;
    }
    .mi-daily-artist.mi-daily-mobile-rail .mi-daily-tracks::-webkit-scrollbar{display:none}
    .mi-daily-artist.mi-daily-mobile-rail .mi-daily-track-card{
        width:auto!important;
        min-width:0;
        scroll-snap-align:start;
        scroll-snap-stop:normal;
    }
    .mi-daily-track-card .mi-item-title{font-size:var(--mi-item-title-mobile)!important}
    .mi-daily-track-body{min-height:50px;padding:8px}
    .mi-daily-track-card .mi-item-artist{font-size:10.5px}
}

@media (max-width:390px){
    .mi-daily-artist-profile{display:none}
    .mi-daily-track-body{gap:5px}
    .mi-daily-track-actions{gap:3px}
}

/* ServerSideRender is nested inside a Gutenberg alignment wrapper in editor. */
.editor-styles-wrapper .mi-daily-editor-shell > .mi-daily-artist{
    width:auto!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
}
.editor-styles-wrapper .mi-daily-tracks{margin-left:0!important;margin-right:0!important}


/* 0.7.3 — Exact native Play Block title rail on phones.
 *
 * Egraweb's real mobile `.block-loop-title` resolves to a physical 20px gap
 * from both viewport edges, independent of Gutenberg None/Wide/Full alignment.
 * Do not subtract Waveme's 5vw gutter a second time: that was the 0.7.2 bug
 * that made our title boxes visibly narrower than the native Play Block.
 *
 * The root block and its content/rail geometry are untouched. Only the title
 * surface gets the native physical rail. `margin-right` compensates for the
 * centered Gutenberg parent in RTL and works for None/Wide/Full alike.
 */
@media (max-width:576px){
    .mi-music-loop .mi-section-head,
    .mi-daily-artist .mi-daily-artist-head{
        width:calc(100dvw - 40px)!important;
        max-width:none!important;
        margin-left:auto!important;
        margin-right:calc(50% - 50dvw + 20px)!important;
        left:auto!important;
        right:auto!important;
        transform:none!important;
    }
    .mi-music-loop .mi-section-head{margin-bottom:10px!important;}
    .mi-daily-artist .mi-daily-artist-head{margin-bottom:11px!important;}
}