/* Online MIDI player. Built on the simpleSPU page's stickers, keys and tags
   (/simplespu/retro.css), like the seamless loop maker. */

.mp-page [hidden] { display: none !important; }

/* ── Intro ── */
main > section.mp-intro {
    display: grid;
    justify-items: start;
    gap: 16px;
    max-width: 860px;
    padding-bottom: 32px;
}

.mp-intro .section-text { max-width: 40em; }
.mp-intro .section-text a { color: var(--link); font-weight: 700; }

/* ── The player ── */
main > section.mp-app {
    display: grid;
    gap: 20px;
    max-width: 860px;
    padding: 24px;
}

.mp-drop {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 30px 20px;
    text-align: center;
    background: var(--panel-raised);
    border: var(--line) dashed var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, padding 0.2s ease;
}

.mp-drop.is-dragging { background: var(--teal-light); }

.mp-drop-icon { width: 36px; height: 40px; color: var(--teal); }
.mp-drop.is-dragging .mp-drop-icon { color: var(--ink); }
.mp-drop-title { font-weight: 700; font-size: 1.1rem; }

.mp-drop-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Once a song is in, the drop zone shrinks to a strip. */
.mp-drop.is-compact {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    padding: 12px 14px 12px 18px;
    text-align: left;
}

.mp-drop.is-compact .mp-drop-icon { display: none; }
.mp-drop.is-compact .mp-drop-title { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.mp-drop.is-compact .mp-drop-actions { justify-content: flex-end; }
.mp-drop.is-compact .button { padding: 9px 14px 8px; font-size: 0.92rem; }

.mp-note {
    padding: 12px 14px;
    font-weight: 500;
    background: var(--cream);
    color: var(--ink);
    border: var(--line) solid var(--ink);
    border-radius: 10px;
}

.mp-note[data-tone="error"] { background: #ffd9cb; }

.mp-player { display: grid; gap: 16px; }

/* The song on a little teal screen. */
.mp-screen {
    display: grid;
    gap: 8px;
    padding: 12px 12px 10px;
    color: var(--screen-text);
    background: var(--screen);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18);
}

.mp-screen-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.mp-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.mp-time { flex: none; font: 700 0.9rem/1 var(--font-body); font-variant-numeric: tabular-nums; }

.mp-roll {
    position: relative;
    margin-top: 6px;
    cursor: ew-resize;
    touch-action: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
}

.mp-roll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mp-roll-canvas { display: block; width: 100%; height: 120px; }

.mp-playhead {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    width: 3px;
    margin-left: -1.5px;
    background: var(--cream);
    box-shadow: 0 0 0 1px var(--ink);
    pointer-events: none;
}

.mp-playhead::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 13px;
    height: 10px;
    margin-left: -6.5px;
    background: var(--cream);
    border: 1.5px solid var(--ink);
    border-radius: 3px;
}

.mp-roll.is-dragging .mp-playhead,
.mp-roll.is-dragging .mp-playhead::before { background: var(--accent-light); }

.mp-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 1.4em;
    font-size: 0.85rem;
    opacity: 0.85;
}

.mp-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mp-progress {
    flex: 1 1 80px;
    max-width: 200px;
    height: 8px;
    border: 1.5px solid var(--screen-text);
    border-radius: 3px;
    overflow: hidden;
}

.mp-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--screen-text);
    transition: width 0.15s linear;
}

/* Buttons and the reverb switch. */
.mp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.mp-play { min-width: 128px; }
.mp-play[disabled] { opacity: 0.55; cursor: progress; }
.mp-key-icon { width: 10px; height: 14px; }
.key[aria-pressed="true"] { background: var(--teal-light); }

.mp-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    font-weight: 700;
    cursor: pointer;
}

.mp-check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* SoundFont choice. */
.mp-sound {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 14px;
}

.mp-sound-label { font-weight: 700; }

.mp-sound-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px 7px;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--cream);
    color: var(--ink);
    border: var(--line) solid var(--ink);
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--ink);
    cursor: pointer;
}

.mp-radio:has(input:checked) { background: var(--accent-light); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.mp-radio:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.mp-radio input { width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.mp-radio span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-radio small { font-weight: 500; opacity: 0.75; margin-left: 4px; }

/* Instruments: a list of channels with a light each, folded away by default. */
.mp-more {
    border-top: var(--line) dashed var(--dim);
    padding-top: 12px;
}

.mp-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.mp-more > summary::-webkit-details-marker { display: none; }

.mp-more > summary::before {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: transform 0.15s ease;
}

.mp-more[open] > summary::before { transform: rotate(90deg); }
.mp-more summary span { color: var(--muted); font-weight: 500; }
.mp-more-help { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }

.mp-channels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin-top: 10px;
    list-style: none;
}

.mp-channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font: 500 0.9rem/1.2 var(--font-body);
    color: var(--text);
    text-align: left;
    background: var(--panel-raised);
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    cursor: pointer;
}

.mp-channel[aria-pressed="false"] { opacity: 0.5; text-decoration: line-through; }

.mp-light {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    background: var(--track);
    transition: background-color 0.06s linear;
}

.mp-channel.is-active .mp-light { background: var(--channel-colour); box-shadow: 0 0 6px var(--channel-colour); }
.mp-channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-channel-number { font-size: 0.75rem; color: var(--muted); }

/* ── simpleSF2, one compact strip ── */
.mp-cta {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    max-width: 860px;
    margin: 28px auto 0;
    padding: 16px 20px;
    width: calc(100% - 2 * var(--gutter));
}

.mp-cta img { width: 44px; height: 44px; }
.mp-cta-text { font-size: 0.97rem; line-height: 1.45; }

/* ── Content below the tool ── */
.mp-how .feature-card a { color: var(--link); font-weight: 700; }
.mp-guides { margin-top: 28px; color: var(--muted); }
.mp-guides a { color: var(--link); font-weight: 700; }

@media (max-width: 640px) {
    main > section.mp-app { padding: 16px; gap: 16px; }
    .mp-drop { padding: 22px 14px; }
    .mp-drop-actions, .mp-drop-actions > * { width: 100%; }
    .mp-drop.is-compact { grid-template-columns: minmax(0, 1fr); }
    .mp-drop.is-compact .mp-drop-actions { justify-content: flex-start; }
    .mp-drop.is-compact .mp-drop-actions > * { width: auto; flex: 1 1 auto; }
    .mp-roll-canvas { height: 96px; }
    .mp-play { flex: 1 1 auto; }
    .mp-sound { grid-template-columns: minmax(0, 1fr); }
    .mp-radio { flex: 1 1 100%; }
    .mp-channels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mp-cta { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
    .mp-cta > .button { grid-column: 1 / -1; width: 100%; }
}