/*
 * music-cover-crop.css — the upload + square-crop modal
 * (M.openCoverCropper in music-cover-crop.js). Colors, durations, and
 * easings come exclusively from site.css tokens (CLAUDE.md rule). Radii
 * are literal px to match the rest of the music CSS, which hardcodes
 * them (there is no --radius token).
 *
 * z-index: the backdrop sits at 210 — above .ms-context-menu (200) and
 * the discover sticky chrome (200) so the cropper is never occluded by a
 * menu that opened it.
 */
.ms-cover-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--scrim-strong);
    /* backdrop-filter intentionally only here in the always-present open
       state (the modal is added to the DOM already-open and removed on
       close), so the Chrome "stuck backdrop on hidden element" quirk that
       .ms-drop-overlay / .overlay guard against can't apply. */
    backdrop-filter: blur(3px);
}

.ms-cover-modal__dialog {
    width: min(460px, 100%);
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Spring-in from slightly small + low. .is-open is added on the next
       frame so the transition runs. */
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition: opacity var(--dur-fast) var(--ease-smooth),
                transform var(--dur-med) var(--ease-spring);
}
.ms-cover-modal__dialog.is-open {
    opacity: 1;
    transform: none;
}

.ms-cover-modal__head {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--rule);
}
.ms-cover-modal__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg);
}

.ms-cover-modal__body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* The stage IS the crop frame — what you see is exactly what's exported.
   Square, capped so the dialog fits small viewports. */
.ms-cover-modal__stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    border: 1px solid var(--rule);
}
.ms-cover-modal__stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;     /* we own pan/zoom gestures */
    cursor: grab;
}
.ms-cover-modal__stage canvas:active { cursor: grabbing; }

.ms-cover-modal__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--fg-muted);
    font-size: 0.82rem;
    pointer-events: none;
}
/* Once an image is loaded the canvas covers the frame — hide the prompt. */
.ms-cover-modal__stage[data-empty="false"] .ms-cover-modal__placeholder { display: none; }
.ms-cover-modal__stage[data-empty="false"] canvas { cursor: grab; }
.ms-cover-modal__stage[data-empty="true"] canvas { cursor: default; }

.ms-cover-modal__controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 320px;
}
.ms-cover-modal__zoom-label {
    color: var(--fg-muted);
    font-size: 1rem;
    width: 1ch;
    text-align: center;
    user-select: none;
}
.ms-cover-modal__zoom {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Plain text button to (re)pick a file. */
.ms-cover-modal__pick {
    background: none;
    border: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.ms-cover-modal__pick:hover { text-decoration: underline; }
.ms-cover-modal__pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ms-cover-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid var(--rule);
}