/*
    Aside skill menu (templates/fragments/_skill_menu.html.twig): exclusive <details name="skill-menu"> accordion
    section → chapters, with a progress ring per section (--p: percent). Only the summary is a white card,
    the chapters unfold below it on the aside background.
    Interactions are CSS-only. See doc/features/skill-menu.md.
*/

.skill-menu {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-align: left;
    line-height: 1.35;

    /* Section colour */
    & [data-s="algebre"] { --c: #7c3aed; }
    & [data-s="arithmetique"] { --c: #2c7be5; }
    & [data-s="geometrie"] { --c: #0d9488; }
    & [data-s="probabilite"] { --c: #f88800; }
    & [data-s="statistique"] { --c: #e63757; }
    & [data-s="technologie"] { --c: #0a2c62; }

    & summary {
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }
    }

    & summary:focus-visible,
    & a:focus-visible {
        outline: 2px solid var(--blue-light);
        outline-offset: 2px;
    }

    & :where(ul) {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & li {
        margin: 0;
    }

    & details[open] > :not(summary) {
        animation: skill-menu-in 0.25s ease;
    }
}

@keyframes skill-menu-in {
    from {
        opacity: 0;
        translate: 0 -0.4rem;
    }
}

.skill-menu-head {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    color: var(--blue-dark);
    background-color: #fff;
    border-radius: 1.6rem;
    box-shadow: var(--shadow);
    user-select: none;
}

.skill-menu-ring {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 14%, #fff) 0);

    &.is-guest {
        background: none;
        border: 2px dashed var(--grey-light);
    }
}

.skill-menu-ring-in {
    display: grid;
    place-items: center;
    width: calc(100% - 0.8rem);
    height: calc(100% - 0.8rem);
    color: var(--c);
    background-color: #fff;
    border-radius: 50%;

    & svg {
        width: 2.2rem;
        height: 2.2rem;
    }
}

.skill-menu-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.skill-menu-title {
    font-size: 1.6rem;
    font-weight: 700;
}

.skill-menu-sub {
    color: var(--grey-blue);
    font-size: 1.2rem;

    & b {
        color: var(--c);
    }
}

/* Chevron drawn with borders, rotates when its <details> is open */
.skill-menu-chev {
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 0.4rem 0.3rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    opacity: 0.55;
    transition: rotate 0.2s ease, margin 0.2s ease;

    details[open] > summary & {
        rotate: 225deg;
        margin-bottom: -0.3rem;
    }
}

.skill-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1.2rem 0 0.4rem;
}

.skill-menu-ch {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.8rem;
    padding: 0.7rem 0.6rem;
    color: var(--grey-blue-dark);
    font-size: 1.45rem;
    border-radius: 0.8rem;

    &:hover {
        color: var(--blue-dark);
        background-color: #fff;
    }
}

.skill-menu-ch-icon {
    display: flex;
    color: var(--c);

    & svg {
        width: 2rem;
        height: 2rem;
    }
}

.skill-menu-count {
    color: var(--grey-blue);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    .is-complete & {
        color: var(--c);
    }
}

.skill-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    margin: 0.4rem 1.2rem 0;
    padding: 0.8rem;
    color: #fff;
    background-color: var(--c);
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: 99px;

    &:hover {
        color: #fff;
        filter: brightness(1.1);
    }
}