/*
    Exercise list of the chapter and strategy pages (fragment _exercise_list): global gauge, topic cards with a progress ring, checklist of « fiches ».
    The `cl-` prefix stands for checklist. Plain layout, typography and colors are utilities in the markup; only what they cannot express lives here.
    👉 doc/features/exercise-list.md
*/

.cl {
    margin-top: 1.6rem;
    gap: 3.6rem;
    line-height: 1.35;

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

    & li {
        margin: 0;
    }

    & a {
        text-decoration: none;
    }

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

/* Global gauge: half-dial with a needle, white track so it stays visible on the --blue-grey page at 0 */
.cl-gauge {
    width: 15rem;

    & path {
        fill: none;
        stroke-width: 18;
        stroke-linecap: round;
    }

    & text {
        fill: var(--grey-blue);
        font: 700 12px var(--font-title);
        text-anchor: middle;
    }

    & .cl-gauge-track {
        stroke: #fff;
    }

    & .cl-gauge-fill {
        stroke: var(--green);
    }

    & .cl-gauge-needle {
        stroke: var(--blue-dark);
        stroke-width: 4;
        stroke-linecap: round;
    }

    & .cl-gauge-hub {
        fill: var(--blue-dark);
    }
}

/* Topic header: white card with a progress ring, as the aside menu sections */
.cl-head {
    padding: 0.9rem 1.2rem;
    border-radius: 1.6rem;
}

.cl-ring {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    background: conic-gradient(var(--green) calc(var(--p) * 1%), color-mix(in srgb, var(--green) 14%, #fff) 0);
    border-radius: 50%;

    & span {
        display: grid;
        place-items: center;
        width: calc(100% - 0.8rem);
        height: calc(100% - 0.8rem);
        color: var(--blue-dark);
        background-color: #fff;
        font-size: 1.05rem;
        font-weight: 700;
        border-radius: 50%;
    }
}

.cl-head-text {
    gap: 0.2rem;
}

.cl-list {
    gap: 0.2rem;
    margin: 1.2rem 0 0.4rem;
}

/* Checklist row: 48 px touch target */
.cl-row {
    gap: 1.2rem;
    color: var(--black-blue);
    min-height: 4.8rem;
    padding: 1.1rem 0.8rem;
    border-radius: 0.8rem;
    transition: background-color 0.15s ease;

    &:hover {
        background-color: var(--white-blue);
    }

    /* In progress: box filled from the bottom by a third or two thirds */
    &.is-q1 { --q: 33.34; }
    &.is-q2 { --q: 66.67; }
}

.cl-box {
    position: relative;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--grey-light);
    border-radius: 0.5rem;

    :is(.is-q1, .is-q2) > & {
        border-color: var(--orange-dark);
        background: linear-gradient(to top, var(--orange) calc(var(--q) * 1%), #fff 0);
    }

    .is-ok > & {
        background-color: var(--green);
        border-color: var(--green);

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 42%;
            width: 0.45rem;
            height: 0.9rem;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            translate: -50% -50%;
            rotate: 45deg;
        }
    }
}

.cl-title {
    text-wrap: pretty;
}

/* Right cell: an icon (brevet diploma, strategy target) instead of the grade level */
.cl-lv.is-icon svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}