/*
 * PokeTeamOn M5.6 R7
 * Human-requested visual parity for the EXPLAIN collapse control.
 * Presentation only. No JS and no runtime behavior changes.
 */

/*
 * R5 deliberately used a purple/lilac full-width treatment.
 * R7 supersedes only that visual treatment so EXPLAIN reads like
 * the existing compact Collapse controls elsewhere in Builder.
 */
details[data-m55-explain-details] > summary {
    width: fit-content !important;
    max-width: 100% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.55rem !important;

    padding: 0.55rem 0.72rem !important;

    border: 1px solid #D7DCE5 !important;
    border-radius: 999px !important;

    background: #F8FAFC !important;
    color: #111827 !important;

    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;
}

details[data-m55-explain-details] > summary:hover {
    background: #F1F5F9 !important;
}

details[data-m55-explain-details] > summary::after {
    width: 1.65rem !important;
    height: 1.65rem !important;
    flex: 0 0 1.65rem !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #D7DCE5 !important;
    border-radius: 999px !important;

    background: #FFFFFF !important;
    color: #6D28D9 !important;

    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Preserve the explicit R5 +/- state contract. */
details[data-m55-explain-details]:not([open]) > summary::after {
    content: "+" !important;
}

details[data-m55-explain-details][open] > summary::after {
    content: "−" !important;
}

/* Keep the old R2 chevron visually superseded. */
details[data-m55-explain-details] > summary .m56r2-main-explain-chevron {
    display: none !important;
}

@media (max-width: 640px) {
    details[data-m55-explain-details] > summary {
        width: fit-content !important;
        max-width: 100% !important;
    }
}