/* A programme's page, for a learner (course/parts/program-entry.php): the course picker the entry bar
 * opens (Figma "Program Page" P01.12-P01.17) and the question before leaving (P01.20). The bar itself
 * is the course page's (entry.css); the picker's shell is the page's dialog (dialog.css).
 */

/* ---- the course picker ---- */
.cil-program-choose { display: flex; flex-direction: column; gap: 16px; padding: 40px 44px 32px; background: var(--cil-white); text-align: start; }
.cil-program-choose:not([open]) { display: none; }
.cil-program-choose__head { display: flex; align-items: center; gap: 12px; padding-inline-end: 44px; }
.cil-program-choose__trophy { flex: none; width: 32px; height: 32px; }
.cil-program-choose__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.2; }
.cil-course .cil-program-choose__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--cil-black-dark-4); text-wrap: balance; }
.cil-course .cil-program-choose__lead { margin: 0; font-size: 16px; line-height: 1.2; color: var(--cil-black-regular-7); }

.cil-program-choose__progress { display: flex; flex-direction: column; gap: 8px; }
.cil-program-choose__track { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--cil-black-light-2); }
.cil-program-choose__track > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: var(--cil-green); }
.cil-course .cil-program-choose__progress p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--cil-blue-dark-1); }
.cil-course .cil-program-choose__error { margin: 0; font-size: 14px; color: var(--cil-red-regular-7); }

.cil-program-choose__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

/* One course: its step or medal, its name and where the learner stands, and its ways in at the end. */
.cil-program-course {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 14px;
    border: 1px solid var(--cil-black-light-2);
    border-radius: 10px;
    background: var(--cil-white);
}
/* The one to go on with: its border and its button in the brand's blue (P01.12, P01.13). */
.cil-program-course.is-next { padding: 11px 13px; border: 2px solid var(--cil-blue); }
.cil-program-course.is-locked { background: var(--cil-white-light-2); }
.cil-program-course.is-done { padding: 11px 13px; border: 2px solid var(--cil-green); background: var(--cil-white-light-2); }

.cil-program-course__mark { display: grid; flex: none; place-items: center; width: 40px; height: 40px; }
.cil-program-course__mark svg { width: 40px; height: 40px; }
.cil-program-course__step {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cil-black-light-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--cil-black-light-10);
}
.cil-program-course.is-next .cil-program-course__step { background: var(--cil-blue); color: var(--cil-black); }

.cil-program-course__text { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1.2; }
.cil-program-course__title { max-width: 100%; font-size: 18px; font-weight: 600; color: var(--cil-black-dark-4); overflow-wrap: anywhere; }
.cil-program-course.is-locked .cil-program-course__title { color: var(--cil-black-regular-3); }
.cil-program-course__meta { font-size: 14px; color: var(--cil-black-regular-7); }
.cil-program-course.is-locked .cil-program-course__meta { color: var(--cil-black-light-10); }

/* Under way (P01.13): how far, the share in figures, and the chapter they are in. */
.cil-program-course__progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; }
.cil-program-course__track { position: relative; flex: 0 1 146px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--cil-black-light-2); }
.cil-program-course__track > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; background: var(--cil-blue); }
.cil-program-course__percent { font-size: 14px; font-weight: 700; color: var(--cil-blue-dark-1); font-variant-numeric: tabular-nums; }

/* Done (P01.17): a green chip with the mark leading. */
.cil-program-course__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--cil-green);
    font-size: 14px;
    font-weight: 700;
    color: var(--cil-black-dark-4);
}
.cil-program-course__chip svg { flex: none; width: 14px; height: 14px; }

.cil-program-course__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.cil-program-course__lock { width: 18px; height: 18px; color: var(--cil-black-regular-3); }
.cil-course .cil-program-course__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--cil-blue);
    border-radius: 18px;
    background: var(--cil-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.cil-course .cil-program-course__go.is-primary { border-color: var(--cil-blue); background: var(--cil-blue); color: var(--cil-black); }
.cil-course .cil-program-course__go.is-done { border-color: var(--cil-green); color: var(--cil-green-dark-1); }
.cil-course .cil-program-course__go.is-done.is-primary { background: var(--cil-green); color: var(--cil-black-dark-4); }
.cil-course .cil-program-course__go:hover { filter: brightness(0.96); }
.cil-course .cil-program-course__go:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: 2px; }
.cil-course .cil-program-course__go:disabled { opacity: 0.5; cursor: default; }

/* ---- leaving the programme (P01.20) ---- */
.cil-course-leave.cil-program-leave { width: min(620px, calc(100% - 32px)); }
.cil-course .cil-program-leave .cil-course-leave__text { max-width: none; }
.cil-program-leave__scope {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--cil-red-light-4);
    border-radius: 10px;
    background: var(--cil-red-light-1);
    text-align: start;
}
.cil-course .cil-program-leave__head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cil-red-regular-7); }
.cil-program-leave__head svg { flex: none; width: 18px; height: 18px; }
/* The courses in two columns, filled down the first and then the second, as the design lists them. */
.cil-program-leave__list { columns: 2; column-gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.2; color: var(--cil-black-regular-7); }
.cil-program-leave__list li { break-inside: avoid; margin-block-end: 6px; }
.cil-program-leave__list li::before { content: "· "; }

@media (max-width: 767px) {
    .cil-program-choose { padding: 24px 16px 20px; }
    .cil-course .cil-program-choose__title { font-size: 22px; }
    /* The ways in drop under the name, beside the step it keeps. */
    .cil-program-course { flex-wrap: wrap; gap: 10px 12px; }
    .cil-program-course__text { flex-basis: calc(100% - 52px); }
    .cil-program-course__actions { flex-basis: 100%; justify-content: flex-end; }
    .cil-program-course.is-locked .cil-program-course__actions { display: none; }
    .cil-program-leave__list { columns: 1; }
}

/* A course another programme of the learner's also holds: not left, and named apart under the list. */
.cil-course .cil-program-leave__kept { margin: 4px 0 0; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--cil-black-regular-7); }